/* Custom ActiveCampaign Plugin Styles */

/* Button Styles für Shortcode */
.ac-modal-button {
  background: #007cba;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.ac-modal-button:hover {
  background: #005a87;
}

/* Trigger Button Styles - für WordPress Standard Buttons */
.ac-modal-trigger,
[class*="ac-modal-trigger-"] {
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Optional: Styling für Trigger Buttons */
.ac-modal-trigger:hover,
[class*="ac-modal-trigger-"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Modal Overlay - Hidden by default */
.ac-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
  /* The overlay scrolls (not the page behind it), e.g. when the iOS keyboard is open */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.ac-modal-overlay.show {
  display: flex;
  opacity: 1;
}

/* Touch devices: the on-screen keyboard covers the lower part of the overlay.
   Extra space below the modal keeps the overlay always scrollable, so the
   submit button can be scrolled above the keyboard and scrolling never
   reaches the page behind it (overscroll-behavior: contain). */
@media (hover: none) {
  .ac-modal-overlay.show {
    display: block;
  }

  .ac-modal-overlay::after {
    content: "";
    display: block;
    height: 50vh;
  }

  .ac-modal-overlay .ac-modal {
    margin: 20px auto;
  }
}

/* Modal Container */
.ac-modal {
  background: white;
  max-width: 500px;
  width: 90%;
  /* Top-aligned like the old 1.0 template (no modal-dialog-centered).
     align-self stops the flex overlay from stretching the modal to full height */
  margin: 1.75rem auto;
  align-self: flex-start;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.ac-modal-overlay.show .ac-modal {
  transform: scale(1);
}

/* Modal Header */
.ac-modal-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.ac-modal-title {
  margin: 0;
  margin-right: auto;
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.ac-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  font-weight: 200;
  cursor: pointer;
  padding: 4px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  transition: color 0.2s ease;
  line-height: 1;
}

.ac-modal-close:hover {
  color: #666;
}

/* Modal Body */
.ac-modal-body {
  padding: 20px 24px 24px;
}

.ac-modal-subtitle {
  margin: 0 0 20px 0;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

.ac-modal-disclaimer {
  display: block;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #eee;
  color: #666;
  font-size: 11px;
  line-height: 1.4;
  text-align: left;
}

/* Form Styles */
form[id*="_form_"][class*="_form_"] {
  margin: 0 !important;
  padding: 0 !important;
}

/* Überschreibe ActiveCampaign Inline-Styles */
form[id*="_form_"][class*="_form_"] input,
form[id*="_form_"][class*="_form_"] select {
  width: 100% !important;
  padding: 12px !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  /* At least 16px, otherwise iOS Safari zooms in when a field gets focus */
  font-size: 16px !important;
  margin-bottom: 16px !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease !important;
  background: white !important;
  color: #333 !important;
  font-family: inherit !important;
}

form[id*="_form_"][class*="_form_"] input:focus,
form[id*="_form_"][class*="_form_"] select:focus {
  outline: none !important;
  border-color: #007cba !important;
  box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.1) !important;
}

form[id*="_form_"][class*="_form_"] input[type="date"] {
  display: none !important;
}

form[id*="_form_"][class*="_form_"] ._button-wrapper {
  margin-top: 20px;
}

#ac-modal-overlay form[id*="_form_"][class*="_form_"] input[type="submit"]._submit,
#ac-modal-overlay form[id*="_form_"][class*="_form_"] button[type="submit"]._submit {
    background-color: var(--wp--preset--color--orange) !important;
    border-radius: 8px !important;
    border-width: 0 !important;
    color: var(--wp--preset--color--beige) !important;
    font-family: inherit !important;
    font-size: clamp(16px, 2vw, 18px) !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    line-height: 1 !important;
    padding-top: 0.85rem !important;
    padding-right: 1.85rem !important;
    padding-bottom: 0.85rem !important;
    padding-left: 1.85rem !important;
    text-decoration: none !important;
    text-transform: uppercase !important;

    &:hover {
        background-color: var(--wp--preset--color--purple) !important;
    }
}

.ac-modal-overlay form[id*="_form_"][class*="_form_"] input[type="submit"]._submit,
.ac-modal-overlay form[id*="_form_"][class*="_form_"] button[type="submit"]._submit {
  font-size: 16px !important;
}

form[id*="_form_"][class*="_form_"] input[type="submit"]:hover,
form[id*="_form_"][class*="_form_"] button[type="submit"]:hover {
  background: #005a87 !important;
}

/* Überschreibe ActiveCampaign Container und Labels */
form[id*="_form_"][class*="_form_"] ._form-content,
form[id*="_form_"][class*="_form_"] ._form-content > * {
  margin: 0 !important;
  padding: 0 !important;
}

form[id*="_form_"][class*="_form_"] ._form-label,
form[id*="_form_"][class*="_form_"] label {
  display: block !important;
  margin-bottom: 8px !important;
  font-weight: 500 !important;
  color: #333 !important;
  font-size: 14px !important;
}

/* Hide extra form fields (ActiveCampaign specific) */
form[id*="_form_"][class*="_form_"] ._form-content > *:nth-child(n+5):not(._button-wrapper) {
  display: none;
}

._form_175 ._form-content > *:nth-child(n+3):not(._button-wrapper) {
  display: none;
}

/* Plain select style for latenight */
form[id*="_form_"][class*="_form_"] select.plain {
  border: 0;
  appearance: none;
  padding: 0;
  pointer-events: none;
  background: transparent;
}

/* Embedded Form Styles */
.ac-form-embedded {
  background: white;
  max-width: 600px;
  margin: 40px auto;
  padding: 0;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.ac-form-header {
  padding: 24px 28px 20px;
  border-bottom: 1px solid #eee;
}

.ac-form-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #333;
}

.ac-form-body {
  padding: 24px 28px 28px;
}

.ac-form-subtitle {
  margin: 0 0 20px 0;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

.ac-form-disclaimer {
  display: block;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #eee;
  color: #666;
  font-size: 11px;
  line-height: 1.4;
  text-align: left;
}

/* Embedded form submit button styles */
.ac-form-embedded form[id*="_form_"][class*="_form_"] input[type="submit"]._submit,
.ac-form-embedded form[id*="_form_"][class*="_form_"] button[type="submit"]._submit {
  background-color: var(--wp--preset--color--orange) !important;
  border-radius: 8px !important;
  border-width: 0 !important;
  color: var(--wp--preset--color--beige) !important;
  font-family: inherit !important;
  font-size: clamp(16px, 2vw, 18px) !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  line-height: 1 !important;
  padding-top: 0.85rem !important;
  padding-right: 1.85rem !important;
  padding-bottom: 0.85rem !important;
  padding-left: 1.85rem !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
}

.ac-form-embedded form[id*="_form_"][class*="_form_"] input[type="submit"]._submit:hover,
.ac-form-embedded form[id*="_form_"][class*="_form_"] button[type="submit"]._submit:hover {
  background-color: var(--wp--preset--color--purple) !important;
}

/* Scroll behavior for smooth scrolling to embedded form */
html {
  scroll-behavior: smooth;
}

/* Responsive */
@media (max-width: 576px) {
  .ac-modal {
    width: 95%;
    margin: 20px auto;
  }

  .ac-modal-header,
  .ac-modal-body {
    padding: 16px 20px;
  }

  /* Mobile only: body scrolls itself (like the old 1.0 template's modal-body) */
  .ac-modal-body {
    overflow: auto;
    max-height: 100vh;
  }

  .ac-modal-title {
    font-size: 18px;
  }

  .ac-form-embedded {
    margin: 20px 16px;
    border-radius: 4px;
  }

  .ac-form-header,
  .ac-form-body {
    padding: 20px;
  }

  .ac-form-title {
    font-size: 20px;
  }
}