@media screen and (max-width:1440px){
    .form-wrap.form-builder{
        min-width: 1100px !important;
    }
}
@media screen and (max-width:1024px){
    .form-wrap.form-builder{
        min-width: 830px !important;
    }
}
@media screen and (max-width:768px){
    /* .reload-position{
        position: relative;
        right: -315px;
    } */
    .form-check.form-switch {
        width: 100% !important;
    }
    .grid-tab-2{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .largemr-17 {
        margin-right: auto;
    }
    .form-wrap.form-builder .cb-wrap{
        inset: 0px auto auto 0px !important;
    }
    .form-wrap.form-builder .frmb-control li::before {
        font-size: 20px !important;
    }
    .form-wrap.form-builder {
        min-width: 580px !important;
    }
    .mob-scroll{
        overflow: scroll !important;
    }
}
@media screen and (max-width:425px){
    .small-margin{
        margin-right: 24px;
    }
    /* .reload-position {
        position: relative;
        right: -115px;
    } */
    .grid-mob-1{
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .mrgn-0{
        margin-top: 0 !important;
    }
    .mini-scrn-drpdwn{
        transform: translate3d(-132px, 139px, 0px) !important;
    }
    .form-wrap.form-builder .cb-wrap{
        inset: 0px auto auto 0px !important;
    }
    .form-wrap.form-builder .frmb-control li::before {
        font-size: 20px !important;
    }
    .form-wrap.form-builder {
        min-width: 370px !important;
    }
    .mini-scrn-drpdwn.show > .dropdown-content{
        width: 350px !important;
    }
    .notif-scroll{
        min-width: 300px !important;
    }
    .mob-scroll{
        overflow: scroll !important;
    }
    .login .login__input-phone {
        min-width: 255px !important;
    }
}
@media screen and (max-width:375px){
    /* .reload-position {
        position: relative;
        right: -90px;
    } */
    .mini-screen{
        display: flex;
        flex-wrap: wrap;
        height: 60px;
    }
    .mini-scrn-lang{
        margin-right: 0rem !important;
        margin-left: auto;
    }
    .mini-scrn-drpdwn{
        transform: translate3d(-83px, 180px, 0px) !important;
    }
    /* .mini-scrn-drpdwn-ac{
        transform: translate3d(-30px, 190px, 0px) !important;
    } */
    .mini-scrn-drpdwn.show > .dropdown-content{
        width: 350px !important;
    }
    .dropdown-item {
        width: 310px;
    }
    .form-wrap.form-builder {
        min-width: 320px !important;
    }
    .notif-scroll{
        min-width: 300px !important;
    }
    .login .login__input-phone {
        min-width: 200px !important;
    }

}
@media screen and (max-width:320px){
    /* .reload-position {
        position: relative;
        right: -40px;
    } */
    .mini-screen{
        display: flex;
        flex-wrap: wrap;
        height: 95px;
    }
    /* .mini-scrn-lang{
        margin-right: 30px !important;
        margin-left: 0rem;
    } */
    .mini-scrn-drpdwn{
        transform: translate3d(-28px, 180px, 0px) !important;
    }
    .mini-scrn-drpdwn.show > .dropdown-content{
        width: 295px !important;
    }
    .dropdown-item {
        width: 258px;
    }
    .notif-scroll{
        min-width: 265px !important;
    }
    /* .mytoggle{
        position: absolute !important;
        top: 0px !important;
        left: -206px !important;
    } */
}
.form-check.form-switch {
    width: 68%;
}
.bg_img{
    height: 300px;
    width: 500px;
}
.uploadprofileimg{
    width: 150px;
    height: 150px
}
.logosize_new {
    height: 100px;
    width: 100px;
}
.logo_size-giftp {
    height: 90px;
    width: 150px;
    float: right !important;
}

.invalid-div{
    color: #DC2C2B;

}
.mini-scrn-drpdwn.show > .dropdown-content{
    width: 400px;
}
.form-wrap.form-builder{
    min-width: 1010px !important;
}
.form-control:disabled, .form-control[readonly]{
    background-color: #fff !important;
}

/* Country flag */
.iti{
    width: 100%;
}
.btn-signup-web {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    font-size: 15px;
    font-weight: 500;
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

/* signup design */
.signup{
    position: relative;
    /* overflow: hidden; */
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    /* padding-left: 2rem;
    padding-right: 2rem; */
}
@media (max-width: calc(1280px - 1px)) {
    .signup{
        --tw-bg-opacity: 1;
        background-color: rgb(var(--color-primary) / var(--tw-bg-opacity));
    }
  }
/* .signup:before {
        content: "";
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        margin-top: -28%;
        margin-bottom: -15%;
        margin-left: -13%;
        width: 50%;
        --tw-rotate: -4deg;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        border-radius: 100%;
        background-color: rgb(var(--color-primary) / 0.0);
    } */

@media (max-width: calc(1280px - 1px)) {
        .signup:before{
            display: none;
        }
    }
/* .signup:after {
        content: "";
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        margin-top: -20%;
        margin-bottom: -12%;
        margin-left: -13%;
        width: 50%;
        --tw-rotate: -4deg;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        border-radius: 100%;
        --tw-bg-opacity: 1;
        background-color: #EEEEEE;
        background-image: url(../images/signupbg.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    } */
@media (max-width: calc(1280px - 1px)) {
    .signup:after{
        display: none;
    }
    } 
    
    .signup .signup {
        min-width: 300px;
    }
    .iti--allow-dropdown input, .iti--allow-dropdown input[type=text], .iti--allow-dropdown input[type=tel], .iti--separate-dial-code input, .iti--separate-dial-code input[type=text], .iti--separate-dial-code input[type=tel]{
        padding-right: 80px !important;
    }
    .left-divider{
        margin: 8px;
        width: 100%;
        height: 1px;
        background-color: #e5e5e5;
    }
    .right-divider{
        margin: 8px;
        width: 100%;
        height: 1px;
        background-color: #e5e5e5;
    }

/* ==========================================================================
   Tenant login page redesign
   ========================================================================== */

/* ── RESET: Override app.css .login conflicts ──
   app.css sets overflow:hidden + padding:2rem on body.login,
   which kills scrolling and creates the white gaps on top/left. */
body.login {
    background: #fff;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 0 !important;
    margin: 0;
}
/* Suppress the old decorative circles from app.css that can overflow */
body.login::before,
body.login::after { display: none !important; }

/* ── Overall wrapper ── */
.sn-login-wrapper { display: flex; min-height: 100vh; padding: 0; margin: 0; }
/* grid needs min-height so panels stretch full viewport and the
   absolutely-positioned custom image has a real height to fill */
.sn-login-grid   { display: flex; width: 100%; min-height: 100vh; }

/* ── Left brand panel ── */
.sn-panel-left {
    flex: 0 0 45%;
    background: var(--color-primary, #e85e93);
    position: relative;
    overflow: hidden;
    padding: 2.5rem 3rem;
    flex-direction: column;
    min-height: 100vh;
}
/* Full-bleed custom image mode — entire left side replaced by uploaded image */
.sn-panel-left--custom { padding: 0 !important; background: none !important; }
.sn-panel-left--custom::before,
.sn-panel-left--custom::after { display: none !important; }
.sn-panel-custom-img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
    display: block;
}

.sn-panel-left::before {
    content: "";
    position: absolute;
    bottom: -120px; right: -120px;
    width: 420px; height: 420px;
    background: rgba(255,255,255,.08);
    border-radius: 50%;
}
.sn-panel-left::after {
    content: "";
    position: absolute;
    top: -80px; left: -80px;
    width: 280px; height: 280px;
    background: rgba(255,255,255,.06);
    border-radius: 50%;
}
.sn-panel-logo img { height: 52px; width: auto; }
.sn-panel-body { position: relative; z-index: 1; }
.sn-login-illustration {
    width: 62%;
    max-height: 320px;
    object-fit: contain;
    display: block;
    margin-bottom: 2.5rem;
}
.sn-panel-headline {
    font-size: 2.1rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    margin-bottom: .9rem;
}
.sn-panel-sub {
    font-size: 1rem;
    color: rgba(255,255,255,.75);
    line-height: 1.6;
}

/* ── Right form panel ── */
.sn-panel-right {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 3rem 2rem;
    background: linear-gradient(160deg, #fff 60%, #fdf4f8 100%);
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}
.sn-panel-right::before {
    content: "";
    position: absolute;
    top: -160px; right: -160px;
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(232,94,147,.10), transparent 70%);
    border-radius: 50%;
}
.sn-panel-right::after {
    content: "";
    position: absolute;
    bottom: -120px; left: -80px;
    width: 340px; height: 340px;
    background: radial-gradient(circle, rgba(63,28,81,.06), transparent 70%);
    border-radius: 50%;
}
/* ── Single prominent logo above the card ── */
.sn-right-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 420px;
    position: relative;
    z-index: 1;
}
.sn-brand-logo {
    margin-bottom: 1.75rem;
    text-align: center;
    width: 100%;
}
.sn-brand-logo img {
    height: auto;
    width: 300px;
    max-width: 90%;
    display: inline-block;
    filter: drop-shadow(0 4px 12px rgba(63,28,81,.12));
}

/* ── Login card ── */
.sn-login-card {
    background: #fff;
    border-radius: 20px;
    padding: 2.75rem 2.5rem;
    width: 100%;
    box-shadow: 0 24px 60px rgba(63,28,81,.12), 0 4px 16px rgba(63,28,81,.06);
    border: 1px solid rgba(63,28,81,.06);
    position: relative;
    z-index: 1;
}
.sn-card-heading {
    font-size: 1.75rem;
    font-weight: 800;
    color: #1a1032;
    margin-bottom: .4rem;
    line-height: 1.2;
}
.sn-card-sub {
    font-size: .95rem;
    color: #6b7280;
    margin-bottom: 1.75rem;
}

/* ── Fields ── */
.sn-fields { display: flex; flex-direction: column; gap: .9rem; margin-bottom: 1rem; }
.sn-input-group { position: relative; }
.sn-input-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 14px;
    pointer-events: none;
    z-index: 50;
}
.sn-input {
    width: 100%;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: .85rem 1rem .85rem 2.75rem !important;
    font-size: 1rem !important;
    color: #111827;
    background: #fafafa !important;
    transition: border-color .15s, box-shadow .15s, background .15s !important;
    outline: none !important;
    height: auto !important;
}
.sn-input:focus {
    border-color: var(--color-primary, #e85e93) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(232,94,147,.15) !important;
}
.sn-input-with-icon { padding-left: 2.75rem !important; }

/* ── Remember me ── */
.sn-remember {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    color: #6b7280;
    margin-bottom: 1.5rem;
}

/* ── Sign in button ── */
.sn-signin-btn {
    display: block;
    width: 100%;
    padding: .9rem 1.5rem;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: #fff;
    background: linear-gradient(135deg, var(--color-primary, #e85e93) 0%, #c2487a 100%);
    box-shadow: 0 10px 28px rgba(232,94,147,.38);
    transition: transform .15s, box-shadow .15s, opacity .15s;
}
.sn-signin-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(232,94,147,.48);
    opacity: .95;
}
.sn-signin-btn:active { transform: translateY(0); }

/* ── Terms ── */
.sn-card-terms { text-align: center; margin-top: 1.5rem; margin-bottom: 0; }
.sn-terms-link {
    color: #9ca3af;
    font-size: .8rem;
    text-decoration: none;
    transition: color .15s;
}
.sn-terms-link:hover { color: var(--color-primary, #e85e93); }

/* ── Error banner ── */
.sn-error-banner {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    border-radius: 8px;
    padding: .65rem 1rem;
    font-size: .875rem;
    margin-bottom: 1rem;
}

/* ── Mobile / tablet (old two-panel layout) ── */
@media (max-width: 1279px) {
    body.login { background-color: #fff !important; }
    .sn-login-wrapper { align-items: flex-start; }
    .sn-panel-right {
        min-height: 100vh;
        background: linear-gradient(160deg,#fff 60%,#fdf4f8 100%);
        padding: 2rem 1rem;
        overflow-y: auto;
    }
    .sn-login-card { max-width: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   LOGIN V2 — Centered single-column, mesh background, salon tools
   ══════════════════════════════════════════════════════════════ */

/* ── Page shell ── */
.sn2-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background-color: #edeaf5;
    /* Subtle geometric mesh using overlapping diagonal grids */
    background-image:
        linear-gradient(rgba(185,178,210,0.38) 1px, transparent 1px),
        linear-gradient(90deg, rgba(185,178,210,0.38) 1px, transparent 1px),
        linear-gradient(45deg, rgba(185,178,210,0.18) 1px, transparent 1px),
        linear-gradient(-45deg, rgba(185,178,210,0.18) 1px, transparent 1px);
    background-size: 52px 52px, 52px 52px, 73px 73px, 73px 73px;
}

/* ── Decorative salon tool icons ── */
.sn2-tool {
    position: absolute;
    color: #bdb6d0;
    pointer-events: none;
    user-select: none;
}
/* Bottom-left: large scissors */
.sn2-tool-1 { font-size: 6.5rem; bottom: 50px; left: 50px; transform: rotate(-30deg); }
/* Bottom-left: comb */
.sn2-tool-2 { font-size: 3.8rem; bottom: 60px; left: 185px; transform: rotate(15deg); }
/* Top-left: scissors */
.sn2-tool-3 { font-size: 3.8rem; top: 50px; left: 80px; transform: rotate(50deg); }
/* Top-right: scissors */
.sn2-tool-4 { font-size: 3.2rem; top: 30px; right: 110px; transform: rotate(-22deg); }
/* Right-upper: comb */
.sn2-tool-5 { font-size: 2.8rem; top: 110px; right: 55px; transform: rotate(-8deg); }
/* Right-middle: scissors */
.sn2-tool-6 { font-size: 4.8rem; top: 52%; right: 45px; transform: translateY(-50%) rotate(62deg); }

/* ── Centered content column ── */
.sn2-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 390px;
    padding: 2rem 1.25rem;
    position: relative;
    z-index: 1;
}

/* ── Logo ── */
.sn2-logo-wrap { text-align: center; margin-bottom: 1.2rem; }
.sn2-logo-img  { height: 62px; width: auto; display: block; margin: 0 auto; }
.sn2-tagline   {
    margin: 0.25rem 0 0;
    font-size: 0.76rem;
    color: #9992b0;
    font-style: italic;
    letter-spacing: 0.05em;
}

/* ── Card ── */
.sn2-card {
    width: 100%;
    background: rgba(255,255,255,0.94);
    border: 1.5px solid rgba(155,105,175,0.28);
    border-radius: 14px;
    padding: 1.75rem 1.75rem 1.5rem;
    box-shadow: 0 6px 30px rgba(70,30,90,0.10), 0 1px 6px rgba(70,30,90,0.06);
    backdrop-filter: blur(4px);
}

/* ── Form fields ── */
.sn2-field {
    position: relative;
    margin-bottom: 1rem;
}
.sn2-field-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #b0a8c8;
    font-size: 13px;
    pointer-events: none;
    z-index: 1;
}
.sn2-input {
    width: 100%;
    border: 1px solid #ddd9ea;
    border-radius: 8px;
    padding: 0.72rem 2.4rem;
    font-size: 1rem;
    color: #333;
    background: #fff;
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
.sn2-input::placeholder { color: #c0b8d5; }
.sn2-input:focus {
    border-color: var(--color-primary, #a060a0);
    box-shadow: 0 0 0 3px rgba(155,80,155,0.13);
}
.sn2-input--error { border-color: #ef4444 !important; }

/* Password eye toggle */
.sn2-eye-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #c0b8d5;
    padding: 4px;
    line-height: 1;
    font-size: 13px;
    transition: color .15s;
}
.sn2-eye-btn:hover { color: #806898; }

/* ── Login button ── */
.sn2-login-btn {
    display: block;
    width: 100%;
    padding: 0.78rem 1rem;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--color-primary, #b060a0) 0%, #5e2878 100%);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 0.25rem;
    transition: opacity .15s, transform .1s;
    letter-spacing: 0.02em;
}
.sn2-login-btn:hover  { opacity: .92; transform: translateY(-1px); }
.sn2-login-btn:active { transform: translateY(0); }

/* ── Forgot password ── */
.sn2-forgot-row { text-align: right; margin: 0.65rem 0 0; }
.sn2-forgot-link {
    font-size: 0.78rem;
    color: #b0a8c8;
    text-decoration: none;
    transition: color .15s;
}
.sn2-forgot-link:hover { color: var(--color-primary, #a060a0); }

/* ── Error banner ── */
.sn2-error-banner {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    border-radius: 8px;
    padding: .6rem .9rem;
    font-size: .82rem;
    margin-bottom: 1rem;
}

/* ── Language switcher ── */
.sn2-lang {
    display: flex;
    margin-top: 1.25rem;
    background: rgba(255,255,255,0.85);
    border: 1px solid #ddd9ea;
    border-radius: 20px;
    padding: 3px;
    gap: 2px;
}
.sn2-lang-btn {
    padding: 0.32rem 1.1rem;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.85rem;
    color: #7a728a;
    border-radius: 16px;
    transition: background .15s, color .15s;
    font-family: inherit;
}
.sn2-lang-btn--active {
    background: var(--color-primary, #a060a0);
    color: #fff;
}

/* ── Bottom corners ── */
.sn2-corner-left {
    position: fixed;
    bottom: 1rem;
    left: 1.25rem;
    display: flex;
    gap: 0.5rem;
    z-index: 10;
}
.sn2-corner-right {
    position: fixed;
    bottom: 1rem;
    right: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    z-index: 10;
}
.sn2-copyright { font-size: 0.7rem; color: #b0a8c8; white-space: nowrap; }
.sn2-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #ddd9ea;
    background: rgba(255,255,255,0.9);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9990b0;
    font-size: 12px;
    box-shadow: 0 2px 8px rgba(70,30,90,0.09);
    transition: transform .1s, box-shadow .1s;
    padding: 0;
}
.sn2-icon-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(70,30,90,0.15);
}

/* ── Mobile ── */
@media (max-width: 600px) {
    .sn2-tool-2, .sn2-tool-3, .sn2-tool-5 { display: none; }
    .sn2-tool-1 { font-size: 5rem; bottom: 25px; left: 25px; }
    .sn2-tool-4 { font-size: 2.5rem; top: 20px; right: 60px; }
    .sn2-tool-6 { font-size: 3.5rem; right: 15px; }
    .sn2-center { padding: 1.5rem 1rem; max-width: 100%; }
    .sn2-card   { padding: 1.5rem 1.25rem; border-radius: 12px; }
    .sn2-copyright { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   LOGIN V3 — Full-screen background + glassmorphism card (right)
   Matches design: salon interior bg + frosted card on right side
   ══════════════════════════════════════════════════════════════ */

/* ── Page shell ── */
.sn3-page {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    /* Fallback gradient when no background image is uploaded */
    background: linear-gradient(135deg, #d0c0e0 0%, #a888c8 30%, #c0a8d8 60%, #ede0f4 100%);
    display: flex;
    align-items: stretch;
}

/* Background image URL is set via inline style; size/position via this class so media queries work */
.sn3-page--has-bg {
    background-size: cover;
    background-position: left center;   /* desktop: show SALONI logo on left */
    background-repeat: no-repeat;
}
@media (max-width: 768px) {
    .sn3-page--has-bg {
        background-position: right center; /* mobile: show salon interior on right */
    }
}

/* ── Card wrapper — pushes card to the right, vertically centered ── */
.sn3-card-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    min-height: 100vh;
    /* clamp: min 40px breathing room, scales to 8% of width, capped at 120px.
       This pulls the card away from the right edge proportionally on all screen sizes. */
    padding: 2rem clamp(40px, 8%, 120px) 2rem 2rem;
    box-sizing: border-box;
}

/* ── Glassmorphism card ── */
.sn3-card {
    width: min(400px, 92vw);
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow:
        0 24px 60px rgba(40, 10, 70, 0.22),
        0 4px 16px rgba(40, 10, 70, 0.10),
        inset 0 1px 0 rgba(255,255,255,0.7);
    padding: 2.25rem 2rem;
}
/* Fallback: solid white for browsers without backdrop-filter */
@supports not (backdrop-filter: blur(1px)) {
    .sn3-card { background: rgba(255,255,255,0.92); }
}

/* ── Logo ── */
.sn3-logo {
    text-align: center;
    margin-bottom: 0.75rem;
}
.sn3-logo img {
    height: 40px;
    width: auto;
    display: inline-block;
}

/* ── Headings ── */
.sn3-heading {
    font-size: 1.6rem;
    font-weight: 800;
    color: #1a1032;
    margin: 0 0 0.3rem;
    line-height: 1.2;
}
.sn3-sub {
    font-size: 0.88rem;
    color: #6b7280;
    margin: 0 0 1.4rem;
}

/* ── Fields ── */
.sn3-field {
    position: relative;
    margin-bottom: 1rem;
}
.sn3-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #b0a8c0;
    font-size: 13px;
    pointer-events: none;
    z-index: 1;
}
.sn3-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(200, 192, 220, 0.7);
    border-radius: 9px;
    padding: 0.72rem 2.5rem 0.72rem 2.4rem;
    font-size: 1rem;
    color: #2d2040;
    background: rgba(255,255,255,0.75);
    outline: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.sn3-input::placeholder { color: #c0b8d5; }
.sn3-input:focus {
    border-color: var(--color-primary, #a060a8);
    background: rgba(255,255,255,0.92);
    box-shadow: 0 0 0 3px rgba(155,80,168,0.14);
}
.sn3-input--err { border-color: #ef4444 !important; }

/* Password eye toggle */
.sn3-eye {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #c0b8d5;
    padding: 4px;
    font-size: 13px;
    line-height: 1;
    transition: color .15s;
}
.sn3-eye:hover { color: #7050a0; }

/* ── Remember me + Forgot Password row ── */
.sn3-remember-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}
.sn3-check-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.83rem;
    color: #6b7280;
    cursor: pointer;
    user-select: none;
}
.sn3-checkbox {
    width: 15px;
    height: 15px;
    accent-color: var(--color-primary, #a060a8);
    cursor: pointer;
    flex-shrink: 0;
}
.sn3-forgot {
    font-size: 0.83rem;
    color: #9080b0;
    text-decoration: none;
    transition: color .15s;
}
.sn3-forgot:hover { color: var(--color-primary, #a060a8); }

/* ── Sign In button ── */
.sn3-signin-btn {
    display: block;
    width: 100%;
    padding: 0.8rem 1rem;
    border: none;
    border-radius: 9px;
    background: linear-gradient(to right, var(--color-primary, #c060a0) 0%, #6030a0 100%);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: opacity .15s, transform .1s, box-shadow .15s;
    box-shadow: 0 8px 24px rgba(160,60,140,0.35);
}
.sn3-signin-btn:hover  { opacity: .92; transform: translateY(-1px); box-shadow: 0 12px 30px rgba(160,60,140,0.42); }
.sn3-signin-btn:active { transform: translateY(0); }

/* ── Error banner ── */
.sn3-error-banner {
    background: rgba(254,242,242,0.85);
    border: 1px solid #fecaca;
    color: #dc2626;
    border-radius: 8px;
    padding: .6rem .9rem;
    font-size: .82rem;
    margin-bottom: 1rem;
}

/* ── Footer links ── */
.sn3-footer {
    text-align: center;
    margin: 1.2rem 0 0;
    font-size: 0.75rem;
}
.sn3-footer a {
    color: #9080a8;
    text-decoration: none;
    transition: color .15s;
}
.sn3-footer a:hover { color: var(--color-primary, #a060a8); }
.sn3-footer span { color: #b0a8c0; margin: 0 0.3rem; }

/* ── Mobile: center card, full width ── */
@media (max-width: 768px) {
    .sn3-card-wrap {
        justify-content: center;
        padding: 1.5rem 1rem;
        align-items: center;
    }
    .sn3-card {
        width: min(400px, 96vw);
        padding: 1.75rem 1.25rem;
    }
}

/* ══════════════════════════════════════════════════════════════
   Mobile top bar (.mobile-menu) fixes — mobile view only.
   The theme's own -mt-5/-mx-8 margins push a `position:fixed`
   element off its true 0,0 viewport corner (margins still apply
   to fixed elements), which is why it doesn't sit flush at the
   top. Pin it with explicit inset values instead, make it fully
   opaque, and force it above the in-page .top-bar so the sidebar
   drawer never renders underneath the page header when open.
   ══════════════════════════════════════════════════════════════ */
@media screen and (max-width: 767px) {
    .mobile-menu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;
        background-color: rgb(var(--color-primary)) !important;
    }
    .dark .mobile-menu {
        background-color: rgb(var(--color-darkmode-800)) !important;
    }
    .mobile-menu:before {
        top: 0 !important;
        z-index: 9998 !important;
    }
    .mobile-menu .scrollable {
        z-index: 10000 !important;
    }
    /* Black-to-white gradient overlay, left to right. Kept semi-transparent
       (alpha < 1 at both stops) so the tenant's primary color still tints
       through from the .mobile-menu background behind it. */
    .mobile-menu .mobile-menu-bar {
        background-color: transparent !important;
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.75), rgba(255, 255, 255, 0.2)) !important;
    }
    body:has(.mobile-menu.mobile-menu--active) .top-bar {
        z-index: 1 !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   Global fix: .content is a flex item (flex:1 1 0% in app.css)
   inside the side-nav/content row. Flex items default to
   min-width:auto, meaning they refuse to shrink below the
   intrinsic width of whatever's inside them - so on mobile, any
   single page with a too-wide table/grid/chart silently forces
   the whole page wider than the screen. That's the "phantom zoom"
   bug (page loads looking zoomed in until you pinch back out, and
   the fixed mobile-menu-bar's right-side logo appears to run off
   the edge because the visible area is narrower than the layout).
   This was being patched per-page (booking, dashboard); moving it
   here so every page is protected, including future ones.
   min-width:0 never changes how anything looks when it already
   fits - it only lets .content shrink instead of overflow when it
   doesn't, so this is safe at every screen width. ══════════════ */
.content {
    min-width: 0;
}