/* =========================================================
   Forminator booking forms — checkout styling
   ---------------------------------------------------------
   Scoped to .rva-form (the booking pop-up) so that any other
   Forminator form on the site — the contact form, for example —
   keeps its own appearance untouched.

   This is presentation only. It overrides Forminator's own
   design-style CSS through specificity, and does not alter the
   plugin's markup, validation, calculation or submission.
   Forminator ships its stylesheets with high specificity and
   !important in places, so !important is used here where it is
   the only way to win — this is the documented way to restyle it.

   Palette follows the theme:
     accent      #f5c518 / #e0b30f
     ink         #0f172a
     muted       #475569 / #64748b
     hairline    #e2e8f0
     surface     #f8fafc
   ========================================================= */

.rva-form {
    --rva-accent: #f5c518;
    --rva-accent-dark: #e0b30f;
    --rva-accent-soft: rgba(245, 197, 24, 0.12);
    --rva-ink: #0f172a;
    --rva-muted: #64748b;
    --rva-line: #e2e8f0;
    --rva-surface: #f8fafc;
    --rva-radius: 14px;
    --rva-control: 54px;
}

/* ---------- Layout rhythm ---------- */

.rva-form .forminator-ui.forminator-custom-form {
    font-family: inherit !important;
}

.rva-form .forminator-ui .forminator-row {
    margin-bottom: 18px !important;
}
.rva-form .forminator-ui .forminator-row:last-of-type {
    margin-bottom: 0 !important;
}

/* ---------- Labels ---------- */

.rva-form .forminator-ui .forminator-label {
    color: var(--rva-ink) !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    margin-bottom: 8px !important;
    text-transform: uppercase !important;
}
.rva-form .forminator-ui .forminator-required {
    color: var(--rva-accent) !important;
}
.rva-form .forminator-ui .forminator-description {
    color: var(--rva-muted) !important;
    font-size: 13px !important;
    margin-top: 6px !important;
}

/* ---------- Text, email, phone, number, date inputs ---------- */

/* Shared look. Horizontal padding is deliberately NOT forced here:
   Forminator reserves left padding for a field's prefix/currency/icon, and
   overriding it made typed text disappear underneath the prefix. Padding is
   applied per field type below, only where there is nothing to collide with. */
.rva-form .forminator-ui .forminator-input,
.rva-form .forminator-ui .forminator-textarea,
.rva-form .forminator-ui input[type="text"],
.rva-form .forminator-ui input[type="email"],
.rva-form .forminator-ui input[type="tel"],
.rva-form .forminator-ui input[type="number"] {
    background-color: #fff !important;
    border: 1.5px solid var(--rva-line) !important;
    border-radius: var(--rva-radius) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    color: var(--rva-ink) !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    height: var(--rva-control) !important;
    line-height: 1.4 !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    width: 100% !important;
}

/* Plain fields with no prefix: safe to set our own padding. */
.rva-form .forminator-ui .forminator-field-name .forminator-input,
.rva-form .forminator-ui .forminator-field-email .forminator-input,
.rva-form .forminator-ui input[type="email"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

/* Anything Forminator marks as prefixed keeps the room it reserved. */
.rva-form .forminator-ui [class*="prefix"] .forminator-input,
.rva-form .forminator-ui .forminator-input[class*="prefix"] {
    padding-left: inherit;
}
.rva-form .forminator-ui .forminator-textarea {
    height: auto !important;
    min-height: 110px !important;
    padding: 14px 16px !important;
}

.rva-form .forminator-ui .forminator-input::placeholder,
.rva-form .forminator-ui .forminator-textarea::placeholder {
    color: #94a3b8 !important;
    font-weight: 400 !important;
}

.rva-form .forminator-ui .forminator-input:hover,
.rva-form .forminator-ui .forminator-textarea:hover {
    border-color: #cbd5e1 !important;
}

.rva-form .forminator-ui .forminator-input:focus,
.rva-form .forminator-ui .forminator-textarea:focus,
.rva-form .forminator-ui input:focus {
    border-color: var(--rva-accent) !important;
    box-shadow: 0 0 0 4px var(--rva-accent-soft) !important;
    outline: none !important;
}

/* Autofill should not repaint the field pale yellow */
.rva-form .forminator-ui input:-webkit-autofill,
.rva-form .forminator-ui input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    -webkit-text-fill-color: var(--rva-ink) !important;
}

/* ---------- Number fields: custom − / + stepper ---------- */

/* Kill the browser's native spinner; the stepper replaces it. */
.rva-form .forminator-ui input[type="number"] {
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}
.rva-form .forminator-ui input[type="number"]::-webkit-outer-spin-button,
.rva-form .forminator-ui input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Three cells on one line, always: [ - ][ value ][ + ] */
.rva-stepper {
    align-items: stretch;
    background-color: #fff;
    border: 1.5px solid var(--rva-line);
    border-radius: var(--rva-radius);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-wrap: nowrap;
    height: var(--rva-control);
    overflow: hidden;
    position: relative;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
}
.rva-stepper.is-focused {
    border-color: var(--rva-accent);
    box-shadow: 0 0 0 4px var(--rva-accent-soft);
}

/* The middle cell is either the input itself or Forminator's own wrapper
   (when the field has a prefix). Either way it takes the free space. */
.rva-stepper > .rva-stepper-box {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.rva-stepper .forminator-input,
.rva-stepper input[type="number"] {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    flex: 1 1 auto !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    height: 100% !important;
    min-width: 0 !important;
    padding: 0 4px !important;
    text-align: center !important;
    width: 100% !important;
}
.rva-stepper .forminator-input:focus {
    border: 0 !important;
    box-shadow: none !important;
}
/* Keep any prefix sitting beside the number, never on top of it. */
.rva-stepper .rva-stepper-box > *:not(input) {
    flex: 0 0 auto;
    padding-left: 10px;
    pointer-events: none;
    position: static !important;
}

.rva-stepper-btn {
    align-items: center;
    align-self: stretch;
    background-color: var(--rva-surface);
    border: 0;
    color: var(--rva-ink);
    cursor: pointer;
    display: flex;
    flex: 0 0 52px;
    font-family: inherit;
    font-size: 22px;
    font-weight: 600;
    justify-content: center;
    line-height: 1;
    padding: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
    -webkit-user-select: none;
    user-select: none;
}
.rva-stepper-btn:hover:not(:disabled) {
    background-color: var(--rva-accent);
    color: #1a1a1a;
}
.rva-stepper-btn:disabled {
    color: #cbd5e1;
    cursor: not-allowed;
}
.rva-stepper-btn:focus-visible {
    outline: 2px solid var(--rva-accent);
    outline-offset: -3px;
}
.rva-stepper-down { border-right: 1.5px solid var(--rva-line); }
.rva-stepper-up   { border-left: 1.5px solid var(--rva-line); }

/* If Forminator drops a validation message inside the wrapper, float it
   below the control rather than letting it squeeze the three cells. */
.rva-stepper .forminator-error-message {
    left: 0;
    position: absolute;
    top: 100%;
    width: 100%;
}
.rva-form .forminator-ui .forminator-field:has(.rva-stepper) {
    padding-bottom: 2px;
}

/* ---------- Select (Forminator uses select2) ---------- */

.rva-form .forminator-ui select.forminator-select2 + .forminator-select .selection span[role="combobox"],
.rva-form .forminator-ui .forminator-select .select2-selection {
    background-color: #fff !important;
    border: 1.5px solid var(--rva-line) !important;
    border-radius: var(--rva-radius) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    height: var(--rva-control) !important;
    padding: 0 14px !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.rva-form .forminator-ui .forminator-select .select2-selection__rendered {
    color: var(--rva-ink) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: calc(var(--rva-control) - 4px) !important;
    padding-left: 0 !important;
}
.rva-form .forminator-ui .forminator-select .select2-selection__placeholder {
    color: #94a3b8 !important;
    font-weight: 400 !important;
}
.rva-form .forminator-ui .forminator-select .select2-selection__arrow {
    height: var(--rva-control) !important;
    right: 12px !important;
}
.rva-form .forminator-ui .forminator-select.forminator-select-dropdown-container--open .selection span[role="combobox"],
.rva-form .forminator-ui .forminator-select--open .select2-selection {
    border-color: var(--rva-accent) !important;
    box-shadow: 0 0 0 4px var(--rva-accent-soft) !important;
}

/* The dropdown panel is portalled to <body>, so it cannot be scoped
   to .rva-form — these rules are kept deliberately narrow. */
/* The modal sits at z-index 99999. select2 appends its dropdown to <body>
   with a default z-index of 1051, so inside the pop-up it opened *behind*
   the modal and looked like it was not opening at all. */
.select2-container,
.forminator-select-dropdown,
.select2-container--open {
    z-index: 100010 !important;
}

.forminator-select-dropdown .forminator-dropdown-list,
.forminator-select-dropdown .select2-results__options {
    border-radius: var(--rva-radius, 12px) !important;
    padding: 6px !important;
}
.forminator-select-dropdown .select2-results__option {
    border-radius: 8px !important;
    color: #0f172a !important;
    font-size: 15px !important;
    padding: 11px 14px !important;
}
.forminator-select-dropdown .select2-results__option--highlighted,
.forminator-select-dropdown .select2-results__option[aria-selected="true"] {
    background-color: rgba(245, 197, 24, 0.12) !important;
    color: #0f172a !important;
    font-weight: 600 !important;
}

/* ---------- Phone field (intl-tel-input) ---------- */

.rva-form .forminator-ui .iti {
    display: block !important;
    width: 100% !important;
}
/* intl-tel-input measures the flag/dial-code box at init and sets the input's
   left padding from it. Anything here that changes that box's WIDTH breaks the
   calculation and the typed number slides underneath the prefix — which is
   exactly what a previous version of this file did (it padded the container and
   also hardcoded padding-left: 92px on the input).
   So: appearance only, never geometry. No padding, width or margin on the
   container, and no padding-left override on the tel input — intl-tel-input's
   own value is left to stand. */

/* v18 and earlier used .iti__selected-flag; v19+ uses .iti__selected-country */
.rva-form .forminator-ui .iti__selected-flag,
.rva-form .forminator-ui .iti__selected-country {
    background-color: transparent !important;
    border-radius: 9px !important;
}
.rva-form .forminator-ui .iti__selected-flag:hover,
.rva-form .forminator-ui .iti__selected-country:hover {
    background-color: #eef2f7 !important;
}
.rva-form .forminator-ui .iti__selected-dial-code {
    color: var(--rva-ink) !important;
    font-weight: 600 !important;
}
.rva-form .forminator-ui .iti__country-list,
.rva-form .forminator-ui .iti__dropdown-content {
    border: 1px solid var(--rva-line) !important;
    z-index: 100010 !important;
    border-radius: var(--rva-radius) !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16) !important;
    padding: 6px !important;
}
.rva-form .forminator-ui .iti__country {
    border-radius: 8px !important;
    padding: 9px 12px !important;
}
.rva-form .forminator-ui .iti__country.iti__highlight,
.rva-form .forminator-ui .iti__country:hover {
    background-color: rgba(245, 197, 24, 0.12) !important;
}

/* ---------- Date picker ---------- */

.rva-form .forminator-ui .forminator-field-date .forminator-input,
.rva-form .forminator-ui .forminator-datepicker {
    cursor: pointer !important;
}
/* Give the calendar icon room without covering the typed date. */
.rva-form .forminator-ui .forminator-field-date {
    position: relative;
}
.rva-form .forminator-ui .forminator-icon-calendar,
.rva-form .forminator-ui .forminator-field-date [class*="forminator-icon"] {
    color: var(--rva-accent) !important;
}

/* The calendar is appended to <body>, so it is scoped by its own class. */
.ui-datepicker[class*="forminator-calendar"] {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18) !important;
    font-family: inherit !important;
    padding: 12px !important;
    z-index: 100010 !important;
}
.ui-datepicker[class*="forminator-calendar"] .ui-datepicker-header {
    background: transparent !important;
    border: 0 !important;
    padding-bottom: 8px !important;
}
.ui-datepicker[class*="forminator-calendar"] .ui-datepicker-title {
    color: #0f172a !important;
    font-weight: 700 !important;
}
.ui-datepicker[class*="forminator-calendar"] .ui-datepicker-prev,
.ui-datepicker[class*="forminator-calendar"] .ui-datepicker-next {
    border-radius: 8px !important;
    color: #0f172a !important;
    cursor: pointer !important;
}
.ui-datepicker[class*="forminator-calendar"] .ui-datepicker-prev:hover,
.ui-datepicker[class*="forminator-calendar"] .ui-datepicker-next:hover {
    background: #f8fafc !important;
}
.ui-datepicker[class*="forminator-calendar"] th {
    color: #94a3b8 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}
.ui-datepicker[class*="forminator-calendar"] td a,
.ui-datepicker[class*="forminator-calendar"] td span {
    border-radius: 8px !important;
    color: #0f172a !important;
    font-weight: 500 !important;
    padding: 8px !important;
    text-align: center !important;
}
.ui-datepicker[class*="forminator-calendar"] td a:hover {
    background: rgba(245, 197, 24, 0.12) !important;
}
.ui-datepicker[class*="forminator-calendar"] td .ui-state-active,
.ui-datepicker[class*="forminator-calendar"] td a.ui-state-active {
    background: #f5c518 !important;
    color: #1a1a1a !important;
    font-weight: 700 !important;
}
.ui-datepicker[class*="forminator-calendar"] .ui-datepicker-unselectable span {
    color: #cbd5e1 !important;
}

/* ---------- Calculation / total ---------- */

.rva-form .forminator-ui .forminator-field-calculation,
.rva-form .forminator-ui [data-field-type="calculation"],
.rva-form .forminator-ui .forminator-calculation {
    background: linear-gradient(135deg, #fff7ed 0%, #fffbf6 100%) !important;
    border: 1.5px solid rgba(245, 197, 24, 0.35) !important;
    border-radius: 14px !important;
    margin-top: 4px !important;
    padding: 18px 20px !important;
}
.rva-form .forminator-ui .forminator-field-calculation .forminator-label,
.rva-form .forminator-ui [data-field-type="calculation"] .forminator-label {
    color: var(--rva-muted) !important;
    margin-bottom: 4px !important;
}
.rva-form .forminator-ui .forminator-field-calculation .forminator-calculation-value,
.rva-form .forminator-ui .forminator-field-calculation .forminator-input,
.rva-form .forminator-ui [data-field-type="calculation"] .forminator-input,
.rva-form .forminator-ui .forminator-calculation-value {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--rva-ink) !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    height: auto !important;
    letter-spacing: -0.01em !important;
    padding: 0 !important;
}

/* ---------- Validation ---------- */

.rva-form .forminator-ui .forminator-error-message {
    color: #dc2626 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-top: 6px !important;
}
.rva-form .forminator-ui .forminator-has_error .forminator-input,
.rva-form .forminator-ui .forminator-is_invalid .forminator-input,
.rva-form .forminator-ui .forminator-input.forminator-has_error {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1) !important;
}
.rva-form .forminator-ui .forminator-response-message {
    border-radius: var(--rva-radius) !important;
    font-size: 15px !important;
    padding: 14px 16px !important;
}

/* ---------- Submit ---------- */

.rva-form .forminator-ui .forminator-button-submit,
.rva-form .forminator-ui button.forminator-button-submit {
    background-color: var(--rva-accent) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231a1a1a'%3E%3Cpath d='M12 1a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-1V6a5 5 0 0 0-5-5zm-3 5a3 3 0 1 1 6 0v3H9V6zm3 8a1.5 1.5 0 0 1 .75 2.8V19h-1.5v-2.2A1.5 1.5 0 0 1 12 14z'/%3E%3C/svg%3E") !important;
    background-position: left 20px center !important;
    background-repeat: no-repeat !important;
    background-size: 18px 18px !important;
    border: 0 !important;
    border-radius: var(--rva-radius) !important;
    box-shadow: 0 8px 20px rgba(245, 197, 24, 0.28) !important;
    color: #1a1a1a !important;
    font-family: inherit !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    height: auto !important;
    letter-spacing: 0.01em !important;
    padding: 17px 24px 17px 48px !important;
    text-transform: none !important;
    transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease !important;
    width: 100% !important;
}
.rva-form .forminator-ui .forminator-button-submit:hover {
    background-color: var(--rva-accent-dark) !important;
    box-shadow: 0 10px 26px rgba(245, 197, 24, 0.34) !important;
    transform: translateY(-1px) !important;
}
.rva-form .forminator-ui .forminator-button-submit:active {
    transform: translateY(0) !important;
}
.rva-form .forminator-ui .forminator-button-submit:disabled {
    background-color: #cbd5e1 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}
.rva-form .forminator-ui .forminator-row-last {
    margin-top: 22px !important;
}

/* ---------- Trust strip (theme markup, below the form) ---------- */

.rva-form-trust {
    align-items: center;
    border-top: 1px solid var(--rva-line);
    color: var(--rva-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 13.5px;
    gap: 8px 20px;
    justify-content: center;
    margin-top: 22px;
    padding-top: 18px;
}
.rva-form-trust span {
    align-items: center;
    display: inline-flex;
    gap: 7px;
}
.rva-form-trust svg {
    color: #16a34a;
    flex-shrink: 0;
    height: 16px;
    width: 16px;
}

/* ---------- Small screens ---------- */

@media (max-width: 640px) {
    .rva-form {
        --rva-control: 50px;
    }
    .rva-stepper-btn { flex-basis: 46px; font-size: 20px; }
    .rva-form .forminator-ui .forminator-field-calculation .forminator-input,
    .rva-form .forminator-ui .forminator-calculation-value {
        font-size: 28px !important;
    }
}