/* ============================================================
   Atwa-ICT Academy — Contact page styles (contact.php)
   ============================================================ */

/* ── WhatsApp enroll cards ── */
.enroll-section { background: #fff; padding: 80px 0; }
.enroll-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.enroll-card {
  background: var(--bg-gray);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  text-align: center;
  transition: var(--transition);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.enroll-card:hover { border-color: var(--orange); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.enroll-icon {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: rgba(0,10,143,.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; color: var(--navy); margin-bottom: 4px;
}
.enroll-card h3 { font-size: 1.1rem; font-weight: 700; color: var(--navy); }
.enroll-badge {
  padding: 4px 14px;
  background: rgba(249,115,22,.1);
  color: var(--orange-dark);
  border-radius: 100px;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: 4px;
}

@media (max-width: 900px) { .enroll-grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; } }


/* ── Contact split: form + info ── */
.contact-split { background: #FDF4E0; padding: 80px 0; }
.contact-split-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 44px;
  align-items: start;
}
.contact-form-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 40px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.contact-form-card h3 { font-size: 1.35rem; font-weight: 800; color: var(--navy); margin: 10px 0 6px; }
.contact-form-card .sub { font-size: .88rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 24px; }

.contact-info-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 36px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 22px;
}
.contact-info-item { display: flex; align-items: flex-start; gap: 16px; }
.contact-info-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(0,10,143,.07);
  display: flex; align-items: center; justify-content: center;
  color: var(--navy); font-size: 1.1rem; flex-shrink: 0;
}
.contact-info-text h4 { font-size: .9rem; font-weight: 700; color: var(--navy); margin-bottom: 3px; }
.contact-info-text p,
.contact-info-text a  { font-size: .88rem; color: var(--text-muted); line-height: 1.5; }
.contact-info-text a:hover { color: var(--orange); }

@media (max-width: 900px) { .contact-split-grid { grid-template-columns: 1fr; } }


/* ── Form fields ── */
.form-group { margin-bottom: 18px; }
.form-group label {
  display: block;
  font-size: .84rem; font-weight: 600; color: var(--navy); margin-bottom: 6px;
}
.form-input {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .92rem;
  color: var(--text-dark);
  background: var(--bg-gray);
  transition: border-color var(--transition), background var(--transition);
}
.form-input:focus { outline: none; border-color: var(--navy); background: #fff; }
textarea.form-input { min-height: 120px; resize: vertical; }

.form-success {
  display: none;
  margin-top: 14px;
  padding: 12px 16px;
  background: rgba(16,185,129,.08);
  border: 1px solid rgba(16,185,129,.28);
  border-radius: var(--radius-sm);
  color: #065f46; font-size: .88rem; font-weight: 600;
}
.form-error {
  display: none;
  margin-top: 14px;
  padding: 12px 16px;
  background: rgba(239,68,68,.07);
  border: 1px solid rgba(239,68,68,.22);
  border-radius: var(--radius-sm);
  color: #991b1b; font-size: .88rem; font-weight: 600;
}


/* ── FAQ accordion ── */
.faq-section { background: #FEFBF5; padding: 80px 0; }
.faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 800px; }
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.faq-item.open { border-color: var(--navy); box-shadow: var(--shadow-sm); }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  cursor: pointer;
  font-size: .95rem; font-weight: 600; color: var(--navy);
  gap: 12px;
  user-select: none;
}
.faq-q i { font-size: .8rem; color: var(--text-muted); flex-shrink: 0; transition: transform var(--transition); }
.faq-item.open .faq-q i { transform: rotate(180deg); color: var(--orange); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-item.open .faq-a { max-height: 240px; }
.faq-a p { padding: 0 22px 20px; font-size: .88rem; color: var(--text-muted); line-height: 1.75; }