/* ===== Variables ===== */
:root{
  --bg:#606470; --ink:#F7F7F7; --nav:#323643; --accent:#FF570C;
  --container:min(1200px,92%);
  --border:rgba(255,255,255,.16);
  --card:rgba(255,255,255,.08);
  --shadow:0 16px 48px rgba(0,0,0,.30);
}

/* ===== Base ===== */
.page-contact *{box-sizing:border-box}
.page-contact{
  min-height:100dvh;
  background:var(--bg);
  color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,"Vazirmatn",Tahoma,sans-serif;
}
.page-contact a{color:inherit;text-decoration:none}

/* ===== Wrapper — with map: 2 col, no map: 1 col centered ===== */
.page-contact .contact-wrap{
  width:var(--container);
  margin-inline:auto;
  padding:52px 0 64px;
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:28px;
  align-items:start;
}
.page-contact .contact-wrap.no-map{
  grid-template-columns:1fr;
  max-width:600px;
}

/* ===== Info card ===== */
.page-contact .info-col{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:24px;
  padding:36px 32px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:28px;
}
.page-contact .info-title{
  margin:0;
  font-size:2rem;
  font-weight:900;
  color:var(--accent);
  line-height:1.2;
}

/* Info rows */
.page-contact .info-row{
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.page-contact .info-icon{
  font-size:1.4rem;
  flex-shrink:0;
  margin-top:3px;
}
.page-contact .info-text{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.page-contact .info-label{
  font-size:.78rem;
  font-weight:800;
  color:var(--accent);
  letter-spacing:.05em;
  text-transform:uppercase;
  opacity:.9;
}
.page-contact .info-text p{
  margin:0;
  line-height:1.8;
  font-size:1rem;
}
.page-contact .info-text a{font-weight:700}
.page-contact .info-text a:hover{color:var(--accent)}
.page-contact .sep{opacity:.4;margin-inline:4px}

/* ===== Buttons — same style as about page ===== */
.page-contact .contact-btns{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.page-contact .con-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:999px;
  font-weight:800;
  font-size:.95rem;
  padding:.75rem 1.2rem;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
  transition:transform .18s, filter .18s;
  white-space:nowrap;
  cursor:pointer;
}
.page-contact .con-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.page-contact .btn-rubika  {background:#00A1E4;color:#fff}
.page-contact .btn-bale    {background:#21A67A;color:#fff}
.page-contact .btn-whatsapp{background:#25D366;color:#fff}
.page-contact .btn-call    {background:var(--accent);color:#1b1b1b}

/* ===== Map column ===== */
.page-contact .map-col{
  border-radius:24px;
  overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid var(--border);
  position:sticky;
  top:80px;         /* sticks while scrolling info */
}
.page-contact .map-frame-wrap{position:relative}
.page-contact .map-frame-wrap iframe{
  display:block;
  width:100%;
  height:500px;
  border:0;
}
.page-contact .map-btns{
  position:absolute;
  bottom:14px;
  inset-inline-end:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-end;
}
.page-contact .map-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:800;
  font-size:.85rem;
  padding:.5rem 1rem;
  border-radius:999px;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
  transition:transform .18s,filter .18s;
  white-space:nowrap;
}
.page-contact .map-btn:hover{transform:translateY(-2px);filter:brightness(1.1)}
.page-contact .map-btn-neshan{background:#E84131;color:#fff}
.page-contact .map-btn-google{background:#fff;color:#222}

/* ===== Responsive — Tablet (≤960px) ===== */
@media(max-width:960px){
  .page-contact .contact-wrap{
    grid-template-columns:1fr;
    padding:36px 0 48px;
    gap:22px;
  }
  .page-contact .map-col{position:static}
  .page-contact .map-frame-wrap iframe{height:380px}
  .page-contact .info-title{font-size:1.7rem}
}

/* ===== Responsive — Mobile (≤600px) ===== */
@media(max-width:600px){
  .page-contact .contact-wrap{padding:24px 0 36px;gap:18px}
  .page-contact .info-col{padding:24px 20px;gap:20px}
  .page-contact .info-title{font-size:1.45rem}
  .page-contact .map-frame-wrap iframe{height:300px}
  .page-contact .con-btn{font-size:.88rem;padding:.65rem 1rem}
}

/* ===== Responsive — Small mobile (≤420px) ===== */
@media(max-width:420px){
  .page-contact .contact-wrap.no-map{max-width:100%}
  .page-contact .info-col{padding:20px 16px;border-radius:16px}
  .page-contact .map-col{border-radius:16px}
  .page-contact .map-frame-wrap iframe{height:260px}
  .page-contact .con-btn{width:100%;justify-content:center}
  .page-contact .info-title{font-size:1.3rem}
}

/* ===== Light theme ===== */
html.theme-light{
  --bg:#EFEFEF; --ink:#0F203C; --nav:#232323; --ink-nav:#EFEFEF;
  --shadow:0 10px 30px rgba(0,0,0,.12);
  --card:rgba(0,0,0,.04); --border:rgba(0,0,0,.10);
}