.booking-page { padding: 40px 0 80px; min-height: 70vh; }
.booking-page h1 { font-size: 28px; margin-bottom: 24px; }
.booking-page h2 { font-size: 18px; margin: 28px 0 14px; letter-spacing: 0.04em; text-transform: uppercase; }
.booking-notice { background: rgba(0,163,255,0.1); border: 1px solid rgba(0,163,255,0.3); padding: 24px; border-radius: 12px; margin-top: 40px; }
.auth-bar { background: rgba(255,255,255,0.04); padding: 10px 14px; border-radius: 8px; font-size: 14px; margin-bottom: 24px; }
.link-btn { background: none; border: 0; color: #00a3ff; font: inherit; cursor: pointer; padding: 0; text-decoration: underline; }
.bk-step.hidden { display: none; }
.service-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.service-card { background: #131c30; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 14px; text-align: left; cursor: pointer; color: #fff; font: inherit; transition: border-color 0.15s; }
.service-card:hover, .service-card.selected { border-color: #00a3ff; }
.svc-name { font-weight: 600; margin-bottom: 4px; }
.svc-meta { color: #9aa6b8; font-size: 12px; }
#bk-date { background: #131c30; color: #fff; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 10px 12px; font-size: 14px; margin-bottom: 14px; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.slot-btn { background: #131c30; border: 1px solid rgba(255,255,255,0.08); color: #fff; padding: 10px; border-radius: 8px; cursor: pointer; font: inherit; }
.slot-btn:hover, .slot-btn.selected { border-color: #00a3ff; background: rgba(0,163,255,0.12); }
#booking-form label { display: block; margin-bottom: 14px; font-size: 13px; color: #9aa6b8; }
#booking-form input, #booking-form textarea { width: 100%; max-width: 480px; margin-top: 6px; background: #131c30; color: #fff; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 10px 12px; font: inherit; }
#confirmation { background: rgba(46,204,113,0.1); border: 1px solid rgba(46,204,113,0.3); padding: 20px; border-radius: 12px; margin-top: 24px; }
#confirmation.hidden { display: none; }

/* Modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 20px; }
.modal.hidden { display: none; }
.modal-card { background: #0c1322; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 32px 28px; width: 100%; max-width: 420px; position: relative; }
.modal-close { position: absolute; top: 12px; right: 14px; background: transparent; border: 0; color: #9aa6b8; font-size: 24px; cursor: pointer; }
.modal-card h3 { margin-bottom: 18px; }
.modal-card label { display: block; margin-bottom: 14px; color: #9aa6b8; font-size: 12px; }
.modal-card input { width: 100%; margin-top: 6px; background: #060a14; color: #fff; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 10px 12px; font: inherit; }
.auth-switch { font-size: 13px; color: #9aa6b8; margin-top: 12px; }
.form-error { color: #ff6b78; font-size: 13px; margin-top: 10px; }
.auth-pane.hidden { display: none; }

/* === MONTH CALENDAR === */
.cal-wrap { max-width: 540px; background: #131c30; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 16px; }
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal-title { font-weight: 600; font-size: 16px; letter-spacing: 0.04em; }
.cal-nav { background: transparent; border: 1px solid rgba(255,255,255,0.1); color: #fff; width: 32px; height: 32px; border-radius: 50%; font-size: 18px; cursor: pointer; line-height: 1; }
.cal-nav:hover:not(:disabled) { border-color: #00a3ff; color: #00a3ff; }
.cal-nav:disabled { opacity: 0.3; cursor: not-allowed; }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; font-size: 11px; color: #9aa6b8; text-align: center; letter-spacing: 0.08em; margin-bottom: 6px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-day { aspect-ratio: 1; border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; background: #0c1322; color: #fff; cursor: pointer; font: inherit; font-size: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px; transition: transform 0.1s, border-color 0.15s; }
.cal-day:hover:not(:disabled) { border-color: #00a3ff; transform: translateY(-1px); }
.cal-day:disabled { background: transparent; color: rgba(255,255,255,0.2); cursor: not-allowed; border-color: transparent; }
.cal-day.empty { visibility: hidden; }
.cal-day.closed { background: transparent; color: rgba(255,255,255,0.18); cursor: not-allowed; border-color: rgba(255,255,255,0.04); }
.cal-day.full { background: rgba(255,71,87,0.08); color: rgba(255,255,255,0.4); cursor: not-allowed; border-color: rgba(255,71,87,0.2); }
.cal-day.open { background: rgba(0,163,255,0.06); border-color: rgba(0,163,255,0.25); }
.cal-day.selected { background: #00a3ff; color: #001025; border-color: #00a3ff; font-weight: 600; }
.cal-day.today { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.4); }
.cal-day .day-num { font-weight: 600; font-size: 15px; line-height: 1; }
.cal-day .day-meta { font-size: 9px; letter-spacing: 0.04em; opacity: 0.7; }
.cal-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; font-size: 11px; color: #9aa6b8; }
.cal-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.cal-legend .dot-open { background: rgba(0,163,255,0.6); border: 1px solid rgba(0,163,255,0.6); }
.cal-legend .dot-full { background: rgba(255,71,87,0.4); }
.cal-legend .dot-closed { background: rgba(255,255,255,0.1); }
#day-slots-section { margin-top: 24px; }
#day-slots-section.hidden { display: none; }
#day-slots-title { font-size: 14px; color: #9aa6b8; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; }


/* === MY BOOKINGS LIST === */
.bk-item { background: #131c30; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 16px 18px; margin-bottom: 10px; }
.bk-item.cancelled { opacity: 0.5; }
.bk-row1 { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.bk-row1 strong { font-size: 15px; }
.bk-row2 { font-size: 13px; color: #cbd3e0; margin-bottom: 4px; }
.bk-row3 { font-size: 12px; color: #9aa6b8; }
.bk-actions { margin-top: 10px; }
.bk-actions .link-btn { color: #ff6b78; }
.bk-status { font-size: 10px; padding: 3px 8px; border-radius: 4px; letter-spacing: 0.06em; text-transform: uppercase; }
.bk-status.active { background: rgba(46,204,113,0.15); color: #2ecc71; }
.bk-status.past { background: rgba(255,255,255,0.08); color: #9aa6b8; }
.bk-status.cancelled { background: rgba(255,71,87,0.15); color: #ff6b78; }