/* 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 { position:relative; width:100%; min-height:220px; border-radius: var(--radius-lg); overflow:hidden; box-shadow: 0 12px 30px rgba(31,27,23,0.06); border:1px solid rgba(0,0,0,0.04); }
.map-wrap iframe { display:block; border:0; width:100%; height:100%; min-height:220px; }
.map-wrap .map-overlay { position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; padding:1rem; background:linear-gradient(180deg, rgba(255,255,255,0), rgba(0,0,0,0.32)); color:#fff; text-decoration:none; font-weight:700; font-size:0.98rem; line-height:1.35; }
.map-wrap .map-overlay span { background:rgba(0,0,0,0.55); padding:0.5rem 0.85rem; border-radius:999px; backdrop-filter:blur(4px); }
.map-wrap .map-caption { margin:0.8rem 0 0; text-align:center; }
.map-wrap .map-caption a { color:var(--color-accent); font-weight:700; text-decoration:none; }
.map-wrap .map-caption a:hover { text-decoration:underline; }

/* 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%; }