/* ==========================================================================
   VIKA — Contact page (Areas/Home/Views/Contact/Index.cshtml)
   Relies on vika.css + vika-inner.css
   ========================================================================== */

.contact-grid {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-6); align-items: start;
}
.contact-info, .contact-form-card { padding: clamp(var(--sp-5), 3.5vw, var(--sp-7)); }
.contact-form-card .form-subtitle { color: var(--fg-muted); font-size: 0.88rem; margin-block-end: var(--sp-6); }

/* info items */
.contact-item { display: flex; gap: var(--sp-4); align-items: flex-start; padding-block: var(--sp-4); border-block-end: 1px solid var(--glass-border); }
.contact-icon {
  flex: 0 0 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--glass-border); color: var(--accent);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.contact-item:hover .contact-icon { border-color: var(--accent); background: oklch(74% 0.09 85 / 0.08); }
.contact-icon svg { width: 20px; height: 20px; fill: currentColor; }
.contact-details h3 { font-size: 0.82rem; font-weight: 500; color: var(--fg-faint); margin-block-end: var(--sp-1); letter-spacing: 0.05em; }
.contact-details p { font-size: 0.92rem; color: var(--fg); line-height: 1.8; }
.contact-details a { transition: color var(--t-fast); }
.contact-details a:hover { color: var(--accent); }

/* working hours */
.working-hours { margin-block-start: var(--sp-5); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--glass-border); }
.working-hours h4 { display: flex; align-items: center; gap: var(--sp-2); font-size: 0.85rem; font-weight: 500; color: var(--accent); margin-block-end: var(--sp-3); }
.hours-row { display: flex; justify-content: space-between; gap: var(--sp-4); font-size: 0.82rem; color: var(--fg-muted); padding-block: var(--sp-1); }

/* social */
.social-media { margin-block-start: var(--sp-5); }
.social-media h4 { font-size: 0.82rem; font-weight: 500; color: var(--fg-faint); margin-block-end: var(--sp-3); }
.social-links { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.social-link {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--glass-border); color: var(--fg-muted);
  transition: border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.social-link:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-3px); }
.social-link svg { width: 20px; height: 20px; }

/* submit */
.submit-btn { width: 100%; justify-content: center; cursor: pointer; }
.submit-btn[disabled] { opacity: 0.65; cursor: wait; transform: none; }
.submit-btn svg { transform: scaleX(-1); } /* arrow points the RTL way */

/* map */
.map-container {
  height: 420px; border: 1px solid var(--glass-border); overflow: hidden;
  filter: grayscale(0.45) contrast(1.05);
  transition: filter var(--t-med);
}
.map-container:hover { filter: none; }
.map-container iframe { display: block; width: 100%; height: 100%; }
.map-placeholder {
  height: 100%; display: grid; place-content: center; text-align: center; gap: var(--sp-2);
  background: var(--glass-bg); color: var(--fg-muted); padding: var(--sp-5);
}
.map-placeholder h3 { color: var(--fg); }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .map-container { height: 320px; }
  .hours-row { font-size: 0.78rem; }
}