/* DMA Forms — visual match for dmayachting-new theme's filter section. */

.dma_form_wrapper {
    /* Tokens harvested from .filter / .search / .select on /explore/ */
    --dma-ink:          rgb(14, 27, 42);     /* primary text */
    --dma-ink-soft:     rgb(20, 32, 46);     /* heading text */
    --dma-muted:        rgb(110, 116, 124);  /* small/secondary text */
    --dma-bg:           #ffffff;             /* input + button background */
    --dma-surface:      rgb(250, 250, 248);  /* page surface (off-white) */
    --dma-border:       rgb(194, 190, 182);  /* warm gray hairline */
    --dma-border-soft:  rgb(216, 213, 205);  /* lighter version */
    --dma-gold:         #c8a96a;             /* gold accent for required marker, INQUIRE submit */
    --dma-gold-hover:   #b8985d;
    --dma-error:        #b00020;
    --dma-error-bg:     #fdecee;
    --dma-success-bg:   #e8f5ec;
    --dma-success:      #1b5e20;

    --dma-radius:       6px;
    --dma-control-h:    44px;
    --dma-font:         Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    max-width: 720px;
    margin: 0 auto;
    color: var(--dma-ink);
    font-family: var(--dma-font);
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0.46875px;
}

/* Page wrapper (multi-page form) */
.dma_form_wrapper .dma_form_page { display: block; }
.dma_form_wrapper .dma_form_page[hidden] { display: none !important; }

/* Legacy GF hide classes — applied to auto-populated fields. */
.dma_form_wrapper .hide,
.dma_form_wrapper .hidden,
.dma_form_wrapper .dma_field.hide,
.dma_form_wrapper .dma_field.hidden { display: none !important; }

/* Field row */
.dma_form_wrapper .dma_field { margin: 0 0 1rem 0; }
.dma_form_wrapper .dma_field--html { margin-bottom: 0.75rem; }

/* Labels — small caps, navy, tight tracking, matches filter "DESTINATION/SHIPYARD/VESSEL" treatment */
.dma_form_wrapper .dma_form label {
    display: block;
    margin: 0 0 0.45rem 0;
    color: var(--dma-ink) !important;
    font-family: var(--dma-font) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2.4px !important;
    line-height: 1.2 !important;
}
.dma_form_wrapper .dma_required { color: var(--dma-gold); margin-left: 2px; }

/*
 * Inputs — beat the theme's aggressive `input { background: linear-gradient(...); color: #ECCD8E !important; }`
 * with higher specificity + !important on every contested property.
 */
.dma_form_wrapper .dma_form input[type="text"],
.dma_form_wrapper .dma_form input[type="email"],
.dma_form_wrapper .dma_form input[type="number"],
.dma_form_wrapper .dma_form input[type="date"],
.dma_form_wrapper .dma_form input[type="tel"],
.dma_form_wrapper .dma_form select,
.dma_form_wrapper .dma_form textarea {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: var(--dma-control-h) !important;
    padding: 0 14px !important;
    margin: 0 !important;

    color: var(--dma-ink) !important;
    background: var(--dma-bg) !important;
    background-color: var(--dma-bg) !important;
    background-image: none !important;

    border: 1px solid var(--dma-border) !important;
    border-radius: var(--dma-radius) !important;
    box-shadow: none !important;
    outline: 0 !important;

    font-family: var(--dma-font) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.46875px !important;

    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dma_form_wrapper .dma_form textarea {
    height: auto !important;
    min-height: 120px !important;
    padding: 14px !important;
    resize: vertical;
}

/* Select — match the inputs + a custom navy chevron (appearance:none hides the native one) */
.dma_form_wrapper .dma_form select {
    padding-right: 40px !important;
    cursor: pointer;
    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 fill='none' stroke='%230e1b2a' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px 8px !important;
}

/* Date inputs — the native calendar icon comes in dark by default; coerce it to navy */
.dma_form_wrapper .dma_form input[type="date"]::-webkit-calendar-picker-indicator {
    filter: none;
    opacity: 0.55;
    cursor: pointer;
}

.dma_form_wrapper .dma_form input::placeholder,
.dma_form_wrapper .dma_form textarea::placeholder {
    color: var(--dma-muted) !important;
    opacity: 1 !important;
}

.dma_form_wrapper .dma_form input:focus,
.dma_form_wrapper .dma_form textarea:focus {
    border-color: var(--dma-ink) !important;
    box-shadow: 0 0 0 3px rgba(14, 27, 42, 0.08) !important;
}

.dma_form_wrapper .dma_form input.is-error,
.dma_form_wrapper .dma_form textarea.is-error {
    border-color: var(--dma-error) !important;
    box-shadow: 0 0 0 3px rgba(176, 0, 32, 0.08) !important;
}

/* Inline per-field error */
.dma_form_wrapper .dma_field_error {
    margin-top: 0.4rem;
    color: var(--dma-error);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.3px;
}
.dma_form_wrapper .dma_field_error:empty { display: none; }

/* Buttons */
.dma_form_wrapper .dma_form_pagination,
.dma_form_wrapper .dma_form_submit {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}
.dma_form_wrapper .dma_form_pagination { justify-content: flex-end; }
.dma_form_wrapper .dma_form_submit     { justify-content: stretch; }

.dma_form_wrapper .dma_btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box !important;
    min-height: var(--dma-control-h) !important;
    padding: 0 1.75rem !important;

    font-family: var(--dma-font) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 2.4px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;

    color: var(--dma-ink) !important;
    background: var(--dma-gold) !important;
    background-color: var(--dma-gold) !important;
    background-image: none !important;
    border: 1px solid var(--dma-gold) !important;
    border-radius: var(--dma-radius) !important;
    box-shadow: none !important;

    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.dma_form_wrapper .dma_btn:hover,
.dma_form_wrapper .dma_btn:focus {
    background: var(--dma-gold-hover) !important;
    background-color: var(--dma-gold-hover) !important;
    border-color: var(--dma-gold-hover) !important;
    outline: 0;
}

.dma_form_wrapper .dma_btn--submit { width: 100%; }

/* Honor the HTML `hidden` attribute — beats display: inline-flex !important above */
.dma_form_wrapper .dma_btn[hidden] { display: none !important; }

.dma_form_wrapper .dma_btn--prev {
    background: var(--dma-bg) !important;
    background-color: var(--dma-bg) !important;
    color: var(--dma-ink) !important;
    border: 1px solid var(--dma-border) !important;
}
.dma_form_wrapper .dma_btn--prev:hover {
    background: var(--dma-surface) !important;
    background-color: var(--dma-surface) !important;
    border-color: var(--dma-ink) !important;
}

/* HTML block (e.g., "Contact us" heading on form 2) */
.dma_form_wrapper .dma_field--html h2,
.dma_form_wrapper .dma_field--html .stunning-text-title {
    margin: 0 0 1.5rem 0;
    color: var(--dma-ink-soft);
    font-family: var(--dma-font);
    font-size: 26px;
    font-weight: 400;
    letter-spacing: 0.2px;
}

/* Yacht thumbnail block injected by the modal-trigger JS */
.dma_form_wrapper .dma_field--html.mo_imgcust { text-align: center; margin-bottom: 1.5rem; }
.dma_form_wrapper .dma_field--html.mo_imgcust img {
    max-width: 240px;
    height: auto;
    border-radius: var(--dma-radius);
    border: 1px solid var(--dma-border-soft);
}

/* Form-level messages banner */
.dma_form_wrapper .dma_form_messages {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--dma-radius);
    font-size: 13px;
}
.dma_form_wrapper .dma_form_messages:empty { display: none; }
.dma_form_wrapper .dma_form_messages.is-error   { background: var(--dma-error-bg);   color: var(--dma-error); }
.dma_form_wrapper .dma_form_messages.is-success { background: var(--dma-success-bg); color: var(--dma-success); }

/* =========================================================================
 *  flatpickr calendar theme — matches the form's design language.
 *  flatpickr's calendar floats outside .dma_form_wrapper, so these rules
 *  are scoped via .flatpickr-calendar and target our specific instance.
 * ========================================================================= */
.flatpickr-calendar {
    background: #ffffff !important;
    color: rgb(14, 27, 42) !important;
    border: 1px solid rgb(194, 190, 182) !important;
    border-radius: 6px !important;
    box-shadow: 0 6px 24px rgba(14, 27, 42, 0.12) !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 14px !important;
    padding: 8px !important;
    width: 320px !important;
    /* Force light color scheme so the native <select> + <input type=number> inside don't
       inherit the OS dark theme (was rendering month/year invisible on Windows dark mode). */
    color-scheme: light !important;
}
.flatpickr-calendar::before,
.flatpickr-calendar::after { display: none !important; }

/* Month / year header — keep flatpickr's default flex layout, only recolor + retype. */
.flatpickr-months .flatpickr-month {
    color: rgb(14, 27, 42) !important;
    fill: rgb(14, 27, 42) !important;
    overflow: visible !important;
}
.flatpickr-current-month {
    color: rgb(14, 27, 42) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding-top: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
}

/* Month <select> — strip native chrome, draw our own caret. */
.flatpickr-current-month select.flatpickr-monthDropdown-months {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    color: rgb(14, 27, 42) !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='%230e1b2a'><path d='M2 4l4 4 4-4z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 4px center !important;
    background-size: 10px 10px !important;
    border: 1px solid transparent !important;
    border-radius: 4px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    padding: 4px 18px 4px 8px !important;
    height: auto !important;
    line-height: 1.2 !important;
    cursor: pointer;
    color-scheme: light !important;
}
.flatpickr-current-month select.flatpickr-monthDropdown-months:hover {
    background-color: rgb(250, 250, 248) !important;
    border-color: rgb(216, 213, 205) !important;
}
.flatpickr-current-month select.flatpickr-monthDropdown-months:focus {
    outline: 0 !important;
    border-color: rgb(14, 27, 42) !important;
    box-shadow: 0 0 0 3px rgba(14, 27, 42, 0.08) !important;
}
.flatpickr-current-month select.flatpickr-monthDropdown-months option {
    color: rgb(14, 27, 42) !important;
    background: #ffffff !important;
    font-weight: 400;
}

/* Year stepper — hide native number spinner buttons, use flatpickr's own ▲▼ glyphs. */
.flatpickr-current-month .numInputWrapper {
    width: 70px !important;
    border-radius: 4px !important;
    overflow: hidden;
}
.flatpickr-current-month .numInputWrapper:hover {
    background-color: rgb(250, 250, 248) !important;
}
.flatpickr-current-month input.cur-year {
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
    appearance: none !important;
    color: rgb(14, 27, 42) !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    padding: 4px 0 4px 8px !important;
    height: auto !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: left !important;
    width: 50px !important;
    color-scheme: light !important;
}
.flatpickr-current-month input.cur-year::-webkit-outer-spin-button,
.flatpickr-current-month input.cur-year::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
    display: none !important;
}
.flatpickr-current-month .numInputWrapper span {
    border: 0 !important;
    opacity: 0.6;
}
.flatpickr-current-month .numInputWrapper span:hover {
    background-color: rgba(14, 27, 42, 0.06) !important;
    opacity: 1;
}
.flatpickr-current-month .numInputWrapper span.arrowUp::after  { border-bottom-color: rgb(14, 27, 42) !important; top: 40% !important; }
.flatpickr-current-month .numInputWrapper span.arrowDown::after { border-top-color:    rgb(14, 27, 42) !important; top: 40% !important; }

/* Prev / next month arrows */
.flatpickr-prev-month,
.flatpickr-next-month {
    color: rgb(14, 27, 42) !important;
    fill: rgb(14, 27, 42) !important;
    padding: 6px 8px !important;
    border-radius: 4px;
}
.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    background: rgb(250, 250, 248) !important;
    color: #c8a96a !important;
    fill: #c8a96a !important;
}
.flatpickr-prev-month svg,
.flatpickr-next-month svg { width: 12px !important; height: 12px !important; }

/* Weekday header row */
.flatpickr-weekdays {
    background: transparent !important;
    margin-bottom: 4px;
}
.flatpickr-weekdaycontainer {
    display: flex;
    width: 100%;
}
span.flatpickr-weekday {
    color: rgb(110, 116, 124) !important;
    background: transparent !important;
    font-weight: 700 !important;
    font-size: 10px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase;
}

/* Days grid */
.flatpickr-days {
    width: 100% !important;
    border: none !important;
}
.dayContainer {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 4px 0;
}
.flatpickr-day {
    color: rgb(14, 27, 42) !important;
    border-radius: 4px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    max-width: none !important;
    height: 36px !important;
    line-height: 36px !important;
    margin: 1px 0 !important;
    font-weight: 400 !important;
}
.flatpickr-day:hover {
    background: rgb(250, 250, 248) !important;
    border-color: rgb(194, 190, 182) !important;
}
.flatpickr-day.today {
    border-color: rgb(14, 27, 42) !important;
    font-weight: 700 !important;
}
.flatpickr-day.today:hover {
    background: rgb(250, 250, 248) !important;
    color: rgb(14, 27, 42) !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: #c8a96a !important;
    border-color: #c8a96a !important;
    color: rgb(14, 27, 42) !important;
    font-weight: 700 !important;
}
.flatpickr-day.inRange {
    background: rgba(200, 169, 106, 0.15) !important;
    border-color: rgba(200, 169, 106, 0.25) !important;
    box-shadow: none !important;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: rgb(180, 180, 175) !important;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: rgb(200, 200, 195) !important;
    background: transparent !important;
    border-color: transparent !important;
}

/* Connector arrow on calendar (hide — looks cleaner without) */
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after { display: none !important; }