/* ==========================================================================
   PD Wines & Spirits - Premium Design System (Modern Overrides)
   ========================================================================== */

:root {
  --color-bg-dark: #fbfbfd;
  --color-bg-card: #ffffff;
  --color-primary: #581825;
  --color-primary-light: #800020;
  --color-accent-gold: #cfa82b;
  --color-accent-gold-dark: #a98319;
  --color-accent-gold-light: #f5e9b3;
  --color-text-white: #1d1d1f;
  --color-text-gray: #6e6e73;
  --color-border: rgba(0, 0, 0, 0.08);
  --color-input-bg: rgba(0, 0, 0, 0.01);
  --color-input-border: rgba(0, 0, 0, 0.12);
  --color-nav-bg: rgba(251, 251, 253, 0.8);
}

.dark {
  --color-bg-dark: #070707;
  --color-bg-card: #121010;
  --color-primary: #581825;
  --color-primary-light: #800020;
  --color-accent-gold: #d4af37;
  --color-accent-gold-dark: #b89326;
  --color-accent-gold-light: #f1e29c;
  --color-text-white: #f5f5f7;
  --color-text-gray: #a1a1aa;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-input-bg: rgba(255, 255, 255, 0.02);
  --color-input-border: rgba(255, 255, 255, 0.08);
  --color-nav-bg: rgba(7, 7, 7, 0.8);
}

/* Global Reset Overrides */
body {
  background-color: var(--color-bg-dark) !important;
  color: var(--color-text-white) !important;
  font-family: 'Outfit', 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', Georgia, serif;
}

/* Gold Gradient Typography */
.text-gradient-gold {
  background: linear-gradient(135deg, #f1e29c 0%, #d4af37 50%, #aa820a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Burgundy Gradient Typography */
.text-gradient-burgundy {
  background: linear-gradient(135deg, #c93b54 0%, #800020 50%, #3b0f18 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Premium Navigation Glassmorphism */
.glass-nav {
  background: var(--color-nav-bg) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--color-border) !important;
}

/* Premium Card Wrapper with Sleek Glowing Borders */
.card-premium {
  background: var(--color-bg-card) !important;
  backdrop-filter: blur(10px);
  border: 1px solid var(--color-border) !important;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.card-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(800px circle at var(--mouse-x, 0) var(--mouse-y, 0), rgba(212, 175, 55, 0.06), transparent 40%);
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.card-premium:hover::before {
  opacity: 1;
}

.card-premium:hover {
  transform: translateY(-8px);
  border-color: rgba(212, 175, 55, 0.25);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8), 0 0 15px rgba(212, 175, 55, 0.05);
}

/* Premium Buttons */
.btn-gold {
  background: linear-gradient(135deg, var(--color-accent-gold) 0%, var(--color-accent-gold-dark) 100%) !important;
  color: #070707 !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  border: 1px solid var(--color-accent-gold) !important;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.15);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-gold:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 25px rgba(212, 175, 55, 0.35) !important;
  background: linear-gradient(135deg, var(--color-accent-gold-light) 0%, var(--color-accent-gold) 100%) !important;
}

.btn-outline-gold {
  background: transparent !important;
  color: var(--color-accent-gold) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  letter-spacing: 0.1em !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-outline-gold:hover {
  border-color: var(--color-accent-gold) !important;
  background: rgba(212, 175, 55, 0.05) !important;
  color: var(--color-accent-gold-light) !important;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.1);
}

.btn-burgundy {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%) !important;
  color: var(--color-text-white) !important;
  font-weight: 600 !important;
  border: 1px solid var(--color-primary-light) !important;
  transition: all 0.4s ease !important;
}

.btn-burgundy:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(88, 24, 37, 0.4) !important;
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%) !important;
}

/* Premium Glowing Inputs */
input, select, textarea {
  background-color: var(--color-input-bg) !important;
  border: 1px solid var(--color-input-border) !important;
  color: var(--color-text-white) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--color-accent-gold) !important;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.15) !important;
  background-color: var(--color-input-bg) !important;
}

/* Luxury Custom Scrollbar */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: #070707;
}

::-webkit-scrollbar-thumb {
  background: #222;
  border-radius: 99px;
  border: 1px solid #111;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent-gold);
}

/* Cart slide-out style */
.cart-drawer {
  position: fixed;
  top: 0;
  right: -450px;
  width: 450px;
  max-width: 100%;
  height: 100%;
  background-color: var(--color-bg-card) !important;
  box-shadow: -15px 0 45px rgba(0,0,0,0.9);
  transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 100;
  border-left: 1px solid var(--color-border) !important;
}

.cart-drawer.open {
  right: 0;
}

.cart-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.75);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 99;
  backdrop-filter: blur(8px);
}

.cart-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* Custom premium hover underline animation */
.hover-underline {
  position: relative;
}

.hover-underline::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1px;
  bottom: -4px;
  left: 0;
  background-color: var(--color-accent-gold);
  transform-origin: bottom right;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.hover-underline:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* Fine border details */
.border-gold-fade {
  border-color: rgba(212, 175, 55, 0.15);
}

.bg-gold-glow {
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.15);
}

/* ==========================================================================
   Light Mode Overrides for Admin Dashboard
   ========================================================================== */
html:not(.dark) body.flex {
  background-color: #f4f4f7 !important;
  color: #1d1d1f !important;
}

html:not(.dark) aside.bg-zinc-950 {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
}

html:not(.dark) aside a {
  color: #555559 !important;
}

html:not(.dark) aside a:hover {
  background-color: #f4f4f7 !important;
  color: #cfa82b !important;
}

html:not(.dark) aside .text-white {
  color: #1d1d1f !important;
}

html:not(.dark) .bg-zinc-950,
html:not(.dark) .bg-zinc-900 {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
}

html:not(.dark) .border-zinc-800,
html:not(.dark) .border-zinc-900 {
  border-color: #e5e7eb !important;
}

html:not(.dark) .text-white {
  color: #1d1d1f !important;
}

html:not(.dark) .text-zinc-400,
html:not(.dark) .text-zinc-550,
html:not(.dark) .text-zinc-500 {
  color: #555559 !important;
}

html:not(.dark) input,
html:not(.dark) select,
html:not(.dark) textarea {
  background-color: #ffffff !important;
  border-color: #d1d5db !important;
  color: #1d1d1f !important;
}

html:not(.dark) table {
  border-color: #e5e7eb !important;
}

html:not(.dark) table tr {
  border-color: #e5e7eb !important;
}

html:not(.dark) table tr:hover {
  background-color: #f9fafb !important;
}

html:not(.dark) table td {
  color: #1d1d1f !important;
}

html:not(.dark) table th {
  color: #6e6e73 !important;
  border-color: #e5e7eb !important;
}