/* ================================================
   Avaaza — Enquiry Form
   Design: Shaan Designs · May 2026 (v4.3.0 — x2 font sizes, time width fix)
   Brand: Cream / Ivory / Black / Gold editorial
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Josefin+Sans:wght@100;200;300;400&family=Jost:wght@200;300;400;500&display=swap');

:root {
    --av-cream:      #FAF8F3;
    --av-ivory:      #F2EDE2;
    --av-ivory-mid:  #EAE3D5;
    --av-black:      #0A0A0A;
    --av-charcoal:   #2C2C2C;
    --av-warm-mid:   #4E4A46;   /* v4.2.1: darkened from #6B6560 for better contrast */
    --av-muted:      #6B6560;   /* v4.2.1: darkened from #9A948D for better contrast */
    --av-gold:       #B8872A;
    --av-gold-lt:    #D4A54A;
    --av-gold-pale:  #F0E0C0;
    --av-border:     rgba(10,10,10,0.07);
    --av-border-md:  rgba(10,10,10,0.15);  /* v4.2.1: slightly stronger border */
    --av-white:      #ffffff;
    --av-ff-disp:    'Cormorant Garamond', Georgia, serif;
    --av-ff-tag:     'Josefin Sans', sans-serif;
    --av-ff-ui:      'Jost', system-ui, sans-serif;
}

/* Layout */
.ftm-wrap {
    display: flex;
    gap: 1px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 24px;
    font-family: var(--av-ff-ui);
    color: var(--av-charcoal);
    background: var(--av-cream);
    font-weight: 300;
    align-items: flex-start;
}
.ftm-form-col { flex: 1 1 0; min-width: 0; }
.ftm-sidebar  { flex: 0 0 280px; }

/* Title */
.ftm-title {
    font-family: var(--av-ff-disp);
    font-size: clamp(36px, 5vw, 58px);
    font-weight: 400;              /* v4.2.1: 300 → 400 */
    margin: 0 0 10px;
    color: var(--av-black);
    line-height: 1.02;
    letter-spacing: -0.3px;
}
.ftm-title em { font-style: italic; color: var(--av-gold); }
.ftm-subtitle {
    color: var(--av-muted);
    margin: 0 0 44px;
    font-size: 24px;               /* v4.3.0: x2 → 24px */
    font-weight: 400;
    line-height: 1.8;
}

/* Form eyebrow */
.ftm-form-eyebrow {
    font-family: var(--av-ff-tag);
    font-size: 11px;               /* v4.2.1: 10px → 11px */
    letter-spacing: 5px;           /* v4.2.1: 6px → 5px for readability */
    text-transform: uppercase;
    color: var(--av-gold);
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 44px;
}
.ftm-form-eyebrow::before {
    content: '';
    width: 1px;
    height: 36px;
    background: var(--av-gold-lt);
}

/* Sections */
.ftm-section { margin-bottom: 40px; }
.ftm-section-title {
    font-family: var(--av-ff-tag);
    font-size: 16px;               /* v4.3.0: x2 → 16px (was 13px) */
    letter-spacing: 3px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--av-gold);
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.ftm-section-title::after { content: ''; flex: 1; height: 1px; background: var(--av-border-md); }

.ftm-section-title .ftm-note {
    font-size: 14px;               /* v4.3.0: x2 → 14px */
    font-weight: 400;
    color: var(--av-muted);
    letter-spacing: 0;
    text-transform: none;
}
.ftm-optional {
    font-family: var(--av-ff-tag);
    font-size: 12px;               /* v4.3.0: x2 → 12px */
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--av-muted);
    font-weight: 400;
}
.ftm-hint {
    font-size: 18px;               /* v4.3.0: x2 → 18px */
    color: var(--av-muted);
    margin: -4px 0 14px;
    font-weight: 400;
}

/* Fields */
.ftm-field { margin-bottom: 24px; }
.ftm-field label {
    display: block;
    font-family: var(--av-ff-tag);
    font-size: 16px;               /* v4.3.0: x2 → 16px */
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--av-gold);
    font-weight: 400;
    margin-bottom: 10px;
}
.ftm-req { color: var(--av-gold-lt); }

/* Inputs */
.ftm-input {
    width: 100%;
    padding: 16px 0;
    border: none;
    border-bottom: 1px solid var(--av-border-md);
    font-family: var(--av-ff-ui);
    font-size: 22px;               /* v4.3.0: x2 → 22px */
    font-weight: 400;
    color: var(--av-charcoal);
    background: transparent;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.ftm-input::placeholder {
    color: var(--av-muted);        /* v4.2.1: explicit placeholder styling */
    font-weight: 300;
}
.ftm-input:focus {
    outline: none;
    border-color: var(--av-gold);
}
.ftm-input-half { max-width: 360px; }

.ftm-textarea {
    width: 100%;
    padding: 16px 0;
    border: none;
    border-bottom: 1px solid var(--av-border-md);
    font-family: var(--av-ff-ui);
    font-size: 22px;               /* v4.3.0: x2 → 22px */
    font-weight: 400;
    color: var(--av-charcoal);
    background: transparent;
    resize: vertical;
    min-height: 100px;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.ftm-textarea::placeholder {
    color: var(--av-muted);
    font-weight: 300;
}
.ftm-textarea:focus {
    outline: none;
    border-color: var(--av-gold);
}

/* Select */
.ftm-select {
    width: 100%;                   /* always fills its container */
    display: block;
    padding: 16px 36px 16px 0;    /* right-pad for chevron arrow */
    border: none;
    border-bottom: 1px solid var(--av-border-md);
    font-family: var(--av-ff-ui);
    font-size: 22px;               /* v4.3.0: x2 → 22px */
    font-weight: 400;
    color: var(--av-charcoal);
    background: transparent;
    cursor: pointer;
    transition: border-color 0.2s;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
}
.ftm-select:focus {
    outline: none;
    border-color: var(--av-gold);
}
.ftm-select-currency { min-width: 100px; width: auto; }

/* Datepicker */
.flatpickr-input { cursor: pointer; }

/* Ensure the date section never clips the calendar popup */
.ftm-section:has(.ftm-datepicker),
.ftm-section:has(.flatpickr-input) {
    position: relative;
    overflow: visible !important;
}
/* Flatpickr calendar must always float above everything */
.flatpickr-calendar {
    z-index: 999999 !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--av-gold) !important;
    border-color: var(--av-gold) !important;
}
.flatpickr-day:hover { background: var(--av-gold-pale) !important; }

/* Time row */
.ftm-time-row { display: flex; gap: 48px; flex-wrap: wrap; align-items: flex-start; }
.ftm-time-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 280px;
}
.ftm-time-block label {
    display: block;
    font-family: var(--av-ff-tag);
    font-size: 14px;               /* v4.3.0: x2 → 14px */
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--av-warm-mid);
    margin-bottom: 8px;
    font-weight: 400;
}
.ftm-time-selects { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; width: 100%; }
.ftm-colon { font-weight: 500; color: var(--av-warm-mid); font-size: 22px; }

/* Budget */
.ftm-budget-row { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-end; }
.ftm-budget-col { display: flex; flex-direction: column; gap: 6px; }
.ftm-budget-col label {
    font-family: var(--av-ff-tag);
    font-size: 14px;               /* v4.3.0: x2 → 14px */
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--av-warm-mid);
}
.ftm-budget-col .ftm-input { max-width: 140px; }

/* Field row */
.ftm-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ftm-field-col { display: flex; flex-direction: column; gap: 6px; }
.ftm-field-col label {
    font-family: var(--av-ff-tag);
    font-size: 14px;               /* v4.3.0: x2 → 14px */
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--av-gold);
    font-weight: 400;
}

/* Radio */
.ftm-radio-group { display: flex; gap: 28px; align-items: center; padding: 10px 0; }
.ftm-radio-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--av-ff-ui);
    font-size: 22px;               /* v4.3.0: x2 → 22px */
    font-weight: 400;
    color: var(--av-charcoal);
    cursor: pointer;
}
.ftm-radio-label input[type="radio"] {
    width: 14px;
    height: 14px;
    accent-color: var(--av-gold);
    cursor: pointer;
}

/* Submit button */
.ftm-btn-primary {
    background: var(--av-black);
    color: var(--av-white);
    border: none;
    padding: 20px 56px;
    font-family: var(--av-ff-tag);
    font-size: 16px;               /* v4.3.0: x2 → 16px */
    letter-spacing: 4px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s;
    display: inline-block;
    text-decoration: none;
}
.ftm-btn-primary:hover { background: var(--av-gold); color: var(--av-white) !important; }
.ftm-btn-primary:active { transform: scale(0.99); }

/* Notices */
.ftm-notice {
    padding: 20px 24px;
    margin-bottom: 24px;
    font-size: 22px;               /* v4.3.0: x2 → 22px */
    font-weight: 400;
    border-left: 3px solid;
}
.ftm-success {
    background: rgba(184,135,42,0.08);
    color: var(--av-warm-mid);
    border-color: var(--av-gold);
}
.ftm-error {
    background: rgba(180,40,40,0.06);
    color: #8B3030;
    border-color: #C8555555;
}

/* Sidebar */
.ftm-good-to-know {
    background: var(--av-ivory);
    padding: 32px;
    border: 1px solid var(--av-border-md);
    margin-left: 40px;
}
.ftm-good-to-know h3 {
    font-family: var(--av-ff-tag);
    font-size: 16px;               /* v4.3.0: x2 → 16px */
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--av-gold);
    margin: 0 0 24px;
    font-weight: 400;
}
.ftm-good-to-know ul { padding-left: 0; margin: 0; list-style: none; }
.ftm-good-to-know ul li {
    margin-bottom: 16px;
    font-family: var(--av-ff-ui);
    font-size: 20px;               /* v4.3.0: x2 → 20px */
    font-weight: 400;
    color: var(--av-charcoal);
    line-height: 1.8;
    padding-left: 20px;
    position: relative;
}
.ftm-good-to-know ul li::before {
    content: '◆';
    position: absolute;
    left: 0;
    font-size: 7px;
    color: var(--av-gold);
    top: 5px;
}

/* Responsive */
@media (max-width: 900px) {
    .ftm-good-to-know { margin-left: 0; }
}
@media (max-width: 768px) {
    .ftm-wrap { flex-direction: column; gap: 40px; padding: 40px 16px; }
    .ftm-sidebar { flex: 1 1 auto; order: 2; }
    .ftm-form-col { order: 1; }
    .ftm-title { font-size: 1.8rem; }
    .ftm-subtitle { font-size: 14px; margin-bottom: 28px; }
    .ftm-section { margin-bottom: 28px; }
    .ftm-input, .ftm-textarea, .ftm-select { font-size: 16px; padding: 12px 0; }
    .ftm-input-half { max-width: 100%; }
    /* time-row handled in v4.3.0 mobile overrides block below */
    .ftm-budget-row { flex-direction: column; gap: 12px; }
    .ftm-budget-col .ftm-input { max-width: 100%; }
    .ftm-field-row { grid-template-columns: 1fr; gap: 16px; }
    .ftm-radio-group { flex-direction: column; gap: 10px; align-items: flex-start; }
    .ftm-btn-primary { width: 100%; text-align: center; padding: 18px; }
    .ftm-good-to-know { padding: 20px; margin-left: 0; }
}
@media (max-width: 480px) {
    .ftm-title { font-size: 1.5rem; }
    .ftm-wrap { padding: 28px 12px; }
}

/* ================================================
   v4.3.0 ADDITIONS
   ================================================ */

/* ── Time selects — fixed widths so they never collapse on desktop ── */
.ftm-select-hh   { min-width: 90px; width: 90px; font-size: 20px !important; }
.ftm-select-mm   { min-width: 90px; width: 90px; font-size: 20px !important; }
.ftm-select-ampm { min-width: 110px; width: 110px; font-size: 20px !important; }
.ftm-time-block  { min-width: 300px; }
.ftm-time-selects { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; width: 100%; }

/* ── Budget inputs — sensible width ── */
.ftm-budget-input { max-width: 180px !important; }

/* ── Top5 category label (new line 1) ── */
.ftm-top5-category {
    display: block;
    font-family: var(--av-ff-tag, 'Josefin Sans', sans-serif);
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #B8872A;
    font-weight: 400;
    margin-bottom: 4px;
}

/* ── Pill submit button with point arrow + glow (Get a quote page ONLY) ── */
.ftm-btn-pill {
    border-radius: 50px;
    padding: 22px 64px;
    font-size: 16px;               /* v4.3.0: doubled */
    letter-spacing: 3px;
    position: relative;
    overflow: visible;
    background: #0A0A0A;
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 20px rgba(184,135,42,0.18);
    transition: background 0.25s, box-shadow 0.3s, transform 0.15s;
    cursor: pointer;
}
.ftm-btn-pill:hover,
.ftm-btn-pill:focus {
    background: #B8872A;
    color: #ffffff;
    box-shadow:
        0 8px 32px rgba(184,135,42,0.55),
        0 0 0 4px rgba(184,135,42,0.12);
    transform: translateY(-2px);
    outline: none;
}
.ftm-btn-pill:active {
    transform: translateY(0);
    box-shadow: 0 3px 12px rgba(184,135,42,0.3);
}
.ftm-btn-pill .ftm-btn-text::after {
    content: ' ›';
    font-size: 22px;
    line-height: 1;
    vertical-align: middle;
    margin-left: 6px;
}

/* ── Flatpickr year input — explicit dark text so it's always visible ──────
   Fixes the blank/invisible year field on the date picker.                  */
.flatpickr-current-month .numInputWrapper {
    display: inline-block !important;
    width: 72px !important;
}
.flatpickr-current-month .numInputWrapper input.numInput,
.flatpickr-current-month input.numInput.cur-year {
    color: #1A1A1A !important;
    background: transparent !important;
    border: 1px solid rgba(10,10,10,0.18) !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    width: 68px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    opacity: 1 !important;
}
.flatpickr-current-month .numInputWrapper span.arrowUp,
.flatpickr-current-month .numInputWrapper span.arrowDown {
    display: none !important;
}

/* ── JS-injected year <select> styling ──────────────────────────────────── */
.ftm-year-select {
    display: inline-block !important;
    padding: 2px 24px 2px 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1A1A1A !important;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23B8872A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 6px center !important;
    border: 1px solid rgba(10,10,10,0.2) !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    min-width: 72px !important;
    vertical-align: middle !important;
    line-height: 1.4 !important;
}
/* Month dropdown text */
.flatpickr-current-month select.flatpickr-monthDropdown-months {
    color: #1A1A1A !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}
/* Weekday headers */
.flatpickr-weekday {
    color: #4E4A46 !important;
    font-weight: 500 !important;
    font-size: 13px !important;
}
/* Day numbers */
.flatpickr-day {
    color: #2C2C2C !important;
    font-size: 13px !important;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #C4BDB6 !important;
}
/* Calendar container */
.flatpickr-calendar {
    border: 1px solid rgba(10,10,10,0.1) !important;
    box-shadow: 0 8px 32px rgba(10,10,10,0.12) !important;
    border-radius: 4px !important;
    background: #FEFCF8 !important;
}
/* Booking widget datepicker on profile page */
.ftm-booking-field input.ftm-datepicker,
.ftm-booking-field input.flatpickr-input {
    color: #2C2C2C !important;
    font-size: 15px !important;
}

/* ── Mobile responsive overrides ── */
@media (max-width: 768px) {
    .ftm-input, .ftm-textarea, .ftm-select { font-size: 16px; }
    .ftm-section-title { font-size: 13px; }
    .ftm-field label { font-size: 13px; }
    .ftm-hint { font-size: 15px; }

    /* Time selects: shrink to fit on mobile without overflow */
    .ftm-time-row { flex-direction: column; gap: 20px; }
    .ftm-time-block { min-width: 0; width: 100%; }
    .ftm-time-selects { gap: 6px; flex-wrap: nowrap; }
    .ftm-select-hh,
    .ftm-select-mm  { min-width: 0 !important; width: 70px !important; flex: 0 0 70px; font-size: 16px !important; }
    .ftm-select-ampm { min-width: 0 !important; width: 80px !important; flex: 0 0 80px; font-size: 16px !important; }

    /* Budget row stacks cleanly */
    .ftm-budget-row { flex-direction: column; gap: 12px; }
    .ftm-budget-col .ftm-input { max-width: 100%; }

    /* Full-width selects stack properly */
    .ftm-select { width: 100%; display: block; }

    /* Flatpickr calendar — ensure it's never cut off on mobile */
    .flatpickr-calendar {
        width: 100% !important;
        max-width: 340px !important;
        left: 0 !important;
        right: auto !important;
    }

    .ftm-btn-pill { padding: 18px 40px; font-size: 13px; }
}