/* =========================================
   CONTACT.CSS — Netjes geordend + toelichting
   - Layout & cards
   - Formulieren
   - Pakket-knoppen
   - Interactie/hover/focus
   - Verzendknop + loading
   - Meldingen (success/error)
   - Hero binnenkom-animatie (alleen eenmalig)
   - Responsive
   - Reduced motion
========================================= */

/* ========== Layout: wrapper & cards ==========
   - Twee kolommen op desktop, 1 kolom op mobiel
   - Subtiele kaart-styling
*/
.contact-wrapper {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 24px;
  max-width: 1000px;
  margin: 10px auto 40px;
}

.contact-info,
.contact-form-section {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 20px;
  will-change: transform, box-shadow;
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Lichte lift bij hover (kaartjes) */
.contact-form-section:hover,
.contact-info:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
}

/* Titels */
.contact-info h2,
.contact-form-section h2 {
  margin-top: 0;
}

/* ========== Formulieren ==========
   - Netjes grid voor naam/e-mail
   - Inputs met basisstijl + focus-glow
*/
form { display: block; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
}

.form-field label {
  font-weight: bold;
  margin-bottom: 6px;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field textarea {
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  background: #fff;
}

.form-field textarea {
  resize: vertical;
}

/* Focus-glow */
.contact-form-section input:focus,
.contact-form-section textarea:focus {
  border-color: #6D28D9;
  box-shadow: 0 0 0 3px rgba(109,40,217,.15);
  transform: translateY(-1px);
}

/* Checkbox rij */
.checkbox-field label {
  font-weight: normal;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Validatie- en success-tekst */
.error {
  color: #DC2626;
  font-size: 0.875rem;
  margin-top: 6px;
  min-height: 14px;
}

.form-success {
  margin-top: 1rem;
  padding: 1rem;
  background: #D1FAE5;
  color: #065F46;
  border: 1px solid #34D399;
  border-radius: 8px;
  font-weight: 600;
}

/* ========== Pakket-knoppen ==========
   - Buttons om een pakket te kiezen (toggle active)
*/
.pakket-buttons {
  display: flex;
  gap: 12px;
  margin-top: 6px;
}

.pakket-btn {
  padding: 10px 18px;
  border: 1px solid #6D28D9;
  border-radius: 8px;
  background: #fff;
  color: #6D28D9;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
}

.pakket-btn:hover { background: #f3e8ff; }

.pakket-btn.active {
  background: linear-gradient(135deg, #9333EA, #6D28D9);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* ========== Interactie: contactgegevens links ==========
   - Mooie uitlijning + subtiele icon-animatie
*/
.contact-info p {
  margin: .5rem 0;
  font-size: 1rem;
  line-height: 1.5;
}

.contact-info a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #111827;
  text-decoration: none;
  transition: color .2s ease;
}

.contact-info a:hover { color: #6D28D9; }

.contact-info i {
  font-size: 1em;
  color: #6D28D9;
  transition: transform .3s ease; /* icon pulse */
}

.contact-info a:hover i {
  transform: scale(1.2) rotate(8deg);
}

/* ========== Verzendknop + hover micro-animatie ==========
   - Gebruik: <button id="submit-btn" class="send-btn">…</button>
   - Gradient/hover/active + vliegtuigje/loader
*/
#submit-btn {
  background: linear-gradient(135deg, #9333EA, #6D28D9);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.9rem 2rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

#submit-btn:hover {
  background: linear-gradient(135deg, #7E22CE, #4C1D95);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

#submit-btn:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

/* Micro-animatie (vliegtuigje + spinner) */
.send-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.send-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(109,40,217,.25);
}

.send-plane {
  display: inline-block;
  transform: translateX(0);
  transition: transform .35s ease;
}

.send-btn:hover .send-plane {
  transform: translateX(4px);
}

/* Loading state (spinner toont tijdens verzenden) */
.send-btn.is-loading {
  pointer-events: none;
  opacity: .9;
}

.send-btn .spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.6);
  border-top-color: #fff;
  border-radius: 50%;
  display: none;
  animation: spin 1s linear infinite;
}

.send-btn.is-loading .send-label,
.send-btn.is-loading .send-plane { opacity: 0; }
.send-btn.is-loading .spinner { display: inline-block; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ========== Meldingen (na submit) ==========
   - Slide-in succes of error
*/
.alert-success,
.alert-error {
  margin-top: .75rem;
  padding: .6rem .8rem;
  border-radius: 8px;
  transform: translateY(6px);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}

.alert-success.show,
.alert-error.show {
  transform: translateY(0);
  opacity: 1;
}

.alert-success {
  background: #ECFDF5;
  color: #065F46;
  border: 1px solid #A7F3D0;
}
.alert-error {
  background: #FEF2F2;
  color: #991B1B;
  border: 1px solid #FECACA;
}

/* ========== Hero binnenkom-animatie (alleen eenmalig) ==========
   - Voeg class toe aan de hero op contactpagina: .contact-hero-animate
*/
.contact-hero-animate {
  animation: contactHeroIn .9s ease-out both;
}

@keyframes contactHeroIn {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ========== Responsive ==========
   - 1 kolom onder 768px
   - Form inputs volle breedte
*/
@media (max-width: 768px) {
  .contact-wrapper { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

/* ========== Reduced Motion ==========
   - Respecteer systeeminstelling: animaties minimaliseren
*/
@media (prefers-reduced-motion: reduce) {
  .contact-form-section:hover,
  .contact-info:hover { transform: none; box-shadow: none; }

  .contact-form-section input:focus,
  .contact-form-section textarea:focus { transform: none; box-shadow: none; }

  .send-btn,
  .send-plane { transition: none; }

  .alert-success,
  .alert-error { transition: none; transform: none; opacity: 1; }

  .contact-hero-animate { animation: none; }
}