/* =============================================================================
   LFGC PETIT FORM
   Registration form — Club Petit Grand Café (/formulario-petit/)
   Scope: all rules prefixed with .petit-form-* / .petit-legal-* class names.
   Add CSS class "lfgc-petit-section" to the Divi section for page background.

   CF7 AUTOP NOTE
   CF7 runs wpautop on the form template, which:
   - Wraps each label in its own <p> when they are separated by a blank line
   - Wraps multiple adjacent labels in ONE <p>, separated by <br>, when they
     share the same block (info-rows and the actions row)
   All layout rules below account for this real rendered structure.
   ============================================================================= */

/* ── Section background ────────────────────────────────────────────────────── */

.lfgc-petit-section {
  background-color: var(--lfgc-color-grey-lt) !important;
}

/* ── Local tokens ──────────────────────────────────────────────────────────── */

.wpcf7 {
  --pf-charcoal: var(--lfgc-color-charcoal);
  --pf-magenta:  var(--lfgc-color-magenta-dark);
}

/* =============================================================================
   ROW LAYOUT
   Rows 1-3: CF7 wraps each label in its own <p> → the <p> is the flex child.
   Info-rows 1-4 + actions: CF7 puts multiple items in ONE <p> → the <p> must
   become the flex container.
   ============================================================================= */

/* ── Rows 1 / 2 / 3  (one <p> per label) ──────────────────────────────────── */

.petit-form-row-1,
.petit-form-row-2,
.petit-form-row-3 {
  display: flex;
  align-items: flex-end;
  gap: 32px;
  width: 100%;
  margin-bottom: 37px;
}

.petit-form-row-2 { gap: 21px; }

/* <p> wrappers become the flex items — give them equal share */
.petit-form-row-1 > p,
.petit-form-row-2 > p,
.petit-form-row-3 > p {
  flex: 1 0 0;
  min-width: 0;
  margin: 0;
  padding: 0;
}

/* ── Info-rows 1-4  (both labels inside ONE <p>) ────────────────────────────── */

.petit-form-info-row-1,
.petit-form-info-row-2,
.petit-form-info-row-3,
.petit-form-info-row-4 {
  margin-bottom: 37px;
  width: 100%;
}

/* The single <p> becomes the flex row */
.petit-form-info-row-1 > p,
.petit-form-info-row-2 > p,
.petit-form-info-row-3 > p,
.petit-form-info-row-4 > p {
  display: flex;
  align-items: flex-end;
  gap: 31px;
  margin: 0;
  padding: 0;
  width: 100%;
}

/* Hide the <br> CF7 inserts between the two labels */
.petit-form-info-row-1 > p > br,
.petit-form-info-row-2 > p > br,
.petit-form-info-row-3 > p > br,
.petit-form-info-row-4 > p > br {
  display: none;
}

/* =============================================================================
   FIELD LABEL (underline container)
   ============================================================================= */

.petit-form-row-1 label,
.petit-form-row-2 label,
.petit-form-row-3 label,
.petit-form-info-row-1 label,
.petit-form-info-row-2 label,
.petit-form-info-row-3 label,
.petit-form-info-row-4 label {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 7px;
  margin: 0;
  border: none;
  border-bottom: 1px solid var(--pf-charcoal);
  font-family: 'Area Extended', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--pf-charcoal);
  line-height: 1.53;
  cursor: text;
  background: none;
  width: 100%;
}

/* Hide the <br> CF7 inserts between label text and the input span */
.petit-form-row-1 label > br,
.petit-form-row-2 label > br,
.petit-form-row-3 label > br,
.petit-form-info-row-1 label > br,
.petit-form-info-row-2 label > br,
.petit-form-info-row-3 label > br,
.petit-form-info-row-4 label > br {
  display: none;
}

/* CF7 control-wrap span — fill the label column */
.petit-form-row-1    .wpcf7-form-control-wrap,
.petit-form-row-2    .wpcf7-form-control-wrap,
.petit-form-row-3    .wpcf7-form-control-wrap,
.petit-form-info-row-1 .wpcf7-form-control-wrap,
.petit-form-info-row-2 .wpcf7-form-control-wrap,
.petit-form-info-row-3 .wpcf7-form-control-wrap,
.petit-form-info-row-4 .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* =============================================================================
   INPUT CONTROLS
   ============================================================================= */

/* ── Text / email inputs ─────────────────────────────────────────────────────── */

.petit-input {
  font-family: 'Lato', sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--pf-charcoal);
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0;
  width: 100%;
  line-height: 1.2;
  -webkit-appearance: none;
  appearance: none;
}

.petit-input:focus {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.petit-input::placeholder {
  color: var(--pf-charcoal);
  opacity: 0.35;
}

/* ── Date input ─────────────────────────────────────────────────────────────── */

.petit-date-field {
  font-family: 'Lato', sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--pf-charcoal);
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0;
  width: 100%;
  min-width: 0;         /* override browser's intrinsic min-width */
  line-height: 1.2;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.petit-date-field:focus {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.petit-date-field::-webkit-calendar-picker-indicator {
  opacity: 0.45;
  cursor: pointer;
  margin-left: 4px;
  flex-shrink: 0;
}

/* ── Select dropdown ────────────────────────────────────────────────────────── */

.petit-select {
  font-family: 'Lato', sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--pf-charcoal);
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 20px 0 0 !important;
  margin: 0;
  width: 100%;
  line-height: 1.2;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1L7 7.5L13 1' stroke='%234e5054' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 2px center !important;
  background-size: 14px 9px !important;
}

.petit-select:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* =============================================================================
   LEGAL CHECKBOX ROW
   CF7 renders acceptance as: .wpcf7-acceptance > .wpcf7-list-item > label >
   input[checkbox] + span.wpcf7-list-item-label
   ============================================================================= */

.petit-legal-row {
  margin-bottom: 20px;
}

.petit-legal-row > p {
  margin: 0;
}

.petit-legal-row .wpcf7-acceptance {
  display: block;
}

.petit-legal-row .wpcf7-list-item {
  margin: 0;
  padding: 0;
}

.petit-legal-row .wpcf7-acceptance label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--pf-charcoal);
  line-height: 1.53;
  cursor: pointer;
  border: none;
  padding-bottom: 0;
}

.petit-form-legal-check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: 1px solid var(--pf-charcoal) !important;
  border-radius: 0 !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  margin: 3px 0 0;
  position: relative;
  padding: 0 !important;
}

.petit-form-legal-check:checked {
  background-color: var(--pf-charcoal) !important;
}

.petit-form-legal-check:checked::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 11px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

/* =============================================================================
   LEGAL TEXT
   ============================================================================= */

.petit-legal-row-2 {
  font-family: 'Lato', sans-serif;
  font-size: clamp(14px, 1.4vw, 18px);
  font-weight: 400;
  color: var(--pf-charcoal);
  line-height: 1.53;
  max-width: 820px;
  margin-bottom: 46px;
}

.petit-legal-row-2 > p {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  line-height: inherit;
}

.petit-legal-row-2 a {
  color: var(--pf-magenta);
  text-decoration: none;
}

.petit-legal-row-2 a:hover {
  text-decoration: underline;
}

/* =============================================================================
   ACTIONS ROW  (VOLVER link + ENVIAR submit)
   Structure: .petit-form-actions > .petit-form-action-buttons-wrapper > <p>
   CF7 autop wraps the link + submit inside ONE <p> separated by <br>.
   The <p> must be the flex container; the <br> must be hidden.
   ============================================================================= */

.petit-form-actions {
  width: 100%;
}

.petit-form-action-buttons-wrapper {
  width: 100%;
}

/* The <p> wrapping both items becomes the flex row */
.petit-form-action-buttons-wrapper > p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 0;
  width: 100%;
  position: relative; /* anchor for the absolutely-positioned spinner */
}

/* CF7 appends .wpcf7-spinner as a sibling of the submit input inside this <p>.
   Removing it from the flex flow prevents it from being treated as a third flex
   item that shifts ENVIAR away from the right edge. */
.petit-form-action-buttons-wrapper > p > .wpcf7-spinner {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  pointer-events: none;
}

/* Hide the <br> CF7 inserts between link and submit */
.petit-form-action-buttons-wrapper > p > br {
  display: none;
}

/* ── VOLVER link ─────────────────────────────────────────────────────────────── */

.petit-form-action-buttons-wrapper > p > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(160px, 26vw, 350px);
  height: 55px;
  background-color: var(--pf-charcoal);
  color: #fff !important;
  font-family: 'Area_Extended_Bold', 'Area Extended', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none !important;
  padding: 0 18px;
  transition: background-color 0.18s;
  border: none;
}

.petit-form-action-buttons-wrapper > p > a:hover {
  background-color: #3a3d40;
  color: #fff !important;
}

/* ── ENVIAR submit ───────────────────────────────────────────────────────────── */

.petit-form-action-buttons-wrapper > p > input[type="submit"],
.petit-form-actions input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(160px, 26vw, 350px);
  height: 55px;
  background-color: var(--pf-magenta);
  color: #fff;
  font-family: 'Area_Extended_Bold', 'Area Extended', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  padding: 0 18px;
  line-height: 1;
  transition: background-color 0.18s;
}

.petit-form-action-buttons-wrapper > p > input[type="submit"]:hover,
.petit-form-actions input[type="submit"]:hover {
  background-color: #9a005a;
}

/* =============================================================================
   CF7 VALIDATION
   ============================================================================= */

.petit-form-row-1    .wpcf7-not-valid-tip,
.petit-form-row-2    .wpcf7-not-valid-tip,
.petit-form-row-3    .wpcf7-not-valid-tip,
.petit-form-info-row-1 .wpcf7-not-valid-tip,
.petit-form-info-row-2 .wpcf7-not-valid-tip,
.petit-form-info-row-3 .wpcf7-not-valid-tip,
.petit-form-info-row-4 .wpcf7-not-valid-tip {
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  color: var(--pf-magenta);
  margin-top: 3px;
  display: block;
}

.wpcf7-response-output {
  font-family: 'Lato', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.53 !important;
  border: none !important;
  border-left: 2px solid currentColor !important;
  border-radius: 0 !important;
  background: transparent !important;
  margin: 24px 0 0 !important;
  padding: 10px 16px !important;
}

.wpcf7-mail-sent-ok {
  color: var(--pf-charcoal) !important;
}

.wpcf7-validation-errors,
.wpcf7-spam-blocked,
.wpcf7-acceptance-missing {
  color: var(--pf-magenta) !important;
}

/* =============================================================================
   RESPONSIVE  (≤ 768px)
   ============================================================================= */

@media (max-width: 768px) {

  /* Rows 1/2/3 stack */
  .petit-form-row-1,
  .petit-form-row-2,
  .petit-form-row-3 {
    flex-direction: column;
    gap: 24px;
    margin-bottom: 24px;
  }

  .petit-form-row-1 > p,
  .petit-form-row-2 > p,
  .petit-form-row-3 > p {
    width: 100%;
  }

  /* Info-rows: stack the two labels inside the <p> */
  .petit-form-info-row-1 > p,
  .petit-form-info-row-2 > p,
  .petit-form-info-row-3 > p,
  .petit-form-info-row-4 > p {
    flex-direction: column;
    gap: 24px;
  }

  .petit-form-info-row-1,
  .petit-form-info-row-2,
  .petit-form-info-row-3,
  .petit-form-info-row-4 {
    margin-bottom: 24px;
  }

  .petit-form-row-1 label,
  .petit-form-row-2 label,
  .petit-form-row-3 label,
  .petit-form-info-row-1 label,
  .petit-form-info-row-2 label,
  .petit-form-info-row-3 label,
  .petit-form-info-row-4 label {
    width: 100%;
  }

  .petit-input,
  .petit-date-field,
  .petit-select {
    font-size: 16px;
  }

  .petit-legal-row .wpcf7-acceptance label {
    font-size: 15px;
  }

  .petit-legal-row-2 {
    font-size: 14px;
    margin-bottom: 32px;
  }

  /* Actions: stack buttons */
  .petit-form-action-buttons-wrapper > p {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .petit-form-action-buttons-wrapper > p > a,
  .petit-form-action-buttons-wrapper > p > input[type="submit"] {
    width: 100%;
    max-width: 100%;
    height: 52px;
  }
}