/* Calendar of the booking form. Kept to layout only — colours and type come from the project.
   No width of its own: the calendar fills whatever it is put into. */
.appointment-calendar {
    max-width: 22rem;
}

.appointment-calendar-head,
.appointment-view-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
}

.appointment-calendar-head button,
.appointment-view-head button {
    border: 1px solid currentColor;
    background: none;
    border-radius: .25rem;
    cursor: pointer;
    padding: 0 .6rem;
    line-height: 1.8;
}

.appointment-calendar-head button[disabled],
.appointment-view-head button[disabled] {
    opacity: .35;
    cursor: default;
}

.appointment-weekdays,
.appointment-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .25rem;
    text-align: center;
}

.appointment-weekdays {
    font-size: .8em;
    margin-bottom: .25rem;
}

.appointment-day {
    border: 1px solid transparent;
    background: none;
    border-radius: .25rem;
    padding: .35rem 0;
    cursor: pointer;
}

.appointment-day.is-closed {
    opacity: .35;
    cursor: default;
}

.appointment-day:not(.is-closed) {
    border-color: currentColor;
}

.appointment-day.is-chosen {
    font-weight: 700;
    outline: 2px solid currentColor;
}

/* how busy a day is: the more is booked, the fainter it reads */
.appointment-day.is-free {
    background: rgba(0, 128, 0, .18);
}

.appointment-day.is-busy {
    background: rgba(255, 165, 0, .22);
}

.appointment-day.is-tight {
    background: rgba(220, 0, 0, .18);
}

.appointment-calendar + .row {
    margin-top: .75rem;
}

/* Guided mode: four steps, two tile grids */
.appointment-steps {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    counter-reset: appointment-step;
}

.appointment-steps li {
    counter-increment: appointment-step;
    opacity: .5;
}

.appointment-steps li::before {
    content: counter(appointment-step) ". ";
}

.appointment-steps li.is-current {
    opacity: 1;
    font-weight: 700;
}

.appointment-steps li.is-done {
    opacity: 1;
    cursor: pointer;
}

.appointment-steps li span:not(:empty)::before {
    content: " · ";
}

.appointment-step[hidden] {
    display: none;
}

.appointment-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: .75rem;
}

.appointment-tile {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    border: 1px solid currentColor;
    border-radius: .35rem;
    padding: .75rem;
    cursor: pointer;
}

.appointment-tile[hidden] {
    display: none;
}

.appointment-tile input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.appointment-tile:has(input:checked) {
    outline: 2px solid currentColor;
}

.appointment-tile img {
    width: 100%;
    height: auto;
    border-radius: .25rem;
}

.appointment-tile-text {
    font-size: .9em;
}

.appointment-tile-meta {
    font-size: .85em;
    opacity: .7;
}

.appointment-navigation {
    display: flex;
    gap: .5rem;
    margin-top: 1rem;
}

.appointment-navigation [hidden] {
    display: none;
}

/* The notice under the slot select is a warning, not an error: nothing is wrong, the time has
   simply moved. It carries the same class the booking messages of this extension use, so it
   looks like the rest of the form and the project colours it in one place. */
.appointment-note:not([hidden]) {
    display: block;
    margin-bottom: .5rem;
}

/* Calendar element: month grid, week table and the list — a day unfolds into its times. */
.appointment-view {
    margin-bottom: 2rem;
}

.appointment-view.is-list .appointment-days {
    display: block;
}

/* the week is a week either way: seven columns side by side. Only the table of times turns the
   container into a scrollable block */
.appointment-view.is-week .appointment-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .25rem;
    align-items: start;
}

.appointment-view.is-week .appointment-days.is-table {
    display: block;
    overflow-x: auto;
}

/* the week as a table: one row per time, one column per day, so a row reads across */
.appointment-week {
    display: grid;
    grid-template-columns: auto repeat(7, minmax(6rem, 1fr));
    gap: 1px;
    font-size: .85em;
    /* narrow screens scroll the table instead of squeezing seven days into a phone */
    min-width: 40rem;
}

/* a column of the week without a free time */
.appointment-empty {
    display: block;
    opacity: .5;
    font-size: .9em;
    padding: .2rem 0;
}

.appointment-week-day {
    font-weight: 600;
    padding: .3rem .4rem;
    border-bottom: 1px solid rgba(0, 0, 0, .12);
}

.appointment-week-day.is-closed {
    opacity: .4;
}

.appointment-week-clock {
    padding: .3rem .5rem .3rem 0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.appointment-cell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    padding: .3rem .4rem;
    border-top: 1px solid rgba(0, 0, 0, .06);
}

.appointment-cell.is-taken {
    opacity: .45;
}

.appointment-cell.is-closed {
    opacity: .2;
}

.appointment-panel,
.appointment-column,
.appointment-card {
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: .25rem;
    padding: .5rem .6rem;
}

.appointment-panel {
    margin-bottom: .4rem;
}

.appointment-panel-day {
    display: flex;
    align-items: center;
    gap: .4rem;
    width: 100%;
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.appointment-card-day,
.appointment-column-day {
    display: block;
    font-weight: 600;
    margin-bottom: .35rem;
}

.appointment-column {
    font-size: .85em;
    min-height: 4rem;
}

.appointment-column.is-closed {
    border-style: dashed;
    opacity: .4;
}

.appointment-filter {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-bottom: .6rem;
}

.appointment-who {
    border: 1px solid currentColor;
    border-radius: .2rem;
    background: none;
    padding: .15rem .5rem;
    font: inherit;
    font-size: .9em;
    cursor: pointer;
}

.appointment-who.is-chosen {
    background: rgba(0, 0, 0, .08);
    font-weight: 600;
}

a.appointment-clock.is-bookable {
    border: 1px solid currentColor;
    border-radius: .2rem;
    padding: .05rem .35rem;
    text-decoration: none;
}

.appointment-grid {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin-top: .5rem;
}

.appointment-time {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem .6rem;
    padding: .15rem 0;
    border-top: 1px solid rgba(0, 0, 0, .06);
}

.appointment-time.is-taken {
    opacity: .45;
}

/* a row the week keeps so the columns line up: this day is closed at that hour */
.appointment-time.is-closed {
    opacity: .2;
}

.appointment-clock {
    min-width: 3.2rem;
    font-variant-numeric: tabular-nums;
}

.appointment-people {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.appointment-offer {
    border: 1px solid currentColor;
    border-radius: .2rem;
    padding: .05rem .35rem;
    font-size: .9em;
    white-space: nowrap;
}

a.appointment-offer {
    text-decoration: none;
}

a.appointment-offer:hover,
a.appointment-offer:focus {
    background: rgba(0, 0, 0, .06);
}

.appointment-taken {
    font-size: .9em;
}

.appointment-dot {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
}

.appointment-dots {
    display: flex;
    justify-content: center;
    gap: .15rem;
    min-height: .5rem;
}

.appointment-view.is-month .appointment-day .appointment-dots {
    margin-top: .1rem;
}

.appointment-times {
    margin-top: .75rem;
}

.appointment-empty {
    margin: .5rem 0 0;
}

/* a hint inside the label of a box: under its text, as the description of a payment method. The
   label wraps, so the star of a required box (::after) stays behind the sentence */
label:has(> .appointment-hint) {
    display: flex;
    flex-wrap: wrap;
    column-gap: .25em;
}

.appointment-hint {
    flex-basis: 100%;
    order: 2;
    margin-top: .15rem;
    font-size: .875em;
    color: var(--bs-secondary-color, #6c757d);
}

/* the form in sections of their own, each under a heading of the same kind — also the parts of
   other extensions (the price and the payment) */
.appointment-section,
.appointment-extra fieldset {
    margin: 0 0 2.5rem;
    padding: 0;
    border: 0;
    min-width: 0;
}

.appointment-section__title,
.appointment-extra fieldset > legend {
    float: none;
    width: 100%;
    margin-bottom: 1.25rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    font-size: 1.25rem;
    font-weight: 600;
}

/* where the chosen type asks nothing about people or things to bring, the heading goes too */
.appointment-section--people:not(:has(.appointment-quantity:not([hidden]), .appointment-brings:not([hidden]), .appointment-requirement:not([hidden]))) {
    display: none;
}

.appointment-section--finish .appointment-disclaimer {
    margin-top: 1rem;
}

/* a box with its message: the message under the text, not beside it. Two columns — the box, and
   text and message below each other; the room between box and text stays the theme's */
.appointment-section .form-check:has(> .invalid-feedback),
.appointment-step .form-check:has(> .invalid-feedback) {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
}

.appointment-section .form-check:has(> .invalid-feedback) > label,
.appointment-section .form-check:has(> .invalid-feedback) > .invalid-feedback,
.appointment-step .form-check:has(> .invalid-feedback) > label,
.appointment-step .form-check:has(> .invalid-feedback) > .invalid-feedback {
    grid-column: 2;
}

.appointment-section .form-check > .invalid-feedback,
.appointment-step .form-check > .invalid-feedback {
    margin-top: .25rem;
}