/*
 * @file
 * Styling for the sidebar version of the Brevo Newsletter paragraph.
 */

.brevo-newsletter-sidebar-paragraph {
  background-color: #005AC8; /* Blue background */
  padding: 1em; /* Increased padding for better spacing */
  margin-top:50px;
  color: #fff;
  font-family: sans-serif; /* A good default for a clean look */
}

.g-recaptcha{
  transform: scale(0.83);
  transform-origin: 0 0;
}

.brevo-newsletter-sidebar-paragraph__container {
  margin-left: 10px;
  margin-right: 10px;
}

.brevo-newsletter-sidebar-paragraph__title {
  font-size: 1.5em; /* Slightly larger for more impact */
  font-weight: 600; /* Bolder */
  margin-top: 0;
  margin-bottom: 0.6em !important;  /* Adjusted margin */
  color: #fff;
  line-height: 1.2;
}

.brevo-newsletter-sidebar-paragraph__description {
  font-size: 1em;
  margin-bottom: 1.0em !important; /* More space before the form */
  line-height: 1.5;
  opacity: 1; /* Full opacity */
  font-weight:500;
}

.brevo-newsletter-sidebar-paragraph__description p {
  margin: 0;
  color: #fff !important;
}

/* =============================================
   Form Element Styling (Corrections and Additions)
   ============================================= */

.brevo-container-form.brevo-newsletter-sidebar--paragraph__form-side{
  width:87%;
}
/* Style for the email field label */
.brevo-newsletter-sidebar-paragraph .form-item-email label {
  font-size: 0.95em;
  font-weight: 500; /* Semibold */
  margin-bottom: 0.5em;
  display: none; /* Ensure it's on its own line */
}

/* Style for the email input box */
.brevo-newsletter-sidebar-paragraph .brevo-newsletter-form__email-input {
  width: 100%;
  padding: 0.5em;
  border: none; /* Remove default border */
  border-radius: 0; /* Sharp corners as in the design */
  background-color: #fff;
  color: #222; /* Text color when typing */
  font-size: 1em;
  margin-bottom: 1.5em; /* Space below the input */
  box-sizing: border-box; /* Ensures padding is included in the width */
}

.brevo-newsletter-sidebar-paragraph .brevo-newsletter-form__email-input::placeholder {
  color: #005AC8;
  font-weight:500;
}

/* Fix for consent checkbox alignment */
.brevo-newsletter-sidebar-paragraph .form-item-consent {
  display: flex; /* Use flexbox for alignment */
  align-items: flex-start; /* Align checkbox top with text top */
  gap: 0.8em; /* Space between checkbox and text */
  margin-bottom: 2em; /* More space before the button */
  color:#fff;
}

/* Target the checkbox itself for minor adjustments */
.brevo-newsletter-sidebar-paragraph .brevo-newsletter-form__consent-checkbox {
  margin-top: 0.2em; /* Fine-tune vertical position */
  flex-shrink: 0;
}

/* Style for the consent label text */
.brevo-newsletter-sidebar-paragraph .form-item-consent label,
.brevo-newsletter-sidebar-paragraph .form-item-consent label p {
  font-size: 0.875em; /* 14px */
  line-height: 1.5;
  margin: 0; /* Remove default paragraph margins */
  color:#fff;
  font-weight: 500;
}

/* FIX: Style for the link inside the consent label */
.brevo-newsletter-sidebar-paragraph .form-item-consent label a {
  color: #fff;
  font-weight: 600; /* Make it stand out */
  text-decoration: underline;
}

/* The wrapper for the submit button - ensure it's not centered */
.brevo-newsletter-sidebar-paragraph .form-actions {
  text-align: left;
}


/* Complete style for the submit button */
.brevo-newsletter-sidebar-paragraph .brevo-newsletter-form__submit-button {
  background-color: transparent;
  border: 1px solid #fff;
  color: #fff;
  padding: 0.7em 1.5em;
  font-size: 1em;
  font-weight: 600;
  border-radius: 1px; /* Slightly rounded corners */
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  display: inline-flex; /* Use inline-flex for alignment with icon */
  align-items: center;
  gap: 0.6em; /* Space between "Send" and the arrow */
  line-height: 1;
  width: auto; /* IMPORTANT: Let the button size to its content */
}

/* Hover/focus state for the button */
.brevo-newsletter-sidebar-paragraph .brevo-newsletter-form__submit-button:hover,
.brevo-newsletter-sidebar-paragraph .brevo-newsletter-form__submit-button:focus {
  background-color: #fff;
  color: #005AC8; /* The blue background color */
  outline: none;
}

.brevo-newsletter-form__submit-button::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 12L2 4L7 12L2 20L22 12Z'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 12L2 4L7 12L2 20L22 12Z'/></svg>") no-repeat center / contain;
}