/*
 * The widget's look is set by --neobooking-* custom properties. A theme sets
 * them anywhere above the widget, :root included, e.g.
 * :root { --neobooking-accent: #7a3e1d; }
 * Each is read once below with its default; the rest of the file uses --nb-*.
 */
.neobooking {
    --nb-font-family: var(--neobooking-font-family, inherit);
    --nb-font-size: var(--neobooking-font-size, inherit);
    --nb-text: var(--neobooking-text, inherit);
    --nb-muted: var(--neobooking-muted, #5f6368);
    --nb-background: var(--neobooking-background, transparent);
    --nb-surface: var(--neobooking-surface, transparent);
    --nb-border: var(--neobooking-border, #c9ccd1);
    --nb-accent: var(--neobooking-accent, #1f5f8b);
    --nb-accent-text: var(--neobooking-accent-text, #ffffff);
    --nb-error: var(--neobooking-error, #b00020);
    --nb-input-background: var(--neobooking-input-background, #ffffff);
    --nb-input-text: var(--neobooking-input-text, #1f2328);
    --nb-radius: var(--neobooking-radius, 0.375rem);
    --nb-gap: var(--neobooking-gap, 1rem);
    --nb-padding: var(--neobooking-padding, 0);
    --nb-max-width: var(--neobooking-max-width, 44rem);
    --nb-photo-width: var(--neobooking-photo-width, 6rem);
    --nb-photo-height: var(--neobooking-photo-height, 4rem);
    --nb-free: var(--neobooking-free, #d9f0df);
    --nb-taken: var(--neobooking-taken, #f3d0d0);
    --nb-unknown: var(--neobooking-unknown, #eef0f2);
}

.neobooking [hidden] {
    display: none !important;
}

.neobooking {
    display: grid;
    gap: var(--nb-gap);
    max-width: var(--nb-max-width);
    padding: var(--nb-padding);
    font-family: var(--nb-font-family);
    font-size: var(--nb-font-size);
    color: var(--nb-text);
    background: var(--nb-background);
    border-radius: var(--nb-radius);
}

.neobooking__step {
    display: grid;
    gap: calc(var(--nb-gap) * 0.75);
}

.neobooking__field {
    display: grid;
    gap: 0.25rem;
}

.neobooking input:not([type="radio"]):not([type="checkbox"]),
.neobooking select,
.neobooking textarea {
    box-sizing: border-box;
    padding: 0.5rem 0.625rem;
    font: inherit;
    color: var(--nb-input-text);
    background: var(--nb-input-background);
    border: 1px solid var(--nb-border);
    border-radius: var(--nb-radius);
}

.neobooking__field input,
.neobooking__field select,
.neobooking__field textarea {
    width: 100%;
}

.neobooking input[type="radio"],
.neobooking input[type="checkbox"] {
    accent-color: var(--nb-accent);
}

.neobooking :focus-visible {
    outline: 2px solid var(--nb-accent);
    outline-offset: 2px;
}

.neobooking__consent {
    display: grid;
    gap: 0.5rem;
}

/* The operator's terms, however long. */
.neobooking__consent-text {
    max-height: 12rem;
    overflow-y: auto;
    padding: 0.75rem;
    font-size: 0.9em;
    color: var(--nb-muted);
    background: var(--nb-surface);
    border: 1px solid var(--nb-border);
    border-radius: var(--nb-radius);
}

.neobooking__consent-text > :first-child {
    margin-top: 0;
}

.neobooking__consent-text > :last-child {
    margin-bottom: 0;
}

/* Past a page builder's own link colour, which is as specific. */
.neobooking .neobooking__consent-text a {
    color: var(--nb-accent);
}

.neobooking__check {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
}

.neobooking__party {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0.75rem;
    background: var(--nb-surface);
    border: 1px solid var(--nb-border);
    border-radius: var(--nb-radius);
}

.neobooking__people {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.neobooking__person {
    display: grid;
    gap: 0.25rem;
}

.neobooking__person input {
    width: 5rem;
}

.neobooking__proposals {
    display: grid;
    gap: 0.5rem;
}

.neobooking__proposal {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    grid-template-areas:
        "choice photo property price"
        "choice photo rooms price"
        "choice photo people price";
    gap: 0.25rem 0.75rem;
    align-items: center;
    padding: 0.5rem;
    background: var(--nb-surface);
    border: 1px solid var(--nb-border);
    border-radius: var(--nb-radius);
    cursor: pointer;
}

.neobooking__proposal:has(input:checked) {
    border-color: var(--nb-accent);
}

.neobooking__proposal input {
    grid-area: choice;
}

.neobooking__proposal-photo {
    grid-area: photo;
    width: var(--nb-photo-width);
    height: var(--nb-photo-height);
    object-fit: cover;
    border-radius: var(--nb-radius);
}

.neobooking__proposal-property {
    grid-area: property;
    font-size: 0.9em;
    color: var(--nb-muted);
}

.neobooking__proposal-rooms {
    grid-area: rooms;
}

.neobooking__proposal-people {
    grid-area: people;
    font-size: 0.9em;
    color: var(--nb-muted);
}

.neobooking__proposal-price {
    grid-area: price;
}

.neobooking__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: space-between;
    margin: 0;
}

.neobooking__primary,
.neobooking__secondary {
    padding: 0.625rem 1.125rem;
    font: inherit;
    border: 1px solid var(--nb-accent);
    border-radius: var(--nb-radius);
    cursor: pointer;
}

.neobooking__primary {
    color: var(--nb-accent-text);
    background: var(--nb-accent);
}

.neobooking__secondary {
    color: var(--nb-accent);
    background: transparent;
}

.neobooking__primary:hover,
.neobooking__secondary:hover {
    filter: brightness(0.9);
}

.neobooking__link {
    justify-self: start;
    color: var(--nb-accent);
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.neobooking__status {
    color: var(--nb-muted);
}

.neobooking__error {
    color: var(--nb-error);
}

.neobooking__money {
    width: 100%;
    border-collapse: collapse;
}

.neobooking__money th,
.neobooking__money td {
    text-align: left;
    padding: 0.25rem 0.5rem 0.25rem 0;
    border-bottom: 1px solid var(--nb-border);
}

.neobooking__money th {
    font-weight: normal;
}

.neobooking__calendar {
    display: grid;
    gap: 0.5rem;
}

.neobooking__calendar-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.neobooking__link:disabled {
    visibility: hidden;
}

.neobooking__calendar-state {
    color: var(--nb-muted);
    font-size: 0.9em;
}

.neobooking__months {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--nb-gap);
}

.neobooking__month-name {
    margin: 0 0 0.25rem;
    font-weight: 600;
    text-transform: capitalize;
}

.neobooking__weekdays,
.neobooking__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.neobooking__weekdays {
    color: var(--nb-muted);
    font-size: 0.8em;
    text-align: center;
}

/* The morning half belongs to the night before the day, the afternoon half to the night from it. */
.neobooking__day {
    --nb-morning: var(--nb-unknown);
    --nb-evening: var(--nb-unknown);
    --nb-was-morning: var(--nb-unknown);
    --nb-was-evening: var(--nb-unknown);
    aspect-ratio: 1;
    padding: 0;
    font: inherit;
    color: inherit;
    background: linear-gradient(to bottom right, var(--nb-morning) 50%, var(--nb-evening) 50%);
    border: 0;
    border-radius: var(--nb-radius);
    cursor: pointer;
}

.neobooking__day[data-morning="free"] { --nb-morning: var(--nb-free); }
.neobooking__day[data-morning="taken"] { --nb-morning: var(--nb-taken); }
.neobooking__day[data-evening="free"] { --nb-evening: var(--nb-free); }
.neobooking__day[data-evening="taken"] { --nb-evening: var(--nb-taken); }

/* A day whose colours changed fades from the ones it showed before. */
.neobooking__day[data-reveal]:not([data-selected]) {
    position: relative;
    isolation: isolate;
}

.neobooking__day[data-reveal]:not([data-selected])::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(to bottom right, var(--nb-was-morning) 50%, var(--nb-was-evening) 50%);
    opacity: 0;
    animation: neobooking-fade-out 0.45s ease-out;
}

.neobooking__day[data-was-morning="free"] { --nb-was-morning: var(--nb-free); }
.neobooking__day[data-was-morning="taken"] { --nb-was-morning: var(--nb-taken); }
.neobooking__day[data-was-evening="free"] { --nb-was-evening: var(--nb-free); }
.neobooking__day[data-was-evening="taken"] { --nb-was-evening: var(--nb-taken); }

/* While the occupancy loads, the days not known yet breathe softly. */
.neobooking__months[data-loading] .neobooking__day[data-evening="unknown"]:not([data-past]) {
    animation: neobooking-breathe 1.2s ease-in-out infinite alternate;
}

@keyframes neobooking-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes neobooking-breathe {
    from { opacity: 1; }
    to { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
    .neobooking__day[data-reveal]::before,
    .neobooking__months[data-loading] .neobooking__day {
        animation: none !important;
    }
}

.neobooking__day:disabled {
    cursor: default;
}

.neobooking__day[data-past] {
    opacity: 0.45;
}

.neobooking__day[data-in-range] {
    box-shadow: inset 0 0 0 2px var(--nb-accent);
}

.neobooking__day[data-selected] {
    color: var(--nb-accent-text);
    background: var(--nb-accent);
    font-weight: 600;
}

.neobooking__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin: 0;
    color: var(--nb-muted);
    font-size: 0.85em;
}

.neobooking__legend-free::before,
.neobooking__legend-taken::before {
    content: "";
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-right: 0.35em;
    vertical-align: -0.05em;
    border-radius: 2px;
    background: var(--nb-free);
}

.neobooking__legend-taken::before {
    background: var(--nb-taken);
}