/* ==========================================================================
   LUCKYCARDSPIN — CONTACT PAGE STYLES
   ========================================================================== */

/* ---------------------------------------------------------------------- *
 * HERO DECORATION
 * ---------------------------------------------------------------------- */
.contact-suit{
  position:absolute;
  font-family: var(--font-display);
  color: var(--gold);
  opacity:0.1;
  pointer-events:none;
  z-index:1;
}
.contact-suit--1{ top:18%; left:6%; font-size:5rem; }
.contact-suit--2{ top:60%; left:14%; font-size:3rem; color: var(--amethyst); }
.contact-suit--3{ top:24%; right:9%; font-size:6.5rem; }

/* ---------------------------------------------------------------------- *
 * CONTACT INFO CARDS
 * ---------------------------------------------------------------------- */
.cards-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}
.contact-card{ padding: var(--sp-6); text-align:left; }
.contact-card h3{ font-size: var(--fs-md); margin-bottom:0.5em; }
.contact-card p{ font-size: var(--fs-base); margin-bottom:0.35em; }
.contact-card p a{ color: var(--ivory); font-weight:600; }
.contact-card p a:hover{ color: var(--gold); }
.contact-card__note{ font-size: var(--fs-xs); color: var(--muted-dim); }

/* ---------------------------------------------------------------------- *
 * FORM + MAP LAYOUT
 * ---------------------------------------------------------------------- */
.contact-main__grid{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items:start;
}

.form-panel{ padding: clamp(1.75rem, 3vw, 3rem); position:relative; }
.form-panel h2{ font-size: var(--fs-2xl); margin-top:0.4em; margin-bottom:0.6em; }
.form-panel__intro{ font-size: var(--fs-base); margin-bottom: var(--sp-6); max-width:52ch; }
.form-panel form{ position:relative; z-index:1; }

.form-success{ text-align:center; padding: var(--sp-8) var(--sp-5); }
.form-success__icon{
  width:64px; height:64px; margin-inline:auto var(--sp-5);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--grad-gold);
  color:#1D1206;
}
.form-success__icon svg{ width:30px; height:30px; }
.form-success h3{ font-size: var(--fs-xl); margin-bottom:0.5em; }
.form-success p{ font-size: var(--fs-base); margin-bottom: var(--sp-6); }

/* ---------------------------------------------------------------------- *
 * MAP PLACEHOLDER
 * ---------------------------------------------------------------------- */
.map-panel{ display:flex; flex-direction:column; gap: var(--sp-5); }
.map-placeholder{
  position:relative;
  aspect-ratio: 4 / 3.3;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  overflow:hidden;
  background: radial-gradient(120% 100% at 20% 0%, #241338 0%, #14091F 60%);
  display:flex; align-items:center; justify-content:center;
}
.map-placeholder__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 30%, transparent 78%);
  mask-image: radial-gradient(circle at 50% 40%, #000 30%, transparent 78%);
}
.map-placeholder__pin{
  position:relative; z-index:1;
  width:56px; height:56px;
  border-radius:50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--grad-gold);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 4.5rem;
  box-shadow: var(--shadow-gold);
}
.map-placeholder__pin svg{ transform: rotate(45deg); width:26px; height:26px; color:#1D1206; }
.map-placeholder__pulse{
  position:absolute; inset:-14px;
  border-radius:50% 50% 50% 0;
  border: 2px solid var(--gold);
  opacity:0.6;
  animation: pin-pulse 2.2s ease-out infinite;
}
@keyframes pin-pulse{ 0%{ transform:scale(0.7); opacity:0.7; } 100%{ transform:scale(1.5); opacity:0; } }
.map-placeholder__card{
  position:absolute; left: var(--sp-5); right: var(--sp-5); bottom: var(--sp-5);
  z-index:2;
  background: rgba(11,7,16,0.82);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  display:flex; flex-direction:column; gap:0.3rem;
}
.map-placeholder__card strong{ font-size: var(--fs-base); color: var(--ivory); }
.map-placeholder__card span{ font-size: var(--fs-xs); color: var(--muted); }
.map-placeholder__card a{
  margin-top:0.6rem;
  display:inline-flex; align-items:center; gap:0.4rem;
  font-size: var(--fs-xs); font-weight:700; color: var(--gold);
}
.map-placeholder__card a svg{ width:14px; height:14px; }
.map-placeholder__card a:hover{ text-decoration:underline; }

.support-hours{ padding: var(--sp-6); }
.support-hours h3{ display:flex; align-items:center; gap:0.6rem; font-size: var(--fs-md); margin-bottom: var(--sp-5); }
.support-hours h3 svg{ width:20px; height:20px; color: var(--gold); }
.support-hours__row{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:0.75rem;
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-sm);
}
.support-hours__row span{ color: var(--muted); }
.support-hours__row strong{ color: var(--ivory); font-weight:600; }

/* ========================================================================
   RESPONSIVE
   ======================================================================== */
@media (max-width: 1180px){
  .cards-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px){
  .contact-main__grid{ grid-template-columns:1fr; }
  .map-panel{ order:-1; }
  .map-placeholder{ aspect-ratio: 16/9; }
}

@media (max-width: 640px){
  .cards-grid{ grid-template-columns: 1fr; }
  .contact-suit--1, .contact-suit--2, .contact-suit--3{ display:none; }
}