/* ============================================================================
   web-skin.css: the Muna Noor website look on the five customer pages
   ============================================================================
   Source design: the marketing site (Claude Design export). Spec:
   docs/specs/2026-09-28-website-design-system-design.md.

   Loaded LAST in <head> (after tokens-3a.css, styles.css, chrome-3a.css and the
   page's own <style>), so it wins ties on source order. Where a page rule uses
   !important, the rule here repeats !important with an `html` prefix for the
   extra specificity. Every rule is scoped to body.h3a-page, which admin never
   carries. Palette colours come from the customizer-fed vars; the few values
   that only exist on the website live in the token block below. */

/* tokens:start */
html:root {
  --skin-btn-bg: linear-gradient(135deg, #12A5A0, var(--accent));
  --skin-btn-shadow: 0 8px 24px rgba(18, 165, 160, .35);
  --skin-glass: rgba(255, 255, 255, .72);
  --skin-glass-line: rgba(255, 255, 255, .85);
  --skin-header-line: rgba(18, 165, 160, .22);
  --skin-card-shadow: 0 10px 30px rgba(13, 63, 59, .08);
  --skin-header-shadow: 0 8px 32px rgba(13, 63, 59, .07);
  --skin-ring: rgba(18, 165, 160, .18);
  --skin-grid: rgba(18, 165, 160, .045);
  --skin-glow-a: rgba(18, 165, 160, .16);
  --skin-glow-b: rgba(95, 208, 203, .14);
  --skin-glow-c: rgba(12, 122, 118, .10);
  --skin-foot-bg: #0E2724;
  --skin-foot-text: #F2F7F6;
  --skin-foot-sub: #9FC4C0;
  --skin-foot-muted: #6F8F8B;
  --skin-foot-link: #5FD0CB;
  --skin-foot-rule: rgba(95, 208, 203, .18);
  --skin-foot-fill: rgba(255, 255, 255, .06);
  --skin-radius-btn: 12px;
  --skin-radius-card: 20px;
  --skin-nav-text: #2C4A46;
  --skin-pill-text: #FFFFFF;
  --skin-btn-text: #FFFFFF;
}
html:root[data-theme="dark"] {
  --skin-btn-bg: linear-gradient(135deg, var(--accent), #12A5A0);
  --skin-btn-shadow: 0 0 24px -6px rgba(95, 208, 203, .45);
  --skin-glass: color-mix(in srgb, var(--surface) 78%, transparent);
  --skin-glass-line: rgba(95, 208, 203, .16);
  --skin-header-line: rgba(95, 208, 203, .18);
  --skin-card-shadow: 0 12px 32px rgba(0, 0, 0, .28);
  --skin-header-shadow: 0 8px 32px rgba(0, 0, 0, .25);
  --skin-ring: rgba(95, 208, 203, .22);
  --skin-foot-bg: color-mix(in srgb, var(--bg) 72%, #000);
  --skin-nav-text: var(--sub);
  --skin-pill-text: var(--bg);
}
/* tokens:end */

/* --- Page background: the website's faint grid and teal glows (light only;
   the dark presets keep their own treatment from tokens-3a.css). */
html:root[data-theme="light"]:has(body.h3a-page) {
  --bg-image:
    repeating-linear-gradient(106deg, var(--skin-grid) 0 1px, transparent 1px 64px) fixed,
    repeating-linear-gradient(74deg, var(--skin-grid) 0 1px, transparent 1px 64px) fixed,
    radial-gradient(1100px 650px at 85% -5%, var(--skin-glow-a), transparent 62%) fixed,
    radial-gradient(900px 600px at -5% 25%, var(--skin-glow-b), transparent 60%) fixed,
    radial-gradient(1000px 700px at 50% 115%, var(--skin-glow-c), transparent 60%) fixed,
    var(--bg);
}

/* --- Header: glass bar; floating and rounded on desktop; not sticky. */
html body.h3a-page .site-header.h3a-header {
  background: var(--skin-glass) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--skin-header-line);
  z-index: 35;
}
@media (min-width: 921px) {
  html body.h3a-page .site-header.h3a-header {
    margin: 14px var(--h3a-edge) 0 !important;
    border: 1px solid var(--skin-header-line);
    border-radius: 18px;
    box-shadow: var(--skin-header-shadow) !important;
  }
  html body.h3a-page .h3a-header-inner { height: 72px; padding: 0 20px; }
}
/* Not sticky (owner's choice, 2026-10-12): the bar scrolls away with the page on every page. */
html body.h3a-page .site-header.h3a-header { position: relative !important; top: auto; }
html body.h3a-page .h3a-nav a { padding: 9px 14px; border-radius: 999px; color: var(--sub); font-weight: 600; }
html body.h3a-page .h3a-nav a:hover { color: var(--accentText); }
html body.home-3a.h3a-page .h3a-nav a[href="/"] { background: var(--ink); color: var(--bg); padding: 9px 18px; }

/* --- Type: Bricolage 800 headings with tight tracking; mono uppercase labels. */
html body.h3a-page :is(.h3a-title, .h3a-popular-title, .h3a-how-title, .orders-title, .account-title, .pr3a-title, .c-summary__title, .panel-title-group h1, .panel-title-group h2) {
  font-family: var(--fD);
  font-weight: 800;
  letter-spacing: -.02em;
}
html body.h3a-page .h3a-foot-h { font-family: var(--fD); font-weight: 800; letter-spacing: -.005em; }
html body.h3a-page :is(.h3a-eyebrow, .c-summary__eyebrow, .intake-eyebrow, .details-eyebrow, .h3a-step-eyebrow, .acct-eyebrow, .account-eyebrow, .h3a-help-cat-h) {
  font-family: var(--fM);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accentText);
}
html[lang="ar"] body.h3a-page :is(.h3a-eyebrow, .c-summary__eyebrow, .intake-eyebrow, .details-eyebrow, .h3a-step-eyebrow, .acct-eyebrow, .account-eyebrow, .h3a-help-cat-h),
html[lang="ar"] body.h3a-page :is(.h3a-title, .h3a-popular-title, .h3a-how-title, .orders-title, .account-title, .pr3a-title, .c-summary__title, .panel-title-group h1, .panel-title-group h2, .h3a-foot-h) {
  font-family: var(--fB);
  letter-spacing: 0;
  text-transform: none;
}

/* --- Buttons: teal gradient primary, glass secondary, 12px corners. */
html body.h3a-page :is(.c-btn, .btn, .h3a-cta-primary) { border-radius: var(--skin-radius-btn); }
html body.h3a-page :is(.c-btn--primary, .btn.primary, .h3a-cta-primary):not(:disabled):not(.is-disabled) {
  background: var(--skin-btn-bg) !important;
  color: var(--onTeal) !important;
  border-color: transparent !important;
  box-shadow: var(--skin-btn-shadow) !important;
  border-radius: var(--skin-radius-btn) !important;
  font-weight: 700;
}
html body.h3a-page :is(.c-btn--primary, .btn.primary, .h3a-cta-primary):not(:disabled):not(.is-disabled):hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}
html body.h3a-page :is(.c-btn--secondary, .btn.ghost) {
  background: var(--skin-glass);
  border: 1px solid var(--skin-header-line);
  border-radius: var(--skin-radius-btn) !important;
}
html body.h3a-page .h3a-fab { background: var(--skin-btn-bg); box-shadow: var(--skin-btn-shadow); }

/* --- Booking flow: index.html styles its nav buttons, the type toggle and the
   modal CTAs with ID and !important selectors (see its #next-btn, .startover-btn,
   .customer-type-switch--big and #location-confirm rules), so these repeat
   !important with enough specificity to win. */
html:root body.h3a-page.booking-3a .panel-actions #next-btn.btn.primary:not(:disabled):not(.is-disabled) {
  background: var(--skin-btn-bg) !important;
  box-shadow: var(--skin-btn-shadow) !important;
  border-radius: var(--skin-radius-btn) !important;
}
html:root body.h3a-page.booking-3a .panel-actions #next-btn.btn.primary:disabled {
  border-radius: var(--skin-radius-btn) !important;
}
html:root body.h3a-page.booking-3a .panel-actions .startover-btn.btn {
  border-radius: var(--skin-radius-btn) !important;
  border-color: var(--skin-header-line) !important;
  background: var(--skin-glass) !important;
}
html body.h3a-page.booking-3a .customer-type-switch--big .pill {
  border-radius: var(--skin-radius-btn) !important;
}
html body.h3a-page.booking-3a .customer-type-switch--big .pill:is(.active, [aria-pressed="true"]) {
  background: var(--skin-btn-bg) !important;
  border-color: transparent !important;
  box-shadow: var(--skin-btn-shadow) !important;
}
html body.h3a-page #time-slots .c-slot.is-selected {
  background: var(--skin-btn-bg) !important;
  border-color: transparent !important;
}
html body.h3a-page #location-modal #location-confirm.btn.primary:not(:disabled),
html body.h3a-page #payment-modal #payment-modal-pay.btn.primary:not(:disabled) {
  background: var(--skin-btn-bg) !important;
  box-shadow: var(--skin-btn-shadow) !important;
  border-radius: var(--skin-radius-btn) !important;
}

/* --- Selected states follow the button gradient. */
html body.h3a-page :is(.c-slot.is-selected, .c-chip--selected, .c-cal__cell.is-selected .c-cal__day) {
  background: var(--skin-btn-bg);
  color: var(--onTeal);
  border-color: transparent;
}
html body.h3a-page .c-slot { border-radius: var(--skin-radius-btn); }

/* --- Cards: white glass, 20px corners, soft teal shadow. */
html body.h3a-page :is(.h3a-card, #booking-summary.c-summary--sticky, .account-auth-card, .acct-sec, .pr3a-card, .c-confirm) {
  background: var(--skin-glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--skin-glass-line);
  border-radius: var(--skin-radius-card);
  box-shadow: var(--skin-card-shadow);
}
html body.h3a-page .c-service { border-radius: 14px; }
html body.h3a-page .c-service:not(.is-selected) {
  background: var(--skin-glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
html body.h3a-page .c-service:hover { box-shadow: var(--skin-card-shadow); }
html body.h3a-page :is(.confirm-modal-dialog, .terms-modal-dialog, .location-modal-dialog, .payment-modal-dialog) {
  border-radius: var(--skin-radius-card);
}

/* --- Inputs: 12px corners, teal focus ring. */
html body.h3a-page :is(.c-field__control, .c-cselect__trigger, .orders-search-input, .field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea) {
  border-radius: var(--skin-radius-btn);
}
html body.h3a-page :is(.c-field__control, .c-cselect__trigger, .orders-search-input, .field input, .field select, .field textarea):focus-visible {
  border-color: var(--teal);
  box-shadow: 0 0 0 4px var(--skin-ring);
  outline: none;
}

/* --- Footer: the website's dark teal band. Re-scoping the palette vars here
   lets every existing footer rule pick up the light-on-dark colours. */
html body.h3a-page .h3a-footer {
  background: var(--skin-foot-bg);
  --ink: var(--skin-foot-text);
  --text: var(--skin-foot-text);
  --sub: var(--skin-foot-sub);
  --muted: var(--skin-foot-muted);
  --hair: var(--skin-foot-rule);
  --line: var(--skin-foot-rule);
  --teal: var(--skin-foot-link);
  --accent: var(--skin-foot-link);
  --accentText: var(--skin-foot-link);
  --surface: var(--skin-foot-fill);
  --panel: var(--skin-foot-fill);
  --tint: var(--skin-foot-fill);
  color: var(--skin-foot-sub);
}

/* --- Footer: production's three-column layout (owner's pick, 2026-10-11) in the dark band
   above. The layout comes from chrome-3a.css and each page's own <style>, as on production; this
   only tightens it: less padding above and below, and 30px pills instead of 42px. */
html body.h3a-page .h3a-footer .service-contact-link:not(.h3a-foot-static) {
  padding: 7px 13px !important;
  min-height: 0 !important;
}
html body.h3a-page #landing-help-strip .h3a-help-cat .h3a-foot-actions { gap: 6px; margin-top: 4px; }
@media (min-width: 921px) {
  html body.h3a-page .h3a-footer-inner { padding-top: 30px; }
  html body.h3a-page .h3a-foot-col { min-height: 0; }
  html body.h3a-page .h3a-foot-actions { margin-top: 10px; }
  html body.h3a-page .h3a-footer-bottom { margin-top: 20px; padding-top: 12px; padding-bottom: 16px; }
}

/* --- Header brand: centred in the glass bar at every width, and sized to it. The
   customizer's logo padding and offset settings (site.logoPadTop and friends) were tuned
   for the old header; on Home they pushed the mark 10px low, past the bar's bottom edge. */
html body.h3a-page .h3a-header .brand {
  align-self: center;
  height: auto !important;
  min-height: 0 !important;
  padding-block: 0 !important;
  margin-block: 0 !important;
}
html body.h3a-page .h3a-header .logo {
  display: flex;
  align-items: center;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}
html body.h3a-page .h3a-header .logo-image {
  height: 40px !important;
  max-height: 40px;
  width: auto;
  margin: 0 !important;
}
@media (min-width: 921px) {
  html body.h3a-page .h3a-header .logo-image { height: 46px !important; max-height: 46px; }
}

/* --- Header bar matched to the website's nav bar (2026-10-11). Source:
   Web-Munanoorpestcontrol build/web/app/components/layout/Header.tsx. Desktop: the same 68px
   glass bar with 40px side margins, a 124x38 logo, 15px links 6px apart with a dark pill on the
   current page, and the website's gradient button (Sign in here, "Book Your Service" there). */

/* Logo at every width: the config logo is the full 1200x512 canvas. Sizing it to 53.13px and
   trimming the transparent padding with negative margins shows exactly the website's crop
   (artwork plus a hairline, 124x38). Recheck these numbers if the logo canvas ever changes. */
html body.h3a-page .h3a-header .logo { overflow: visible; }
html body.h3a-page .h3a-header .logo-image {
  height: 53.13px !important;
  max-height: none;
  width: auto;
  margin: -7.57px -0.09px -7.57px -0.41px !important;
}
/* Narrow phones (the website has no top bar there): a 104x32 logo so it clears the controls. */
@media (max-width: 389px) {
  html body.h3a-page .h3a-header .logo-image {
    height: 44.74px !important;
    margin: -6.37px -0.08px -6.37px -0.34px !important;
  }
}

@media (min-width: 921px) {
  /* Capped at 1400px and centred, same as the website, so on very wide screens the bar lines up
     with the content and the logo and Sign in stay at its edges (the old cap sat on the inner
     row only, at 1860px, so the bar outgrew it). */
  html body.h3a-page .site-header.h3a-header {
    margin: 18px auto 0 !important;
    width: calc(100% - 80px);
    max-width: 1400px;
  }
  html body.h3a-page .h3a-header-inner { height: 66px; padding: 0 20px; max-width: none; }
  html body.h3a-page .h3a-nav { gap: 6px; }
  html body.h3a-page .h3a-nav a {
    font-size: 15px;
    font-weight: 600;
    line-height: 16px; /* Archivo's normal line height; keeps Arabic pills 34px too */
    padding: 9px 14px;
    color: var(--skin-nav-text);
  }
  html body.home-3a.h3a-page .h3a-nav a[href="/"],
  html body.h3a-page[data-booking-mode="services"] .h3a-nav a[href="/services"],
  html body.h3a-page[data-booking-mode="products"] .h3a-nav a[href="/products"] {
    background: var(--ink);
    color: var(--skin-pill-text);
    padding: 9px 18px;
  }
  html body.h3a-page .h3a-utility .auth-btn {
    background: var(--skin-btn-bg) !important;
    color: var(--skin-btn-text) !important;
    border: 0 !important;
    border-radius: var(--skin-radius-btn) !important;
    box-shadow: var(--skin-btn-shadow) !important;
    padding: 13px 28px !important;
    height: auto !important;
    min-height: 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    white-space: nowrap;
  }
  html body.h3a-page .h3a-utility .auth-btn:hover {
    background: var(--skin-btn-bg) !important;
    color: var(--skin-btn-text) !important;
    filter: brightness(1.06);
  }
  html body.h3a-page .h3a-utility .auth-btn .icon { display: none !important; }
}

/* --- Footer on phones (owner's pick, variant C, 2026-10-12): the same blocks as the desktop,
   squeezed to one line each. Section titles and the help paragraph are hidden; the hours line,
   the team rows and the terms link carry the meaning. Each team row is the label plus ONE split
   pill: the call link keeps icon + number, the WhatsApp link keeps only its icon and is glued to
   the end of the call pill. Terms (icon + full text) and the copyright share the bottom block.
   Hours and numbers still come from /admin config sync (the data-contact spans are untouched).
   Measured 474px before on Home at 375px; about 200px after. */
@media (max-width: 920px) {
  html body.h3a-page .h3a-footer .h3a-foot-h { display: none; }
  html body.h3a-page #landing-help-strip > .h3a-foot-p { display: none; }
  html body.h3a-page .h3a-footer-inner { padding-top: 14px; }
  html body.h3a-page .h3a-foot-col { padding: 0; border-top: 0; }
  html body.h3a-page .h3a-foot-actions { margin-top: 0; }
  /* Hours line, with a rule under it. */
  html body.h3a-page .h3a-foot-col:first-child { padding-bottom: 10px; border-bottom: 1px solid var(--hair); }
  /* Team rows: label | split pill. */
  html body.h3a-page #landing-help-strip .h3a-help-cats { grid-template-columns: 1fr; gap: 8px; margin-top: 10px; }
  html body.h3a-page #landing-help-strip .h3a-help-cat {
    display: flex; align-items: center; gap: 10px; min-width: 0;
    padding-block: 3px; padding-inline: 10px 2px;
  }
  html body.h3a-page #landing-help-strip .h3a-help-cat-h { margin: 0; min-width: 68px; flex: none; }
  /* !important: index.html forces this container to a column (its own "Need help?" rule). */
  html body.h3a-page #landing-help-strip .h3a-help-cat .h3a-foot-actions {
    display: flex !important; flex-direction: row !important; align-items: center !important;
    gap: 0; flex-wrap: nowrap; margin-top: 0; min-width: 0;
  }
  html body.h3a-page #landing-help-strip .h3a-help-cat .service-contact-link--call {
    border-start-end-radius: 0; border-end-end-radius: 0;
  }
  html body.h3a-page #landing-help-strip .h3a-help-cat .service-contact-link--whatsapp {
    border-start-start-radius: 0; border-end-start-radius: 0;
    margin-inline-start: -1px; padding: 7px 9px !important;
  }
  html body.h3a-page #landing-help-strip .h3a-help-cat .service-contact-link--whatsapp .service-contact-phone { display: none; }
  /* Terms and the copyright together at the bottom. */
  html body.h3a-page .h3a-foot-col:last-child { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--hair); }
  html body.h3a-page .h3a-footer-bottom { margin-top: 0; border-top: 0; padding-top: 8px; padding-bottom: 18px; }
  /* Centred on phones and tablets (owner, 2026-10-12): the page column is narrower than the
     footer band at these widths, so left-aligned blocks left the right side empty. The team rows
     stay one block so their labels line up; the block itself sits in the middle. */
  html body.h3a-page .h3a-foot-col:first-child { display: flex; justify-content: center; }
  html body.h3a-page #landing-help-strip .h3a-help-cats { width: fit-content; max-width: 100%; margin-inline: auto; }
  html body.h3a-page .h3a-foot-col > .h3a-foot-actions { justify-content: center; }
  html body.h3a-page .h3a-footer-bottom { align-items: center; text-align: center; }
}

/* --- WhatsApp bubble: smaller on phones only (owner, 2026-10-12). Same icon, 44px instead of
   54px; tablets and desktop keep 54px. Its panel positions itself from the bubble's box, so
   nothing else moves. */
@media (max-width: 720px) {
  html body.h3a-page .h3a-fab { width: 44px; height: 44px; }
  html body.h3a-page .h3a-fab svg { width: 21px; height: 21px; }
}