/* ============================================================
ITHALVERSE - Main Stylesheet (Dynamic Color System)
All colors are controlled by CSS variables set via admin settings.
============================================================ */

:root {
  /* Default: Premium Black & Gold palette */
  --primary:        #d4af37;
  --secondary:      #f1c40f;
  --accent:         #c0392b;
  --bg-color:       #000000;
  --text:           #f5f3ec;
  --header-bg:      #050608;
  --nav-bg:         #050608;
  --footer-bg:      #050608;
  --card-bg:        #050505;
  --btn-text:       #000000;
  --text-muted:     #b3a57a;
  --border:         #2c2c2c;
  --link-hover:     #d4af37;
  --section-bg:     #000000;

  /* Legacy aliases */
  --dark:       #050608;
  --light-bg:   #111111;

  --shadow:       0 2px 15px rgba(0,0,0,.7);
  --shadow-hover: 0 10px 30px rgba(0,0,0,.8);
  --radius:       12px;
  --radius-sm:    8px;
  --transition:   all .25s ease;
}

/* Base reset */
* { box-sizing: border-box; }
body {
  font-family: 'Poppins', sans-serif;
  color: var(--text);
  background: var(--bg-color);
  line-height: 1.6;
}
a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}
img { max-width: 100%; }

/* ====== TOP BAR ====== */
.top-bar {
  background: var(--header-bg);
  color: rgba(255,255,255,.9);
  padding: 6px 0;
  font-size: 12px;
}
.top-bar a { color: rgba(255,255,255,.9); }
.top-bar a:hover { color: #ffffff; }

/* ====== HEADER ====== */
.main-header {
  background: var(--header-bg);
  box-shadow: 0 2px 20px rgba(0,0,0,.6);
  z-index: 500;
  border-bottom: 2px solid var(--primary);
}
.text-logo {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--primary);
}

/* Search */
.search-form .form-control {
  border-radius: 25px 0 0 25px;
  border: 2px solid var(--border);
  padding: 10px 20px;
  font-size: 14px;
  background: var(--bg-color);
  color: var(--text);
}
.search-form .form-control::placeholder { color: var(--text-muted); }
.search-form .form-control:focus {
  border-color: var(--primary);
  box-shadow: none;
}
.btn-search {
  background: var(--primary);
  color: var(--btn-text);
  border-radius: 0 25px 25px 0;
  border: 2px solid var(--primary);
  padding: 10px 20px;
}
.btn-search:hover {
  background: var(--secondary);
  border-color: var(--secondary);
  color: var(--btn-text);
}

/* Header Icons */
.icon-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--card-bg);
  border: 1px solid var(--border);
  cursor: pointer; font-size: 18px;
  color: var(--text);
  transition: var(--transition);
  position: relative; text-decoration: none;
}
.icon-btn:hover {
  background: var(--primary);
  color: var(--btn-text);
  border-color: var(--primary);
}
.cart-badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 700;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.whatsapp-btn { background: #25d366; color: #fff; }
.whatsapp-btn:hover { background: #128c7e; color: #fff; }

/* ====== NAVIGATION ====== */
.main-nav {
  background: var(--nav-bg);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 2px solid var(--primary);
}
.nav-menu { list-style:none; margin:0; padding:0; display:flex; align-items:center; }
.nav-menu > li { position: relative; }
.nav-menu > li > a {
  display: block; padding: 12px 18px;
  color: rgba(255,255,255,.9); font-size: 14px; font-weight: 500;
  transition: var(--transition);
}
.nav-menu > li > a:hover,
.nav-menu > li > a:focus { color: var(--primary); }
.whatsapp-nav { color: #a8e6cf !important; }
.whatsapp-nav:hover { color: #ffffff !important; }

/* Mega Dropdown */
.has-dropdown { position: relative; }
.dropdown-mega {
  position: absolute; top: 100%; left: 0;
  background: var(--header-bg); min-width: 450px; padding: 20px;
  box-shadow: var(--shadow-hover);
  border-radius: 0 0 var(--radius) var(--radius);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: var(--transition); z-index: 999;
  border: 1px solid var(--border);
}
.has-dropdown:hover .dropdown-mega { opacity:1; visibility:visible; transform:translateY(0); }
.dropdown-mega a { color: var(--text); font-size: 13px; padding: 6px 8px; border-radius: 6px; display: flex; align-items: center; }
.dropdown-mega a:hover { background: var(--card-bg); color: var(--primary); }

/* Mobile Nav */
.mobile-nav { padding: 0; }
.mobile-nav li a { display:block; padding:12px 0; border-bottom:1px solid var(--border); font-size:15px; color:var(--text); }
.mobile-nav li a:hover { color: var(--primary); }
.social-links a { color: var(--text-muted); font-size: 20px; }
.social-links a:hover { color: var(--link-hover); }
.social-links a.whatsapp { color: #25d366; }

/* ====== BANNER SLIDER ====== */
.hero-slider {
  background: var(--bg-color);
  border-top: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
}
.banner-swiper { max-height: 550px; }
.banner-img-wrap { overflow:hidden; position:relative; }
.banner-img { width:100%; height:550px; object-fit:cover; object-position:top center; display:block; }
@media (max-width: 768px) { .banner-img { height:220px; } .banner-swiper { max-height:220px; } }
.banner-caption { position:absolute; bottom:20px; left:30px; color:#fff; }
.banner-caption h2 { font-size:28px; font-weight:700; text-shadow:0 2px 10px rgba(0,0,0,.5); }
.swiper-button-prev,.swiper-button-next { color:#fff; background:rgba(0,0,0,.6); width:40px; height:40px; border-radius:50%; }
.swiper-button-prev::after,.swiper-button-next::after { font-size:16px; }
.swiper-pagination-bullet-active { background: var(--primary); }

/* ====== SECTIONS ====== */
.section { padding: 50px 0; background: var(--section-bg); }
.section.bg-light { background: color-mix(in srgb, var(--section-bg) 90%, #fff 10%); }
.section-title {
  font-family: 'Playfair Display', serif;
  font-size: 28px; font-weight: 700; color: var(--text); position: relative;
}
.section-title::after { content:''; display:block; width:50px; height:3px; background:var(--primary); margin-top:8px; }
.view-all-btn {
  color: var(--btn-text); font-weight:600; font-size:14px;
  border: 2px solid var(--primary); border-radius:20px; padding:6px 16px;
  background: var(--primary); transition: var(--transition);
}
.view-all-btn:hover { background:var(--secondary); border-color:var(--secondary); color:var(--btn-text); }

/* ====== CATEGORY CARDS ====== */
.category-card { transition: var(--transition); }
.category-card:hover { transform: translateY(-4px); }
.cat-img-wrap {
  width:80px; height:80px; border-radius:50%; overflow:hidden;
  border:3px solid var(--border); margin:0 auto 8px;
  transition: var(--transition); background: var(--card-bg);
}
@media (max-width: 576px) { .cat-img-wrap { width:65px; height:65px; } }
.category-card:hover .cat-img-wrap { border-color: var(--primary); }
.cat-img-wrap img { width:100%; height:100%; object-fit:cover; }
.cat-placeholder { width:100%; height:100%; background:var(--card-bg); display:flex; align-items:center; justify-content:center; font-size:24px; color:var(--text-muted); }
.cat-name { font-size:12px; font-weight:600; color:var(--text); margin:0; }

/* ====== PRODUCT CARD ====== */
.product-card {
  background: var(--card-bg); border-radius: var(--radius); overflow:hidden;
  box-shadow: var(--shadow); transition: var(--transition);
  position:relative; height:100%; display:flex; flex-direction:column;
  border: 1px solid var(--border);
}
.product-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.product-img-wrap { position:relative; overflow:hidden; padding-top:100%; }
.product-img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.product-img-hover { opacity:0; transition:opacity .4s ease, transform .4s ease; }
.product-card:hover .product-img:not(.product-img-hover) { opacity:0; }
.product-card:hover .product-img-hover { opacity:1; }
.product-card:hover .product-img { transform:scale(1.05); }

.badge-discount,.badge-new {
  position:absolute; top:10px; left:10px;
  background:var(--accent); color:#fff;
  font-size:11px; font-weight:700; padding:3px 8px; border-radius:4px; z-index:1;
}
.badge-new { left:auto; right:10px; background:var(--primary); color:var(--btn-text); }

.product-info { padding:12px; flex:1; display:flex; flex-direction:column; color:var(--text); }
.product-cat { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
.product-name { font-size:13px; font-weight:600; margin-bottom:8px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:var(--text); }
.product-name a:hover { color: var(--primary); }
.product-price { margin-bottom:10px; }
.price-current { font-size:16px; font-weight:700; color:var(--primary); }
.price-original { font-size:13px; color:var(--text-muted); text-decoration:line-through; margin-left:6px; }

.btn-add-cart {
  background: var(--primary); color: var(--btn-text);
  border:none; border-radius:6px; padding:8px 12px;
  font-size:12px; font-weight:600; width:100%; transition:var(--transition); margin-top:auto;
}
.btn-add-cart:hover { background:var(--secondary); color:var(--btn-text); }
.btn-add-cart.out-of-stock { background:#555555; cursor:not-allowed; color:#cccccc; }

/* ====== WHATSAPP STRIP ====== */
.whatsapp-strip {
  background: linear-gradient(135deg, var(--bg-color), var(--header-bg));
  color: var(--text); padding:50px 0;
}
.whatsapp-strip h3 { font-size:28px; font-weight:700; color:var(--text); }
.btn-whatsapp {
  background:#25d366; color:#fff; border:none; border-radius:30px;
  padding:12px 30px; font-size:16px; font-weight:600;
  display:inline-flex; align-items:center; gap:8px; transition:var(--transition);
}
.btn-whatsapp:hover { background:#128c7e; color:#fff; transform:scale(1.03); }

/* ====== FEATURES STRIP ====== */
.feature-item { padding:25px 15px; color:var(--text); }
.feature-icon { font-size:36px; color:var(--primary); display:block; margin-bottom:10px; }
.feature-item h6 { font-weight:700; margin-bottom:5px; }

/* ====== PRODUCT DETAIL ====== */
.product-gallery .main-image-wrap { position:relative; border-radius:var(--radius); overflow:hidden; background:var(--card-bg); }
.main-image { width:100%; object-fit:cover; max-height:500px; }
.badge-discount-lg { position:absolute; top:15px; left:15px; background:var(--accent); color:#fff; font-size:14px; font-weight:700; padding:6px 14px; border-radius:6px; }
.thumb-img { width:70px; height:70px; object-fit:cover; border-radius:8px; border:2px solid var(--border); cursor:pointer; transition:var(--transition); }
.thumb-img:hover,.thumb-img.active { border-color:var(--primary); }
.product-detail-title { font-family:'Playfair Display',serif; font-size:26px; font-weight:700; color:var(--text); }
.price-lg { font-size:28px; font-weight:700; color:var(--primary); }
.price-original-lg { font-size:18px; color:var(--text-muted); text-decoration:line-through; margin-left:8px; }
.product-short-desc { color:var(--text-muted); line-height:1.8; }

/* Variant Options */
.variant-options { display:flex; flex-wrap:wrap; gap:8px; }
.variant-option { display:flex; align-items:center; gap:6px; cursor:pointer; }
.variant-option input { display:none; }
.variant-label { border:2px solid var(--border); border-radius:6px; padding:6px 14px; font-size:13px; font-weight:500; transition:var(--transition); background:var(--bg-color); color:var(--text); }
.variant-option input:checked ~ .variant-label { border-color:var(--primary); background:var(--primary); color:var(--btn-text); }

/* Qty Selector */
.qty-selector { display:flex; align-items:center; border:2px solid var(--border); border-radius:8px; overflow:hidden; width:fit-content; background:var(--bg-color); }
.qty-btn { width:36px; height:36px; background:var(--card-bg); border:none; font-size:16px; cursor:pointer; transition:var(--transition); color:var(--text); }
.qty-btn:hover { background:var(--primary); color:var(--btn-text); }
.qty-input { width:50px; text-align:center; border:none; outline:none; font-size:15px; font-weight:600; background:transparent; color:var(--text); }

/* Payment Options */
.payment-option { display:flex; align-items:center; gap:12px; padding:15px; border:2px solid var(--border); border-radius:10px; margin-bottom:12px; cursor:pointer; transition:var(--transition); background:var(--card-bg); }
.payment-option:hover { border-color:var(--primary); }
.payment-option input[type=radio]:checked ~ span { color:var(--primary); font-weight:600; }
.payment-option:has(input:checked) { border-color:var(--primary); }

/* ====== CART ====== */
.cart-items-container { background:var(--card-bg); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; border:1px solid var(--border); }
.cart-item { padding:15px 0; border-bottom:1px solid var(--border); }
.cart-item:last-child { border-bottom:none; }
.cart-thumb { width:70px; height:70px; object-fit:cover; border-radius:8px; }
.cart-summary { background:var(--card-bg); border-radius:var(--radius); box-shadow:var(--shadow); padding:25px; position:sticky; top:100px; border:1px solid var(--primary); }

/* ====== CHECKOUT ====== */
.checkout-box { background:var(--card-bg); border-radius:var(--radius); box-shadow:var(--shadow); padding:25px; border:1px solid var(--border); }

/* ====== ORDER SUCCESS ====== */
.success-circle { width:90px; height:90px; border-radius:50%; background:#d4edda; color:#155724; font-size:45px; display:flex; align-items:center; justify-content:center; margin:0 auto; }
.order-detail-box { background:var(--card-bg); border-radius:var(--radius); box-shadow:var(--shadow); padding:25px; border:1px solid var(--border); }

/* ====== FILTER SIDEBAR ====== */
.filter-sidebar { background:var(--card-bg); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; border:1px solid var(--border); }
.filter-heading { font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text); margin-bottom:12px; padding-bottom:8px; border-bottom:2px solid var(--border); }
.filter-list { list-style:none; padding:0; margin:0; }
.filter-list li a { display:flex; justify-content:space-between; padding:7px 0; font-size:14px; color:var(--text); border-bottom:1px dashed var(--border); transition:var(--transition); }
.filter-list li a:hover,.filter-list li a.active { color:var(--primary); font-weight:600; }
.filter-list li a span { background:var(--card-bg); border-radius:10px; padding:1px 8px; font-size:11px; }

/* ====== FOOTER ====== */
.main-footer { background:var(--footer-bg); color:rgba(255,255,255,.92); padding:50px 0 20px; border-top:2px solid var(--primary); }
.footer-heading { color:#fff; font-weight:700; font-size:15px; margin-bottom:15px; padding-bottom:10px; border-bottom:2px solid var(--primary); display:inline-block; }
.footer-info { font-size:13px; margin-bottom:8px; color:rgba(255,255,255,.92); }
.footer-info a { color:rgba(255,255,255,.95); }
.footer-info a:hover { color:#fff; }
.footer-links { list-style:none; padding:0; }
.footer-links li a { display:block; color:rgba(255,255,255,.92); font-size:13px; padding:4px 0; transition:var(--transition); }
.footer-links li a:hover { color:#fff; padding-left:5px; }
.main-footer .social-links a { color:rgba(255,255,255,.95); margin-right:12px; font-size:20px; }
.main-footer .social-links a:hover { color:var(--link-hover); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); }
.whatsapp-float-btn { background:#25d366; color:#fff; border-radius:25px; padding:10px 20px; font-size:14px; font-weight:600; display:inline-flex; align-items:center; gap:8px; }
.whatsapp-float-btn:hover { background:#128c7e; color:#fff; }
.footer-admin-btn { display:inline-block; margin-left:8px; padding:10px 20px; border-radius:25px; background:var(--secondary); color:var(--btn-text) !important; font-size:14px; font-weight:600; text-decoration:none !important; border:none; box-shadow:0 4px 14px rgba(0,0,0,.18); transition:var(--transition); }
.footer-admin-btn:hover { background:var(--primary); color:var(--btn-text) !important; transform:translateY(-2px); }

/* Footer text visibility */
footer.main-footer,
footer.main-footer p,
footer.main-footer small,
footer.main-footer .text-muted,
footer.main-footer .footer-info,
footer.main-footer .footer-info a,
footer.main-footer .footer-bottom small,
footer.main-footer .footer-bottom .text-muted {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* ====== FLOATING ELEMENTS ====== */
.whatsapp-floating { position:fixed; bottom:80px; right:25px; width:55px; height:55px; background:#25d366; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:28px; color:#fff; box-shadow:0 4px 20px rgba(37,211,102,.4); z-index:9998; animation:pulse 2s infinite; }
.whatsapp-floating:hover { background:#128c7e; color:#fff; transform:scale(1.1); }
@keyframes pulse { 0%,100%{box-shadow:0 4px 20px rgba(37,211,102,.4);}50%{box-shadow:0 4px 30px rgba(37,211,102,.7);} }
.back-to-top { position:fixed; bottom:25px; right:25px; width:42px; height:42px; background:var(--primary); color:var(--btn-text); border:none; border-radius:50%; font-size:18px; cursor:pointer; display:none; z-index:9997; box-shadow:var(--shadow); transition:var(--transition); }
.back-to-top:hover { background:var(--secondary); color:var(--btn-text); transform:translateY(-3px); }

/* ====== BREADCRUMB ====== */
.breadcrumb { font-size:13px; }
.breadcrumb-item a { color:var(--primary); }

/* ====== PAGINATION ====== */
.page-link { color:var(--primary); border-radius:6px !important; margin:0 2px; background:var(--card-bg); border-color:var(--border); }
.page-item.active .page-link { background:var(--primary); color:var(--btn-text); border-color:var(--primary); }
.page-link:hover { background:var(--secondary); color:var(--btn-text); border-color:var(--secondary); }

/* ====== FORM CONTROLS ====== */
.form-control, .form-select {
  background: var(--card-bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--primary), .15) !important;
}
.form-control::placeholder { color: var(--text-muted) !important; }

/* ====== OFFCANVAS ====== */
.offcanvas { background: var(--card-bg) !important; color: var(--text); }

/* ====== ALERTS / BADGES ====== */
.alert-success { background: #d4edda; border-color:#c3e6cb; color:#155724; }