/* ==========================================================================
   ZEST — Quick Contact Widget  (Schedule / WhatsApp / Contact / Phone / Webcall / Chat)
   Self-contained file — reuses the CSS variables already defined in style.css
   Every rule here is namespaced with "qc-" so it can never collide with,
   override, or break any existing selector on the site.
   ========================================================================== */

/* ---------- Tab bar: horizontal bottom bar, light theme (all screen sizes) ---------- */
.qc-widget{
  position:fixed; bottom:0; inset-inline:0; z-index:950;
  display:flex; justify-content:center; pointer-events:none;
  transition:opacity .22s ease, visibility .22s ease;
}
/* Hidden while the panel is open — prevents the tab bar from sitting under
   (and being unclickable behind) the panel; reappears once the panel closes. */
.qc-widget.qc-hidden{ opacity:0; visibility:hidden; }

.qc-tabs{
  display:flex; pointer-events:auto; background:var(--white);
  box-shadow:0 -10px 30px -16px rgba(18,20,15,.3);
  border:1px solid rgba(18,20,15,.07); border-bottom:none;
  border-radius:20px 20px 0 0;
  /* Bug fix: tabs used to be a fixed 88px each (528px total for 6 tabs), so on
     any viewport narrower than that the bar stuck out past both edges of the
     screen and made the whole page draggable sideways. Now the bar itself never
     exceeds the viewport, and each tab shrinks to fit — no breakpoint needed. */
  width:min(528px, 100vw - 24px);
  max-width:100%;
}

.qc-tab{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  flex:1 1 0; min-width:0; width:auto; background:transparent; border:none; padding:14px 4px 12px;
  cursor:pointer; color:var(--muted); transition:color .18s ease;
}
.qc-tab span{ max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.qc-tab i{ font-size:19px; transition:transform .18s ease; }
.qc-tab span{ font-family:var(--font-body); font-size:10.5px; font-weight:500; }
.qc-tab:hover{ color:var(--ink); }
.qc-tab:hover i{ transform:translateY(-2px); }
.qc-tab.active{ color:var(--coral); }
.qc-tab.peek i{ transform:translateY(-2px); }

/* ---------- Overlay ---------- */
.qc-overlay{
  position:fixed; inset:0; background:rgba(18,20,15,.55);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s; z-index:1020;
}
.qc-overlay.show{ opacity:1; visibility:visible; }

/* ---------- Slide-in panel ---------- */
.qc-panel{
  position:fixed; inset-block-start:0; inset-inline-end:0; height:100%; width:min(480px, 94vw);
  background:var(--paper); z-index:1030;
  box-shadow:-24px 0 60px -20px rgba(18,20,15,.5);
  transform:translateX(100%); transition:transform .38s var(--ease);
  overflow-y:auto;
}
.qc-panel.show{ transform:translateX(0); }

.qc-close{
  position:absolute; top:18px; right:18px; width:38px; height:38px; border-radius:50%;
  background:var(--paper-dim); color:var(--ink); border:none; display:flex; align-items:center; justify-content:center;
  font-size:14px; cursor:pointer; transition:background .2s ease, color .2s ease; z-index:2;
}
.qc-close:hover{ background:var(--ink); color:var(--paper); }

.qc-pane{ display:none; padding:76px 30px 40px; }
.qc-pane.active{ display:block; }

.qc-pane .qc-eyebrow{
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--coral); margin-bottom:10px; display:block;
}
.qc-pane h3{ font-family:var(--font-display); font-size:1.55rem; font-weight:600; margin-bottom:8px; letter-spacing:-.01em; }
.qc-pane .qc-sub{ color:var(--muted); font-size:14px; line-height:1.55; margin-bottom:26px; }

/* ---------- Form fields ---------- */
.qc-field{ margin-bottom:14px; }
.qc-field label{ font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); display:block; margin-bottom:6px; }
.qc-field input, .qc-field select, .qc-field textarea{
  width:100%; border:1px solid rgba(18,20,15,.14); border-radius:10px; padding:11px 14px;
  font-family:var(--font-body); font-size:14px; background:var(--white); color:var(--ink);
}
.qc-field input:focus, .qc-field select:focus, .qc-field textarea:focus{
  outline:none; border-color:var(--coral); box-shadow:0 0 0 3px rgba(255,75,51,.15);
}
.qc-field textarea{ resize:vertical; min-height:78px; }
.qc-field .qc-invalid{ display:none; color:var(--coral-dim); font-size:12px; margin-top:5px; }
.qc-form.was-validated :invalid ~ .qc-invalid{ display:block; }
.qc-form.was-validated :invalid{ border-color:var(--coral); }
.qc-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* ---------- Buttons ---------- */
.qc-btn{
  width:100%; border:none; border-radius:100px; padding:14px 20px; background:var(--ink); color:var(--paper);
  font-family:var(--font-body); font-weight:600; font-size:14.5px; display:flex; align-items:center; justify-content:center; gap:9px;
  cursor:pointer; transition:background .2s ease;
}
.qc-btn:hover{ background:var(--coral); }
.qc-btn.qc-wa{ background:#25D366; color:#fff; }
.qc-btn.qc-wa:hover{ background:#1DA851; }
.qc-btn.qc-ghost{ background:var(--paper-dim); color:var(--ink); }
.qc-btn.qc-ghost:hover{ background:var(--ink); color:var(--paper); }

.qc-note{ font-size:12px; color:var(--muted); margin-top:12px; text-align:center; line-height:1.5; }

/* ---------- Success state ---------- */
.qc-success{ display:none; text-align:center; padding:20px 6px; }
.qc-success.show{ display:block; }
.qc-success i{ font-size:34px; color:var(--ink); background:var(--amber); border-radius:50%; padding:16px; display:inline-flex; }
.qc-success h4{ font-family:var(--font-display); font-size:1.2rem; margin-top:16px; }
.qc-success p{ color:var(--muted); font-size:13.5px; margin-top:8px; line-height:1.5; }
.qc-success a.qc-reset{ display:inline-block; margin-top:14px; font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--coral); border-bottom:1px solid var(--coral); cursor:pointer; }

/* ---------- Phone pane ---------- */
.qc-phone-card{ background:var(--ink); color:var(--paper); border-radius:var(--radius-md); padding:26px; text-align:center; margin-bottom:16px; }
.qc-phone-card .qc-phone-num{ font-family:var(--font-display); font-size:1.7rem; font-weight:600; margin:10px 0 4px; }
.qc-phone-card .qc-phone-num a{ color:var(--amber); }
.qc-phone-card p{ color:var(--muted-lt); font-size:13px; }
.qc-hours-row{ display:flex; align-items:center; gap:12px; background:var(--white); border:1px solid rgba(18,20,15,.1); border-radius:12px; padding:14px 16px; margin-top:16px; }
.qc-hours-row i{ font-size:18px; color:var(--coral); }
.qc-hours-row div span{ display:block; font-size:12.5px; color:var(--muted); }

/* ---------- WhatsApp pane ---------- */
.qc-wa-card{ background:#EAF9EF; border:1px solid #BFE9CC; border-radius:var(--radius-md); padding:22px; text-align:center; margin-bottom:18px; }
.qc-wa-card i{ font-size:34px; color:#25D366; }
.qc-wa-card p{ font-size:13.5px; color:var(--muted); margin-top:8px; }

/* ---------- Contact pane quick-link ---------- */
.qc-jump{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--paper-dim); border-radius:12px; padding:14px 16px; margin-bottom:22px; font-size:13px; }
.qc-jump a{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--coral); white-space:nowrap; }

/* ---------- Chat pane ---------- */
.qc-chat-log{
  display:flex; flex-direction:column; gap:10px; height:300px; overflow-y:auto;
  background:var(--white); border:1px solid rgba(18,20,15,.1); border-radius:14px; padding:16px; margin-bottom:14px;
}
.qc-msg{ max-width:82%; font-size:13.5px; line-height:1.45; padding:10px 13px; border-radius:14px; }
.qc-msg.bot{ align-self:flex-start; background:var(--paper-dim); color:var(--ink); border-bottom-left-radius:4px; }
.qc-msg.user{ align-self:flex-end; background:var(--ink); color:var(--paper); border-bottom-right-radius:4px; }
.qc-msg.typing{ align-self:flex-start; background:var(--paper-dim); color:var(--muted); font-style:italic; }
.qc-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.qc-chip{
  border:1px solid rgba(18,20,15,.16); background:var(--white); border-radius:100px; padding:7px 14px;
  font-size:12.5px; cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.qc-chip:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.qc-chat-input-row{ display:flex; gap:8px; }
.qc-chat-input-row input{ flex:1; border:1px solid rgba(18,20,15,.14); border-radius:100px; padding:11px 16px; font-size:13.5px; font-family:var(--font-body); }
.qc-chat-input-row input:focus{ outline:none; border-color:var(--coral); }
.qc-chat-send{
  width:42px; height:42px; border-radius:50%; background:var(--ink); color:var(--paper); border:none; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s ease;
}
.qc-chat-send:hover{ background:var(--coral); }
.qc-chat-foot{ margin-top:12px; }

/* ---------- Host card (who you'll be talking to) ---------- */
.qc-host-card{ display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.qc-host-avatar{
  width:52px; height:52px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:15px;
}
.qc-host-card strong{ display:block; font-family:var(--font-display); font-size:15px; }
.qc-host-card span{ display:block; font-size:12px; color:var(--muted); margin-top:1px; }

/* ---------- Meeting summary card (appears once date+time picked) ---------- */
.qc-meeting-summary{
  display:none; flex-direction:column; gap:8px; background:var(--white);
  border:1.5px solid var(--coral); border-radius:12px; padding:12px 16px; margin-bottom:20px;
}
.qc-meeting-summary.show{ display:flex; }
.qc-meeting-summary div{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink); }
.qc-meeting-summary i{ color:var(--coral); font-size:14px; width:16px; }

/* ---------- Schedule layout: calendar + time slots side by side ---------- */
.qc-schedule-layout{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.qc-schedule-layout .qc-calendar{ flex:1 1 240px; }
.qc-cal-slots{
  flex:0 0 118px; display:flex; flex-direction:column; gap:8px;
  max-height:300px; overflow-y:auto; padding-right:2px;
}

/* ---------- Interactive calendar (light theme) ---------- */
.qc-calendar{
  background:var(--white); border:1px solid rgba(18,20,15,.12); border-radius:16px; padding:16px;
  color:var(--ink); transition:box-shadow .2s ease;
}
.qc-calendar.qc-cal-error{ box-shadow:0 0 0 2px var(--coral); }

.qc-cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.qc-cal-month{ font-family:var(--font-display); font-weight:600; font-size:13.5px; color:var(--ink); }
.qc-cal-nav{
  width:26px; height:26px; border-radius:50%; background:var(--paper-dim); border:none; color:var(--ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:10.5px; transition:background .15s ease, color .15s ease;
}
.qc-cal-nav:hover:not(:disabled){ background:var(--coral); color:var(--white); }
.qc-cal-nav:disabled{ opacity:.3; cursor:not-allowed; }

.qc-cal-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:6px; }
.qc-cal-weekdays span{ font-family:var(--font-mono); font-size:9px; text-transform:uppercase; color:var(--muted); text-align:center; }

.qc-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.qc-cal-day{
  aspect-ratio:1; border-radius:50%; background:transparent; border:none; color:var(--ink);
  font-family:var(--font-body); font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .15s ease; position:relative;
}
.qc-cal-day:hover:not(:disabled){ background:var(--paper-dim); }
.qc-cal-day.is-today{ font-weight:700; }
.qc-cal-day.is-selected{
  box-shadow:inset 0 0 0 1.5px var(--coral); font-weight:600; color:var(--coral-dim);
}
.qc-cal-day.is-selected::after{
  content:""; position:absolute; bottom:2px; left:50%; transform:translateX(-50%);
  width:3.5px; height:3.5px; border-radius:50%; background:var(--coral);
}
.qc-cal-day.is-past{ color:var(--muted); opacity:.4; cursor:not-allowed; }
.qc-cal-day.is-blank{ visibility:hidden; cursor:default; }

.qc-slot{
  background:var(--white); border:1.5px solid rgba(18,20,15,.12); color:var(--ink); border-radius:10px;
  padding:10px 8px; font-size:12px; font-family:var(--font-body); font-weight:500; cursor:pointer; text-align:center;
  transition:background .15s ease, border-color .15s ease; white-space:nowrap;
}
.qc-slot:hover{ border-color:var(--coral); }
.qc-slot.active{ background:rgba(255,75,51,0.1); border-color:var(--coral); color:var(--coral-dim); font-weight:700; }

.qc-cal-selected{
  margin-top:2px; font-family:var(--font-mono); font-size:11px; color:var(--coral); text-align:center; display:none;
}
.qc-cal-selected.show{ display:block; }

/* ---------- Timezone row ---------- */
.qc-tz-row{
  display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--muted);
  padding:2px 2px 18px;
}
.qc-tz-row i:first-child{ color:var(--coral); font-size:14px; }
.qc-tz-row span{ flex:1; }
.qc-tz-row i:last-child{ font-size:11px; }

/* ---------- Schedule CTA button ---------- */
.qc-btn-schedule{
  width:100%; border:none; border-radius:100px; padding:15px 20px;
  background:linear-gradient(135deg, var(--coral), #8a1f14); color:var(--white);
  font-family:var(--font-body); font-weight:600; font-size:14.5px;
  display:flex; align-items:center; justify-content:center; gap:9px; cursor:pointer;
  box-shadow:0 10px 22px -10px rgba(255,75,51,.55); transition:filter .2s ease;
}
.qc-btn-schedule:hover{ filter:brightness(1.06); }

/* ---------- Mobile adjustments ---------- */
@media (max-width:640px){
  .qc-tabs{ width:100%; border-radius:18px 18px 0 0; }
  .qc-tab{ flex:1; width:auto; }

  .qc-panel{ width:100%; height:88vh; top:auto; bottom:0; border-radius:22px 22px 0 0; transform:translateY(100%); }
  .qc-panel.show{ transform:translateY(0); }
  .qc-pane{ padding:66px 20px 110px; }
  .qc-schedule-layout{ flex-direction:column; }
  .qc-schedule-layout .qc-calendar{ flex:none; width:100%; }
  .qc-cal-slots{ flex:none; width:100%; flex-direction:row; flex-wrap:wrap; max-height:none; margin-top:14px; }
  .qc-cal-slots .qc-slot{ flex:1 1 30%; }
}