/* ── Booking-specific styles ──────────────────────────────── */
    .booking-wrap { max-width: 780px; margin: 0 auto; padding: 2rem 1rem 4rem; }
    .booking-steps { display: flex; gap: .5rem; margin-bottom: 2rem; }
    .step-pill {
      flex: 1; text-align: center; padding: .45rem .5rem;
      border-radius: 20px; font-size: .78rem; font-weight: 600;
      background: var(--border); color: var(--muted);
    }
    .step-pill.active { background: var(--primary); color: #fff; }
    .step-pill.done   { background: var(--success);  color: #fff; }

    /* calendar strip */
    .date-strip { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1rem 0; }
    .date-btn {
      padding: .5rem .9rem; border-radius: 8px; border: 1.5px solid var(--border);
      background: #fff; cursor: pointer; font-size: .9rem; transition: all .15s;
    }
    .date-btn:hover  { border-color: var(--primary); color: var(--primary); }
    .date-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
    .date-btn:disabled { opacity: .35; cursor: not-allowed; }

    /* time grid */
    .time-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px,1fr)); gap: .6rem; margin: 1rem 0; }
    .time-btn {
      padding: .6rem; border-radius: 8px; border: 1.5px solid var(--border);
      background: #fff; cursor: pointer; font-size: .9rem; font-weight: 500; transition: all .15s;
    }
    .time-btn:hover  { border-color: var(--primary); color: var(--primary); }
    .time-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

    /* form */
    .booking-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
    @media (max-width:540px) { .booking-form .form-row { grid-template-columns: 1fr; } }
    .booking-form label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; color: var(--dark); }
    .booking-form input,
    .booking-form textarea {
      width: 100%; padding: .6rem .8rem; border: 1.5px solid var(--border);
      border-radius: 8px; font-size: .95rem; font-family: inherit;
    }
    .booking-form input:focus,
    .booking-form textarea:focus { outline: none; border-color: var(--primary); }
    .booking-form textarea { resize: vertical; min-height: 80px; }
    .field-full { margin-bottom: 1rem; }

    /* summary box */
    .booking-summary {
      background: var(--light); border: 1.5px solid var(--border);
      border-radius: 10px; padding: 1.2rem 1.4rem; margin-bottom: 1.5rem;
    }
    .booking-summary h3 { font-size: 1rem; margin-bottom: .6rem; }
    .booking-summary p  { font-size: .9rem; color: var(--muted); margin: .2rem 0; }
    .booking-summary strong { color: var(--dark); }

    /* status */
    .status-msg {
      padding: .9rem 1.1rem; border-radius: 8px; margin: 1rem 0;
      font-size: .9rem; display: none;
    }
    .status-msg.error   { background: #fef2f2; border: 1px solid #fecaca; color: var(--error); display: block; }
    .status-msg.success { background: #f0fdf4; border: 1px solid #bbf7d0; color: var(--success); display: block; }
    .status-msg.info    { background: #eff6ff; border: 1px solid #bfdbfe; color: var(--primary); display: block; }

    /* confirmation screen */
    #screen-confirmed { text-align: center; padding: 3rem 1rem; }
    #screen-confirmed .check-icon { font-size: 3.5rem; margin-bottom: 1rem; }
    #screen-confirmed h2 { margin-bottom: .6rem; }
    #screen-confirmed p  { color: var(--muted); max-width: 480px; margin: .4rem auto; }

    /* hide/show screens */
    .screen { display: none; }
    .screen.active { display: block; }

    .nav-btns { display: flex; gap: 1rem; margin-top: 1.5rem; }
    .btn-ghost { background: transparent; border: 1.5px solid var(--border); color: var(--dark); padding: .7rem 1.6rem; border-radius: 8px; cursor: pointer; font-size: .95rem; font-weight: 600; }
    .btn-ghost:hover { border-color: var(--primary); color: var(--primary); }

    .loading-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid #fff; border-top-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle; margin-right: .4rem; }
    @keyframes spin { to { transform: rotate(360deg); } }