/**
 * LEXO Forms - shared design system.
 *
 * Canonical, form-agnostic field + submit-result styling for every LEXO
 * form. A form opts in with the base class `.lexoform`; form-specific
 * layout lives under its own namespace (`.lexoform-contact-*`,
 * `.lexoform-lp-*`, `.lexoform-booking-*`, `.lexoform-newsletter-*`) so
 * the forms can evolve independently while inputs/dropdowns stay uniform.
 *
 * Enqueued GLOBALLY (functions.php) - the newsletter form lives in the
 * site-wide footer, so the base must be available everywhere.
 *
 * Root font-size is 9px (style.css), so 1rem = 9px. Derived 1:1 from the
 * LP form's floating-label treatment so every form matches it.
 *
 * Field markup contract:
 *   <div class="lexoform-field">
 *     <input type="text" placeholder=" "><label class="lexoform-label">..</label>
 *   </div>
 *   variants: .lexoform-field--select (native <select>), .lexoform-field--textarea
 */

/* --- Field controls ----------------------------------------------------- */
.lexoform-field { position: relative; }

.lexoform input[type="text"],
.lexoform input[type="email"],
.lexoform input[type="tel"],
.lexoform textarea {
    width: 100%;
    display: block;
    margin-bottom: 10px;
    font-family: "Montserrat-SemiBold", sans-serif;
    font-size: 18px;
    line-height: 28px;
    color: #5d6a74;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: #fff;
    -webkit-appearance: none;
    appearance: none;
}
/* Floating-label leaves room at the top for the raised mini-label. */
.lexoform .lexoform-field input { padding: 12px 17px 0; }
.lexoform .lexoform-field--textarea textarea {
    padding: 28px 17px 17px;
    margin-bottom: 20px;
    min-height: 120px;
}
.lexoform input:focus,
.lexoform textarea:focus,
.lexoform .lexoform-field--select select:focus {
    outline: none;
    border-color: #78c5db;
}
.lexoform input.error,
.lexoform textarea.error,
.lexoform select.error {
    border-color: red !important;
}

/* --- Floating label ----------------------------------------------------- */
.lexoform .lexoform-field input::placeholder,
.lexoform .lexoform-field textarea::placeholder { color: transparent; }

.lexoform .lexoform-label {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #879097;
    font-family: "Montserrat-SemiBold", sans-serif;
    font-size: 1.5rem;
    line-height: 1;
    pointer-events: none;
    transition: top .25s ease, transform .25s ease, font-size .25s ease,
                letter-spacing .25s ease, color .25s ease;
}
.lexoform .lexoform-field--textarea .lexoform-label {
    top: 18px;
    transform: translateY(0);
}
.lexoform .lexoform-field input:focus ~ .lexoform-label,
.lexoform .lexoform-field input:not(:placeholder-shown) ~ .lexoform-label,
.lexoform .lexoform-field textarea:focus ~ .lexoform-label,
.lexoform .lexoform-field textarea:not(:placeholder-shown) ~ .lexoform-label,
.lexoform .lexoform-field--select select:focus ~ .lexoform-label,
.lexoform .lexoform-field--select select:valid ~ .lexoform-label {
    top: 6px;
    transform: translateY(0);
    font-size: 1rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #45545f;
}

/* --- Native <select> (matches the input box) ----------------------------
   Padding mirrors the floating-label input (12px top / 0 bottom) so the
   select renders at the same 42px box height as the inputs - the raised
   label sits at top:6px, the selected value at top:12px+. */
.lexoform .lexoform-field--select { margin-bottom: 10px; }
.lexoform .lexoform-field--select select {
    width: 100%;
    font-family: "Montserrat-SemiBold", sans-serif;
    font-size: 18px;
    line-height: 28px;
    padding: 12px 40px 0 17px;
    color: #5d6a74;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: #fff;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%23878c92' d='M6 8 0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 17px center;
    background-size: 12px 8px;
    cursor: pointer;
    box-sizing: border-box;
}

/* --- Submit-result panel (markup: includes/form-result-panels.php) -------
   js/form-submit-loader.js fades the form out (.wwh-form-hiding) and reveals
   the matching .form-result panel on lexocaptcha:response, collapsing the
   shell height so the centred panel never lands above the viewport. The
   class names (.wwh-form-shell / .form-result*) are kept because
   form-submit-loader.js + form-result-panels.php reference them. */
.wwh-form-shell {
    position: relative;
    transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.wwh-form-shell.wwh-form-collapsing { overflow: hidden; }

.lexoform { transition: opacity 0.3s ease; }
.lexoform.wwh-form-hiding {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.form-result {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    visibility: hidden;
}
.form-result.is-visible { visibility: visible; }
.form-result-inner {
    max-width: 480px;
    margin: 0 auto;
    padding: 32px 26px 38px;
    text-align: center;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.form-result.is-visible .form-result-inner { opacity: 1; transform: none; }
.form-result-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #eaf6fb;
    color: #78c5db;
    margin-bottom: 18px;
}
.form-result-icon--error { background: #fdecea; color: #c0392b; }
.form-result-heading {
    font-family: "Montserrat-Bold", sans-serif;
    font-size: 2.6rem;
    line-height: 1.25;
    color: #0a2540;
    margin: 0 0 12px;
}
.form-result-body {
    font-size: 2rem;
    line-height: 1.6;
    color: #45545f;
    margin: 0 auto;
}
.form-result-hint {
    font-size: 1.5rem;
    line-height: 1.55;
    color: #9aa3aa;
    margin: 16px auto 0;
}
.form-result-body a { color: #337ab7; }
.form-result-close {
    display: none;
    margin: 24px auto 0;
    padding: 13px 40px;
    border: none;
    background: #78c5db;
    color: #fff;
    font-family: "Montserrat-SemiBold", sans-serif;
    font-size: 1.7rem;
}

/* --- Contact form layout (template-forms/contact_form.php) ---------------
   Form-agnostic field styling above; this block is the only contact-specific
   layout. First/last + email/phone share a 2-col grid, message spans full
   width. */
.lexoform-contact-form { max-width: 720px; margin: 0 auto; }

.lexoform-contact-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
}
.lexoform-contact-fields .lexoform-field--textarea { grid-column: 1 / -1; }

.lexoform-contact-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
    text-align: center;
}
.lexoform-required-note {
    font-size: 1.5rem;
    line-height: 1.5;
    color: #879097;
}

/* Submit button - bespoke layout only. radius/transition/hover/active/
   focus-visible come from the unified button system (style.css). */
.lexoform-submit {
    border: none;
    background: #78c5db;
    color: #fff;
    font-family: "Montserrat-SemiBold", sans-serif;
    font-size: 1.8rem;
    line-height: 1;
    padding: 17px 48px;
}

/* Loading state: js/form-submit-loader.js sets :disabled on submit and
   re-enables on lexocaptcha:response. Mirrors the LP/booking spinner but
   ships its own keyframes (booking-season.css is not loaded on the contact
   page). :disabled:hover cancels the unified hover lift while loading. */
.lexoform-submit:disabled {
    background-color: #5fb5d3;
    color: rgba(255, 255, 255, 0.85);
    cursor: wait;
    position: relative;
    padding-left: 56px;
    padding-right: 56px;
}
.lexoform-submit:disabled:hover {
    filter: none;
    transform: none;
    box-shadow: none;
}
.lexoform-submit:disabled::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 22px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: lexoform-spin 0.7s linear infinite;
}
@keyframes lexoform-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 768px) {
    .lexoform-contact-fields { grid-template-columns: 1fr; column-gap: 0; }
    .lexoform-submit { width: 100%; }
    /* Compact the result panel on phones. */
    .form-result-inner { padding: 26px 18px 30px; }
    .form-result-heading { font-size: 2.2rem; }
    .form-result-body { font-size: 1.8rem; }
}
@media (prefers-reduced-motion: reduce) {
    .lexoform-submit:disabled::after {
        animation: none;
        border-top-color: rgba(255, 255, 255, 0.7);
    }
    /* Disable the form fade + shell-collapse + panel entrance. .lexoform
       covers every migrated form (#lp-form / #bookForm / contact). */
    .wwh-form-shell,
    .lexoform,
    .lexoform.wwh-form-hiding,
    .form-result,
    .form-result-inner {
        transition: none;
    }
    .form-result-inner { transform: none; }
}