/* =====================================================
   ActivateAccessCode.aspx — Page-specific styles
   ENH_119052
   ===================================================== */

/* ─── Design tokens ────────────────────────────────────
   Change a colour here and it updates everywhere on
   this page. Do NOT edit style.css for page-specific
   colours — use these variables instead.
   ───────────────────────────────────────────────────── */
:root {
    --ac-color-primary:          #2563EB; /* blue — active step, buttons, links */
    --ac-color-primary-hover:    #1d4ed8; /* blue hover */
    --ac-color-primary-active:   #1e40af; /* blue pressed */
    --ac-color-primary-disabled: #93c5fd; /* blue disabled */
    --ac-color-success:          #28a745; /* green — done step, valid label */
    --ac-color-danger:           #dc3545; /* red — errors, delete button */
    --ac-color-text-dark:        #212529; /* body text, back button text */
    --ac-color-text-muted:       #6c757d; /* inactive step labels, countdown */
    --ac-color-border:           #ced4da; /* input borders, back button border */
    --ac-color-border-light:     #dee2e6; /* dividers */
    --ac-color-bg-light:         #f8f9fa; /* hover bg on back button, password box */
}

/* ─── Page shell ────────────────────────────────────── */

/* Sticky footer: make .app-container the flex column so .app-footer sticks to the bottom without dead white space. */
.app-container:has(.page-activate-access-code) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Content area grows to fill remaining space */
.page-activate-access-code {
    flex: 1 1 auto;
    min-height: auto;
    display: flex;
    flex-direction: column;
}

/* ─── Header ────────────────────────────────────────── */

.login-shared-header,
.activate-header {
    padding: 0.5rem 1.5rem;
    background: #ffffff;
    border-bottom: 1px solid var(--ac-color-border);
}


/* Globe icon inside selectpicker button */
.login-shared-header .bootstrap-select .fa-globe,
.activate-header .bootstrap-select .fa-globe {
    display: inline-block;
    margin-right: 0.35rem;
    font-size: 1em;
    color: var(--ac-color-text-dark);
}
/* Hide globe inside open dropdown items */
.login-shared-header .bootstrap-select .dropdown-menu .fa-globe,
.activate-header .bootstrap-select .dropdown-menu .fa-globe {
    display: none;
}
/* Match dropdown menu width to button */
.login-shared-header .bootstrap-select .dropdown-menu,
.activate-header .bootstrap-select .dropdown-menu {
    min-width: 100% !important;
    width: 100% !important;
}

.login-shared-header .bootstrap-select > .btn,
.login-shared-header .bootstrap-select > .dropdown-toggle,
.activate-header .bootstrap-select > .btn,
.activate-header .bootstrap-select > .dropdown-toggle {
    background-color: #ffffff;
    border: 1px solid var(--ac-color-border);
    color: var(--ac-color-text-dark);
    border-radius: 20px;
    box-shadow: none;
    font-size: 0.85rem;
    padding: 0.25rem 0.75rem;
}

.login-shared-header .bootstrap-select > .btn:focus,
.login-shared-header .bootstrap-select > .dropdown-toggle:focus,
.activate-header .bootstrap-select > .btn:focus,
.activate-header .bootstrap-select > .dropdown-toggle:focus {
    box-shadow: none;
    outline: none;
}

/* ─── Banner ─────────────────────────────────────────── */

.activate-banner {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    text-align: center;
    padding: 1.5rem 1rem;
}

.activate-banner h2 {
    font-weight: 700;
    margin-bottom: 0.5rem;
    font-size: 1.4rem;
}

.activate-banner p {
    opacity: 0.9;
    margin: 0;
    font-size: 0.9rem;
}

/* ─── Stepper ────────────────────────────────────────── */

.activate-stepper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1.25rem 1rem 0.75rem;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
}

.step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--ac-color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--ac-color-text-muted);
    background: #ffffff;
    font-size: 0.95rem;
}

.step.active .step-circle {
    background: var(--ac-color-primary);
    border-color: var(--ac-color-primary);
    color: #ffffff;
}

.step.done .step-circle {
    background: var(--ac-color-success);
    border-color: var(--ac-color-success);
    color: #ffffff;
}

.step-label {
    font-size: 0.8rem;
    color: var(--ac-color-text-muted);
    margin-top: 0.4rem;
    text-align: center;
    line-height: 1.3;
}

.step.active .step-label {
    color: var(--ac-color-primary);
    font-weight: 600;
}

.step.done .step-label {
    color: var(--ac-color-success);
    font-weight: 600;
}

.step-line {
    flex: 1;
    height: 2px;
    background: var(--ac-color-border);
    margin: 0 0.5rem;
    margin-top: 20px; /* vertically centres line with circle */
    align-self: flex-start;
    min-width: 60px;
}

.step-line.done {
    background: var(--ac-color-success);
}

/* Divider between stepper and step content */
.activate-stepper-divider {
    border: none;
    border-top: 1px solid var(--ac-color-border-light);
    max-width: 760px;
    margin: 0 auto 1.5rem;
}

/* ─── Step content container ────────────────────────── */

.activate-step-content {
    width: 100%;
    min-width: 320px;
    max-width: 760px;
    margin: 0 auto;
    padding: 0 1.5rem 3rem;
}

.activate-step-content > p {
    margin-bottom: 1.75rem;
}

.activate-step-content a {
    color: var(--ac-color-primary);
}

/* "here" link in instruction paragraph is underlined per design */
.activate-step-content > p a {
    text-decoration: underline;
}

/* ─── Action buttons ─────────────────────────────────── */

/* Shared radius + transition — overrides style.css `border-radius: 20px !important`
   on .btn-primary / .btn-secondary without scattering !important across every rule */
.activate-actions .btn-back,
.activate-actions .btn-continue,
#acBtnStep2Continue,
#acBtnVerifyOtp,
#acSuccessOkBtn {
    border-radius: 8px !important;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Action buttons row */
.activate-actions {
    display: flex;
    flex-wrap: nowrap;
    margin-top: 2rem;
}

/* Back button (outline style — same across all steps via .btn-back class) */
.activate-actions .btn-back {
    flex: 1;
    min-width: 0;
    padding: 0.6rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ac-color-text-dark);
    border-color: var(--ac-color-border);
    margin-right: 1rem;
}

.activate-actions .btn-back:hover  { background-color: var(--ac-color-bg-light); }
.activate-actions .btn-back:active { background-color: #e2e6ea; border-color: var(--ac-color-border); }

/* Continue button — Step 1 (uses .btn-continue class) */
.activate-actions .btn-continue {
    flex: 1;
    min-width: 0;
    padding: 0.6rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    background-color: var(--ac-color-primary);
    border-color: var(--ac-color-primary);
    color: #ffffff;
}

.activate-actions .btn-continue:hover    { background-color: var(--ac-color-primary-hover)    !important; border-color: var(--ac-color-primary-hover)    !important; }
.activate-actions .btn-continue:active   { background-color: var(--ac-color-primary-active)   !important; border-color: var(--ac-color-primary-active)   !important; }
.activate-actions .btn-continue:disabled { background-color: var(--ac-color-primary-disabled) !important; border-color: var(--ac-color-primary-disabled) !important; cursor: not-allowed; }

/* ─── Access code input rows ─────────────────────────── */

/* Mobile-first: label full-width on top, then inputs + delete icon on same row */
.code-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}

.code-row-label  { flex: 0 0 100%; padding-top: 0; margin-bottom: 0.5rem; }
.code-row-inputs { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 0.75rem; }
.access-code-error { flex: 0 0 100%; margin-top: 0.5rem; overflow: hidden; }
.code-row-delete { flex: 0 0 auto; align-self: center; margin-top: 0; }

/* Desktop grid — restores 130px label / 440px OTP / delete icon layout */
@media (min-width: 576px) {
    .code-row {
        display: grid;
        grid-template-columns: 130px 1fr;
        grid-template-rows: auto auto;
        align-items: start;
    }
    .code-row-label  { grid-column: 1; grid-row: 1 / 3; padding-top: 0.75rem; margin-bottom: 0; }
    .code-row-inputs { grid-column: 2; grid-row: 1; }
    .access-code-error { grid-column: 2; grid-row: 2; }
}

/* Valid label */
.code-valid-text {
    color: var(--ac-color-success);
    font-size: 0.85rem;
    font-weight: 700;
    display: block;
    margin-top: 0.2rem;
}

/* Delete row button */
.btn-delete-code {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ac-color-danger);
    border: none;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.btn-delete-code i {
    font-size: 0.75rem;
}

/* Add another code button */
.btn-add-code {
    border: 1px solid var(--ac-color-primary);
    color: var(--ac-color-primary);
    background: transparent;
    border-radius: 6px;
    padding: 0.3rem 0.75rem;
    font-size: 0.85rem;
    cursor: pointer;
}

.btn-add-code:hover {
    background: #eff6ff;
}

/* ─── Step 2 — Create Account ────────────────────────── */

/* Inline field error messages under each input */
.ac-field-error {
    color: var(--ac-color-danger);
    font-size: 0.82rem;
    margin-top: 0.25rem;
}

/* Password requirements info box */
.ac-password-requirements {
    background-color: var(--ac-color-bg-light);
    font-size: 0.85rem;
    line-height: 1.6;
}

.ac-password-requirements li {
    color: #495057;
}

/* Continue (Step 2) and Verify (Step 3) buttons — flex sizing and colour.
   btn-continue class was removed to prevent the Step 1 .btn-continue delegated
   click handler from firing on these buttons, so sizing is declared explicitly. */
#acBtnStep2Continue,
#acBtnVerifyOtp {
    flex: 1;
    padding: 0.6rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    background-color: var(--ac-color-primary);
    border-color: var(--ac-color-primary);
    color: #ffffff;
}

#acBtnStep2Continue:hover  { background-color: var(--ac-color-primary-hover);  border-color: var(--ac-color-primary-hover); }
#acBtnStep2Continue:active { background-color: var(--ac-color-primary-active); border-color: var(--ac-color-primary-active); }

/* ─── Step 3 — Verify Email ──────────────────────────── */

/* OTP input boxes */
.otp-boxes {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
}

.otp-box {
    flex: 1 1 0;
    min-width: 0;
    width: 48px;
    max-width: 56px;
    height: 56px;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 600;
    border: 1px solid var(--ac-color-border);
    border-radius: 8px;
    text-transform: uppercase;
    transition: border-color 0.15s ease;
    margin-right: 0.5rem;
}

.otp-box:last-child {
    margin-right: 0;
}

.otp-box:focus {
    border-color: var(--ac-color-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.otp-box.error {
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
    background-color: #fff8f8;
}

/* Verify button hover/active — base styles merged into the #acBtnStep2Continue rule above */
#acBtnVerifyOtp:hover  { background-color: var(--ac-color-primary-hover);  border-color: var(--ac-color-primary-hover); }
#acBtnVerifyOtp:active { background-color: var(--ac-color-primary-active); border-color: var(--ac-color-primary-active); }

/* Resend button — matches timer font; disabled state makes it visually unavailable */
#acResendLink {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--ac-color-primary);
    text-decoration: none;
    border: none;
    background: none;
    transition: color 0.2s;
}
#acResendLink:hover:not(:disabled) {
    text-decoration: underline;
    color: var(--ac-color-primary-hover);
}
#acResendLink:disabled {
    color: var(--ac-color-text-muted);
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: auto; /* keep cursor visible even when disabled */
}

/* Resend countdown text */
#acResendCountdown {
    color: var(--ac-color-text-muted);
    font-size: 0.875rem;
}

/* ─── Success modal ───────────────────────────────────── */
#acSuccessModal .modal-content {
    border-radius: 12px !important;
    border: none;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

#acSuccessModal .modal-content .modal-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid var(--ac-color-border-light) !important;
    border-radius: 12px 12px 0 0;
    padding: 1rem 1.25rem;
}

#acSuccessOkBtn {
    background-color: var(--ac-color-primary);
    border-color: var(--ac-color-primary);
    border-radius: 8px !important;
    padding: 0.65rem 1rem;
    font-weight: 600;
    font-size: 1rem;
    color: #ffffff;
}

#acSuccessOkBtn:hover  { background-color: var(--ac-color-primary-hover)  !important; border-color: var(--ac-color-primary-hover)  !important; }
#acSuccessOkBtn:active { background-color: var(--ac-color-primary-active) !important; border-color: var(--ac-color-primary-active) !important; }

/* Request submitted success modal */

#acReqSuccessModal .modal-content {
    border-radius: 12px !important;
    border: none;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

#acReqSuccessModal .modal-content .modal-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid var(--ac-color-border-light) !important;
    border-radius: 12px 12px 0 0;
    padding: 1rem 1.25rem;
}

#acReqSuccessModal .modal-footer {
    border-top: none;
    padding: 1rem 1.5rem 1.25rem;
}

#acReqSuccessOkBtn {
    background-color: var(--ac-color-primary);
    border-color: var(--ac-color-primary);
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
}

#acReqSuccessOkBtn:hover  { background-color: var(--ac-color-primary-hover);  border-color: var(--ac-color-primary-hover); }
#acReqSuccessOkBtn:active { background-color: var(--ac-color-primary-active); border-color: var(--ac-color-primary-active); }

/* ─── Error banners ──────────────────────────────────── */

/* Override global .alert-danger left-border style for the OTP error banners.
   Clean inline style: subtle red bg, small rounded corners, no thick left border. */
#acStep2ErrorBanner,
#acStep3ErrorBanner {
    border: 1px solid #f5c6cb;
    border-left: 3px solid #dc3545;
    border-radius: 6px;
    background-color: #fff5f5;
    color: #842029;
    font-size: 0.9rem;
    padding: 0.6rem 0.9rem;
    box-shadow: none;
    animation: none;
}

/* Step 3 banner only */
#acStep3ErrorBanner {
    max-width: 328px;
    margin-left: auto;
    margin-right: auto;
}

/* ─── Request Access Code modal ──────────────────────── */

/* style.css:977 sets .modal .modal-dialog .modal-content { border-radius: 0 } (specificity 030).
   Use ID + class to get specificity 110 and win without touching the global file. */
#acReqAccessModal .modal-content {
    border-radius: 20px !important;
    border: none;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.modal-req-access-code .modal-body {
    max-height: 65vh;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
}

.modal-req-access-code .form-control {
    border-radius: 8px;
}

/* style.css:981 sets .modal .modal-dialog .modal-content .modal-header { background-color: #e9ecef }
   (specificity 040). ID scoping gives us 110 — wins cleanly. */
#acReqAccessModal .modal-content .modal-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid var(--ac-color-border-light) !important;
    border-radius: 20px 20px 0 0;
    padding: 1.1rem 1.5rem;
}

.modal-req-access-code .modal-title {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--ac-color-text-dark);
}

.modal-req-access-code .col-form-label {
    font-weight: 600;
    color: var(--ac-color-text-dark);
    font-size: 0.9rem;
    padding-bottom: 0.25rem;
}

.modal-req-access-code .modal-body .custom-control {
    margin-top: 1rem;
    padding-bottom: 0.5rem;
}

.modal-req-access-code .modal-footer {
    border-top: 1px solid var(--ac-color-border-light);
    padding: 1rem 1.5rem;
}

.ac-modal-btn-cancel,
.ac-modal-btn-submit {
    border-radius: 10px !important;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    font-size: 1rem;
}

.ac-modal-btn-cancel {
    color: var(--ac-color-text-dark);
    border-color: var(--ac-color-border);
}

.ac-modal-btn-cancel:hover {
    background-color: var(--ac-color-bg-light);
}

.ac-modal-btn-submit {
    background-color: var(--ac-color-primary);
    border-color: var(--ac-color-primary);
    color: #ffffff;
}

.ac-modal-btn-submit:hover {
    background-color: var(--ac-color-primary-hover) !important;
    border-color: var(--ac-color-primary-hover) !important;
    color: #ffffff !important;
}

.ac-modal-btn-submit:active,
.ac-modal-btn-submit:focus,
.modal-req-access-code .btn-submit:active,
.modal-req-access-code .btn-submit:focus,
.modal-req-access-code .btn.btn-primary:active,
.modal-req-access-code .btn.btn-primary:focus {
    background-color: var(--ac-color-primary-active) !important;
    border-color: var(--ac-color-primary-active) !important;
    color: #ffffff !important;
    outline: none;
    box-shadow: none;
}

/* ─── FormID 4 country select ────────────────────────── */

/* Remove native OS chrome and apply consistent Bootstrap 4 caret arrow */
.ac-fid4 #ac_selCountryF4 {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23495057' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px;
    padding-right: 2rem;
    cursor: pointer;
}

/* ─── Responsive ─────────────────────────────────────── */

/* Medium breakpoint (576–767px) — moderate banner reduction + OTP sizing */
@media (min-width: 576px) and (max-width: 767.98px) {
    .activate-banner    { padding: 1rem; }
    .activate-banner h2 { font-size: 1.25rem; }
    .otp-box { width: 40px; height: 50px; font-size: 1.1rem; margin-right: 0.4rem; }
    #acStep3ErrorBanner { max-width: 276px; }
}

/* Mobile */
@media (max-width: 575.98px) {
    .activate-banner          { padding: 0.75rem 1rem; }
    .activate-banner h2       { font-size: 1.1rem; margin-bottom: 0.25rem; }
    .activate-banner p        { font-size: 0.8rem; }
    .otp-box                  { width: 36px; height: 44px; font-size: 1rem; border-radius: 6px; margin-right: 0.3rem; }
    #acStep3ErrorBanner       { max-width: 241px; }
    .activate-step-content    { padding: 0 1rem 2rem; }
    .activate-stepper         { padding: 1.5rem 0.75rem 0.75rem; }
    .step                     { min-width: 60px; }
    .step-circle              { width: 32px; height: 32px; font-size: 0.8rem; }
    .step-label               { font-size: 0.7rem; }
    .step-line                { min-width: 20px; margin-top: 16px; }
}