* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Tahoma, 'Segoe UI', 'Roboto', 'Open Sans', Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #ffffff 0%, #f5f7fa 50%, #e8ecf1 100%);
            min-height: 100vh;
            padding: 20px;
            line-height: 1.8;
            position: relative;
        }
        
        /* اطمینان از استفاده Tahoma برای متن فارسی */
        * {
            font-family: Tahoma, 'Segoe UI', 'Roboto', 'Open Sans', Geneva, Verdana, sans-serif;
        }
        
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 20% 50%, rgba(241, 196, 15, 0.05) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(30, 60, 114, 0.05) 0%, transparent 50%);
            pointer-events: none;
            z-index: 0;
        }

        .container {
            max-width: 1600px;
            margin: 0 auto;
            background: #ffffff;
            border-radius: 16px;
            border-top: 5px solid #1e3c72;
            box-shadow: 
                0 20px 60px rgba(30, 60, 114, 0.12),
                0 8px 25px rgba(30, 60, 114, 0.08),
                0 0 0 1px rgba(30, 60, 114, 0.05);
            position: relative;
            display: flex;
            flex-direction: row;
            direction: ltr;
            min-height: 100vh;
            overflow: visible;
            z-index: 1;
        }
        
        .main-content {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            overflow-x: hidden;
            background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
            position: relative;
            order: 2;
            direction: rtl;
        }
        
        .main-content::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(30, 60, 114, 0.1), transparent);
        }
        
        /* فوتر - وب‌پارت جداگانه */
        .app-footer {
            margin-top: auto;
            padding: 25px 30px;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border: 3px solid #e74c3c;
            border-radius: 8px;
            text-align: center;
            color: #555;
            font-size: 0.9em;
            direction: rtl;
            box-sizing: border-box;
        }
        
        .app-footer p {
            margin: 8px 0;
            line-height: 1.6;
        }
        
        .app-footer strong {
            color: #1e3c72;
        }

        .footer-bottom-bar {
            margin-top: 0;
            padding: 14px 20px;
            background: linear-gradient(135deg, #1e3c72 0%, #2c5282 100%);
            text-align: center;
            border-top: 3px solid #f1c40f;
            box-sizing: border-box;
        }
        .footer-bottom-inner {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 8px 12px;
            color: rgba(255, 255, 255, 0.9);
            font-size: 0.9em;
        }
        .footer-bottom-site {
            font-weight: 600;
            color: #fff;
        }
        .footer-bottom-sep {
            color: rgba(255, 255, 255, 0.5);
            font-weight: 700;
        }
        .footer-bottom-link {
            color: #f1c40f;
            text-decoration: none;
            font-weight: 600;
            transition: color 0.2s ease, text-decoration 0.2s ease;
        }
        .footer-bottom-link:hover {
            color: #f7dc6f;
            text-decoration: underline;
        }
        .footer-bottom-credit {
            color: #f1c40f;
            font-weight: 600;
        }

        .pwa-install-bar {
            padding: 12px 20px;
            margin: 0;
            background: linear-gradient(135deg, #0f172a 0%, #1e3c72 100%);
            color: #fff;
            text-align: center;
            border-radius: 8px;
            margin-bottom: 12px;
        }
        .pwa-install-bar .pwa-install-text {
            display: inline-block;
            margin-left: 8px;
            font-size: 0.95rem;
        }
        .pwa-install-bar .pwa-install-btn {
            background: #f1c40f;
            color: #0f172a;
            border: none;
            padding: 8px 16px;
            border-radius: 6px;
            font-weight: 600;
            cursor: pointer;
            font-size: 0.9rem;
        }
        .pwa-install-bar .pwa-install-btn:hover {
            background: #f4d03f;
        }
        .pwa-install-bar .pwa-install-fallback {
            font-size: 0.85rem;
            opacity: 0.95;
            margin-right: 8px;
        }
        .pwa-install-bar .pwa-install-hint {
            margin: 8px 0 0;
            font-size: 0.8rem;
            opacity: 0.9;
        }
        
        .slide-visitor-text {
            position: absolute;
            top: 2px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 1em;
            font-weight: 700;
            color: #ffffff;
            direction: ltr;
            white-space: nowrap;
            z-index: 5;
            text-shadow: 
                0 2px 8px rgba(0, 0, 0, 0.5),
                0 0 12px rgba(241, 196, 15, 0.3);
            letter-spacing: 0.5px;
        }
        .slide-visitor-text .visitor-count-value {
            color: #f1c40f;
            font-weight: 800;
            font-size: 1.1em;
            text-shadow: 
                0 2px 10px rgba(241, 196, 15, 0.6),
                0 0 16px rgba(241, 196, 15, 0.4);
            margin-left: 4px;
        }
        
        .right-sidebar {
            padding: 25px;
            background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
            border-left: 5px solid #1e3c72;
            width: 280px;
            min-width: 280px;
            max-width: 280px;
            position: sticky;
            top: 0;
            align-self: flex-start;
            height: 100vh;
            max-height: 100vh;
            overflow-y: auto;
            overflow-x: hidden;
            box-shadow: 
                4px 0 15px rgba(30, 60, 114, 0.08),
                inset -1px 0 0 rgba(30, 60, 114, 0.1);
            direction: rtl;
            z-index: 10;
            order: 1;
            flex-shrink: 0;
            display: flex !important;
            flex-direction: column;
            visibility: visible !important;
            box-sizing: border-box;
            margin: 0;
        }
        
        .right-sidebar .book-summary-section,
        .right-sidebar .donation-section,
        .right-sidebar .ad-registration-section {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            width: 100%;
            box-sizing: border-box;
        }
        
        /* Ensure sidebar and sections are visible on desktop */
        @media (min-width: 969px) {
            .right-sidebar {
                display: flex !important;
                visibility: visible !important;
                width: 280px !important;
                min-width: 280px !important;
                max-width: 280px !important;
            }
            
            .right-sidebar .book-summary-section,
            .right-sidebar .donation-section,
            .right-sidebar .ad-registration-section {
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
                width: 100% !important;
            }
            
            /* Desktop: Test + En/Fr in one row, same height */
            .test-lang-row {
                display: flex;
                flex-direction: row;
                align-items: stretch;
                gap: 8px;
                flex-wrap: nowrap;
                min-height: 38px;
            }
            .test-lang-row .test-number-select-inrow {
                flex: 1;
                min-width: 0;
                max-width: 65%;
                width: auto;
                margin: 0;
                display: block;
                transition: all 0.2s ease;
                height: 100%;
                min-height: 38px;
                box-sizing: border-box;
                padding: 6px 10px;
                line-height: 1.3;
            }
            .test-lang-row .main-lang-mode-inrow {
                flex-shrink: 0;
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                align-items: stretch;
                gap: 4px;
                margin: 0;
            }
            .test-lang-row .main-lang-mode-inrow .lang-mode-btn-mini {
                margin: 0;
                height: 100%;
                min-height: 38px;
                box-sizing: border-box;
                padding: 6px 14px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }
            
            .test-selector .test-number-select:hover {
                border-color: #f39c12;
            }
            
            .test-selector .test-number-select:focus {
                border-color: #f39c12;
                outline: none;
            }
            
            /* Desktop: همخوان با باکس مطالعه کتاب و sidebar، قاب نارنجی */
            .test-navigator {
                margin-top: 0;
                margin-bottom: 14px;
                padding: 6px 5px;
                width: calc(100% + 40px);
                max-width: none;
                margin-left: -20px;
                margin-right: -20px;
                border-radius: 12px;
                background: linear-gradient(135deg, #1e3c72 0%, #2c5282 100%);
                border: 2.5px solid #f39c12;
                box-shadow: 0 3px 12px rgba(30, 60, 114, 0.25), 0 0 0 1px rgba(243, 156, 18, 0.15);
                position: relative;
                z-index: 1;
                box-sizing: border-box;
            }
            
            /* Desktop: دکمه‌ها هماهنگ با باکس، گرادیان نارنجی/طلایی */
            .test-navigator .test-nav-btn {
                background: linear-gradient(145deg, #e67e22 0%, #f39c12 50%, #f1c40f 100%) !important;
                color: #1a1a2e !important;
                font-weight: 700;
                font-size: 0.82em;
                border: 1px solid rgba(243, 156, 18, 0.5);
                box-shadow: 0 2px 6px rgba(230, 126, 34, 0.3);
                white-space: nowrap;
                transition: all 0.2s ease;
                padding: 4px 12px;
                border-radius: 8px;
                cursor: pointer;
            }
            
            .test-navigator .test-nav-btn.prev,
            .test-navigator .test-nav-btn.next {
                background: linear-gradient(145deg, #e67e22 0%, #f39c12 50%, #f1c40f 100%) !important;
            }
            
            .test-navigator .test-nav-btn:hover:not(:disabled) {
                background: linear-gradient(145deg, #f39c12 0%, #f1c40f 100%) !important;
                box-shadow: 0 3px 10px rgba(243, 156, 18, 0.45);
                transform: translateY(-1px);
            }
            
            .test-navigator .test-nav-btn:active:not(:disabled) {
                transform: translateY(0);
                box-shadow: 0 1px 4px rgba(230, 126, 34, 0.35);
            }
            
            .test-navigator .test-select-wrapper {
                background: transparent;
                border: none;
                display: flex;
                align-items: center;
                justify-content: center;
                flex: 1;
                margin: 0 10px;
            }
            
            .test-navigator .question-display-container {
                display: flex;
                align-items: center;
                gap: 6px;
            }
            
            .test-navigator .question-label {
                font-size: 0.8em;
                font-weight: 600;
                color: rgba(255, 255, 255, 0.9);
            }
            
            .test-navigator .question-number-display {
                font-size: 0.88em;
                color: #f1c40f;
                font-weight: 700;
                padding: 0;
                background: transparent;
                border: none;
            }
            
            /* Desktop: Stats box – فاصله از navigator */
            .sidebar-stats {
                margin-top: 0 !important;
                border-radius: 18px;
                position: relative;
                z-index: 0;
            }
            
            .test-navigator .test-nav-btn:disabled {
                opacity: 0.5;
                cursor: not-allowed;
            }
            
            .test-navigator .test-nav-btn:disabled:hover {
                background: linear-gradient(145deg, #e67e22 0%, #f39c12 50%, #f1c40f 100%) !important;
                transform: none;
            }

            /* دکمه‌های زبان: En / Fr — خوانا و با رنگ */
            .main-lang-mode-wrap .lang-mode-btn-mini {
                padding: 6px 14px;
                margin: 0 4px;
                border-radius: 8px;
                border: 2px solid #cbd5e1;
                background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
                color: #1e3c72;
                font-weight: 700;
                font-size: 0.85em;
                letter-spacing: 0.02em;
                cursor: pointer;
                transition: all 0.2s;
                min-width: 36px;
                box-shadow: 0 1px 3px rgba(0,0,0,0.08);
            }
            .main-lang-mode-wrap .lang-mode-btn-mini:hover {
                border-color: #1e3c72;
                background: linear-gradient(180deg, #e8eef5 0%, #d4dce8 100%);
                box-shadow: 0 2px 6px rgba(30,60,114,0.15);
            }
            .main-lang-mode-wrap .lang-mode-btn-mini[aria-pressed="true"] {
                border-color: #1e3c72;
                background: linear-gradient(180deg, #1e3c72 0%, #2c5282 100%);
                color: #fff;
                box-shadow: 0 2px 6px rgba(30,60,114,0.35);
            }
            .main-lang-mode-wrap .lang-mode-btn-mini[aria-pressed="true"]:hover {
                background: linear-gradient(180deg, #2c5282 0%, #1e3c72 100%);
            }

            /* Desktop fix: prevent "floating/empty" space inside ad tiles */
            .ad-tile {
                justify-content: flex-start !important;
                align-items: stretch !important;
            }

            /* Override inline justify-content:center on tiles */
            .ad-tile[style*="justify-content: center"],
            .ad-tile[style*="justify-content:center"] {
                justify-content: flex-start !important;
            }

            /* Override inline margin-top:auto that pushes last blocks down */
            .ad-tile div[style*="margin-top: auto"],
            .ad-tile div[style*="margin-top:auto"],
            .ad-tile *[style*="margin-top: auto"],
            .ad-tile *[style*="margin-top:auto"] {
                margin-top: 0 !important;
            }

            .ad-tile > div:last-child {
                margin-top: 0 !important;
                margin-bottom: 0 !important;
            }
            
            /* Ensure consistent padding and spacing inside ad tiles on desktop */
            .ad-tile > div {
                margin-bottom: 8px !important; /* Consistent spacing between sections */
            }
            
            .ad-tile > div:last-child {
                margin-bottom: 0 !important;
            }
            
            /* Override inline padding to ensure consistency */
            .ad-tile div[style*="padding: 8px"],
            .ad-tile div[style*="padding:8px"],
            .ad-tile div[style*="padding: 10px"],
            .ad-tile div[style*="padding:10px"],
            .ad-tile div[style*="padding: 12px"],
            .ad-tile div[style*="padding:12px"] {
                padding: 8px !important; /* Consistent padding */
            }
            
            /* Ensure headers are properly centered - STRONG overrides */
            .ad-tile > div:first-child {
                text-align: center !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                justify-content: center !important;
            }

            /* Desktop: the first box uses negative inline margins (e.g. -12px)
               which makes it look "not centered". Neutralize those margins. */
            .ad-tile > div:first-child[style*="margin: -12px"],
            .ad-tile > div:first-child[style*="margin:-12px"],
            .ad-tile > div:first-child[style*="margin: -12px -12px"],
            .ad-tile > div:first-child[style*="margin:-12px -12px"],
            .ad-tile > div:first-child[style*="margin: -12px -12px 10px -12px"],
            .ad-tile > div:first-child[style*="margin:-12px -12px 10px -12px"] {
                margin: 0 0 10px 0 !important;
            }
            
            /* Override ALL inline text-align in header - including the header box itself */
            .ad-tile > div:first-child[style*="text-align: center"],
            .ad-tile > div:first-child[style*="text-align:center"],
            .ad-tile > div:first-child[style*="text-align: left"],
            .ad-tile > div:first-child[style*="text-align:left"],
            .ad-tile > div:first-child[style*="text-align: right"],
            .ad-tile > div:first-child[style*="text-align:right"],
            .ad-tile > div:first-child div[style*="text-align: left"],
            .ad-tile > div:first-child div[style*="text-align:left"],
            .ad-tile > div:first-child div[style*="text-align: right"],
            .ad-tile > div:first-child div[style*="text-align:right"] {
                text-align: center !important;
            }
            
            /* Center ALL divs inside header - STRONGEST override */
            .ad-tile > div:first-child > div,
            .ad-tile > div:first-child > div > div,
            .ad-tile > div:first-child * {
                text-align: center !important;
            }
            
            /* Ensure block-level elements are centered */
            .ad-tile > div:first-child > div {
                display: block !important;
                width: 100% !important;
                margin-left: auto !important;
                margin-right: auto !important;
            }
            
            /* Override justify-content in header */
            .ad-tile > div:first-child[style*="justify-content"],
            .ad-tile > div:first-child div[style*="justify-content"] {
                justify-content: center !important;
            }
            
            /* Override align-items in header */
            .ad-tile > div:first-child[style*="align-items"],
            .ad-tile > div:first-child div[style*="align-items"] {
                align-items: center !important;
            }
            
            /* Reduce excessive margin-bottom in inline styles */
            .ad-tile div[style*="margin-bottom: 10px"],
            .ad-tile div[style*="margin-bottom:10px"],
            .ad-tile div[style*="margin-bottom: 12px"],
            .ad-tile div[style*="margin-bottom:12px"] {
                margin-bottom: 8px !important;
            }
            
            /* Ensure all content sections have consistent width */
            .ad-tile > div {
                width: 100% !important;
                box-sizing: border-box;
            }
        }
        
        .right-sidebar::-webkit-scrollbar {
            width: 6px;
        }
        
        .right-sidebar::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        
        .right-sidebar::-webkit-scrollbar-thumb {
            background: #1e3c72;
            border-radius: 3px;
        }
        
        .right-sidebar::-webkit-scrollbar-thumb:hover {
            background: #f1c40f;
        }
        
        .book-summary-section {
            margin-bottom: 24px;
            margin-top: -20px; /* Move box up */
            direction: rtl;
            display: block !important;
            visibility: visible !important;
        }
        /* فاصله بین دو دکمه خلاصه کتاب و ۴۱۴ سوال در سایدبار */
        .right-sidebar .book-summary-section + .book-summary-section {
            margin-top: 0 !important;
        }
        .right-sidebar .book-summary-section:has(+ .book-summary-section) {
            margin-bottom: 4px !important;
        }
        
        .ad-registration-section {
            margin-top: -5px; /* Negative margin to move box higher */
            margin-bottom: 0;
            direction: rtl;
            display: block !important;
            visibility: visible !important;
        }
        
        .ad-registration-section.mobile-version {
            display: none;
        }
        
        .classifieds-promo-section.mobile-version {
            display: none;
        }
        
        .mobile-sidebar-sections {
            display: none;
        }
        
        .book-link-section.mobile-version,
        .book-summary-section.mobile-version,
        .donation-section.mobile-version {
            display: none;
        }
        
        .ad-registration-toggle {
            padding: 12px 22px;
            background: linear-gradient(135deg, #1e3c72 0%, #2c5282 100%);
            border: 2.5px solid #f1c40f;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 
                0 4px 15px rgba(30, 60, 114, 0.3),
                0 2px 8px rgba(30, 60, 114, 0.2);
            text-align: center;
            cursor: pointer;
            user-select: none;
            width: calc(100% + 40px); /* Stretch wider from both sides */
            margin-left: -20px; /* Pull left */
            margin-right: -20px; /* Pull right */
            box-sizing: border-box;
        }
        
        .ad-registration-toggle:hover {
            background: linear-gradient(135deg, #2c5282 0%, #1e3c72 100%);
            box-shadow: 
                0 6px 20px rgba(30, 60, 114, 0.4),
                0 3px 12px rgba(30, 60, 114, 0.3);
            transform: translateY(-2px);
        }
        
        /* تبلیغ نیازمندی‌های کانادا - آمریکا */
        .classifieds-promo-section {
            margin-top: 12px;
            margin-bottom: 0;
            direction: rtl;
            display: block !important;
            visibility: visible !important;
        }
        
        .classifieds-promo-link {
            text-decoration: none;
            display: block;
            width: 100%;
        }
        
        .classifieds-promo-box {
            padding: 16px 20px;
            background: linear-gradient(145deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%);
            border: 2.5px solid #6366f1;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 
                0 4px 15px rgba(99, 102, 241, 0.25),
                0 2px 8px rgba(99, 102, 241, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
            text-align: center;
            cursor: pointer;
            user-select: none;
            width: calc(100% + 40px);
            margin-left: -20px;
            margin-right: -20px;
            box-sizing: border-box;
            position: relative;
            overflow: hidden;
        }
        
        .classifieds-promo-box::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, transparent 70%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .classifieds-promo-box:hover {
            background: linear-gradient(145deg, #f8fafc 0%, #ffffff 50%, #f8fafc 100%);
            box-shadow: 
                0 6px 25px rgba(99, 102, 241, 0.35),
                0 3px 12px rgba(99, 102, 241, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
            transform: translateY(-2px);
            border-color: #8b5cf6;
        }
        
        .classifieds-promo-box:hover::before {
            opacity: 1;
        }
        
        .classifieds-promo-header {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            width: 100%;
        }
        
        .classifieds-promo-content {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        /* استایل خط کسب‌کار برای دسکتاپ */
        .classifieds-business-line {
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.12) 100%);
            color: #6366f1 !important;
            font-weight: 700 !important;
            padding: 10px 16px;
            border-radius: 10px;
            border: 1.5px solid rgba(99, 102, 241, 0.25);
            text-shadow: 0 1px 3px rgba(99, 102, 241, 0.15);
            box-shadow: 0 3px 12px rgba(99, 102, 241, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5);
            margin-top: 8px !important;
            margin-bottom: 6px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .classifieds-business-line::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.5s ease;
        }
        
        .classifieds-promo-box:hover .classifieds-business-line::before {
            left: 100%;
        }
        
        .classifieds-promo-box:hover .classifieds-business-line {
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.18) 0%, rgba(139, 92, 246, 0.18) 100%);
            border-color: rgba(99, 102, 241, 0.4);
            box-shadow: 0 4px 16px rgba(99, 102, 241, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.6);
            transform: translateY(-1px);
        }
        
        /* Modal/Popup Styles */
        .ad-registration-modal {
            display: none;
            position: fixed;
            z-index: 10000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(4px);
            animation: fadeIn 0.3s ease;
        }
        
        .ad-registration-modal.active {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        
        .ad-registration-modal-content {
            background: white;
            padding: 30px;
            border-radius: 15px;
            max-width: 500px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            position: relative;
            direction: rtl;
            text-align: right;
            animation: slideIn 0.3s ease;
        }
        
        @keyframes slideIn {
            from {
                transform: translateY(-50px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
        
        .ad-registration-modal-close {
            position: absolute;
            top: 15px;
            left: 15px;
            font-size: 28px;
            font-weight: bold;
            color: #999;
            cursor: pointer;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.2s;
        }
        
        .ad-registration-modal-close:hover {
            background: #f0f0f0;
            color: #333;
        }
        
        .ad-registration-modal-title {
            font-size: 1.3em;
            font-weight: 700;
            color: #1e3c72;
            margin-bottom: 15px;
            text-align: center;
        }
        
        .ad-registration-modal-text {
            line-height: 1.8;
            color: #2c3e50;
            margin-bottom: 20px;
            font-size: 0.95em;
        }
        
        .ad-registration-modal-text p {
            margin-bottom: 12px;
        }
        
        .ad-registration-modal-phone {
            text-align: center;
            padding-top: 20px;
            border-top: 2px solid #e8ecf0;
        }
        
        .ad-registration-modal-phone a {
            font-size: 1.2em;
            font-weight: 700;
            color: #e74c3c;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 20px;
            border-radius: 8px;
            background: rgba(231, 76, 60, 0.1);
            transition: all 0.3s;
        }
        
        .ad-registration-modal-phone a:hover {
            background: rgba(231, 76, 60, 0.2);
            transform: scale(1.05);
        }
        
        .ad-registration-toggle h3 {
            color: white;
            margin: 0;
            font-size: 1em;
            font-weight: 700;
            line-height: 1.4;
        }
        
        .ad-registration-toggle span {
            color: #ff1493;
            filter: drop-shadow(0 2px 4px rgba(255, 20, 147, 0.3));
        }
        
        .ad-registration-phone {
            margin-top: 8px;
            text-align: center;
        }
        
        .ad-registration-phone a {
            font-size: 1.2em;
            font-weight: 700;
            color: white;
            text-decoration: underline;
            text-decoration-color: white;
            text-underline-offset: 4px;
            transition: opacity 0.3s;
            direction: ltr;
            display: inline-block;
        }
        
        .ad-registration-phone a:hover {
            opacity: 0.8;
        }
        
        .book-summary-link {
            text-decoration: none;
            display: block;
        }
        
        .book-summary-toggle {
            cursor: pointer;
            padding: 0; /* Zero padding as requested */
            height: 80px; /* Increased height */
            max-height: 80px; /* Prevent exceeding height */
            background: linear-gradient(135deg, #1e3c72 0%, #2c5282 100%);
            border: 2.5px solid #f1c40f; /* Same border as book-link */
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 
                0 4px 15px rgba(30, 60, 114, 0.3),
                0 2px 8px rgba(30, 60, 114, 0.2);
            text-align: center;
            box-sizing: border-box;
            width: calc(100% + 40px); /* Stretch wider from both sides */
            margin-left: -20px; /* Pull left */
            margin-right: -20px; /* Pull right */
            overflow: hidden; /* Prevent content overflow */
        }
        
        .book-summary-toggle:hover {
            background: linear-gradient(135deg, #2c5282 0%, #1e3c72 100%);
            box-shadow: 
                0 6px 20px rgba(30, 60, 114, 0.4),
                0 3px 12px rgba(30, 60, 114, 0.3);
            transform: translateY(-3px) scale(1.02);
        }
        
        .book-summary-toggle h3 {
            color: white;
            margin: 0;
            padding: 16px 26px; /* Increased padding for better fit */
            font-size: 1.05em; /* Slightly larger font */
            font-weight: 700;
            line-height: 1.35; /* Slightly increased line-height */
            flex-shrink: 0;
        }
        
        .book-summary-toggle h3:first-of-type {
            margin-bottom: 3px; /* Slightly more gap */
        }
        
        .book-summary-toggle h3:last-of-type {
            font-size: 0.95em; /* Slightly larger */
            opacity: 0.9;
            margin-top: 0;
            line-height: 1.3; /* Increased line-height */
        }
        
        .book-summary-link-icon {
            font-size: 1.3em; /* Slightly larger */
            color: #f1c40f;
            margin-top: 4px; /* Increased spacing */
            transition: transform 0.3s ease;
            flex-shrink: 0;
        }
        
        .book-summary-toggle:hover .book-summary-link-icon {
            transform: scale(1.2) rotate(15deg);
        }
        
        .sidebar-install-app-wrap {
            margin-top: 12px;
            margin-bottom: 6px;
            text-align: center;
            width: calc(100% + 40px);
            margin-left: -20px;
            margin-right: -20px;
            box-sizing: border-box;
        }
        .sidebar-install-app-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            min-height: 52px;
            padding: 14px 20px;
            font-size: 1em;
            font-weight: 700;
            color: #fff;
            background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 50%, #8b5cf6 100%);
            border: 2.5px solid rgba(255, 255, 255, 0.35);
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow:
                0 4px 15px rgba(124, 58, 237, 0.35),
                0 2px 8px rgba(91, 33, 182, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
            box-sizing: border-box;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
            -webkit-appearance: none;
            appearance: none;
        }
        .sidebar-install-app-btn:hover {
            background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 50%, #a78bfa 100%);
            border-color: rgba(255, 255, 255, 0.45);
            transform: translateY(-3px) scale(1.02);
            box-shadow:
                0 8px 24px rgba(124, 58, 237, 0.4),
                0 4px 12px rgba(139, 92, 246, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
        }
        .sidebar-install-app-btn:active {
            transform: translateY(-1px) scale(0.99);
        }

        .donation-section {
            margin-bottom: 10px; /* Reduced to move box higher */
            margin-top: -15px; /* Reduced negative margin to move box down a bit */
            direction: rtl;
            display: block !important;
            visibility: visible !important;
        }
        
        /* Ads Grid System - Scalable for future growth */
        /* تبلیغات - وب‌پارت جداگانه */
        .ads-section {
            width: 100%;
            margin: 30px 0;
            padding: 0;
            box-sizing: border-box;
            border: none;
            border-radius: 8px;
            background: rgba(52, 152, 219, 0.05);
        }

        .ads-section-title {
            font-size: 1.5em;
            font-weight: 700;
            color: #1e3c72;
            text-align: center;
            margin-bottom: 20px;
            direction: rtl;
        }

        .ads-section-title-en {
            font-size: 1em;
            color: #7f8c8d;
            font-weight: 500;
            margin-top: 4px;
            direction: ltr;
            text-align: center;
        }
        
        /* Category Filter */
        .ads-category-filter {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
            margin: 20px 0 25px 0;
            padding: 15px;
            background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
            border-radius: 12px;
            border: 2px solid rgba(30, 60, 114, 0.1);
            direction: rtl;
        }
        
        @media (max-width: 968px) {
            .ads-category-filter {
                margin: 8px 0 10px 0;
                padding: 8px;
                gap: 6px;
            }
        }
        
        @media (max-width: 600px) {
            .ads-category-filter {
                margin: 6px 0 8px 0;
                padding: 6px;
                gap: 5px;
            }
        }
        
        @media (max-width: 400px) {
            .ads-category-filter {
                margin: 4px 0 6px 0;
                padding: 4px;
                gap: 4px;
            }
        }
        
        .category-btn {
            padding: 10px 18px;
            font-size: 0.9em;
            font-weight: 600;
            color: #1e3c72;
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            border: 2px solid #3498db;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 2px 8px rgba(52, 152, 219, 0.15);
            white-space: nowrap;
            direction: ltr;
            text-align: center;
        }
        
        .category-btn:hover {
            background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
            color: white;
            border-color: #2980b9;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
        }
        
        .category-btn.active {
            background: linear-gradient(135deg, #1e3c72 0%, #2c5282 100%);
            color: white;
            border-color: #1e3c72;
            box-shadow: 0 4px 15px rgba(30, 60, 114, 0.4);
        }
        
        .category-btn.active:hover {
            background: linear-gradient(135deg, #2c5282 0%, #1e3c72 100%);
            transform: translateY(-2px);
        }
        
        /* Hide ads that don't match filter */
        .ad-tile.hidden {
            display: none !important;
        }
        
        .ads-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 16px; /* Reduced from 18px for better spacing */
            width: 100%;
            margin: 0;
            padding: 0;
            align-items: stretch; /* Ensure all tiles have same height in a row */
        }
        
        .ad-tile {
            background: white;
            transition: opacity 0.3s ease;
            border-radius: 10px;
            padding: 16px; /* Slightly denser for desktop */
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
            transition: opacity 0.3s ease;
            border: none;
            direction: rtl;
            position: relative;
            overflow-y: auto;
            overflow-x: hidden;
            width: 100%;
            min-width: 0;
            max-width: 100%;
            box-sizing: border-box;
            aspect-ratio: 1 / 3.2; /* Maintain consistent aspect ratio */
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            flex-grow: 0;
            min-height: 620px; /* Reduced from 800px for better density */
            height: 100%; /* Ensure tiles stretch to fill grid cell height */
            align-self: stretch; /* Force tile to fill entire grid cell */
        }
        
        /* Scrollbar styling for ad-tile */
        .ad-tile::-webkit-scrollbar {
            width: 6px;
        }
        
        .ad-tile::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 3px;
        }
        
        .ad-tile::-webkit-scrollbar-thumb {
            background: #3498db;
            border-radius: 3px;
        }
        
        .ad-tile::-webkit-scrollbar-thumb:hover {
            background: #2980b9;
        }
        
        .ad-tile::before {
            display: none;
        }
        
        .ad-tile:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(30, 60, 114, 0.12);
        }
        
        .ad-tile-featured:hover {
            box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 0 2px rgba(245,158,11,0.4);
        }
        
        .ad-featured-cta {
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .ad-featured-cta:hover {
            transform: scale(1.02);
            box-shadow: 0 6px 20px rgba(245,158,11,0.5);
        }
        
        .ad-tile-header {
            display: flex;
            align-items: center;
            justify-content: center; /* Center header content */
            gap: 10px;
            margin-bottom: 10px;
            text-align: center !important; /* Ensure text is centered */
        }
        
        /* Desktop: Force center alignment for first child (header box) */
        @media (min-width: 969px) {
            .ad-tile > div:first-child {
                text-align: center !important;
            }
            
            /* Override any inline text-align in header */
            .ad-tile > div:first-child * {
                text-align: center !important;
            }
            
            /* Override direction that might affect alignment - handled by text-align: center above */
        }
        
        .ad-tile-icon {
            font-size: 1.5em;
            filter: drop-shadow(0 2px 4px rgba(30, 60, 114, 0.2));
            flex-shrink: 0;
        }
        
        .ad-tile-category {
            flex: 1;
        }
        
        .ad-tile-category-title {
            font-size: 0.95em;
            color: #1e3c72;
            font-weight: 700;
            margin-bottom: 3px;
            text-align: center;
            letter-spacing: 0.2px;
            line-height: 1.2;
        }
        
        .ad-tile-business-name {
            font-size: 0.95em;
            font-weight: 700;
            color: #1e3c72;
            line-height: 1.2;
            text-align: center;
        }
        
        .ad-tile-body {
            margin-top: 6px;
            width: 100%;
        }
        
        .ad-tile-info-item {
            display: flex;
            align-items: flex-start;
            justify-content: flex-start; /* Ensure consistent alignment */
            gap: 6px;
            margin-bottom: 8px; /* Consistent spacing */
            font-size: 0.85em;
            color: #34495e;
            line-height: 1.5;
            width: 100%;
        }
        
        .ad-tile-info-icon {
            font-size: 0.9em;
            min-width: 16px;
            flex-shrink: 0;
        }
        
        .ad-tile-info-text {
            flex: 1;
            line-height: 1.4;
        }
        
        .ad-tile-info-text a {
            color: #1e3c72;
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
        }
        
        .ad-tile-info-text a:hover {
            color: #2c5282;
            text-decoration: underline;
        }
        
        .ad-tile-phone {
            direction: ltr;
            text-align: right;
        }
        
        .ad-tile-address {
            direction: ltr;
            text-align: right;
        }
        
        .ad-tile-hours {
            background: linear-gradient(135deg, rgba(241, 196, 15, 0.1) 0%, rgba(241, 196, 15, 0.05) 100%);
            padding: 8px; /* Consistent padding */
            border-radius: 5px;
            margin-top: 8px; /* Consistent spacing */
            margin-bottom: 0;
            border-right: none;
            width: 100%;
        }
        
        .ad-tile-hours-title {
            font-weight: 700;
            color: #1e3c72;
            margin-bottom: 3px;
            font-size: 0.85em;
            line-height: 1.3;
        }
        
        .ad-tile-hours-content {
            font-size: 0.75em;
            line-height: 1.4;
        }
        
        .ad-tile-description {
            margin-top: 8px; /* Consistent spacing */
            padding: 8px; /* Consistent padding */
            background: linear-gradient(135deg, rgba(30, 60, 114, 0.05) 0%, rgba(30, 60, 114, 0.02) 100%);
            border-radius: 5px;
            font-size: 0.8em;
            color: #2c5282;
            font-weight: 600;
            line-height: 1.5;
            width: 100%;
            margin-bottom: 0;
        }
        
        .ad-tile-description-en {
            direction: ltr;
            margin-top: 3px;
            font-size: 0.8em;
        }
        
        /* View Details Button */
        .ad-tile-view-btn {
            margin-top: 10px; /* Consistent spacing */
            margin-bottom: 0;
            width: 100%;
            padding: 10px 16px; /* Consistent padding */
            background: linear-gradient(135deg, #1e3c72 0%, #2c5282 100%);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 0.9em;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(30, 60, 114, 0.3);
            display: flex;
            justify-content: center; /* Center button content */
            align-items: center;
            align-items: center;
            justify-content: center;
            gap: 8px;
            direction: rtl;
            text-decoration: none;
        }
        
        .ad-tile-view-btn:hover {
            background: linear-gradient(135deg, #2c5282 0%, #1e3c72 100%);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(30, 60, 114, 0.4);
        }
        
        .ad-tile-view-btn:active {
            transform: translateY(0);
            box-shadow: 0 2px 6px rgba(30, 60, 114, 0.3);
        }
        
        .ad-tile-view-btn-icon {
            font-size: 1.1em;
        }
        
        /* آگهی تیم شکور — قالب کارت نمونه (تاریک، متن سفید) */
        .ad-tile-shakour-card {
            background: linear-gradient(165deg, #0f0f0f 0%, #1a1a1a 50%, #0f0f0f 100%) !important;
            border: 3px solid #eab308 !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: flex-start !important;
            padding: 0 !important;
            overflow: hidden !important;
            box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(234,179,8,0.3) !important;
        }
        .ad-tile-shakour-card .shakour-card {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 18px 16px 20px;
            color: #ffffff;
        }
        .ad-tile-shakour-card .shakour-card-name {
            font-size: 1.4em;
            font-weight: 800;
            color: #ffffff;
            margin-bottom: 4px;
            letter-spacing: 0.5px;
            text-shadow: 0 2px 8px rgba(0,0,0,0.4);
        }
        .ad-tile-shakour-card .shakour-card-name-en {
            font-size: 1.1em;
            font-weight: 700;
            color: rgba(255,255,255,0.95);
            margin-bottom: 12px;
            letter-spacing: 0.8px;
        }
        .ad-tile-shakour-card .shakour-card-services {
            font-size: 0.95em;
            font-weight: 600;
            color: #facc15;
            margin-bottom: 6px;
        }
        .ad-tile-shakour-card .shakour-card-tags {
            font-size: 0.85em;
            color: rgba(255,255,255,0.9);
            margin-bottom: 16px;
        }
        .ad-tile-shakour-card .shakour-card-phone {
            margin-bottom: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            background: #fef9c3;
            padding: 12px 20px;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(234,179,8,0.2);
        }
        .ad-tile-shakour-card .shakour-phone-icon {
            font-size: 1.2em;
            line-height: 1;
            filter: none;
        }
        .ad-tile-shakour-card .shakour-card-phone,
        .ad-tile-shakour-card .shakour-card-phone a {
            direction: ltr !important;
            unicode-bidi: isolate !important;
            text-align: left;
        }
        .ad-tile-shakour-card .shakour-card-phone a {
            font-size: 1.35em;
            font-weight: 800;
            color: #0f0f0f;
            text-decoration: none;
            letter-spacing: 1px;
            font-family: inherit;
            white-space: nowrap;
        }
        .ad-tile-shakour-card .shakour-card-phone a:hover {
            color: #1a1a1a;
        }
        .ad-tile-shakour-card .shakour-card-contact {
            width: 100%;
            margin-bottom: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }
        .ad-tile-shakour-card .shakour-label {
            font-size: 0.75em;
            font-weight: 700;
            color: rgba(255,255,255,0.7);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .ad-tile-shakour-card .shakour-card-contact a {
            font-size: 0.88em;
            color: #e5e5e5;
            text-decoration: none;
            word-break: break-all;
            direction: ltr;
        }
        .ad-tile-shakour-card .shakour-card-contact a:hover {
            color: #facc15;
        }
        .ad-tile-shakour-card .shakour-card-footer {
            font-size: 0.72em;
            color: rgba(255,255,255,0.8);
            margin-top: 12px;
            line-height: 1.5;
            padding-top: 8px;
            border-top: 1px solid rgba(234,179,8,0.25);
        }
        .ad-tile-shakour-card .shakour-card-footer:last-child {
            margin-top: 6px;
            padding-top: 6px;
        }
        /* بنر تصویری تیم شکور — پایین آگهی */
        .ad-tile-shakour-card .shakour-card-banner-wrap {
            display: block;
            width: 100%;
            margin-top: 72px;
            margin-left: -18px;
            margin-right: -18px;
            margin-bottom: -20px;
            padding: 0;
            overflow: hidden;
            border-radius: 0 0 10px 10px;
            border-top: 2px solid rgba(234, 179, 8, 0.4);
            box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
        }
        .ad-tile-shakour-card .shakour-card-banner-img {
            width: 100%;
            height: auto;
            display: block;
            object-fit: cover;
            object-position: center top;
            min-height: 200px;
            max-height: 380px;
        }
        .ad-tile-shakour-card .shakour-card-banner-wrap:hover .shakour-card-banner-img {
            opacity: 0.96;
        }
        
        .ad-space {
            width: 100%;
            min-height: 150px;
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 50%, #e8ecf1 100%);
            border: 2px solid #1e3c72;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #1e3c72;
            font-size: 0.85em;
            text-align: center;
            padding: 10px;
            box-sizing: border-box;
            box-shadow: 
                0 4px 15px rgba(30, 60, 114, 0.1),
                0 2px 8px rgba(241, 196, 15, 0.12),
                0 1px 4px rgba(30, 60, 114, 0.06);
            font-weight: 500;
            direction: rtl;
            position: relative;
        }
        
        .ad-content {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 6px;
            position: relative;
            z-index: 1;
        }
        
        .ad-title {
            font-size: 0.95em;
            font-weight: 700;
            color: #1e3c72;
            margin-bottom: 4px;
            text-align: center;
            line-height: 1.2;
        }
        
        .ad-business-name {
            font-size: 0.9em;
            font-weight: 700;
            background: linear-gradient(135deg, #1e3c72 0%, #2c5282 100%);
            padding: 8px 12px;
            border-radius: 8px;
            color: white;
            margin: 4px 0;
            box-shadow: 
                0 2px 10px rgba(30, 60, 114, 0.2),
                0 1px 4px rgba(241, 196, 15, 0.12);
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
            border: 2px solid rgba(241, 196, 15, 0.3);
            line-height: 1.2;
        }
        
        .ad-address {
            font-size: 0.8em;
            color: #34495e;
            line-height: 1.4;
            direction: ltr;
            text-align: center;
            padding: 6px;
            background: linear-gradient(135deg, #fff9e6 0%, #fffef5 100%);
            border-radius: 6px;
            border: 2px solid rgba(241, 196, 15, 0.3);
        }
        
        .ad-icon {
            font-size: 1.8em;
            margin-bottom: 4px;
            filter: drop-shadow(0 2px 5px rgba(30, 60, 114, 0.2));
        }
        
        .ad-phone {
            font-size: 0.9em;
            color: #1e3c72;
            font-weight: 700;
            margin-top: 4px;
            direction: ltr;
            text-align: center;
            padding: 6px 10px;
            background: linear-gradient(135deg, #f1c40f 0%, #f39c12 100%);
            border-radius: 18px;
            box-shadow: 
                0 2px 10px rgba(241, 196, 15, 0.3),
                0 1px 4px rgba(241, 196, 15, 0.12);
            line-height: 1.2;
        }
        
        .ad-address a {
            color: #1e3c72;
            text-decoration: none;
            font-weight: 600;
            display: inline-block;
        }
        
        .ad-address a:hover {
            color: #f1c40f;
        }
        
        .ad-phone a {
            color: #1e3c72;
            text-decoration: none;
            display: block;
            font-weight: 700;
        }
        
        .ad-phone a:hover {
            color: #ffffff;
        }
        
        .ad-hours {
            font-size: 0.75em;
            color: #1e3c72;
            font-weight: 600;
            margin-top: 6px;
            direction: rtl;
            text-align: center;
            padding: 6px;
            background: linear-gradient(135deg, rgba(30, 60, 114, 0.1) 0%, rgba(30, 60, 114, 0.05) 100%);
            border-radius: 5px;
            border: 2px solid rgba(30, 60, 114, 0.2);
            border-right: 2px solid #1e3c72;
        }
        
        .ad-hours-title {
            font-size: 0.8em;
            font-weight: 700;
            color: #1e3c72;
            margin-bottom: 3px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            line-height: 1.2;
        }
        
        .ad-hours-content {
            font-size: 0.75em;
            color: #2c5282;
            line-height: 1.3;
        }
        
        .ad-hours-content-en {
            direction: ltr;
            text-align: center;
            margin-top: 4px;
            font-size: 0.75em;
            color: #34495e;
            border-top: 1px dashed rgba(30, 60, 114, 0.2);
            padding-top: 4px;
            line-height: 1.3;
        }
        
        .donation-toggle {
            cursor: pointer;
            padding: 0; /* Zero padding as requested */
            background: linear-gradient(135deg, #fff9e6 0%, #fffef5 100%);
            border: 2.5px solid #f1c40f;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 
                0 4px 15px rgba(241, 196, 15, 0.25),
                0 2px 8px rgba(241, 196, 15, 0.15);
            min-height: 60px;
            width: calc(100% + 40px); /* Stretch wider from both sides */
            margin-left: -20px; /* Pull left */
            margin-right: -20px; /* Pull right */
        }
        
        .donation-toggle:hover {
            background: linear-gradient(135deg, #fffef5 0%, #fff9e6 100%);
            box-shadow: 
                0 6px 20px rgba(241, 196, 15, 0.35),
                0 3px 12px rgba(241, 196, 15, 0.25);
            border-color: #f39c12;
            transform: translateY(-2px);
        }
        
        .donation-toggle h3 {
            color: #1e3c72;
            margin: 0;
            padding: 16px 18px; /* Reduced horizontal padding to give more space */
            font-size: 0.95em; /* Slightly larger font */
            font-weight: 600;
            flex: 1;
            line-height: 1.4;
            text-align: right; /* RTL alignment for Persian */
            direction: rtl;
            min-width: 0; /* Allow flex shrinking */
        }
        
        .donation-toggle h3 span {
            display: block;
            line-height: 1.3;
            white-space: nowrap; /* Prevent text breaking */
        }
        
        .donation-toggle h3 span:first-child {
            margin-bottom: 4px;
            font-weight: 700;
            font-size: 1em; /* Larger font */
        }
        
        .donation-toggle h3 span:last-child {
            font-size: 0.95em; /* Larger font */
            opacity: 0.9;
            font-weight: 600; /* Bolder */
            direction: ltr;
            text-align: left;
            white-space: nowrap; /* Prevent English text breaking */
        }
        
        .donation-toggle-icon {
            font-size: 1.3em; /* Larger icon */
            color: #1e3c72;
            transition: transform 0.3s ease;
            flex-shrink: 0;
            margin-left: 8px;
            padding-right: 18px; /* Match h3 padding */
            display: block; /* Ensure icon is visible */
            opacity: 1; /* Ensure icon is visible */
        }
        
        .donation-toggle.expanded .donation-toggle-icon {
            transform: rotate(180deg);
        }
        
        .donation-content {
            display: none;
            padding: 24px;
            background: linear-gradient(135deg, #fff9e6 0%, #fffef5 100%);
            border: 2.5px solid #f1c40f;
            border-top: none;
            border-radius: 0 0 12px 12px;
            margin-top: -2px;
            width: calc(100% + 40px); /* Stretch wider from both sides */
            margin-left: -20px; /* Pull left */
            margin-right: -20px; /* Pull right */
            box-shadow: 
                0 4px 15px rgba(241, 196, 15, 0.25),
                0 2px 8px rgba(241, 196, 15, 0.15);
            box-sizing: border-box;
        }
        
        .donation-content.show {
            display: block;
        }
        
        .donation-content p {
            color: #1e3c72;
            margin: 8px 0;
            font-size: 0.95em;
        }
        
        .donation-btn {
            display: inline-block;
            margin-top: 14px;
            padding: 14px 32px;
            background: linear-gradient(135deg, #f1c40f 0%, #f39c12 100%);
            color: #1e3c72;
            text-decoration: none;
            border-radius: 30px;
            font-weight: 700;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 
                0 4px 15px rgba(241, 196, 15, 0.4),
                0 2px 8px rgba(241, 196, 15, 0.3);
            letter-spacing: 0.3px;
        }
        
        .donation-btn:hover {
            transform: translateY(-2px) scale(1.05);
            box-shadow: 
                0 6px 25px rgba(241, 196, 15, 0.5),
                0 3px 12px rgba(241, 196, 15, 0.4);
        }
        
        .donation-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(243, 156, 18, 0.6);
        }
        
        .contact-info {
            margin-top: 25px;
        }
        
        .contact-info h4 {
            color: #1e3c72;
            font-size: 1em;
            margin-bottom: 15px;
            text-align: center;
            font-weight: 700;
            padding-bottom: 12px;
            border-bottom: 2px solid #f1c40f;
        }
        
        .contact-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .contact-item {
            background: #ffffff;
            border: 2px solid #e8ecf0;
            border-radius: 10px;
            padding: 20px; /* Increased from 16px */
            display: flex;
            flex-direction: column;
            gap: 14px; /* Increased from 12px */
            transition: all 0.3s ease;
            min-height: 80px; /* Added minimum height */
            width: calc(100% + 40px); /* Stretch wider from both sides */
            margin-left: -20px; /* Pull left */
            margin-right: -20px; /* Pull right */
            box-sizing: border-box;
        }
        
        .contact-item:hover {
            border-color: #f1c40f;
            background: #fff9e6;
            box-shadow: 0 3px 10px rgba(241, 196, 15, 0.2);
        }
        
        .contact-content {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        
        .contact-label {
            font-size: 0.85em; /* Increased from 0.75em */
            color: #7f8c8d;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            text-align: center;
        }
        
        .contact-location {
            font-size: 0.75em;
            color: #95a5a6;
            font-weight: 500;
            direction: ltr;
            text-align: center;
            margin-top: 4px;
        }
        
        .contact-value {
            font-size: 1.05em; /* Further reduced to fit in one line */
            color: #1e3c72;
            font-weight: 700;
            direction: ltr;
            text-align: center;
            word-break: break-word;
            line-height: 1.5;
            padding: 8px 0; /* Added vertical padding */
            white-space: nowrap; /* Prevent line break */
        }
        
        .contact-value a {
            color: #1e3c72;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .contact-value a:hover {
            color: #2c5282;
            text-decoration: underline;
        }
        
        .copy-btn {
            width: 100%;
            padding: 10px;
            background: #1e3c72;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 0.9em;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .copy-btn:hover {
            background: #2c5282;
        }
        
        .copy-btn.copied {
            background: #27ae60;
        }
        
        .payment-methods {
            margin-top: 20px;
            padding: 18px;
            background: linear-gradient(135deg, rgba(52, 152, 219, 0.1) 0%, rgba(52, 152, 219, 0.05) 100%);
            border-radius: 12px;
            border: 2px solid rgba(52, 152, 219, 0.3);
            box-shadow: 0 4px 12px rgba(52, 152, 219, 0.15);
        }
        
        .payment-methods strong {
            color: #3498db;
            font-weight: 700;
            font-size: 1.05em;
            display: block;
            text-align: center;
            margin-bottom: 14px;
            padding-bottom: 10px;
            border-bottom: 2px solid rgba(52, 152, 219, 0.2);
        }
        
        .payment-methods .payment-item {
            background: rgba(255, 255, 255, 0.7);
            padding: 12px 14px;
            border-radius: 8px;
            margin: 10px 0;
            border-right: 3px solid #3498db;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }
        
        .payment-methods .payment-item:hover {
            background: rgba(255, 255, 255, 0.9);
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
            transform: translateX(-2px);
        }
        
        .payment-methods p {
            color: #2c3e50;
            font-size: 0.9em;
            margin: 8px 0;
            line-height: 1.7;
        }
        

        .header {
            background: linear-gradient(135deg, #1e3c72 0%, #2c5282 50%, #1e3c72 100%);
            background-size: 200% 200%;
            /* Removed infinite animation to prevent memory issues */
            color: white;
            padding: 0;
            text-align: center;
            box-shadow: 
                0 8px 30px rgba(30, 60, 114, 0.3),
                inset 0 -4px 0 0 #f1c40f;
            position: relative;
            overflow: hidden;
        }
        
        .header-carousel {
            position: relative;
            width: 100%;
            min-height: 192px;
            height: 192px;
            padding: 0 8px;
            z-index: 2;
            overflow: hidden;
        }
        
        .header-slide {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: none;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
            z-index: 3;
            padding: 0 8px;
        }
        .header-slide:not(.active) {
            display: none !important;
        }
        .header-slide.active {
            display: flex !important;
            animation: fadeIn 0.5s ease;
        }
        
        .header-slide h1 {
            font-size: 1.5em;
            font-weight: 700;
            margin-bottom: 4px;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
            color: white;
            line-height: 1.2;
        }
        
        .header-slide p {
            font-size: 0.95em;
            font-weight: 500;
            text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
            color: white;
            margin: 2px 0 0 0;
            line-height: 1.3;
        }
        
        /* اسلاید ۱: فقط متن عنوان — همیشه قابل مشاهده وقتی اسلاید ۱ فعال است */
        .header-slide-title-only .header-title-standalone {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            visibility: visible;
            opacity: 1;
        }
        .header-h1 {
            margin: 0;
            padding: 0;
            font-size: inherit;
            font-weight: inherit;
            display: block;
        }
        .header-title-line1 {
            font-size: 1.4em;
            font-weight: 700;
            color: white;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
            line-height: 1.2;
        }
        .header-title-line2 {
            font-size: 1.25em;
            font-weight: 600;
            color: white;
            text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
            line-height: 1.2;
        }
        .header-title-flag {
            font-size: 1.5em;
            line-height: 1;
            margin: 2px 0;
        }
        .header-title-en {
            font-size: 0.95em;
            font-weight: 500;
            color: white;
            text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
            margin: 4px 0 0 0;
            line-height: 1.3;
        }
        
        .header-slide-ad {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
        }
        .header-slide-ad-link {
            display: block;
            max-width: 100%;
            line-height: 0;
        }
        .header-slide-ad-img {
            max-width: 100%;
            max-height: 172px;
            width: auto;
            height: auto;
            object-fit: contain;
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
        }
        
        /* اسلاید سوم هیرو: ثبت تبلیغ — کارت شیشه‌ای، آیکون صورتی، ظاهر مدرن */
        .header-slide-ad-registration {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(255,255,255,0.06) 0%, transparent 60%);
            padding-top: 28px; /* فاصله برای جدا بودن Visitors از کادر تبلیغ */
            box-sizing: border-box;
        }
        .header-slide-ad-registration-box {
            cursor: pointer;
            background: transparent;
            border: none;
            padding: 20px 24px 18px;
            text-align: center;
            color: #fff;
            transition: opacity 0.25s ease;
            min-width: 260px;
            max-width: 92%;
            position: relative;
        }
        .header-slide-ad-registration-box:hover {
            opacity: 0.95;
        }
        .header-slide-ad-registration-title {
            font-size: 1.15em;
            font-weight: 700;
            margin: 0 0 6px 0;
            line-height: 1.45;
            letter-spacing: 0.02em;
            text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
        }
        .header-slide-ad-registration-title::after {
            content: '';
            display: block;
            width: 40px;
            height: 3px;
            background: linear-gradient(90deg, transparent, #f1c40f, transparent);
            margin: 10px auto 0;
            border-radius: 2px;
        }
        .header-slide-ad-registration-phone-wrap {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-top: 14px;
        }
        .header-slide-ad-registration-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #ff6b9d;
            filter: drop-shadow(0 2px 6px rgba(255, 107, 157, 0.4));
            flex-shrink: 0;
        }
        .header-slide-ad-registration-icon svg {
            width: 28px;
            height: 28px;
            display: block;
        }
        .header-slide-ad-registration-phone {
            font-size: 1.1em;
            font-weight: 800;
            direction: ltr;
            letter-spacing: 0.1em;
            color: #e74c3c;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
        }
        
        .header-slide-content {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
        }
        
        .header-slide-content h2 {
            font-size: 1.5em;
            font-weight: 700;
            margin-bottom: 12px;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
            color: white;
        }
        
        .header-slide-content p {
            font-size: 1em;
            line-height: 1.6;
            text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
            color: white;
            margin: 8px 0;
        }
        
        .header-carousel-indicators {
            position: absolute;
            bottom: 15px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            z-index: 10;
        }
        
        .header-indicator {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.4);
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid rgba(255, 255, 255, 0.6);
        }
        
        .header-indicator.active {
            background: #f1c40f;
            width: 30px;
            border-radius: 5px;
            border-color: #f1c40f;
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        
        .header::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(241, 196, 15, 0.1), transparent);
            /* Removed infinite animation to prevent memory issues */
            z-index: 1;
            pointer-events: none;
        }
        
        @keyframes gradientShift {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }
        
        @keyframes shine {
            0% { left: -100%; }
            100% { left: 100%; }
        }

        .header h1 {
            font-size: 1.8em;
            margin-bottom: 8px;
            text-shadow: 
                2px 2px 4px rgba(0,0,0,0.3),
                0 0 20px rgba(241, 196, 15, 0.2);
            font-weight: 700;
            letter-spacing: -0.5px;
            position: relative;
            z-index: 1;
        }

        .header p {
            font-size: 1em;
            opacity: 0.95;
            font-weight: 400;
            position: relative;
            z-index: 1;
            margin: 0;
        }

        .intro {
            display: none; /* مخفی شده - راهنما در modal نمایش داده می‌شود */
        }
        
        .help-btn-wrapper {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 999;
        }
        
        .help-btn {
            position: relative;
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
            color: white;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4);
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .help-btn-icon {
            display: block;
            width: 24px;
            height: 24px;
        }
        
        .help-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 20px rgba(220, 53, 69, 0.6);
        }
        
        .help-menu {
            position: fixed;
            bottom: 80px;
            right: 20px;
            left: auto;
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            border-radius: 20px;
            box-shadow: 
                0 15px 50px rgba(0, 0, 0, 0.3),
                0 5px 20px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
            min-width: 240px;
            z-index: 998;
            display: none;
            overflow: hidden;
            direction: rtl;
            border: 2px solid #e8ecf0;
            animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            backdrop-filter: blur(10px);
        }
        
        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(20px) scale(0.9);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        
        .help-menu.active {
            display: block;
        }
        
        /* Scrolling Ticker Ad — از راست می‌آید، از چپ خارج می‌شود */
        .ad-ticker-wrap {
            width: 100%;
            overflow: hidden;
            background: linear-gradient(135deg, #1e3c72 0%, #2c5282 100%);
            border-top: 2px solid rgba(241, 196, 15, 0.5);
            border-bottom: 2px solid rgba(241, 196, 15, 0.5);
            padding: 8px 0;
            direction: rtl;
        }
        .ad-ticker {
            display: flex;
            align-items: center;
            gap: 24px;
            animation: adTickerScroll 40s linear infinite;
            width: max-content;
        }
        .ad-ticker-item {
            flex-shrink: 0;
            font-size: 0.9em;
            font-weight: 600;
            color: #e2e8f0;
            white-space: nowrap;
        }
        .ad-ticker-item a {
            color: #f1c40f;
            text-decoration: none;
        }
        .ad-ticker-item a:hover {
            text-decoration: underline;
        }
        .ad-ticker-sep {
            flex-shrink: 0;
            color: rgba(241, 196, 15, 0.6);
            font-size: 0.6em;
        }
        @keyframes adTickerScroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        
        /* Bottom Sticky Banner Ad */
        .ad-sticky-banner {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 997;
            background: linear-gradient(135deg, #1e3c72 0%, #2c5282 100%);
            border-top: 3px solid #f1c40f;
            padding: 10px 16px 10px 50px;
            display: flex;
            align-items: center;
            box-shadow: 0 -4px 20px rgba(30, 60, 114, 0.4);
            transition: transform 0.3s ease, opacity 0.3s ease;
        }
        .ad-sticky-banner-dismissed {
            transform: translateY(100%);
            opacity: 0;
            pointer-events: none;
        }
        .ad-sticky-restore {
            position: fixed;
            bottom: 12px;
            left: 12px;
            z-index: 996;
            padding: 8px 14px;
            border: none;
            border-radius: 8px;
            background: linear-gradient(135deg, #1e3c72 0%, #2c5282 100%);
            color: #f1c40f;
            font-size: 0.9em;
            font-weight: 600;
            cursor: pointer;
            box-shadow: 0 2px 12px rgba(30, 60, 114, 0.5);
            border: 1px solid rgba(241, 196, 15, 0.4);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.2s ease;
        }
        .ad-sticky-restore:hover {
            transform: scale(1.03);
            color: #fff;
        }
        .ad-sticky-restore-visible {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }
        .ad-sticky-dismiss {
            position: absolute;
            top: 50%;
            left: 12px;
            transform: translateY(-50%);
            width: 28px;
            height: 28px;
            border: none;
            background: rgba(255,255,255,0.2);
            color: #fff;
            font-size: 1.2em;
            line-height: 1;
            cursor: pointer;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s;
        }
        .ad-sticky-dismiss:hover {
            background: rgba(255,255,255,0.35);
        }
        .ad-sticky-link {
            flex: 1;
            display: flex;
            align-items: center;
            min-width: 0;
            overflow: hidden;
            text-decoration: none;
            color: #e2e8f0;
            font-weight: 600;
            font-size: 0.95em;
        }
        .ad-sticky-link:hover {
            color: #f1c40f;
        }
        .ad-sticky-ticker-wrap {
            flex: 1;
            min-width: 0;
            overflow: hidden;
            direction: rtl;
        }
        .ad-sticky-ticker {
            display: flex;
            align-items: center;
            gap: 20px;
            width: max-content;
            animation: adStickyTickerScroll 35s linear infinite;
        }
        .ad-sticky-item {
            flex-shrink: 0;
            white-space: nowrap;
        }
        .ad-sticky-sep {
            flex-shrink: 0;
            color: rgba(241, 196, 15, 0.6);
            font-size: 0.6em;
        }
        @keyframes adStickyTickerScroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        
        .help-menu-item {
            padding: 18px 24px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border-bottom: 1px solid rgba(232, 236, 240, 0.5);
            display: flex;
            align-items: center;
            gap: 16px;
            color: #1e3c72;
            font-weight: 700;
            font-size: 1em;
            position: relative;
            overflow: hidden;
        }
        
        .help-menu-item::before {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 0;
            background: linear-gradient(90deg, transparent, rgba(241, 196, 15, 0.2));
            transition: width 0.3s ease;
        }
        
        .help-menu-item:hover::before {
            width: 100%;
        }
        
        .help-menu-item:last-child {
            border-bottom: none;
        }
        
        .help-menu-item:hover {
            background: linear-gradient(135deg, #fff9e6 0%, #fffef5 100%);
            color: #1e3c72;
            padding-right: 28px;
            transform: translateX(-3px);
        }
        
        .help-menu-item-icon {
            font-size: 1.6em;
            width: 28px;
            text-align: center;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
        }
        
        .help-menu-item-link {
            text-decoration: none;
        }
        
        .suggestions-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            z-index: 10001;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(5px);
            animation: fadeIn 0.3s ease;
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        
        .suggestions-modal.active {
            display: flex;
        }
        
        .suggestions-modal-content {
            background: white;
            padding: 40px;
            border-radius: 20px;
            max-width: 500px;
            width: 90%;
            box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
            position: relative;
            direction: rtl;
            text-align: center;
            animation: modalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        
        @keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: scale(0.8) translateY(-30px);
            }
            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }
        
        .suggestions-modal-close {
            position: absolute;
            top: 15px;
            left: 15px;
            background: #dc3545;
            color: white;
            border: none;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 20px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        
        .suggestions-modal-close:hover {
            background: #c82333;
            transform: scale(1.1) rotate(90deg);
        }
        
        .suggestions-modal-content h3 {
            color: #1e3c72;
            font-size: 1.8em;
            margin-bottom: 20px;
            font-weight: 700;
        }
        
        .suggestions-modal-content p {
            color: #555;
            font-size: 1.05em;
            line-height: 1.8;
            margin-bottom: 25px;
        }
        
        .suggestions-email-box {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border: 2px solid #e8ecf0;
            border-radius: 12px;
            padding: 20px;
            margin: 25px 0;
            text-align: center;
        }
        
        .suggestions-email-label {
            font-size: 0.9em;
            color: #7f8c8d;
            font-weight: 600;
            margin-bottom: 12px;
            display: block;
        }
        
        .suggestions-email-value {
            font-size: 1.3em;
            color: #1e3c72;
            font-weight: 700;
            direction: ltr;
            text-align: center;
            word-break: break-word;
            margin-bottom: 15px;
            padding: 10px;
            background: white;
            border-radius: 8px;
            border: 1px solid #e8ecf0;
        }
        
        .suggestions-email-value a {
            color: #1e3c72;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .suggestions-email-value a:hover {
            color: #2c5282;
            text-decoration: underline;
        }
        
        .suggestions-modal-copy-btn {
            display: inline-block;
            padding: 12px 28px;
            background: linear-gradient(135deg, #1e3c72 0%, #2c5282 100%);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 1em;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(30, 60, 114, 0.3);
            width: 100%;
            max-width: 250px;
        }
        
        .suggestions-modal-copy-btn:hover {
            background: linear-gradient(135deg, #2c5282 0%, #1e3c72 100%);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(30, 60, 114, 0.4);
        }
        
        .suggestions-modal-copy-btn.copied {
            background: #27ae60;
            box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
        }
        
        /* Modal حمایت مالی (از منوی دکمه قرمز) */
        .donation-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            z-index: 10001;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(5px);
            animation: fadeIn 0.3s ease;
        }
        .donation-modal.active {
            display: flex;
        }
        .donation-modal-content {
            background: white;
            padding: 30px 40px;
            border-radius: 20px;
            max-width: 480px;
            width: 90%;
            max-height: 85vh;
            overflow-y: auto;
            box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
            position: relative;
            direction: rtl;
            text-align: right;
            animation: modalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .donation-modal-close {
            position: absolute;
            top: 15px;
            left: 15px;
            background: #dc3545;
            color: white;
            border: none;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 20px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        .donation-modal-close:hover {
            background: #c82333;
            transform: scale(1.1);
        }
        .donation-modal-content h3 {
            color: #1e3c72;
            font-size: 1.5em;
            margin-bottom: 4px;
            font-weight: 700;
        }
        .donation-modal-en {
            color: #7f8c8d;
            font-size: 0.95em;
            margin-bottom: 16px;
        }
        .donation-modal-content p {
            color: #555;
            font-size: 1em;
            line-height: 1.7;
            margin-bottom: 12px;
        }
        .donation-modal-content h4 {
            color: #2c3e50;
            font-size: 1.1em;
            margin: 16px 0 10px;
        }
        .donation-modal-contact {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .donation-modal-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            background: #f8f9fa;
            padding: 10px 14px;
            border-radius: 10px;
            border: 1px solid #e8ecf0;
        }
        .donation-modal-label {
            font-size: 0.9em;
            color: #666;
            min-width: 80px;
        }
        .donation-modal-row a {
            color: #1e3c72;
            font-weight: 600;
            flex: 1;
            min-width: 0;
        }
        .donation-modal-copy {
            padding: 6px 14px;
            background: linear-gradient(135deg, #1e3c72 0%, #2c5282 100%);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 0.85em;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .donation-modal-copy:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(30, 60, 114, 0.4);
        }
        .donation-modal-payment {
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid #e8ecf0;
        }
        .donation-modal-payment strong {
            color: #2c3e50;
        }
        
        .help-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 10000;
            align-items: center;
            justify-content: center;
        }
        
        .help-modal.active {
            display: flex;
        }
        
        .help-modal-content {
            background: white;
            padding: 30px;
            border-radius: 15px;
            max-width: 600px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            position: relative;
            direction: rtl;
            text-align: right;
        }
        
        .help-modal-content h2 {
            color: #1e3c72;
            margin-bottom: 20px;
            font-size: 1.8em;
            text-align: center;
        }
        
        .help-modal-content p {
            color: #555;
            font-size: 1.1em;
            line-height: 1.8;
            text-align: justify;
        }
        
        .help-modal-close {
            position: absolute;
            top: 15px;
            left: 15px;
            background: #dc3545;
            color: white;
            border: none;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 20px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        
        .help-modal-close:hover {
            background: #c82333;
            transform: scale(1.1);
        }

        .test-selector {
            padding: 25px;
            background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
            border-right: 5px solid #1e3c72;
            border-bottom: none;
            width: 280px;
            min-width: 280px;
            position: sticky;
            top: 0;
            align-self: flex-start;
            height: 100vh;
            overflow-y: auto;
            box-shadow: 
                -4px 0 15px rgba(30, 60, 114, 0.08),
                inset 1px 0 0 rgba(30, 60, 114, 0.08);
            direction: ltr;
            z-index: 10;
            box-sizing: border-box;
            order: 3;
            flex-shrink: 0;
        }
        
        .test-selector::-webkit-scrollbar {
            width: 5px;
        }
        
        .test-selector::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        
        .test-selector::-webkit-scrollbar-thumb {
            background: rgba(30, 60, 114, 0.35);
            border-radius: 3px;
        }
        
        .test-selector::-webkit-scrollbar-thumb:hover {
            background: #f1c40f;
        }
        
        .test-selector-wrapper {
            display: none;
        }
        
        .nav-btn-compact:hover:not(:disabled) {
            background: rgba(255,255,255,0.3) !important;
            border-color: rgba(255,255,255,0.5) !important;
            transform: translateY(-1px);
        }
        
        .nav-btn-compact:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }
        
        .submit-final-btn-compact:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(241, 196, 15, 0.5);
        }
        
        @media (max-width: 768px) {
            .header-carousel {
                min-height: 168px;
                height: 168px;
                padding: 0 6px;
            }
            
            .header-slide h1 {
                font-size: 1.3em;
                margin-bottom: 5px;
            }
            
            .header-slide p {
                font-size: 0.9em;
            }
            
            .header-slide-content h2 {
                font-size: 1.1em;
            }
            
            .header-slide-content p {
                font-size: 0.85em;
            }
            
            .question-nav-bar {
                flex-wrap: wrap;
                gap: 10px;
            }
            
            .question-nav-bar > div {
                width: 100%;
                justify-content: center;
            }
            
            .question-nav-bar button {
                flex: 1;
            }
        }

        .test-selector h3 {
            color: #1e3c72;
            margin-bottom: 20px;
            font-size: 1.3em;
            text-align: center;
            padding-bottom: 15px;
            border-bottom: 2px solid #ddd;
        }

        /* همخوان با باکس مطالعه کتاب و المان‌های sidebar، قاب نارنجی */
        .test-navigator {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            background: linear-gradient(135deg, #1e3c72 0%, #2c5282 100%);
            padding: 10px 5px;
            border-radius: 12px;
            border: 2.5px solid #f39c12;
            box-shadow: 0 3px 12px rgba(30, 60, 114, 0.2), 0 0 0 1px rgba(243, 156, 18, 0.12);
            margin-top: 10px;
            width: calc(100% + 40px);
            max-width: none;
            margin-left: -20px;
            margin-right: -20px;
            box-sizing: border-box;
        }
        
        .test-navigator .question-label {
            font-size: 0.88em;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.9);
        }
        
        .test-navigator .question-number-display {
            font-size: 0.9em;
            color: #f1c40f;
            font-weight: 700;
        }
        
        .test-navigator-mobile {
            display: none;
        }
        
        .mobile-test-select-only {
            display: none;
            text-align: center;
            padding: 8px 12px;
            margin-bottom: 6px;
        }
        
        .stats-mobile {
            display: none;
        }

        .test-nav-btn {
            padding: 6px 14px;
            color: #1a1a2e;
            border: 1px solid rgba(243, 156, 18, 0.5);
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.95em;
            font-weight: 700;
            transition: all 0.2s ease;
            min-width: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(145deg, #e67e22 0%, #f39c12 50%, #f1c40f 100%);
            box-shadow: 0 2px 6px rgba(230, 126, 34, 0.3);
        }
        
        .test-nav-btn:hover:not(:disabled) {
            transform: translateY(-1px);
            box-shadow: 0 3px 10px rgba(243, 156, 18, 0.45);
            background: linear-gradient(145deg, #f39c12 0%, #f1c40f 100%);
        }
        
        .test-nav-btn:active:not(:disabled) {
            transform: translateY(0);
            box-shadow: 0 1px 4px rgba(230, 126, 34, 0.35);
        }

        .test-nav-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        .test-nav-btn.prev,
        .test-nav-btn.next {
            background: linear-gradient(145deg, #e67e22 0%, #f39c12 50%, #f1c40f 100%);
        }

        .test-select-wrapper {
            display: flex;
            flex: 1;
            justify-content: center;
            align-items: center;
            position: relative;
            margin: 0 10px;
            min-width: 0;
        }
        
        .test-number-select {
            width: 100%;
            max-width: 250px; /* Increased from 200px for wider box */
            min-width: 180px; /* Increased from 160px */
            padding: 12px 38px 12px 16px;
            border: 2px solid #f1c40f; /* Yellow border as in image */
            border-radius: 8px;
            font-size: 1.05em;
            font-weight: 700;
            color: #1e3c72;
            background: #ffffff;
            outline: none;
            transition: all 0.3s ease;
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath fill='%231e3c72' d='M8 11L3 6h10z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
            background-size: 14px 14px;
            box-shadow: 0 2px 6px rgba(156, 39, 176, 0.15);
            font-family: Tahoma, 'Segoe UI', 'Roboto', 'Open Sans', Geneva, Verdana, sans-serif;
            text-align: left;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .test-number-select:focus {
            border-color: #7b1fa2;
            box-shadow: 0 0 0 3px rgba(156, 39, 176, 0.25), 0 3px 10px rgba(156, 39, 176, 0.2);
            outline: none;
        }
        
        .test-number-select:hover {
            border-color: #7b1fa2;
            box-shadow: 0 3px 10px rgba(156, 39, 176, 0.25);
        }
        
        .test-number-select option {
            padding: 10px;
            font-weight: 600;
            color: #1e3c72;
            background: #ffffff;
        }
        
        .test-number-select option:checked {
            background: #f3e5f5;
            color: #7b1fa2;
            font-weight: 700;
        }

        .test-go-btn {
            padding: 10px 24px;
            background: linear-gradient(135deg, #f1c40f 0%, #f39c12 100%);
            color: #1e3c72;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            font-size: 0.95em;
            font-weight: 700;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 
                0 4px 12px rgba(241, 196, 15, 0.4),
                0 2px 6px rgba(241, 196, 15, 0.3);
            letter-spacing: 0.3px;
        }
        
        .test-go-btn:hover {
            transform: translateY(-2px) scale(1.05);
            box-shadow: 
                0 6px 20px rgba(241, 196, 15, 0.5),
                0 3px 10px rgba(241, 196, 15, 0.4);
        }
        
        .test-go-btn:active {
            transform: translateY(0) scale(1);
        }

        .test-go-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(17, 153, 142, 0.6);
        }

        .test-stats {
            display: none; /* مخفی شده چون در sidebar نمایش داده می‌شود */
        }
        
        .sidebar-stats {
            margin-top: 35px; /* Increased from 24px to move down */
            padding: 26px;
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            color: #1e3c72;
            border-radius: 18px;
            box-shadow: 
                0 6px 25px rgba(30, 60, 114, 0.14),
                0 3px 12px rgba(30, 60, 114, 0.1),
                0 1px 4px rgba(30, 60, 114, 0.08),
                inset 0 0 0 3px #1e3c72,
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
            position: relative;
            overflow: hidden;
            width: calc(100% + 20px); /* Wider box */
            margin-left: -10px; /* Pull left */
            margin-right: -10px; /* Pull right */
            box-sizing: border-box;
        }
        
        .sidebar-stats::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #1e3c72 0%, #f1c40f 50%, #1e3c72 100%);
            background-size: 200% 100%;
            /* Removed infinite animation to prevent memory issues */
        }
        
        .sidebar-stats-content {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .timer-container {
            display: flex;
            align-items: center;
            gap: 14px;
            font-size: 1.4em;
            font-weight: 700;
            color: #1e3c72;
            padding: 12px 18px;
            background: linear-gradient(135deg, rgba(30, 60, 114, 0.05) 0%, rgba(30, 60, 114, 0.02) 100%);
            border-radius: 12px;
            border: 2px solid rgba(30, 60, 114, 0.1);
            box-shadow: 
                0 2px 8px rgba(30, 60, 114, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
        }
        
        .timer-icon {
            font-size: 1.6em;
            filter: drop-shadow(0 2px 4px rgba(30, 60, 114, 0.2));
        }

        .timer-icon {
            font-size: 1.6em;
        }

        .timer.warning {
            color: #ffc107;
            animation: pulse 1s infinite;
        }

        .timer.danger {
            color: #dc3545;
            animation: pulse 0.5s infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        .score-counter {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .counter-item {
            display: flex;
            align-items: center;
            gap: 12px;
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            padding: 12px 20px;
            border-radius: 30px;
            border: 2px solid rgba(30, 60, 114, 0.1);
            box-shadow: 
                0 2px 8px rgba(30, 60, 114, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
            transition: all 0.3s ease;
        }
        
        .counter-item:hover {
            transform: translateY(-2px);
            box-shadow: 
                0 4px 12px rgba(30, 60, 114, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
        }

        .counter-value {
            font-size: 1.5em;
            font-weight: 700;
            color: #1e3c72;
            text-shadow: 0 1px 2px rgba(30, 60, 114, 0.1);
            min-width: 30px;
            text-align: center;
        }

        .counter-label {
            font-size: 1em;
            color: #34495e;
            font-weight: 600;
            letter-spacing: 0.3px;
        }
        
        .sidebar-stats .score-counter {
            flex-direction: column;
            gap: 10px;
            width: 100%;
        }
        
        .sidebar-stats .counter-item {
            width: 100%;
            justify-content: space-between;
            padding: 10px 15px;
        }
        
        .sidebar-stats .counter-value {
            font-size: 1.2em;
        }
        
        .sidebar-stats .counter-label {
            font-size: 0.95em;
        }

        .result-message {
            padding: 20px;
            border-radius: 10px;
            margin-top: 20px;
            text-align: center;
            font-size: 1.3em;
            font-weight: bold;
            animation: fadeIn 0.5s;
        }

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

        .result-success {
            background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
            color: white;
        }

        .result-fail {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
        }

        .copy-icon {
            display: inline-block;
            width: 16px;
            height: 16px;
            cursor: pointer;
            vertical-align: middle;
            position: relative;
            transition: all 0.2s ease;
            flex-shrink: 0;
            opacity: 0.6;
        }

        .copy-icon::before {
            content: '';
            position: absolute;
            width: 12px;
            height: 12px;
            border: 1.5px solid #1e3c72;
            border-radius: 2px;
            top: 0;
            left: 0;
            background: white;
        }

        .copy-icon::after {
            content: '';
            position: absolute;
            width: 12px;
            height: 12px;
            border: 1.5px solid #1e3c72;
            border-radius: 2px;
            top: 3px;
            left: 3px;
            background: white;
        }

        .copy-icon:hover {
            opacity: 1;
        }

        .copy-icon:hover::before,
        .copy-icon:hover::after {
            border-color: #f1c40f;
        }

        .question-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }


        .test-content {
            display: none;
            padding: 50px 40px;
            max-width: 900px;
            margin: 0 auto;
            width: 100%;
            animation: fadeInUp 0.5s ease-out;
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .test-content.active {
            display: block;
        }

        .question-card {
            background: #ffffff;
            border-radius: 20px;
            padding: 42px 45px;
            margin-bottom: 40px;
            border-left: 7px solid #f1c40f;
            border-top: 4px solid #1e3c72;
            box-shadow: 
                0 6px 30px rgba(30, 60, 114, 0.1),
                0 3px 12px rgba(30, 60, 114, 0.06),
                0 1px 4px rgba(30, 60, 114, 0.04),
                inset 0 1px 0 rgba(255, 255, 255, 0.95),
                inset 0 -1px 0 rgba(30, 60, 114, 0.02);
            transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(10px);
        }
        
        .question-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 7px;
            height: 100%;
            background: linear-gradient(180deg, #f1c40f 0%, #f39c12 50%, #f1c40f 100%);
            background-size: 100% 200%;
            animation: gradientFlow 3s ease infinite;
            transition: width 0.5s cubic-bezier(0.23, 1, 0.32, 1);
        }
        
        @keyframes gradientFlow {
            0%, 100% { background-position: 0% 0%; }
            50% { background-position: 0% 100%; }
        }
        
        .question-card::after {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(241, 196, 15, 0.03) 0%, transparent 70%);
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .question-card:hover {
            box-shadow: 
                0 12px 40px rgba(30, 60, 114, 0.18),
                0 6px 20px rgba(241, 196, 15, 0.25),
                0 2px 8px rgba(30, 60, 114, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.95),
                inset 0 -1px 0 rgba(30, 60, 114, 0.02);
            transform: translateY(-4px) scale(1.01);
            border-left-color: #f39c12;
        }
        
        .question-card:hover::before {
            width: 9px;
        }
        
        .question-card:hover::after {
            opacity: 1;
        }

        .question-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #1e3c72 0%, #2c5282 50%, #1e3c72 100%);
            background-size: 200% 200%;
            /* Removed infinite animation to prevent memory issues */
            color: white;
            padding: 12px 26px;
            border-radius: 35px;
            font-weight: 700;
            margin-bottom: 28px;
            font-size: 0.95em;
            box-shadow: 
                0 6px 18px rgba(30, 60, 114, 0.35),
                0 3px 8px rgba(30, 60, 114, 0.25),
                0 1px 3px rgba(30, 60, 114, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.25),
                inset 0 -1px 0 rgba(0, 0, 0, 0.1);
            letter-spacing: 0.8px;
            position: relative;
            overflow: hidden;
            text-transform: uppercase;
            font-size: 0.9em;
        }
        
        .question-number::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(241, 196, 15, 0.4), transparent);
            /* Removed infinite animation to prevent memory issues */
        }
        
        .question-number::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(241, 196, 15, 0.3) 0%, transparent 70%);
            transform: translate(-50%, -50%);
            /* Removed infinite animation to prevent memory issues */
        }
        
        @keyframes shimmer {
            0% { left: -100%; }
            100% { left: 100%; }
        }
        
        @keyframes pulse {
            0%, 100% { width: 0; height: 0; opacity: 0; }
            50% { width: 200px; height: 200px; opacity: 1; }
        }

        .question-text {
            font-size: 1.25em;
            color: #1e3c72;
            margin-bottom: 28px;
            font-weight: 600;
            line-height: 2;
            direction: ltr;
            text-align: left;
            letter-spacing: -0.3px;
            text-shadow: 0 1px 2px rgba(30, 60, 114, 0.05);
            position: relative;
        }
        
        .question-text::first-letter {
            font-size: 1.3em;
            color: #1e3c72;
            font-weight: 700;
        }

        .question-text-fa {
            font-size: 1.15em;
            color: #2c3e50;
            margin-bottom: 18px;
            direction: rtl;
            text-align: right;
            font-style: normal;
            display: flex;
            align-items: center;
            gap: 12px;
            font-weight: 500;
            padding-right: 8px;
            line-height: 1.8;
            letter-spacing: 0.2px;
            opacity: 0.9;
        }

        .question-source-toggle {
            margin-top: 15px;
            cursor: pointer;
            user-select: none;
        }

        .question-source-header {
            padding: 10px 15px;
            background: #fff9e6;
            border-right: 4px solid #f1c40f;
            border-radius: 5px;
            font-size: 0.9em;
            color: #1e3c72;
            direction: rtl;
            text-align: right;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: background 0.3s ease;
        }

        .question-source-header:hover {
            background: #fff9e6;
            border-right-color: #f39c12;
        }

        .question-source-header .toggle-icon {
            margin-left: 10px;
            font-weight: bold;
            transition: transform 0.3s ease;
        }

        .question-source-header.expanded .toggle-icon {
            transform: rotate(180deg);
        }

        .question-source-content {
            margin-top: 10px;
            padding: 15px;
            background: #f8f9fa;
            border-right: 4px solid #6c757d;
            border-radius: 5px;
            font-size: 0.95em;
            color: #495057;
            direction: ltr;
            text-align: left;
            line-height: 1.8;
            display: none;
        }

        .question-source-content.show {
            display: block;
        }

        .question-source-content a {
            color: #1e3c72;
            text-decoration: none;
            font-weight: bold;
        }
        
        .question-source-content a:hover {
            color: #f1c40f;
        }

        .question-source-content a:hover {
            text-decoration: underline;
        }

        .book-link {
            display: flex;
            margin-top: -20px;
            padding: 18px 22px;
            min-height: 80px;
            width: calc(100% + 40px);
            margin-left: -20px;
            margin-right: -20px;
            background: linear-gradient(135deg, #1e3c72 0%, #2c5282 100%);
            color: white;
            text-decoration: none;
            border: 2.5px solid #f1c40f;
            border-radius: 12px;
            font-weight: 700;
            font-size: 1em;
            line-height: 1.3;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 4px 15px rgba(30, 60, 114, 0.3), 0 2px 8px rgba(30, 60, 114, 0.2);
            letter-spacing: 0.3px;
            position: relative;
            overflow: hidden;
            box-sizing: border-box;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        
        .book-link::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(241, 196, 15, 0.3), transparent);
            transition: left 0.5s;
        }
        
        .book-link:hover::before {
            left: 100%;
        }

        .book-link:hover {
            transform: translateY(-3px);
            box-shadow: 
                0 6px 25px rgba(30, 60, 114, 0.4),
                0 3px 12px rgba(30, 60, 114, 0.3);
            background: linear-gradient(135deg, #2c5282 0%, #1e3c72 100%);
        }

        .options {
            margin: 20px 0;
            direction: ltr;
            text-align: left;
        }

        .option {
            padding: 22px 28px;
            margin: 18px 0;
            background: #ffffff;
            border: 3px solid #e8ecf0;
            border-radius: 16px;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            font-size: 1.08em;
            direction: ltr;
            text-align: left;
            position: relative;
            box-shadow: 
                0 3px 12px rgba(30, 60, 114, 0.06),
                0 1px 4px rgba(30, 60, 114, 0.04),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
            overflow: hidden;
            pointer-events: auto;
            user-select: none;
        }
        
        .option::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(180deg, #f1c40f 0%, #f39c12 100%);
            transform: scaleY(0);
            transform-origin: bottom;
            transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            pointer-events: none;
        }
        
        .option::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(241, 196, 15, 0.15) 0%, transparent 70%);
            transform: translate(-50%, -50%);
            transition: width 0.4s, height 0.4s;
            pointer-events: none;
        }

        .option:hover {
            border-color: #f1c40f;
            background: linear-gradient(135deg, #fff9e6 0%, #fffef5 100%);
            transform: translateX(12px) scale(1.02);
            box-shadow: 
                0 6px 20px rgba(241, 196, 15, 0.3),
                0 3px 12px rgba(241, 196, 15, 0.2),
                0 1px 4px rgba(241, 196, 15, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
        }
        
        .option:hover::before {
            transform: scaleY(1);
        }
        
        .option:hover::after {
            width: 300px;
            height: 300px;
        }

        .option.selected {
            border-color: #f1c40f;
            background: linear-gradient(135deg, #fff9e6 0%, #fffef5 100%);
            font-weight: 600;
            box-shadow: 
                0 6px 25px rgba(241, 196, 15, 0.35),
                0 3px 15px rgba(241, 196, 15, 0.25),
                0 1px 6px rgba(241, 196, 15, 0.2),
                inset 0 0 0 3px rgba(241, 196, 15, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
            transform: translateX(8px) scale(1.01);
        }
        
        .option.selected::before {
            transform: scaleY(1);
            width: 5px;
        }

        .option.correct {
            border-color: #28a745 !important;
            background: #d4edda !important;
            background-image: none !important;
            color: #155724 !important;
            font-weight: 600;
            box-shadow: 0 2px 8px rgba(40, 167, 69, 0.2) !important;
            transform: translateX(8px) scale(1.01);
        }
        
        .option.correct::before {
            background: #28a745 !important;
            transform: scaleY(1) !important;
        }

        .option.incorrect {
            border-color: #dc3545 !important;
            background: #f8d7da !important;
            background-image: none !important;
            color: #721c24 !important;
            font-weight: 600;
            box-shadow: 0 2px 8px rgba(220, 53, 69, 0.2) !important;
            transform: translateX(8px) scale(1.01);
        }
        
        .option.incorrect::before {
            background: #dc3545 !important;
            transform: scaleY(1) !important;
        }

        .submit-section {
            text-align: center;
            padding: 30px;
            background: #f8f9fa;
            border-top: 3px solid #1e3c72;
        }

        .submit-btn {
            padding: 20px 55px;
            background: linear-gradient(135deg, #f1c40f 0%, #f39c12 100%);
            color: #1e3c72;
            border: none;
            border-radius: 50px;
            font-size: 1.35em;
            font-weight: 700;
            cursor: pointer;
            box-shadow: 
                0 8px 25px rgba(241, 196, 15, 0.4),
                0 4px 15px rgba(241, 196, 15, 0.3);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            letter-spacing: 0.5px;
            position: relative;
            overflow: hidden;
        }
        
        .submit-btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
        }
        
        .submit-btn:hover::before {
            width: 300px;
            height: 300px;
        }
        
        .submit-btn:hover {
            transform: translateY(-3px) scale(1.02);
            box-shadow: 
                0 12px 35px rgba(241, 196, 15, 0.5),
                0 6px 20px rgba(241, 196, 15, 0.4);
        }
        
        .submit-btn:active {
            transform: translateY(-1px) scale(1);
        }

        .submit-btn:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
        }

        /* دکمه ۳۰ دوره آزمون — خوانا، زیبا، هم‌عرض با باکس بالا، بدون نوار اضافه */
        .btn-30-tests-wrap {
            text-align: center;
            margin-top: 14px;
            margin-bottom: 16px;
            padding-bottom: 0;
            width: calc(100% + 20px);
            margin-left: -10px;
            margin-right: -10px;
            box-sizing: border-box;
            background: transparent;
            border: none;
        }
        .btn-30-tests {
            display: flex;
            flex-direction: row;
            align-items: center;
            text-decoration: none;
            justify-content: center;
            gap: 10px;
            width: 100%;
            padding: 18px 16px;
            background: linear-gradient(135deg, #c2410c 0%, #ea580c 50%, #f59e0b 100%);
            color: #ffffff !important;
            border: 2px solid rgba(255,255,255,0.35);
            border-radius: 12px;
            cursor: pointer;
            font-weight: 700;
            font-size: 0.95em;
            box-shadow: 0 4px 16px rgba(234, 88, 12, 0.4);
            transition: transform 0.2s, box-shadow 0.2s;
            white-space: normal;
            line-height: 1.45;
            overflow: visible;
            font-family: inherit;
            box-sizing: border-box;
            text-align: center;
            min-height: 52px;
        }
        .btn-30-tests:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 22px rgba(234, 88, 12, 0.5);
        }
        .btn-30-tests-icon,
        .btn-30-tests-inner,
        .btn-30-tests-sub {
            color: #ffffff !important;
            visibility: visible !important;
        }
        .btn-30-tests-icon { font-size: 1.25em; flex-shrink: 0; }
        .btn-30-tests-inner {
            font-weight: 700;
            flex: 1;
            min-width: 0;
            text-align: center;
            padding: 0 4px;
        }
        .btn-30-tests-sub { font-size: 0.9em; opacity: 0.95; font-weight: 600; display: block; margin-top: 4px; }

        /* دکمه ۳۰ دوره آزمون در موبایل */
        .mobile-sidebar-sections .btn-30-tests-mobile-wrap {
            display: block;
            margin: 14px 0 16px;
            width: 100%;
        }
        .mobile-sidebar-sections .btn-30-tests-mobile-wrap .btn-30-tests {
            width: 100%;
            padding: 16px 14px;
            font-size: 0.95em;
            border-radius: 12px;
            box-sizing: border-box;
        }

        .modal-30-tests-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.5);
            backdrop-filter: blur(4px);
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s, visibility 0.3s;
        }
        .modal-30-tests-overlay.is-open {
            opacity: 1;
            visibility: visible;
        }
        .modal-30-tests {
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 24px 60px rgba(0,0,0,0.25);
            max-width: 900px;
            width: 100%;
            max-height: 90vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        .modal-30-tests-header {
            padding: 20px 24px;
            background: linear-gradient(135deg, #1e3c72 0%, #2c5282 100%);
            color: #fff;
            position: relative;
        }
        .modal-30-tests-title { margin: 0; font-size: 1.5em; }
        .modal-30-tests-subtitle { margin: 6px 0 0 0; font-size: 0.9em; opacity: 0.9; }
        .modal-30-tests-close {
            position: absolute;
            top: 16px;
            left: 20px;
            width: 36px;
            height: 36px;
            border: none;
            background: rgba(255,255,255,0.2);
            color: #fff;
            font-size: 1.5em;
            line-height: 1;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.2s;
        }
        .modal-30-tests-close:hover { background: rgba(255,255,255,0.3); }
        .modal-30-tests-body {
            padding: 24px;
            overflow-y: auto;
            flex: 1;
        }
        .modal-30-tests-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 12px;
        }
        .modal-30-tests-card {
            padding: 16px;
            background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            text-align: center;
            cursor: pointer;
            font-weight: 700;
            color: #1e3c72;
            transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
        }
        .modal-30-tests-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(30, 60, 114, 0.2);
            border-color: #6366f1;
        }
        .modal-30-tests-card span { display: block; font-size: 0.85em; margin-top: 4px; color: #64748b; font-weight: 600; }

        .modal-30-tests-quiz { padding: 0; }
        .modal-30-quiz-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
            padding-bottom: 12px;
            border-bottom: 2px solid #e2e8f0;
        }
        .modal-30-quiz-progress { font-weight: 700; color: #1e3c72; }
        .modal-30-quiz-score { font-weight: 700; color: #475569; }
        .modal-30-quiz-question {
            padding: 20px;
            background: #f8fafc;
            border-radius: 12px;
            margin-bottom: 16px;
            border: 1px solid #e2e8f0;
        }
        .modal-30-quiz-question .q-fa { display: block; font-size: 1.1em; color: #1e293b; margin-bottom: 8px; direction: rtl; }
        .modal-30-quiz-question .q-en { display: block; font-size: 0.95em; color: #475569; direction: ltr; }
        .modal-30-quiz-options { display: flex; flex-direction: column; gap: 10px; }
        .modal-30-quiz-option {
            padding: 14px 18px;
            background: #fff;
            border: 2px solid #e2e8f0;
            border-radius: 10px;
            cursor: pointer;
            text-align: right;
            transition: background 0.2s, border-color 0.2s, transform 0.2s;
        }
        .modal-30-quiz-option:hover:not(.disabled) {
            border-color: #6366f1;
            background: #f5f3ff;
        }
        .modal-30-quiz-option.disabled { cursor: default; pointer-events: none; }
        .modal-30-quiz-option.option-correct {
            background: #dcfce7;
            border-color: #22c55e;
            color: #166534;
        }
        .modal-30-quiz-option.option-incorrect {
            background: #fee2e2;
            border-color: #ef4444;
            color: #991b1b;
        }
        .modal-30-quiz-option .opt-fa { display: block; direction: rtl; margin-bottom: 4px; font-weight: 600; color: #1e293b; }
        .modal-30-quiz-option .opt-en { display: block; direction: ltr; font-size: 0.9em; color: #64748b; }
        .modal-30-quiz-next {
            margin-top: 20px;
            padding: 14px 32px;
            background: linear-gradient(135deg, #1e3c72 0%, #2c5282 100%);
            color: #fff;
            border: none;
            border-radius: 10px;
            font-weight: 700;
            cursor: pointer;
            font-size: 1em;
        }
        .modal-30-quiz-next:hover { opacity: 0.95; }
        .modal-30-tests-result { text-align: center; padding: 24px; }
        .modal-30-result-title { margin: 0 0 16px 0; color: #1e3c72; font-size: 1.4em; }
        .modal-30-result-score { font-size: 2.5em; font-weight: 800; color: #1e3c72; margin-bottom: 12px; }
        .modal-30-result-text { margin-bottom: 20px; color: #475569; }
        .modal-30-result-back {
            padding: 14px 28px;
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            color: #fff;
            border: none;
            border-radius: 10px;
            font-weight: 700;
            cursor: pointer;
        }
        @media (max-width: 600px) {
            .modal-30-tests-grid { grid-template-columns: repeat(5, 1fr); gap: 8px; }
            .modal-30-tests-card { padding: 12px; font-size: 0.9em; }
            .modal-30-tests-card span:last-child { font-size: 0.75em; }
            .modal-30-quiz-option { padding: 12px 14px; }
        }

        .results {
            display: none;
            padding: 30px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            text-align: center;
            margin-top: 30px;
            border-radius: 15px;
        }

        .results.show {
            display: block;
        }

        .score {
            font-size: 3em;
            font-weight: bold;
            margin: 20px 0;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .score-text {
            font-size: 1.5em;
            margin-bottom: 20px;
        }

        .answers-table {
            width: 100%;
            margin-top: 30px;
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }

        .answers-table table {
            width: 100%;
            border-collapse: collapse;
        }

        .answers-table th {
            background: #1e3c72;
            color: white;
            padding: 15px;
            text-align: right;
            font-size: 1.1em;
        }

        .answers-table td {
            padding: 15px;
            border-bottom: 1px solid #ddd;
            text-align: right;
        }

        .answers-table tr:nth-child(even) {
            background: #f8f9fa;
        }

        .answers-table tr:hover {
            background: #e8edff;
        }

        .correct-answer {
            color: #28a745;
            font-weight: bold;
        }

        .your-answer {
            color: #667eea;
        }

        .wrong-answer {
            color: #dc3545;
        }

        /* Responsive Design for Ads Grid */
        @media (max-width: 1200px) {
            .header-carousel {
                min-height: 200px;
                height: 200px;
                padding: 0 10px;
            }
            
            .header-slide h1 {
                font-size: 1.6em;
            }
            
            .header-slide p {
                font-size: 1.05em;
            }
            
            .header-slide-content h2 {
                font-size: 1.4em;
            }
            
            .header-slide-content p {
                font-size: 0.95em;
            }
            
            .ads-grid {
                grid-template-columns: repeat(5, 1fr);
                gap: 14px; /* Reduced from 16px for better density on large screens */
                align-items: stretch; /* Ensure all tiles have same height */
            }
            
            /* Ensure sidebar is visible on large screens */
            .right-sidebar {
                display: flex !important;
                visibility: visible !important;
            }
            
            .right-sidebar .book-summary-section,
            .right-sidebar .donation-section,
            .right-sidebar .ad-registration-section {
                display: block !important;
                visibility: visible !important;
            }
        }

        @media (max-width: 968px) {
            .container {
                flex-direction: column;
                border-radius: 0;
                margin: 0;
                min-height: 100vh;
                box-shadow: none;
                direction: rtl;
            }
            
            .main-content {
                width: 100%;
                padding: 0;
                order: 1;
            }
            
            .right-sidebar {
                display: none !important;
            }
            
            .right-sidebar .book-summary-section,
            .right-sidebar .donation-section,
            .right-sidebar .ad-registration-section {
                display: none !important;
            }
            
            .test-selector {
                display: none;
            }
            
            .test-navigator {
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: center;
                gap: 10px;
            }
            
            .test-nav-btn {
                flex: 1;
                min-width: 120px;
                padding: 10px 15px;
            }
            
            .test-select-wrapper {
                flex: 1;
                max-width: 200px;
                margin: 0 10px;
                min-width: 0;
            }
            
            .test-number-select {
                max-width: 200px;
                min-width: 150px;
                font-size: 1em;
                padding: 11px 36px 11px 15px;
            }
            
            .test-input-row {
                flex: 1;
            }
            
            .ads-section {
                padding: 0;
                margin: 25px 0;
            }
            
            .ads-section-title {
                font-size: 1.5em;
                margin-bottom: 20px;
            }

            .ads-grid {
                grid-template-columns: repeat(4, 1fr);
                gap: 12px; /* Reduced from 14px for better density */
                align-items: stretch; /* Ensure all tiles have same height */
            }
            
            .ad-tile {
                padding: 16px; /* Slightly denser */
                aspect-ratio: 1 / 3.2;
                flex-shrink: 0;
                flex-grow: 0;
                width: 100%;
                min-width: 0;
                max-width: 100%;
                min-height: 600px; /* Reduced from 760px for better density */
                height: 100%; /* Ensure tiles stretch to fill grid cell */
                align-self: stretch; /* Force tile to fill entire grid cell */
                overflow-y: auto;
                overflow-x: hidden;
            }
            
            .ad-tile-icon {
                font-size: 1.5em;
            }
            
            .ad-tile-business-name {
                font-size: 0.95em;
            }
        }
        
        @media (max-width: 768px) {
            .container {
                border-radius: 0;
                margin: 0;
            }
            
            .main-content {
                padding: 0;
            }
            
            .header {
                padding: 0;
                position: relative;
                margin-bottom: 0;
            }
            
            .slide-visitor-text { top: 2px; font-size: 0.9em; }
            .header-carousel {
                min-height: 168px;
                height: 168px;
                padding: 0 6px;
                padding-top: 18px;
                display: block;
            }
            
            .header-slide {
                padding: 0 6px;
                min-height: auto;
                width: 100%;
            }
            
            .header-slide h1 {
                font-size: 1.3em;
                margin-bottom: 4px;
                font-weight: 700;
                text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
            }
            .header-title-line1 { font-size: 1.25em; }
            .header-title-line2 { font-size: 1.1em; }
            .header-title-flag { font-size: 1.35em; }
            .header-title-en { font-size: 0.9em; }
            .header-slide-ad-img { max-height: 148px; }
            .header-slide-ad-registration-box {
                padding: 16px 20px 14px;
                min-width: 220px;
            }
            .header-slide-ad-registration-phone-wrap { gap: 8px; margin-top: 12px; }
            .header-slide-ad-registration-icon svg { width: 24px; height: 24px; }
            .header-slide-ad-registration-title { font-size: 1em; }
            .header-slide-ad-registration-title::after { width: 32px; margin-top: 8px; }
            .header-slide-ad-registration-phone { font-size: 1em; }

            .header-slide p {
                font-size: 0.9em;
                font-weight: 500;
                text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
            }
            
            .header-slide-content h2 {
                font-size: 1.3em;
                margin-bottom: 10px;
                font-weight: 700;
            }
            
            .header-slide-content p {
                font-size: 0.9em;
                line-height: 1.6;
            }
            
            .ad-ticker-wrap {
                padding: 6px 0;
            }
            .ad-ticker-item {
                font-size: 0.8em;
            }
            .ad-ticker {
                gap: 16px;
                animation-duration: 35s;
            }
            
            .ad-sticky-restore {
                bottom: 8px;
                left: 8px;
                padding: 6px 12px;
                font-size: 0.85em;
            }
            .ad-sticky-banner {
                padding: 8px 12px 8px 44px;
            }
            .ad-sticky-link {
                font-size: 0.85em;
            }
            .ad-sticky-ticker {
                gap: 14px;
                animation-duration: 28s;
            }
            .ad-sticky-item {
                font-size: 0.95em;
            }
            .ad-sticky-dismiss {
                width: 24px;
                height: 24px;
                font-size: 1em;
                left: 8px;
            }
            
            #testContainer {
                padding: 10px;
            }
            
            .question-nav-bar {
                flex-direction: row;
                flex-wrap: nowrap;
                gap: 2px;
                padding: 3px 4px;
                margin-bottom: 4px;
                border-radius: 4px;
            }
            
            .question-nav-bar > div:first-child {
                width: auto;
                display: flex;
                justify-content: flex-start;
                order: 1;
                gap: 2px;
                flex: 0 0 auto;
            }
            
            .question-nav-bar > div:last-child {
                width: auto;
                display: flex;
                justify-content: flex-end;
                order: 3;
                gap: 2px;
                flex: 0 0 auto;
            }
            
            .question-nav-bar > div:nth-child(2) {
                flex: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                order: 2;
                margin: 0;
                gap: 3px;
            }
            
            .question-nav-bar button {
                flex: 0 0 auto;
                min-width: 48px;
                padding: 4px 8px;
                font-size: 0.8em;
                font-weight: 700;
                border-radius: 3px;
                min-height: 30px;
                white-space: nowrap;
            }
            
            .question-nav-bar > div:nth-child(2) > div:first-child {
                font-size: 0.85em;
                white-space: nowrap;
                font-weight: 600;
            }
            
            .question-nav-bar #questionNumberDisplay {
                font-size: 0.85em;
                padding: 2px 8px;
                white-space: nowrap;
                font-weight: 700;
            }
            
            #questionCard {
                padding: 14px;
                margin-bottom: 12px;
                border-radius: 10px;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
            }

            .question-text {
                font-size: 1.15em;
                line-height: 1.7;
                margin-bottom: 18px;
                color: #1e3c72;
                font-weight: 700;
            }
            
            .option {
                padding: 14px 16px;
                margin-bottom: 12px;
                font-size: 1.05em;
                border-radius: 8px;
                min-height: 50px;
                display: flex;
                align-items: center;
                cursor: pointer;
                transition: all 0.2s ease;
            }
            
            .option:hover {
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(30, 60, 114, 0.15);
            }
            
            .option.selected {
                border-width: 2.5px;
            }
            
            .help-btn-wrapper {
                bottom: 20px;
                right: 20px;
            }
            
            .help-btn {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            }
            
            .help-btn-icon {
                width: 22px;
                height: 22px;
            }
            
            .help-menu {
                bottom: 80px;
                right: 20px;
                min-width: 220px;
                border-radius: 12px;
            }
            
            .help-menu-item {
                padding: 14px 18px;
                font-size: 0.95em;
            }
            
            .contact-item {
                padding: 16px;
            }
            
            .donation-section {
                margin-bottom: 15px;
                padding: 18px;
            }
            
            .suggestions-modal-content {
                padding: 25px 20px;
                max-width: 95%;
                margin: 10px;
                border-radius: 16px;
            }
            
            .suggestions-modal-content h3 {
                font-size: 1.5em;
                margin-bottom: 15px;
            }
            
            /* Sections hidden on mobile - use mobile-sidebar-sections instead */
            .right-sidebar .book-summary-section,
            .right-sidebar .donation-section,
            .right-sidebar .ad-registration-section {
                display: none !important;
            }
            
            .test-selector .book-link {
                display: none;
            }

            .test-navigator-mobile {
                display: flex;
                align-items: stretch;
                justify-content: center;
                gap: 8px;
                padding: 8px 10px;
                margin: 10px 12px 8px;
                background: linear-gradient(135deg, #1e3c72 0%, #2c5282 100%);
                border: 2px solid #f39c12;
                border-radius: 12px;
                box-shadow: 0 3px 10px rgba(30, 60, 114, 0.2);
            }

            .test-navigator-mobile .test-nav-btn {
                padding: 6px 14px;
                font-size: 0.85em;
                min-width: 44px;
                flex: 1;
                max-width: 90px;
            }

            .test-navigator-mobile .question-display-container-mobile {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                min-width: 72px;
                padding: 2px 14px;
                background: rgba(255,255,255,0.25);
                border: 1px solid rgba(255,255,255,0.4);
                border-radius: 10px;
                align-self: stretch;
                box-sizing: border-box;
            }
            .test-navigator-mobile .question-display-container-mobile .question-label {
                font-size: 0.8em;
                font-weight: 700;
                color: #fff !important;
                line-height: 1.1;
                text-shadow: 0 1px 2px rgba(0,0,0,0.3);
            }
            .test-navigator-mobile .question-display-container-mobile .question-number-display {
                font-size: 0.9em;
                font-weight: 700;
                color: #fff !important;
                line-height: 1.1;
                text-shadow: 0 1px 2px rgba(0,0,0,0.3);
            }

            .test-navigator-mobile .test-select-wrapper-mobile {
                flex: 1;
                display: flex;
                justify-content: center;
                align-items: stretch;
                max-width: 160px;
            }
            
            .mobile-test-select-only {
                display: block;
            }
            
            .mobile-test-select-only .test-number-select-mobile {
                max-width: 180px;
                margin: 0 auto;
            }
            
            .test-navigator-mobile .test-number-select-mobile {
                height: 100%;
                min-height: 36px;
            }
            .test-number-select-mobile {
                width: 100%;
                max-width: 155px;
                min-width: 100px;
                padding: 6px 30px 6px 10px;
                border: 2px solid #9c27b0;
                border-radius: 6px;
                font-size: 0.8em;
                font-weight: 700;
                color: #1e3c72;
                background: #ffffff;
                outline: none;
                transition: all 0.3s ease;
                cursor: pointer;
                appearance: none;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath fill='%231e3c72' d='M8 11L3 6h10z'/%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-position: right 8px center;
                background-size: 12px 12px;
                box-shadow: 0 2px 4px rgba(156, 39, 176, 0.15);
                font-family: Tahoma, 'Segoe UI', 'Roboto', 'Open Sans', Geneva, Verdana, sans-serif;
            }

            .test-number-select-mobile:focus {
                border-color: #7b1fa2;
                box-shadow: 0 0 0 3px rgba(156, 39, 176, 0.25), 0 2px 6px rgba(156, 39, 176, 0.2);
                transform: scale(1.02);
            }
            
            .test-number-select-mobile:hover {
                border-color: #7b1fa2;
                box-shadow: 0 2px 6px rgba(156, 39, 176, 0.25);
            }
            
            .test-number-select-mobile option {
                padding: 6px;
                font-weight: 600;
                color: #1e3c72;
                background: #ffffff;
            }
            
            .test-number-select-mobile option:checked {
                background: #f3e5f5;
                color: #7b1fa2;
                font-weight: 700;
            }
            
            .stats-mobile {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-around;
                gap: 8px;
                margin: 8px 10px;
                padding: 8px 10px;
                background: linear-gradient(135deg, rgba(30, 60, 114, 0.12) 0%, rgba(30, 60, 114, 0.06) 100%);
                border-radius: 10px;
                box-shadow: 0 2px 8px rgba(30, 60, 114, 0.15);
                border: 1.5px solid rgba(30, 60, 114, 0.3);
            }
            
            .stats-mobile-item {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 4px;
                flex: 1;
            }
            
            .stats-mobile-icon {
                font-size: 0.8em;
                filter: drop-shadow(0 1px 2px rgba(30, 60, 114, 0.2));
            }
            
            .stats-mobile-label {
                font-size: 0.75em;
                font-weight: 700;
            }
            
            .stats-mobile .timer {
                font-size: 0.75em;
                font-weight: 700;
                color: #1e3c72;
                direction: ltr;
                white-space: nowrap;
            }
            
            .stats-mobile .counter-value {
                font-size: 0.75em;
                font-weight: 700;
                color: #1e3c72;
                min-width: 18px;
                text-align: center;
            }
            
            .stats-mobile .timer.warning {
                color: #ffc107;
            }
            
            .stats-mobile .timer.danger {
                color: #dc3545;
            }
            
            .stats-mobile-lang {
                flex: 0 0 auto;
                gap: 8px;
                align-items: center;
            }
            .stats-mobile .lang-mode-btn-in-stats {
                padding: 10px 18px;
                font-size: 1em;
                min-width: 48px;
                min-height: 44px;
                border-radius: 10px;
                border: 2px solid #1e3c72;
                background: linear-gradient(180deg, #ffffff 0%, #e8eef5 100%);
                color: #1e3c72;
                font-weight: 700;
                letter-spacing: 0.03em;
                box-shadow: 0 2px 8px rgba(30, 60, 114, 0.2), inset 0 1px 0 rgba(255,255,255,0.8);
                transition: transform 0.15s ease, box-shadow 0.2s ease;
                -webkit-tap-highlight-color: transparent;
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }
            .stats-mobile .lang-mode-btn-in-stats:hover {
                border-color: #1e3c72;
                background: linear-gradient(180deg, #e8eef5 0%, #d4dce8 100%);
                box-shadow: 0 3px 10px rgba(30, 60, 114, 0.25);
            }
            .stats-mobile .lang-mode-btn-in-stats:active {
                transform: scale(0.97);
                box-shadow: 0 1px 4px rgba(30, 60, 114, 0.2);
            }
            .stats-mobile .lang-mode-btn-in-stats[aria-pressed="true"] {
                border-color: #1e3c72;
                background: linear-gradient(180deg, #1e3c72 0%, #2c5282 100%);
                color: #fff;
                box-shadow: 0 3px 12px rgba(30, 60, 114, 0.4), inset 0 1px 0 rgba(255,255,255,0.2);
            }
            .stats-mobile .lang-mode-btn-in-stats[aria-pressed="true"]:hover {
                background: linear-gradient(180deg, #2c5282 0%, #1e3c72 100%);
                box-shadow: 0 4px 14px rgba(30, 60, 114, 0.45);
            }
            .stats-mobile .lang-mode-btn-in-stats[aria-pressed="true"]:active {
                transform: scale(0.97);
            }
            
            .mobile-sidebar-sections {
                display: block;
                margin: 12px 8px;
            }
            
            .book-link-section.mobile-version,
            .book-summary-section.mobile-version,
            .donation-section.mobile-version,
            .ad-registration-section.mobile-version,
            .classifieds-promo-section.mobile-version {
                display: block;
                margin-bottom: 4px;
                direction: rtl;
            }
            
            .classifieds-promo-section.mobile-version {
                margin-top: 10px;
                margin-bottom: 4px;
            }
            
            .donation-section.mobile-version {
                margin-bottom: 8px !important;
            }
            
            .book-link {
                padding: 14px 16px;
                font-size: 0.95em;
                border-radius: 8px;
                box-shadow: 0 2px 8px rgba(30, 60, 114, 0.2);
                transition: all 0.2s ease;
                font-weight: 600;
                min-height: 60px; /* Same height as book-summary-toggle */
                height: 60px; /* Fixed height for consistency */
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center !important; /* Center text */
                direction: ltr; /* Override RTL for centering */
            }
            
            .book-link:active {
                transform: scale(0.98);
            }
            
            .book-summary-toggle {
                padding: 14px 16px; /* Same padding as book-link */
                border-radius: 8px;
                border-width: 2px;
                gap: 0;
                flex-direction: row;
                justify-content: center; /* Center content */
                align-items: center;
                transition: all 0.2s ease;
                box-shadow: 0 2px 8px rgba(30, 60, 114, 0.25);
                min-height: 60px; /* Same height as book-link */
                height: 60px; /* Fixed height for consistency */
            }
            
            .book-summary-toggle:active {
                transform: scale(0.97);
                box-shadow: 0 1px 5px rgba(30, 60, 114, 0.3);
            }
            
            .book-summary-toggle h3 {
                font-size: 0.95em; /* Same font-size as book-link */
                margin: 0;
                line-height: 1.5;
                text-align: center; /* Center text */
                width: 100%; /* Full width for centering */
                color: white;
                font-weight: 700;
                letter-spacing: 0.3px;
            }
            
            .book-summary-link-icon {
                display: none; /* Hide icon on mobile */
            }
            
            .book-summary-toggle h3:first-child {
                margin-bottom: 4px;
                font-size: 1em;
            }
            
            .book-summary-toggle h3:last-child {
                font-size: 0.85em;
                opacity: 0.95;
                margin-top: 3px;
                font-weight: 600;
            }
            .sidebar-install-app-wrap,
            .sidebar-install-app-wrap.mobile-version {
                width: 100%;
                margin-left: 0;
                margin-right: 0;
                margin-top: 10px;
                margin-bottom: 8px;
            }
            .sidebar-install-app-btn,
            .mobile-sidebar-sections .sidebar-install-app-btn {
                min-height: 48px;
                padding: 12px 16px;
                font-size: 0.95em;
                border-radius: 10px;
                -webkit-appearance: none;
                appearance: none;
                background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 50%, #8b5cf6 100%) !important;
                border: 2.5px solid rgba(255, 255, 255, 0.35) !important;
                box-shadow:
                    0 4px 15px rgba(124, 58, 237, 0.35),
                    0 2px 8px rgba(91, 33, 182, 0.25),
                    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
                color: #fff !important;
            }
            .sidebar-install-app-btn:hover,
            .sidebar-install-app-btn:active,
            .mobile-sidebar-sections .sidebar-install-app-btn:hover,
            .mobile-sidebar-sections .sidebar-install-app-btn:active {
                background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 50%, #a78bfa 100%) !important;
                border-color: rgba(255, 255, 255, 0.45) !important;
                box-shadow:
                    0 6px 20px rgba(124, 58, 237, 0.4),
                    0 3px 10px rgba(139, 92, 246, 0.3),
                    inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
            }
            .sidebar-install-app-btn:hover {
                transform: translateY(-2px) scale(1.01);
            }
            .sidebar-install-app-btn:active {
                transform: translateY(-1px) scale(0.99);
            }

            .book-summary-link-icon {
                font-size: 1.5em;
                margin: 0;
                flex-shrink: 0;
                color: #f1c40f;
                filter: drop-shadow(0 1px 3px rgba(241, 196, 15, 0.4));
            }
            
            .donation-toggle {
                padding: 12px 14px;
                border-radius: 8px;
                transition: all 0.2s ease;
                min-height: 48px;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            
            .donation-toggle:active {
                transform: scale(0.98);
            }
            
            .donation-toggle h3 {
                font-size: 0.95em;
                margin: 0;
                font-weight: 700;
                line-height: 1.4;
                word-wrap: break-word;
                overflow-wrap: break-word;
            }
            
            .donation-content {
                padding: 12px;
                font-size: 0.9em;
                border-radius: 6px;
                margin-top: 10px;
            }
            
            .donation-content p {
                margin: 8px 0;
                line-height: 1.6;
                font-weight: 500;
            }
            
            .contact-item {
                padding: 8px;
                margin-bottom: 8px;
                border-radius: 6px;
            }
            
            .contact-label {
                font-size: 0.75em;
            }
            
            .contact-value {
                font-size: 0.8em;
            }
            
            .copy-btn {
                padding: 6px 12px;
                font-size: 0.75em;
                border-radius: 5px;
            }
            
            .payment-methods {
                padding: 12px;
                margin-top: 10px;
                font-size: 0.85em;
                border-radius: 8px;
            }
            
            .payment-methods .payment-item {
                padding: 10px 12px;
                margin: 8px 0;
            }
            
            .payment-methods p {
                margin: 4px 0;
                line-height: 1.4;
            }
            
            .ad-registration-toggle {
                padding: 14px 16px;
                border-radius: 8px;
                gap: 10px;
                border-width: 2px;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                transition: all 0.2s ease;
                box-shadow: 0 2px 8px rgba(30, 60, 114, 0.2);
                min-height: 60px;
                text-align: center;
            }
            
            .ad-registration-toggle:active {
                transform: scale(0.98);
                box-shadow: 0 1px 5px rgba(30, 60, 114, 0.3);
            }
            
            .ad-registration-toggle > span:first-child {
                font-size: 1.5em;
                flex-shrink: 0;
                order: 1;
                margin-bottom: 4px;
            }
            
            .ad-registration-toggle h3 {
                font-size: 0.95em;
                margin: 0;
                line-height: 1.4;
                text-align: center;
                width: 100%;
                order: 2;
                font-weight: 700;
                color: white;
            }
            
            .ad-registration-toggle .ad-registration-phone {
                margin-top: 4px;
                order: 3;
                flex: 0 0 auto;
                text-align: center;
                width: 100%;
            }
            
            .ad-registration-phone a,
            .ad-registration-phone div {
                font-size: 0.9em;
                font-weight: 700;
                text-align: center;
                display: block;
            }
            
            .classifieds-promo-section {
                margin-top: 10px;
                display: block !important;
                visibility: visible !important;
            }
            
            .classifieds-promo-box {
                padding: 14px 16px;
                border-radius: 8px;
                gap: 8px;
                border-width: 2px;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                transition: all 0.2s ease;
                box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
                min-height: auto;
                text-align: center;
            }
            
            .classifieds-promo-box:active {
                transform: scale(0.98);
                box-shadow: 0 1px 5px rgba(99, 102, 241, 0.3);
            }
            
            .classifieds-promo-section.mobile-version {
                margin-top: 10px;
                margin-bottom: 4px;
                display: block !important;
                visibility: visible !important;
            }
            
            .classifieds-promo-section.mobile-version .classifieds-promo-box {
                width: calc(100% + 40px);
                margin-left: -20px;
                margin-right: -20px;
            }
            
            .classifieds-promo-header {
                gap: 4px;
            }
            
            .classifieds-promo-header h3 {
                font-size: 0.95em;
                margin: 0;
                line-height: 1.4;
                text-align: center;
                width: 100%;
            }
            
            .classifieds-promo-content {
                font-size: 0.85em;
            }
            
            .classifieds-business-line {
                background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
                color: #6366f1 !important;
                font-weight: 700 !important;
                padding: 8px 12px;
                border-radius: 8px;
                border: 1.5px solid rgba(99, 102, 241, 0.3);
                text-shadow: 0 1px 3px rgba(99, 102, 241, 0.2);
                box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);
                margin-top: 8px !important;
                margin-bottom: 4px;
            }
            
            .ads-section {
                padding: 0;
                margin: 8px 0;
            }

            .ads-section-title {
                font-size: 1.3em;
                margin-bottom: 8px;
                font-weight: 700;
            }

            .ads-category-filter {
                gap: 6px;
                padding: 8px;
            }
            
            .category-btn {
                padding: 5px 10px;
                font-size: 0.8em;
            }

            .ads-grid {
                grid-template-columns: 1fr;
                gap: 4px; /* Reduced from 12px to save space */
            }
            
            .ad-tile {
                padding: 6px !important; /* Reduced from 8px */
                margin-bottom: 0;
                margin-top: 0;
                border-radius: 4px;
                /* CRITICAL: prevent huge empty space on mobile */
                aspect-ratio: auto !important; /* override base aspect-ratio: 1/3.2 */
                flex-shrink: 0;
                flex-grow: 0;
                width: 100%;
                min-width: 0;
                max-width: 100%;
                min-height: 0 !important; /* override base min-height: 800px */
                max-height: none;
                height: auto !important;
                overflow-y: visible !important;
                overflow-x: hidden;
                justify-content: flex-start !important;
                align-items: stretch !important;
                display: flex !important;
                flex-direction: column !important;
            }
            
            /* Fix empty space: override justify-content center */
            .ad-tile[style*="justify-content: center"],
            .ad-tile[style*="justify-content:center"] {
                justify-content: flex-start !important;
            }
            
            /* Fix header centering - override negative margin */
            .ad-tile > div:first-child[style*="margin: -12px"],
            .ad-tile > div:first-child[style*="margin:-12px"],
            .ad-tile > div:first-child[style*="margin: -12px -12px"] {
                margin-left: 0 !important;
                margin-right: 0 !important;
                margin-top: 0 !important;
            }
            
            /* Keep header content centered */
            .ad-tile > div:first-child {
                align-items: center !important;
                text-align: center !important;
            }
            
            /* Fix: Force all child divs to NOT use margin-top auto */
            /* This is the STRONGEST override to remove empty space */
            .ad-tile > div {
                margin-top: 0 !important;
            }
            
            /* Specific override for inline styles with margin-top auto */
            .ad-tile div[style*="margin-top: auto"],
            .ad-tile div[style*="margin-top:auto"],
            .ad-tile > div[style*="margin-top: auto"],
            .ad-tile > div[style*="margin-top:auto"],
            .ad-tile *[style*="margin-top: auto"],
            .ad-tile *[style*="margin-top:auto"] {
                margin-top: 0 !important;
            }
            
            /* Critical: Last child must NOT have margin-top auto */
            .ad-tile > div:last-child {
                margin-top: 0 !important;
                margin-bottom: 0 !important;
            }
            
            /* Reduce all internal spacing in ad tiles */
            .ad-tile > div {
                margin-bottom: 4px !important; /* Reduce spacing between sections */
            }
            
            .ad-tile > div:last-child {
                margin-bottom: 0 !important;
            }
            
            /* Reduce padding in all divs inside ad-tile */
            .ad-tile > div[style*="padding: 8px"],
            .ad-tile > div[style*="padding:8px"],
            .ad-tile > div[style*="padding: 10px"],
            .ad-tile > div[style*="padding:10px"],
            .ad-tile > div[style*="padding: 12px"],
            .ad-tile > div[style*="padding:12px"],
            .ad-tile div[style*="padding: 8px"],
            .ad-tile div[style*="padding:8px"],
            .ad-tile div[style*="padding: 10px"],
            .ad-tile div[style*="padding:10px"],
            .ad-tile div[style*="padding: 12px"],
            .ad-tile div[style*="padding:12px"] {
                padding: 4px !important;
            }
            
            /* Reduce margin-bottom in inline styles */
            .ad-tile div[style*="margin-bottom: 10px"],
            .ad-tile div[style*="margin-bottom:10px"],
            .ad-tile div[style*="margin-bottom: 8px"],
            .ad-tile div[style*="margin-bottom:8px"],
            .ad-tile div[style*="margin-bottom: 6px"],
            .ad-tile div[style*="margin-bottom:6px"] {
                margin-bottom: 3px !important;
            }
            
            /* Reduce margin-top in inline styles */
            .ad-tile div[style*="margin-top: 6px"],
            .ad-tile div[style*="margin-top:6px"],
            .ad-tile div[style*="margin-top: 8px"],
            .ad-tile div[style*="margin-top:8px"],
            .ad-tile div[style*="margin-top: 10px"],
            .ad-tile div[style*="margin-top:10px"] {
                margin-top: 2px !important;
            }
            
            /* Reduce padding-top in inline styles */
            .ad-tile div[style*="padding-top: 8px"],
            .ad-tile div[style*="padding-top:8px"],
            .ad-tile div[style*="padding-top: 6px"],
            .ad-tile div[style*="padding-top:6px"] {
                padding-top: 3px !important;
            }
            
            .ad-tile-header {
                gap: 4px; /* Reduced from 6px */
                margin-bottom: 4px !important; /* Reduced from 8px */
            }
            
            .ad-tile-icon {
                font-size: 0.7em;
            }
            
            .ad-tile-business-name {
                font-size: 0.85em;
                font-weight: 700;
                line-height: 1.2;
                margin-bottom: 4px;
            }
            
            .ad-tile-category {
                font-size: 0.75em;
                font-weight: 600;
                line-height: 1.2;
            }
            
            .ad-tile-body {
                font-size: 0.8em;
                line-height: 1.3;
                margin-top: 4px !important; /* Reduced from 8px */
                margin-bottom: 0;
            }
            
            .ad-tile-info-item {
                font-size: 0.8em;
                line-height: 1.3;
                margin-bottom: 2px !important; /* Reduced from 4px */
                gap: 3px !important; /* Reduced from 4px */
            }
            
            .ad-tile-hours,
            .ad-tile-description {
                font-size: 0.75em;
                padding: 4px !important; /* Reduced from 6px */
                line-height: 1.3;
                margin-top: 3px !important; /* Reduced from 6px */
                margin-bottom: 3px !important; /* Reduced from 6px */
            }
            
            /* Reduce ads-section margins to save space */
            .ads-section {
                margin: 15px 0 !important; /* Reduced from 30px */
            }
            
            .ads-section-title {
                margin-bottom: 10px !important; /* Reduced from 20px */
            }
            
            .ad-tile-hours-content {
                font-size: 0.75em;
                line-height: 1.3;
            }
            
            .ad-tile-hours-title {
                font-size: 0.8em;
                margin-bottom: 2px !important; /* Reduced from 4px */
                line-height: 1.2;
            }
            
            /* Override inline padding in ad-tile itself */
            .ad-tile[style*="padding: 12px"],
            .ad-tile[style*="padding:12px"] {
                padding: 6px !important;
            }
            
            /* Fix empty space: directly override last child */
            .ad-tile > div:last-child {
                margin-top: 0 !important;
            }
            
            /* Keep header centered */
            .ad-tile > div:first-child {
                align-items: center !important;
                text-align: center !important;
            }
            
            .app-footer {
                padding: 15px 12px;
                font-size: 0.95em;
                line-height: 1.7;
                font-weight: 500;
            }
            .footer-bottom-bar { padding: 12px 14px; }
            .footer-bottom-inner { font-size: 0.85em; gap: 6px 10px; }

            .results {
                padding: 20px 16px;
                margin: 14px 12px;
                border-radius: 10px;
            }
            
            .results h2 {
                font-size: 1.6em;
                margin-bottom: 18px;
                font-weight: 700;
            }
            
            .score {
                font-size: 2.8em;
                margin: 18px 0;
                font-weight: 700;
            }
            
            .submit-btn {
                padding: 12px 24px;
                font-size: 1em;
                min-height: 50px;
                border-radius: 8px;
                font-weight: 700;
            }
        }
        
        @media (max-width: 600px) {
            .container {
                border-radius: 0;
            }
            
            .test-selector {
                padding: 15px 12px;
            }
            
            .test-selector h3 {
                font-size: 1.1em;
                margin-bottom: 15px;
            }
            
            .right-sidebar {
                padding: 15px 12px;
            }
            
            .slide-visitor-text { top: 1px; font-size: 0.85em; }
            .slide-visitor-text .visitor-count-value { font-size: 1em; }
            .header-carousel {
                min-height: 158px;
                height: 158px;
                padding: 0 6px;
                padding-top: 16px;
            }
            
            .header-slide {
                padding: 0 6px;
            }
            
            .header-slide h1 {
                font-size: 1.4em;
                margin-bottom: 5px;
                font-weight: 700;
                text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
            }
            
            .header-slide p {
                font-size: 1em;
                font-weight: 600;
                text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
            }
            
            .header-slide-content h2 {
                font-size: 1.3em;
                margin-bottom: 10px;
                font-weight: 700;
            }
            
            .header-slide-content p {
                font-size: 0.95em;
                line-height: 1.6;
                font-weight: 500;
            }
            
            .header-carousel-indicators {
                bottom: 8px;
                gap: 6px;
            }
            
            .header-indicator {
                width: 7px;
                height: 7px;
            }
            
            .header-indicator.active {
                width: 20px;
            }
            
            #testContainer {
                padding: 8px;
            }
            
            .question-nav-bar {
                flex-wrap: nowrap;
                padding: 2px 3px;
                gap: 2px;
                margin-bottom: 4px;
            }
            
            .question-nav-bar > div:first-child {
                flex: 0 0 auto;
                gap: 2px;
            }
            
            .question-nav-bar > div:last-child {
                flex: 0 0 auto;
                gap: 2px;
            }
            
            .question-nav-bar > div:nth-child(2) {
                flex: 1;
                margin: 0;
                gap: 2px;
            }
            
            .question-nav-bar button {
                padding: 3px 6px;
                font-size: 0.75em;
                min-height: 28px;
                min-width: 45px;
                font-weight: 700;
            }
            
            .question-nav-bar > div:nth-child(2) > div:first-child {
                font-size: 0.8em;
                font-weight: 600;
            }
            
            .question-nav-bar #questionNumberDisplay {
                font-size: 0.8em;
                padding: 2px 6px;
                font-weight: 700;
            }
            
            #questionCard {
                padding: 12px;
                border-radius: 10px;
            }
            
            .question-text {
                font-size: 1.1em;
                margin-bottom: 15px;
                line-height: 1.7;
                font-weight: 700;
            }
            
            .option {
                padding: 12px 14px;
                margin-bottom: 10px;
                font-size: 1em;
                min-height: 48px;
                border-radius: 8px;
                font-weight: 500;
            }
            
            .help-btn-wrapper {
                bottom: 10px;
                right: 10px;
            }
            
            .help-btn {
                width: 40px;
                height: 40px;
            }
            
            .help-btn-icon {
                width: 18px;
                height: 18px;
            }
            
            .help-menu {
                bottom: 60px;
                right: 10px;
                min-width: 180px;
            }
            
            .help-menu-item {
                padding: 12px 15px;
                font-size: 0.85em;
            }
            
            .contact-item {
                padding: 12px;
            }
            
            .contact-value {
                font-size: 1em;
            }
            
            .donation-section {
                padding: 12px;
            }
            
            .suggestions-modal-content {
                padding: 20px 15px;
                border-radius: 12px;
                max-width: 98%;
            }
            
            .suggestions-modal-content h3 {
                font-size: 1.2em;
            }
            
            .suggestions-modal-content p {
                font-size: 0.9em;
            }
            
            .suggestions-modal-copy-btn {
                padding: 10px 18px;
                font-size: 0.9em;
            }
            
            .suggestions-email-value {
                font-size: 1em;
            }
            
            /* Sections hidden on mobile - use mobile-sidebar-sections instead */
            .right-sidebar .book-summary-section,
            .right-sidebar .donation-section,
            .right-sidebar .ad-registration-section {
                display: none !important;
            }
            
            .test-selector .book-link {
                display: none;
            }
            
            .mobile-sidebar-sections {
                display: block;
                margin: 10px 6px;
            }
            
            .book-link-section.mobile-version,
            .book-summary-section.mobile-version,
            .donation-section.mobile-version,
            .ad-registration-section.mobile-version,
            .classifieds-promo-section.mobile-version {
                display: block;
                margin-bottom: 4px;
                direction: rtl;
            }
            
            .classifieds-promo-section.mobile-version {
                margin-top: 10px;
                margin-bottom: 4px;
            }
            
            .donation-section.mobile-version {
                margin-bottom: 8px !important;
            }
            
            .book-link {
                padding: 10px 12px;
                font-size: 0.9em;
                border-radius: 7px;
                min-height: 44px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            
            .book-summary-toggle {
                padding: 10px 12px;
                border-radius: 7px;
                border-width: 2px;
                gap: 8px;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                min-height: 44px;
            }
            
            .book-summary-toggle h3 {
                font-size: 0.9em;
                margin: 0;
                line-height: 1.4;
                text-align: center;
                flex: 1;
                color: white;
                font-weight: 700;
            }
            
            .book-summary-toggle h3:first-child {
                margin-bottom: 3px;
                font-size: 0.95em;
            }
            
            .book-summary-toggle h3:last-child {
                font-size: 0.8em;
                opacity: 0.95;
                margin-top: 3px;
                font-weight: 600;
            }
            
            .book-summary-link-icon {
                font-size: 1.4em;
                margin: 0;
                flex-shrink: 0;
                color: #f1c40f;
            }
            
            .donation-toggle {
                padding: 10px 12px;
                border-radius: 7px;
                min-height: 44px;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            
            .donation-toggle h3 {
                font-size: 0.9em;
                margin: 0;
                font-weight: 700;
            }
            
            .donation-content {
                padding: 10px;
                font-size: 0.85em;
                border-radius: 5px;
            }
            
            .donation-content p {
                margin: 7px 0;
                line-height: 1.5;
                font-weight: 500;
            }
            
            .contact-item {
                padding: 6px;
                margin-bottom: 6px;
            }
            
            .contact-label {
                font-size: 0.7em;
            }
            
            .contact-value {
                font-size: 0.75em;
            }
            
            .copy-btn {
                padding: 5px 10px;
                font-size: 0.7em;
            }
            
            .payment-methods {
                padding: 10px;
                margin-top: 8px;
                font-size: 0.8em;
            }
            
            .payment-methods .payment-item {
                padding: 8px 10px;
                margin: 6px 0;
            }
            
            .payment-methods p {
                margin: 3px 0;
                line-height: 1.3;
            }
            
            .ad-registration-toggle {
                padding: 14px 16px;
                border-radius: 7px;
                gap: 8px;
                border-width: 2px;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                min-height: 60px;
                text-align: center;
            }
            
            .ad-registration-toggle > span:first-child {
                font-size: 1.5em;
                flex-shrink: 0;
                order: 1;
                margin-bottom: 4px;
            }
            
            .ad-registration-toggle h3 {
                font-size: 0.9em;
                margin: 0;
                line-height: 1.4;
                text-align: center;
                width: 100%;
                order: 2;
                font-weight: 700;
                color: white;
            }
            
            .ad-registration-toggle .ad-registration-phone {
                margin-top: 4px;
                order: 3;
                flex: 0 0 auto;
                text-align: center;
                width: 100%;
            }
            
            .ad-registration-phone a,
            .ad-registration-phone div {
                font-size: 0.9em;
                font-weight: 700;
                text-align: center;
                display: block;
            }
            
            .classifieds-promo-section {
                margin-top: 8px;
                display: block !important;
                visibility: visible !important;
            }
            
            .classifieds-promo-box {
                padding: 12px 14px;
                border-radius: 7px;
                gap: 6px;
                border-width: 2px;
                min-height: auto;
            }
            
            .classifieds-promo-header h3 {
                font-size: 0.9em;
            }
            
            .classifieds-promo-content {
                font-size: 0.8em;
            }
            
            .classifieds-business-line {
                background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
                color: #6366f1 !important;
                font-weight: 700 !important;
                padding: 7px 10px;
                border-radius: 7px;
                border: 1.5px solid rgba(99, 102, 241, 0.3);
                text-shadow: 0 1px 3px rgba(99, 102, 241, 0.2);
                box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);
                margin-top: 8px !important;
                margin-bottom: 4px;
            }
            
            .ads-section {
                padding: 0;
                margin: 6px 0;
            }
            
            .ads-section-title {
                font-size: 1.2em;
                margin-bottom: 6px;
                font-weight: 700;
            }

            .ads-section-title-en {
                font-size: 0.85em;
            }
            
            .ads-category-filter {
                gap: 6px;
                padding: 10px;
            }
            
            .category-btn {
                padding: 4px 8px;
                font-size: 0.75em;
            }
            
            .ads-grid {
                grid-template-columns: 1fr;
                gap: 3px; /* Increased from 1px for better separation, but still minimal */
            }
            
            .ad-tile {
                margin-bottom: 0;
                margin-top: 0;
                padding: 4px !important; /* Increased from 1px for readability */
                /* CRITICAL: prevent huge empty space on mobile */
                aspect-ratio: auto !important; /* override base aspect-ratio: 1/3.2 */
                flex-shrink: 0;
                flex-grow: 0;
                width: 100%;
                min-width: 0;
                max-width: 100%;
                min-height: 0 !important; /* override base min-height: 800px */
                max-height: none;
                height: auto !important;
                overflow-y: visible !important;
                overflow-x: hidden;
            }
            
            .ad-tile-header {
                gap: 0;
                margin-bottom: 0;
            }
            
            .ad-tile-icon {
                font-size: 0.7em;
            }
            
            .ad-tile-business-name {
                font-size: 0.75em;
                line-height: 1.15;
                margin-bottom: 2px;
            }
            
            .ad-tile-body {
                font-size: 0.7em;
                line-height: 1.2;
                margin-top: 3px;
                margin-bottom: 0;
            }
            
            .ad-tile-info-item {
                font-size: 0.7em;
                line-height: 1.2;
                margin-bottom: 2px;
                gap: 2px;
            }
            
            .ad-tile-hours,
            .ad-tile-description {
                font-size: 0.65em;
                padding: 3px !important;
                line-height: 1.2;
                margin-top: 2px !important; /* Reduced from 3px */
                margin-bottom: 2px !important; /* Reduced from 3px */
            }
            
            /* Reduce all margins and padding inside ad tiles */
            .ad-tile > div {
                margin-top: 0 !important;
                margin-bottom: 3px !important; /* Minimal spacing */
            }
            
            .ad-tile > div:last-child {
                margin-bottom: 0 !important;
            }
            
            /* Reduce padding in all divs inside ad-tile for 600px */
            .ad-tile > div[style*="padding: 8px"],
            .ad-tile > div[style*="padding:8px"],
            .ad-tile > div[style*="padding: 10px"],
            .ad-tile > div[style*="padding:10px"],
            .ad-tile > div[style*="padding: 12px"],
            .ad-tile > div[style*="padding:12px"],
            .ad-tile div[style*="padding: 8px"],
            .ad-tile div[style*="padding:8px"],
            .ad-tile div[style*="padding: 10px"],
            .ad-tile div[style*="padding:10px"],
            .ad-tile div[style*="padding: 12px"],
            .ad-tile div[style*="padding:12px"] {
                padding: 3px !important;
            }
            
            /* Reduce margin-bottom in inline styles for 600px */
            .ad-tile div[style*="margin-bottom: 10px"],
            .ad-tile div[style*="margin-bottom:10px"],
            .ad-tile div[style*="margin-bottom: 8px"],
            .ad-tile div[style*="margin-bottom:8px"],
            .ad-tile div[style*="margin-bottom: 6px"],
            .ad-tile div[style*="margin-bottom:6px"] {
                margin-bottom: 2px !important;
            }
            
            /* Reduce margin-top in inline styles for 600px */
            .ad-tile div[style*="margin-top: 6px"],
            .ad-tile div[style*="margin-top:6px"],
            .ad-tile div[style*="margin-top: 8px"],
            .ad-tile div[style*="margin-top:8px"] {
                margin-top: 1px !important;
            }
            
            /* Override inline padding in ad-tile itself for 600px */
            .ad-tile[style*="padding: 12px"],
            .ad-tile[style*="padding:12px"] {
                padding: 4px !important;
            }
            
            /* Reduce ads-section margins to save space for 600px */
            .ads-section {
                margin: 10px 0 !important;
            }
            
            .ads-section-title {
                margin-bottom: 8px !important;
            }
            
            .ad-tile-hours-content {
                font-size: 0.65em;
                line-height: 1.2;
            }
            
            .ad-tile-hours-title {
                font-size: 0.7em;
                margin-bottom: 2px;
                line-height: 1.15;
            }
            
            /* Fix empty space: remove justify-content center and margin-top auto */
            .ad-tile {
                justify-content: flex-start !important;
                align-items: stretch !important;
                display: flex !important;
                flex-direction: column !important;
            }
            
            /* Fix: Remove margin-top auto from last child - main issue */
            .ad-tile > div:last-child {
                margin-top: 0 !important;
            }
            
            .ad-tile[style*="justify-content: center"],
            .ad-tile[style*="justify-content:center"] {
                justify-content: flex-start !important;
            }
            
            /* Fix header centering - override negative margin */
            .ad-tile > div:first-child[style*="margin: -12px"],
            .ad-tile > div:first-child[style*="margin:-12px"],
            .ad-tile > div:first-child[style*="margin: -12px -12px"] {
                margin-left: 0 !important;
                margin-right: 0 !important;
                margin-top: 0 !important;
            }
            
            /* Keep header content centered */
            .ad-tile > div:first-child {
                align-items: center !important;
                text-align: center !important;
            }
            
            /* Fix: Force all child divs to NOT use margin-top auto */
            /* This is the STRONGEST override to remove empty space */
            .ad-tile > div {
                margin-top: 0 !important;
            }
            
            /* Specific override for inline styles with margin-top auto */
            .ad-tile div[style*="margin-top: auto"],
            .ad-tile div[style*="margin-top:auto"],
            .ad-tile > div[style*="margin-top: auto"],
            .ad-tile > div[style*="margin-top:auto"],
            .ad-tile *[style*="margin-top: auto"],
            .ad-tile *[style*="margin-top:auto"] {
                margin-top: 0 !important;
            }
            
            /* Critical: Last child must NOT have margin-top auto */
            .ad-tile > div:last-child {
                margin-top: 0 !important;
            }
            
            .app-footer {
                padding: 15px 12px;
                font-size: 0.8em;
            }
            .footer-bottom-bar { padding: 10px 12px; }
            .footer-bottom-inner { font-size: 0.8em; flex-direction: column; gap: 4px; }

            .results {
                padding: 15px 12px;
                margin: 12px;
            }
            
            .results h2 {
                font-size: 1.3em;
            }
            
            .score {
                font-size: 2em;
            }
            
            .submit-btn {
                padding: 10px 20px;
                font-size: 0.9em;
            }
        }
        
        /* Mobile: دکمه‌ها نزدیک لبه، رنگ‌ها هماهنگ */
        @media (max-width: 768px) {
            .test-navigator {
                padding: 8px 5px;
                gap: 8px;
                width: calc(100% + 40px);
                max-width: none;
                margin-left: -20px;
                margin-right: -20px;
            }
            
            .test-nav-btn {
                padding: 6px 14px;
                font-size: 0.95em;
                min-width: 42px;
            }
            .test-navigator-mobile .test-nav-btn {
                padding: 6px 14px !important;
                font-size: 0.84em !important;
                min-width: 42px !important;
                flex: 1 !important;
                max-width: 88px !important;
            }
            
            .test-select-wrapper {
                flex: 1;
                max-width: 100%;
                margin: 0 8px;
            }
            
            .test-number-select {
                max-width: 100%;
                font-size: 0.95em;
                padding: 10px 36px 10px 14px;
            }
        }
        
        @media (max-width: 600px) {
            .test-navigator {
                padding: 6px 5px;
                gap: 6px;
                width: calc(100% + 40px);
                max-width: none;
                margin-left: -20px;
                margin-right: -20px;
            }
            
            .test-nav-btn {
                padding: 5px 12px;
                font-size: 0.9em;
                min-width: 38px;
            }
            .test-navigator-mobile .test-nav-btn {
                padding: 5px 12px !important;
                font-size: 0.82em !important;
                min-width: 40px !important;
                flex: 1 !important;
                max-width: 85px !important;
            }
            
            .test-select-wrapper {
                margin: 0 6px;
            }
            
            .test-number-select {
                font-size: 0.9em;
                padding: 8px 32px 8px 12px;
            }
        }
        
        @media (max-width: 400px) {
            .test-navigator {
                padding: 5px 4px;
                gap: 5px;
                width: calc(100% + 40px);
                max-width: none;
                margin-left: -20px;
                margin-right: -20px;
            }
            
            .test-nav-btn {
                padding: 4px 10px;
                font-size: 0.85em;
                min-width: 34px;
            }
            .test-navigator-mobile .test-nav-btn {
                padding: 5px 10px !important;
                font-size: 0.8em !important;
                min-width: 38px !important;
                flex: 1 !important;
                max-width: 78px !important;
            }
            
            .test-select-wrapper {
                margin: 0 5px;
            }
            
            .test-number-select {
                font-size: 0.85em;
                padding: 6px 28px 6px 10px;
            }
        }
        
        /* Very Small Mobile (up to 400px) */
        @media (max-width: 400px) {
            .test-selector {
                padding: 12px 10px;
            }
            
            .right-sidebar {
                padding: 12px 10px;
            }
            
            /* Sections hidden on mobile - use mobile-sidebar-sections instead */
            .right-sidebar .book-summary-section,
            .right-sidebar .donation-section,
            .right-sidebar .ad-registration-section {
                display: none !important;
            }
            
            .test-selector .book-link {
                display: none;
            }
            
            .mobile-sidebar-sections {
                display: block;
                margin: 8px 4px;
            }
            
            .book-link-section.mobile-version,
            .book-summary-section.mobile-version,
            .donation-section.mobile-version,
            .ad-registration-section.mobile-version,
            .classifieds-promo-section.mobile-version {
                display: block;
                margin-bottom: 3px;
                direction: rtl;
            }
            
            .donation-section.mobile-version {
                margin-bottom: 8px !important;
            }
            
            .classifieds-promo-section.mobile-version {
                margin-top: 8px;
                margin-bottom: 3px;
            }
            
            .book-link {
                padding: 9px 11px;
                font-size: 0.85em;
                border-radius: 6px;
                min-height: 42px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            
            .book-summary-toggle {
                padding: 9px 11px;
                border-radius: 6px;
                border-width: 2px;
                gap: 7px;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                min-height: 42px;
            }
            
            .book-summary-toggle h3 {
                font-size: 0.85em;
                margin: 0;
                line-height: 1.4;
                text-align: center;
                flex: 1;
                color: white;
                font-weight: 700;
            }
            
            .book-summary-toggle h3:first-child {
                margin-bottom: 2px;
                font-size: 0.9em;
            }
            
            .book-summary-toggle h3:last-child {
                font-size: 0.75em;
                opacity: 0.95;
                margin-top: 2px;
                font-weight: 600;
            }
            
            .book-summary-link-icon {
                font-size: 1.3em;
                margin: 0;
                flex-shrink: 0;
                color: #f1c40f;
            }
            
            .donation-toggle {
                padding: 9px 11px;
                border-radius: 6px;
                min-height: 42px;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            
            .donation-toggle h3 {
                font-size: 0.85em;
                margin: 0;
                font-weight: 700;
                line-height: 1.4;
                word-wrap: break-word;
                overflow-wrap: break-word;
            }
            
            .donation-content {
                padding: 6px;
                font-size: 0.7em;
                border-radius: 5px;
            }
            
            .donation-content p {
                margin: 4px 0;
                line-height: 1.3;
            }
            
            .contact-item {
                padding: 5px;
                margin-bottom: 5px;
            }
            
            .contact-label {
                font-size: 0.65em;
            }
            
            .contact-value {
                font-size: 0.7em;
            }
            
            .copy-btn {
                padding: 4px 8px;
                font-size: 0.65em;
            }
            
            .payment-methods {
                padding: 8px;
                margin-top: 6px;
                font-size: 0.75em;
            }
            
            .payment-methods .payment-item {
                padding: 6px 8px;
                margin: 5px 0;
            }
            
            .payment-methods p {
                margin: 2px 0;
                line-height: 1.2;
            }
            
            .ad-registration-toggle {
                padding: 12px 14px;
                border-radius: 6px;
                gap: 6px;
                border-width: 2px;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                min-height: 55px;
                text-align: center;
            }
            
            .ad-registration-toggle > span:first-child {
                font-size: 1.4em;
                flex-shrink: 0;
                order: 1;
                margin-bottom: 3px;
            }
            
            .ad-registration-toggle h3 {
                font-size: 0.85em;
                margin: 0;
                line-height: 1.4;
                text-align: center;
                width: 100%;
                order: 2;
                font-weight: 700;
                color: white;
            }
            
            .ad-registration-toggle .ad-registration-phone {
                margin-top: 3px;
                order: 3;
                flex: 0 0 auto;
                text-align: center;
                width: 100%;
            }
            
            .ad-registration-phone a,
            .ad-registration-phone div {
                font-size: 0.85em;
                font-weight: 700;
                text-align: center;
                display: block;
            }
            
            .classifieds-promo-section {
                margin-top: 6px;
                display: block !important;
                visibility: visible !important;
            }
            
            .classifieds-promo-box {
                padding: 10px 12px;
                border-radius: 6px;
                gap: 5px;
                border-width: 2px;
                min-height: auto;
            }
            
            .classifieds-promo-header h3 {
                font-size: 0.85em;
            }
            
            .classifieds-promo-content {
                font-size: 0.75em;
            }
            
            .classifieds-business-line {
                background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
                color: #6366f1 !important;
                font-weight: 700 !important;
                padding: 6px 8px;
                border-radius: 6px;
                border: 1.5px solid rgba(99, 102, 241, 0.3);
                text-shadow: 0 1px 3px rgba(99, 102, 241, 0.2);
                box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);
                margin-top: 6px !important;
                margin-bottom: 3px;
            }
            
            .slide-visitor-text { top: 0; font-size: 0.8em; }
            .slide-visitor-text .visitor-count-value { font-size: 0.95em; }
            .header-carousel {
                min-height: 148px;
                height: 148px;
                padding: 0 6px;
                padding-top: 14px;
            }
            
            .header-slide h1 {
                font-size: 1.1em;
                margin-bottom: 2px;
                font-weight: 700;
            }
            .header-title-line1 { font-size: 1.15em; }
            .header-title-line2 { font-size: 1.05em; }
            .header-title-flag { font-size: 1.2em; }
            .header-title-en { font-size: 0.8em; }
            .header-slide-ad-img { max-height: 120px; }
            .header-slide-ad-registration-box {
                padding: 12px 16px 10px;
                min-width: 180px;
            }
            .header-slide-ad-registration-phone-wrap { gap: 6px; margin-top: 10px; }
            .header-slide-ad-registration-icon svg { width: 20px; height: 20px; }
            .header-slide-ad-registration-title { font-size: 0.88em; }
            .header-slide-ad-registration-title::after { width: 28px; margin-top: 6px; height: 2px; }
            .header-slide-ad-registration-phone { font-size: 0.95em; }

            .header-slide p {
                font-size: 0.8em;
                font-weight: 500;
            }
            
            #testContainer {
                padding: 6px;
            }
            
            .question-nav-bar {
                flex-wrap: nowrap;
                padding: 2px;
                gap: 2px;
                margin-bottom: 4px;
            }
            
            .question-nav-bar > div:first-child {
                flex: 0 0 auto;
                gap: 2px;
            }
            
            .question-nav-bar > div:last-child {
                flex: 0 0 auto;
                gap: 2px;
            }
            
            .question-nav-bar > div:nth-child(2) {
                flex: 1;
                margin: 0;
                gap: 2px;
            }
            
            .question-nav-bar button {
                padding: 3px 5px;
                font-size: 0.6em;
                min-height: 28px;
                min-width: 40px;
            }
            
            .question-nav-bar > div:nth-child(2) > div:first-child {
                font-size: 0.65em;
            }
            
            .question-nav-bar #questionNumberDisplay {
                font-size: 0.7em;
                padding: 1px 5px;
            }
            
            #questionCard {
                padding: 10px;
                border-radius: 8px;
            }
            
            .question-text {
                font-size: 0.85em;
                margin-bottom: 10px;
            }
            
            .option {
                padding: 8px 10px;
                font-size: 0.8em;
                min-height: 38px;
            }
            
            .ads-section {
                padding: 0;
                margin: 4px 0;
            }
            
            .ads-section-title {
                font-size: 1.1em;
                margin-bottom: 4px;
            }
            
            .ads-category-filter {
                gap: 4px;
                padding: 4px;
            }
            
            .ads-grid {
                grid-template-columns: 1fr;
                gap: 3px; /* Reduced from 10px to save space */
            }
            
            .ad-tile {
                margin-bottom: 0;
                margin-top: 0;
                justify-content: flex-start !important;
                align-items: stretch !important;
                /* CRITICAL: prevent huge empty space on mobile */
                aspect-ratio: auto !important; /* override base aspect-ratio: 1/3.2 */
                min-height: 0 !important; /* override base min-height: 800px */
                height: auto !important;
                overflow-y: visible !important;
            }
            
            .ad-tile-header {
                gap: 2px;
                margin-bottom: 3px;
            }
            
            .ad-tile-icon {
                font-size: 0.65em;
            }
            
            .ad-tile-business-name {
                font-size: 0.7em;
                line-height: 1.15;
                margin-bottom: 2px;
            }
            
            .ad-tile-body {
                font-size: 0.65em;
                line-height: 1.2;
                margin-top: 2px;
                margin-bottom: 0;
            }
            
            .ad-tile-info-item {
                font-size: 0.65em;
                line-height: 1.2;
                margin-bottom: 2px;
                gap: 2px;
            }
            
            .ad-tile-hours,
            .ad-tile-description {
                font-size: 0.6em;
                padding: 2px !important;
                line-height: 1.2;
                margin-top: 1px !important; /* Reduced from 2px */
                margin-bottom: 1px !important; /* Reduced from 2px */
            }
            
            /* Reduce all margins and padding inside ad tiles - maximum space saving */
            .ad-tile > div {
                margin-top: 0 !important;
                margin-bottom: 2px !important; /* Minimal spacing */
            }
            
            .ad-tile > div:last-child {
                margin-bottom: 0 !important;
            }
            
            /* Reduce padding in all divs inside ad-tile for 400px */
            .ad-tile > div[style*="padding: 8px"],
            .ad-tile > div[style*="padding:8px"],
            .ad-tile > div[style*="padding: 10px"],
            .ad-tile > div[style*="padding:10px"],
            .ad-tile > div[style*="padding: 12px"],
            .ad-tile > div[style*="padding:12px"],
            .ad-tile div[style*="padding: 8px"],
            .ad-tile div[style*="padding:8px"],
            .ad-tile div[style*="padding: 10px"],
            .ad-tile div[style*="padding:10px"],
            .ad-tile div[style*="padding: 12px"],
            .ad-tile div[style*="padding:12px"] {
                padding: 2px !important;
            }
            
            /* Reduce margin-bottom in inline styles for 400px */
            .ad-tile div[style*="margin-bottom: 10px"],
            .ad-tile div[style*="margin-bottom:10px"],
            .ad-tile div[style*="margin-bottom: 8px"],
            .ad-tile div[style*="margin-bottom:8px"],
            .ad-tile div[style*="margin-bottom: 6px"],
            .ad-tile div[style*="margin-bottom:6px"],
            .ad-tile div[style*="margin-bottom: 4px"],
            .ad-tile div[style*="margin-bottom:4px"] {
                margin-bottom: 1px !important;
            }
            
            /* Reduce margin-top in inline styles for 400px */
            .ad-tile div[style*="margin-top: 6px"],
            .ad-tile div[style*="margin-top:6px"],
            .ad-tile div[style*="margin-top: 8px"],
            .ad-tile div[style*="margin-top:8px"],
            .ad-tile div[style*="margin-top: 10px"],
            .ad-tile div[style*="margin-top:10px"] {
                margin-top: 1px !important;
            }
            
            /* Reduce padding-top in inline styles for 400px */
            .ad-tile div[style*="padding-top: 8px"],
            .ad-tile div[style*="padding-top:8px"],
            .ad-tile div[style*="padding-top: 6px"],
            .ad-tile div[style*="padding-top:6px"] {
                padding-top: 2px !important;
            }
            
            /* Override inline padding in ad-tile itself for 400px */
            .ad-tile[style*="padding: 12px"],
            .ad-tile[style*="padding:12px"] {
                padding: 4px !important;
            }
            
            /* Reduce ads-section margins to save space for 400px */
            .ads-section {
                margin: 8px 0 !important;
            }
            
            .ads-section-title {
                margin-bottom: 6px !important;
            }
            
            .ad-tile-hours-content {
                font-size: 0.6em;
                line-height: 1.2;
            }
            
            .ad-tile-hours-title {
                font-size: 0.65em;
                margin-bottom: 2px;
                line-height: 1.15;
            }
            
            /* Fix main issue: justify-content center causes empty space in mobile */
            .ad-tile {
                justify-content: flex-start !important;
            }
            
            .ad-tile[style*="justify-content: center"],
            .ad-tile[style*="justify-content:center"] {
                justify-content: flex-start !important;
            }
            
            /* Fix header centering - override negative margin */
            .ad-tile > div:first-child[style*="margin: -12px"],
            .ad-tile > div:first-child[style*="margin:-12px"],
            .ad-tile > div:first-child[style*="margin: -12px -12px"] {
                margin-left: 0 !important;
                margin-right: 0 !important;
                margin-top: 0 !important;
            }
            
            /* Keep header content centered */
            .ad-tile > div:first-child {
                align-items: center !important;
                text-align: center !important;
            }
            
            /* Fix: Force all child divs to NOT use margin-top auto */
            /* This is the STRONGEST override to remove empty space */
            .ad-tile > div {
                margin-top: 0 !important;
            }
            
            /* Specific override for inline styles with margin-top auto */
            .ad-tile div[style*="margin-top: auto"],
            .ad-tile div[style*="margin-top:auto"],
            .ad-tile > div[style*="margin-top: auto"],
            .ad-tile > div[style*="margin-top:auto"],
            .ad-tile *[style*="margin-top: auto"],
            .ad-tile *[style*="margin-top:auto"] {
                margin-top: 0 !important;
            }
            
            /* Critical: Last child must NOT have margin-top auto */
            .ad-tile > div:last-child {
                margin-top: 0 !important;
            }
        }

        /* Subscription modal (اشتراک — از Test11 به بعد و ۴۱۴ از سوال ۲۵) */
        .subscription-modal {
            position: fixed;
            inset: 0;
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            direction: rtl;
        }
        .subscription-modal-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(0,0,0,0.5);
        }
        .subscription-modal-box {
            position: relative;
            background: #fff;
            border-radius: 16px;
            padding: 28px 36px;
            max-width: 560px;
            width: 100%;
            box-shadow: 0 20px 60px rgba(0,0,0,0.25);
        }
        .subscription-modal-title {
            font-size: 1.2rem;
            margin-bottom: 12px;
            color: #1e3c72;
        }
        .subscription-modal-intro,
        .subscription-question,
        .subscription-label {
            margin-bottom: 16px;
            color: #333;
        }
        .subscription-intro-price {
            font-size: 1.35rem;
            font-weight: 800;
            color: #1e3c72;
        }
        .subscription-step {
            margin-top: 12px;
        }
        .subscription-buttons {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }
        .subscription-btn {
            padding: 12px 24px;
            border-radius: 10px;
            font-weight: 600;
            cursor: pointer;
            border: 2px solid #1e3c72;
            background: #fff;
            color: #1e3c72;
        }
        .subscription-btn:hover {
            background: #1e3c72;
            color: #fff;
        }
        .subscription-btn-yes { }
        .subscription-btn-no { border-color: #64748b; color: #64748b; }
        .subscription-btn-no:hover { background: #64748b; color: #fff; }
        .subscription-btn-submit {
            margin-top: 12px;
            width: 100%;
        }
        .subscription-input {
            width: 100%;
            padding: 12px 14px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 10px;
            font-size: 1rem;
        }
        .subscription-error {
            color: #c00;
            font-size: 0.9rem;
            margin-bottom: 8px;
        }
        .subscription-payment-info p {
            margin-bottom: 10px;
            color: #444;
        }
        .subscription-payment-info a {
            color: #1e3c72;
        }
        .subscription-single-price {
            font-size: 1.2em;
            font-weight: 700;
            color: #1e3c72;
        }
        .subscription-btn-back {
            margin-top: 12px;
            width: 100%;
        }
        .subscription-email-block {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 14px;
            margin: 16px 0;
            padding: 18px 20px;
            background: #f0f4f8;
            border-radius: 12px;
            border: 1px solid #e2e8f0;
        }
        .subscription-email-label {
            font-size: 1.15rem;
            font-weight: 700;
            color: #333;
        }
        .subscription-email-value {
            font-size: 1.55rem;
            font-weight: 700;
            color: #1e3c72;
            letter-spacing: 0.02em;
        }
        .subscription-btn-copy {
            padding: 12px 20px;
            background: #1e3c72;
            color: #fff;
            border: none;
            border-radius: 10px;
            font-weight: 700;
            cursor: pointer;
            font-size: 1.05rem;
        }
        .subscription-btn-copy:hover {
            background: #2c5282;
        }
        .subscription-btn-copy.copied {
            background: #28a745;
        }
        .subscription-mobile-intro {
            margin: 14px 0 10px;
            color: #333;
        }
        .subscription-mobile-block {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px;
            margin-bottom: 14px;
        }
        .subscription-mobile-label {
            font-weight: 600;
            color: #333;
        }
        .subscription-mobile-block .subscription-input {
            flex: 1;
            min-width: 160px;
        }
        .subscription-btn-request {
            flex-shrink: 0;
        }
        .subscription-request-msg {
            margin-bottom: 12px;
            padding: 10px 14px;
            border-radius: 8px;
            font-size: 0.95rem;
        }
        .subscription-request-msg.subscription-error {
            background: #fee;
            color: #c00;
        }
        .subscription-request-msg.subscription-request-success {
            background: #d4edda;
            color: #155724;
        }
        .test-area-subscription-block {
            background: #fff;
            padding: 24px 20px;
            border-radius: 16px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.12);
            border: 2px solid #1e3c72;
            margin-bottom: 20px;
        }
        .test-area-subscription-block .test-area-sub-title {
            margin: 0 0 12px;
            font-size: 1.25rem;
            color: #1e3c72;
        }
        .test-area-subscription-block .test-area-sub-intro {
            margin-bottom: 20px;
            font-size: 0.95rem;
            color: #444;
        }
        .test-area-subscription-block .test-area-sub-step {
            margin-top: 12px;
        }
        .test-area-subscription-block .subscription-input {
            width: 100%;
            padding: 12px 14px;
            margin-bottom: 10px;
            border: 1px solid #e9ecef;
            border-radius: 10px;
            font-size: 1rem;
        }
        .subscription-modal-close {
            position: absolute;
            top: 12px;
            left: 12px;
            width: 36px;
            height: 36px;
            border: none;
            background: #f0f0f0;
            border-radius: 50%;
            font-size: 1.5rem;
            line-height: 1;
            cursor: pointer;
        }
        .subscription-modal-close:hover {
            background: #e0e0e0;
        }