/**
 * ONOC - Footer Newsletter Styles
 * Schlankes, modernes Design für CF7-Newsletter im Footer
 * 
 * Einbindung im Header:
 * <link rel="stylesheet" href="/wp-content/plugins/onoc-dolibarr/assets/css/footer-newsletter.css">
 */

/* =====================================================
   VARIABLES
   ===================================================== */
:root {
  --onoc-orange: #F84F2B;
  --onoc-orange-dark: #e6432a;
  --onoc-primary: #1e73be;
  --onoc-primary-dark: #1557a0;
}

/* =====================================================
   FOOTER NEWSLETTER FORM - BASE
   ===================================================== */
.formbox_footer .wpcf7 {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: 100%;
  border-radius: 0 !important;
  border-top: none !important;
}

/* =====================================================
   NEWSLETTER ROW - Inline Layout (Email + Button)
   ===================================================== */
.formbox_footer .newsletter-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 0 !important;
  margin: 0 !important;
}

/* Wrapper für Email-Input */
.formbox_footer .newsletter-row .wpcf7-form-control-wrap {
  flex: 1 !important;
  min-width: 0 !important;
}

/* Hidden Fields, BR & Fieldset ausblenden */
.formbox_footer .wpcf7 br,
.formbox_footer .wpcf7 fieldset {
  display: none !important;
}

/* =====================================================
   EMAIL INPUT
   ===================================================== */
.formbox_footer .wpcf7 input[type="email"] {
  width: 100% !important;
  min-width: 0 !important;
  height: 48px !important;
  padding: 0 16px !important;
  background: #ffffff !important;
  border: none !important;
  border-radius: 8px 0 0 8px !important;
  font-size: 15px !important;
  color: #1f2937 !important;
  transition: all 0.3s ease !important;
  box-sizing: border-box !important;
}

.formbox_footer .wpcf7 input[type="email"]::placeholder {
  color: #9ca3af !important;
}

.formbox_footer .wpcf7 input[type="email"]:focus {
  outline: none !important;
  box-shadow: inset 0 0 0 2px var(--onoc-primary) !important;
}

/* =====================================================
   SUBMIT BUTTON
   ===================================================== */
.formbox_footer .wpcf7 input[type="submit"] {
  height: 48px !important;
  padding: 0 28px !important;
  background: var(--onoc-primary) !important;
  border: none !important;
  border-radius: 0 8px 8px 0 !important;
  color: white !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  margin: 0 !important;
  width: auto !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

.formbox_footer .wpcf7 input[type="submit"]:hover {
  background: var(--onoc-primary-dark) !important;
  box-shadow: 0 4px 12px rgba(30, 115, 190, 0.4) !important;
}

/* =====================================================
   RESPONSE MESSAGES
   ===================================================== */
.formbox_footer .wpcf7-response-output {
  width: 100%;
  margin-top: 12px !important;
  padding: 12px 16px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  border: none !important;
}

.formbox_footer .wpcf7-response-output[aria-hidden="true"] {
  display: none;
}

/* Success Message */
.formbox_footer .wpcf7 form.sent .wpcf7-response-output {
  background: rgba(31, 180, 87, 0.15) !important;
  color: #166534 !important;
}

/* Error Message */
.formbox_footer .wpcf7 form.invalid .wpcf7-response-output {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #dc2626 !important;
}

/* Validation */
.formbox_footer .wpcf7-not-valid {
  border-color: #ef4444 !important;
}

.formbox_footer .wpcf7-not-valid-tip {
  color: #dc2626 !important;
  font-size: 12px !important;
  margin-top: 4px !important;
}

/* Screen Reader & Hidden Fields */
.formbox_footer .screen-reader-response,
.formbox_footer .hidden-fields-container,
.formbox_footer .profession-field {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 480px) {
  .formbox_footer .newsletter-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .formbox_footer .wpcf7 input[type="submit"] {
    width: 100% !important;
  }
}