/* ===========================================================
   HERO + COMBOBOX — Versión limpia y unificada
   =========================================================== */

/* ---------- KNOBS (ajusta aquí) ---------- */
:root{
  /* Hero */
  --hero-url: url("https://buynowpaylatercarinsurance.com/wp-content/uploads/2025/08/All-site-template-1.jpg");
  --hero-min-desktop: 590px;
  --hero-min-mobile: 380px;

  /* Posición y tamaño del COMBOBOX (desktop) */
  --band-left: 920px;        /* X desde el borde izquierdo del hero */
  --band-top:  403px;        /* Y desde el borde superior del hero  */
  --band-w:    800px;        /* ancho total del panel translúcido   */
  --band-h:    300px;        /* alto total del panel translúcido    */

  /* Apariencia del panel */
  --band-alpha: .42;         /* 0–1 transparencia */
  --panel-blur: 6px;

  /* Campos (desktop) */
  --field-h: 44px;           /* alto de inputs/botón */
  --field-radius: 10px;
  --field-gap: 10px;         /* separación entre controles */
  --field-font: 14px;

  /* Anchos de los campos (desktop) */
  --w-coverage: 80px;
  --w-zip:      120px;
  --w-cta:      90px;       /* ancho del botón */
}

/* ---------- HERO full-bleed ---------- */
.single-post .entry-content > .ndpci-portal{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 0 !important;
}
.ndpci-portal{
  position: relative !important;
  z-index: 0;
  min-height: var(--hero-min-desktop);
  background-image: var(--hero-url) !important;
  background-position: center top !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  margin-bottom: 0 !important;
}
html, body{ overflow-x: hidden; } /* evitar scroll lateral */

/* Apagar overlays/imagenes internas que puedan tapar el hero */
.ndpci-portal .wp-block-cover__image-background,
.ndpci-portal [class*="cover__image-background"],
.ndpci-portal [class*="overlay"],
.ndpci-portal .ndpci-hero-bg{
  display: none !important;
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
}

/* Contenido por encima del fondo */
.ndpci-portal > *{ position: relative; z-index: 1; }

/* Altura en móvil */
@media (max-width: 980px){
  .ndpci-portal{ min-height: var(--hero-min-mobile) !important; }
}

/* ---------- Desactivar hero del tema si existe el tuyo ---------- */
@supports(selector(:has(*))){
  .single-post:has(.ndpci-portal) .ast-hero-header,
  .single-post:has(.ndpci-portal) .ast-page-title-wrap,
  .single-post:has(.ndpci-portal) .entry-header{
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}
/* Fallback si :has no está soportado */
.single-post .ast-hero-header,
.single-post .ast-page-title-wrap{
  display: none !important;
  background: none !important;
  background-image: none !important;
}
.single-post .site-content .content-area,
.single-post #primary{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ---------- COMBOBOX BAND ---------- */
/* Card contenedor posicionado por coordenadas absolutas (desktop) */
@media (min-width: 981px){
  .ndpci-portal .ndpci-card{
    position: absolute !important;
    left: var(--band-left) !important;
    top:  var(--band-top) !important;
    width: var(--band-w) !important;
    height: var(--band-h) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    z-index: 5 !important;
    display: block !important; /* asegurar caja */
  }

  /* Panel translúcido (rellena el card) */
  .ndpci-portal .ndpci-inlineform{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; /* todo centrado en el panel */
    gap: var(--field-gap) !important;
    width: 100% !important;
    height: 100% !important;           /* alto fijo del panel */
    padding: 16px 18px !important;

    background: rgba(0,0,0,var(--band-alpha)) !important;
    -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(115%);
    backdrop-filter: blur(var(--panel-blur)) saturate(115%);
    border-radius: 12px !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.30);
  }

  /* Controles: tamaño y estilo */
  .ndpci-portal .ndpci-inlineform .ndpci-select,
  .ndpci-portal .ndpci-inlineform .ndpci-input,
  .ndpci-portal .ndpci-inlineform .ndpci-cta,
  .ndpci-portal .ndpci-inlineform .ndpci-cta a,
  .ndpci-portal .ndpci-inlineform .ndpci-cta button{
    height: var(--field-h) !important;
    line-height: var(--field-h) !important;
    border-radius: var(--field-radius) !important;
    font-size: var(--field-font) !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  /* Anchos de Coverage / ZIP / CTA */
  .ndpci-portal .ndpci-inlineform .ndpci-field:nth-of-type(1){ /* Coverage */
    flex: 0 0 var(--w-coverage) !important; width: var(--w-coverage) !important;
  }
  .ndpci-portal .ndpci-inlineform .ndpci-field:nth-of-type(2){ /* ZIP */
    flex: 0 0 var(--w-zip) !important;      width: var(--w-zip) !important;
  }
  .ndpci-portal .ndpci-inlineform .ndpci-cta{
    flex: 0 0 var(--w-cta) !important;      min-width: var(--w-cta) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ---------- MOBILE LAYOUT ---------- */
@media (max-width: 980px){
  .ndpci-portal .ndpci-card{
    position: absolute !important;
    left: 50% !important;
    bottom: 20px !important;
    transform: translateX(-50%) !important;
    width: calc(100vw - 24px) !important;
    height: auto !important;
  }
  .ndpci-portal .ndpci-inlineform{
    width: 100% !important;
    height: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 12px 14px !important;
  }
  .ndpci-portal .ndpci-inlineform .ndpci-field,
  .ndpci-portal .ndpci-inlineform .ndpci-cta{
    width: 100% !important;
    flex: 1 1 auto !important;
  }
}

/* ---------- (Opcional) Colores de la banda verde siguiente ---------- */
.ndpci-portal + section,
.features, .feature-band, .benefits, .green-band{
  background: #b9f36b !important;
  color: #052b14 !important;
}
.ndpci-portal + section h2,
.ndpci-portal + section h3,
.ndpci-portal + section h4,
.ndpci-portal + section p,
.ndpci-portal + section li{
  color: #052b14 !important;
}

/* ---------- (Opcional) single sin sidebar ---------- */
body.single-post .sidebar-main,
body.single-post .widget-area{ display: none !important; }
body.single-post .content-area{ width: 100% !important; float: none !important; }
/* === Ajuste rápido de posición del combobox === */
:root{
  --move-x: -310px;   /* negativo = izquierda, positivo = derecha  */
  --move-y: -500px;   /* negativo = arriba,    positivo = abajo    */
}

@media (min-width:981px){
  .ndpci-portal .ndpci-card{
    left: calc(var(--band-left) + var(--move-x)) !important;
    top:  calc(var(--band-top)  + var(--move-y)) !important;
  }
}
/* === Card height: 120px (desktop) === */
:root{
  /* if you're using the fixed-size vars, this updates it too */
  --hero-band-height: 120px;
}

@media (min-width:981px){
  .ndpci-portal .ndpci-card{
    height: 180px !important;
  }
  .ndpci-portal .ndpci-inlineform{
    height: 100% !important;        /* make the translucent band fill the card */
    align-items: center !important;  /* keep controls vertically centered */
    justify-content: center !important;
  }

  /* Controls stay comfortable inside the 120px band */
  .ndpci-portal .ndpci-inlineform .ndpci-select,
  .ndpci-portal .ndpci-inlineform .ndpci-input,
  .ndpci-portal .ndpci-inlineform .ndpci-cta,
  .ndpci-portal .ndpci-inlineform .ndpci-cta a,
  .ndpci-portal .ndpci-inlineform .ndpci-cta button{
    height: 44px !important;
    line-height: 44px !important;
  }
}
/* === Force hero card to exactly 500px wide (desktop only) === */
@media (min-width:981px){
  :root{
    /* if your CSS uses these knobs, keep them in sync */
    --band-w: 500px;
    --form-w: 500px;
  }
  .ndpci-portal .ndpci-card{
    width: 500px !important;
    max-width: 500px !important;
  }
  .ndpci-portal .ndpci-inlineform{
    width: 100% !important; /* fill the 500px card */
  }
}
/* === Force hero combobox card to 700px (desktop) === */
@media (min-width:981px){
  /* Card width */
  .ndpci-portal .ndpci-card{
    width: 600px !important;
    max-width: 600px !important;
  }

  /* Panel fills the card; tidy spacing */
  .ndpci-portal .ndpci-inlineform{
    width: 100% !important;
    padding: 12px 14px !important;  /* total horizontal padding = 28px */
    gap: 8px !important;            /* gaps between controls = 16px */
    flex-wrap: nowrap !important;
  }

  /* Controls must not stretch to 100% */
  .ndpci-portal .ndpci-inlineform .ndpci-select,
  .ndpci-portal .ndpci-inlineform .ndpci-input,
  .ndpci-portal .ndpci-inlineform .ndpci-cta,
  .ndpci-portal .ndpci-inlineform .ndpci-cta a,
  .ndpci-portal .ndpci-inlineform .ndpci-cta button{
    width: auto !important;
    box-sizing: border-box !important;
  }

  /* Exact widths that fit within 700px:
     700 - 28 (padding) - 16 (gaps) = 656 usable
     320 + 110 + 210 = 640  (leaves comfortable room) */
  .ndpci-portal .ndpci-inlineform .ndpci-field:nth-of-type(1){ /* Coverage */
    flex: 0 0 320px !important;
    width: 320px !important;
  }
  .ndpci-portal .ndpci-inlineform .ndpci-field:nth-of-type(2){ /* ZIP */
    flex: 0 0 110px !important;
    width: 110px !important;
  }
  .ndpci-portal .ndpci-inlineform .ndpci-cta{               /* Button */
    flex: 1 1 210px !important;
    min-width: 210px !important;
  }
}
/* === Combobox band: 600px wide, fields fit inside with 3px gap (desktop) === */
@media (min-width: 981px){
  /* Card/band width */
  .ndpci-portal .ndpci-card{
    width: 600px !important;          /* your band width */
    max-width: none !important;
  }

  /* Translucent panel sizing + tiny gap */
  .ndpci-portal .ndpci-inlineform{
    width: 100% !important;            /* fill the card */
    padding: 8px 10px !important;
    gap: 3px !important;               /* 2–3px spacing between fields */
    display: flex !important;
    align-items: center !important;
  }

  /* Make each control fill its cell */
  .ndpci-portal .ndpci-inlineform .ndpci-select,
  .ndpci-portal .ndpci-inlineform .ndpci-input,
  .ndpci-portal .ndpci-inlineform .ndpci-cta,
  .ndpci-portal .ndpci-inlineform .ndpci-cta a,
  .ndpci-portal .ndpci-inlineform .ndpci-cta button{
    width: 100% !important;
    height: 44px !important;
    line-height: 44px !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
  }

  /* Widths inside the 600px card:
     290px (coverage) + 110px (zip) + rest for the button */
  .ndpci-portal .ndpci-inlineform .ndpci-field:nth-of-type(1){ /* Coverage */
    flex: 0 0 290px !important;
    max-width: 290px !important;
  }
  .ndpci-portal .ndpci-inlineform .ndpci-field:nth-of-type(2){ /* ZIP */
    flex: 0 0 110px !important;
    max-width: 110px !important;
  }
  .ndpci-portal .ndpci-inlineform .ndpci-cta{              /* Button */
    flex: 1 1 auto !important;          /* fills the remaining space */
    min-width: 160px !important;        /* prevent it from getting too small */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}
/* Remove the little headline above the combobox band */
.ndpci-portal .ndpci-card > :not(.ndpci-inlineform){
  display: none !important;
}
/* Bottom gap under the hero */
:root{
  --hero-bottom-gap-desktop: 48px;  /* tweak to taste */
  --hero-bottom-gap-mobile: 24px;
}

@media (min-width: 981px){
  .ndpci-portal{ margin-bottom: var(--hero-bottom-gap-desktop) !important; }
}
@media (max-width: 980px){
  .ndpci-portal{ margin-bottom: var(--hero-bottom-gap-mobile) !important; }
}
/* Place this near the END of your custom CSS */
@media (min-width:981px){

  /* 1) Override the width variable in the exact scope that uses it */
  .ndpci-portal .ndpci-inlineform{
    --w-coverage: 200px;   /* ← set the size you want (e.g. 180px, 160px, etc.) */
    --field-gap: 3px;      /* optional: tighter gap between fields */
  }

  /* 2) Force the first field to honor the width */
  .ndpci-portal .ndpci-inlineform .ndpci-field:nth-of-type(1){
    flex: 0 0 var(--w-coverage) !important;
    width: var(--w-coverage) !important;
    max-width: var(--w-coverage) !important;
  }

  /* 3) Ensure the select inside can’t stretch beyond the parent */
  .ndpci-portal .ndpci-inlineform .ndpci-field:nth-of-type(1) select{
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* Desktop: fix the CTA width (e.g., 200px) */
@media (min-width: 981px){
  /* set the knob locally so it wins */
  .ndpci-portal .ndpci-inlineform{
    --w-cta: 200px;          /* ← try 200px (or whatever you want) */
    /* optional: keep tight gaps between fields */
    --field-gap: 3px;
  }

  /* force the CTA container to that width */
  .ndpci-portal .ndpci-inlineform .ndpci-cta{
    flex: 0 0 var(--w-cta) !important;
    width: var(--w-cta) !important;
    max-width: var(--w-cta) !important;
  }

  /* ensure the actual button fits inside the container */
  .ndpci-portal .ndpci-inlineform .ndpci-cta a,
  .ndpci-portal .ndpci-inlineform .ndpci-cta button{
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 14px !important;   /* adjust if you need even narrower */
    white-space: nowrap !important;
  }
}