/* Rabo OTP Login v1.0.21 — selected background + corrected left/right layout */
.rabo-wrapper,
.rabo-wrapper *,
.rabo-wrapper *::before,
.rabo-wrapper *::after { box-sizing: border-box; }

.rabo-wrapper {
    --rabo-gold: #efb61d;
    --rabo-gold-light: #ffd044;
    --rabo-ink: #151515;
    --rabo-muted: #8a8a8a;
    width: 100vw;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
    overflow: hidden;
    background: #111;
    font-family: 'Vazirmatn','Vazir',Tahoma,sans-serif !important;
}

.rabo-wrapper *,
.rabo-wrapper button,
.rabo-wrapper input,
.rabo-wrapper a,
.rabo-wrapper label,
.rabo-wrapper small,
.rabo-wrapper p,
.rabo-wrapper h2,
.rabo-wrapper span,
.rabo-wrapper strong,
.rabo-wrapper b {
    font-family: 'Vazirmatn','Vazir',Tahoma,sans-serif !important;
}

body:has(.rabo-wrapper) .main-page-wrapper,
body:has(.rabo-wrapper) .site-content,
body:has(.rabo-wrapper) .container,
body:has(.rabo-wrapper) .content-layout-wrapper,
body:has(.rabo-wrapper) .site-content.col-lg-12 {
    padding-top: 0 !important;
    margin-top: 0 !important;
    max-width: none !important;
}

/* LTR grid is intentional: column 1 = visual left, column 2 = visual right. */
.rabo-stage {
    direction: ltr;
    min-height: 690px;
    display: grid;
    grid-template-columns: 44% 56%;
    align-items: stretch;
    background: url('../images/rabo-login-reference-bg.png') center center / cover no-repeat;
}

.rabo-info-panel,
.rabo-image-box {
    min-height: inherit;
    display: flex;
    align-items: center;
}

.rabo-info-panel {
    grid-column: 1;
    direction: rtl;
    justify-content: center;
    padding: 76px 30px 64px 46px;
}

.rabo-image-box {
    grid-column: 2;
    direction: rtl;
    justify-content: center;
    padding: 64px 48px 64px 34px;
}

/* Card based on the user's second screenshot */
.rabo-info-card {
    position: relative;
    width: min(100%, 440px);
    padding: 78px 38px 32px;
    border: 1px solid rgba(225,178,45,.72);
    border-radius: 28px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 20px 48px rgba(73,49,5,.12);
}

.rabo-user-badge {
    position: absolute;
    top: -48px;
    left: 50%;
    transform: translateX(-50%);
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(225,178,45,.62);
    box-shadow: 0 8px 22px rgba(92,65,8,.08);
}

.rabo-user-head {
    position: absolute;
    width: 22px;
    height: 22px;
    left: 35px;
    top: 22px;
    border: 3px solid #cb9711;
    border-radius: 50%;
}

.rabo-user-body {
    position: absolute;
    width: 40px;
    height: 26px;
    left: 27px;
    bottom: 20px;
    border: 3px solid #cb9711;
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
}

.rabo-title {
    margin: 0 0 8px !important;
    color: #111 !important;
    text-align: center !important;
    font-size: 31px !important;
    line-height: 1.55 !important;
    font-weight: 900 !important;
}

.rabo-subtitle {
    margin: 0 0 31px !important;
    color: #8a8a8a !important;
    text-align: center !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
    font-weight: 400 !important;
}

.rabo-form { margin: 0 !important; }
.rabo-field { margin-bottom: 22px; }

.rabo-field label {
    display: block;
    margin: 0 0 10px !important;
    color: #202020 !important;
    text-align: right !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    font-weight: 800 !important;
}

.rabo-input-wrap {
    direction: ltr;
    display: flex;
    width: 100%;
    height: 58px;
    overflow: hidden;
    border: 1px solid #d9b445;
    border-radius: 13px;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.rabo-input-wrap:focus-within {
    border-color: #c8950d;
    box-shadow: 0 0 0 3px rgba(239,182,29,.14);
}

.rabo-phone-icon {
    flex: 0 0 54px;
    height: 56px;
    display: grid;
    place-items: center;
    border-right: 1px solid #ead9a9;
    color: #777;
    font-size: 20px !important;
}

.rabo-wrapper #rabo_mobile {
    width: 100% !important;
    height: 56px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    color: #191919 !important;
    direction: ltr !important;
    text-align: left !important;
    font-size: 16px !important;
    line-height: 56px !important;
    font-weight: 700 !important;
}

.rabo-wrapper #rabo_mobile::placeholder { color:#a7a7a7 !important; opacity:1 !important; }

.rabo-field-hint {
    display: block;
    margin-top: 10px;
    color: #9c9c9c !important;
    text-align: right !important;
    font-size: 11px !important;
    line-height: 1.8 !important;
    font-weight: 400 !important;
}

.rabo-btn,
.rabo-wrapper button.rabo-btn,
.rabo-wrapper #rabo_send_code,
.rabo-wrapper #rabo_login {
    position: relative !important;
    width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 20px !important;
    border: 0 !important;
    border-radius: 13px !important;
    outline: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg,var(--rabo-gold-light),var(--rabo-gold)) !important;
    color: #1c1500 !important;
    box-shadow: 0 10px 20px rgba(196,145,8,.22) !important;
    text-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease !important;
}

.rabo-btn:hover:not(:disabled),
.rabo-wrapper #rabo_send_code:hover:not(:disabled),
.rabo-wrapper #rabo_login:hover:not(:disabled) {
    transform: translateY(-1px) !important;
    box-shadow: 0 13px 24px rgba(196,145,8,.27) !important;
}

.rabo-btn:disabled,
.rabo-wrapper #rabo_send_code:disabled,
.rabo-wrapper #rabo_login:disabled {
    opacity: .56 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

.rabo-btn-arrow {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px !important;
    font-weight: 500 !important;
}

.rabo-otp-area {
    display: none;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #ece6d8;
    animation: raboFade .24s ease;
}

@keyframes raboFade {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.rabo-otp-field > input {
    width: 100% !important;
    height: 54px !important;
    border: 1px solid #d9b445 !important;
    border-radius: 12px !important;
    background: #fff !important;
    padding: 0 16px !important;
    outline: 0 !important;
    direction: ltr !important;
    text-align: center !important;
    font-size: 17px !important;
    font-weight: 700 !important;
}

.rabo-timer-row {
    margin-top: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    color: #777;
    font-size: 12px !important;
}
.rabo-timer-divider { width:1px; height:20px; background:#dfdfdf; }
#rabo_timer { color:#666; direction:ltr; font-weight:600 !important; }
#rabo_resend { color:#9a7200 !important; text-decoration:none !important; pointer-events:none; opacity:.4; font-weight:700 !important; }
#rabo_resend.rabo-active { pointer-events:auto; opacity:1; }

.rabo-trust-note {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid #ece8df;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #929292 !important;
    font-size: 11.5px !important;
    line-height: 1.8 !important;
    font-weight: 400 !important;
}
.rabo-trust-icon { color:#c09212; font-size:16px !important; }

.rabo-message {
    display: none;
    margin-top: 16px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 12px !important;
    line-height: 1.8 !important;
    text-align: center;
}
.rabo-message.rabo-error { display:block; background:#fff0f0; color:#c53a3a; border:1px solid #f2bebe; }
.rabo-message.rabo-success { display:block; background:#effaf3; color:#24784b; border:1px solid #bfe6cd; }
.rabo-is-hidden { display:none !important; }

/* Right/black content */
.rabo-welcome-content {
    width: min(100%, 640px);
    text-align: center;
}

.rabo-welcome-title {
    margin: 0 !important;
    color: #fff !important;
    text-align: center !important;
    font-size: clamp(34px,3.3vw,50px) !important;
    line-height: 1.58 !important;
    font-weight: 800 !important;
}
.rabo-welcome-title strong { color:var(--rabo-gold) !important; font-weight:900 !important; }

.rabo-gold-line {
    display: block;
    width: min(100%,430px);
    height: 2px;
    margin: 16px auto 24px;
    border-radius: 999px;
    background: linear-gradient(90deg,rgba(239,182,29,.55),#f5cf64,rgba(239,182,29,.55));
}

.rabo-welcome-text {
    width: min(100%,560px);
    margin: 0 auto !important;
    color: #d7d7d8 !important;
    text-align: center !important;
    font-size: 17px !important;
    line-height: 2.05 !important;
    font-weight: 500 !important;
}

.rabo-benefits {
    width: min(100%,630px);
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 0;
    margin: 46px auto 0;
}
.rabo-benefit { padding:0 16px; text-align:center; border-left:1px solid rgba(239,182,29,.20); }
.rabo-benefit:last-child { border-left:0; }
.rabo-benefit-icon { display:block; width:54px; height:54px; margin:0 auto 13px; }
.rabo-benefit b { display:block; margin-bottom:7px; color:#e9b73d !important; font-size:14px !important; line-height:1.8 !important; font-weight:800 !important; }
.rabo-benefit small { display:block; color:#aaa !important; font-size:11px !important; line-height:1.8 !important; font-weight:400 !important; }

@media (max-width: 1100px) {
    .rabo-stage { grid-template-columns: 46% 54%; }
    .rabo-info-panel { padding: 70px 18px 58px 26px; }
    .rabo-image-box { padding: 58px 32px 58px 24px; }
    .rabo-info-card { width:min(100%,410px); padding-left:28px; padding-right:28px; }
    .rabo-welcome-title { font-size:38px !important; }
}

@media (max-width: 860px) {
    .rabo-stage {
        display: flex;
        flex-direction: column;
        min-height: 0;
        background: none;
    }

    .rabo-info-panel {
        order: 1;
        min-height: 0;
        padding: 74px 18px 38px;
        background:
            linear-gradient(rgba(248,240,222,.96),rgba(248,240,222,.96)),
            url('../images/rabo-login-reference-bg.png') left center / cover no-repeat;
    }

    .rabo-image-box {
        order: 2;
        min-height: 0;
        padding: 44px 22px 48px;
        background:
            linear-gradient(rgba(11,11,12,.84),rgba(11,11,12,.84)),
            url('../images/rabo-login-reference-bg.png') right center / cover no-repeat;
    }

    .rabo-info-card { width:min(100%,430px); padding:72px 24px 28px; }
    .rabo-welcome-title { font-size:clamp(29px,7vw,35px) !important; }
    .rabo-welcome-text { font-size:14px !important; }
    .rabo-benefits { margin-top:34px; }
}

@media (max-width: 560px) {
    .rabo-info-panel { padding: 68px 14px 32px; }
    .rabo-image-box { padding: 38px 18px 42px; }
    .rabo-info-card { padding:66px 18px 24px; border-radius:22px; }
    .rabo-user-badge { width:84px; height:84px; top:-42px; }
    .rabo-user-head { left:30px; top:19px; }
    .rabo-user-body { left:22px; bottom:18px; }
    .rabo-title { font-size:25px !important; }
    .rabo-subtitle { margin-bottom:25px !important; font-size:13px !important; }
    .rabo-input-wrap,
    .rabo-wrapper #rabo_mobile,
    .rabo-btn,
    .rabo-wrapper #rabo_send_code,
    .rabo-wrapper #rabo_login { height:54px !important; min-height:54px !important; }
    .rabo-phone-icon { height:52px; }
    .rabo-wrapper #rabo_mobile { line-height:52px !important; }
    .rabo-benefits { grid-template-columns:1fr; gap:21px; width:100%; }
    .rabo-benefit { padding:0 0 19px; border-left:0; border-bottom:1px solid rgba(239,182,29,.18); }
    .rabo-benefit:last-child { border-bottom:0; padding-bottom:0; }
}


/* ===== Tiny desktop position adjustment — v1.0.23 ===== */
@media (min-width: 861px) {
    .rabo-info-card {
        transform: translateX(-24px);
    }
}


/* ===== Mobile composition refinement — v1.0.24 ===== */
.rabo-mobile-intro { display:none; }

@media (max-width: 560px) {
    .rabo-info-panel {
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        padding: 24px 14px 28px !important;
    }

    .rabo-mobile-intro {
        display:block !important;
        width:100% !important;
        max-width:430px !important;
        margin:0 auto 18px !important;
        text-align:center !important;
    }

    .rabo-mobile-intro h2 {
        margin:0 0 5px !important;
        color:#1f1f1f !important;
        font-size:20px !important;
        line-height:1.5 !important;
        font-weight:800 !important;
        white-space:nowrap !important;
    }

    .rabo-mobile-intro h2 strong {
        color:#b98500 !important;
        font-weight:900 !important;
    }

    .rabo-mobile-intro p {
        margin:0 !important;
        color:#666 !important;
        font-size:10.5px !important;
        line-height:1.7 !important;
        font-weight:500 !important;
        white-space:nowrap !important;
    }

    .rabo-info-card {
        width:min(100%,430px) !important;
        padding:62px 18px 24px !important;
    }

    .rabo-image-box {
        padding:20px 10px 24px !important;
    }

    .rabo-image-box .rabo-welcome-title,
    .rabo-image-box .rabo-gold-line,
    .rabo-image-box .rabo-welcome-text {
        display:none !important;
    }

    .rabo-benefits {
        display:grid !important;
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:0 !important;
        width:100% !important;
        max-width:420px !important;
        margin:0 auto !important;
    }

    .rabo-benefit {
        min-width:0 !important;
        padding:0 6px !important;
        border-bottom:0 !important;
        border-left:1px solid rgba(239,182,29,.18) !important;
    }
    .rabo-benefit:last-child { border-left:0 !important; }

    .rabo-benefit-icon {
        width:34px !important;
        height:34px !important;
        margin:0 auto 7px !important;
    }

    .rabo-benefit b {
        margin-bottom:3px !important;
        font-size:10px !important;
        line-height:1.5 !important;
        white-space:nowrap !important;
    }

    .rabo-benefit small {
        font-size:8px !important;
        line-height:1.55 !important;
    }
}

@media (max-width: 390px) {
    .rabo-mobile-intro h2 { font-size:18px !important; }
    .rabo-mobile-intro p { font-size:9.3px !important; }
    .rabo-benefit-icon { width:31px !important; height:31px !important; }
    .rabo-benefit b { font-size:9px !important; }
    .rabo-benefit small { font-size:7.4px !important; }
}


/* ===== Mobile spacing + hide benefit strip — v1.0.25 ===== */
@media (max-width: 560px) {
    .rabo-mobile-intro {
        margin-bottom: 50px !important;
    }

    .rabo-info-card {
        margin-top: 0 !important;
    }

    .rabo-image-box {
        display: none !important;
    }
}


/* ===== Two-step OTP UI — v1.0.26 ===== */
.rabo-step { width:100%; }
.rabo-step-mobile { display:block; }
.rabo-step-otp { display:none; margin-top:0 !important; }

.rabo-info-card {
    min-height: 460px;
    display:flex;
    flex-direction:column;
}
.rabo-form { flex:1; display:flex; flex-direction:column; }
.rabo-trust-note { margin-top:auto !important; }

.rabo-otp-heading {
    margin: 0 0 22px;
    text-align:center;
}
.rabo-otp-heading strong {
    display:block;
    margin-bottom:7px;
    color:#171717 !important;
    font-size:18px !important;
    line-height:1.7 !important;
    font-weight:900 !important;
}
.rabo-otp-heading span {
    display:block;
    color:#8c8c8c !important;
    font-size:11px !important;
    line-height:1.8 !important;
    font-weight:500 !important;
}
.rabo-otp-heading b {
    display:inline-block;
    direction:ltr;
    color:#565656 !important;
    font-weight:800 !important;
}

.rabo-code-inputs {
    direction:ltr;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:10px;
    margin:0 0 22px;
}
.rabo-wrapper .rabo-code-box {
    width:100% !important;
    min-width:0 !important;
    height:58px !important;
    min-height:58px !important;
    margin:0 !important;
    padding:0 !important;
    border:1px solid #d7d7d7 !important;
    border-radius:11px !important;
    outline:0 !important;
    background:#fff !important;
    box-shadow:none !important;
    color:#151515 !important;
    -webkit-text-fill-color:#151515 !important;
    text-align:center !important;
    direction:ltr !important;
    font-size:22px !important;
    line-height:58px !important;
    font-weight:800 !important;
    caret-color:#c9950c;
    transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.rabo-wrapper .rabo-code-box:focus,
.rabo-wrapper .rabo-code-box.rabo-filled {
    border-color:#d4a31a !important;
    box-shadow:0 0 0 3px rgba(239,182,29,.12) !important;
}
.rabo-wrapper .rabo-code-box.rabo-code-error {
    border-color:#d95555 !important;
    animation:raboOtpShake .28s linear;
}
@keyframes raboOtpShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }

.rabo-otp-actions {
    margin-top:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    min-height:24px;
    font-size:11px !important;
    line-height:1.7 !important;
}
.rabo-otp-actions a {
    text-decoration:none !important;
    font-size:11px !important;
    font-weight:700 !important;
}
#rabo_change_mobile { color:#6f6f6f !important; }
#rabo_change_mobile:hover { color:#222 !important; }
#rabo_resend { color:#a47700 !important; pointer-events:none; opacity:.38; }
#rabo_resend.rabo-active { pointer-events:auto; opacity:1; }
.rabo-timer-divider { width:1px; height:18px; background:#e1e1e1; }
#rabo_timer { direction:ltr; color:#777; font-size:11px !important; font-weight:650 !important; }

@media (max-width:560px) {
    .rabo-info-card { min-height:430px !important; }
    .rabo-code-inputs { gap:7px; }
    .rabo-wrapper .rabo-code-box {
        height:52px !important;
        min-height:52px !important;
        line-height:52px !important;
        border-radius:9px !important;
        font-size:20px !important;
    }
    .rabo-otp-heading { margin-bottom:18px; }
    .rabo-otp-actions { gap:9px; }
}


/* ===== Mobile field custom icon — v1.0.27 ===== */
.rabo-phone-icon img {
    display: block !important;
    width: auto !important;
    height: 26px !important;
    max-width: 28px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
}
@media (max-width: 767px) {
    .rabo-phone-icon img {
        height: 24px !important;
        max-width: 26px !important;
    }
}