/* =========================================================
   GCGF PLATZREIFEKURS CONTACT DRAWER
   Vorlage: finaler SK Drawer
   Optik: GCGF Platzreife-Box / Bordeaux
   Hash: #anmeldung-platzreifekurs
   CF7: Anmeldung Platzreifekurs / ID 70982f8
   ========================================================= */


/* =========================================================
   OVERLAY
   ========================================================= */

#top .gcgf-pk-drawer-overlay {
  position: fixed !important;
  inset: 0;

  background: rgba(24, 61, 37, 0.45);

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;

  z-index: 999990 !important;
}

#top .gcgf-pk-drawer-overlay.is-open {
  opacity: 1;
  visibility: visible;
}


/* =========================================================
   DRAWER CONTAINER
   ========================================================= */

#top .gcgf-pk-drawer {
  position: fixed !important;

  top: 50%;
  right: 24px;

  width: min(500px, calc(100% - 48px));
  max-height: 76vh;
  height: auto;

  overflow-y: auto;
  overflow-x: hidden;

  border-radius: 22px;

  background: linear-gradient(135deg, #ffffff 0%, #fbfaf5 100%);
  border: 1px solid rgba(132, 29, 91, 0.16);

  transform: translateX(calc(100% + 48px)) translateY(-50%);
  transition: transform 0.35s ease;

  box-shadow:
    0 16px 38px rgba(24, 61, 37, 0.16),
    0 4px 14px rgba(24, 61, 37, 0.10);

  z-index: 999999 !important;

  box-sizing: border-box;
}

#top .gcgf-pk-drawer.is-open {
  transform: translateX(0) translateY(-50%);
}


/* =========================================================
   INNERER CONTENT
   ========================================================= */

#top .gcgf-pk-drawer-inner {
  padding: 30px 34px 30px;
  box-sizing: border-box;
}


/* =========================================================
   CLOSE BUTTON
   ========================================================= */

#top .gcgf-pk-drawer-close {
  position: absolute;

  top: 16px;
  right: 16px;

  width: 38px;
  height: 38px;

  border: 0;
  border-radius: 50%;

  background: rgba(132, 29, 91, 0.10);
  color: #841d5b;

  font-size: 28px;
  line-height: 34px;

  cursor: pointer;

  z-index: 1000000 !important;

  transition:
    background 0.2s ease,
    color 0.2s ease;
}

#top .gcgf-pk-drawer-close:hover {
  background: #841d5b;
  color: #ffffff;
}


/* =========================================================
   DRAWER HEAD
   Anlehnung an Platzreife-Box
   ========================================================= */

#top .gcgf-pk-drawer-head {
  display: flex;
  align-items: flex-start;
  gap: 20px;

  margin: 0 46px 28px 0;
}

#top .gcgf-pk-drawer-icon {
  width: 76px;
  height: 76px;
  flex: 0 0 76px;

  border-radius: 50%;
  background: #841d5b;
  color: #ffffff;

  display: flex;
  align-items: center;
  justify-content: center;
}

#top .gcgf-pk-drawer-icon img {
  width: 46px;
  height: 46px;
  display: block;

  filter: brightness(0) invert(1);
}

#top .gcgf-pk-drawer-head-text {
  flex: 1;
  min-width: 0;
}

#top .gcgf-pk-drawer-head h2 {
  margin: 0 0 7px;

  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 28px;
  line-height: 1.1;
  font-weight: 400;

  color: #841d5b;
}

#top .gcgf-pk-drawer-head p {
  margin: 0;

  font-size: 16px;
  line-height: 1.4;

  color: #1f2c24;
}


/* =========================================================
   BODY LOCK
   ========================================================= */

body.gcgf-pk-drawer-open {
  overflow: hidden;
}


/* =========================================================
   CONTACT FORM 7 BASIS
   Erwartete CF7-Struktur:
   .gcgf-pk-form
   .gcgf-pk-field
   .gcgf-pk-privacy
   .gcgf-pk-submit
   ========================================================= */

#top .gcgf-pk-drawer .wpcf7,
#top .gcgf-pk-drawer .wpcf7 form {
  margin: 0;
  padding: 0;
}

#top .gcgf-pk-drawer .gcgf-pk-form {
  display: flex;
  flex-direction: column;
  gap: 14px;

  margin: 0;
  padding: 0;
}

/* Alte CF7-/WordPress-Abstände neutralisieren */
#top .gcgf-pk-drawer .wpcf7 p,
#top .gcgf-pk-drawer .gcgf-pk-form p {
  margin: 0;
  padding: 0;
}

#top .gcgf-pk-drawer .wpcf7 br {
  display: none;
}


/* =========================================================
   FORMULARZEILEN
   ========================================================= */

#top .gcgf-pk-drawer .gcgf-pk-field {
  margin: 0;
  padding: 0;
}

#top .gcgf-pk-drawer .gcgf-pk-field label {
  display: block;

  margin: 0 0 5px;
  padding: 0;

  font-size: 13px;
  line-height: 1.3;
  font-weight: 700;

  color: #25362b;
}

#top .gcgf-pk-drawer .wpcf7-form-control-wrap {
  display: block;

  margin: 0;
  padding: 0;
}


/* =========================================================
   FORMULARFELDER
   ========================================================= */

#top .gcgf-pk-drawer .wpcf7 input,
#top .gcgf-pk-drawer .wpcf7 textarea,
#top .gcgf-pk-drawer .wpcf7 select {
  width: 100%;

  margin: 0;
  padding: 10px 12px;

  min-height: 41px;

  border-radius: 10px;
  border: 1px solid rgba(132, 29, 91, 0.16);

  background: #fbf6f3;
  color: #1f2c24;

  font-size: 13px;
  line-height: 1.35;

  box-sizing: border-box;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

#top .gcgf-pk-drawer .wpcf7 select {
  height: 41px;
}

#top .gcgf-pk-drawer .wpcf7 input::placeholder,
#top .gcgf-pk-drawer .wpcf7 textarea::placeholder {
  color: rgba(31, 44, 36, 0.45);
}

#top .gcgf-pk-drawer .wpcf7 input:focus,
#top .gcgf-pk-drawer .wpcf7 textarea:focus,
#top .gcgf-pk-drawer .wpcf7 select:focus {
  outline: none;

  background: #ffffff;
  border-color: rgba(132, 29, 91, 0.55);
  box-shadow: 0 0 0 3px rgba(132, 29, 91, 0.12);
}


/* =========================================================
   DATENSCHUTZ / CHECKBOX
   CF7 Acceptance:
   Wrapper neutralisieren, inneres Label als Flex-Zeile
   ========================================================= */

#top .gcgf-pk-drawer .gcgf-pk-privacy {
  margin: 24px 0 0;
  padding: 0;
}

#top .gcgf-pk-drawer .wpcf7-acceptance,
#top .gcgf-pk-drawer .wpcf7-acceptance .wpcf7-list-item {
  display: block !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* Entscheidend: CF7 setzt Checkbox + Text im inneren Label */
#top .gcgf-pk-drawer .wpcf7-acceptance .wpcf7-list-item > label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 5px !important;

  margin: 0 !important;
  padding: 0 !important;

  width: 100% !important;
  max-width: 100% !important;
}

#top .gcgf-pk-drawer .wpcf7-acceptance input[type="checkbox"] {
  appearance: auto !important;
  -webkit-appearance: checkbox !important;

  display: inline-block !important;

  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;

  min-height: 18px !important;
  max-height: 18px !important;

  flex: 0 0 18px !important;

  margin: 0 2px 0 0 !important;
  padding: 0 !important;

  border-radius: 3px !important;
  box-shadow: none !important;

  background: initial !important;
  border: initial !important;

  accent-color: #841d5b;
}

#top .gcgf-pk-drawer .wpcf7-acceptance .wpcf7-list-item-label {
  display: block !important;
  flex: 1 1 auto !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 11.5px !important;
  line-height: 1.35 !important;
  font-weight: 400;

  color: #344237 !important;
}

#top .gcgf-pk-drawer .wpcf7-acceptance a {
  color: #841d5b;
  text-decoration: none;
  font-weight: 800;
}

#top .gcgf-pk-drawer .wpcf7-acceptance a:hover {
  color: #6f184c;
  text-decoration: underline;
}


/* =========================================================
   ABSENDEN BUTTON
   ========================================================= */

#top .gcgf-pk-drawer .gcgf-pk-submit {
  margin: 6px 0 0;
  padding: 0;
}

#top .gcgf-pk-drawer .wpcf7-submit,
#top .gcgf-pk-drawer input[type="submit"].wpcf7-submit {
  display: flex;

  width: 100%;

  margin: 0;
  padding: 13px 22px;

  justify-content: center;
  align-items: center;

  border: 0;
  border-radius: 999px !important;

  background: #841d5b;
  color: #ffffff !important;

  font-size: 14px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.04em;

  box-shadow: 0 10px 22px rgba(24, 61, 37, 0.18);

  cursor: pointer;

  transition:
    background 0.2s ease,
    transform 0.1s ease,
    box-shadow 0.2s ease;
}

#top .gcgf-pk-drawer .wpcf7-submit:hover,
#top .gcgf-pk-drawer input[type="submit"].wpcf7-submit:hover {
  background: #6f184c;
  color: #ffffff !important;
}

#top .gcgf-pk-drawer .wpcf7-submit:active {
  transform: translateY(1px);
}


/* =========================================================
   CLOUDFLARE TURNSTILE
   ========================================================= */

#top .gcgf-pk-drawer .cf-turnstile {
  margin: 6px 0 0;
  transform: scale(0.90);
  transform-origin: left top;
}


/* =========================================================
   WP ARMOUR / HONEYPOT
   Nur Admin-Hinweis kompakt halten
   ========================================================= */

#top .gcgf-pk-drawer .wp-armour-message,
#top .gcgf-pk-drawer .wpa-test-msg {
  margin-top: 8px;
  padding: 10px 12px;

  border-radius: 12px;

  font-size: 12px;
  line-height: 1.35;
}


/* =========================================================
   MELDUNGEN / FEEDBACK
   ========================================================= */

#top .gcgf-pk-drawer .wpcf7-not-valid-tip {
  margin: 4px 0 0;
  padding: 0;

  color: #841d5b;

  font-size: 12px;
  line-height: 1.25;
}

#top .gcgf-pk-drawer .wpcf7-response-output {
  margin: 10px 0 0 !important;
  padding: 10px 12px !important;

  border-radius: 12px;
  border-color: rgba(132, 29, 91, 0.16) !important;

  background: #fbf6f3;
  color: #25362b;

  font-size: 13px;
  line-height: 1.4;
}


/* =========================================================
   MOBILE OPTIMIERUNG
   ========================================================= */

@media only screen and (max-width: 640px) {

  #top .gcgf-pk-drawer {
    top: 50%;
    right: 12px;

    width: calc(100% - 24px);
    max-height: 90vh;

    border-radius: 22px;

    transform: translateX(calc(100% + 24px)) translateY(-50%);
  }

  #top .gcgf-pk-drawer.is-open {
    transform: translateX(0) translateY(-50%);
  }

  #top .gcgf-pk-drawer-inner {
    padding: 28px 20px 28px;
  }

  #top .gcgf-pk-drawer-head {
    gap: 16px;
    margin: 0 38px 20px 0;
  }

  #top .gcgf-pk-drawer-icon {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
  }

  #top .gcgf-pk-drawer-icon img {
    width: 40px;
    height: 40px;
  }

  #top .gcgf-pk-drawer-head h2 {
    font-size: 26px;
  }

  #top .gcgf-pk-drawer-head p {
    font-size: 15px;
  }

  #top .gcgf-pk-drawer-close {
    top: 14px;
    right: 14px;
  }

  #top .gcgf-pk-drawer .gcgf-pk-form {
    gap: 13px;
  }

  #top .gcgf-pk-drawer .wpcf7 input,
  #top .gcgf-pk-drawer .wpcf7 textarea,
  #top .gcgf-pk-drawer .wpcf7 select {
    min-height: 40px;
    padding: 9px 11px;
  }

  #top .gcgf-pk-drawer .wpcf7 select {
    height: 40px;
  }

  #top .gcgf-pk-drawer .wpcf7-acceptance .wpcf7-list-item > label {
    gap: 4px !important;
  }

  #top .gcgf-pk-drawer .wpcf7-acceptance input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;

    min-height: 20px !important;
    max-height: 20px !important;

    flex: 0 0 20px !important;

    margin: 0 2px 0 0 !important;

    border-radius: 3px !important;
  }

  #top .gcgf-pk-drawer .wpcf7-acceptance .wpcf7-list-item-label {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }

  #top .gcgf-pk-drawer .cf-turnstile {
    transform: scale(0.86);
  }
}