/* =========================================================
   VanaaCred — contact.css
   Styles unique to the Contact Us page: contact info card,
   map placeholder, business hours, and the contact form.
   Loads after base.css.
   ========================================================= */

/* Card heading size used by both the contact-info card and the
   form card — previously inline style="font-size:1.3rem;" */
.card-title--lg { font-size: 1.3rem; }

/* Form intro paragraph — previously inline
   style="color:var(--ink-500);font-size:0.95rem;" */
.form-intro-text { color: var(--ink-500); font-size: 0.95rem; }

/* Consent checkbox row — previously inline
   style="display:flex;align-items:flex-start;gap:10px;font-size:0.85rem;
   color:var(--ink-500);margin-bottom:22px;" on the label and
   style="margin-top:3px;width:16px;height:16px;flex-shrink:0;" on the input */
.consent-label {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.85rem; color: var(--ink-500); margin-bottom: 22px;
}
.consent-checkbox { margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0; }

/* =========================== Contact =========================== */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: start; }
.contact-info-card { border-radius: var(--r-lg); padding: 34px; }
.contact-info-row { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--ink-100); }
.contact-info-row:last-child { border-bottom: none; }
.contact-info-row .icon-tile { margin: 0; flex-shrink: 0; width: 48px; height: 48px; }
.contact-info-row .icon-tile svg { width: 22px; height: 22px; }
.contact-info-row h4 { font-size: 0.98rem; margin-bottom: 4px; }
.contact-info-row p, .contact-info-row a { color: var(--ink-500); font-size: 0.93rem; line-height: 1.55; }
.contact-info-row a:hover { color: var(--blue-700); }

.map-placeholder {
  margin-top: 24px; border-radius: var(--r-lg); overflow: hidden;
  height: 220px; position: relative;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
}
.map-placeholder .grid-lines {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--blue-100) 1px, transparent 1px), linear-gradient(90deg, var(--blue-100) 1px, transparent 1px);
  background-size: 28px 28px;
}
.map-placeholder .pin {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -100%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.map-placeholder .pin .pin-icon {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--grad-cta); display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-orange);
  animation: pulse-pin 2.4s infinite;
}
.map-placeholder .pin .pin-icon svg { width: 22px; height: 22px; color: white; }
.map-placeholder .pin span { font-size: 0.78rem; font-weight: 700; color: var(--blue-800); background: white; padding: 4px 10px; border-radius: var(--r-pill); box-shadow: var(--shadow-sm); }
@keyframes pulse-pin { 0%,100% { box-shadow: 0 0 0 0 rgba(245,130,31,0.35), var(--shadow-orange); } 50% { box-shadow: 0 0 0 10px rgba(245,130,31,0), var(--shadow-orange); } }

.hours-list { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.hours-list li { display: flex; justify-content: space-between; font-size: 0.92rem; color: var(--ink-500); padding: 6px 0; border-bottom: 1px dashed var(--ink-100); }
.hours-list li:last-child { border-bottom: none; }
.hours-list li strong { color: var(--ink-900); font-weight: 600; }

.form-card { border-radius: var(--r-xl); padding: 40px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { margin-bottom: 20px; position: relative; }
.field label { display: block; font-size: 0.86rem; font-weight: 700; color: var(--blue-900); margin-bottom: 8px; }
.field .req { color: var(--orange-500); }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 16px; border-radius: var(--r-sm);
  border: 1.5px solid var(--ink-100); background: var(--white);
  color: var(--ink-900); font-size: 0.96rem;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--blue-500); box-shadow: 0 0 0 4px var(--blue-100); outline: none;
}
.field textarea { resize: vertical; min-height: 130px; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--danger); }
.field .error-msg { display: none; color: var(--danger); font-size: 0.8rem; margin-top: 6px; font-weight: 600; }
.field.has-error .error-msg { display: block; }

.form-alert {
  display: none; align-items: center; gap: 12px;
  padding: 16px 20px; border-radius: var(--r-md); margin-bottom: 22px;
  font-size: 0.92rem; font-weight: 600;
}
.form-alert.is-visible { display: flex; }
.form-alert--success { background: #e9f9f1; color: var(--success); border: 1px solid #bfe9d4; }
.form-alert--error { background: #fdecea; color: var(--danger); border: 1px solid #f6c6c2; }
.form-alert svg { width: 20px; height: 20px; flex-shrink: 0; }

.contact-faq-note { display: flex; align-items: center; gap: 14px; margin-top: 8px; }

/* =========================== Responsive =========================== */
@media (max-width: 1080px) {
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .form-row { grid-template-columns: 1fr; }
  .contact-info-row { flex-direction: column; }
}