/* ==========================================================================
   ADMIN & E-SHOP CUSTOM STYLES
   Theme: Luxury Dark / Charcoal & Gold (#0f0f0f, #d4af37, #c5a880)
   ========================================================================== */

/* --- Custom Scrollbars --- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #0f0f0f;
}

::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.25);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 175, 55, 0.5);
}

/* --- Form Control & Input Enhancements --- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
select,
textarea {
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #d4af37 !important;
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.25);
}

/* Custom styling for file inputs */
input[type="file"]::file-selector-button {
  background-color: rgba(212, 175, 55, 0.1);
  color: #c5a880;
  border: 1px solid rgba(212, 175, 55, 0.3);
  padding: 0.375rem 0.75rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  margin-right: 0.75rem;
  transition: all 0.2s ease;
}

input[type="file"]::file-selector-button:hover {
  background-color: rgba(212, 175, 55, 0.2);
  color: #f5f5dc;
  border-color: #d4af37;
}

/* Custom dropdown arrows for select elements */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23D4AF37%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.65rem auto;
  padding-right: 2rem;
}

/* --- Drag & Drop Dropzone Enhancements --- */
#drop-zone {
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

#drop-zone.drag-over {
  border-color: #d4af37 !important;
  background-color: rgba(212, 175, 55, 0.08) !important;
}

/* --- Glassmorphism & Card Utilities --- */
.glass-card {
  background: rgba(20, 20, 20, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(212, 175, 55, 0.15);
  border-radius: 0.5rem;
}

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

.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.7), 0 0 10px rgba(212, 175, 55, 0.15);
}

/* --- Luxury Dark Table Styling --- */
.table-luxury {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.table-luxury th {
  background-color: #141414;
  color: #d4af37;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
  padding: 0.75rem 1rem;
}

.table-luxury td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background-color 0.15s ease;
}

.table-luxury tbody tr:hover td {
  background-color: rgba(212, 175, 55, 0.03);
}

/* --- Status Badges --- */
.badge-gold {
  background-color: rgba(212, 175, 55, 0.15);
  color: #d4af37;
  border: 1px solid rgba(212, 175, 55, 0.3);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.badge-success {
  background-color: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.badge-danger {
  background-color: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
}

/* --- Transitions & Animations --- */
.tab-content,
.fade-in {
  animation: fadeIn 0.25s ease-in-out;
}

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

/* --- Navigation Transparency & Edge Masking --- */
.navbar-mask {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
}

.navbar-scrolled {
  background-color: rgba(13, 11, 10, 0.92) !important;
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.8);
}
/* ==========================================================================
   HERO OVERLAY CARDS: SLANT & TRANSPARENT GAP
   ========================================================================== */

/* Container wrapper to ensure cards sit correctly */
.hero-card-container {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  position: relative !important;
  padding-right: 1.5rem !important;
}

/* Card Wrappers - Handles Slant & Hover Lift */
.hero-card-wrapper {
  position: relative !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), z-index 0.3s ease !important;
  cursor: pointer !important;
}

/* 1. Slant & Overlap */
.hero-card-left {
  transform: rotate(-7deg) translateY(10px) !important;
  margin-right: -3rem !important; /* Overlaps behind right card */
  z-index: 10 !important;
}

.hero-card-right {
  transform: rotate(5deg) translateY(-5px) !important;
  z-index: 20 !important;
}

/* 2. Thick Gold Borderline + Transparent Gap */
.hero-card-frame {
  position: relative !important;
  background-color: #0d0b0a !important;
  border-radius: 6px !important;
  /* Thick 4px outer borderline */
  outline: 4px solid #d4af37 !important;
  /* 8px transparent gap between outer border and image frame */
  outline-offset: 8px !important; 
  /* Space around frame so the outline isn't cut off */
  margin: 12px !important; 
  box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.8) !important;
  transition: outline-color 0.3s ease, outline-offset 0.3s ease, box-shadow 0.3s ease !important;
}

/* 3. Hover Animation (Straightens up & expands gap) */
.hero-card-wrapper:hover {
  z-index: 50 !important;
  transform: rotate(0deg) translateY(-14px) scale(1.03) !important;
}

.hero-card-wrapper:hover .hero-card-frame {
  outline-color: #f5f5dc !important; /* Bright cream gold highlight */
  outline-offset: 10px !important;   /* Slightly widens gap on hover */
  box-shadow: 0 25px 40px -5px rgba(212, 175, 55, 0.3) !important;
}
/* Scroll Fade-In & Slide-Up Animation */
.scroll-fade-in {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hover Effect for Entire Section */
.scroll-fade-in.visible:hover {
  transform: translateY(-4px);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
/* Base hidden state for line-by-line staggered items */
.stagger-line {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Revealed state triggered when scrolled into view */
.scroll-fade-in.visible .stagger-line {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays per line */
.scroll-fade-in.visible .stagger-line:nth-child(1) { transition-delay: 0.1s; }
.scroll-fade-in.visible .stagger-line:nth-child(2) { transition-delay: 0.3s; }
.scroll-fade-in.visible .stagger-line:nth-child(3) { transition-delay: 0.5s; }
.scroll-fade-in.visible .stagger-line:nth-child(4) { transition-delay: 0.7s; }

/* Subtle Section Hover Lift */
#brand-statement {
  transition: transform 0.5s ease;
}
#brand-statement:hover {
  transform: translateY(-3px);
}