.arsi-phone-auth-card{width:100%;max-width:440px;margin:0 auto;padding:1.75rem;border-radius:1.35rem;background:var(--white);box-shadow:0 1.25rem 3.5rem rgba(18,38,63,.08);border:1px solid rgba(18,38,63,.06)}
.arsi-phone-auth-icon{width:3.35rem;height:3.35rem;border-radius:1.15rem;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;background:linear-gradient(135deg,rgba(99,102,241,.12),rgba(16,185,129,.12));color:var(--primary)}
.arsi-phone-auth-row{display:flex;gap:.5rem;align-items:flex-start}.arsi-phone-code{max-width:8.25rem;flex:0 0 8.25rem}.arsi-phone-auth-submit{min-height:2.8rem;border-radius:.85rem;font-weight:700}.arsi-otp-input{font-size:1.45rem;letter-spacing:.45rem;font-weight:800;direction:ltr}.arsi-phone-auth-card .form-control,.arsi-phone-auth-card .custom-select{border-radius:.8rem;min-height:2.75rem}.arsi-phone-auth-card label{font-weight:700}.arsi-phone-auth-card a{text-decoration:none}@media(max-width:420px){.arsi-phone-auth-card{padding:1.25rem;border-radius:1rem}.arsi-phone-auth-row{gap:.35rem}.arsi-phone-code{max-width:7rem;flex-basis:7rem;font-size:.85rem}.arsi-otp-input{letter-spacing:.25rem}}

.arsi-phone-auth-actions .btn{border-radius:.85rem;font-weight:700}.arsi-phone-auth-card .btn-outline-primary{background:rgba(99,102,241,.04)}

.arsi-phone-login-entry{border-radius:.9rem;font-weight:700;border:1px solid rgba(18,38,63,.08);box-shadow:0 .5rem 1.25rem rgba(18,38,63,.05)}
.arsi-sms-settings-card{border-radius:1rem;overflow:hidden}.arsi-sms-settings-card .form-control{border-radius:.75rem}.arsi-sms-phone-input .input-group-text{border-radius:.75rem 0 0 .75rem}.arsi-sms-phone-input .form-control{border-radius:0 .75rem .75rem 0;text-align:left}.rtl .arsi-sms-phone-input .input-group-text{border-radius:0 .75rem .75rem 0}.rtl .arsi-sms-phone-input .form-control{border-radius:.75rem 0 0 .75rem}

/* ARSI complete phone auth additions */
.arsi-phone-auth-modal-card {
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 1.25rem 3rem rgba(15, 23, 42, .12);
}

.arsi-phone-auth-wide { max-width: 560px; }

.arsi-phone-auth-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

.arsi-phone-auth-steps span {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--gray-100, #f3f4f6);
    color: var(--gray-600, #6b7280);
    font-size: .85rem;
    font-weight: 700;
}

.arsi-phone-auth-steps span.active {
    background: var(--primary, #4f46e5);
    color: #fff;
    box-shadow: 0 .5rem 1rem rgba(79, 70, 229, .2);
}

.arsi-phone-auth-steps span.done {
    background: #10b981;
    color: #fff;
}

.arsi-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.arsi-chip {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.arsi-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.arsi-chip span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    padding: .5rem .85rem;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.08);
    background: #fff;
    color: var(--gray-700, #374151);
    font-size: .875rem;
    transition: .18s ease;
}

.arsi-chip input:checked + span,
.arsi-chip.active span,
.arsi-chip:hover span {
    border-color: var(--primary, #4f46e5);
    color: var(--primary, #4f46e5);
    background: rgba(79,70,229,.08);
}

.arsi-city-chip-group { max-height: 8rem; overflow: auto; padding-bottom: .25rem; }

.arsi-data-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.arsi-handler-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .65rem .75rem;
    border-radius: .9rem;
    background: rgba(0,0,0,.025);
    margin-bottom: .5rem;
}

@media (max-width: 575.98px) {
    .arsi-phone-auth-wide { max-width: 100%; }
    .arsi-chip span { width: 100%; }
    .arsi-chip { flex: 1 1 calc(50% - .5rem); }
    .arsi-city-chip-group .arsi-chip { flex-basis: 100%; }
}

/* Final production polish: country flags, live validation, mobile flow */
.arsi-phone-code {
    min-width: 10.5rem;
    max-width: 12rem;
}

.arsi-phone-auth-row .form-control.is-valid {
    border-color: #10b981;
    box-shadow: 0 0 0 .2rem rgba(16, 185, 129, .08);
}

.arsi-phone-auth-row .form-control.is-invalid {
    border-color: #ef4444;
    box-shadow: 0 0 0 .2rem rgba(239, 68, 68, .08);
}

.arsi-phone-auth-card small[data-arsi-phone-hint] {
    display: block;
    margin-top: .4rem;
    line-height: 1.6;
}

.arsi-chip span:before {
    content: '';
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: currentColor;
    opacity: .22;
    margin-inline-end: .45rem;
}

.arsi-chip input:checked + span:before,
.arsi-chip.active span:before {
    opacity: 1;
}

.arsi-city-chip-group::-webkit-scrollbar { width: .35rem; }
.arsi-city-chip-group::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 999px; }

@media(max-width: 575.98px) {
    .arsi-phone-auth-card {
        box-shadow: 0 .75rem 2rem rgba(18,38,63,.08);
    }
    .arsi-phone-auth-row {
        flex-direction: column;
    }
    .arsi-phone-code {
        max-width: 100%;
        width: 100%;
        flex: 1 1 auto;
    }
}

/* Production OTP modal behavior: timers, no-page-refresh states, and account polish */
.arsi-otp-panel {
    padding: .85rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(79,70,229,.07), rgba(16,185,129,.06));
    border: 1px solid rgba(79,70,229,.08);
    font-size: .875rem;
}

.arsi-otp-progress {
    height: .35rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(0,0,0,.08);
}

.arsi-otp-progress span {
    display: block;
    height: 100%;
    width: 100%;
    border-radius: inherit;
    background: currentColor;
    color: var(--primary, #4f46e5);
    transition: width .35s ease;
}

.arsi-phone-auth-card a.disabled,
.arsi-phone-auth-card a[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
    text-decoration: none;
}

.arsi-phone-auth-card {
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.arsi-phone-auth-card:has(.arsi-phone-auth-submit:disabled) {
    opacity: .96;
}

.arsi-account-email-placeholder {
    padding: .85rem 1rem;
    border-radius: .9rem;
    background: rgba(16,185,129,.07);
    border: 1px solid rgba(16,185,129,.1);
    color: var(--gray-700, #374151);
}

.arsi-account-email-placeholder .btn {
    border-radius: 999px;
    font-weight: 700;
}

@media(max-width: 575.98px) {
    .arsi-otp-panel .d-flex { gap: .4rem; }
    .arsi-otp-timer-text, .arsi-otp-expire-text { width: 100%; display: block; }
}


/* Final production refinements */
.arsi-gender-only { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.arsi-gender-only .arsi-chip { min-height: 58px; justify-content: center; font-weight: 700; }
.arsi-chip-icon { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(0,0,0,.06); margin-inline-end: .45rem; }
.arsi-chip.active .arsi-chip-icon { background: rgba(255,255,255,.28); }
.arsi-admin-sms-card { border: 0; border-radius: 1.25rem; box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.06); }
.arsi-admin-sms-status { display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap; }
.arsi-admin-sms-meta { font-size:.78rem; color:var(--gray-600); }
@media (max-width: 575.98px) { .arsi-gender-only { grid-template-columns: 1fr; } }

.arsi-account-phone-readonly,
.arsi-current-phone {
    border: 1px solid rgba(0,0,0,.08);
    background: linear-gradient(135deg, rgba(248,249,250,.96), rgba(255,255,255,.96));
    border-radius: 1rem;
    padding: 1rem;
}
.arsi-account-phone-readonly strong,
.arsi-current-phone strong {
    letter-spacing: .3px;
}
[data-arsi-action-link].disabled,
[data-arsi-resend-link].disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* Final fix: embedded code-login / reset-password panels inside phone-password screen */
.arsi-auth-panel {
    animation: arsiAuthPanelIn .18s ease-out;
}

.arsi-auth-panel.d-none {
    display: none !important;
}

.arsi-inline-status {
    border-radius: 12px;
    line-height: 1.7;
}

@keyframes arsiAuthPanelIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}