/* DAFFY CHEATS - VIBRANT ORANGE THEME WITH ANIMATIONS */

:root {
  --daffy-primary: #ff8c00;
  --daffy-secondary: #ffa500;
  --daffy-accent: #ff6600;
}

/* GLOBAL ANIMATIONS */
@keyframes slideInDown {
  0% { opacity: 0; transform: translateY(-30px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes slideInUp {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

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

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes glowPulse {
  0%, 100% { 
    box-shadow: 0 0 10px rgba(255, 140, 0, 0.4),
                0 0 20px rgba(255, 140, 0, 0.2);
  }
  50% { 
    box-shadow: 0 0 30px rgba(255, 140, 0, 0.8),
                0 0 40px rgba(255, 140, 0, 0.4);
  }
}

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

@keyframes scaleIn {
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

/* HEADER & NAV */
header {
  animation: slideInDown 0.6s ease-out;
}

.navbar {
  animation: slideInDown 0.6s ease-out;
  background: linear-gradient(135deg, rgba(0,0,0,0.8), rgba(255,140,0,0.05)) !important;
}

.btn-primary, .btn-success, .btn {
  animation: glowPulse 2s ease-in-out infinite !important;
  background: linear-gradient(135deg, #ff8c00, #ffa500) !important;
  border-color: #ff8c00 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:hover, .btn-success:hover, .btn:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 10px 30px rgba(255, 140, 0, 0.6) !important;
}

/* CARDS & CONTENT */
.card, .product-card, .review-card {
  animation: fadeInUp 0.6s ease-out;
  border-color: #ff8c00 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(135deg, rgba(0,0,0,0.4), rgba(255,140,0,0.05)) !important;
}

.card:hover, .product-card:hover, .review-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 50px rgba(255, 140, 0, 0.4) !important;
  border-color: #ffa500 !important;
}

/* TITLES & HEADINGS */
h1, h2, h3, h4, h5, h6 {
  color: #ff8c00 !important;
  animation: slideInUp 0.8s ease-out;
  text-shadow: 0 0 10px rgba(255, 140, 0, 0.3);
}

/* HERO SECTION */
.hero, .hero-section {
  animation: fadeInUp 1s ease-out;
}

/* STARS & RATINGS */
.fa-star, .fa-star-half-alt {
  animation: glowPulse 2s ease-in-out infinite !important;
  color: #ff8c00 !important;
}

/* LINKS & BUTTONS */
a {
  color: #ff8c00;
  transition: all 0.3s ease;
}

a:hover {
  color: #ffa500;
  text-shadow: 0 0 10px rgba(255, 140, 0, 0.6);
}

/* ACCENTS */
.text-primary, .badge-primary {
  background-color: #ff8c00 !important;
  color: #000 !important;
}

/* SOCIAL LINKS */
.nexus-social-link {
  animation: float 3s ease-in-out infinite;
  transition: all 0.3s ease;
}

.nexus-social-link:hover {
  transform: translateY(-8px) scale(1.15);
  filter: drop-shadow(0 0 15px rgba(255, 140, 0, 0.8));
}

/* BORDERS & DIVIDERS */
hr, .border, .border-top {
  border-color: #ff8c00 !important;
}

/* FORMS */
.form-control:focus, .form-select:focus {
  border-color: #ff8c00 !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 140, 0, 0.25) !important;
}

/* ANIMATIONS ON SCROLL */
.product-card, .feature-card, .review-card {
  animation: fadeInUp 0.6s ease-out forwards;
  opacity: 0;
}

.product-card:nth-child(1) { animation-delay: 0.1s; }
.product-card:nth-child(2) { animation-delay: 0.2s; }
.product-card:nth-child(3) { animation-delay: 0.3s; }
.product-card:nth-child(4) { animation-delay: 0.4s; }

/* FOOTER */
footer {
  animation: slideInUp 0.8s ease-out;
}


/* =====================================================
   ORANGE TRANSPARENCY OVERRIDES (v2 — high specificity)
   ===================================================== */

/* Override the daffy variables at root */
html body :root,
:root,
html {
  --daffy-primary: rgba(255, 140, 0, 0.7) !important;
  --daffy-secondary: rgba(255, 165, 0, 0.7) !important;
  --daffy-accent: rgba(255, 102, 0, 0.7) !important;
}

/* Hard override every hardcoded orange in the theme. Body prefix bumps specificity
   above pro.css. !important overrides the existing !important rules. */
body .product-card,
body .product-card .title,
body .product-card .price,
body .product-card .pricing,
body .product-card .stock-in,
body .products .card,
body .products .card .info,
body .products .card .info .price,
body .btn-primary,
body .button-primary,
body .nexus-btn-glass,
body .btn.nexus-btn-glass {
  --tw-bg-opacity: 0.7;
}

/* Background overrides — semi-transparent orange */
/* Status page: inline style="background-color: ..." on indicator/pulsating
   uses dynamic product.status_color and must always render at full opacity.
   The inline styles already win on specificity — we just make sure nothing
   in our orange overrides accidentally bleeds in. No rule needed here. */

body [style*="#ff8c00"]:not(.indicator):not(.pulsating):not(.label),
body [style*="#FF8C00"]:not(.indicator):not(.pulsating):not(.label),
body .bg-accent-500,
body .product-card .stock-in,
body button.btn-primary,
body .btn-primary {
  background-color: rgba(255, 140, 0, 0.45) !important;
  background: rgba(255, 140, 0, 0.45) !important;
}

body [style*="#ffa500"],
body [style*="#FFA500"] {
  background-color: rgba(255, 165, 0, 0.45) !important;
}

body [style*="#ff6600"],
body [style*="#FF6600"] {
  background-color: rgba(255, 102, 0, 0.45) !important;
}

/* Border overrides */
body [style*="border-color: #ff8c00"],
body [style*="border-color:#ff8c00"],
body .border-accent-500,
body .product-card {
  border-color: rgba(255, 140, 0, 0.55) !important;
}

/* Text color overrides — slightly less aggressive opacity so text stays readable */
body .text-accent-500,
body [style*="color: #ff8c00"],
body [style*="color:#ff8c00"],
body [style*="color: #ffa500"] {
  color: rgba(255, 165, 60, 0.95) !important;
}

/* Tailwind accent utility softening */
body .bg-accent-500\/10,
body [class*="bg-accent-500/"] {
  background-color: rgba(255, 140, 0, 0.12) !important;
}

body .ring-accent-500 {
  --tw-ring-color: rgba(255, 140, 0, 0.45) !important;
}

body .fill-accent-500 {
  fill: rgba(255, 140, 0, 0.85) !important;
}

/* Products page price chips, badges, status pills — orange tinted text, no fill */
body .products .card .info .price,
body .product-card .price,
body .product-page .price {
  background-color: transparent !important;
  background: transparent !important;
  color: rgba(255, 165, 60, 0.95) !important;
  padding: 0 !important;
}

body .stock .stock-in {
  background-color: rgba(255, 140, 0, 0.4) !important;
  color: #fff !important;
}

/* Custom CSS variable backgrounds (badge-color) */
body span.stock-in[style*="--badge-color"] {
  background-color: rgba(255, 140, 0, 0.5) !important;
}

/* Hover states stay slightly more saturated */
body .btn-primary:hover,
body .button-primary:hover,
body .product-card:hover {
  background-color: rgba(255, 140, 0, 0.85) !important;
  border-color: rgba(255, 140, 0, 0.75) !important;
}

/* =====================================================
   LOGO WHITE BACKGROUND REMOVAL
   ===================================================== */
/* The logo image is hosted on Sellauth (shop.image_url) — not in the theme zip.
   We can't edit the file directly. mix-blend-mode: multiply makes white pixels
   blend into the dark navbar background. */
body nav.navbar .navbar-brand img,
body nav.navbar img,
body .navbar-brand img,
body header img[alt] {
  mix-blend-mode: multiply !important;
  background: transparent !important;
  background-color: transparent !important;
  isolation: auto !important;
  filter: contrast(1.08) brightness(1.02) !important;
}

/* If the navbar background is NOT dark, multiply won't help — in that case the
   only real fix is re-uploading a transparent PNG in your Sellauth dashboard.
   Shop Settings → Logo → upload a PNG with a real transparent background. */

/* =====================================================
   HERO STATS — ALIGN WITH SEARCHBAR ABOVE
   ===================================================== */
body .hero .nexus-stats {
  width: 100% !important;
  max-width: 700px !important;
  margin: 1.5rem auto 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 1rem !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}

body .hero .nexus-stats .nexus-stat-item {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
}

/* Match searchbar's max width — both live inside .content, so they line up */
body .hero .fake-searchbar,
body .hero .nexus-searchbar {
  max-width: 700px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body .hero .nexus-stats .nexus-stat-item {
  width: 100% !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

body .hero .nexus-stats .nexus-stat-value {
  white-space: nowrap !important;
  font-size: clamp(1.2rem, 2vw, 2rem) !important;
  line-height: 1.1 !important;
}

body .hero .nexus-stats .nexus-stat-label {
  white-space: nowrap !important;
  font-size: clamp(0.7rem, 1vw, 0.95rem) !important;
}

/* On smaller screens collapse to 2 columns */
@media (max-width: 768px) {
  body .hero .nexus-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 100% !important;
  }
}

/* =====================================================
   STATUS CARD — replace bright gray bar with subtle card
   ===================================================== */
body .status-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: background 0.2s ease, border-color 0.2s ease;
}

body .status-card:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 140, 0, 0.3) !important;
}