:root{ --bg:#fff; --muted:#6b7280; --accent:#0ea5a3; }
body{ font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background:var(--bg); color:#111; margin:0; padding:24px; }
.booking-page{ max-width:920px; margin:32px auto; }
.booking-form{ display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start; }
.booking-form label{ display:flex; flex-direction:column; font-size:14px; color:var(--muted); }
.booking-form input, .booking-form select{ padding:8px 10px; border:1px solid #e5e7eb; border-radius:6px; font-size:15px; }
.booking-form .form-actions{ grid-column:1 / -1; display:flex; gap:8px; align-items:center; }
#bookBtn{ background:var(--accent); color:#fff; border:none; padding:10px 14px; border-radius:8px; cursor:pointer; }
.booking-message{ margin-top:8px; grid-column:1 / -1; color:var(--muted); }
.notes{ margin-top:20px; color:var(--muted); }
@media (max-width:720px){ .booking-form{ grid-template-columns:1fr; } }

/* Weekly availability calendar */
.availability-section{ margin-top:28px; }
.calendar-week{ display:grid; grid-template-columns: repeat(7, 1fr); gap:8px; align-items:start; }
.calendar-day{ background: #fff; border-radius:10px; padding:12px; box-shadow:0 6px 18px rgba(15,23,42,0.04); min-height:120px; }
.calendar-day h4{ margin:0 0 8px 0; font-size:14px; text-align:center; }
.slot{ display:block; background: #f3f4f6; color:#111827; padding:8px 6px; margin:6px 0; border-radius:8px; text-align:center; cursor:pointer; font-size:13px; }
.slot.available{ background:#e6fffa; color:#065f46; }
.slot.unavailable{ opacity:0.45; cursor:not-allowed; }
.slot.selected{ outline: 2px solid #0078d7; box-shadow:0 4px 12px rgba(0,120,215,0.12); }
.muted{ color:#6b7280; }

/* Google calendar embed */
.calendar-embed-section { margin-top:22px; }
#calendarEmbedContainer { background:#fff; border-radius:10px; box-shadow:0 8px 24px rgba(15,23,42,0.06); padding:8px; min-height:360px; }
#calendarEmbedContainer iframe { width:100%; height:540px; border:0; border-radius:8px; }

/* Month view styles */
.view-toggle{ margin:8px 0 12px 0; }
.view-toggle button{ padding:6px 10px; border-radius:8px; border:1px solid #e5e7eb; background:#fff; margin-right:6px; cursor:pointer; }
.view-toggle button.active{ background:var(--accent); color:#fff; border-color:transparent; }
.calendar-month{ background:#fff; border-radius:10px; padding:12px; box-shadow:0 6px 18px rgba(15,23,42,0.04); }
.month-row{ display:grid; grid-template-columns: repeat(7, 1fr); gap:6px; margin-bottom:6px; }
.month-cell{ min-height:84px; padding:8px; border-radius:8px; background:#f8fafc; position:relative; }
.month-day-num{ position:absolute; top:6px; left:8px; font-weight:600; color:#111827; }
.month-day-availability{ position:absolute; bottom:8px; left:8px; right:8px; font-size:12px; color:#064e3b; text-align:center; }
.month-head{ background:transparent; color:var(--muted); font-weight:600; text-align:center; min-height:28px; }
.month-empty{ background:transparent; }
.month-day{ cursor:pointer; }

@media (max-width:720px){ .calendar-week{ grid-template-columns: repeat(2, 1fr); } .month-row{ grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 480px) {
    .calendar-week { grid-template-columns: 1fr; }
    .month-row { grid-template-columns: 1fr; }
    .booking-page { margin: 16px auto; padding: 16px; }
    body { padding: 16px; }
}