/* ==========================================================================
   THE REPAIR CODE - DESIGN SYSTEM & PAGES STYLING
   Theme: Modern Light, Clean Premium, Glassmorphism
   ========================================================================== */

/* Design Tokens & Variables */
:root {
    --bg-primary: #FFFFFF;
    --bg-secondary: #F4F6F9;
    --bg-card: #FFFFFF;
    --bg-glass: rgba(255, 255, 255, 0.85);
    
    /* Borders */
    --border-width-thin: 1px;
    --border-width-heavy: 2px;
    --border-color: rgba(0, 96, 169, 0.12);
    --border-heavy-cyan: 2px solid var(--accent-cyan);
    --border-heavy-muted: 2px solid rgba(178, 180, 178, 0.2);
    
    /* Accents */
    --accent-cyan: #0060A9;
    --accent-blue: #9D2235;
    --accent-glow: rgba(0, 96, 169, 0.15);
    --accent-blue-glow: rgba(157, 34, 53, 0.12);
    
    /* States */
    --color-success: #10B981;
    --color-error: #EF4444;
    --color-warning: #F59E0B;
    
    /* Text Colors */
    --text-primary: #0A0A0A;
    --text-muted: #555E68;
    --text-dark: #FFFFFF;
    
    /* Typography */
    --font-family: 'Cairo', sans-serif;
    
    /* Transitions & Radii */
    --transition-fast: 0.15s ease;
    --transition-medium: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
}

/* ==========================================================================
   2026 VISUAL REFRESH — palette supplied by client
   ========================================================================== */
:root {
    --brand-navy: #15387F;
    --brand-cyan: #00A8DA;
    --brand-indigo: #5160AB;
    --brand-green: #6BBC49;
    --brand-silver: #C1C3C7;
    --ink: #101828;
    --surface-soft: #F5F8FC;
    --accent-cyan: #00A8DA;
    --accent-blue: #5160AB;
    --accent-glow: rgba(0, 168, 218, 0.2);
    --accent-blue-glow: rgba(81, 96, 171, 0.16);
    --border-color: rgba(21, 56, 127, 0.12);
    --text-primary: #101828;
    --text-muted: #5D6779;
    --font-family: 'Inter', 'Cairo', sans-serif;
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 30px;
}

html[lang="ar"] body,
body {
    font-family: 'Inter', 'Cairo', sans-serif;
    background: #fff;
    color: var(--ink);
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] p,
html[lang="ar"] a,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select {
    font-family: 'Inter', 'Cairo', sans-serif;
}

.container {
    max-width: 1280px;
}

.header-topbar {
    background: var(--brand-navy);
    color: #fff;
    font-size: .78rem;
}

.topbar-inner {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.topbar-inner p,
.topbar-trust,
.topbar-trust span,
.topbar-trust a {
    display: flex;
    align-items: center;
    gap: 8px;
}

.topbar-trust {
    gap: 22px;
}

.topbar-inner i {
    color: var(--brand-cyan);
}

.main-header {
    background: rgba(255,255,255,.92);
    border-bottom: 1px solid rgba(21,56,127,.08);
    box-shadow: 0 8px 30px rgba(21,56,127,.06);
}

.header-container {
    height: 86px;
}

.main-header.scrolled .header-container {
    height: 70px;
}

.logo img {
    height: 76px;
}

.main-header.scrolled .logo img {
    height: 62px;
}

.nav-menu {
    padding: 6px;
    border: 1px solid rgba(21,56,127,.08);
    border-radius: 16px;
    background: var(--surface-soft);
}

.nav-link {
    border-radius: 11px;
    padding: 10px 17px;
    font-size: .88rem;
}

.nav-link::after {
    display: none;
}

.nav-link:hover,
.nav-link.active {
    color: var(--brand-navy);
    background: #fff;
    box-shadow: 0 5px 16px rgba(21,56,127,.1);
}

.btn {
    letter-spacing: -.01em;
}

.btn-primary {
    background: linear-gradient(135deg, var(--brand-navy), var(--brand-indigo) 56%, var(--brand-cyan));
    box-shadow: 0 10px 26px rgba(21,56,127,.22);
}

.btn-primary:hover {
    box-shadow: 0 16px 34px rgba(21,56,127,.3);
}

.lang-toggle-btn {
    background: #fff;
    border-color: rgba(21,56,127,.12);
}

.hero-section {
    min-height: 780px;
    padding: 190px 0 100px;
    display: flex;
    align-items: center;
    background:
        radial-gradient(circle at 85% 24%, rgba(0,168,218,.18), transparent 25%),
        radial-gradient(circle at 15% 80%, rgba(107,188,73,.12), transparent 24%),
        linear-gradient(135deg, #F8FBFF 0%, #FFFFFF 52%, #F2F6FF 100%);
}

.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .36;
    pointer-events: none;
    background-image: linear-gradient(rgba(21,56,127,.05) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(21,56,127,.05) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: linear-gradient(to bottom, #000, transparent 85%);
}

.hero-container {
    gap: 72px;
}

.badge-tech,
.section-badge {
    color: var(--brand-navy);
    background: rgba(0,168,218,.08);
    border-color: rgba(0,168,218,.2);
    letter-spacing: .04em;
}

.hero-title {
    font-size: clamp(2.45rem, 5vw, 4.65rem);
    line-height: 1.13;
    letter-spacing: -.055em;
}

.text-gradient {
    background: linear-gradient(100deg, var(--brand-navy), var(--brand-indigo) 48%, var(--brand-cyan));
    background-size: 100% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: none;
}

.hero-subtitle {
    max-width: 700px;
    font-size: 1.08rem;
    line-height: 1.9;
}

.hero-features {
    border-top-color: rgba(21,56,127,.1);
}

.image-wrapper-glowing {
    border: 10px solid rgba(255,255,255,.75);
    border-radius: 36px;
    box-shadow: 0 34px 80px rgba(21,56,127,.2);
    background: linear-gradient(145deg, #edf8ff, #e9edff);
}

.image-wrapper-glowing::after {
    background: linear-gradient(135deg, var(--brand-cyan), transparent 38%, transparent 65%, var(--brand-green));
    animation: none;
}

.hero-img {
    min-height: 470px;
    object-fit: cover;
}

.category-gateway-section {
    padding: 96px 0 108px;
    background: #fff;
}

.category-intro {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 38px;
}

.category-intro h2 {
    font-size: clamp(2rem, 4vw, 3.2rem);
    letter-spacing: -.04em;
    margin-top: 8px;
}

.category-intro p {
    max-width: 510px;
    color: var(--text-muted);
    font-size: 1rem;
}

.section-eyebrow,
.category-kicker,
.footer-cta-kicker {
    color: var(--brand-cyan);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .18em;
}

.category-gateway-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 18px;
}

.category-gateway-card {
    min-height: 420px;
    position: relative;
    display: flex;
    overflow: hidden;
    border-radius: 28px;
    padding: 32px;
    color: #fff;
    isolation: isolate;
    box-shadow: 0 18px 44px rgba(21,56,127,.12);
}

.category-repair {
    background: linear-gradient(145deg, #102D69, var(--brand-navy));
}

.category-shop {
    background: linear-gradient(145deg, #3F4B95, var(--brand-indigo));
}

.category-warranty {
    background: linear-gradient(145deg, #50A531, var(--brand-green));
}

.category-gateway-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .35;
    background: radial-gradient(circle at 80% 10%, rgba(255,255,255,.5), transparent 35%);
}

.category-gateway-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 26px 60px rgba(21,56,127,.22);
}

.category-card-copy {
    width: 100%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.category-number {
    position: absolute;
    top: 20px;
    left: 24px;
    font-weight: 900;
    color: rgba(255,255,255,.4);
}

.category-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin-bottom: auto;
    border-radius: 17px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    font-size: 1.4rem;
    backdrop-filter: blur(10px);
}

.category-gateway-card h3 {
    color: #fff;
    margin: 8px 0 10px;
    font-size: 1.75rem;
}

.category-gateway-card p {
    max-width: 330px;
    color: rgba(255,255,255,.75);
    font-size: .92rem;
}

.category-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 20px;
    font-weight: 800;
}

.category-gateway-card > img {
    position: absolute;
    left: -70px;
    bottom: -55px;
    width: 260px;
    opacity: .32;
    transform: rotate(6deg);
    z-index: 0;
}

.warranty-visual {
    position: absolute;
    left: -10px;
    bottom: -24px;
    font-size: 12rem;
    color: rgba(255,255,255,.13);
}

.brands-section {
    padding: 66px 0;
    background: var(--surface-soft);
    border-color: rgba(21,56,127,.08);
    font-family: var(--font-family);
}

.brands-title {
    color: var(--brand-navy);
    font-size: 1.2rem;
    font-weight: 800;
}

.marquee-track {
    gap: 20px;
}

.brand-pill {
    min-width: 190px;
    min-height: 86px;
    padding: 18px 24px;
    border-radius: 20px;
    border-color: rgba(21,56,127,.09);
    box-shadow: 0 8px 24px rgba(21,56,127,.07);
}

.brand-pill .brand-name {
    color: var(--brand-navy);
    font-size: .92rem;
    font-weight: 800;
}

.brands-section .brand-logo {
    width: 64px;
    height: 40px;
    filter: none;
}

section {
    padding: 112px 0;
}

.section-header {
    max-width: 760px;
}

.section-title {
    font-size: clamp(2rem, 3.8vw, 3rem);
    letter-spacing: -.035em;
}

.step-card,
.service-catalog-card,
.testimonial-card,
.faq-card-item,
.glass-form-card,
.shop-sidebar,
.shop-product-card,
.accordion-item {
    border-color: rgba(21,56,127,.1);
    box-shadow: 0 14px 40px rgba(21,56,127,.07);
}

.step-card:hover,
.service-catalog-card:hover,
.testimonial-card:hover,
.shop-product-card:hover {
    box-shadow: 0 24px 54px rgba(21,56,127,.14);
}

.page-category-hero {
    padding: 190px 0 82px;
    color: #fff;
    overflow: hidden;
}

.repair-category-hero {
    background: linear-gradient(125deg, #0D285E, var(--brand-navy) 52%, #0B7BA6);
}

.shop-category-hero {
    background: linear-gradient(125deg, #25316E, var(--brand-indigo) 54%, #6677C9);
}

.warranty-category-hero {
    background: linear-gradient(125deg, #32721D, var(--brand-green) 58%, #87D462);
}

.page-category-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 10% 20%, rgba(255,255,255,.14), transparent 25%),
                      linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: auto, 40px 40px, 40px 40px;
}

.page-category-inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 70px;
}

.page-category-copy h1 {
    color: #fff;
    font-size: clamp(2.5rem, 5vw, 4.4rem);
    line-height: 1.14;
    letter-spacing: -.055em;
    margin: 18px 0;
}

.page-category-copy > p {
    max-width: 670px;
    color: rgba(255,255,255,.78);
    font-size: 1.08rem;
    line-height: 1.9;
}

.page-category-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 100px;
    background: rgba(255,255,255,.1);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.page-category-points {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 26px;
}

.page-category-points span {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .88rem;
    font-weight: 700;
}

.page-category-points i {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.16);
    font-size: .65rem;
}

.page-category-media {
    position: relative;
    min-height: 380px;
    display: grid;
    place-items: center;
}

.page-category-media img {
    max-height: 390px;
    filter: drop-shadow(0 30px 34px rgba(0,0,0,.28));
}

.floating-service-badge {
    position: absolute;
    left: 5%;
    bottom: 4%;
    min-width: 130px;
    padding: 17px 20px;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 18px;
    background: rgba(255,255,255,.14);
    backdrop-filter: blur(16px);
    text-align: center;
}

.floating-service-badge strong,
.floating-service-badge span {
    display: block;
}

.floating-service-badge strong {
    font-size: 1.65rem;
}

.floating-service-badge span {
    color: rgba(255,255,255,.72);
    font-size: .75rem;
}

.warranty-hero-symbol {
    min-height: 330px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 36px;
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(14px);
}

.warranty-hero-symbol i {
    font-size: 9rem;
    color: rgba(255,255,255,.9);
    filter: drop-shadow(0 24px 30px rgba(0,0,0,.18));
}

.warranty-hero-symbol span {
    font-weight: 800;
}

.repair-section,
.shop-section,
.warranty-section {
    padding-top: 104px;
}

.repair-section > .container > .section-header,
.shop-section > .container > .section-header,
.warranty-section > .container > .section-header {
    margin-bottom: 48px;
}

.brand-selection-grid {
    gap: 14px;
}

.brand-card {
    min-height: 118px;
    border-radius: 18px;
}

.brand-icon {
    width: 62px;
    height: 46px;
}

.main-footer {
    padding-top: 0;
    background:
        radial-gradient(circle at 80% 0%, rgba(0,168,218,.22), transparent 28%),
        linear-gradient(150deg, #081C45, #102D67 58%, #102957);
}

.footer-cta-panel {
    position: relative;
    top: -58px;
    min-height: 210px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 42px 48px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 30px;
    color: #fff;
    background: linear-gradient(115deg, var(--brand-indigo), var(--brand-cyan));
    box-shadow: 0 28px 60px rgba(6,25,62,.3);
}

.footer-cta-panel h2 {
    color: #fff;
    font-size: clamp(1.65rem, 3vw, 2.55rem);
    margin: 8px 0;
}

.footer-cta-panel p {
    color: rgba(255,255,255,.75);
}

.footer-cta-kicker {
    color: #fff;
}

.footer-cta-actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.footer-cta-panel .btn-primary {
    background: #fff;
    color: var(--brand-navy);
}

.btn-whatsapp-modern {
    color: #fff;
    background: var(--brand-green);
    border: 0;
}

.footer-grid {
    padding-top: 10px;
}

.main-footer .footer-logo img {
    height: 110px !important;
}

.footer-about {
    max-width: 620px;
    line-height: 1.9;
}

@media (max-width: 1100px) {
    .nav-menu {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .category-gateway-grid {
        grid-template-columns: 1fr 1fr;
    }

    .category-warranty {
        grid-column: 1 / -1;
        min-height: 330px;
    }
}

@media (max-width: 768px) {
    .header-topbar {
        display: none;
    }

    .header-container {
        height: 76px;
    }

    .logo img {
        height: 64px;
    }

    .CTA-header {
        display: none;
    }

    .hero-section {
        min-height: auto;
        padding: 125px 0 76px;
    }

    .hero-container,
    .page-category-inner {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .hero-title,
    .page-category-copy h1 {
        font-size: clamp(2.15rem, 10vw, 3.2rem);
    }

    .hero-visual {
        order: -1;
    }

    .hero-img {
        min-height: 300px;
    }

    .category-intro,
    .footer-cta-panel {
        align-items: flex-start;
        flex-direction: column;
    }

    .category-gateway-grid {
        grid-template-columns: 1fr;
    }

    .category-warranty {
        grid-column: auto;
    }

    .category-gateway-card {
        min-height: 360px;
    }

    .page-category-hero {
        padding: 120px 0 70px;
    }

    .page-category-media {
        min-height: 260px;
    }

    .page-category-media img {
        max-height: 290px;
    }

    .warranty-hero-symbol {
        min-height: 240px;
    }

    .warranty-hero-symbol i {
        font-size: 6rem;
    }

    .footer-cta-panel {
        top: -36px;
        padding: 32px 26px;
    }

    .footer-cta-actions {
        width: 100%;
        flex-direction: column;
    }

    .footer-cta-actions .btn {
        width: 100%;
    }
}

/* ==========================================
   SHOP + WARRANTY — 2026 REDESIGN
   ========================================== */
.phone-ltr {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.topbar-whatsapp {
    direction: ltr;
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
}

body .shop-category-hero {
    position: relative;
    padding: 172px 0 88px;
    background:
        radial-gradient(circle at 12% 22%, rgba(84,216,255,.24), transparent 28%),
        radial-gradient(circle at 88% 78%, rgba(107,188,73,.14), transparent 24%),
        linear-gradient(125deg, #071a3f 0%, #15387f 48%, #006f9d 100%);
}
body .shop-category-hero::after {
    content: "";
    position: absolute;
    width: 440px;
    height: 440px;
    inset-inline-end: 6%;
    top: 52%;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    transform: translateY(-50%);
    box-shadow:
        0 0 0 55px rgba(255,255,255,.035),
        0 0 0 110px rgba(255,255,255,.02);
    pointer-events: none;
}
body .shop-category-hero .page-category-inner {
    grid-template-columns: 1.08fr .92fr;
    min-height: 430px;
}
body .shop-category-hero .page-category-copy {
    position: relative;
    z-index: 3;
}
body .shop-category-hero .page-category-copy h1 {
    max-width: 720px;
    font-size: clamp(2.7rem,5.2vw,4.8rem);
}
body .shop-category-hero .page-category-label {
    border-color: rgba(84,216,255,.35);
    background: rgba(0,168,218,.14);
    color: #aeeeff;
}
body .shop-category-hero .page-category-points span {
    padding: 9px 13px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 100px;
    background: rgba(255,255,255,.07);
}
body .shop-category-hero .page-category-media {
    z-index: 2;
}
body .shop-category-hero .page-category-media img {
    max-height: 430px;
    transform: rotate(-2deg) scale(1.04);
    filter: drop-shadow(0 38px 44px rgba(0,0,0,.42));
}
body .shop-category-hero .floating-service-badge {
    left: auto;
    inset-inline-start: 2%;
    bottom: 2%;
    border-color: rgba(84,216,255,.38);
    background: rgba(4,20,48,.58);
    box-shadow: 0 18px 42px rgba(0,0,0,.25);
}

body .shop-section {
    padding: 94px 0 110px;
    background:
        radial-gradient(circle at 90% 5%, rgba(0,168,218,.1), transparent 25%),
        #f6f8fc;
}
body .shop-section > .container > .section-header {
    margin-bottom: 42px;
}
body .shop-layout {
    grid-template-columns: 300px minmax(0,1fr);
    gap: 28px;
}
body .shop-sidebar {
    top: 108px;
    padding: 22px;
    overflow: hidden;
    border: 1px solid #e1e7f0;
    border-radius: 22px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 18px 50px rgba(16,40,90,.09);
    backdrop-filter: blur(14px);
}
body .shop-sidebar::before {
    content: "";
    display: block;
    height: 5px;
    margin: -22px -22px 20px;
    background: linear-gradient(90deg,#15387f,#00a8da,#6bbc49);
}
body .sidebar-header {
    padding-bottom: 17px;
    border-bottom: 1px solid #e6ebf2;
}
body .sidebar-header h3 {
    color: #101828;
    font-size: 1.08rem;
}
body .btn-reset-filters {
    padding: 6px 8px;
    border-radius: 8px;
    text-decoration: none;
}
body .btn-reset-filters:hover {
    background: #eaf8fc;
}
body .filter-group {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #edf0f5;
}
body .filter-group:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}
body .filter-group > label {
    margin-bottom: 10px;
    color: #344054;
    font-size: .8rem;
    letter-spacing: .015em;
}
body .search-input-wrapper input {
    height: 46px;
    padding: 10px 40px 10px 13px;
    border: 1px solid #dfe5ee;
    border-radius: 13px;
    background: #f8fafc;
}
html.lang-en body .search-input-wrapper input {
    padding: 10px 13px 10px 40px;
}
body .search-input-wrapper input:focus {
    border-color: #00a8da;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(0,168,218,.1);
}
body .filter-options {
    gap: 6px;
}
body .checkbox-container {
    min-height: 34px;
    padding: 7px 34px 7px 9px;
    border-radius: 9px;
    color: #5d6779;
}
html.lang-en body .checkbox-container {
    padding: 7px 9px 7px 34px;
}
body .checkbox-container:hover {
    color: #15387f;
    background: #f2f8fc;
}
body .checkmark {
    right: 8px;
    border: 1px solid #cfd7e4;
    background: #fff;
}
html.lang-en body .checkmark {
    right: auto;
    left: 8px;
}
body .checkbox-container input {
    right: 8px;
}
html.lang-en body .checkbox-container input {
    right: auto;
    left: 8px;
}
body .checkbox-container input:checked ~ .checkmark {
    border-color: #00a8da;
    background: #00a8da;
    box-shadow: 0 0 0 3px rgba(0,168,218,.1);
}
body .slider {
    height: 5px;
    background: #dde5ef;
}
body .shop-content {
    min-width: 0;
}
body .shop-grid-meta {
    min-height: 64px;
    margin-bottom: 20px;
    padding: 12px 16px;
    border: 1px solid #e1e7f0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(16,40,90,.055);
}
body .shop-grid-meta p {
    color: #667085;
}
body .shop-grid-meta select {
    min-height: 40px;
    border: 1px solid #dfe5ee;
    border-radius: 11px;
    background: #f8fafc;
}
body .shop-products-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 18px;
}
body .shop-product-card {
    border: 1px solid #e1e7ef;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(16,40,90,.07);
    transform-style: flat;
}
body .shop-product-card:hover {
    transform: translateY(-7px);
    border-color: rgba(0,168,218,.5);
    box-shadow: 0 24px 50px rgba(16,40,90,.14);
}
body .shop-product-card::before {
    background: linear-gradient(135deg,rgba(0,168,218,.05),transparent 45%);
}
body .shop-prod-img-box {
    height: 220px;
    margin: 9px;
    border-radius: 14px;
    background: linear-gradient(145deg,#eef3fa,#f9fbfd);
}
body .shop-prod-img {
    object-fit: contain;
    padding: 12px;
}
body .shop-prod-condition-tag {
    top: 11px;
    right: 11px;
    padding: 6px 10px;
    border-radius: 100px;
    box-shadow: 0 6px 15px rgba(0,0,0,.08);
}
html.lang-en body .shop-prod-condition-tag {
    right: auto;
    left: 11px;
}
body .shop-prod-info {
    padding: 12px 18px 18px;
    gap: 10px;
}
body .shop-prod-brand {
    width: fit-content;
    padding: 4px 8px;
    border-radius: 7px;
    color: #15387f;
    background: #edf3ff;
    font-size: .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}
body .shop-prod-title {
    min-height: 48px;
    color: #101828;
    font-size: 1.02rem;
    line-height: 1.45;
}
body .shop-prod-specs {
    gap: 7px;
    padding: 11px 0;
    border-top: 1px solid #edf0f5;
    color: #667085;
}
body .shop-prod-specs span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
body .shop-prod-price-row {
    padding-top: 13px;
    border-top: 1px solid #edf0f5;
}
body .shop-prod-price {
    color: #15387f;
    font-size: 1.22rem;
}
body .btn-buy-product {
    min-width: 72px;
    border-radius: 10px;
    color: #fff !important;
    background: linear-gradient(135deg,#15387f,#00a8da);
}
body .shop-product-card.gaming-pc-card:hover {
    animation: none;
}

body .warranty-category-hero {
    position: relative;
    padding: 172px 0 92px;
    background:
        radial-gradient(circle at 10% 20%,rgba(107,188,73,.22),transparent 27%),
        radial-gradient(circle at 88% 15%,rgba(84,216,255,.16),transparent 24%),
        linear-gradient(125deg,#061c35 0%,#123b55 48%,#266c45 100%);
}
body .warranty-category-hero .page-category-inner {
    min-height: 430px;
}
body .warranty-category-hero .page-category-label {
    border-color: rgba(144,235,111,.32);
    color: #c7f5b5;
    background: rgba(107,188,73,.13);
}
body .warranty-category-hero .page-category-copy h1 {
    font-size: clamp(2.8rem,5.1vw,4.7rem);
}
body .warranty-category-hero .page-category-points span {
    padding: 9px 13px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 100px;
    background: rgba(255,255,255,.06);
}
body .warranty-hero-symbol {
    position: relative;
    min-height: 410px;
    padding: 30px;
    gap: 15px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.17);
    border-radius: 34px;
    background:
        linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
    box-shadow: 0 30px 70px rgba(0,0,0,.2);
}
body .warranty-hero-symbol::before {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    top: -120px;
    right: -90px;
    border-radius: 50%;
    background: rgba(107,188,73,.17);
    filter: blur(4px);
}
body .warranty-shield-core {
    position: relative;
    display: grid;
    place-items: center;
    width: 128px;
    height: 128px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 34px;
    background: linear-gradient(145deg,#6bbc49,#31935b);
    box-shadow: 0 20px 45px rgba(13,58,43,.35),0 0 0 12px rgba(255,255,255,.055);
    transform: rotate(-4deg);
}
body .warranty-shield-core::after {
    content: "\f00c";
    position: absolute;
    right: 18px;
    bottom: 17px;
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border: 4px solid #3a9b55;
    border-radius: 50%;
    color: #31935b;
    background: #fff;
    font: 900 13px/1 "Font Awesome 6 Free";
    box-shadow: 0 6px 14px rgba(0,0,0,.18);
}
body .warranty-shield-core i {
    font-size: 4.8rem;
    color: #fff;
    filter: none;
    transform: rotate(4deg);
}
body .warranty-hero-copy {
    position: relative;
    text-align: center;
}
body .warranty-hero-copy strong {
    display: block;
    color: #fff;
    font-size: 1.25rem;
}
body .warranty-hero-copy span {
    display: block;
    margin-top: 6px;
    color: rgba(255,255,255,.68);
    font-size: .82rem;
}
body .warranty-hero-stats {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    width: 100%;
    gap: 8px;
    margin-top: 8px;
}
body .warranty-hero-stats > div {
    min-height: 76px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 9px 5px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 14px;
    background: rgba(255,255,255,.065);
    text-align: center;
}
body .warranty-hero-stats strong,
body .warranty-hero-stats i {
    color: #9be978;
    font-size: 1.25rem;
}
body .warranty-hero-stats span {
    color: rgba(255,255,255,.73);
    font-size: .67rem;
    line-height: 1.35;
}

@media (max-width: 1100px) {
    body .shop-products-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 768px) {
    body .shop-category-hero,
    body .warranty-category-hero { padding: 125px 0 65px; }
    body .shop-category-hero::after { width: 280px; height: 280px; }
    body .shop-category-hero .page-category-inner,
    body .warranty-category-hero .page-category-inner { min-height: 0; gap: 32px; }
    body .shop-category-hero .page-category-copy h1,
    body .warranty-category-hero .page-category-copy h1 { font-size: 2.45rem; }
    body .shop-category-hero .page-category-media { min-height: 290px; }
    body .shop-category-hero .page-category-media img { max-height: 285px; }
    body .shop-section { padding: 70px 0 90px; }
    body .shop-layout { grid-template-columns: 1fr; }
    body .shop-sidebar { position: static; }
    body .shop-products-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    body .warranty-hero-symbol { min-height: 360px; }
}
@media (max-width: 540px) {
    body .shop-products-grid { grid-template-columns: 1fr; }
    body .shop-grid-meta { align-items: stretch; flex-direction: column; gap: 10px; }
    body .shop-prod-img-box { height: 230px; }
    body .warranty-hero-stats { grid-template-columns: 1fr; }
    body .warranty-hero-stats > div { min-height: 62px; }
}

/* ==========================================
   MOBILE COMPLETION + SAUDI TOUCH
   ========================================== */
.mobile-saudi-note,
.mobile-saudi-signature {
    display: none;
}

.shop-coming-soon {
    position: relative;
    min-height: 430px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 50px 28px;
    border: 1px solid rgba(0,168,218,.18);
    border-radius: 26px;
    background:
        radial-gradient(circle at 50% 0%,rgba(0,168,218,.14),transparent 38%),
        linear-gradient(145deg,#fff,#f5f9fd);
    box-shadow: 0 22px 60px rgba(16,40,90,.1);
    text-align: center;
}
.shop-coming-soon::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .28;
    background-image:
        linear-gradient(rgba(21,56,127,.07) 1px,transparent 1px),
        linear-gradient(90deg,rgba(21,56,127,.07) 1px,transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(to bottom,#000,transparent 88%);
    pointer-events: none;
}
.coming-soon-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 90px;
    height: 90px;
    margin-bottom: 22px;
    border-radius: 27px;
    color: #fff;
    background: linear-gradient(145deg,#15387f,#00a8da);
    box-shadow: 0 18px 38px rgba(0,168,218,.24),0 0 0 10px rgba(0,168,218,.07);
    font-size: 2.2rem;
}
.coming-soon-kicker {
    position: relative;
    padding: 7px 12px;
    border: 1px solid rgba(0,168,218,.2);
    border-radius: 100px;
    color: #0078a8;
    background: #edfaff;
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .14em;
}
.shop-coming-soon h3 {
    position: relative;
    max-width: 600px;
    margin: 16px 0 11px;
    color: #101828;
    font-size: clamp(1.8rem,4vw,2.7rem);
    line-height: 1.18;
}
.shop-coming-soon p {
    position: relative;
    max-width: 610px;
    margin-bottom: 23px;
    color: #667085;
    line-height: 1.8;
}
.shop-coming-soon .btn {
    position: relative;
    min-height: 50px;
    border-radius: 14px;
}
.shop-catalog-ui {
    display: none !important;
}

@media (max-width: 768px) {
    :root {
        --saudi-green: #006c35;
        --saudi-green-light: #0a8f4b;
        --mobile-gutter: 18px;
    }

    html, body {
        max-width: 100%;
        overflow-x: clip;
    }
    body {
        padding-bottom: 82px;
    }
    body .container {
        width: 100%;
        padding-inline: var(--mobile-gutter);
    }

    /* Compact mobile header */
    body .header-topbar {
        display: none;
    }
    body .main-header {
        background: rgba(255,255,255,.96);
        border-bottom: 1px solid rgba(0,108,53,.11);
        box-shadow: 0 8px 28px rgba(16,40,90,.08);
    }
    body .header-container,
    body .main-header.scrolled .header-container {
        height: 70px !important;
        padding-inline: 14px;
    }
    body .logo img,
    body .main-header.scrolled .logo img {
        height: 58px !important;
        max-width: 112px;
    }
    body .header-actions {
        gap: 7px;
    }
    body .header-actions .lang-toggle-btn {
        min-width: 42px;
        width: 42px;
        height: 42px;
        padding: 0;
        justify-content: center;
        border-radius: 13px;
    }
    body .header-actions .lang-toggle-btn .lang-text {
        display: none;
    }
    body .mobile-menu-toggle {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        margin: 0;
        border: 0;
        border-radius: 13px;
        color: #fff;
        background: linear-gradient(145deg,var(--saudi-green),var(--saudi-green-light));
        box-shadow: 0 8px 20px rgba(0,108,53,.22);
    }

    /* Drawer */
    body .mobile-drawer {
        width: min(88vw,350px);
        padding: 18px;
        background:
            linear-gradient(135deg,rgba(0,108,53,.05),transparent 36%),
            #fff;
    }
    body .drawer-header {
        padding-bottom: 14px;
        border-bottom: 1px solid #e7ecf1;
    }
    body .drawer-header .lang-toggle-btn {
        height: 38px;
        border-radius: 11px;
    }
    body .drawer-links {
        gap: 7px;
        padding-top: 15px;
    }
    body .drawer-link {
        padding: 13px 15px;
        border-radius: 12px;
        font-weight: 750;
    }
    body .drawer-link.active {
        color: var(--saudi-green);
        background: rgba(0,108,53,.075);
    }
    .mobile-saudi-signature {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
        padding: 12px;
        border: 1px solid rgba(0,108,53,.14);
        border-radius: 13px;
        color: var(--saudi-green);
        background: linear-gradient(135deg,rgba(0,108,53,.09),rgba(255,255,255,.8));
        font-size: .78rem;
        font-weight: 800;
    }
    .mobile-saudi-signature bdi {
        margin-inline-start: auto;
    }

    /* Home hero: mobile-first composition */
    body .hero-section {
        position: relative;
        min-height: auto;
        padding: 104px 0 50px;
        background:
            linear-gradient(180deg,rgba(0,108,53,.055),transparent 24%),
            radial-gradient(circle at 85% 12%,rgba(0,168,218,.13),transparent 28%),
            #fff;
    }
    body .hero-section::after {
        content: "";
        position: absolute;
        inset: auto 0 0;
        height: 14px;
        opacity: .22;
        background:
            linear-gradient(135deg,var(--saudi-green) 25%,transparent 25%) -8px 0/16px 16px,
            linear-gradient(225deg,var(--saudi-green) 25%,transparent 25%) -8px 0/16px 16px,
            linear-gradient(315deg,var(--saudi-green) 25%,transparent 25%) 0 0/16px 16px,
            linear-gradient(45deg,var(--saudi-green) 25%,transparent 25%) 0 0/16px 16px;
    }
    body .hero-container {
        display: flex;
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }
    body .hero-content {
        align-items: center;
    }
    body .badge-tech {
        padding: 8px 12px;
        font-size: .72rem;
    }
    .mobile-saudi-note {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin-top: 10px;
        padding: 7px 11px;
        border: 1px solid rgba(0,108,53,.16);
        border-radius: 100px;
        color: var(--saudi-green);
        background: rgba(0,108,53,.055);
        font-size: .72rem;
        font-weight: 800;
    }
    body .hero-title {
        margin: 16px 0 13px;
        font-size: clamp(2rem,9.2vw,2.7rem);
        line-height: 1.16;
        letter-spacing: -.045em;
    }
    body .hero-subtitle {
        max-width: 34rem;
        font-size: .93rem;
        line-height: 1.85;
    }
    body .hero-ctas {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        gap: 10px;
        margin-top: 20px;
    }
    body .hero-ctas .btn {
        width: 100%;
        min-height: 52px;
        justify-content: center;
        border-radius: 14px;
    }
    body .hero-ctas .btn-primary {
        background: linear-gradient(135deg,var(--saudi-green),#00a86b);
        box-shadow: 0 12px 28px rgba(0,108,53,.2);
    }
    body .hero-features {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        gap: 8px;
        margin-top: 17px;
    }
    body .hero-feature-item {
        justify-content: flex-start;
        min-height: 42px;
        padding: 8px 12px;
        border: 1px solid #e5eaf1;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 6px 18px rgba(16,40,90,.045);
        text-align: start;
    }
    body .hero-visual {
        order: 2;
        width: 100%;
    }
    body .image-wrapper-glowing {
        max-width: 330px;
        margin: 0 auto;
        border-width: 7px;
        border-radius: 24px;
    }
    body .hero-img {
        max-height: 280px;
        object-fit: contain;
    }

    /* Generic mobile section rhythm */
    body section {
        padding-block: 64px;
    }
    body .section-header {
        margin-bottom: 30px !important;
    }
    body .section-title {
        font-size: clamp(1.75rem,8vw,2.35rem);
        line-height: 1.2;
    }
    body .section-desc {
        font-size: .9rem;
        line-height: 1.75;
    }

    /* Home service cards */
    body .category-gateway-section {
        padding: 64px 0;
    }
    body .category-intro {
        display: block;
        margin-bottom: 24px;
        text-align: center;
    }
    body .category-intro p {
        margin-top: 12px;
    }
    body .experience-grid,
    body .experience-side {
        display: grid;
        grid-template-columns: 1fr;
        gap: 13px;
    }
    body .experience-repair,
    body .experience-shop,
    body .experience-care {
        min-height: 410px;
        border-radius: 22px;
    }
    body .experience-shop,
    body .experience-care {
        min-height: 300px;
    }
    body .experience-content {
        inset-inline: 20px;
        bottom: 22px;
    }
    body .experience-content h3 {
        font-size: 2rem;
    }
    body .experience-price {
        top: 72px;
        bottom: auto;
        inset-inline-start: 18px;
    }

    /* Brands */
    body .brands-showcase-head {
        display: block;
        text-align: center;
    }
    body .brands-showcase-head p {
        margin-top: 10px;
    }
    body .brand-wordmark-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 9px;
    }
    body .brand-wordmark {
        min-height: 76px;
        padding: 10px;
    }
    body .brands-showcase-foot {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    /* Inner page heroes */
    body .page-category-hero,
    body .shop-category-hero,
    body .warranty-category-hero {
        padding: 104px 0 58px;
    }
    body .page-category-inner,
    body .shop-category-hero .page-category-inner,
    body .warranty-category-hero .page-category-inner {
        display: flex;
        flex-direction: column;
        min-height: 0;
        gap: 30px;
        text-align: center;
    }
    body .page-category-copy h1,
    body .shop-category-hero .page-category-copy h1,
    body .warranty-category-hero .page-category-copy h1 {
        margin: 15px 0;
        font-size: clamp(2.05rem,10vw,2.85rem);
        line-height: 1.12;
    }
    body .page-category-copy > p {
        font-size: .94rem;
        line-height: 1.75;
    }
    body .page-category-points {
        justify-content: center;
        gap: 8px;
        margin-top: 20px;
    }
    body .page-category-points span,
    body .shop-category-hero .page-category-points span,
    body .warranty-category-hero .page-category-points span {
        padding: 8px 10px;
        font-size: .72rem;
    }
    body .page-category-media {
        min-height: 260px;
    }
    body .page-category-media img,
    body .shop-category-hero .page-category-media img {
        max-height: 260px;
        transform: none;
    }
    body .floating-service-badge {
        min-width: 105px;
        padding: 12px;
    }
    body .warranty-hero-symbol {
        width: 100%;
        min-height: 330px;
        padding: 23px 16px;
        border-radius: 25px;
    }
    body .warranty-shield-core {
        width: 104px;
        height: 104px;
    }
    body .warranty-shield-core i {
        font-size: 3.7rem;
    }
    body .warranty-hero-stats {
        grid-template-columns: repeat(3,1fr);
    }

    /* Repair form */
    body .repair-section {
        padding: 58px 0 90px;
    }
    body .step-form-container {
        margin-inline: -4px;
    }
    body .form-stepper {
        scrollbar-width: none;
    }
    body .form-stepper::-webkit-scrollbar {
        display: none;
    }
    body .step-title-inner {
        align-items: flex-start;
        font-size: 1rem;
        line-height: 1.45;
    }
    body .brand-selection-grid {
        gap: 9px;
    }
    body .brand-card {
        min-height: 105px;
        padding: 13px 8px;
    }
    body #freeLeafletMap {
        height: 230px;
    }
    body .checkout-grid {
        grid-template-columns: 1fr;
    }

    /* Shop */
    body .shop-section {
        padding: 64px 0 95px;
    }
    body .shop-layout {
        display: block;
    }
    body .shop-sidebar {
        display: none;
    }
    body .shop-coming-soon {
        min-height: 400px;
        padding: 42px 20px;
        border-radius: 21px;
    }
    body .coming-soon-icon {
        width: 78px;
        height: 78px;
        border-radius: 23px;
        font-size: 1.9rem;
    }
    body .shop-coming-soon h3 {
        font-size: 1.75rem;
    }
    body .shop-sidebar {
        border-radius: 18px;
    }
    body .shop-products-grid {
        grid-template-columns: 1fr;
    }
    body .shop-prod-img-box {
        height: 230px;
    }

    /* Warranty accordions */
    body .warranty-section {
        padding: 64px 0 95px;
    }
    body .accordion-item {
        border-radius: 15px;
    }
    body .accordion-header {
        gap: 12px;
        padding: 17px 15px;
        font-size: .88rem;
        line-height: 1.5;
    }
    body .accordion-content {
        padding-inline: 15px;
        font-size: .86rem;
    }

    /* Footer and sticky actions */
    body .footer-cta-panel {
        display: block;
        padding: 28px 20px;
        border-radius: 22px;
        text-align: center;
    }
    body .footer-cta-panel h2 {
        font-size: 1.65rem;
    }
    body .footer-cta-actions {
        display: grid;
        grid-template-columns: 1fr;
        margin-top: 18px;
    }
    body .footer-grid {
        text-align: center;
    }
    body .unified-number {
        justify-content: center;
    }
    body .mobile-sticky-bar {
        left: 10px;
        right: 10px;
        bottom: 10px;
        z-index: 1000;
        gap: 8px;
        padding: 7px;
        border: 1px solid rgba(0,108,53,.14);
        border-radius: 17px;
        background: rgba(255,255,255,.94);
        box-shadow: 0 14px 35px rgba(5,32,22,.18);
        backdrop-filter: blur(15px);
    }
    body .sticky-action-btn {
        min-height: 50px;
        border-radius: 12px;
        font-size: .76rem;
    }
    body .sticky-action-btn.btn-repair {
        background: linear-gradient(135deg,var(--saudi-green),#078b4a);
    }
    body .sticky-action-btn.btn-whatsapp {
        background: linear-gradient(135deg,#128c7e,#25d366);
    }
}

@media (max-width: 390px) {
    body .hero-title {
        font-size: 2rem;
    }
    body .page-category-copy h1,
    body .shop-category-hero .page-category-copy h1,
    body .warranty-category-hero .page-category-copy h1 {
        font-size: 2rem;
    }
    body .warranty-hero-stats {
        grid-template-columns: 1fr;
    }
    body .warranty-hero-stats > div {
        min-height: 56px;
    }
    body .brand-wordmark-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .header-actions {
        gap: 8px;
    }

    .lang-toggle-btn {
        padding: 8px 10px;
    }

    .lang-toggle-btn .lang-text {
        display: none;
    }

    .hero-section {
        padding-top: 106px;
    }

    .hero-ctas .btn {
        width: 100%;
    }

    .category-gateway-section {
        padding: 72px 0 88px;
    }

    .category-gateway-card {
        min-height: 335px;
        padding: 25px;
    }

    .brand-pill {
        min-width: 160px;
    }

    .page-category-points {
        gap: 10px;
    }
}

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-family);
    line-height: 1.6;
    overflow-x: hidden;
    direction: rtl;
    text-align: right;
}

/* Scrollbar Style */
::-webkit-scrollbar {
    width: 10px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}
::-webkit-scrollbar-thumb {
    background: var(--accent-cyan);
    border-radius: var(--radius-sm);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--accent-blue);
}

/* Layout Container */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}
.container-fluid {
    width: 100%;
    padding: 0 32px;
}

/* Typography Helpers */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}
a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-fast);
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}
.text-gradient {
    background: linear-gradient(135deg, #FFF 30%, var(--accent-cyan) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}
.text-cyan { color: var(--accent-cyan); }
.text-green { color: var(--color-success); }
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.mt-6 { margin-top: 24px; }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.w-full { width: 100%; }
.font-semibold { font-weight: 600; }

/* SPA View Router Switcher */
.page-view {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.page-view.active {
    display: block;
    opacity: 1;
}

/* Buttons (Heavy Borders) */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-family);
    font-weight: 700;
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-medium);
    border: var(--border-width-heavy) solid transparent;
    font-size: 0.95rem;
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
    color: var(--text-dark);
    box-shadow: 0 4px 15px var(--accent-glow);
    border: none;
    padding: 14px 26px;
}
.btn-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px var(--accent-glow), 0 0 15px rgba(0, 96, 169, 0.2);
}

.btn-secondary {
    background: rgba(0, 0, 0, 0.02);
    color: var(--text-primary);
    border: var(--border-width-heavy) solid rgba(0, 0, 0, 0.08);
}
.btn-secondary:hover {
    background: rgba(0, 96, 169, 0.04);
    border-color: var(--accent-cyan);
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    color: var(--accent-cyan);
    border: var(--border-width-heavy) solid var(--border-color);
}
.btn-outline:hover {
    background: rgba(0, 96, 169, 0.04);
    border-color: var(--accent-cyan);
}

.btn-block { display: flex; width: 100%; }
.btn-sm { padding: 8px 16px; font-size: 0.85rem; }
.btn-lg { padding: 16px 32px; font-size: 1.05rem; }

/* Header & Navigation */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(0, 96, 169, 0.08);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.main-header.scrolled {
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid rgba(0, 96, 169, 0.15);
    box-shadow: 0 10px 30px rgba(0, 96, 169, 0.08);
}
.header-container {
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.main-header.scrolled .header-container {
    height: 76px;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: 12px;
}
.logo img {
    height: 88px;
    width: auto;
    object-fit: contain;
    transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.main-header.scrolled .logo img {
    height: 68px;
}
.logo-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--text-dark);
}
.logo-text {
    display: flex;
    flex-direction: column;
}
.brand-name {
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--text-primary);
}
.brand-sub {
    font-size: 0.7rem;
    color: var(--accent-cyan);
    font-weight: 600;
    letter-spacing: 2px;
    margin-top: -3px;
}

/* Nav Menu */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 6px;
}
.nav-link {
    position: relative;
    padding: 8px 16px;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-muted);
    transition: color 0.3s ease;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 16px;
    right: 16px;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-cyan));
    border-radius: 2px;
    transform: scaleX(0);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-link:hover, .nav-link.active {
    color: var(--accent-cyan);
    background: transparent;
}
.nav-link:hover::after, .nav-link.active::after {
    transform: scaleX(1);
}
.nav-link.admin-nav-link {
    border: 1px dashed rgba(0, 240, 255, 0.3);
    color: #818CF8;
}
.nav-link.admin-nav-link::after {
    display: none;
}
.nav-link.admin-nav-link:hover, .nav-link.admin-nav-link.active {
    background: rgba(129, 140, 248, 0.08);
    color: #A5B4FC;
    border-color: #818CF8;
}
.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}
.mobile-menu-toggle {
    display: none;
    background: rgba(0, 96, 169, 0.06);
    border: 1px solid rgba(0, 96, 169, 0.15);
    color: var(--accent-cyan);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.mobile-menu-toggle:hover {
    background: rgba(0, 96, 169, 0.12);
    transform: scale(1.05);
}

/* Mobile Drawer (Techy Panel) */
.mobile-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    right: -100%;
    width: 85%;
    max-width: 300px;
    background: var(--bg-secondary);
    border-left: var(--border-width-heavy) solid var(--border-color);
    z-index: 1100;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-drawer.open { right: 0; }
.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.drawer-close {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 1.4rem;
    cursor: pointer;
}
.drawer-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.drawer-link {
    font-size: 1.05rem;
    font-weight: 700;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    border-right: 3px solid transparent;
}
.drawer-link:hover, .drawer-link.active {
    color: var(--accent-cyan);
    background: rgba(0, 240, 255, 0.05);
    border-right-color: var(--accent-cyan);
}
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 1099;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast);
}
.drawer-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* SECTION GLOBAL ELEMENTS */
section {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}
.section-header {
    max-width: 640px;
    margin: 0 auto 56px;
}
.section-badge {
    color: var(--accent-cyan);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 14px;
    background: rgba(0, 96, 169, 0.05);
    padding: 6px 16px;
    border-radius: 100px;
    border: 1px solid rgba(0, 96, 169, 0.12);
    position: relative;
    overflow: hidden;
}
.section-badge::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 96, 169, 0.08), transparent);
    animation: badge-shimmer 3s ease-in-out infinite;
}
@keyframes badge-shimmer {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: 100%; }
}
.section-title {
    font-size: clamp(1.8rem, 3.2vw, 2.4rem);
    font-weight: 900;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}
.section-desc {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.6;
}

/* ==========================================
   VIEW: HOME PAGE SPECIFIC STYLING
   ========================================== */
.hero-section {
    padding: 160px 0 80px;
    overflow: hidden;
    background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 96, 169, 0.08), transparent);
}
.hero-glow-1 {
    position: absolute;
    top: -10%;
    right: -10%;
    width: 45%;
    height: 45%;
    background: radial-gradient(circle, var(--accent-blue-glow) 0%, transparent 70%);
    pointer-events: none;
    animation: float-glow 8s ease-in-out infinite alternate;
}
.hero-glow-2 {
    position: absolute;
    bottom: -10%;
    left: -10%;
    width: 45%;
    height: 45%;
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
    pointer-events: none;
    animation: float-glow 10s ease-in-out infinite alternate-reverse;
}
@keyframes float-glow {
    0% { transform: translate(0, 0) scale(1); opacity: 0.6; }
    50% { transform: translate(20px, -15px) scale(1.1); opacity: 0.9; }
    100% { transform: translate(-10px, 10px) scale(1.05); opacity: 0.7; }
}
.hero-container {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    align-items: center;
}
.hero-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.badge-tech {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 96, 169, 0.06);
    border: 1px solid var(--border-color);
    color: var(--accent-cyan);
    padding: 6px 14px;
    border-radius: 100px;
    width: fit-content;
    font-size: 0.8rem;
    font-weight: 700;
    animation: badge-float 3s ease-in-out infinite;
}
@keyframes badge-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
.hero-title {
    font-size: clamp(2rem, 4.2vw, 3.2rem);
    line-height: 1.25;
    font-weight: 900;
}
.text-gradient {
    background: linear-gradient(135deg, var(--accent-cyan), #4da6d9, var(--accent-blue), var(--accent-cyan));
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shimmer 6s ease infinite;
}
@keyframes gradient-shimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.hero-subtitle {
    font-size: 1.1rem;
    color: var(--text-muted);
}
.hero-ctas {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.hero-features {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    flex-wrap: wrap;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    padding-top: 20px;
}
.hero-feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0;
    animation: feature-appear 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-feature-item:nth-child(1) { animation-delay: 0.3s; }
.hero-feature-item:nth-child(2) { animation-delay: 0.5s; }
.hero-feature-item:nth-child(3) { animation-delay: 0.7s; }
@keyframes feature-appear {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}
.hero-visual {
    display: flex;
    justify-content: center;
    perspective: 1000px;
}
.image-wrapper-glowing {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4), 0 0 60px rgba(0, 96, 169, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease;
}
.image-wrapper-glowing::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: var(--radius-lg);
    padding: 2px;
    background: linear-gradient(135deg, rgba(0, 96, 169, 0.5), transparent 40%, transparent 60%, rgba(157, 34, 53, 0.5));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    animation: border-rotate 8s linear infinite;
}
@keyframes border-rotate {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}
.hero-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-visual:hover .image-wrapper-glowing {
    transform: rotateY(-3deg) rotateX(2deg) scale(1.02);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 80px rgba(0, 96, 169, 0.1);
}
.hero-visual:hover .hero-img {
    transform: scale(1.04);
}

/* Infinite Brand Marquee */
.brands-section {
    background-color: #f1f5f9; 
    padding: 40px 0;
    font-family: system-ui, -apple-system, sans-serif;
    direction: rtl; /* Pour le titre en arabe */
    overflow: hidden;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}

.brands-title {
    text-align: center;
    color: #4b5563; /* Gris foncé professionnel */
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 32px;
}

/* Le conteneur du défilement */
.marquee-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    direction: ltr; /* TRÈS IMPORTANT : Force le défilement fluide de gauche à droite */
}

/* La piste d'animation */
.marquee-track {
    display: inline-flex;
    gap: 16px; /* Espace entre chaque pilule */
    /* L'animation dure 30s, ajustez pour changer la vitesse */
    animation: scroll-left-new 30s linear infinite; 
}

/* Mise en pause de l'animation quand l'utilisateur survole avec sa souris */
.marquee-wrapper:hover .marquee-track {
    animation-play-state: paused;
}

/* Le design des "Pilules" (Cartes blanches arrondies) */
.brand-pill {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px; /* Coins arrondis doux */
    padding: 10px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Effet au survol */
.brand-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
}

/* Texte à l'intérieur de la pilule */
.brand-pill .brand-name {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

/* Les vrais logos SVG */
.brands-section .brand-logo {
    height: 20px;
    width: auto;
    object-fit: contain;
    /* Optionnel: Garde les logos gris jusqu'au survol */
    filter: grayscale(100%) opacity(80%);
    transition: filter 0.3s ease, opacity 0.3s ease;
}

/* Révèle les couleurs de la marque au survol */
.brand-pill:hover .brand-logo {
    filter: grayscale(0%) opacity(100%);
}

/* L'animation clé du défilement continu */
@keyframes scroll-left-new {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Se déplace de 50% car nous avons dupliqué les éléments (Groupe 1 + Groupe 2) */
        transform: translateX(-50%); 
    }
}

/* How It Works Steps */
.how-it-works-section {
    background: radial-gradient(ellipse 60% 40% at 50% 100%, rgba(0, 96, 169, 0.04), transparent);
}
.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    position: relative;
}
/* Connecting line between step cards */
.steps-grid::before {
    content: '';
    position: absolute;
    top: 55px;
    left: 16%;
    right: 16%;
    height: 2px;
    background: repeating-linear-gradient(
        90deg,
        var(--accent-cyan) 0,
        var(--accent-cyan) 8px,
        transparent 8px,
        transparent 16px
    );
    opacity: 0.2;
    z-index: 0;
}
.step-card {
    background: var(--bg-secondary);
    border: var(--border-width-heavy) solid rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-md);
    padding: 32px 24px;
    position: relative;
    transition: var(--transition-medium);
    overflow: hidden;
    z-index: 1;
}
.step-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue));
    background-size: 200% 100%;
    opacity: 0;
    transition: opacity 0.4s ease;
    animation: gradient-slide 3s ease infinite;
}
@keyframes gradient-slide {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.step-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 96, 169, 0.15);
    box-shadow: 0 20px 40px rgba(0, 96, 169, 0.06), 0 0 0 1px rgba(0, 96, 169, 0.05);
}
.step-card:hover::before { opacity: 1; }
.step-icon-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}
.step-icon-wrapper i {
    font-size: 1.8rem;
    color: var(--accent-cyan);
    background: rgba(0, 96, 169, 0.06);
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(0, 96, 169, 0.12);
    transition: all 0.4s ease;
    position: relative;
}
.step-card:hover .step-icon-wrapper i {
    background: rgba(0, 96, 169, 0.1);
    border-color: var(--accent-cyan);
    box-shadow: 0 0 20px rgba(0, 96, 169, 0.2);
    transform: scale(1.08);
}
.step-number {
    font-size: 3.5rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.015);
    transition: color 0.5s ease;
    line-height: 1;
}
.step-card:hover .step-number {
    color: rgba(0, 96, 169, 0.08);
}
.step-title {
    font-size: 1.25rem;
    margin-bottom: 10px;
}
.step-description {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Glassmorphic Form Card */
.glass-form-card {
    background: var(--bg-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: var(--border-width-heavy) solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 32px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}
.form-card-title {
    font-size: 1.3rem;
    margin-bottom: 4px;
}
.form-card-sub {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 24px;
}
.form-group {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.form-group label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}
.label-icon { color: var(--accent-cyan); }
.form-group input, 
.form-group select, 
.form-group textarea {
    background: #FFFFFF;
    border: var(--border-width-heavy) solid var(--border-heavy-muted);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: 0.95rem;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    width: 100%;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.01);
}
.form-group input:focus, 
.form-group select:focus, 
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 4px rgba(0, 96, 169, 0.08);
    background: #FFFFFF;
}
.form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230060A9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: left 14px center;
    background-size: 14px;
    padding-left: 36px;
}
.phone-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.phone-prefix {
    position: absolute;
    left: 14px;
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.9rem;
    direction: ltr;
}
.phone-input-wrapper input {
    padding-left: 55px;
    text-align: left;
    direction: ltr;
}
.error-msg {
    color: var(--color-error);
    font-size: 0.75rem;
    font-weight: 600;
    display: none;
    margin-top: 2px;
}
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
    border-color: var(--color-error);
}
.form-group.has-error .error-msg {
    display: block;
}

/* Submit state and loaders */
.btn-submit .btn-loader { display: none; }
.btn-submit.loading { pointer-events: none; }
.btn-submit.loading .btn-text { display: none; }
.btn-submit.loading .btn-loader {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Form Success State */
.form-success-state {
    position: absolute;
    inset: 0;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    z-index: 10;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
}
.form-success-state.active {
    display: flex;
    animation: fadeIn var(--transition-fast) forwards;
}
.success-icon-wrapper {
    width: 64px;
    height: 64px;
    background: rgba(16, 185, 129, 0.1);
    border: var(--border-width-heavy) solid var(--color-success);
    color: var(--color-success);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    margin-bottom: 16px;
}
.success-title {
    font-size: 1.3rem;
    margin-bottom: 8px;
}
.success-message {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}
.flex-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}


/* ==========================================
   VIEW: DEDICATED REPAIR SERVICE PAGE (صفحة الصيانة)
   ========================================== */
.repair-section {
    padding: 120px 0 80px;
}

.repair-page-grid {
    display: flex;
    justify-content: center;
    width: 100%;
}
.form-wrapper-column {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
}

/* Multi-Step Stepper */
.form-stepper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 96, 169, 0.08);
}
.form-stepper::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 10%;
    right: 10%;
    height: 3px;
    background: rgba(0, 96, 169, 0.06);
    z-index: 0;
}
.stepper-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 1;
    position: relative;
}
.stepper-node .node-num {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-primary);
    border: var(--border-width-heavy) solid var(--border-heavy-muted);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.95rem;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.stepper-node .node-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    transition: all 0.3s ease;
}
.stepper-node.active .node-num {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    background: rgba(0, 96, 169, 0.04);
    box-shadow: 0 0 15px rgba(0, 96, 169, 0.2);
    transform: scale(1.1);
}
.stepper-node.active .node-label {
    color: var(--accent-cyan);
    font-weight: 800;
}
.stepper-node.completed .node-num {
    background: var(--color-success);
    border-color: var(--color-success);
    color: #FFFFFF;
}
.stepper-node.completed .node-label {
    color: var(--color-success);
}

/* Steps content switches */
.diagnostic-step {
    display: none;
}
.diagnostic-step.active {
    display: block;
    animation: fadeIn var(--transition-fast) forwards;
}
.step-title-inner {
    font-size: 1.1rem;
    font-weight: 700;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
    padding-bottom: 12px;
}

/* File Upload drag drop styling */
.drag-drop-zone {
    border: var(--border-width-heavy) dashed var(--accent-cyan);
    border-radius: var(--radius-md);
    padding: 36px 20px;
    text-align: center;
    cursor: pointer;
    background: rgba(0, 96, 169, 0.02);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.drag-drop-zone:hover, .drag-drop-zone.dragover {
    border-color: var(--accent-blue);
    background: rgba(0, 96, 169, 0.05);
    transform: scale(1.01);
}
.cloud-icon {
    font-size: 2.5rem;
    color: var(--accent-cyan);
}
.drag-text {
    font-size: 0.95rem;
    font-weight: 750;
    color: var(--text-primary);
}
.sub-drag-text {
    font-size: 0.8rem;
    color: var(--text-muted);
}
.hidden-file-input {
    display: none;
}
.preview-files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 12px;
    margin-top: 14px;
}
.preview-file-card {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: var(--border-width-heavy) solid rgba(255, 255, 255, 0.1);
}
.preview-file-card img, .preview-file-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.btn-remove-file {
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--color-error);
    color: #FFF;
    border: none;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    cursor: pointer;
}

/* Free Leaflet Map Container styling */
#freeLeafletMap {
    height: 320px;
    width: 100%;
    border-radius: var(--radius-md);
    border: 2px solid var(--border-color);
    box-shadow: 0 4px 15px rgba(0, 96, 169, 0.05);
    z-index: 1;
}

/* Preferred Pickup Time Slots */
.time-slots-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 10px;
}
.time-slot-card {
    background: var(--bg-card);
    border: var(--border-width-heavy) solid var(--border-heavy-muted);
    border-radius: var(--radius-md);
    padding: 16px 14px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.01);
}
.time-slot-card span {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}
.time-slot-card .slot-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.time-slot-card:hover {
    border-color: var(--accent-cyan);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 96, 169, 0.06);
}
.time-slot-card.active {
    border-color: var(--accent-cyan);
    background: rgba(0, 96, 169, 0.04);
    box-shadow: 0 6px 12px rgba(0, 96, 169, 0.08);
}
.time-slot-card.active span {
    color: var(--accent-cyan);
}
.form-navigation-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}


/* ==========================================
   VIEW: E-COMMERCE SHOP STYLING
   ========================================== */
.shop-section {
    padding: 120px 0 80px;
}
.shop-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    align-items: start;
}

/* Filters Sidebar */
.shop-sidebar {
    background: var(--bg-secondary);
    border: var(--border-width-heavy) solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 24px;
    position: sticky;
    top: 100px;
}
.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 12px;
    margin-bottom: 20px;
}
.sidebar-header h3 {
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.btn-reset-filters {
    background: none;
    border: none;
    color: var(--accent-cyan);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    font-family: var(--font-family);
}
.filter-group {
    margin-bottom: 20px;
}
.filter-group > label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    display: block;
    margin-bottom: 8px;
}
.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.search-input-wrapper input {
    background: var(--bg-primary);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 10px 32px 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: 0.85rem;
    width: 100%;
}
.search-input-wrapper input:focus {
    border-color: var(--accent-cyan);
    outline: none;
}
.search-icon {
    position: absolute;
    right: 12px;
    color: var(--text-muted);
    font-size: 0.85rem;
}
.filter-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Custom Checkbox Heavy Borders */
.checkbox-container {
    display: flex;
    align-items: center;
    position: relative;
    padding-right: 26px;
    cursor: pointer;
    font-size: 0.85rem;
    user-select: none;
    color: var(--text-muted);
    transition: var(--transition-fast);
}
.checkbox-container:hover {
    color: var(--text-primary);
}
.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 18px;
    height: 18px;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}
.checkmark {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    height: 18px;
    width: 18px;
    background-color: var(--bg-primary);
    border: var(--border-width-heavy) solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    transition: var(--transition-fast);
}
.checkbox-container input:checked ~ .checkmark {
    background-color: var(--accent-cyan);
    border-color: var(--accent-cyan);
}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.checkbox-container input:checked ~ .checkmark:after {
    display: block;
}
.checkbox-container .checkmark:after {
    left: 5px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid var(--text-dark);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Slider Style */
.slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    outline: none;
    margin: 10px 0;
}
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent-cyan);
    cursor: pointer;
    box-shadow: 0 0 10px var(--accent-glow);
}

/* Shop Grid Meta */
.shop-grid-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    font-size: 0.9rem;
}
.shop-grid-meta select {
    background: var(--bg-secondary);
    border: var(--border-width-heavy) solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    color: var(--text-primary);
    font-family: var(--font-family);
    outline: none;
}

/* Shop Products Grid */
.shop-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
}
.shop-product-card {
    background: var(--bg-secondary);
    border: var(--border-width-heavy) solid rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: var(--transition-medium);
}
.shop-product-card:hover {
    transform: translateY(-5px);
    border-color: var(--border-color);
    box-shadow: 0 10px 20px rgba(0, 96, 169, 0.08);
}
.shop-prod-img-box {
    position: relative;
    height: 180px;
    overflow: hidden;
}
.shop-prod-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--transition-medium);
}
.shop-product-card:hover .shop-prod-img {
    transform: scale(1.04);
}
.shop-prod-condition-tag {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 800;
}
.shop-prod-info {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-grow: 1;
}
.shop-prod-brand {
    font-size: 0.75rem;
    color: var(--accent-cyan);
    font-weight: 700;
}
.shop-prod-title {
    font-size: 1.1rem;
    font-weight: 700;
}
.shop-prod-specs {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    padding-top: 10px;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.shop-prod-specs span {
    display: flex;
    align-items: center;
    gap: 6px;
}
.shop-prod-specs i {
    width: 14px;
    color: var(--accent-cyan);
}
.shop-prod-price-row {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    padding-top: 10px;
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.shop-prod-price {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
}
.shop-prod-price span {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-right: 4px;
}

/* Device option card lists */
.device-card-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 10px;
}
.device-option-card {
    background: var(--bg-card);
    border: var(--border-width-heavy) solid var(--border-heavy-muted);
    border-radius: var(--radius-md);
    padding: 24px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}
.device-option-card i {
    font-size: 2.2rem;
    color: var(--text-muted);
    transition: all 0.3s ease;
}
.device-option-card span {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    transition: all 0.3s ease;
}
.device-option-card:hover {
    border-color: var(--accent-cyan);
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 96, 169, 0.08);
}
.device-option-card.active {
    border-color: var(--accent-cyan);
    background: rgba(0, 96, 169, 0.04);
    box-shadow: 0 8px 20px rgba(0, 96, 169, 0.1);
}
.device-option-card.active i {
    color: var(--accent-cyan);
    transform: scale(1.1);
}
.device-option-card.active span {
    color: var(--accent-cyan);
}

/* Brand Choice Options */
.brand-selection-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 800px;
    margin: 16px auto 0;
    direction: ltr; /* Garder l'alignement de gauche à droite pour la grille */
}

/* Validation error highlights for brand selection grid */
.brand-selection-grid.has-error {
    border: 2px dashed var(--color-error);
    border-radius: 20px;
    padding: 16px;
    background: rgba(220, 38, 38, 0.02);
}

/* Style de base des cartes */
.brand-card {
    background-color: var(--bg-card);
    border: 2px solid var(--border-heavy-muted);
    border-radius: 16px;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02); /* Ombre très légère */
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Logos à l'intérieur des cartes */
.brand-icon {
    height: 32px;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%) brightness(0.2) opacity(70%);
    transition: all 0.25s ease;
}

/* MSI custom text logo style */
.brand-text-logo {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: 1px;
    font-family: 'Outfit', 'Inter', sans-serif;
    transition: all 0.25s ease;
    filter: opacity(70%);
}

/* Texte sous les logos */
.brand-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    font-family: system-ui, -apple-system, sans-serif;
}

/* Style pour l'icône "Autres / أخرى" */
.icon-other {
    width: 32px;
    height: 32px;
    background-color: #6b7280;
    color: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    transition: all 0.25s ease;
}

/* --- INTERACTIONS --- */

/* Effet au survol de la souris */
.brand-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 96, 169, 0.06);
    border-color: var(--accent-cyan);
}
.brand-card:hover .brand-icon {
    filter: grayscale(0%) brightness(1) opacity(100%);
}
.brand-card:hover .brand-text-logo {
    filter: opacity(100%);
    color: var(--accent-cyan);
}

/* ÉTAT SÉLECTIONNÉ (Ex: La carte Apple dans votre image) */
.brand-card.selected {
    background-color: #f5f9ff; /* Fond légèrement bleuté */
    border: 2px solid #007AFF; /* Bordure bleue Apple */
}

.brand-card.selected .brand-name {
    color: #007AFF;
}
.brand-card.selected .brand-icon {
    filter: grayscale(0%) brightness(1) opacity(100%);
}
.brand-card.selected .brand-text-logo {
    filter: opacity(100%);
    color: #007AFF;
}

/* ==========================================
   VIEW: TRACK YOUR REPAIR & LIVE MAP STYLING
   ========================================== */
.track-section {
    padding: 120px 0 80px;
}
.track-search-box {
    background: var(--bg-secondary);
    border: var(--border-width-heavy) solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 32px;
    max-width: 680px;
    margin: 0 auto 40px;
}
.track-form {
    display: grid;
    grid-template-columns: 1.2fr 1fr auto;
    gap: 16px;
    align-items: end;
}
.track-form .form-group {
    margin-bottom: 0;
}
.track-form .btn {
    height: 48px;
}

/* Track Results Panel */
.track-result-panel {
    display: none; /* Shown dynamically */
    background: var(--bg-secondary);
    border: var(--border-width-heavy) solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 32px;
    animation: fadeIn 0.4s ease;
}
.track-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 20px;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 16px;
}
.status-pill {
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 700;
}
.status-received { background: rgba(245, 158, 11, 0.15); color: var(--color-warning); border: 1px solid rgba(245, 158, 11, 0.3); }
.status-inspecting { background: rgba(59, 130, 246, 0.15); color: #3B82F6; border: 1px solid rgba(59, 130, 246, 0.3); }
.status-repairing { background: rgba(139, 92, 246, 0.15); color: #8B5CF6; border: 1px solid rgba(139, 92, 246, 0.3); }
.status-ready { background: rgba(16, 185, 129, 0.15); color: var(--color-success); border: 1px solid rgba(16, 185, 129, 0.3); }

/* Progress Timeline Step Stepper */
.track-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 40px;
    position: relative;
}
.track-timeline::before {
    content: '';
    position: absolute;
    top: 24px;
    left: 12.5%;
    right: 12.5%;
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    z-index: 0;
}
.timeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: 1;
}
.timeline-step .step-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--bg-primary);
    border: var(--border-width-heavy) solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: var(--transition-medium);
}
.timeline-step .step-text {
    margin-top: 14px;
}
.timeline-step .step-text h5 {
    font-size: 0.95rem;
    font-weight: 700;
}
.timeline-step .step-text p {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Timeline States colors */
.timeline-step.completed .step-icon {
    background: var(--color-success);
    border-color: var(--color-success);
    color: var(--text-dark);
}
.timeline-step.active .step-icon {
    background: var(--bg-primary);
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    box-shadow: 0 0 15px var(--accent-glow);
}
.timeline-step.active .step-text h5 {
    color: var(--accent-cyan);
}

/* GPS live-map container simulation */
.live-map-container {
    border: var(--border-width-heavy) solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-top: 32px;
}
.live-map-header {
    background: rgba(8, 12, 20, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.live-pulse {
    width: 10px;
    height: 10px;
    background: var(--accent-cyan);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--accent-cyan);
    animation: pulseGlow 1.5s infinite;
}
@keyframes pulseGlow {
    0% { transform: scale(0.9); opacity: 0.8; }
    50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 12px var(--accent-cyan); }
    100% { transform: scale(0.9); opacity: 0.8; }
}
.live-map-header h5 {
    font-size: 0.9rem;
    font-weight: 700;
}
.map-graphics {
    height: 250px;
    background: #E9EDF2;
    position: relative;
    overflow: hidden;
}
.map-grid-lines {
    position: absolute;
    inset: 0;
    background-size: 30px 30px;
    background-image: 
        linear-gradient(to right, rgba(0, 96, 169, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 96, 169, 0.05) 1px, transparent 1px);
}
.map-marker-hq, .map-marker-center {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--text-primary);
}
.map-marker-hq i, .map-marker-center i {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid var(--accent-cyan);
    color: var(--accent-cyan);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 4px 10px rgba(0, 96, 169, 0.1);
}
.marker-label {
    font-size: 0.75rem;
    margin-top: 4px;
    font-weight: 700;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
}
.map-marker-hq { top: 40px; right: 80px; }
.map-marker-center { bottom: 40px; left: 80px; }

/* Delivery path simulation */
.map-path-line {
    position: absolute;
    top: 59px;
    right: 99px;
    width: calc(100% - 198px);
    height: 112px;
    border-top: 2px dashed rgba(0, 240, 255, 0.3);
    border-left: 2px dashed rgba(0, 240, 255, 0.3);
    z-index: 1;
}
.map-courier-car {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--text-primary);
    transition: all 0.5s ease;
}
.map-courier-car i {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-success);
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}
.car-label {
    font-size: 0.7rem;
    font-weight: 700;
    margin-top: 2px;
    background: rgba(0, 0, 0, 0.6);
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}
.map-footer {
    background: rgba(8, 12, 20, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.map-footer p {
    font-size: 0.85rem;
    font-weight: 700;
}


/* ==========================================
   VIEW: WARRANTY & POLICY ACCORDIONS STYLING
   ========================================== */
.warranty-section {
    padding: 120px 0 80px;
}
.warranty-accordions-wrapper {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.accordion-item {
    background: var(--bg-secondary);
    border: var(--border-width-heavy) solid rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: var(--transition-fast);
}
.accordion-item:hover {
    border-color: var(--border-color);
}
.accordion-header {
    width: 100%;
    background: none;
    border: none;
    padding: 20px 24px;
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.accordion-header span {
    display: flex;
    align-items: center;
    gap: 12px;
}
.arrow-icon {
    transition: transform 0.3s var(--transition-medium);
    font-size: 0.9rem;
    color: var(--text-muted);
}
.accordion-content {
    max-height: 0;
    overflow: hidden;
    padding: 0 24px;
    color: var(--text-muted);
    font-size: 0.9rem;
    transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s ease;
}
.accordion-item.open .accordion-content {
    max-height: 500px;
    padding-bottom: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    padding-top: 16px;
}
.accordion-item.open .arrow-icon {
    transform: rotate(180deg);
    color: var(--accent-cyan);
}
.accordion-content ul {
    list-style: none;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.accordion-content li {
    position: relative;
    padding-right: 18px;
}
.accordion-content li::before {
    content: '•';
    position: absolute;
    right: 0;
    color: var(--accent-cyan);
    font-size: 1.2rem;
    line-height: 1;
}


/* ==========================================
   VIEW: ADMIN DASHBOARD SIMULATOR STYLING
   ========================================== */
.admin-section {
    padding: 110px 0 60px;
}
.admin-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}
.admin-stats {
    display: flex;
    gap: 12px;
}
.stat-badge {
    background: rgba(0, 240, 255, 0.05);
    border: 1px solid var(--border-color);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 700;
}
.admin-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
    align-items: start;
}
.admin-sidebar {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.admin-tab-btn {
    background: var(--bg-secondary);
    border: var(--border-width-heavy) solid rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    font-family: var(--font-family);
    font-weight: 700;
    cursor: pointer;
    text-align: right;
    transition: var(--transition-fast);
}
.admin-tab-btn:hover {
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.1);
}
.admin-tab-btn.active {
    background: rgba(0, 240, 255, 0.05);
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}
.admin-workspace {
    background: var(--bg-secondary);
    border: var(--border-width-heavy) solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 24px;
    min-height: 450px;
}
.admin-tab-view {
    display: none;
}
.admin-tab-view.active {
    display: block;
    animation: fadeIn 0.3s ease;
}
.admin-view-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.admin-view-header h3 {
    font-size: 1.15rem;
}

/* Admin Table Design */
.table-responsive {
    width: 100%;
    overflow-x: auto;
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    text-align: right;
}
.admin-table th, .admin-table td {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.admin-table th {
    font-weight: 700;
    color: var(--text-primary);
    background: rgba(8, 12, 20, 0.4);
}
.admin-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.01);
}
.admin-table select {
    background: var(--bg-primary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: 0.8rem;
    padding: 4px 8px;
    border-radius: 4px;
}

/* Modals Overlay & Body */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.modal-overlay.active {
    display: flex;
}
.modal-card {
    background: var(--bg-secondary);
    border: var(--border-width-heavy) solid var(--accent-cyan);
    border-radius: var(--radius-md);
    width: 100%;
    max-width: 600px;
    box-shadow: 0 20px 40px rgba(0, 240, 255, 0.1);
    overflow: hidden;
    animation: fadeIn var(--transition-fast);
}
.modal-header {
    background: rgba(8, 12, 20, 0.6);
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.btn-close-modal {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
}
.btn-close-modal:hover { color: var(--text-primary); }
.modal-body {
    padding: 24px;
    max-height: 70vh;
    overflow-y: auto;
}
.modal-footer {
    background: rgba(8, 12, 20, 0.4);
    padding: 16px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Form layouts helper */
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

/* Invoice specifics */
.invoice-bill-box {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.invoice-top-details {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
    padding-bottom: 16px;
}
.invoice-items-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.invoice-item-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
}
.invoice-total-row {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 16px;
    display: flex;
    justify-content: space-between;
    font-size: 1.2rem;
    font-weight: 800;
}


/* ==========================================
   MOBILE STICKY CONTACT BAR
   ========================================== */
.mobile-sticky-bar {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    height: 60px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 96, 169, 0.12);
    border-radius: 40px;
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 6px;
    box-shadow: 0 10px 30px rgba(0, 96, 169, 0.15);
    z-index: 999;
}
.sticky-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    height: 100%;
    border-radius: 30px;
    transition: all 0.3s ease;
}
.sticky-action-btn.btn-repair {
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
    color: var(--text-dark);
    box-shadow: 0 4px 12px rgba(0, 96, 169, 0.2);
}
.sticky-action-btn.btn-repair:active {
    transform: scale(0.96);
}
.sticky-action-btn.btn-whatsapp {
    background: linear-gradient(135deg, #128C7E, #25D366);
    color: #FFF;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.2);
}
.sticky-action-btn.btn-whatsapp:active {
    transform: scale(0.96);
}

/* Footer Section */
.main-footer {
    background: #04070D;
    border-top: 1px solid rgba(255, 255, 255, 0.02);
    padding: 80px 0 0;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.footer-brand-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.footer-logo { display: inline-flex; }
.footer-about {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}
.social-links {
    display: flex;
    gap: 10px;
}
.social-link {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.95rem;
    transition: var(--transition-fast);
}
.social-link:hover {
    color: var(--accent-cyan);
    border-color: var(--accent-cyan);
    background: rgba(0, 240, 255, 0.04);
    transform: translateY(-2px);
}
.footer-links-side {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.footer-col-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 18px;
    color: #FFFFFF;
}
.footer-links-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.footer-links-list a {
    color: var(--text-muted);
    font-size: 0.85rem;
}
.footer-links-list a:hover {
    color: var(--accent-cyan);
    padding-right: 4px;
}
.footer-links-list.text-muted li {
    font-size: 0.8rem;
}
.footer-bottom {
    padding: 20px 0;
    background: #020408;
}
.footer-bottom-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.copyright-text {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    width: 100%;
    margin: 0;
    direction: ltr;
    unicode-bidi: isolate;
    text-align: center;
    line-height: 1.6;
}
.copyright-text span,
.copyright-text a {
    unicode-bidi: isolate;
}
.copyright-text a {
    color: var(--accent-cyan);
    font-weight: 800;
}
.text-red { color: var(--color-error); }


/* ==========================================
   RESPONSIVE DESIGN (MEDIA QUERIES)
   ========================================== */

@media (max-width: 1100px) {
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 32px;
    }
    .hero-content { align-items: center; }
    .hero-ctas, .hero-features { justify-content: center; }
    
    .shop-layout {
        grid-template-columns: 1fr;
    }
    .shop-sidebar {
        position: static;
    }
    .admin-layout {
        grid-template-columns: 1fr;
    }
    .repair-page-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    section { padding: 60px 0; }
    .hero-section { padding: 120px 0 60px; }
    .main-header { padding: 4px 0; }
    
    .nav-menu, .CTA-header {
        display: none;
    }
    .mobile-menu-toggle {
        display: block;
    }
    .steps-grid { grid-template-columns: 1fr; }
    
    .device-card-options { grid-template-columns: 1fr; }
    .brand-selection-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .brand-card {
        padding: 16px 12px;
        gap: 12px;
    }
    .brand-icon {
        height: 24px;
    }
    .time-slots-grid { grid-template-columns: 1fr; }
    .track-timeline {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .track-timeline::before { display: none; }
    .timeline-step {
        flex-direction: row;
        text-align: right;
        gap: 16px;
        align-items: center;
    }
    .timeline-step .step-text { margin-top: 0; }
    .track-form {
        grid-template-columns: 1fr;
    }
    
    .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .footer-links-side { grid-template-columns: 1fr; gap: 24px; }
    .footer-bottom-container { flex-direction: column; text-align: center; }
    
    .mobile-sticky-bar { display: grid; }
    body { padding-bottom: 100px; }
    body.view-repair { padding-bottom: 0; }
    body.view-repair .main-footer { margin-bottom: 0; }
    .footer-bottom {
        padding: 16px 0 calc(16px + env(safe-area-inset-bottom, 0px));
    }
    .copyright-text {
        flex-direction: column;
        gap: 2px;
        font-size: 0.78rem;
    }
    
    .form-grid-2, .form-grid-3 {
        grid-template-columns: 1fr;
    }
    .form-stepper::before {
        display: none;
    }
    .form-stepper {
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
    }
    .stepper-node {
        flex: 1 1 40%;
    }
}

@media (max-width: 480px) {
    .hero-title { font-size: 1.8rem; }
    .hero-ctas { width: 100%; flex-direction: column; }
    .hero-ctas .btn { width: 100%; }
}

/* ==========================================
   PRODUCT DETAILS VIEW STYLES
   ========================================== */
.product-detail-section {
    padding: 120px 0 80px;
}
.product-detail-back-row {
    margin-bottom: 24px;
}
.back-to-shop-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--accent-cyan);
    font-size: 0.95rem;
    transition: var(--transition-fast);
}
.back-to-shop-btn:hover {
    color: var(--text-primary);
    transform: translateX(-4px);
}
.product-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
    align-items: start;
}
.product-detail-media {
    background: var(--bg-glass);
    border: var(--border-width-heavy) solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: sticky;
    top: 100px;
}
.detail-image-wrapper {
    width: 100%;
    max-width: 400px;
    display: flex;
    justify-content: center;
}
.detail-image-wrapper img {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0, 240, 255, 0.15));
}
.product-detail-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.detail-brand-badge {
    background: rgba(0, 240, 255, 0.05);
    border: 1px solid var(--border-color);
    color: var(--accent-cyan);
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.8rem;
    width: fit-content;
    display: inline-block;
}
.detail-condition-badge {
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.8rem;
    width: fit-content;
    display: inline-block;
    margin-right: 8px;
}
.detail-condition-badge.cond-new {
    background: rgba(16, 185, 129, 0.1);
    color: var(--color-success);
    border: 1px solid rgba(16, 185, 129, 0.2);
}
.detail-condition-badge.cond-refurbished {
    background: rgba(245, 158, 11, 0.1);
    color: var(--color-warning);
    border: 1px solid rgba(245, 158, 11, 0.2);
}
.detail-title {
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    font-weight: 900;
}
.detail-price-box {
    background: var(--bg-card);
    border: var(--border-width-heavy) solid rgba(255, 255, 255, 0.05);
    padding: 24px;
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.detail-price-box .price-label {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
}
.detail-price-box .price-value {
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--accent-cyan);
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
}
.detail-price-box .price-value span {
    font-size: 1.2rem;
    font-weight: 700;
    margin-right: 6px;
}
.detail-price-box .price-tax-info {
    font-size: 0.8rem;
    color: var(--text-muted);
}
.detail-description {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.7;
}
.detail-specs-card {
    background: var(--bg-glass);
    border: var(--border-width-heavy) solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 24px;
}
.detail-specs-card h3 {
    font-size: 1.15rem;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.specs-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.specs-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.95rem;
}
.specs-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.specs-list li span {
    color: var(--text-muted);
}
.specs-list li strong {
    color: var(--text-primary);
    font-weight: 600;
}
.detail-actions-row {
    margin-top: 10px;
}

/* Responsive details */
@media (max-width: 900px) {
    .product-detail-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .product-detail-media {
        position: static;
        padding: 24px;
    }
}

/* ==========================================
   HOME PAGE ADDED SECTIONS — REDESIGNED
   ========================================== */

/* ---- Services Catalog ---- */
.home-services-section {
    background: var(--bg-primary);
    position: relative;
}
.home-services-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
}
.services-catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.service-catalog-card {
    background: var(--bg-secondary);
    border: var(--border-width-heavy) solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-md);
    padding: 36px 28px;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    overflow: hidden;
}
/* Animated gradient overlay on hover */
.service-catalog-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle 250px at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(0, 96, 169, 0.06),
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}
.service-catalog-card:hover::before { opacity: 1; }
.service-catalog-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue));
    transform: scaleX(0);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: center;
}
.service-catalog-card:hover::after { transform: scaleX(1); }
.service-catalog-card:hover {
    transform: translateY(-10px);
    border-color: rgba(0, 96, 169, 0.12);
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.15), 
        0 0 0 1px rgba(0, 96, 169, 0.06),
        0 0 40px rgba(0, 96, 169, 0.04);
}
.service-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, rgba(0, 96, 169, 0.1), rgba(157, 34, 53, 0.06));
    border: 2px solid rgba(0, 96, 169, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--accent-cyan);
    transition: all 0.4s ease;
    position: relative;
}
.service-catalog-card:hover .service-icon {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 25px rgba(0, 96, 169, 0.2);
    transform: rotate(-8deg) scale(1.08);
}
.service-catalog-card .service-title {
    font-size: 1.25rem;
    font-weight: 700;
}
.service-catalog-card .service-desc-text {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.7;
    flex-grow: 1;
}
.service-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--accent-cyan);
    font-size: 0.9rem;
    width: fit-content;
    padding: 6px 0;
    position: relative;
}
.service-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent-cyan);
    transition: width 0.3s ease;
}
.service-link:hover::after { width: 100%; }
.service-link i {
    transition: transform var(--transition-fast);
}
.service-link:hover i {
    transform: translateX(-6px);
}

/* ---- Stats Section ---- */
.stats-section {
    padding: 100px 0;
    background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-primary) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    position: relative;
    overflow: hidden;
}
.stats-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
    pointer-events: none;
    animation: pulse-glow 4s ease-in-out infinite;
}
@keyframes pulse-glow {
    0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.15); }
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    position: relative;
    z-index: 2;
}
.stat-card {
    text-align: center;
    padding: 32px 20px;
    background: var(--bg-glass);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: var(--border-width-heavy) solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-md);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}
.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue));
    border-radius: 0 0 4px 4px;
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.stat-card:hover::before { width: 100%; }
.stat-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 96, 169, 0.15);
    box-shadow: 0 20px 40px rgba(0, 96, 169, 0.06);
}
.stat-num {
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 900;
    background: linear-gradient(135deg, var(--accent-cyan), #4da6d9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
}
.stat-label {
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 600;
}

/* ---- Testimonials ---- */
.testimonials-section {
    background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(0, 96, 169, 0.03), transparent);
    position: relative;
}
.testimonials-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
}
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.testimonial-card {
    background: var(--bg-secondary);
    border: var(--border-width-heavy) solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-md);
    padding: 36px 28px;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    overflow: hidden;
}
/* Decorative quotation mark */
.testimonial-card::before {
    content: '"';
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 5rem;
    font-family: Georgia, serif;
    line-height: 1;
    color: rgba(0, 96, 169, 0.06);
    pointer-events: none;
    transition: color 0.5s ease;
}
.testimonial-card:hover::before {
    color: rgba(0, 96, 169, 0.12);
}
.testimonial-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 96, 169, 0.12);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12), 0 0 40px rgba(0, 96, 169, 0.04);
}
.test-header {
    display: flex;
    align-items: center;
    gap: 16px;
}
.client-avatar {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, rgba(0, 96, 169, 0.08), rgba(157, 34, 53, 0.06));
    border: 2px solid rgba(0, 96, 169, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--accent-cyan);
    transition: all 0.4s ease;
}
.testimonial-card:hover .client-avatar {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 15px rgba(0, 96, 169, 0.15);
    transform: scale(1.05);
}
.client-meta h4 {
    font-size: 1rem;
    font-weight: 700;
}
.rating-stars {
    display: flex;
    gap: 3px;
    margin-top: 4px;
    color: var(--color-warning);
    font-size: 0.8rem;
}
.rating-stars i {
    transition: transform 0.3s ease;
}
.testimonial-card:hover .rating-stars i {
    animation: star-bounce 0.4s ease forwards;
}
.testimonial-card:hover .rating-stars i:nth-child(1) { animation-delay: 0s; }
.testimonial-card:hover .rating-stars i:nth-child(2) { animation-delay: 0.05s; }
.testimonial-card:hover .rating-stars i:nth-child(3) { animation-delay: 0.1s; }
.testimonial-card:hover .rating-stars i:nth-child(4) { animation-delay: 0.15s; }
.testimonial-card:hover .rating-stars i:nth-child(5) { animation-delay: 0.2s; }
@keyframes star-bounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}
.test-text {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.7;
    font-style: italic;
    position: relative;
    z-index: 1;
}

/* ---- FAQ on Home Page ---- */
.home-faq-section {
    background: var(--bg-primary);
    position: relative;
}
.home-faq-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
}
.home-faq-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 800px;
    margin: 0 auto;
}
.faq-card-item {
    background: var(--bg-secondary);
    border: var(--border-width-heavy) solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-md);
    padding: 0;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    position: relative;
    cursor: pointer;
}
/* Gradient accent left border */
.faq-card-item::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--accent-cyan), var(--accent-blue));
    opacity: 0;
    transition: opacity 0.4s ease;
}
.faq-card-item:hover::before { opacity: 1; }
.faq-card-item:hover {
    border-color: rgba(0, 96, 169, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 96, 169, 0.04);
    transform: translateX(-4px);
}
.faq-question {
    font-size: 1.05rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-primary);
    padding: 24px 28px;
    transition: color 0.3s ease;
}
.faq-card-item:hover .faq-question {
    color: var(--accent-cyan);
}
.faq-question i {
    font-size: 1.15rem;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}
.faq-card-item:hover .faq-question i {
    transform: scale(1.15);
}
.faq-answer {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.7;
    padding: 0 28px 24px;
    padding-right: 48px;
}

/* Responsive Overrides */
@media (max-width: 991px) {
    .services-catalog-grid, .testimonials-grid {
        grid-template-columns: 1fr;
    }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .steps-grid {
        grid-template-columns: 1fr;
    }
    .steps-grid::before {
        display: none;
    }
}
@media (max-width: 576px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
    .faq-answer {
        padding-right: 28px;
    }
}

/* ==========================================================================
   MICRO-INTERACTIONS & ANIMATIONS (ADDITIONS)
   ========================================================================== */

/* 1. Scroll Reveal Animation */
.reveal {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* 2. Loading Skeleton */
.skeleton-card {
    background: var(--bg-secondary);
    border: var(--border-width-heavy) solid rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 388px; /* Matches normal product card height */
}
.skeleton-img {
    height: 180px;
    background: rgba(255, 255, 255, 0.04);
}
.skeleton-info {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-grow: 1;
}
.skeleton-brand {
    width: 30%;
    height: 12px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-sm);
}
.skeleton-title {
    width: 80%;
    height: 20px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-sm);
}
.skeleton-specs {
    width: 65%;
    height: 12px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-sm);
}
.skeleton-price-row {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    padding-top: 10px;
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.skeleton-price {
    width: 35%;
    height: 20px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-sm);
}
.skeleton-btn {
    width: 25%;
    height: 30px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-sm);
}

/* Shine sweep effect */
.shine {
    position: relative;
    overflow: hidden;
}
.shine::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150px;
    width: 150px;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.06),
        transparent
    );
    animation: shine-sweep 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes shine-sweep {
    0% { left: -150px; }
    50% { left: 100%; }
    100% { left: 100%; }
}

/* 3. 3D Hover Tilt & RGB Gaming Effect */
.shop-product-card {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.15s ease-out, border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.shop-product-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle 180px at var(--glow-x, 50%) var(--glow-y, 50%),
        rgba(255, 255, 255, 0.08),
        transparent 80%
    );
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.shop-product-card:hover::before {
    opacity: 1;
}

/* RGB Neon Border and Shadow keyframe animation */
@keyframes rgb-glow {
    0% {
        box-shadow: 0 10px 25px rgba(0, 96, 169, 0.15), 0 0 15px rgba(0, 96, 169, 0.2);
        border-color: rgba(0, 96, 169, 0.4);
    }
    50% {
        box-shadow: 0 10px 25px rgba(157, 34, 53, 0.15), 0 0 15px rgba(157, 34, 53, 0.2);
        border-color: rgba(157, 34, 53, 0.4);
    }
    100% {
        box-shadow: 0 10px 25px rgba(0, 96, 169, 0.15), 0 0 15px rgba(0, 96, 169, 0.2);
        border-color: rgba(0, 96, 169, 0.4);
    }
}
.shop-product-card.gaming-pc-card:hover {
    animation: rgb-glow 3s linear infinite;
}
.shop-product-card.gaming-pc-card:hover .shop-prod-condition-tag {
    background: linear-gradient(135deg, #FF007F, #7F00FF);
    box-shadow: 0 0 10px rgba(255, 0, 128, 0.5);
    color: white;
}

/* Staggered Transition Delays for Grid Elements */
.steps-grid .step-card:nth-child(1) { transition-delay: 0.1s; }
.steps-grid .step-card:nth-child(2) { transition-delay: 0.2s; }
.steps-grid .step-card:nth-child(3) { transition-delay: 0.3s; }

.services-catalog-grid .service-catalog-card:nth-child(1) { transition-delay: 0.1s; }
.services-catalog-grid .service-catalog-card:nth-child(2) { transition-delay: 0.2s; }
.services-catalog-grid .service-catalog-card:nth-child(3) { transition-delay: 0.3s; }

.stats-grid .stat-card:nth-child(1) { transition-delay: 0.05s; }
.stats-grid .stat-card:nth-child(2) { transition-delay: 0.1s; }
.stats-grid .stat-card:nth-child(3) { transition-delay: 0.15s; }
.stats-grid .stat-card:nth-child(4) { transition-delay: 0.2s; }

.testimonials-grid .testimonial-card:nth-child(1) { transition-delay: 0.1s; }
.testimonials-grid .testimonial-card:nth-child(2) { transition-delay: 0.2s; }
.testimonials-grid .testimonial-card:nth-child(3) { transition-delay: 0.3s; }

.home-faq-wrapper .faq-card-item:nth-child(1) { transition-delay: 0.1s; }
.home-faq-wrapper .faq-card-item:nth-child(2) { transition-delay: 0.2s; }
.home-faq-wrapper .faq-card-item:nth-child(3) { transition-delay: 0.3s; }

.warranty-accordions-wrapper .accordion-item:nth-child(1) { transition-delay: 0.1s; }
.warranty-accordions-wrapper .accordion-item:nth-child(2) { transition-delay: 0.2s; }
.warranty-accordions-wrapper .accordion-item:nth-child(3) { transition-delay: 0.3s; }
.warranty-accordions-wrapper .accordion-item:nth-child(4) { transition-delay: 0.4s; }

/* ==========================================================================
   REQUEST CONFIRMATION STYLING
   ========================================================================== */
.payment-method-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}
.payment-method-container > label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}
.payment-methods-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.payment-tab {
    background: var(--bg-card);
    border: var(--border-width-heavy) solid var(--border-heavy-muted);
    border-radius: var(--radius-md);
    padding: 14px 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.payment-tab i {
    font-size: 1.25rem;
    color: var(--text-muted);
    transition: color 0.3s ease;
}
.payment-tab span {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    transition: color 0.3s ease;
}
.payment-tab:hover {
    border-color: var(--accent-cyan);
    transform: translateY(-2px);
}
.payment-tab.active {
    border-color: var(--accent-cyan);
    background: rgba(0, 240, 255, 0.04);
    box-shadow: 0 4px 12px rgba(0, 240, 255, 0.1);
}
.payment-tab.active i, .payment-tab.active span {
    color: var(--accent-cyan);
}

/* Bank Details Styling */
.bank-details-card {
    background: rgba(255, 255, 255, 0.02);
    border: var(--border-width-heavy) solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-top: 15px;
}
.bank-info-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
    color: var(--text-primary);
}
.bank-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
}
.iban-display-box {
    background: rgba(0, 0, 0, 0.2);
    border: var(--border-width-heavy) solid rgba(0, 240, 255, 0.15);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.iban-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 700;
}
.iban-value-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.iban-value-wrapper code {
    font-family: 'Outfit', 'Courier New', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-cyan);
    letter-spacing: 1px;
    word-break: break-all;
}
.btn-copy-iban {
    background: rgba(0, 240, 255, 0.1);
    border: 1px solid var(--accent-cyan);
    color: var(--accent-cyan);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-copy-iban:hover {
    background: var(--accent-cyan);
    color: var(--text-dark);
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}
.bank-instruction {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.bank-instruction i {
    margin-top: 2px;
}

/* Opened Device Premium Toggle Cards */
.opened-device-toggle-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 10px;
}
.toggle-pill-card {
    background: rgba(255, 255, 255, 0.03);
    border: var(--border-width-heavy) solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.toggle-pill-card span {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}
.pill-check-indicator {
    font-size: 1.2rem;
    color: var(--text-muted);
    transition: all 0.3s ease;
}
.toggle-pill-card:hover {
    border-color: rgba(0, 240, 255, 0.4);
    transform: translateY(-2px);
    background: rgba(0, 240, 255, 0.02);
}
.toggle-pill-card.active {
    border-color: var(--accent-cyan);
    background: rgba(0, 240, 255, 0.08);
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.2);
}
.toggle-pill-card.active .pill-check-indicator {
    color: var(--accent-cyan);
}
/* When 'Yes' (نعم) is active, styling is golden/amber to highlight warning */
.toggle-pill-card[data-value="نعم"].active {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.08);
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.2);
}
.toggle-pill-card[data-value="Yes"].active {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.08);
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.2);
}
.toggle-pill-card[data-value="نعم"].active .pill-check-indicator {
    color: #f59e0b;
}
.toggle-pill-card[data-value="Yes"].active .pill-check-indicator {
    color: #f59e0b;
}
.form-label-premium {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

/* ==========================================
   REPAIR JOURNEY — 2026 REDESIGN
   ========================================== */
body .repair-section {
    padding: 76px 0 100px;
    background:
        radial-gradient(circle at 8% 4%, rgba(0,168,218,.12), transparent 26%),
        radial-gradient(circle at 92% 80%, rgba(81,96,171,.1), transparent 28%),
        #f7f9fd;
}
body .form-wrapper-column {
    max-width: 940px;
}
body .step-form-container {
    padding: 0;
    overflow: visible;
    background: #fff;
    border: 1px solid rgba(21,56,127,.1);
    border-radius: 28px;
    box-shadow: 0 28px 80px rgba(21,56,127,.12);
}
body .form-stepper {
    margin: 0;
    padding: 28px 38px 26px;
    border: 0;
    border-radius: 28px 28px 0 0;
    background: linear-gradient(135deg, #071b42, #15387f 54%, #3158a7);
}
body .form-stepper::before {
    top: 49px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: rgba(255,255,255,.18);
}
body .stepper-node {
    width: 18%;
    gap: 9px;
}
body .stepper-node .node-num {
    position: relative;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255,255,255,.28);
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.72);
    backdrop-filter: blur(8px);
}
body .stepper-node .node-num i {
    font-size: 15px;
}
body .stepper-node .node-num b {
    position: absolute;
    top: -6px;
    right: -6px;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    color: #15387f;
    font-size: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,.2);
}
body .stepper-node .node-label {
    color: rgba(255,255,255,.65);
    font-size: .75rem;
    text-align: center;
}
body .stepper-node.active .node-num {
    border-color: #54d8ff;
    color: #fff;
    background: #00a8da;
    box-shadow: 0 0 0 6px rgba(0,168,218,.17), 0 10px 24px rgba(0,0,0,.2);
    transform: translateY(-2px);
}
body .stepper-node.active .node-label {
    color: #fff;
}
body .stepper-node.completed .node-num {
    border-color: #6bbc49;
    background: #6bbc49;
}
body .stepper-node.completed .node-num i::before {
    content: "\f00c";
}
body .stepper-node.completed .node-label {
    color: #bdf3a7;
}
body #multiStepDiagnosticForm {
    padding: 38px 42px 32px;
}
body .diagnostic-step {
    min-height: 390px;
}
body .diagnostic-step.active {
    animation: repairStepIn .35s cubic-bezier(.16,1,.3,1);
}
@keyframes repairStepIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
body .step-title-inner {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 0 0 26px;
    padding: 0 0 18px;
    border-bottom: 1px solid #e8edf5;
    color: #101828;
    font-size: 1.28rem;
    font-weight: 850;
}
body .step-title-inner i {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(135deg, #15387f, #00a8da);
    box-shadow: 0 9px 20px rgba(0,168,218,.2);
}
body .page-back-button {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    padding: 10px 14px;
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.12);
    font-family: var(--font-family);
    font-size: .9rem;
    font-weight: 800;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: .2s ease;
}
body .page-back-button:hover {
    background: rgba(255,255,255,.2);
    transform: translateY(-1px);
}
body .page-back-button i {
    font-size: .85rem;
}
body .form-group label {
    margin-bottom: 5px;
    color: #344054;
    font-size: .9rem;
}
body .form-group input,
body .form-group select,
body .form-group textarea {
    min-height: 52px;
    border: 1px solid #dfe5ee;
    border-radius: 14px;
    background: #fbfcfe;
    box-shadow: none;
}
body .form-group textarea {
    min-height: 132px;
    resize: vertical;
}
body .form-group input:focus,
body .form-group select:focus,
body .form-group textarea:focus {
    border-color: #00a8da;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(0,168,218,.11);
}
body .device-card-options {
    gap: 14px;
}
body .device-option-card {
    min-height: 165px;
    padding: 26px 16px;
    border: 1px solid #e3e8f0;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(16,40,90,.06);
}
body .device-option-card i {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 18px;
    color: #5160ab;
    background: #f0f3ff;
    font-size: 1.8rem;
}
body .device-option-card:hover {
    border-color: rgba(0,168,218,.6);
    box-shadow: 0 15px 35px rgba(16,40,90,.11);
}
body .device-option-card.active {
    border-color: #00a8da;
    background: linear-gradient(180deg, #f5fcff, #fff);
    box-shadow: 0 0 0 3px rgba(0,168,218,.1), 0 16px 32px rgba(0,168,218,.12);
}
body .device-option-card.active i {
    color: #fff;
    background: linear-gradient(135deg, #15387f, #00a8da);
}
body .brand-selection-grid {
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 13px;
    max-width: none;
}
body .brand-card {
    position: relative;
    min-height: 128px;
    padding: 18px 12px 14px;
    gap: 12px;
    overflow: hidden;
    border: 1px solid #e4e9f1;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(16,40,90,.055);
}
body .brand-card::after,
body .device-option-card::after {
    content: "\f00c";
    position: absolute;
    top: 10px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #fff;
    background: #00a8da;
    font: 700 10px/1 "Font Awesome 6 Free";
    opacity: 0;
    transform: scale(.6);
    transition: .2s ease;
}
body .brand-card.selected::after,
body .device-option-card.active::after {
    opacity: 1;
    transform: scale(1);
}
body .brand-card:hover {
    border-color: rgba(0,168,218,.65);
    box-shadow: 0 13px 28px rgba(16,40,90,.1);
}
body .brand-card.selected {
    border-color: #00a8da;
    background: #f3fbfe;
    box-shadow: 0 0 0 3px rgba(0,168,218,.1);
}
body .brand-wordmark-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    color: #263653;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.45rem;
    font-weight: 900;
    letter-spacing: -.7px;
    transition: .2s ease;
}
body .logo-asus { font-size: 1.35rem; letter-spacing: 1px; font-style: italic; }
body .logo-lenovo {
    height: 31px;
    padding: 0 9px;
    color: #fff;
    background: #e2231a;
    font-size: 1rem;
    letter-spacing: -.3px;
}
body .logo-dell span {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 3px solid #0672ce;
    border-radius: 50%;
    color: #0672ce;
    font-size: .7rem;
    letter-spacing: -.7px;
}
body .logo-hp {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    color: #fff;
    background: #0096d6;
    font-size: 1.25rem;
    font-style: italic;
    font-weight: 500;
}
body .logo-acer { color: #80b918; font-size: 1.6rem; font-weight: 500; }
body .logo-msi { color: #e31b23; font-size: 1.55rem; text-transform: lowercase; }
body .brand-card.selected .brand-name {
    color: #15387f;
}
body .brand-card.selected .brand-wordmark-logo {
    transform: scale(1.05);
}
body .icon-other {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #eef1f6;
    color: #5160ab;
}
body .drag-drop-zone {
    padding: 34px 20px;
    border: 1.5px dashed #9ddceb;
    border-radius: 18px;
    background: #f6fcfe;
}
body .drag-drop-zone:hover,
body .drag-drop-zone.dragover {
    border-color: #00a8da;
    background: #edfaff;
}
body .opened-device-toggle-grid {
    gap: 12px;
}
body .toggle-pill-card {
    min-height: 64px;
    justify-content: flex-start;
    text-align: start;
    border: 1px solid #e1e7ef;
    background: #fbfcfe;
    box-shadow: none;
}
body .toggle-pill-card span {
    color: #101828;
    line-height: 1.35;
}
body .toggle-pill-card .pill-check-indicator {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    color: #667085;
    background: #eef2f7;
}
body .toggle-pill-card.active {
    border-color: #00a8da;
    background: #f1fbfe;
    box-shadow: 0 0 0 3px rgba(0,168,218,.1);
}
body .toggle-pill-card.active .pill-check-indicator {
    color: #fff;
    background: #00a8da;
}
body .toggle-pill-card[data-value="نعم"].active,
body .toggle-pill-card[data-value="Yes"].active {
    border-color: #f59e0b;
    background: #fff8eb;
    box-shadow: 0 0 0 3px rgba(245,158,11,.16);
}
body .toggle-pill-card[data-value="نعم"].active .pill-check-indicator,
body .toggle-pill-card[data-value="Yes"].active .pill-check-indicator {
    color: #fff;
    background: #f59e0b;
}
body #freeLeafletMap {
    height: 280px;
    overflow: hidden;
    border: 1px solid #dfe5ee;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(16,40,90,.08);
}
body .time-slot-card {
    border: 1px solid #e1e7ef;
    border-radius: 15px;
    box-shadow: none;
}
body .time-slot-card.active {
    border-color: #00a8da;
    background: #f1fbfe;
    box-shadow: 0 0 0 3px rgba(0,168,218,.09);
}
body .payment-trust-banner {
    border: 1px solid rgba(107,188,73,.28);
    border-radius: 18px;
    background: linear-gradient(135deg, #f3fbef, #fff);
}
body .checkout-summary-card,
body .bank-details-card {
    border: 1px solid #e1e7ef;
    border-radius: 18px;
    background: #fbfcfe;
    box-shadow: none;
}
body .iban-display-box {
    border: 1px solid rgba(0,168,218,.25);
    background: #eef9fc;
}
body .form-navigation-actions {
    align-items: center;
    margin-top: 28px !important;
    padding-top: 24px;
    border-top: 1px solid #e8edf5;
}
body .form-navigation-actions .btn {
    min-width: 132px;
    min-height: 50px;
    justify-content: center;
    border-radius: 14px;
}
body #btnNextStep,
body #btnDiagSubmit {
    margin-inline-start: auto;
    color: #fff !important;
    background: linear-gradient(135deg, #15387f, #00a8da);
    box-shadow: 0 10px 24px rgba(0,168,218,.2);
}
body #btnPrevStep {
    border: 1px solid #dfe5ee;
    background: #fff;
}
@media (max-width: 768px) {
    body .repair-section { padding: 45px 0 80px; }
    html {
        scroll-padding-top: 96px;
    }
    body {
        min-height: 100svh;
        min-height: 100dvh;
        overflow-x: hidden;
        -webkit-text-size-adjust: 100%;
    }
    body .repair-page-grid,
    body .form-wrapper-column {
        min-width: 0;
        width: 100%;
    }
    body .form-wrapper-column.reveal,
    body .form-wrapper-column.reveal.revealed {
        opacity: 1;
        transform: none;
    }
    body .step-form-container {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
        border-radius: 20px;
        overflow: visible;
    }
    body .form-stepper {
        flex-wrap: nowrap;
        gap: 5px;
        padding: 20px 10px 18px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        border-radius: 20px 20px 0 0;
    }
    body .form-stepper::before { display: block; top: 41px; }
    body .stepper-node {
        flex: 0 0 19%;
        width: 19%;
        min-width: 58px;
        scroll-snap-align: center;
    }
    body .stepper-node .node-num { width: 38px; height: 38px; }
    body .stepper-node .node-label { display: none; }
    body #multiStepDiagnosticForm {
        display: flex;
        flex-direction: column;
        padding: 24px 16px calc(34px + env(safe-area-inset-bottom, 0px));
    }
    body .diagnostic-step { min-height: 0; }
    body .step-title-inner {
        gap: 10px;
        margin-bottom: 18px;
        padding-bottom: 14px;
        font-size: 1rem;
        line-height: 1.35;
    }
    body .step-title-inner i {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        border-radius: 12px;
    }
    body .form-group {
        margin-bottom: 14px;
    }
    body .form-group label {
        align-items: flex-start;
        line-height: 1.45;
    }
    body .form-group input,
    body .form-group select,
    body .form-group textarea {
        min-height: 48px;
        border-radius: 13px;
        font-size: 16px;
    }
    body .form-group textarea {
        min-height: 118px;
    }
    body .device-card-options { grid-template-columns: 1fr; }
    body .device-option-card {
        min-height: 88px;
        flex-direction: row;
        justify-content: flex-start;
        text-align: right;
        padding: 13px;
    }
    body .device-option-card i { width: 54px; height: 54px; flex: 0 0 54px; }
    body .brand-selection-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    body .brand-card {
        min-height: 104px;
        padding: 14px 8px 12px;
    }
    body .brand-wordmark-logo {
        height: 34px;
        font-size: 1.15rem;
    }
    body .logo-dell span,
    body .logo-hp {
        width: 38px;
        height: 38px;
    }
    body .drag-drop-zone {
        padding: 24px 14px;
    }
    body #freeLeafletMap {
        height: min(230px, 42svh);
        min-height: 190px;
    }
    body .time-slots-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    body .time-slot-card {
        min-height: 54px;
        padding: 12px;
    }
    body .payment-trust-banner {
        align-items: flex-start;
        padding: 14px;
    }
    body .checkout-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    body .checkout-summary-card,
    body .bank-details-card {
        padding: 16px;
        overflow-wrap: anywhere;
    }
    body .opened-device-toggle-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    body .toggle-pill-card {
        min-height: 58px;
        padding: 13px 14px;
    }
    body .form-navigation-actions {
        position: static;
        order: -1;
        z-index: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        width: auto;
        max-width: none;
        margin: 0 0 18px !important;
        padding: 10px;
        border: 1px solid rgba(225, 231, 239, .95);
        border-radius: 16px;
        background: rgba(255,255,255,.96);
        box-shadow: 0 12px 30px rgba(16,40,90,.13);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    body.view-repair .mobile-sticky-bar {
        opacity: 0;
        pointer-events: none;
        transform: translateY(120%);
    }
    body .form-navigation-actions .btn {
        width: 100%;
        min-width: 0;
        min-height: 48px;
        padding-inline: 12px;
        white-space: nowrap;
    }
    body .form-navigation-actions .btn[style*="display:none"],
    body .form-navigation-actions .btn[style*="display: none"] {
        display: none !important;
    }
    body #btnNextStep,
    body #btnDiagSubmit {
        grid-column: 2;
    }
    body #btnPrevStep {
        grid-column: 1;
    }
    body #btnPrevStep[style*="display:none"] + #btnNextStep,
    body #btnPrevStep[style*="display: none"] + #btnNextStep {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    body.form-keyboard-open {
        padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        overflow-x: hidden;
    }
    body.form-keyboard-open .mobile-sticky-bar {
        opacity: 0;
        pointer-events: none;
        transform: translateY(120%);
    }
    body.form-keyboard-open .form-navigation-actions {
        position: static;
        margin: 0 0 18px !important;
        box-shadow: none;
        background: #fff;
    }
    body.form-keyboard-open .main-header {
        transform: translateY(-100%);
        pointer-events: none;
    }
    body.form-keyboard-open #multiStepDiagnosticForm {
        padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    }
}

/* Responsive Logo and Header Sizes */
@media (max-width: 768px) {
    .header-container {
        height: 86px !important;
    }
    .main-header.scrolled .header-container {
        height: 72px !important;
    }
    .logo img {
        height: 76px !important;
    }
    .main-header.scrolled .logo img {
        height: 62px !important;
    }
}

/* ==========================================
   Bilingual & RTL/LTR overrides
   ========================================== */
html.lang-en {
    --font-family: 'Outfit', sans-serif;
}

html.lang-en body {
    direction: ltr;
    text-align: left;
}

/* Align text for key structural areas */
html.lang-en .hero-content,
html.lang-en .section-header,
html.lang-en .footer-col,
html.lang-en .drawer-content,
html.lang-en .step-title-inner,
html.lang-en .checkout-summary-card,
html.lang-en .detail-specs-card,
html.lang-en .shop-grid-meta,
html.lang-en .sidebar-header,
html.lang-en .filter-group {
    text-align: left;
}

/* Ensure checkbox alignment is clean in LTR */
html.lang-en .checkbox-container {
    padding-left: 28px;
    padding-right: 0;
    text-align: left;
}

html.lang-en .checkbox-container input {
    left: 0;
    right: auto;
}

html.lang-en .checkbox-container .checkmark {
    left: 0;
    right: auto;
}

/* Adjust layout alignment for detail views and sidebars */
html.lang-en .product-detail-info {
    text-align: left;
}

html.lang-en .specs-list li {
    flex-direction: row;
    justify-content: space-between;
}

/* Flip chevron icons and indicators dynamically */
html.lang-en .arrow-icon,
html.lang-en .step-arrow,
html.lang-en .btn-next-step i {
    transform: rotate(180deg);
}

/* Swap stepper connectors in LTR */
html.lang-en .stepper-node::after {
    left: 50%;
    right: -50%;
}
html.lang-en .stepper-node:last-child::after {
    display: none;
}

/* Language Toggle Button styling */
.lang-toggle-btn {
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    transition: all var(--transition-fast);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
}
.lang-toggle-btn:hover {
    background: var(--accent-cyan);
    color: var(--text-dark) !important;
    border-color: var(--accent-cyan);
}

/* Ensure mobile header components spacing and layouts work well */
@media (max-width: 768px) {
    .header-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .lang-toggle-btn {
        padding: 6px 10px;
    }
}

/* Final cascade guards for refreshed legacy components */
body {
    font-family: 'Inter', 'Cairo', sans-serif;
    background: #fff;
    color: var(--ink);
}
body .container { max-width: 1280px; }
body .main-header {
    background: rgba(255,255,255,.92);
    border-bottom: 1px solid rgba(21,56,127,.08);
    box-shadow: 0 8px 30px rgba(21,56,127,.06);
}
body .header-container { height: 86px; }
body .main-header.scrolled .header-container { height: 70px; }
body .logo img { height: 76px; }
body .main-header.scrolled .logo img { height: 62px; }
body .nav-menu {
    padding: 6px;
    border: 1px solid rgba(21,56,127,.08);
    border-radius: 16px;
    background: var(--surface-soft);
}
body .nav-link {
    border-radius: 11px;
    padding: 10px 17px;
    font-size: .88rem;
}
body .nav-link::after { display: none; }
body .nav-link:hover,
body .nav-link.active {
    color: var(--brand-navy);
    background: #fff;
    box-shadow: 0 5px 16px rgba(21,56,127,.1);
}
body .btn-primary {
    background: linear-gradient(135deg, var(--brand-navy), var(--brand-indigo) 56%, var(--brand-cyan));
    box-shadow: 0 10px 26px rgba(21,56,127,.22);
}
body .hero-section {
    min-height: 780px;
    padding: 190px 0 100px;
    display: flex;
    align-items: center;
    background:
        radial-gradient(circle at 85% 24%, rgba(0,168,218,.18), transparent 25%),
        radial-gradient(circle at 15% 80%, rgba(107,188,73,.12), transparent 24%),
        linear-gradient(135deg, #F8FBFF 0%, #FFFFFF 52%, #F2F6FF 100%);
}
body .hero-container { gap: 72px; }
body .hero-title {
    font-size: clamp(2.45rem, 5vw, 4.65rem);
    line-height: 1.13;
    letter-spacing: -.055em;
}
body .text-gradient {
    background: linear-gradient(100deg, var(--brand-navy), var(--brand-indigo) 48%, var(--brand-cyan));
    background-size: 100% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: none;
}
body .image-wrapper-glowing {
    border: 10px solid rgba(255,255,255,.75);
    border-radius: 36px;
    box-shadow: 0 34px 80px rgba(21,56,127,.2);
    background: linear-gradient(145deg, #edf8ff, #e9edff);
}
body .brands-section {
    padding: 66px 0;
    background: var(--surface-soft);
    border-color: rgba(21,56,127,.08);
    font-family: var(--font-family);
}
body .brand-pill {
    min-width: 190px;
    min-height: 86px;
    padding: 18px 24px;
    border-radius: 20px;
    border-color: rgba(21,56,127,.09);
    box-shadow: 0 8px 24px rgba(21,56,127,.07);
}
body .brands-section .brand-logo {
    width: 64px;
    height: 40px;
    filter: none;
}
body .section-title {
    font-size: clamp(2rem, 3.8vw, 3rem);
    letter-spacing: -.035em;
}
body .main-footer {
    padding-top: 0;
    background:
        radial-gradient(circle at 80% 0%, rgba(0,168,218,.22), transparent 28%),
        linear-gradient(150deg, #081C45, #102D67 58%, #102957);
}

@media (max-width: 768px) {
    body .header-container { height: 76px; }
    body .logo img { height: 64px; }
    body .hero-section {
        min-height: auto;
        padding: 125px 0 76px;
    }
    body .hero-container { gap: 42px; }
    body .hero-title { font-size: clamp(2.15rem, 10vw, 3.2rem); }
}

/* ==========================================================================
   EDITORIAL CATEGORY EXPERIENCE + RELIABLE BRAND WORDMARKS
   ========================================================================== */
.category-gateway-section {
    padding: 112px 0;
    background:
        radial-gradient(circle at 10% 0%, rgba(0,168,218,.09), transparent 24%),
        #f8fafc;
}

.experience-grid {
    display: grid;
    grid-template-columns: 1.22fr .78fr;
    gap: 18px;
    min-height: 680px;
}

.experience-side {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 18px;
}

.experience-card {
    position: relative;
    display: block;
    overflow: hidden;
    isolation: isolate;
    border-radius: 34px;
    color: #fff;
    box-shadow: 0 22px 55px rgba(16,40,90,.16);
    transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease;
}

.experience-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 35px 75px rgba(16,40,90,.24);
}

.experience-repair {
    min-height: 680px;
    background: #07152e;
}

.experience-photo,
.experience-shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.experience-photo {
    object-fit: cover;
    transition: transform .8s cubic-bezier(.16,1,.3,1);
}

.experience-repair:hover .experience-photo {
    transform: scale(1.045);
}

.experience-shade {
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(5,17,42,.15), rgba(5,17,42,.18) 35%, rgba(5,17,42,.96) 100%),
        linear-gradient(90deg, rgba(5,17,42,.85), transparent 70%);
}

.experience-topline {
    position: absolute;
    z-index: 4;
    top: 28px;
    right: 30px;
    left: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgba(255,255,255,.72);
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .16em;
}

.experience-status {
    display: flex;
    align-items: center;
    gap: 7px;
}

.experience-status i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #71e54e;
    box-shadow: 0 0 0 6px rgba(113,229,78,.13);
}

.experience-content {
    position: absolute;
    z-index: 3;
    right: 38px;
    bottom: 38px;
    left: 38px;
}

.experience-icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    margin-bottom: 25px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 20px;
    background: rgba(255,255,255,.11);
    backdrop-filter: blur(14px);
    font-size: 1.35rem;
}

.experience-kicker {
    color: #54d8ff;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .04em;
}

.experience-content h3 {
    margin: 9px 0 13px;
    color: #fff;
    font-size: clamp(2.3rem, 4.6vw, 4.5rem);
    line-height: 1.03;
    letter-spacing: -.055em;
}

.experience-content p {
    max-width: 470px;
    color: rgba(255,255,255,.72);
    line-height: 1.8;
}

.experience-action {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    font-weight: 800;
}

.experience-action i {
    transition: transform .3s ease;
}

.experience-card:hover .experience-action i {
    transform: translateX(-7px);
}

.experience-price {
    position: absolute;
    z-index: 3;
    left: 32px;
    bottom: 32px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 17px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 18px;
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(16px);
}

.experience-price strong {
    font-size: 2rem;
    line-height: 1;
}

.experience-price span {
    color: rgba(255,255,255,.7);
    font-size: .65rem;
    line-height: 1.4;
}

.experience-shop,
.experience-care {
    min-height: 330px;
}

.experience-shop {
    background:
        radial-gradient(circle at 20% 20%, rgba(83,220,255,.24), transparent 25%),
        linear-gradient(135deg, #172d73, #5364bd);
}

.experience-product {
    position: absolute;
    z-index: 1;
    left: -25px;
    bottom: -20px;
    width: 60%;
    max-height: 310px;
    object-fit: contain;
    filter: drop-shadow(0 24px 30px rgba(0,0,0,.35));
    transition: transform .6s cubic-bezier(.16,1,.3,1);
}

.experience-shop:hover .experience-product {
    transform: translateY(-8px) scale(1.04);
}

.experience-orb {
    position: absolute;
    left: -60px;
    bottom: -90px;
    width: 300px;
    height: 300px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 50%;
    box-shadow: 0 0 0 35px rgba(255,255,255,.035), 0 0 0 70px rgba(255,255,255,.025);
}

.experience-side .experience-content {
    right: 28px;
    bottom: 28px;
    left: 28px;
}

.experience-side .experience-content h3 {
    font-size: clamp(1.65rem, 2.6vw, 2.7rem);
}

.experience-care {
    background: linear-gradient(135deg, #58a936, #75c950);
}

.care-rings {
    position: absolute;
    left: -80px;
    top: -110px;
    width: 360px;
    height: 360px;
    border: 1px solid rgba(255,255,255,.17);
    border-radius: 50%;
    box-shadow: 0 0 0 45px rgba(255,255,255,.055), 0 0 0 90px rgba(255,255,255,.035);
}

.care-symbol {
    position: absolute;
    left: 35px;
    top: 50%;
    color: rgba(255,255,255,.18);
    font-size: 8.5rem;
    transform: translateY(-40%);
}

.experience-care .experience-kicker {
    color: #eaffdf;
}

.brands-showcase-section {
    padding: 95px 0 80px !important;
    background: #fff !important;
    border: 0 !important;
}

.brands-showcase-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 40px;
}

.brands-showcase-head h2 {
    margin-top: 8px;
    color: var(--brand-navy);
    font-size: clamp(2rem, 3.7vw, 3rem);
    letter-spacing: -.045em;
}

.brands-showcase-head p {
    max-width: 420px;
    color: var(--text-muted);
}

.brand-wordmark-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    overflow: hidden;
    border: 1px solid #e5eaf2;
    border-radius: 28px;
    background: #e5eaf2;
    gap: 1px;
}

.brand-wordmark {
    min-height: 145px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    position: relative;
    overflow: hidden;
    color: #18366e;
    background: #fff;
    transition: color .35s ease, background .35s ease, transform .35s ease;
}

.brand-wordmark::after {
    content: "";
    position: absolute;
    right: 50%;
    bottom: 0;
    left: 50%;
    height: 4px;
    background: var(--brand-cyan);
    transition: right .35s ease, left .35s ease;
}

.brand-wordmark:hover {
    z-index: 2;
    color: #fff;
    background: var(--brand-navy);
}

.brand-wordmark:hover::after {
    right: 0;
    left: 0;
}

.brand-wordmark strong {
    font-family: 'Inter', sans-serif;
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -.04em;
}

.brand-wordmark i {
    font-size: 2rem;
}

.brand-wordmark small {
    position: absolute;
    bottom: 27px;
    font-size: .48rem;
    font-weight: 800;
    letter-spacing: .15em;
    opacity: .58;
}

.wordmark-ring {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border: 3px solid currentColor;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: -.06em;
}

.wordmark-hp {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #1686d9;
    font-size: 2.1rem;
    font-style: italic;
    font-weight: 800;
    letter-spacing: -.12em;
}

.brand-wordmark:hover .wordmark-hp {
    color: var(--brand-navy);
    background: #fff;
}

.brand-lenovo strong {
    padding: 9px 13px;
    color: #fff;
    background: #e2231a;
}

.brand-acer strong {
    color: #70ad47;
    font-size: 1.8rem;
    font-weight: 500;
}

.brand-razer {
    color: #20a94b;
}

.brand-rog {
    color: #df263d;
}

.brands-showcase-foot {
    display: flex;
    justify-content: center;
    gap: 38px;
    padding-top: 28px;
    color: #667085;
    font-size: .82rem;
    font-weight: 700;
}

.brands-showcase-foot span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.brands-showcase-foot i {
    color: var(--brand-cyan);
}

@media (max-width: 980px) {
    .experience-grid {
        grid-template-columns: 1fr;
    }
    .experience-repair {
        min-height: 600px;
    }
    .experience-side {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }
    .brand-wordmark-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 700px) {
    .category-gateway-section {
        padding: 78px 0;
    }
    .category-intro,
    .brands-showcase-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }
    .experience-grid {
        min-height: 0;
    }
    .experience-repair {
        min-height: 570px;
    }
    .experience-side {
        grid-template-columns: 1fr;
    }
    .experience-shop,
    .experience-care {
        min-height: 350px;
    }
    .experience-content {
        right: 25px;
        bottom: 27px;
        left: 25px;
    }
    .experience-content h3 {
        font-size: 2.7rem;
    }
    .experience-price {
        display: none;
    }
    .brand-wordmark-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .brand-wordmark {
        min-height: 120px;
    }
    .brands-showcase-foot {
        align-items: center;
        flex-direction: column;
        gap: 12px;
    }
}

@media (max-width: 768px) {
    body.view-repair {
        padding-bottom: 0 !important;
    }
    body.view-repair .main-footer {
        margin-bottom: 0 !important;
    }
    body.view-repair .footer-bottom {
        margin-bottom: 0 !important;
    }
    body.view-repair .copyright-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        width: 100%;
        margin: 0;
        direction: ltr;
        text-align: center;
    }
}