/* Shankey Booking widget styles — ported from the validated HTML prototype, scoped to
   #sb-booking-widget rather than the whole page since this now lives inside a real theme. */

  :root{
    --black:#0f0e0d;
    --charcoal:#1c1a18;
    --gold:#b8964e;
    --gold-bright:#d4b877;
    --cream:#f4f1ea;
    --cream-dim:#e8e2d4;
    --line:#33302b;
    --ok:#5c8a63;
    --err:#a44a3f;
    --shadow: 0 20px 50px rgba(0,0,0,.35);
  }
  #sb-booking-widget *{box-sizing:border-box;}
  #sb-booking-widget{
    background: radial-gradient(1200px 600px at 50% -10%, #221f1b 0%, var(--black) 60%) !important;
    color: var(--cream) !important;
    font-family: 'Source Sans 3', sans-serif;
    min-height:400px;
    padding: 32px 16px 60px;
    border-radius: 8px;
  }
  .sb-loading{ color: #8f8a7d !important; text-align:center; padding:60px 0; }
  .wrap{max-width: 960px; margin: 0 auto;}

  .card{
    display:flex;
    background: var(--charcoal) !important;
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow:hidden;
    box-shadow: var(--shadow);
    min-height: 560px;
  }

  /* Sidebar */
  .rail{
    width: 250px;
    flex-shrink:0;
    background: var(--black) !important;
    padding: 28px 22px;
    border-right: 1px solid var(--line);
  }
  .rail-step{
    display:flex;
    gap: 12px;
    align-items:flex-start;
    padding: 11px 4px;
    color: #777165 !important;
    font-size: 14.5px;
  }
  .rail-step .dot{
    width: 22px; height:22px; border-radius:50%;
    border: 1px solid #4a453c;
    display:flex; align-items:center; justify-content:center;
    font-size: 11px; flex-shrink:0; margin-top:1px;
    font-family:'Source Sans 3', sans-serif;
  }
  .rail-step.done .dot{ background: var(--gold) !important; border-color: var(--gold) !important; color: #1c1a18 !important; font-weight:700;}
  .rail-step.active{ color: var(--cream) !important; }
  .rail-step.active .dot{ border-color: var(--gold) !important; color: var(--gold) !important; font-weight:700; }
  .rail-step.done{ color: #b2ab9c !important; }

  /* Main panel */
  .panel{
    flex:1;
    padding: 34px 38px 24px;
    background: var(--cream) !important;
    color: #221f1b !important;
    display:flex;
    flex-direction:column;
  }
  .panel h2{
    font-family:'Source Sans 3', sans-serif;
    font-weight:700;
    font-size: 25px;
    letter-spacing: -0.01em;
    margin: 0 0 4px;
    color: #221f1b !important;
  }
  .panel .sub{
    color: #6b665c !important;
    font-size: 14.5px;
    margin: 0 0 22px;
  }
  .panel-body{ flex:1; }

  /* Branch / staff / service grids */
  .grid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .opt-card{
    border: 1px solid #d9d2c0;
    background: #fff !important;
    border-radius: 3px;
    padding: 14px;
    display:flex;
    gap: 12px;
    align-items:center;
    cursor:pointer;
    transition: border-color .15s ease, transform .1s ease;
    text-align:left;
  }
  .opt-card:hover{ border-color: var(--gold) !important; }
  .opt-card.selected{ border-color: var(--gold) !important; box-shadow: 0 0 0 1px var(--gold); background: #fffdf8 !important; }
  .opt-card .name{ font-weight:600; font-size:15px; margin-bottom:2px;}
  .opt-card .meta{ font-size:12.5px; color: #7a7468 !important; line-height:1.4; }

  /* Generic image placeholder — swap for real photos later */
  .img-ph{
    background: repeating-linear-gradient(135deg, #eee7d5, #eee7d5 7px, #e6ddc6 7px, #e6ddc6 14px) !important;
    border: 1px dashed #c3baa0;
    display:flex; align-items:center; justify-content:center;
    color: #a79f8a !important; flex-shrink:0;
  }
  .img-ph svg{ width:36%; height:36%; }
  .branch-thumb{ width: 74px; height:56px; border-radius:3px; }
  .svc-icon{ width:42px; height:42px; border-radius:3px; margin-bottom:2px; }

  .cats{ display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
  .cat-pill{
    border:1px solid #d9d2c0; background: #fff !important; border-radius:20px;
    padding:6px 14px; font-size:13px; cursor:pointer; color: #4a4640 !important;
  }
  .cat-pill.active{ background: var(--black) !important; color: var(--gold) !important; border-color: var(--black) !important; }

  /* Staff grid — photo on top, name below */
  .staff-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  .staff-card{
    border:1px solid #d9d2c0; background: #fff !important; border-radius:3px;
    overflow:hidden; cursor:pointer; text-align:center; padding-bottom:12px;
  }
  .staff-card:hover{ border-color: var(--gold) !important; }
  .staff-card.selected{ border-color: var(--gold) !important; box-shadow: 0 0 0 1px var(--gold); background: #fffdf8 !important; }
  .staff-photo{ width:100%; aspect-ratio: 1 / 1; border-radius:0; }
  .staff-name{ font-weight:600; font-size:14px; margin-top:10px; padding:0 6px; }
  .staff-meta{ font-size:11.5px; color: #7a7468 !important; margin-top:2px; padding:0 8px; }

  /* Service grid — title + description room */
  .svc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
  .svc-card{
    border:1px solid #d9d2c0; background: #fff !important; border-radius:3px;
    padding:16px; cursor:pointer;
    display:flex; flex-direction:column; gap:8px;
  }
  .svc-card:hover{ border-color: var(--gold) !important; }
  .svc-card.selected{ border-color: var(--gold) !important; box-shadow: 0 0 0 1px var(--gold); background: #fffdf8 !important; }
  .svc-title{ font-weight:700; font-size:15.5px; }
  .svc-desc{ font-size:12.5px; color: #7a7468 !important; line-height:1.45; flex:1; }
  .svc-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:2px; }
  .svc-dur{ font-size:11.5px; color: #8f8a7d !important; }
  .price-tag{ background: var(--black) !important; color: var(--gold) !important; font-weight:600; font-size:13px; padding:5px 11px; border-radius:3px; white-space:nowrap; }

  /* Date & time */
  .dt-wrap{ display:flex; gap:22px; }
  .cal{ flex:1.1; }
  .cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
  .cal-head button{ background: none !important;border:none;font-size:18px;cursor:pointer;color: #4a4640 !important; }
  .cal-head .m{ font-weight:600; font-size:15px; }
  .cal-grid{ display:grid; grid-template-columns: repeat(7,1fr); gap:5px; }
  .cal-dow{ text-align:center; font-size:11px; color: #9a9484 !important; padding-bottom:4px; }
  .cal-day{
    text-align:center; padding:9px 0; font-size:13.5px; border-radius:3px; cursor:pointer; color: #3a362f !important;
  }
  .cal-day.disabled{ color: #cac4b6 !important; cursor:default; }
  .cal-day:not(.disabled):hover{ background: #eee7d6 !important; }
  .cal-day.selected{ background: var(--black) !important; color: var(--gold) !important; font-weight:700; }
  .slots{ flex:0.9; }
  .slots-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; max-height:320px; overflow-y:auto; padding-right:4px;}
  .slot{ border:1px solid #d9d2c0; background: #fff !important; border-radius:3px; padding:9px 0; text-align:center; font-size:13.5px; cursor:pointer; }
  .slot:hover{ border-color: var(--gold) !important; }
  .slot.selected{ background: var(--black) !important; color: var(--gold) !important; border-color: var(--black) !important; }
  .slot.taken{ color: #cac4b6 !important; text-decoration:line-through; cursor:default; background: #f3efe4 !important; }

  /* Cart */
  .cart-item{ display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid #e2dccb; }
  .cart-item .ci-name{ font-weight:600; font-size:15px; }
  .cart-item .ci-meta{ font-size:12.5px; color: #7a7468 !important; margin-top:2px; }
  .cart-total{ display:flex; justify-content:space-between; padding-top:16px; font-weight:700; font-size:16px; }
  .add-svc{ background: none !important; border:1px solid var(--black); color: var(--black) !important; padding:8px 14px; border-radius:3px; font-size:13px; cursor:pointer; }

  /* Form */
  .field{ margin-bottom:16px; }
  .field label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; color: #3a362f !important; }
  .field input, .field textarea{
    width:100%; border:1px solid #d9d2c0; border-radius:3px; padding:10px 12px; font-size:14.5px;
    font-family:'Source Sans 3',sans-serif; background: #fff !important; color: #221f1b !important;
  }
  .field textarea{ resize:vertical; min-height:70px; }
  /* No placeholder styling existed before this fix — meaning it fell back to whatever the
     browser or the site's own theme happened to apply by default, which is very commonly a
     very light grey, low-contrast against a white input background. Set explicitly here. */
  .field input::placeholder, .field textarea::placeholder{ color: #8a8478 !important; opacity: 1 !important; }
  .field.err input{ border-color: var(--err) !important; }
  .field .errmsg{ color: var(--err) !important; font-size:12px; margin-top:4px; display:none; }
  .field.err .errmsg{ display:block; }
  .two-col{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

  /* Summary */
  .sum-row{ display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid #e2dccb; font-size:14.5px; }
  .sum-row .k{ color: #7a7468 !important; }
  .sum-row .v{ font-weight:600; text-align:right; }
  .sum-note{ background: #fffaf0 !important; border:1px solid #e9dcb8; border-radius:3px; padding:10px 12px; font-size:12.5px; color: #8a6a1f !important; margin-top:16px; }

  /* Footer nav */
  .footer-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:24px; padding-top:18px; border-top:1px solid #e2dccb; }
  .btn{ border:none; border-radius:3px; padding:11px 22px; font-size:14px; font-weight:600; cursor:pointer; font-family:'Source Sans 3',sans-serif; }
  .btn-primary{ background: var(--black) !important; color: var(--gold) !important; }
  .btn-primary:disabled{ background: #c9c3b5 !important; color: #8f8a7d !important; cursor:not-allowed; }
  .btn-ghost{ background: none !important; color: #4a4640 !important; }

  /* Confirmation */
  .confirm{ text-align:center; padding: 40px 10px; }
  .confirm .ring{
    width:64px;height:64px;border-radius:50%; background: var(--black) !important; color: var(--gold) !important;
    display:flex;align-items:center;justify-content:center; margin:0 auto 18px; font-size:28px;
  }
  .confirm h2{ margin-bottom:6px; color: #221f1b !important; }
  .confirm .bookid{ color: #7a7468 !important; font-size:13px; margin-bottom:22px; }
  .confirm-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:520px; margin:0 auto; text-align:center; }
  .confirm-grid .k{ font-size:11.5px; color: #9a9484 !important; text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; }
  .confirm-grid .v{ font-weight:600; font-size:14px; }

  @media (max-width: 700px){
    body{ padding: 16px 8px 40px; }
    .card{ flex-direction:column; min-height:0; }
    .rail{
      width:100%; display:flex; flex-wrap:nowrap; overflow-x:auto;
      gap: 18px; padding: 14px 16px; border-right:none; border-bottom:1px solid var(--line);
    }
    .rail-step{
      flex-direction:column; align-items:center; gap:5px; flex-shrink:0;
      width:56px; padding:0; font-size:11px; text-align:center;
    }
    .rail-step .label{ display:none; white-space:nowrap; }
    .rail-step.active .label{ display:block; }
    .panel{ padding: 22px 18px 18px; }
    .panel h2{ font-size:21px; }
    .grid, .svc-grid{ grid-template-columns: 1fr; }
    .staff-grid{ grid-template-columns: repeat(2, 1fr); }
    .dt-wrap{ flex-direction:column; }
    .two-col{ grid-template-columns:1fr; }
    .confirm-grid{ grid-template-columns:1fr; }
    .footer-nav{ flex-direction:column-reverse; align-items:stretch; gap:10px; }
    .footer-nav .btn{ width:100%; text-align:center; }
  }

  @media (max-width: 420px){
    .staff-grid{ grid-template-columns: 1fr 1fr; gap:10px; }
    .opt-card{ padding:11px; gap:10px; }
    .branch-thumb{ width:60px; height:46px; }
    .cal-day{ padding:7px 0; font-size:12.5px; }
    .slots-grid{ max-height:260px; }
  }

  /* Elementor's own generated wrapper elements around wherever the [shankey_booking]
     shortcode is placed can end up narrower than the full viewport on mobile — this varies
     by exactly which section/column/container settings are in play on a given page, and
     isn't something this stylesheet can reliably predict or depend on being configured a
     particular way. Rather than chase every possible combination, force every wrapper level
     open directly here instead. :has(#sb-booking-widget) scopes each rule to only ever match
     a wrapper that actually contains this specific widget — every other section on the page,
     including any deliberately boxed/narrow ones elsewhere, is completely unaffected. */
  @media (max-width: 700px){
    .elementor-container:has(#sb-booking-widget),
    .elementor-column:has(#sb-booking-widget),
    .elementor-widget-wrap:has(#sb-booking-widget),
    .elementor-widget-container:has(#sb-booking-widget),
    .elementor-shortcode:has(#sb-booking-widget){
      width: 100% !important;
      max-width: 100% !important;
    }
  }

  /* The above wasn't enough on its own — on the live site, the immediate wrapper chain
     around the shortcode still ends up narrower than the viewport on mobile, through
     whichever specific combination of this page's Elementor settings is actually responsible
     (confirmed not a caching issue, not a minification issue, and not a :has() support issue —
     the rule above genuinely reaches the browser intact and simply doesn't resolve the
     narrowing on this page). Rather than depend on correctly widening every ancestor in a
     chain that's proven hard to pin down exactly, this makes the widget break out of
     whatever container it's actually sitting in and span the full viewport width directly —
     a well-established technique that works regardless of the parent's own width, since it's
     positioned relative to the viewport rather than inherited from the parent at all. */
  @media (max-width: 700px){
    #sb-booking-widget{
      width: 100vw !important;
      margin-left: calc(50% - 50vw) !important;
      margin-right: calc(50% - 50vw) !important;
      border-radius: 0 !important;
      box-sizing: border-box !important;
    }
  }