* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  
}

:root {
  --color-primary: #04846c;
  --color-accent: #FFC107;
  --color-modal-bg: #04846c;
  --dm-bg: #0f1419;
  --dm-surface: #1a2229;
  --dm-elevated: #232d36;
  --dm-border: #2d3a45;
  --dm-text: #e8ecf0;
  --dm-muted: #8b99a6;
  --dm-accent: #f59e0b;
  --dm-primary: #0d9488;
  --dm-link: #38bdf8;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: Arial, sans-serif;
  background-color: #FFF6EA;
  
}

 .user-icon{
    max-height: 40px;  /* Image stays within navbar height */
  width: auto;    /* keeps proportions */
   
}

/* ========== GLOBAL DARK MODE (Harmonized) ========== */
body.dark,
html.dark body {
    background-color: var(--dm-bg) !important;
    color: var(--dm-text) !important;
}

body.dark nav,
html.dark nav {
    background-color: #0a1614 !important;
    border-bottom: 1px solid var(--dm-border);
}

body.dark nav .nav-links a, html.dark nav .nav-links a { color: #b8e0dc !important; }
body.dark nav .nav-links a:hover, html.dark nav .nav-links a:hover { color: var(--dm-accent) !important; }
body.dark #contact_bg, html.dark #contact_bg { background-color: var(--dm-accent) !important; color: #1a1a1a !important; }

body.dark .bg-white,
html.dark .bg-white,
body.dark .product-card, html.dark .product-card,
body.dark .checkout-card, html.dark .checkout-card,
body.dark .modal-content, html.dark .modal-content,
body.dark .modal-box, html.dark .modal-box,
body.dark .purchases-container, html.dark .purchases-container,
body.dark .order-box, html.dark .order-box,
body.dark .vip-card, html.dark .vip-card,
body.dark .main-panel, html.dark .main-panel,
body.dark .sidebar, html.dark .sidebar,
body.dark .checkout-section, html.dark .checkout-section,
body.dark .products-ordered-section, html.dark .products-ordered-section {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

body.dark .banner, html.dark .banner, body.dark .preview, html.dark .preview,
body.dark .services-section, html.dark .services-section, body.dark .about, html.dark .about,
body.dark .mission_vision, html.dark .mission_vision, body.dark .partners, html.dark .partners,
body.dark .awards, html.dark .awards, body.dark .contact-container, html.dark .contact-container,
body.dark section, html.dark section {
    background-color: var(--dm-bg) !important;
    color: var(--dm-text) !important;
}

body.dark .banner_name h1, html.dark .banner_name h1, body.dark h1, html.dark h1, body.dark h2, html.dark h2, body.dark h3, html.dark h3 { color: var(--dm-text) !important; }
body.dark .banner_name h3, html.dark .banner_name h3, body.dark .quote-text, html.dark .quote-text { color: var(--dm-muted) !important; }
body.dark .product-price, html.dark .product-price, body.dark .product-name, html.dark .product-name { color: var(--dm-text) !important; }
body.dark .add-to-cart-btn, html.dark .add-to-cart-btn { background-color: var(--dm-primary) !important; color: white !important; }
body.dark .add-to-cart-btn:hover, html.dark .add-to-cart-btn:hover { background-color: #0f766e !important; }

body.dark input, body.dark select, body.dark textarea,
html.dark input, html.dark select, html.dark textarea {
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

body.dark table tbody tr, html.dark table tbody tr { background-color: var(--dm-surface) !important; color: var(--dm-muted) !important; border-color: var(--dm-border) !important; }
body.dark table thead th, html.dark table thead th { background-color: var(--dm-primary) !important; color: white !important; border-color: var(--dm-border) !important; }
body.dark .cart-table-section th, html.dark .cart-table-section th { background-color: var(--dm-elevated) !important; }

body.dark .site-footer, html.dark .site-footer { background-color: #0a1614 !important; color: var(--dm-muted) !important; border-top: 1px solid var(--dm-border); }
body.dark .site-footer h3, html.dark .site-footer h3 { color: var(--dm-text) !important; }
body.dark .site-footer a, html.dark .site-footer a { color: var(--dm-link) !important; }

body.dark .place-order-btn, html.dark .place-order-btn, body.dark .checkout-btn, html.dark .checkout-btn { background-color: var(--dm-accent) !important; color: #1a1a1a !important; }
body.dark .btn-save, html.dark .btn-save { background-color: var(--dm-primary) !important; color: white !important; }
body.dark .change-btn, html.dark .change-btn { color: var(--dm-accent) !important; }

body.dark .tabs, html.dark .tabs { border-color: var(--dm-border); }
body.dark .tab, html.dark .tab { color: var(--dm-muted); }
body.dark .tab.active, html.dark .tab.active { color: var(--dm-accent); border-color: var(--dm-accent); }
body.dark .order-id, html.dark .order-id { color: var(--dm-text) !important; }

body.dark .checkout-main, html.dark .checkout-main, body.dark .checkout-card, html.dark .checkout-card, body.dark main, html.dark main { background-color: var(--dm-bg) !important; }
body.dark .summary-row, html.dark .summary-row, body.dark .section-content, html.dark .section-content { color: var(--dm-muted) !important; }
body.dark .total-payment, html.dark .total-payment { color: var(--dm-accent) !important; }
body.dark .modal-overlay, html.dark .modal-overlay { background: rgba(0,0,0,0.7) !important; }

body.dark .dark-mode-float, html.dark .dark-mode-float { background: var(--dm-surface) !important; border: 1px solid var(--dm-border); box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important; }

/* Admin pages */
body.dark .main, html.dark .main,
body.dark .bg-white.rounded-xl, html.dark .bg-white.rounded-xl,
body.dark [class*="bg-white"] { background-color: var(--dm-surface) !important; color: var(--dm-text) !important; }
body.dark .sidebar, html.dark .sidebar { background-color: #0a1614 !important; }
body.dark .text-gray-800, html.dark .text-gray-800 { color: var(--dm-text) !important; }
body.dark .text-gray-500, html.dark .text-gray-500 { color: var(--dm-muted) !important; }
body.dark .text-gray-600, html.dark .text-gray-600 { color: var(--dm-muted) !important; }
body.dark .border-gray-200, html.dark .border-gray-200,
body.dark .border-gray-100, html.dark .border-gray-100 { border-color: var(--dm-border) !important; }
body.dark .bg-gray-50, html.dark .bg-gray-50 { background-color: var(--dm-elevated) !important; }

/* --- TOGGLE SWITCH STYLES --- */
.switch {
    position: relative;
    width: 50px;
    height: 26px;
    background-color: #ccc;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s;
}

/* The Circle Knob */
.switch .knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Active State (Green) */
.switch.on {
    background-color: #1c604b; /* Primary Color */
}

/* Move Knob when active */
.switch.on .knob {
    transform: translateX(24px);
}

/* Dark Mode adjustments for the switch itself */
body.dark .switch, html.dark .switch {
    background-color: var(--dm-border);
}
body.dark .switch.on, html.dark .switch.on {
    background-color: var(--dm-primary);
}

@font-face {
  font-family: 'Poppins';
  src: url('../FONTS/Poppins/Poppins-Black.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Roca2';
  src: url('../FONTS/roca-two-bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}