:root{
    --hh-burgundy:#721e2b;
    --hh-dark:#4c111b;
    --hh-gold:#c59a45;
    --hh-cream:#f8f0e2;
    --hh-paper:#fffdf9;
    --hh-ink:#24201d;
    --hh-muted:#716861;
    --hh-line:rgba(76,17,27,.13);
}

*{
    box-sizing:border-box;
}

body{
    color:var(--hh-ink);
}

/* ---------- DESKTOP LEFT PANEL ---------- */

.brand-panel{
    background:
        radial-gradient(circle at 20% 15%,rgba(197,154,69,.13),transparent 36%),
        linear-gradient(145deg,#fbf5ea 0%,#f4e8d6 100%) !important;
}

.brand-name{
    color:var(--hh-dark) !important;
}

.brand-subtitle{
    color:var(--hh-burgundy) !important;
}

.eyebrow{
    color:var(--hh-gold) !important;
    letter-spacing:.12em;
}

.brand-content h1{
    color:var(--hh-dark) !important;
}

.brand-description{
    color:var(--hh-muted) !important;
}

.brand-features{
    color:var(--hh-burgundy) !important;
}


/* ---------- LOGIN SIDE ---------- */

.login-panel{
    background:#f7efe3 !important;
}

.login-card{
    max-width:420px !important;
    padding:28px 24px 26px !important;

    background:var(--hh-paper) !important;

    border:1px solid rgba(76,17,27,.06);
    border-radius:16px !important;

    box-shadow:
        0 22px 55px rgba(76,17,27,.07) !important;
}


/* ---------- MOBILE BRAND ---------- */

.mobile-brand strong{
    color:var(--hh-dark) !important;
}

.mobile-brand span{
    color:var(--hh-burgundy) !important;
}


/* ---------- HEADINGS ---------- */

.login-card h2{
    margin:0 !important;

    font-family:Georgia,"Times New Roman",serif;
    font-size:30px !important;
    line-height:1.08;

    color:var(--hh-dark) !important;
}

.portal-label{
    margin-top:5px !important;

    font-family:Georgia,"Times New Roman",serif;
    font-size:18px !important;
    line-height:1.2;

    color:var(--hh-burgundy) !important;
}

.signin-text{
    margin:18px 0 28px !important;

    color:var(--hh-muted) !important;

    font-size:15px;
    line-height:1.55;
}


/* ---------- FORM ---------- */

.login-card label{
    display:block;

    margin:0 0 7px;

    color:var(--hh-ink) !important;

    font-size:14px;
    font-weight:600;
}

.login-card input[type="text"],
.login-card input[type="password"],
.login-card input[type="email"]{
    width:100%;

    height:54px !important;

    padding:0 15px;

    border:1px solid #d8cec5 !important;
    border-radius:10px !important;

    background:#fff !important;

    color:var(--hh-ink);

    font-size:16px;

    box-shadow:none !important;
}

.login-card input[type="text"]:focus,
.login-card input[type="password"]:focus,
.login-card input[type="email"]:focus{
    outline:none;

    border-color:var(--hh-burgundy) !important;

    box-shadow:
        0 0 0 3px rgba(114,30,43,.08) !important;
}

.login-card button[type="submit"],
.login-card input[type="submit"]{
    width:100%;

    height:54px !important;

    margin-top:8px;

    border:0 !important;
    border-radius:10px !important;

    background:var(--hh-burgundy) !important;

    color:#fff !important;

    font-size:16px;
    font-weight:700;

    cursor:pointer;

    box-shadow:none !important;
}

.login-card button[type="submit"]:hover,
.login-card input[type="submit"]:hover{
    background:var(--hh-dark) !important;
}


/* ---------- NEW SUPPLIER ---------- */

.supplier-cta{
    margin-top:30px;

    padding-top:25px;

    border-top:1px solid var(--hh-line);

    text-align:center;
}

.supplier-cta-title{
    margin-bottom:7px;

    color:var(--hh-dark);

    font-size:16px;
    font-weight:700;
}

.supplier-cta p{
    max-width:330px;

    margin:0 auto;

    color:var(--hh-muted);

    font-size:14px;
    line-height:1.5;
}

.vendor-whatsapp-link{
    display:inline-flex;

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

    gap:8px;

    min-height:46px;

    margin-top:16px;

    padding:0 18px;

    border:1px solid rgba(114,30,43,.45);
    border-radius:10px;

    background:#fff;

    color:var(--hh-burgundy) !important;

    text-decoration:none;

    font-size:14px;
    font-weight:700;
}

.vendor-whatsapp-link:hover{
    border-color:var(--hh-burgundy);

    background:#fff8f6;
}

.vendor-whatsapp-icon{
    width:18px;
    height:18px;
}


/* ---------- FOOTER ---------- */

footer{
    color:var(--hh-muted) !important;
}


/* ---------- MOBILE ---------- */

@media(max-width:760px){

    .login-panel{
        min-height:100vh !important;

        padding:18px !important;

        background:
            linear-gradient(180deg,#f8efe2 0%,#f4eadb 100%) !important;
    }

    .login-card{
        margin:18px auto 0 !important;

        padding:28px 24px 26px !important;

        border-radius:16px !important;
    }

    .mobile-brand{
        margin-bottom:30px !important;
    }

    .mobile-brand strong{
        font-size:26px !important;
    }

    .mobile-brand span{
        margin-top:2px !important;

        font-size:17px !important;

        color:var(--hh-burgundy) !important;
    }

    .login-card h2{
        font-size:30px !important;
    }

    .portal-label{
        font-size:18px !important;
    }

    .signin-text{
        margin:14px 0 25px !important;
    }

    .supplier-cta{
        margin-top:27px;

        padding-top:23px;
    }

    .vendor-whatsapp-link{
        width:100%;
    }

    footer{
        margin-top:20px !important;
    }
}

/* Vendor login logo */
.vendor-login-logo{
    display:block;
    width:135px;
    max-width:55vw;
    height:auto;
    margin:0 auto 8px;
}

.mobile-brand span{
    display:block;
    margin-top:0 !important;
    color:var(--hh-burgundy) !important;
    font-family:Georgia,"Times New Roman",serif;
    font-size:17px !important;
}



/* Login brand refinement */
.vendor-brand-wordmark{
    display:block;
    width:175px;
    max-width:65%;
    height:auto;
    margin:2px auto 5px;
}

.mobile-brand span{
    margin-top:2px !important;
}

/* Warm neutral login fields */
.login-card input[type="text"],
.login-card input[type="password"]{
    background:#fffaf1 !important;
}

@media(max-width:760px){
    .vendor-brand-wordmark{
        width:150px;
    }
}

/* Compact mobile login vertically */
@media(max-width:760px){
    .login-panel{
        padding-top:6px !important;
    }

    .login-card{
        margin-top:6px !important;
        padding-top:18px !important;
    }

    .mobile-brand{
        margin-top:0 !important;
        margin-bottom:22px !important;
    }
}

/* Final login cleanup */
.whatsapp-icon{
    width:19px;
    height:19px;
    flex:0 0 19px;
}

.vendor-whatsapp-link{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    gap:8px;
}

@media(max-width:760px){
    .mobile-brand{
        margin-bottom:18px !important;
    }
}

/* More breathing room between login fields */
.login-card .field{
    margin-bottom:20px !important;
}

.login-card .field:last-of-type{
    margin-bottom:24px !important;
}

/* Login field spacing */
.login-card form label[for="password"]{
    margin-top:20px !important;
}

.login-card form button[type="submit"]{
    margin-top:24px !important;
}

/* Official-style WhatsApp green accent */
.vendor-whatsapp-icon{
    color:#25D366 !important;
    fill:#25D366 !important;
}

/* Larger WhatsApp icon */
.vendor-whatsapp-icon{
    width:27px !important;
    height:27px !important;
    flex:0 0 27px !important;
}

/* Vendor portal footer website */
.footer-website{
    display:block;
    margin-top:5px;
    color:#721e2b;
    text-decoration:none;
    font-size:13px;
}

.footer-website:hover{
    text-decoration:underline;
}

.footer-location{
    display:block;
    margin-top:4px;
    font-size:13px;
    color:#716861;
}

/* Vendor portal footer email */
.footer-email{
    display:block;
    margin-top:5px;
    color:#721e2b;
    text-decoration:none;
    font-size:13px;
}

.footer-email:hover{
    text-decoration:underline;
}

/* Desktop login page max width */
@media(min-width:761px){
    body{
        max-width:1440px;
        margin:0 auto;
    }
}

/* Desktop alignment */
@media(min-width:761px){

    .desktop-brand{
        width:100%;
        text-align:center;
    }

    .desktop-brand .vendor-login-logo,
    .desktop-brand .vendor-brand-wordmark{
        display:block;
        margin-left:auto;
        margin-right:auto;
    }

    .login-panel{
        display:flex;
        flex-direction:column;
        align-items:center;
    }

    .login-card{
        width:100%;
        margin-left:auto !important;
        margin-right:auto !important;
    }
}

/* Desktop: use exact mobile login composition */
@media(min-width:761px){

    .login-page{
        display:block !important;
        width:100% !important;
        max-width:1440px !important;
        min-height:100vh !important;
        margin:0 auto !important;
    }

    .brand-panel{
        display:none !important;
    }

    .login-panel{
        width:100% !important;
        min-height:100vh !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
    }

    .login-card{
        width:100% !important;
        max-width:420px !important;
        margin:0 auto !important;
    }
}

/* Desktop: show the same brand block used on mobile */
@media(min-width:761px){
    .mobile-brand{
        display:block !important;
        text-align:center !important;
    }
}