/* ============================================================
   GCITY — ENQUIRY MODAL (shared component)
   Reuses the site's existing design tokens. If your page defines
   --navy/--orange/--gold/--cream/--radius in its own <style> block,
   this file inherits them automatically. Fallback values are set
   below in case a page doesn't define them (e.g. very old pages).
   ============================================================ */

:root{
  --em-navy: var(--navy, #16243E);
  --em-orange: var(--orange, #F1611F);
  --em-gold: var(--gold, #F4B53D);
  --em-cream: var(--cream, #FBF5EA);
  --em-whatsapp: var(--whatsapp, #25D366);
  --em-whatsapp-dark: var(--whatsapp-dark, #1FAE58);
  --em-ink-soft: var(--ink-soft, #5C6B85);
  --em-radius: var(--radius, 18px);
  --em-radius-sm: var(--radius-sm, 12px);
}

/* ---------- Overlay ---------- */
.em-overlay{
  position:fixed; inset:0; z-index:9999;
  background:rgba(22,36,62,0.55);
  backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; pointer-events:none;
  transition:opacity 0.25s ease;
  font-family:'Poppins', sans-serif;
}
.em-overlay.em-open{ opacity:1; pointer-events:auto; }

/* ---------- Card ---------- */
.em-card{
  background:#fff;
  width:100%; max-width:440px;
  max-height:90vh;
  overflow-y:auto;
  border-radius:var(--em-radius);
  box-shadow:0 24px 60px rgba(22,36,62,0.35);
  transform:translateY(16px) scale(0.98);
  transition:transform 0.25s ease;
  position:relative;
}
.em-overlay.em-open .em-card{ transform:translateY(0) scale(1); }

/* ---------- Header ---------- */
.em-head{
  background:linear-gradient(135deg, var(--em-navy), #233A63);
  color:#fff;
  padding:26px 28px 22px;
  border-radius:var(--em-radius) var(--em-radius) 0 0;
  position:relative;
}
.em-head__eyebrow{
  display:inline-block;
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--em-gold);
  margin-bottom:6px;
}
.em-head h2{
  font-family:'Anton', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.3px;
  font-size:1.35rem;
  line-height:1.2;
  margin-bottom:6px;
}
.em-head p{
  font-size:0.87rem;
  color:rgba(255,255,255,0.75);
  line-height:1.5;
}
.em-close{
  position:absolute; top:14px; right:14px;
  width:32px; height:32px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,0.12);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background 0.2s;
}
.em-close:hover{ background:rgba(255,255,255,0.22); }
.em-close svg{ width:16px; height:16px; }

/* ---------- Body / form ---------- */
.em-body{ padding:24px 28px 28px; }

.em-field{ margin-bottom:14px; }
.em-field label{
  display:block;
  font-size:0.78rem;
  font-weight:600;
  color:var(--em-navy);
  margin-bottom:6px;
}
.em-field input,
.em-field select{
  width:100%;
  padding:12px 14px;
  border:1.5px solid rgba(22,36,62,0.14);
  border-radius:var(--em-radius-sm);
  font-family:'Poppins', sans-serif;
  font-size:0.94rem;
  color:var(--em-navy);
  background:#fff;
  transition:border-color 0.2s;
}
.em-field input:focus,
.em-field select:focus{
  outline:none;
  border-color:var(--em-orange);
}
.em-field input.em-invalid,
.em-field select.em-invalid{ border-color:#D64545; }
.em-error{
  font-size:0.74rem;
  color:#D64545;
  margin-top:4px;
  display:none;
}
.em-error.em-show{ display:block; }

.em-row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.em-submit{
  width:100%;
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--em-orange);
  color:#fff;
  border:none;
  font-family:'Poppins', sans-serif;
  font-weight:700;
  font-size:0.98rem;
  padding:14px 20px;
  border-radius:999px;
  cursor:pointer;
  margin-top:6px;
  box-shadow:0 8px 20px rgba(241,97,31,0.28);
  transition:transform 0.2s, background 0.2s;
}
.em-submit:hover{ background:#d9530f; transform:translateY(-1px); }
.em-submit:disabled{ opacity:0.65; cursor:not-allowed; transform:none; }
.em-submit svg{ width:18px; height:18px; }
.em-spin{ animation:em-spin 0.8s linear infinite; }
@keyframes em-spin{ to{ transform:rotate(360deg); } }

.em-trust{
  text-align:center;
  font-size:0.76rem;
  color:var(--em-ink-soft);
  margin-top:12px;
}

.em-formerr{
  background:#FDECEC;
  color:#B23A3A;
  font-size:0.82rem;
  padding:10px 12px;
  border-radius:var(--em-radius-sm);
  margin-bottom:14px;
  display:none;
}
.em-formerr.em-show{ display:block; }

/* ---------- Success state ---------- */
.em-success{ text-align:center; padding:8px 4px 4px; display:none; }
.em-success.em-show{ display:block; }
.em-success__icon{
  width:56px; height:56px;
  border-radius:50%;
  background:var(--em-whatsapp);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 16px;
}
.em-success__icon svg{ width:28px; height:28px; }
.em-success h3{
  font-family:'Anton', sans-serif;
  text-transform:uppercase;
  color:var(--em-navy);
  font-size:1.1rem;
  margin-bottom:8px;
}
.em-success p{
  font-size:0.88rem;
  color:var(--em-ink-soft);
  line-height:1.55;
  margin-bottom:18px;
}
.em-wa-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%;
  background:var(--em-whatsapp);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:0.94rem;
  padding:13px 20px;
  border-radius:999px;
  box-shadow:0 8px 20px rgba(37,211,102,0.30);
  transition:background 0.2s, transform 0.2s;
}
.em-wa-btn:hover{ background:var(--em-whatsapp-dark); transform:translateY(-1px); }
.em-wa-btn svg{ width:18px; height:18px; }

/* ---------- Body-form / success cross-fade ---------- */
.em-formwrap{ display:block; }
.em-formwrap.em-hide{ display:none; }

@media (max-width:480px){
  .em-row2{ grid-template-columns:1fr; }
  .em-head{ padding:22px 20px 18px; }
  .em-body{ padding:20px 20px 24px; }
}

/* ============================================================
   Footer "Request a Free Tutor Match" button — matches the look
   of the plain <a> links it replaced inside .footer__links
   ============================================================ */
.footer-link-btn{
  all:unset;
  cursor:pointer;
  color:rgba(255,255,255,0.8);
  text-decoration:none;
  font-size:0.92rem;
  font-family:'Poppins', sans-serif;
  transition:color 0.2s;
}
.footer-link-btn:hover{ color:var(--em-gold); }

/* ============================================================
   Footer social icon row (Instagram / Facebook)
   ============================================================ */
.footer__social{
  display:flex;
  gap:12px;
  margin-top:16px;
}
.footer__social a{
  width:36px; height:36px;
  border-radius:50%;
  background:rgba(255,255,255,0.10);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  transition:background 0.2s, transform 0.2s;
}
.footer__social a:hover{ background:var(--em-orange); transform:translateY(-2px); }
.footer__social svg{ width:17px; height:17px; }