/* Doorloom brand-website V2 — shared enquiry-sheet design.
   The Airbnb-style enquiry form used by:
     - the dedicated /enquiry page (pages/enquiry.blade.php, with brand header)
     - the floating "Get Quote" widget on brand pages (components/enquiry-widget)
     - the iframe embed (embed/widget-v2.blade.php)
   Only brand-accent elements (logo tile, calendar selection, toggles, Send)
   follow --accent; neutrals stay fixed so text is legible under any preset.
   Requires tokens.css (--accent, --wa, --blue, --font, --gradient-accent, …).
   NOTE: `.efab` is NOT defined here — brand pages use components.css's `.efab`,
   and the embed defines its own compact rule. */

.enq-sheet, .enq-sheet *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

.enq-sheet{
  --enq-brand:var(--accent);
  --enq-brand-press:var(--accent-press);
  --enq-ink:#222222;
  --enq-muted:#717171;
  --enq-line:#DDDDDD;
  --enq-line-soft:#EBEBEB;
  --enq-field:#ffffff;

  width:100%;max-width:430px;background:#fff;
  padding:22px 22px calc(24px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;color:var(--enq-ink);
}
/* Dedicated /enquiry page: the sheet fills the page height. */
.enq-body .enq-sheet{min-height:100vh;}

/* ---- Popup overlay + close (on-page widget + embed; unused on the /enquiry page).
   Dim backdrop + centered card that scrolls internally — a popup, never a full-page cover. ---- */
.enq-overlay{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:24px 16px;overflow:hidden;-webkit-font-smoothing:antialiased;}
.enq-overlay[hidden]{display:none;}
.enq-overlay .enq-sheet{border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.28);max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow-y:auto;animation:enqpop .2s ease;}
/* The card is a flex column capped by max-height. Its children default to
   flex-shrink:1, and the dates card (overflow:hidden) gets a 0 flex-basis min,
   so an open calendar would be squashed/clipped. Pin child sizes so the popup
   scrolls instead of squashing — the whole date card stays visible. */
.enq-overlay .enq-sheet > *{flex-shrink:0;}
@keyframes enqpop{from{opacity:0;transform:translateY(8px) scale(.985);}to{opacity:1;transform:none;}}
.enq-close-row{display:flex;justify-content:flex-end;margin-bottom:6px;}

/* ---- Mobile: compact the sheet so it fits smaller screens without feeling oversized.
   Only spacing/heights shrink (toggle knob geometry is left untouched). Font sizes
   stay ≥15px to avoid iOS focus-zoom. ---- */
@media (max-width: 480px){
  .enq-overlay{padding:10px;}
  .enq-overlay .enq-sheet{max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px);border-radius:16px;}
  .enq-sheet{padding:16px 15px calc(14px + env(safe-area-inset-bottom));}

  .enq-sheet .field,
  .enq-sheet .cc{height:46px;margin-bottom:9px;}
  .enq-sheet .phone-row{grid-template-columns:76px 1fr;gap:8px;margin-bottom:9px;}

  .enq-sheet .card{margin-bottom:14px;}
  .enq-sheet .date-cell{padding:9px 13px;}
  .enq-sheet .day{height:36px;}

  .enq-sheet .label{padding-top:12px;margin-bottom:10px;}
  .enq-sheet .row{padding:10px 0;}
  .enq-sheet .row.two{padding:10px 0;}
  .enq-sheet .stepper{gap:12px;}
  .enq-sheet .stepper button{width:30px;height:30px;}

  .enq-sheet .actions{margin-top:16px;}
  .enq-sheet .btn{height:50px;}

  /* /enquiry page header (absent on the widget/embed) */
  .enq-sheet .enq-brand{margin-bottom:16px;}
  .enq-sheet .logo{width:68px;height:68px;border-radius:16px;}
  .enq-sheet .enq-brand h1{margin:12px 0 4px;}

  .enq-sheet .powered{margin-top:12px;}
}
.enq-close{width:34px;height:34px;border-radius:50%;border:1px solid var(--enq-line);background:#fff;font-size:20px;line-height:1;color:#444;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.enq-close:hover{border-color:#222;}

/* ---- Header (only rendered on the /enquiry page) ---- */
.enq-sheet .enq-brand{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:22px;}
.enq-sheet .logo{
  width:84px;height:84px;border-radius:20px;
  display:flex;align-items:center;justify-content:center;
  background:var(--enq-brand);color:#fff;font-weight:700;font-size:22px;letter-spacing:.06em;line-height:1.2;
  overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.14);
}
.enq-sheet .logo img{width:100%;height:100%;object-fit:cover;}
.enq-sheet .enq-brand h1{font-size:22px;font-weight:700;letter-spacing:-.02em;margin:16px 0 5px;}
.enq-sheet .enq-brand p{font-size:13.5px;color:var(--enq-muted);margin:0;line-height:1.45;max-width:270px;}

/* ---- Fields ---- */
.enq-sheet .field{
  width:100%;height:52px;border:1px solid var(--enq-line);border-radius:12px;
  padding:0 15px;font-size:15px;font-family:inherit;color:var(--enq-ink);
  background:var(--enq-field);outline:none;margin-bottom:11px;
  transition:border-color .15s,box-shadow .15s;
}
.enq-sheet .field::placeholder{color:#9a9a9a;}
.enq-sheet .field:focus{border-color:var(--enq-ink);box-shadow:0 0 0 1px var(--enq-ink);}

.enq-sheet .phone-row{display:grid;grid-template-columns:84px 1fr;gap:9px;margin-bottom:11px;}
.enq-sheet .phone-row .field{margin-bottom:0;}
.enq-sheet .cc-wrap{position:relative;}
.enq-sheet .cc{width:100%;display:flex;align-items:center;justify-content:space-between;gap:4px;font-family:inherit;font-size:15px;font-weight:500;color:var(--enq-ink);
  border:1px solid var(--enq-line);border-radius:12px;padding:0 12px;height:52px;background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s;}
.enq-sheet .cc:hover{border-color:#b5b5b5;}
.enq-sheet .cc.open{border-color:var(--enq-ink);box-shadow:0 0 0 1px var(--enq-ink);}
.enq-sheet .cc-chev{width:16px;height:16px;color:var(--enq-muted);transition:transform .18s;flex:0 0 auto;}
.enq-sheet .cc.open .cc-chev{transform:rotate(180deg);}
.enq-sheet .cc-menu{position:absolute;top:calc(100% + 6px);left:0;width:280px;max-width:calc(100vw - 44px);background:#fff;
  border:1px solid var(--enq-line);border-radius:14px;box-shadow:0 10px 34px rgba(0,0,0,.14);z-index:30;padding:8px;}
.enq-sheet .cc-menu[hidden]{display:none;}
.enq-sheet .cc-search{width:100%;height:42px;border:1px solid var(--enq-line);border-radius:10px;padding:0 12px;font-family:inherit;font-size:14px;color:var(--enq-ink);outline:none;margin-bottom:6px;}
.enq-sheet .cc-search::placeholder{color:#9a9a9a;}
.enq-sheet .cc-search:focus{border-color:var(--enq-ink);}
.enq-sheet .cc-list{max-height:236px;overflow-y:auto;}
.enq-sheet .cc-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:9px;cursor:pointer;font-size:14px;}
.enq-sheet .cc-opt:hover{background:#f4f4f4;}
.enq-sheet .cc-opt[aria-selected="true"]{background:#f0efec;font-weight:600;}
.enq-sheet .cc-opt .name{color:var(--enq-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.enq-sheet .cc-opt .dial{color:var(--enq-muted);flex:0 0 auto;}
.enq-sheet .cc-empty{padding:14px 12px;font-size:13px;color:var(--enq-muted);text-align:center;}

/* ---- Dates card + inline calendar ---- */
.enq-sheet .card{border:1px solid var(--enq-line);border-radius:14px;overflow:hidden;margin-bottom:18px;transition:border-color .15s;}
.enq-sheet .card.open{border-color:var(--enq-ink);}
.enq-sheet .dates{display:grid;grid-template-columns:1fr 1fr;cursor:pointer;}
.enq-sheet .date-cell{padding:11px 15px;}
.enq-sheet .date-cell + .date-cell{border-left:1px solid var(--enq-line-soft);}
.enq-sheet .date-cell label{display:block;font-family:inherit;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--enq-muted);margin-bottom:2px;}
.enq-sheet .date-cell .val{font-family:inherit;font-size:15px;font-weight:600;color:var(--enq-ink);}
.enq-sheet .date-cell .val.enq-empty{color:#9a9a9a;font-weight:500;}

.enq-sheet .cal{padding:6px 12px 12px;border-top:1px solid var(--enq-line-soft);}
.enq-sheet .cal[hidden]{display:none;}
.enq-sheet .cal-head{display:flex;align-items:center;justify-content:space-between;padding:6px 4px 10px;}
.enq-sheet .cal-head .m{font-size:14.5px;font-weight:600;}
.enq-sheet .cal-nav{width:34px;height:34px;border-radius:50%;border:1px solid var(--enq-line);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#444;}
.enq-sheet .cal-nav:hover:not(:disabled){border-color:var(--enq-ink);}
.enq-sheet .cal-nav:disabled{opacity:.3;cursor:not-allowed;}
.enq-sheet .cal-nav svg{width:15px;height:15px;}
.enq-sheet .cal-dow{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:2px;}
.enq-sheet .cal-dow span{text-align:center;font-size:11px;font-weight:600;color:var(--enq-muted);padding:4px 0;}
.enq-sheet .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);}
.enq-sheet .day{height:40px;border:0;background:none;font-family:inherit;font-size:14px;font-weight:500;color:var(--enq-ink);cursor:pointer;border-radius:9px;}
.enq-sheet .day:hover:not(:disabled):not(.end){background:#f2f2f2;}
.enq-sheet .day.past{color:#cfcfcf;cursor:default;}
.enq-sheet .day.blank{visibility:hidden;}
.enq-sheet .day.range{background:#F0EFEC;border-radius:0;}
.enq-sheet .day.end{background:var(--enq-brand);color:#fff;font-weight:600;}
.enq-sheet .day.in-edge{border-top-left-radius:9px;border-bottom-left-radius:9px;}
.enq-sheet .day.out-edge{border-top-right-radius:9px;border-bottom-right-radius:9px;}

/* ---- Section label + chips ---- */
.enq-sheet .label{font-size:15px;font-weight:600;color:var(--enq-ink);margin:0 0 12px;padding-top:16px;border-top:1px solid var(--enq-line-soft);}
.enq-sheet .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px;overflow:visible;padding-bottom:0;}
.enq-sheet .chip{font-family:inherit;font-size:13px;font-weight:500;color:var(--enq-ink);
  border:1px solid var(--enq-line);background:#fff;border-radius:999px;padding:8px 15px;cursor:pointer;transition:all .12s;}
.enq-sheet .chip:hover{border-color:#b5b5b5;}
.enq-sheet .chip[aria-pressed="true"]{background:var(--enq-ink);border-color:var(--enq-ink);color:#fff;}

/* ---- Steppers + toggles ---- */
.enq-sheet .group{border-top:1px solid var(--enq-line-soft);}
.enq-sheet .row{display:flex;align-items:center;justify-content:space-between;gap:0;padding:13px 0;border-top:1px solid var(--enq-line-soft);}
.enq-sheet .row:first-child{border-top:0;}
.enq-sheet .r-title{font-size:15px;font-weight:600;}
.enq-sheet .r-sub{font-size:12px;color:var(--enq-muted);margin-top:1px;}
.enq-sheet .stepper{display:flex;align-items:center;gap:15px;}
.enq-sheet .stepper button{width:33px;height:33px;border-radius:50%;border:1px solid #c2c2c2;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#444;transition:border-color .12s,opacity .12s;}
.enq-sheet .stepper button:hover:not(:disabled){border-color:var(--enq-ink);}
.enq-sheet .stepper button:disabled{opacity:.35;cursor:not-allowed;}
.enq-sheet .stepper button svg{width:15px;height:15px;}
.enq-sheet .stepper .count{min-width:18px;text-align:center;font-size:15px;font-weight:600;}
.enq-sheet .switch{position:relative;width:46px;height:27px;border-radius:999px;background:#d6d6d6;border:0;cursor:pointer;transition:background .18s;flex:0 0 auto;}
.enq-sheet .switch::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s;}
.enq-sheet .switch[aria-checked="true"]{background:var(--enq-brand);}
.enq-sheet .switch[aria-checked="true"]::after{transform:translateX(19px);}
.enq-sheet .row.two{display:grid;grid-template-columns:1fr 1fr;padding:13px 0;}
.enq-sheet .half{display:flex;align-items:center;justify-content:space-between;}
.enq-sheet .half:first-child{padding-right:18px;border-right:1px solid var(--enq-line-soft);}
.enq-sheet .half:last-child{padding-left:18px;}

/* ---- Actions ---- */
.enq-sheet .actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px;}
.enq-sheet .actions.single{grid-template-columns:1fr;}
.enq-sheet .btn{height:54px;border-radius:12px;font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .15s;border:1px solid transparent;padding:0 8px;text-decoration:none;}
.enq-sheet .btn-wa{background:var(--wa);color:#fff;}
.enq-sheet .btn-wa:hover{background:#1e9e64;}
.enq-sheet .btn-blue{background:var(--blue);color:#fff;}
.enq-sheet .btn-blue:hover{background:#1d4ed8;}
/* Single full-width Send button (widgets): brand-accent (dark on default), with
   the WhatsApp glyph monochrome (inherits the button's white text colour). */
.enq-sheet .btn-accent{background:var(--enq-brand);color:#fff;}
.enq-sheet .btn-accent:hover{background:var(--enq-brand-press);}
.enq-sheet .btn-accent:disabled:hover{background:var(--enq-brand);}
.enq-sheet .btn:active:not(:disabled){transform:scale(.99);}
.enq-sheet .btn:disabled{opacity:.45;cursor:not-allowed;}
.enq-sheet .btn-wa:disabled:hover{background:var(--wa);}
.enq-sheet .btn svg{width:18px;height:18px;flex:0 0 auto;}

.enq-sheet .powered{text-align:center;font-size:12px;color:#9a9a9a;margin-top:16px;}
.enq-sheet .powered b{color:var(--enq-muted);font-weight:600;}

.enq-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);background:#222222;color:#fff;font-size:13px;font-weight:500;padding:12px 18px;border-radius:11px;opacity:0;pointer-events:none;transition:all .25s;z-index:1001;max-width:calc(100vw - 40px);text-align:center;}
.enq-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}