/* ============================================================
   RAKACHAKA ORDER
   STOREFRONT AUTH + ACCOUNT
   Login / Register / Account
   ============================================================ */

:root{
    --rka-bg:#FAF8F5;
    --rka-surface:#FFFFFF;
    --rka-soft:#F4F1ED;

    --rka-text:#111111;
    --rka-muted:#767676;

    --rka-border:#E7E2DC;

    --rka-accent:#DC6A04;
    --rka-accent-dark:#BE5903;
    --rka-accent-soft:#FFF0E2;

    --rka-danger:#D92D20;
    --rka-success:#15803D;

    --rka-shadow-sm:
        0 5px 18px rgba(28,22,18,.055);

    --rka-shadow-md:
        0 14px 36px rgba(28,22,18,.09);
}


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

.rk-auth-page{
    min-height:100vh;

    padding-bottom:100px;

    background:var(--rka-bg);

    color:var(--rka-text);
}


.rk-auth-main{
    width:min(
        520px,
        calc(100% - 28px)
    );

    margin:0 auto;

    padding-bottom:40px;
}


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

.rk-auth-header{
    display:flex;

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

    min-height:155px;

    padding:26px 0 18px;
}


.rk-auth-logo-link{
    display:block;

    line-height:0;

    text-decoration:none;
}


.rk-auth-logo{
    display:block;

    width:auto;

    max-width:230px;
    max-height:92px;

    margin:0 auto;

    object-fit:contain;
}


/* ============================================================
   AUTH CARD
   ============================================================ */

.rk-auth-card{
    width:100%;

    padding:30px;

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

    border-radius:24px;

    background:var(--rka-surface);

    box-shadow:var(--rka-shadow-md);
}


.rk-auth-eyebrow{
    display:block;

    margin-bottom:6px;

    color:var(--rka-accent);

    font-size:10px;
    font-weight:900;

    letter-spacing:.09em;

    text-transform:uppercase;
}


.rk-auth-card h1{
    margin:0;

    color:var(--rka-text);

    font-size:36px;
    font-weight:800;

    line-height:1.04;

    letter-spacing:-.045em;
}


.rk-auth-description{
    margin:10px 0 26px;

    color:var(--rka-muted);

    font-size:14px;

    line-height:1.5;
}


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

.rk-auth-form{
    display:flex;

    flex-direction:column;

    gap:17px;
}


.rk-auth-field{
    display:flex;

    width:100%;

    flex-direction:column;

    gap:7px;
}


.rk-auth-field>span{
    color:var(--rka-text);

    font-size:12px;
    font-weight:800;
}


.rk-auth-field input{
    display:block;

    width:100%;
    min-height:54px;

    padding:0 16px;

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

    border-radius:14px;

    outline:0;

    background:#FFFFFF;

    color:var(--rka-text);

    font-size:14px;

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


.rk-auth-field input::placeholder{
    color:#A1A1A1;
}


.rk-auth-field input:focus{
    border-color:var(--rka-accent);

    box-shadow:
        0 0 0 4px rgba(220,106,4,.09);
}


/* Chrome autofill */

.rk-auth-field input:-webkit-autofill,
.rk-auth-field input:-webkit-autofill:hover,
.rk-auth-field input:-webkit-autofill:focus{
    -webkit-text-fill-color:var(--rka-text);

    -webkit-box-shadow:
        0 0 0 1000px #FFFFFF inset;

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


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

.rk-auth-remember{
    display:flex;

    align-items:center;

    gap:9px;

    color:var(--rka-muted);

    font-size:12px;

    cursor:pointer;
}


.rk-auth-remember input{
    width:18px;
    height:18px;

    flex:0 0 auto;

    margin:0;

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


.rk-auth-remember span{
    line-height:1.3;
}


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

.rk-auth-primary{
    display:flex;

    width:100%;
    min-height:54px;

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

    margin-top:4px;

    padding:0 20px;

    border:0;

    border-radius:14px;

    background:var(--rka-accent);

    color:#FFFFFF;

    font-size:14px;
    font-weight:800;

    box-shadow:
        0 8px 18px rgba(220,106,4,.20);

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


.rk-auth-primary:hover{
    background:var(--rka-accent-dark);

    box-shadow:
        0 10px 22px rgba(220,106,4,.25);
}


.rk-auth-primary:active{
    transform:scale(.985);
}


.rk-auth-primary:disabled{
    cursor:not-allowed;

    opacity:.65;
}


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

.rk-auth-divider{
    position:relative;

    display:flex;

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

    margin:25px 0 21px;
}


.rk-auth-divider::before{
    position:absolute;

    top:50%;
    right:0;
    left:0;

    height:1px;

    background:var(--rka-border);

    content:"";
}


.rk-auth-divider span{
    position:relative;

    z-index:1;

    display:grid;

    width:34px;
    height:34px;

    place-items:center;

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

    border-radius:999px;

    background:#FFFFFF;

    color:#999999;

    font-size:11px;
}


/* ============================================================
   SWITCH LOGIN / REGISTER
   ============================================================ */

.rk-auth-switch{
    margin:0;

    color:var(--rka-muted);

    font-size:13px;

    text-align:center;
}


.rk-auth-switch a{
    margin-left:4px;

    color:var(--rka-accent);

    font-weight:800;

    text-decoration:none;
}


.rk-auth-switch a:hover{
    text-decoration:underline;
}


/* ============================================================
   ERRORS
   ============================================================ */

.rk-auth-error{
    display:block;

    color:var(--rka-danger);

    font-size:10px;
    font-weight:600;

    line-height:1.35;
}


/* ============================================================
   ACCOUNT
   ============================================================ */

.rk-account-card{
    display:flex;

    align-items:center;

    gap:15px;

    margin-top:26px;

    padding:18px;

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

    border-radius:18px;

    background:#FFFFFF;

    box-shadow:var(--rka-shadow-sm);
}


.rk-account-avatar{
    display:grid;

    width:54px;
    height:54px;

    flex:0 0 auto;

    place-items:center;

    border-radius:999px;

    background:var(--rka-accent);

    color:#FFFFFF;

    font-size:20px;
    font-weight:900;
}


.rk-account-info{
    display:flex;

    min-width:0;

    flex-direction:column;

    gap:3px;
}


.rk-account-info strong{
    overflow:hidden;

    color:var(--rka-text);

    font-size:15px;
    font-weight:800;

    text-overflow:ellipsis;

    white-space:nowrap;
}


.rk-account-info span{
    overflow:hidden;

    color:var(--rka-muted);

    font-size:11px;

    text-overflow:ellipsis;

    white-space:nowrap;
}


/* ============================================================
   ACCOUNT MENU
   ============================================================ */

.rk-account-menu{
    overflow:hidden;

    margin-top:16px;

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

    border-radius:18px;

    background:#FFFFFF;

    box-shadow:var(--rka-shadow-sm);
}


.rk-account-menu a{
    display:flex;

    min-height:58px;

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

    gap:15px;

    padding:0 17px;

    border-bottom:1px solid #F0ECE7;

    color:var(--rka-text);

    text-decoration:none;

    transition:
        background .15s ease;
}


.rk-account-menu a:last-child{
    border-bottom:0;
}


.rk-account-menu a:hover{
    background:#FCFAF7;
}


.rk-account-menu a span{
    font-size:13px;
    font-weight:700;
}


.rk-account-menu a b{
    color:#A3A3A3;

    font-size:22px;
    font-weight:400;

    line-height:1;
}


/* ============================================================
   ACCOUNT AUTH BUTTONS
   ============================================================ */

.rk-account-auth-buttons{
    display:flex;

    width:100%;

    flex-direction:column;

    gap:10px;

    margin-top:10px;
}


.rk-account-auth-buttons .rk-section-primary{
    width:100%;
    min-height:48px;

    margin:0;
}


.rk-account-secondary{
    display:flex;

    width:100%;
    min-height:48px;

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

    padding:0 20px;

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

    border-radius:12px;

    background:#FFFFFF;

    color:var(--rka-text);

    font-size:12px;
    font-weight:800;

    text-decoration:none;
}


.rk-account-secondary:hover{
    border-color:#D6D0C9;

    background:#FCFAF7;
}


/* ============================================================
   LOGOUT
   ============================================================ */

.rk-account-logout{
    display:flex;

    width:100%;
    min-height:50px;

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

    margin-top:16px;

    padding:0 20px;

    border:1px solid #F3D2CF;

    border-radius:14px;

    background:#FFF8F7;

    color:#B42318;

    font-size:12px;
    font-weight:800;
}


.rk-account-logout:hover{
    background:#FEF0EE;
}


/* ============================================================
   STOREFRONT GENERIC PAGE SUPPORT
   Account already uses these classes.
   ============================================================ */

.rk-section-page{
    min-height:100vh;

    padding-bottom:105px;

    background:var(--rka-bg);

    color:var(--rka-text);
}


.rk-section-main{
    width:min(
        720px,
        calc(100% - 28px)
    );

    margin:0 auto;
}


.rk-section-header{
    display:flex;

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

    padding:25px 0 19px;
}


.rk-section-logo-link{
    display:block;

    line-height:0;
}


.rk-section-logo{
    display:block;

    width:auto;

    max-width:210px;
    max-height:82px;

    margin:0 auto;

    object-fit:contain;
}


.rk-section-content{
    padding-top:16px;
}


.rk-section-eyebrow{
    display:block;

    color:var(--rka-accent);

    font-size:10px;
    font-weight:900;

    letter-spacing:.08em;
}


.rk-section-content h1{
    margin:5px 0 7px;

    color:var(--rka-text);

    font-size:34px;
    font-weight:800;

    line-height:1.05;

    letter-spacing:-.045em;
}


.rk-section-content>p{
    max-width:540px;

    margin:0;

    color:var(--rka-muted);

    font-size:14px;

    line-height:1.5;
}


/* ============================================================
   EMPTY STATE
   ============================================================ */

.rk-section-empty{
    display:flex;

    min-height:330px;

    flex-direction:column;

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

    gap:8px;

    margin-top:27px;

    padding:30px;

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

    border-radius:22px;

    background:#FFFFFF;

    box-shadow:var(--rka-shadow-sm);

    text-align:center;
}


.rk-section-empty-icon{
    display:grid;

    width:64px;
    height:64px;

    place-items:center;

    margin-bottom:8px;

    border-radius:999px;

    background:var(--rka-accent-soft);

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


.rk-section-empty-icon svg{
    display:block;

    width:28px;
    height:28px;
}


.rk-section-empty strong{
    color:var(--rka-text);

    font-size:17px;
    font-weight:800;
}


.rk-section-empty>span{
    max-width:330px;

    color:var(--rka-muted);

    font-size:12px;

    line-height:1.45;
}


.rk-section-primary{
    display:inline-flex;

    min-height:45px;

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

    margin-top:10px;

    padding:0 20px;

    border-radius:12px;

    background:var(--rka-accent);

    color:#FFFFFF;

    font-size:12px;
    font-weight:800;

    text-decoration:none;
}


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

@media(min-width:768px){

    .rk-auth-main{
        padding-top:20px;
    }


    .rk-auth-header{
        min-height:175px;
    }


    .rk-auth-card{
        padding:36px;
    }

}


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

@media(max-width:600px){

    .rk-auth-main{
        width:calc(100% - 22px);

        padding-bottom:25px;
    }


    .rk-auth-header{
        min-height:132px;

        padding:18px 0 13px;
    }


    .rk-auth-logo{
        max-width:205px;
        max-height:80px;
    }


    .rk-auth-card{
        padding:23px 19px;

        border-radius:21px;
    }


    .rk-auth-card h1{
        font-size:32px;
    }


    .rk-auth-description{
        margin-bottom:22px;

        font-size:13px;
    }


    .rk-auth-field input{
        min-height:52px;

        border-radius:13px;
    }


    .rk-auth-primary{
        min-height:52px;

        border-radius:13px;
    }


    .rk-section-main{
        width:calc(100% - 20px);
    }


    .rk-section-header{
        padding:20px 0 15px;
    }


    .rk-section-logo{
        max-width:195px;
    }


    .rk-section-content h1{
        font-size:31px;
    }


    .rk-section-content>p{
        font-size:13px;
    }


    .rk-account-card{
        margin-top:22px;

        padding:16px;
    }


    .rk-account-menu a{
        min-height:56px;
    }

}


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

@media(max-width:390px){

    .rk-auth-main{
        width:calc(100% - 18px);
    }


    .rk-auth-logo{
        max-width:188px;
    }


    .rk-auth-card{
        padding:21px 16px;
    }


    .rk-auth-card h1{
        font-size:29px;
    }


    .rk-auth-description{
        font-size:12px;
    }


    .rk-auth-field>span{
        font-size:11px;
    }


    .rk-auth-field input{
        min-height:50px;

        font-size:13px;
    }

}