/* Buttons, form controls, notices, cards, overlays. Legacy class names (button-orange ...) map onto the same look. */

/* ---- buttons --------------------------------------------------------------------------------------------------------- */
.btn,
input[type="button"],
input[type="submit"],
button.button-orange,
button.button-green {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .625rem; /* text and icon side by side, with room */
    min-height: var(--control-h);
    padding: 0 var(--s-5);
    border: 2px solid transparent;
    border-radius: var(--r-md);
    background: var(--bg-muted);
    cursor: pointer;
    color: var(--ink);
    font-weight: 650;
    font-size: var(--fs-md);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease), filter var(--t) var(--ease);
    -webkit-tap-highlight-color: transparent;
}

.btn:hover:not(:disabled),
input[type="button"]:hover:not(:disabled),
input[type="submit"]:hover:not(:disabled) {
    filter: brightness(.97);
}

.btn:active:not(:disabled),
input[type="button"]:active:not(:disabled),
input[type="submit"]:active:not(:disabled) {
    transform: translateY(1px);
}

.btn:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
.btn[aria-disabled="true"] {
    opacity: .55;
}

.btn--primary,
input[type="button"].button-orange,
input[type="button"].button-green,
input[type="submit"].button-orange,
input[type="submit"].button-green,
button.button-orange,
button.button-green {
    background: var(--op-accent) var(--op-gradient);
    border-color: transparent;
    color: var(--op-on-accent);
    box-shadow: 0 8px 20px -10px var(--op-glow);
}

.btn--primary:hover:not(:disabled),
input[type="button"].button-orange:hover:not(:disabled),
input[type="button"].button-green:hover:not(:disabled),
input[type="submit"].button-orange:hover:not(:disabled),
input[type="submit"].button-green:hover:not(:disabled),
button.button-orange:hover:not(:disabled),
button.button-green:hover:not(:disabled) {
    background: var(--op-accent-hover) var(--op-gradient-hover);
    border-color: transparent;
    box-shadow: 0 10px 24px -10px var(--op-glow);
    filter: none;
}

.btn--primary:active:not(:disabled),
input[type="button"].button-orange:active:not(:disabled),
input[type="submit"].button-orange:active:not(:disabled) {
    background: var(--op-accent-pressed);
    box-shadow: none;
}

.btn--primary:disabled,
input[type="button"].button-orange:disabled,
input[type="submit"].button-orange:disabled {
    box-shadow: none;
}

.btn--secondary,
input[type="button"].button-black,
input[type="button"].button-blue {
    background: var(--bg-card);
    border-color: var(--line-strong);
    color: var(--ink);
}

.btn--ghost {
    background: transparent;
    border-color: var(--line);
}

.btn--accent-soft {
    background: var(--op-accent-soft);
    border-color: var(--op-accent-soft-border);
    color: var(--ink);
}

.btn--block,
input[type="button"],
input[type="submit"] {
    width: 100%;
}

.btn--small {
    min-height: var(--control-h-sm);
    padding: 0 var(--s-4);
    font-size: var(--fs-sm);
}

input[type="button"].small {
    width: auto;
}

.link-button,
.linkbutton {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    min-height: var(--control-h-sm);
    padding: 0 var(--s-2);
    border: 0;
    background: transparent;
    color: var(--ink-muted);
    font-weight: 600;
    font-size: var(--fs-sm);
    text-decoration: underline;
    text-underline-offset: .2em;
    cursor: pointer;
    width: auto;
}

.link-button:hover,
.linkbutton:hover {
    color: var(--ink);
}

.linkbutton .icon,
.linkbutton .text {
    display: inline-flex;
    align-items: center;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-5);
}

.actions--split {
    justify-content: space-between;
}

.actions--stack {
    flex-direction: column;
    align-items: stretch;
}

/* Button bars of the steps: the way back as a small link above, the next step as one wide button with an arrow. */
#buttonBar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-2);
    margin-top: var(--s-5);
}

#buttonBar > .linkbutton {
    align-self: flex-start;
    margin-left: calc(var(--s-2) * -1);
}

/* the way back, the same on every page: chevron and "Zurück", underlined on hover */
.linkbutton.left,
.link-button {
    gap: var(--s-1);
    text-decoration: none;
}

.linkbutton.left:hover .text,
.link-button:hover > span {
    text-decoration: underline;
    text-underline-offset: .2em;
}

#buttonBar > div {
    min-width: 0;
}

/* The navigation at the end of a page (check availability / next, back, new search): set apart from the content by a line
   across the whole card, the same space above and below the buttons (the bar reaches the edges of the card through the
   padding of the content). Not on the login and payment pages: their templates leave the class out. */
.page-nav,
#buttonBar.page-nav {
    margin: var(--s-5) calc(var(--content-pad-x, 0px) * -1) calc(var(--content-pad-bottom, var(--content-pad-y, 0px)) * -1);
    padding: var(--s-4) var(--content-pad-x, 0px);
    border-top: 1px solid var(--line);
}

/* Lola's forward action has the same space to the bottom of the card as to either side. */
html[data-layout="lola"] .page-nav,
html[data-layout="lola"] #buttonBar.page-nav {
    padding-bottom: var(--content-pad-x, 0px);
}

/* A text link at the top of the bar ("search new slot", "back") is a touch target higher than its line of text: the space
   above the text would add to the padding. It moves up by that space, so the line of text has the same distance to the line
   as the last button to the edge of the card (the touch target stays). */
#buttonBar.page-nav > .linkbutton:first-child {
    margin-top: calc((var(--control-h-sm) - 1.25rem) / -2);
}

.linkbutton .text {
    line-height: 1.25rem;
}

/* An action that runs (js/components/busy.js): the button looks disabled and takes no further click; a loading circle takes
   the place of its icon, next to the text. */
.btn.is-busy {
    opacity: .55;
    box-shadow: none;
    pointer-events: none;
    cursor: progress;
}

.btn.is-busy > svg {
    display: none;
}

.btn.is-busy::after {
    content: "";
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: busy-spin .75s linear infinite;
}

@keyframes busy-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---- form controls ------------------------------------------------------------------------------------------------------- */
.field,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
    display: block;
    width: 100%;
    min-height: var(--control-h);
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    background: var(--bg-card);
    color: var(--ink);
    font-size: 1rem; /* 16px: iOS does not zoom the page on focus */
    margin: 0 0 var(--s-3);
}

textarea {
    min-height: 6rem;
    resize: vertical;
}

/* the arrows of a selection field, up and down, in the muted text colour of the theme (also dark): two chevrons of two
   short diagonal strokes each, 5px boxes side by side - rising and falling above, falling and rising below, 3px apart */
select {
    --select-arrow: var(--ink-muted);
    --select-stroke: transparent calc(50% - 1.25px), var(--select-arrow) calc(50% - .65px) calc(50% + .65px), transparent calc(50% + 1.25px);
    appearance: none;
    background-image:
        linear-gradient(-45deg, var(--select-stroke)),
        linear-gradient(45deg, var(--select-stroke)),
        linear-gradient(45deg, var(--select-stroke)),
        linear-gradient(-45deg, var(--select-stroke));
    background-repeat: no-repeat;
    background-size: 5px 5px;
    background-position:
        right calc(.75rem + 5px) top calc(50% - 4px),
        right .75rem top calc(50% - 4px),
        right calc(.75rem + 5px) top calc(50% + 4px),
        right .75rem top calc(50% + 4px);
    padding-right: 2.25rem;
}

::placeholder {
    color: var(--ink-faint);
    opacity: 1;
}

input:disabled, select:disabled, textarea:disabled {
    background: var(--bg-muted);
    color: var(--ink-faint);
}

/* a field shows where the visitor types (its frame in the accent colour); the ring only with the keyboard */
.field:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
    border-color: var(--op-accent-ring);
}

:root[data-input="keyboard"] .field:focus-visible,
:root[data-input="keyboard"] input:focus-visible,
:root[data-input="keyboard"] select:focus-visible,
:root[data-input="keyboard"] textarea:focus-visible {
    box-shadow: var(--focus);
    border-color: var(--op-accent-ring);
}

input[type="checkbox"],
input[type="radio"] {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--op-accent);
    margin: 0 var(--s-2) 0 0;
    flex: none;
}

/* a field the visitor has to correct: red border and a short shake (it used to be a jQuery animation) */
.is-shaking {
    animation: shake .35s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-12px); }
    40% { transform: translateX(10px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(4px); }
}

.missingInput,
[aria-invalid="true"] {
    border-color: var(--danger) !important;
    background: var(--danger-bg) !important;
}

.input-error {
    display: none;
    padding: var(--s-3) var(--s-4);
    margin: 0 0 var(--s-3);
    border: 1px solid var(--danger-line);
    border-radius: var(--r-md);
    background: var(--danger-bg);
    color: var(--danger);
    font-size: var(--fs-sm);
    text-align: left;
}

.existing-account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin-top: var(--s-3);
}

.existing-account-actions .btn {
    flex: 1 1 9rem;
}

/* ---- the rhythm of forms (login, registration, password, code, notice, landing pages) ----------------------------------------
   One distance between texts, fields, notes and buttons: the gap of the stack. Its children bring no outer margins of their
   own; several fields inside one group keep the same distance. The button bar keeps its larger distance to the form. */
.stack {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.stack > :not(#buttonBar):not(hr) {
    margin-top: 0;
    margin-bottom: 0;
}

.stack > * > :first-child {
    margin-top: 0;
}

.stack > * > :last-child {
    margin-bottom: 0;
}

.stack :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .iti, .input-error) {
    margin-bottom: 0;
}

.stack :is(.slot-input, .iti, .input-error) + :is(.slot-input, .iti, .input-error) {
    margin-top: var(--s-3);
}

.stack > hr {
    margin: var(--s-2) 0;
}

.stack > #buttonBar {
    margin-top: var(--s-2);
}

/* ---- notices and cards --------------------------------------------------------------------------------------------------------- */
.notice {
    display: flex;
    gap: var(--s-3);
    align-items: flex-start;
    margin: 0 0 var(--s-4);
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--bg-subtle);
    font-size: var(--fs-sm);
    text-align: left;
}

.notice > svg {
    flex: none;
    margin-top: .15rem;
}

.notice__text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.notice__text p {
    margin: var(--s-1) 0 0;
}

/* a notice with an action next to the text (reservation in progress) */
.notice:has(> .btn),
.notice:has(> .notice__actions) {
    flex-wrap: wrap;
    align-items: center;
}

.notice__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

/* why the action did not happen (the payment is on its way) */
.notice__refused {
    color: var(--warning);
    font-weight: 600;
}

.notice__list {
    margin: var(--s-2) 0 0 var(--s-4);
    list-style: disc;
}

.notice--info { background: var(--info-bg); border-color: var(--info-line); color: var(--info); }
.notice--warning { background: var(--warning-bg); border-color: var(--warning-line); color: var(--warning); }
.notice--error { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger); }
.notice--success { background: var(--success-bg); border-color: var(--success-line); color: var(--success); }

.card {
    padding: var(--s-4);
    margin: 0 0 var(--s-4);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--bg-card);
    text-align: left;
}

.card--accent {
    display: flex;
    gap: var(--s-3);
    background: var(--op-accent-soft);
    border-color: var(--op-accent-soft-border);
}

.card--error {
    background: var(--danger-bg);
    border-color: var(--danger-line);
    color: var(--danger);
}

/* a badge: outline only (no background), icon and text on one centre line with a little space between them */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .15rem var(--s-2);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    background: transparent;
    font-size: var(--fs-xs);
    font-weight: 650;
    line-height: 1.2;
}

/* the icon of a badge (icon font ss-*, js/components/product-card.js): a box of one line height, the glyph in its middle */
.badge-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    height: 1.2em;
    font-size: 1.1em;
    font-style: normal;
    line-height: 1;
}

/* The glyphs of the icon font (SSGizmo: ascent 2176, descent 640, glyphs from 160 to 1863 of 2048 units) sit .12em above the
   middle of a box of line height 1: moved down by that, they are on the centre line of the text. */
.badge-icon::before {
    display: block;
    line-height: 1;
    transform: translateY(.12em);
}

/* ---- overlay (inactive window) --------------------------------------------------------------------------------------------------- */
.overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    padding: var(--s-4);
    background: rgba(16, 24, 40, .55);
}

.overlay__card {
    width: min(26rem, 100%);
    padding: var(--s-5);
    border-radius: var(--r-lg);
    background: var(--bg-card);
    box-shadow: var(--shadow-lg);
    text-align: center;
}

.overlay__card h2 {
    margin-top: var(--s-3);
}

/* a question with two answers (leave the booking?): the answer that keeps the page first */
.overlay__actions {
    display: grid;
    gap: var(--s-2);
    margin-top: var(--s-4);
}

.overlay__server {
    color: var(--ink-muted);
    font-size: var(--fs-sm);
}

/* ---- rich text of the center (the editor of the portal, core/js/Inputs/RichText.js): the notices, the cancellation terms --
   As in the editor: a paragraph per line without space of its own, a blank line is an empty paragraph. */
.rich-text {
    text-align: start;
}

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

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

.rich-text p {
    margin: 0;
}

.rich-text ul,
.rich-text ol {
    margin: var(--s-1) 0;
}

/* a blank line of the text (an empty paragraph) */
.rich-text p:empty::before {
    content: "\00a0";
}

.rich-text ul,
.rich-text ol {
    padding-left: 1.25rem;
}

/* Restore markers removed by the general navigation/list reset. Task lists override this below. */
.rich-text ul {
    list-style-type: disc;
}

.rich-text ol {
    list-style-type: decimal;
}

.rich-text a {
    color: var(--op-accent-ink);
}

.rich-text h2,
.rich-text h3,
.rich-text h4 {
    margin: var(--s-3) 0 var(--s-1);
    font-size: var(--fs-md);
    line-height: 1.3;
}

.rich-text h2 {
    font-size: var(--fs-lg);
}

.rich-text h4 {
    font-size: var(--fs-sm);
}

.rich-text blockquote {
    margin: 0 0 var(--s-2);
    padding: var(--s-1) var(--s-3);
    border-left: 3px solid var(--op-accent);
    color: var(--ink-muted);
}

.rich-text hr {
    margin: var(--s-3) 0;
    border: 0;
    border-top: 1px solid var(--line);
}

.rich-text table {
    width: 100%;
    margin: 0 0 var(--s-2);
    border-collapse: collapse;
}

.rich-text th,
.rich-text td {
    padding: var(--s-1) var(--s-2);
    border: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.rich-text th {
    background: var(--bg-subtle);
    font-weight: 650;
}

.rich-text code {
    padding: 0 .3em;
    border-radius: 4px;
    background: var(--bg-subtle);
    font-family: var(--font-mono);
    font-size: .9em;
}

.rich-text pre {
    margin: 0 0 var(--s-2);
    padding: var(--s-2) var(--s-3);
    overflow-x: auto;
    border-radius: var(--r-sm);
    background: var(--bg-subtle);
}

.rich-text pre code {
    padding: 0;
    background: none;
}

.rich-text img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 0 var(--s-2);
    border-radius: var(--r-sm);
}

.rich-text th p,
.rich-text td p {
    margin: 0;
}

/* a checklist: its marks as boxes, ticked or not */
.rich-text ul[data-type="taskList"] {
    padding-left: 0;
    list-style: none;
}

.rich-text li[data-type="taskItem"] {
    position: relative;
    padding-left: 1.6rem;
}

.rich-text li[data-type="taskItem"]::before {
    position: absolute;
    top: .2em;
    left: 0;
    display: grid;
    width: 1rem;
    height: 1rem;
    place-items: center;
    border: 1.5px solid var(--line-strong);
    border-radius: 4px;
    color: var(--op-on-accent);
    font-size: .75rem;
    line-height: 1;
    content: "";
}

.rich-text li[data-type="taskItem"][data-checked="true"]::before {
    border-color: var(--op-accent);
    background: var(--op-accent);
    content: "✓";
}

.rich-text li[data-type="taskItem"] > p {
    margin: 0;
}

/* a collapsible section */
.rich-text details {
    margin: 0 0 var(--s-2);
    padding: var(--s-1) var(--s-3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}

.rich-text summary {
    font-weight: 650;
    cursor: pointer;
}

.rich-text details[open] summary {
    margin-bottom: var(--s-1);
}

.rich-text mark {
    padding: 0 .15em;
    border-radius: 3px;
    background: var(--warning-bg);
    color: inherit;
}