/* ════════════════════════════════════════════════════════
     * UNIVERSAL HARDENING — يطبَّق دائماً
     * ════════════════════════════════════════════════════════ */
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body { -webkit-tap-highlight-color: rgba(212, 175, 55,.18); }
    /* اقتراب تلقائي للصور والـ media */
    img, picture, video { object-fit: contain; }
    /* منع كسر النص الطويل خارج الصندوق */
    p, li, h1, h2, h3, h4, h5, h6, a, span, div, td, th {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    /* منع تجاوز canvas/iframe horizontally */
    canvas, iframe { max-width: 100% !important; }

    /* ════════════════════════════════════════════════════════
     * GRIDS UNIVERSAL — كل grid فيه 2-4 عمود يصبح عمود واحد
     * ════════════════════════════════════════════════════════ */
    @media (max-width: 768px) {
        .grid-2, .grid-3, .grid-4,
        .comparison-grid, .explain-grid, .alt-grid,
        .calc-grid, .calculators-grid, .features-grid,
        .results-grid, .stats-grid, .kpi-grid, .portfolio-grid,
        .products-grid, .articles-grid, .blogs-grid,
        .testimonials-grid, .pricing-grid, .team-grid,
        .hero-stats-grid, .service-grid,
        .case-studies-grid, .footer-grid {
            grid-template-columns: 1fr !important;
            gap: 14px !important;
        }
    }
    @media (min-width: 481px) and (max-width: 768px) {
        /* على tablet صغير نعرض عمودين لو فيه حاسبات/منتجات كثيرة */
        .calc-grid, .calculators-grid, .features-grid,
        .products-grid, .service-grid {
            grid-template-columns: repeat(2, 1fr) !important;
        }
    }

    /* ════════════════════════════════════════════════════════
     * CALCULATOR PAGES — صفحات الحاسبات الفرعية
     * ════════════════════════════════════════════════════════ */
    @media (max-width: 767px) {
        /* Page Hero */
        .page-head, .page-hero {
            padding: 90px 16px 40px !important;
            text-align: center !important;
        }
        .page-head h1, .page-hero h1,
        .calc-hero h1, .calculator-hero h1 {
            font-size: clamp(22px, 6.5vw, 32px) !important;
            line-height: 1.25 !important;
            margin-bottom: 12px !important;
        }
        .page-head p, .page-hero p,
        .page-head .lead, .page-hero .lead {
            font-size: 14.5px !important;
            line-height: 1.65 !important;
            padding: 0 6px !important;
        }

        /* Card — generic calculator card */
        .card, .calc-card, .form-card, .result-card,
        .alt-card, .compare-card, .quiz-card,
        .explain-item, .opt {
            padding: 18px 16px !important;
            border-radius: 14px !important;
        }

        /* Hero Result (gold / inflation result block) */
        .hero-result {
            padding: 22px 16px !important;
            border-radius: 16px !important;
        }
        .hero-amount {
            font-size: clamp(26px, 8vw, 42px) !important;
            line-height: 1.1 !important;
            word-break: break-all !important;
        }
        .hero-label,
        .hero-unit {
            font-size: 13px !important;
        }
        .hero-stats {
            flex-wrap: wrap !important;
            gap: 14px !important;
            justify-content: center !important;
        }
        .hero-stat {
            min-width: calc(50% - 12px) !important;
            text-align: center !important;
            padding: 12px 8px !important;
        }
        .hero-stat strong,
        .hero-stat .num {
            font-size: 18px !important;
        }

        /* Form Fields */
        .field, .form-field {
            display: block !important;
            width: 100% !important;
            margin-bottom: 14px !important;
        }
        .field-label, .form-label,
        .lbl {
            display: block !important;
            font-size: 13.5px !important;
            margin-bottom: 6px !important;
        }
        .field-input, .field-select,
        input.field, select.field, textarea.field {
            width: 100% !important;
            font-size: 16px !important;
            min-height: 48px !important;
            padding: 12px 14px !important;
            border-radius: 12px !important;
        }
        .btn-calc, .calc-btn,
        button.btn-calc, .btn-primary {
            width: 100% !important;
            min-height: 50px !important;
            font-size: 15px !important;
            padding: 14px 18px !important;
            border-radius: 12px !important;
            margin-top: 6px !important;
        }

        /* Mode / Tab switcher */
        .mode-tabs, .tabs, .tab-bar,
        .q-options {
            display: flex !important;
            flex-wrap: wrap !important;
            gap: 8px !important;
            overflow-x: auto !important;
            -webkit-overflow-scrolling: touch !important;
            scrollbar-width: none !important;
            padding: 6px 2px !important;
        }
        .mode-tabs::-webkit-scrollbar,
        .q-options::-webkit-scrollbar { display: none !important; }
        .mode-tab, .tab, .q-option {
            flex: 1 1 auto !important;
            min-width: max-content !important;
            font-size: 13px !important;
            padding: 10px 14px !important;
            white-space: nowrap !important;
        }
        .mode-desc {
            font-size: 13px !important;
            line-height: 1.6 !important;
            text-align: center !important;
            padding: 8px 4px !important;
        }
    }

    /* ════════════════════════════════════════════════════════
     * CAR DECISION HUB QUIZ + OPTIONS
     * ════════════════════════════════════════════════════════ */
    @media (max-width: 767px) {
        .quiz-card { padding: 20px 16px !important; }
        .progress { height: 6px !important; }
        .opt, .alt-card {
            display: flex !important;
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: 8px !important;
            padding: 16px !important;
            border-radius: 14px !important;
        }
        .opt-emoji { font-size: 28px !important; }
        .opt-info, .opt-text {
            font-size: 14px !important;
            line-height: 1.6 !important;
        }
        .restart, .share-btn, .upgrade-btn {
            width: 100% !important;
            min-height: 46px !important;
            justify-content: center !important;
        }
    }

    /* ════════════════════════════════════════════════════════
     * COMPARE CARDS (gold vs dollar etc)
     * ════════════════════════════════════════════════════════ */
    @media (max-width: 640px) {
        .compare-card {
            padding: 18px 16px !important;
        }
        .compare-card h3, .compare-card h4 {
            font-size: 15px !important;
            margin-bottom: 8px !important;
        }
        .compare-card .value,
        .compare-card .price,
        .compare-card .pct {
            font-size: 20px !important;
        }
        .compare-card .delta {
            font-size: 12px !important;
        }
    }

    /* ════════════════════════════════════════════════════════
     * MY-PORTFOLIO / MY-HISTORY / MY-CALCULATIONS LISTS
     * ════════════════════════════════════════════════════════ */
    @media (max-width: 767px) {
        .portfolio-card, .history-card, .calc-item,
        .saved-item, .saved-calc, .my-item,
        [class*="portfolio-card"], [class*="history-item"] {
            padding: 16px !important;
            border-radius: 14px !important;
            display: flex !important;
            flex-direction: column !important;
            gap: 8px !important;
        }
        .portfolio-card .meta,
        .history-card .meta {
            font-size: 12px !important;
            color: var(--text-muted, #7a8194) !important;
        }
        .portfolio-card .title,
        .history-card .title {
            font-size: 14.5px !important;
            font-weight: 700 !important;
        }
        .portfolio-card .actions,
        .history-card .actions {
            flex-wrap: wrap !important;
            gap: 8px !important;
        }
        .portfolio-card .actions button,
        .history-card .actions button,
        .portfolio-card .actions a,
        .history-card .actions a {
            flex: 1 1 calc(50% - 4px) !important;
            min-height: 40px !important;
            font-size: 12.5px !important;
            padding: 8px 10px !important;
        }
    }

    /* ════════════════════════════════════════════════════════
     * EXPLAIN / FAQ / INFO SECTIONS
     * ════════════════════════════════════════════════════════ */
    @media (max-width: 640px) {
        .explain-section, .info-section, .faq-section {
            padding: 40px 14px !important;
        }
        .explain-grid, .info-grid, .faq-grid {
            grid-template-columns: 1fr !important;
            gap: 12px !important;
        }
        .explain-item, .info-item, .faq-item {
            padding: 16px 14px !important;
            border-radius: 12px !important;
        }
        .explain-item h3, .info-item h3, .faq-item h3 {
            font-size: 15px !important;
        }
        .explain-item p, .info-item p, .faq-item p {
            font-size: 13.5px !important;
            line-height: 1.7 !important;
        }
        .ei-icon, .info-icon { font-size: 22px !important; }
        .ei-title { font-size: 15px !important; }
        .ei-text { font-size: 13.5px !important; }
    }

    /* ════════════════════════════════════════════════════════
     * TABLES — تحويلها لعرض responsive (بطاقات أو scroll)
     * ════════════════════════════════════════════════════════ */
    @media (max-width: 767px) {
        .table-wrap, .table-scroll, .table-responsive,
        [class*="table-container"] {
            overflow-x: auto !important;
            -webkit-overflow-scrolling: touch !important;
            scrollbar-width: thin !important;
            margin: 0 -14px !important;
            padding: 0 14px !important;
        }
        .table-wrap table,
        .table-scroll table,
        .table-responsive table {
            min-width: 480px !important;
            font-size: 12.5px !important;
            display: table !important;
            white-space: normal !important;
        }
        .table-wrap th,
        .table-wrap td,
        .table-scroll th,
        .table-scroll td {
            padding: 8px 10px !important;
        }
    }

    /* ════════════════════════════════════════════════════════
     * CHARTS / CANVAS / SVG VISUALS
     * ════════════════════════════════════════════════════════ */
    @media (max-width: 767px) {
        .chart-wrap, .chart-container,
        [class*="chart-wrap"], [class*="chart-container"] {
            min-height: 240px !important;
            max-height: 60vh !important;
            padding: 8px !important;
            margin: 0 -4px !important;
        }
        .chart-wrap canvas,
        .chart-container canvas { width: 100% !important; height: auto !important; max-height: 50vh !important; }
        .chart-legend, .legend {
            flex-wrap: wrap !important;
            gap: 6px 12px !important;
            font-size: 12px !important;
            justify-content: center !important;
        }
    }

    /* ════════════════════════════════════════════════════════
     * GLOBAL NAV / TOPBAR — تحسين على شاشات صغيرة جداً
     * ════════════════════════════════════════════════════════ */
    @media (max-width: 380px) {
        .mt-topbar {
            padding: 6px 8px !important;
            gap: 4px !important;
        }
        .mt-topbar-brand {
            font-size: 12px !important;
        }
        .mt-topbar-brand img {
            width: 20px !important;
            height: 20px !important;
        }
        .mt-topbar-cta {
            padding: 5px 8px !important;
            font-size: 11px !important;
        }
        .mt-topbar-link {
            font-size: 11.5px !important;
            padding: 4px 6px !important;
        }
        body { padding-top: 46px !important; }
    }

    /* ════════════════════════════════════════════════════════
     * MODALS / DROPDOWNS — يخرجوا داخل الشاشة
     * ════════════════════════════════════════════════════════ */
    @media (max-width: 480px) {
        .mt-modal__card,
        .mt-auth-card,
        .modal-card,
        [class*="modal-content"] {
            width: calc(100vw - 24px) !important;
            max-width: 100% !important;
            margin: 12px !important;
            padding: 20px 18px !important;
            border-radius: 16px !important;
            max-height: calc(100dvh - 24px) !important;
            overflow-y: auto !important;
        }
        .mt-currency-dropdown,
        .mt-nav-dropdown-menu {
            min-width: calc(100vw - 32px) !important;
            max-width: calc(100vw - 32px) !important;
            left: 16px !important;
            right: 16px !important;
        }
    }

    /* ════════════════════════════════════════════════════════
     * BUTTONS — touch targets a11y
     * ════════════════════════════════════════════════════════ */
    @media (max-width: 767px) {
        button:not(.mt-cookie-toggle):not(.close-x):not(.mt-toggle-btn),
        a.btn, a.button,
        input[type="submit"], input[type="button"] {
            min-height: 44px !important;
            min-width: 44px !important;
            font-size: 14px !important;
        }
        /* المسافات بين العناصر القابلة للنقر */
        .btn + .btn,
        .button + .button,
        a.btn + a.btn { margin-inline-start: 6px !important; }
    }

    /* ════════════════════════════════════════════════════════
     * BLOG / ARTICLE CONTENT — قراءة مريحة
     * ════════════════════════════════════════════════════════ */
    @media (max-width: 767px) {
        .blog-post-content,
        .article-content,
        .entry-content,
        .post-content,
        .single-post .content {
            font-size: 16px !important;
            line-height: 1.85 !important;
            padding: 0 14px !important;
        }
        .blog-post-content h2,
        .article-content h2,
        .entry-content h2 {
            font-size: 22px !important;
            margin-top: 28px !important;
        }
        .blog-post-content h3,
        .article-content h3 {
            font-size: 18px !important;
        }
        .blog-post-content img,
        .article-content img {
            border-radius: 12px !important;
            margin: 16px auto !important;
        }
        .blog-post-content pre,
        .article-content pre {
            font-size: 12px !important;
            padding: 12px !important;
            overflow-x: auto !important;
            border-radius: 10px !important;
        }
    }

    /* ════════════════════════════════════════════════════════
     * COOKIE BANNER — قابل للقراءة على موبايل
     * ════════════════════════════════════════════════════════ */
    @media (max-width: 640px) {
        .mt-cookie-banner {
            padding: 14px 14px !important;
            font-size: 13px !important;
            line-height: 1.6 !important;
        }
        .mt-cookie-inner {
            flex-direction: column !important;
            gap: 10px !important;
            align-items: stretch !important;
        }
        .mt-cookie-buttons {
            display: grid !important;
            grid-template-columns: 1fr 1fr !important;
            gap: 6px !important;
            width: 100% !important;
        }
        .mt-cookie-buttons .mt-cookie-btn-accept {
            grid-column: 1 / -1 !important;
        }
        .mt-cookie-btn {
            min-height: 42px !important;
            font-size: 13px !important;
            padding: 8px 10px !important;
        }
    }

    /* ════════════════════════════════════════════════════════
     * SAFE AREA (iOS notch / Home indicator)
     * ════════════════════════════════════════════════════════ */
    @supports (padding: env(safe-area-inset-bottom)) {
        body {
            padding-bottom: env(safe-area-inset-bottom, 0) !important;
        }
        .mt-wa-fab, .mt-msg-fab {
            bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
        }
        .mt-msg-fab {
            bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
        }
    }

    /* ════════════════════════════════════════════════════════
     * STICKY MOBILE CTA — لا يغطي المحتوى
     * ════════════════════════════════════════════════════════ */
    @media (max-width: 767px) {
        .mt-mobile-sticky,
        [class*="mobile-sticky"] {
            position: fixed !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            z-index: 9988 !important;
            padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
            background: rgba(10,14,26,.92) !important;
            backdrop-filter: blur(12px) !important;
            -webkit-backdrop-filter: blur(12px) !important;
            border-top: 1px solid rgba(212, 175, 55,.2) !important;
        }
        /* لو فيه sticky CTA نزود مسافة في الـ body */
        body.has-mobile-sticky {
            padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
        }
    }

    /* ════════════════════════════════════════════════════════
     * IMAGE FRAMES / VIDEO PLAYERS — aspect-ratio
     * ════════════════════════════════════════════════════════ */
    @media (max-width: 767px) {
        .hero-video-wrap, .page-hero-bg-wrap {
            aspect-ratio: 16/9 !important;
            max-height: 50vh !important;
        }
        .product-thumb, .article-thumb, .blog-thumb,
        [class*="product__media"], [class*="article-image"] {
            aspect-ratio: 16/9 !important;
            object-fit: cover !important;
            width: 100% !important;
        }
    }

    /* ════════════════════════════════════════════════════════
     * RTL-aware reset لأي float
     * ════════════════════════════════════════════════════════ */
    @media (max-width: 767px) {
        .pull-left, .pull-right,
        .float-left, .float-right,
        .alignleft, .alignright {
            float: none !important;
            display: block !important;
            margin: 12px auto !important;
            max-width: 100% !important;
        }
    }

    /* ════════════════════════════════════════════════════════
     * AFFILIATE / CTA STRIPS
     * ════════════════════════════════════════════════════════ */
    @media (max-width: 767px) {
        .affiliate-strip, .cta-strip,
        [class*="cta-band"] {
            padding: 28px 16px !important;
            text-align: center !important;
        }
        .affiliate-strip h2,
        .cta-strip h2 {
            font-size: 20px !important;
        }
        .affiliate-strip p,
        .cta-strip p {
            font-size: 13.5px !important;
        }
    }

    /* ════════════════════════════════════════════════════════
     * Trust badge in page hero
     * ════════════════════════════════════════════════════════ */
    @media (max-width: 480px) {
        .mt-trust-badge {
            font-size: 11px !important;
            padding: 5px 11px !important;
        }
    }