/* ==========================================================================
   contact.css — Contact page (2jnew.pk)
   ========================================================================== */

.contact-layout { display: grid; gap: clamp(var(--space-8), 4vw, var(--space-12)); }
@media (min-width: 1000px) { .contact-layout { grid-template-columns: 1.15fr 0.85fr; align-items: start; } }

/* --- Form -------------------------------------------------------------- */
.form-card { padding: clamp(var(--space-6), 3.5vw, var(--space-10)); }
.form-grid { display: grid; gap: var(--space-6); }
@media (min-width: 620px) { .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.field { position: relative; }
.field label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-charcoal-muted);
}
.field label .req { color: var(--color-accent); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.75rem 0.25rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-charcoal);
  transition: border-color var(--transition-normal);
  appearance: none;
}
.field textarea { min-height: 148px; resize: vertical; line-height: var(--line-height-normal); }
.field select { cursor: pointer; }
.field input::placeholder, .field textarea::placeholder { color: #B6B1A6; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-bottom-color: var(--color-accent);
}
/* Gold focus underline that grows from the left */
.field::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--color-accent-foil);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-normal);
  pointer-events: none;
}
.field:focus-within::after { transform: scaleX(1); }
html[dir="rtl"] .field::after { transform-origin: right; }

.field--error input, .field--error select, .field--error textarea { border-bottom-color: var(--color-error); }
.field__err {
  display: none;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-error);
}
.field--error .field__err { display: block; }

.field--check { display: flex; gap: var(--space-3); align-items: flex-start; }
.field--check::after { display: none; }
.field--check input {
  width: 19px; height: 19px;
  flex: none;
  margin-top: 2px;
  accent-color: var(--color-accent);
  border-bottom: 0;
}
.field--check label {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-charcoal-muted);
  line-height: var(--line-height-normal);
}

.form-status {
  display: none;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 700;
}
.form-status.is-ok {
  display: block;
  background: rgba(46, 125, 70, 0.08);
  border: 1px solid rgba(46, 125, 70, 0.32);
  color: var(--color-success);
}
.form-status.is-bad {
  display: block;
  background: rgba(196, 57, 43, 0.07);
  border: 1px solid rgba(196, 57, 43, 0.3);
  color: var(--color-error);
}

/* --- Direct contact panel --------------------------------------------- */
.contact-aside { display: grid; gap: var(--space-6); }
.contact-panel { padding: clamp(var(--space-6), 3vw, var(--space-8)); }
.contact-panel h2 { font-size: var(--display-sub); }

.tg-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-normal);
}
.tg-card:hover {
  transform: translateY(-2px);
  border-color: rgba(34, 158, 217, 0.5);
  box-shadow: 0 10px 26px rgba(34, 158, 217, 0.16);
}
.tg-card__ico {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  flex: none;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, #37BBFE, #229ED9);
  color: #FFFFFF;
  box-shadow: 0 6px 16px rgba(34, 158, 217, 0.28);
}
.tg-card__ico svg { width: 24px; height: 24px; }
.tg-card__body { min-width: 0; }
.tg-card__body b { display: block; font-size: var(--text-sm); color: var(--color-charcoal); }
.tg-card__body span { display: block; font-size: var(--text-xs); color: var(--color-charcoal-muted); }

.hours-list { list-style: none; margin: 0; padding: 0; }
.hours-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  margin: 0;
  border-bottom: 1px dashed var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-charcoal-muted);
}
.hours-list li:last-child { border-bottom: 0; }
.hours-list b { color: var(--color-charcoal); }

/* Response-time medallions */
.resp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.resp {
  padding: var(--space-4);
  text-align: center;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-md);
}
.resp b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-accent);
}
.resp span {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-charcoal-muted);
}

/* Topic router cards */
.topics { display: grid; gap: var(--space-5); }
@media (min-width: 760px) { .topics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.topic {
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.topic__ico {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  border: 1px solid var(--color-border-gold);
  color: var(--color-accent-dim);
}
.topic__ico svg { width: 22px; height: 22px; }
.topic h3 { margin-bottom: var(--space-2); font-family: var(--font-body); font-size: var(--text-base); font-weight: 800; }
.topic p { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--color-charcoal-muted); }
.topic__hint { font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-accent-dim); }