*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --black:#0a0a0a;--white:#f8f6f2;--cream:#ede9e1;
  --gold:#c9a96e;--gold-d:#b8904a;--muted:#888880;
  --border:#d4cfc4;--red:#c0392b;--green:#27ae60;
  --sidebar:#111;--sidebar-w:260px;
  --font-d:"Cormorant Garamond",serif;
  --font-b:"Montserrat",sans-serif;
}
body{font-family:var(--font-b);font-weight:300;background:#f4f2ee;color:var(--black);min-height:100vh}

/* LOGIN */
.login-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--black)}
.login-box{background:var(--white);width:400px;padding:52px 44px;text-align:center}
.login-logo{font-family:var(--font-d);font-size:36px;font-weight:300;letter-spacing:.18em;margin-bottom:6px}
.login-logo span{color:var(--gold)}
.login-sub{font-size:8px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:40px}
.login-group{display:flex;flex-direction:column;gap:6px;margin-bottom:20px;text-align:left}
.login-label{font-size:8px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.login-input{background:none;border:none;border-bottom:1px solid var(--border);padding:12px 0;font-family:var(--font-b);font-size:13px;color:var(--black);font-weight:300;outline:none;transition:border-color .3s;width:100%}
.login-input:focus{border-bottom-color:var(--gold)}
.login-btn{width:100%;background:var(--black);color:var(--white);border:none;padding:16px;font-family:var(--font-b);font-size:9px;letter-spacing:.25em;text-transform:uppercase;cursor:pointer;transition:background .3s;margin-top:8px}
.login-btn:hover{background:var(--gold)}
.login-error{font-size:10px;color:var(--red);margin-top:12px;display:none;letter-spacing:.1em}
.login-hint{font-size:9px;color:var(--muted);margin-top:18px;letter-spacing:.1em;line-height:1.8}

/* DASHBOARD */
.dashboard{display:none}
.sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);background:var(--sidebar);display:flex;flex-direction:column;z-index:100}
.sidebar-logo{padding:28px 24px 20px;border-bottom:1px solid rgba(255,255,255,.07)}
.sidebar-logo-text{font-family:var(--font-d);font-size:24px;font-weight:300;letter-spacing:.18em;color:var(--white)}
.sidebar-logo-text span{color:var(--gold)}
.sidebar-tag{font-size:7px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-top:2px}
.sidebar-nav{flex:1;padding:16px 0;overflow-y:auto}
.nav-section{font-size:7px;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.25);padding:16px 24px 8px}
.nav-item{display:flex;align-items:center;gap:12px;padding:12px 24px;font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.5);cursor:pointer;transition:all .2s;border-left:2px solid transparent}
.nav-item:hover{color:var(--white);background:rgba(255,255,255,.04)}
.nav-item.active{color:var(--white);background:rgba(201,169,110,.08);border-left-color:var(--gold)}
.nav-item .icon{font-size:15px;width:20px;text-align:center}
.sidebar-footer{padding:20px 24px;border-top:1px solid rgba(255,255,255,.07)}
.logout-btn{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.4);cursor:pointer;transition:color .2s;background:none;border:none;font-family:var(--font-b);width:100%}
.logout-btn:hover{color:var(--red)}

.main{margin-left:var(--sidebar-w);min-height:100vh}
.topbar{background:var(--white);border-bottom:1px solid var(--border);padding:0 36px;height:64px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50}
.topbar-title{font-family:var(--font-d);font-size:22px;font-weight:400;letter-spacing:.04em}
.topbar-right{display:flex;align-items:center;gap:16px}
.admin-badge{font-size:9px;letter-spacing:.18em;text-transform:uppercase;background:rgba(201,169,110,.12);color:var(--gold);padding:6px 14px;border:1px solid rgba(201,169,110,.3)}
.topbar-time{font-size:10px;color:var(--muted);letter-spacing:.1em}

.page{display:none;padding:36px}
.page.active{display:block}

/* Stats */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px}
.stat-card{background:var(--white);padding:24px;border:1px solid var(--border)}
.stat-label{font-size:8px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.stat-value{font-family:var(--font-d);font-size:36px;font-weight:400;color:var(--black);margin-bottom:4px}
.stat-change{font-size:9px;color:var(--green);letter-spacing:.08em}
.stat-change.down{color:var(--red)}

/* Tables */
.section-card{background:var(--white);border:1px solid var(--border);margin-bottom:24px}
.section-card-header{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.section-card-title{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500}
.btn-sm{background:var(--black);color:var(--white);border:none;padding:8px 18px;font-family:var(--font-b);font-size:9px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:background .3s}
.btn-sm:hover{background:var(--gold)}
.btn-sm.secondary{background:none;color:var(--black);border:1px solid var(--border)}
.btn-sm.secondary:hover{border-color:var(--gold);background:rgba(201,169,110,.05)}
.btn-sm.danger{background:var(--red)}
.btn-sm.danger:hover{background:#a93226}
.btn-sm.success{background:var(--green)}

table{width:100%;border-collapse:collapse}
th{font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding:12px 16px;text-align:left;border-bottom:1px solid var(--border);font-weight:500}
td{padding:14px 16px;font-size:12px;border-bottom:1px solid rgba(212,207,196,.5);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(237,233,225,.4)}
.product-thumb{width:44px;height:54px;object-fit:cover;display:block}
.badge{font-size:8px;letter-spacing:.15em;text-transform:uppercase;padding:3px 9px}
.badge.green{background:rgba(39,174,96,.12);color:var(--green);border:1px solid rgba(39,174,96,.25)}
.badge.red{background:rgba(192,57,43,.1);color:var(--red);border:1px solid rgba(192,57,43,.2)}
.badge.gold{background:rgba(201,169,110,.12);color:var(--gold-d);border:1px solid rgba(201,169,110,.3)}

/* Forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:24px}
.form-grid.single{grid-template-columns:1fr}
.form-group{display:flex;flex-direction:column;gap:7px}
.form-label{font-size:8px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.form-input,.form-select,.form-textarea{background:none;border:none;border-bottom:1px solid var(--border);padding:10px 0;font-family:var(--font-b);font-size:13px;color:var(--black);font-weight:300;outline:none;transition:border-color .3s;width:100%}
.form-select{background:var(--white);padding:10px 4px}
.form-textarea{border:1px solid var(--border);padding:12px;resize:vertical;min-height:80px}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-bottom-color:var(--gold);border-color:var(--gold)}
.form-actions{padding:20px 24px;border-top:1px solid var(--border);display:flex;gap:12px}

/* Upload area */
.upload-area{border:2px dashed var(--border);padding:40px;text-align:center;cursor:pointer;transition:border-color .3s;background:var(--cream)}
.upload-area:hover{border-color:var(--gold)}
.upload-area p{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.upload-area .icon{font-size:32px;color:var(--gold)}
.preview-imgs{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.preview-img{width:70px;height:80px;object-fit:cover;border:1px solid var(--border);position:relative}

/* Orders list */
.order-row{display:flex;align-items:center;gap:16px;padding:14px 24px;border-bottom:1px solid var(--border)}
.order-row:last-child{border-bottom:none}
.order-id{font-size:11px;font-weight:500;min-width:100px;letter-spacing:.08em}
.order-customer{font-size:11px;color:var(--muted);flex:1}
.order-amount{font-family:var(--font-d);font-size:18px;min-width:90px;text-align:right}

/* Settings */
.settings-section{padding:28px 24px;border-bottom:1px solid var(--border)}
.settings-section:last-child{border-bottom:none}
.settings-title{font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;margin-bottom:20px}
.toggle-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.toggle-label{font-size:12px;color:var(--black);letter-spacing:.06em}
.toggle-sub{font-size:10px;color:var(--muted)}
.toggle{position:relative;width:44px;height:24px;cursor:pointer}
.toggle input{opacity:0;width:0;height:0;position:absolute}
.toggle-slider{position:absolute;inset:0;background:var(--border);border-radius:12px;transition:.3s}
.toggle-slider::before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:white;border-radius:50%;transition:.3s}
.toggle input:checked + .toggle-slider{background:var(--gold)}
.toggle input:checked + .toggle-slider::before{transform:translateX(20px)}

/* Password change */
.pwd-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;padding:24px}
.pwd-strength{height:4px;background:var(--border);margin-top:8px;border-radius:2px;overflow:hidden}
.pwd-strength-bar{height:100%;width:0%;background:var(--green);transition:width .3s}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:200;display:none;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
.modal-overlay.open{display:flex}
.modal{background:var(--white);width:640px;max-height:88vh;overflow-y:auto}
.modal-header{padding:24px 28px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.modal-title{font-family:var(--font-d);font-size:22px;font-weight:400}
.modal-close{background:none;border:none;cursor:pointer;font-size:20px;color:var(--muted)}
.modal-close:hover{color:var(--black)}

.toast{position:fixed;bottom:28px;right:28px;background:var(--black);color:var(--white);padding:14px 22px;font-size:11px;letter-spacing:.12em;transform:translateY(80px);opacity:0;transition:all .4s;z-index:999;display:flex;align-items:center;gap:10px}
.toast.show{transform:translateY(0);opacity:1}
.toast.gold{background:var(--gold)}


/* MAIN */

.main{
    margin-left:260px;
    min-height:100vh;
    background:#f4f2ee;
    transition:.3s;
}

/* HEADER */

.topbar{
    height:80px;
    background:#f8f6f2;
    border-bottom:1px solid #d4cfc4;

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

    padding:0 30px;

    position:sticky;
    top:0;
    z-index:50;
}

.page-title{
    font-family:"Cormorant Garamond",serif;
    font-size:28px;
    font-weight:400;
    color:#111;
}

.topbar-right{
    display:flex;
    align-items:center;
    gap:20px;
}

.topbar-time{
    font-size:12px;
    letter-spacing:2px;
    color:#888;
}

.admin-badge{
    padding:10px 18px;
    border:1px solid #d8c79a;
    color:#c9a96e;
    font-size:11px;
    letter-spacing:3px;
}

.page-content{
    padding:30px;
}

/* Sidebar collapsed */

.sidebar.collapsed ~ .main{
    margin-left:80px;
}

/* Mobile */

@media(max-width:768px){

    .main{
        margin-left:80px;
    }

    .topbar{
        padding:0 15px;
    }

    .page-title{
        font-size:22px;
    }

    .admin-badge{
        display:none;
    }

}

/* ========================================
   RESPONSIVE ADMIN PANEL
======================================== */

/* Large Tablets */
@media (max-width: 1200px){

    .stats-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .pwd-grid{
        grid-template-columns:1fr;
    }

}

/* Tablets */
@media (max-width: 992px){

    .main{
        margin-left:80px;
    }

    .sidebar{
        width:80px;
    }

    .stats-grid{
        grid-template-columns:1fr 1fr;
        gap:12px;
    }

    .form-grid{
        grid-template-columns:1fr;
    }

    .topbar{
        padding:0 20px;
    }

    .page{
        padding:20px;
    }

    .section-card-header{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }

}

/* Mobile */
@media (max-width:768px){

    .main{
        margin-left:80px !important;
    }

    .page{
        padding:15px;
    }

    .stats-grid{
        grid-template-columns:1fr;
    }

    .stat-card{
        padding:18px;
    }

    .stat-value{
        font-size:30px;
    }

    .topbar{
        height:auto;
        padding:15px;
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }

    .topbar-right{
        width:100%;
        justify-content:space-between;
    }

    .form-grid{
        grid-template-columns:1fr;
        padding:15px;
    }

    .form-actions{
        flex-wrap:wrap;
    }

    .pwd-grid{
        grid-template-columns:1fr;
        padding:15px;
    }

    .settings-section{
        padding:18px;
    }

    .toggle-row{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }

    .order-row{
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
    }

    .order-amount{
        text-align:left;
    }

    .modal{
        width:95%;
        margin:10px;
    }

}

/* Small Mobile */
@media (max-width:576px){

    .page{
        padding:10px;
    }

    .stat-card{
        padding:15px;
    }

    .stat-value{
        font-size:26px;
    }

    .section-card-header{
        padding:15px;
    }

    .section-card-title{
        font-size:10px;
    }

    .topbar-title{
        font-size:18px;
    }

    .admin-badge{
        font-size:8px;
        padding:4px 10px;
    }

    .btn-sm{
        width:100%;
        text-align:center;
    }

}

/* Responsive Tables */
@media (max-width:768px){

    .table-responsive{
        overflow-x:auto;
        width:100%;
    }

    table{
        min-width:700px;  
    }

}

/* profile sidebar  */

/* ===== PROFILE PAGE DARK THEME ===== */

.profile-page{
    padding:30px;
}

.profile-card{
    background:#121826;
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    padding:30px;
    margin-bottom:25px;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.profile-card h2,
.profile-card h3{
    color:#fff;
}

.profile-card p{
    color:#94a3b8;
}

/* Labels */
.profile-card label{
    color:#cbd5e1;
    font-size:14px;
    margin-bottom:8px;
    display:block;
}

/* Inputs */
.profile-card input,
.profile-card textarea,
.profile-card select{
    width:100%;
    background:#0f172a !important;
    border:1px solid #334155 !important;
    color:#fff !important;
    border-radius:10px;
    padding:12px 15px;
}

.profile-card input:focus,
.profile-card textarea:focus,
.profile-card select:focus{
    border-color:#6366f1 !important;
    box-shadow:0 0 0 3px rgba(99,102,241,.2);
    outline:none;
}

/* Buttons */
.profile-card button{
    background:#6366f1;
    color:#fff;
    border:none;
    border-radius:10px;
    padding:10px 20px;
    cursor:pointer;
    transition:.3s;
}

.profile-card button:hover{
    background:#4f46e5;
}

/* Delete Button */
.profile-card .bg-red-600,
.profile-card .bg-red-500{
    background:#dc2626 !important;
}

.profile-card .bg-red-600:hover,
.profile-card .bg-red-500:hover{
    background:#b91c1c !important;
}

/* Success Text */
.profile-card .text-green-600,
.profile-card .text-green-500{
    color:#22c55e !important;
}

/* Danger Text */
.profile-card .text-red-600,
.profile-card .text-red-500{
    color:#ef4444 !important;
}

/* Delete Account Card */
.profile-card{
    background:#141c2b;
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    padding:30px;
}

.profile-title{
    font-size:22px;
    font-weight:600;
    color:#fff;
    margin-bottom:10px;
}

.profile-description{
    color:#94a3b8;
    line-height:1.7;
}

/* Input */
.custom-input{
    width:100%;
    background:#0f172a;
    border:1px solid #334155;
    color:#fff;
    padding:12px 15px;
    border-radius:10px;
}

.custom-input:focus{
    outline:none;
    border-color:#6366f1;
    box-shadow:0 0 0 3px rgba(99,102,241,.15);
}

/* Modal */
.delete-form{
    padding:25px;
    background:#141c2b;
}

.modal-title{
    color:#fff;
    font-size:20px;
    font-weight:600;
}

.modal-description{
    color:#94a3b8;
    margin-top:12px;
    line-height:1.7;
}

/* Buttons */
.delete-btn{
    background:#dc2626;
    color:#fff;
    border:none;
    border-radius:10px;
    padding:12px 20px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.delete-btn:hover{
    background:#b91c1c;
}

.cancel-btn{
    background:#334155;
    color:#fff;
    border:none;
    border-radius:10px;
    padding:12px 20px;
    cursor:pointer;
}

.cancel-btn:hover{
    background:#475569;
}

.modal-actions{
    display:flex;
    justify-content:flex-end;
    gap:12px;
    margin-top:25px;
}


.password-card{
    background:#141c2b;
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    padding:30px;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.card-header{
    margin-bottom:25px;
}

.card-title{
    color:#fff;
    font-size:24px;
    font-weight:600;
    margin-bottom:8px;
}

.card-description{
    color:#94a3b8;
    font-size:14px;
    line-height:1.7;
}

.password-form{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.form-group label{
    display:block;
    color:#cbd5e1;
    margin-bottom:8px;
    font-size:14px;
    font-weight:500;
}

.form-group input{
    width:100%;
    background:#0f172a;
    border:1px solid #334155;
    color:#fff;
    padding:14px 16px;
    border-radius:10px;
    transition:.3s;
}

.form-group input:focus{
    outline:none;
    border-color:#6366f1;
    box-shadow:0 0 0 3px rgba(99,102,241,.15);
}

.form-group input::placeholder{
    color:#64748b;
}

.form-footer{
    display:flex;
    align-items:center;
    gap:15px;
    margin-top:10px;
}

.save-btn{
    background:#6366f1;
    color:#fff;
    border:none;
    padding:12px 24px;
    border-radius:10px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.save-btn:hover{
    background:#4f46e5;
}

.success-msg{
    color:#22c55e;
    font-size:14px;
    font-weight:500;
}

.error-text{
    color:#ef4444;
    font-size:13px;
    margin-top:6px;
}

@media(max-width:768px){

    .password-card{
        padding:20px;
    }

    .form-footer{
        flex-direction:column;
        align-items:flex-start;
    }

    .save-btn{
        width:100%;
    }
}


/* ===============================
   PROFILE INFORMATION CARD
================================ */

.profile-card{
    background:#141c2b;
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    padding:30px;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.card-header{
    margin-bottom:25px;
}

.card-title{
    color:#fff;
    font-size:24px;
    font-weight:600;
    margin-bottom:8px;
}

.card-description{
    color:#94a3b8;
    font-size:14px;
    line-height:1.7;
}

.profile-form{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.form-group label{
    display:block;
    color:#cbd5e1;
    font-size:14px;
    font-weight:500;
    margin-bottom:8px;
}

.form-group input{
    width:100%;
    background:#0f172a;
    border:1px solid #334155;
    color:#fff;
    padding:14px 16px;
    border-radius:10px;
    transition:.3s;
}

.form-group input::placeholder{
    color:#64748b;
}

.form-group input:focus{
    outline:none;
    border-color:#6366f1;
    box-shadow:0 0 0 3px rgba(99,102,241,.15);
}

/* Verification Box */

.verify-box{
    margin-top:15px;
    padding:15px;
    background:#1e293b;
    border-radius:10px;
}

.verify-text{
    color:#fbbf24;
    margin-bottom:10px;
}

.verify-btn{
    background:none;
    border:none;
    color:#60a5fa;
    cursor:pointer;
    text-decoration:underline;
    font-size:14px;
}

/* Footer */

.form-footer{
    display:flex;
    align-items:center;
    gap:15px;
    margin-top:10px;
}

/* Save Button */

.save-btn{
    background:#6366f1;
    color:#fff;
    border:none;
    border-radius:10px;
    padding:12px 24px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.save-btn:hover{
    background:#4f46e5;
}

/* Messages */

.success-msg{
    color:#22c55e;
    font-size:14px;
    font-weight:500;
}

.error-text{
    color:#ef4444;
    font-size:13px;
    margin-top:6px;
}

/* Mobile */

@media(max-width:768px){

    .profile-card{
        padding:20px;
    }

    .form-footer{
        flex-direction:column;
        align-items:flex-start;
    }

    .save-btn{
        width:100%;
    }

}


/* ===========================
   DELETE ACCOUNT CARD
=========================== */

.delete-card{
    background:#141c2b;
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    padding:30px;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.card-header{
    margin-bottom:25px;
}

.card-title{
    color:#fff;
    font-size:24px;
    font-weight:600;
    margin-bottom:10px;
}

.card-description{
    color:#94a3b8;
    line-height:1.7;
    font-size:14px;
}

/* Modal */

.delete-modal{
    background:#141c2b;
    padding:30px;
    border-radius:16px;
}

.modal-title{
    color:#fff;
    font-size:22px;
    font-weight:600;
    margin-bottom:12px;
}

.modal-description{
    color:#94a3b8;
    line-height:1.7;
    margin-bottom:25px;
}

/* Inputs */

.form-group{
    margin-bottom:20px;
}

.form-group label{
    display:block;
    color:#cbd5e1;
    margin-bottom:8px;
    font-size:14px;
}

.custom-input{
    width:100%;
    background:#0f172a;
    border:1px solid #334155;
    color:#fff;
    padding:14px 16px;
    border-radius:10px;
}

.custom-input:focus{
    outline:none;
    border-color:#ef4444;
    box-shadow:0 0 0 3px rgba(239,68,68,.15);
}

/* Footer */

.modal-footer{
    display:flex;
    justify-content:flex-end;
    gap:12px;
    margin-top:25px;
}

/* Buttons */

.delete-btn{
    background:#dc2626;
    color:#fff;
    border:none;
    padding:12px 22px;
    border-radius:10px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.delete-btn:hover{
    background:#b91c1c;
}

.cancel-btn{
    background:#334155;
    color:#fff;
    border:none;
    padding:12px 22px;
    border-radius:10px;
    cursor:pointer;
    transition:.3s;
}

.cancel-btn:hover{
    background:#475569;
}

/* Errors */

.error-text{
    color:#ef4444;
    font-size:13px;
    margin-top:8px;
}

/* Mobile */

@media(max-width:768px){

    .delete-card{
        padding:20px;
    }

    .modal-footer{
        flex-direction:column;
    }

    .delete-btn,
    .cancel-btn{
        width:100%;
    }

}

.register-link{
    margin-top:20px;
    text-align:center;
    color:#94a3b8;
    font-size:14px;
}

.register-link a{
    color:#818cf8;
    text-decoration:none;
    font-weight:600;
    margin-left:5px;
    transition:.3s;
}

.register-link a:hover{
    color:#a5b4fc;
    text-decoration:underline;
}



/* sidebar  */

/* Toggle Button */

.sidebar-logo{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    padding:24px;
}

.sidebar-toggle{
    background:none;
    border:none;
    color:#fff;
    font-size:24px;
    cursor:pointer;
}

/* Collapse Sidebar */

.sidebar.collapsed{
    width:80px;
}

.sidebar.collapsed .sidebar-logo-text,
.sidebar.collapsed .sidebar-tag,
.sidebar.collapsed .nav-section,
.sidebar.collapsed .nav-item span:not(.icon){
    display:none;
}

.sidebar.collapsed .nav-item{
    justify-content:center;
    padding:0;
}

.sidebar.collapsed .sidebar-footer button{
    text-align:center;
    padding:0;
}

/* Move Main Content */

.main{
    margin-left:305px;
    transition:.3s;
}

.sidebar.collapsed ~ .main{
    margin-left:80px;
}

@media(max-width:768px){

    .sidebar{
        width:80px;
    }

    .sidebar:not(.collapsed){
        width:280px;
    }

    .main{
        margin-left:80px;
    }

    .sidebar:not(.collapsed) ~ .main{
        margin-left:280px;
    }

}

/* Sidebar collapsed */

.sidebar.collapsed{
    width:80px;
}

/* Hide logo */

.sidebar.collapsed .sidebar-logo-text,
.sidebar.collapsed .sidebar-tag,
.sidebar.collapsed .nav-section{
    display:none;
}

/* Hide menu text only */

.sidebar.collapsed .menu-text{
    display:none;
}

/* Center icons nicely */

.sidebar.collapsed .nav-item{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    height:54px;
}

.sidebar.collapsed .icon{
    font-size:20px;
    width:auto;
}

/* Logout */

.sidebar.collapsed .logout-btn{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:0;
}

.sidebar.collapsed .logout-btn .menu-text{
    display:none;
}

.sidebar.collapsed .logout-btn .icon{
    font-size:20px;
}

/* Center hamburger */

.sidebar.collapsed .sidebar-logo{
    justify-content:center;
}

.sidebar.collapsed .sidebar-toggle{
    margin:0;
}


.product-table{
    width:100%;
    border-collapse:collapse;
}

.product-table th{
    padding:18px;
    text-align:left;
    font-size:11px;
    letter-spacing:3px;
    color:#777;
    border-bottom:1px solid #d8d2c6;
}

.product-table td{
    padding:18px;
    border-bottom:1px solid #e4ddd0;
    vertical-align:middle;
}

.product-thumb{
    width:55px;
    height:70px;
    object-fit:cover;
    border:1px solid #d8d2c6;
}

.product-name{
    font-size:18px;
    color:#111;
}

.product-subtitle{
    font-size:13px;
    color:#888;
    margin-top:4px;
}

.badge.gold{
    background:#f4eee2;
    color:#b68d37;
    border:1px solid #d8c18d;
    padding:6px 12px;
    font-size:10px;
    letter-spacing:2px;
}

.badge.green{
    background:#eaf8ee;
    color:#1d8f42;
    border:1px solid #a9dfb9;
    padding:6px 12px;
    font-size:10px;
    letter-spacing:2px;
}

.btn-delete{
    background:#d64232;
    color:#fff;
    border:none;
    padding:8px 14px;
    cursor:pointer;
    letter-spacing:2px;
    font-size:10px;
}

.table-responsive{
    overflow-x:auto;
}

@media(max-width:768px){

    .product-name{
        font-size:14px;
    }

    .product-thumb{
        width:45px;
        height:60px;
    }

}


/* ==========================
   EDIT PRODUCT PAGE
========================== */

.product-card{
    background:#f7f5f1;
    border:1px solid #d8d2c6;
    margin:30px;
}

.product-header{
    padding:28px 30px;
    border-bottom:1px solid #d8d2c6;
    font-size:18px;
    letter-spacing:4px;
    text-transform:uppercase;
    color:#111;
}

.product-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:35px;
    padding:35px;
}

.field label,
.full-field label{
    display:block;
    margin-bottom:10px;
    font-size:10px;
    letter-spacing:3px;
    color:#7b7b7b;
    text-transform:uppercase;
}

.field input,
.field select{
    width:100%;
    border:none;
    border-bottom:1px solid #d8d2c6;
    background:transparent;
    padding:12px 0;
    font-size:14px;
    color:#111;
}

.field input:focus,
.field select:focus{
    outline:none;
    border-color:#c6a45d;
}

/* Sizes */

/* .sizes{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:10px;
}

.size-item{
    display:flex;
    align-items:center;
    gap:5px;
    font-size:13px;
    color:#222;
}

.size-item input{
    width:15px;
    height:15px;
} */

/* Description */

.full-field{
    padding:0 35px 25px;
}

.full-field textarea{
    width:100%;
    min-height:140px;
    resize:none;
    padding:15px;
    border:1px solid #d8d2c6;
    background:#faf9f6;
    font-size:14px;
}

.full-field textarea:focus{
    outline:none;
    border-color:#c6a45d;
}

/* Product Image */

.current-image{
    width:180px;
    height:220px;
    object-fit:cover;
    border:1px solid #d8d2c6;
    background:#fff;
    margin-bottom:20px;
}

.image-upload{
    width:100%;
    padding:12px;
    border:1px solid #d8d2c6;
    background:#fff;
}

/* Buttons */

.btn-area{
    padding:30px 35px;
    border-top:1px solid #d8d2c6;
    display:flex;
    gap:15px;
}

.save-btn{
    background:#000;
    color:#fff;
    border:none;
    padding:14px 28px;
    letter-spacing:3px;
    font-size:11px;
    cursor:pointer;
    transition:.3s;
}

.save-btn:hover{
    background:#c6a45d;
}

.clear-btn{
    background:#f7f5f1;
    color:#111;
    border:1px solid #d8d2c6;
    padding:14px 28px;
    letter-spacing:3px;
    font-size:11px;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:.3s;
}

.clear-btn:hover{
    background:#ece6d9;
}

/* Success Message */

.alert-success{
    margin:25px 30px 0;
    padding:14px;
    background:#eaf8ee;
    border:1px solid #aad7b8;
    color:#1e7f3f;
}

/* Validation Errors */

.alert-danger{
    margin:25px 30px 0;
    padding:14px;
    background:#fff1f1;
    border:1px solid #efb0b0;
    color:#c62828;
}

/* Responsive */

@media(max-width:991px){

    .product-grid{
        grid-template-columns:1fr;
        gap:25px;
    }

}

@media(max-width:768px){

    .product-card{
        margin:15px;
    }

    .product-header{
        padding:20px;
        font-size:16px;
    }

    .product-grid{
        padding:20px;
    }

    .full-field{
        padding:0 20px 20px;
    }

    .btn-area{
        padding:20px;
        flex-direction:column;
    }

    .save-btn,
    .clear-btn{
        width:100%;
    }

    .current-image{
        width:100%;
        max-width:250px;
        height:auto;
    }

}