/* contact.css - mobile-first styles for contact section, rules panel and footer */

html, body {
  min-height: 100vh;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

.contact-section {
  padding: var(--space-lg) 0 var(--space-xl);
  background: linear-gradient(180deg, rgba(250,248,246,0.02), rgba(255,255,255,0));
}

.contact-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.contact-card {
  background: rgba(255,255,255,0.68);
  border-radius: var(--radius-lg);
  padding: 1rem;
  box-shadow: 0 12px 30px rgba(31,27,23,0.06);
  border: 1px solid rgba(0,0,0,0.04);
  backdrop-filter: blur(8px) saturate(1.02);
}

.contact-item { display:flex; gap:0.75rem; align-items:flex-start; margin-bottom:0.8rem; }
.contact-item i { font-size:1.35rem; color: var(--color-accent-dark); flex:0 0 34px; }
.contact-item strong { display:block; font-weight:700; margin-bottom:0.15rem; }
.contact-item a { color:var(--color-text); text-decoration:none; }

.social-row { display:flex; gap:0.6rem; margin:0.6rem 0 0.4rem; }
.social-btn { width:40px; height:40px; display:inline-grid; place-items:center; border-radius:50%; background:transparent; border:1px solid rgba(0,0,0,0.04); color:var(--color-text); transition:transform .18s ease, background .18s ease, color .18s ease; }
.social-btn i { font-size:1.05rem; }
.social-btn:hover { transform:scale(1.05); background:linear-gradient(90deg,var(--color-accent),#b28845); color:#fff; }

.rules-cta { margin-top:0.9rem; }

.map-wrap {
  width: 100%;
  display: block;
}

.loc-card {
  position: relative;
  width: 100%;
  min-height: clamp(320px, 42vw, 420px);
  border-radius: clamp(20px, 3vw, 32px);
  overflow: hidden;
  isolation: isolate;
  background: #faf9f8;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 20px 50px -30px rgba(0,0,0,.15);
}
.loc-card__bg {
  display: none;
}
.loc-card__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.02) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
  opacity: .4;
}
.loc-card__glow { position: absolute; border-radius: 50%; filter: blur(100px); opacity: .06; pointer-events: none; }
.loc-card__glow--1 { width: 260px; height: 260px; background: #000; top: -80px; right: -60px; }
.loc-card__glow--2 { width: 220px; height: 220px; background: #000; bottom: -70px; left: -50px; }
.loc-card__inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(28px, 5vw, 56px) clamp(20px, 6vw, 48px);
  gap: clamp(10px, 1.6vw, 16px);
}
.loc-card__pin {
  position: relative;
  width: clamp(64px, 9vw, 88px);
  height: clamp(64px, 9vw, 88px);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: clamp(6px, 1vw, 12px);
}
.loc-card__ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,.12);
  animation: locPulse 2.6s cubic-bezier(.4,0,.3,1) infinite;
}
.loc-card__ring--2 { animation-delay: .7s; }
.loc-card__ring--3 { animation-delay: 1.4s; }
@keyframes locPulse {
  0%   { transform: scale(.55); opacity: .9; }
  75%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}
.loc-card__pin-dot {
  position: relative; z-index: 1;
  width: 56%; height: 56%;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #1a1a1a;
  box-shadow: 0 8px 18px -10px rgba(0,0,0,.15), 0 0 0 4px rgba(0,0,0,.03);
  color: #fff;
}
.loc-card__pin-dot svg { width: 55%; height: 55%; }
.loc-card__title {
  font-family: 'Vazir', sans-serif;
  font-weight: 600;
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  color: #1a1a1a;
  margin: 0;
  letter-spacing: -.2px;
}
.loc-card__address {
  font-family: 'Vazir', sans-serif;
  font-size: clamp(.85rem, 1.5vw, 1rem);
  color: rgba(0,0,0,.55);
  max-width: 46ch;
  line-height: 1.9;
  margin: 0;
}
.loc-card__cta {
  position: relative;
  overflow: hidden;
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: clamp(8px, 1.6vw, 18px);
  padding: clamp(12px, 1.6vw, 15px) clamp(24px, 3.2vw, 32px);
  border-radius: 999px;
  font-family: 'Vazir', sans-serif;
  font-weight: 600;
  font-size: clamp(.85rem, 1.4vw, .95rem);
  color: #1a1a1a;
  text-decoration: none;
  background: transparent;
  border: 1.5px solid #1a1a1a;
  box-shadow: none;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease, background .25s ease, color .25s ease;
}
.loc-card__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px -12px rgba(0,0,0,.14);
  background: #1a1a1a;
  color: #fff;
}
.loc-card__cta:active { transform: translateY(0) scale(.99); }
.loc-card__cta-icon { width: 18px; height: 18px; flex-shrink: 0; transform: scaleX(-1) rotate(90deg); }
.loc-card__cta-shine { display: none; }
@media (max-width: 480px) {
  .loc-card { min-height: 340px; border-radius: 22px; }
}


/* rules panel (simple, accessible) */
.rules-panel { position:fixed; inset:0; z-index:3000; visibility:hidden; opacity:0; pointer-events:none; transition:opacity .18s ease, visibility .18s ease; }
.rules-panel.active { visibility:visible; opacity:1; pointer-events:auto; }
.rules-panel .panel-backdrop { position:absolute; inset:0; background:rgba(31,27,23,0.45); }
.rules-panel .rules-panel-content {
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(92vw,720px); max-width:720px; max-height:84vh; overflow:auto;
  background:var(--color-bg); border-radius:12px; padding:1.25rem; box-shadow:0 28px 60px rgba(31,27,23,0.16); border:1px solid rgba(0,0,0,0.04);
}
.rules-panel .panel-close { position:absolute; top:10px; right:10px; width:36px; height:36px; border-radius:50%; border:none; background:rgba(255,255,255,0.96); font-size:1.1rem; cursor:pointer; }
.rules-panel h3 { margin-top:0; text-align:center; }

.rules-list { counter-reset:rules; padding-left:0; margin:1rem 0 0; list-style:none; }
.rules-list li { position:relative; padding:0.8rem 0 0.8rem 3.2rem; line-height:1.55; }
.rules-list li::before { counter-increment:rules; content:counter(rules); position:absolute; left:0; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; display:inline-grid; place-items:center; background:var(--color-accent); color:#fff; font-weight:700; }

/* bottom-sheet on small screens */
@media (max-width:640px) {
  .rules-panel .rules-panel-content { left:50%; top:auto; bottom:0; transform:translateX(-50%); width:100%; max-height:78vh; border-bottom-left-radius:0.8rem; border-bottom-right-radius:0.8rem; padding:0.9rem 0.9rem 1.2rem; }
  .rules-panel .panel-close { top:8px; right:8px; }
}

/* footer */
.site-footer { padding:1.1rem 0; background:var(--color-surface-2, #fbfbfb); color:var(--color-text); }
.footer-container { display:flex; flex-direction:column; gap:1rem; }
.footer-top { display:flex; flex-direction:column; gap:0.8rem; align-items:center; }
.footer-brand { display:flex; gap:0.8rem; align-items:center; text-align:center; }
.footer-links { display:flex; gap:0.9rem; flex-wrap:wrap; justify-content:center; }
.footer-links a { color:var(--color-text); text-decoration:none; opacity:0.9; }
.footer-social { display:flex; gap:0.5rem; }
.footer-sep { border:0; height:1px; background:linear-gradient(90deg, rgba(0,0,0,0.03), rgba(0,0,0,0.06)); margin:0.6rem 0; }
.footer-bottom { display:flex; flex-direction:column; gap:0.4rem; align-items:center; font-size:0.95rem; color:var(--color-text-muted); }
.footer-bottom .credit { display:flex; align-items:center; gap:0.35rem; font-weight:700; font-size:1rem; }
.footer-bottom .credit a { color:#c57ccf; text-decoration:none; font-size:1.05rem; letter-spacing:0.03em; font-family:'Vazir','Segoe UI','Tahoma',sans-serif; }
.footer-bottom .cute-heart { display:inline-block; font-size:1.05rem; transform:translateY(1px); }
.footer-bottom .credit a:hover { color:#9a4ab8; }

@media (min-width: 768px) {
  .contact-grid { grid-template-columns: 1fr 1fr; align-items:stretch; }
  .footer-container { flex-direction:column; }
  .footer-top { flex-direction:row; justify-content:space-between; align-items:center; }
  .footer-brand { text-align:left; }
  .footer-links { justify-content:flex-end; }
  .footer-bottom { flex-direction:row; justify-content:space-between; }
}

/* utility for locking body scroll when modal open */
.no-scroll { overflow:hidden; height:100%; }