/* ============================================================
   booking.css — shared stylesheet for the booking popup + calendar
   Canonical source: index.html popup CSS (lines 881-956), brand
   tokens (:root lines 187-196). Loaded by all pages via
   <link rel="stylesheet" href="/booking.css">.
   Brand: green #22c55e, font 'Geist' (system fallback).
   ============================================================ */

/* ── Brand tokens (scoped to the popup overlay so they don't
      collide with a host page's :root) ── */
.popup-overlay{
  --green:#22c55e;
  --gd:#16a34a;
  --calm:#0f9b45;
  --navy:#1a1f2e;
  --k:#0a0a0a;
  --forest:#096846;
}

/* ── POPUP MODAL (verbatim from canonical index.html 881-956) ── */
.popup-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.65);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:9999;justify-content:center;align-items:flex-start;padding:20px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.popup-overlay.active{display:flex}
.popup-card{background:#fff;border-radius:24px;width:100%;max-width:420px;box-shadow:0 30px 80px rgba(0,0,0,.4);margin:auto 0;flex-shrink:0;overflow:hidden}
.popup-header{background:#fff;padding:26px 24px 18px;text-align:center;position:relative;border-radius:24px 24px 0 0;border-bottom:1px solid #f0f0f0}
.popup-close{position:absolute;top:16px;right:18px;width:28px;height:28px;border-radius:50%;background:#f3f4f6;border:none;color:#9ca3af;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.popup-close:hover{background:#e5e7eb;color:#374151}
.popup-header img{height:28px;max-width:170px;width:auto;display:block;margin:0 auto 14px}
.steps-bar{display:flex;align-items:center;justify-content:center;gap:5px;padding:0;margin:0 0 8px}
.step-dot{width:24px;height:4px;border-radius:99px;background:#e5e7eb;transition:all .3s}
.step-dot.active{background:#111;width:32px}
.step-dot.completed{background:#d1d5db}
.steps-labels{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;padding:0}
.step-label{text-align:center;font-size:10px;font-weight:600;letter-spacing:.03em;line-height:1.2;color:#d1d5db}
.step-label.active{color:#111}
.step-label.completed{color:#9ca3af}
.popup-body{padding:26px 24px 30px;color:#1a1a2e}
.popup-body h2{font-size:22px;font-weight:800;color:#1a1a2e;margin-bottom:10px}
.popup-body .sub{font-size:13px;color:#888;margin-bottom:22px}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:12px;font-weight:700;color:#1a1a2e;margin-bottom:6px}
.form-group input,.form-group select{width:100%;padding:13px 16px;border:2px solid #e2e5ea;border-radius:10px;font-family:inherit;font-size:15px;color:#1a1a2e;outline:none;background:#fafbfc;transition:border-color .2s}
.form-group input:focus,.form-group select:focus{border-color:#111;background:#fff}
.form-group input::placeholder{color:#bbb}
.popup-cta{width:100%;padding:16px;background:#111;color:#fff;border:none;border-radius:12px;font-family:inherit;font-size:16px;font-weight:700;cursor:pointer;transition:all .2s;margin-top:8px}
.popup-cta:hover{background:#000;transform:translateY(-1px)}
.popup-cta:disabled{background:#d1d5db;color:#fff;cursor:not-allowed;transform:none}
.plan-option{border:2px solid #e5e7eb;border-radius:14px;padding:18px 20px;margin-bottom:12px;cursor:pointer;transition:all .2s;position:relative}
.plan-option:hover{border-color:#d1d5db}
.plan-option.selected{border-color:#111;background:#f9fafb}
.popup-card .popular-badge{position:absolute;top:-10px;right:16px;background:#111;color:#fff;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:3px 10px;border-radius:20px}
.plan-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.plan-name{font-weight:700;font-size:16px;color:#1a1a2e}
.plan-price{font-weight:800;font-size:20px;color:#1a1a2e}
.plan-price em{font-size:13px;font-weight:500;color:#888;font-style:normal}
.plan-desc{font-size:13px;color:#888}
.secure-note{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px;font-size:11px;color:#888}
.stripe-badge{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid #f0f0f0}
.stripe-badge .stripe-text{font-size:11px;color:#aaa}
.stripe-word{font-size:14px;font-weight:800;color:#635bff}
.success-check{width:56px;height:56px;background:#111;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.step4-note{text-align:center;font-size:13px;color:#888;line-height:1.5;margin-top:16px}
.step-view{display:none}
.step-view.active{display:block}
.back-btn{display:inline-flex;align-items:center;gap:4px;background:none;border:none;font-family:inherit;font-size:13px;font-weight:600;color:#888;cursor:pointer;padding:0;margin-bottom:18px;transition:color .2s}
.back-btn:hover{color:#1a1a2e}
.cal-container{margin-bottom:16px}
.cal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.cal-month{font-size:16px;font-weight:700;color:#1a1a2e}
.cal-nav{display:flex;gap:8px}
.cal-nav button{width:32px;height:32px;border-radius:50%;border:1px solid #e2e5ea;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;color:#555;transition:all .2s}
.cal-nav button:hover{background:#f5f5f5}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.cal-day-label{font-size:11px;font-weight:700;color:#888;padding:6px 0;text-transform:uppercase}
.cal-day{padding:10px 0;border-radius:8px;font-size:14px;font-weight:500;color:#1a1a2e;cursor:pointer;transition:all .15s;border:2px solid transparent}
.cal-day:hover{background:#f3f4f6}
.cal-day.empty{cursor:default}
.cal-day.empty:hover{background:transparent}
.cal-day.past{color:#ddd;cursor:default}
.cal-day.past:hover{background:transparent}
.cal-day.selected{background:#111;color:#fff;font-weight:700}
.cal-day.today{border-color:#111}
.time-slots{margin-top:16px}
.time-slots-label{font-size:12px;font-weight:700;color:#1a1a2e;margin-bottom:10px}
.time-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.time-slot{padding:10px;border:2px solid #e5e7eb;border-radius:8px;text-align:center;font-size:13px;font-weight:600;color:#1a1a2e;cursor:pointer;transition:all .15s}
.time-slot:hover{border-color:#d1d5db}
.time-slot.selected{border-color:#111;background:#f9fafb;color:#111}

/* ── Popup FOMO / qualifying-question styles (structure from
      ad/index.html 148-268, re-themed to brand green + Geist).
      booking.js injects this markup for the ad variant. ── */
.live-viewers{display:inline-flex;align-items:center;gap:6px;background:#f3f4f6;color:#374151;font-size:11px;font-weight:700;padding:4px 10px;border-radius:99px;margin-bottom:12px}
.live-viewers .live-dot{width:6px;height:6px;border-radius:50%;background:#111;animation:pulseDot 1.6s infinite}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(17,17,17,.5)}70%{box-shadow:0 0 0 6px rgba(17,17,17,0)}100%{box-shadow:0 0 0 0 rgba(17,17,17,0)}}
.recent-tick{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #e5e7eb;border-radius:999px;padding:8px 14px;font-size:11.5px;color:#1a1a2e;font-weight:600;margin:10px 0 0;opacity:0;transition:opacity .4s ease;min-height:32px}
.recent-tick.show{opacity:1}
.recent-tick .rt-avatar{width:22px;height:22px;border-radius:50%;background:#111;color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.recent-tick .rt-text{flex:1}
.recent-tick .rt-text strong{color:#111}
.recent-tick .rt-time{color:#9ca3af;font-size:10.5px;flex-shrink:0}
/* ── Quick Questions flow (booking.js ad variant, step 2).
      Multi-panel: Q1/Q2/Q3 + photo nudge + soft stop. Themed to brand green. ── */
.qq-panel{width:100%}
.qq-h{font-size:20px;font-weight:800;color:#1a1a2e;line-height:1.3;text-align:left;margin:0 0 1.2rem;letter-spacing:-.01em}
.qq-opts{display:flex;flex-direction:row;gap:10px}
.qq-opt{flex:1;padding:16px 12px;border-radius:14px;border:2px solid #e5e7eb;background:#fff;cursor:pointer;transition:all .18s;display:flex;flex-direction:column;align-items:center;gap:8px;font-family:inherit;-webkit-tap-highlight-color:transparent}
.qq-opt:hover{border-color:#d1d5db;background:#f9fafb}
.qq-opt.selected{border-color:#111;background:#f9fafb}
.qq-opt-icon{font-size:26px;line-height:1}
.qq-opt-label{font-size:16px;font-weight:800;color:#111827}
.qq-radio{width:16px;height:16px;border-radius:50%;border:2px solid #d1d5db;display:flex;align-items:center;justify-content:center;transition:all .18s;align-self:flex-end}
.qq-opt.selected .qq-radio{border-color:#111;background:#111}
.qq-opt.selected .qq-radio::after{content:'';width:6px;height:6px;border-radius:50%;background:#fff;display:block}
.photo-pair{display:flex;gap:10px;margin-bottom:14px}
.photo-pair img{width:50%;height:130px;object-fit:cover;border-radius:12px;display:block;border:1.5px solid #f0f0f0}
.green-banner{background:#22c55e;border-radius:10px;padding:10px 14px;font-size:13px;font-weight:700;color:#fff;text-align:center;margin-bottom:16px}
.nudge-body{font-size:14px;color:#6b7280;line-height:1.65;margin:0 0 1.5rem}
.qq-continue{width:100%;padding:15px;border-radius:12px;border:none;background:#111;color:#fff;font-size:16px;font-weight:800;font-family:inherit;cursor:pointer;transition:all .18s}
.qq-continue:hover{background:#000;transform:translateY(-1px)}
.qq-continue-outline{width:100%;padding:14px;border-radius:12px;border:2px solid #e2e5ea;background:#fff;color:#6b7280;font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;margin-top:10px;transition:all .18s}
.qq-continue-outline:hover{background:#f9fafb;border-color:#d1d5db;color:#374151}

/* ── Polish classes ── */
/* Calendar loading skeleton: subtle shimmer placeholder */
.cal-skeleton{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.cal-day.skeleton{background:#eef1f4;border-radius:8px;color:transparent;cursor:default;border:2px solid transparent;background-image:linear-gradient(90deg,#eef1f4 0%,#f6f8fa 50%,#eef1f4 100%);background-size:200% 100%;animation:calShimmer 1.4s ease-in-out infinite}
.cal-day.skeleton:hover{background:#eef1f4}
@keyframes calShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Empty-state message when a day has no available times */
.ff-empty-slots{text-align:center;color:#9ca3af;font-size:13px;font-weight:500;padding:22px 16px;line-height:1.5}

/* Selected-slot summary line above the Confirm button */
.slot-summary{background:#f3f4f6;color:#111;font-size:13px;font-weight:700;text-align:center;border-radius:10px;padding:12px 16px;margin:16px 0 4px;line-height:1.4}

/* Smooth, tasteful transitions on the interactive calendar/time
   elements and a gentle fade for step views */
.cal-day{transition:background .15s,border-color .15s}
.time-slot{transition:background .15s,border-color .15s}
.step-view.active{animation:stepFade .25s ease}
@keyframes stepFade{from{opacity:0}to{opacity:1}}

/* ── Mobile (verbatim popup block from canonical index.html 948-956) ── */
@media(max-width:500px){
  .popup-overlay{padding:10px;align-items:flex-start}
  .popup-card{border-radius:16px;margin:10px 0}
  .popup-header{border-radius:16px 16px 0 0}
  .popup-body{padding:20px}
  .time-grid{grid-template-columns:repeat(2,1fr)}
  .popup-body input,.popup-body select{font-size:16px!important}
  .step-label{font-size:8.5px;letter-spacing:.1px}
  .qq-h{font-size:18px}
  .photo-pair img{height:110px}
  .qq-opt-icon{font-size:24px}
}