/* =========================================================================
   Booking form — sits on the dark section, so every control is inverted.
   ========================================================================= */

.form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: clamp(20px, 3.5vw, 32px);
    background: var(--ink-raised);
    border: 1px solid var(--on-dark-14);
    border-radius: var(--radius);
}

/* Author styles beat the UA's [hidden] rule, so state it explicitly. */
.form[hidden] {
    display: none;
}

.form__kicker {
    font: var(--t-kicker);
    letter-spacing: var(--ls-wordmark);
    text-transform: uppercase;
    color: var(--terracotta-light);
}

.field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font: 700 11px/1 var(--font-sans);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--on-dark-60);
}

.field__control {
    min-height: 52px;
    padding: 15px 14px;
    background: var(--ink);
    border: 1px solid var(--on-dark-18);
    border-radius: var(--radius);
    /* 16px inherited from base — smaller triggers zoom-on-focus in iOS Safari. */
    color: var(--ivory);
    transition: border-color .25s ease;
}

.field__control:hover {
    border-color: var(--on-dark-30);
}

textarea.field__control {
    min-height: auto;
    resize: vertical;
    line-height: 1.6;
}

select.field__control {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--terracotta-light) 50%),
        linear-gradient(135deg, var(--terracotta-light) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% + 1px),
        calc(100% - 13px) calc(50% + 1px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 38px;
}

.field-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.field-row .field {
    flex: 1 1 150px;
}

/* ---- Validation --------------------------------------------------------- */

.field--error .field__control {
    border-color: var(--terracotta-light);
}

.field__error {
    font: 600 11px/1.5 var(--font-sans);
    letter-spacing: 0;
    text-transform: none;
    color: var(--terracotta-light);
}

.field__error:empty {
    display: none;
}

/* Bot trap. Hidden from people and from assistive tech; a real submission
   never fills it in. */
.form__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form__error {
    padding: 14px 16px;
    background: rgba(200, 90, 63, .12);
    border: 1px solid rgba(228, 161, 142, .4);
    border-radius: var(--radius);
    font: 500 13px/1.6 var(--font-sans);
    color: var(--terracotta-light);
}

.form__error[hidden] {
    display: none;
}

.form__submit {
    min-height: 56px;
    padding: 20px;
    background: var(--terracotta);
    border: none;
    border-radius: var(--radius);
    font: var(--t-button);
    letter-spacing: var(--ls-button);
    color: #fff;
    transition: background-color .25s ease;
}

.form__submit:hover:not(:disabled) {
    background: var(--terracotta-dark);
}

.form__submit:disabled {
    opacity: .6;
    cursor: progress;
}

.form__note {
    font: 500 11.5px/1.6 var(--font-sans);
    color: var(--on-dark-45);
}

/* ---- Success panel ------------------------------------------------------ */

.form-success {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: clamp(24px, 4vw, 40px);
    background: var(--ink-raised);
    border: 1px solid rgba(228, 161, 142, .4);
    border-radius: var(--radius);
    animation: pop-in .55s var(--ease) both;
}

.form-success[hidden] {
    display: none;
}

.form-success__kicker {
    font: var(--t-kicker);
    letter-spacing: var(--ls-wordmark);
    text-transform: uppercase;
    color: var(--terracotta-light);
}

.form-success__title {
    font: 400 clamp(24px, 5vw, 32px)/1.2 var(--font-serif);
    color: var(--ivory);
}

.form-success__body {
    font: var(--t-body);
    color: var(--on-dark-68);
}