/* ============================================================
   سعادت رنت — Desktop / responsive layer  (activates ≥ 880px)
   Loaded AFTER styles.css. Mobile styles remain the default.
   ============================================================ */

:root{ --maxw: 1200px; --nav-h: 72px; }

/* ---- desktop navbar hidden on mobile ---- */
.navbar{ display:none; }

@media (min-width:880px){

  /* ====== shell becomes full-width site ====== */
  body{ background:var(--paper); }
  .app{
    max-width:none; width:100%;
    box-shadow:none; background:var(--paper);
    padding-bottom:0;
    padding-top:var(--nav-h);
  }

  /* hide mobile chrome */
  .appbar{ display:none; }
  .tabbar{ display:none; }
  .dock{ display:none; }
  .drawer, .drawer-bg{ display:none !important; }
  .floaters{ left:auto; right:28px; bottom:28px; }

  /* ====== desktop navbar ====== */
  .navbar{
    display:block; position:fixed; top:0; left:0; right:0; z-index:50; height:var(--nav-h);
    background:color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter:saturate(1.4) blur(14px);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    max-width:var(--maxw); height:var(--nav-h); margin:0 auto; padding:0 28px;
    display:flex; align-items:center; gap:28px;
  }
  .nav-brand img{ height:34px; width:auto; display:block; }
  .nav-links{ display:flex; align-items:center; gap:4px; flex:1; }
  .nav-links a{
    padding:9px 14px; border-radius:10px; font-size:14.5px; font-weight:600; color:var(--ink-2);
    transition:.15s; white-space:nowrap;
  }
  .nav-links a:hover{ background:var(--accent-sft); color:var(--accent); }
  .nav-links a.active{ color:var(--accent); }
  .nav-cta{ display:flex; align-items:center; gap:16px; }
  .nav-phone{ display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:14px; color:var(--ink); }
  .nav-phone svg{ width:18px; height:18px; color:var(--accent); }

  /* ====== generic content width ====== */
  .wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:28px; }
  section{ padding-block:46px; }
  .chips{ max-width:var(--maxw); margin-inline:auto; padding-inline:28px; }
  .reviews{ max-width:var(--maxw); margin-inline:auto; padding-inline:28px; }

  /* type scales up */
  .h1{ font-size:46px; }
  .h2{ font-size:30px; }
  .page-hero .h1{ font-size:48px; }

  /* ====== HOME hero — two columns ====== */
  .home-hero{
    max-width:var(--maxw); margin-inline:auto; padding:54px 28px 32px;
    display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
  }
  .home-hero .hero-copy .h1{ font-size:50px; line-height:1.1; }
  .home-hero .hero-copy .lead{ font-size:18px; max-width:34ch; }
  .home-hero .hero-visual{ position:relative; }
  .home-hero .hero-visual .ph{ aspect-ratio:4/3; border-radius:var(--r-xl); border:1px solid var(--line); }
  .home-hero .bform{ margin-top:0; }
  /* booking form becomes a horizontal row on desktop home */
  .bform.row-form{ display:grid; grid-template-columns:minmax(190px,1.25fr) repeat(4,minmax(118px,.85fr)) auto; gap:10px; align-items:end; padding:16px; }
  .bform.row-form .field{ margin-bottom:0; }
  .bform.row-form .btn{ height:62px; }
  .bform.row-form .row-2{ display:contents; }
  .booking-picker{
    left:50%; bottom:auto; top:50%;
    max-width:430px; border-radius:24px;
    transform:translate(-50%,-46%) scale(.96); opacity:0;
    box-shadow:var(--sh-3);
  }
  .booking-picker.open{ transform:translate(-50%,-50%) scale(1); opacity:1; }
  .booking-picker .grip{ display:none; }
  .booking-picker-bg{ background:rgba(15,42,49,.5); }

  .trust{ max-width:760px; }

  /* ====== card grids reflow to more columns ====== */
  .grid-2{ grid-template-columns:repeat(4,1fr); gap:22px; }
  .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  .car-card .media{ aspect-ratio:16/10; }

  /* categories as a grid, not a scroller, on desktop */
  .chips.cat-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; overflow:visible; }
  .chips.cat-grid .chip{ height:auto; flex-direction:column; gap:9px; padding:18px 10px; border-radius:var(--r); justify-content:center; }
  .chips.cat-grid .chip svg{ width:26px; height:26px; color:var(--accent); }

  /* why-us / features in columns */
  .feature-grid{ display:grid !important; grid-template-columns:repeat(2,1fr); gap:14px; }
  .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
  .step{ flex-direction:column; padding:0; }

  /* brands wider */
  .brands{ grid-template-columns:repeat(6,1fr); }

  /* reviews show 3 across, no scroll */
  .reviews{ display:grid; grid-template-columns:repeat(3,1fr); overflow:visible; }
  .review{ flex:none; }

  /* trust strip bigger icons */
  .trust .t .ic{ width:54px; height:54px; }
  .trust .t .ic svg{ width:25px; height:25px; }

  /* ====== section heads ====== */
  .sec-head .h2{ font-size:28px; }

  /* ====== FAQ wider, two-column on big pages ====== */
  .faq{ max-width:860px; }

  /* big CTA */
  .cta-final{ max-width:var(--maxw); margin-inline:auto; padding:54px; }
  .cta-final h3{ font-size:34px; }

  /* ====== footer becomes 4-col ====== */
  .footer{ padding:52px 0 30px; }
  .footer-inner{ max-width:var(--maxw); margin-inline:auto; padding-inline:28px; }
  .footer .foot-top{ display:grid; grid-template-columns:1.4fr 2fr; gap:40px; margin-bottom:32px; }
  .footer .cols{ grid-template-columns:repeat(3,1fr); gap:32px; margin-bottom:0; }
  .footer .brand img{ height:34px; }

  /* ====== CARS list page → sidebar + grid ====== */
  .cars-layout{ max-width:var(--maxw); margin-inline:auto; padding:24px 28px 60px; display:grid; grid-template-columns:280px 1fr; gap:32px; align-items:start; }
  .filter-aside{ position:sticky; top:calc(var(--nav-h) + 24px); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; }
  .filter-aside h3{ font-size:16px; font-weight:700; margin-bottom:4px; }
  .desk-results .grid-2{ grid-template-columns:repeat(3,1fr); }

  /* ====== CAR detail → two columns ====== */
  .car-detail{ max-width:var(--maxw); margin-inline:auto; padding:24px 28px 60px; display:grid; grid-template-columns:1.4fr .85fr; gap:40px; align-items:start; }
  .car-detail .detail-main{ min-width:0; }
  .car-detail .detail-side{ position:sticky; top:calc(var(--nav-h) + 24px); }

  /* ====== content pages center ====== */
  .page-hero{ max-width:var(--maxw); margin-inline:auto; padding:46px 28px 16px; }
  .page-hero .lead{ font-size:18px; max-width:62ch; }
  .crumb{ max-width:var(--maxw); margin-inline:auto; }
  .prose{ max-width:760px; }
  .prose p{ font-size:15.5px; }
  .info-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
  .info-row{ margin-bottom:0; }
  .stat-grid{ grid-template-columns:repeat(4,1fr); }
  .contact-cols{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
  .price-table th, .price-table td{ padding:15px 18px; font-size:14px; }

  /* hover lift */
  .car-card:hover{ transform:translateY(-3px); }
}

/* very wide */
@media (min-width:1280px){
  .home-hero .hero-copy .h1{ font-size:56px; }
}

/* ====== filter / sort sheet → centered modal on desktop ====== */
@media (min-width:880px){
  .sheet{
    left:50%; bottom:auto; top:50%;
    transform:translate(-50%,-46%) scale(.98);
    border-radius:var(--r-xl); max-width:480px; max-height:84vh;
    opacity:0; transition:transform .25s, opacity .25s;
  }
  .sheet.open{ transform:translate(-50%,-50%) scale(1); opacity:1; }
  .sheet .grip{ display:none; }
  .sheet-bg{ background:rgba(15,42,49,.5); }

  /* cars page: filter bar centers; show inline */
  .filterbar{ top:var(--nav-h); max-width:var(--maxw); margin-inline:auto; background:var(--paper); padding-top:8px; }
  .result-meta{ max-width:var(--maxw); margin-inline:auto; }

  /* car detail desktop two-column */
  .detail-grid{ max-width:var(--maxw); margin-inline:auto; padding:8px 28px 40px;
    display:grid; grid-template-columns:1.5fr .85fr; gap:40px; align-items:start; }
  .detail-grid .detail-side{ position:sticky; top:calc(var(--nav-h) + 20px); }
  .detail-grid .detail-side .bform{ margin:0; }
  .detail-grid .wrap{ max-width:none; margin:0; padding-inline:0; }
  .detail-grid .gallery{ margin-bottom:8px; }
  .gallery .main{ border-radius:var(--r-lg); overflow:hidden; }
  .gallery .thumbs{ padding-inline:0; }

  /* car detail lower sections: keep a comfortable reading width */
  .detail-app .detail-grid ~ section > .wrap,
  .detail-app .detail-grid ~ section.wrap{ }
  .detail-app .detail-grid ~ section{ max-width:980px; margin-inline:auto; }
  .detail-app .detail-grid ~ section .grid-2{ grid-template-columns:repeat(3,1fr); }
}