/*
Theme Name: Hello Elementor Child - Velvet Noir
Theme URI: https://velvetnoir.internal
Description: Custom luxury dark-mode child theme for Velvet Noir - an elevated adult dating, intimacy, and nocturnal lifestyle blog. Optimized for Elementor Free with native widgets, bespoke typography, and neon magenta accents.
Author: Velvet Noir Creative Studio
Author URI: https://velvetnoir.internal
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v2 or later
*/

/* ==========================================================================
   VELVET NOIR DESIGN TOKENS & CSS VARIABLES
   ========================================================================== */
:root {
  /* Canvas & Surface Layers */
  --vn-bg-canvas: #0d0d0f;
  --vn-surface-base: #121215;
  --vn-surface-card: #18181d;
  --vn-surface-card-hover: #1f1f26;
  --vn-surface-glass: rgba(24, 24, 29, 0.72);
  --vn-surface-glass-high: rgba(30, 30, 38, 0.88);

  /* Neon & Brand Accents */
  --vn-neon-rose: #ff2a6d;
  --vn-neon-rose-hover: #ff4785;
  --vn-neon-rose-dim: rgba(255, 42, 109, 0.12);
  --vn-neon-rose-border: rgba(255, 42, 109, 0.35);
  --vn-crimson: #9b1756;
  --vn-nocturne-wine: #3a1028;

  /* Typography & High-Contrast Neutrals */
  --vn-text-ivory: #f5f5f7;
  --vn-text-muted: #a0a0a8;
  --vn-text-smoke: #5a5a65;
  --vn-border-hairline: rgba(255, 255, 255, 0.08);
  --vn-border-light: rgba(255, 255, 255, 0.14);

  /* Glow Effects & Shadows */
  --vn-glow-primary: 0 0 24px rgba(255, 42, 109, 0.38);
  --vn-glow-intense: 0 0 36px rgba(255, 42, 109, 0.65);
  --vn-shadow-elevation: 0 16px 40px -12px rgba(0, 0, 0, 0.85);

  /* Font Families */
  --vn-font-display: 'Playfair Display', Georgia, serif;
  --vn-font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Radius */
  --vn-radius-pill: 9999px;
  --vn-radius-card: 18px;
  --vn-radius-sm: 8px;
}

/* Base Body Styles */
body {
  background-color: var(--vn-bg-canvas) !important;
  color: var(--vn-text-muted);
  font-family: var(--vn-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.entry-title,
.elementor-heading-title {
  color: var(--vn-text-ivory);
  font-family: var(--vn-font-display);
  letter-spacing: -0.015em;
  font-weight: 600;
}

p, .elementor-text-editor {
  color: var(--vn-text-muted);
  font-family: var(--vn-font-body);
  line-height: 1.7;
}

a {
  color: var(--vn-neon-rose);
  text-decoration: none;
  transition: all 0.25s ease;
}

a:hover {
  color: var(--vn-neon-rose-hover);
}

/* Selection Color */
::selection {
  background: var(--vn-neon-rose);
  color: #ffffff;
}

/* ==========================================================================
   DISCREET PRIVACY & PANIC BAR
   ========================================================================== */
.vn-discretion-bar {
  background: #09090b;
  border-bottom: 1px solid var(--vn-border-hairline);
  padding: 8px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-family: var(--vn-font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  z-index: 9999;
  position: relative;
}

.vn-discretion-info {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--vn-text-muted);
}

.vn-pulse-indicator {
  width: 7px;
  height: 7px;
  background-color: var(--vn-neon-rose);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 10px var(--vn-neon-rose);
  animation: vn-pulse 2s infinite ease-in-out;
}

@keyframes vn-pulse {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 14px var(--vn-neon-rose); }
  100% { transform: scale(0.9); opacity: 0.7; }
}

.vn-panic-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--vn-border-hairline);
  color: var(--vn-text-ivory) !important;
  padding: 4px 14px;
  border-radius: var(--vn-radius-pill);
  font-size: 10px;
  font-weight: 700;
  text-decoration: none !important;
  cursor: pointer;
  transition: all 0.2s ease;
}

.vn-panic-btn:hover {
  background: #c6002f;
  border-color: #ff2a6d;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(198, 0, 47, 0.6);
}

/* ==========================================================================
   VELVET NOIR CARDS & GLASSMORPHISM (FOR ELEMENTOR CONTAINERS & WIDGETS)
   ========================================================================== */

/* Main Card Container Class: Apply to any native Elementor Container */
.velvet-card {
  background: var(--vn-surface-glass) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--vn-border-hairline) !important;
  border-radius: var(--vn-radius-card) !important;
  padding: 24px;
  transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  overflow: hidden;
}

/* Subtle Light Rim / Gradient Border Sweep */
.velvet-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--vn-border-light), transparent);
  transition: all 0.35s ease;
  opacity: 0.7;
}

/* Card Hover State */
.velvet-card:hover {
  background: var(--vn-surface-glass-high) !important;
  border-color: var(--vn-neon-rose-border) !important;
  transform: translateY(-5px);
  box-shadow: var(--vn-shadow-elevation), 0 0 25px rgba(255, 42, 109, 0.15) !important;
}

.velvet-card:hover::before {
  background: linear-gradient(90deg, transparent, var(--vn-neon-rose), transparent);
  opacity: 1;
}

/* ==========================================================================
   PILL BADGES & CATEGORY CHIPS
   ========================================================================== */
.velvet-badge {
  display: inline-flex;
  align-items: center;
  background: var(--vn-neon-rose-dim) !important;
  border: 1px solid var(--vn-neon-rose-border) !important;
  color: var(--vn-neon-rose) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 4px 12px !important;
  border-radius: var(--vn-radius-pill) !important;
  line-height: 1.4 !important;
  width: fit-content;
}

.velvet-meta-text {
  font-size: 12px;
  color: var(--vn-text-smoke);
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ==========================================================================
   BUTTONS (ELEMENTOR NATIVE BUTTON WIDGET OVERRIDES)
   ========================================================================== */

/* Primary Neon Glowing Capsule Button */
.velvet-btn-primary .elementor-button,
a.velvet-btn-primary {
  background: linear-gradient(135deg, #ff2a6d 0%, #c71754 100%) !important;
  color: #ffffff !important;
  font-family: var(--vn-font-body) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 14px 32px !important;
  border-radius: var(--vn-radius-pill) !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(255, 42, 109, 0.42) !important;
  transition: all 0.3s ease !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.velvet-btn-primary .elementor-button:hover,
a.velvet-btn-primary:hover {
  background: linear-gradient(135deg, #ff4785 0%, #d81c5f 100%) !important;
  box-shadow: 0 6px 28px rgba(255, 42, 109, 0.65) !important;
  transform: translateY(-2px) scale(1.02);
  color: #ffffff !important;
}

/* Secondary Frosted Glass Capsule Button */
.velvet-btn-secondary .elementor-button,
a.velvet-btn-secondary {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: var(--vn-text-ivory) !important;
  font-family: var(--vn-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 13px 28px !important;
  border-radius: var(--vn-radius-pill) !important;
  border: 1px solid var(--vn-border-hairline) !important;
  transition: all 0.3s ease !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.velvet-btn-secondary .elementor-button:hover,
a.velvet-btn-secondary:hover {
  background: rgba(255, 42, 109, 0.12) !important;
  border-color: var(--vn-neon-rose) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}

/* ==========================================================================
   IMAGE BOX & CATEGORY TILES (ELEMENTOR FREE IMAGE BOX WIDGET)
   ========================================================================== */
.velvet-image-box .elementor-image-box-wrapper {
  background: var(--vn-surface-card);
  border: 1px solid var(--vn-border-hairline);
  border-radius: var(--vn-radius-card);
  padding: 24px;
  transition: all 0.35s ease;
  text-align: left !important;
  position: relative;
  overflow: hidden;
}

.velvet-image-box .elementor-image-box-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at top right, rgba(255, 42, 109, 0.12), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.velvet-image-box:hover .elementor-image-box-wrapper {
  border-color: var(--vn-neon-rose-border);
  transform: translateY(-6px);
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.9), 0 0 20px rgba(255, 42, 109, 0.2);
}

.velvet-image-box:hover .elementor-image-box-wrapper::before {
  opacity: 1;
}

.velvet-image-box .elementor-image-box-title {
  color: var(--vn-text-ivory) !important;
  font-family: var(--vn-font-display) !important;
  font-size: 20px !important;
  margin-top: 14px !important;
  margin-bottom: 8px !important;
  transition: color 0.25s ease;
}

.velvet-image-box:hover .elementor-image-box-title {
  color: var(--vn-neon-rose) !important;
}

.velvet-image-box .elementor-image-box-description {
  color: var(--vn-text-muted) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* ==========================================================================
   ACCORDION & SAFETY / FAQ WIDGET (ELEMENTOR FREE ACCORDION)
   ========================================================================== */
.velvet-accordion .elementor-accordion-item {
  border: 1px solid var(--vn-border-hairline) !important;
  background: var(--vn-surface-card) !important;
  border-radius: var(--vn-radius-sm) !important;
  margin-bottom: 12px !important;
  overflow: hidden;
  transition: all 0.3s ease;
}

.velvet-accordion .elementor-tab-title {
  background: transparent !important;
  padding: 18px 24px !important;
  color: var(--vn-text-ivory) !important;
  font-family: var(--vn-font-body) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border: none !important;
}

.velvet-accordion .elementor-tab-title.elementor-active {
  color: var(--vn-neon-rose) !important;
  background: rgba(255, 42, 109, 0.05) !important;
  border-bottom: 1px solid var(--vn-border-hairline) !important;
}

.velvet-accordion .elementor-tab-title .elementor-accordion-icon {
  color: var(--vn-neon-rose) !important;
}

.velvet-accordion .elementor-tab-content {
  background: transparent !important;
  padding: 20px 24px !important;
  color: var(--vn-text-muted) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  border: none !important;
}

/* ==========================================================================
   DISCREET VIP NEWSLETTER / HTML FORM COMPONENT
   ========================================================================== */
.vn-vip-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 560px;
  margin-top: 18px;
}

.vn-vip-input {
  flex: 1 1 260px;
  background: #0f0f12 !important;
  border: 1px solid var(--vn-border-hairline) !important;
  color: var(--vn-text-ivory) !important;
  font-family: var(--vn-font-body) !important;
  font-size: 14px !important;
  padding: 14px 20px !important;
  border-radius: var(--vn-radius-pill) !important;
  outline: none !important;
  transition: all 0.3s ease;
}

.vn-vip-input::placeholder {
  color: var(--vn-text-smoke);
}

.vn-vip-input:focus {
  border-color: var(--vn-neon-rose) !important;
  box-shadow: 0 0 16px rgba(255, 42, 109, 0.25) !important;
}

.vn-vip-submit {
  background: linear-gradient(135deg, #ff2a6d 0%, #c71754 100%) !important;
  color: #ffffff !important;
  border: none !important;
  font-family: var(--vn-font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 14px 28px !important;
  border-radius: var(--vn-radius-pill) !important;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(255, 42, 109, 0.4) !important;
  transition: all 0.3s ease;
}

.vn-vip-submit:hover {
  background: linear-gradient(135deg, #ff4785 0%, #d81c5f 100%) !important;
  box-shadow: 0 6px 24px rgba(255, 42, 109, 0.65) !important;
  transform: translateY(-2px);
}

/* ==========================================================================
   AMBIENT GLOW BACKGROUND BLURS
   ========================================================================== */
.vn-ambient-aura-magenta {
  position: absolute;
  width: 550px;
  height: 350px;
  background: radial-gradient(circle, rgba(255, 42, 109, 0.16) 0%, rgba(58, 16, 40, 0.08) 50%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.vn-ambient-aura-purple {
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(155, 23, 86, 0.15) 0%, transparent 70%);
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}