/* ============================================================================
   Sonia's Cleaners — Redesign design system
   Ported from the approved prototypes. Loaded after bootstrap + style.css.
   Public marketing pages only (admin uses a separate stylesheet).
   ============================================================================ */

/* Fonts + Tabler icon webfont are loaded via <link> in web/layouts/app.blade.php */

:root{
  --rd-deep:#15301f;   --rd-green:#1f3d2c;  --rd-mid:#2c5a3f;   --rd-soft:#3d6e4f;
  --rd-tint:#e7ebe1;   --rd-cream:#f5f2e9;  --rd-cream2:#f0ede2; --rd-beige:#e6e2d3; --rd-beige-deep:#dcd7c4;
  --rd-ink:#26291f;    --rd-muted:#5c6157;  --rd-mute2:#8b8f81; --rd-line:#d9d4c3;  --rd-gold:#e0b352;
  --rd-btn:linear-gradient(180deg,#2c5a3f 0%,#1f3d2c 100%);
  --rd-btn-shadow:0 6px 14px -4px rgba(21,48,31,.34),0 0 0 1px #1f3d2c;
  --rd-card-shadow:0 4px 7px -4px rgba(31,45,32,.07),0 0 0 1px #e6e2d3;
  --rd-card-shadow-lg:0 10px 26px -6px rgba(31,45,32,.14),0 0 0 1px rgba(31,45,32,.05);
  /* remap base site palette so any not-yet-rebuilt page inherits the brand */
  --green-218648:#15301f; --green-217A54:#2c5a3f; --green-235B45:#1f3d2c;
  --grey-f7f7f7:#f5f2e9; --grey-d1d1d1:#d9d4c3; --surface-warm:#f5f2e9; --surface-soft:#eef1e9;
  --border-soft:#d9d4c3; --black-171717:#26291f; --black-5D5D5D:#5c6157;
  --shadow-soft:0 18px 46px -12px rgba(21,48,31,.16);
}

body{margin:0;background:var(--rd-cream);color:var(--rd-ink);font-family:'Inter Tight',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--rd-mid);text-decoration:none}
a:hover{color:var(--rd-deep)}

/* ---- Prototype helper classes --------------------------------------------- */
.wm{display:flex;flex-direction:column;line-height:1;font-family:'Playfair Display',serif}
.wm .w1{font-weight:500}
.wm .w2{font-weight:500;letter-spacing:.32em}
.navlink{font:500 15px/1 'Inter Tight',sans-serif;text-decoration:none;transition:color .15s}
.rd-eyebrow{display:inline-flex;align-items:center;gap:9px;font:600 12px/1 'Inter Tight',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--rd-soft);margin-bottom:16px}
.rd-eyebrow .rd-tick{width:26px;height:1px;background:var(--rd-soft)}
.rd-h1{font-family:'Playfair Display',serif;font-weight:500;font-size:clamp(38px,5vw,54px);line-height:1.08;letter-spacing:-.01em;margin:0 0 20px}
.rd-h2{font-family:'Playfair Display',serif;font-weight:500;font-size:clamp(28px,3.4vw,38px);line-height:1.18;letter-spacing:-.005em;color:var(--rd-ink);margin:0 0 14px}
.rd-lead{font:400 17px/1.6 'Inter Tight',sans-serif;color:var(--rd-muted);margin:0}
.btn-primary,a.btn-primary{text-decoration:none;font:600 16px/1 'Inter Tight',sans-serif!important;color:#fff!important;background:var(--rd-btn)!important;box-shadow:var(--rd-btn-shadow)!important;padding:16px 26px;border-radius:12px!important;display:inline-flex;align-items:center;justify-content:center;gap:9px;border:none!important;cursor:pointer;transition:filter .15s,transform .15s}
.btn-primary:hover{filter:brightness(.94);transform:translateY(-1px);color:#fff!important}
.btn-ghost{text-decoration:none;font:600 15px/1 'Inter Tight',sans-serif;color:var(--rd-ink);background:#fff;box-shadow:var(--rd-card-shadow);padding:15px 22px;border-radius:12px;display:inline-flex;align-items:center;gap:8px}
.btn-ghost:hover{color:var(--rd-deep)}
.svc-card{border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--rd-card-shadow);transition:box-shadow .18s,transform .18s;display:block;color:inherit}
.svc-card:hover{box-shadow:0 16px 32px -10px rgba(21,48,31,.22),0 0 0 1px var(--rd-line);transform:translateY(-3px);color:inherit}
.pcard{background:#fff;border-radius:18px;box-shadow:var(--rd-card-shadow);padding:32px}
.prow{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0;border-bottom:1px solid var(--rd-cream2);font:400 15px/1.4 'Inter Tight',sans-serif;color:var(--rd-muted)}
.prow:last-of-type{border-bottom:none}
.prow .prow-price{font:600 15px/1.3 'Inter Tight',sans-serif;color:var(--rd-ink);white-space:nowrap}

/* ---- Layout helpers (classes so media queries can restack) ---------------- */
.rd-wrap{max-width:1200px;margin:0 auto;padding:0 48px}
.rd-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.rd-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.rd-svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.rd-cta-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.rd-foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px}

/* ---- FAQ (native details, no extra JS) ------------------------------------ */
.rd-faq-item{border-bottom:1px solid var(--rd-beige)}
.rd-faq-item>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:22px 0;font:600 18px/1.4 'Inter Tight',sans-serif;color:var(--rd-ink)}
.rd-faq-item>summary::-webkit-details-marker{display:none}
.rd-faq-item>summary .rd-faq-ico{font-size:18px;color:var(--rd-mid);transition:transform .18s}
.rd-faq-item[open]>summary .rd-faq-ico{transform:rotate(45deg)}
.rd-faq-item>p{font:400 15px/1.7 'Inter Tight',sans-serif;color:var(--rd-muted);margin:0 0 24px;padding-right:32px}

/* ---- Utility bar + primary nav (kept from existing markup, restyled) ------ */
.topnav{background-color:var(--rd-deep)!important;padding:12px 0}
.topnav .ym_container,.topdate,.topcall a,.toplocation a{color:var(--rd-cream)!important}
.topcall a:hover,.toplocation a:hover{color:#fff!important}
/* Light nav (inner pages, default) */
.main_head{background:var(--rd-cream)!important;border:0;border-bottom:1px solid var(--rd-beige)!important;padding:18px 48px!important;min-height:76px;max-width:100%!important;border-radius:0}
.main_head .nav-link{color:var(--rd-muted)!important;font:500 15px/1 'Inter Tight',sans-serif!important;padding:12px 14px}
.main_head .nav-link:hover,.main_head .nav-link.active{color:var(--rd-green)!important}
.main_head .nav-link.active::after{background-color:var(--rd-green)!important}
.main_head .navbar-brand img{max-height:44px}
.main_head .trackorder-btn{border-color:var(--rd-line)!important;color:var(--rd-ink)!important;background:transparent!important;border-radius:10px}
.main_head .trackorder-btn:hover{background:rgba(31,45,32,.06)!important}
/* Dark nav (Home only) */
body.rd-home .main_head{background:var(--rd-deep)!important;border-bottom:0!important}
body.rd-home .main_head .nav-link{color:rgba(245,242,233,.72)!important}
body.rd-home .main_head .nav-link:hover,body.rd-home .main_head .nav-link.active{color:#fff!important}
body.rd-home .main_head .nav-link.active::after{background-color:var(--rd-cream)!important}
body.rd-home .main_head .navbar-brand img{filter:brightness(0) invert(1)}
body.rd-home .main_head .trackorder-btn{border-color:rgba(245,242,233,.4)!important;color:#fff!important}
body.rd-home .main_head .trackorder-btn:hover{background:rgba(245,242,233,.12)!important}

/* ---- Booking card (lifted working form, styled to the design card) -------- */
.about_tab{background:var(--rd-cream)!important;border:1px solid rgba(31,45,32,.05)!important;border-radius:18px!important;box-shadow:0 24px 60px rgba(0,0,0,.35)!important;margin:0!important;max-width:none;color:var(--rd-ink);padding:22px!important}
.about_tab h3{font:700 19px/1.2 'Inter Tight',sans-serif!important;color:var(--rd-ink)!important;border:0!important;margin:0 0 14px!important;padding:0!important}
.about_tab .nav,.about_tab .nav-pills{background:var(--rd-beige)!important;border-radius:10px;padding:4px;gap:2px;border:0}
.about_tab .nav-link{color:var(--rd-muted)!important;font:600 13px/1 'Inter Tight',sans-serif!important;border-radius:7px!important;background:transparent!important;box-shadow:none!important;padding:9px 8px}
.about_tab .nav-link.active{background:#fff!important;color:var(--rd-ink)!important;box-shadow:var(--rd-card-shadow)!important}
.about_tab label,.about_tab .form-label{font:600 12px/1.2 'Inter Tight',sans-serif!important;color:var(--rd-muted)!important}
.about_tab .form-control,.about_tab .form-select,.about_tab .inp{border:1px solid var(--rd-line)!important;border-radius:10px!important;background:#fff!important;color:var(--rd-ink)!important;min-height:46px;font:400 15px/1.4 'Inter Tight',sans-serif!important}
.about_tab .form-control:focus,.about_tab .form-select:focus{border-color:var(--rd-mid)!important;box-shadow:0 0 0 3px rgba(44,90,63,.12)!important}
.about_tab .main_btn{background:var(--rd-btn)!important;border:none!important;color:#fff!important;box-shadow:var(--rd-btn-shadow)!important;border-radius:12px!important;font:600 16px/1 'Inter Tight',sans-serif!important;width:100%;min-height:50px}

/* ---- Buttons on not-yet-rebuilt pages ------------------------------------- */
.main_btn{background:var(--rd-btn)!important;border:none!important;color:#fff!important;box-shadow:var(--rd-btn-shadow)!important;border-radius:12px!important;font-family:'Inter Tight',sans-serif!important;font-weight:600!important}
.main_btn:hover{filter:brightness(.94);color:#fff!important}

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width:900px){
  .rd-wrap{padding:0 20px}
  .rd-hero-grid,.rd-grid-2,.rd-cta-grid,.rd-foot-grid{grid-template-columns:1fr;gap:32px}
  .rd-svc-grid{grid-template-columns:1fr}
  .main_head{padding:14px 20px!important}
}
@media (min-width:901px) and (max-width:1100px){
  .rd-svc-grid{grid-template-columns:repeat(2,1fr)}
}

/* ---- Fixes: mobile hamburger + track-order on the dark Home nav --------- */
/* Hamburger bars are #171717 (invisible on dark green) — make them cream on Home */
body.rd-home .main_head .toggler-bar{background-color:#f5f2e9!important}
/* Track booking button legible on the dark Home nav */
body.rd-home .main_head .trackorder-btn{border-color:rgba(245,242,233,.45)!important;color:#f5f2e9!important}
body.rd-home .main_head .trackorder-btn img{filter:brightness(0) invert(1)}
body.rd-home .main_head .trackorder-btn:hover{background:rgba(245,242,233,.12)!important;color:#fff!important}
/* On mobile the collapsed menu opens over the dark hero — give it a readable panel */
@media (max-width:991px){
  body.rd-home .main_head .navbar-collapse{background:var(--rd-deep);border-top:1px solid rgba(245,242,233,.15);margin-top:12px;padding:8px 0 4px}
}

/* ---- Compact the hero booking card ------------------------------------- */
/* Drop the redundant intro panel (kicker + duplicate heading + trust row) that made the card tall */
#scheduleForm .booking-intro{display:none!important}
#scheduleForm .form-label{margin-bottom:4px!important;font-weight:600}
#scheduleForm .form-text{font-size:11px;line-height:1.3}
#scheduleForm .schedule-helper{margin:0 0 12px!important}
#scheduleForm .nav-pills{margin-bottom:14px!important}
/* Left-align all field text — the Date field was centered while the rest were left */
#scheduleForm .form-control,
#scheduleForm .form-select,
#scheduleForm .flatpickr-input,
#scheduleForm input,
#scheduleForm select{text-align:left!important}
/* Pills stay centered (they are buttons, not fields) */
#scheduleForm .nav-pills .nav-link{text-align:center!important}