/* Stage availability popover. Self-contained on purpose. The popover is appended to so it can sit above the quote modal, which puts it outside .rental-app and out of reach of that file's scoped tokens, so it carries its own copy. Re-sync with public/css/rentals.css if the brand colours move. */ .avail-trigger { background: none; border: none; padding: 0; font: inherit; font-size: 0.8125rem; color: #4A7016; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; display: inline-flex; align-items: center; gap: 0.375rem; transition: color 0.15s ease; } .avail-trigger:hover, .avail-trigger:focus-visible { color: #3A5A11; } .avail-trigger::before { content: ""; width: 0.75rem; height: 0.75rem; border: 1.5px solid currentColor; border-radius: 2px; border-top-width: 3px; flex: 0 0 auto; } /* The popover itself */ .avail-pop { --avail-bg: #FCFCF2; --avail-edge: #DCDCC2; --avail-text: #1B1D14; --avail-muted: #4F5647; --avail-open: #4A7016; --avail-partial: #7D6200; --avail-full: #B3261E; position: fixed; z-index: 1200; width: 19.5rem; max-width: calc(100vw - 1.5rem); background: var(--avail-bg); color: var(--avail-text); border: 1px solid var(--avail-edge); border-radius: 3px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); padding: 0.875rem; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 0.875rem; } .avail-pop[hidden] { display: none; } .avail-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.625rem; } .avail-pop-month { font-weight: 600; font-size: 0.9375rem; letter-spacing: 0.01em; } .avail-nav { background: none; border: 1px solid var(--avail-edge); border-radius: 2px; color: var(--avail-text); width: 1.75rem; height: 1.75rem; line-height: 1; cursor: pointer; font-size: 1rem; transition: background 0.15s ease, border-color 0.15s ease; } .avail-nav:hover:not(:disabled) { background: #E9E9D6; border-color: var(--avail-open); } .avail-nav:disabled { opacity: 0.3; cursor: default; } .avail-pop-x { background: none; border: none; color: var(--avail-muted); font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0 0.125rem; } .avail-pop-x:hover { color: var(--avail-text); } .avail-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .avail-dow { text-align: center; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--avail-muted); padding-bottom: 0.25rem; } .avail-day { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 1px solid transparent; border-radius: 2px; background: #232b42; color: var(--avail-text); font-size: 0.8125rem; font-variant-numeric: tabular-nums; cursor: default; padding: 0; transition: border-color 0.15s ease, background 0.15s ease; } .avail-day.is-blank { background: none; border-color: transparent; } .avail-day.is-past { background: none; color: #525c7a; } /* A coloured bar under the number rather than a colour swap, so the state does not rely on hue alone. */ .avail-day::after { content: ""; display: block; width: 0.875rem; height: 2px; border-radius: 1px; background: transparent; } .avail-day.is-open::after { background: var(--avail-open); } .avail-day.is-partial::after { background: var(--avail-partial); } .avail-day.is-full { color: var(--avail-muted); background: #1e2437; } .avail-day.is-full::after { background: var(--avail-full); width: 1.125rem; } .avail-day.is-today { border-color: var(--avail-muted); } .avail-day.is-pickable { cursor: pointer; } .avail-day.is-pickable:hover, .avail-day.is-pickable:focus-visible { border-color: var(--avail-open); background: #2b3450; } .avail-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 0.875rem; margin-top: 0.75rem; padding-top: 0.625rem; border-top: 1px solid var(--avail-edge); font-size: 0.75rem; color: var(--avail-muted); } .avail-legend span { display: inline-flex; align-items: center; gap: 0.3125rem; } .avail-legend i { width: 0.75rem; height: 2px; border-radius: 1px; display: inline-block; } .avail-legend .k-open { background: var(--avail-open); } .avail-legend .k-partial { background: var(--avail-partial); } .avail-legend .k-full { background: var(--avail-full); } .avail-note { margin: 0.625rem 0 0; font-size: 0.6875rem; line-height: 1.5; color: var(--avail-muted); } .avail-state { text-align: center; padding: 1.75rem 0; color: var(--avail-muted); font-size: 0.8125rem; } /* Phones: pin it to the bottom of the screen instead of floating it next to a trigger that may be inches off the edge. */ @media (max-width: 480px) { .avail-pop { left: 0.75rem !important; right: 0.75rem; top: auto !important; bottom: 0.75rem; width: auto; } }