/* ═══════════════════════════════════════════════════════════════
   Lavadangka — Dark Pink Main Theme with Dark Purple Accents
   Primary:  #d1187e  (dark pink / magenta)
   Accent:   #6c0dad  (deep purple)
   Dark bg:  #1a0a2e  (near-black purple)
   ═══════════════════════════════════════════════════════════════ */

:root {
  --pink:         #d1187e;
  --pink-dark:    #a81265;
  --pink-light:   #f06ead;
  --pink-bg:      #fde8f3;
  --pink-mid:     #8b0a50;

  --purple:       #6c0dad;
  --purple-dark:  #520a88;
  --purple-light: #9b3dd6;
  --purple-bg:    #f4edfb;
  --purple-mid:   #2d0a5a;

  --dark-bg:      #1a0a2e;
  --grad:         linear-gradient(135deg, #1a0a2e 0%, #4a0a3a 50%, #7a0a5a 100%);
  --grad-btn:     linear-gradient(135deg, #d1187e, #a81265);
  --grad-soft:    linear-gradient(135deg, #fde8f3 0%, #f4edfb 100%);

  --border:       #f0c0e0;
  --text-muted:   #6c757d;
}

* { box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; color: #1a1a1a; }

/* ─── Topbar ──────────────────────────────────── */
.topbar { background: var(--dark-bg); color: var(--pink-light); font-size: 13px; }

/* ─── Navbar ──────────────────────────────────── */
.navbar { background: white !important; border-bottom: 2px solid var(--pink) !important; }
.nav-link { color: #333 !important; font-weight: 500; transition: color .2s; }
.nav-link:hover { color: var(--pink) !important; }
.badge-pill-cart {
  position: absolute; top: -5px; right: -8px;
  font-size: 10px; width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}

/* ─── Hero ────────────────────────────────────── */
.hero-section {
  position: relative; min-height: 480px;
  display: flex; align-items: center; overflow: hidden;
  background: var(--grad);
}
.hero-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .2; }
.hero-content { position: relative; z-index: 2; width: 100%; color: white; }
@media(max-width:768px) {
  .hero-section { min-height: 320px; }
  .hero-content h1 { font-size: 1.6rem !important; }
}

/* ─── Feature strip ───────────────────────────── */
.feature-strip { background: linear-gradient(90deg, #1a0a2e, #6b0a4a, #d1187e); }

/* ─── Buttons ─────────────────────────────────── */
.btn-dark {
  background: var(--pink) !important;
  border-color: var(--pink) !important;
  color: white !important;
}
.btn-dark:hover {
  background: var(--pink-dark) !important;
  border-color: var(--pink-dark) !important;
}
.btn-outline-dark {
  border-color: var(--pink) !important;
  color: var(--pink) !important;
}
.btn-outline-dark:hover {
  background: var(--pink) !important;
  color: white !important;
  border-color: var(--pink) !important;
}
.btn { border-radius: 8px; font-weight: 500; }

/* ─── Product Cards ────────────────────────────── */
.product-card { transition: transform .25s, box-shadow .25s; border-radius: 12px !important; overflow: hidden; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 14px 36px rgba(209,24,126,.18) !important; }
.product-thumb { width: 100%; height: 220px; object-fit: cover; transition: transform .3s; }
.product-thumb-placeholder { height: 220px; background: var(--pink-bg); }
.product-img-wrap:hover .product-thumb { transform: scale(1.05); }
.product-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(209,24,126,.92);
  padding: 10px; transform: translateY(100%); transition: transform .25s;
}
.product-img-wrap:hover .product-overlay { transform: translateY(0); }
.product-name { font-size: .9rem; font-weight: 500; line-height: 1.4; }
@media(max-width:576px) {
  .product-thumb, .product-thumb-placeholder { height: 165px; }
  .product-name { font-size: .82rem; }
}

/* ─── Order Status Badges ───────────────────────── */
.status-pending          { background:#fff3cd; color:#856404;  border-radius:20px; padding:4px 12px; font-size:.8rem; font-weight:600; }
.status-confirmed        { background:#fde8f3; color:#8b0a50;  border-radius:20px; padding:4px 12px; font-size:.8rem; font-weight:600; }
.status-processing       { background:#d4edda; color:#155724;  border-radius:20px; padding:4px 12px; font-size:.8rem; font-weight:600; }
.status-shipped          { background:#e8d5f7; color:#520a88;  border-radius:20px; padding:4px 12px; font-size:.8rem; font-weight:600; }
.status-out_for_delivery { background:#ffd6a5; color:#7a4100;  border-radius:20px; padding:4px 12px; font-size:.8rem; font-weight:600; }
.status-delivered        { background:#d1fae5; color:#065f46;  border-radius:20px; padding:4px 12px; font-size:.8rem; font-weight:600; }
.status-cancelled        { background:#fee2e2; color:#991b1b;  border-radius:20px; padding:4px 12px; font-size:.8rem; font-weight:600; }
.status-returned         { background:#f3f4f6; color:#374151;  border-radius:20px; padding:4px 12px; font-size:.8rem; font-weight:600; }

/* ─── Admin Sidebar ─────────────────────────────── */
.admin-sidebar { background: var(--dark-bg) !important; }
.admin-sidebar .nav-link {
  color: #e8b8d8 !important; border-radius: 8px;
  margin: 1px 8px; padding: 8px 12px; font-size: .88rem;
  transition: background .2s, color .2s;
}
.admin-sidebar .nav-link:hover { background: rgba(209,24,126,.25) !important; color: #ffc8e8 !important; }
.admin-sidebar .nav-link.active { background: var(--pink) !important; color: white !important; }

/* ─── Cards ─────────────────────────────────────── */
.card { border-radius: 12px !important; }
.shadow-sm { box-shadow: 0 2px 10px rgba(209,24,126,.09) !important; }
.table-light { background: var(--pink-bg) !important; }

/* ─── Forms ─────────────────────────────────────── */
.form-control, .form-select { border-radius: 8px; border-color: #e8c0d8; padding: .55rem .85rem; }
.form-control:focus, .form-select:focus { border-color: var(--pink); box-shadow: 0 0 0 .2rem rgba(209,24,126,.18); }

/* ─── Tables ─────────────────────────────────────── */
.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); font-weight: 600; border: none; }
.table td { vertical-align: middle; font-size: .9rem; }

/* ─── Timeline dot ──────────────────────────────── */
.timeline-dot { width: 10px; height: 10px; background: var(--pink); border-radius: 50%; flex-shrink: 0; margin-top: 4px; }

/* ─── Links ─────────────────────────────────────── */
a { color: var(--pink); }
a:hover { color: var(--pink-dark); }
.text-dark { color: #1a0a2e !important; }

/* ─── Dropdown ──────────────────────────────────── */
.dropdown-item:hover, .dropdown-item:focus { background: var(--pink-bg); color: var(--pink); }

/* ─── Nav tabs ──────────────────────────────────── */
.nav-tabs .nav-link.active { color: var(--pink) !important; border-color: var(--pink) transparent transparent !important; font-weight: 600; }
.nav-tabs .nav-link { color: #666; }
.nav-tabs .nav-link:hover { color: var(--pink); }

/* ─── Alerts ─────────────────────────────────────── */
.alert-success { background: #fde8f3; border-color: var(--pink-light); color: #8b0050; }

/* ─── Badges ─────────────────────────────────────── */
.bg-danger { background-color: var(--pink) !important; }

/* ─── Site notification bar ─────────────────────── */
.site-notification-bar { font-size: 13px; font-weight: 500; }

/* ─── Chat buttons ───────────────────────────────── */
.chat-btn {
  position: fixed; bottom: 24px; width: 52px; height: 52px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: white; text-decoration: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.25); transition: transform .2s, box-shadow .2s; z-index: 1050;
}
.chat-btn:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(0,0,0,.3); color: white; }
.whatsapp-btn  { right: 24px; background: #25D366; }
.messenger-btn { right: 86px; background: #0084ff; }

/* ─── Product detail ────────────────────────────── */
.product-detail-img { max-height: 480px; overflow: hidden; }
.product-detail-img img { width: 100%; object-fit: cover; }

/* ─── Pre-order / promo ─────────────────────────── */
.preorder-section { background: var(--grad-soft); }
.promo-strip { background: linear-gradient(90deg, var(--purple-mid), var(--pink-dark)); color: white; }

/* ─── Section accent ────────────────────────────── */
.section-header h2::after { content:''; display:block; width:50px; height:3px; background:var(--pink); margin-top:8px; border-radius:2px; }

/* ─── Utilities ─────────────────────────────────── */
.letter-spacing { letter-spacing: 1px; }
.bg-pink    { background: var(--pink) !important; }
.bg-purple  { background: var(--purple) !important; }
.text-pink  { color: var(--pink) !important; }
.text-purple{ color: var(--purple) !important; }
.text-gradient {
  background: linear-gradient(90deg, var(--pink), var(--purple-light));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ─── Responsive ─────────────────────────────────── */
@media(max-width:576px) {
  .container { padding: 0 12px; }
  h2 { font-size: 1.3rem; }
  .card-body { padding: 1rem !important; }
  .btn-lg { padding: .6rem 1.2rem; font-size: .95rem; }
}