/* Mobile Top Bar Override - Show text on mobile */
        @media (max-width: 599px) {
            .top-bar-item span {
                display: inline !important;
            }
        }

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

        /* Main Content */
        .main-content {
            background-color: #F8FAFB;
        }

        /* Hero Section - بالضبط نفس Flutter */
        .hero-section {
            position: relative;
            width: 100%;
            height: 550px; /* قللت الارتفاع لقص من الأسفل */
            overflow: hidden;
        }

        .hero-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .hero-background img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center top; /* نركز على الأعلى */
        }

        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(139, 21, 32, 0.7); /* نفس Flutter */
        }

        .hero-content {
            position: relative;
            z-index: 2;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 calc(10% - 8px);
            color: white;
            max-width: 1000px; /* حد أقصى للعرض */
        }

        .hero-widget-container {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            z-index: 3;
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .hero-widget {
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .hero-widget iframe {
            border-radius: 10px;
            display: block;
        }

        .hero-title {
            font-size: 38px;
            font-weight: 700;
            line-height: 1.4;
            margin: 0 0 24px 0;
            color: white;
            letter-spacing: 0.5px;
        }

        .hero-subtitle {
            font-size: 16px;
            font-weight: 400;
            line-height: 1.7;
            margin: 0 0 20px 0;
            color: white;
            letter-spacing: 0.3px;
        }

        .hero-desc {
            font-size: 13px;
            font-weight: 400;
            line-height: 1.8;
            margin: 0 0 16px 0;
            color: white;
            letter-spacing: 0.2px;
            text-align: justify; /* محاذاة النص */
        }

        .hero-buttons {
            display: flex;
            gap: 12px;
            margin-top: 20px;
            align-items: stretch; /* الأزرار بنفس الارتفاع */
        }

        .hero-btn {
            flex: 1; /* الأزرار بنفس العرض */
            max-width: 200px; /* حد أقصى للعرض */
            height: 48px;
            padding: 14px 20px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 700;
            border: none;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .hero-btn.primary {
            background-color: white;
            color: #C62030;
        }

        .hero-btn.secondary {
            background-color: #8B0000;
            color: white;
        }

        .hero-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        /* Stats Section - بالضبط نفس Flutter */
        .stats-section {
            width: 100%;
            padding: 35px calc(10% - 8px) 60px; /* زيادة padding من تحت */
            background-color: #F8FAFB; /* نفس Flutter */
        }

        .stats-container {
            display: flex;
            gap: 24px; /* نفس Flutter */
        }

        .stat-card {
            flex: 1;
            min-height: 124px;
            padding: 18px 16px;
            background-color: white;
            border: 1px solid #E5E7EB; /* نفس Flutter */
            border-radius: 10px; /* نفس Flutter */
            box-shadow:
                0 1px 2px -1px rgba(0, 0, 0, 0.1),
                0 1px 3px 0 rgba(0, 0, 0, 0.1); /* نفس Flutter */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        .stat-number {
            color: #C62030;
            font-size: 23px;
            font-weight: 800;
            line-height: 1.15;
            margin-bottom: 6px;
            text-align: center;
        }

        .stat-title {
            color: #101727; /* نفس Flutter بالضبط */
            font-size: 13px;
            font-weight: 800; /* أغمق */
            line-height: 1.48; /* نفس Flutter */
            margin-bottom: 3px; /* نفس Flutter بالضبط */
        }

        .stat-subtitle {
            color: #495565; /* نفس Flutter بالضبط */
            font-size: 11px;
            font-weight: 400; /* نفس Flutter بالضبط */
            line-height: 1.40; /* نفس Flutter */
        }

        /* Brands Section - بالضبط نفس Flutter */
        .brands-section {
            position: relative;
            width: 100%;
            background-color: white;
            padding: 3px 0; /* نفس Flutter */
        }

        .brands-background {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            opacity: 0.08; /* نفس Flutter بالضبط - على خلفية بيضاء يعطي مظهر وردي فاتح */
            z-index: 1;
        }

        .jug-icon {
            width: 700px;
            height: 700px;
            fill: #D91F36;
            color: #D91F36; /* عشان currentColor يشتغل */
        }

        .brands-content {
            position: relative;
            z-index: 2;
        }

        .brands-header {
            padding: 51px calc(10% - 8px) 16px; /* تقليل padding من تحت */
            text-align: center;
        }

        .brands-title {
            color: #C62030; /* اللون الأصلي من Flutter */
            font-size: 32px; /* نفس Flutter بالضبط */
            font-weight: 700; /* نفس Flutter بالضبط */
            line-height: 1.25; /* نفس Flutter */
            margin: 0 0 24px 0; /* نفس Flutter بالضبط */
            direction: rtl; /* من اليمين لليسار */
        }

        .brands-desc {
            color: #495565; /* نفس Flutter بالضبط */
            font-size: 15px; /* نفس Flutter بالضبط */
            font-weight: 400; /* نفس Flutter بالضبط */
            line-height: 1.68; /* نفس Flutter */
            margin: 0 0 12px 0; /* تقليل المسافة بين الفقرتين */
            max-width: 1200px; /* نفس Flutter */
            margin-left: auto;
            margin-right: auto;
            text-align: justify;
        }

        .service-cards {
            display: flex;
            gap: 24px;
            padding: 8px calc(10% - 8px) 130px;
            align-items: stretch;
        }

        .service-card {
            flex: 1;
            min-height: 240px;
            padding: 24px;
            background-color: white;
            border: 1px solid #E5E7EB;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            display: flex;
            flex-direction: column;
            align-self: stretch; /* كل كارد يمتد لنفس الارتفاع */
            position: relative;
            overflow: hidden;
        }

        /* في العربي، عكس اتجاه السهم في الكروت */
        body.ar .service-link svg {
            transform: scaleX(-1);
        }

        .service-icon {
            width: 32px; /* نفس Flutter */
            height: 32px; /* نفس Flutter */
            margin-bottom: 16px; /* نفس Flutter */
        }

        .service-icon svg {
            width: 100%;
            height: 100%;
            stroke: #C62030;
            fill: none;
            stroke-width: 2;
        }

        /* عشان الأيقونات اللي فيها fill بدل stroke */
        .service-icon svg path[fill="currentColor"],
        .service-icon svg path:not([stroke]) {
            fill: #C62030;
            stroke: none;
        }

        /* خلي currentColor يساوي الأحمر */
        .service-icon {
            color: #C62030;
        }

        .service-title {
            color: #111827; /* نفس Flutter بالضبط */
            font-size: 15px; /* نفس Flutter بالضبط */
            font-weight: 600; /* نفس Flutter بالضبط */
            line-height: 1.4; /* نفس Flutter */
            margin: 0 0 10px 0; /* نفس Flutter بالضبط */
        }

        .service-desc {
            color: #6B7280; /* نفس Flutter بالضبط */
            font-size: 12px; /* نفس Flutter بالضبط */
            font-weight: 400; /* نفس Flutter بالضبط */
            line-height: 1.5; /* نفس Flutter */
            margin: 0 0 12px 0; /* نفس Flutter بالضبط */
            flex: 1;
        }

        .service-link {
            display: flex;
            align-items: center;
            gap: 6px; /* نفس Flutter */
            color: #C62030; /* اللون الأصلي من Flutter */
            font-size: 12px; /* نفس Flutter بالضبط */
            font-weight: 500; /* نفس Flutter بالضبط */
            text-decoration: none;
            transition: all 0.2s ease;
        }

        .service-link svg {
            width: 14px; /* نفس Flutter بالضبط */
            height: 14px; /* نفس Flutter بالضبط */
            stroke: #C62030; /* اللون الأصلي من Flutter */
            fill: none;
            transition: transform 0.2s ease;
        }

        /* في العربي، عكس اتجاه السهم */
        body.ar .service-link svg {
            transform: scaleX(-1);
        }

        /* في العربي، عكس اتجاه السهم */
        body.ar .service-link svg {
            transform: scaleX(-1);
        }

        .service-link:hover {
            opacity: 0.8;
        }

        .arrow-icon {
            width: 14px; /* نفس Flutter */
            height: 14px; /* نفس Flutter */
            fill: #D91F36; /* أفتح شوي */
        }

        /* Arabic RTL Support */
        body.ar .hero-content {
            text-align: right;
        }

        body.ar .hero-desc {
            text-align: justify;
        }

        body.ar .brands-desc {
            text-align: right;
        }

        body.ar .service-cards {
            direction: rtl; /* من اليمين لليسار */
            flex-direction: row; /* عادي */
        }

        body.ar .service-card {
            text-align: right; /* الكلام محاذي لليمين */
            direction: rtl; /* اتجاه الكارد من اليمين لليسار */
        }

        /* في العربي، الأسهم تكون باتجاه اليسار */
        body.ar .service-link svg {
            transform: scaleX(-1);
        }

        /* في العربي، ترتيب النص والسهم */
        body.ar .service-link {
            flex-direction: row; /* الأيقونة أول، النص ثاني */
            justify-content: flex-start;
            direction: rtl; /* من اليمين لليسار */
        }

        /* كروت الإحصائيات في العربي */
        body.ar .stats-container {
            direction: rtl; /* من اليمين لليسار */
            flex-direction: row-reverse; /* عكس الترتيب */
        }

        body.ar .stat-card {
            text-align: center; /* الأرقام في الوسط */
            direction: rtl;
        }

        /* Mobile Responsive - محسّن للعربي */
        @media (max-width: 599px) {
            .hero-section {
                height: auto !important;
                min-height: auto !important;
                padding: 30px 0 30px 0;
            }

            .hero-background img {
                height: 100%;
                object-fit: cover;
            }

            .hero-content {
                padding: 20px 16px !important;
                justify-content: flex-start !important;
                max-width: 100% !important;
            }

            .hero-widget-container {
                display: none !important;
            }

            .hero-title {
                font-size: 20px !important;
                line-height: 1.4 !important;
                margin-bottom: 10px !important;
            }

            .hero-subtitle {
                font-size: 11px !important;
                line-height: 1.5 !important;
                margin-bottom: 10px !important;
            }

            .hero-desc {
                font-size: 10px !important;
                line-height: 1.6 !important;
                margin-bottom: 8px !important;
                text-align: justify !important;
            }

            .hero-buttons {
                flex-direction: row !important;
                gap: 8px !important;
                margin-top: 12px !important;
            }

            .hero-btn {
                flex: 1 !important;
                max-width: none !important;
                height: 40px !important;
                font-size: 11px !important;
                font-weight: 700 !important;
                padding: 8px 10px !important;
            }

            .stats-section {
                padding: 25px 16px 40px !important;
            }

            .stats-container {
                flex-direction: column !important;
                gap: 12px !important;
            }

            .stat-card {
                min-height: 96px !important;
                height: auto !important;
                padding: 16px !important;
            }

            .stat-number {
                font-size: 22px !important;
                margin-bottom: 4px !important;
            }

            .stat-title {
                font-size: 13px !important;
                margin-bottom: 2px !important;
            }

            .stat-subtitle {
                font-size: 10.5px !important;
            }

            .brands-section {
                padding: 20px 0 !important;
            }

            .brands-header {
                padding: 30px 16px 12px !important;
            }

            .brands-title {
                font-size: 22px !important;
                line-height: 1.3 !important;
                margin-bottom: 16px !important;
            }

            .brands-desc {
                font-size: 12px !important;
                line-height: 1.6 !important;
                text-align: justify !important;
                margin-bottom: 10px !important;
            }

            .service-cards {
                flex-direction: column !important;
                gap: 12px !important;
                padding: 8px 16px 80px !important;
            }

            .service-card {
                min-height: 180px !important;
                padding: 18px !important;
            }

            .service-icon {
                width: 28px !important;
                height: 28px !important;
                margin-bottom: 12px !important;
            }

            .service-title {
                font-size: 13px !important;
                margin-bottom: 8px !important;
            }

            .service-desc {
                font-size: 11px !important;
                line-height: 1.5 !important;
                margin-bottom: 10px !important;
            }

            .service-link {
                font-size: 11px !important;
            }

            .service-link svg {
                width: 12px !important;
                height: 12px !important;
            }

            .jug-icon {
                width: 350px !important;
                height: 350px !important;
            }
        }

        @media (min-width: 600px) and (max-width: 899px) {
            .stats-container {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 16px;
            }

            .service-cards {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 16px;
            }

            .hero-widget-container {
                position: absolute;
                left: 20px;
                top: 50%;
                transform: translateY(-50%);
                width: auto;
                padding: 0;
            }

            .hero-widget iframe {
                width: 400px !important;
                height: 200px !important;
            }
        }

        @media (min-width: 900px) {
            .hero-widget-container {
                position: absolute;
                left: 40px;
                top: 50%;
                transform: translateY(-50%);
                width: auto;
                padding: 0;
            }

            .hero-widget iframe {
                width: 524px !important;
                height: 232px !important;
            }
        }

/* Former inline declarations, isolated for strict CSP. */

[data-csp-style="s1"] { display: none !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background-color: rgba(0, 0, 0, 0.5) !important; z-index: 9999 !important; align-items: center !important; justify-content: center !important; overflow-y: auto !important; padding: 20px !important; }

[data-csp-style="s2"] { background: white !important; border-radius: 8px !important; max-width: 1200px !important; width: 100% !important; max-height: 90vh !important; overflow-y: auto !important; position: relative !important; direction: rtl !important; }

[data-csp-style="s3"] { background-color: #C62030 !important; padding: 20px 24px !important; border-radius: 8px 8px 0 0 !important; display: flex !important; justify-content: space-between !important; align-items: center !important; position: sticky !important; top: 0 !important; z-index: 10 !important; }

[data-csp-style="s4"] { color: white !important; font-size: 20px !important; font-weight: 700 !important; margin: 0 !important; }

[data-csp-style="s5"] { background: none !important; border: none !important; color: white !important; font-size: 28px !important; cursor: pointer !important; padding: 0 !important; width: 32px !important; height: 32px !important; display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; }

[data-csp-style="s6"] { padding: 24px !important; text-align: right !important; }

[data-csp-style="s7"] { color: #6B7280 !important; font-size: 14px !important; line-height: 1.6 !important; margin-bottom: 32px !important; text-align: right !important; }

[data-csp-style="s8"] { color: #E7000B !important; font-size: 24px !important; font-weight: 700 !important; margin-bottom: 8px !important; text-align: right !important; }

[data-csp-style="s9"] { color: #6B7280 !important; font-size: 13px !important; margin-bottom: 20px !important; text-align: right !important; }

[data-csp-style="s10"] { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; margin-bottom: 32px !important; }

[data-csp-style="s11"] { background-color: #F9FAFB !important; border: 1px solid #E5E7EB !important; border-radius: 8px !important; padding: 20px !important; text-align: right !important; }

[data-csp-style="s12"] { height: 40px !important; margin-bottom: 12px !important; }

[data-csp-style="s13"] { color: #6B7280 !important; font-size: 13px !important; line-height: 1.5 !important; margin: 0 !important; text-align: right !important; }

[data-csp-style="s14"] { background-color: white !important; border: 1px solid #E5E7EB !important; border-radius: 8px !important; padding: 20px !important; text-align: right !important; }

[data-csp-style="s15"] { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 32px !important; margin-bottom: 24px !important; }

[data-csp-style="s16"] { text-align: right !important; }

[data-csp-style="s17"] { color: #1A1A1A !important; font-size: 18px !important; font-weight: 700 !important; margin-bottom: 8px !important; text-align: right !important; }

[data-csp-style="s18"] { color: #6B7280 !important; font-size: 14px !important; line-height: 1.6 !important; margin-bottom: 16px !important; text-align: right !important; }

[data-csp-style="s19"] { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }

[data-csp-style="s20"] { background-color: #F9FAFB !important; border: 1px solid #E5E7EB !important; border-radius: 6px !important; padding: 12px 16px !important; font-size: 14px !important; font-weight: 700 !important; color: #101828 !important; text-align: center !important; }

[data-csp-style="s21"] { display: flex !important; flex-direction: column !important; gap: 12px !important; }

[data-csp-style="s22"] { background-color: #E7000B !important; border-radius: 6px !important; padding: 12px 16px !important; display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; color: white !important; font-size: 13px !important; font-weight: 600 !important; }

[data-csp-style="s23"] { background-color: #F9FAFB !important; border-radius: 6px !important; padding: 12px 16px !important; display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; font-size: 13px !important; }

[data-csp-style="s24"] { font-weight: 700 !important; color: #101828 !important; text-align: right !important; }

[data-csp-style="s25"] { color: #364153 !important; text-align: right !important; }

[data-csp-style="s26"] { background-color: #efddcd !important; border-right: 4px solid #C62030 !important; border-radius: 6px !important; padding: 12px 16px !important; font-size: 12px !important; line-height: 1.5 !important; color: #364153 !important; text-align: right !important; }

#brands-modal.brands-modal--open { display: flex !important; }

/* Keep the homepage copy and share widget in separate responsive regions. */
@media (min-width: 600px) {
    .hero-section {
        display: grid;
        direction: ltr;
        align-items: center;
        height: auto;
        padding: clamp(40px, 5vw, 80px) clamp(24px, 5vw, 96px);
    }

    .hero-content {
        grid-area: content;
        direction: rtl;
        min-width: 0;
        width: 100%;
        max-width: none;
        height: auto;
        padding: 0;
    }

    .hero-widget-container {
        position: relative;
        grid-area: widget;
        inset: auto;
        width: min(524px, 100%);
        padding: 0;
        transform: none;
        justify-self: center;
    }

    .hero-widget,
    .hero-widget iframe {
        width: 100% !important;
    }

    .hero-widget iframe {
        height: auto !important;
        aspect-ratio: 524 / 232;
    }
}

@media (min-width: 600px) and (max-width: 1279px) {
    .hero-section {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "content"
            "widget";
        gap: clamp(28px, 5vw, 48px);
        min-height: 0;
    }

    .hero-content {
        max-width: 900px;
        justify-self: center;
    }
}

@media (min-width: 1280px) {
    .hero-section {
        grid-template-columns: minmax(420px, 524px) minmax(0, 1fr);
        grid-template-areas: "widget content";
        gap: clamp(32px, 4vw, 72px);
        min-height: 550px;
        height: clamp(550px, 41.667vw, 800px);
    }
}