/* ============================================================
   pages/contact/css/contact.css
   ============================================================ */

.page-hero {
  padding:160px 0 80px;
  background:linear-gradient(135deg,var(--mint) 0%,var(--skyblush) 100%);
  border-bottom:1px solid rgba(22,163,74,.1);
}

.contact-section { background:var(--white); }

.contact-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:80px; align-items:start;
}

/* ── Contact Links ─────────────────────────────── */
.contact-links { display:flex; flex-direction:column; gap:14px; margin-top:32px; }
.cl {
  display:flex; align-items:center; gap:16px;
  padding:18px 22px; border-radius:var(--radius);
  background:#fff; text-decoration:none;
  box-shadow:var(--shadow-sm);
  transition:all var(--transition);
  border:2px solid transparent;
}
.cl:nth-child(1):hover { border-color:#1877f2; box-shadow:0 8px 28px rgba(24,119,242,.18); transform:translateX(6px); }
.cl:nth-child(2):hover { border-color:var(--amber); box-shadow:0 8px 28px rgba(245,158,11,.18); transform:translateX(6px); }
.cl:nth-child(3):hover { border-color:#0a66c2; box-shadow:0 8px 28px rgba(10,102,194,.18); transform:translateX(6px); }
.cl:nth-child(4):hover { border-color:var(--green); box-shadow:0 8px 28px rgba(22,163,74,.18); transform:translateX(6px); }
.cl-ico { font-size:1.5rem; flex-shrink:0; }
.cl-body { flex:1; }
.cl-lbl { font-size:.62rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-dim); display:block; margin-bottom:1px; }
.cl-val { font-size:.9rem; font-weight:500; color:var(--ink); }
.cl-arr { color:var(--ink-dim); font-size:1.1rem; }

/* ── Form ──────────────────────────────────────── */
.contact-form-wrap {
  background:var(--paper);
  border-radius:var(--radius-lg);
  padding:40px;
  border:1px solid rgba(22,163,74,.1);
}
.cform { display:flex; flex-direction:column; gap:20px; }

.fg { display:flex; flex-direction:column; gap:6px; position:relative; }
.flabel {
  font-size:.68rem; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--green-deep);
}
.flabel span { color:var(--terra); }

.fg input,
.fg textarea,
.fg select {
  background:#fff;
  border:2px solid rgba(22,163,74,.18);
  border-radius:var(--radius-sm);
  padding:12px 16px;
  color:var(--ink);
  font-family:var(--sans); font-size:.9rem;
  outline:none; width:100%;
  transition:border-color var(--transition), box-shadow var(--transition);
}
.fg input:focus,
.fg textarea:focus,
.fg select:focus {
  border-color:var(--green);
  box-shadow:0 0 0 4px rgba(22,163,74,.1);
}
.fg input.invalid,
.fg textarea.invalid,
.fg select.invalid {
  border-color:#ef4444;
  box-shadow:0 0 0 4px rgba(239,68,68,.1);
}
.fg input.valid,
.fg textarea.valid {
  border-color:var(--green);
}
.fg input::placeholder,
.fg textarea::placeholder { color:var(--ink-dim); }
.fg textarea { resize:vertical; min-height:140px; }

.fg select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b9e7e' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:44px; cursor:pointer; }

.field-err { font-size:.72rem; color:#b91c1c; min-height:16px; display:block; }
.char-count { font-size:.68rem; color:var(--ink-dim); text-align:right; }

/* ── GDPR Checkbox ─────────────────────────────── */
.form-gdpr { margin-top:4px; }
.checkbox-wrap {
  display:flex; align-items:flex-start; gap:12px;
  cursor:pointer; font-size:.82rem; color:var(--ink-mid); line-height:1.5;
}
.checkbox-wrap input[type=checkbox] { position:absolute; opacity:0; width:0; height:0; }
.checkmark {
  width:20px; height:20px; flex-shrink:0; margin-top:2px;
  border:2px solid rgba(22,163,74,.4); border-radius:4px;
  background:#fff; transition:all var(--transition);
  position:relative;
}
.checkbox-wrap input:checked ~ .checkmark { background:var(--green); border-color:var(--green); }
.checkbox-wrap input:checked ~ .checkmark::after {
  content:''; position:absolute; left:5px; top:2px;
  width:6px; height:10px;
  border:2px solid #fff; border-top:none; border-left:none;
  transform:rotate(45deg);
}
.checkbox-wrap a { color:var(--green-deep); }

/* ── Submit button loading ─────────────────────── */
#btnSpinner { animation:spin .8s linear infinite; display:inline-block; }
.btn:disabled { opacity:.65; cursor:not-allowed; transform:none !important; }

/* ── Responsive ────────────────────────────────── */
@media(max-width:960px) {
  .contact-grid { grid-template-columns:1fr; gap:48px; }
  .contact-form-wrap { padding:28px 20px; }
}