/* ============================================================
   contact.css — Space / Cosmos Theme
   Matches exact HTML class names from contact page
   Palette: Deep void · Nebula violet · Pulsar pink · Stardust gold
   ============================================================ */

/* ── Space tokens ─────────────────────────────────────────── */
:root {
  --space-void:      #04060f;
  --space-deep:      #080c1a;
  --space-mid:       #0d1535;
  --space-surface:   #111d42;
  --nebula-pink:     #e91e63;
  --nebula-violet:   #7c3aed;
  --nebula-teal:     #06b6d4;
  --gold:            #C8A96A;
  --gold-dark:       #a8864a;
  --star-white:      #e8f0ff;
  --star-dim:        #8ba0cc;
  --border-v:        rgba(124,58,237,0.28);
  --border-p:        rgba(233,30,99,0.3);
  --border-g:        rgba(200,169,106,0.22);
  --glow-pink:       0 0 18px rgba(233,30,99,0.4),  0 0 40px rgba(233,30,99,0.15);
  --glow-violet:     0 0 18px rgba(124,58,237,0.45), 0 0 40px rgba(124,58,237,0.18);
  --glow-teal:       0 0 14px rgba(6,182,212,0.4);
  --glow-gold:       0 8px 40px rgba(200,169,106,0.3);

  --starfield:
    radial-gradient(ellipse 120% 80% at 15% 20%, rgba(124,58,237,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 80%  60% at 85% 75%, rgba(233,30, 99,0.09) 0%, transparent 55%),
    radial-gradient(ellipse 60%  40% at 50% 10%, rgba(6,182,212,0.07)  0%, transparent 50%),
    linear-gradient(180deg, #04060f 0%, #080c1a 50%, #040810 100%);

  /* Keep the original ease/spring tokens */
  --ease: cubic-bezier(.4,0,.2,1);
  --sp:   cubic-bezier(.34,1.56,.64,1);
  --bo:   cubic-bezier(.68,-.55,.27,1.55);
}

/* ── CSS starfield dots (pure CSS, no JS) ─────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px   1px   at 8%  12%, rgba(255,255,255,0.85) 0%,transparent 100%),
    radial-gradient(1px   1px   at 22% 68%, rgba(200,220,255,0.65) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 38% 29%, rgba(255,255,255,0.90) 0%,transparent 100%),
    radial-gradient(1px   1px   at 54% 80%, rgba(180,200,255,0.70) 0%,transparent 100%),
    radial-gradient(1px   1px   at 67% 11%, rgba(255,255,255,0.80) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 79% 52%, rgba(220,230,255,0.60) 0%,transparent 100%),
    radial-gradient(1px   1px   at 90% 35%, rgba(255,255,255,0.70) 0%,transparent 100%),
    radial-gradient(1px   1px   at 4%  85%, rgba(200,210,255,0.50) 0%,transparent 100%),
    radial-gradient(1px   1px   at 32% 93%, rgba(255,255,255,0.55) 0%,transparent 100%),
    radial-gradient(1px   1px   at 61% 44%, rgba(220,240,255,0.50) 0%,transparent 100%),
    radial-gradient(1px   1px   at 16% 57%, rgba(255,255,255,0.40) 0%,transparent 100%),
    radial-gradient(1px   1px   at 74% 91%, rgba(200,215,255,0.50) 0%,transparent 100%),
    radial-gradient(2px   2px   at 48% 4%,  rgba(255,255,255,0.75) 0%,transparent 100%),
    radial-gradient(1px   1px   at 85% 74%, rgba(255,255,255,0.50) 0%,transparent 100%),
    radial-gradient(1px   1px   at 29% 60%, rgba(180,200,255,0.40) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 95% 20%, rgba(255,255,255,0.60) 0%,transparent 100%),
    radial-gradient(1px   1px   at 43% 48%, rgba(200,220,255,0.45) 0%,transparent 100%),
    radial-gradient(1px   1px   at 70% 63%, rgba(255,255,255,0.35) 0%,transparent 100%);
}



body {
  background: var(--space-void) !important;
  color: var(--star-white) !important;
}


.bbar {
  background: var(--space-deep) !important;
  border-bottom: 1px solid var(--border-v) !important;
}

.bcrumb a       { color: var(--gold) !important; }
.bcrumb .active { color: var(--star-dim) !important; }
.bcrumb a::after { background: var(--gold) !important; }



.hero {
  background:
    radial-gradient(ellipse 70% 100% at 15% 60%, rgba(124,58,237,0.25) 0%, transparent 65%),
    radial-gradient(ellipse 50%  80% at 85% 30%, rgba(233,30, 99,0.20) 0%, transparent 65%),
    radial-gradient(ellipse 40%  50% at 50%  0%, rgba(200,169,106,0.10) 0%, transparent 55%),
    linear-gradient(135deg, #04060f 0%, #0c1025 40%, #0e0818 70%, #080c1a 100%) !important;
}

#particles-canvas { filter: brightness(1.3) contrast(1.2) saturate(1.4) !important; }

.hero-ov {
  background:
    radial-gradient(ellipse 60% 70% at  0% 60%, rgba(233,30, 99,0.20), transparent 55%),
    radial-gradient(ellipse 50% 60% at 100% 20%, rgba(124,58,237,0.18), transparent 50%),
    radial-gradient(ellipse 40% 50% at 50%   0%, rgba(200,169,106,0.10), transparent 60%),
    linear-gradient(180deg, transparent 40%, rgba(4,6,15,0.95) 100%) !important;
}

.hero-grid {
  background-image:
    linear-gradient(rgba(124,58,237,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,58,237,0.07) 1px, transparent 1px) !important;
}

.hero-h1    { color: var(--star-white) !important; }
.hero-sub   { color: var(--star-dim)   !important; }
.hero-tag   { color: var(--gold)       !important; }



.chat-strip {
  background: var(--space-deep) !important;
  border-top:    1px solid var(--border-v) !important;
  border-bottom: 1px solid var(--border-v) !important;
}

.chat-text h4 { color: var(--star-white) !important; }
.chat-text p  { color: var(--star-dim)   !important; }

.chat-btn {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold)) !important;
  color: var(--space-void) !important;
  box-shadow: var(--glow-gold) !important;
}

.chat-btn:hover {
  box-shadow: var(--glow-gold), 0 16px 50px rgba(200,169,106,0.45) !important;
}


.info-section {
  background: var(--starfield) !important;
  position: relative;
}

.info-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 10% 50%, rgba(6,182,212,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 90% 50%, rgba(124,58,237,0.08) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.info-section .container { position: relative; z-index: 1; }

/* Section heading */
.sh h2       { color: var(--star-white) !important; }
.sh p        { color: var(--star-dim)   !important; }
.sh-tag      { color: var(--gold)       !important; }
.sh-tag::before,
.sh-tag::after { background: var(--gold) !important; }
.sh:hover h2 { color: var(--gold) !important; }

/* Info cards */
.info-card {
  background: var(--space-deep)         !important;
  border: 1px solid var(--border-v)     !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04) !important;
  color: var(--star-white)              !important;
}

.info-card::before {
  background: linear-gradient(105deg, transparent 30%, rgba(124,58,237,0.12) 47%, rgba(233,30,99,0.07) 53%, transparent 70%) !important;
  background-size: 300% !important;
}

.info-card:hover {
  box-shadow: var(--glow-violet), 0 20px 60px rgba(0,0,0,0.55) !important;
  border-color: rgba(124,58,237,0.55) !important;
}

.info-card::after {
  background: linear-gradient(90deg, var(--nebula-pink), var(--nebula-violet), var(--nebula-teal)) !important;
}

.info-icon {
  background: linear-gradient(135deg, var(--nebula-pink), var(--nebula-violet)) !important;
  box-shadow: var(--glow-pink) !important;
}

.info-card:hover .info-icon {
  box-shadow: 0 14px 40px rgba(233,30,99,0.55) !important;
}

.info-card h3 {
  color: var(--nebula-teal) !important;
  text-shadow: var(--glow-teal) !important;
}

.info-card p { color: var(--star-dim) !important; }

.info-card a {
  color: var(--nebula-pink) !important;
  font-family: inherit;
}

.info-card:hover a {
  color: #ff6090 !important;
  text-shadow: var(--glow-pink);
}

.info-card a::after { background: var(--nebula-pink) !important; }



.form-section {
  background: var(--starfield) !important;
  position: relative;
}

.form-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 70% at  5% 30%, rgba(233,30,99,0.07)  0%, transparent 55%),
    radial-gradient(ellipse 50% 70% at 95% 70%, rgba(6,182,212,0.06)  0%, transparent 55%);
  pointer-events: none;
}

/* Form card wrapper */
.form-wrap {
  background: var(--space-deep)     !important;
  border: 1px solid var(--border-v) !important;
  box-shadow: 0 12px 48px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05) !important;
  position: relative;
  overflow: hidden;
}

/* Nebula corner accents */
.form-wrap::before {
  content: '';
  position: absolute;
  top: -50px; left: -50px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(124,58,237,0.16) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.form-wrap::after {
  content: '';
  position: absolute;
  bottom: -50px; right: -50px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(233,30,99,0.14) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.form-header {
  background: linear-gradient(135deg, #04060f, var(--space-mid)) !important;
  position: relative;
  z-index: 1;
}

.form-header::before {
  background: radial-gradient(ellipse 80% 60% at 0% 100%, rgba(233,30,99,0.18), transparent 60%) !important;
}

.form-header h3 { color: var(--star-white) !important; }
.form-header p  { color: var(--star-dim)   !important; }
.form-header::after { background: var(--border-v) !important; }

/* Inputs */
.fg label { color: var(--star-dim) !important; }
.fg label.req::after { color: var(--nebula-pink) !important; }

.fg input,
.fg select,
.fg textarea {
  background: rgba(13,21,53,0.75)   !important;
  border: 1px solid var(--border-v) !important;
  color: var(--star-white)          !important;
  border-radius: 10px               !important;
}

.fg input::placeholder,
.fg textarea::placeholder { color: var(--star-dim) !important; }

.fg select { color: var(--star-dim) !important; }
.fg select option { background: var(--space-mid) !important; color: var(--star-white) !important; }

.fg input:hover,
.fg select:hover,
.fg textarea:hover {
  border-color: rgba(124,58,237,0.45) !important;
  background: rgba(13,21,53,0.88)     !important;
}

.fg input:focus,
.fg select:focus,
.fg textarea:focus {
  border-color: var(--nebula-violet)                         !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.22), var(--glow-violet) !important;
  background: rgba(13,21,53,0.95)                            !important;
}

.fg input:focus ~ label,
.fg textarea:focus ~ label { color: var(--gold) !important; }

.char-cnt { color: rgba(200,169,106,0.45) !important; }

/* Submit */
.submit-btn {
  background: linear-gradient(135deg, var(--nebula-pink), var(--nebula-violet)) !important;
  box-shadow: var(--glow-pink) !important;
}

.submit-btn::before {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold)) !important;
}

.submit-btn:hover {
  box-shadow: var(--glow-pink), 0 16px 50px rgba(233,30,99,0.45) !important;
}

.submit-btn:hover span,
.submit-btn:hover i { color: var(--space-void) !important; }

/* Success message */
.success-msg {
  background: linear-gradient(135deg, rgba(5,150,105,0.14), rgba(5,150,105,0.06)) !important;
  border: 1px solid rgba(5,150,105,0.45) !important;
  box-shadow: 0 0 20px rgba(5,150,105,0.2) !important;
}

.success-msg i  { color: #34d399 !important; filter: drop-shadow(0 0 10px rgba(52,211,153,0.5)); }
.success-msg h4 { color: #34d399 !important; }
.success-msg p  { color: var(--star-dim) !important; }

/* ── MAP + HOURS side ────────────────────────────────────── */

.map-wrap {
  border: 1px solid var(--border-v)     !important;
  box-shadow: var(--glow-violet), 0 12px 40px rgba(0,0,0,0.55) !important;
}

.map-wrap::before {
  background: linear-gradient(90deg, var(--nebula-pink), var(--gold), var(--nebula-teal)) !important;
}

.map-wrap iframe {
  filter: invert(0.92) hue-rotate(180deg) saturate(0.45) brightness(0.72) !important;
}

/* Hours card */
.hours-card {
  background: var(--space-deep)     !important;
  border: 1px solid var(--border-v) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.45) !important;
  position: relative;
  overflow: hidden;
}

.hours-card::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(6,182,212,0.12) 0%, transparent 70%);
  pointer-events: none;
}

.hours-header {
  background: linear-gradient(135deg, #04060f, var(--space-mid)) !important;
  border-bottom: 1px solid var(--border-v);
}

.hours-header i  { color: var(--gold)       !important; }
.hours-header h4 { color: var(--star-white) !important; }

.hours-list li {
  border-bottom: 1px solid rgba(124,58,237,0.2) !important;
  color: var(--star-white) !important;
}

.hours-list li:hover {
  background: rgba(124,58,237,0.08) !important;
}

.hours-list .day    { color: var(--star-white) !important; }
.hours-list .time   { color: var(--star-dim)   !important; }
.hours-list .open   { color: #34d399           !important; font-weight: 600; }
.hours-list .closed { color: var(--nebula-pink) !important; }



.faq-section {
  background: var(--starfield) !important;
  position: relative;
}

.faq-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(6,182,212,0.06) 0%, transparent 60%);
  pointer-events: none;
}

.faq-item {
  background: var(--space-deep)     !important;
  border: 1px solid var(--border-v) !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.4) !important;
}

.faq-item:hover {
  border-color: rgba(124,58,237,0.5)      !important;
  box-shadow: var(--glow-violet), 0 8px 30px rgba(0,0,0,0.45) !important;
}

.faq-q {
  color: var(--nebula-teal) !important;
  background: transparent   !important;
}

.faq-q::before {
  background: linear-gradient(90deg, rgba(124,58,237,0.08), transparent) !important;
}

.faq-q:hover { color: #7dd3fc !important; }

.faq-q.active {
  color: var(--star-white)                       !important;
  background: rgba(124,58,237,0.12)              !important;
}

.faq-icon {
  background: rgba(124,58,237,0.12) !important;
  color: var(--nebula-violet)       !important;
}

.faq-q:hover .faq-icon,
.faq-q.active .faq-icon {
  background: var(--nebula-violet) !important;
  color: var(--star-white)         !important;
}

.faq-a {
  color: var(--star-dim) !important;
  border-top: 1px solid var(--border-v);
}



.social-section {
  background:
    radial-gradient(ellipse 80% 60% at 20% 50%, rgba(124,58,237,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 50%, rgba(233,30, 99,0.20) 0%, transparent 60%),
    linear-gradient(135deg, #04060f 0%, #0b0b20 50%, #100818 100%) !important;
  border-top:    1px solid var(--border-v) !important;
  border-bottom: 1px solid var(--border-v) !important;
}

/* Nebula streak */
.social-section::before {
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(124,58,237,0.45) 25%,
      rgba(6,182,212,0.55) 50%,
      rgba(233,30, 99,0.45) 75%,
      transparent 100%) !important;
}

/* Kill the star-ticker text on this section (it said "★ ✦ ★") */
.social-section::after {
  color: rgba(124,58,237,0.18) !important;
}

.social-section h3 {
  color: var(--star-white) !important;
  text-shadow: 0 0 24px rgba(124,58,237,0.55) !important;
}

.social-section p { color: var(--star-dim) !important; }

.social-linkcon {
  background: var(--space-deep)     !important;
  border: 1.5px solid var(--border-v) !important;
  color: var(--nebula-violet)       !important;
  box-shadow: 0 0 12px rgba(124,58,237,0.2) !important;
}

.social-linkcon::before {
  background: radial-gradient(circle, rgba(124,58,237,0.5), rgba(233,30,99,0.4)) !important;
}

.social-linkcon:hover {
  box-shadow: var(--glow-violet), 0 12px 32px rgba(124,58,237,0.35) !important;
  border-color: rgba(124,58,237,0.7) !important;
}

.social-linkcon:hover i { color: var(--gold) !important; }



@media (max-width: 768px) {
  .hero-h1 { text-shadow: 0 0 16px rgba(124,58,237,0.55), 0 2px 6px rgba(0,0,0,0.65) !important; }
  .form-header, .form-body { padding: 1.5rem !important; }
  .form-wrap::before, .form-wrap::after { width: 120px; height: 120px; }
}