/* MIL OTP Auth — RTL Persian design */

/* Section container that wraps the form */
.mil-otp-section {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 70vh;
    padding: 160px 20px 80px;
    background: linear-gradient(135deg, #f8f9fc 0%, #eef2f8 100%);
    position: relative;
    z-index: 1;
}

/* English version → LTR layout */
.mil-otp-wrapper[data-lang="en"] {
    direction: ltr;
    text-align: left;
}

.mil-otp-wrapper[data-lang="en"] .mil-otp-title,
.mil-otp-wrapper[data-lang="en"] .mil-otp-subtitle {
    text-align: center;
}

.mil-otp-wrapper[data-lang="en"] .mil-otp-error {
    border-right: 1px solid #ffcdd2;
    border-left: 4px solid #c62828;
}

/* Outer wrapper = card */
.mil-otp-wrapper {
    direction: rtl;
    text-align: right;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    padding: 54px 36px 32px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(31, 75, 69, .10), 0 2px 8px rgba(31, 75, 69, .06);
    border: 1px solid rgba(182, 146, 101, .14);
    position: relative;
    font-family: inherit;
    box-sizing: border-box;
    z-index: 1;
}

.mil-otp-wrapper::before {
    content: "";
    position: absolute;
    top: -34px;
    right: 50%;
    transform: translateX(50%);
    width: 68px;
    height: 68px;
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(182, 146, 101, .40);
    background-color: #B69265;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2' ry='2'/%3E%3Cline x1='12' y1='18' x2='12.01' y2='18'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #B69265 0%, #8b6b3f 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: 32px 32px, 100% 100%;
    border: 4px solid #ffffff;
}

/* Steps */
.mil-otp-step { display: none; }
.mil-otp-step[data-step="1"] { display: block; }

/* Title & subtitle */
.mil-otp-title {
    font-size: 24px;
    font-weight: 800;
    margin: 18px 0 6px;
    color: #1F4B45;
    text-align: center;
    line-height: 1.3;
}

.mil-otp-subtitle {
    color: #6b7785;
    font-size: 14px;
    margin: 0 0 20px;
    text-align: center;
    line-height: 1.6;
}

.mil-otp-subtitle .mil-otp-phone-display {
    color: #B69265;
    font-weight: 700;
    direction: ltr;
    display: inline-block;
    unicode-bidi: embed;
}

/* ── Reset theme button styles inside our widget ── */
.mil-otp-wrapper button {
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    color: inherit;
    text-shadow: none;
    letter-spacing: normal;
    text-transform: none;
    line-height: 1.2;
}

/* ── Tabs ── */
.mil-otp-tabs {
    display: flex;
    margin: 10px 0 24px;
    background: #f3f5f9;
    border-radius: 12px;
    padding: 5px;
    gap: 4px;
    box-sizing: border-box;
}

.mil-otp-wrapper .mil-otp-tab {
    flex: 1;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    padding: 11px 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #6b7785 !important;
    cursor: pointer;
    border-radius: 8px !important;
    transition: background .2s, color .2s, box-shadow .2s;
    font-family: inherit !important;
    line-height: 1.2;
    box-shadow: none !important;
    text-shadow: none !important;
    margin: 0 !important;
    min-height: auto !important;
    width: auto !important;
    display: block !important;
}

.mil-otp-wrapper .mil-otp-tab:hover:not(.is-active) {
    color: #1F4B45 !important;
    background: rgba(182, 146, 101, .06) !important;
    background-color: rgba(182, 146, 101, .06) !important;
}

.mil-otp-wrapper .mil-otp-tab.is-active {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #1F4B45 !important;
    box-shadow: 0 2px 8px rgba(31, 75, 69, .10) !important;
}

/* Field container */
.mil-otp-field {
    margin-bottom: 14px;
    position: relative;
}

.mil-otp-phone-row {
    display: flex;
    flex-direction: row-reverse;
    align-items: stretch;
    gap: 0;
    border: 1.5px solid #e1e5ec;
    border-radius: 10px;
    background: #fafbfc;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}

.mil-otp-phone-row:focus-within {
    border-color: #B69265;
    box-shadow: 0 0 0 4px rgba(182, 146, 101, .12);
    background: #ffffff;
}

.mil-otp-flag {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    background: #f3f5f9;
    border-right: 1px solid #e1e5ec;
    font-size: 24px;
    line-height: 1;
    min-width: 54px;
}

/* Inputs */
.mil-otp-input {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid #e1e5ec;
    border-radius: 10px;
    font-size: 15px;
    box-sizing: border-box;
    transition: border-color .2s, box-shadow .2s, background .2s;
    background: #fafbfc;
    color: #1F4B45;
    font-family: inherit;
}

.mil-otp-phone-row .mil-otp-input {
    border: none;
    border-radius: 0;
    background: transparent;
    flex: 1;
}

.mil-otp-phone-row .mil-otp-input:focus {
    background: transparent;
    box-shadow: none;
}

.mil-otp-input:focus {
    outline: none;
    border-color: #B69265;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(182, 146, 101, .12);
}

.mil-otp-input::placeholder {
    color: #a0a8b5;
    font-size: 14px;
}

/* Phone — LTR digits */
.mil-otp-phone {
    direction: ltr;
    text-align: left;
    font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
    letter-spacing: 1px;
    -webkit-font-feature-settings: "lnum";
    font-feature-settings: "lnum";
    unicode-bidi: isolate;
}

.mil-otp-code {
    font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
    -webkit-font-feature-settings: "lnum";
    font-feature-settings: "lnum";
}

/* Password row with eye toggle */
.mil-otp-pwd-row {
    display: flex;
    align-items: stretch;
    position: relative;
}

.mil-otp-pwd-row .mil-otp-input {
    padding-inline-end: 50px;
}

.mil-otp-wrapper .mil-otp-toggle-pwd {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    inset-inline-end: 10px !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    cursor: pointer;
    width: 32px !important;
    height: 32px !important;
    color: #8b95a3 !important;
    font-size: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 6px !important;
    transition: background .18s, color .18s;
    box-shadow: none !important;
    text-shadow: none !important;
    min-height: auto !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.mil-otp-wrapper .mil-otp-toggle-pwd:hover {
    background: rgba(182, 146, 101, .10) !important;
    background-color: rgba(182, 146, 101, .10) !important;
    color: #B69265 !important;
}

.mil-otp-wrapper .mil-otp-toggle-pwd.is-shown {
    color: #B69265 !important;
}

/* OTP code — large centered */
.mil-otp-code-row {
    display: flex;
    justify-content: center;
    margin: 20px 0 8px;
}

.mil-otp-code {
    font-size: 28px;
    letter-spacing: 14px;
    text-align: center;
    direction: ltr;
    font-weight: 800;
    color: #1F4B45;
    padding: 14px 16px 14px 30px;
    max-width: 300px;
    background: #fafbfc;
}

/* Buttons */
.mil-otp-wrapper .mil-otp-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 14px 22px !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer;
    margin-top: 10px !important;
    transition: all .22s ease;
    font-family: inherit !important;
    line-height: 1.2 !important;
    position: relative;
    text-shadow: none !important;
    min-height: 48px !important;
    box-sizing: border-box;
}

.mil-otp-btn:disabled,
.mil-otp-btn.is-loading {
    opacity: .7;
    cursor: not-allowed;
}

.mil-otp-wrapper .mil-otp-send-btn,
.mil-otp-wrapper .mil-otp-verify-btn,
.mil-otp-wrapper .mil-otp-pwdlogin-btn,
.mil-otp-wrapper .mil-otp-register-btn {
    background-color: #B69265 !important;
    background-image: linear-gradient(135deg, #B69265 0%, #8b6b3f 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(182, 146, 101, .30) !important;
    min-height: 48px !important;
}

.mil-otp-send-btn:hover:not(:disabled),
.mil-otp-verify-btn:hover:not(:disabled),
.mil-otp-pwdlogin-btn:hover:not(:disabled),
.mil-otp-register-btn:hover:not(:disabled) {
    background-image: linear-gradient(135deg, #a07f52 0%, #73592f 100%);
    box-shadow: 0 6px 20px rgba(182, 146, 101, .45);
    transform: translateY(-1px);
}

.mil-otp-send-btn:active:not(:disabled),
.mil-otp-verify-btn:active:not(:disabled),
.mil-otp-pwdlogin-btn:active:not(:disabled),
.mil-otp-register-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(182, 146, 101, .35);
}

/* Spinner: hidden by default, shown when button has is-loading */
.mil-otp-spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255, 255, 255, .35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: milOtpSpin .7s linear infinite;
}

.mil-otp-btn.is-loading .mil-otp-btn-text { display: none; }
.mil-otp-btn.is-loading .mil-otp-spinner   { display: inline-block; }

@keyframes milOtpSpin {
    to { transform: rotate(360deg); }
}

/* Timer */
.mil-otp-timer {
    color: #6b7785;
    font-size: 13px;
    text-align: center;
    margin: 14px 0 6px;
}

.mil-otp-countdown {
    font-weight: 700;
    color: #e74c3c;
    font-family: "Segoe UI", Roboto, sans-serif;
    margin: 0 4px;
    -webkit-font-feature-settings: "lnum";
    font-feature-settings: "lnum";
}

/* Resend / Back buttons */
.mil-otp-resend,
.mil-otp-back {
    text-align: center;
    margin-top: 8px;
}

.mil-otp-wrapper .mil-otp-link {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    color: #1F4B45 !important;
    font-size: 13px !important;
    cursor: pointer;
    padding: 6px 10px !important;
    font-family: inherit !important;
    transition: color .2s;
    border-radius: 6px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-weight: 500 !important;
    margin: 0 !important;
    min-height: auto !important;
    width: auto !important;
    display: inline-block !important;
    line-height: 1.4;
}

.mil-otp-wrapper .mil-otp-resend-btn {
    color: #B69265 !important;
    font-weight: 600 !important;
}

.mil-otp-wrapper .mil-otp-link:hover {
    color: #B69265 !important;
    background: rgba(182, 146, 101, .08) !important;
    background-color: rgba(182, 146, 101, .08) !important;
}

.mil-otp-wrapper .mil-otp-back-btn {
    color: #8b95a3 !important;
}

.mil-otp-wrapper .mil-otp-back-btn:hover {
    color: #1F4B45 !important;
    background: #f3f5f9 !important;
    background-color: #f3f5f9 !important;
}

/* Forgot password helper */
.mil-otp-forgot {
    text-align: center;
    font-size: 13px;
    color: #8b95a3;
    margin: 14px 0 0;
}

/* Test-mode banner (shown on step 2 when admin enables test mode) */
.mil-otp-test-banner {
    color: #7a5400;
    background: linear-gradient(135deg, #fff8e1 0%, #fff3cd 100%);
    border: 1px solid #f5dc7c;
    border-right: 4px solid #dba617;
    border-radius: 8px;
    padding: 10px 14px;
    margin: 6px 0 10px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
    text-align: center;
}

.mil-otp-wrapper[data-lang="en"] .mil-otp-test-banner {
    border-right: 1px solid #f5dc7c;
    border-left: 4px solid #dba617;
}

/* Error */
.mil-otp-error {
    color: #c62828;
    background: linear-gradient(135deg, #fff5f5 0%, #ffeaea 100%);
    border: 1px solid #ffcdd2;
    border-right: 4px solid #c62828;
    border-radius: 8px;
    padding: 10px 14px;
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.5;
}

/* Step 4 — success */
.mil-otp-step[data-step="4"] {
    text-align: center;
    padding: 20px 0 10px;
}

.mil-otp-success-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(46, 125, 50, .30);
    animation: milOtpPop .4s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes milOtpPop {
    0% { opacity: 0; transform: scale(.3); }
    100% { opacity: 1; transform: scale(1); }
}

.mil-otp-step[data-step="4"] .mil-otp-title {
    color: #2e7d32;
}

/* Already-logged-in message */
.mil-otp-msg {
    max-width: 460px;
    margin: 60px auto;
    padding: 24px 28px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(31, 75, 69, .08);
    text-align: center;
    font-size: 15px;
    line-height: 1.7;
    color: #1F4B45;
    direction: rtl;
}

.mil-otp-msg a {
    color: #B69265;
    font-weight: 700;
    text-decoration: none;
    padding: 0 4px;
}

.mil-otp-msg a:hover {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 520px) {
    .mil-otp-wrapper {
        padding: 46px 22px 26px;
        margin: 32px 14px;
        border-radius: 14px;
    }
    .mil-otp-title { font-size: 20px; }
    .mil-otp-code  { font-size: 22px; letter-spacing: 8px; max-width: 240px; }
    .mil-otp-tab   { font-size: 13px; padding: 10px 6px; }
}

@media (max-width: 900px) {
    .mil-otp-wrapper { margin-top: 24px; }
}