@media(max-width:800px){
body{font-size:15px}.topbar{display:none}.nav-wrap{min-height:72px;padding:0 16px;gap:10px}.brand{margin-left:0;margin-right:auto}.brand img{width:155px;height:58px}.nav-wrap nav{display:none}.quote-btn{font-size:13px;padding:8px 11px}.section{padding:48px 18px}.section-head h2{font-size:29px}.hero{min-height:auto;padding:42px 18px;grid-template-columns:1fr;gap:22px}.hero-content h1{font-size:42px}.hero-content p{font-size:17px}.hero-art{min-height:260px}.trust{margin:0 18px 20px;grid-template-columns:repeat(2,1fr);padding:12px}.trust div{border-bottom:1px solid var(--line);border-left:0;padding:8px}.product-grid{grid-template-columns:1fr 1fr;gap:12px}.product-img{height:145px}.product-body{padding:13px}.product-body h3{font-size:18px}.prices span{font-size:12px}.card-btn{font-size:13px;padding:9px}.service-mini{grid-template-columns:1fr 1fr;gap:12px}.footer-grid{grid-template-columns:1fr;gap:20px}.inner-hero{padding:50px 18px}.inner-hero h1{font-size:40px}.about-layout,.request-layout,.contact-layout{grid-template-columns:1fr;padding:45px 18px}.brand-story{grid-template-columns:1fr}.services-grid{grid-template-columns:1fr 1fr}.order-side{position:static}.order-product{grid-template-columns:55px 1fr;}.order-product select{grid-column:1/-1}.fields{grid-template-columns:1fr}.wide{grid-column:auto}.contact-hero{padding:55px 18px}.contact-hero h1{font-size:42px}.features{grid-template-columns:1fr 1fr;margin:0 18px 45px}.features div{border-bottom:1px solid var(--line);border-left:0}.success{padding:35px 18px}.success-card h1{font-size:34px}
}@media(max-width:800px){.trust .trust-icon{width:23px;height:23px;margin-bottom:3px}.trust strong{font-size:25px}}


/* ============================================================
   CONTACT PAGE — MOBILE FIX / ATTACHED AREA ONLY
   Desktop CSS is untouched.
   ============================================================ */
@media (max-width:800px){

  /* Contact cards + form: full mobile width */
  .contact-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) !important;
    width:calc(100% - 36px) !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 auto !important;
    padding:38px 0 !important;
    box-sizing:border-box !important;
    gap:18px !important;
  }

  .contact-layout > *{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    box-sizing:border-box !important;
  }

  .contact-layout input,
  .contact-layout textarea,
  .contact-layout button{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  /* Four contact features: two columns on mobile */
  .features{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    width:calc(100% - 36px) !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 auto 40px !important;
    box-sizing:border-box !important;
  }

  .features > div{
    min-width:0 !important;
    width:100% !important;
    box-sizing:border-box !important;
    overflow:hidden;
  }
}


/* ============================================================
   PRODUCTS PAGE — MOBILE
   Two products per row only.
   Existing contact-page rules remain unchanged.
   ============================================================ */
@media (max-width:800px){
  .product-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
    width:100% !important;
    min-width:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .product-grid > *{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  .product-card{
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
}

/* ============================================================
   REQUEST PAGE — MOBILE
   Scoped only to the "اطلب الآن" page.
   Existing contact/products mobile rules remain untouched.
   ============================================================ */
@media (max-width:800px){
  .request-layout{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    width:calc(100% - 24px) !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 auto !important;
    padding:32px 0 !important;
    gap:16px !important;
    box-sizing:border-box !important;
  }

  .request-layout > .order-form,
  .request-layout > .order-side{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    box-sizing:border-box !important;
    padding:20px !important;
  }

  .request-layout .order-form h2{
    font-size:28px !important;
    line-height:1.3 !important;
    margin-bottom:20px !important;
  }

  .request-layout .fields{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:13px !important;
    width:100% !important;
    min-width:0 !important;
  }

  .request-layout .fields .wide{
    grid-column:auto !important;
  }

  .request-layout .fields label,
  .request-layout .fields input,
  .request-layout .fields textarea,
  .request-layout .fields select{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  .request-layout .order-products{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:10px !important;
    width:100% !important;
    min-width:0 !important;
  }

  .request-layout .order-product{
    display:grid !important;
    grid-template-columns:46px minmax(0,1fr) !important;
    gap:10px !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    padding:10px !important;
    box-sizing:border-box !important;
    align-items:center !important;
  }

  .request-layout .order-product > input[type="number"]{
    width:46px !important;
    min-width:46px !important;
    max-width:46px !important;
    margin:0 !important;
    padding:9px 5px !important;
    text-align:center !important;
    box-sizing:border-box !important;
  }

  .request-layout .order-product > div{
    min-width:0 !important;
    overflow:hidden !important;
  }

  .request-layout .order-product b,
  .request-layout .order-product small{
    display:block !important;
    min-width:0 !important;
    overflow-wrap:anywhere !important;
  }

  .request-layout .order-product select{
    grid-column:1 / -1 !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    margin-top:0 !important;
  }

  .request-layout .options{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    width:100% !important;
    min-width:0 !important;
    margin:18px 0 !important;
  }

  .request-layout .options label{
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
    min-width:0 !important;
  }

  .request-layout .options input{
    width:auto !important;
    min-width:auto !important;
    max-width:none !important;
    margin:0 !important;
  }

  .request-layout .order-form > button.primary{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  .request-layout .order-side{
    position:static !important;
  }

  .request-layout .order-side h2{
    font-size:25px !important;
    line-height:1.4 !important;
  }

  .request-layout .order-side p{
    font-size:15px !important;
    line-height:1.9 !important;
  }

  .request-layout .side-contact{
    width:100% !important;
    min-width:0 !important;
  }

  .request-layout .side-contact a{
    overflow-wrap:anywhere !important;
  }
}


/* ============================================================
   REQUEST PAGE — QUANTITY CONTROL ONLY
   Mobile CSS only. No other page is affected.
   ============================================================ */
@media (max-width:800px){
  .request-layout .order-product{
    grid-template-columns:42px minmax(0,1fr) !important;
    gap:10px !important;
  }

  .request-layout .order-product > input[type="number"]{
    width:42px !important;
    min-width:42px !important;
    max-width:42px !important;
    height:58px !important;
    margin:0 !important;
    padding:20px 3px 3px !important;
    text-align:center !important;
    font-size:14px !important;
    box-sizing:border-box !important;
  }

  .request-layout .order-product > input[type="number"]::-webkit-inner-spin-button,
  .request-layout .order-product > input[type="number"]::-webkit-outer-spin-button{
    opacity:1 !important;
  }

  .request-layout .order-product > input[type="number"]{
    -moz-appearance:auto;
  }
}


/* ============================================================
   REQUEST PAGE — COMPACT QUANTITY CONTROL
   Mobile.css only. No other page affected.
   ============================================================ */
@media (max-width:800px){
  .request-layout .order-product{
    grid-template-columns:44px minmax(0,1fr) !important;
    gap:10px !important;
  }

  .request-layout .order-product > .qty-control{
    width:44px !important;
    height:58px !important;
    min-width:44px !important;
    max-width:44px !important;
    display:grid !important;
    grid-template-columns:1fr 18px !important;
    grid-template-rows:1fr 1fr !important;
    position:relative !important;
    overflow:hidden !important;
    border:1px solid #d9e5ed !important;
    border-radius:9px !important;
    background:#fff !important;
    box-sizing:border-box !important;
    box-shadow:0 3px 10px rgba(7,57,93,.08) !important;
  }

  .request-layout .order-product > .qty-control .qty-input{
    grid-column:1 !important;
    grid-row:1 / 3 !important;
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    border:0 !important;
    outline:0 !important;
    padding:0 1px !important;
    margin:0 !important;
    text-align:center !important;
    font-size:14px !important;
    font-weight:800 !important;
    color:#173d59 !important;
    background:transparent !important;
    box-sizing:border-box !important;
    appearance:textfield !important;
    -moz-appearance:textfield !important;
  }

  .request-layout .order-product > .qty-control .qty-input::-webkit-inner-spin-button,
  .request-layout .order-product > .qty-control .qty-input::-webkit-outer-spin-button{
    -webkit-appearance:none !important;
    margin:0 !important;
  }

  .request-layout .order-product > .qty-control .qty-btn{
    grid-column:2 !important;
    width:18px !important;
    min-width:18px !important;
    max-width:18px !important;
    height:29px !important;
    min-height:29px !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-left:1px solid #e2ebf1 !important;
    border-radius:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:12px !important;
    line-height:1 !important;
    font-weight:900 !important;
    color:#0879bf !important;
    background:#f7fbfe !important;
    cursor:pointer !important;
    box-sizing:border-box !important;
  }

  .request-layout .order-product > .qty-control .qty-plus{
    grid-row:1 !important;
    border-bottom:1px solid #e2ebf1 !important;
  }

  .request-layout .order-product > .qty-control .qty-minus{
    grid-row:2 !important;
  }

  .request-layout .order-product > .qty-control .qty-btn:active{
    background:#eaf5fb !important;
  }
}


/* ============================================================
   MY ORDERS — MOBILE ONLY
   ============================================================ */
@media(max-width:800px){
  .my-orders-hero{padding:50px 18px !important}
  .my-orders-section{padding:38px 12px 55px !important}
  .my-orders-shell{width:100%;max-width:100%}
  .my-orders-login{padding:28px 18px;border-radius:14px}
  .my-orders-login h2,.my-orders-heading h2{font-size:27px;line-height:1.35}
  .my-orders-heading{display:flex;align-items:stretch;justify-content:space-between;gap:12px;margin-bottom:18px}
  .my-orders-heading>div{min-width:0}
  .my-orders-exit{flex:0 0 auto;align-self:flex-start;padding:9px 14px}
  .my-orders-table-wrap{border-radius:13px;overflow:visible;background:transparent;border:0;box-shadow:none}
  .my-orders-table,.my-orders-table tbody,.my-orders-table tr,.my-orders-table td{display:block;width:100%;box-sizing:border-box}
  .my-orders-table thead{display:none}
  .my-orders-table tbody tr.my-order-row{border:1px solid var(--line);border-radius:13px;background:#fff;margin-bottom:10px;padding:10px 12px;box-shadow:0 8px 22px rgba(8,42,74,.05)}
  .my-orders-table tbody tr.my-order-row td{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed #e3ebf0;text-align:right}
  .my-orders-table tbody tr.my-order-row td:last-child{border-bottom:0}
  .my-orders-table tbody tr.my-order-row td::before{content:attr(data-label);color:var(--muted);font-size:12px;font-weight:700}
  .my-orders-table tbody tr.my-order-row td[data-label="رقم الطلب"] strong{font-size:18px}
  .my-order-details-row{margin-top:-1px !important}
  .my-order-details-row td{padding:0 !important;border:0 !important;background:transparent !important}
  .my-order-details{background:#fbfdfe;border:1px solid var(--line);border-radius:13px;padding:14px;margin:-3px 0 12px}
  .my-order-details-head{display:block;padding-bottom:10px}
  .my-order-details-head span{display:block;margin-top:3px}
  .my-order-item{align-items:flex-start}
  .my-order-services{grid-template-columns:1fr;gap:8px}
  .my-orders-note{padding:14px}
  .my-orders-note a{margin-right:0}
}


/* ============================================================
   HEADER — MOBILE MENU + LOGO ONLY
   Desktop header remains completely untouched.
   ============================================================ */
@media (max-width:800px){
  .nav-wrap{
    position:relative !important;
    min-height:86px !important;
    padding:0 16px !important;
    gap:0 !important;
  }

  .brand{
    position:absolute !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    margin:0 !important;
    height:70px !important;
    z-index:2 !important;
  }

  .brand img{
        width: 144px !important;
        height: 90px !important;
        padding-left: 20px !important;
  }

  .mobile-menu-toggle{
    display:flex !important;
    position:absolute !important;
    right:16px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:42px !important;
    height:42px !important;
    padding:0 !important;
    border:1px solid #dce8ef !important;
    border-radius:10px !important;
    background:#fff !important;
    box-shadow:0 6px 16px rgba(8,42,74,.08) !important;
    align-items:center !important;
    justify-content:center !important;
    flex-direction:column !important;
    gap:5px !important;
    cursor:pointer !important;
    z-index:5 !important;
  }

  .mobile-menu-toggle span{
    display:block !important;
    width:20px !important;
    height:2px !important;
    border-radius:2px !important;
    background:#0b2d4d !important;
    transition:.2s !important;
  }

  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .nav-wrap nav{
    display:none !important;
    position:absolute !important;
    top:76px !important;
    right:12px !important;
    left:12px !important;
    width:auto !important;
    padding:8px !important;
    margin:0 !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:3px !important;
    background:#fff !important;
    border:1px solid #e2ebf1 !important;
    border-radius:12px !important;
    box-shadow:0 16px 35px rgba(8,42,74,.13) !important;
    z-index:50 !important;
  }

  .nav-wrap nav.mobile-menu-open{display:flex !important}
  .nav-wrap nav a{
    display:block !important;
    width:100% !important;
    padding:12px 14px !important;
    border-radius:8px !important;
    font-size:15px !important;
    box-sizing:border-box !important;
  }
  .nav-wrap nav a:hover{background:#f2f8fc !important}

  .quote-btn{
    position:absolute !important;
    left:6px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    z-index:5 !important;
    font-size:13px !important;
    padding:5px 5px !important;
  }
}

@media (min-width:801px){
  .mobile-menu-toggle{display:none !important}
}

/* ============================================================
   MOBILE MENU — FINAL VISUAL FIX
   Mobile only. Desktop header is untouched.
   ============================================================ */
@media (max-width:800px){
  .nav-wrap nav.mobile-menu-open{
    display:flex !important;
    background:#ffffff !important;
    background-color:#ffffff !important;
    opacity:1 !important;
    visibility:visible !important;
    border:1px solid #d9e6ee !important;
    box-shadow:0 18px 40px rgba(8,42,74,.16) !important;
    overflow:hidden !important;
  }

  .nav-wrap nav.mobile-menu-open a{
    position:relative !important;
    display:block !important;
    width:100% !important;
    background:#fff !important;
    color:#0b2d4d !important;
    border-radius:0 !important;
    padding:13px 14px !important;
    box-sizing:border-box !important;
  }

  .nav-wrap nav.mobile-menu-open a:not(:last-child)::after{
    content:"" !important;
    position:absolute !important;
    right:14px !important;
    left:14px !important;
    bottom:0 !important;
    border-bottom:1px dashed #cfdde6 !important;
    height:0 !important;
  }

  .nav-wrap nav.mobile-menu-open a:hover,
  .nav-wrap nav.mobile-menu-open a:active{
    background:#f5f9fc !important;
  }
}

/* ============================================================
   MOBILE MENU — STACKING / OPAQUE PANEL FIX
   Mobile only. Desktop header remains untouched.
   ============================================================ */
@media (max-width:800px){
  .site-header{
    position:relative !important;
    z-index:9999 !important;
  }

  .nav-wrap{
    position:relative !important;
    z-index:10000 !important;
  }

  .nav-wrap nav.mobile-menu-open{
    z-index:10001 !important;
    background:#fff !important;
    background-image:none !important;
    opacity:1 !important;
    visibility:visible !important;
    isolation:isolate !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }

  .nav-wrap nav.mobile-menu-open a{
    z-index:1 !important;
    background:#fff !important;
    opacity:1 !important;
  }
}

@media (max-width: 700px) {
    .product-card .product-en,
    .product-card small {
        font-size: 10px;
        white-space: nowrap;
    }
}
/* ============================================================
   SERVICES PAGE — MOBILE ONLY
   Scoped to services page. Desktop CSS remains untouched.
   ============================================================ */
@media (max-width:800px){
  .services-page{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 auto !important;
    padding:38px 18px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  .services-page .services-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    box-sizing:border-box !important;
  }

  .services-page .service-card{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    min-height:0 !important;
    padding:18px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  .services-page .service-icon{
    width:42px !important;
    height:42px !important;
    font-size:19px !important;
  }

  .services-page .service-card h2{
    font-size:18px !important;
    line-height:1.45 !important;
    margin:12px 0 6px !important;
    overflow-wrap:anywhere !important;
  }

  .services-page .service-card p{
    font-size:13px !important;
    line-height:1.8 !important;
    overflow-wrap:anywhere !important;
  }

  .services-page .service-card img{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    box-sizing:border-box !important;
  }
}

/* ============================================================
   WIFI PROGRAM PAGE — MOBILE ONLY
   ============================================================ */
@media(max-width:800px){
  .wifi-hero{padding:44px 18px !important}
  .wifi-hero-inner{grid-template-columns:1fr !important;gap:25px !important}
  .wifi-hero h1{font-size:38px !important}
  .wifi-hero-copy p{font-size:15px !important;line-height:1.85 !important}
  .wifi-hero-visual{height:250px !important}
  .wifi-hero-visual img{width:220px !important;height:220px !important}
  .wifi-phone-card{right:4px !important;bottom:4px !important}
  .wifi-article{padding:48px 18px !important}
  .wifi-article-head h2{font-size:28px !important;line-height:1.4 !important}
  .wifi-article-grid{grid-template-columns:1fr !important;gap:15px !important}
  .wifi-content{padding:22px !important}
  .wifi-content h2,.wifi-content h3{font-size:22px !important}
  .wifi-note{margin:0 18px 48px !important;padding:22px !important;display:block !important}
  .wifi-note h2{font-size:22px !important}
  .wifi-note a{margin-top:15px !important;width:100% !important}
}