/* --- تعریف فونت‌های محلی --- */

/* Vazirmatn - با نام‌های دقیق فایل شما */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 100; /* Thin */
  src: url('../fonts/Vazirmatn-Thin.woff2') format('woff2'),
       url('../fonts/Vazirmatn-Thin.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 200; /* ExtraLight */
  src: url('../fonts/Vazirmatn-ExtraLight.woff2') format('woff2'),
       url('../fonts/Vazirmatn-ExtraLight.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 300; /* Light */
  src: url('../fonts/Vazirmatn-Light.woff2') format('woff2'),
       url('../fonts/Vazirmatn-Light.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 400; /* Regular */
  src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2'),
       url('../fonts/Vazirmatn-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 500; /* Medium */
  src: url('../fonts/Vazirmatn-Medium.woff2') format('woff2'),
       url('../fonts/Vazirmatn-Medium.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 600; /* SemiBold */
  src: url('../fonts/Vazirmatn-SemiBold.woff2') format('woff2'),
       url('../fonts/Vazirmatn-SemiBold.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 700; /* Bold */
  src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2'),
       url('../fonts/Vazirmatn-Bold.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 800; /* ExtraBold */
  src: url('../fonts/Vazirmatn-ExtraBold.woff2') format('woff2'),
       url('../fonts/Vazirmatn-ExtraBold.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 900; /* Black */
  src: url('../fonts/Vazirmatn-Black.woff2') format('woff2'),
       url('../fonts/Vazirmatn-Black.ttf') format('truetype');
  font-display: swap;
}

/* Poppins (بر اساس نام فایل‌های شما) */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400; /* Regular */
  src: url('../fonts/PoppinsLatin-Regular.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700; /* Bold */
  src: url('../fonts/PoppinsLatin-Bold.otf') format('opentype');
  font-display: swap;
}

/* Exo 2 (بر اساس نام فایل‌های شما) */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 400; /* Regular */
  src: url('../fonts/Exo2-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 600; /* Semi-Bold/Bold */
  src: url('../fonts/Exo2-SemiBold.ttf') format('truetype');
  font-display: swap;
}
/* --- پایان تعریف فونت‌ها --- */


:root {
    --brand-color: #f68420;
    --glass-blur: 25px;

    /* --- NEW: Analog clock color variables for light theme --- */
    --wave-hand-color: #333333;
    --wave-marker-color: #444444;
    --wave-dot-color: #333333;

    /* General text colors for widgets (light) */
    --apple-clock-text-color: #374151;
    --apple-clock-secondary-text-color: #6b7280;

    /* Default Background Image */
    --bg-default: url('../assets/bg/bg-1.jpg');
}

/* When dark mode is active (html has class 'dark'), override the clock colors and text colors. */
html.dark {
    /* Analog clock color variables for dark theme */
    --wave-hand-color: #e0e0e0;
    --wave-marker-color: #c0c0c0;
    --wave-dot-color: #e0e0e0;

    /* General text colors for widgets (dark) */
    --apple-clock-text-color: #f9fafb;
    --apple-clock-secondary-text-color: #d1d5db;
}

 html, body {
     width: 100%;
     height: 100%;
     margin: 0;
     padding: 0;
 }
 body {
     font-family: 'Vazirmatn', sans-serif;
     overflow: hidden;
     user-select: none;
     /* Apply initial background */
     background-image: var(--bg-default); /* Use default bg */
     background-size: cover;
     background-position: center;
     transition: background-image 1s ease-in-out;
     font-weight: 300; /* FIX: Lighter font weight */
 }
 /* Removed dark mode background rule for body */
 html[lang="en"] body, html[lang="tr"] body {
    font-family: 'Poppins', sans-serif;
    font-weight: 300; /* FIX: Lighter font weight */
 }
 .glass-effect {
    /* Increased opacity for better contrast against backgrounds */
    background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(var(--glass-blur));
     -webkit-backdrop-filter: blur(var(--glass-blur));
     border: 1px solid rgba(255, 255, 255, 0.25); /* Slightly stronger border */
     /* Transition only specific properties */
     transition: background-color 0.4s ease, border-color 0.4s ease;
 }
 html.dark .glass-effect {
    /* Increase opacity and contrast in dark mode */
    background-color: rgba(30, 30, 30, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.25);
 }

 /* --- NEW: ایده ۲ - انیمیشن‌های روان‌تر --- */
 .start-menu-container, #search-container {
     transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
     transform-origin: bottom center;
 }
 .start-menu-container.hidden, #search-container.hidden {
     opacity: 0;
     pointer-events: none;
     transform: translateY(20px) scale(0.95);
 }
 
  #power-menu, #profile-menu, #notification-center, #language-menu, #context-menu {
     transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 /* تنظیم transform-origin بر اساس موقعیت */
 #power-menu { transform-origin: bottom right; } /* اصلاح شد */
 #profile-menu { transform-origin: bottom left; }
 #notification-center, #language-menu { transform-origin: bottom right; }
 #context-menu { transform-origin: top left; } /* (این توسط JS تنظیم می‌شود) */
 
 .window {
      transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }

 #power-menu.hidden, #profile-menu.hidden, .window.hidden, #notification-center.hidden, #language-menu.hidden, #context-menu.hidden {
     opacity: 0;
     pointer-events: none;
     transform: scale(0.95); /* افکت Pop */
 }
 /* --- END NEW: انیمیشن‌ها --- */


 .draggable {
     position: absolute;
 }
 /* Added rule to disable ALL transitions while dragging */
 .draggable.dragging, .window.dragging {
     transition: none !important;
 }
 .cursor-grab {
     cursor: grab;
 }
 .cursor-grab:active {
     cursor: grabbing;
 }

 @keyframes fadeInUp {
     from { opacity: 0; transform: translateY(20px); }
     to { opacity: 1; transform: translateY(0); }
 }
 .desktop-item {
     opacity: 0;
     animation: fadeInUp 0.5s ease-out forwards;
 }
 #context-menu { position: absolute; z-index: 10000; min-width: 220px; }
 /* MODIFICATION: Changed 'div' to 'button' for accessibility */
 #context-menu button { padding: 8px 12px; cursor: pointer; display: flex; align-items: center; gap: 8px; width: 100%; text-align: inherit; }
 /* MODIFICATION: Changed 'div:hover' to 'button:hover' */
 #context-menu button:hover { background-color: rgba(255, 255, 255, 0.2); }
 /* MODIFICATION: Changed 'html.dark #context-menu div:hover' to 'html.dark #context-menu button:hover' */
 html.dark #context-menu button:hover { background-color: rgba(0, 0, 0, 0.3); }

 .screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; transition: opacity 0.5s ease-out; z-index: 10001; }
 #loading-screen { background-color: #000; }
 #login-screen { backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); background-color: rgba(0,0,0,0.3); overflow: hidden; }
 .fade-out { opacity: 0; pointer-events: none; }

 .window { min-width: 400px; min-height: 300px; position: absolute; resize: both; overflow: hidden; display: flex; flex-direction: column; }
 /* Window header needs explicit transition for color */
 .window-header {
     flex-shrink: 0;
     transition: border-color 0.4s ease; /* Transition border color on theme change */
  }
 /* --- FIX: Settings window tab layout styles --- */
 /* --- STYLES REMOVED --- */
 /* --- END: Settings window styles --- */


 /* Theme Toggle Switch */
 .theme-switch-wrapper { display: flex; align-items: center; }
 .theme-switch { display: inline-block; height: 34px; position: relative; width: 60px; }
 .theme-switch input { display:none; }
 .slider { background-color: #ccc; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: .4s; }
 .slider:before { background-color: #fff; bottom: 4px; content: ""; height: 26px; left: 4px; position: absolute; transition: .4s; width: 26px; display: flex; align-items: center; justify-content: center; }
 input:checked + .slider { background-color: #374151; }
 input:checked + .slider:before { transform: translateX(26px); }
 .slider.round { border-radius: 34px; }
 .slider.round:before { border-radius: 50%; }
 .slider.round:before {
     content: ''; background-repeat: no-repeat; background-position: center; background-size: 16px 16px;
     background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="%23374151"%3E%3Cpath stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364-6.364l-.707.707M6.343 17.657l-.707.707m12.728 0l-.707-.707M6.343 6.343l-.707-.707m12.728 10.607a4.5 4.5 0 11-6.364-6.364 4.5 4.5 0 016.364 6.364z" /%3E%3C/svg%3E');
 }
 input:checked + .slider.round:before {
     background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="%23ffffff"%3E%3Cpath d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" /%3E%3C/svg%3E');
 }
 .slider .sun-icon, .slider .moon-icon { display: none; }


 #theme-color-picker span { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: all 0.2s; }
 #theme-color-picker span.active { border-color: #fff; transform: scale(1.1); box-shadow: 0 0 8px rgba(0,0,0,0.5); }

 #login-screen.login-active #lock-screen-info { transform: translateY(-100%); }
 #login-screen.login-active #login-form-container { transform: translateY(0); }
 #password-input::placeholder { color: rgba(255, 255, 255, 0.7); }
 @keyframes shake {
   10%, 90% { transform: translate3d(-1px, 0, 0); }
   20%, 80% { transform: translate3d(2px, 0, 0); }
   30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
   40%, 60% { transform: translate3d(4px, 0, 0); }
 }
 .shake-error { animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; }

 /* MODIFICATION: Changed '#language-menu > div' to '#language-menu > button' */
 #language-menu > button {
     border: 2px solid transparent;
     transition: all 0.2s;
 }
 /* MODIFICATION: Changed '#language-menu > div.active' to '#language-menu > button.active' */
 #language-menu > button.active {
    border-color: var(--brand-color);
 }
 /* MODIFICATION: Changed '#language-menu > div:hover' to '#language-menu > button:hover' */
 #language-menu > button:hover {
     background-color: rgba(255, 255, 255, 0.2);
 }
 /* MODIFICATION: Changed 'html.dark #language-menu > div:hover' to 'html.dark #language-menu > button:hover' */
 html.dark #language-menu > button:hover {
     background-color: rgba(0, 0, 0, 0.3);
 }

 @keyframes fadeIn-up {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- New Candlestick Loader Styles --- */
.candlestick-wrapper {
     opacity: 0;
     transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 .move-down {
     transform: translateY(-40px);
 }
 .move-up {
     transform: translateY(40px);
 }
 .candlestick-wrapper.visible {
     opacity: 1;
     transform: translateY(0);
 }
 #signature {
     font-family: 'Exo 2', sans-serif;
     opacity: 0;
     transform: translateY(20px);
     transition: opacity 1.2s ease-out, transform 1.2s ease-out;
 }
 #signature.visible {
     opacity: 1;
     transform: translateY(0);
 }
 /* Rates Widget Style */
 /* --- FIX: انیمیشن‌های نرخ ارز حذف شدند --- */
 /*
 .crw-price-update { ... }
 .crw-price-up { ... }
 .crw-price-down { ... }
 @keyframes crw-flashYellow { ... }
 @keyframes crw-flashGreen { ... }
 @keyframes crw-flashRed { ... }
 */
 /* --- END FIX --- */
 
 /* استایل‌های ویجت قدیمی حذف شدند */


 /* --- TASK 1: استایل‌های ساعت (موج‌ها حذف شدند) --- */
 #wave-clock-widget {
    /* رنگ عنوان از .widget ارث‌بری می‌کند */
 }
 .wave-clock-face {
    width: 100%;
    /* --- ارتفاع صفحه ساعت کاهش یافت --- */
    height: 200px;
    position: relative;
    /* --- مرکزیت بر اساس عرض 288 پیکسل و ارتفاع 200 پیکسل --- */
    --center-x: 144px; /* 288px / 2 */
    --center-y: 100px; /* 200px / 2 */
 }
 .wave-marker-container {
    position: absolute; left: 0; top: 0; width: 100%; height: 100%;
 }
 .wave-marker {
    position: absolute;
    /* --- موقعیت بر اساس مرکز 100 پیکسل --- */
    top: 10px; /* فاصله از لبه بالایی صفحه ساعت */
    left: 50%;
    width: 6px;
    height: 22px;
    background-color: var(--wave-marker-color);
    border-radius: 3px;
    transform: translateX(-50%); 
    transition: background-color 0.4s ease;
 }
 .wave-clock-face .hand {
    position: absolute; 
    transform-origin: bottom center;
    left: var(--center-x); 
    top: var(--center-y);
    background-color: var(--wave-hand-color); 
    border-radius: 4px; 
    z-index: 10;
    transition: background-color 0.4s ease;
 }
 .wave-hour-hand {
    /* --- طول عقربه‌ها بر اساس صفحه کوچکتر --- */
    width: 8px; height: 50px;
    transform: translate(-50%, -100%) rotate(0deg); 
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease;
 }
 .wave-minute-hand {
    width: 6px; height: 75px;
    transform: translate(-50%, -100%) rotate(0deg); z-index: 11;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease;
 }
 .wave-second-hand {
    width: 2px;
    height: 85px;
    /* Use the same hand color variable so the second hand adapts to the current theme */
    /* Always derive the second hand color from the theme variable. Use !important to ensure no other rules override it. */
    background-color: var(--wave-hand-color) !important;
    transform: translate(-50%, -100%) rotate(0deg);
    z-index: 12;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease;
}
/* Remove the dark override: the second hand color now follows the --wave-hand-color variable */
html.dark .wave-second-hand {
    /* Repeat for dark theme to reinforce variable usage */
    background-color: var(--wave-hand-color) !important;
}
 .wave-center-dot {
    position: absolute; 
    left: var(--center-x); 
    top: var(--center-y);
    width: 14px; height: 14px; 
    background-color: var(--wave-dot-color);
    border-radius: 50%; 
    transform: translate(-50%, -50%); 
    z-index: 13;
    transition: background-color 0.4s ease;
 }
 /* --- استایل‌های موج حذف شدند --- */
 /* .wave-decoration, .wave-svg, @keyframes wave-breath ... */
 
 /* --- استایل بخش پایین اصلاح شد --- */
 .wave-bottom-info-container {
    position: relative; /* دیگر شناور نیست */
    width: 100%;
    /* رنگ متن از متغیرهای عمومی ویجت ارث‌بری می‌کند */
    color: var(--apple-clock-secondary-text-color);
    font-weight: 500;
    padding: 0.75rem 1rem; /* 12px 16px */
    /* خط جداکننده */
    border-top: 1px solid rgba(128, 128, 128, 0.2);
    transition: border-color 0.4s ease;
 }
 html.dark .wave-bottom-info-container {
    border-top-color: rgba(255, 255, 255, 0.15);
 }
 .wave-secondary-info {
    display: flex;
    /* FIX: justify-between شد تا ساعت و تاریخ را از هم جدا کند */
    justify-content: space-between; 
    align-items: center;
    width: 100%;
    font-size: 0.9rem; /* کمی کوچکتر */
    opacity: 0.95;
    transition: color 0.4s ease;
 }
 .wave-digital-display {
    direction: ltr; 
    letter-spacing: 0.5px;
 }
 .wave-date-display {
    /* تنظیمات خاصی نیاز ندارد */
 }
 /* --- استایل‌های آب و هوا حذف شدند --- */
 /* .wave-weather-display, .wave-city-name, .wave-weather-value ... */

 /* --- END: استایل‌های ساعت --- */


 /* --- NEW News Feed Widget Styles --- */
 .news-feed-widget {
     width: 450px;
     height: 250px;
     display: flex; flex-direction: column;
     color: var(--apple-clock-text-color); /* Apply main text color */
     transition: color 0.4s ease; /* Add transition for text color */
 }
 .news-feed-widget .news-container {
     flex-grow: 1; overflow-y: auto; padding-right: 4px;
 }
 .news-feed-widget .news-container::-webkit-scrollbar { width: 5px; }
 .news-feed-widget .news-container::-webkit-scrollbar-track { background: transparent; }
 .news-feed-widget .news-container::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
 html.dark .news-feed-widget .news-container::-webkit-scrollbar-thumb { background: #4b5563; }
 .news-feed-widget .news-container::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
 html.dark .news-feed-widget .news-container::-webkit-scrollbar-thumb:hover { background: #6b7280; }

 .news-feed-widget .news-item-link {
    display: block; padding: 8px 6px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.15);
    transition: background-color 0.2s ease-in-out, border-color 0.4s ease; /* Add border transition */
    cursor: pointer;
 }
 html.dark .news-feed-widget .news-item-link {
     border-bottom-color: rgba(255, 255, 255, 0.1); /* Lighter border */
 }
 .news-feed-widget .news-item-link:last-child { border-bottom: none; }
 .news-feed-widget .news-item-link:hover { background-color: rgba(255, 255, 255, 0.1); }
 html.dark .news-feed-widget .news-item-link:hover { background-color: rgba(0, 0, 0, 0.15); }

 .news-feed-widget .news-item-title {
    font-weight: 500; color: var(--apple-clock-text-color); /* Use variable */
    line-height: 1.5; font-size: 0.85rem;
    transition: color 0.4s ease; /* Transition color */
 }
 .news-feed-widget .news-item-link:hover .news-item-title { color: var(--brand-color); }

 .news-feed-widget .news-item-summary, .news-feed-widget .news-item-category { display: none; }

 .news-feed-widget #news-search-input {
     width: 100%; padding: 6px 10px; font-size: 0.8rem;
     background-color: rgba(255, 255, 255, 0.3); border: none;
     border-radius: 8px; color: var(--apple-clock-text-color); /* Use variable */
     outline: none;
     transition: background-color 0.3s, color 0.4s ease; /* Transition color */
 }
 html.dark .news-feed-widget #news-search-input { background-color: rgba(0, 0, 0, 0.2); }
 .news-feed-widget #news-search-input::placeholder { color: var(--apple-clock-secondary-text-color); opacity: 0.8; transition: color 0.4s ease;} /* Use variable */
 .news-feed-widget #news-search-input:focus { background-color: rgba(255, 255, 255, 0.5); }
 html.dark .news-feed-widget #news-search-input:focus { background-color: rgba(0, 0, 0, 0.3); }

 /* General text color for widgets not covered by specifics */
 .widget {
      color: var(--apple-clock-text-color);
      transition: color 0.4s ease;
 }
 /* Ensure profile widget text also transitions */
 #profile-widget h3, #profile-widget p {
      color: inherit; /* Inherit from .widget */
      transition: color 0.4s ease;
 }
 /* Specific adjustments if needed */
 html.dark #profile-widget p.opacity-80 {
     color: var(--apple-clock-secondary-text-color); /* Use secondary color */
 }
 html #profile-widget p.opacity-80 {
     color: var(--apple-clock-secondary-text-color); /* Use secondary color */
 }
 
 /* --- NEW: Fix profile bio alignment based on language direction --- */
 /* FIX: Set justify for all languages as requested */
 [data-translate-key="profileBio"] {
    text-align: justify; /* Default for FA (RTL) */
 }
 /* FIX: Removed LTR override to keep justify */
 /*
 html[dir="ltr"] [data-translate-key="profileBio"] {
    text-align: left;
 }
 */
 /* --- END NEW --- */
 
 /* Adjust notification center text color */
  #notification-center h3, #notification-center p {
      transition: color 0.4s ease;
  }
 html #notification-center { color: #374151; }
 html.dark #notification-center { color: #f9fafb; }
 html #notification-center p.opacity-80 { color: #6b7280; }
 html.dark #notification-center p.opacity-80 { color: #d1d5db; }

 /* Adjust start menu text */
 html #start-menu-container { color: #374151; }
 html.dark #start-menu-container { color: #f9fafb; }
 html #start-menu-tabs button { color: #6b7280; }
 html.dark #start-menu-tabs button { color: #d1d5db; }
 html #start-menu-tabs button.active { color: var(--brand-color) !important; } /* Important needed due to inline style */
 html.dark #start-menu-tabs button.active { color: var(--brand-color) !important; }
 html #app-grid span { color: #4b5563; }
 html.dark #app-grid span { color: #e5e7eb; }

 /* Adjust context menu text */
  html #context-menu { color: #374151; }
  html.dark #context-menu { color: #f9fafb; }

 /* Adjust search container text */
 html #search-container { color: #374151; }
 html.dark #search-container { color: #f9fafb; }
 html #search-results span { color: #4b5563; }
 html.dark #search-results span { color: #e5e7eb; }
 html #search-input::placeholder { color: #6b7280; }
 html.dark #search-input::placeholder { color: #9ca3af; }

/* ------------------------------------------------------------------------
 * Language-specific font and layout adjustments
 * In English and Turkish interfaces the default fonts appeared too bold.
 * The following rules thin out bold weights and justify paragraph text.
 * Additionally, when Persian content appears in these languages (e.g. news
 * items or the Tabriz weather location) we force the Vazirmatn font and
 * right‑to‑left direction to preserve readability.
 */
html[lang='en'] body,
html[lang='tr'] body {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
}
html[lang='en'] .font-bold,
html[lang='tr'] .font-bold {
    font-weight: 500 !important;
}
html[lang='en'] .font-semibold,
html[lang='tr'] .font-semibold {
    font-weight: 400 !important;
}
html[lang='en'] p,
html[lang='tr'] p,
html[lang='en'] .news-item-title,
html[lang='tr'] .news-item-title {
    text-align: justify;
}
html[lang='en'] #news-feed-widget-container,
html[lang='tr'] #news-feed-widget-container,
html[lang='en'] #weather-widget,
html[lang='tr'] #weather-widget {
    direction: rtl;
    font-family: 'Vazirmatn', sans-serif;
}

/* ------------------------------------------------------------------------
 * Quotes Widget styles
 * The inspirational quotes widget shares the same dimensions as the news feed.
 */
/* Base styling for the inspirational quotes widget */
/* Base styling for the inspirational quotes widget */
.quotes-widget {
    /* Slightly narrower size for desktop to maintain a minimalist look and prevent oversized appearance */
    width: 288px;
    height: 240px;
    display: flex;
    flex-direction: column;
    color: var(--apple-clock-text-color);
    transition: color 0.4s ease;
}

/* Ensure the quotes widget occupies full width on mobile like other cards */
@media (max-width: 767px) {
  .quotes-widget {
    /* Make the quotes card the same width as other cards */
    width: 100% !important;
    /* Set a consistent height to match other widgets (e.g. news/rates/weather) */
    height: 250px;
    min-height: 250px;
    max-height: 250px;
  }
  /* Allow the inner content to scroll if it overflows the fixed height */
  .quotes-widget .quote-text-container {
    overflow-y: auto;
  }
}

/* ------------------------------------------------------------------------
 * News Feed Widget styles
 * Match the dimensions of other card widgets on desktop and become full width on mobile.
 */
.news-feed-widget {
    width: 320px;
    height: 250px;
}
@media (max-width: 767px) {
  .news-feed-widget {
    width: 100% !important;
    height: auto;
  }
}
/* Styling for the inspirational quotes widget */
.quotes-widget .quotes-content {
    /* Make the content fill available space without changing the card size */
    flex-grow: 1;
    padding: 0; /* Padding handled in inner containers */
    overflow: hidden; /* Prevent the outer container from resizing due to text */
    display: flex;
    align-items: stretch;
}

/* Wrapper containing both info section and text section */
.quotes-widget .quote-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
}

/* Left side: category, book title, author and an icon */
.quotes-widget .quote-info {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    text-align: center;
}

/* Icon used in the info section */
.quotes-widget .quote-info img.quote-icon {
    /* Make the portrait slightly larger and circular */
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 0.5rem;
}

/* Category pill */
.quotes-widget .quote-category {
    font-size: 0.65rem;
    font-weight: 600;
    color: white;
    background-color: var(--brand-color);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    margin-bottom: 0.5rem;
    display: inline-block;
}

/* Book title */
.quotes-widget .quote-book-title {
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

/* Author name */
.quotes-widget .quote-author {
    font-weight: 400;
    font-size: 0.75rem;
    opacity: 0.8;
}

/* Right side: quote text container */
.quotes-widget .quote-text-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.75rem;
    overflow-y: auto;
    box-sizing: border-box;
}

/* Quote text styling */
.quotes-widget .quote-text {
    /* Slightly smaller font size to reduce the overall height on desktop */
    font-size: 0.75rem;
    line-height: 1.5;
    text-align: justify;
    /* Ensure long words wrap within the container and don't cause resize */
    word-wrap: break-word;
    white-space: normal;
}

/* On small screens, make the quotes widget span the full width and allow its height to adapt. */
@media (max-width: 767px) {
    .quotes-widget {
        /* On small screens take the full width to align with other widgets. Use !important to override the desktop width. */
        width: 100% !important;
        /* Let the height depend on its content like other widgets. */
        height: auto !important;
    }
}

/* Reduce fonts for quotes widget in English and Turkish to prevent scrolling */
html[lang='en'] .quotes-widget .quote-text,
html[lang='tr'] .quotes-widget .quote-text {
    /* Further reduce font size for English and Turkish quotes to avoid overflow with narrower card */
    font-size: 0.68rem;
    line-height: 1.4;
}
html[lang='en'] .quotes-widget .quote-book-title,
html[lang='tr'] .quotes-widget .quote-book-title {
    font-size: 0.8rem;
}
html[lang='en'] .quotes-widget .quote-author,
html[lang='tr'] .quotes-widget .quote-author {
    font-size: 0.65rem;
}
html[lang='en'] .quotes-widget .quote-category,
html[lang='tr'] .quotes-widget .quote-category {
    font-size: 0.6rem;
    padding: 0.2rem 0.5rem;
}

 /* Adjust language/power/profile menus */
 html #language-menu, html #power-menu, html #profile-menu { color: #374151; }
 html.dark #language-menu, html.dark #power-menu, html.dark #profile-menu { color: #f9fafb; }
 
 /* --- NEW: Weather Widget Styles --- */
 /* --- FIX: حذف استایل‌های کارت پیش‌بینی --- */
 /*
 .tw-forecast-card { ... }
 html.dark .tw-forecast-card { ... }
 html.dark .tw-forecast-card .font-light { ... }
 */