/*
  Join Our Circle — Brevo shortcode [sibwp_form id=2] visual override.

  This stylesheet is loaded only on the Abusua Pa custom page template and
  every selector is scoped beneath .circle-form-wrap. It does not edit the
  Brevo plugin itself and contains no API credentials.

  The selectors below explicitly support the actual configured Brevo form
  markup observed in wp-admin:
    form.sib_signup_form
    .sib_signup_box_inside
    p.sib-FIRSTNAME-area > input.sib-FIRSTNAME-area[name="FIRSTNAME"]
    p.sib-email-area > input.sib-email-area[name="email"]
    input.sib-default-btn[type="submit"]

  Desktop target: first name + email in two equal columns, compact centered
  submit button below. At 560px and below: fields stack and the button becomes
  full width. The live WordPress page still needs a final visual check because
  plugin-generated wrappers/messages can vary by plugin version.
*/

.circle-form-wrap {
  max-width: 480px;
  margin: 0 auto;
}

/* Neutralize Brevo wrapper defaults and establish the approved two-column
   field layout. Both selectors are intentional: some plugin versions wrap the
   field <p> elements in .sib_signup_box_inside, while others may place them
   directly in the form. If the inner wrapper exists, it spans the full outer
   grid and becomes the actual field grid. */
.circle-form-wrap form.sib_signup_form,
.circle-form-wrap .sib_signup_box_inside {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif !important;
  box-sizing: border-box;
  display: grid !important;
/*   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); */ /*mb Change */
  grid-template-columns: minmax(0, 1fr);  /*mb Change added*/
  column-gap: 12px;
  row-gap: clamp(14px, 1.6vw, 18px);
}
@media(min-width:480px){
.mb-columns {
    display: flex;
    column-gap: 10px;
	}
}
.circle-form-wrap form.sib_signup_form > .sib_signup_box_inside {
  grid-column: 1 / -1;
}

/* Actual Brevo field wrappers. */
.circle-form-wrap p.sib-FIRSTNAME-area,
.circle-form-wrap p.sib-email-area {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
/*   margin: 0 !important; */ /*mb Change */
  padding: 0 !important;
  box-sizing: border-box;
}

/* The button is output in its own unclassed <p> in the configured form.
   Make that row span both columns and center the compact desktop button. */
.circle-form-wrap form.sib_signup_form > p:not(.sib-FIRSTNAME-area):not(.sib-email-area),
.circle-form-wrap .sib_signup_box_inside > p:not(.sib-FIRSTNAME-area):not(.sib-email-area) {
  grid-column: 1 / -1;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center;
}

/* Inputs — match the approved v23 .circle-input design and explicitly defeat
   Brevo's possible fixed/max-width values. */
.circle-form-wrap p.sib-FIRSTNAME-area > input.sib-FIRSTNAME-area[type="text"],
.circle-form-wrap p.sib-email-area > input.sib-email-area[type="email"],
.circle-form-wrap input[name="FIRSTNAME"][type="text"],
.circle-form-wrap input[name="email"][type="email"] {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
  padding: clamp(13px, 1.2vw, 16px) clamp(16px, 1.8vw, 20px) !important;
  border: 1px solid rgba(21, 19, 13, 0.22) !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif !important;
  font-size: clamp(13px, 1.3vw, 15px) !important;
  line-height: normal !important;
  color: #15130D !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.circle-form-wrap input[name="FIRSTNAME"]::placeholder,
.circle-form-wrap input[name="email"]::placeholder {
  color: #15130D;
  opacity: 0.5;
}

.circle-form-wrap input[name="FIRSTNAME"]:focus-visible,
.circle-form-wrap input[name="email"]:focus-visible {
  outline: 2px solid #15130D;
  outline-offset: 2px;
}

.circle-form-wrap input[name="FIRSTNAME"]:invalid,
.circle-form-wrap input[name="email"]:invalid {
  box-shadow: none !important;
}

/* Submit — compact and centered on desktop, matching .circle-button. */
.circle-form-wrap input.sib-default-btn[type="submit"],
.circle-form-wrap button.sib-default-btn[type="submit"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  max-width: 100% !important;
  background: #B88B40 !important;
  color: #15130D !important;
  font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: clamp(13px, 1.2vw, 14px) !important;
  line-height: normal !important;
  padding: clamp(13px, 1.2vw, 16px) clamp(22px, 2.4vw, 30px) !important;
  border: none !important;
  border-radius: 999px !important;
  cursor: pointer;
  margin: 0 !important;
  box-shadow: none !important;
}

.circle-form-wrap input.sib-default-btn[type="submit"]:focus-visible,
.circle-form-wrap button.sib-default-btn[type="submit"]:focus-visible {
  outline: 2px solid #15130D;
  outline-offset: 3px;
}

/* If Brevo outputs real labels, keep them accessible while preserving the
   approved placeholder-only visual treatment. */
.circle-form-wrap label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Brevo success/error states — full-width and restrained. */
.circle-form-wrap .sib-alert-message,
.circle-form-wrap .sib-alert-message-success,
.circle-form-wrap .sib-alert-message-error,
.circle-form-wrap .sib_signup_confirmation,
.circle-form-wrap .sib_msg_disp,
.circle-form-wrap .sib-form-message-panel {
  grid-column: 1 / -1;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 12px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: clamp(15px, 1.5vw, 17px) !important;
  line-height: 1.5 !important;
  color: #15130D !important;
  text-align: center;
}

@media (max-width: 560px) {
  .circle-form-wrap form.sib_signup_form,
  .circle-form-wrap .sib_signup_box_inside {
    grid-template-columns: minmax(0, 1fr);
  }

  .circle-form-wrap form.sib_signup_form > .sib_signup_box_inside,
  .circle-form-wrap form.sib_signup_form > p,
  .circle-form-wrap .sib_signup_box_inside > p,
  .circle-form-wrap .sib-alert-message,
  .circle-form-wrap .sib-alert-message-success,
  .circle-form-wrap .sib-alert-message-error,
  .circle-form-wrap .sib_signup_confirmation,
  .circle-form-wrap .sib_msg_disp,
  .circle-form-wrap .sib-form-message-panel {
    grid-column: 1;
  }

  .circle-form-wrap input.sib-default-btn[type="submit"],
  .circle-form-wrap button.sib-default-btn[type="submit"] {
    width: 100% !important;
  }
}