/* =========================================================
GLOBAL ACCOUNT WRAPPER
========================================================= */

:root{
    --ss-primary:#C30F16;
    --ss-primary-dark:#a30c12;
    --ss-bg:#f7f3f0;
    --ss-card:#ffffff;
    --ss-text:#231815;
    --ss-soft:#7f726c;
    --ss-muted:#a79a93;
    --ss-line:#eee3dc;
    --ss-shadow:0 10px 28px rgba(31,19,15,0.08);
}

body{
    background:#f5f7fb;
    font-family:'Segoe UI', sans-serif;
}

.ss-account-section{
    padding:16px;
    background:#f5f5f7;
    min-height:100vh;
    max-width:1100px;
    margin:auto;
}

.ss-account-heading{
    font-size:18px;
    font-weight:700;
    margin-bottom:14px;
    color:#111;
}






/* ================================
ACCOUNT PAGE
================================ */
.ss-account-page{
    padding:20px;
    text-align:center;
}

.ss-account-title{
    font-size:22px;
    font-weight:600;
    margin-bottom:20px;
}




/* ================================
BRAND TOKENS
================================ */
:root{
    --ss-brand: #C30F16;
    --ss-brand-dark: #9f0c12;
    --ss-brand-soft: rgba(195, 15, 22, 0.10);
    --ss-border: #e8e8e8;
    --ss-text: #1f1f1f;
    --ss-muted: #6b7280;
    --ss-bg: #ffffff;
    --ss-success: #15803d;
    --ss-error: #dc2626;
}

/* ================================
LOGIN / REGISTER / FORGOT BOX
================================ */
.ss-login-box,
.ss-register-box,
.ss-forgot-box{
    max-width: 380px;
    margin: 0 auto;
    padding: 26px 22px;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fff8f8 100%);
    border: 1px solid rgba(195, 15, 22, 0.08);
    box-shadow: 0 14px 40px rgba(195, 15, 22, 0.10);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ================================
HEADINGS
================================ */
.ss-login-box h3,
.ss-register-box h3,
.ss-forgot-box h3{
    font-size: 19px;
    line-height: 1.3;
    margin: 0 0 8px;
    color: var(--ss-text);
    font-weight: 700;
}

/* ================================
INPUT FIELDS
================================ */
.ss-login-box input,
.ss-register-box input,
.ss-forgot-box input{
    width: 100%;
    padding: 13px 14px;
    border-radius: 12px;
    border: 1px solid var(--ss-border);
    font-size: 14px;
    background: #fff;
    color: var(--ss-text);
    transition: all 0.25s ease;
    box-sizing: border-box;
}

.ss-login-box input::placeholder,
.ss-register-box input::placeholder,
.ss-forgot-box input::placeholder{
    color: #9ca3af;
}

.ss-login-box input:focus,
.ss-register-box input:focus,
.ss-forgot-box input:focus{
    border-color: var(--ss-brand);
    box-shadow: 0 0 0 3px var(--ss-brand-soft);
    outline: none;
}

/* ================================
BUTTON
================================ */
#ss-login-btn,
#ss-register-btn,
#ss-forgot-btn{
    background: linear-gradient(135deg, var(--ss-brand) 0%, var(--ss-brand-dark) 100%);
    color: #fff;
    border: none;
    padding: 13px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 10px 20px rgba(195, 15, 22, 0.18);
}

#ss-login-btn:hover,
#ss-register-btn:hover,
#ss-forgot-btn:hover{
    transform: translateY(-1px);
    box-shadow: 0 14px 24px rgba(195, 15, 22, 0.22);
    background: linear-gradient(135deg, var(--ss-brand-dark) 0%, var(--ss-brand) 100%);
}

#ss-login-btn:disabled,
#ss-register-btn:disabled,
#ss-forgot-btn:disabled{
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* ================================
MESSAGE
================================ */
#ss-login-msg,
#ss-register-msg,
#ss-forgot-msg{
    font-size: 13px;
    margin-top: 4px;
    min-height: 18px;
    font-weight: 500;
}

#ss-login-msg.error,
#ss-register-msg.error,
#ss-forgot-msg.error{
    color: var(--ss-error);
}

#ss-login-msg.success,
#ss-register-msg.success,
#ss-forgot-msg.success{
    color: var(--ss-success);
}

/* ================================
FORGOT PASSWORD LINK
================================ */
.ss-forgot-wrap{
    margin: -2px 0 2px;
    font-size: 13px;
    text-align: right;
}

#ss-show-forgot-password{
    color: var(--ss-brand);
    cursor: pointer;
    font-weight: 600;
    transition: opacity 0.2s ease;
}

#ss-show-forgot-password:hover{
    opacity: 0.8;
    text-decoration: underline;
}

/* ================================
EXTRA LINKS
================================ */
.ss-login-extra{
    font-size: 13px;
    margin-top: 10px;
}

.ss-login-extra a{
    color: var(--ss-brand);
    text-decoration: none;
    font-weight: 500;
}

.ss-login-extra a:hover{
    text-decoration: underline;
}

/* ================================
SWITCH (LOGIN ↔ REGISTER ↔ FORGOT)
================================ */
.ss-switch{
    font-size: 13px;
    margin-top: 8px;
    text-align: center;
    color: var(--ss-muted);
}

.ss-switch span{
    color: var(--ss-brand);
    cursor: pointer;
    font-weight: 600;
    transition: opacity 0.2s ease;
}

.ss-switch span:hover{
    opacity: 0.8;
    text-decoration: underline;
}

/* ================================
ACCOUNT TITLE
================================ */
.ss-account-title{
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: var(--ss-text);
    margin-bottom: 18px;
}

/* ================================
MOBILE RESPONSIVE
================================ */
@media (max-width: 480px){

    .ss-login-box,
    .ss-register-box,
    .ss-forgot-box{
        max-width: 100%;
        padding: 20px 16px;
        border-radius: 14px;
    }

    .ss-account-title{
        font-size: 20px;
        margin-bottom: 14px;
    }

    .ss-login-box h3,
    .ss-register-box h3,
    .ss-forgot-box h3{
        font-size: 17px;
    }
}

.ss-account-page{
    padding: 20px 14px;
    background: linear-gradient(180deg, #fff5f5 0%, #ffffff 100%);
    border-radius: 20px;
}





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

.ss-account-header{
    display:flex;
    align-items:center;
    gap:12px;
    background:#fff;
    padding:15px;
    border-radius:16px;
    margin-bottom:16px;
    box-shadow:0 8px 24px rgba(0,0,0,0.08);
}

.ss-user-avatar{
    width:52px;
    height:52px;
    border-radius:50%;
    background:linear-gradient(135deg,#C30F16,#ff2e2e);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    font-weight:700;
}

.ss-user-info h3{
    font-size:15px;
    margin-bottom:2px;
    font-weight:700;
}

.ss-user-info span{
    font-size:12px;
    color:#777;
}

.ss-account-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.ss-account-card{
    background:#fff;
    padding:16px;
    border-radius:16px;
    text-align:center;
    cursor:pointer;
    box-shadow:0 6px 20px rgba(0,0,0,0.08);
    transition:0.25s;
}

.ss-account-card i{
    font-size:20px;
    color:#C30F16;
    margin-bottom:6px;
}

.ss-account-card span{
    display:block;
    font-size:13px;
    font-weight:600;
}

.ss-account-card:active{
    transform:scale(0.95);
    background:#C30F16;
    color:#fff;
}

.ss-account-card:active i{
    color:#fff;
}


/* =========================================================
ORDERS LIST
========================================================= */

.ss-order-card{
    position:relative;
    overflow:hidden;
    background:linear-gradient(180deg,#ffffff 0%, #fff8f6 100%);
    padding:18px;
    border-radius:20px;
    margin-bottom:16px;
    border:1px solid rgba(195,15,22,0.08);
    box-shadow:
        0 10px 28px rgba(31,19,15,0.08),
        0 2px 8px rgba(195,15,22,0.04);
    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}

.ss-order-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, rgba(195,15,22,0.04), transparent 38%);
    pointer-events:none;
}

.ss-order-card::after{
    content:"";
    position:absolute;
    top:-42px;
    right:-42px;
    width:120px;
    height:120px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(195,15,22,0.08) 0%, rgba(195,15,22,0) 72%);
    pointer-events:none;
}

.ss-order-card:hover{
    transform:translateY(-4px);
    border-color:rgba(195,15,22,0.16);
    box-shadow:
        0 18px 38px rgba(31,19,15,0.12),
        0 6px 16px rgba(195,15,22,0.08);
}




.ss-order-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    margin-bottom:8px;
}

.ss-order-id{
    font-size:14px;
    font-weight:700;
    color:var(--ss-text);
}

.ss-order-status{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:11px;
    padding:6px 10px;
    border-radius:999px;
    font-weight:700;
    line-height:1;
    white-space:nowrap;
    border:1px solid transparent;
}

.ss-order-status::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:currentColor;
    opacity:.9;
}

.ss-order-status.pending{
    background:#fff3cd;
    color:#a66b00;
    border-color:#f4e0a3;
}

.ss-order-status.received{
    background:#ffe3e5;
    color:#c30f16;
    border-color:#f3c4c7;
}

.ss-order-status.processing{
    background:#e3f1ff;
    color:#1459b3;
    border-color:#bddcff;
}

.ss-order-status.packed{
    background:#efe7ff;
    color:#6f42d8;
    border-color:#d9c7ff;
}

.ss-order-status.shipped{
    background:#e2f0ff;
    color:#0d6efd;
    border-color:#c5ddff;
}

.ss-order-status.outdelivery{
    background:#fff0e2;
    color:#d76400;
    border-color:#ffd5af;
}

.ss-order-status.delivered,
.ss-order-status.completed{
    background:#e4f7ea;
    color:#17864d;
    border-color:#bde7c9;
}

.ss-order-status.on-hold{
    background:#fff7db;
    color:#9a6b00;
    border-color:#f1df9f;
}

.ss-order-status.cancelled{
    background:#ffe7e7;
    color:#bb1e24;
    border-color:#f3c6c8;
}

.ss-status-cancelled{
    color:#c30f16;
}





.ss-order-date{
    font-size:12px;
    color:var(--ss-soft);
    margin-bottom:12px;
}

.ss-order-items{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin:auto;
    margin-bottom:12px;
    max-width:1100px;
    padding:20px;
}

.ss-order-item{
    display:flex;
    gap:10px;
    align-items:center;
    padding:8px 0;
}

.ss-order-item img{
    width:48px;
    height:48px;
    border-radius:12px;
    object-fit:cover;
    border:1px solid #eee;
    background:#f5f5f5;
    box-shadow:0 6px 14px rgba(0,0,0,0.05);
}

.ss-order-product{
    font-size:13px;
    font-weight:600;
    display:block;
    color:var(--ss-text);
    line-height:1.4;
}

.ss-order-qty{
    font-size:11px;
    color:var(--ss-soft);
}

.ss-order-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid var(--ss-line);
}

.ss-order-total{
    font-weight:800;
    color:var(--ss-primary);
    font-size:14px;
}


.ss-view-order{
    display:flex;
    width:fit-content;
    margin-left:auto;
    align-items:center;
    justify-content:center;
    border:none;
    background:linear-gradient(180deg,var(--ss-primary) 0%, var(--ss-primary-dark) 100%);
    color:#fff;
    padding:10px 16px;
    border-radius:12px;
    font-size:12px;
    font-weight:700;
    line-height:1;
    cursor:pointer;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
    box-shadow:0 10px 22px rgba(195,15,22,0.20);
}

.ss-view-order:hover{
    background:linear-gradient(180deg,#d3131b 0%, #980b11 100%);
    transform:translateY(-2px);
    box-shadow:0 14px 26px rgba(195,15,22,0.26);
}

.ss-view-order:active{
    transform:translateY(0) scale(.98);
}



.ss-order-side-actions{
    margin-top:18px;
}

.ss-cancel-order{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:none;
    background:#C30F16;
    color:#fff;
    padding:13px 16px;
    border-radius:14px;
    font-size:13px;
    font-weight:700;
    letter-spacing:.2px;
    cursor:pointer;
    transition:.25s ease;
    box-shadow:0 10px 22px rgba(195,15,22,.18);
}

.ss-cancel-order:hover{
    background:#aa0d13;
    transform:translateY(-1px);
    box-shadow:0 14px 28px rgba(195,15,22,.22);
}

.ss-cancel-order:active{
    transform:scale(.98);
}

.ss-cancel-modal,
.ss-cancel-popup{
    position:fixed;
    inset:0;
    z-index:9999;
    background:rgba(17,17,17,.55);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    backdrop-filter:blur(4px);
}

.ss-cancel-modal-box,
.ss-cancel-popup-box{
    width:100%;
    max-width:430px;
    background:#fff;
    border-radius:22px;
    padding:24px 18px 18px;
    position:relative;
    box-shadow:0 20px 60px rgba(0,0,0,.18);
    border:1px solid rgba(195,15,22,.08);
}

.ss-cancel-close,
.ss-cancel-popup-close{
    position:absolute;
    top:10px;
    right:10px;
    width:36px;
    height:36px;
    border:none;
    border-radius:50%;
    background:#f7ecec;
    color:#C30F16;
    font-size:22px;
    line-height:1;
    cursor:pointer;
    transition:.2s ease;
}

.ss-cancel-close:hover,
.ss-cancel-popup-close:hover{
    background:#f3dede;
}

.ss-cancel-modal-title{
    font-size:20px;
    font-weight:800;
    margin-bottom:6px;
    color:#111;
}

.ss-cancel-modal-subtitle{
    font-size:13px;
    color:#666;
    margin-bottom:16px;
    line-height:1.5;
}

.ss-cancel-form{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.ss-cancel-form label{
    font-size:12px;
    font-weight:700;
    color:#444;
}

.ss-cancel-form select,
.ss-cancel-form textarea{
    width:100%;
    border:1px solid #ead9d9;
    border-radius:12px;
    padding:12px 14px;
    font-size:13px;
    outline:none;
    background:#fff;
    color:#111;
    transition:border-color .2s ease, box-shadow .2s ease;
}

.ss-cancel-form select:focus,
.ss-cancel-form textarea:focus{
    border-color:#C30F16;
    box-shadow:0 0 0 3px rgba(195,15,22,.08);
}

.ss-cancel-form textarea{
    resize:vertical;
    min-height:100px;
}

.ss-cancel-submit,
.ss-cancel-popup-btn{
    margin-top:8px;
    border:none;
    background:#C30F16;
    color:#fff;
    padding:13px 14px;
    border-radius:12px;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    transition:.25s ease;
    box-shadow:0 10px 22px rgba(195,15,22,.18);
}

.ss-cancel-submit:hover,
.ss-cancel-popup-btn:hover{
    background:#aa0d13;
    transform:translateY(-1px);
}

.ss-cancel-submit:active,
.ss-cancel-popup-btn:active{
    transform:scale(.98);
}

.ss-cancel-submit:disabled{
    opacity:.7;
    cursor:not-allowed;
    transform:none;
}

.ss-cancel-popup-box{
    text-align:center;
}

.ss-cancel-popup-icon{
    width:56px;
    height:56px;
    margin:0 auto 14px;
    border-radius:50%;
    background:#fdecec;
    color:#C30F16;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    font-weight:800;
    box-shadow:0 8px 18px rgba(195,15,22,.10);
}

.ss-cancel-popup-status{
    display:block;
    margin:0 0 10px;
    font-size:13px;
    font-weight:800;
    letter-spacing:.2px;
}

/* actual order status text colors */
.ss-cancel-popup-status.ss-status-received{
    color:#c30f16;
}

.ss-cancel-popup-status.ss-status-processing{
    color:#1459b3;
}

.ss-cancel-popup-status.ss-status-packed{
    color:#6f42d8;
}

.ss-cancel-popup-status.ss-status-shipped{
    color:#0d6efd;
}

.ss-cancel-popup-status.ss-status-outdelivery{
    color:#d76400;
}

.ss-cancel-popup-status.ss-status-delivered{
    color:#17864d;
}

.ss-cancel-popup-status.ss-status-cancelled{
    color:#bb1e24;
}

.ss-cancel-popup-status.ss-status-hold{
    color:#9a6b00;
}

.ss-cancel-popup-title{
    font-size:20px;
    font-weight:800;
    margin-bottom:8px;
    color:#111;
}

.ss-cancel-popup-text{
    font-size:14px;
    line-height:1.6;
    color:#666;
    margin-bottom:6px;
}

@media (max-width:767px){
    .ss-cancel-modal-box,
    .ss-cancel-popup-box{
        padding:22px 16px 16px;
        border-radius:18px;
    }

    .ss-cancel-order,
    .ss-cancel-submit,
    .ss-cancel-popup-btn{
        font-size:13px;
    }

    .ss-cancel-popup-text,
    .ss-cancel-popup-status{
        font-size:13px;
    }
}










/* =========================================================
SINGLE ORDER PAGE
========================================================= */

.ss-support-wrapper,
.ss-order-actions{
    max-width:1100px;
    margin:auto;
    padding:0 20px;
}

.ss-order-section-title{
    font-size:18px;
    font-weight:600;
    color:#111;
    margin-bottom:16px;
    letter-spacing:0.2px;
}


/* Latest Update */

.ss-track-message{
    margin-top:20px;
    padding:18px;
    border-radius:14px;
    position:relative;
    overflow:hidden;
    font-size:13px;
    background:linear-gradient(135deg,#fff,#fff5f5);
    border:1px solid rgba(195,15,22,0.25);
    box-shadow:0 8px 25px rgba(195,15,22,0.08);
    animation:popIn 0.5s ease;
}

.ss-track-message::before{
    content:'';
    position:absolute;
    top:-50%;
    left:-50%;
    width:200%;
    height:200%;
    background:radial-gradient(circle, rgba(195,15,22,0.08), transparent 60%);
    animation:rotateGlow 6s linear infinite;
}

.ss-track-message::after{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,0.5), transparent);
    animation:shimmer 2.2s infinite;
}

.ss-highlight-update{
    background:rgba(195,15,22,0.08);
    color:#C30F16;
}

.ss-update-title{
    font-size:13px;
    font-weight:700;
    color:#C30F16;
    letter-spacing:0.4px;
    margin-bottom:5px;
    display:flex;
    align-items:center;
    gap:8px;
}

.ss-update-title::before{
    content:'LIVE';
    font-size:10px;
    font-weight:700;
    background:#C30F16;
    color:#fff;
    padding:2px 6px;
    border-radius:20px;
    animation:pulseBadge 1.5s infinite;
}

.ss-update-text{
    font-size:16px;
    font-weight:600;
    color:#222;
    animation:textPop 0.6s ease;
}


/* Product Card Split Design */

.ss-thumb{
    width:70px;
    height:70px;
    border-radius:12px;
    overflow:hidden;
    background:#fafafa;
    flex-shrink:0;
    border:1px solid #eee;
}

.ss-img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.ss-info{
    flex:1;
    background:#fafafa;
    padding:10px 12px;
    border-radius:10px;
}

.ss-title{
    font-size:14px;
    font-weight:600;
    margin-bottom:6px;
    line-height:1.3;
}

.ss-title a{
    text-decoration:none;
    color:#111;
}

.ss-title a:hover{
    color:#C30F16;
}

.ss-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.ss-price{
    font-size:15px;
    font-weight:700;
    color:#C30F16;
}

.ss-qty{
    font-size:12px;
    background:#fff;
    border:1px solid #eee;
    padding:3px 8px;
    border-radius:6px;
    color:#555;
}

.ss-order-card::before{
    content:'';
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:0;
    background:#C30F16;
    border-radius:14px 0 0 14px;
    transition:0.3s;
}

.ss-order-card:hover::before{
    width:4px;
}


/* Summary */

.ss-overview-main{
    flex:0 0 66% !important;
    max-width:66% !important;
    min-width:0 !important;
}

.ss-summary-lines{
    background:transparent;
}

.ss-summary-line{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    padding:14px 0;
    border-bottom:1px solid #ece3dd;
}

.ss-summary-line:first-child{
    padding-top:0;
}

.ss-summary-line:last-child{
    border-bottom:none;
    padding-bottom:0;
}

.ss-summary-key{
    font-size:12px;
    font-weight:700;
    letter-spacing:.2px;
    color:#8a7f78;
    white-space:nowrap;
}

.ss-summary-value{
    font-size:14px;
    font-weight:800;
    color:#231815;
    text-align:right;
    line-height:1.4;
}

.ss-status-received{color:#c30f16;}
.ss-status-processing{color:#b87400;}
.ss-status-packed{color:#6f55d9;}
.ss-status-shipped{color:#136fe8;}
.ss-status-outdelivery{color:#db6a10;}
.ss-status-delivered{color:#178d58;}
.ss-status-hold{color:#9b6a00;}


/* Overview Layout */

.ss-order-overview{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:flex-start !important;
    gap:12px !important;
}

.ss-progress-side{
    flex:0 0 34% !important;
    max-width:34% !important;
    min-width:0 !important;
}


/* Progress Rail */

.ss-account-section .ss-order-overview .ss-progress-side .ss-progress-rail{
    position:relative !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    padding:4px 0 !important;
}

.ss-account-section .ss-order-overview .ss-progress-side .ss-progress-rail::before{
    content:'' !important;
    position:absolute !important;
    left:50% !important;
    top:26px !important;
    bottom:26px !important;
    width:3px !important;
    border-radius:999px !important;
    background:linear-gradient(180deg,#e9e1dc 0%, #d7ccc6 100%) !important;
    transform:translateX(-50%) !important;
}

.ss-account-section .ss-order-overview .ss-progress-side .ss-progress-line-fill{
    position:absolute !important;
    left:50% !important;
    top:26px !important;
    width:3px !important;
    border-radius:999px !important;
    transform:translateX(-50%) !important;
    background:linear-gradient(180deg,#ff8e95 0%, #df3942 45%, #C30F16 100%) !important;
    box-shadow:0 0 8px rgba(195,15,22,.12) !important;
    z-index:1 !important;
    transition:height .4s ease !important;
}

.ss-account-section .ss-order-overview .ss-progress-side .ss-progress-step{
    position:relative !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    margin:44px 0 !important;
    min-height:22px !important;
    z-index:2 !important;
}

.ss-account-section .ss-order-overview .ss-progress-side .ss-progress-dot{
    position:relative !important;
    z-index:5 !important;
    width:15px !important;
    height:15px !important;
    border-radius:50% !important;
    background:linear-gradient(180deg,#ddd4cf 0%, #cbc0ba 100%) !important;
    border:3px solid #fff !important;
    box-shadow:0 6px 14px rgba(0,0,0,.08) !important;
}

.ss-account-section .ss-order-overview .ss-progress-side .ss-progress-step.done .ss-progress-dot{
    background:linear-gradient(180deg,#e84951 0%, #C30F16 100%) !important;
    box-shadow:
        0 0 0 4px rgba(195,15,22,.08),
        0 8px 16px rgba(195,15,22,.14) !important;
}

.ss-account-section .ss-order-overview .ss-progress-side .ss-progress-step.active .ss-progress-dot{
    position:relative !important;
    background:linear-gradient(180deg,#53d784 0%, #18a34a 100%) !important;
    box-shadow:
        0 0 0 4px rgba(22,163,74,.10),
        0 8px 16px rgba(22,163,74,.18) !important;
    animation:ssLivePulse 1.8s linear infinite !important;
}

.ss-account-section .ss-order-overview .ss-progress-side .ss-progress-step.active .ss-progress-dot::before,
.ss-account-section .ss-order-overview .ss-progress-side .ss-progress-step.active .ss-progress-dot::after{
    content:'' !important;
    position:absolute !important;
    inset:-3px !important;
    border-radius:50% !important;
    border:2px solid rgba(34,197,94,.40) !important;
    animation:ssLiveRipple 1.8s linear infinite !important;
}

.ss-account-section .ss-order-overview .ss-progress-side .ss-progress-step.active .ss-progress-dot::after{
    animation-delay:.9s !important;
}

.ss-account-section .ss-order-overview .ss-progress-side .ss-progress-text{
    position:absolute !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    top:22px !important;
    width:64px !important;
    font-size:11px !important;
    line-height:1.32 !important;
    color:#6f6762 !important;
    text-align:center !important;
    font-weight:700 !important;
    letter-spacing:.15px !important;
    z-index:4 !important;
}

.ss-account-section .ss-order-overview .ss-progress-side .ss-progress-step .ss-progress-text::before{
    content:'' !important;
    position:absolute !important;
    left:50% !important;
    top:2px !important;
    transform:translateX(-50%) !important;
    width:66px !important;
    height:18px !important;
    background:#f6f2ef !important;
    border-radius:10px !important;
    z-index:-1 !important;
}

.ss-account-section .ss-order-overview .ss-progress-side .ss-progress-step.done .ss-progress-text{
    color:#7b6267 !important;
}

.ss-account-section .ss-order-overview .ss-progress-side .ss-progress-step.active .ss-progress-text{
    color:#2f3b35 !important;
    font-weight:800 !important;
}



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

.ss-support-wrapper{
    max-width:1100px;
    margin:32px auto 60px !important;
    padding:0 20px 40px !important;
    display:block;
    clear:both;
}

.ss-support-card{
    padding:18px;
    background:#fafafa;
    border:1px solid #eee;
    border-radius:14px;
    box-shadow:0 8px 22px rgba(0,0,0,0.05);
    margin-top:12px;
}

.ss-support-title{
    font-size:14px;
    font-weight:600;
    margin-bottom:4px;
    color:#111;
}

.ss-support-sub{
    font-size:12px;
    color:#666;
    margin-bottom:12px;
}

.ss-support-buttons{
    display:flex;
    gap:10px;
}

.ss-support-btn{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:11px;
    border-radius:8px;
    text-decoration:none;
    font-size:13px;
    font-weight:600;
    border:1px solid #ddd;
    background:#fff;
    color:#111;
    transition:0.25s;
}

.ss-support-btn:hover{
    background:#f5f5f5;
}

.ss-whatsapp-btn{
    border-color:#25D366;
    color:#25D366;
}

.ss-whatsapp-btn:hover{
    background:#25D366;
    color:#fff;
}

@media (max-width:767px){
    .ss-support-wrapper{
        margin:24px auto 50px !important;
        padding:0 16px 34px !important;
    }
}



/* =========================================================
ADDRESS
========================================================= */

.ss-form textarea{
    padding:11px;
    border-radius:10px;
    border:1px solid #ddd;
    font-size:13px;
    min-height:80px;
    resize:none;
}

.ss-form textarea:focus{
    outline:none;
    border-color:#C30F16;
}


/* =========================================================
EMPTY / LOADER / LOGOUT
========================================================= */

.ss-empty{
    text-align:center;
    padding:50px 0;
    font-size:14px;
    color:#777;
}

.ss-loader{
    text-align:center;
    padding:40px 0;
    font-size:14px;
    color:#555;
}

.ss-logout-msg{
    text-align:center;
    padding:40px 20px;
}

.ss-logout-msg h3{
    font-size:18px;
    color:#C30F16;
    margin-bottom:8px;
}

.ss-logout-msg p{
    font-size:13px;
    color:#777;
}


/* =========================================================
ANIMATIONS
========================================================= */

@keyframes popIn{
    from{
        opacity:0;
        transform:scale(0.95);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}

@keyframes textPop{
    from{
        opacity:0;
        transform:translateY(8px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes shimmer{
    0%{ left:-100%; }
    100%{ left:100%; }
}

@keyframes pulseBadge{
    0%{ transform:scale(1); }
    50%{ transform:scale(1.1); }
    100%{ transform:scale(1); }
}

@keyframes rotateGlow{
    0%{ transform:rotate(0deg); }
    100%{ transform:rotate(360deg); }
}

@keyframes ssLivePulse{
    0%{transform:scale(1);}
    50%{transform:scale(1.08);}
    100%{transform:scale(1);}
}

@keyframes ssLiveRipple{
    0%{
        transform:scale(1);
        opacity:.75;
    }
    70%{
        transform:scale(2.1);
        opacity:0;
    }
    100%{
        transform:scale(2.1);
        opacity:0;
    }
}


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

@media (max-width:767px){
    .ss-order-card{
        padding:14px;
        border-radius:16px;
    }

    .ss-order-top{
        align-items:flex-start;
    }

    .ss-order-status{
        font-size:10px;
        padding:6px 9px;
    }

    .ss-order-item img{
        width:44px;
        height:44px;
    }

    .ss-order-bottom{
        align-items:center;
    }

    .ss-summary-line{
        padding:12px 0;
    }

    .ss-summary-key{
        font-size:11px;
    }

    .ss-summary-value{
        font-size:13px;
    }

    .ss-account-section .ss-order-overview .ss-progress-side .ss-progress-step{
        margin:40px 0 !important;
    }

    .ss-account-section .ss-order-overview .ss-progress-side .ss-progress-text{
        width:58px !important;
        font-size:10px !important;
    }

    .ss-account-section .ss-order-overview .ss-progress-side .ss-progress-step .ss-progress-text::before{
        width:58px !important;
        height:16px !important;
        top:2px !important;
    }
}






/* =========================================================
SECRET SIGNATURE PRODUCT CARD
========================================================= */

.ss-product-grid,
.ss-search-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
    padding:6px !important;
    align-items:start;
}

.sspc-card{
    width:100%;
    background:linear-gradient(180deg,#ffffff 0%,#fffaf5 100%);
    border:1px solid #f2e4d6;
    border-radius:18px;
    overflow:hidden;
    position:relative;
    box-shadow:0 8px 22px rgba(30,18,14,0.06);
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.sspc-card:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 28px rgba(30,18,14,0.10);
    border-color:#ebd4c0;
}

.sspc-link{
    display:block;
    text-decoration:none;
    color:inherit;
}

.sspc-image-wrap{
    position:relative;
    padding:10px 10px 0;
}

.sspc-image-wrap img{
    width:100%;
    aspect-ratio:1 / 1.08;
    object-fit:cover;
    display:block;
    border-radius:14px;
    background:#f7f7f7;
}

.sspc-badge{
    position:absolute;
    top:16px;
    left:16px;
    z-index:4;
    background:linear-gradient(135deg,#ffe27a 0%,#ffbf2f 100%);
    color:#a80f14;
    font-size:10px;
    font-weight:800;
    line-height:1;
    padding:6px 10px;
    border-radius:999px;
    box-shadow:0 4px 10px rgba(255,191,47,0.22);
}

/* =========================================================
SECRET SIGNATURE PRODUCT CARD
========================================================= */

.ss-product-grid,
.ss-search-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
    padding:6px !important;
    align-items:start;
}

.sspc-card{
    width:100%;
    background:linear-gradient(180deg,#ffffff 0%,#fffaf5 100%);
    border:1px solid #f2e4d6;
    border-radius:18px;
    overflow:hidden;
    position:relative;
    box-shadow:0 8px 22px rgba(30,18,14,0.06);
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.sspc-card:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 28px rgba(30,18,14,0.10);
    border-color:#ebd4c0;
}

.sspc-link{
    display:block;
    text-decoration:none;
    color:inherit;
}

.sspc-title-link{
    text-decoration:none;
    color:inherit;
    display:block;
}

.sspc-image-wrap{
    position:relative;
    padding:10px 10px 0;
}

.sspc-image-wrap img{
    width:100%;
    aspect-ratio:1 / 1.08;
    object-fit:cover;
    display:block;
    border-radius:14px;
    background:#f7f7f7;
}

.sspc-badge{
    position:absolute;
    top:16px;
    left:16px;
    z-index:4;
    background:linear-gradient(135deg,#ffe27a 0%,#ffbf2f 100%);
    color:#a80f14;
    font-size:10px;
    font-weight:800;
    line-height:1;
    padding:6px 10px;
    border-radius:999px;
    box-shadow:0 4px 10px rgba(255,191,47,0.22);
}

/* Wishlist */
.sspc-wishlist{
    position:absolute;
    top:14px;
    right:14px;
    z-index:4;
    min-height:28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    text-decoration:none;
    background:linear-gradient(135deg,#ffe27a 0%,#ffbf2f 100%);
    color:#b51217;
    border-radius:999px;
    padding:6px 9px;
    box-shadow:0 4px 10px rgba(255,191,47,0.22);
    transition:transform .18s ease, box-shadow .18s ease, color .18s ease;
}

.sspc-wishlist:hover{
    transform:translateY(-1px);
    box-shadow:0 8px 14px rgba(255,191,47,0.26);
}

.sspc-wishlist svg,
.sspc-wishlist i{
    width:15px;
    height:15px;
    font-size:15px;
    line-height:1;
    display:block;
}

.sspc-wishlist-text{
    font-size:9px;
    font-weight:800;
    line-height:1;
    white-space:nowrap;
}

.sspc-wishlist.is-active{
    color:#8f0d12;
}

.sspc-wishlist.is-active svg{
    fill:currentColor;
    stroke:currentColor;
}

/* Content */
.sspc-content{
    padding:8px 10px 12px;
}

.sspc-title{
    margin:0 0 6px;
    font-size:12px;
    line-height:1.4;
    font-weight:700;
    color:#231815;
    min-height:34px;
    text-align:center;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.sspc-rating{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    margin-bottom:7px;
    min-height:12px;
}

.sspc-stars{
    color:#e7ae16;
    font-size:10px;
    line-height:1;
    letter-spacing:.4px;
}

.sspc-stars-empty{
    color:#ddd3ca;
}

.sspc-rating-text{
    font-size:10px;
    line-height:1;
    color:#7b6f69;
    font-weight:600;
}

.sspc-price-wrap{
    text-align:center;
    margin-bottom:8px;
}

.sspc-price{
    font-size:15px;
    line-height:1.2;
    font-weight:800;
    color:#c30f16;
}

.sspc-price del{
    display:none !important;
}

.sspc-price ins{
    text-decoration:none;
    color:#c30f16;
    font-weight:800;
}

/* Actions */
.sspc-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:4px;
}

.sspc-icon-link,
.sspc-view-link,
.sspc-cart-link{
    min-height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    text-decoration:none;
    border-radius:10px;
    font-size:10px;
    font-weight:800;
    line-height:1;
    padding:0 8px;
    transition:transform .18s ease, box-shadow .18s ease, color .18s ease, background .18s ease;
}

.sspc-icon-link:hover,
.sspc-view-link:hover,
.sspc-cart-link:hover{
    transform:translateY(-1px);
}

.sspc-view-link{
    background:linear-gradient(135deg,#c30f16 0%,#a60d13 100%);
    color:#fff;
    box-shadow:0 8px 16px rgba(195,15,22,0.18);
}

.sspc-cart-link{
    background:linear-gradient(135deg,#ffe27a 0%,#ffbf2f 100%);
    color:#b51217;
    box-shadow:0 8px 16px rgba(255,191,47,0.20);
}

/* Cart active */
.sspc-cart-link.is-active{
    background:linear-gradient(135deg,#c30f16 0%,#a60d13 100%);
    color:#fff;
    box-shadow:0 8px 16px rgba(195,15,22,0.20);
}

.sspc-cart-link.is-active svg{
    stroke:currentColor;
    fill:none;
}

.sspc-view-link svg,
.sspc-cart-link svg{
    width:16px;
    height:16px;
    display:block;
}

.sspc-cart-text,
.sspc-view-text{
    white-space:nowrap;
}

/* Mobile */
@media (max-width:767px){
    .ss-product-grid,
    .ss-search-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:12px !important;
    }

    .sspc-title{
        font-size:12px;
        min-height:34px;
    }

    .sspc-price{
        font-size:14px;
    }

    .sspc-view-link,
    .sspc-cart-link{
        min-height:32px;
        font-size:9px;
        gap:5px;
        padding:0 6px;
    }

    .sspc-wishlist{
        padding:5px 8px;
    }

    .sspc-wishlist-text{
        font-size:8px;
    }


    #ss-product-results{
    padding-bottom:90px;
}

}





/* Desktop */
@media (min-width:768px){
    .ss-product-grid,
    .ss-search-grid{
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        gap:18px !important;
    }

    .sspc-title{
        font-size:13px;
        min-height:38px;
    }

    .sspc-price{
        font-size:16px;
    }

    .sspc-view-link,
    .sspc-cart-link{
        min-height:36px;
        font-size:10px;
    }
}