/* ================================================================
   SMS Login Pro — Premium Clean Light UI
   ================================================================ */

:root {
    --sl-bg:        #f5f2ed;
    --sl-surface:   #ffffff;
    --sl-surface2:  #f8f7f4;

    --sl-border:    #e7e3dc;
    --sl-border-lt: #efede8;

    --sl-accent:    #6b7f4a;
    --sl-accent-dk: #596a3d;
    --sl-accent-lt: #edf2e5;

    --sl-text:      #292925;
    --sl-muted:     #8b8b83;
    --sl-muted-lt: #aaa9a2;

    --sl-ok:        #4f8050;
    --sl-ok-bg:     #edf6ed;

    --sl-err:       #b94b4b;
    --sl-err-bg:    #fdf1f1;

    --sl-font:     inherit;
    --sl-mono:     "Courier New", monospace;

    --sl-r:        18px;
    --sl-r-sm:     11px;
    --sl-r-xs:     8px;
    --sl-r-pill:   999px;

    --sl-t:        .22s;
}


/* ================================================================
   RESET / BASE
   ================================================================ */

.smslogin-shell,
.smslogin-shell *,
.smslogin-shell *::before,
.smslogin-shell *::after {
    box-sizing: border-box;
}

.smslogin-shell {
    direction: rtl;
    font-family: var(--sl-font);
    color: var(--sl-text);
}


/* ================================================================
   SHELL
   ================================================================ */

.smslogin-shell {
    width: 100%;
    max-width: 420px;

    margin: 2rem auto;

    background: var(--sl-surface);

    border: 1px solid var(--sl-border);

    border-radius: var(--sl-r);

    box-shadow:
        0 4px 12px rgba(35, 31, 25, .035),
        0 16px 40px rgba(35, 31, 25, .055);

    overflow: hidden;

    animation: sl-card-in .35s ease both;
}

@keyframes sl-card-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ================================================================
   HEADER
   ================================================================ */

.smslogin-header {
    padding: 2rem 1.75rem 1.5rem;

    text-align: center;

    background: var(--sl-surface);

    border-bottom: 1px solid var(--sl-border-lt);
}


/* Logo */

.smslogin-logo {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 50px;
    height: 50px;

    margin-bottom: .85rem;

    border-radius: 15px;

    background: var(--sl-accent-lt);

    color: var(--sl-accent);
}

.smslogin-logo svg {
    width: 25px;
    height: 25px;
}


/* Title */

.smslogin-title {
    margin: 0 0 .35rem;

    color: var(--sl-text);

    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.6;
}


/* Subtitle */

.smslogin-subtitle {
    margin: 0;

    min-height: 1.2em;

    color: var(--sl-muted);

    font-size: .84rem;
    line-height: 1.8;
}


/* ================================================================
   TABS
   ================================================================ */

.smslogin-tabs {
    display: flex;

    width: 100%;

    padding: 4px;

    gap: 4px;

    background: var(--sl-surface2);

    border-bottom: 1px solid var(--sl-border-lt);
}


/* Tab */

.smslogin-tab {
    flex: 1;

    padding: .65rem .75rem;

    font-family: var(--sl-font);
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.5;

    color: var(--sl-muted);

    background: transparent;

    border: none;
    border-radius: 8px;

    cursor: pointer;

    transition:
        color var(--sl-t) ease,
        background var(--sl-t) ease,
        box-shadow var(--sl-t) ease;
}


/* Hover */

.smslogin-tab:hover:not(.is-active) {
    color: var(--sl-text);

    background: rgba(255, 255, 255, .65);
}


/* Active */

.smslogin-tab.is-active {
    color: var(--sl-accent);

    background: var(--sl-surface);

    box-shadow:
        0 1px 4px rgba(0, 0, 0, .05);
}


/* Focus */

.smslogin-tab:focus-visible {
    outline: 2px solid rgba(107, 127, 74, .25);
    outline-offset: -2px;
}


/* ================================================================
   PANES
   ================================================================ */

.smslogin-pane {
    display: none;

    padding: 1.5rem 1.75rem 1.75rem;

    animation: sl-fadein .22s ease both;
}

.smslogin-pane.is-active {
    display: block;
}

@keyframes sl-fadein {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ================================================================
   FIELDS
   ================================================================ */

.smslogin-field {
    margin-bottom: 1rem;
}

.smslogin-field label {
    display: block;

    margin-bottom: .4rem;

    color: var(--sl-text);

    font-size: .8rem;
    font-weight: 500;
}


/* ================================================================
   SMS INPUTS
   ================================================================ */

.smslogin-field input,
.smslogin-field select,
.smslogin-field textarea {

    width: 100%;

    min-height: 50px;

    padding: .7rem .9rem;

    color: var(--sl-text);

    background: var(--sl-surface2);

    border: 1px solid transparent;

    border-radius: var(--sl-r-sm);

    outline: none;

    font-family: var(--sl-font);
    font-size: .9rem;

    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, .015);

    transition:
        background var(--sl-t) ease,
        border-color var(--sl-t) ease,
        box-shadow var(--sl-t) ease;
}


/* Hover */

.smslogin-field input:hover,
.smslogin-field select:hover,
.smslogin-field textarea:hover {
    background: #f5f4f1;
}


/* Focus */

.smslogin-field input:focus,
.smslogin-field select:focus,
.smslogin-field textarea:focus {

    background: #fff;

    border-color: rgba(107, 127, 74, .45);

    box-shadow:
        0 0 0 3px rgba(107, 127, 74, .08);
}


/* Placeholder */

.smslogin-field input::placeholder,
.smslogin-field textarea::placeholder {
    color: var(--sl-muted-lt);
}


/* ================================================================
   EMAIL PANE
   ================================================================ */

.smslogin-email-pane form {
    margin: 0;
}

.smslogin-email-pane .control-group {
    margin-bottom: 1rem;
}

.smslogin-email-pane input[type="text"],
.smslogin-email-pane input[type="email"],
.smslogin-email-pane input[type="password"] {

    width: 100%;

    box-sizing: border-box;

    min-height: 50px;

    padding: .7rem .9rem;

    color: var(--sl-text);

    background: var(--sl-surface2);

    border: 1px solid transparent;

    border-radius: var(--sl-r-sm);

    outline: none;

    font-family: var(--sl-font);
    font-size: .9rem;

    transition:
        background var(--sl-t) ease,
        border-color var(--sl-t) ease,
        box-shadow var(--sl-t) ease;
}

.smslogin-email-pane input:hover {
    background: #f5f4f1;
}

.smslogin-email-pane input:focus {
    background: #fff;

    border-color: rgba(107, 127, 74, .45);

    box-shadow:
        0 0 0 3px rgba(107, 127, 74, .08);
}

.smslogin-email-pane .control-label label,
.smslogin-email-pane label {
    display: block;

    margin-bottom: .4rem;

    color: var(--sl-text);

    font-size: .8rem;
}


/* ================================================================
   PRIMARY BUTTON
   ================================================================ */

.smslogin-primary,
.smslogin-email-pane button[type="submit"],
.smslogin-email-pane input[type="submit"] {

    display: block;

    width: 100%;

    min-height: 50px;

    padding: .7rem 1rem;

    margin-top: .5rem;

    color: #fff;

    background: var(--sl-accent);

    border: none;

    border-radius: 11px;

    font-family: var(--sl-font);
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.6;

    cursor: pointer;

    box-shadow:
        0 3px 10px rgba(107, 127, 74, .16);

    transition:
        background var(--sl-t) ease,
        transform var(--sl-t) ease,
        box-shadow var(--sl-t) ease;
}


/* Hover */

.smslogin-primary:hover:not(:disabled),
.smslogin-email-pane button[type="submit"]:hover,
.smslogin-email-pane input[type="submit"]:hover {

    background: var(--sl-accent-dk);

    transform: translateY(-1px);

    box-shadow:
        0 5px 14px rgba(107, 127, 74, .19);
}


/* Active */

.smslogin-primary:active:not(:disabled),
.smslogin-email-pane button[type="submit"]:active,
.smslogin-email-pane input[type="submit"]:active {

    transform: translateY(0);

    box-shadow:
        0 2px 7px rgba(107, 127, 74, .13);
}


/* Focus */

.smslogin-primary:focus-visible,
.smslogin-email-pane button[type="submit"]:focus-visible,
.smslogin-email-pane input[type="submit"]:focus-visible {

    outline: none;

    box-shadow:
        0 0 0 3px rgba(107, 127, 74, .14),
        0 4px 12px rgba(107, 127, 74, .15);
}


/* Disabled */

.smslogin-primary:disabled,
.smslogin-email-pane button[type="submit"]:disabled,
.smslogin-email-pane input[type="submit"]:disabled {

    opacity: .45;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;
}


/* ================================================================
   LOADING
   ================================================================ */

.smslogin-primary.loading {
    color: transparent;
    pointer-events: none;
}

.smslogin-primary.loading::after {

    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 18px;
    height: 18px;

    margin: -9px 0 0 -9px;

    border: 2px solid rgba(255, 255, 255, .3);

    border-top-color: #fff;

    border-radius: 50%;

    animation: sl-spin .6s linear infinite;
}

@keyframes sl-spin {
    to {
        transform: rotate(360deg);
    }
}


/* ================================================================
   LINK BUTTON / RESEND
   ================================================================ */

.smslogin-link-btn {

    display: block;

    width: 100%;

    margin-top: .65rem;

    padding: .4rem;

    color: var(--sl-accent);

    background: transparent;

    border: none;

    font-family: var(--sl-font);
    font-size: .82rem;
    font-weight: 500;

    text-align: center;

    cursor: pointer;

    transition:
        color var(--sl-t) ease,
        opacity var(--sl-t) ease;
}

.smslogin-link-btn:hover:not(:disabled) {
    color: var(--sl-accent-dk);
}

.smslogin-link-btn:disabled {
    color: var(--sl-muted-lt);
    cursor: default;
}


/* ================================================================
   OTP
   ================================================================ */

.smslogin-otp-digits {

    display: flex;

    justify-content: center;

    gap: .55rem;

    margin: 1rem 0 1.25rem;

    direction: ltr;
}

.smslogin-otp-digits input {

    width: 46px;
    height: 52px;

    padding: 0;

    color: var(--sl-text);

    background: var(--sl-surface2);

    border: 1px solid var(--sl-border);

    border-radius: var(--sl-r-sm);

    outline: none;

    text-align: center;

    font-family: var(--sl-mono);
    font-size: 1.3rem;
    font-weight: 700;

    caret-color: var(--sl-accent);

    transition:
        background var(--sl-t) ease,
        border-color var(--sl-t) ease,
        box-shadow var(--sl-t) ease;
}


/* OTP focus */

.smslogin-otp-digits input:focus {

    background: #fff;

    border-color: var(--sl-accent);

    box-shadow:
        0 0 0 3px rgba(107, 127, 74, .08);
}


/* OTP filled */

.smslogin-otp-digits input.filled {

    color: var(--sl-accent-dk);

    background: var(--sl-accent-lt);

    border-color: rgba(107, 127, 74, .35);
}


/* ================================================================
   PHONE BADGE
   ================================================================ */

.smslogin-phone-badge {

    display: flex;

    align-items: center;

    gap: .5rem;

    margin-bottom: .8rem;

    padding: .65rem .8rem;

    background: var(--sl-surface2);

    border: 1px solid var(--sl-border-lt);

    border-radius: var(--sl-r-sm);

    font-size: .85rem;

    direction: ltr;
}

.smslogin-phone-badge strong {

    flex: 1;

    color: var(--sl-text);

    letter-spacing: .04em;
}

.smslogin-phone-badge button {

    padding: 0 .25rem;

    color: var(--sl-accent);

    background: transparent;

    border: none;

    font-family: var(--sl-font);
    font-size: .78rem;

    cursor: pointer;
}

.smslogin-phone-badge button:hover {
    color: var(--sl-accent-dk);
}


/* ================================================================
   COUNTDOWN
   ================================================================ */

.smslogin-countdown {

    display: inline-flex;

    align-items: center;

    gap: .4rem;
}

.smslogin-countdown-ring {

    width: 20px;
    height: 20px;

    flex-shrink: 0;

    transform: rotate(-90deg);
}

.sl-ring-track {

    fill: none;

    stroke: var(--sl-border);

    stroke-width: 2;
}

.sl-ring-fill {

    fill: none;

    stroke: var(--sl-accent);

    stroke-width: 2;

    stroke-linecap: round;

    transition: stroke-dashoffset 1s linear;
}

.sl-cd-text {

    color: var(--sl-muted);

    font-size: .8rem;

    font-variant-numeric: tabular-nums;
}


/* ================================================================
   MESSAGE
   ================================================================ */

.smslogin-msg {

    min-height: 1.2em;

    margin-top: .6rem;

    border-radius: var(--sl-r-xs);

    font-size: .82rem;

    line-height: 1.7;

    text-align: center;
}

.smslogin-msg.ok {

    padding: .45rem .7rem;

    color: var(--sl-ok);

    background: var(--sl-ok-bg);
}

.smslogin-msg.err {

    padding: .45rem .7rem;

    color: var(--sl-err);

    background: var(--sl-err-bg);
}


/* ================================================================
   REGISTRATION WIDGET
   ================================================================ */

.smslogin-reg-widget {
    margin-top: 1.5rem;
}

.smslogin-reg-divider {

    display: flex;

    align-items: center;

    gap: .7rem;

    margin-bottom: 1rem;

    color: var(--sl-muted);

    font-size: .76rem;
    font-weight: 600;

    white-space: nowrap;
}

.smslogin-reg-divider::before,
.smslogin-reg-divider::after {

    content: "";

    flex: 1;

    height: 1px;

    background: var(--sl-border);
}

.smslogin-reg-step {
    animation: sl-fadein .22s ease both;
}


/* ================================================================
   VERIFIED BADGE
   ================================================================ */

.smslogin-verified-badge {

    display: inline-flex;

    align-items: center;

    gap: .45rem;

    padding: .55rem .9rem;

    color: var(--sl-ok);

    background: var(--sl-ok-bg);

    border: 1px solid rgba(74, 127, 74, .14);

    border-radius: var(--sl-r-pill);

    font-size: .85rem;
    font-weight: 600;
}


/* ================================================================
   GENERAL FORM ELEMENTS
   ================================================================ */

.smslogin-shell button,
.smslogin-shell input,
.smslogin-shell select,
.smslogin-shell textarea {
    font-family: var(--sl-font);
}


/* ================================================================
   MOBILE
   ================================================================ */

@media (max-width: 480px) {

    .smslogin-shell {

        width: 100%;

        margin: 0;

        border-left: none;
        border-right: none;

        border-radius: 0;

        box-shadow: none;
    }

    .smslogin-header {
        padding: 1.75rem 1.25rem 1.35rem;
    }

    .smslogin-pane {
        padding: 1.25rem 1.15rem 1.5rem;
    }

    .smslogin-otp-digits {
        gap: .4rem;
    }

    .smslogin-otp-digits input {
        width: 40px;
        height: 48px;

        font-size: 1.15rem;
    }
}


/* ================================================================
   VERY SMALL SCREENS
   ================================================================ */

@media (max-width: 350px) {

    .smslogin-otp-digits {
        gap: .25rem;
    }

    .smslogin-otp-digits input {
        width: 37px;
        height: 46px;
    }
}


/* ================================================================
   REDUCED MOTION
   ================================================================ */

@media (prefers-reduced-motion: reduce) {

    .smslogin-shell,
    .smslogin-pane,
    .smslogin-reg-step,
    .smslogin-primary,
    .smslogin-tab,
    .smslogin-field input,
    .smslogin-field select,
    .smslogin-field textarea,
    .smslogin-otp-digits input {
        animation: none !important;
        transition: none !important;
    }
}
/* ================================================================
   JOOMLA LOGIN — PREMIUM CLEAN LIGHT UI
   Works with:
   #com-users-login__form
   ================================================================ */


/* ================================================================
   LOGIN FORM
   ================================================================ */
#com-users-login__form {
    width: 100%;
    margin: 0 auto;
    direction: rtl;
    background: #ffffff;
    color: #292925;
    font-family: inherit;
}


/* ================================================================
   PAGE TITLE
   ================================================================ */

#com-users-login__form .page-header {
    display:none;
}

#com-users-login__form .page-header h1 {
    margin: 0;

    color: #292925;

    font-size: 1.35rem;
    font-weight: 700;

    line-height: 1.7;
}


/* ================================================================
   FORM GROUP
   ================================================================ */

#com-users-login__form .mb-3 {
    margin-bottom: 1.15rem !important;
}


/* ================================================================
   LABEL
   ================================================================ */

#com-users-login__form label {
    display: block;

    margin-bottom: .45rem;

    color: #55554f;

    font-size: .82rem;
    font-weight: 500;

    line-height: 1.6;
}


/* Required star */

#com-users-login__form .star {
    color: #b94040;

    margin-right: 2px;
}


/* ================================================================
   ALL TEXT / EMAIL / PASSWORD INPUTS
   ================================================================ */

#com-users-login__form input[type="text"],
#com-users-login__form input[type="email"],
#com-users-login__form input[type="password"] {

    display: block;

    width: 100%;

    height: 50px;

    padding: .65rem .9rem;

    margin: 0;

    color: #292925;

    background: #f8f7f4;

    border: 1px solid transparent;

    border-radius: 11px;

    outline: none;

    box-shadow:
        inset 0 1px 2px rgba(0,0,0,.015);

    font-family: inherit;
    font-size: .9rem;

    line-height: 1.6;

    transition:
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


/* Hover */

#com-users-login__form input[type="text"]:hover,
#com-users-login__form input[type="email"]:hover,
#com-users-login__form input[type="password"]:hover {

    background: #f5f4f1;
}


/* Focus */

#com-users-login__form input[type="text"]:focus,
#com-users-login__form input[type="email"]:focus,
#com-users-login__form input[type="password"]:focus {

    background: #ffffff;

    border-color: rgba(107,127,74,.42);

    box-shadow:
        0 0 0 3px rgba(107,127,74,.08);
}


/* Placeholder */

#com-users-login__form input::placeholder {
    color: #aaa9a2;
}


/* ================================================================
   PASSWORD GROUP
   ================================================================ */

#com-users-login__form .password-group {
    width: 100%;
}


/* Bootstrap input group reset */

#com-users-login__form .input-group {

    display: flex;

    width: 100%;

    direction: ltr;

    border: none;

    box-shadow: none;

    background: transparent;
}


/* Password input */

#com-users-login__form .input-group input[type="password"],
#com-users-login__form .input-group input[type="text"] {

    flex: 1;

    width: auto;

    direction: rtl;

    border-radius: 11px 0 0 11px;

    border-right: none;
}


/* ================================================================
   PASSWORD TOGGLE
   ================================================================ */

#com-users-login__form .input-password-toggle {

    width: 50px;
    min-width: 50px;
    height: 50px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888880;
    background: no-repeat;
    border: none;
    border-radius: 0 11px 11px 0;
    box-shadow: none;
    cursor: pointer;
    transition: color .2s ease, background .2s ease;
    position: absolute;
    left: 0;
}


/* Hover */

#com-users-login__form .input-password-toggle:hover {

    color: #6b7f4a;

    background: #f2f3ee;
}


/* Focus */

#com-users-login__form .input-password-toggle:focus {

    outline: none;

    color: #6b7f4a;

    background: #f2f3ee;
}


/* Icon */

#com-users-login__form .input-password-toggle .icon-eye {

    font-size: 17px;
}


/* ================================================================
   REMEMBER ME
   ================================================================ */

#com-users-login__form .com-users-login__remember {

    margin-top: .15rem;

    margin-bottom: 1.35rem !important;
}


/* Form check */

#com-users-login__form .form-check {

    display: flex;

    align-items: center;

    gap: .5rem;

    min-height: auto;

    padding: 0;

    margin: 0;
}


/* Checkbox */

#com-users-login__form .form-check-input {

    width: 17px;
    height: 17px;

    margin: 0;

    flex: 0 0 auto;

    appearance: none;
    -webkit-appearance: none;

    background: #ffffff;

    border: 1px solid #d7d4ce;

    border-radius: 5px;

    cursor: pointer;

    position: relative;

    transition:
        background .2s ease,
        border-color .2s ease;
}


/* Checked */

#com-users-login__form .form-check-input:checked {

    background: #6b7f4a;

    border-color: #6b7f4a;
}


/* Checkmark */

#com-users-login__form .form-check-input:checked::after {

    content: "";

    position: absolute;

    width: 5px;
    height: 9px;

    left: 5px;
    top: 2px;

    border:
        solid #ffffff;

    border-width:
        0 2px 2px 0;

    transform: rotate(45deg);
}


/* Checkbox focus */

#com-users-login__form .form-check-input:focus {

    outline: none;

    box-shadow:
        0 0 0 3px rgba(107,127,74,.08);
}


/* Remember label */

#com-users-login__form .form-check-label {

    margin: 0;

    color: #77776f;

    font-size: .82rem;

    cursor: pointer;
}


/* ================================================================
   SUBMIT AREA
   ================================================================ */

#com-users-login__form .com-users-login__submit {

    margin: 0;
}


/* Remove Joomla / Bootstrap margins */

#com-users-login__form .com-users-login__submit .mb-3 {

    margin: 0 !important;
}


/* ================================================================
   LOGIN BUTTON
   ================================================================ */

#com-users-login__form .com-users-login__submit button[type="submit"] {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    height: 50px;

    padding: .7rem 1rem;

    margin: 0;

    color: #ffffff;

    background: #6b7f4a;

    border: none;

    border-radius: 11px;

    font-family: inherit;

    font-size: .92rem;

    font-weight: 600;

    line-height: 1.6;

    cursor: pointer;

    box-shadow:
        0 3px 10px rgba(107,127,74,.16);

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}


/* Hover */

#com-users-login__form .com-users-login__submit button[type="submit"]:hover {

    background: #596a3d;

    transform: translateY(-1px);

    box-shadow:
        0 5px 14px rgba(107,127,74,.19);
}


/* Active */

#com-users-login__form .com-users-login__submit button[type="submit"]:active {

    transform: translateY(0);

    box-shadow:
        0 2px 7px rgba(107,127,74,.13);
}


/* Focus */

#com-users-login__form .com-users-login__submit button[type="submit"]:focus-visible {

    outline: none;

    box-shadow:
        0 0 0 3px rgba(107,127,74,.13),
        0 4px 12px rgba(107,127,74,.15);
}


/* ================================================================
   SUCCESS STATE
   Joomla adds:
   .has-success
   .form-control-success
   ================================================================ */

#com-users-login__form .has-success input {

    border-color: transparent !important;

    background: #f8f7f4;
}


/* Don't show Bootstrap green validation styling */

#com-users-login__form .form-control-success {

    background-image: none !important;
}


/* ================================================================
   ERROR STATE
   ================================================================ */

#com-users-login__form .has-error input,
#com-users-login__form input[aria-invalid="true"] {

    border-color: rgba(185,75,75,.45) !important;

    background: #fffafa;

    box-shadow:
        0 0 0 3px rgba(185,75,75,.06);
}


/* ================================================================
   HIDDEN RETURN / TOKEN
   ================================================================ */

#com-users-login__form input[type="hidden"] {

    display: none;
}


/* ================================================================
   AUTOFILL
   ================================================================ */

#com-users-login__form input:-webkit-autofill,
#com-users-login__form input:-webkit-autofill:hover,
#com-users-login__form input:-webkit-autofill:focus {

    -webkit-text-fill-color: #292925;

    box-shadow:
        0 0 0 1000px #f8f7f4 inset !important;

    transition:
        background-color 9999s ease-in-out 0s;
}


/* ================================================================
   MOBILE
   ================================================================ */

@media (max-width: 480px) {

    #com-users-login__form {

        max-width: 100%;
        margin: 0;
        border-left: none;
        border-right: none;

        box-shadow: none;
    }
}


/* ================================================================
   REDUCED MOTION
   ================================================================ */

@media (prefers-reduced-motion: reduce) {

    #com-users-login__form *,
    #com-users-login__form *::before,
    #com-users-login__form *::after {

        transition: none !important;
        animation: none !important;
    }
}

/* ================================================================

/* ================================================================

/* ================================================================
   OTP LIVE CHECK — حلقهٔ نئونیِ چرخان دورِ هر کادر، با فاصلهٔ کافی
   بین کادرها تا حلقه‌ها روی هم نروند؛ سپس کادرها به‌وسط جمع شده و
   یک کادرِ سبزِ هم‌عرضِ خودشان با تیکِ متحرک ظاهر می‌شود.
   ================================================================ */

/* فاصلهٔ کادرها — حلقه دقیقاً هم‌سایزِ کادر است پس نیازی به فاصلهٔ زیاد نیست */
.smslogin-otp-digits { gap: .55rem; }
@media (max-width: 760px) { .smslogin-otp-digits { gap: .5rem; } }
@media (max-width: 350px) { .smslogin-otp-digits { gap: .4rem; } }

/* کادرِ پر سفید بماند تا حلقه تنها نشانگر باشد */
.smslogin-otp-digits input.filled {
    color: var(--sl-text);
    background: #fff;
    border-color: var(--sl-border);
}

.sl-otp-cell { position: relative; display: flex; align-items: center; }

/* حلقهٔ SVG دقیقاً روی خودِ کادر قرار می‌گیرد و در هر تعدادِ ارقام
   دورِ کادر می‌ماند (بدون بزرگ‌نمایی یا جابه‌جایی که قوس از کادر بیرون بزند) */
.sl-otp-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    border-radius: 10px;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
        z-index: -1;

}
.sl-otp-ring rect { fill: none; }
.sl-ring-base { stroke-width: 2; opacity: .85; stroke: var(--sl-border); }
.sl-ring-arc {
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 18 82;
    stroke-dashoffset: 100;
    opacity: 0;
    /* چرخش از لحظهٔ ساختِ کادرها شروع می‌شود تا همه هم‌فاز و یکسان بچرخند */
    animation: slRingMove 1.8s linear infinite;
}

/* درست → حلقهٔ ظریفِ سبز (هم‌فاز با بقیهٔ کادرها) */
.sl-otp-cell.ok .sl-ring-base { opacity: 1; stroke: rgba(43, 217, 138, .48); }
.sl-otp-cell.ok .sl-ring-arc  { opacity: .8; stroke: #2bd98a; filter: drop-shadow(0 0 3px rgba(43, 217, 138, .3)); }

/* غلط → حلقهٔ ظریفِ قرمز (هم‌فاز با بقیهٔ کادرها) */
.sl-otp-cell.no .sl-ring-base { opacity: 1; stroke: rgba(255, 77, 94, .48); }
.sl-otp-cell.no .sl-ring-arc  { opacity: .8; stroke: #ff4d5e; filter: drop-shadow(0 0 3px rgba(255, 77, 94, .3)); }

@keyframes slRingMove { to { stroke-dashoffset: 0; } }

/* لرزشِ کل ردیف وقتی کد غلط است */
.smslogin-otp-digits.is-invalid { animation: slShake .5s ease; }
@keyframes slShake {
    0%,100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* مرحلهٔ ۱: کادرها به‌سمت وسط جمع و محو می‌شوند */
.smslogin-otp-digits.is-merging {
    transform-origin: center;
    animation: slRowMerge .52s ease forwards;
}
@keyframes slRowMerge { to { transform: scale(.02); opacity: 0; } }

/* مرحلهٔ ۲: یک کادرِ هم‌عرضِ خودِ کادرها، سبز، با تیکِ متحرک */
.smslogin-otp-digits.is-done { justify-content: center; }
.smslogin-otp-done {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2fae6b;
    border-radius: var(--sl-r-sm);
    box-shadow: 0 3px 14px rgba(47, 174, 107, .4);
    animation: slDonePop .45s cubic-bezier(.2,.9,.3,1.3);
}
.smslogin-otp-done svg {
    width: 62%;
    height: 62%;
    fill: none;
    stroke: #fff;
    stroke-width: 3.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.smslogin-otp-done svg path {
    stroke-dasharray: 26;
    stroke-dashoffset: 26;
    animation: slTickDraw .5s .18s ease forwards;
}
@keyframes slDonePop {
    0%   { transform: scale(.3); opacity: 0; }
    60%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes slTickDraw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
    .sl-otp-cell .sl-ring-arc,
    .smslogin-otp-digits.is-merging,
    .smslogin-otp-digits.is-invalid,
    .smslogin-otp-done,
    .smslogin-otp-done svg path {
        animation: none !important;
    }
}

/* ================================================================
   MOD_LOGIN — MOBILE USER-MENU STYLE (like Balans user menu)
   On mobile (< 768px): a dark bottom app bar opens a bottom drawer
   that holds the login shell. On desktop the shell shows inline.
   ================================================================ */

.smslogin-mobile {
	--sml-bg: #141414;
	--sml-bg2: #1d1d1d;
	--sml-bg3: #262626;
	--sml-text: #ffffff;
	--sml-muted: #9aa0a6;
	--sml-line: rgba(255, 255, 255, .08);
	--sml-tone: rgba(255, 255, 255, .06);
	--sml-accent: #a0b48c;
	--sml-accent-dk: #8aa073;
	--sml-accent-soft: rgba(160, 180, 140, .16);
	direction: rtl;
	text-align: right;
}

/* Mobile app bar */
.smslogin-mbar {
	display: none; /* only on mobile */
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 12px 14px;
	background: var(--sml-bg2);
	border: 1px solid var(--sml-line);
	border-radius: 16px;
	color: var(--sml-text);
	font-family: inherit;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .25);
}
.smslogin-mbar-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--sml-accent-soft);
	color: var(--sml-accent);
}
.smslogin-mbar-title {
	flex: 1 1 auto;
	min-width: 0;
	text-align: start;
	font-size: 14px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.smslogin-mbar-caret { color: var(--sml-muted); transition: transform .2s ease; }
.smslogin-mbar[aria-expanded="true"] .smslogin-mbar-caret { transform: rotate(180deg); }

/* Desktop: drawer is static, shell shows inline */
@media (min-width: 768px) {
	.smslogin-mbar,
	.smslogin-mbackdrop {
		display: none !important;
	}
	.smslogin-mdrawer {
		position: static;
		transform: none;
		background: transparent;
	}
	.smslogin-mdrawer-handle { display: none; }
}

/* Mobile: bottom drawer */
@media (max-width: 767.98px) {
	.smslogin-mbar { display: flex; }

	.smslogin-mbackdrop {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, .5);
		opacity: 0;
		visibility: hidden;
		transition: opacity .3s ease, visibility .3s;
		z-index: 100000;
		backdrop-filter: blur(2px);
	}
	.smslogin-mbackdrop.is-open { opacity: 1; visibility: visible; }

	.smslogin-mdrawer {
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		left: 0;
		right: 0;
		max-height: 90%;
		background: var(--sml-bg);
		border-top: 1px solid var(--sml-line);
		border-radius: 24px 24px 0 0;
		box-shadow: 0 18px 48px rgba(0, 0, 0, .35);
		transform: translateY(100%);
		transition: transform .32s cubic-bezier(.32, .72, .24, 1);
		z-index: 100001;
		overflow: hidden;
		padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	}
	.smslogin-mdrawer.is-open { transform: translateY(0); }

	.smslogin-mdrawer-handle {
		width: 42px;
		height: 5px;
		border-radius: 999px;
		background: var(--sml-muted);
		opacity: .4;
		margin: 10px auto 2px;
	}

	.smslogin-mdrawer .smslogin-shell {
		max-height: 80vh;
		overflow-y: auto;
		overscroll-behavior: contain;
		margin: 0 auto;
		border-radius: 0;
		border: 0;
		box-shadow: none;
		background: var(--sml-bg);
		color: var(--sml-text);
	}

	/* Dark overrides for the shell inside the drawer */
	.smslogin-mdrawer .smslogin-shell {
		--sl-surface: var(--sml-bg);
		--sl-surface2: var(--sml-bg2);
		--sl-border: var(--sml-line);
		--sl-border-lt: var(--sml-line);
		--sl-accent: var(--sml-accent);
		--sl-accent-dk: var(--sml-accent-dk);
		--sl-accent-lt: var(--sml-accent-soft);
		--sl-text: var(--sml-text);
		--sl-muted: var(--sml-muted);
		--sl-muted-lt: #6f757a;
	}
	.smslogin-mdrawer .smslogin-header {
		background: var(--sml-bg);
		border-bottom: 1px solid var(--sml-line);
	}
	.smslogin-mdrawer .smslogin-tabs { background: var(--sml-bg3); }
	.smslogin-mdrawer .smslogin-tab { color: var(--sml-muted); }
	.smslogin-mdrawer .smslogin-tab:hover:not(.is-active) { color: var(--sml-text); background: var(--sml-tone); }
	.smslogin-mdrawer .smslogin-tab.is-active { color: var(--sml-text); background: var(--sml-bg2); }
	.smslogin-mdrawer .smslogin-logo { color: var(--sml-accent); background: var(--sml-accent-soft); }

	.smslogin-mdrawer .smslogin-field input,
	.smslogin-mdrawer .smslogin-field select,
	.smslogin-mdrawer .smslogin-field textarea,
	.smslogin-mdrawer .smslogin-email-pane input[type="text"],
	.smslogin-mdrawer .smslogin-email-pane input[type="email"],
	.smslogin-mdrawer .smslogin-email-pane input[type="password"] {
		background: var(--sml-bg2);
		color: var(--sml-text);
		border: 1px solid transparent;
	}
	.smslogin-mdrawer .smslogin-field input:hover,
	.smslogin-mdrawer .smslogin-field select:hover,
	.smslogin-mdrawer .smslogin-field textarea:hover,
	.smslogin-mdrawer .smslogin-email-pane input:hover {
		background: var(--sml-bg3);
	}
	.smslogin-mdrawer .smslogin-field input:focus,
	.smslogin-mdrawer .smslogin-field select:focus,
	.smslogin-mdrawer .smslogin-field textarea:focus,
	.smslogin-mdrawer .smslogin-email-pane input:focus {
		background: var(--sml-bg);
		border-color: var(--sml-accent);
		box-shadow: 0 0 0 3px var(--sml-accent-soft);
	}
	.smslogin-mdrawer .smslogin-field input::placeholder,
	.smslogin-mdrawer .smslogin-email-pane input::placeholder { color: var(--sml-muted-lt); }

	.smslogin-mdrawer .smslogin-primary,
	.smslogin-mdrawer .smslogin-email-pane button[type="submit"],
	.smslogin-mdrawer .smslogin-email-pane input[type="submit"] {
		color: #0d120b;
		background: var(--sml-accent);
		box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
	}
	.smslogin-mdrawer .smslogin-primary:hover:not(:disabled),
	.smslogin-mdrawer .smslogin-email-pane button[type="submit"]:hover,
	.smslogin-mdrawer .smslogin-email-pane input[type="submit"]:hover {
		background: var(--sml-accent-dk);
		color: #0d120b;
	}
	.smslogin-mdrawer .smslogin-primary.loading::after {
		border-color: rgba(0, 0, 0, .25);
		border-top-color: #0d120b;
	}

	.smslogin-mdrawer .smslogin-link-btn { color: var(--sml-accent); }
	.smslogin-mdrawer .smslogin-link-btn:hover:not(:disabled) { color: var(--sml-accent-dk); }

	.smslogin-mdrawer .smslogin-otp-digits input {
		background: var(--sml-bg2);
		border: 1px solid var(--sml-line);
		color: var(--sml-text);
	}
	.smslogin-mdrawer .smslogin-otp-digits input:focus {
		background: var(--sml-bg);
		border-color: var(--sml-accent);
		box-shadow: 0 0 0 3px var(--sml-accent-soft);
	}
	.smslogin-mdrawer .smslogin-otp-digits input.filled {
		color: var(--sml-accent);
		background: var(--sml-accent-soft);
		border-color: rgba(160, 180, 140, .35);
	}

	.smslogin-mdrawer .smslogin-phone-badge {
		background: var(--sml-bg2);
		border: 1px solid var(--sml-line);
	}
	.smslogin-mdrawer .smslogin-phone-badge strong { color: var(--sml-text); }
	.smslogin-mdrawer .smslogin-phone-badge button { color: var(--sml-accent); }

	.smslogin-mdrawer .smslogin-field label,
	.smslogin-mdrawer .smslogin-email-pane label { color: var(--sml-muted); }

	.smslogin-mdrawer .sl-ring-track { stroke: var(--sml-line); }
	.smslogin-mdrawer .sl-ring-fill { stroke: var(--sml-accent); }
	.smslogin-mdrawer .sl-cd-text { color: var(--sml-muted); }

	/* Joomla mod_login email form — tidy inside the dark drawer */
	.smslogin-mdrawer .smslogin-email-pane .input-group {
		border: none;
		background: transparent;
		box-shadow: none;
	}
	.smslogin-mdrawer .smslogin-email-pane .input-password-toggle {
		color: var(--sml-muted);
		background: var(--sml-bg2);
		border: 1px solid transparent;
		border-inline-start: 1px solid var(--sml-line);
		border-radius: 0 11px 11px 0;
	}
	.smslogin-mdrawer .smslogin-email-pane .input-password-toggle:hover,
	.smslogin-mdrawer .smslogin-email-pane .input-password-toggle:focus {
		color: var(--sml-accent);
		background: var(--sml-bg3);
	}
	.smslogin-mdrawer .smslogin-email-pane .input-group-text {
position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: transparent;
    border: none;
    color: #888880;
    padding:11px 20px;
	}
	.mod-login__username.form-group, .mod-login__password.form-group, .mod-login__remember.form-group {
    margin: 25px 0;
}
}

@media (prefers-reduced-motion: reduce) {
	.smslogin-mdrawer,
	.smslogin-mbackdrop,
	.smslogin-mbar-caret {
		transition: none !important;
	}
}
ul.mod-login__options.list-unstyled {
    padding: 0 5px;
    margin-top: 15px;
}