/* empanelment.css - the tour operator empanelment page (empanelment-form.php, 2026-10-05).
   Loaded after style.css on that page only. Same language as the homepage's "Check Availability" card:
   cream paper with a gold hairline, Playfair Display headings, small tracked Lato labels, 52px fields with
   the gold focus ring, the amber pill for the main button. Everything is scoped to .emp-*. */

/* ---- page frame -------------------------------------------------------------------------------- */
/* while the cookie card is up, a field reached with Tab scrolls clear of it at every width */
html.cc-open { scroll-padding-bottom: calc(var(--cc-h, 0px) + 24px); }
@media (min-width: 769px) {
    .emp-body .cc-notice { left: 22px; }   /* no reservation rail on this page (as on thank-you.php) */
}
/* the floating dock would sit over the right-hand fields on phones and tablets; this page lists the
   numbers in section 6, and the header keeps its call link and BOOK NOW */
@media not all and (min-width: 1024px) {
    .emp-body .fd-dock { display: none; }
}

/* ---- title band ----------------------------------------------------------------------------- */
.emp-hero {
    padding: clamp(40px, 6vw, 72px) var(--gut) clamp(36px, 5vw, 56px);
    background: #f8f5f0;
    border-bottom: 1px solid #ebe5da;
    text-align: center;
}
.emp-hero-inner { width: min(780px, 100%); margin: 0 auto; }
.emp-motif { margin: 0 auto 8px; }
.emp-eyebrow {
    margin: 0 0 12px;
    font-family: var(--secondary-font);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: #7f6436;
}
.emp-title {
    margin: 0;
    font-family: var(--primary-font);
    font-size: clamp(1.9rem, 4.2vw, 2.8rem);
    font-weight: 700;
    line-height: 1.15;
    color: #33291c;
    text-wrap: balance;
}
.emp-sub {
    margin: 12px 0 0;
    font-family: var(--secondary-font);
    font-size: 0.95rem;
    font-style: italic;
    line-height: 1.5;
    color: #6a5f52;
}
.emp-rule {
    display: block;
    width: 64px;
    height: 1px;
    margin: 24px auto 22px;
    background: linear-gradient(90deg, rgba(212, 162, 76, 0.15), #D4A24C, rgba(212, 162, 76, 0.15));
}
.emp-note {
    margin: 0 auto;
    max-width: 40em;
    font-family: var(--secondary-font);
    font-size: 1rem;
    line-height: 1.65;
    color: #4A3A28;
}
.emp-note strong { color: #33291c; }

/* the offline form: the owner's printed form as a PDF (docs/), offered under the note as a quiet outlined
   pill - the amber pill stays the page's one main action, at the foot of the form */
.emp-offline { margin: 26px auto 0; max-width: 40em; }
.emp-offline-lead {
    margin: 0 0 16px;
    font-family: var(--secondary-font);
    font-size: 0.92rem;
    line-height: 1.6;
    color: #6a5f52;
    text-wrap: balance;   /* centred: two even lines rather than a long one and "to sales@..." */
}
.emp-offline-lead a { color: #6d4f22; text-decoration: underline; text-decoration-color: rgba(176, 141, 87, 0.85); text-underline-offset: 3px; overflow-wrap: anywhere; }
.emp-offline-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 100%;
    min-height: 48px;
    padding: 10px 28px;
    border: 1px solid rgba(176, 141, 87, 0.75);
    border-radius: 999px;
    background-color: #fffdf8;
    font-family: var(--secondary-font);
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    text-decoration: none;
    text-wrap: balance;   /* on the narrowest phones it wraps as "Download the / offline form", not a lone "Form" */
    color: #4A3A28;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}
.emp-offline-link i { flex: 0 0 auto; font-size: 1.05rem; color: #8A6D3B; }
.emp-offline-link:hover { background-color: #f6eedf; border-color: #D4A24C; color: #33291c; }
.emp-offline-link:focus-visible { outline: 2px solid #96713f; outline-offset: 3px; }
.emp-offline-meta {
    margin: 10px 0 0;
    font-family: var(--secondary-font);
    font-size: 0.78rem;
    line-height: 1.4;
    letter-spacing: 0.4px;
    color: rgba(51, 41, 28, 0.68);
}

/* ---- the form card ---------------------------------------------------------------------------- */
.emp-section { padding: clamp(36px, 5vw, 64px) var(--gut) clamp(48px, 6vw, 80px); background: #fff; }
.emp-wrap { width: min(940px, 100%); margin: 0 auto; }
@media (min-width: 1024px) and (max-width: 1399px) {
    .emp-section { padding-left: 90px; padding-right: 90px; }   /* clear of the floating dock (76px in from the right) */
}
.emp-form { margin: 0; }
.emp-card {
    position: relative;
    padding: clamp(24px, 4vw, 48px) clamp(18px, 4vw, 48px) clamp(28px, 4vw, 44px);
    border: 1px solid rgba(176, 141, 87, 0.45);
    border-radius: 22px;
    background: linear-gradient(168deg, #FEFCF8 0%, #FAF5EC 60%, #F5EEE1 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 30px 60px -42px rgba(30, 20, 8, 0.55);
}
.emp-card::before {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(176, 141, 87, 0.18);
    border-radius: 16px;
    pointer-events: none;
}
.emp-required-note {
    position: relative;
    margin: 0 0 6px;
    font-family: var(--secondary-font);
    font-size: 0.78rem;
    text-align: right;
    color: #6a5f52;
}
.emp-req { color: #a33a2a; font-weight: 700; }

/* ---- sections (1-5) ------------------------------------------------------------------------------ */
.emp-block {
    position: relative;
    min-width: 0;
    margin: 30px 0 0;
    padding: 30px 0 0;
    border: 0;
    border-top: 1px solid rgba(176, 141, 87, 0.3);
}
.emp-legend {
    float: left;   /* keeps the legend inside the box, like any heading */
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0 0 22px;
    padding: 0;
    font-family: var(--primary-font);
    font-size: clamp(1.25rem, 2.4vw, 1.5rem);
    font-weight: 700;
    line-height: 1.25;
    color: #33291c;
}
.emp-legend + * { clear: both; }
.emp-legend .emp-req { font-family: var(--secondary-font); font-size: 1rem; }
.emp-subblock { min-width: 0; margin: 0 0 22px; padding: 0; border: 0; }
.emp-sublegend {
    float: left;
    width: 100%;
    margin: 0 0 12px;
    padding: 0;
    font-family: var(--secondary-font);
    font-size: 0.85rem;
    font-weight: 700;
    color: #4A3A28;
}
.emp-sublegend + * { clear: both; }

/* ---- fields ---------------------------------------------------------------------------------------- */
.emp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 18px; }
@media (min-width: 640px) {
    .emp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .emp-span-2 { grid-column: 1 / -1; }
}
.emp-field { min-width: 0; margin: 0; }
/* fields side by side keep their boxes level: each field takes three rows of the grid (label, box, error
   message), so a two-line label in one column makes the label row taller in both, and a one-line label sits
   at the foot of that row, just above its box */
@supports (grid-template-rows: subgrid) {
    .emp-grid { row-gap: calc(32px / 3); }   /* a subgrid with no gaps of its own adds half the parent's gap: 10.67 + 5.33 = the 16px between rows as before */
    .emp-grid > .emp-field { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; }
    .emp-grid > .emp-field > label { align-self: end; }
}
.emp-date { position: relative; width: min(280px, 100%); margin: 0 0 4px; }
.emp-field label,
.emp-person-title {
    display: block;
    margin: 0 0 7px;
    font-family: var(--secondary-font);
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #6E6048;
}
.emp-form input[type="text"],
.emp-form input[type="email"],
.emp-form input[type="tel"],
.emp-form input[type="date"],
.emp-form textarea {
    display: block;
    width: 100%;
    min-width: 0;
    height: 52px;
    padding: 0 16px;
    border: 1px solid rgba(139, 110, 66, 0.3);
    border-radius: 12px;
    background: #FFFDF9;
    box-shadow: inset 0 1px 2px rgba(90, 66, 30, 0.06);
    font-family: var(--secondary-font);
    font-size: 1rem;   /* 16px: smaller makes iPhone Safari zoom in on each field */
    line-height: 1.4;
    color: #2e2517;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
}
.emp-form textarea { height: auto; min-height: 96px; padding: 13px 16px; line-height: 1.6; resize: vertical; }
.emp-form input[type="date"] { color: #4A3A28; }
.emp-form input::placeholder,
.emp-form textarea::placeholder { color: #6f6352; opacity: 1; }
.emp-form input:hover,
.emp-form textarea:hover { border-color: rgba(139, 110, 66, 0.5); }
.emp-form input:focus,
.emp-form textarea:focus {
    outline: 2px solid transparent;
    background-color: #fff;
    border-color: #B08D57;
    box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.28), inset 0 1px 2px rgba(90, 66, 30, 0.05);
}
.emp-upper { text-transform: uppercase; }
.emp-upper::placeholder { text-transform: none; }

/* problems found when sending (empanelment.js) */
.emp-form .is-invalid input,
.emp-form .is-invalid textarea { border-color: #a33a2a; box-shadow: 0 0 0 3px rgba(163, 58, 42, 0.14); }
.emp-error { margin: 7px 0 0; font-family: var(--secondary-font); font-size: 0.82rem; line-height: 1.4; color: #a33a2a; }
.emp-block.is-invalid .emp-choices .emp-choice { border-color: rgba(163, 58, 42, 0.55); }

/* ---- choices: type of applicant (radio) and nature of business (checkboxes) ------------------------ */
.emp-choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 420px) {
    .emp-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
    .emp-choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.emp-choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid rgba(139, 110, 66, 0.3);
    border-radius: 12px;
    background: #FFFDF9;
    font-family: var(--secondary-font);
    font-size: 0.95rem;
    line-height: 1.35;
    color: #33291c;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.emp-choice:hover { border-color: rgba(139, 110, 66, 0.55); }
.emp-choice input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #8A6D3B;
    cursor: pointer;
}
.emp-choice:has(input:checked) {
    border-color: #B08D57;
    background: #FBF3E2;
    box-shadow: 0 0 0 1px #B08D57 inset;
}
.emp-choice:has(input:focus-visible) { outline: 2px solid #96713f; outline-offset: 2px; }
.emp-others { margin-top: 12px; }
@media (min-width: 640px) {
    .emp-others { width: calc(50% - 9px); }
}
.emp-others.is-off { opacity: 0.55; }

/* ---- section 4: people ------------------------------------------------------------------------------ */
.emp-people { display: grid; gap: 14px; }
.emp-person {
    padding: 16px 16px 18px;
    border: 1px solid rgba(176, 141, 87, 0.3);
    border-radius: 14px;
    background: rgba(248, 245, 240, 0.7);
}
.emp-person[hidden] { display: none; }
.emp-person {
    min-width: 0;
    margin: 0;
}
.emp-person-title { float: left; width: 100%; margin-bottom: 12px; padding: 0; color: #7f6436; }
.emp-person-title + * { clear: both; }
@media (min-width: 1024px) {
    .emp-grid--person { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .emp-grid--person > :nth-child(1),
    .emp-grid--person > :nth-child(2),
    .emp-grid--person > :nth-child(3) { grid-column: span 2; }
    .emp-grid--person > :nth-child(4),
    .emp-grid--person > :nth-child(5) { grid-column: span 3; }
}
.emp-add {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    margin-top: 14px;
    padding: 0 22px;
    border: 1px solid rgba(176, 141, 87, 0.85);
    border-radius: 999px;
    background: transparent;
    font-family: var(--secondary-font);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #4A3A28;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}
.emp-add[hidden] { display: none; }
.emp-add i { font-size: 0.8rem; color: #8A6D3B; }
.emp-add:hover,
.emp-add:focus-visible { background: rgba(176, 141, 87, 0.13); border-color: #96713f; }
.emp-add:focus-visible { outline: 2px solid #96713f; outline-offset: 3px; }

/* ---- sending ----------------------------------------------------------------------------------------- */
.emp-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.emp-submit { margin-top: 34px; padding-top: 28px; border-top: 1px solid rgba(176, 141, 87, 0.3); text-align: center; }
.emp-consent {
    margin: 0 auto 18px;
    max-width: 44em;
    font-family: var(--secondary-font);
    font-size: 0.85rem;
    line-height: 1.55;
    color: rgba(51, 41, 28, 0.8);
}
.emp-consent a { color: #6d4f22; text-decoration: underline; text-decoration-color: rgba(176, 141, 87, 0.85); text-underline-offset: 3px; }
.emp-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: min(320px, 100%);
    height: 56px;
    padding: 0 40px;
    border: 0;
    border-radius: 999px;
    background-color: #D4A24C;
    box-shadow: inset 0 1px 0 rgba(255, 249, 233, 0.7), 0 1px 2px rgba(74, 49, 12, 0.18), 0 12px 22px -12px rgba(74, 49, 12, 0.55);
    font-family: var(--secondary-font);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #111;
    cursor: pointer;
    transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.emp-cta:hover { background-color: #c99540; box-shadow: inset 0 1px 0 rgba(255, 249, 233, 0.6), 0 16px 26px -12px rgba(74, 49, 12, 0.6); }
.emp-cta:focus-visible { outline: 2px solid #96713f; outline-offset: 3px; }
.emp-cta:disabled { opacity: 0.65; cursor: progress; }
.emp-status { min-height: 1.4em; margin: 14px 0 0; font-family: var(--secondary-font); font-size: 0.92rem; line-height: 1.5; }
.emp-status.is-ok { color: #2e6b3f; }
.emp-status.is-error { color: #a33a2a; }

/* ---- after sending ----------------------------------------------------------------------------------- */
.emp-done {
    padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 48px);
    border: 1px solid rgba(176, 141, 87, 0.45);
    border-radius: 22px;
    background: linear-gradient(168deg, #FEFCF8 0%, #FAF5EC 60%, #F5EEE1 100%);
    text-align: center;
    outline: none;
}
.emp-done[hidden] { display: none; }
.emp-done-title {
    margin: 0 0 18px;
    font-family: var(--primary-font);
    font-size: clamp(1.9rem, 4.4vw, 2.7rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.02em;
    color: #33291c;
}
.emp-done-title .bi-title-dev { font-family: 'Tiro Devanagari Hindi', var(--primary-font); font-weight: 400; font-synthesis: none; letter-spacing: 0; white-space: nowrap; }
.emp-done-title .bi-title-sep { margin: 0 0.047em 0 0.147em; opacity: 0.6; font-weight: 400; }
.emp-done-title .bi-title-lat { white-space: nowrap; }
.emp-done-text { margin: 0 auto 8px; max-width: 34em; font-family: var(--secondary-font); font-size: 1rem; line-height: 1.6; color: #4A3A28; }

/* ---- section 6: contact details ----------------------------------------------------------------------- */
.emp-contact {
    margin-top: clamp(28px, 4vw, 40px);
    padding: clamp(22px, 3.5vw, 36px) clamp(18px, 4vw, 40px);
    border-radius: 18px;
    background: #f8f5f0;
    box-shadow: 0 0 0 1px rgba(176, 141, 87, 0.35);
}
.emp-contact-title { float: none; margin-bottom: 20px; }
.emp-contact-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 28px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 1024px) {
    .emp-contact-list { grid-template-columns: minmax(0, 1fr) auto auto; }   /* the number and email keep one line */
}
.emp-contact-list li { display: flex; align-items: flex-start; gap: 14px; min-width: 0; margin: 0; padding: 0; }
.emp-contact-list i {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(176, 141, 87, 0.6);
    border-radius: 50%;
    background: #fffdf8;
    font-size: 0.95rem;
    color: #8A6D3B;
}
.emp-contact-list div { min-width: 0; }
.emp-contact-list span {
    display: block;
    margin-bottom: 4px;
    font-family: var(--secondary-font);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: rgba(51, 41, 28, 0.68);
}
.emp-contact-list p { margin: 0; font-family: var(--secondary-font); font-size: 0.98rem; line-height: 1.55; color: #33291c; }
.emp-contact-list a { white-space: nowrap; }
@media (max-width: 399px) {
    .emp-contact-list a[href^="mailto:"] { white-space: normal; overflow-wrap: anywhere; }
}
.emp-contact-list a { color: #33291c; text-decoration: none; border-bottom: 1px solid rgba(212, 162, 76, 0.55); }
.emp-contact-list a:hover,
.emp-contact-list a:focus-visible { color: #8A6D3B; border-bottom-color: #D4A24C; }

@media (prefers-reduced-motion: reduce) {
    .emp-choice, .emp-cta, .emp-add, .emp-form input, .emp-form textarea, .emp-offline-link { transition: none; }
}