/*
 * Pearl Organic – Elfsight formulier stijlen
 * Overschrijft de standaard Elfsight/eapps stijlen met het Pearl-ontwerp.
 * Geladen op alle pagina's waar het formulier voorkomt.
 */

/* ── CONTAINER ───────────────────────────────────────────────────────────── */
.eapps-form,
.eapps-form-inner,
.eapps-form-spot-inline {
  font-family: var(--sans) !important;
  color: var(--ink) !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  max-width: 100% !important;
}

/* ── HEADER: verberg de Elfsight header (wij hebben eigen hero) ───────────── */
.eapps-form-header-container {
  display: none !important;
}

/* ── VELDEN ──────────────────────────────────────────────────────────────── */
.eapps-form-fieldset {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: .85rem 1.25rem !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Velden die de volledige breedte nodig hebben */
.eapps-form-element-wrapper[data-field-type="email"],
.eapps-form-element-wrapper[data-field-type="phone"],
.eapps-form-element-wrapper[data-field-type="textarea"],
.eapps-form-element-wrapper[data-field-type="file"],
.eapps-form-element-wrapper:has(textarea),
.eapps-form-element-wrapper:has(.eapps-form-element-input-file) {
  grid-column: 1 / -1 !important;
}

.eapps-form-element-wrapper {
  margin: 0 !important;
  padding: 0 !important;
}

/* Labels */
.eapps-form-element-label {
  font-family: var(--sans) !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--ink2) !important;
  margin-bottom: .4rem !important;
  display: block !important;
}

.eapps-form-element-label-required-indicator {
  color: var(--rust) !important;
  margin-left: 2px !important;
}

/* Inputs, selects, textareas */
.eapps-form-element,
.eapps-form-element input,
input.eapps-form-element,
textarea.eapps-form-element,
.flatpickr input,
.eapps-form-element-container input,
.eapps-form-element-container textarea {
  background: var(--paper2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 2px !important;
  padding: .75rem 1rem !important;
  font-family: var(--sans) !important;
  font-size: .92rem !important;
  color: var(--ink) !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color .2s, background .2s !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
}

.eapps-form-element:focus,
input.eapps-form-element:focus,
textarea.eapps-form-element:focus,
.eapps-form-element-container input:focus,
.eapps-form-element-container textarea:focus {
  border-color: var(--rust) !important;
  background: var(--paper) !important;
}

/* Placeholder kleur */
.eapps-form-element::placeholder,
input.eapps-form-element::placeholder,
textarea.eapps-form-element::placeholder {
  color: var(--ink3) !important;
  opacity: 1 !important;
}

/* Textarea hoogte */
textarea.eapps-form-element,
.eapps-form-element-container textarea {
  min-height: 120px !important;
  resize: vertical !important;
}

/* ── BESTANDSUPLOAD ──────────────────────────────────────────────────────── */
.eapps-form-element-input-file-wrapper {
  background: var(--paper2) !important;
  border: 1px dashed var(--border) !important;
  border-radius: 2px !important;
  padding: 1.25rem !important;
  text-align: center !important;
  font-family: var(--sans) !important;
  font-size: .85rem !important;
  color: var(--ink3) !important;
  cursor: pointer !important;
  transition: border-color .2s, background .2s !important;
}
.eapps-form-element-input-file-wrapper:hover {
  border-color: var(--rust) !important;
  background: var(--paper) !important;
}
.eapps-form-element-input-file-wrapper a,
.eapps-form-element-input-file-wrapper span {
  color: var(--rust) !important;
  font-weight: 600 !important;
}

/* Beschrijvingstekst onder veld */
.eapps-form-element-description {
  font-size: .78rem !important;
  color: var(--ink3) !important;
  margin-top: .35rem !important;
  line-height: 1.5 !important;
  font-weight: 300 !important;
}

/* ── FOUTMELDINGEN ───────────────────────────────────────────────────────── */
.eapps-form-element-error {
  font-size: .75rem !important;
  color: #B84513 !important;
  margin-top: .3rem !important;
}

/* ── VERSTUUR KNOP ───────────────────────────────────────────────────────── */
.eapps-form-actions-container {
  margin-top: 1.5rem !important;
}

.eapps-form-actions-button,
.eapps-form-button[eapps-link="buttonSubmit"] {
  background: var(--rust) !important;
  color: #FDF8F0 !important;
  border: none !important;
  border-radius: 2px !important;
  padding: .85rem 2rem !important;
  font-family: var(--sans) !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background .2s, transform .15s !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 180px !important;
}

.eapps-form-actions-button:hover,
.eapps-form-button[eapps-link="buttonSubmit"]:hover {
  background: var(--rust-light) !important;
  transform: translateY(-1px) !important;
}

.eapps-form-actions-button-label {
  color: #FDF8F0 !important;
  font-family: var(--sans) !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

/* ── SUCCES BERICHT ──────────────────────────────────────────────────────── */
.eapps-form-success-container {
  background: var(--sage-pale, #EAF0E8) !important;
  border: 1px solid var(--sage) !important;
  border-radius: 3px !important;
  padding: 2rem !important;
  text-align: center !important;
}

.eapps-form-success-text {
  font-family: var(--serif) !important;
  font-size: 1.1rem !important;
  color: var(--sage) !important;
  font-style: italic !important;
}

.eapps-form-success-button,
.eapps-form-button[eapps-link="continue"] {
  background: var(--sage) !important;
  color: #FDF8F0 !important;
  border-radius: 2px !important;
  padding: .7rem 1.5rem !important;
  margin-top: 1rem !important;
  font-family: var(--sans) !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

/* ── RECAPTCHA: verberg badge (al aanwezig in Elfsight) ─────────────────── */
.grecaptcha-badge { opacity: 0.4 !important; }

/* ── FOOTER VERBERGEN ───────────────────────────────────────────────────── */
.eapps-form-footer-container { display: none !important; }

/* ── FLOATING BUTTON VERBERGEN (we gebruiken de inline versie) ──────────── */
.eapps-form-spot-floating,
.eapps-form-floating-button { display: none !important; }

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .eapps-form-fieldset {
    grid-template-columns: 1fr !important;
  }
  .eapps-form-element-wrapper[data-field-type="email"],
  .eapps-form-element-wrapper[data-field-type="phone"],
  .eapps-form-element-wrapper:has(textarea),
  .eapps-form-element-wrapper:has(.eapps-form-element-input-file) {
    grid-column: 1 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ELFSIGHT TEAM SHOWCASE — bandleden pagina
   .elfsight-widget-team-showcase prefix nodig om Elfsight's eigen JSX-classes
   te overschrijven (die hebben hogere specificiteit dan plain class selectors).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Grid: volle breedte met responsive kolommen */
.elfsight-widget-team-showcase .eats-grid-component {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 1.5rem !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.elfsight-widget-team-showcase .eats-grid-item {
  width: 100% !important;
  list-style: none !important;
  margin: 0 !important;
}

/* Kaart: 3:4 portretverhouding, foto vult kaart */
.elfsight-widget-team-showcase .eats-member-card-gallery-component {
  background: var(--paper2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 3/4 !important;
  height: auto !important;
  cursor: pointer !important;
  transition: box-shadow .25s, transform .25s, border-color .2s !important;
}

.elfsight-widget-team-showcase .eats-member-card-gallery-component:hover {
  box-shadow: 0 8px 32px rgba(42,31,15,.12) !important;
  border-color: rgba(92,74,48,0.30) !important;
  transform: translateY(-2px) !important;
}

/* Foto vult de hele kaart als achtergrond */
.elfsight-widget-team-showcase .eats-member-card-gallery-photoContainer,
.elfsight-widget-team-showcase .eats-member-card-photo-photoContainer {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  inset: 0 !important;
  background: var(--paper3) !important;
}

.elfsight-widget-team-showcase .eats-member-card-photo-photo,
.elfsight-widget-team-showcase img.eats-member-card-photo-photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform .5s !important;
}

.elfsight-widget-team-showcase .eats-member-card-gallery-component:hover .eats-member-card-photo-photo {
  transform: scale(1.04) !important;
}

/* Info-overlay onderaan: gradient van donker naar transparant */
.elfsight-widget-team-showcase .eats-member-card-gallery-infoContainer {
  position: absolute !important;
  top: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: auto !important;
  background: linear-gradient(
    to top,
    rgba(42,31,15,0.95) 0%,
    rgba(42,31,15,0.8)  50%,
    rgba(42,31,15,0)    100%
  ) !important;
  padding: 2.5rem 1.25rem 1.25rem !important;
  z-index: 2 !important;
}

.elfsight-widget-team-showcase .eats-member-card-info-component {
  display: flex !important;
  flex-direction: column !important;
  gap: .25rem !important;
  margin-bottom: .65rem !important;
}

/* Naam (Eva, Frank, ...) — serif, wit */
.elfsight-widget-team-showcase .eats-member-card-info-name {
  font-family: var(--serif) !important;
  font-size: 1.35rem !important;
  font-weight: 600 !important;
  color: var(--paper) !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: clip !important;
}

/* Rol (Leadzang, Piano | Zang, ...) — kleine hoofdletters in goud */
.elfsight-widget-team-showcase .eats-member-card-info-component > div:not(.eats-member-card-info-name) {
  font-family: var(--sans) !important;
  font-size: .72rem !important;
  font-weight: 500 !important;
  color: var(--gold-light) !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: clip !important;
  max-width: none !important;
  text-overflow: clip !important;
}

/* "Lees meer" knop */
.elfsight-widget-team-showcase .eats-member-card-see-more-component {
  display: inline-flex !important;
  align-items: center !important;
  gap: .35rem !important;
  font-family: var(--sans) !important;
  font-size: .68rem !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--paper) !important;
  opacity: .8 !important;
  transition: opacity .2s, gap .2s !important;
}

.elfsight-widget-team-showcase .eats-member-card-gallery-component:hover .eats-member-card-see-more-component {
  opacity: 1 !important;
  gap: .55rem !important;
}

.elfsight-widget-team-showcase .eats-member-card-see-more-component span {
  color: inherit !important;
}

.elfsight-widget-team-showcase .eats-member-card-see-more-componentIcon {
  fill: currentColor !important;
  width: 12px !important;
  height: 10px !important;
}

/* Modal / popup voor "Lees meer" detail-pagina */
.elfsight-widget-team-showcase .eats-member-card-modal-component,
.eats-popup-component {
  background: var(--paper2) !important;
  border-radius: 3px !important;
  border: 1px solid var(--border) !important;
  font-family: var(--sans) !important;
  color: var(--ink) !important;
}

.eats-popup-component .eats-member-card-info-name,
.eats-modal-component .eats-member-card-info-name {
  color: var(--ink) !important;
}

/* Responsive */
@media (max-width: 768px) {
  .elfsight-widget-team-showcase .eats-grid-component {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 1rem !important;
  }
  .elfsight-widget-team-showcase .eats-member-card-info-name {
    font-size: 1.15rem !important;
  }
}

@media (max-width: 480px) {
  .elfsight-widget-team-showcase .eats-grid-component {
    grid-template-columns: 1fr 1fr !important;
  }
}