/*
  ============================================================
  GEPVOLT Forms -- Inline, Modal, Stepper
  ============================================================
  All design tokens come from gp-variables.css (loaded first).
  Form breakpoint: 600px (differs from the global --bp-sm: 639px,
  per the concept PDF "Buttons and Forms 2.0").
*/

/* All design tokens come from gp-variables.css (loaded first). */

/* === 2) WRAPPER ============================================ */
.gp-form-wrapper {
  position: relative;
  padding: 32px;
  background: var(--gp-bg-muted);
  border-radius: var(--gp-radius-xl);
  font-family: var(--gp-font);
  color: var(--gp-navy);
  line-height: 1.4;
}

/* === 3) SUCCESS OVERLAY ==================================== */
.gp-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 10;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 32px;
  text-align: center;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: inherit;
}
.gp-overlay.active { display: flex; }
.gp-overlay-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  background: var(--gp-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gp-overlay-icon svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: var(--gp-text-on-dark);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gp-overlay-title {
  margin-bottom: 8px;
  font: 700 20px/1.3 var(--gp-font);
  color: var(--gp-navy);
}
/* Programmatic focus target (status heading) — no interactive outline. */
.gp-overlay-title:focus { outline: none; }
.gp-overlay-title:focus-visible { outline: none; }
.gp-overlay-text {
  font: 400 15px/1.5 var(--gp-font);
  color: var(--gp-text-muted);
}

/* === 4) LAYOUT-GRID ======================================== */
.gp-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Group separation (20px) stays clearly larger than the 6px label-to-field
     gap, so each label reads as bound to the field below it (proximity). */
  gap: 20px 14px;
  margin-bottom: 20px;
}
.gp-form-row.full { grid-template-columns: 1fr; }

/* === 5) LABELS ============================================= */
.gp-label {
  display: block;
  margin-bottom: 6px;
  font: 600 15px/1.4 var(--gp-font);   /* SemiBold per Spec */
  color: var(--gp-navy);
}
.gp-label .gp-required {
  margin-left: 4px;
  color: var(--gp-green);              /* green asterisk per spec */
  font-weight: 700;
}

/* === 6) INPUTS / TEXTAREA / SELECT ========================= */
.gp-form-wrapper input,
.gp-form-wrapper textarea,
.gp-form-wrapper select {
  width: 100%;
  min-height: 44px;                    /* WCAG touch target  */
  padding: 11px 14px;
  background: var(--gp-field-bg);
  border: 1.5px solid var(--gp-field-border);
  border-radius: var(--gp-radius-md);
  font: 400 15px/1.4 var(--gp-font);
  color: var(--gp-navy);
  outline: none;
  transition: var(--gp-trans-btn);
  box-sizing: border-box;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

/* iOS Safari auto-zooms (and stays zoomed) on focus when a field's
   font-size is < 16px. Bump to 16px on touch devices to suppress it;
   the 15px visual stays on desktop pointers. */
@media (hover: none) and (pointer: coarse) {
  .gp-form-wrapper input,
  .gp-form-wrapper textarea,
  .gp-form-wrapper select {
    font-size: 16px;
  }
}

.gp-form-wrapper input::placeholder,
.gp-form-wrapper textarea::placeholder {
  color: var(--gp-text-muted);
  opacity: 1;
}

/* Mouse click / default focus: ONLY border + lighter BG - a single line  */
.gp-form-wrapper input:focus,
.gp-form-wrapper textarea:focus,
.gp-form-wrapper select:focus {
  background: var(--gp-field-focus);
  border-color: var(--gp-green);
  box-shadow: 0 0 0 3px var(--gp-green-tint);
  outline: none;
}

/* Keyboard navigation: additional WCAG outline (only on Tab, not on mouse) */
.gp-form-wrapper input:focus-visible,
.gp-form-wrapper textarea:focus-visible,
.gp-form-wrapper select:focus-visible {
  outline: 2px solid var(--gp-focus-color-light);
  outline-offset: 2px;
}

/* Valid */
.gp-form-wrapper input.gp-field-valid,
.gp-form-wrapper textarea.gp-field-valid,
.gp-form-wrapper select.gp-field-valid {
  border-color: var(--gp-green);
}

/* Invalid */
.gp-form-wrapper input.gp-field-invalid,
.gp-form-wrapper textarea.gp-field-invalid,
.gp-form-wrapper select.gp-field-invalid {
  border-color: var(--gp-error);
  background: var(--gp-error-bg);
}

/* Invalid + focus: red stays red (otherwise :focus would override it green) */
.gp-form-wrapper input.gp-field-invalid:focus,
.gp-form-wrapper textarea.gp-field-invalid:focus,
.gp-form-wrapper select.gp-field-invalid:focus {
  border-color: var(--gp-error);
  background: var(--gp-error-bg);
}
.gp-form-wrapper input.gp-field-invalid:focus-visible,
.gp-form-wrapper textarea.gp-field-invalid:focus-visible,
.gp-form-wrapper select.gp-field-invalid:focus-visible {
  outline-color: var(--gp-error);
}

/* === 7) SELECT - Chevron via SVG-Background ================ */
.gp-form-wrapper select {
  cursor: pointer;
  padding-right: 42px;
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%231C3F5E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 12px 8px !important;
}
.gp-form-wrapper select::-ms-expand { display: none; }
.gp-select-wrapper { position: relative; }   /* legacy wrapper stays OK */
.gp-select-wrapper::after { content: none; } /* remove the old Unicode arrow */

/* Browser autofill: consistent field background, no overlay icons */
.gp-form-wrapper input:-webkit-autofill,
.gp-form-wrapper input:-webkit-autofill:hover,
.gp-form-wrapper input:-webkit-autofill:focus,
.gp-form-wrapper input:-webkit-autofill:focus-visible {
  -webkit-box-shadow: 0 0 0 1000px var(--gp-field-bg) inset !important;
  -webkit-text-fill-color: var(--gp-navy) !important;
  caret-color: var(--gp-navy);
  transition: background-color 99999s ease-out 0s;
}

.gp-form-wrapper input::-webkit-contacts-auto-fill-button,
.gp-form-wrapper input::-webkit-credentials-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  width: 0;
  height: 0;
}

/* === 8) TEXTAREA =========================================== */
.gp-form-wrapper textarea {
  min-height: 120px;
  padding-top: 12px;
  resize: vertical;
}

/* === 9) CHECKBOX (GDPR) ==================================== */
.gp-datenschutz-section { margin: 22px 0 4px; }
.gp-checkbox-row {
  display: flex;
  align-items: flex-start;             /* safe for multi-line labels  */
  gap: 12px;
  min-height: 44px;
  padding: 4px 0;
  font: 400 14px/1.5 var(--gp-font);
  color: var(--gp-navy);
  cursor: pointer;
}
.gp-checkbox-row input[type="checkbox"] {
  /* Custom checkbox: guaranteed size + brand checkmark, independent of the browser */
  position: relative !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  min-height: 18px !important;       /* against the general input rule's min-height: 44px */
  max-height: 18px !important;       /* against Nicepage overrides */
  box-sizing: border-box !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  background: var(--gp-bg-white) !important;
  border: 2px solid #C5C7CC !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  opacity: 1 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.gp-checkbox-row input[type="checkbox"]:hover {
  border-color: var(--gp-green) !important;
}
.gp-checkbox-row input[type="checkbox"]:checked {
  background: var(--gp-green) !important;
  border-color: var(--gp-green) !important;
}
.gp-checkbox-row input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 4px;
  width: 5px;
  height: 9px;
  border: solid var(--gp-bg-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.gp-checkbox-row input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--gp-focus-color-light);
  outline-offset: 3px;
}

/* GDPR link: brand green like live (against WP global styles) */
.gp-form-wrapper .gp-checkbox-row a.gp-link {
  color: var(--gp-green);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.gp-form-wrapper .gp-checkbox-row a.gp-link:hover {
  color: var(--gp-green-dark);
}

/* === 10) PRIMARY BUTTON ==================================== */
.gp-submit-btn {
  display: inline-block;
  min-height: 44px;
  margin-top: 14px;
  padding: 13px 36px;
  background: var(--gp-green);
  color: var(--gp-text-on-dark);
  border: none;
  border-radius: var(--gp-radius-lg);
  font: 700 14px/1 var(--gp-font);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: var(--gp-trans-btn);
}
.gp-submit-btn:hover  { background: var(--gp-green-hover);  }  /* lighter */
.gp-submit-btn:active { background: var(--gp-green-dark); }  /* darker */
.gp-submit-btn:focus-visible {
  outline: 2px solid var(--gp-navy);
  outline-offset: 3px;
}
.gp-submit-btn:disabled {
  background: var(--gp-green);
  opacity: 0.55;
  cursor: not-allowed;
}

/* === 11) FIELD ERROR & GENERAL ERROR ======================= */
.gp-field-error {
  display: none;
  margin-top: 6px;
  font: 400 12px/1.4 var(--gp-font);
  color: var(--gp-error);
}
.gp-error-msg {
  display: none;
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--gp-error-bg);
  border: 1px solid var(--gp-error);
  border-radius: var(--gp-radius-md);
  font: 400 14px/1.5 var(--gp-font);
  color: var(--gp-error);
}

/* === 12) REQUIRED-FIELD NOTE =============================== */
.gp-required-hint {
  display: block;
  margin: 6px 0 0;
  font: 400 12px/1.4 var(--gp-font);
  color: var(--gp-text-muted);
}

/* Trust cue below the submit button: reassures on data handling right where
   the send decision is made. Same muted, small register as the required hint. */
.gp-privacy-note {
  margin: 12px 0 0;
  font: 400 12px/1.5 var(--gp-font);
  color: var(--gp-text-muted);
}

/* === 13) MOBILE (< 600px per PDF-Spec) ==================== */
@media (max-width: 600px) {
  .gp-form-wrapper { padding: 24px 20px; }
  /* Einspaltig; Feldabstaende etwas kompakter, damit auf kleinen iPhones weniger
     gescrollt werden muss (Rhythmus bleibt luftig genug). */
  .gp-form-row     { grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
  .gp-datenschutz-section { margin: 18px 0 4px; }
  .gp-submit-btn   { width: 100%; }
}

/* === 14) REDUCED-MOTION ==================================== */
@media (prefers-reduced-motion: reduce) {
  .gp-form-wrapper *,
  .gp-form-wrapper *::before,
  .gp-form-wrapper *::after {
    transition: none !important;
    animation:  none !important;
  }
  .gp-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ============================================================
   FORM-SPECIFIC RULES
   Migrated here from the pattern <style> blocks that were
   formerly shipped inline (deduplication). Scoped per form.
   ============================================================ */

/* === Form-specific: shared helpers === */
.gp-form-wrapper input[type="hidden"] { min-height: 0; padding: 0; }

/* Visually hidden but available to screen readers (e.g. "opens in new tab"
   hint on external links). Clip pattern -> no horizontal scroll width. */
.gp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Honeypot: invisible to humans, bait for bots (no display:none).
   Clip pattern instead of left:-9999px -> field stays hidden in the DOM and
   out of tab order, but does not create negative horizontal scroll width
   (otherwise ~10px of H-scroll on mobile). */
.gp-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.gp-form-row:last-child { margin-bottom: 0; }
.gp-legal-disclaimer {
  display: block;
  margin-top: 14px;
  font: 400 12px/1.5 var(--gp-font);
  color: var(--gp-text-muted);
}

/* === Form-specific: industry === */
.gp-form-section { margin-bottom: 32px; }
.gp-form-section:last-of-type { margin-bottom: 20px; }
.gp-form-section-title {
  margin: 0 0 20px;
  padding-bottom: 10px;
  font: 600 16px/1.3 var(--gp-font);
  color: var(--gp-navy);
  border-bottom: 2px solid rgba(105, 175, 75, 0.25);
}

/* === Form-specific: areas (multi-step) === */
.gp-form-step { display: none; }
.gp-form-step.active {
  display: block;
  animation: gpStepFadeIn 240ms ease both;
}
@keyframes gpStepFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.gp-stepper {
  display: flex;
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
}
.gp-stepper li {
  flex: 1;
  position: relative;
  text-align: center;
  padding: 0 4px;
}
.gp-stepper li::after {
  content: '';
  position: absolute;
  top: 17px;
  left: calc(50% + 22px);
  right: calc(-50% + 22px);
  height: 2px;
  background: #E5E7EB;
  z-index: 0;
  transition: background-color 200ms ease;
}
.gp-stepper li:last-child::after { display: none; }
.gp-stepper li.completed::after { background: var(--gp-green); }
.gp-step-circle {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--gp-bg-white);
  border: 2px solid #E5E7EB;
  font: 700 14px/1 var(--gp-font);
  color: #9CA3AF;
  margin-bottom: 8px;
  transition: all 200ms ease;
}
.gp-stepper li.active .gp-step-circle {
  background: var(--gp-green);
  border-color: var(--gp-green);
  color: var(--gp-text-on-dark);
  box-shadow: 0 0 0 4px rgba(105, 175, 75, 0.18);
}
.gp-stepper li.completed .gp-step-circle {
  background: var(--gp-green);
  border-color: var(--gp-green);
  color: transparent;
  font-size: 0;
}
.gp-stepper li.completed .gp-step-circle::before {
  content: '';
  width: 12px;
  height: 7px;
  border: solid var(--gp-bg-white);
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg) translate(1px, -2px);
}
.gp-step-label {
  display: block;
  font: 600 12px/1.3 var(--gp-font);
  color: #9CA3AF;
  transition: color 200ms ease;
}
.gp-stepper li.active .gp-step-label,
.gp-stepper li.completed .gp-step-label {
  color: var(--gp-navy);
}
.gp-step-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
}
.gp-step-nav.right-only { justify-content: flex-end; }
.gp-step-nav .gp-submit-btn,
.gp-next-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 13px 28px;
  background: var(--gp-green); color: var(--gp-text-on-dark); border: none;
  border-radius: var(--gp-radius-lg);
  font: 700 14px/1 var(--gp-font); text-transform: uppercase; letter-spacing: 0.08em;
  cursor: pointer; transition: var(--gp-trans-btn);
}
.gp-step-nav .gp-submit-btn:hover,
.gp-next-btn:hover  { background: var(--gp-green-hover); }
.gp-step-nav .gp-submit-btn:active,
.gp-next-btn:active { background: var(--gp-green-dark); }
.gp-step-nav .gp-submit-btn:focus-visible,
.gp-next-btn:focus-visible { outline: 2px solid var(--gp-navy); outline-offset: 3px; }
.gp-step-nav .gp-submit-btn:disabled,
.gp-next-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.gp-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 2px solid var(--gp-navy);
  color: var(--gp-navy);
  font: 700 14px/1 var(--gp-font);
  padding: 11px 22px;
  min-height: 44px;
  border-radius: var(--gp-radius-lg);
  cursor: pointer;
  transition: var(--gp-trans-btn);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.gp-back-btn:hover {
  background: var(--gp-navy);
  color: var(--gp-text-on-dark);
}
.gp-back-btn:focus-visible { outline: 2px solid var(--gp-navy); outline-offset: 3px; }
.gp-step-intro {
  margin: 0 0 22px;
  font: 400 14px/1.55 var(--gp-font);
  color: var(--gp-text-muted);
  max-width: 600px;
}
@media (max-width: 600px) {
  .gp-stepper    { margin-bottom: 28px; }
  .gp-step-label { font-size: 11px; }
  .gp-step-nav   { flex-direction: column-reverse; align-items: stretch; }
  .gp-step-nav .gp-submit-btn,
  .gp-step-nav .gp-next-btn,
  .gp-step-nav .gp-back-btn { width: 100%; justify-content: center; }
}

/* === Modal shell === */
.gp-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--gp-overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 220ms ease;
}
.gp-modal-overlay.gp-modal-visible { display: flex; }
.gp-modal-overlay.gp-modal-active  { opacity: 1; }
.gp-modal-container {
  position: relative;
  width: 100%;
  max-width: 580px;
  max-height: calc(100vh - 48px);
  max-height: calc(100svh - 48px);
  /* Flex-Column: fixer Header, scrollender Mittelteil, fixer Aktions-Footer.
     Der Container selbst scrollt nicht (overflow:hidden) -> der Footer ist per
     Layout gepinnt statt via sticky und kann nie hinter der iOS-Toolbar landen. */
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--gp-bg-white);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.20);
  transform: translateY(16px);
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
  font-family: var(--gp-font);
  color: var(--gp-navy);
}
/* Header: fester oberer Block, Innenabstand statt Container-Padding. */
.gp-modal-container .gp-modal-header {
  flex: 0 0 auto;
  padding: 40px 32px 0;
}
/* Scroll-Mittelteil: nur so hoch wie sein Inhalt (flex-grow:0), schrumpft aber bei
   Ueberlauf und scrollt dann (flex-shrink:1 + min-height:0). Dadurch folgt der
   Footer bei kurzem Formular direkt dem Inhalt statt am Viewport-Boden zu kleben;
   bei langem Formular bleibt er unten fix. */
.gp-modal-container .gp-form-wrapper {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 24px 32px 20px;
}
/* Aktions-Footer: nicht schrumpfender, immer sichtbarer Fussbereich. */
.gp-modal-container .gp-form-actions {
  flex: 0 0 auto;
  padding: 20px 32px calc(24px + env(safe-area-inset-bottom, 0px));
  background: var(--gp-bg-white);
}
/* Trennschatten nur, wenn der Formularbereich wirklich scrollbar ist und noch
   nicht am Ende (JS setzt .is-scrollable / .is-scrolled-end). Bei kurzem Formular
   kein schwebender Divider im weissen Modal. */
.gp-modal-container.is-scrollable:not(.is-scrolled-end) .gp-form-actions {
  box-shadow: 0 -8px 12px -6px rgba(0,0,0,0.10);
}
.gp-modal-container .gp-form-actions .gp-submit-btn { margin-top: 0; }
.gp-modal-container .gp-form-actions .gp-error-msg { margin-bottom: 0; }
.gp-modal-overlay.gp-modal-active .gp-modal-container { transform: translateY(0); }
.gp-modal-close {
  position: absolute;
  top: 10px; right: 10px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--gp-text-muted);
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}
.gp-modal-close:hover { background: var(--gp-bg-muted); color: var(--gp-navy); }
.gp-modal-close:focus-visible { outline: 2px solid var(--gp-green); outline-offset: 2px; }
.gp-modal-close svg {
  width: 22px; height: 22px;
  stroke: currentColor; stroke-width: 2;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.gp-modal-header {
  padding-right: 40px;
}
.gp-modal-header h2 {
  margin: 0 0 8px;
  font: 700 24px/1.25 var(--gp-font);
  color: var(--gp-navy);
  letter-spacing: -0.01em;
}
.gp-modal-header p {
  margin: 0;
  font: 400 14px/1.55 var(--gp-font);
  color: var(--gp-text-muted);
}
.gp-modal-container .gp-form-wrapper {
  background: transparent;
  border-radius: 0;
}
@media (max-width: 600px) {
  .gp-modal-overlay { padding: 0; align-items: stretch; }
  .gp-modal-container {
    max-width: 100%;
    /* svh = kleiner Viewport (iOS-Toolbar immer eingerechnet) -> der Container
       ragt nie unter die Safari-Bottom-Bar; Vollbild-Modal auf Mobile. */
    max-height: none;
    height: 100vh;
    height: 100svh;
    border-radius: 0;
  }
  .gp-modal-container .gp-modal-header { padding: 56px 20px 0; }
  .gp-modal-container .gp-form-wrapper { padding: 20px 20px 0; }
  .gp-modal-container .gp-form-actions {
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .gp-modal-container .gp-form-actions .gp-submit-btn { width: 100%; }
  .gp-modal-close { top: 10px; right: 10px; }
  .gp-modal-header h2 { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .gp-modal-overlay,
  .gp-modal-container { transition: none !important; animation: none !important; }
}