@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800;900&family=Great+Vibes&family=DM+Sans:wght@400;500;600;700;800&display=swap');

/* =========================================================
   INSANE LABAN — LOGIN
   Same design system as the rest of the customer pages.
   Class names, layout and breakpoints unchanged — this is a reskin.
========================================================= */

:root{
    --navy-900:#04102a;
    --navy-800:#071a3a;
    --navy-700:#0d2a55;
    --gold:#d9a441;
    --gold-soft:#e8bd68;
    --violet:#6b3df5;
    --violet-hi:#7f57ff;

    --line:rgba(255,255,255,.12);
    --surface:rgba(255,255,255,.05);
    --field:rgba(255,255,255,.06);
    --text-mute:rgba(255,255,255,.7);
    --text-dim:rgba(255,255,255,.5);

    --green:#6ddc9d;
    --red:#ff8f8a;

    --display:"Playfair Display",Georgia,serif;
    --script:"Great Vibes",cursive;
    --sans:"DM Sans",Arial,sans-serif;
}


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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{min-height:100%}

body{
    min-height:100vh;
    background:
        radial-gradient(circle at 15% 10%,rgba(64,131,192,.28),transparent 45%),
        radial-gradient(circle at 85% 80%,rgba(107,61,245,.16),transparent 50%),
        var(--navy-900);
    color:#fff;
    font-family:var(--sans);
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-font-smoothing:antialiased;
}

:focus-visible{outline:3px solid var(--gold-soft);outline-offset:3px;border-radius:6px}


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

.login-page{
    width:100%;
    min-height:calc(100vh - 68px);
    margin-left:0;
    padding:50px;
    display:grid;
    grid-template-columns:
        minmax(200px,250px)
        minmax(400px,500px)
        minmax(300px,420px);
    gap:70px;
    justify-content:center;
    align-items:center;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.left-content h1{
    color:#fff;
    font-family:var(--display);
    font-size:3.6rem;
    font-weight:800;
    line-height:1.08;
    letter-spacing:-1px;
}

.line{
    width:60px;
    height:2px;
    margin:30px 0;
    background:var(--gold);
}

.left-content p{
    color:var(--text-mute);
    font-size:15px;
    line-height:1.8;
}

.copyright{
    margin-top:80px;
    color:var(--text-dim);
    font-size:.85rem;
}


/* =========================================================
   LOGIN CARD
========================================================= */

.login-card{
    position:relative;
    width:100%;
    padding:45px;
    border:1px solid rgba(232,189,104,.2);
    border-radius:32px;
    background:
        radial-gradient(circle at 85% 8%,rgba(64,131,192,.3),transparent 55%),
        linear-gradient(135deg,#0a2a50,#062038);
    box-shadow:0 24px 60px rgba(3,16,40,.55);
    overflow:visible;
}

.login-card::before{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    top:-100px;
    left:-100px;
    z-index:-1;
    border-radius:50%;
    background:rgba(107,61,245,.22);
    filter:blur(80px);
    pointer-events:none;
}


/* WELCOME */

.welcome-tag{
    display:block;
    margin-bottom:18px;
    color:var(--gold-soft);
    font-size:11px;
    font-weight:700;
    letter-spacing:3px;
    text-align:center;
    text-transform:uppercase;
}

.login-card h2{
    margin-bottom:14px;
    color:#fff;
    font-family:var(--display);
    font-size:2.9rem;
    font-weight:800;
    line-height:1.08;
    letter-spacing:-1px;
    text-align:center;
}

.subtitle{
    margin-bottom:36px;
    color:var(--text-mute);
    font-size:14px;
    text-align:center;
}


/* =========================================================
   MESSAGES
========================================================= */

.success-message,
.error-message{
    display:flex;
    align-items:center;
    gap:9px;
    margin-bottom:20px;
    padding:13px 15px;
    border-radius:11px;
    font-size:13px;
    line-height:1.45;
}

.success-message{
    border:1px solid rgba(46,190,110,.35);
    background:rgba(46,190,110,.12);
    color:var(--green);
}

.error-message{
    border:1px solid rgba(255,143,138,.35);
    background:rgba(255,143,138,.12);
    color:var(--red);
}


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

.login-card label{
    display:block;
    margin-bottom:10px;
    color:#fff;
    font-size:13.5px;
    font-weight:700;
}

.input-box{
    width:100%;
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:22px;
    padding:15px 18px;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--field);
    transition:border-color .3s ease,box-shadow .3s ease;
}

.input-box i{
    flex-shrink:0;
    color:var(--gold-soft);
}

.input-box input{
    flex:1;
    min-width:0;
    border:none;
    outline:none;
    background:none;
    color:#fff;
    font-family:inherit;
    font-size:14px;
}

.input-box input::placeholder{color:rgba(255,255,255,.38)}

.input-box:focus-within{
    border-color:var(--violet-hi);
    box-shadow:0 0 0 4px rgba(127,87,255,.2);
}

/* the eye toggle is a control, so it reads as tappable */
#togglePassword{cursor:pointer}

/* stops Chrome autofill painting fields white with black text */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
    -webkit-text-fill-color:#fff;
    -webkit-box-shadow:0 0 0 1000px #0d2247 inset;
    caret-color:#fff;
    transition:background-color 9999s ease-in-out 0s;
}


/* FORGOT */

.forgot-row{
    margin-bottom:24px;
    text-align:right;
}

.forgot-row a{
    color:var(--gold-soft);
    text-decoration:none;
    font-size:13px;
    font-weight:600;
}

.forgot-row a:hover{text-decoration:underline;text-underline-offset:3px}


/* LOGIN BUTTON */

.login-btn{
    width:100%;
    padding:18px;
    border:none;
    border-radius:14px;
    background:linear-gradient(135deg,var(--violet),#5b30dc);
    color:#fff;
    font-family:var(--sans);
    font-size:1rem;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 14px 30px -12px rgba(84,48,210,.95);
    transition:transform .2s ease,background .2s ease;
}

.login-btn:hover{background:var(--violet-hi)}

.login-btn:active{transform:scale(.99)}


/* =========================================================
   DIVIDER
========================================================= */

.divider{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin:28px 0;
    color:var(--text-dim);
    font-size:12px;
    letter-spacing:1px;
}

.divider::before,
.divider::after{
    content:"";
    flex:1;
    height:1px;
    background:var(--line);
}


/* =========================================================
   GOOGLE LOGIN
   Google's brand guidelines require the button stay light
   with their own wordmark colours, so it is left as-is.
========================================================= */

.google-login-btn{
    position:relative;
    width:100%;
    height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:0 20px;
    border:1px solid #d9d9d9;
    border-radius:14px;
    background:#ffffff;
    color:#202124;
    font-family:Arial,sans-serif;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:background .2s ease,border-color .2s ease,box-shadow .2s ease;
}

.google-login-btn:hover{
    background:#f8f9fa;
    border-color:#c6c6c6;
    box-shadow:0 6px 16px rgba(0,0,0,.25);
}

.google-login-btn:active{transform:scale(.99)}

.google-login-btn .google-icon{
    width:20px !important;
    height:20px !important;
    min-width:20px;
    min-height:20px;
    max-width:20px !important;
    max-height:20px !important;
    object-fit:contain;
    display:block;
}

.google-login-btn span{line-height:1}


/* =========================================================
   SIGN UP
========================================================= */

.signup-text{
    margin-top:28px;
    color:var(--text-mute);
    font-size:13px;
    text-align:center;
}

.signup-text a{
    color:var(--gold-soft);
    text-decoration:none;
    font-weight:700;
}

.signup-text a:hover{text-decoration:underline;text-underline-offset:3px}


/* =========================================================
   DESSERT IMAGE
========================================================= */

.dessert-image{
    position:relative;
    width:100%;
    height:650px;
    border:1px solid var(--line);
    border-radius:24px;
    overflow:hidden;
    transform:none;
}

.dessert-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        rgba(4,16,42,.9) 0%,
        rgba(4,16,42,.35) 22%,
        rgba(4,16,42,0) 50%
    );
    pointer-events:none;
}

.dessert-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:.5s;
}

.dessert-image:hover img{transform:scale(1.04)}


/* =========================================================
   ADMIN SECRET LINK
========================================================= */

.admin-secret-link,
.admin-secret-link:hover,
.admin-secret-link:focus,
.admin-secret-link:visited,
.admin-secret-link:active{
    color:var(--text-dim);
    text-decoration:none;
    font-family:inherit;
    font-size:inherit;
    font-weight:inherit;
    line-height:inherit;
    cursor:default;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1100px){

    .login-page{
        grid-template-columns:200px minmax(400px,500px);
        gap:45px;
        padding:40px 30px;
    }

    .dessert-image{display:none}

    .left-content h1{font-size:3rem}
}


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

@media (max-width:768px){

    body{
        min-height:100vh;
        overflow-x:hidden;
        overflow-y:auto;
        padding-top:68px;
    }

    .login-page{
        width:100%;
        min-height:calc(100vh - 68px);
        height:auto;
        margin:0;
        padding:28px 16px 40px;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:flex-start;
        gap:0;
    }

    .left-content,
    .dessert-image{display:none}

    .login-card{
        width:100%;
        max-width:500px;
        margin:0;
        padding:34px 22px 30px;
        border-radius:26px;
        box-shadow:0 18px 45px rgba(3,16,40,.5);
    }

    .login-card::before{
        width:220px;
        height:220px;
        top:-80px;
        left:-80px;
        filter:blur(65px);
    }

    .welcome-tag{
        margin-bottom:16px;
        font-size:10px;
        letter-spacing:2.4px;
    }

    .login-card h2{
        margin-bottom:12px;
        font-size:2.3rem;
        line-height:1.08;
    }

    .subtitle{
        margin-bottom:28px;
        font-size:13px;
    }

    .login-card label{
        margin-bottom:8px;
        font-size:13px;
    }

    .input-box{
        margin-bottom:18px;
        padding:13px 15px;
        border-radius:13px;
    }

    /* 16px stops iOS zooming the page on focus */
    .input-box input{font-size:16px}

    .forgot-row{margin-bottom:20px}

    .login-btn{
        padding:16px;
        border-radius:13px;
        font-size:15px;
    }

    .divider{margin:24px 0}

    .google-login-btn{
        height:52px;
        border-radius:13px;
        font-size:14px;
    }

    .signup-text{
        margin-top:24px;
        font-size:13px;
    }
}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width:380px){

    .login-page{padding:20px 12px 30px}

    .login-card{
        padding:28px 18px 25px;
        border-radius:22px;
    }

    .login-card h2{font-size:2rem}

    .subtitle{margin-bottom:24px}

    .input-box{padding:12px 14px}

    .google-login-btn{height:50px}
}


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

@media (prefers-reduced-motion:reduce){
    *{animation:none !important;transition:none !important}
}/* =========================================================
   DESKTOP LAYOUT FIX  (v2)

   REPLACE the previous "DESKTOP LAYOUT FIX" block at the
   bottom of css/login.css with this one. Don't keep both.

   Fixes:
   - fixed column widths could total more than the space left
     beside the sidebar, so the image clipped off the right
   - the left column was narrower than the word
     "Unforgettable." at 3.2rem, so it ran under the card
========================================================= */


/* ---------------------------------------------------------
   LARGE DESKTOP
--------------------------------------------------------- */

@media (min-width:1101px){

    .login-page{
        /* left padding clears the fixed sidebar */
        padding:40px 40px 40px 180px;

        /* fr units divide the space that's actually left,
           so the grid can never overflow the viewport */
        grid-template-columns:
            minmax(240px,1.1fr)
            minmax(400px,480px)
            minmax(240px,1fr);

        gap:45px;

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

    /* sized so "Unforgettable." fits its column at any width */
    .left-content h1{
        font-size:clamp(1.9rem,2.4vw,2.8rem);
        letter-spacing:-.5px;
    }

    .left-content p{
        max-width:34ch;
        font-size:14.5px;
    }

    .line{margin:24px 0}

    .copyright{
        margin-top:45px;
        font-size:.8rem;
    }

    .login-card{padding:40px}

    .login-card h2{font-size:2.5rem}

    .dessert-image{
        height:min(600px,76vh);
    }

    /* the photo is light, so the fade needs to be strong at the
       edge to blend into the navy rather than grey the image out */
    .dessert-image::after{
        background:linear-gradient(
            90deg,
            rgba(4,16,42,.95) 0%,
            rgba(4,16,42,.4) 12%,
            rgba(4,16,42,0) 34%
        );
    }
}


/* ---------------------------------------------------------
   VERY WIDE SCREENS
   Stops the three columns drifting apart on large monitors.
--------------------------------------------------------- */

@media (min-width:1700px){

    .login-page{
        max-width:1600px;
        margin-inline:auto;
        padding-left:60px;
    }
}


/* ---------------------------------------------------------
   SMALL DESKTOP / TABLET — sidebar narrows to 90px
   Image is already hidden at this width.
--------------------------------------------------------- */

@media (min-width:769px) and (max-width:1100px){

    .login-page{
        padding:40px 30px 40px 140px;
        grid-template-columns:minmax(220px,1fr) minmax(380px,500px);
        gap:40px;
        justify-content:stretch;
    }

    .left-content h1{font-size:clamp(1.8rem,3vw,2.5rem)}
}