/* ================================================
   LUMI — Global Design System
   Luxury Candle Brand | style.css
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&family=Jost:wght@300;400;500;600&display=swap');

/* === CSS CUSTOM PROPERTIES === */
:root {
  --bg-dark:       #0e1416;
  --bg-surface:    #162024;
  --bg-card:       #1b272c;
  --navy-accent:   #001b48;
  --navy-hover:    #002b75;
  --navy-light:    rgba(0, 27, 72, 0.45);

  --cream:        #0e1416;
  --ivory:        #162024;
  --beige:        #1f2d34;
  --beige-dark:   #2a3e48;
  --gold:         #001b48;
  --gold-dark:    #4b83e6;
  --gold-light:   rgba(0, 27, 72, 0.45);
  --brown-light:  #94a3b8;
  --text-dark:    #ffffff;
  --text-body:    #e2e8f0;
  --text-muted:   #94a3b8;
  --white:        #ffffff;
  --success:      #48bb78;
  --error:        #f56565;
  --shadow-color: rgba(0, 0, 0, 0.6);
  --shadow-gold:  rgba(0, 27, 72, 0.5);

  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'Jost', system-ui, sans-serif;

  --section-py:   5rem;
  --card-radius:  16px;
  --btn-radius:   50px;
  --input-radius: 12px;

  --shadow-sm:      0 2px 12px var(--shadow-color);
  --shadow-md:      0 8px 32px var(--shadow-color);
  --shadow-lg:      0 20px 60px var(--shadow-color);
  --shadow-gold-sm: 0 4px 20px var(--shadow-gold);

  --transition:      all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === RESET & BASE === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-sans);
  background-color: var(--cream);
  color: var(--text-body);
  line-height: 1.7;
  overflow-x: hidden;
}

/* === TYPOGRAPHY === */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color: var(--text-dark);
  line-height: 1.2;
  font-weight: 500;
}

h1 { font-size: clamp(2.4rem, 6vw, 5rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3.5rem); }
h3 { font-size: clamp(1.4rem, 3vw, 2.2rem); }
h4 { font-size: 1.4rem; }
h5 { font-size: 1.05rem; font-family: var(--font-sans); font-weight: 500; }

p { color: var(--text-body); }
.lead { color: var(--text-body) !important; }
.text-body { color: var(--text-body) !important; }
.text-muted, .text-muted-lumi { color: var(--text-muted) !important; }
a { color: var(--gold-dark); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--white); }
img { max-width: 100%; height: auto; }

/* === SECTION SPACING === */
.section-py    { padding: var(--section-py) 0; }
.section-py-sm { padding: 3rem 0; }

/* === SECTION HEADER === */
.section-label {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-dark) !important;
  display: block;
  margin-bottom: 0.6rem;
}

.section-title {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: 0.75rem;
}

.section-subtitle {
  color: var(--text-muted);
  font-size: 1rem;
  max-width: 500px;
  margin: 0 auto 3rem;
}

.gold-divider {
  width: 50px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  margin: 1rem auto;
  border-radius: 2px;
}

/* === UTILITY CLASSES === */
.text-gold        { color: var(--gold-dark) !important; }
.text-dark-custom { color: var(--text-dark) !important; }
.text-muted-lumi  { color: var(--text-muted) !important; }
.bg-cream         { background-color: var(--cream) !important; color: var(--text-dark) !important; }
.bg-ivory         { background-color: var(--ivory) !important; color: var(--text-dark) !important; }
.bg-beige         { background-color: var(--beige) !important; color: var(--text-dark) !important; }
.bg-white         { background-color: var(--bg-surface) !important; color: var(--text-dark) !important; border-color: var(--beige) !important; }
.border-beige     { border-color: var(--beige) !important; }
.font-serif       { font-family: var(--font-serif) !important; }

/* Bootstrap Accordion, Card, & Input Overrides */
.accordion-item, .accordion-button, .accordion-body {
  background-color: var(--bg-surface) !important;
  color: var(--text-dark) !important;
  border-color: var(--beige) !important;
}
.accordion-button:not(.collapsed) {
  background-color: var(--bg-card) !important;
  color: var(--gold-dark) !important;
}
.form-control, .form-select {
  background-color: var(--bg-surface) !important;
  color: var(--text-dark) !important;
  border-color: var(--beige) !important;
}
.form-control:focus, .form-select:focus {
  background-color: var(--bg-surface) !important;
  color: var(--text-dark) !important;
  border-color: var(--gold-dark) !important;
  box-shadow: 0 0 0 3px rgba(75, 131, 230, 0.25) !important;
}
.card {
  background-color: var(--bg-surface) !important;
  color: var(--text-dark) !important;
  border-color: var(--beige) !important;
}
.card-header, .card-footer {
  background-color: var(--bg-card) !important;
  border-color: var(--beige) !important;
  color: var(--text-dark) !important;
}

/* === SCROLLBAR === */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: var(--ivory); }
::-webkit-scrollbar-thumb { background: var(--beige-dark); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* === SELECTION === */
::selection { background: var(--gold-light); color: var(--text-dark); }

/* === LOADING SPINNER === */
.spinner-lumi {
  width: 44px; height: 44px;
  border: 3px solid var(--beige);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.85s linear infinite;
  margin: 2rem auto;
}

.page-loader {
  position: fixed;
  inset: 0;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  transition: opacity 0.4s ease;
}

/* === KEYFRAMES === */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-14px); }
}

@keyframes slideInRight {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes pulseGold {
  0%, 100% { box-shadow: 0 0 0 0 var(--shadow-gold); }
  50%       { box-shadow: 0 0 0 12px transparent; }
}

/* === ANIMATION CLASSES === */
.animate-fade-up { animation: fadeInUp 0.7s ease forwards; }
.animate-fade    { animation: fadeIn 0.5s ease forwards; }
.float-anim      { animation: floatY 4s ease-in-out infinite; }

/* === SCROLL REVEAL === */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.revealed { opacity: 1; transform: translateY(0); }
.reveal-delay-1  { transition-delay: 0.1s; }
.reveal-delay-2  { transition-delay: 0.2s; }
.reveal-delay-3  { transition-delay: 0.3s; }
.reveal-delay-4  { transition-delay: 0.4s; }

/* === TOAST === */
.lumi-toast,
div[class*="toast"] {
  position: fixed !important;
  bottom: 2rem !important;
  right: 2rem !important;
  z-index: 999999 !important;
  background-color: #0e1b2e !important;
  background: #0e1b2e !important;
  color: #ffffff !important;
  border: 2px solid #48bb78 !important;
  border-left: 8px solid #48bb78 !important;
  border-radius: 14px !important;
  padding: 1.1rem 1.6rem !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.9) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  min-width: 300px !important;
  max-width: 440px !important;
  animation: slideInRight 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.lumi-toast *,
div[class*="toast"] * {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.lumi-toast.success,
div[class*="toast"].success {
  background-color: #0e1b2e !important;
  background: #0e1b2e !important;
  border-color: #48bb78 !important;
  border-left-color: #48bb78 !important;
  color: #ffffff !important;
}

.lumi-toast.error,
div[class*="toast"].error {
  background-color: #2b1216 !important;
  background: #2b1216 !important;
  border-color: #f56565 !important;
  border-left-color: #f56565 !important;
  color: #ffffff !important;
}

/* === BADGE === */
.badge-gold {
  background: var(--gold-light);
  color: var(--gold-dark);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.25em 0.8em;
  border-radius: 50px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-family: var(--font-sans);
}

/* === RESPONSIVE & MOBILE OPTIMIZATIONS === */
@media (max-width: 991.98px) {
  :root {
    --section-py: 3.5rem;
    --font-size-h1: 2.3rem;
    --font-size-h2: 1.8rem;
  }
  .hero-section {
    padding: 3rem 0;
    text-align: center;
  }
  .hero-stats {
    justify-content: center;
    gap: 1.5rem;
  }
  .hero-img-wrap {
    margin-top: 2rem;
  }
  .admin-sidebar {
    position: relative;
    width: 100%;
    min-height: auto;
  }
  .admin-main {
    margin-left: 0;
    padding: 1.5rem 1rem;
  }
}

@media (max-width: 575.98px) {
  .lumi-toast {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    min-width: auto;
    max-width: calc(100vw - 2rem);
  }
  .hero-stats {
    flex-wrap: wrap;
  }
  .product-main-img {
    height: 320px !important;
  }
  .product-thumb {
    width: 60px !important;
    height: 60px !important;
  }
  .navbar-brand .logo-text {
    font-size: 1.6rem;
  }
  .navbar-brand .logo-subtext {
    font-size: 0.5rem;
    letter-spacing: 2.5px;
  }
}