/* ============================================================
   Smart Coaching Centre — Contact Page Styles
   ============================================================ */

/* ── Contact Grid ──────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 72px;
  align-items: start;
}
.ci-header { margin-bottom: 32px; }
.ci-header p { color:var(--text-muted); font-size:0.97rem; line-height:1.7; }

/* ── Info Cards ────────────────────────────────────────────── */
.ci-cards { display:flex; flex-direction:column; gap:16px; margin-bottom:28px; }

.ci-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  transition: var(--ease);
  text-decoration: none;
  color: inherit;
}
.ci-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--primary); }
.ci-card-wa:hover { border-color:#25d366; }
.ci-card .ci-card-icon { margin:0; flex-shrink:0; }
.ci-card-label  { font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); margin-bottom:4px; }
.ci-card-value  { font-size:1.1rem; font-weight:700; color:var(--text-dark); }
.ci-card-sub    { font-size:0.8rem; color:var(--text-muted); margin-top:3px; }
.ci-arrow { margin-left:auto; color:var(--border); font-size:0.9rem; transition:var(--ease); }
.ci-card:hover .ci-arrow { color:var(--primary); transform:translateX(4px); }
.ci-card-wa:hover .ci-arrow { color:#25d366; }

/* Location card */
.ci-card-loc { align-items:flex-start; cursor:default; }
.ci-card-loc:hover { border-color:var(--accent); }
.ci-locs-grid {
  display: flex; flex-direction:column; gap:6px;
  margin-top:8px;
}
.ci-locs-grid span {
  display:flex; align-items:center; gap:8px;
  font-size:0.88rem; color:var(--text-body); font-weight:500;
}
.ci-locs-grid i { font-size:0.45rem; color:var(--accent); }
.ci-locs-grid em { font-style:normal; font-size:0.8rem; color:var(--text-muted); }

/* Service Pills */
.ci-services h4 { margin-bottom:12px; }
.ci-service-pills { display:flex; flex-wrap:wrap; gap:8px; }
.csp-btn {
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: 0.82rem; font-weight:600;
  border: 1.5px solid var(--border);
  color: var(--text-body);
  background: var(--bg-white);
  cursor: pointer;
  transition: var(--ease-fast);
}
.csp-btn:hover,
.csp-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* ── Contact Form Card ─────────────────────────────────────── */
.contact-form-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 44px 40px;
  box-shadow: var(--shadow-lg);
}
.contact-form-card h3 { margin-bottom:6px; }
.contact-form-card > p { font-size:0.9rem; color:var(--text-muted); margin-bottom:24px; }

/* Notices */
.form-notice {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.92rem; font-weight:500;
  margin-bottom: 20px;
}
.form-notice.show { display:flex; }
.form-success     { background:rgba(61,181,74,0.1); color:#1e7e34; border:1px solid rgba(61,181,74,0.25); }
.form-error-msg   { background:rgba(220,53,69,0.08); color:#c82333; border:1px solid rgba(220,53,69,0.2); }
.form-notice i { font-size:1.15rem; flex-shrink:0; }

/* Form Rows & Groups */
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-group { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.form-group label { font-size:0.88rem; font-weight:600; color:var(--text-dark); }
.req { color:var(--accent); }
.opt { font-size:0.78rem; color:var(--text-muted); font-weight:400; }

.input-wrap {
  position: relative;
}
.input-wrap > i {
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.9rem;
  pointer-events: none;
  z-index: 1;
}
.textarea-wrap > i { top: 16px; transform: none; }

.input-wrap input,
.input-wrap select,
.input-wrap textarea {
  width: 100%;
  padding: 13px 16px 13px 44px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.93rem;
  color: var(--text-dark);
  background: var(--bg-white);
  transition: var(--ease-fast);
  outline: none;
  resize: vertical;
}
.input-wrap input:focus,
.input-wrap select:focus,
.input-wrap textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26,75,140,0.1);
}
.input-wrap input.error,
.input-wrap select.error,
.input-wrap textarea.error {
  border-color: #dc3545;
  box-shadow: 0 0 0 3px rgba(220,53,69,0.1);
}
.input-wrap select { appearance:none; -webkit-appearance:none; cursor:pointer; }

.field-error { font-size:0.8rem; color:#dc3545; min-height:18px; }

.submit-btn { width:100%; justify-content:center; margin-top:8px; }

/* ── Quick Contact Strip ───────────────────────────────────── */
.quick-contact { padding: 48px 0; }
.qc-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.qc-text h4 { margin-bottom:4px; }
.qc-text p  { font-size:0.9rem; color:var(--text-muted); }
.qc-actions { display:flex; gap:14px; flex-wrap:wrap; }

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width:900px) {
  .contact-grid { grid-template-columns:1fr; gap:40px; }
}
@media (max-width:640px) {
  .contact-form-card { padding:28px 20px; }
  .form-row { grid-template-columns:1fr; gap:0; }
  .qc-strip { flex-direction:column; text-align:center; }
}