/* Newsletter form - Completely rewritten with flexbox */

/* Title above newsletter */
#block-twbase-webform::before {
  content: "Εγγραφή στο Newsletter";
  display: block;
  font-weight: 700;
  margin-bottom: 0.75rem;
  font-size: 1.125rem;
  color: white;
}

/* ========= FORM LAYOUT ========= */
/* Make the form use modern CSS */
.webform-submission-newsletter-form,
.webform-submission-newsletter-add-form,
.webform-submission-newsletter-node-form,
.webform-submission-newsletter-node-add-form,
#webform-submission-newsletter-add-form {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  max-width: 400px;
}

/* Style the email container */
.webform-submission-newsletter-form .js-form-type-email,
.webform-submission-newsletter-add-form .js-form-type-email,
.webform-submission-newsletter-node-form .js-form-type-email,
.webform-submission-newsletter-node-add-form .js-form-type-email,
#webform-submission-newsletter-add-form .js-form-type-email {
  flex: 1;
  margin: 0;
}

/* Style the email input */
.webform-submission-newsletter-form #edit-email,
.webform-submission-newsletter-add-form #edit-email,
.webform-submission-newsletter-node-form #edit-email,
.webform-submission-newsletter-node-add-form #edit-email,
#webform-submission-newsletter-add-form #edit-email {
  height: 40px;
  width: 100%;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  background-color: #374151;
  border: 1px solid #4B5563;
  color: white;
  padding: 0 12px;
  box-sizing: border-box;
}

/* Style the submit button container */
.webform-submission-newsletter-form .form-actions,
.webform-submission-newsletter-add-form .form-actions,
.webform-submission-newsletter-node-form .form-actions,
.webform-submission-newsletter-node-add-form .form-actions,
#webform-submission-newsletter-add-form .form-actions {
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
}

/* Style the submit button itself */
.webform-submission-newsletter-form input[type="submit"],
.webform-submission-newsletter-add-form input[type="submit"],
.webform-submission-newsletter-node-form input[type="submit"],
.webform-submission-newsletter-node-add-form input[type="submit"],
#webform-submission-newsletter-add-form #edit-submit--2 {
  width: 40px;
  height: 40px;
  background-color: #2563EB;
  border: none;
  color: transparent;
  font-size: 0;
  padding: 0;
  margin: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  position: relative;
  cursor: pointer;
}

/* Hover state */
#webform-submission-newsletter-add-form #edit-submit--2:hover {
  background-color: #1D4ED8;
}

/* Replace the button content with a chevron icon - only for newsletter */
#webform-submission-newsletter-add-form #edit-submit--2,
#webform-submission-newsletter-add-form .webform-button--submit,
#webform-submission-newsletter-form .webform-button--submit,
.webform-submission-newsletter-form input[type="submit"].form-submit,
#webform-submission-newsletter-add-form input[type="submit"].form-submit {
  position: relative !important;
  font-size: 0 !important;
  color: transparent !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
}

/* Add the chevron icon - only for newsletter form */
#webform-submission-newsletter-add-form #edit-submit--2:after,
#webform-submission-newsletter-add-form .webform-button--submit:after,
#webform-submission-newsletter-form .webform-button--submit:after,
.webform-submission-newsletter-form input[type="submit"].form-submit:after,
#webform-submission-newsletter-add-form input[type="submit"].form-submit:after,
.webform-submission-newsletter-form .button.button--primary:after,
#webform-submission-newsletter-form .button.button--primary:after {
  content: "➜" !important; /* Fallback unicode chevron */
  font-family: sans-serif !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 16px !important;
  height: 16px !important;
  color: white !important;
  font-size: 16px !important;
  text-indent: 0 !important;
  display: block !important;
  z-index: 999 !important;
}

/* SVG background version as backup - only for newsletter */
#webform-submission-newsletter-add-form #edit-submit--2,
#webform-submission-newsletter-add-form .webform-button--submit,
#webform-submission-newsletter-form .webform-button--submit,
.webform-submission-newsletter-form input[type="submit"].form-submit,
#webform-submission-newsletter-add-form input[type="submit"].form-submit {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'%3E%3C/path%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
}

/* Hide form elements that might break layout */
#webform-submission-newsletter-add-form input[type="hidden"] {
  display: none !important;
}