/* Premium Contemporary Redesign for BlindBoxCentral */

:root {
  --bbc-red: #E60012;
  --bbc-red-hover: #B3000E;
  --bbc-dark: #0A0A0A;
  --bbc-light-bg: #FFFFFF;
  --bbc-gray-bg: #FAF9F9;
  --bbc-border-color: #EAEAEA;
  --bbc-card-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  --bbc-card-shadow-hover: 0 15px 40px rgba(230, 0, 18, 0.1);
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ──────────────────────────────────────────────────────────────────────────
   1. GLOBAL PAGE & SECTION OVERRIDES
   ────────────────────────────────────────────────────────────────────────── */
body.elementor-page-6 {
  background-color: var(--bbc-light-bg) !important;
  color: #333333;
  font-family: var(--font-sans) !important;
  -webkit-font-smoothing: antialiased;
}

/* Base Headings & Paragraphs global behavior */
.elementor-page-6 h1,
.elementor-page-6 h2,
.elementor-page-6 h3,
.elementor-page-6 h4 {
  font-family: var(--font-sans) !important;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.elementor-page-6 p,
.elementor-page-6 .elementor-text-editor {
  font-family: var(--font-sans) !important;
  line-height: 1.6;
  color: #4A4A4A;
}

/* ──────────────────────────────────────────────────────────────────────────
   2. REUSABLE CARD WRAPPERS & BADGES
   ────────────────────────────────────────────────────────────────────────── */

/* Trendy & New Release Card Layouts */
.elementor-page-6 .elementor-container > .elementor-child-container {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Card Hover Interactions */
.elementor-element-18efa, 
.elementor-element-65969, 
.elementor-element-2458c, 
.elementor-element-8397c,
.elementor-element-d5948, 
.elementor-element-b2680, 
.elementor-element-bc6e5,
.elementor-element-ca574,
.elementor-element-2e519,
.elementor-element-cab32,
.elementor-element-f29b4,
.elementor-element-1dc78,
.elementor-element-9dc42,
.elementor-element-302ef,
.elementor-element-bb510,
.elementor-element-d6d85,
.elementor-element-33601,
.elementor-element-396f2,
.elementor-element-b79ae,
.elementor-element-9e400,
.elementor-element-5f01b,
.elementor-element-74fec {
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.3s ease !important;
}

.elementor-element-18efa:hover, 
.elementor-element-65969:hover, 
.elementor-element-2458c:hover, 
.elementor-element-8397c:hover,
.elementor-element-d5948:hover, 
.elementor-element-b2680:hover, 
.elementor-element-bc6e5:hover,
.elementor-element-ca574:hover,
.elementor-element-2e519:hover,
.elementor-element-cab32:hover,
.elementor-element-f29b4:hover,
.elementor-element-1dc78:hover,
.elementor-element-9dc42:hover,
.elementor-element-302ef:hover,
.elementor-element-bb510:hover,
.elementor-element-d6d85:hover,
.elementor-element-33601:hover,
.elementor-element-396f2:hover,
.elementor-element-b79ae:hover,
.elementor-element-9e400:hover,
.elementor-element-5f01b:hover,
.elementor-element-74fec:hover {
  transform: translateY(-8px);
  box-shadow: var(--bbc-card-shadow-hover) !important;
}

/* Image Uniform Aspect Ratio and Crop Controls */
.elementor-page-6 .elementor-widget-image img {
  width: 100% !important;
  height: 240px !important;
  object-fit: cover !important;
  transition: transform 0.5s ease;
}

.elementor-page-6 .elementor-widget-image:hover img {
  transform: scale(1.05);
}

/* Badges and Category Tags */
.bbc-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  background-color: rgba(230, 0, 18, 0.08);
  color: var(--bbc-red);
  border-radius: 4px;
  margin-bottom: 12px;
}

/* ──────────────────────────────────────────────────────────────────────────
   3. HERO SECTION BRAND SPARKLE
   ────────────────────────────────────────────────────────────────────────── */
.elementor-element-28d6c {
  position: relative;
  overflow: hidden;
}

.elementor-element-28d6c::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(230, 0, 18, 0.05) 0%, transparent 60%);
  pointer-events: none;
}

/* Hero Section Headline spacing and gradient touch */
.elementor-element-f0173 h1 {
  line-height: 1.15 !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #E6E6E6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 20px !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   4. BUTTON & CTA POLISH
   ────────────────────────────────────────────────────────────────────────── */
.elementor-page-6 .elementor-widget-button .elementor-button {
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.elementor-page-6 .elementor-widget-button .elementor-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(230, 0, 18, 0.25);
}

/* White background transparent / minimal secondary buttons */
.elementor-page-6 .elementor-element-ed129 .elementor-button:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #FFFFFF !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   5. MOBILE RESPONSIVENESS AND SPACE OPTIMIZATIONS
   ────────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 1024px) {
  .elementor-page-6 .elementor-widget-image img {
    height: 200px !important;
  }
}

@media screen and (max-width: 767px) {
  body.elementor-page-6 {
    font-size: 14px;
  }
  
  /* Reset hero layout on mobile */
  .elementor-element-28d6c {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  
  .elementor-element-f0173 h1 {
    font-size: 32px !important;
  }
  
  /* Fluid spacings across standard mobile viewports */
  .elementor-page-6 .elementor-widget-image img {
    height: 180px !important;
  }
  
  .elementor-page-6 .elementor-button {
    width: 100% !important;
    text-align: center;
  }
  
  /* Fix vertical grid gutters on mobile devices */
  .elementor-page-6 .elementor-container {
    gap: 16px !important;
  }
}