/* booking.css — Booking widget styles */

/* ── BOOKING WIDGET ───────────────────────────────────────────────────────── */

      #bk-modal { display:none; position:fixed; inset:0; z-index:1000; align-items:center; justify-content:center; padding:24px; }
      #bk-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.55); }
      #bk-panel { position:relative; background:white; border-radius:20px; width:100%; max-width:960px;
        height:min(92vh, 900px); overflow-y:auto; box-shadow:0 8px 48px rgba(0,0,0,0.25);
        animation: bk-fade-in 0.2s ease; }
      @keyframes bk-fade-in { from { opacity:0; transform:scale(0.97); } to { opacity:1; transform:scale(1); } }
      #bk-header { position:sticky; top:0; background:white; padding:14px 36px 0;
        border-bottom:1px solid #e8edf5; z-index:1; }
      #bk-close { position:absolute; top:14px; right:16px; background:none; border:none;
        font-size:1.1rem; cursor:pointer; color:#999; padding:4px 8px; border-radius:6px; }
      #bk-close:hover { background:#f0f0f0; }
      #bk-progress { display:flex; gap:0; margin-bottom:8px; }
      .bk-step-pill { flex:1; height:4px; background:#e8edf5; border-radius:2px; margin:0 2px; transition:background 0.2s; }
      .bk-step-pill.done, .bk-step-pill.active { background:#0E036C; }
      #bk-body { padding:20px 36px; }

      .bk-title { font-size:1.05rem; font-weight:800; color:#0E036C; margin-bottom:2px; }
      .bk-sub   { font-size:0.82rem; color:#6b7c9d; margin-bottom:14px; }

      .bk-type-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:14px; }
      .bk-type-card { border:2px solid #dce6f5; border-radius:12px; padding:12px 14px; cursor:pointer;
        transition:border-color 0.15s, background 0.15s; text-align:left; background:white; }
      .bk-type-card:hover { border-color:#0E036C; background:#f7f9ff; }
      .bk-type-card.selected { border-color:#0E036C; background:#0E036C; color:white; }
      .bk-type-card.selected .bk-type-name { color:white; font-weight:800; }
      .bk-type-card.selected .bk-type-price { color:rgba(255,255,255,0.8); }
      .bk-type-card.selected .bk-type-deposit { color:rgba(255,255,255,0.8); }
      .bk-type-icon { font-size:1.4rem; margin-bottom:6px; }
      .bk-type-name { font-size:0.88rem; font-weight:700; color:#0E036C; }
      .bk-type-price { font-size:0.78rem; color:#6b7c9d; margin-top:2px; }
      .bk-type-deposit { font-size:0.75rem; color:#0E036C; font-weight:600; margin-top:2px; }

      .bk-postcode-wrap { background:#f7f9ff; border-radius:10px; padding:14px 16px; margin-bottom:16px; }
      .bk-postcode-wrap label { font-size:0.8rem; font-weight:700; color:#0E036C; display:block; margin-bottom:8px; }
      .bk-postcode-row { display:flex; gap:8px; }
      .bk-postcode-row input { flex:1; padding:9px 12px; border:1.5px solid #dce6f5; border-radius:8px;
        font-size:0.9rem; font-family:inherit; text-transform:uppercase; }
      .bk-postcode-row input:focus { outline:none; border-color:#0E036C; }
      .bk-postcode-result { margin-top:8px; font-size:0.82rem; font-weight:600; }
      .bk-postcode-result.ok  { color:#16a34a; }
      .bk-postcode-result.err { color:#dc2626; }

      .bk-cal-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
      .bk-cal-nav h3 { font-size:0.95rem; font-weight:700; color:#0E036C; }
      .bk-cal-nav button { background:none; border:1.5px solid #dce6f5; border-radius:8px;
        padding:5px 12px; cursor:pointer; font-size:0.85rem; color:#0E036C; font-weight:700; }
      .bk-cal-nav button:hover { background:#f7f9ff; }
      .bk-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; margin-bottom:10px; }
      .bk-cal-day-name { text-align:center; font-size:0.68rem; font-weight:700; color:#6b7c9d;
        text-transform:uppercase; padding:4px 0; }
      .bk-cal-day { text-align:center; padding:6px 4px 5px; border-radius:8px; cursor:pointer;
        font-size:0.85rem; font-weight:600; color:#0E036C; transition:background 0.1s; position:relative; }
      .bk-cal-day:hover:not(.disabled):not(.empty):not(.no-slots) { background:#dce6f5; }
      .bk-cal-day.selected { background:#0E036C; color:white; }
      .bk-cal-day.selected .bk-avail-dots span { opacity:0.7; }
      .bk-cal-day.today { border:2px solid #0E036C; }
      .bk-cal-day.disabled, .bk-cal-day.past { color:#ccc; cursor:default; }
      .bk-cal-day.no-slots { color:#ccc; cursor:default; background:#fafafa; }
      .bk-cal-day.empty { cursor:default; }
      .bk-avail-dots { display:flex; justify-content:center; gap:2px; margin-top:3px; height:5px; }
      .bk-avail-dots span { width:5px; height:5px; border-radius:50%; display:inline-block; }
      .bk-dot-am  { background:#3b82f6; }
      .bk-dot-pm  { background:#f59e0b; }
      .bk-dot-eve { background:#8b5cf6; }
      .bk-dot-none { background:#e2e8f0; }
      .bk-cal-key { display:flex; gap:12px; justify-content:center; margin-bottom:12px; }
      .bk-cal-key-item { display:flex; align-items:center; gap:4px; font-size:10px; color:#6b7c9d; font-weight:600; }
      .bk-cal-key-dot { width:7px; height:7px; border-radius:50%; display:inline-block; }

      .bk-slots { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-bottom:10px; }
      .bk-slot { padding:7px 4px; border:1.5px solid #dce6f5; border-radius:8px; cursor:pointer;
        font-size:0.82rem; font-weight:700; color:#0E036C; text-align:center; transition:all 0.1s; }
      .bk-slot:hover { border-color:#0E036C; background:#f7f9ff; }
      .bk-slot.selected { background:#0E036C; color:white; border-color:#0E036C; }
      .bk-slots-loading { text-align:center; color:#6b7c9d; font-size:0.85rem; padding:20px; }
      .bk-slots-empty  { text-align:center; color:#6b7c9d; font-size:0.85rem; padding:20px;
        background:#f7f9ff; border-radius:10px; }

      .bk-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
      .bk-form-group { display:flex; flex-direction:column; gap:4px; }
      .bk-form-group.full { grid-column:1/-1; }
      .bk-form-group label { font-size:0.78rem; font-weight:700; color:#0E036C; }
      .bk-form-group input, .bk-form-group select, .bk-form-group textarea {
        padding:7px 10px; border:1.5px solid #dce6f5; border-radius:8px;
        font-size:0.88rem; font-family:inherit; color:#0E036C; }
      .bk-form-group input:focus, .bk-form-group select:focus, .bk-form-group textarea:focus {
        outline:none; border-color:#0E036C; }
      .bk-form-group textarea { resize:vertical; min-height:72px; }

      .bk-summary { background:#f7f9ff; border-radius:12px; padding:12px 16px; margin-bottom:12px; }
      .bk-summary-row { display:flex; justify-content:space-between; align-items:center;
        padding:3px 0; font-size:0.88rem; }
      .bk-summary-row.total { border-top:1px solid #dce6f5; margin-top:6px; padding-top:10px;
        font-weight:700; font-size:0.95rem; }
      .bk-summary-label { color:#6b7c9d; }
      .bk-summary-value { font-weight:700; color:#0E036C; }

      #bk-square-container { min-height:80px; margin-bottom:16px; }

      .bk-consent { display:flex; gap:10px; align-items:flex-start; margin-bottom:10px;
        font-size:0.8rem; color:#555; line-height:1.5; }
      .bk-consent input { margin-top:2px; flex-shrink:0; accent-color:#0E036C; }

      .bk-btn { width:100%; padding:11px; border:none; border-radius:30px; font-family:inherit;
        font-size:0.95rem; font-weight:800; cursor:pointer; transition:all 0.15s; margin-top:4px; }
      .bk-btn-primary { background:#0E036C; color:white; }
      .bk-btn-primary:hover { background:#0a0250; }
      .bk-btn-primary:disabled { background:#ccc; cursor:not-allowed; }
      .bk-btn-back { background:white; color:#0E036C; border:1.5px solid #dce6f5 !important;
        border-radius:30px; padding:10px; font-family:inherit; font-size:0.85rem;
        font-weight:700; cursor:pointer; margin-bottom:8px; width:100%; }
      .bk-btn-back:hover { background:#f7f9ff; }

      .bk-error { background:#fee2e2; color:#991b1b; padding:12px 16px; border-radius:8px;
        font-size:0.85rem; font-weight:600; margin-bottom:12px; display:none; }
      .bk-success { text-align:center; padding:20px 0; }
      .bk-success-check { font-size:3rem; margin-bottom:12px; }
      .bk-success h2 { font-size:1.3rem; font-weight:900; color:#0E036C; margin-bottom:8px; }
      .bk-success p { font-size:0.88rem; color:#555; line-height:1.6; }
      .bk-ref { background:#f7f9ff; border-radius:10px; padding:10px 16px; margin:14px 0;
        font-size:1rem; font-weight:800; color:#0E036C; letter-spacing:0.05em; }
      .bk-whatsapp { background:#dcfce7; border-radius:10px; padding:10px 16px; margin-top:12px;
        font-size:0.82rem; color:#166534; font-weight:600; }

      @media (max-width:640px) {
        #bk-panel { border-radius:16px; height:92vh; max-width:100%; }
        #bk-body { padding:20px; }
        #bk-header { padding:16px 20px 0; }
        .bk-type-grid { grid-template-columns:1fr; }
        .bk-type-grid { grid-template-columns:1fr; }
        .bk-form-grid { grid-template-columns:1fr; }
        .bk-slots { grid-template-columns:repeat(3,1fr); }
      }