/* ==========================================================================
   VIJAY GLOBAL EXPORTS — Contact Page
   ========================================================================== */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--space-xl);
  align-items: flex-start;
}

/* ---- Info side ---- */
.contact-info-card {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  margin-bottom: var(--space-sm);
}
.contact-info-card .icon-tile { width: 50px; height: 50px; margin: 0; flex-shrink: 0; }
.contact-info-card h4 { font-size: 0.98rem; color: var(--color-blue-dark); margin-bottom: 0.25rem; }
.contact-info-card p, .contact-info-card a { font-size: 0.92rem; color: var(--color-ink-soft); display: block; }
.contact-info-card a:hover { color: var(--color-orange-dark); }

.map-frame {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-line);
  margin-top: var(--space-md);
  aspect-ratio: 16/10;
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.hours-card {
  background: var(--color-blue-dark);
  color: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-top: var(--space-sm);
}
.hours-card h4 { color: var(--color-white); font-size: 0.96rem; margin-bottom: 0.6rem; }
.hours-row { display: flex; justify-content: space-between; font-size: 0.88rem; padding-block: 0.35rem; border-bottom: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.85); }
.hours-row:last-child { border-bottom: none; }
.hours-row span:last-child { color: var(--color-gold); font-weight: 600; }

/* ---- Form side ---- */
.form-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-line);
  padding: var(--space-lg);
  box-shadow: var(--shadow-md);
}
.form-card h3 { margin-bottom: 0.3rem; }
.form-card > p.lead { margin-bottom: var(--space-md); font-size: 0.95rem; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }

.field { margin-bottom: var(--space-sm); position: relative; }
.field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-blue-dark);
  margin-bottom: 0.4rem;
}
.field label .req { color: var(--color-orange-dark); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.78rem 1rem;
  border-radius: var(--radius-sm);
  border: 1.6px solid var(--color-line);
  background: var(--color-cream);
  color: var(--color-ink);
  transition: border-color var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft), background var(--dur-fast);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-blue-light); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-orange);
  background: var(--color-white);
  box-shadow: 0 0 0 4px rgba(244,121,32,0.13);
}
.field textarea { resize: vertical; min-height: 110px; }
.field .error-msg {
  display: none;
  font-size: 0.78rem;
  color: #C94B4B;
  margin-top: 0.35rem;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #C94B4B; }
.field.has-error .error-msg { display: block; }

.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A6FA8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 18px; padding-right: 2.6rem; }

.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: var(--space-md);
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}
.consent-row input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--color-orange); flex-shrink: 0; }

.submit-row { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.form-status {
  font-size: 0.88rem;
  font-weight: 600;
  display: none;
  align-items: center;
  gap: 0.4rem;
}
.form-status.is-visible { display: flex; }
.form-status.is-success { color: #1F8A4C; }
.form-status.is-error { color: #C94B4B; }
.form-status svg { width: 17px; height: 17px; }

.btn--whatsapp-submit {
  background: #2DAF5E;
  color: var(--color-white);
  box-shadow: 0 14px 32px rgba(45,175,94,0.3);
}
.btn--whatsapp-submit:hover { background: #25974f; transform: translateY(-3px); box-shadow: 0 20px 40px rgba(45,175,94,0.36); }

/* ---- FAQ ---- */
.faq-list { display: flex; flex-direction: column; gap: 0.7rem; max-width: 760px; margin-inline: auto; }
.faq-item {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.4rem;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--color-blue-dark);
  text-align: left;
}
.faq-q svg { width: 20px; height: 20px; flex-shrink: 0; transition: transform var(--dur-fast) var(--ease-out); color: var(--color-orange); }
.faq-item.is-open .faq-q svg { transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-med) var(--ease-out);
  padding: 0 1.4rem;
}
.faq-a p { padding-bottom: 1.1rem; color: var(--color-ink-soft); font-size: 0.92rem; }
.faq-item.is-open .faq-a { max-height: 240px; }

@media (max-width: 980px) {
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
  .form-card { padding: var(--space-md); }
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand__logo {
  width: 200px;
  height: 55px;
  object-fit: contain;
  display: block;
  margin-left: 0%;
}

.brand__text {
  display: flex;
  flex-direction: column;
}

.brand__name {
  font-size: 1.1rem;
  font-weight: 700;
}

.brand__sub {
  font-size: 0.75rem;
  opacity: 0.8;
}
/* ==========================================
   CONTACT PAGE - COMPACT SPACING & FONTS
   ========================================== */

/* Remove large section gaps */
.section {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

.section--tight {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

.section-head {
  margin-bottom: 20px !important;
}

.section-head h2 {
  font-size: 1.8rem;
  line-height: 1.3;
  margin-bottom: 5px;
}

.section-head .lead {
  font-size: 0.9rem;
  line-height: 1.6;
}

.section-head .eyebrow {
  font-size: 0.75rem;
  margin-bottom: 6px;
}

/* Page Hero */
.page-hero h1 {
  font-size: 2.4rem;
}

.page-hero .lead {
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Contact Info Cards */
.contact-info-card {
  padding: 18px;
}

.contact-info-card h4 {
  font-size: 1rem;
}

.contact-info-card p,
.contact-info-card a {
  font-size: 0.85rem;
  line-height: 1.5;
}

/* Hours Card */
.hours-card {
  padding: 18px;
}

.hours-card h4 {
  font-size: 1rem;
}

.hours-row {
  font-size: 0.85rem;
}

/* Form Card */
.form-card {
  padding: 22px;
}

.form-card h3 {
  font-size: 1.2rem;
}

.form-card > p.lead {
  font-size: 0.9rem;
}

/* Form Fields */
.field label {
  font-size: 0.82rem;
}

.field input,
.field select,
.field textarea {
  font-size: 0.9rem;
  padding: 12px 14px;
}

.field .error-msg {
  font-size: 0.75rem;
}

/* Consent Text */
.consent-row {
  font-size: 0.82rem;
}

/* Submit Status */
.form-status {
  font-size: 0.82rem;
}

/* FAQ */
.faq-q {
  font-size: 0.95rem;
  padding: 1rem 1.2rem;
}

.faq-a p {
  font-size: 0.85rem;
  line-height: 1.6;
}

/* Icons */
.icon-tile {
  width: 52px;
  height: 52px;
}

.icon-tile svg {
  width: 22px;
  height: 22px;
}