/* ================================================================
   slider-neon-widget.css
   Neon Dark Slider Widget — استایل مستقل از --primary تم
   ================================================================ */

/* ── CSS VARS (قابل override از Elementor) ───────────────────── */
.neon-slider-wrap {
  --neon-primary : #00baba;
  --neon-gold    : #f5c518;
  background     : #141210;
  padding        : 40px 0;
}


/* ── SECTION HEADER ──────────────────────────────────────────── */

.neon-slider-wrap .section-header {
  display         : flex;
  align-items     : flex-end;
  justify-content : space-between;
  margin-bottom   : 24px;
}

.neon-slider-wrap .neon-label {
  font-size      : 12px;
  font-weight    : 700;
  letter-spacing : .1em;
  text-transform : uppercase;
  color          : var(--neon-primary);
  margin-bottom  : 6px;
}

.neon-slider-wrap .neon-title {
  color         : #fff;
  margin-bottom : 6px;
}

.neon-slider-wrap .neon-sub {
  color  : #888;
  margin : 0;
}

/* Nav pill */
.neon-slider-wrap .neon-nav-pill {
  display    : flex;
  background : #1e1c19;
  border     : 1px solid #2a2825;
  border-radius : 999px;
  overflow   : hidden;
  flex-shrink: 0;
}

.neon-slider-wrap .neon-nav-pill button {
  background  : transparent;
  border      : none;
  color       : #ccc;
  padding     : 8px 14px;
  cursor      : pointer;
  font-size   : 18px;
  line-height : 1;
  transition  : background .15s, color .15s;
}

.neon-slider-wrap .neon-nav-pill button:hover {
  background : var(--neon-primary);
  color      : #fff;
}


/* ── CARD ────────────────────────────────────────────────────── */

.neon-slider-wrap .neon-card {
  background    : #181714;
  border        : 1px solid #2a2825;
  border-radius : 16px;
  padding       : 16px;
  position      : relative;
  overflow      : hidden;
  transition    : border-color .25s, box-shadow .25s;
  cursor        : pointer;
  height        : 100%;
  box-sizing    : border-box;
}

/* Gradient border glow on hover */
.neon-slider-wrap .neon-card::before {
  content       : '';
  position      : absolute;
  inset         : -1px;
  border-radius : 17px;
  background    : linear-gradient(135deg, var(--neon-primary), transparent 60%);
  opacity       : 0;
  transition    : opacity .25s;
  z-index       : 0;
}

.neon-slider-wrap .neon-card:hover::before { opacity: .18; }

.neon-slider-wrap .neon-card:hover {
  border-color : var(--neon-primary);
  box-shadow   : 0 0 24px rgba(0, 186, 186, .18);
}

/* Keep all children above the pseudo-element */
.neon-slider-wrap .neon-card > * { position: relative; z-index: 1; }


/* ── IMAGE AREA ──────────────────────────────────────────────── */

.neon-slider-wrap .neon-img {
  background      : radial-gradient(circle, #1e1c19, #141210);
  border-radius   : 10px;
  display         : flex;
  align-items     : center;
  justify-content : center;
  aspect-ratio    : 1 / 1;
  margin-bottom   : 12px;
  overflow        : hidden;
}

.neon-slider-wrap .neon-img img {
  max-height  : 70%;
  max-width   : 75%;
  object-fit  : contain;
  filter      : drop-shadow(0 0 18px rgba(0, 186, 186, .30));
  transition  : filter .3s;
}

.neon-slider-wrap .neon-card:hover .neon-img img {
  filter: drop-shadow(0 0 28px rgba(0, 186, 186, .55));
}


/* ── TEXT CONTENT ────────────────────────────────────────────── */

.neon-slider-wrap .neon-brand {
  font-size      : 10px;
  font-weight    : 700;
  letter-spacing : .12em;
  text-transform : uppercase;
  color          : var(--neon-primary);
  margin-bottom  : 4px;
}

.neon-slider-wrap .neon-name {
  font-size     : 12.5px;
  font-weight   : 700;
  color         : #e8e3d8;
  line-height   : 1.5;
  margin-bottom : 8px;
}

.neon-slider-wrap .neon-rating {
  font-size     : 11px;
  color         : #666;
  margin-bottom : 8px;
}

.neon-slider-wrap .neon-rating .sr { color: var(--neon-gold); }

.neon-slider-wrap .neon-price-old {
  font-size       : 11px;
  color           : #555;
  text-decoration : line-through;
}

.neon-slider-wrap .neon-price {
  font-size     : 16px;
  font-weight   : 800;
  color         : #fff;
  margin-bottom : 10px;
}


/* ── BUTTON ──────────────────────────────────────────────────── */

.neon-slider-wrap .neon-btn {
  display     : block;
  width       : 100%;
  background  : transparent;
  border      : 1px solid var(--neon-primary);
  color       : var(--neon-primary);
  border-radius : 8px;
  padding     : 8px;
  font-size   : 12px;
  font-weight : 700;
  text-align  : center;
  cursor      : pointer;
  transition  : background .15s, color .15s;
  text-decoration: none;
  box-sizing  : border-box;
}

.neon-slider-wrap .neon-btn:hover {
  background : var(--neon-primary);
  color      : #fff;
}