/* =========================================================
   TRAVELLER NUMBER COUNTERS
   ========================================================= */

.sabaa-form .sabaa-number-counter {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 38px;
    background: transparent !important;
    border: 1px solid #AEB4BD;
    border-radius: 0;
    box-sizing: border-box;
}

.sabaa-form .sabaa-number-counter input[type="number"] {
    flex: 1;
    width: 100%;
    height: 36px;
    margin: 0;
    padding: 0;
    background: transparent !important;
    border: 0 !important;
    color: #0B2345;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    text-align: center;
    outline: none !important;
    box-shadow: none !important;
    -moz-appearance: textfield;
}

.sabaa-form .sabaa-number-counter input[type="number"]::-webkit-inner-spin-button,
.sabaa-form .sabaa-number-counter input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.sabaa-form .sabaa-number-counter button {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    background: transparent !important;
    border: 0;
    color: #0B2345;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
    box-shadow: none !important;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.sabaa-form .sabaa-counter-minus {
    border-right: 1px solid #D5D8DC;
}

.sabaa-form .sabaa-counter-plus {
    border-left: 1px solid #D5D8DC;
}

.sabaa-form .sabaa-number-counter button:hover {
    background: rgba(200, 162, 74, 0.06) !important;
    color: #C8A24A;
}

.sabaa-form .sabaa-number-counter button:active {
    background: rgba(200, 162, 74, 0.10) !important;
    color: #C8A24A;
}

.sabaa-form .sabaa-number-counter button:disabled {
    background: transparent !important;
    color: #C9CDD3;
    cursor: not-allowed;
}

.sabaa-form .sabaa-number-counter:focus-within {
    border-color: #C8A24A;
}


/* =========================================================
   CHECKBOX / RADIO SELECTION CARDS
   Generic styling for all Radio and Checkbox fields
   ========================================================= */


/* =========================================================
   FIELD GROUPS
   ========================================================= */

.sabaa-form .elementor-field-type-radio .elementor-field-subgroup,
.sabaa-form .elementor-field-type-checkbox .elementor-field-subgroup {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
}


/* =========================================================
   TWO-COLUMN RADIO / CHECKBOX GROUPS
   ========================================================= */

/* Existing Yes / No field */
.sabaa-form .elementor-field-group-is_flexible .elementor-field-subgroup {
    grid-template-columns: repeat(2, 1fr) !important;
}


/* =========================================================
   INDIVIDUAL OPTION
   ========================================================= */

.sabaa-form .elementor-field-type-radio .elementor-field-option,
.sabaa-form .elementor-field-type-checkbox .elementor-field-option {
    display: flex !important;
    align-items: center !important;

    width: 100% !important;
    min-width: 0 !important;

    height: 36px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid #D5D8DC !important;

    background: transparent !important;

    box-sizing: border-box !important;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease;
}


/* =========================================================
   CHECKBOX / RADIO INPUT
   ========================================================= */

.sabaa-form .elementor-field-type-radio .elementor-field-option input,
.sabaa-form .elementor-field-type-checkbox .elementor-field-option input {
    flex: 0 0 auto !important;

    width: 13px !important;
    height: 13px !important;

    margin: 0 7px 0 9px !important;

    padding: 0 !important;

    accent-color: #C8A24A !important;

    cursor: pointer;
}


/* =========================================================
   LABEL
   ========================================================= */

.sabaa-form .elementor-field-type-radio .elementor-field-option label,
.sabaa-form .elementor-field-type-checkbox .elementor-field-option label {
    display: flex !important;
    align-items: center !important;

    width: 100% !important;
    min-width: 0 !important;

    height: 34px !important;

    margin: 0 !important;
    padding: 0 8px 0 0 !important;

    border: 0 !important;

    background: transparent !important;

    color: #0B2345 !important;

    font-family: 'Inter', sans-serif !important;

    font-size: 12px !important;
    font-weight: 400 !important;

    line-height: 1.2 !important;

    cursor: pointer;

    box-sizing: border-box !important;
}


/* =========================================================
   HOVER
   ========================================================= */

.sabaa-form .elementor-field-type-radio .elementor-field-option:hover,
.sabaa-form .elementor-field-type-checkbox .elementor-field-option:hover {
    border-color: #C8A24A !important;

    background: rgba(200, 162, 74, 0.04) !important;
}


/* =========================================================
   SELECTED STATE
   ========================================================= */

.sabaa-form .elementor-field-type-radio .elementor-field-option:has(input:checked),
.sabaa-form .elementor-field-type-checkbox .elementor-field-option:has(input:checked) {
    border-color: #C8A24A !important;

    background: rgba(200, 162, 74, 0.06) !important;
}


/* =========================================================
   SELECTED LABEL
   ========================================================= */

.sabaa-form .elementor-field-type-radio .elementor-field-option input:checked + label,
.sabaa-form .elementor-field-type-checkbox .elementor-field-option input:checked + label {
    color: #0B2345 !important;
}

/* =========================================
   SABAA - DATE PICKER
   ========================================= */

.flatpickr-calendar {
    width: 280px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    border: 1px solid #D5D8DC !important;
    border-radius: 0 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}


/* =========================================
   MONTH / YEAR HEADER
   ========================================= */

.flatpickr-months {
    height: 42px !important;
    align-items: center !important;
}

.flatpickr-month {
    height: 42px !important;
}

.flatpickr-current-month {
    font-size: 15px !important;
    padding-top: 10px !important;
}

.flatpickr-current-month .cur-month {
    font-weight: 400 !important;
}

.flatpickr-current-month input.cur-year {
    font-size: 15px !important;
    font-weight: 400 !important;
}


/* Previous / Next buttons */

.flatpickr-prev-month,
.flatpickr-next-month {
    width: 34px !important;
    height: 42px !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
    width: 12px !important;
    height: 12px !important;
}


/* =========================================
   WEEKDAYS
   ========================================= */

.flatpickr-weekdays {
    height: 30px !important;
}

span.flatpickr-weekday {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #0B2345 !important;
}


/* =========================================
   DAYS
   ========================================= */

.flatpickr-days {
    width: 280px !important;
}

.dayContainer {
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;

    padding: 4px 6px 8px !important;
}

.flatpickr-day {
    width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;

    line-height: 36px !important;

    margin: 0 !important;

    font-size: 12px !important;
    color: #333333 !important;
}


/* Previous / next month days */

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #C9C9C9 !important;
}


/* Hover */

.flatpickr-day:hover {
    background: rgba(200, 162, 74, 0.10) !important;
    border-color: transparent !important;
}


/* Selected */

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: #C8A24A !important;
    border-color: #C8A24A !important;
    color: #FFFFFF !important;
}


/* Today */

.flatpickr-day.today {
    border-color: #0B2345 !important;
}

.flatpickr-day.today:hover {
    background: rgba(11, 35, 69, 0.08) !important;
    color: #0B2345 !important;
}


/* Disabled */

.flatpickr-day.disabled,
.flatpickr-day.disabled:hover {
    color: #D8D8D8 !important;
}

/* =========================================
   FLATPICKR - MONTH / YEAR HEADER FIX
   ========================================= */

.flatpickr-current-month {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 6px !important;

    width: auto !important;

    left: 50% !important;
    transform: translateX(-50%) !important;

    padding: 0 !important;
}

.flatpickr-current-month .cur-month {
    margin: 0 !important;
}

.flatpickr-current-month input.cur-year {
    width: 45px !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: center !important;

    font-size: 15px !important;
    line-height: 1 !important;
}

.flatpickr-current-month,
.flatpickr-current-month input.cur-year {
    font-size: 14px !important;
}

/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

    .flatpickr-calendar {
        width: 280px !important;
    }

    .flatpickr-days {
        width: 280px !important;
    }

    .dayContainer {
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
    }

    .flatpickr-day {
        width: 36px !important;
        max-width: 36px !important;
        height: 34px !important;
        line-height: 34px !important;
    }

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 767px) {
    .sabaa-form .sabaa-number-counter {
        height: 38px;
    }

    .sabaa-form :is(
        .elementor-field-group-purpose,
        .elementor-field-group-services,
        .elementor-field-group-accommodation,
        .elementor-field-group-budget,
        .elementor-field-group-contact,
        .elementor-field-group-is_flexible
    ) .elementor-field-subgroup {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 7px !important;
    }

    /* Keep Yes / No side-by-side. */
    .sabaa-form .elementor-field-group-is_flexible .elementor-field-subgroup {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .sabaa-form :is(
        .elementor-field-group-purpose,
        .elementor-field-group-services,
        .elementor-field-group-accommodation,
        .elementor-field-group-budget,
        .elementor-field-group-contact
    ) .elementor-field-subgroup {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 767px) {

    .sabaa-form
    .elementor-field-type-checkbox
    .elementor-field-subgroup,

    .sabaa-form
    .elementor-field-type-radio
    .elementor-field-subgroup {

        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }


    /* Elementor grid / inline groups */
    .sabaa-form
    .elementor-field-type-checkbox
    .elementor-subgroup-inline,

    .sabaa-form
    .elementor-field-type-radio
    .elementor-subgroup-inline {

        display: grid !important;

        grid-template-columns: 1fr !important;

        grid-auto-flow: row !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 8px !important;

        box-sizing: border-box !important;
    }


    /* Individual options */
    .sabaa-form
    .elementor-field-type-checkbox
    .elementor-field-option,

    .sabaa-form
    .elementor-field-type-radio
    .elementor-field-option {

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        box-sizing: border-box !important;
    }


    /* Inputs */
    .sabaa-form
    .elementor-field-type-checkbox
    .elementor-field-option input,

    .sabaa-form
    .elementor-field-type-radio
    .elementor-field-option input {

        flex: 0 0 auto !important;
        margin-right: 6px !important;
    }

}