/* ================================================
   CONTACT VIEW CSS — Priya's Spize Works
   ================================================ */

/* Page hero */
#view-contact .page-hero { height: 45vh; min-height: 320px; }
#view-contact .page-hero-bg {
  background-image: url('https://images.unsplash.com/photo-1467003909585-2f8a72700288?w=1920&q=80');
}
#view-contact .page-hero-overlay { background: rgba(10,10,10,0.75); }

/* ---- CONTACT SECTION ---- */
.contact-section { padding: 6rem 2rem; }
.contact-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 5rem; max-width: 1300px; margin: 0 auto; }
.form-title { font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 900; margin-bottom: 0.5rem; }
.form-subtitle { font-size: 0.9rem; color: rgba(255,255,255,0.55); margin-bottom: 2.5rem; line-height: 1.7; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.form-group textarea { min-height: 130px; }
.submit-btn {
  width: 100%; padding: 1.1rem; background: var(--gold); color: var(--black);
  border: none; font-family: 'Montserrat', sans-serif; font-size: 0.82rem;
  font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
  cursor: pointer; transition: all 0.3s; margin-top: 0.5rem;
}
.submit-btn:hover { background: var(--gold-light); transform: translateY(-2px); }
.form-success { display: none; text-align: center; padding: 3rem 2rem; border: 1px solid rgba(200,169,81,0.3); }
.form-success .success-icon { font-size: 3rem; display: block; margin-bottom: 1rem; }
.form-success h3 { font-size: 1.5rem; color: var(--gold); margin-bottom: 0.5rem; }
.form-success p { font-size: 0.9rem; color: rgba(255,255,255,0.6); line-height: 1.7; }

/* ---- CONTACT SIDEBAR ---- */
.sidebar-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.4rem; }
.sidebar-sub { font-size: 0.85rem; color: rgba(255,255,255,0.5); margin-bottom: 2rem; line-height: 1.7; }
.contact-info-item { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.8rem; padding-bottom: 1.8rem; border-bottom: 1px solid rgba(255,255,255,0.07); }
.contact-info-item:last-of-type { border-bottom: none; }
.ci-icon { width: 42px; height: 42px; background: rgba(200,169,81,0.1); border: 1px solid rgba(200,169,81,0.25); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.ci-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 0.3rem; }
.ci-value { font-size: 0.88rem; color: rgba(255,255,255,0.75); line-height: 1.5; }
.ci-value a { color: rgba(255,255,255,0.75); transition: color 0.3s; }
.ci-value a:hover { color: var(--gold); }
.social-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; margin-top: 2rem; display: block; }
.social-links { display: flex; gap: 0.8rem; }
.social-link { width: 42px; height: 42px; border: 1px solid rgba(200,169,81,0.25); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; transition: all 0.3s; }
.social-link:hover { background: var(--gold); color: var(--black); border-color: var(--gold); }

/* ---- MAP ---- */
.map-section { padding: 0 2rem 5rem; }
.map-wrap { max-width: 1300px; margin: 0 auto; }
.map-embed-wrap { position: relative; }
.map-circle-overlay {
  position: absolute; inset: 0; pointer-events: none;
}
.map-circle-overlay svg { width: 100%; height: 100%; }
.map-label {
  background: rgba(10,10,10,0.88); color: rgba(200,169,81,0.9);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  text-align: center; padding: 0.6rem 1rem;
  border-top: 1px solid rgba(200,169,81,0.2);
}

/* ---- RESPONSIVE ---- */
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
}
@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
}