/* =============================================================================
 * Became a Vendor — popup "Send request" (Figma 681-16561)
 * -----------------------------------------------------------------------------
 * Stila il popup UpSolution (.w-popup) e il Gravity Form (#gform_wrapper_1)
 * come da design: modale crema radius 40, header con titolo Lora italic + X,
 * campi con label + asterisco gradiente, input bianchi radius 12, footer con
 * checkbox privacy + bottone navy pill.
 *
 * SOLO CSS. I campi del form (First/Last Name, Email, Phone, VAT, Location,
 * checkbox privacy, ...) li gestisce l'utente in Gravity Forms (form id=1).
 * Il trigger del popup lo collega l'utente (attualmente data-selector=".my-element").
 *
 * Scope: body.page-id-402 (pagina became-a-vendor) + #gform_wrapper_1 (form id=1)
 * per non toccare altri popup/form del sito.
 * ========================================================================== */

/* Font di progetto (già usati in cart/checkout) */
:root {
  --pmc-lora: "Lora", Georgia, serif;
  --pmc-hn: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pmc-cream: #f9f1e3;
  --pmc-ink: #080707;
  --pmc-char: #3f3a35;      /* charcoal */
  --pmc-lchar: #766f67;     /* light charcoal / bordo default */
  --pmc-navy-a: #41476f;
  --pmc-navy-b: #262a42;
  --pmc-req-grad: linear-gradient(101.77deg, #9db3c7 0%, #373b56 70.59%);
}

/* -------------------------------------------------------------------------- */
/* 1. Overlay                                                                 */
/* -------------------------------------------------------------------------- */
body.page-id-402 .w-popup-overlay {
  background: rgba(0, 0, 0, 0.5) !important;
}

/* -------------------------------------------------------------------------- */
/* 2. Modale (box crema)                                                      */
/* -------------------------------------------------------------------------- */
body.page-id-402 .w-popup-box {
  background: var(--pmc-cream) !important;
  border-radius: 40px !important;
  width: min(620px, 92vw) !important;
  max-width: 620px !important;
  max-height: 88vh !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

body.page-id-402 .w-popup-box-h,
body.page-id-402 .w-popup-box-content {
  height: 100%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* La section WPBakery interna = colonna che riempie il box */
body.page-id-402 .w-popup-box-content > .l-section,
body.page-id-402 .w-popup-box-content .l-section-h,
body.page-id-402 .w-popup-box-content .g-cols,
body.page-id-402 .w-popup-box-content .vc_column_container,
body.page-id-402 .w-popup-box-content .vc_column-inner,
body.page-id-402 .w-popup-box-content .wpb_wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
}

/* -------------------------------------------------------------------------- */
/* 3. Pulsante di chiusura (X)                                                */
/* -------------------------------------------------------------------------- */
body.page-id-402 .w-popup-box .w-popup-closer {
  position: absolute;
  top: 30px;
  right: 32px;
  width: 24px;
  height: 24px;
  z-index: 5;
  opacity: 1;
  color: var(--pmc-ink);
}
body.page-id-402 .w-popup-box .w-popup-closer::before,
body.page-id-402 .w-popup-box .w-popup-closer::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  background: var(--pmc-ink);
  border-radius: 2px;
}
body.page-id-402 .w-popup-box .w-popup-closer::before { transform: translate(-50%, -50%) rotate(45deg); }
body.page-id-402 .w-popup-box .w-popup-closer::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* -------------------------------------------------------------------------- */
/* 4. Header — titolo "Send request" (h4) + eventuale sottotitolo             */
/* -------------------------------------------------------------------------- */
body.page-id-402 .w-popup-box-content .w-text:first-child .w-text-value {
  font-family: var(--pmc-lora) !important;
  font-style: italic !important;
  font-weight: 600 !important;
  font-size: 24px !important;
  line-height: 1.2 !important;
  color: var(--pmc-ink) !important;
}
/* Sottotitolo opzionale: se l'utente aggiunge un secondo elemento testo
   ("Fill the following field...") subito dopo il titolo, viene stilato così */
body.page-id-402 .w-popup-box-content .w-text:first-child .w-text-subtitle,
body.page-id-402 .w-popup-box-content .w-text:first-child + p {
  font-family: var(--pmc-hn) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: var(--pmc-char) !important;
  margin-top: 4px !important;
}

/* -------------------------------------------------------------------------- */
/* 5. Gravity Forms wrapper — corpo scrollabile                               */
/* -------------------------------------------------------------------------- */
body.page-id-402 #gform_wrapper_1 {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 !important;
}
body.page-id-402 #gform_wrapper_1 form { margin: 0 !important; }

/* Scrollbar sottile scura (come il design) */
body.page-id-402 #gform_wrapper_1 .gform_body::-webkit-scrollbar { width: 4px; }
body.page-id-402 #gform_wrapper_1 .gform_body::-webkit-scrollbar-thumb {
  background: var(--pmc-char); border-radius: 17px;
}

/* Griglia campi: gap 20px */
body.page-id-402 #gform_wrapper_1 .gform_fields {
  display: flex !important;
  flex-direction: column;
  gap: 20px !important;
  grid-row-gap: 20px !important;
}
body.page-id-402 #gform_wrapper_1 .gfield { margin: 0 !important; }

/* -------------------------------------------------------------------------- */
/* 6. Label + asterisco richiesto (gradiente)                                 */
/* -------------------------------------------------------------------------- */
body.page-id-402 #gform_wrapper_1 .gfield_label {
  font-family: var(--pmc-hn) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: var(--pmc-char) !important;
  padding: 0 4px !important;
  margin: 0 0 6px 0 !important;
}
body.page-id-402 #gform_wrapper_1 .gfield_required,
body.page-id-402 #gform_wrapper_1 .gfield_required_asterisk {
  font-family: var(--pmc-hn) !important;
  font-weight: 500 !important;
  margin-left: 2px;
  background-image: var(--pmc-req-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}

/* -------------------------------------------------------------------------- */
/* 7. Input / select / textarea                                               */
/* -------------------------------------------------------------------------- */
body.page-id-402 #gform_wrapper_1 input[type="text"],
body.page-id-402 #gform_wrapper_1 input[type="email"],
body.page-id-402 #gform_wrapper_1 input[type="tel"],
body.page-id-402 #gform_wrapper_1 input[type="url"],
body.page-id-402 #gform_wrapper_1 input[type="number"],
body.page-id-402 #gform_wrapper_1 input[type="password"],
body.page-id-402 #gform_wrapper_1 select,
body.page-id-402 #gform_wrapper_1 textarea {
  width: 100% !important;
  background: #fff !important;
  border: 1px solid var(--pmc-lchar) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  font-family: var(--pmc-hn) !important;
  font-size: 16px !important;
  line-height: 1.4 !important;       /* override line-height:48 del tema Impreza */
  height: auto !important;
  min-height: 0 !important;
  color: var(--pmc-ink) !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}
body.page-id-402 #gform_wrapper_1 textarea {
  min-height: 88px !important;
  resize: vertical;
}

/* Placeholder = light charcoal */
body.page-id-402 #gform_wrapper_1 ::placeholder { color: var(--pmc-lchar) !important; opacity: 1; }

/* Focus = bordo 2px nero */
body.page-id-402 #gform_wrapper_1 input:focus,
body.page-id-402 #gform_wrapper_1 select:focus,
body.page-id-402 #gform_wrapper_1 textarea:focus {
  border: 2px solid var(--pmc-ink) !important;
  outline: none !important;
  padding: 9px 11px !important;      /* compensa il +1px di bordo */
}

/* Select: chevron custom a destra (il nativo viene nascosto da appearance:none) */
body.page-id-402 #gform_wrapper_1 select {
  padding-right: 40px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%233F3A35' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* Container GF a piena larghezza */
body.page-id-402 #gform_wrapper_1 .ginput_container { margin-top: 0 !important; }

/* Prefisso telefono / gruppi input inline (se usati) restano allineati */
body.page-id-402 #gform_wrapper_1 .ginput_container_phone,
body.page-id-402 #gform_wrapper_1 .gfield--input-type-phone .ginput_container {
  display: flex;
  gap: 8px;
}

/* -------------------------------------------------------------------------- */
/* 8. Checkbox consenso privacy                                               */
/* -------------------------------------------------------------------------- */
body.page-id-402 #gform_wrapper_1 .gfield--type-consent .gfield_consent_label,
body.page-id-402 #gform_wrapper_1 .ginput_container_consent label {
  font-family: var(--pmc-hn) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: var(--pmc-ink) !important;
}
body.page-id-402 #gform_wrapper_1 .ginput_container_consent {
  display: flex;
  align-items: center;
  gap: 12px;
}
body.page-id-402 #gform_wrapper_1 input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  width: 16px !important;
  height: 16px !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 1px solid var(--pmc-ink) !important;
  border-radius: 4px !important;
  background: #fff !important;
  cursor: pointer;
  position: relative;
}
body.page-id-402 #gform_wrapper_1 input[type="checkbox"]:checked {
  background: var(--pmc-ink) !important;
}
body.page-id-402 #gform_wrapper_1 input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 5px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* -------------------------------------------------------------------------- */
/* 9. Footer + bottone submit (navy pill)                                     */
/* -------------------------------------------------------------------------- */
body.page-id-402 #gform_wrapper_1 .gform_footer,
body.page-id-402 #gform_wrapper_1 .gform-footer {
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 24px 32px !important;
  background: #fff;
  border-top: 1px solid var(--pmc-lchar);
}
body.page-id-402 #gform_wrapper_1 .gform_button,
body.page-id-402 #gform_wrapper_1 input[type="submit"] {
  width: 100% !important;
  min-height: 42px;
  padding: 10px 24px !important;
  border: 1px solid #fff !important;
  border-radius: 999px !important;
  background: linear-gradient(99.08deg, var(--pmc-navy-a) 0%, var(--pmc-navy-b) 100%) !important;
  color: #fff !important;
  font-family: var(--pmc-hn) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.16) !important;
  transition: filter 0.15s ease;
}
body.page-id-402 #gform_wrapper_1 .gform_button:hover,
body.page-id-402 #gform_wrapper_1 input[type="submit"]:hover {
  filter: brightness(1.08);
}

/* -------------------------------------------------------------------------- */
/* 10. Messaggi di validazione                                                */
/* -------------------------------------------------------------------------- */
body.page-id-402 #gform_wrapper_1 .gfield_description.validation_message,
body.page-id-402 #gform_wrapper_1 .validation_message {
  font-family: var(--pmc-hn) !important;
  font-size: 12px !important;
  color: #b3261e !important;
  padding: 4px 4px 0 !important;
  background: transparent !important;
  border: none !important;
}
body.page-id-402 #gform_wrapper_1 .gfield_error input,
body.page-id-402 #gform_wrapper_1 .gfield_error select,
body.page-id-402 #gform_wrapper_1 .gfield_error textarea {
  border-color: #b3261e !important;
}

/* -------------------------------------------------------------------------- */
/* 11. Mobile                                                                 */
/* -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  body.page-id-402 .w-popup-box {
    width: 94vw !important;
    max-height: 92vh !important;
    border-radius: 28px !important;
  }
  body.page-id-402 .w-popup-box-content .wpb_wrapper > .w-text:first-child {
    padding: 20px 48px 20px 20px !important;
  }
  body.page-id-402 #gform_wrapper_1 .gform_body,
  body.page-id-402 #gform_wrapper_1 .gform-body { padding: 16px 20px; }
  body.page-id-402 #gform_wrapper_1 .gform_footer,
  body.page-id-402 #gform_wrapper_1 .gform-footer { padding: 20px; }
  body.page-id-402 .w-popup-box .w-popup-closer { top: 26px; right: 20px; }
}