/* Keep dropdown visible and set header color */
.header {
    overflow: visible;
    background-color: #274549;
}
    /* Center the logo horizontally while keeping the nav on the right */
    .header .logo {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }

.header-nav .nav-profile {
    color: aliceblue;
}

/* iOS Safari: remove focus ring around language toggle */
@supports (-webkit-touch-callout: none) {
    #langToggle {
        -webkit-tap-highlight-color: transparent;
    }

        #langToggle:focus,
        #langToggle:focus-visible,
        #langToggle:active,
        .lang-dd .dropdown-toggle:focus,
        .lang-dd .dropdown-toggle:focus-visible,
        .lang-dd .dropdown-toggle:active {
            outline: none !important;
            box-shadow: none !important;
            border-color: transparent !important;
        }
}

.signature-canvas {
    border: 1px solid #ccc;
    border-radius: 12px;
    background: #fff;
    width: 100%;
    max-width: 500px;
    min-width: 220px;
    height: 180px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    touch-action: none;
}

@media (max-width: 768px) {
    .signature-canvas {
        max-width: 100%;
        min-width: 160px;
        height: 100px;
    }
}

/* Upload button/status */
.custom-file-upload {
    display: flex;
    align-items: center;
}

#fileLabel {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
}

#fileStatus {
    font-style: italic;
    font-size: 0.9rem;
}

/* Optional custom modal size (opt-in) */
.modal-xl-custom {
    max-width: 50vw;
    min-width: 500px;
}

/* REMOVE global modal-content min-height (was causing issues) */
/* .modal-content { min-height: 450px; } */

/* REMOVE dangerous global override on flex utilities */
/* .d-flex.align-items-center.justify-content-center { min-height: 10px; } */

/* Scope input radius to this page's form only */
#registerForm .form-control,
#registerForm .form-select {
    border-radius: 8px;
}

/* Card title styling only for this page */
#registerForm .card-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.mandatory-field {
    color: red !important;
}

/* Avoid centering all modal titles globally */
/* .modal-title { text-align: center; } */

/* Icons */
.card-success-icon {
    z-index: 2;
    pointer-events: none;
}

.responsive-check-icon {
    font-size: clamp(1.25rem, 2vw + 0.25rem, 2.5rem);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.2));
}

.file-item {
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 8px;
}

/* Scope progress height to wizard modals only */
#frontModal .progress,
#backModal .progress,
#selfieModal .progress {
    height: 10px;
}

/* Result modal responsive grid */
.result-grid {
    display: grid;
    grid-template-columns: 1fr; /* mobile */
    gap: 12px;
    align-items: start;
}

    .result-grid .result-item .result-box {
        background: #f8f9fa;
        border: 1px solid #eee;
        border-radius: 8px;
        padding: 8px;
        aspect-ratio: 4 / 3;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .result-grid .result-item img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

@media (min-width: 992px) {
    .result-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

        .result-grid.two-items {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
}

/* Card polish scoped to this page only */
#registerForm .card {
    border: 1px solid rgba(0,0,0,.06);
    border-radius: .75rem;
    box-shadow: 0 6px 20px rgba(0,0,0,.04);
}

@media (max-width: 576px) {
    #registerForm .card-body {
        padding: 1rem;
    }

    #registerForm .btn {
        border-radius: .6rem;
    }
}

/* Labels stack on mobile; align better on desktop */
#registerForm .form-row-vertical .col-form-label {
    margin-bottom: .25rem;
}

/* Responsive input cluster for Phone with verify button + state */
#registerForm .input-split {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

    #registerForm .input-split .flex-1 {
        flex: 1 1 260px;
        min-width: 220px;
    }

#PhoneVerifyState {
    min-width: 1.75rem;
    min-height: 1.75rem;
    align-items: center;
    justify-content: flex-start;
}

/* Buttons go full width on mobile, natural on >= sm */
.btn-responsive {
    width: 100%;
}

@media (min-width: 576px) {
    .btn-responsive {
        width: auto;
    }
}

/* Result images fit container */
#resultImages .result-box img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Avoid site-wide title alignment overrides */
/* .pagetitle h1 { ... } */

/* Wizard modal footers: keep action buttons inline on all sizes */
#frontModal .modal-footer,
#backModal .modal-footer,
#selfieModal .modal-footer {
    display: flex !important; /* override d-grid on mobile */
    flex-direction: row;
    flex-wrap: nowrap; /* prevent stacking */
    gap: .5rem;
    justify-content: flex-end; /* align to the right like Bootstrap default */
}

    /* In modal footers, don't stretch buttons full width */
    #frontModal .modal-footer .btn-responsive,
    #backModal .modal-footer .btn-responsive,
    #selfieModal .modal-footer .btn-responsive {
        width: auto;
    }

    /* Keep button labels on a single line */
    #frontModal .modal-footer .btn,
    #backModal .modal-footer .btn,
    #selfieModal .modal-footer .btn {
        white-space: nowrap;
    }

/* Center the dialog reliably without vw */
.capture-modal .modal-dialog {
    max-width: 520px; /* your desired cap */
    width: min(calc(100% - 2rem), 520px); /* fill viewport minus margins */
    margin: var(--bs-modal-margin, .5rem) auto; /* horizontal center */
}

@media (min-width: 576px) {
    .capture-modal .modal-dialog {
        max-width: 560px;
        width: min(calc(100% - 2rem), 560px);
    }
}

/* Utility: fully justify long-form text */
.text-justify {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}

/* SweetAlert2 OTP input: shorter and centered */
.swal2-popup .swal2-input.phone-input.form-control {
    width: 100%;
    max-width: 350px; /* adjust (e.g., 260–320px) to your preference */
    margin-left: auto;
    margin-right: auto;
    text-align: center; /* nicer for 6-digit codes */
}

/* Keep Bootstrap look without extra spacing from SweetAlert2 */
.swal2-popup .swal2-input.form-control {
    margin: 0;
}

/* Uniform typography for inputs and selects in this form */
#registerForm .form-control,
#registerForm .form-select {
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 400;
}

/* Native select: match .form-control height */
#registerForm .form-select {
    height: auto; /* allow calc-based height */
    min-height: calc(1.5em + .75rem + 2px);
    padding-top: .375rem;
    padding-bottom: .375rem;
    /* keep arrow space but not excessive */
    padding-right: calc(.75rem + 1.25rem);
    background-position: right .75rem center;
}

/* Choices.js single-select: match .form-control height */
#registerForm .choices[data-type*="select-one"] .choices__inner {
    padding: .375rem .75rem;
    min-height: calc(1.5em + .75rem + 2px);
    line-height: 1.5;
    font-size: 1rem;
    font-weight: 400;
}

/* Caret position for Choices.js to align with native select */
#registerForm .choices[data-type*="select-one"]::after {
    right: .75rem;
}

/* Selected item line-height to avoid extra height */
#registerForm .choices__list--single .choices__item {
    line-height: 1.5;
    font-size: 1rem;
    font-weight: 400;
}

/* Placeholder color (unchanged), keep consistent look */
#registerForm .choices__placeholder {
    color: rgba(39,69,73,.6);
    opacity: 1;
}

/* Keep Choices wrapper full width and rounded like inputs */
#registerForm .choices {
    width: 100%;
}

#registerForm .choices__inner {
    border-radius: 8px;
}

/* Keep page title in a single line on all screens */
.pagetitle {
    min-width: 0;
}
    /* allow ellipsis in flex/grid layouts */
    .pagetitle h1.one-line-title,
    .pagetitle h2.one-line-title
    .pagetitle h3.one-line-title {
        display: block;
        width: 100%;
        white-space: nowrap; /* never wrap */
        overflow: hidden; /* hide overflow */
        /*text-overflow: ellipsis;*/ /* show ... when too long */
        font-weight: 500;
    }

.btn:focus:not(:focus-visible) {
    box-shadow: none !important;
    outline: 0 !important;
}

/* Keep phone input, verify button and state on one line across all screens */
.input-split {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: nowrap; /* never wrap */
}

    .input-split .form-control {
        flex: 1 1 auto;
        min-width: 0; /* allow shrink without overflow */
    }

#PhoneVerifyBtn,
#PhoneVerifyState {
    flex: 0 0 auto; /* keep them fixed, side-by-side */
    white-space: nowrap; /* prevent line break inside */
}

/* Terms modal: ensure .modal-body is the only scroll container and is mobile-friendly */
#termsModal .modal-body {
    max-height: 70vh; /* keeps header/footer visible */
    overflow-y: auto; /* show scrollbar when needed */
    -webkit-overflow-scrolling: touch; /* momentum scroll on iOS */
    overscroll-behavior: contain; /* prevent background scroll chaining */
    touch-action: pan-y; /* allow vertical panning */
}

/* Remove nested scrolling from inner content */
#termsModal #termsContent {
    max-height: unset !important;
    overflow: visible !important;
}

/* Slightly reduce margins on very small screens to maximize height */
@media (max-width: 576px) {
    #termsModal .modal-dialog {
        margin: 0.5rem;
    }
}

/* Ensure readable text for Phone Verify button */
#registerForm #PhoneVerifyBtn.btn-primary,
#registerForm #PhoneVerifyBtn.btn-primary:disabled {
    color: #fff !important;
}

#registerForm #PhoneVerifyBtn.btn-danger,
#registerForm #PhoneVerifyBtn.btn-danger:disabled {
    color: #fff !important;
}

#registerForm #Gender .form-check-inline {
    margin-right: .75rem;
}

#registerForm #Gender-Error {
    display: block;
    margin-top: .25rem;
}

/* OTP modal mobile-friendly */
#otpModal .modal-body {
    overflow-y: auto;
}

@supports (height: 100dvh) {
    #otpModal .modal-content {
        max-height: 90dvh;
    }
}

/* Language dropdown fit to content */
.header-nav .lang-dd .dropdown-toggle {
    width: auto !important;
    white-space: nowrap;
}

.header-nav .lang-dd .dropdown-menu {
    min-width: unset !important; /* bỏ min-width 10rem của Bootstrap */
    width: max-content; /* khớp theo item dài nhất */
    max-width: 90vw; /* tránh tràn màn hình nhỏ */
    white-space: nowrap;
}

/* Full-screen loading overlay for submit */
.page-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000; /* above Bootstrap modals */
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
    cursor: wait;
}

    .page-loading-overlay .spinner-border {
        width: 3rem;
        height: 3rem;
    }

.commitment-content {
    min-height: 300px;
    max-height: 40vh;
    overflow: auto;
}

    .commitment-content b,
    .commitment-content strong {
        font-weight: 600 !important;
    }

commitment-text {
    font-size: revert !important;
}

/* Justify nội dung DOCX trong popup ký */
#signatureModal [data-role="sigdoc-content"] {
    text-align: justify; /* canh lề đều 2 bên */
    text-justify: inter-word; /* hint cho engine hỗ trợ */
}
    /* Dãn dòng và khoảng cách đoạn cho dễ đọc */
    #signatureModal [data-role="sigdoc-content"] p {
        margin-bottom: .75rem;
        line-height: 1.6;
    }
    /* Ảnh (chữ ký…) scale gọn và căn giữa */
    #signatureModal [data-role="sigdoc-content"] img {
        display: block;
        margin: .25rem auto;
        max-width: 100%;
        height: auto;
    }


/* Add after existing styles */

/* Choices.js customization for better UX */
.choices {
    margin-bottom: 0;
    font-size: inherit;
}

.choices__inner {
    min-height: 38px;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    background-color: #fff;
}

    .choices__inner:focus {
        border-color: #86b7fe;
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }

.choices__list--dropdown {
    z-index: 1050; /* Above modals */
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 0.25rem;
}

    .choices__list--dropdown .choices__item--selectable {
        padding: 0.5rem 1rem;
    }

        .choices__list--dropdown .choices__item--selectable.is-highlighted {
            background-color: #0d6efd;
            color: #fff;
        }

.choices[data-type*=select-one] .choices__inner {
    padding-bottom: 0.375rem;
}

.choices__input {
    background-color: transparent;
    margin-bottom: 0;
    padding: 0;
}

/* Loading state */
.choices.is-loading .choices__inner::after {
    content: '';
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-left: 0.5rem;
    border: 2px solid #dee2e6;
    border-top-color: #0d6efd;
    border-radius: 50%;
    animation: choices-spinner 0.6s linear infinite;
}

@keyframes choices-spinner {
    to {
        transform: rotate(360deg);
    }
}

/* ✅ FIX: Text color for dropdown items - STRONGER OVERRIDE */
.choices__list--dropdown .choices__item {
    color: #212529 !important; /* Force black text */
}

.choices__list--dropdown .choices__item--selectable {
    color: #212529 !important; /* Force black text */
    background-color: #fff; /* White background by default */
}

    /* ✅ Highlighted item (hover/keyboard navigation) */
    .choices__list--dropdown .choices__item--selectable.is-highlighted {
        background-color: #E1B7A7 !important;
        color: #ffffff !important; /* White text when highlighted */
    }

    /* ✅ Selected item trong dropdown - MUST be black */
    .choices__list--dropdown .choices__item--selectable.is-selected {
        background-color: #e9ecef !important; /* Light gray background */
        color: #212529 !important; /* BLACK text - force override */
        font-weight: 500; /* Slightly bold */
    }

        /* ✅ Khi hover vào selected item - turn blue with white text */
        .choices__list--dropdown .choices__item--selectable.is-selected:hover,
        .choices__list--dropdown .choices__item--selectable.is-selected.is-highlighted {
            background-color: #E1B7A7 !important;
            color: #ffffff !important; /* White when highlighted */
        }

    /* ✅ Disable item - gray out */
    .choices__list--dropdown .choices__item--selectable.is-disabled {
        color: #6c757d !important;
        background-color: #f8f9fa !important;
        cursor: not-allowed;
    }

/* Search input text color */
.choices__input {
    color: #212529 !important;
}

/* Selected value in the main control (not dropdown) */
.choices__list--single .choices__item {
    color: #212529 !important;
}

.choices__list--multiple .choices__item {
    color: #212529 !important;
}

/* Income Document Types - Full width justified layout */
/*#incomeDocumentTypes .form-check {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

#incomeDocumentTypes .form-check-input {
    flex-shrink: 0;
    margin-top: 0.25rem;
    margin-right: 0.75rem;
}

#incomeDocumentTypes .form-check-label {
    flex: 1;
    text-align: justify;
    text-justify: inter-word;
    line-height: 1.5;
    word-wrap: break-word;
    hyphens: auto;
}*/

/* Alternative: Distribute text evenly across full width */
/*@supports (text-align: justify) {
    #incomeDocumentTypes .form-check-label {
        text-align-last: left;*/ /* Dòng cuối căn trái */
/*}
}*/

/* Responsive adjustments */
/*@media (max-width: 576px) {
    #incomeDocumentTypes .form-check-label {
        font-size: 0.9rem;
    }
}*/

/* Income Documents Notes - Bold, larger text with spacing */
.income-note-highlight {
    font-weight: 550 !important;
    font-size: 0.9rem !important;
    margin-top: 0rem !important;
    line-height: 1.5 !important;
    color: #274549;
}

/* Underline for "certified" text */
.income-note-underline {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Guide Image Slider Styles */
.guide-image-slider-container {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.guide-slide {
    transition: opacity 0.5s ease-in-out;
}

.slider-dot {
    transition: all 0.3s ease;
}

    .slider-dot.active {
        width: 12px !important;
        background: #274549 !important;
    }

.slider-btn {
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

    .slider-btn:hover {
        transform: scale(1.1);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    }

    .slider-btn:active {
        transform: scale(0.95);
    }

/* Responsive adjustments */
@media (max-width: 576px) {
    .slider-btn {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }

    .slider-dot {
        width: 8px !important;
        height: 8px !important;
    }

        .slider-dot.active {
            width: 10px !important;
        }
}