/**
 * dz News Ticker Frontend Styles
 * Final stable version with a truly seamless animation and typewriter effect.
 *
 * @package    dz_News_Ticker
 * @subpackage Public/Assets
 * @author     Ali Benkhettou
 * @version    1.0.3
 */

/* ==========================================================================
   1. General Settings & Variables
   ========================================================================== */

:root {
	--ant-speed: 30s;
	--ant-bg-standard: #003366;
	--ant-text-standard: #ffffff;
	--ant-bg-breaking: #e60000;
	--ant-text-breaking: #ffffff;
	--ant-bg-latest: #ffc107;
	--ant-text-latest: #111111;
}

/* ==========================================================================
   2. Mobile Top Bar (Live News)
   ========================================================================== */

.ant-top-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99998;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 15px;
	box-sizing: border-box;
	min-height: 45px;
	color: #ffffff;
	background-color: rgba(20, 20, 20, 0.85);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transform: translateY(-100%);
	transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
	font-size: 14px;
	line-height: 1.4;
}

.ant-top-bar.visible {
	transform: translateY(0);
}

body.admin-bar .ant-top-bar {
	top: 32px;
}
@media screen and (max-width: 782px) {
	body.admin-bar .ant-top-bar {
		top: 46px;
	}
}

.ant-top-bar.breaking-bar {
	background-color: var(--ant-bg-breaking);
	color: var(--ant-text-breaking);
}

.ant-top-bar.latest-bar {
	background-color: var(--ant-bg-latest);
	color: var(--ant-text-latest);
}

.ant-top-bar-content {
	flex-grow: 1;
	margin-right: 15px;
}

.ant-top-bar-text {
	margin: 0;
	padding: 0;
}

.ant-top-bar-text strong {
	font-weight: 800;
	margin-left: 8px;
}

.ant-top-bar-close {
	flex-shrink: 0;
	background: none;
	border: none;
	color: inherit;
	opacity: 0.7;
	font-size: 24px;
	padding: 0 5px;
	cursor: pointer;
	line-height: 1;
}

.ant-top-bar-close:hover {
	opacity: 1;
}

/* ==========================================================================
   3. Main Container (Standard Ticker)
   ========================================================================== */

#ant-master-container {
	position: fixed;
	right: 0;
	width: 100%;
	z-index: 10000;
	box-sizing: border-box;
}

#ant-master-container.position-bottom {
	bottom: 0;
}

#ant-master-container.position-top {
	top: 0;
}

.ant-ticker-wrapper {
	display: flex;
	align-items: stretch;
	overflow: hidden;
	background-color: #ffffff;
	color: #333;
	height: 60px;
	box-sizing: border-box;
}

.ant-ticker-label {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
	font-weight: 700;
	font-size: 1.3rem;
	flex-shrink: 0;
	min-width: 150px;
	text-align: center;
	box-sizing: border-box;
}

.ant-ticker-content {
	flex-grow: 1;
	overflow: hidden;
	position: relative;
}

.ant-ticker-content a {
	text-decoration: none;
	color: inherit;
	display: block;
}

.ant-ticker-content a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   4. Seamless Standard Ticker Animation (NEW LOGIC)
   ========================================================================== */

.ant-standard-ticker-wrapper {
	box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
	width: 98%;
	margin: 0 auto;
}

#ant-master-container.position-top .ant-standard-ticker-wrapper {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ant-standard-news .ant-ticker-label {
	background-color: var(--ant-bg-standard);
	color: var(--ant-text-standard);
}

.ant-standard-news .ant-ticker-content ul.ant-standard-ticker-list {
	display: block;
	position: relative;
	height: 100%;
	margin: 0;
	padding: 0;
}

.ant-standard-news .ant-ticker-content .ant-news-block {
	width: auto;
	height: 100%;
	display: flex;
	align-items: center;
	flex-shrink: 0;
	justify-content: flex-start;
	position: absolute;
	animation-name: ant-continuous-scroll-rtl;
	animation-duration: var(--ant-speed);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-fill-mode: backwards;
}

.ant-ticker-content:hover .ant-news-block {
	animation-play-state: paused;
}

.ant-standard-news .ant-ticker-content .ant-news-block:last-child {
	animation-delay: calc(var(--ant-speed) / 2);
}

.ant-standard-news .ant-ticker-content ul.ltr .ant-news-block {
	animation-name: ant-continuous-scroll-ltr;
}

.ant-standard-news .ant-ticker-content li {
	padding: 0 15px;
	white-space: nowrap;
	flex-shrink: 0;
}

.ant-ticker-separator {
	padding: 0 !important;
}

.ant-ticker-separator img {
	height: 25px;
	width: auto;
	vertical-align: middle;
	margin: 0 10px;
}

/* --- Typewriter Styles for Standard Ticker --- */
.ant-typewriter-content {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 15px;
}
.ant-typewriter-text {
	font-size: 16px;
}
.ant-typewriter-text.is-typing::after {
	content: '▋';
	display: inline-block;
	animation: ant-blinking-cursor 0.8s infinite;
	margin-right: 5px;
	color: #333;
}
/* --- END: Typewriter Styles --- */


/* ==========================================================================
   5. Desktop Live Tickers
   ========================================================================== */

.ant-live-ticker {
	display: none;
	position: absolute;
	left: 50%;
	width: 98%;
	z-index: 10001;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);
	opacity: 0;
	transform: translate(-50%, 100px);
	pointer-events: none;
	transition: transform 0.5s ease-out, opacity 0.4s ease-out;
	overflow: hidden;
}

#ant-master-container.position-bottom .ant-live-ticker { bottom: 65px; border-top-left-radius: 8px; border-top-right-radius: 8px; }
#ant-master-container.position-top .ant-live-ticker { top: 65px; transform: translate(-50%, -100px); border-radius: 0 0 8px 8px; }
.ant-live-ticker.visible { display: block; opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.ant-live-ticker .ant-ticker-wrapper { min-height: 80px; height: auto; }
.ant-live-ticker .ant-ticker-label { font-size: 3rem; animation: ant-text-pulse 1.2s ease-in-out infinite; }
.ant-live-ticker .ant-ticker-content { padding: 15px 20px; display: flex; align-items: center; }
.ant-live-ticker .ant-ticker-content p, .ant-live-ticker .ant-ticker-content ul li { font-size: 1.4rem; font-weight: 700; line-height: 1.5; white-space: normal; padding: 0; margin: 0; text-align: right; width: 100%; }
.ant-breaking-news .ant-ticker-label { background-color: var(--ant-bg-breaking); color: var(--ant-text-breaking); }
.ant-latest-news .ant-ticker-label { background-color: var(--ant-bg-latest); color: var(--ant-text-latest); }
.ant-breaking-news .ant-ticker-content p.is-typing::after { content: '▋'; display: inline-block; animation: ant-blinking-cursor 0.8s infinite; margin-right: 5px; color: var(--ant-bg-breaking); }

/* ==========================================================================
   6. Animations & Keyframes (NEW LOGIC)
   ========================================================================== */

@keyframes ant-continuous-scroll-rtl {
  from {
    transform: translateX(calc(100% + 30px));
  }
  to {
    transform: translateX(calc(-100% - 30px));
  }
}

@keyframes ant-continuous-scroll-ltr {
  from {
    transform: translateX(calc(-100% - 30px));
  }
  to {
    transform: translateX(calc(100% + 30px));
  }
}

@keyframes ant-text-pulse { 0%, 100% { text-shadow: 0 0 4px rgba(255, 255, 255, 0.4); } 50% { text-shadow: 0 0 16px rgba(255, 255, 255, 1); } }
@keyframes ant-blinking-cursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ==========================================================================
   7. Responsive Styles
   ========================================================================== */

@media (max-width: 768px) {
	.ant-ticker-wrapper { height: 40px; }
	.ant-standard-ticker-wrapper { width: 100%; }
	.ant-ticker-label { font-size: 1rem; min-width: auto; padding: 0 12px; }
	.ant-standard-news .ant-ticker-content li, .ant-standard-news .ant-ticker-content li a { font-size: 14px; }
	.ant-live-ticker { display: none !important; }

	body.ant-hide-standard-mobile #ant-master-container {
		display: none !important;
	}
}

/* ==========================================================================
   8. Weather Widget Styles
   ========================================================================== */

.ant-ticker-label {
    justify-content: space-between; /* يوزع "الحدث" والطقس على طرفي الحاوية */
    gap: 15px; /* يضيف مسافة بسيطة بينهما */
}

.ant-weather-widget {
    display: flex;
    align-items: center;
    font-size: 1.1rem;
    font-weight: 600;
    white-space: nowrap; /* يمنع نزول النص لسطر جديد */
    flex-shrink: 0; /* يمنع العنصر من الانكماش */
}

.ant-weather-icon {
    width: 32px;
    height: 32px;
    margin-top: -3px; /* تعديلات طفيفة للمحاذاة العمودية */
}

.ant-weather-temp {
    direction: ltr; /* مهم جداً لعرض درجة الحرارة بشكل صحيح (25°C) */
    padding: 0 5px;
}