/* ═══════════════════════════════════════════════════════════════════ datepicker.css — self-contained styles for the reusable datepicker (js/datepicker.js). Booking pages already get these from booking.css; this file lets other surfaces (e.g. the admin route) use the picker without pulling in the whole booking stylesheet. ═══════════════════════════════════════════════════════════════════ */ .dp-btn, .dp-pop { --bk-sand: #B8965A; --bk-sand-pale: rgba(184,150,90,.13); --bk-teal-d: #102F3A; --bk-ink: #141412; --bk-mid: #6B6050; --bk-light: #A89880; --bk-border: #d1d5db; } /* ── Trigger button (styled to sit alongside admin form inputs) ── */ .dp-btn { display: block; width: 100%; background: #fff; border: 1px solid var(--bk-border); border-radius: 6px; padding: 9px 12px; font: inherit; font-size: 14px; color: var(--bk-light); text-align: left; cursor: pointer; transition: border-color .15s, color .15s; } .dp-btn:hover, .dp-btn:focus { outline: none; border-color: var(--bk-sand); } .dp-btn--active { color: var(--bk-ink); font-weight: 500; } /* ── Floating popup (appended to by datepicker.js) ── */ .dp-pop { position: fixed; z-index: 9999; background: #fff; border: 1px solid var(--bk-border); border-radius: 8px; box-shadow: 0 20px 56px rgba(20,20,18,.13), 0 4px 16px rgba(20,20,18,.06); padding: 16px; width: 310px; /* Final safety net: never taller than the viewport — JS also flips it up. */ max-height: calc(100vh - 16px); overflow-y: auto; } .dp-pop[hidden] { display: none; } /* ── Calendar head / nav ── */ .dp-pop .bk-cal { flex: 1; min-width: 0; } .dp-pop .bk-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .dp-pop .bk-cal__title { font-size: 16px; font-weight: 600; color: var(--bk-ink); letter-spacing: .02em; } .dp-pop .bk-cal__nav { width: 28px; height: 28px; border: 1px solid var(--bk-border); border-radius: 6px; background: #fff; color: var(--bk-mid); cursor: pointer; font-size: 17px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s, border-color .15s; padding: 0; flex-shrink: 0; } .dp-pop .bk-cal__nav:hover { background: var(--bk-sand); color: #fff; border-color: var(--bk-sand); } /* ── Day-of-week header ── */ .dp-pop .bk-cal__dow { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--bk-light); padding-bottom: 8px; border-bottom: 1px solid var(--bk-border); margin-bottom: 4px; } /* ── Day grid + cells ── */ .dp-pop .bk-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); } .dp-pop .bk-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 400; cursor: pointer; color: var(--bk-ink); position: relative; transition: background .1s, color .1s; user-select: none; } .dp-pop .bk-cell:hover:not(.bk-cell--blocked):not(.bk-cell--blank) { background: var(--bk-sand-pale); } .dp-pop .bk-cell--blank { cursor: default; } .dp-pop .bk-cell--blocked { color: var(--bk-light); cursor: not-allowed; text-decoration: line-through; opacity: .4; } .dp-pop .bk-cell--start, .dp-pop .bk-cell--end { background: var(--bk-sand) !important; color: #fff !important; font-weight: 600; z-index: 1; } .dp-pop .bk-cell--in-range { background: var(--bk-sand-pale); } .dp-pop .bk-cell--hover-range { background: rgba(184,150,90,.07); } .dp-pop .bk-cell--start::after, .dp-pop .bk-cell--end::before { content: ''; position: absolute; top: 0; bottom: 0; width: 50%; background: var(--bk-sand-pale); z-index: -1; } .dp-pop .bk-cell--start::after { right: 0; left: auto; } .dp-pop .bk-cell--end::before { left: 0; right: auto; } .dp-pop .bk-cell--start.bk-cell--end::after, .dp-pop .bk-cell--start.bk-cell--end::before { display: none; } /* ── Footer (hint + Done) ── */ .dp-pop .bk-pop__footer { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--bk-border); gap: 12px; } .dp-pop .bk-pop__hint { font-size: 11.5px; color: var(--bk-mid); letter-spacing: .03em; } .dp-pop .bk-pop__cta { background: var(--bk-sand); color: #fff; border: 0; border-radius: 6px; padding: 9px 22px; font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: background .15s; flex-shrink: 0; } .dp-pop .bk-pop__cta:hover { background: var(--bk-teal-d); } @media (max-width: 520px) { .dp-pop { width: calc(100vw - 32px); padding: 16px; } }