/*
 * GalaxDev Service — Custom CSS (dz7shop style)
 * Hero izquierda · Glow derecha · #6800ed
*/

/* ─── ANIMACIONES ─── */
@keyframes pulse-glow {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 1; }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes badge-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}
@keyframes logo-float {
  0%, 100% { transform: translateY(0px) scale(1); }
  50%       { transform: translateY(-18px) scale(1.03); }
}
@keyframes logo-glow-pulse {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1; }
}

/* ─── FONDO OSCURO — tapa la imagen de galaxia del store ─── */
body {
  background-color: #06060c !important;
}

/* Cubre cualquier background-image del store */
body > div.fixed.inset-0.z-\[-1\],
div[style*="background-image"] {
  opacity: 0 !important;
}

/* Overlay sobre el fondo */
#app::before {
  content: '';
  position: fixed;
  inset: 0;
  background: #06060c;
  z-index: -1;
  pointer-events: none;
}

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: #06060c; }
::-webkit-scrollbar-thumb { background: #6800ed; border-radius: 3px; }
* { scrollbar-width: thin; scrollbar-color: rgba(104,0,237,.6) #06060c; }

/* ─── NAVBAR ─── */
nav.component[data-component-id="navbar"] {
  position: sticky;
  top: 0;
  z-index: 100;
}
nav.component[data-component-id="navbar"] > div {
  background:      rgba(6,6,12,0.92) !important;
  border-color:    rgba(104,0,237,0.2) !important;
  backdrop-filter: blur(14px) !important;
}

/* ─── ANNOUNCEMENT BAR ─── */
.component[data-component-id="announcement"] {
  background:    rgba(104,0,237,0.08) !important;
  border-bottom: 1px solid rgba(104,0,237,0.2) !important;
}

/* ─── HERO: left text, right glow ─── */
[data-component-id="hero"] > div {
  position: relative;
  overflow: hidden;
  min-height: 85vh !important;
  display: flex;
  align-items: center;
  justify-content: flex-start !important;
  padding-top: 60px;
  padding-bottom: 60px;
}

/* Big right-side glow blob */
[data-component-id="hero"] > div::before {
  content: '';
  position: absolute;
  top: 50%; right: -60px;
  transform: translateY(-50%);
  width: 680px; height: 680px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(104,0,237,0.5) 0%,
    rgba(104,0,237,0.15) 40%,
    transparent 70%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
  animation: pulse-glow 4s ease-in-out infinite;
}

/* Secondary smaller glow top-right */
[data-component-id="hero"] > div::after {
  content: '';
  position: absolute;
  top: 15%; right: 10%;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(168,85,247,0.25) 0%, transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}

/* ─── HERO LOGO — right side, floating over the smoke ─── */
.hero-logo-wrap {
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-logo-img {
  width: 420px;
  max-width: 40vw;
  height: auto;
  object-fit: contain;
  animation: logo-float 6s ease-in-out infinite;
  filter:
    drop-shadow(0 0 40px rgba(104,0,237,0.7))
    drop-shadow(0 0 80px rgba(104,0,237,0.35))
    drop-shadow(0 0 16px rgba(168,85,247,0.5));
}

@media (max-width: 768px) {
  .hero-logo-wrap {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 100%;
    justify-content: center;
    margin-top: 24px;
  }
  .hero-logo-img {
    width: 220px;
    max-width: 70vw;
  }
}

/* Container: left-align everything */
[data-component-id="hero"] .container {
  position: relative;
  z-index: 1;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  max-width: 700px !important;
  margin-left: 0 !important;
}

[data-component-id="hero"] .container > div:first-child {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  max-width: 100% !important;
}

[data-component-id="hero"] h1,
[data-component-id="hero"] p {
  text-align: left !important;
  margin-left: 0 !important;
}

[data-component-id="hero"] .flex.flex-wrap.items-center.gap-4 {
  justify-content: flex-start !important;
}

/* ─── HERO TITLE — bigger ─── */
.hero-title {
  font-size: 3.5rem !important;
  line-height: 1.1 !important;
}
@media (min-width: 768px) {
  .hero-title {
    font-size: 4.5rem !important;
  }
}
@media (min-width: 1024px) {
  .hero-title {
    font-size: 5.5rem !important;
    line-height: 1.05 !important;
  }
}

/* Hero badge */
.hero-badge-custom {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid rgba(104,0,237,0.45);
  background: rgba(104,0,237,0.12);
  color: #c084fc;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 16px;
}
.hero-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #6800ed;
  animation: badge-blink 1.5s ease-in-out infinite;
  flex-shrink: 0;
}

/* Shimmer title */
.shimmer-text {
  background: linear-gradient(90deg, #fff 0%, #6800ed 40%, #fff 60%, #a855f7 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}

/* Hero stats — left-aligned */
.hero-stats-bar {
  display: flex;
  justify-content: flex-start;
  gap: 40px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid rgba(104,0,237,0.18);
  flex-wrap: wrap;
}
.hero-stat { text-align: left; }
.hero-stat-val {
  display: block;
  font-size: 28px;
  font-weight: 900;
  color: #6800ed;
}
.hero-stat-label {
  display: block;
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  margin-top: 2px;
}

/* ─── SECTION TITLES — left-aligned ─── */
.component .flex.items-center.justify-center.mb-4,
.component .flex.items-center.justify-center.mb-6,
.component .flex.items-center.justify-center.mb-8 {
  justify-content: flex-start !important;
}
.component h1.text-center,
.component h2.text-center,
.component h1.text-t-primary,
.component h4.text-t-primary {
  text-align: left !important;
}
.component hr.border-accent-500 {
  border-color: #6800ed !important;
  box-shadow: 0 0 8px rgba(104,0,237,0.55);
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* ─── FEATURE CARDS ─── */
.component div.bg-card\/75 {
  background:    rgba(var(--cl-card),0.9) !important;
  border:        1px solid rgba(104,0,237,0.18) !important;
  border-radius: 0 !important;
  transition:    transform .3s, box-shadow .3s, border-color .3s !important;
}
.component div.bg-card\/75:hover {
  transform:    translateY(-5px) !important;
  box-shadow:   0 0 32px rgba(104,0,237,.28), 0 16px 32px rgba(0,0,0,.55) !important;
  border-color: rgba(104,0,237,.52) !important;
}
.component div.bg-card\/75 i {
  font-size: 28px !important;
  filter: drop-shadow(0 0 8px rgba(104,0,237,.5));
}

/* ─── PRODUCT CARDS ─── */
a.block.h-full.bg-card\/75 {
  border:        1px solid rgba(104,0,237,0.15) !important;
  border-radius: 0 !important;
  overflow: hidden;
  transition:    transform .3s, box-shadow .3s, border-color .3s !important;
}
a.block.h-full.bg-card\/75:hover {
  transform:    translateY(-5px) !important;
  box-shadow:   0 0 32px rgba(104,0,237,.3), 0 20px 40px rgba(0,0,0,.5) !important;
  border-color: rgba(104,0,237,.55) !important;
}
a.block.h-full.bg-card\/75 .flex.items-center.justify-center.gap-2.text-accent-500 {
  font-weight: 700 !important;
  margin-top: 4px;
  transition: background .2s, box-shadow .2s !important;
}
a.block.h-full.bg-card\/75:hover .flex.items-center.justify-center.gap-2.text-accent-500 {
  box-shadow: 0 0 16px rgba(104,0,237,.35) !important;
}

/* ─── FOOTER ─── */
footer.mt-6 {
  border-color: rgba(104,0,237,0.18) !important;
}

/* ─── INPUTS ─── */
input[type="search"],
input[type="text"],
input.border {
  border-color:  rgba(104,0,237,0.3) !important;
  border-radius: 0 !important;
  transition:    border-color .2s, box-shadow .2s !important;
}
input[type="search"]:focus,
input[type="text"]:focus {
  border-color: rgba(104,0,237,.65) !important;
  box-shadow:   0 0 0 3px rgba(104,0,237,.18) !important;
  outline: none !important;
}

/* ─── ACCENT BUTTON GLOW ─── */
.hover\:bg-accent-500:hover,
[class*="bg-accent-500"] {
  box-shadow: 0 0 18px rgba(104,0,237,0.38);
}