.riverside-booking-wrap { display: flex; flex-direction: column; gap: 2rem; align-items: flex-start; } @media (min-width: 640px) { .riverside-booking-wrap { flex-direction: row; gap: 2rem; } } #riverside-calendar { --cal-row-h: 3.75rem; max-width: 340px; font-size: 0.9rem; flex-shrink: 0; } #riverside-slots-wrap { flex: 1; padding-top: 3rem; } #riverside-booking-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; } .riverside-slot-btn { padding: 0.6rem 0.5rem; border: 1.5px solid #306f8e; border-radius: 6px; font-size: 0.8rem; color: #306f8e; background: #fff; cursor: pointer; text-align: center; transition: background 0.15s, color 0.15s; } .riverside-slot-btn:hover:not(.is-selected) { background: #dde8f0; } .riverside-slot-btn.is-selected { background: #306f8e; color: #fff; } /* ── Strip all borders ── */ #riverside-calendar .fc-scrollgrid, #riverside-calendar .fc-scrollgrid-section > *, #riverside-calendar td, #riverside-calendar th { border: none !important; } /* ── Header toolbar ── */ #riverside-calendar .fc-header-toolbar { justify-content: center; gap: 0.25rem; margin-bottom: 1.25rem; } #riverside-calendar .fc-toolbar-title { font-family: Georgia, 'Times New Roman', serif; font-size: 1.5rem; font-weight: normal; color: #111; } #riverside-calendar .fc-toolbar-title::after { content: ' \25BC'; font-size: 0.6em; vertical-align: middle; color: #374151; } #riverside-calendar .fc-button-group, #riverside-calendar .fc-button { background: none !important; border: none !important; box-shadow: none !important; color: #6b7280 !important; font-size: 1rem; padding: 0.2rem 0.4rem; cursor: pointer; } #riverside-calendar .fc-button:hover { color: #111 !important; } #riverside-calendar .fc-button:focus { outline: none !important; box-shadow: none !important; } /* ── Day-of-week header row (S M T W T F S) ── */ #riverside-calendar .fc-col-header-cell { padding: 0.4rem 0; border: none; } #riverside-calendar .fc-col-header-cell-cushion { font-size: 0.8rem; font-weight: normal; color: #9ca3af; text-decoration: none; padding: 0; } /* ── Day cells ── */ #riverside-calendar .fc-daygrid-day-frame { min-height: calc(var(--cal-row-h) - 0.5rem) !important; display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 0; } #riverside-calendar .fc-daygrid-day-events, #riverside-calendar .fc-daygrid-day-bg { display: none !important; } #riverside-calendar .fc-daygrid-day-top { flex-direction: row; justify-content: center; padding: 0; } #riverside-calendar .fc-daygrid-day-number { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; color: #9ca3af; text-decoration: none; padding: 0; line-height: 1; transition: background 0.15s, color 0.15s; } /* Days with available slots — teal outline circle */ #riverside-calendar .fc-daygrid-day.has-availability .fc-daygrid-day-number { border: 1px solid #306f8e; color: #111; cursor: pointer; } #riverside-calendar .fc-daygrid-day.has-availability .fc-daygrid-day-number:hover { background: #dde8f0; } /* Selected day — filled teal circle */ #riverside-calendar .fc-daygrid-day.is-selected .fc-daygrid-day-number { background: #306f8e; border: 1px solid #306f8e; color: #fff !important; } /* Days in other months */ #riverside-calendar .fc-day-other .fc-daygrid-day-number { color: #d1d5db !important; border-color: transparent !important; } /* Today — no special background, let availability/selected styles win */ #riverside-calendar .fc-day-today { background: none !important; } /* Weekends — same appearance as any other non-available day */ #riverside-calendar .fc-day-sat, #riverside-calendar .fc-day-sun { background: none !important; } #riverside-calendar .fc-col-header-cell.fc-day-sat .fc-col-header-cell-cushion, #riverside-calendar .fc-col-header-cell.fc-day-sun .fc-col-header-cell-cushion { color: #9ca3af; } /* ── Hide all event bars, harnesses, and more-links ── */ #riverside-calendar .fc-event, #riverside-calendar .fc-daygrid-event-harness, #riverside-calendar .fc-daygrid-more-link, #riverside-calendar .fc-more-popover, #riverside-calendar .riverside-holiday-label { display: none !important; } /* ── Daygrid body rows — give them breathing room ── */ #riverside-calendar .fc-daygrid-body tr { height: var(--cal-row-h); }