/*
 * One Movement Inc.
 * Public Applicant Form - Phase 1 UX
 * OLD BOOTSTRAP-STYLE LAYOUT PRESERVED
 */

/*
 * Keep the existing Bootstrap row/column design.
 * Only improve the DOB controls and mobile reliability.
 */

.omi-dob,
.omi-beneficiary-dob {
    width: 100%;
    min-width: 0;
    margin-bottom: 1rem;
}

.omi-dob-grid {
    display: grid;
    grid-template-columns:
        minmax(150px, 1.35fr)
        minmax(90px, .7fr)
        minmax(115px, .9fr);
    gap: 10px;
    width: 100%;
    min-width: 0;
}

/*
 * The beneficiary DOB sits inside a narrower Bootstrap column.
 * Use compact flexible widths so the year never enters Gender.
 */
.beneficiary-item .omi-beneficiary-dob .omi-dob-grid {
    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(70px, .62fr)
        minmax(84px, .75fr);
    gap: 8px;
}

.beneficiary-item .row > [class*="col-"] {
    min-width: 0;
}

.omi-dob-grid .form-control,
.omi-dob-grid select,
.omi-dob-grid input {
    width: 100%;
    min-width: 0;
    min-height: 54px;
}

.omi-birth-year {
    appearance: textfield;
    -moz-appearance: textfield;
}

.omi-birth-year::-webkit-inner-spin-button,
.omi-birth-year::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.omi-hidden-model-field {
    margin: 0 !important;
    min-height: 0 !important;
}

.omi-hidden-model-field input[type="hidden"] {
    display: none !important;
}

.omi-hidden-model-field .help-block,
.omi-hidden-model-field .invalid-feedback {
    display: block;
    margin-top: 6px;
}

.applicant-form input[type="email"] {
    text-transform: none !important;
}

.applicant-form select.form-control {
    min-height: 54px;
}

.applicant-form .select2-container {
    width: 100% !important;
}

/*
 * Existing Select2 / DepDrop dropdowns should appear above
 * accordion/card content instead of behind it.
 */
.select2-container--open,
.select2-dropdown {
    z-index: 99999 !important;
}

.application-accordion,
.application-accordion .accordion-item,
.application-accordion .accordion-collapse,
.application-accordion .accordion-body {
    overflow: visible;
}

.beneficiary-item .card-header {
    gap: 12px;
}

.beneficiary-item .remove-item {
    flex: 0 0 auto;
    min-width: 42px;
    min-height: 38px;
}

/*
 * Tablet
 */
@media (max-width: 991.98px) {
    .omi-dob-grid {
        grid-template-columns:
            minmax(140px, 1.25fr)
            minmax(86px, .7fr)
            minmax(110px, .9fr);
    }

    .beneficiary-item .omi-beneficiary-dob .omi-dob-grid {
        grid-template-columns:
            minmax(0, 1.25fr)
            minmax(70px, .62fr)
            minmax(84px, .75fr);
    }
}

/*
 * Phone
 *
 * Keep the Bootstrap form look.
 * Fields remain full width only where the existing col-12 rules
 * already make them full width.
 */
@media (max-width: 767.98px) {
    .applicant-form-page {
        overflow-x: hidden;
    }

    .application-accordion .accordion-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    .application-accordion .accordion-button {
        padding-left: 16px;
        padding-right: 16px;
    }

    .omi-dob-grid,
    .beneficiary-item .omi-beneficiary-dob .omi-dob-grid {
        grid-template-columns:
            minmax(0, 1.25fr)
            minmax(80px, .7fr)
            minmax(100px, .9fr);
        gap: 8px;
    }

    .step-actions .btn {
        min-height: 48px;
    }

    .beneficiary-item .card-body {
        padding-left: 14px;
        padding-right: 14px;
    }

    .dynamicform_wrapper > .card > .card-header {
        align-items: center !important;
        gap: 10px;
        flex-wrap: wrap;
    }
}

/*
 * Very small phones:
 * keep Month + Day beside each other,
 * move Year below so it never overlaps.
 */
@media (max-width: 420px) {
    .omi-dob-grid,
    .beneficiary-item .omi-beneficiary-dob .omi-dob-grid {
        grid-template-columns:
            minmax(0, 1.3fr)
            minmax(82px, .7fr);
    }

    .omi-dob-grid .omi-birth-year {
        grid-column: 1 / -1;
    }
}