/* ==========================
      DARK MODE
========================== */

body.dark-mode{
    background:#111827;
    color:#fff;
}

/* Header */

body.dark-mode header{
    background:#0f172a;
}

/* Sidebar */

body.dark-mode .sidebar{
    background:#0f172a;
}

body.dark-mode .sidebar-logo{
    color:#60a5fa;
    border-bottom:1px solid #1f2937;
}

body.dark-mode .title{
    color:#6b7280;
}

body.dark-mode .sidebar a{
    color:#d1d5db;
}

body.dark-mode .sidebar a:hover{
    background:#111827;
    color:#60a5fa;
}

body.dark-mode .sidebar a.active{
    background:#2563eb;
    color:#fff;
}

body.dark-mode .sidebar .badge{
    background:#ef4444;
}

body.dark-mode .logout{
    color:#f87171 !important;
}

body.dark-mode .logout:hover{
    background:#1f2937 !important;
}

body.dark-mode .overlay{
    background:rgba(0,0,0,.6);
}

/* Hero */

body.dark-mode .hero{
    background:linear-gradient(135deg,#0f172a,#1e3a8a);
}

/* Cards */

body.dark-mode .card{
    background:#1f2937;
    color:#fff;
}

body.dark-mode .card h3{
    color:#fff;
}

body.dark-mode .desc{
    color:#d1d5db;
}

body.dark-mode .price{
    color:#60a5fa;
}

/* Search */

body.dark-mode .search-container input{
    background:#374151;
    color:#fff;
}

body.dark-mode .search-container button{
    background:#2563eb;
}

/* Categories */

body.dark-mode .category-btn{
    background:#1f2937;
    color:#fff;
    border-color:#374151;
}

body.dark-mode .category-btn.active{
    background:#2563eb;
}

/* Footer */

body.dark-mode footer{
    background:#0f172a;
}
/* ==========================
      ABOUT
========================== */

body.dark-mode .about{
    background:#1f2937;
    color:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,.3);
}

body.dark-mode .about h2{
    color:#60a5fa;
}

body.dark-mode .about p{
    color:#d1d5db;
}
/* ================= THEME ================= */

.theme-toggle{

    width:45px;
    height:45px;

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

    background:#f4f7fb;

    border-radius:12px;

    cursor:pointer;

    color:#2563eb;

    transition:.3s;

    font-size:18px;

}

.theme-toggle:hover{

    background:#2563eb;
    color:#fff;

}
/* ================= TOPBAR DARK FIX ================= */

body.dark-mode .topbar{
    background:#0f172a;
    box-shadow:0 3px 15px rgba(0,0,0,.4);
}

body.dark-mode .logo span{
    color:#fff;
}

body.dark-mode .menu-btn{
    background:#1f2937;
    color:#60a5fa;
}

body.dark-mode .menu-btn:hover{
    background:#2563eb;
    color:#fff;
}

body.dark-mode .language{
    background:#1f2937;
}

body.dark-mode .language select{
    color:#fff;
}

body.dark-mode .notify{
    background:#1f2937;
    color:#fff;
}

body.dark-mode .profile:hover{
    background:#1f2937;
}

body.dark-mode .profile-menu{
    background:#1f2937;
}

body.dark-mode .profile-menu a{
    color:#fff;
}

body.dark-mode .profile-menu a:hover{
    background:#111827;
}
body{
    transition:0.3s ease;
}

/* ================= DARK MODE ADD PRODUCT ================= */

body.dark-mode{
    background:#0f172a;
}

/* CONTAINER */
body.dark-mode .container{
    background:#111827;
    box-shadow:0 10px 30px rgba(0,0,0,0.5);
}

/* TITLE */
body.dark-mode h1{
    color:#60a5fa;
}

/* LABEL */
body.dark-mode label{
    color:#d1d5db;
}

/* INPUTS */
body.dark-mode input[type="text"],
body.dark-mode input[type="number"],
body.dark-mode textarea,
body.dark-mode select{
    background:#1f2937;
    border:2px solid #374151;
    color:#fff;
}

/* PLACEHOLDER */
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder{
    color:#9ca3af;
}

/* FOCUS */
body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus{
    border-color:#2563eb;
}

/* FILE INPUT */
body.dark-mode input[type="file"]{
    background:#1f2937;
    border:2px dashed #2563eb;
    color:#d1d5db;
}

/* BUTTON */
body.dark-mode .btn{
    background:linear-gradient(90deg,#1e3a8a,#2563eb);
}

body.dark-mode .btn:hover{
    opacity:0.9;
}

/* ===========================
   MAIN BACKGROUND
=========================== */

body.dark-mode{
    background:#0f172a;
}

/* MAIN CONTENT */
body.dark-mode .main-content{
    background:#0f172a;
}

/* ===========================
   SEARCH BAR
=========================== */

body.dark-mode .search-box{
    background:#111827;
    border:2px solid #374151;
}

body.dark-mode .search-box input{
    color:#fff;
}

body.dark-mode .search-box input::placeholder{
    color:#9ca3af;
}

body.dark-mode .search-box button{
    color:#60a5fa;
}

/* ===========================
   ADD BUTTON
=========================== */

body.dark-mode .add-btn{
    background:linear-gradient(135deg,#1e3a8a,#2563eb);
}

/* ===========================
   CATEGORIES
=========================== */

body.dark-mode .categories a{
    background:#111827;
    color:#d1d5db;
    border:1px solid #374151;
}

body.dark-mode .categories a:hover{
    color:#60a5fa;
    border-color:#2563eb;
}

body.dark-mode .categories a.active{
    background:linear-gradient(135deg,#1e3a8a,#2563eb);
    color:#fff;
}

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

body.dark-mode .card{
    background:#111827;
    border:1px solid #1f2937;
}

body.dark-mode .card:hover{
    border-color:#2563eb;
    box-shadow:0 10px 25px rgba(0,0,0,0.5);
}

/* TITLE */
body.dark-mode .card-content h3{
    color:#f9fafb;
}

/* PRICE */
body.dark-mode .price{
    color:#60a5fa;
}

/* DESCRIPTION */
body.dark-mode .description{
    color:#d1d5db;
}

body.dark-mode .see-more{
    color:#60a5fa;
}

/* CATEGORY TAG */
body.dark-mode .category{
    background:#1f2937;
    color:#60a5fa;
}

/* ===========================
   ACTION BUTTONS
=========================== */

body.dark-mode .edit{
    background:#2563eb;
}

body.dark-mode .delete{
    background:#ef4444;
}

body.dark-mode .share{
    background:linear-gradient(135deg,#059669,#10b981);
}

/* ===========================
   EMPTY BOX
=========================== */

body.dark-mode .empty-box{
    background:#111827;
    border:1px solid #1f2937;
}

body.dark-mode .empty-box h2{
    color:#f9fafb;
}

body.dark-mode .empty-box p{
    color:#9ca3af;
}

body.dark-mode .empty-icon{
    background:#1f2937;
}

/* ===========================
   MODAL (DELETE)
=========================== */

body.dark-mode .modal-content{
    background:#111827;
}

body.dark-mode .modal-content h3{
    color:#f9fafb;
}

body.dark-mode .modal-content p{
    color:#d1d5db;
}

body.dark-mode .cancel-btn{
    background:#374151;
    color:#fff;
}

body.dark-mode .confirm-btn{
    background:#ef4444;
}

/* ===========================
   MAIN
=========================== */

body.dark-mode{
    background:#0f172a;
}

body.dark-mode .main-content{
    background:#0f172a;
}

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

body.dark-mode .page-header h1{
    color:#f9fafb;
}

body.dark-mode .page-header p{
    color:#9ca3af;
}

/* ===========================
   CATEGORY CARD
=========================== */

body.dark-mode .category-card{
    background:#111827;
    border:1px solid #1f2937;
    box-shadow:0 10px 25px rgba(0,0,0,0.4);
}

body.dark-mode .category-card:hover{
    border-color:#2563eb;
    box-shadow:0 20px 40px rgba(0,0,0,0.6);
}

/* IMAGE (optional smooth effect) */
body.dark-mode .category-card img{
    filter:brightness(0.85);
}

/* CONTENT */
body.dark-mode .category-content h3{
    color:#f9fafb;
}

body.dark-mode .category-content p{
    color:#d1d5db;
}

/* COUNT BADGE */
body.dark-mode .count{
    background:#1f2937;
    color:#60a5fa;
}

/* BUTTON */
body.dark-mode .open-btn{
    background:#2563eb;
}

body.dark-mode .open-btn:hover{
    background:#1d4ed8;
}

/* ===========================
   EMPTY BOX
=========================== */

body.dark-mode .empty-box{
    background:#111827;
    border:1px solid #1f2937;
}

body.dark-mode .empty-box h2{
    color:#f9fafb;
}

body.dark-mode .empty-box p{
    color:#9ca3af;
}

body.dark-mode .empty-box i{
    color:#60a5fa;
}

/* ===========================
   MAIN
=========================== */

body.dark-mode{
    background:#0f172a;
}

body.dark-mode .main-content{
    background:#0f172a;
}

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

body.dark-mode .page-header h1{
    color:#f9fafb;
}

body.dark-mode .page-header p{
    color:#9ca3af;
}

/* ===========================
   TABLE CARD
=========================== */

body.dark-mode .table-card{
    background:#111827;
    box-shadow:0 10px 25px rgba(0,0,0,0.5);
}

/* TABLE */
body.dark-mode table{
    color:#d1d5db;
}

/* HEADER TABLE */
body.dark-mode th{
    background:#1e3a8a;
    color:#fff;
}

/* ROWS */
body.dark-mode td{
    border-bottom:1px solid #1f2937;
}

body.dark-mode tr:hover{
    background:#1f2937;
}

/* IMAGE */
body.dark-mode td img{
    border:1px solid #374151;
}

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

body.dark-mode .pending{
    background:#292524;
    color:#fb923c;
}

body.dark-mode .accept{
    background:#052e16;
    color:#22c55e;
}

body.dark-mode .refuse{
    background:#450a0a;
    color:#ef4444;
}

/* ===========================
   BUTTONS
=========================== */

body.dark-mode .btn{
    color:#fff;
}

body.dark-mode .ok{
    background:#16a34a;
}

body.dark-mode .ok:hover{
    background:#15803d;
}

body.dark-mode .no{
    background:#dc2626;
}

body.dark-mode .no:hover{
    background:#b91c1c;
}

/* Completed text */
body.dark-mode td span{
    color:#9ca3af;
}

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

body.dark-mode td[colspan]{
    background:#111827;
}

body.dark-mode td[colspan] h2{
    color:#f9fafb;
}

body.dark-mode td[colspan] p{
    color:#9ca3af;
}

/* ===========================
   MAIN BACKGROUND
=========================== */

body.dark-mode{
    background:#0f172a;
}

body.dark-mode .main-content{
    background:#0f172a;
}

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

body.dark-mode .profile-card{
    background:transparent;
}

/* COVER */
body.dark-mode .profile-cover{
    background:linear-gradient(135deg,#1e3a8a,#2563eb);
}

/* AVATAR */
body.dark-mode .profile-avatar{
    background:#111827;
    border:6px solid #0f172a;
    box-shadow:0 12px 30px rgba(0,0,0,0.6);
}

body.dark-mode .profile-avatar i{
    color:#60a5fa;
}

/* ===========================
   TEXT
=========================== */

body.dark-mode .profile-body h2{
    color:#f9fafb;
}

body.dark-mode .profile-body p{
    color:#9ca3af;
}

/* ===========================
   INFO BOXES
=========================== */

body.dark-mode .info-box{
    background:#111827;
    border:1px solid #1f2937;
}

body.dark-mode .info-box:hover{
    box-shadow:0 10px 25px rgba(0,0,0,0.5);
}

/* LABEL */
body.dark-mode .info-box span{
    color:#60a5fa;
}

body.dark-mode .info-box span i{
    background:#1f2937;
    color:#60a5fa;
}

/* VALUE */
body.dark-mode .info-box h4{
    color:#d1d5db;
}

/* ===========================
   BUTTONS
=========================== */

body.dark-mode .btn{
    color:#fff;
}

body.dark-mode .edit{
    background:#2563eb;
}

body.dark-mode .account{
    background:#10b981;
}

body.dark-mode .logout-btn{
    background:#ef4444;
}

body.dark-mode .edit:hover,
body.dark-mode .account:hover,
body.dark-mode .logout-btn:hover{
    opacity:0.9;
}

/* ===========================
   MAIN BACKGROUND
=========================== */

body.dark-mode{
    background:#0f172a;
}

body.dark-mode .main-content{
    background:#0f172a;
}

/* ===========================
   TITLE
=========================== */

body.dark-mode .page-title h1{
    color:#f9fafb;
}

body.dark-mode .page-title p{
    color:#9ca3af;
}

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

body.dark-mode .card{
    background:#111827;
    box-shadow:0 10px 30px rgba(0,0,0,0.5);
}

body.dark-mode .card h3{
    color:#60a5fa;
}

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

body.dark-mode .form-group label{
    color:#d1d5db;
}

/* ===========================
   INPUTS
=========================== */

body.dark-mode .form-group input{
    background:#1f2937;
    border:1px solid #374151;
    color:#f9fafb;
}

body.dark-mode .form-group input::placeholder{
    color:#9ca3af;
}

body.dark-mode .form-group input:focus{
    border-color:#2563eb;
}

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

body.dark-mode .save-btn{
    background:#2563eb;
}

body.dark-mode .save-btn:hover{
    background:#1d4ed8;
}

/* ===========================
   ALERTS
=========================== */

body.dark-mode .alert.success{
    background:#052e16;
    color:#22c55e;
    border-color:#166534;
}

body.dark-mode .alert.error{
    background:#450a0a;
    color:#ef4444;
    border-color:#7f1d1d;
}

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

body.dark-mode hr{
    border-top:1px solid #1f2937;
}

/* ===========================
   MAIN
=========================== */

body.dark-mode{
    background:#0f172a;
}

body.dark-mode .main-content{
    background:#0f172a;
}

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

body.dark-mode .page-header h1{
    color:#f9fafb;
}

body.dark-mode .page-header p{
    color:#9ca3af;
}

/* ===========================
   BACK BUTTON
=========================== */

body.dark-mode .back-btn{
    background:#2563eb;
}

body.dark-mode .back-btn:hover{
    background:#1d4ed8;
}

/* ===========================
   NOTIFICATION CARD
=========================== */

body.dark-mode .notification{
    background:#111827;
    box-shadow:0 10px 25px rgba(0,0,0,0.5);
    border-left:5px solid #2563eb;
}

body.dark-mode .notification:hover{
    transform:translateY(-3px);
}

/* ICON */
body.dark-mode .icon{
    background:#1f2937;
    color:#60a5fa;
}

/* TIME */
body.dark-mode .time{
    color:#9ca3af;
}

/* MESSAGE */
body.dark-mode .message{
    color:#d1d5db;
}

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

body.dark-mode .empty-box{
    background:#111827;
    box-shadow:0 10px 25px rgba(0,0,0,0.5);
}

body.dark-mode .empty-box i{
    color:#475569;
}

body.dark-mode .empty-box h2{
    color:#f9fafb;
}

body.dark-mode .empty-box p{
    color:#9ca3af;
}

/* ===========================
   GLOBAL
=========================== */

body.dark-mode{
    background:#0f172a;
}

body.dark-mode .main-content{
    background:#0f172a;
}

/* ===========================
   HERO SECTION
=========================== */

body.dark-mode .hero-section{
    background:linear-gradient(135deg,#1e3a8a,#2563eb);
    box-shadow:0 15px 35px rgba(0,0,0,0.6);
}

body.dark-mode .hero-section p{
    color:#d1d5db;
}

/* ===========================
   BACK BUTTON
=========================== */

body.dark-mode .back-btn{
    background:#111827;
    color:#60a5fa;
    border:1px solid #1f2937;
}

body.dark-mode .back-btn:hover{
    background:#2563eb;
    color:#fff;
}

/* ===========================
   SEARCH
=========================== */

body.dark-mode .search-box{
    background:#111827;
    border:1px solid #1f2937;
    box-shadow:0 8px 20px rgba(0,0,0,0.5);
}

body.dark-mode .search-box input{
    background:transparent;
    color:#f9fafb;
}

body.dark-mode .search-box input::placeholder{
    color:#9ca3af;
}

body.dark-mode .search-box button{
    background:#2563eb;
    color:#fff;
}

body.dark-mode .search-box button:hover{
    background:#1d4ed8;
}

/* ===========================
   ADD BUTTON
=========================== */

body.dark-mode .add-btn{
    box-shadow:0 10px 25px rgba(0,0,0,0.5);
}

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

body.dark-mode .card{
    background:#111827;
    border:1px solid #1f2937;
    box-shadow:0 10px 25px rgba(0,0,0,0.5);
}

body.dark-mode .card:hover{
    border-color:#2563eb;
    box-shadow:0 18px 35px rgba(0,0,0,0.7);
}

body.dark-mode .card-content h3{
    color:#f9fafb;
}

body.dark-mode .price{
    color:#60a5fa;
}

body.dark-mode .description{
    color:#d1d5db;
}

/* ===========================
   ACTION BUTTONS
=========================== */

body.dark-mode .edit{
    background:#2563eb;
}

body.dark-mode .delete{
    background:#dc2626;
}

/* ===========================
   SHARE BUTTON
=========================== */

body.dark-mode .share{
    background:linear-gradient(135deg,#059669,#10b981);
}

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

body.dark-mode .empty-box{
    background:#111827;
    border:1px solid #1f2937;
    box-shadow:0 10px 25px rgba(0,0,0,0.5);
}

body.dark-mode .empty-box h2{
    color:#f9fafb;
}

body.dark-mode .empty-box p{
    color:#9ca3af;
}

body.dark-mode .empty-icon{
    background:#1f2937;
}

body.dark-mode .empty-icon i{
    color:#60a5fa;
}

/* ===========================
   TEXT FIX HERO TITLE
=========================== */

body.dark-mode .hero-section h1{
    color:#fff;
}
/* =========================
   DARK MODE SYSTEM
========================= */

/* LIGHT (default) */
:root{
    --bg:#f4f7fb;
    --card:#ffffff;
    --text:#111827;
    --muted:#6b7280;
    --primary:#2563eb;
    --border:#e5e7eb;
}

/* DARK MODE */
body.dark-mode{
    --bg:#0f172a;
    --card:#1e293b;
    --text:#e5e7eb;
    --muted:#94a3b8;
    --primary:#3b82f6;
    --border:#334155;
}

/* GLOBAL */
body{
    background:var(--bg);
    color:var(--text);
    transition:.3s ease;
}

/* CARDS */
.card,
.container,
.table-card,
.profile-card,
.notification,
.category-card,
.empty-box{
    background:var(--card) !important;
    color:var(--text);
    border-color:var(--border);
}

/* TEXT */
h1,h2,h3,h4,p,span,label,td,th{
    color:var(--text);
}

/* MUTED TEXT */
.description,
.page-header p,
.time{
    color:var(--muted);
}

/* SIDEBAR */
.sidebar{
    background:var(--card);
    color:var(--text);
    border-right:1px solid var(--border);
}

/* INPUTS */
input, textarea, select{
    background:var(--card);
    color:var(--text);
    border:1px solid var(--border);
}

/* SEARCH BOX */
.search-box{
    background:var(--card);
    border:1px solid var(--border);
}

/* BUTTON PRIMARY */
.add-btn,
.btn,
.edit,
.ok,
.save-btn{
    background:var(--primary);
    color:white;
}

/* TABLE */
table{
    background:var(--card);
}

td,th{
    border-color:var(--border);
}
/* =========================
   DARK MODE SYSTEM
========================= */

/* VARIABLES LIGHT */
:root{
    --bg:#f4f7fb;
    --card:#ffffff;
    --text:#111827;
    --muted:#6b7280;
    --primary:#2563eb;
    --border:#e5e7eb;
}

/* DARK MODE */
body.dark-mode{
    --bg:#0f172a;
    --card:#1e293b;
    --text:#e5e7eb;
    --muted:#94a3b8;
    --primary:#3b82f6;
    --border:#334155;
}

/* GLOBAL */
body{
    margin:0;
    padding:0;
    font-family:'Segoe UI',sans-serif;
    background:var(--bg);
    color:var(--text);
    transition:.3s ease;
}

/* CARDS */
.card,
.container,
.table-card,
.profile-card,
.notification,
.category-card,
.empty-box{
    background:var(--card);
    color:var(--text);
    border-color:var(--border);
}

/* TEXT */
h1,h2,h3,h4,p,span,label,td,th{
    color:var(--text);
}

/* MUTED TEXT */
.description,
.page-header p,
.time{
    color:var(--muted);
}

/* SIDEBAR */
.sidebar{
    background:var(--card);
    color:var(--text);
    border-right:1px solid var(--border);
}

/* INPUTS */
input, textarea, select{
    background:var(--card);
    color:var(--text);
    border:1px solid var(--border);
}

/* SEARCH BOX */
.search-box{
    background:var(--card);
    border:1px solid var(--border);
}

/* BUTTONS */
.add-btn,
.btn,
.edit,
.ok,
.save-btn{
    background:var(--primary);
    color:#fff;
}

/* TABLE */
table{
    background:var(--card);
}

td,th{
    border-color:var(--border);
}
/* ==============================
        DARK MODE - PRODUCT PAGE
============================== */

body.dark-mode{
    background: linear-gradient(135deg,#0f172a,#111827);
    color:#e5e7eb;
}

/* CONTAINER */
body.dark-mode .product{
    background:#1f2937;
    box-shadow:0 20px 50px rgba(0,0,0,.6);
    border:1px solid #374151;
}

/* IMAGE */
body.dark-mode .main-image{
    background:#111827;
    border:1px solid #374151;
}

/* GALLERY */
body.dark-mode .gallery img{
    border:2px solid #374151;
    background:#111827;
}

body.dark-mode .gallery img:hover{
    border-color:#3b82f6;
}

/* TITLE */
body.dark-mode .title{
    color:#f9fafb;
}

/* PRICE */
body.dark-mode .price{
    color:#60a5fa;
}

/* DESCRIPTION */
body.dark-mode .description{
    color:#d1d5db;
}

/* BUTTON BACK */
body.dark-mode .back-btn{
    background:linear-gradient(135deg,#1e3a8a,#2563eb);
}

/* BUTTON ORDER */
body.dark-mode .order-btn{
    background:linear-gradient(135deg,#059669,#10b981);
}

/* HOVER SHADOWS */
body.dark-mode .order-btn:hover,
body.dark-mode .back-btn:hover{
    filter:brightness(1.1);
}

/* OPTIONAL CONTAINER */
body.dark-mode .container{
    background:transparent;
}
/* =========================
   DARK MODE GLOBAL
========================= */

body.dark {
    background: #0f172a;
    color: #e5e7eb;
}

/* =========================
        TOPBAR
========================= */

body.dark-mode header {
    background: linear-gradient(90deg,#0b1220,#111827);
    box-shadow: 0 5px 20px rgba(0,0,0,.5);
}

body.dark-mode .logo h1 {
    color: #fff;
}

body.dark-mode .logo span {
    color: #38bdf8;
}

/* buttons */
body.dark-mode .menu-toggle,
body.dark-mode .theme-toggle {
    background: rgba(255,255,255,.08);
}

body.dark-mode .menu-toggle:hover,
body.dark-mode .theme-toggle:hover {
    background: rgba(255,255,255,.15);
}

/* =========================
        SIDEBAR
========================= */

body.dark-mode .sidebar {
    background: #0b1220;
    border-right: 1px solid #1f2937;
}

body.dark-mode .sidebar-header {
    background: linear-gradient(135deg,#0b1220,#111827);
}

body.dark-mode .sidebar a {
    color: #d1d5db;
    border-bottom: 1px solid #1f2937;
}

body.dark-mode .sidebar a:hover {
    background: #1d4ed8;
    color: #fff;
}

body.dark-mode .sidebar a i {
    color: #60a5fa;
}

body.dark-mode .sidebar .logout {
    color: #f87171;
}

body.dark-mode #overlay {
    background: rgba(0,0,0,.7);
}

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

body.dark-mode .product {
    background: #111827;
    box-shadow: 0 20px 50px rgba(0,0,0,.6);
}

body.dark-mode .title {
    color: #fff;
}

body.dark-mode .description {
    color: #cbd5e1;
}

body.dark-mode .price {
    color: #38bdf8;
}

body.dark-mode .main-image {
    background: #0b1220;
    border-color: #1f2937;
}

body.dark-mode .gallery img {
    border-color: #1f2937;
}
/* =========================
   DARK MODE LOGIN PAGE
========================= */

body.dark-mode {
    background: #0f172a;
}

/* CONTAINER */
body.dark-mode .container {
    background: #111827;
    box-shadow: 0 15px 40px rgba(0,0,0,.6);
}

/* LOGO */
body.dark-mode .logo h1 {
    color: #fff;
}

body.dark-mode .logo span {
    color: #38bdf8;
}

body.dark-mode .logo p {
    color: #94a3b8;
}

/* TITLE */
body.dark-mode h2 {
    color: #fff;
}

/* INPUT BOX */
body.dark-mode .input-group input {
    background: #0b1220;
    border: 2px solid #1f2937;
    color: #fff;
}

body.dark-mode .input-group input:focus {
    border-color: #38bdf8;
}

/* ICONS */
body.dark-mode .input-group i {
    color: #94a3b8;
}

/* BUTTON */
body.dark-mode .btn {
    background: linear-gradient(90deg,#0b1220,#1d4ed8);
}

body.dark-mode .btn:hover {
    box-shadow: 0 10px 25px rgba(56,189,248,.2);
}

/* MESSAGE ERROR */
body.dark-mode .message {
    background: #3b1d1d;
    color: #f87171;
}

/* REGISTER LINK */
body.dark-mode .register-link {
    color: #cbd5e1;
}

body.dark-mode .register-link a {
    color: #38bdf8;
}
/* ==========================
        DARK MODE ROOT
========================== */

body.dark-mode {
    background: #0f172a;
    color: #e5e7eb;
}

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

body.dark-mode .card {
    background: #111827;
    box-shadow: 0 10px 30px rgba(0,0,0,.6);
}

body.dark-mode .product {
    border-bottom: 1px solid #1f2937;
}

body.dark-mode .product-info h2 {
    color: #ffffff;
}

body.dark-mode .price {
    color: #60a5fa;
}

body.dark-mode p {
    color: #cbd5e1;
}

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

body.dark-mode input,
body.dark-mode textarea {
    background: #0b1220;
    border: 1px solid #334155;
    color: #e5e7eb;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #94a3b8;
}

/* ==========================
        BUTTONS
========================== */

body.dark-mode button {
    background: linear-gradient(135deg, #10b981, #059669);
}

body.dark-mode button:hover {
    background: #059669;
}

body.dark-mode .back {
    background: #2563eb;
}

body.dark-mode .back:hover {
    background: #1d4ed8;
}

/* ==========================
        SUCCESS / ERROR
========================== */

body.dark-mode .success {
    background: #064e3b;
    color: #34d399;
}

body.dark-mode .error {
    background: #450a0a;
    color: #f87171;
}
/* FORCE DARK MODE BACKGROUND */
body.dark-mode {
    background: #0f172a !important;
}

/* PRODUCT CARD */
body.dark-mode .product {
    background: #111827 !important;
}

/* TEXT */
body.dark-mode .title {
    color: #ffffff !important;
}

body.dark-mode .description {
    color: #cbd5e1 !important;
}

body.dark-mode .price {
    color: #60a5fa !important;
}

/* IMAGE BORDER */
body.dark-mode .main-image {
    background: #0b1220 !important;
}

body.dark-mode .gallery img {
    border: 2px solid #1f2937 !important;
}