/* ==========================================
   Zeart Account System
========================================== */

:root{

    /* ===== COLORS ===== */

    --account-primary: #d88f9b;
    --account-primary-hover: #cf7f8d;

    --account-background: #faf7f5;

    --account-card: #ffffff;

    --account-text: #2f2f2f;
    --account-text-light: #707070;

    --account-border: #ececec;

    --account-success: #67c587;
    --account-warning: #ffb347;
    --account-danger: #e86b7a;

    /* ===== SHADOW ===== */

    --account-shadow:
        0 10px 40px rgba(0,0,0,.06);

    --account-shadow-hover:
        0 18px 50px rgba(0,0,0,.08);

    /* ===== RADIUS ===== */

    --account-radius:24px;

    --account-radius-small:14px;

    --account-radius-round:999px;

    /* ===== TRANSITIONS ===== */

    --account-transition:.25s ease;

    /* ===== SPACING ===== */

    --account-gap-xs:8px;
    --account-gap-sm:16px;
    --account-gap-md:24px;
    --account-gap-lg:40px;
    --account-gap-xl:60px;

}

.account-page{

    background:var(--account-background);

}

.account-container{

    width:min(1600px,95%);
    margin:auto;

}

.account-card{

    background:var(--account-card);

    border-radius:var(--account-radius);

    box-shadow:var(--account-shadow);

    transition:var(--account-transition);

}

.account-card:hover{

    box-shadow:var(--account-shadow-hover);

}

.account-title{

    font-family:Poppins, sans-serif;

    color:var(--account-text);

    font-size: 34px;

    line-height:1.1;
	
    margin:0;

}

.account-subtitle{

    color:var(--account-text-light);
    line-height:1.8;
    margin:0;
    max-width: 365px;
    font-size: 14px;
    font-weight: 400;
}

.account-button{

    height:56px;

    border:none;

    border-radius:10px;

    background:#d56578;

    color:#fff;

    font-weight:600;

    cursor:pointer;

    transition:var(--account-transition);

}

.account-button:hover{

    background:#c95569;

}
.account-input{

    width:100%;

    height:54px;

    padding:0 18px 0 46px;

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

    border-radius:var(--account-radius-small);

    font-family:Poppins,sans-serif;

    transition:var(--account-transition);

}

.account-input:focus{

    outline:none;

    border-color:var(--account-primary);

    box-shadow:0 0 0 4px rgba(216,143,155,.12);

}

/* ==========================================
   LOGIN LAYOUT
========================================== */

.account-login{

    display:grid;

    grid-template-columns:37fr 63fr;

    gap:32px;
	
	padding: 32px;

}

.account-login-panel .account-card{

    width:100%;

}

.account-login-card{

    padding:48px;

    display:flex;
    flex-direction:column;

    height:100%;
}

.account-login-header{

    display:flex;
    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:18px;
}

.account-login-header .account-title{

    margin-bottom:14px;

}



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

.account-input-wrapper{

    position:relative;

}

.account-input-icon{

    position:absolute;

    left:16px;
    top:50%;

    transform:translateY(-50%);

    color:#9a9a9a;

    font-size:15px;

    pointer-events:none;

}



.account-login-body{

    margin-top:40px;

}

.account-form{

    display:flex;
    flex-direction:column;

    gap:15px;

}

.account-form-group{

    display:flex;
    flex-direction:column;

    gap:10px;

}

.account-label{

    font-size:14px;

    font-weight:700;

    color:#3c3c3c;

}

.account-password-wrapper{

    position:relative;

}

.account-password-wrapper .account-input{

    padding-right:52px;

}

.account-password-toggle{

    position:absolute;

    top:50%;
    right:18px;

    transform:translateY(-50%);

    border:none;

    background:none;

    cursor:pointer;

    color:#999;

    font-size:18px;

    transition:var(--account-transition);

}

.account-password-toggle:hover{

    color:var(--account-primary);

}

.account-error{

    min-height:18px;

    font-size:13px;

    color:var(--account-danger);

}

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

.account-login-button{

    width:100%;

    margin-top:12px;

    display:flex;

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

    gap:12px;

}

.account-login-button i{

    font-size:18px;

}

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

.account-login-footer{

    margin-top:auto;

    padding-top:40px;

}

.account-login-register{

    display:flex;

    align-items:center;

    gap:20px;

    background:#fff5f6;

    border-radius:18px;

    padding:12px;

}

.account-login-register-icon{

    width:54px;
    height:54px;

    display:flex;

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

    color:var(--account-primary);

    flex-shrink:0;
	
	font-size: 30px;

}

.account-login-register-content{

    flex:1;

}

.account-login-register-title{

    font-size:19px;

    font-weight:600;

    color:var(--account-text);

    margin-bottom:12px;

}

.account-login-register-description{

    color:var(--account-text-light);

    line-height:1.7;

    margin-bottom:28px;
	
	font-size: 14px;

}

.account-login-register-button{

    display:flex;

    align-items:center;

    justify-content:center;

    padding:14px 24px;

    border:1px solid var(--account-primary);

    border-radius:14px;

    color:var(--account-primary);

    text-decoration:none;

    font-weight:600;

    transition:.25s;

}

.account-login-register-button:hover{

    background:var(--account-primary);

    color:#fff;

}

/* ==========================================
   LOGIN OPTIONS
========================================== */

.account-login-options{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-top:10px;

}

.account-checkbox{

    display:flex;

    align-items:center;

    gap:8px;

    cursor:pointer;

    font-size:14px;

    color:var(--account-text-light);

}

.account-checkbox input{

    accent-color:var(--account-primary);

    width:16px;

    height:16px;

}

.account-forgot-password{

    color:var(--account-primary);

    text-decoration:none;

    font-size:14px;

    font-weight:500;

}

.account-forgot-password:hover{

    text-decoration:underline;

}

/* ==========================================
   LOGIN HERO
========================================== */

.account-login-hero{

    display:flex;
    justify-content:center;

    position:relative;

    overflow:hidden;

    border-radius:24px;

    box-shadow:var(--account-shadow);

    height:100%;

}

.account-login-slider{

    width:100%;
    height:100%;

}

.account-login-slide{

    position:absolute;

    width:100%;
    height:100%;

    overflow:hidden;
    inset:0;

    opacity:0;

    visibility:hidden;

    transition:opacity .45s ease;
}

.account-login-slide.active{

    opacity:1;

    visibility:visible;

}

.account-login-slide-background{

    position:absolute;

    inset:0;

    background-size:cover;

    background-position:right center;

    background-repeat:no-repeat;

}

.account-login-slide-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(10,15,18,.04) 0%,
            rgba(10,15,18,.08) 38%,
            rgba(10,15,18,.42) 72%,
            rgba(10,15,18,.72) 100%
        );
}

.account-login-slide-content{
    position:absolute;
    z-index:10;

    left:60px;
    bottom:70px;

    max-width:430px;

    color:#fff;

    text-shadow:
        0 2px 14px rgba(0,0,0,.35);
}

.account-login-slide-title{
    margin:0 0 12px;

    color:#fff;

    font-family:"Playfair Display", serif;

    font-size:38px;
    font-weight:700;
    line-height:1.1;
}

.account-login-slide-description{
    max-width:390px;

    margin:0;

    color:rgba(255,255,255,.9);

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

.account-login-slider-button{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:54px;
    height:54px;

    border:none;

    border-radius:50%;

    background:#fff;

    box-shadow:0 10px 30px rgba(0,0,0,.12);

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.25s;

    z-index:20;

}

.account-login-slider-prev{

    left:24px;

}

.account-login-slider-next{

    right:24px;

}

.account-login-slider-button:hover{

    background:#d56578;

    color:#fff;

}

.account-login-slider-dots{

    position:absolute;

    left:60px;

    bottom:36px;

    display:flex;

    gap:10px;

    z-index:20;

}

.account-login-slider-dot{

    width:12px;
    height:12px;

    border:none;

    border-radius:50%;

    background:#fff;

    opacity:.6;

    cursor:pointer;

    transition:.25s;

}

.account-login-slider-dot.active{

    opacity:1;

    background:#d56578;

    transform:scale(1.2);

}

/* ==========================================
   REGISTER LAYOUT
========================================== */

.account-register{

    position:relative;

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

    min-height:850px;

    padding:60px 40px;

    overflow:hidden;

}


/* ==========================================
   REGISTER CARD
========================================== */

.account-register-card{

    position:relative;

    width:100%;
    max-width:620px;

    padding:48px;

    z-index:2;

}


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

.account-register-header{

    text-align:center;

    margin-bottom:36px;

}

.account-register-header .account-title{

    margin-bottom:14px;

}

.account-register-header .account-subtitle{

    max-width:460px;

    margin:0 auto;

}


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

.account-register-form{

    width:100%;

}

.account-register-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

}


/* ==========================================
   REGISTER CONSENTS
========================================== */

.account-register-consents{

    display:flex;
    flex-direction:column;

    gap:12px;

    margin-top:4px;

}

.account-register-consents .account-checkbox{

    align-items:flex-start;

    line-height:1.5;

}


/* ==========================================
   REGISTER BUTTON
========================================== */

.account-register-button{

    width:100%;

    display:flex;

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

    gap:10px;

    margin-top:8px;

}


/* ==========================================
   REGISTER FOOTER
========================================== */

.account-register-footer{

    display:flex;

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

    gap:6px;

    margin-top:28px;

    padding-top:24px;

    border-top:1px solid var(--account-border);

    font-size:14px;

    color:var(--account-text-light);

}

.account-register-footer a{

    color:var(--account-primary);

    text-decoration:none;

    font-weight:600;

}

.account-register-footer a:hover{

    text-decoration:underline;

}

/* ==========================================
   REGISTER DECORATIONS
========================================== */

.account-register-decoration{

    position:absolute;

    top:50%;

    width:500px;
    height:800px;

    transform:translateY(-50%);

    background-size:contain;
    background-repeat:no-repeat;

    z-index:1;
}

.account-register-decoration-left{

    left:0;
/*    background-image:url("../images/register/register-left.png"); */

}

.account-register-decoration-right{

    right:0;
/*    background-image:url("../images/register/register-right.png"); */

}

.account-register-decoration-left{

    -webkit-mask-image:linear-gradient(
        to right,
        #000 0%,
        #000 65%,
        transparent 100%
    );

    mask-image:linear-gradient(
        to right,
        #000 0%,
        #000 65%,
        transparent 100%
    );

}

.account-register-decoration-right{

    -webkit-mask-image:linear-gradient(
        to left,
        #000 0%,
        #000 65%,
        transparent 100%
    );

    mask-image:linear-gradient(
        to left,
        #000 0%,
        #000 65%,
        transparent 100%
    );

}

.account-input.account-input-error{

    border-color:var(--account-danger);

}

.account-input.account-input-error:focus{

    border-color:var(--account-danger);

    box-shadow:0 0 0 4px rgba(232,107,122,.12);

}

/* ==========================================
   PASSWORD REQUIREMENTS
========================================== */

.account-password-requirements{
    padding:16px 18px;
    background:#faf7f5;
    border-radius:14px;
}

.account-password-requirements-title{
    margin:0 0 12px;
    font-size:13px;
    font-weight:600;
    color:var(--account-text);
}

.account-password-requirements-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px 18px;
}

.account-password-requirement{
    display:flex;
    align-items:center;
    gap:8px;

    font-size:12px;
    color:#999;

    transition:var(--account-transition);
}

.account-password-requirement i{
    font-size:12px;
    color:#ccc;

    transition:var(--account-transition);
}

/* MUSI BYĆ PO STYLACH PODSTAWOWYCH */

.account-password-requirement.valid{
    color:var(--account-success);
}

.account-password-requirement.valid i{
    color:var(--account-success);
}

.account-consent-group{

    display:flex;
    flex-direction:column;

    gap:6px;

}

.account-checkbox.account-checkbox-error{

    color:var(--account-danger);

}

/* ==========================================
   EMAIL VERIFICATION
========================================== */

.account-verification{
    min-height:650px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:60px 20px;
}

.account-verification-card{
    width:100%;
    max-width:580px;
    padding:55px 48px;
    text-align:center;
}

.account-verification-card .account-subtitle{
    max-width:440px;
    margin:18px auto 32px;
}

.account-verification-icon{
    width:78px;
    height:78px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 28px;
    border-radius:50%;
    font-size:38px;
}

.account-verification-icon-success{
    color:var(--account-success);
    background:rgba(103,197,135,.12);
}

.account-verification-icon-warning{
    color:var(--account-warning);
    background:rgba(255,179,71,.12);
}

.account-verification-icon-error{
    color:var(--account-danger);
    background:rgba(232,107,122,.12);
}

.account-verification-button{
    min-width:220px;
    padding:0 28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    text-decoration:none;
}

/* ==========================================
   REGISTER RESULT
========================================== */

.account-register-result-card{
    text-align:center;
}

.account-register-result-card .account-subtitle{
    max-width:460px;
    margin:18px auto 0;
}

.account-register-result-icon{
    width:82px;
    height:82px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 28px;
    border-radius:50%;
    font-size:40px;
}

.account-register-result-icon-success{
    color:var(--account-success);
    background:rgba(103,197,135,.12);
}

.account-register-result-icon-error{
    color:var(--account-danger);
    background:rgba(232,107,122,.12);
}

.account-register-result-email{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    margin:28px 0 18px;
    padding:14px 18px;

    background:#faf7f5;
    border-radius:14px;

    color:var(--account-text);
    font-size:14px;
}

.account-register-result-email i{
    color:var(--account-primary);
}

.account-register-result-hint{
    margin:0 0 28px;
    color:var(--account-text-light);
    font-size:13px;
    line-height:1.7;
}

.account-register-result-button{
    min-width:230px;
    padding:0 26px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    text-decoration:none;
}

.account-input.account-input-success{
    border-color:var(--account-success);
}

.account-input.account-input-success:focus{
    border-color:var(--account-success);
    box-shadow:0 0 0 4px rgba(103,197,135,.12);
}

.account-error.account-success{
    color:var(--account-success);
}

.account-register-button:disabled{
    opacity:.55;
    cursor:not-allowed;
}

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

.account-login-message{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:13px 15px;
    border-radius:12px;
    font-size:13px;
    line-height:1.6;
}

.account-login-message-error{
    color:var(--account-danger);
    background:rgba(232,107,122,.10);
}

.account-login-message-error i{
    margin-top:3px;
}

.account-login-resend-form{
    margin-top:12px;
}

.account-login-resend-button{
    width:100%;
    border:none;
    background:none;
    color:var(--account-primary);
    font-family:Poppins,sans-serif;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
}

.account-login-resend-button:hover{
    text-decoration:underline;
}


/* ==========================================
   USER DASHBOARD
========================================== */

.account-dashboard-page{
    padding:32px 0 60px;
}

.account-dashboard-layout{
    min-width:0;
    display:grid;
    grid-template-columns:285px minmax(0, 1fr);
    gap:36px;
    align-items:start;
}

.account-dashboard-content{
    width:100%;
    min-width:0;
    max-width:100%;

    background:#fff;
    border:1px solid var(--account-border);
    border-radius:18px;

    padding:22px;
}

/* ==========================
   DASHBOARD EMPTY ORDERS
========================== */

.account-dashboard-empty{
    min-height:150px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:10px;

    padding:30px 20px;

    border:1px dashed #e6e6e6;
    border-radius:12px;

    background:#fafafa;

    text-align:center;
}

.account-dashboard-empty i{
    width:42px;
    height:42px;

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

    border-radius:50%;

    background:#fff0f2;

    color:#d56578;

    font-size:16px;
}

.account-dashboard-empty p{
    margin:0;

    color:#777;

    font-size:12px;
    line-height:1.6;
}
/* ==========================================
   DASHBOARD SIDEBAR
========================================== */

.account-dashboard-sidebar{
    min-height:720px;

    display:flex;
    flex-direction:column;

    background:#fff;
    border:1px solid var(--account-border);
    border-radius:18px;

    overflow:hidden;
}


/* PROFILE */

.account-dashboard-profile{
    display:flex;
    align-items:center;
    gap:14px;

    padding:24px 20px;

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

.account-dashboard-avatar{
    width:62px;
    height:62px;

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

    flex-shrink:0;

    border-radius:50%;

    overflow:hidden;

    background:#fff1f3;

    color:var(--account-primary);

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

.account-dashboard-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.account-dashboard-profile-info{
    min-width:0;

    display:flex;
    flex-direction:column;
    gap:4px;
}

.account-dashboard-profile-info strong{
    color:var(--account-text);
    font-size:15px;
}

.account-dashboard-profile-info span{
    color:var(--account-text-light);
    font-size:12px;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}


/* NAVIGATION */

.account-dashboard-navigation{
    display:flex;
    flex-direction:column;

    padding:12px 0;
}

.account-dashboard-nav-item{
    position:relative;

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

    display:flex;
    align-items:center;
    gap:14px;

    padding:0 20px;

    border:none;

    background:transparent;

    color:#555;

    font-family:Poppins,sans-serif;
    font-size:14px;

    text-decoration:none;
    text-align:left;

    cursor:pointer;

    transition:.2s ease;
}

.account-dashboard-nav-item i{
    width:22px;

    font-size:17px;
    text-align:center;

    color:#555;

    transition:.2s ease;
}

.account-dashboard-nav-item:hover{
    color:var(--account-primary);
    background:#fff7f8;
}

.account-dashboard-nav-item:hover i{
    color:var(--account-primary);
}

.account-dashboard-nav-item.active{
    color:var(--account-primary);
    background:#fff2f4;
}

.account-dashboard-nav-item.active::before{
    content:"";

    position:absolute;
    top:0;
    left:0;
    bottom:0;

    width:4px;

    background:var(--account-primary);
}

.account-dashboard-nav-item.active i{
    color:var(--account-primary);
}


/* SIDEBAR FOOTER */

.account-dashboard-sidebar-footer{
    margin-top:auto;

    padding:12px 0;

    border-top:1px solid var(--account-border);
}

.account-dashboard-sidebar-footer form{
    margin:0;
}

.account-dashboard-logout:hover{
    color:var(--account-danger);
    background:rgba(232,107,122,.07);
}

.account-dashboard-logout:hover i{
    color:var(--account-danger);
}

/* ==========================================
   DASHBOARD STATS
========================================== */

.account-dashboard-stats{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:20px;

    margin-bottom:24px;
}

.account-dashboard-stat-card{
    min-height:115px;

    display:flex;
    align-items:center;
    gap:16px;

    padding:20px;

    background:#fff;
    border:1px solid var(--account-border);
    border-radius:18px;

    transition:var(--account-transition);
}

.account-dashboard-stat-card:hover{
    box-shadow:var(--account-shadow);
    transform:translateY(-2px);
}

.account-dashboard-stat-icon{
    width:58px;
    height:58px;

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

    flex-shrink:0;

    border-radius:50%;

    font-size:23px;
}

.account-dashboard-stat-icon-orders{
    color:#f39a42;
    background:rgba(243,154,66,.12);
}

.account-dashboard-stat-icon-processing{
    color:var(--account-primary);
    background:rgba(216,143,155,.12);
}

.account-dashboard-stat-icon-shipping{
    color:#6f9bd8;
    background:rgba(111,155,216,.12);
}

.account-dashboard-stat-icon-completed{
    color:var(--account-success);
    background:rgba(103,197,135,.12);
}

.account-dashboard-stat-content{
    min-width:0;

    display:flex;
    flex-direction:column;
    gap:4px;
}

.account-dashboard-stat-value{
    font-family:Poppins, sans-serif;
    font-size:27px;
    line-height:1;

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

.account-dashboard-stat-label{
    color:var(--account-text-light);

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

/* ==========================================
   DASHBOARD SECTIONS
========================================== */

.account-dashboard-orders{
    background:#fff;
    border:1px solid var(--account-border);
    border-radius:18px;
    padding:20px;
}

.account-dashboard-section-header{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:16px;
}

.account-dashboard-section-header h2{
    margin:0;

    color:var(--account-text);

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

.account-dashboard-section-link{
    display:flex;
    align-items:center;
    gap:8px;

    color:var(--account-primary);

    font-size:13px;
    font-weight:500;

    text-decoration:none;
}

.account-dashboard-section-link:hover{
    text-decoration:underline;
}


/* ==========================================
   RECENT ORDERS
========================================== */

.account-dashboard-orders{
    background:#fff;
    border:1px solid var(--account-border);
    border-radius:18px;
    padding:22px;
}

.account-dashboard-section-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px;
}

.account-dashboard-section-header h2{
    margin:0;
    font-family:Poppins, sans-serif;
    color:var(--account-text);
    font-size:20px;
}

.account-dashboard-orders-list{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.account-dashboard-order{
    padding:20px 22px 18px;

    border:1px solid var(--account-border);
    border-radius:14px;

    background:#fff;

    transition:var(--account-transition);
}

.account-dashboard-order:hover{
    border-color:#eadadd;
    box-shadow:0 8px 24px rgba(0,0,0,.04);
}


/* TOP */

.account-dashboard-order-top{
    display:grid;
    grid-template-columns:minmax(260px, 1fr) auto;
    align-items:center;
    gap:24px;
}

.account-dashboard-order-main{
    display:flex;
    align-items:center;
    gap:14px;
}

.account-dashboard-order-icon{
    width:46px;
    height:46px;

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

    flex-shrink:0;

    border-radius:12px;

    color:var(--account-primary);
    background:#fff2f4;

    font-size:18px;
}

.account-dashboard-order-info{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
}

.account-dashboard-order-info strong{
    color:var(--account-text);
    font-size:14px;
    font-weight:600;
}


/* STATUS */

.account-dashboard-order-status{
    display:flex;
    align-items:center;
}

.account-order-status{
    display:inline-flex;
    align-items:center;

    padding:6px 10px;

    border-radius:8px;

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

.account-order-status-processing{
    color:#ad741f;
    background:#fff5e8;
}

.account-order-status-shipping{
    color:#4e78b5;
    background:#eef4fc;
}

.account-order-status-completed{
    color:#43865a;
    background:#edf8f0;
}

.account-order-status-ready{

    color:#6b5c2e;
    background:#fff8df;

}


.account-order-status-refunded{

    color:#b76522;
    background:#fff2e8;

}

/* ACTIONS */

.account-dashboard-order-actions{
    display:flex;
    align-items:center;
    gap:18px;
}

.account-dashboard-order-price{
    min-width:75px;

    color:var(--account-text);

    font-size:15px;
    text-align:right;
}

.account-dashboard-order-details{
    height:40px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:0 18px;

    border-radius:10px;

    background:#d56578;

    color:#fff;

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

    text-decoration:none;

    white-space:nowrap;

    transition:.2s ease;
}

.account-dashboard-order-details:hover{
    background:#c95569;
    transform:translateY(-1px);
}


/* ==========================================
   ORDER PROGRESS
========================================== */

.account-dashboard-order-progress{
    position:relative;

    display:grid;
    grid-template-columns:repeat(5, 1fr);

    margin-top:24px;
}

.account-dashboard-order-progress::before,
.account-dashboard-order-progress::after{
    content:"";

    position:absolute;

    top:7px;
    left:10%;

    height:3px;

    border-radius:999px;
}

/* cała niewypełniona linia */

.account-dashboard-order-progress::before{
    width:80%;
    background:#e8e8e8;
}

/* osiągnięta część */

.account-dashboard-order-progress::after{
    width:var(--order-progress-width);
    background:var(--account-primary);
}

.account-dashboard-order-step{
    position:relative;
    z-index:2;

    display:flex;
    flex-direction:column;
    align-items:center;

    text-align:center;

    color:#aaa;
}

.account-dashboard-order-step-dot{
    width:15px;
    height:15px;

    margin-bottom:8px;

    border:3px solid #fff;
    border-radius:50%;

    background:#ddd;

    box-shadow:0 0 0 1px #ddd;
}

.account-dashboard-order-step.completed{
    color:var(--account-text);
}

.account-dashboard-order-step.completed
.account-dashboard-order-step-dot{
    background:var(--account-primary);
    box-shadow:0 0 0 1px var(--account-primary);
}

.account-dashboard-order-step.current
.account-dashboard-order-step-dot{
    box-shadow:
        0 0 0 1px var(--account-primary),
        0 0 0 5px rgba(216,143,155,.14);
}

.account-dashboard-order-step-label{
    font-size:11px;
    font-weight:500;
}

.account-dashboard-order-step-date{
    min-height:17px;

    margin-top:3px;

    color:var(--account-text-light);

    font-size:10px;
}

.account-dashboard-order-thumbnail{
    width:72px;
    height:72px;

    flex-shrink:0;

    border-radius:12px;
    overflow:hidden;

    background:#f7f4f3;
    border:1px solid var(--account-border);
}

.account-dashboard-order-thumbnail img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.account-dashboard-order-thumbnail-placeholder{
    width:100%;
    height:100%;

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

    color:#bbb;
    font-size:22px;
}

.account-orders-page{
    width:100%;
    min-width:0;
    max-width:100%;
	background:#fff;
    border:1px solid var(--account-border);
    border-radius:18px;
    padding:22px;
}

.account-orders-header{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:24px;
}

.account-orders-header h1{
    margin:0 0 6px;

    font-family:Poppins, sans-serif;
    color:var(--account-text);
    font-size:28px;
}

.account-orders-header p{
    margin:0;

    color:var(--account-text-light);
    font-size:13px;
}

.account-orders-filters{
    display:flex;
    align-items:center;
    gap:8px;

    margin-bottom:22px;

    padding:6px;

    background:#fff;
    border:1px solid var(--account-border);
    border-radius:12px;
}

.account-orders-filter{
    min-height:38px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:0 16px;

    border-radius:8px;

    color:var(--account-text-light);

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

    text-decoration:none;

    transition:.2s ease;
}

.account-orders-filter:hover{
    color:var(--account-primary);
    background:#fff7f8;
}

.account-orders-filter.active{
    color:var(--account-primary);
    background:#fff1f3;
    font-weight:600;
}

.account-orders-list{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.account-orders-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;

    padding:20px 22px;

    background:#fff;
    border:1px solid var(--account-border);
    border-radius:16px;

    transition:var(--account-transition);
}

.account-orders-card:hover{
    border-color:#eadadd;
    box-shadow:0 8px 24px rgba(0,0,0,.04);
}

.account-orders-card-main{
    min-width:0;

    display:flex;
    align-items:center;
    gap:16px;
}

.account-orders-card-thumbnail{
    width:76px;
    height:76px;

    flex-shrink:0;

    overflow:hidden;

    background:#f7f4f3;
    border:1px solid var(--account-border);
    border-radius:12px;
}

.account-orders-card-thumbnail img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.account-orders-card-thumbnail-placeholder{
    width:100%;
    height:100%;

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

    color:#bbb;
    font-size:22px;
}

.account-orders-card-info{
    min-width:0;

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
}

.account-orders-card-number{
    color:var(--account-text);

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

.account-orders-card-meta{
    display:flex;
    align-items:center;
    gap:16px;

    color:var(--account-text-light);

    font-size:11px;
}

.account-orders-card-meta span{
    display:flex;
    align-items:center;
    gap:6px;
}

.account-orders-card-meta i{
    font-size:11px;
}

.account-orders-card-status{
    display:flex;
    align-items:center;
}

.account-order-status-cancelled{
    color:#a35a5a;
    background:#fbeeee;
}

.account-orders-card-actions{
    display:flex;
    align-items:center;
    gap:22px;

    flex-shrink:0;
}

.account-orders-card-price{
    min-width:80px;

    color:var(--account-text);

    font-size:16px;
    text-align:right;
}

.account-orders-card-details{
    min-height:40px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    padding:0 16px;

    border-radius:10px;

    background:#d56578;
    color:#fff;

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

    text-decoration:none;

    transition:.2s ease;
}

.account-orders-card-details:hover{
    background:#c95569;
    transform:translateY(-1px);
}

.account-orders-card-details i{
    font-size:10px;
}


/*
|--------------------------------------------------------------------------
| Empty Orders
|--------------------------------------------------------------------------
*/

.account-orders-empty{
    min-height:260px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    padding:40px;

    background:#fff;
    border:1px solid var(--account-border);
    border-radius:16px;

    text-align:center;
}

.account-orders-empty-icon{
    width:58px;
    height:58px;

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

    margin-bottom:14px;

    border-radius:50%;

    background:#fff1f3;
    color:var(--account-primary);

    font-size:21px;
}

.account-orders-empty h3{
    margin:0 0 6px;

    color:var(--account-text);

    font-family:Poppins, sans-serif;
    font-size:18px;
}

.account-orders-empty p{
    margin:0;

    color:var(--account-text-light);

    font-size:12px;
}

.account-orders-pagination{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;

    margin-top:24px;
}

.account-orders-pagination-button{
    width:38px;
    height:38px;

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

    border:1px solid var(--account-border);
    border-radius:9px;

    background:#fff;
    color:var(--account-text-light);

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

    text-decoration:none;

    transition:.2s ease;
}

.account-orders-pagination-button:hover{
    border-color:var(--account-primary);
    color:var(--account-primary);
    background:#fff7f8;
}

.account-orders-pagination-button.active{
    border-color:var(--account-primary);
    background:var(--account-primary);
    color:#fff;
}

.account-orders-pagination-button i{
    font-size:10px;
}

/* ==========================================================================
   ORDER DETAILS
   ========================================================================== */

.account-order-details{
    width:100%;
	background: #fff;
    border: 1px solid var(--account-border);
    border-radius: 18px;
    padding: 22px;
}


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

.account-order-details-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;

    margin-bottom:22px;
}

.account-order-details-back{
    display:inline-flex;
    align-items:center;
    gap:8px;

    margin-bottom:10px;

    color:var(--account-text-light);

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

    text-decoration:none;

    transition:.2s ease;
}

.account-order-details-back:hover{
    color:var(--account-primary);
}

.account-order-details-back i{
    font-size:10px;
}

.account-order-details-header h1{
    margin:0 0 5px;

    font-family:Poppins, sans-serif;

    color:var(--account-text);

    font-size:28px;
    line-height:1.2;
}

.account-order-details-header p{
    margin:0;

    color:var(--account-text-light);

    font-size:12px;
}

.account-order-details-header-status{
    display:flex;
    align-items:center;

    padding-bottom:3px;
}


/* ==========================================================================
   CARDS
   ========================================================================== */

.account-order-details-card{
    margin-bottom:18px;

    padding:22px 24px;

    background:#fff;

    border:1px solid var(--account-border);
    border-radius:16px;

    transition:var(--account-transition);
}

.account-order-details-card:hover{
    border-color:#eadadd;

    box-shadow:0 8px 24px rgba(0,0,0,.035);
}

.account-order-details-card-header{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:18px;
}

.account-order-details-card-header h2{
    margin:0;

    font-family:"Playfair Display", serif;

    color:var(--account-text);

    font-size:19px;
}


/* ==========================================================================
   DELIVERY
   ========================================================================== */

.account-order-delivery{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:40px;

    align-items:start;
}

.account-order-delivery-address{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;

    color:var(--account-text-light);

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

.account-order-delivery-address strong{
    margin-bottom:4px;

    color:var(--account-text);

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

.account-order-delivery-tracking{
    min-width:190px;

    display:flex;
    flex-direction:column;
    gap:5px;

    padding:14px 16px;

    background:#faf8f8;

    border-radius:11px;
}

.account-order-delivery-tracking span{
    color:var(--account-text-light);

    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.4px;
}

.account-order-delivery-tracking strong{
    color:var(--account-text);

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


/* ==========================================================================
   PRODUCTS
   ========================================================================== */

.account-order-product{
    display:grid;

    grid-template-columns:
        72px
        minmax(0, 1fr)
        60px
        90px
        155px;

    align-items:center;
    gap:16px;

    padding:15px 0;

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

.account-order-product:first-child{
    padding-top:0;
}

.account-order-product:last-child{
    padding-bottom:0;

    border-bottom:none;
}

.account-order-product-image{
    width:72px;
    height:72px;

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

    overflow:hidden;

    background:#f7f4f3;

    border:1px solid var(--account-border);
    border-radius:11px;

    color:#bbb;

    font-size:20px;
}

.account-order-product-image img{
    width:100%;
    height:100%;

    object-fit:cover;
}

.account-order-product-info{
    min-width:0;

    display:flex;
    flex-direction:column;
    gap:5px;
}

.account-order-product-info strong{
    color:var(--account-text);

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

.account-order-product-info span{
    color:var(--account-text-light);

    font-size:10px;
}

.account-order-product-quantity{
    color:var(--account-text-light);

    font-size:12px;
    text-align:center;
}

.account-order-product-price{
    color:var(--account-text);

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

    text-align:right;
}

.account-order-product-actions{
    width:155px;

    display:flex;
    flex-direction:column;
    gap:7px;

    justify-self:end;
}

.account-order-product-action{
    width:100%;
    min-height:34px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;

    padding:0 11px;

    border-radius:8px;

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

    text-decoration:none;
    white-space:nowrap;

    transition:.2s ease;
}

.account-order-product-action i{
    font-size:10px;
}

.account-order-product-review{
    background:#fff1f3;
    color:var(--account-primary);
}

.account-order-product-review:hover{
    background:var(--account-primary);
    color:#fff;
}

.account-order-product-problem{
    border:1px solid var(--account-border);

    background:#fff;
    color:var(--account-text-light);
}

.account-order-product-problem:hover{
    border-color:#d8c9cc;

    background:#faf8f8;
    color:var(--account-text);
}

/* ==========================================================================
   ORDER PROGRESS
   ========================================================================== */

.account-order-details-progress{
    margin-top:8px;
    margin-bottom:4px;

    padding:4px 0 0;
}


/* ==========================================================================
   SUMMARY + PAYMENT
   ========================================================================== */

.account-order-details-bottom{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.account-order-details-bottom .account-order-details-card{
    margin-bottom:0;
}


/* ==========================================================================
   ORDER SUMMARY
   ========================================================================== */

.account-order-summary-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    padding:8px 0;

    color:var(--account-text-light);

    font-size:12px;
}

.account-order-summary-row strong{
    color:var(--account-text);

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

.account-order-summary-total{
    margin-top:9px;
    padding-top:15px;

    border-top:1px solid var(--account-border);

    color:var(--account-text);

    font-weight:600;
}

.account-order-summary-total span{
    font-size:14px;
}

.account-order-summary-total strong{
    color:var(--account-primary);

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


/* ==========================================================================
   PAYMENT
   ========================================================================== */

.account-order-payment-info{
    display:flex;
    flex-direction:column;
}

.account-order-payment-info > div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    padding:10px 0;

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

.account-order-payment-info > div:first-child{
    padding-top:0;
}

.account-order-payment-info > div:last-child{
    padding-bottom:0;

    border-bottom:none;
}

.account-order-payment-info span{
    color:var(--account-text-light);

    font-size:12px;
}

.account-order-payment-info strong{
    color:var(--account-text);

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


/* ==========================================================================
   PAYMENT STATUS BADGES
   ========================================================================== */

.account-order-payment-status-badge{
    display:inline-flex;
    align-items:center;

    min-height:26px;

    padding:
        0
        10px;

    border-radius:999px;

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

    white-space:nowrap;
}


.account-order-payment-status-badge.pending{
    background:#fff7ed;
    color:#c2410c;
}


.account-order-payment-status-badge.paid{
    background:#ecfdf5;
    color:#047857;
}


.account-order-payment-status-badge.failed{
    background:#fef2f2;
    color:#b91c1c;
}


.account-order-payment-status-badge.partially-refunded{
    background:#eff6ff;
    color:#1d4ed8;
}


.account-order-payment-status-badge.refunded{
    background:#f5f3ff;
    color:#7c3aed;
}


.account-order-payment-status-badge.cancelled{
    background:#f3f4f6;
    color:#6b7280;
}


.account-order-payment-refunded-amount{
    color:#7c3aed !important;
}

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

.account-review-page{
    width:100%;
	background: #fff;
    border: 1px solid var(--account-border);
    border-radius: 18px;
    padding: 22px;
}

.account-review-header{
    margin-bottom:20px;
}

.account-review-header h1{
    margin:0 0 6px;

    font-family:Poppins, sans-serif;
    color:var(--account-text);

    font-size:28px;
    line-height:1.2;
}

.account-review-header p{
    margin:0;

    color:var(--account-text-light);
    font-size:12px;
}


/* ==========================================================================
   PRODUCT
   ========================================================================== */

.account-review-product{
    display:flex;
    align-items:center;
    gap:16px;

    margin-bottom:18px;
    padding:18px 20px;

    background:#fff;

    border:1px solid var(--account-border);
    border-radius:16px;
}

.account-review-product-image{
    width:72px;
    height:72px;

    flex-shrink:0;

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

    overflow:hidden;

    background:#f7f4f3;

    border:1px solid var(--account-border);
    border-radius:11px;

    color:#bbb;
    font-size:20px;
}

.account-review-product-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.account-review-product-info{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.account-review-product-info strong{
    color:var(--account-text);

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

.account-review-product-info span{
    color:var(--account-text-light);

    font-size:10px;
}


/* ==========================================================================
   REVIEW STATUS
   ========================================================================== */

.account-review-status,
.account-review-edit-warning{
    display:flex;
    align-items:flex-start;
    gap:12px;

    margin-bottom:18px;
    padding:15px 17px;

    border-radius:12px;

    font-size:12px;
}

.account-review-status > i,
.account-review-edit-warning > i{
    margin-top:2px;
    font-size:16px;
}

.account-review-status > div{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.account-review-status strong{
    font-size:12px;
    font-weight:600;
}

.account-review-status span{
    font-size:11px;
    line-height:1.5;
}

.account-review-status p{
    margin:7px 0 0;

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

.account-review-status-pending{
    color:#996b25;
    background:#fff7ea;
}

.account-review-status-approved{
    color:#43865a;
    background:#edf8f0;
}

.account-review-status-rejected{
    color:#a45151;
    background:#fbeeee;
}

.account-review-edit-warning{
    color:#55739c;
    background:#eef4fc;

    line-height:1.5;
}


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

.account-review-form{
    padding:22px 24px;

    background:#fff;

    border:1px solid var(--account-border);
    border-radius:16px;
}

.account-review-field{
    margin-bottom:22px;
}

.account-review-field > label{
    display:block;

    margin-bottom:9px;

    color:var(--account-text);

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

.account-review-field textarea{
    width:100%;
    min-height:150px;

    padding:13px 15px;

    resize:vertical;

    border:1px solid var(--account-border);
    border-radius:10px;

    outline:none;

    background:#fff;

    color:var(--account-text);

    font-family:Poppins,sans-serif;
    font-size:12px;
    line-height:1.6;

    transition:.2s ease;
}

.account-review-field textarea:focus{
    border-color:var(--account-primary);

    box-shadow:0 0 0 3px rgba(216,143,155,.12);
}

.account-review-hint{
    display:block;

    margin-top:6px;

    color:var(--account-text-light);
    font-size:10px;
}


/* ==========================================================================
   STARS
   ========================================================================== */

.account-review-stars{
    display:inline-flex;
    flex-direction:row-reverse;
    justify-content:flex-end;

    gap:5px;
}

.account-review-stars input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.account-review-stars label{
    color:#ddd;

    font-size:27px;

    cursor:pointer;

    transition:.15s ease;
}

.account-review-stars label:hover,
.account-review-stars label:hover ~ label,
.account-review-stars input:checked ~ label{
    color:#f2b84b;
}


/* ==========================================================================
   REVIEW IMAGES
   ========================================================================== */

.account-review-images{
    margin-bottom:22px;
}

.account-review-images-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    margin-bottom:10px;
}

.account-review-images-header strong{
    color:var(--account-text);

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

.account-review-images-header span{
    color:var(--account-text-light);

    font-size:10px;
}

.account-review-images-list{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.account-review-image{
    position:relative;

    width:88px;
    height:88px;

    overflow:hidden;

    border:1px solid var(--account-border);
    border-radius:10px;

    background:#f7f4f3;
}

.account-review-image img{
    width:100%;
    height:100%;

    object-fit:cover;
}

.account-review-image-remove{
    position:absolute;

    top:5px;
    right:5px;

    width:24px;
    height:24px;

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

    padding:0;

    border:none;
    border-radius:50%;

    background:rgba(30,30,30,.72);
    color:#fff;

    font-size:10px;

    cursor:pointer;
}

.account-review-image-remove:hover{
    background:#222;
}

.account-review-image-add{
    width:88px;
    height:88px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;

    border:1px dashed #d5c9cb;
    border-radius:10px;

    background:#faf8f8;

    color:var(--account-text-light);

    cursor:pointer;

    font-size:9px;
    font-weight:500;

    transition:.2s ease;
}

.account-review-image-add i{
    color:var(--account-primary);
    font-size:18px;
}

.account-review-image-add:hover{
    border-color:var(--account-primary);

    background:#fff3f5;
    color:var(--account-primary);
}

.account-review-image-add.hidden{
    display:none;
}


/* ==========================================================================
   ACTIONS
   ========================================================================== */

.account-review-form-actions{
    display:flex;
    justify-content:flex-end;

    padding-top:18px;

    border-top:1px solid var(--account-border);
}

.account-review-submit,
.account-review-edit-button{
    min-height:42px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    padding:0 20px;

    border:none;
    border-radius:10px;

    background:#d56578;
    color:#fff;

    font-family:Poppins,sans-serif;
    font-size:11px;
    font-weight:600;

    text-decoration:none;
    cursor:pointer;

    transition:.2s ease;
}

.account-review-submit:hover,
.account-review-edit-button:hover{
    background:#c95569;

    transform:translateY(-1px);
}


/* ==========================================================================
   APPROVED REVIEW
   ========================================================================== */

.account-review-current{
    padding:22px 24px;

    background:#fff;

    border:1px solid var(--account-border);
    border-radius:16px;
}

.account-review-current-rating{
    display:flex;
    gap:4px;

    margin-bottom:14px;

    color:#f2b84b;
    font-size:18px;
}

.account-review-current > p{
    margin:0 0 18px;

    color:var(--account-text);

    font-size:12px;
    line-height:1.7;
}

.account-review-current-images{
    display:flex;
    flex-wrap:wrap;
    gap:10px;

    margin:0 0 18px;
}

.account-review-current-image{
    width:88px;
    height:88px;

    display:block;

    overflow:hidden;

    border:1px solid var(--account-border);
    border-radius:10px;
}

.account-review-current-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:.2s ease;
}

.account-review-current-image:hover img{
    transform:scale(1.04);
}

/* ==========================================================================
   PROBLEM REPORT
   ========================================================================== */

.account-problem-create{
	width: 100%;
    background: #fff;
    border: 1px solid var(--account-border);
    border-radius: 18px;
    padding: 22px;
}

.account-problem-header{
    margin-bottom:20px;
}

.account-problem-header h1{
    margin:0 0 6px;

    font-family:Poppins, sans-serif;

    color:var(--account-text);

    font-size:28px;
    line-height:1.2;
}

.account-problem-header p{
    max-width:600px;

    margin:0;

    color:var(--account-text-light);

    font-size:11px;
    line-height:1.6;
}


/* PRODUCT */

.account-problem-product{
    display:flex;
    align-items:center;
    gap:16px;

    margin-bottom:18px;
    padding:18px 20px;

    background:#fff;

    border:1px solid var(--account-border);
    border-radius:16px;
}

.account-problem-product-image{
    width:72px;
    height:72px;

    flex-shrink:0;

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

    overflow:hidden;

    background:#f7f4f3;

    border:1px solid var(--account-border);
    border-radius:11px;

    color:#bbb;
    font-size:20px;
}

.account-problem-product-image img{
    width:100%;
    height:100%;

    object-fit:cover;
}

.account-problem-product-info{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.account-problem-product-info strong{
    color:var(--account-text);

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

.account-problem-product-info span{
    color:var(--account-text-light);

    font-size:10px;
}


/* FORM */

.account-problem-form{
    padding:22px 24px;

    background:#fff;

    border:1px solid var(--account-border);
    border-radius:16px;
}

.account-problem-field > label{
    display:block;

    margin-bottom:9px;

    color:var(--account-text);

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

.account-problem-field textarea{
    width:100%;
    min-height:180px;

    padding:14px 15px;

    resize:vertical;

    background:#fff;

    border:1px solid var(--account-border);
    border-radius:10px;

    outline:none;

    color:var(--account-text);

    font-family:Poppins,sans-serif;
    font-size:12px;
    line-height:1.6;

    transition:.2s ease;
}

.account-problem-field textarea:focus{
    border-color:#d56578;

    box-shadow:
        0 0 0 3px rgba(213,101,120,.10);
}

.account-problem-field > span{
    display:block;

    margin-top:6px;

    color:var(--account-text-light);

    font-size:10px;
}


/* ACTIONS */

.account-problem-actions{
    display:flex;
    justify-content:flex-end;

    margin-top:20px;
    padding-top:18px;

    border-top:1px solid var(--account-border);
}

.account-problem-submit{
    min-height:42px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    padding:0 20px;

    border:none;
    border-radius:10px;

    background:#d56578;
    color:#fff;

    font-family:Poppins,sans-serif;
    font-size:11px;
    font-weight:600;

    cursor:pointer;

    transition:.2s ease;
}

.account-problem-submit:hover{
    background:#c95569;

    transform:translateY(-1px);
}

/* ==========================================================================
   PROBLEM CONVERSATION
   ========================================================================== */

.account-problem-conversation{
    width:100%;

    background:#fff;

    border:1px solid var(--account-border);
    border-radius:18px;

    padding:22px;
}


/* HEADER */

.account-problem-conversation-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:25px;

    margin-bottom:18px;
}

.account-problem-conversation-header h1{
    margin:0 0 5px;

    font-family:Poppins, sans-serif;

    color:var(--account-text);

    font-size:28px;
}

.account-problem-conversation-header p{
    margin:0;

    color:var(--account-text-light);

    font-size:11px;
}


/* STATUS */

.account-problem-status{
    display:inline-flex;
    align-items:center;

    padding:6px 10px;

    border-radius:8px;

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

.account-problem-status-waiting{
    color:#a66d20;
    background:#fff4e3;
}

.account-problem-status-reply{
    color:#5578a8;
    background:#edf4fc;
}

.account-problem-status-resolved{
    color:#43865a;
    background:#edf8f0;
}

.account-problem-status-closed{
    color:#777;
    background:#f1f1f1;
}


/* PRODUCT */

.account-problem-conversation-product{
    display:flex;
    align-items:center;
    gap:14px;

    padding:14px 16px;

    background:#faf8f8;

    border-radius:12px;
}


/* CHAT */

.account-problem-chat{
    display:flex;
    flex-direction:column;
    gap:18px;
    max-height:min(600px, 60vh);
    margin-top:20px;
    padding:22px;
    overflow-y:auto;
    background:#fafafa;
    border:1px solid var(--account-border);
    border-radius:14px;
}

.account-problem-message{
    max-width:70%;

    display:flex;
    flex-direction:column;
}

.account-problem-message-customer{
    align-self:flex-end;
    align-items:flex-end;
}

.account-problem-message-admin{
    align-self:flex-start;
    align-items:flex-start;
}

.account-problem-message-author{
    margin-bottom:5px;

    color:var(--account-text-light);

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

.account-problem-message-bubble{
    padding:11px 14px;

    border-radius:13px;

    font-size:11px;
    line-height:1.6;
}

.account-problem-message-customer
.account-problem-message-bubble{
    background:#d56578;
    color:#fff;

    border-bottom-right-radius:4px;
}

.account-problem-message-admin
.account-problem-message-bubble{
    background:#fff;
    color:var(--account-text);

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

    border-bottom-left-radius:4px;
}

.account-problem-message-date{
    margin-top:5px;

    color:#aaa;

    font-size:8px;
}


/* REPLY */

.account-problem-reply{
    margin-top:18px;
    padding:18px;

    background:#fff;

    border:1px solid var(--account-border);
    border-radius:14px;
}

.account-problem-reply > label{
    display:block;

    margin-bottom:8px;

    color:var(--account-text);

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

.account-problem-reply textarea{
    width:100%;
    min-height:100px;

    padding:12px 14px;

    resize:vertical;

    border:1px solid var(--account-border);
    border-radius:10px;

    outline:none;

    font-family:Poppins,sans-serif;
    font-size:11px;
    line-height:1.6;
}

.account-problem-reply textarea:focus{
    border-color:var(--account-primary);

    box-shadow:
        0 0 0 3px rgba(216,143,155,.10);
}

.account-problem-reply-actions{
    display:flex;
    justify-content:flex-end;

    margin-top:12px;
}


/* CLOSED */

.account-problem-conversation-closed{
    display:flex;
    align-items:center;
    gap:12px;

    margin-top:18px;
    padding:15px 17px;

    background:#edf8f0;
    color:#43865a;

    border-radius:12px;
}

.account-problem-conversation-closed > i{
    font-size:17px;
}

.account-problem-conversation-closed > div{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.account-problem-conversation-closed strong{
    font-size:11px;
}

.account-problem-conversation-closed span{
    font-size:10px;
}

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

.account-support-page{
    width:100%;

    padding:22px;

    background:#fff;

    border:1px solid var(--account-border);
    border-radius:18px;
}


/* HEADER */

.account-support-header{
    margin-bottom:20px;
}

.account-support-header h1{
    margin:0 0 6px;

    font-family:Poppins, sans-serif;

    color:var(--account-text);

    font-size:28px;
    line-height:1.2;
}

.account-support-header p{
    margin:0;

    color:var(--account-text-light);

    font-size:12px;
}


/* FILTERS */

.account-support-filters{
    display:flex;
    align-items:center;
    gap:8px;

    margin-bottom:20px;

    padding:6px;

    border:1px solid var(--account-border);
    border-radius:12px;

    background:#fff;
}

.account-support-filter{
    min-height:38px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    padding:0 14px;

    border-radius:8px;

    color:var(--account-text-light);

    font-size:11px;
    font-weight:500;

    text-decoration:none;

    transition:.2s ease;
}

.account-support-filter:hover{
    color:var(--account-primary);
    background:#fff7f8;
}

.account-support-filter.active{
    color:var(--account-primary);
    background:#fff1f3;

    font-weight:600;
}

.account-support-filter > span{
    min-width:20px;
    height:20px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:0 6px;

    border-radius:999px;

    background:#f5f2f2;

    color:#888;

    font-size:8px;
}

.account-support-filter.active > span{
    background:#fff;
    color:var(--account-primary);
}


/* LIST */

.account-support-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.account-support-card{
    display:flex;
    align-items:flex-start;
    gap:15px;

    padding:17px 18px;

    background:#fff;

    border:1px solid var(--account-border);
    border-radius:14px;

    color:inherit;

    text-decoration:none;

    transition:.2s ease;
}

.account-support-card:hover{
    border-color:#eadadd;

    box-shadow:
        0 8px 24px rgba(0,0,0,.04);

    transform:translateY(-1px);
}


/* ICON */

.account-support-card-icon{
    width:46px;
    height:46px;

    flex-shrink:0;

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

    border-radius:11px;

    background:#fff1f3;
    color:var(--account-primary);

    font-size:16px;
}


/* CONTENT */

.account-support-card-content{
    min-width:0;
    flex:1;
}

.account-support-card-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
}

.account-support-card-top > div{
    min-width:0;

    display:flex;
    flex-direction:column;
    gap:3px;
}

.account-support-card-type{
    color:var(--account-primary);

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

    text-transform:uppercase;
    letter-spacing:.4px;
}

.account-support-card-top strong{
    color:var(--account-text);

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

.account-support-card-meta{
    display:block;

    margin-top:4px;

    color:var(--account-text-light);

    font-size:9px;
}


/* LAST MESSAGE */

.account-support-card-message{
    margin:10px 0 12px;

    color:#777;

    font-size:10px;
    line-height:1.6;
}


/* STATUS */

.account-support-status{
    flex-shrink:0;

    display:inline-flex;
    align-items:center;

    padding:6px 9px;

    border-radius:8px;

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

.account-support-status-waiting{
    background:#fff4e3;
    color:#a66d20;
}

.account-support-status-reply{
    background:#edf4fc;
    color:#5578a8;
}

.account-support-status-resolved{
    background:#edf8f0;
    color:#43865a;
}

.account-support-status-closed{
    background:#f2f2f2;
    color:#777;
}


/* BOTTOM */

.account-support-card-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    padding-top:10px;

    border-top:1px solid #f0f0f0;

    color:#aaa;

    font-size:8px;
}

.account-support-card-bottom > span{
    display:flex;
    align-items:center;
    gap:6px;
}

.account-support-card-open{
    color:var(--account-primary);

    font-weight:600;
}

.account-support-card-open i{
    font-size:7px;
}


/* EMPTY */

.account-support-empty{
    min-height:280px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    padding:40px;

    text-align:center;
}

.account-support-empty-icon{
    width:58px;
    height:58px;

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

    margin-bottom:14px;

    border-radius:50%;

    background:#fff1f3;
    color:var(--account-primary);

    font-size:20px;
}

.account-support-empty h3{
    margin:0 0 6px;

    font-family:Poppins, sans-serif;

    color:var(--account-text);

    font-size:18px;
}

.account-support-empty p{
    margin:0;

    color:var(--account-text-light);

    font-size:11px;
}

/* ==========================================================================
   PROBLEM HISTORY
   ========================================================================== */

.account-problem-history{
    margin-top:22px;
    padding-top:22px;

    border-top:1px solid var(--account-border);
}

.account-problem-history-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    margin-bottom:5px;
}

.account-problem-history-header h2{
    margin:0;

    font-family:"Playfair Display",serif;

    color:var(--account-text);

    font-size:19px;
}

.account-problem-history-header > span{
    min-width:24px;
    height:24px;

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

    padding:0 7px;

    border-radius:999px;

    background:#fff1f3;
    color:var(--account-primary);

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

.account-problem-history-description{
    margin:0 0 15px;

    color:var(--account-text-light);

    font-size:10px;
}


/* LIST */

.account-problem-history-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.account-problem-history-item{
    display:flex;
    align-items:flex-start;
    gap:13px;

    padding:15px 16px;

    background:#fff;

    border:1px solid var(--account-border);
    border-radius:12px;

    color:inherit;

    text-decoration:none;

    transition:.2s ease;
}

.account-problem-history-item:hover{
    border-color:#eadadd;

    background:#fffafa;
}

.account-problem-history-item.current{
    border-color:#eed9dd;
    background:#fff7f8;
}


/* ICON */

.account-problem-history-icon{
    width:40px;
    height:40px;

    flex-shrink:0;

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

    border-radius:10px;

    background:#f7f4f3;
    color:#888;

    font-size:14px;
}

.account-problem-history-item.current
.account-problem-history-icon{
    background:#ffecef;
    color:var(--account-primary);
}


/* CONTENT */

.account-problem-history-content{
    min-width:0;

    flex:1;
}

.account-problem-history-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
}

.account-problem-history-top > div{
    display:flex;
    align-items:center;
    gap:8px;
}

.account-problem-history-top strong{
    color:var(--account-text);

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

.account-problem-history-current{
    padding:4px 7px;

    border-radius:6px;

    background:#ffecef;
    color:var(--account-primary);

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


/* MESSAGE */

.account-problem-history-content > p{
    margin:8px 0 10px;

    color:var(--account-text-light);

    font-size:10px;
    line-height:1.6;
}


/* BOTTOM */

.account-problem-history-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    padding-top:9px;

    border-top:1px solid #f1f1f1;

    color:#aaa;

    font-size:8px;
}

.account-problem-history-bottom > span{
    display:flex;
    align-items:center;
    gap:6px;
}

.account-problem-history-open{
    color:var(--account-primary);

    font-weight:600;
}

.account-problem-history-open i{
    font-size:7px;
}

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

.account-reviews-page{
    width:100%;

    padding:22px;

    background:#fff;

    border:1px solid var(--account-border);
    border-radius:18px;
}


/* HEADER */

.account-reviews-header{
    margin-bottom:20px;
}

.account-reviews-header h1{
    margin:0 0 6px;

    font-family:Poppins,sans-serif;
    font-size:28px;
    font-weight:600;
    line-height:1.2;

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

.account-reviews-header p{
    margin:0;

    color:var(--account-text-light);

    font-size:12px;
}


/* FILTERS */

.account-reviews-filters{
    display:flex;
    align-items:center;
    gap:8px;

    margin-bottom:20px;

    padding:6px;

    background:#fff;

    border:1px solid var(--account-border);
    border-radius:12px;
}

.account-reviews-filter{
    min-height:38px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    padding:0 14px;

    border-radius:8px;

    color:var(--account-text-light);

    font-size:11px;
    font-weight:500;

    text-decoration:none;

    transition:.2s ease;
}

.account-reviews-filter:hover{
    color:var(--account-primary);
    background:#fff7f8;
}

.account-reviews-filter.active{
    color:var(--account-primary);
    background:#fff1f3;

    font-weight:600;
}

.account-reviews-filter > span{
    min-width:20px;
    height:20px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:0 6px;

    border-radius:999px;

    background:#f5f2f2;
    color:#888;

    font-size:8px;
}

.account-reviews-filter.active > span{
    background:#fff;
    color:var(--account-primary);
}


/* LIST */

.account-reviews-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.account-reviews-card{
    display:flex;
    align-items:flex-start;
    gap:16px;

    padding:17px 18px;

    background:#fff;

    border:1px solid var(--account-border);
    border-radius:14px;

    color:inherit;

    text-decoration:none;

    transition:.2s ease;
}

.account-reviews-card:hover{
    border-color:#eadadd;

    box-shadow:0 8px 24px rgba(0,0,0,.04);

    transform:translateY(-1px);
}


/* IMAGE */

.account-reviews-card-image{
    width:70px;
    height:70px;

    flex-shrink:0;

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

    overflow:hidden;

    background:#f7f4f3;

    border:1px solid var(--account-border);
    border-radius:11px;

    color:#bbb;

    font-size:20px;
}

.account-reviews-card-image img{
    width:100%;
    height:100%;

    object-fit:cover;
}


/* CONTENT */

.account-reviews-card-content{
    min-width:0;

    flex:1;
}

.account-reviews-card-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
}

.account-reviews-card-top > div{
    min-width:0;

    display:flex;
    flex-direction:column;
    gap:3px;
}

.account-reviews-card-top strong{
    color:var(--account-text);

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

.account-reviews-card-top > div > span{
    color:var(--account-text-light);

    font-size:9px;
}


/* STATUS */

.account-reviews-status{
    flex-shrink:0;

    display:inline-flex;
    align-items:center;

    padding:6px 9px;

    border-radius:8px;

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

.account-reviews-status-pending{
    background:#fff4e3;
    color:#a66d20;
}

.account-reviews-status-approved{
    background:#edf8f0;
    color:#43865a;
}

.account-reviews-status-rejected{
    background:#fbeeee;
    color:#a35a5a;
}


/* RATING */

.account-reviews-rating{
    display:flex;
    align-items:center;
    gap:3px;

    margin-top:10px;

    color:#f2b84b;

    font-size:12px;
}

.account-reviews-rating span{
    margin-left:4px;

    color:var(--account-text-light);

    font-size:9px;
}


/* REVIEW */

.account-reviews-card-text{
    margin:8px 0 10px;

    color:#666;

    font-size:10px;
    line-height:1.6;
}


/* NOTES */

.account-reviews-public-note,
.account-reviews-rejected-note{
    display:flex;
    align-items:flex-start;
    gap:7px;

    margin:9px 0;

    padding:9px 11px;

    border-radius:8px;

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

.account-reviews-public-note{
    background:#edf4fc;
    color:#5578a8;
}

.account-reviews-rejected-note{
    background:#fbeeee;
    color:#a35a5a;
}


/* BOTTOM */

.account-reviews-card-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    margin-top:10px;
    padding-top:10px;

    border-top:1px solid #f0f0f0;

    color:#aaa;

    font-size:8px;
}

.account-reviews-card-bottom > div{
    display:flex;
    align-items:center;
    gap:14px;
}

.account-reviews-card-bottom span{
    display:flex;
    align-items:center;
    gap:5px;
}

.account-reviews-open{
    color:var(--account-primary);

    font-weight:600;
}

.account-reviews-open i{
    font-size:7px;
}


/* EMPTY */

.account-reviews-empty{
    min-height:280px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    padding:40px;

    text-align:center;
}

.account-reviews-empty-icon{
    width:58px;
    height:58px;

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

    margin-bottom:14px;

    border-radius:50%;

    background:#fff1f3;
    color:var(--account-primary);

    font-size:20px;
}

.account-reviews-empty h3{
    margin:0 0 6px;

    font-family:Poppins,sans-serif;

    color:var(--account-text);

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

.account-reviews-empty p{
    margin:0;

    color:var(--account-text-light);

    font-size:11px;
}

/* ==========================================================================
   PAYMENT METHODS
   ========================================================================== */

.account-payments-page{
    width:100%;

    padding:22px;

    background:#fff;

    border:1px solid var(--account-border);
    border-radius:18px;
}


/* HEADER */

.account-payments-header{
    margin-bottom:20px;
}

.account-payments-header h1{
    margin:0 0 6px;

    font-family:Poppins,sans-serif;
    font-size:28px;
    font-weight:600;
    line-height:1.2;

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

.account-payments-header p{
    margin:0;

    color:var(--account-text-light);

    font-size:12px;
}


/* DISABLED */

.account-payments-disabled{
    min-height:300px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:22px;

    padding:45px;

    background:#faf8f8;

    border:1px solid var(--account-border);
    border-radius:16px;
}

.account-payments-disabled-icon{
    width:72px;
    height:72px;

    flex-shrink:0;

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

    border-radius:50%;

    background:#fff1f3;
    color:var(--account-primary);

    font-size:27px;
}

.account-payments-disabled-content{
    max-width:520px;
}

.account-payments-disabled-badge{
    display:inline-flex;
    align-items:center;

    margin-bottom:10px;
    padding:5px 9px;

    border-radius:7px;

    background:#f1eeee;
    color:#777;

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

    text-transform:uppercase;
    letter-spacing:.4px;
}

.account-payments-disabled-content h2{
    margin:0 0 8px;

    font-family:Poppins,sans-serif;

    color:var(--account-text);

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

.account-payments-disabled-content p{
    margin:0;

    color:var(--account-text-light);

    font-size:11px;
    line-height:1.7;
}

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

.account-addresses-page{
    width:100%;

    padding:22px;

    background:#fff;

    border:1px solid var(--account-border);
    border-radius:18px;
}


/* HEADER */

.account-addresses-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;

    margin-bottom:22px;
}

.account-addresses-header h1{
    margin:0 0 6px;

    font-family:Poppins,sans-serif;
    font-size:28px;
    font-weight:600;
    line-height:1.2;

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

.account-addresses-header p{
    margin:0;

    color:var(--account-text-light);

    font-size:12px;
}

.account-addresses-add{
    min-height:40px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    flex-shrink:0;

    padding:0 16px;

    border-radius:10px;

    background:#d56578;
    color:#fff;

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

    text-decoration:none;

    transition:.2s ease;
}

.account-addresses-add:hover{
    background:#c95569;

    transform:translateY(-1px);
}


/* GRID */

.account-addresses-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
}


/* CARD */

.account-address-card{
    min-width:0;

    padding:18px;

    background:#fff;

    border:1px solid var(--account-border);
    border-radius:14px;

    transition:.2s ease;
}

.account-address-card:hover{
    border-color:#eadadd;

    box-shadow:0 8px 24px rgba(0,0,0,.035);
}

.account-address-card.default{
    border-color:#ead4d8;
}


/* CARD HEADER */

.account-address-card-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:15px;

    margin-bottom:15px;
}

.account-address-card-title{
    display:flex;
    align-items:center;
    gap:11px;
}

.account-address-card-icon{
    width:38px;
    height:38px;

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

    flex-shrink:0;

    border-radius:9px;

    background:#fff1f3;
    color:var(--account-primary);

    font-size:13px;
}

.account-address-card-title > div:last-child{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
}

.account-address-card-title strong{
    color:var(--account-text);

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


/* DEFAULT */

.account-address-default{
    display:inline-flex;

    padding:4px 7px;

    border-radius:6px;

    background:#edf8f0;
    color:#43865a;

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

    text-transform:uppercase;
    letter-spacing:.3px;
}


/* EDIT */

.account-address-edit{
    width:32px;
    height:32px;

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

    flex-shrink:0;

    border-radius:8px;

    color:#888;

    text-decoration:none;

    transition:.2s ease;
}

.account-address-edit:hover{
    background:#fff1f3;
    color:var(--account-primary);
}


/* ADDRESS */

.account-address-card-content{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:3px;

    min-height:140px;

    color:var(--account-text-light);

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

.account-address-card-content > strong{
    margin-bottom:3px;

    color:var(--account-text);

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

.account-address-phone{
    display:flex;
    align-items:center;
    gap:6px;

    margin-top:7px;
}

.account-address-phone i{
    font-size:8px;
}


/* FOOTER */

.account-address-card-footer{
    min-height:35px;

    display:flex;
    align-items:flex-end;

    margin-top:14px;
    padding-top:12px;

    border-top:1px solid #f0f0f0;
}

.account-address-card-footer form{
    margin:0;
}

.account-address-card-footer button{
    padding:0;

    border:none;

    background:none;

    color:var(--account-primary);

    font-family:Poppins,sans-serif;
    font-size:9px;
    font-weight:600;

    cursor:pointer;
}

.account-address-card-footer button:hover{
    text-decoration:underline;
}

.account-address-card-default-info{
    display:flex;
    align-items:center;
    gap:6px;

    color:#43865a;

    font-size:9px;
}

.account-address-card-default-info i{
    font-size:9px;
}


/* EMPTY */

.account-addresses-empty{
    min-height:300px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    padding:40px;

    text-align:center;
}

.account-addresses-empty-icon{
    width:58px;
    height:58px;

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

    margin-bottom:14px;

    border-radius:50%;

    background:#fff1f3;
    color:var(--account-primary);

    font-size:20px;
}

.account-addresses-empty h3{
    margin:0 0 6px;

    font-family:Poppins,sans-serif;

    color:var(--account-text);

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

.account-addresses-empty p{
    margin:0 0 18px;

    color:var(--account-text-light);

    font-size:11px;
}

.account-addresses-empty-button{
    min-height:38px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;

    padding:0 15px;

    border-radius:9px;

    background:#d56578;
    color:#fff;

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

    text-decoration:none;
}

.account-addresses-empty-button:hover{
    background:#c95569;
}

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

.account-address-form-page{
    width:100%;

    padding:22px;

    background:#fff;

    border:1px solid var(--account-border);
    border-radius:18px;
}


/* HEADER */

.account-address-form-header{
    margin-bottom:22px;
}

.account-address-form-header h1{
    margin:0 0 6px;

    font-family:Poppins,sans-serif;
    font-size:28px;
    font-weight:600;
    line-height:1.2;

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

.account-address-form-header p{
    margin:0;

    color:var(--account-text-light);

    font-size:12px;
}


/* FORM */

.account-address-form{
    padding:22px;

    border:1px solid var(--account-border);
    border-radius:14px;

    background:#fff;
}

.account-address-form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.account-address-form-field{
    margin-bottom:16px;
}

.account-address-form-field label{
    display:block;

    margin-bottom:7px;

    color:var(--account-text);

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

.account-address-form-field input{
    width:100%;
    height:44px;

    padding:0 13px;

    border:1px solid var(--account-border);
    border-radius:9px;

    background:#fff;

    outline:none;

    color:var(--account-text);

    font-family:Poppins,sans-serif;
    font-size:11px;

    transition:.2s ease;
}

.account-address-form-field input:focus{
    border-color:var(--account-primary);

    box-shadow:
        0 0 0 3px rgba(216,143,155,.10);
}

.account-address-form-field > span{
    display:block;

    margin-top:5px;

    color:#999;

    font-size:9px;
}


/* COUNTRY */

.account-address-form-country{
    height:44px;

    display:flex;
    align-items:center;

    padding:0 13px;

    border:1px solid var(--account-border);
    border-radius:9px;

    background:#fafafa;

    color:#777;

    font-size:11px;
}


/* DEFAULT */

.account-address-form-default{
    display:flex;
    align-items:flex-start;
    gap:11px;

    margin-top:3px;
    padding:14px 15px;

    border:1px solid var(--account-border);
    border-radius:10px;

    background:#faf8f8;

    cursor:pointer;
}

.account-address-form-default input{
    width:16px;
    height:16px;

    margin-top:2px;

    flex-shrink:0;

    accent-color:var(--account-primary);
}

.account-address-form-default > span{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.account-address-form-default strong{
    color:var(--account-text);

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

.account-address-form-default small{
    color:var(--account-text-light);

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


/* ACTIONS */

.account-address-form-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;

    margin-top:22px;
    padding-top:18px;

    border-top:1px solid var(--account-border);
}

.account-address-form-cancel{
    min-height:40px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:0 16px;

    border:1px solid var(--account-border);
    border-radius:9px;

    color:var(--account-text-light);

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

    text-decoration:none;

    transition:.2s ease;
}

.account-address-form-cancel:hover{
    border-color:#d8c9cc;

    color:var(--account-text);

    background:#faf8f8;
}

.account-address-form-submit{
    min-height:40px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;

    padding:0 17px;

    border:none;
    border-radius:9px;

    background:#d56578;
    color:#fff;

    font-family:Poppins,sans-serif;
    font-size:10px;
    font-weight:600;

    cursor:pointer;

    transition:.2s ease;
}

.account-address-form-submit:hover{
    background:#c95569;

    transform:translateY(-1px);
}

.account-address-card-actions{
    display:flex;
    align-items:center;
    gap:3px;

    flex-shrink:0;
}

.account-address-delete-form{
    margin:0;
}

.account-address-delete{
    width:32px;
    height:32px;

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

    padding:0;

    border:none;
    border-radius:8px;

    background:transparent;
    color:#999;

    font-family:Poppins,sans-serif;

    cursor:pointer;

    transition:.2s ease;
}

.account-address-delete:hover{
    background:#fff0f0;
    color:#c65353;
}

.account-address-form-field input.account-address-input-error{
    border-color:#d65b5b;
    background:#fffafa;
}

.account-address-form-field input.account-address-input-error:focus{
    border-color:#d65b5b;

    box-shadow:
        0 0 0 3px rgba(214,91,91,.10);
}

.account-address-field-error{
    display:block;

    min-height:13px;

    margin-top:5px;

    color:#c74f4f;

    font-size:9px;
    line-height:1.4;
}

/* ==========================================================================
   SUPPORT MESSAGE IMAGES
   ========================================================================== */

.account-problem-images-preview{
    display:flex;
    flex-wrap:wrap;
    gap:8px;

    margin:10px 0;
}

.account-problem-image-preview-item{
    position:relative;

    width:70px;
    height:70px;

    overflow:hidden;

    border:1px solid #e6e6e6;
    border-radius:8px;

    background:#f8f8f8;
}

.account-problem-image-preview-item img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}

.account-problem-message-images{
    display:flex;
    flex-wrap:wrap;
    gap:7px;

    margin-top:7px;

    max-width:360px;
}

.account-problem-message-image{
    width:80px;
    height:80px;

    display:block;

    overflow:hidden;

    border:1px solid var(--account-border);
    border-radius:9px;

    background:#f7f7f7;

    text-decoration:none;

    transition:.2s ease;
}

.account-problem-message-image img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}

.account-problem-message-image:hover{
    transform:translateY(-1px);

    box-shadow:0 5px 14px rgba(0,0,0,.08);
}

.account-problem-message-customer .account-problem-message-images{
    align-self:flex-end;
    justify-content:flex-end;
}

.account-problem-message-admin .account-problem-message-images{
    align-self:flex-start;
    justify-content:flex-start;
}

.account-problem-images{
    margin-top:10px;
}

.account-problem-images-add{
    min-height:36px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;

    padding:0 13px;

    border:1px solid #e3d4d7;
    border-radius:9px;

    background:#fff;
    color:#d56578;

    font-family:Poppins,sans-serif;
    font-size:10px;
    font-weight:600;

    cursor:pointer;

    transition:.2s ease;
}

.account-problem-images-add:hover{
    background:#fff5f7;
    border-color:#d56578;
}

.account-problem-images-add i{
    font-size:11px;
}

.account-problem-image-preview-remove{
    position:absolute;

    top:4px;
    right:4px;

    width:20px;
    height:20px;

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

    padding:0;

    border:0;
    border-radius:50%;

    background:rgba(0,0,0,.65);
    color:#fff;

    font-family:Poppins,sans-serif;
    font-size:10px;

    cursor:pointer;

    transition:.2s ease;
}

.account-problem-image-preview-remove:hover{
    background:rgba(0,0,0,.85);
}

/* ==========================================================================
   ACCOUNT SETTINGS
   ========================================================================== */
.account-settings-page,
.account-settings-page h1,
.account-settings-page h2,
.account-settings-page h3,
.account-settings-page p,
.account-settings-page span,
.account-settings-page label,
.account-settings-page button,
.account-settings-page input,
.account-settings-page select,
.account-settings-page textarea{
    font-family:Poppins,sans-serif;
}

.account-dashboard-settings{
    min-width:0;

    background:#fff;
    border:1px solid var(--account-border);
    border-radius:18px;

    padding:22px;
}


.account-settings-page{
    display:flex;
    flex-direction:column;
    gap:20px;

    font-family:Poppins,sans-serif;
}


/* Header */

.account-settings-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.account-settings-header-content{
    min-width:0;
}

.account-settings-header h1{
    margin:0 0 5px;

    color:#222;

    font-family:Poppins,sans-serif;
    font-size:24px;
    font-weight:700;
}

.account-settings-header p{
    margin:0;

    color:#777;

    font-family:Poppins,sans-serif;
    font-size:13px;
    line-height:1.6;
}


/* Grid */

.account-settings-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}


/* Card */

.account-settings-card{
    min-height:120px;

    display:flex;
    align-items:center;

    padding:20px;

    border:1px solid #ece7e8;
    border-radius:14px;

    background:#fff;

    box-shadow:none;
}

.account-settings-card-header{
    width:100%;

    display:flex;
    align-items:center;
    gap:13px;
}

.account-settings-card-header > div:last-child{
    flex:1;
    min-width:0;
}

.account-settings-card-header h2,
.account-settings-card-header p{
    text-align:left;
}

.account-settings-card-icon{
    width:38px;
    height:38px;

    flex:0 0 38px;

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

    border-radius:10px;

    background:#fff2f4;
    color:#d56578;

    font-size:15px;
}

.account-settings-card-header h2{
    margin:0 0 4px;

    color:#292929;

    font-family:Poppins,sans-serif;
    font-size:14px;
    font-weight:600;

    text-align:left;
}

.account-settings-card-header p{
    margin:0;

    color:#858585;

    font-size:11px;
    line-height:1.6;
}


/* Delete account */

.account-settings-delete{
    display:flex;
    align-items:center;
    gap:13px;

    padding:18px 20px;

    border:1px solid #f0d9dd;
    border-radius:14px;

    background:#fffafb;
}

.account-settings-delete-content{
    flex:1;
}

.account-settings-delete-content h2,
.account-settings-delete-content p{
    text-align:left;
}

.account-settings-delete-icon{
    width:38px;
    height:38px;

    flex:0 0 38px;

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

    border-radius:10px;

    background:#fdecef;
    color:#c95569;

    font-size:14px;
}

.account-settings-delete-content h2{
    margin:0 0 4px;
    font-family:Poppins,sans-serif;
    color:#b84659;

    font-size:13px;
    font-weight:650;
}

.account-settings-delete-content p{
    margin:0;

    color:#8f7378;

    font-size:11px;
    line-height:1.6;
}

.account-settings-profile{
    display:block;
}

.account-settings-profile-content{
    margin-top:20px;
}

.account-settings-avatar-row{
    display:flex;
    align-items:center;
    gap:16px;
}

.account-settings-avatar{
    width:72px;
    height:72px;

    flex:0 0 72px;

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

    overflow:hidden;

    border-radius:50%;

    background:#f8e9ec;
    color:#d56578;

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

.account-settings-avatar img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}

.account-settings-avatar-actions{
    display:flex;
    align-items:center;
    gap:10px;
}

.account-settings-secondary-button{
    min-height:36px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;

    padding:0 13px;

    border:1px solid #e3d4d7;
    border-radius:9px;

    background:#fff;
    color:#d56578;

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

    cursor:pointer;
}

.account-settings-secondary-button:hover{
    background:#fff5f7;
    border-color:#d56578;
}

.account-settings-avatar-remove{
    padding:0;

    border:0;
    background:transparent;

    color:#999;

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

    cursor:pointer;
}

.account-settings-avatar-remove:hover{
    color:#c95569;
}

.account-settings-divider{
    height:1px;

    margin:20px 0;

    background:#eee9ea;
}

.account-settings-field-heading{
    display:flex;
    flex-direction:column;
    gap:3px;

    margin-bottom:12px;
}

.account-settings-field-heading strong{
    color:#292929;

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

.account-settings-field-heading span{
    color:#858585;

    font-size:10px;
}

.account-settings-radio-option{
    display:flex;
    align-items:flex-start;
    gap:10px;

    padding:11px 12px;
    margin-bottom:8px;

    border:1px solid #ece7e8;
    border-radius:10px;

    cursor:pointer;
}

.account-settings-radio-option input{
    margin-top:3px;

    accent-color:#d56578;
}

.account-settings-radio-content{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.account-settings-radio-content strong{
    color:#333;

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

.account-settings-radio-content small{
    color:#898989;

    font-size:10px;
}

.account-settings-custom-name{
    margin-top:10px;
}

.account-settings-custom-name input{
    width:100%;
    height:42px;

    padding:0 12px;

    border:1px solid var(--account-border);
    border-radius:9px;

    outline:none;

    font-family:Poppins,sans-serif;
    font-size:11px;
}

.account-settings-custom-name input:focus{
    border-color:#d56578;
}

.account-settings-custom-name input:read-only{
    background:#f6f6f6;
    color:#aaa;

    cursor:not-allowed;
}

.account-settings-form-actions{
    display:flex;
    justify-content:flex-end;

    margin-top:20px;
    padding-top:16px;

    border-top:1px solid #eee9ea;
}

.account-settings-save{
    min-height:40px;

    flex:0 0 auto;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;

    padding:0 16px;

    border:0;
    border-radius:9px;

    background:#d56578;
    color:#fff;

    font-family:Poppins,sans-serif;
    font-size:11px;
    font-weight:600;

    cursor:pointer;

    transition:.2s ease;
}

.account-settings-save:hover{
    background:#c95569;
}

.account-settings-save[hidden]{
    display:none;
}

.account-settings-account{
    display:block;
}

.account-settings-account-content{
    display:flex;
    flex-direction:column;
    gap:13px;

    margin-top:20px;
}

.account-settings-readonly-field{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.account-settings-readonly-field > span{
    color:#777;

    font-size:10px;
    font-weight:500;
}

.account-settings-readonly-value{
    min-height:42px;

    display:flex;
    align-items:center;
    gap:9px;

    padding:0 12px;

    border:1px solid #ece7e8;
    border-radius:9px;

    background:#f8f8f8;

    color:#777;
}

.account-settings-readonly-value > i{
    width:15px;

    color:#aaa;

    font-size:11px;
}

.account-settings-readonly-value strong{
    min-width:0;

    color:#444;

    font-size:11px;
    font-weight:500;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.account-settings-verified{
    margin-left:auto;

    display:inline-flex;
    align-items:center;
    gap:5px;

    color:#5f9c70;

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

.account-settings-account-note{
    display:flex;
    align-items:center;
    gap:6px;

    margin:0;

    color:#999;

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

.account-settings-account-note i{
    font-size:9px;
}

.account-settings-reviews{
    display:block;
}

.account-settings-reviews-content{
    display:flex;
    flex-direction:column;
    gap:10px;

    margin-top:20px;
}

.account-settings-toggle-row{
    min-height:72px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;

    padding:13px 14px;

    border:1px solid #ece7e8;
    border-radius:11px;

    cursor:pointer;
}

.account-settings-toggle-content{
    min-width:0;

    display:flex;
    flex-direction:column;
    gap:3px;
}

.account-settings-toggle-content strong{
    color:#333;

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

.account-settings-toggle-content span{
    color:#888;

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

.account-settings-toggle-content small{
    margin-top:3px;

    color:#d56578;

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


/* Switch */

.account-settings-switch{
    position:relative;

    width:38px;
    height:22px;

    flex:0 0 38px;
}

.account-settings-switch input{
    width:0;
    height:0;

    opacity:0;
}

.account-settings-switch-slider{
    position:absolute;
    inset:0;

    border-radius:30px;

    background:#ddd;

    transition:.2s ease;
}

.account-settings-switch-slider::before{
    content:'';

    position:absolute;

    width:16px;
    height:16px;

    left:3px;
    top:3px;

    border-radius:50%;

    background:#fff;

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

    transition:.2s ease;
}

.account-settings-switch input:checked +
.account-settings-switch-slider{
    background:#d56578;
}

.account-settings-switch input:checked +
.account-settings-switch-slider::before{
    transform:translateX(16px);
}

.account-settings-switch input:disabled +
.account-settings-switch-slider{
    background:#e7e7e7;

    cursor:not-allowed;
}

.account-settings-toggle-row.disabled{
    opacity:.55;

    cursor:not-allowed;
}

.account-settings-marketing{
    display:block;
}

.account-settings-marketing-content{
    margin-top:20px;
}

.account-settings-marketing-date{
    margin-top:4px;

    color:#999 !important;

    font-size:9px;
    font-weight:500 !important;
}

.account-settings-security{
    display:block;
}

.account-settings-security-content{
    display:flex;
    flex-direction:column;
    gap:10px;

    margin-top:20px;
}


/* Action row */

.account-settings-action-row{
    width:100%;
    min-height:72px;

    display:flex;
    align-items:center;
    gap:12px;

    padding:13px 14px;

    border:1px solid #ece7e8;
    border-radius:11px;

    background:#fff;

    font-family:Poppins,sans-serif;
    text-align:left;

    cursor:pointer;

    transition:.2s ease;
}

.account-settings-action-row:hover{
    border-color:#e3d4d7;
    background:#fffafb;
}

.account-settings-action-icon{
    width:34px;
    height:34px;

    flex:0 0 34px;

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

    border-radius:9px;

    background:#fff2f4;
    color:#d56578;

    font-size:12px;
}

.account-settings-action-content{
    min-width:0;

    display:flex;
    flex-direction:column;
    gap:3px;

    flex:1;
}

.account-settings-action-content strong{
    color:#333;

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

.account-settings-action-content small{
    color:#888;

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

.account-settings-action-arrow{
    color:#bbb;

    font-size:10px;
}

.account-settings-security-email{
    margin-top:3px;

    color:#d56578 !important;

    font-size:9px !important;
    font-weight:500 !important;
}

.account-settings-preferences{
    display:block;
}

.account-settings-preferences-content{
    display:flex;
    flex-direction:column;
    gap:10px;

    margin-top:20px;
}

.account-settings-preference-row{
    min-height:72px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;

    padding:13px 14px;

    border:1px solid #ece7e8;
    border-radius:11px;
}

.account-settings-preference-content{
    min-width:0;

    display:flex;
    flex-direction:column;
    gap:3px;
}

.account-settings-preference-content strong{
    color:#333;

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

.account-settings-preference-content span{
    color:#888;

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

.account-settings-select{
    min-width:130px;
    height:38px;

    padding:0 34px 0 11px;

    border:1px solid var(--account-border);
    border-radius:9px;

    background:#fff;

    color:#444;

    font-family:Poppins,sans-serif;
    font-size:10px;
    font-weight:500;

    outline:none;

    cursor:pointer;
}

.account-settings-select:focus{
    border-color:#d56578;
}

/* ==========================
   ACCOUNT_PASSWORD_MODAL
========================== */

.account-password-modal{
    position:fixed;
    inset:0;
    z-index:10000;

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

    padding:20px;
}

.account-password-modal[hidden]{
    display:none;
}

.account-password-backdrop{
    position:absolute;
    inset:0;

    background:rgba(0,0,0,.45);
}

.account-password-dialog{
    position:relative;
    z-index:1;

    width:100%;
    max-width:520px;

    background:#fff;
    border-radius:18px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.18);

    overflow:hidden;

    font-family:Poppins,sans-serif;
}

.account-password-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:20px;

    padding:24px;

    border-bottom:1px solid #eee;
}

.account-password-header h2{
    margin:0 0 8px;

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

    color:#222;
}

.account-password-header p{
    margin:0;

    font-size:13px;
    line-height:1.6;

    color:#666;
}

.account-password-close{
    width:36px;
    height:36px;

    flex-shrink:0;

    border:0;
    border-radius:10px;

    background:#f5f5f5;

    color:#555;

    cursor:pointer;

    font-size:16px;
}

.account-password-close:hover{
    background:#ececec;
}

.account-password-body{
    display:flex;
    flex-direction:column;

    gap:18px;

    padding:24px;
}

.account-password-field{
    display:flex;
    flex-direction:column;

    gap:7px;
}

.account-password-field label{
    font-size:13px;
    font-weight:600;

    color:#333;
}

.account-password-field input{
    width:100%;
    height:48px;

    padding:0 14px;

    border:1px solid #ddd;
    border-radius:10px;

    background:#fff;

    color:#222;

    font-family:Poppins,sans-serif;
    font-size:14px;

    outline:none;

    transition:.2s ease;
}

.account-password-field input:focus{
    border-color:#d56578;

    box-shadow:
        0 0 0 3px rgba(213,101,120,.10);
}

.account-password-footer{
    display:flex;
    justify-content:flex-end;

    gap:10px;

    padding:18px 24px;

    border-top:1px solid #eee;
}

.account-password-cancel,
.account-password-submit{
    min-height:42px;

    padding:0 18px;

    border-radius:10px;

    font-family:Poppins,sans-serif;
    font-size:13px;
    font-weight:600;

    cursor:pointer;

    transition:.2s ease;
}

.account-password-cancel{
    border:1px solid #ddd;

    background:#fff;

    color:#444;
}

.account-password-cancel:hover{
    background:#f7f7f7;
}

.account-password-submit{
    border:1px solid #d56578;

    background:#d56578;

    color:#fff;
}

.account-password-submit:hover{
    background:#c95569;
    border-color:#c95569;
}

.account-password-requirements{
    margin-top:2px;
    padding:14px 16px;

    border:1px solid #eee;
    border-radius:12px;

    background:#fafafa;
}

.account-password-requirements > strong{
    display:block;

    margin-bottom:10px;

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

    color:#444;
}

.account-password-requirements ul{
    margin:0;
    padding:0;

    list-style:none;

    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));

    gap:8px 14px;
}

.account-password-requirements li{
    display:flex;
    align-items:center;

    gap:7px;

    font-size:12px;

    color:#888;

    transition:.2s ease;
}

.account-password-requirements li i{
    font-size:11px;

    color:#bbb;

    transition:.2s ease;
}

.account-password-requirements li.valid{
    color:#3f8f5f;
}

.account-password-requirements li.valid i{
    color:#3f8f5f;
}

.account-password-input-wrapper{
    position:relative;
}

.account-password-input-wrapper input{
    width:100%;
    padding-right:48px;
}

.account-password-visibility-toggle{
    position:absolute;

    top:50%;
    right:14px;

    transform:translateY(-50%);

    width:34px;
    height:34px;

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

    padding:0;

    border:0;
    background:transparent;

    color:#999;

    font-size:16px;

    cursor:pointer;

    transition:.2s ease;
}

.account-password-visibility-toggle:hover{
    color:#d56578;
}

.account-password-visibility-toggle:focus-visible{
    outline:2px solid #d56578;
    outline-offset:2px;
    border-radius:6px;
}

.account-password-autofill-username{
    position:absolute;

    width:1px;
    height:1px;

    padding:0;
    margin:-1px;

    overflow:hidden;

    border:0;

    opacity:0;

    pointer-events:none;
}

.account-settings-delete-button{
    margin-left:auto;

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

    gap:8px;

    padding:12px 18px;

    border:1px solid #e86b7a;
    border-radius:10px;

    background:#fff;

    color:#e86b7a;

    font-family:Poppins,sans-serif;
    font-size:13px;
    font-weight:600;

    cursor:pointer;

    transition:.2s ease;
}

.account-settings-delete-button:hover{
    background:#e86b7a;
    color:#fff;
}


/*
|--------------------------------------------------------------------------
| Delete Account Modal
|--------------------------------------------------------------------------
*/

.account-delete-modal{
    position:fixed;

    inset:0;

    z-index:10000;

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

    padding:20px;
}

.account-delete-modal[hidden]{
    display:none;
}

.account-delete-backdrop{
    position:absolute;

    inset:0;

    background:rgba(0,0,0,.45);
}

.account-delete-dialog{
    position:relative;

    width:100%;
    max-width:540px;

    background:#fff;

    border-radius:18px;

    box-shadow:
        0 24px 70px rgba(0,0,0,.18);

    overflow:hidden;

    font-family:Poppins,sans-serif;
}

.account-delete-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:20px;

    padding:24px;

    border-bottom:1px solid #eee;
}

.account-delete-header h2{
    margin:0 0 6px;

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

    color:#2f2f2f;
}

.account-delete-header p{
    margin:0;

    font-size:13px;
    line-height:1.7;

    color:#777;
}

.account-delete-close{
    flex-shrink:0;

    width:36px;
    height:36px;

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

    border:0;
    border-radius:8px;

    background:transparent;

    color:#888;

    font-size:17px;

    cursor:pointer;

    transition:.2s ease;
}

.account-delete-close:hover{
    background:#f5f5f5;
    color:#e86b7a;
}

.account-delete-body{
    display:flex;
    flex-direction:column;

    gap:20px;

    padding:24px;
}

.account-delete-field{
    display:flex;
    flex-direction:column;

    gap:8px;
}

.account-delete-field label{
    font-size:13px;
    font-weight:600;

    color:#444;
}

.account-delete-field input{
    width:100%;
    height:48px;

    padding:0 14px;

    border:1px solid #ddd;
    border-radius:10px;

    font-family:Poppins,sans-serif;
    font-size:14px;

    transition:.2s ease;
}

.account-delete-field input:focus{
    outline:none;

    border-color:#e86b7a;

    box-shadow:
        0 0 0 3px rgba(232,107,122,.12);
}

.account-delete-confirmation{
    padding:14px 16px;

    border:1px solid #f1c8ce;
    border-radius:12px;

    background:#fff7f8;
}

.account-delete-confirmation p{
    margin:0 0 6px;

    font-size:12px;

    color:#777;
}

.account-delete-confirmation strong{
    display:block;

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

    color:#c64f60;
}

.account-delete-footer{
    display:flex;
    align-items:center;
    justify-content:flex-end;

    gap:10px;

    padding:18px 24px;

    border-top:1px solid #eee;

    background:#fafafa;
}

.account-delete-cancel,
.account-delete-submit{
    min-height:42px;

    padding:0 18px;

    border-radius:10px;

    font-family:Poppins,sans-serif;
    font-size:13px;
    font-weight:600;

    cursor:pointer;

    transition:.2s ease;
}

.account-delete-cancel{
    border:1px solid #ddd;

    background:#fff;

    color:#555;
}

.account-delete-cancel:hover{
    background:#f4f4f4;
}

.account-delete-submit{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:8px;

    border:1px solid #e86b7a;

    background:#e86b7a;

    color:#fff;
}

.account-delete-submit:hover:not(:disabled){
    background:#d85a6a;
    border-color:#d85a6a;
}

.account-delete-submit:disabled{
    opacity:.45;
    cursor:not-allowed;
}

/* ==========================================================
   LOGIN - SMALL DESKTOP
========================================================== */

@media(max-width:1180px) and (min-width:901px){

    .account-login{
        grid-template-columns:
            minmax(380px, 42fr)
            minmax(0, 58fr);

        gap:22px;

        padding:24px;
    }

    .account-login-card{
        padding:
            36px
            32px;
    }

    .account-title{
        font-size:30px;
    }

    .account-subtitle{
        font-size:13px;
    }

    .account-login-body{
        margin-top:30px;
    }


    /* Slider */

    .account-login-slide-content{
        left:38px;
        bottom:54px;

        max-width:330px;
    }

    .account-login-slide-title{
        font-size:31px;
    }

    .account-login-slide-description{
        max-width:310px;

        font-size:13px;
    }

    .account-login-slider-button{
        width:44px;
        height:44px;
    }

    .account-login-slider-prev{
        left:16px;
    }

    .account-login-slider-next{
        right:16px;
    }

    .account-login-slider-dots{
        left:38px;
        bottom:25px;

        gap:8px;
    }

    .account-login-slider-dot{
        width:10px;
        height:10px;
    }

}

/* ==========================================================
   LOGIN - TABLET
========================================================== */

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

    .account-login{
        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr);

        gap:16px;

        padding:20px;
    }

    .account-login-card{
        padding:
            30px
            24px;
    }

    .account-login-header{
        gap:10px;
    }

    .account-login-header .account-title{
        margin-bottom:8px;

        font-size:27px;
    }

    .account-subtitle{
        font-size:12px;
        line-height:1.65;
    }

    .account-login-body{
        margin-top:24px;
    }

    .account-input{
        height:50px;
    }

    .account-label{
        font-size:12px;
    }

    .account-login-options{
        gap:10px;
    }

    .account-checkbox,
    .account-forgot-password{
        font-size:11px;
    }


    /* Register box */

    .account-login-footer{
        padding-top:24px;
    }

    .account-login-register{
        display:grid;
        grid-template-columns:auto 1fr;

        gap:
            8px
            12px;

        padding:14px;
    }

    .account-login-register-icon{
        width:40px;
        height:40px;

        font-size:21px;
    }

    .account-login-register-title{
        margin-bottom:5px;

        font-size:14px;
    }

    .account-login-register-description{
        margin:0;

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

    .account-login-register-button{
        grid-column:1 / -1;

        padding:
            10px
            14px;

        font-size:11px;
    }


    /* Slider */

    .account-login-slide-content{
        left:26px;
        right:26px;
        bottom:48px;

        max-width:none;
    }

    .account-login-slide-title{
        font-size:27px;
    }

    .account-login-slide-description{
        max-width:280px;

        font-size:12px;
    }

    .account-login-slider-button{
        width:38px;
        height:38px;

        font-size:12px;
    }

    .account-login-slider-prev{
        left:12px;
    }

    .account-login-slider-next{
        right:12px;
    }

    .account-login-slider-dots{
        left:26px;
        bottom:20px;
    }

}

/* ==========================================================
   LOGIN - MOBILE
========================================================== */

@media(max-width:924px){

    .account-page{
        min-height:0;
    }

    .account-login{
        display:block;

        width:100%;

        padding:
            20px
            14px
            32px;
    }

    .account-login-panel{
        width:100%;
        max-width:520px;

        margin:0 auto;
    }


    /* Slider completely hidden */

    .account-login-hero{
        display:none;
    }


    /* Login card */

    .account-login-card{
        width:100%;
        height:auto;

        padding:
            28px
            20px;

        border-radius:18px;
    }

    .account-login-header{
        gap:10px;
    }

    .account-login-header .account-title{
        margin-bottom:6px;

        font-size:28px;
        line-height:1.2;
    }

    .account-title-heart{
        font-size:.85em;
    }

    .account-login-header .account-subtitle{
        max-width:330px;

        font-size:12px;
        line-height:1.6;
    }


    /* Form */

    .account-login-body{
        margin-top:26px;
    }

    .account-form{
        gap:13px;
    }

    .account-form-group{
        gap:7px;
    }

    .account-label{
        font-size:11px;
    }

    .account-input{
        height:50px;

        padding-left:42px;

        border-radius:11px;

        font-size:12px;
    }

    .account-input-icon{
        left:14px;

        font-size:13px;
    }

    .account-password-toggle{
        right:14px;

        font-size:16px;
    }


    /* Remember + forgot password */

    .account-login-options{
        gap:12px;

        margin-top:7px;
    }

    .account-checkbox,
    .account-forgot-password{
        font-size:11px;
    }

    .account-checkbox input{
        width:15px;
        height:15px;
    }


    /* Login button */

    .account-login-button{
        height:50px;

        margin-top:8px;

        font-size:12px;
    }

    .account-login-button i{
        font-size:15px;
    }


    /* Register */

    .account-login-footer{
        margin-top:24px;
        padding-top:0;
    }

    .account-login-register{
        display:grid;
        grid-template-columns:auto 1fr;

        gap:
            8px
            12px;

        padding:14px;

        border-radius:14px;
    }

    .account-login-register-icon{
        width:42px;
        height:42px;

        font-size:21px;
    }

    .account-login-register-title{
        margin-bottom:4px;

        font-size:14px;
    }

    .account-login-register-description{
        margin:0;

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

    .account-login-register-button{
        grid-column:1 / -1;

        padding:
            10px
            14px;

        border-radius:10px;

        font-size:11px;
    }

}

@media(max-width:400px){

    .account-login{
        padding:
            14px
            10px
            26px;
    }

    .account-login-card{
        padding:
            24px
            14px;
    }

    .account-login-header .account-title{
        font-size:25px;
    }

    .account-login-options{
        align-items:flex-start;
    }

}

/* ==========================================================
   LOGIN REGISTER - COMPACT
========================================================== */

@media(max-width:1534px){

    .account-login-register{
        display:grid;

        grid-template-columns:auto minmax(0,1fr);

        align-items:center;

        gap:
            10px
            14px;

        padding:14px;
    }

    .account-login-register-icon{
        width:44px;
        height:44px;

        font-size:23px;
    }

    .account-login-register-content{
        min-width:0;
    }

    .account-login-register-title{
        margin-bottom:5px;

        font-size:15px;
    }

    .account-login-register-description{
        margin:0;

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

    .account-login-register-button{
        grid-column:1 / -1;

        width:100%;

        padding:
            11px
            16px;

        border-radius:11px;

        font-size:12px;
    }

}

/* ==========================================================
   REGISTER - TABLET / MOBILE
========================================================== */

@media(max-width:768px){

    .account-register{
        min-height:0;

        padding:
            32px
            16px
            40px;
    }

    .account-register-card{
        max-width:620px;

        padding:
            34px
            28px;

        border-radius:18px;
    }


    /* Header */

    .account-register-header{
        margin-bottom:28px;
    }

    .account-register-header .account-title{
        margin-bottom:10px;

        font-size:29px;
        line-height:1.2;
    }

    .account-register-header .account-subtitle{
        max-width:430px;

        font-size:12px;
        line-height:1.65;
    }


    /* Form */

    .account-register-form{
        gap:13px;
    }

    .account-register-row{
        gap:14px;
    }

    .account-form-group{
        gap:7px;
    }

    .account-label{
        font-size:11px;
    }

    .account-input{
        height:50px;

        padding-left:42px;

        border-radius:11px;

        font-size:12px;
    }

    .account-input-icon{
        left:14px;

        font-size:13px;
    }

    .account-password-toggle{
        right:14px;

        font-size:16px;
    }


    /* Password requirements */

    .account-password-requirements{
        padding:
            14px
            15px;

        border-radius:11px;
    }

    .account-password-requirements-title{
        margin-bottom:10px;

        font-size:11px;
    }

    .account-password-requirements-grid{
        gap:
            7px
            14px;
    }

    .account-password-requirement{
        gap:6px;

        font-size:10px;
    }

    .account-password-requirement i{
        font-size:10px;
    }


    /* Consents */

    .account-register-consents{
        gap:10px;
    }

    .account-register-consents .account-checkbox{
        font-size:11px;
        line-height:1.5;
    }

    .account-checkbox input{
        width:15px;
        height:15px;

        flex-shrink:0;
    }


    /* Button */

    .account-register-button{
        height:50px;

        font-size:12px;
    }


    /* Footer */

    .account-register-footer{
        margin-top:22px;
        padding-top:20px;

        font-size:11px;
    }


    /* Decorations not needed on small screens */

    .account-register-decoration{
        display:none;
    }

}


/* ==========================================================
   REGISTER - PHONE
========================================================== */

@media(max-width:560px){

    .account-register{
        padding:
            18px
            10px
            30px;
    }

    .account-register-card{
        padding:
            26px
            16px;

        border-radius:16px;
    }

    .account-register-header{
        margin-bottom:24px;
    }

    .account-register-header .account-title{
        font-size:25px;
    }

    .account-register-header .account-subtitle{
        font-size:11px;
    }


    /* Two-column fields -> one column */

    .account-register-row{
        grid-template-columns:1fr;

        gap:13px;
    }

}


/* ==========================================================
   REGISTER - SMALL PHONE
========================================================== */

@media(max-width:420px){

    .account-register-card{
        padding:
            24px
            13px;
    }

    .account-password-requirements-grid{
        grid-template-columns:1fr;

        gap:7px;
    }

    .account-register-footer{
        flex-wrap:wrap;
    }

}

/* ==========================================================
   ACCOUNT DASHBOARD - COMPACT DESKTOP
========================================================== */

@media(max-width:1180px){

    .account-dashboard-layout{
        grid-template-columns:
            230px
            minmax(0,1fr);

        gap:20px;
    }

    .account-dashboard-profile{
        padding:
            20px
            16px;
    }

    .account-dashboard-avatar{
        width:52px;
        height:52px;

        font-size:17px;
    }

    .account-dashboard-profile-info strong{
        font-size:13px;
    }

    .account-dashboard-profile-info span{
        font-size:10px;
    }

    .account-dashboard-nav-item{
        min-height:50px;

        gap:11px;

        padding:
            0
            16px;

        font-size:12px;
    }

    .account-dashboard-nav-item i{
        width:20px;

        font-size:15px;
    }


    /* Stats */

    .account-dashboard-stats{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:14px;
    }

    .account-dashboard-stat-card{
        min-height:95px;

        padding:16px;
    }

    .account-dashboard-stat-icon{
        width:48px;
        height:48px;

        font-size:19px;
    }

    .account-dashboard-stat-value{
        font-size:23px;
    }

    .account-dashboard-stat-label{
        font-size:11px;
    }

}


/* ==========================================================
   ACCOUNT DASHBOARD - TABLET / MOBILE
========================================================== */

@media(max-width:924px){

    .account-dashboard-page{
        padding:
            20px
            0
            40px;
    }

    .account-container{
        width:calc(100% - 28px);
    }

    .account-dashboard-layout{
        grid-template-columns:1fr;

        gap:16px;
    }


    /* ======================================================
       SIDEBAR -> TOP ACCOUNT BAR
    ====================================================== */

    .account-dashboard-sidebar{
        min-height:0;

        border-radius:16px;
    }

    .account-dashboard-profile{
        padding:
            14px
            16px;
    }

    .account-dashboard-avatar{
        width:48px;
        height:48px;

        font-size:16px;
    }

    .account-dashboard-profile-info strong{
        font-size:12px;
    }

    .account-dashboard-profile-info span{
        font-size:10px;
    }


    /* Horizontal navigation */

    .account-dashboard-navigation::-webkit-scrollbar{
        display:none;
    }

    .account-dashboard-nav-item{
        width:auto;
        min-width:max-content;
        min-height:42px;

        flex:0 0 auto;

        gap:8px;

        padding:
            0
            13px;

        border-radius:9px;

        font-size:10px;
    }

    .account-dashboard-nav-item i{
        width:auto;

        font-size:13px;
    }

    .account-dashboard-nav-item.active::before{
        display:none;
    }

    .account-dashboard-nav-item.active{
        background:#fff2f4;
    }


    /* Logout */

    .account-dashboard-sidebar-footer form{
        width:100%;
    }

    .account-dashboard-logout{
        width:100%;

        justify-content:center;
    }


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

    .account-dashboard-content{
        padding:0;

        border:0;
        border-radius:0;

        background:transparent;
    }


    /* Stats */

    .account-dashboard-stats{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:10px;

        margin-bottom:16px;
    }

    .account-dashboard-stat-card{
        min-height:82px;

        gap:11px;

        padding:
            13px;

        border-radius:13px;
    }

    .account-dashboard-stat-icon{
        width:42px;
        height:42px;

        font-size:17px;
    }

    .account-dashboard-stat-value{
        font-size:20px;
    }

    .account-dashboard-stat-label{
        font-size:9px;
    }


    /* ======================================================
       RECENT ORDERS
    ====================================================== */

    .account-dashboard-orders{
        padding:
            16px
            14px;

        border-radius:16px;
    }

    .account-dashboard-section-header{
        gap:12px;

        margin-bottom:14px;
    }

    .account-dashboard-section-header h2{
        font-size:16px;
    }

    .account-dashboard-section-link{
        gap:5px;

        font-size:10px;
    }

    .account-dashboard-orders-list{
        gap:10px;
    }

    .account-dashboard-order{
        padding:
            14px
            14px
            13px;

        border-radius:12px;
    }

    .account-dashboard-order-top{
        grid-template-columns:
            minmax(0,1fr)
            auto;

        gap:12px;
    }

    .account-dashboard-order-main{
        min-width:0;

        gap:10px;
    }

    .account-dashboard-order-thumbnail{
        width:58px;
        height:58px;

        border-radius:9px;
    }

    .account-dashboard-order-info{
        min-width:0;

        gap:5px;
    }

    .account-dashboard-order-info strong{
        max-width:100%;

        font-size:10px;

        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .account-order-status{
        padding:
            5px
            7px;

        font-size:9px;
    }

    .account-dashboard-order-actions{
        gap:8px;
    }

    .account-dashboard-order-price{
        min-width:0;

        font-size:11px;
    }

    .account-dashboard-order-details{
        height:34px;

        padding:
            0
            10px;

        border-radius:8px;

        font-size:9px;
    }


    /* Progress */

    .account-dashboard-order-progress{
        margin-top:18px;
    }

    .account-dashboard-order-step-dot{
        width:12px;
        height:12px;

        margin-bottom:6px;
    }

    .account-dashboard-order-progress::before,
    .account-dashboard-order-progress::after{
        top:5px;

        height:2px;
    }

    .account-dashboard-order-step-label{
        font-size:8px;
    }

    .account-dashboard-order-step-date{
        min-height:12px;

        font-size:7px;
    }

}


/* ==========================================================
   ACCOUNT DASHBOARD - PHONE
========================================================== */

@media(max-width:560px){

    .account-container{
        width:calc(100% - 20px);
    }


    /* Profile */

    .account-dashboard-profile{
        gap:11px;

        padding:
            12px
            13px;
    }

    .account-dashboard-avatar{
        width:44px;
        height:44px;
    }


    /* Stats remain 2 x 2 */

    .account-dashboard-stats{
        gap:8px;
    }

    .account-dashboard-stat-card{
        min-height:74px;

        gap:9px;

        padding:10px;
    }

    .account-dashboard-stat-icon{
        width:36px;
        height:36px;

        font-size:14px;
    }

    .account-dashboard-stat-value{
        font-size:18px;
    }

    .account-dashboard-stat-label{
        font-size:8px;
    }


    /* Orders header */

    .account-dashboard-section-header{
        align-items:flex-start;
    }

    .account-dashboard-section-header h2{
        font-size:15px;
    }


    /* Order top */

    .account-dashboard-order-top{
        grid-template-columns:1fr;

        gap:12px;
    }

    .account-dashboard-order-actions{
        width:100%;

        justify-content:space-between;
    }

    .account-dashboard-order-details{
        min-width:140px;
    }

}

/* ==========================================================
   ACCOUNT DASHBOARD - MOBILE SIDEBAR
========================================================== */

@media(max-width:924px){

    .account-dashboard-sidebar{
        min-height:0;

        background:#fff;

        border:1px solid var(--account-border);
        border-radius:18px;

        overflow:hidden;
    }


    /* USER CARD */

    .account-dashboard-profile{
        position:relative;

        min-height:92px;

        display:flex;
        align-items:center;

        gap:14px;

        padding:
            16px
            54px
            16px
            18px;

        border-bottom:0;

        background:
            linear-gradient(
                90deg,
                #fff4f6,
                #fff8f9
            );

        cursor:pointer;

        transition:.2s ease;
    }

    .account-dashboard-sidebar.mobile-open
    .account-dashboard-profile{
        border-bottom:
            1px solid var(--account-border);
    }

    .account-dashboard-layout,
    .account-dashboard-content,
    .account-orders-page,
    .account-orders-list,
    .account-dashboard-order{
        min-width:0;
        max-width:100%;
    }

    .account-orders-filters{
        min-width:0;
        max-width:100%;

        overflow-x:auto;
        overflow-y:hidden;
    }

    /* Avatar */

    .account-dashboard-avatar{
        width:58px;
        height:58px;

        flex:0 0 58px;

        font-size:19px;
    }


    /* User */

    .account-dashboard-profile-info{
        gap:4px;
    }

    .account-dashboard-profile-info strong{
        font-size:15px;
        line-height:1.35;
    }

    .account-dashboard-profile-info span{
        font-size:11px;
    }


    /* Chevron */

    .account-dashboard-profile-chevron{
        position:absolute;

        top:50%;
        right:20px;

        color:#e35f78;

        font-size:15px;

        transform:
            translateY(-50%)
            rotate(0deg);

        transition:
            transform .22s ease;
    }

    .account-dashboard-sidebar.mobile-open
    .account-dashboard-profile-chevron{
        transform:
            translateY(-50%)
            rotate(180deg);
    }


    /* ======================================================
       COLLAPSIBLE MENU
    ====================================================== */

    .account-dashboard-navigation{
        max-height:0;

        display:flex;
        flex-direction:column;

        gap:3px;

        padding:
            0
            10px;

        overflow:hidden;

        opacity:0;

        transition:
            max-height .3s ease,
            padding .3s ease,
            opacity .2s ease;
    }

    .account-dashboard-sidebar.mobile-open
    .account-dashboard-navigation{
        max-height:520px;

        padding:
            10px;

        opacity:1;
    }

    .account-dashboard-nav-item{
        width:100%;
        min-height:46px;

        display:flex;

        gap:11px;

        padding:
            0
            13px;

        border-radius:9px;

        font-size:11px;
    }

    .account-dashboard-nav-item i{
        width:20px;

        font-size:14px;
    }

    .account-dashboard-nav-item.active::before{
        display:none;
    }

    .account-dashboard-nav-item.active{
        background:#fff1f3;
    }


    /* Logout */

    .account-dashboard-sidebar-footer{
        max-height:0;

        margin:0;

        padding:
            0
            10px;

        border-top:0;

        overflow:hidden;

        opacity:0;

        transition:
            max-height .25s ease,
            padding .25s ease,
            opacity .2s ease;
    }

    .account-dashboard-sidebar.mobile-open
    .account-dashboard-sidebar-footer{
        max-height:70px;

        padding:
            8px
            10px
            10px;

        border-top:
            1px solid var(--account-border);

        opacity:1;
    }

    .account-dashboard-sidebar-footer form{
        width:100%;
    }

    .account-dashboard-logout{
        justify-content:flex-start;
    }

}

/* ==========================================================
   DASHBOARD ORDERS - NARROW DESKTOP BRIDGE
========================================================== */

@media(min-width:925px) and (max-width:1000px){

    .account-dashboard-order-top{
        grid-template-columns:1fr;

        gap:14px;
    }

    .account-dashboard-order-main{
        min-width:0;
    }

    .account-dashboard-order-info{
        min-width:0;
    }

    .account-dashboard-order-info strong{
        white-space:normal;

        overflow-wrap:anywhere;
    }

    .account-dashboard-order-actions{
        width:100%;

        justify-content:flex-end;

        gap:12px;
    }

    .account-dashboard-order-price{
        min-width:auto;
    }

    .account-dashboard-order-details{
        flex-shrink:0;
    }

}

/* ==========================================================
   ACCOUNT ORDERS - TABLET / MOBILE
========================================================== */

@media(max-width:924px){

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

    .account-orders-page{
        width:100%;

        padding:
            18px
            16px;

        border-radius:16px;
    }


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

    .account-orders-header{
        margin-bottom:18px;
    }

    .account-orders-header h1{
        margin-bottom:5px;

        font-size:23px;
        line-height:1.25;
    }

    .account-orders-header p{
        font-size:11px;
        line-height:1.55;
    }


    /* ======================================================
       FILTERS
    ====================================================== */

    .account-orders-filters{
        width:100%;

        display:flex;
        align-items:center;

        gap:5px;

        margin-bottom:16px;

        padding:5px;

        overflow-x:auto;
        overflow-y:hidden;

        border-radius:11px;

        scrollbar-width:none;
    }

    .account-orders-filters::-webkit-scrollbar{
        display:none;
    }

    .account-orders-filter{
        min-width:max-content;
        min-height:36px;

        flex:0 0 auto;

        padding:
            0
            12px;

        border-radius:7px;

        font-size:10px;

        white-space:nowrap;
    }


    /* ======================================================
       ORDER LIST
    ====================================================== */

    .account-orders-list{
        gap:10px;
    }

}


/* ==========================================================
   ACCOUNT ORDERS - PHONE
========================================================== */

@media(max-width:560px){

    .account-orders-page{
        padding:
            15px
            12px;
    }

    .account-orders-header{
        margin-bottom:15px;
    }

    .account-orders-header h1{
        font-size:21px;
    }

    .account-orders-header p{
        font-size:10px;
    }


    /* Filters */

    .account-orders-filters{
        margin-left:-2px;
        margin-right:-2px;

        width:calc(100% + 4px);
    }

    .account-orders-filter{
        min-height:34px;

        padding:
            0
            10px;

        font-size:9px;
    }


    /* Order card */

    .account-orders-page
    .account-dashboard-order{
        padding:
            13px
            12px;

        border-radius:12px;
    }

    .account-orders-page
    .account-dashboard-order-top{
        gap:10px;
    }

    .account-orders-page
    .account-dashboard-order-main{
        gap:9px;
    }

    .account-orders-page
    .account-dashboard-order-thumbnail{
        width:56px;
        height:56px;

        border-radius:9px;
    }

    .account-orders-page
    .account-dashboard-order-info strong{
        font-size:9.5px;
        line-height:1.45;

        white-space:normal;

        overflow-wrap:anywhere;
    }

    .account-orders-page
    .account-order-status{
        padding:
            4px
            7px;

        font-size:8px;
    }

    .account-orders-page
    .account-dashboard-order-price{
        font-size:11px;
    }

    .account-orders-page
    .account-dashboard-order-details{
        height:34px;

        padding:
            0
            10px;

        font-size:8.5px;
    }


    /* Progress */

    .account-orders-page
    .account-dashboard-order-progress{
        margin-top:17px;
    }

    .account-orders-page
    .account-dashboard-order-step-label{
        font-size:7.5px;
    }

    .account-orders-page
    .account-dashboard-order-step-date{
        font-size:7px;
    }


    /* Pagination */

    .account-orders-pagination{
        margin-top:18px;

        gap:5px;
    }

    .account-orders-pagination-button{
        width:34px;
        height:34px;

        border-radius:8px;

        font-size:10px;
    }

}

/* ==========================================================
   ACCOUNT DASHBOARD - SMALL PHONE
========================================================== */

@media(max-width:400px){

    .account-dashboard-stat-card{
        flex-direction:column;

        align-items:flex-start;

        gap:7px;
    }

    .account-dashboard-stat-icon{
        width:32px;
        height:32px;

        font-size:13px;
    }

    .account-dashboard-section-header{
        flex-direction:column;
    }

    .account-dashboard-order-thumbnail{
        width:52px;
        height:52px;
    }

}

/* ==========================================================
   ACCOUNT ORDERS - SMALL PHONE
========================================================== */

@media(max-width:400px){

    .account-orders-page{
        padding:
            13px
            10px;
    }

    .account-orders-header h1{
        font-size:19px;
    }

    .account-orders-filter{
        padding:
            0
            9px;
    }

}

/* ==========================================================
   ORDER DETAILS - SAFE WIDTH
========================================================== */

.account-order-details{
    min-width:0;
    max-width:100%;
}

.account-order-details-card,
.account-order-products,
.account-order-product,
.account-order-details-bottom{
    min-width:0;
    max-width:100%;
}


/* ==========================================================
   ORDER DETAILS - NARROW DESKTOP
========================================================== */

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

    .account-order-product{
        grid-template-columns:
            64px
            minmax(0,1fr)
            48px
            72px
            120px;

        gap:10px;
    }

    .account-order-product-image{
        width:64px;
        height:64px;
    }

    .account-order-product-actions{
        width:120px;
    }

    .account-order-product-action{
        padding:
            0
            8px;

        font-size:9px;
    }

}


/* ==========================================================
   ORDER DETAILS - TABLET / MOBILE
========================================================== */

@media(max-width:924px){

    /* Main card */

    .account-order-details{
        width:100%;

        padding:
            18px
            16px;

        border-radius:16px;
    }


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

    .account-order-details-header{
        align-items:flex-start;

        gap:14px;

        margin-bottom:18px;
    }

    .account-order-details-header > div:first-child{
        min-width:0;
    }

    .account-order-details-back{
        margin-bottom:8px;

        font-size:10px;
    }

    .account-order-details-header h1{
        max-width:100%;

        font-size:22px;
        line-height:1.3;

        overflow-wrap:anywhere;
    }

    .account-order-details-header p{
        font-size:10px;
    }

    .account-order-details-header-status{
        flex-shrink:0;

        padding-bottom:0;
    }

    .account-order-details-header-status
    .account-order-status{
        font-size:9px;

        padding:
            5px
            8px;
    }


    /* ======================================================
       CARDS
    ====================================================== */

    .account-order-details-card{
        margin-bottom:12px;

        padding:
            16px
            16px;

        border-radius:14px;
    }

    .account-order-details-card-header{
        margin-bottom:14px;
    }

    .account-order-details-card-header h2{
        font-size:16px;
    }


    /* ======================================================
       DELIVERY
    ====================================================== */

    .account-order-delivery{
        grid-template-columns:1fr;

        gap:14px;
    }

    .account-order-delivery-address{
        font-size:10px;
        line-height:1.6;
    }

    .account-order-delivery-address strong{
        font-size:12px;
    }

    .account-order-delivery-tracking{
        width:100%;
        min-width:0;

        padding:
            12px
            13px;
    }


    /* ======================================================
       PRODUCTS
    ====================================================== */

    .account-order-product{
        grid-template-columns:
            64px
            minmax(0,1fr)
            auto;

        grid-template-areas:
            "image info price"
            "image qty  price"
            "actions actions actions";

        align-items:center;

        gap:
            6px
            12px;

        padding:
            14px
            0;
    }

    .account-order-product-image{
        grid-area:image;

        width:64px;
        height:64px;

        border-radius:10px;
    }

    .account-order-product-info{
        grid-area:info;

        min-width:0;
    }

    .account-order-product-info strong{
        font-size:11px;
        line-height:1.4;

        overflow-wrap:anywhere;
    }

    .account-order-product-info span{
        font-size:9px;
    }

    .account-order-product-quantity{
        grid-area:qty;

        font-size:10px;

        text-align:left;
    }

    .account-order-product-price{
        grid-area:price;

        align-self:center;

        font-size:12px;

        text-align:right;
    }

    .account-order-product-actions{
        grid-area:actions;

        width:100%;

        flex-direction:row;

        gap:8px;

        margin-top:7px;

        justify-self:stretch;
    }

    .account-order-product-action{
        width:auto;
        min-height:36px;

        flex:1;

        font-size:9px;
    }


    /* ======================================================
       ORDER PROGRESS
    ====================================================== */

    .account-order-details-progress{
        margin-top:5px;
        margin-bottom:0;

        padding-top:3px;
    }

    .account-order-details-progress
    .account-dashboard-order-step-dot{
        width:12px;
        height:12px;

        margin-bottom:6px;
    }

    .account-order-details-progress::before,
    .account-order-details-progress::after{
        top:5px;

        height:2px;
    }

    .account-order-details-progress
    .account-dashboard-order-step-label{
        font-size:8px;
    }

    .account-order-details-progress
    .account-dashboard-order-step-date{
        font-size:7px;
    }


    /* ======================================================
       SUMMARY + PAYMENT
    ====================================================== */

    .account-order-details-bottom{
        grid-template-columns:1fr;

        gap:12px;
    }

    .account-order-summary-row{
        gap:12px;

        padding:
            7px
            0;

        font-size:10px;
    }

    .account-order-summary-row strong{
        font-size:10px;
    }

    .account-order-summary-total{
        margin-top:7px;
        padding-top:12px;
    }

    .account-order-summary-total span{
        font-size:12px;
    }

    .account-order-summary-total strong{
        font-size:17px;
    }


    /* Payment */

    .account-order-payment-info > div{
        gap:12px;

        padding:
            8px
            0;
    }

    .account-order-payment-info span,
    .account-order-payment-info strong{
        font-size:10px;
    }

}


/* ==========================================================
   ORDER DETAILS - PHONE
========================================================== */

@media(max-width:560px){

    .account-order-details{
        padding:
            15px
            12px;
    }


    /* Header status under title */

    .account-order-details-header{
        flex-direction:column;
    }

    .account-order-details-header h1{
        font-size:19px;
    }

    .account-order-details-header-status{
        width:100%;

        justify-content:flex-start;
    }


    /* Cards */

    .account-order-details-card{
        padding:
            14px
            13px;
    }


    /* Product */

    .account-order-product{
        grid-template-columns:
            58px
            minmax(0,1fr)
            auto;

        gap:
            5px
            10px;
    }

    .account-order-product-image{
        width:58px;
        height:58px;
    }

    .account-order-product-info strong{
        font-size:10px;
    }

    .account-order-product-price{
        font-size:11px;
    }


    /* Progress */

    .account-order-details-progress
    .account-dashboard-order-step-label{
        font-size:7px;
    }

    .account-order-details-progress
    .account-dashboard-order-step-date{
        font-size:6.5px;
    }

}


/* ==========================================================
   ORDER DETAILS - SMALL PHONE
========================================================== */

@media(max-width:400px){

    .account-order-details{
        padding:
            13px
            10px;
    }

    .account-order-details-header h1{
        font-size:17px;
    }

    .account-order-product-actions{
        flex-direction:column;
    }

    .account-order-product-action{
        width:100%;
    }

}

/* ==========================================================
   REPORT PROBLEM - SAFE WIDTH
========================================================== */

.account-problem-create,
.account-problem-product,
.account-problem-form{
    min-width:0;
    max-width:100%;
}


/* ==========================================================
   REPORT PROBLEM - TABLET / MOBILE
========================================================== */

@media(max-width:924px){

    .account-problem-create{
        width:100%;

        padding:
            18px
            16px;

        border-radius:16px;
    }


    /* Back */

    .account-problem-create
    .account-order-details-back{
        margin-bottom:10px;

        font-size:10px;
    }


    /* Header */

    .account-problem-header{
        margin-bottom:16px;
    }

    .account-problem-header h1{
        margin-bottom:5px;

        font-size:23px;
        line-height:1.25;
    }

    .account-problem-header p{
        max-width:none;

        font-size:10px;
        line-height:1.6;
    }


    /* ======================================================
       PRODUCT
    ====================================================== */

    .account-problem-product{
        gap:13px;

        margin-bottom:14px;

        padding:
            14px
            15px;

        border-radius:13px;
    }

    .account-problem-product-image{
        width:62px;
        height:62px;

        flex:0 0 62px;

        border-radius:10px;
    }

    .account-problem-product-info{
        min-width:0;
    }

    .account-problem-product-info strong{
        font-size:11px;
    }

    .account-problem-product-info span{
        max-width:100%;

        font-size:9px;

        overflow-wrap:anywhere;
    }


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

    .account-problem-form{
        padding:
            16px
            16px;

        border-radius:13px;
    }

    .account-problem-field > label{
        margin-bottom:7px;

        font-size:11px;
    }

    .account-problem-field textarea{
        min-height:150px;

        padding:
            12px
            13px;

        border-radius:9px;

        font-size:11px;
    }

    .account-problem-field > span{
        font-size:9px;
        line-height:1.5;
    }


    /* ======================================================
       IMAGES
    ====================================================== */

    .account-problem-images{
        margin-top:12px;
    }

    .account-problem-images-header > div{
        display:flex;
        align-items:baseline;
        flex-wrap:wrap;

        gap:
            3px
            5px;
    }

    .account-problem-images-header strong{
        font-size:11px;
    }

    .account-problem-images-header span{
        font-size:9px;
    }

    .account-problem-images-preview{
        gap:7px;

        margin:
            9px
            0;
    }

    .account-problem-image-preview-item{
        width:64px;
        height:64px;

        border-radius:8px;
    }

    .account-problem-images-add{
        min-height:36px;

        padding:
            0
            12px;

        font-size:9px;
    }


    /* ======================================================
       ACTIONS
    ====================================================== */

    .account-problem-actions{
        margin-top:16px;
        padding-top:14px;
    }

    .account-problem-submit{
        min-height:42px;

        padding:
            0
            18px;

        font-size:10px;
    }

}


/* ==========================================================
   REPORT PROBLEM - PHONE
========================================================== */

@media(max-width:560px){

    .account-problem-create{
        padding:
            15px
            12px;
    }

    .account-problem-header h1{
        font-size:21px;
    }

    .account-problem-header p{
        font-size:9.5px;
    }


    /* Product */

    .account-problem-product{
        padding:
            12px
            12px;
    }

    .account-problem-product-image{
        width:56px;
        height:56px;

        flex-basis:56px;
    }

    .account-problem-product-info strong{
        font-size:10px;
    }

    .account-problem-product-info span{
        font-size:8px;
    }


    /* Form */

    .account-problem-form{
        padding:
            14px
            12px;
    }

    .account-problem-field textarea{
        min-height:140px;
    }


    /* Button full width */

    .account-problem-submit{
        width:100%;
    }

}


/* ==========================================================
   REPORT PROBLEM - SMALL PHONE
========================================================== */

@media(max-width:400px){

    .account-problem-create{
        padding:
            13px
            10px;
    }

    .account-problem-header h1{
        font-size:19px;
    }

    .account-problem-product{
        align-items:flex-start;
    }

    .account-problem-product-image{
        width:52px;
        height:52px;

        flex-basis:52px;
    }

    .account-problem-image-preview-item{
        width:58px;
        height:58px;
    }

}

/* ==========================================================
   PROBLEM HISTORY - SAFE WIDTH
========================================================== */

.account-problem-history,
.account-problem-history-list,
.account-problem-history-item,
.account-problem-history-content{
    min-width:0;
    max-width:100%;
}


/* ==========================================================
   PROBLEM HISTORY - TABLET / MOBILE
========================================================== */

@media(max-width:924px){

    .account-problem-history{
        margin-top:18px;
        padding-top:18px;
    }


    /* Header */

    .account-problem-history-header{
        gap:12px;

        margin-bottom:5px;
    }

    .account-problem-history-header h2{
        font-size:16px;
    }

    .account-problem-history-header > span{
        min-width:22px;
        height:22px;

        padding:
            0
            6px;

        font-size:8px;
    }

    .account-problem-history-description{
        margin-bottom:12px;

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


    /* List */

    .account-problem-history-list{
        gap:8px;
    }

    .account-problem-history-item{
        gap:11px;

        padding:
            12px
            13px;

        border-radius:10px;
    }

    .account-problem-history-icon{
        width:36px;
        height:36px;

        flex:0 0 36px;

        border-radius:9px;

        font-size:12px;
    }


    /* Top */

    .account-problem-history-top{
        gap:12px;
    }

    .account-problem-history-top > div{
        min-width:0;

        flex-wrap:wrap;

        gap:
            5px
            7px;
    }

    .account-problem-history-top strong{
        font-size:10px;
    }

    .account-problem-history-current{
        padding:
            3px
            6px;

        font-size:7px;
    }

    .account-problem-history-top
    .account-problem-status{
        flex-shrink:0;

        font-size:8px;

        padding:
            5px
            7px;
    }


    /* Message */

    .account-problem-history-content > p{
        margin:
            6px
            0
            8px;

        font-size:9px;
        line-height:1.55;

        overflow-wrap:anywhere;
    }


    /* Bottom */

    .account-problem-history-bottom{
        gap:10px;

        padding-top:7px;

        font-size:7px;
    }

}


/* ==========================================================
   PROBLEM HISTORY - PHONE
========================================================== */

@media(max-width:560px){

    .account-problem-history{
        margin-top:16px;
        padding-top:16px;
    }

    .account-problem-history-header h2{
        font-size:15px;
    }

    .account-problem-history-item{
        gap:9px;

        padding:
            11px
            10px;
    }

    .account-problem-history-icon{
        width:34px;
        height:34px;

        flex-basis:34px;

        font-size:11px;
    }


    /* Status below report number */

    .account-problem-history-top{
        flex-direction:column;
        align-items:flex-start;

        gap:6px;
    }

    .account-problem-history-top
    .account-problem-status{
        align-self:flex-start;
    }

}


/* ==========================================================
   PROBLEM HISTORY - SMALL PHONE
========================================================== */

@media(max-width:400px){

    .account-problem-history-item{
        padding:
            10px
            9px;
    }

    .account-problem-history-icon{
        width:32px;
        height:32px;

        flex-basis:32px;
    }

    .account-problem-history-top strong{
        font-size:9px;
    }

    .account-problem-history-content > p{
        font-size:8.5px;
    }

}

/* ==========================================================
   SUPPORT PAGE - SAFE WIDTH
========================================================== */

.account-support-page,
.account-support-list,
.account-support-card,
.account-support-card-content{
    min-width:0;
    max-width:100%;
}


/* ==========================================================
   SUPPORT PAGE - TABLET / MOBILE
========================================================== */

@media(max-width:924px){

    .account-support-page{
        width:100%;

        padding:
            18px
            16px;

        border-radius:16px;
    }


    /* Header */

    .account-support-header{
        margin-bottom:16px;
    }

    .account-support-header h1{
        margin-bottom:5px;

        font-size:23px;
        line-height:1.25;
    }

    .account-support-header p{
        font-size:10px;
        line-height:1.6;
    }


    /* ======================================================
       FILTERS
    ====================================================== */

    .account-support-filters{
        width:100%;

        gap:5px;

        margin-bottom:16px;

        padding:5px;

        overflow-x:auto;
        overflow-y:hidden;

        border-radius:11px;

        scrollbar-width:none;
    }

    .account-support-filters::-webkit-scrollbar{
        display:none;
    }

    .account-support-filter{
        min-width:max-content;
        min-height:35px;

        flex:0 0 auto;

        gap:6px;

        padding:
            0
            11px;

        border-radius:7px;

        font-size:9px;

        white-space:nowrap;
    }

    .account-support-filter > span{
        min-width:18px;
        height:18px;

        padding:
            0
            5px;

        font-size:7px;
    }


    /* ======================================================
       LIST
    ====================================================== */

    .account-support-list{
        gap:9px;
    }


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

    .account-support-card{
        gap:11px;

        padding:
            13px
            14px;

        border-radius:12px;
    }

    .account-support-card-icon{
        width:40px;
        height:40px;

        flex:0 0 40px;

        border-radius:9px;

        font-size:14px;
    }

    .account-support-card-content{
        min-width:0;
    }


    /* Card top */

    .account-support-card-top{
        gap:10px;
    }

    .account-support-card-top > div{
        min-width:0;
    }

    .account-support-card-type{
        font-size:7px;
    }

    .account-support-card-top strong{
        font-size:11px;
        line-height:1.4;

        overflow-wrap:anywhere;
    }


    /* Status */

    .account-support-status{
        flex-shrink:0;

        padding:
            5px
            7px;

        font-size:7px;
    }


    /* Meta */

    .account-support-card-meta{
        margin-top:4px;

        font-size:8px;

        overflow-wrap:anywhere;
    }


    /* Message */

    .account-support-card-message{
        margin:
            8px
            0
            10px;

        font-size:9px;
        line-height:1.55;

        overflow-wrap:anywhere;
    }


    /* Bottom */

    .account-support-card-bottom{
        gap:10px;

        padding-top:8px;

        font-size:7px;
    }

    .account-support-card-open{
        flex-shrink:0;
    }

}


/* ==========================================================
   SUPPORT PAGE - PHONE
========================================================== */

@media(max-width:560px){

    .account-support-page{
        padding:
            15px
            12px;
    }

    .account-support-header h1{
        font-size:21px;
    }

    .account-support-header p{
        font-size:9.5px;
    }


    /* Card */

    .account-support-card{
        gap:9px;

        padding:
            12px
            11px;
    }

    .account-support-card-icon{
        width:36px;
        height:36px;

        flex-basis:36px;

        font-size:12px;
    }


    /* Status under title */

    .account-support-card-top{
        flex-direction:column;
        align-items:flex-start;

        gap:6px;
    }

    .account-support-status{
        align-self:flex-start;
    }

}


/* ==========================================================
   SUPPORT PAGE - SMALL PHONE
========================================================== */

@media(max-width:400px){

    .account-support-page{
        padding:
            13px
            10px;
    }

    .account-support-header h1{
        font-size:19px;
    }

    .account-support-filter{
        padding:
            0
            9px;

        font-size:8px;
    }

    .account-support-card{
        padding:
            11px
            9px;
    }

    .account-support-card-bottom{
        align-items:flex-start;
    }

}

/* ==========================================================
   REVIEWS - SAFE WIDTH
========================================================== */

.account-reviews-page,
.account-reviews-list,
.account-reviews-card,
.account-reviews-card-content,
.account-review-page,
.account-review-product,
.account-review-form,
.account-review-current{
    min-width:0;
    max-width:100%;
}


/* ==========================================================
   REVIEWS - TABLET / MOBILE
========================================================== */

@media(max-width:924px){

    /* ======================================================
       REVIEWS LIST
    ====================================================== */

    .account-reviews-page{
        width:100%;

        padding:
            18px
            16px;

        border-radius:16px;
    }


    /* Header */

    .account-reviews-header{
        margin-bottom:16px;
    }

    .account-reviews-header h1{
        margin-bottom:5px;

        font-size:23px;
        line-height:1.25;
    }

    .account-reviews-header p{
        font-size:10px;
        line-height:1.6;
    }


    /* Filters */

    .account-reviews-filters{
        width:100%;

        gap:5px;

        margin-bottom:16px;

        padding:5px;

        overflow-x:auto;
        overflow-y:hidden;

        border-radius:11px;

        scrollbar-width:none;
    }

    .account-reviews-filters::-webkit-scrollbar{
        display:none;
    }

    .account-reviews-filter{
        min-width:max-content;
        min-height:35px;

        flex:0 0 auto;

        gap:6px;

        padding:
            0
            11px;

        border-radius:7px;

        font-size:9px;

        white-space:nowrap;
    }

    .account-reviews-filter > span{
        min-width:18px;
        height:18px;

        padding:
            0
            5px;

        font-size:7px;
    }


    /* Empty */

    .account-reviews-empty{
        min-height:220px;

        padding:
            30px
            16px;
    }

    .account-reviews-empty-icon{
        width:50px;
        height:50px;

        margin-bottom:12px;

        font-size:18px;
    }

    .account-reviews-empty h3{
        font-size:15px;
    }

    .account-reviews-empty p{
        font-size:9px;
    }


    /* ======================================================
       REVIEW CARDS - WHEN REVIEWS EXIST
    ====================================================== */

    .account-reviews-list{
        gap:9px;
    }

    .account-reviews-card{
        gap:11px;

        padding:
            13px
            14px;

        border-radius:12px;
    }

    .account-reviews-card-image{
        width:58px;
        height:58px;

        flex:0 0 58px;

        border-radius:9px;
    }

    .account-reviews-card-top{
        gap:10px;
    }

    .account-reviews-card-top strong{
        font-size:11px;

        overflow-wrap:anywhere;
    }

    .account-reviews-card-top > div > span{
        font-size:8px;
    }

    .account-reviews-status{
        padding:
            5px
            7px;

        font-size:7px;
    }

    .account-reviews-rating{
        margin-top:7px;

        font-size:11px;
    }

    .account-reviews-card-text{
        margin:
            6px
            0
            8px;

        font-size:9px;
    }

    .account-reviews-card-bottom{
        gap:10px;

        margin-top:8px;
        padding-top:8px;

        font-size:7px;
    }


    /* ======================================================
       SINGLE REVIEW PAGE
    ====================================================== */

    .account-review-page{
        width:100%;

        padding:
            18px
            16px;

        border-radius:16px;
    }


    /* Back */

    .account-review-page
    .account-order-details-back{
        margin-bottom:9px;

        font-size:10px;
    }


    /* Header */

    .account-review-header{
        margin-bottom:16px;
    }

    .account-review-header h1{
        margin-bottom:5px;

        font-size:23px;
        line-height:1.25;
    }

    .account-review-header p{
        font-size:10px;

        overflow-wrap:anywhere;
    }


    /* ======================================================
       PRODUCT
    ====================================================== */

    .account-review-product{
        gap:13px;

        margin-bottom:14px;

        padding:
            14px
            15px;

        border-radius:13px;
    }

    .account-review-product-image{
        width:62px;
        height:62px;

        flex:0 0 62px;

        border-radius:9px;
    }

    .account-review-product-info{
        min-width:0;
    }

    .account-review-product-info strong{
        font-size:11px;

        overflow-wrap:anywhere;
    }

    .account-review-product-info span{
        font-size:8px;

        overflow-wrap:anywhere;
    }


    /* ======================================================
       STATUS / MODERATION
    ====================================================== */

    .account-review-status,
    .account-review-edit-warning{
        gap:10px;

        margin-bottom:14px;

        padding:
            12px
            13px;

        border-radius:10px;

        font-size:10px;
    }

    .account-review-status > i,
    .account-review-edit-warning > i{
        font-size:14px;
    }

    .account-review-status strong{
        font-size:10px;
    }

    .account-review-status span,
    .account-review-status p{
        font-size:9px;
    }


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

    .account-review-form{
        padding:
            16px
            16px;

        border-radius:13px;
    }

    .account-review-field{
        margin-bottom:17px;
    }

    .account-review-field > label{
        margin-bottom:7px;

        font-size:10px;
    }

    .account-review-field textarea{
        min-height:140px;

        padding:
            11px
            12px;

        font-size:10px;
    }

    .account-review-hint{
        font-size:8px;
    }


    /* Stars */

    .account-review-stars{
        gap:4px;
    }

    .account-review-stars label{
        font-size:24px;
    }


    /* ======================================================
       REVIEW IMAGES
    ====================================================== */

    .account-review-images{
        margin-bottom:17px;
    }

    .account-review-images-header{
        align-items:flex-start;

        gap:8px;
    }

    .account-review-images-header strong{
        font-size:10px;
    }

    .account-review-images-header span{
        font-size:8px;
    }

    .account-review-images-list{
        gap:8px;
    }

    .account-review-image,
    .account-review-image-add{
        width:72px;
        height:72px;

        border-radius:9px;
    }

    .account-review-image-add{
        font-size:8px;
    }

    .account-review-image-add i{
        font-size:16px;
    }


    /* ======================================================
       ACTIONS
    ====================================================== */

    .account-review-form-actions{
        padding-top:14px;
    }

    .account-review-submit,
    .account-review-edit-button{
        min-height:40px;

        padding:
            0
            17px;

        font-size:9px;
    }


    /* ======================================================
       APPROVED REVIEW
    ====================================================== */

    .account-review-current{
        padding:
            16px
            16px;

        border-radius:13px;
    }

    .account-review-current-rating{
        margin-bottom:11px;

        font-size:17px;
    }

    .account-review-current > p{
        margin-bottom:14px;

        font-size:10px;
    }

    .account-review-current-images{
        gap:8px;

        margin-bottom:14px;
    }

    .account-review-current-image{
        width:72px;
        height:72px;

        border-radius:9px;
    }

}


/* ==========================================================
   REVIEWS - PHONE
========================================================== */

@media(max-width:560px){

    /* List */

    .account-reviews-page{
        padding:
            15px
            12px;
    }

    .account-reviews-header h1{
        font-size:21px;
    }

    .account-reviews-header p{
        font-size:9.5px;
    }

    .account-reviews-filter{
        padding:
            0
            10px;

        font-size:8.5px;
    }


    /* Review list card */

    .account-reviews-card{
        gap:9px;

        padding:
            12px
            11px;
    }

    .account-reviews-card-image{
        width:52px;
        height:52px;

        flex-basis:52px;
    }

    .account-reviews-card-top{
        flex-direction:column;

        gap:5px;
    }

    .account-reviews-status{
        align-self:flex-start;
    }


    /* ======================================================
       SINGLE REVIEW
    ====================================================== */

    .account-review-page{
        padding:
            15px
            12px;
    }

    .account-review-header h1{
        font-size:21px;
    }

    .account-review-header p{
        font-size:9px;
    }


    /* Product */

    .account-review-product{
        padding:
            12px
            12px;
    }

    .account-review-product-image{
        width:56px;
        height:56px;

        flex-basis:56px;
    }

    .account-review-product-info strong{
        font-size:10px;
    }


    /* Status */

    .account-review-status,
    .account-review-edit-warning{
        padding:
            11px
            12px;
    }


    /* Form */

    .account-review-form{
        padding:
            14px
            12px;
    }

    .account-review-field textarea{
        min-height:130px;
    }


    /* Image header wraps */

    .account-review-images-header{
        flex-direction:column;
        align-items:flex-start;

        gap:3px;
    }

    .account-review-image,
    .account-review-image-add,
    .account-review-current-image{
        width:66px;
        height:66px;
    }


    /* Buttons */

    .account-review-submit,
    .account-review-edit-button{
        width:100%;
    }


    /* Approved */

    .account-review-current{
        padding:
            14px
            12px;
    }

}


/* ==========================================================
   REVIEWS - SMALL PHONE
========================================================== */

@media(max-width:400px){

    .account-reviews-page,
    .account-review-page{
        padding:
            13px
            10px;
    }

    .account-reviews-header h1,
    .account-review-header h1{
        font-size:19px;
    }

    .account-review-product{
        gap:10px;
    }

    .account-review-product-image{
        width:52px;
        height:52px;

        flex-basis:52px;
    }

    .account-review-form{
        padding:
            12px
            10px;
    }

    .account-review-stars label{
        font-size:22px;
    }

    .account-review-image,
    .account-review-image-add,
    .account-review-current-image{
        width:62px;
        height:62px;
    }

}

/* ==========================================================
   ADDRESSES - SAFE WIDTH
========================================================== */

.account-addresses-page,
.account-addresses-grid,
.account-address-card,
.account-address-form-page,
.account-address-form,
.account-address-form-row{
    min-width:0;
    max-width:100%;
}


/* ==========================================================
   ADDRESSES - TABLET / MOBILE
========================================================== */

@media(max-width:924px){

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

    .account-addresses-page{
        width:100%;

        padding:
            18px
            16px;

        border-radius:16px;
    }


    /* Header */

    .account-addresses-header{
        gap:16px;

        margin-bottom:18px;
    }

    .account-addresses-header > div{
        min-width:0;
    }

    .account-addresses-header h1{
        margin-bottom:5px;

        font-size:23px;
        line-height:1.25;
    }

    .account-addresses-header p{
        font-size:10px;
        line-height:1.55;
    }

    .account-addresses-add{
        min-height:38px;

        padding:
            0
            14px;

        font-size:9px;
    }


    /* ======================================================
       ADDRESS CARDS
    ====================================================== */

    .account-addresses-grid{
        gap:11px;
    }

    .account-address-card{
        padding:15px;

        border-radius:13px;
    }

    .account-address-card-header{
        gap:10px;

        margin-bottom:12px;
    }

    .account-address-card-title{
        min-width:0;

        gap:9px;
    }

    .account-address-card-title > div:last-child{
        min-width:0;
    }

    .account-address-card-icon{
        width:35px;
        height:35px;

        font-size:12px;
    }

    .account-address-card-title strong{
        max-width:100%;

        font-size:11px;

        overflow-wrap:anywhere;
    }

    .account-address-default{
        padding:
            3px
            6px;

        font-size:6.5px;
    }

    .account-address-card-actions{
        gap:2px;
    }

    .account-address-edit,
    .account-address-delete{
        width:30px;
        height:30px;
    }

    .account-address-card-content{
        min-height:120px;

        font-size:9px;
    }

    .account-address-card-content > strong{
        font-size:10px;
    }

    .account-address-card-footer{
        min-height:30px;

        margin-top:11px;
        padding-top:10px;
    }

    .account-address-card-footer button,
    .account-address-card-default-info{
        font-size:8px;
    }


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

    .account-addresses-empty{
        min-height:240px;

        padding:
            30px
            16px;
    }

    .account-addresses-empty-icon{
        width:50px;
        height:50px;

        margin-bottom:12px;

        font-size:17px;
    }

    .account-addresses-empty h3{
        font-size:15px;
    }

    .account-addresses-empty p{
        max-width:420px;

        margin-bottom:15px;

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

    .account-addresses-empty-button{
        min-height:38px;

        padding:
            0
            14px;

        font-size:9px;
    }


    /* ======================================================
       ADDRESS FORM PAGE
    ====================================================== */

    .account-address-form-page{
        width:100%;

        padding:
            18px
            16px;

        border-radius:16px;
    }

    .account-address-form-page
    .account-order-details-back{
        margin-bottom:9px;

        font-size:10px;
    }

    .account-address-form-header{
        margin-bottom:18px;
    }

    .account-address-form-header h1{
        margin-bottom:5px;

        font-size:23px;
        line-height:1.25;
    }

    .account-address-form-header p{
        font-size:10px;
        line-height:1.55;
    }


    /* Form */

    .account-address-form{
        padding:
            17px
            16px;

        border-radius:13px;
    }

    .account-address-form-row{
        gap:12px;
    }

    .account-address-form-field{
        min-width:0;

        margin-bottom:13px;
    }

    .account-address-form-field label{
        margin-bottom:6px;

        font-size:10px;
    }

    .account-address-form-field input,
    .account-address-form-country{
        height:41px;

        padding:
            0
            11px;

        font-size:10px;

        border-radius:8px;
    }

    .account-address-form-field > span,
    .account-address-field-error{
        font-size:8px;
    }


    /* Default address */

    .account-address-form-default{
        gap:9px;

        padding:
            12px
            13px;
    }

    .account-address-form-default strong{
        font-size:9px;
    }

    .account-address-form-default small{
        font-size:8px;
    }


    /* Actions */

    .account-address-form-actions{
        gap:8px;

        margin-top:18px;
        padding-top:15px;
    }

    .account-address-form-cancel,
    .account-address-form-submit{
        min-height:39px;

        font-size:9px;
    }

}


/* ==========================================================
   ADDRESSES - PHONE
========================================================== */

@media(max-width:560px){

    /* ======================================================
       LIST
    ====================================================== */

    .account-addresses-page{
        padding:
            15px
            12px;
    }

    .account-addresses-header{
        align-items:flex-start;
        flex-direction:column;

        gap:12px;
    }

    .account-addresses-header h1{
        font-size:21px;
    }

    .account-addresses-header p{
        font-size:9.5px;
    }

    .account-addresses-add{
        width:100%;
    }


    /* One address per row */

    .account-addresses-grid{
        grid-template-columns:1fr;
    }

    .account-address-card{
        padding:
            14px
            13px;
    }

    .account-address-card-content{
        min-height:auto;
    }


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

    .account-address-form-page{
        padding:
            15px
            12px;
    }

    .account-address-form-header h1{
        font-size:21px;
    }

    .account-address-form-header p{
        font-size:9.5px;
    }

    .account-address-form{
        padding:
            14px
            12px;
    }


    /* All form rows become single column */

    .account-address-form-row{
        grid-template-columns:1fr;

        gap:0;
    }


    /* Actions */

    .account-address-form-actions{
        display:grid;

        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1.35fr);

        width:100%;
    }

    .account-address-form-cancel,
    .account-address-form-submit{
        width:100%;

        padding:
            0
            10px;
    }


    /* Empty */

    .account-addresses-empty{
        min-height:220px;

        padding:
            26px
            12px;
    }

}


/* ==========================================================
   ADDRESSES - SMALL PHONE
========================================================== */

@media(max-width:400px){

    .account-addresses-page,
    .account-address-form-page{
        padding:
            13px
            10px;
    }

    .account-addresses-header h1,
    .account-address-form-header h1{
        font-size:19px;
    }

    .account-address-card{
        padding:
            12px
            11px;
    }

    .account-address-card-icon{
        width:32px;
        height:32px;
    }

    .account-address-form{
        padding:
            12px
            10px;
    }

}

/* ==========================================================
   PAYMENT METHODS - SAFE WIDTH
========================================================== */

.account-payments-page,
.account-payments-disabled,
.account-payments-disabled-content{
    min-width:0;
    max-width:100%;
}


/* ==========================================================
   PAYMENT METHODS - TABLET / MOBILE
========================================================== */

@media(max-width:924px){

    .account-payments-page{
        width:100%;

        padding:
            18px
            16px;

        border-radius:16px;
    }


    /* Header */

    .account-payments-header{
        margin-bottom:16px;
    }

    .account-payments-header h1{
        margin-bottom:5px;

        font-size:23px;
        line-height:1.25;
    }

    .account-payments-header p{
        font-size:10px;
        line-height:1.55;
    }


    /* Disabled box */

    .account-payments-disabled{
        min-height:240px;

        gap:16px;

        padding:
            28px
            24px;

        border-radius:14px;
    }

    .account-payments-disabled-icon{
        width:58px;
        height:58px;

        flex:0 0 58px;

        font-size:22px;
    }

    .account-payments-disabled-content{
        max-width:440px;
    }

    .account-payments-disabled-badge{
        margin-bottom:8px;

        padding:
            4px
            8px;

        font-size:7.5px;
    }

    .account-payments-disabled-content h2{
        margin-bottom:6px;

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

    .account-payments-disabled-content p{
        font-size:9px;
        line-height:1.65;
    }

}


/* ==========================================================
   PAYMENT METHODS - PHONE
========================================================== */

@media(max-width:560px){

    .account-payments-page{
        padding:
            15px
            12px;
    }

    .account-payments-header h1{
        font-size:21px;
    }

    .account-payments-header p{
        font-size:9.5px;
    }


    /* Stack vertically */

    .account-payments-disabled{
        min-height:220px;

        flex-direction:column;

        gap:13px;

        padding:
            26px
            18px;

        text-align:center;
    }

    .account-payments-disabled-icon{
        width:54px;
        height:54px;

        flex-basis:54px;

        font-size:20px;
    }

    .account-payments-disabled-content{
        max-width:360px;
    }

    .account-payments-disabled-content h2{
        font-size:14px;
    }

    .account-payments-disabled-content p{
        font-size:8.5px;
    }

}


/* ==========================================================
   PAYMENT METHODS - SMALL PHONE
========================================================== */

@media(max-width:400px){

    .account-payments-page{
        padding:
            13px
            10px;
    }

    .account-payments-header h1{
        font-size:19px;
    }

    .account-payments-disabled{
        padding:
            22px
            14px;
    }

    .account-payments-disabled-icon{
        width:50px;
        height:50px;

        flex-basis:50px;
    }

}

/* ==========================================================
   ACCOUNT SETTINGS - SAFE WIDTH
========================================================== */

.account-dashboard-settings,
.account-settings-page,
.account-settings-grid,
.account-settings-card,
.account-settings-toggle-row,
.account-settings-action-row,
.account-settings-preference-row,
.account-settings-readonly-value{
    min-width:0;
    max-width:100%;
}


/* ==========================================================
   ACCOUNT SETTINGS - TABLET / MOBILE
========================================================== */

@media(max-width:924px){

    .account-dashboard-settings{
        width:100%;

        padding:
            18px
            16px;

        border-radius:16px;
    }

    .account-settings-page{
        gap:14px;
    }


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

    .account-settings-header{
        gap:14px;
    }

    .account-settings-header h1{
        margin-bottom:5px;

        font-size:23px;
        line-height:1.25;
    }

    .account-settings-header p{
        font-size:10px;
        line-height:1.55;
    }

    .account-settings-save{
        min-height:38px;

        padding:
            0
            13px;

        font-size:9px;
    }


    /* ======================================================
       GRID
    ====================================================== */

    .account-settings-grid{
        grid-template-columns:1fr;

        gap:12px;
    }


    /* ======================================================
       CARDS
    ====================================================== */

    .account-settings-card{
        min-height:0;

        padding:16px;

        border-radius:13px;
    }

    .account-settings-card-header{
        gap:11px;
    }

    .account-settings-card-icon{
        width:35px;
        height:35px;

        flex-basis:35px;

        font-size:13px;
    }

    .account-settings-card-header h2{
        font-size:12px;
    }

    .account-settings-card-header p{
        font-size:9px;
        line-height:1.55;
    }


    /* ======================================================
       PROFILE
    ====================================================== */

    .account-settings-profile-content{
        margin-top:16px;
    }

    .account-settings-avatar-row{
        gap:13px;
    }

    .account-settings-avatar{
        width:62px;
        height:62px;

        flex-basis:62px;

        font-size:18px;
    }

    .account-settings-avatar-actions{
        gap:8px;
    }

    .account-settings-secondary-button{
        min-height:34px;

        padding:
            0
            11px;

        font-size:9px;
    }

    .account-settings-avatar-remove{
        font-size:9px;
    }

    .account-settings-divider{
        margin:
            16px
            0;
    }

    .account-settings-field-heading{
        margin-bottom:10px;
    }

    .account-settings-field-heading strong{
        font-size:10px;
    }

    .account-settings-field-heading span{
        font-size:8.5px;
    }


    /* Display name */

    .account-settings-radio-option{
        gap:8px;

        padding:
            10px
            11px;
    }

    .account-settings-radio-content strong{
        font-size:9.5px;
    }

    .account-settings-radio-content small{
        font-size:8.5px;
    }

    .account-settings-custom-name input{
        height:39px;

        font-size:9.5px;
    }


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

    .account-settings-account-content{
        gap:11px;

        margin-top:16px;
    }

    .account-settings-readonly-field > span{
        font-size:9px;
    }

    .account-settings-readonly-value{
        min-height:40px;

        gap:7px;

        padding:
            0
            10px;
    }

    .account-settings-readonly-value strong{
        min-width:0;

        font-size:9px;

        overflow-wrap:anywhere;
    }

    .account-settings-verified{
        flex-shrink:0;

        font-size:7px;
    }

    .account-settings-account-note{
        font-size:8px;
        line-height:1.5;
    }


    /* ======================================================
       TOGGLE ROWS
    ====================================================== */

    .account-settings-reviews-content,
    .account-settings-marketing-content,
    .account-settings-security-content,
    .account-settings-preferences-content{
        margin-top:16px;
    }

    .account-settings-toggle-row{
        min-height:64px;

        gap:12px;

        padding:
            11px
            12px;
    }

    .account-settings-toggle-content strong{
        font-size:9.5px;
    }

    .account-settings-toggle-content span{
        font-size:8px;
        line-height:1.5;
    }

    .account-settings-toggle-content small{
        font-size:7.5px;
    }

    .account-settings-switch{
        flex-shrink:0;
    }


    /* ======================================================
       SECURITY
    ====================================================== */

    .account-settings-action-row{
        min-height:64px;

        gap:10px;

        padding:
            11px
            12px;
    }

    .account-settings-action-icon{
        width:32px;
        height:32px;

        flex-basis:32px;

        font-size:11px;
    }

    .account-settings-action-content strong{
        font-size:9.5px;
    }

    .account-settings-action-content small{
        font-size:8px;
    }

    .account-settings-security-email{
        font-size:7.5px !important;
    }


    /* ======================================================
       PREFERENCES
    ====================================================== */

    .account-settings-preference-row{
        min-height:64px;

        gap:12px;

        padding:
            11px
            12px;
    }

    .account-settings-preference-content strong{
        font-size:9.5px;
    }

    .account-settings-preference-content span{
        font-size:8px;
    }

    .account-settings-select{
        min-width:115px;
        height:36px;

        font-size:9px;
    }


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

    .account-settings-delete{
        gap:11px;

        padding:
            15px
            16px;

        border-radius:13px;
    }

    .account-settings-delete-icon{
        width:35px;
        height:35px;

        flex-basis:35px;

        font-size:12px;
    }

    .account-settings-delete-content{
        min-width:0;
    }

    .account-settings-delete-content h2{
        font-size:11px;
    }

    .account-settings-delete-content p{
        font-size:8.5px;
        line-height:1.5;
    }

    .account-settings-delete-button{
        flex-shrink:0;

        padding:
            10px
            13px;

        font-size:9px;
    }

}


/* ==========================================================
   ACCOUNT SETTINGS - PHONE
========================================================== */

@media(max-width:560px){

    .account-dashboard-settings{
        padding:
            15px
            12px;
    }


    /* Header */

    .account-settings-header{
        align-items:flex-start;
        flex-direction:column;

        gap:10px;
    }

    .account-settings-header h1{
        font-size:21px;
    }

    .account-settings-header p{
        font-size:9.5px;
    }

    .account-settings-save{
        width:100%;
    }


    /* Cards */

    .account-settings-card{
        padding:
            14px
            12px;
    }


    /* Avatar */

    .account-settings-avatar-row{
        align-items:flex-start;

        flex-direction:column;
    }

    .account-settings-avatar-actions{
        width:100%;
    }

    .account-settings-secondary-button{
        flex:1;
    }


    /* Account email */

    .account-settings-readonly-value{
        flex-wrap:wrap;

        padding:
            9px
            10px;
    }

    .account-settings-verified{
        margin-left:24px;
    }


    /* Toggles */

    .account-settings-toggle-row{
        align-items:flex-start;
    }

    .account-settings-switch{
        margin-top:2px;
    }


    /* Preferences */

    .account-settings-preference-row{
        align-items:flex-start;
        flex-direction:column;
    }

    .account-settings-select{
        width:100%;
    }

    .account-settings-preference-row
    .account-settings-secondary-button{
        width:100%;
    }


    /* Delete */

    .account-settings-delete{
        align-items:flex-start;

        flex-wrap:wrap;
    }

    .account-settings-delete-button{
        width:100%;

        margin-left:0;
        margin-top:3px;
    }

}


/* ==========================================================
   ACCOUNT SETTINGS - SMALL PHONE
========================================================== */

@media(max-width:400px){

    .account-dashboard-settings{
        padding:
            13px
            10px;
    }

    .account-settings-header h1{
        font-size:19px;
    }

    .account-settings-card{
        padding:
            12px
            10px;
    }

    .account-settings-card-header{
        align-items:flex-start;
    }

    .account-settings-avatar{
        width:56px;
        height:56px;

        flex-basis:56px;
    }

}

/* ==========================================================
   SETTINGS MODALS - MOBILE
========================================================== */

@media(max-width:560px){

    .account-password-modal,
    .account-delete-modal{
        padding:10px;
    }

    .account-password-dialog,
    .account-delete-dialog{
        max-height:
            calc(100dvh - 20px);

        border-radius:15px;

        overflow-y:auto;
    }


    /* Password */

    .account-password-header{
        gap:12px;

        padding:18px
            16px;
    }

    .account-password-header h2{
        font-size:17px;
    }

    .account-password-header p{
        font-size:10px;
    }

    .account-password-body{
        gap:14px;

        padding:
            18px
            16px;
    }

    .account-password-footer{
        display:grid;

        grid-template-columns:
            1fr
            1fr;

        gap:8px;

        padding:
            14px
            16px;
    }

    .account-password-cancel,
    .account-password-submit{
        width:100%;

        padding:
            0
            10px;

        font-size:10px;
    }


    /* Delete */

    .account-delete-header{
        gap:12px;

        padding:
            18px
            16px;
    }

    .account-delete-body{
        gap:15px;

        padding:
            18px
            16px;
    }

    .account-delete-footer{
        display:grid;

        grid-template-columns:
            1fr
            1fr;

        gap:8px;

        padding:
            14px
            16px;
    }

    .account-delete-cancel,
    .account-delete-submit{
        width:100%;

        padding:
            0
            10px;

        font-size:10px;
    }

}

/* ==========================================================================
   CLOSED ORDER NOTICE
   ========================================================================== */

.account-order-closure-notice{
    display:grid;

    grid-template-columns:
        72px
        minmax(0,1fr)
        minmax(230px,.7fr);

    align-items:center;

    gap:24px;

    margin-top:22px;

    padding:
        20px
        22px;

    border:1px solid;
    border-radius:14px;
}


.account-order-closure-notice.refunded{
    border-color:#f3d5dc;

    background:#fff7f8;
}


.account-order-closure-notice.cancelled{
    border-color:#eadede;

    background:#fbf7f7;
}


.account-order-closure-icon{
    width:62px;
    height:62px;

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

    border-radius:50%;

    font-size:24px;
}


.account-order-closure-notice.refunded
.account-order-closure-icon{
    background:#ffe8ed;
    color:#dc5970;
}


.account-order-closure-notice.cancelled
.account-order-closure-icon{
    background:#f6eaea;
    color:#a76161;
}


.account-order-closure-content{
    min-width:0;

    padding-right:20px;

    border-right:1px solid #eadde0;
}


.account-order-closure-content > strong{
    display:block;

    margin-bottom:7px;

    color:#a91939;

    font-family:Poppins, sans-serif;
    font-size:16px;
    font-weight:700;
}


.account-order-closure-notice.cancelled
.account-order-closure-content > strong{
    color:#8d4d4d;
}


.account-order-closure-content p{
    margin:
        2px
        0;

    color:var(--account-text-light);

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


.account-order-closure-content p b{
    color:var(--account-text);

    font-weight:600;
}


.account-order-closure-details{
    display:flex;
    flex-direction:column;

    gap:8px;
}


.account-order-closure-details > div{
    display:grid;

    grid-template-columns:
        minmax(100px,1fr)
        auto;

    align-items:center;

    gap:14px;
}


.account-order-closure-details span{
    color:var(--account-text-light);

    font-size:10px;
}


.account-order-closure-details strong{
    color:var(--account-text);

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

    text-align:right;
}


/* ==========================================================================
   CLOSED ORDER NOTICE — TABLET
   ========================================================================== */

@media(max-width:924px){

    .account-order-closure-notice{
        grid-template-columns:
            48px
            minmax(0,1fr);

        gap:
            12px
            14px;

        padding:
            15px
            14px;
    }


    .account-order-closure-icon{
        width:46px;
        height:46px;

        font-size:18px;
    }


    .account-order-closure-content{
        padding-right:0;

        border-right:0;
    }


    .account-order-closure-content > strong{
        font-size:12px;
    }


    .account-order-closure-content p{
        font-size:9px;
    }


    .account-order-closure-details{
        grid-column:
            1
            /
            -1;

        padding-top:11px;

        border-top:1px solid #eadde0;
    }


    .account-order-closure-details span,
    .account-order-closure-details strong{
        font-size:8.5px;
    }

}


/* ==========================================================================
   CLOSED ORDER NOTICE — PHONE
   ========================================================================== */

@media(max-width:560px){

    .account-order-closure-notice{
        grid-template-columns:1fr;

        margin-top:14px;

        text-align:left;
    }


    .account-order-closure-icon{
        width:42px;
        height:42px;
    }


    .account-order-closure-details{
        grid-column:auto;
    }


    .account-order-closure-details > div{
        grid-template-columns:
            minmax(0,1fr)
            auto;
    }

}