/* ══════════════════════════════════════════════════════════
   Contact form — booking.tripletwist.com design family.
   Loaded AFTER the inline <style> on /contact/, so these rules
   override the older base styles (styles.min.css) and the
   page-local inline styles.
   ══════════════════════════════════════════════════════════ */

/* ── Page background: same warm cream radial gradient as
      booking.tripletwist.com's .tt-gc-shell ──────────────── */
body {
    background: #f7efe1;
    background-image:
        radial-gradient(ellipse at top, #fbf6ec 0%, #f5ecdb 60%, #efe4cf 100%);
    background-attachment: fixed;
    min-height: 100vh;
}

/* ── Widen the content column on /contact/ by ~30px
      (base styles.min.css caps section at 475px) ─────────── */
section.contact {
    max-width: 505px;
}

/* ── Standalone subtext between sub-fields and the next
      label — symmetric top/bottom padding so it breathes
      evenly between the field-pair above and the Details
      label below ─────────────────────────────────────────── */
section.contact form p.subtext.tt-pair-note {
    padding: 0.9em 0;
    margin: 0;
}

/* ── Form wrapper: ~89% toward white from the gradient,
      so it reads as a very light tan card floating on the
      gradient — same vibe, lifted ──────────────────────── */
section.contact form {
    background: #fefdfb;
    border: 1px solid #e0d2b3;
    border-radius: 14px;
    padding: 1.65em 1.7em 1.55em;
    box-shadow:
        0 18px 44px -22px rgba(70, 45, 20, 0.25),
        0 4px 12px -6px rgba(70, 45, 20, 0.10);
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 1.6em 0 2em;
}

/* ── Labels (the bare <p>s preceding each field) ────────── */
section.contact form p {
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.92em;
    color: #56483f;
    font-weight: 500;
    margin: 0;
    padding: 1.3em 0 0.4em;
    line-height: 1.4;
    clear: both;
}

/* First label should hug the top of the card */
section.contact form .choice-intro > p:first-child {
    padding-top: 0.15em;
}

/* Subtext helpers (italic-ish, warmer brown) */
section.contact form p.subtext {
    font-size: 0.83em;
    color: #8a7861;
    padding: 0 0 0.55em;
    margin: -0.15em 0 0;
    font-weight: 400;
    line-height: 1.5;
    font-style: normal;
}

/* "nospam" disclaimer at the bottom */
section.contact form .nospam {
    font-size: 0.78em;
    color: #9a8978;
    text-align: center;
    margin: 0.9em 0 0;
    padding: 0.6em 0 0;
    line-height: 1.55;
    font-weight: 400;
}

/* ── Inputs / textarea ──────────────────────────────────── */
section.contact form input[type="text"],
section.contact form input[type="email"],
section.contact form input[type="tel"],
section.contact form input[type="date"],
section.contact form textarea {
    -webkit-appearance: none;
    appearance: none;
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1rem;
    color: #2d231b;
    background-color: #fffdf9;
    border: 1px solid #d8cdb7;
    border-radius: 7px;
    padding: 0.72em 0.85em;
    min-height: 2.8em;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0;
    line-height: 1.35;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
    touch-action: manipulation;
}

section.contact form textarea {
    min-height: 6.5em;
    resize: vertical;
    line-height: 1.5;
}

section.contact form input::placeholder,
section.contact form textarea::placeholder {
    color: #b8a890;
    font-style: normal;
}

section.contact form input:focus,
section.contact form textarea:focus,
section.contact form select:focus,
section.contact form select.select:focus {
    outline: none;
    border-color: #8a6648;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(138, 102, 72, 0.15);
}

/* ── Selects: match input styling + warm arrow ──────────── */
section.contact form select,
section.contact form select.select {
    background-color: #fffdf9;
    border: 1px solid #d8cdb7;
    border-radius: 7px;
    padding: 0.72em 2.5em 0.72em 0.85em;
    min-height: 2.8em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a6648' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── Section headings (h2 inside .conditional-section) ──── */
section.contact form .conditional-section {
    margin-top: 1.75em;
    padding-top: 1.5em;
    border-top: 1px dashed #e5dac1;
}
section.contact form .conditional-section h2 {
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #8a6648;
    border-bottom: none;
    padding: 0 0 0.1em;
    margin: 0 0 0.4em;
    line-height: 1.4;
}
section.contact form .conditional-section h2 + p {
    padding-top: 0.4em;
}

/* ── Step 1: interest type cards ────────────────────────── */
section.contact .tt-type-card {
    border: 1px solid #d8cdb7;
    border-radius: 8px;
    background: #fffdf9;
}
section.contact .tt-type-card:hover {
    border-color: #b89870;
    background: #fffaf0;
}
section.contact .tt-type-card.is-active {
    border-color: #73482e;
    background: #faf3e6;
    box-shadow: 0 0 0 1px #73482e inset;
}
section.contact .tt-type-card-title {
    color: #3c2415;
    font-weight: 600;
}
section.contact .tt-type-card-sub {
    color: #6a5a4a;
}
section.contact .tt-type-card.is-active .tt-type-card-title {
    color: #2d1a08;
}
section.contact .tt-type-card.is-active .tt-type-card-sub {
    color: #4a3b2e;
}

/* ── Service picker groups: warmer palette ──────────────── */
section.contact .tt-svc-group {
    background: #faf3e6;
    border: 1px solid #e9d8b4;
    border-radius: 10px;
    padding: 0.95em 1.05em 0.85em;
    margin: 0 0 0.85em;
}
section.contact .tt-svc-group:last-of-type {
    margin-bottom: 0;
}
section.contact .tt-svc-group-title {
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 0.7em;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #8a6648;
    margin: 0 0 0.7em;
    padding: 0;
    line-height: 1.4;
}
section.contact .tt-svc-helper,
section.contact .tt-svc-addon-helper {
    color: #8a7861;
}
section.contact .tt-svc-row {
    border-bottom-color: #ead8b6;
}
section.contact .tt-svc-label {
    color: #3c2415;
    font-weight: 500;
}
section.contact .tt-qty-btn {
    border: 1.5px solid #d2bf95;
    background: #fffdf9;
    color: #73482e;
}
section.contact .tt-qty-btn:hover:not(:disabled) {
    border-color: #8a6648;
    background: #fff;
    color: #3c2415;
}
section.contact .tt-qty-btn:disabled {
    border-color: #ede2c8;
    color: #c9b896;
}
section.contact .tt-qty-val {
    color: #c9b896;
}
section.contact .tt-qty-val.is-nonzero {
    color: #5a3a1a;
    font-weight: 700;
}
section.contact .tt-svc-checkbox-row {
    color: #3c2415;
}
section.contact .tt-svc-checkbox-row input[type="checkbox"] {
    accent-color: #73482e;
}

/* ── Review box: warmer palette ─────────────────────────── */
section.contact .tt-review-box {
    background: #faf3e6;
    border: 1px solid #e9d8b4;
    border-radius: 10px;
    padding: 1em 1.1em 0.9em;
}
section.contact .tt-review-box-title {
    color: #8a6648;
    font-weight: 700;
    letter-spacing: 0.16em;
}
section.contact .tt-review-box-helper {
    color: #a89378;
}
section.contact .tt-review-list {
    color: #3c2415;
}

/* ── Submit button: dark brown CTA ──────────────────────── */
#submitcontact {
    display: block;
    width: 100%;
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.9em;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fbf6ec;
    background: #3c2415;
    border: 1px solid #3c2415;
    border-radius: 8px;
    padding: 1em 1.4em;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
    box-shadow: 0 6px 14px -6px rgba(60, 36, 21, 0.45);
    margin: 1em 0 0;
}
#submitcontact:hover {
    background: #5a3a1f;
    border-color: #5a3a1f;
    color: #fff;
}
#submitcontact:active {
    transform: translateY(1px);
    box-shadow: 0 2px 6px -2px rgba(60, 36, 21, 0.4);
}
#submitcontact:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(138, 102, 72, 0.35),
        0 6px 14px -6px rgba(60, 36, 21, 0.45);
}

/* ── Top intro paragraph above the form ─────────────────── */
section.contact > p:first-of-type {
    color: #4a3f36;
    line-height: 1.6;
    padding-left: 16px;
    padding-right: 16px;
}
section.contact h1 {
    margin-bottom: 0.2em;
}

/* ── Turnstile centering already inline, but tighten ───── */
section.contact .turnstile-wrap {
    margin: 1.5em 0 1em;
}

/* ── Mobile tweaks ──────────────────────────────────────── */
@media (max-width: 600px) {
    section.contact form {
        padding: 1.2em 1.15em 1.15em;
        border-radius: 12px;
    }
    section.contact form .conditional-section {
        padding-top: 1.25em;
        margin-top: 1.4em;
    }
}