.notice-box {
  background: #fff5f5;                 /* Fondo suave de alerta */
  border: 1.5px solid #ff7875;         /* Rojo elegante, no muy fuerte */
  color: #a8071a;                      /* Texto rojo oscuro */
  padding: 12px 16px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.5;
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.notice-box i {
  font-size: 18px;
  color: #cf1322;                      /* Ícono un poco más intenso */
}

/* Variante para los días mínimos */
.notice-box.days {
  background: #fffbe6;                 /* Fondo amarillo pálido */
  border: 1.5px solid #ffd666;         /* Amarillo suave */
  color: #874d00;                      /* Texto marrón */
}

.notice-box.days i {
  color: #fa8c16;                      /* Ícono naranja */
}
.notice-box.error {
  background: #fff1f0;
  border: 2px solid #ff4d4f;
  color: #a8071a;
}

.notice-box.error i {
  color: #cf1322;
}
.show-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  background-color: rgba(0, 123, 255, 0.05); /* azul muy suave y casi transparente */
  border: 2px solid rgba(0, 123, 255, 0.5);   /* borde más grueso */
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #222;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  margin-top: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); /* sombra ligera */
}

.show-more-btn:hover {
  background-color: rgba(0, 123, 255, 0.12); 
  border-color: rgba(0, 123, 255, 0.7);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}
/* MOBILE: filas de precios en una sola línea, texto izq + importe der */
@media (max-width: 640px) {
  /* Fila genérica de totales/precios */
  .p-totals {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    /* quita el margin-bottom que a veces empuja el total fuera */
    margin-bottom: 8px;
  }

  /* Columna texto (izquierda) */
  .p-totals > span:first-child {
    flex: 1 1 auto;
    text-align: left;
    word-break: break-word;
    /* deja aire para que no choque con el precio */
    padding-right: 8px;
  }

  /* Columna importe (derecha) */
  .p-totals > span:last-child {
    flex: 0 0 auto;
    text-align: right;
    min-width: 90px;         /* ajuste fino opcional */
    white-space: nowrap;     /* evita que el número salte de línea */
  }

  /* Alinea a la derecha los equivalentes (≈ CLP) que inyecta el enhancer */
  .p-totals .wsa-amount {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;   /* derecha */
    gap: 2px;
  }
  .p-totals .wsa-amount__fx {
    line-height: 1.2;
    font-size: 12px;
    opacity: .65;
  }
}
/* Evitar flicker del acordeón en mobile */
@media (max-width: 640px) {
  .accordeon .accordeon-container {
    transition: none !important; /* sin animación de altura */
  }
  .sidebar { display:flex; flex-direction:column; gap:12px; }
  .sidebar .b-search { order: 2; width: 100%; }

  /* Your order primero y abierto */
  .sidebar .b-search:has(#order) { order: -1; }
  .sidebar .b-search:has(#order) .accordeon-container {
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
  }
  .sidebar .b-search:has(#order) .expand {
    transform: rotate(0deg) !important;
  }
}

/* Evitar flicker del acordeón al reubicar en mobile */
@media (max-width: 640px) {
  #price-details .accordeon-container,
  .price-details .accordeon-container {
    transition: none !important;
  }
}

/* Mobile: franja roja como "Cost Details" en el bloque "Your order" */
@media (max-width: 640px) {
  .sidebar .b-search:has(#order) {
    border-top: 30px solid #c51212 !important;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background-color: #fff; /* por si algún tema quita el fondo */
  }
}

/* ================================
   MOBILE (SUMMARY): Your order → textos izq, importes a la derecha
   ================================ */
@media (max-width: 640px) {
  /* Cada fila de totales en "Your order" */
  #order .p-totals {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }
  /* Asegura que los spans se comporten como bloques */
  #order .p-totals > span {
    display: block;
  }
  /* Etiqueta a la izquierda, ocupa el espacio disponible */
  #order .p-totals > span:first-child {
    flex: 1 1 auto;
    text-align: left;
  }
  /* Importe a la derecha, pegado al borde, sin cortar */
  #order .p-totals > span:last-child {
    flex: 0 0 auto;
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
  }
  /* Si tienes líneas multicurrency debajo (≈ CLP …), que también queden a la derecha */
  #order .wsa-amount__fx {
    display: block;
    text-align: right;
    line-height: 1.25;
    opacity: .85;
  }
}
/* ===========================
   MOBILE (extras): fila superior de cada tarjeta
   - Izquierda: descripción (ocupa todo)
   - Derecha: precio por día (compacto, alineado a la derecha, en 2 líneas)
   =========================== */
   @media (max-width: 640px) {

    /* 1) Estructura de la primera línea dentro de cada tarjeta de extra */
    .cb-checkbox label > div:first-child,
    .cb-checkbox label > p:first-child {
      display: grid !important;
      grid-template-columns: 1fr auto; /* texto / precio */
      align-items: start;
      column-gap: 12px;
    }
  
    /* 2) Asegura que el bloque de la derecha (precio por día) quede compacto y a la derecha */
    .cb-checkbox label > div:first-child > :last-child,
    .cb-checkbox label > p:first-child > :last-child {
      text-align: right !important;
      white-space: nowrap !important;
      line-height: 1.2;
    }
  
    /* 3) Si el “per day” va en el mismo inline, fuerzalo a bajar */
    .cb-checkbox label > div:first-child > :last-child br,
    .cb-checkbox label > p:first-child > :last-child br { display: none; }
    .cb-checkbox label > div:first-child > :last-child::after,
    .cb-checkbox label > p:first-child > :last-child::after {
      content: "";
      display: block; /* crea salto de línea virtual bajo la cifra */
    }
  
    /* 4) El texto de la izquierda que no se corte feo */
    .cb-checkbox label > div:first-child > :first-child,
    .cb-checkbox label > p:first-child > :first-child {
      min-width: 0;
      overflow-wrap: anywhere; /* permite cortar dentro de paréntesis si es muy largo */
    }
  
    /* 5) Separadores y párrafos dentro de la tarjeta */
    .cb-checkbox label hr {
      margin: 12px 0;
      opacity: .6;
    }
  
    /* (Opcional) si tu HTML ya trae un contenedor específico para el precio */
    .cb-checkbox label .per-day,
    .cb-checkbox label .price-right {
      display: block;
      text-align: right !important;
      white-space: nowrap !important;
    }
  }
  /* ===== EXTRA ajuste mobile en extras.php (añadir al final) ===== */
@media (max-width: 640px) {

  /* Ocultar iconos/imagenes que empujan el contenido */
  .cb-checkbox label .box-icon,
  .cb-checkbox label img:first-child {
    display: none !important;
  }

  /* Reorganizar la primera línea de la tarjeta:
     - Fila 1: descripción (ocupa el ancho completo)
     - Fila 2: "X € per day" (a la derecha)
     Esto deja el "per day" ENTRE la descripción y el "Total".
  */
  .cb-checkbox label > div:first-child,
  .cb-checkbox label > p:first-child {
    display: grid !important;
    grid-template-columns: 1fr !important;  /* una sola columna */
    grid-auto-rows: auto;
    row-gap: 6px;
  }

  /* Descripción: primera fila */
  .cb-checkbox label > div:first-child > :first-child,
  .cb-checkbox label > p:first-child > :first-child {
    grid-row: 1;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* Precio por día: segunda fila, alineado a la derecha */
  .cb-checkbox label > div:first-child > :last-child,
  .cb-checkbox label > p:first-child > :last-child {
    grid-row: 2;
    justify-self: end;
    text-align: right !important;
    white-space: nowrap !important;
    line-height: 1.2;
  }

  /* Separador un poco más suave */
  .cb-checkbox label hr { margin: 12px 0; opacity: .6; }
}
/* Ocultar iconos (icomoon / imágenes) dentro de cada extra en mobile */
@media (max-width: 640px) {
  .cb-checkbox label .box-icon,
  .cb-checkbox label i[class^="icon-"],
  .cb-checkbox label i[class*=" icon-"],
  .cb-checkbox label img {
    display: none !important;
  }

  /* Al quitar el icono, quitamos el sangrado extra a la izquierda */
  .cb-checkbox label {
    padding-left: 12px !important;
  }
}

/* ===== Wicked Offers Floating (override-safe) ===== */
.wk-offers{
  --wicked-red:#E02525; /* cámbialo si tienes el rojo exacto */
  --ink:#000021; --ink-2:#5a5a7b; --bg:#ffffff;
  --shadow:0 12px 30px rgba(0,0,0,.18);
  position:fixed;
  right:16px;
  bottom:110px; /* << ajusta este valor a gusto */
  z-index:2147483000; /* bien arriba */
  font-family:Poppins,system-ui,sans-serif;
  -webkit-tap-highlight-color: transparent;
}

/* Botón flotante */
.wk-offers__btn{
  display:flex; align-items:center; gap:.5rem;
  background:var(--wicked-red); color:#fff; border:0; border-radius:999px;
  padding:.7rem 1rem; box-shadow:var(--shadow); cursor:pointer;
  font-weight:700; letter-spacing:.2px; line-height:1;
}
.wk-offers__btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.wk-offers__icon{
  display:inline-grid; place-items:center; width:22px; height:22px;
  border-radius:999px; background:#fff; color:var(--wicked-red);
  font-weight:800; font-size:14px;
}
.wk-offers__label{font-size:14px}

/* Backdrop */
.wk-offers__backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.2); border:0; display:none
}

/* Panel */
.wk-offers__panel {
  position: fixed;        /* antes absolute */
  right: 16px;            /* lo separamos un poco del borde */
  bottom: 90px;           /* más abajo, ajusta a gusto */
  width: min(92vw, 640px);
  background: var(--bg);
  color: var(--ink);
  border-radius: 18px;
  box-shadow: var(--shadow);
  outline: none;
  opacity: 0;
  translate: 0 8px;
  pointer-events: none;
  transition: opacity .18s ease, translate .18s ease;
  overflow: hidden;
  z-index: 9999;          /* asegúrate que esté por encima */
}
.wk-offers[data-open="true"] .wk-offers__panel{opacity:1; translate:0 0; pointer-events:auto}
.wk-offers[data-open="true"] .wk-offers__backdrop{display:block}

/* Head */
.wk-offers__head{
  display:flex; justify-content:space-between; align-items:center;
  padding:.8rem 1rem; background:#f7f7fb; border-bottom:1px solid #eee
}
.wk-offers__head strong{font-size:14px}
.wk-offers__close{border:0; background:transparent; font-size:20px; line-height:1; cursor:pointer}

/* Body */
.wk-offers__body{padding:.8rem .8rem 1rem}

/* Carrusel */
.wk-offers__carousel{ position:relative; overflow:hidden; }
.wk-offers__slides{
  display:flex; transition:transform .28s ease;
  touch-action: pan-y; /* permite swipe horizontal sin bloquear scroll vertical */
}
.wk-offers__slide{
  min-width:100%; background:#fafafa; border-radius:14px; overflow:hidden; border:1px solid #eee
}
.wk-offers__slide img{ width:100%; height:180px; object-fit:cover; display:block }
.wk-offers__text{ padding:.75rem .85rem }
.wk-badge{
  display:inline-block; background:var(--ink); color:#fff; border-radius:999px;
  padding:.25rem .5rem; font-size:11px; font-weight:700; margin-bottom:.35rem
}
.wk-offers__text h4{ margin:.1rem 0 .25rem; font-size:16px; font-weight:700 }
.wk-offers__text p{ margin:0 0 .5rem; color:var(--ink-2); font-size:13px; line-height:1.35 }
.wk-cta{
  display:inline-block; background:var(--wicked-red); color:#fff; text-decoration:none;
  border-radius:10px; padding:.45rem .7rem; font-size:13px; font-weight:700
}

/* Controles (asegura clic) */
.wk-offers__nav{
  position:absolute; top:50%; translate:0 -50%; border:0; width:30px; height:30px;
  border-radius:999px; background:#fff; box-shadow:0 4px 10px rgba(0,0,0,.15); cursor:pointer;
  z-index:5; pointer-events:auto;
}
.wk-prev{left:6px} .wk-next{right:6px}
.wk-offers__dots{
  display:flex; gap:6px; justify-content:center; margin:.55rem 0 0
}
.wk-offers__dots button{
  width:7px; height:7px; border-radius:999px; border:0; background:#ddd; cursor:pointer
}
.wk-offers__dots button[aria-selected="true"]{ background:var(--wicked-red) }

.wk-note{ margin:.6rem .1rem 0; font-size:12px; color:var(--ink-2) }

/* ==== Wicked Offers: mobile fine-tune ==== */
@media (max-width: 600px){

  /* Panel: más abajo y con más aire */
  .wk-offers__panel{
    position: fixed;
    right: 12px;
    left: 12px;
    bottom: 110px;                 /* < sube o baja el panel */
    width: auto;
    max-height: calc(100vh - 160px);
    overflow: auto;
    border-radius: 18px;
  }

  /* Título + barra fija */
  .wk-offers__head{
    position: sticky;
    top: 0;
    z-index: 3;
    background: #f7f7fb;
    padding-right: 56px;           /* deja espacio para la X grande */
  }

  /* X grande arriba-derecha, fácil de tocar */
  .wk-offers__close{
    position: absolute;
    top: 6px;
    right: 8px;
    width: 44px;
    height: 44px;
    font-size: 28px;
    line-height: 1;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
  }

  /* Flechas un poco más abajo para no tapar el título */
  .wk-offers__nav{
    width: 36px; height: 36px;
    top: 128px;
  }

  /* Imagen algo más compacta */
  .wk-offers__slide img{ height: 150px; }

  /* Botón flotante: súbelo un poco para no chocar con chat */
  .wk-offers{ right: 12px; bottom: 96px; }
}

@media (max-width: 380px){
  .wk-offers__slide img{ height: 138px; }
  .wk-offers__nav{ top: 114px; }
}

/* capas correctas para evitar autocierre y permitir clicks */
.wk-offers{ z-index:2147483000; }
.wk-offers__panel{ z-index:2; }
.wk-offers__backdrop{ z-index:1; background:rgba(0,0,0,.08); } /* más suave; cambia a 0 si no quieres oscurecer */

/* asegura clickeabilidad de flechas y recorte */
.wk-offers__carousel{ position:relative; overflow:hidden; }
.wk-offers__nav {
  top: 90px; /* aprox mitad de la imagen (que mide 180px) */
  transform: translateY(-50%);
}


/* ===== LIGHTBOX con THUMBS ===== */

/* Raíz del lightbox */
.wsa-lightbox{
  position:fixed; inset:0; z-index:2147483647;
  display:none; align-items:center; justify-content:center;
}
.wsa-lightbox.open{ display:flex; }

/* Fondo oscuro clickeable */
.wsa-backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.86);
  cursor:pointer;
  z-index:0;
}

/* Caja del carrusel (tamaño a contenido) */
.wsa-lightbox__inner{
  position:relative; z-index:1;
  background:transparent;
  display:flex; flex-direction:column; gap:12px;
  align-items:center; justify-content:center;
  max-width:95vw; max-height:90vh;
  padding:8px 0 2px;

  /* No capturar clics (el backdrop cierra); reactivamos en hijos específicos */
  pointer-events:none;
}

/* Botón cerrar */
.wsa-lightbox__close{
  position:absolute; top:-8px; right:-8px;
  z-index:3; width:44px; height:44px;
  background:rgba(0,0,0,.65); color:#fff;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px; display:grid; place-items:center;
  cursor:pointer; font-size:22px; line-height:1;
  box-shadow:0 4px 14px rgba(0,0,0,.35);

  /* Habilitar clic */
  pointer-events:auto;
}

/* Swiper principal */
.wsa-main{
  position:relative;
  width:auto; height:auto;
  max-width:95vw; max-height:78vh; /* deja espacio para thumbs */

  /* Habilitar clic (flechas, drag, etc.) */
  pointer-events:auto;
}

/* Fondo transparente en estructuras Swiper */
.wsa-lightbox .swiper,
.wsa-lightbox .swiper-wrapper,
.wsa-lightbox .swiper-slide{ background:transparent !important; }
.wsa-lightbox .swiper-wrapper{ align-items:center; }
.wsa-lightbox .swiper-slide{
  display:flex; align-items:center; justify-content:center;
}
.wsa-lightbox .swiper-slide img{
  display:block; width:auto; height:auto;
  max-width:95vw; max-height:78vh;
  object-fit:contain;
}

/* Flechas del principal (blancas y grandes) */
.wsa-lightbox .swiper-button-prev,
.wsa-lightbox .swiper-button-next{
  width:64px; height:64px;        /* tamaño flechas */
  z-index:4; border-radius:999px;
  background-repeat:no-repeat; background-position:center; background-size:60%;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.35));
  pointer-events:auto;
}
.wsa-lightbox .swiper-button-prev::after,
.wsa-lightbox .swiper-button-next::after{ content:''; }
.wsa-main .swiper-button-prev{ left:8px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E");
}
.wsa-main .swiper-button-next{ right:8px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
}

/* Ocultar bullets */
.wsa-lightbox .swiper-pagination{ display:none !important; }

/* ===================================================== */
/* ================   LIGHTBOX con THUMBS   ============ */
/* ===================================================== */
.wsa-lightbox{
  position:fixed; inset:0; z-index:2147483647;
  display:none; align-items:center; justify-content:center;
}
.wsa-lightbox.open{ display:flex; }

/* Fondo oscuro clickeable */
.wsa-backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.86);
  cursor:pointer;
  z-index:0;
}

/* Contenedor del lightbox */
.wsa-lightbox__inner{
  position:relative; z-index:1;
  display:flex; flex-direction:column; gap:12px;
  align-items:center; justify-content:center;
  max-width:95vw; max-height:90vh;
  padding:8px 0 2px;
  background:transparent;

  /* Deja pasar los clics al backdrop salvo en lo habilitado abajo */
  pointer-events:none;
}

/* Rehabilitar clic SOLO donde corresponde */
.wsa-main,
.wsa-thumbs,
.wsa-lightbox__close,
.wsa-main .swiper-button-prev,
.wsa-main .swiper-button-next,
.wsa-thumbs .swiper-button-prev,
.wsa-thumbs .swiper-button-next{
  pointer-events:auto;
}

/* Botón cerrar */
.wsa-lightbox__close{
  position:absolute; top:-8px; right:-8px;
  width:44px; height:44px; z-index:3;
  display:grid; place-items:center;
  background:rgba(0,0,0,.65);
  color:#fff; border:1px solid rgba(255,255,255,.25);
  border-radius:999px; cursor:pointer;
  font-size:22px; line-height:1;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}

/* ================= Swiper principal ================= */
.wsa-main{
  position:relative;
  width:auto; height:auto;
  max-width:95vw; max-height:78vh;   /* deja espacio para thumbs */
}
.wsa-lightbox .swiper,
.wsa-lightbox .swiper-wrapper,
.wsa-lightbox .swiper-slide{ background:transparent !important; }
.wsa-lightbox .swiper-wrapper{ align-items:center; }
.wsa-lightbox .swiper-slide{
  display:flex; align-items:center; justify-content:center;
}
.wsa-lightbox .swiper-slide img{
  display:block;
  max-width:95vw; max-height:78vh;
  width:auto; height:auto; object-fit:contain;
}

/* Flechas principales (blancas y grandes) */
.wsa-lightbox .swiper-button-prev,
.wsa-lightbox .swiper-button-next{
  width:64px; height:64px; z-index:4;
  border-radius:999px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:60%;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.35));
}
.wsa-lightbox .swiper-button-prev::after,
.wsa-lightbox .swiper-button-next::after{ content:''; }

.wsa-main .swiper-button-prev{ left:8px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E");
}
.wsa-main .swiper-button-next{ right:8px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
}

/* Ocultar bullets si Swiper los genera */
.wsa-lightbox .swiper-pagination{ display:none !important; }

/* ================ Tira de thumbnails ================= */
/* Contenedor */
.wsa-thumbs{
  width:100%;
  max-width:95vw;
  margin:12px auto 0;
  padding:0;
  box-sizing:border-box;
}


/* Cada miniatura */
.wsa-thumbs .swiper-slide{
  width:100px;                 /* tamaño miniatura base */
  height:70px;
  border-radius:10px;
  overflow:hidden;
  background:#111;
  opacity:.55;
  border:1px solid rgba(255,255,255,.25);
  transition:opacity .15s, border-color .15s, transform .15s;
}
.wsa-thumbs .swiper-slide-thumb-active{
  opacity:1;
  border-color:#fff;
  transform:translateY(-1px);
}
.wsa-thumbs .swiper-slide img{
  width:100%; height:100%;
  object-fit:contain;          /* se ve completa sin recorte */
  display:block;
}

/* (Opcional) Flechas para la tira, si decides activarlas en JS */
.wsa-thumbs .swiper-button-prev,
.wsa-thumbs .swiper-button-next{
  width:36px; height:36px; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.65); border-radius:999px;
}
.wsa-thumbs .swiper-button-prev::after,
.wsa-thumbs .swiper-button-next::after{ color:#fff; font-size:16px; }

/* ================== Responsive ================== */
@media (max-width:767px){
  .wsa-main{ max-height:70vh; }
  .wsa-lightbox .swiper-slide img{ max-height:70vh; }
  .wsa-thumbs .swiper-slide{ width:84px; height:54px; }
  .wsa-lightbox__close{ width:38px; height:38px; }
}

@media (min-width:1024px){
  .wsa-thumbs .swiper-slide{ width:110px; height:76px; }
}

/* ===== Badge rojo ===== */
.price-badge, .option-price, .cover-price{
  background:#E02525; color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.35rem; padding:4px 10px; border-radius:10px;
  font-weight:600; white-space:nowrap; line-height:1.2;
  width:auto; max-width:fit-content;
}
.price-badge .amount, .option-price .amount, .cover-price .amount{ font-size:.9rem; font-weight:700; line-height:1.1; }
.price-badge .per,    .option-price .per,    .cover-price .per   { font-size:.8rem; line-height:1.1; }

/* ===== Tarjetas (radio/checkbox) ===== */
.cb-checkbox label, .cb-radio label{
  border:1.5px solid #b5bfd9;
  background:#e9f5ff;
  padding:14px;
  border-radius:10px;
  font-size:14px; line-height:1.35;
  margin-bottom:10px; position:relative;
}

/* Fuerza contenidos a la IZQUIERDA (rompe estilos del core) */
.cb-checkbox label .wrap-icon,
.cb-radio    label .wrap-icon{
  margin:0 !important;
  text-align:left !important;
  display:block !important;              /* ← mantenemos textos a la izq */
}
/* El core pone "margin: 6px auto" y centra todo: lo quitamos */
.cb-checkbox label .wrap-icon > p,
.cb-radio    label .wrap-icon > p,
.cb-checkbox label p.flex,
.cb-radio    label p.flex{
  display:block !important;
  justify-content:flex-start !important;
  align-items:flex-start !important;
  margin:6px 0 !important;
}

.cb-checkbox label > p:first-child,
.cb-radio    label > p:first-child{ margin-top:0 !important; margin-bottom:6px !important; line-height:1.3; }

.cb-checkbox label hr, .cb-radio label hr{ margin:8px 0 !important; opacity:.55; }

/* Ícono a la izquierda */
.cb-checkbox label:has(.box-icon), .cb-radio label:has(.box-icon){ padding-left:40px; }
.cb-checkbox .box-icon, .cb-radio .box-icon{
  position:absolute; left:12px; top:12px; width:24px; height:24px;
  display:grid; place-items:center;
}
.cb-checkbox .box-icon i, .cb-radio .box-icon i{ font-size:20px; line-height:1; }
.cb-checkbox .box-icon img, .cb-radio .box-icon img{ width:100%; height:100%; object-fit:contain; }

/* Seleccionado */
.cb-checkbox input:checked ~ label,
.cb-radio    input:checked ~ label{ background:#cfe8ff !important; border:1.5px solid #2260ff !important; }

/* ===== Posición de badge ===== */

/* Abajo-derecha (cuando el label lleve .badge-bottom) */
.cb-checkbox label.badge-bottom,
.cb-radio    label.badge-bottom{ display:flex; flex-direction:column; }
/* MUY IMPORTANTE: restaurar flex en .wrap-icon para que funcione align-self */
.cb-checkbox label.badge-bottom .wrap-icon,
.cb-radio    label.badge-bottom .wrap-icon{
  display:flex !important;               /* ← gana al display:block !important de arriba */
  flex-direction:column;
  gap:6px;
}
.cb-checkbox label.badge-bottom .price-badge,
.cb-checkbox label.badge-bottom .option-price,
.cb-checkbox label.badge-bottom .cover-price,
.cb-radio    label.badge-bottom .price-badge,
.cb-radio    label.badge-bottom .option-price,
.cb-radio    label.badge-bottom .cover-price{
  position:static;
  align-self:flex-end;                   /* ← esquina derecha */
  margin-top:6px;
}

/* Arriba-derecha (solo cuando marcamos .badge-top) */
.cb-checkbox label.badge-top, .cb-radio label.badge-top{ position:relative; }
.cb-checkbox label.badge-top .price-badge,
.cb-checkbox label.badge-top .option-price,
.cb-checkbox label.badge-top .cover-price,
.cb-radio    label.badge-top .price-badge,
.cb-radio    label.badge-top .option-price,
.cb-radio    label.badge-top .cover-price{
  position:absolute; top:12px; right:14px; margin:0;
}

/* ===== Responsive ===== */
@media (max-width:640px){
  .cb-checkbox label, .cb-radio label{ padding:12px 10px; border-radius:8px; }
  .cb-checkbox label:has(.box-icon), .cb-radio label:has(.box-icon){ padding-left:34px; }
  .cb-checkbox .box-icon, .cb-radio .box-icon{ left:10px; top:10px; width:20px; height:20px; }
  .cb-checkbox .box-icon i, .cb-radio .box-icon i{ font-size:18px; }

  /* Chips más compactos en mobile */
  .cb-checkbox label.badge-bottom .price-badge,
  .cb-checkbox label.badge-bottom .option-price,
  .cb-checkbox label.badge-bottom .cover-price,
  .cb-radio    label.badge-bottom .price-badge,
  .cb-radio    label.badge-bottom .option-price,
  .cb-radio    label.badge-bottom .cover-price{
    padding:2px 6px; border-radius:6px; font-size:.8rem;
  }

  /* En MOBILE: si alguna tarjeta viene marcada como .badge-top, la forzamos ABAJO-DERECHA */
  .cb-checkbox label.badge-top .price-badge,
  .cb-checkbox label.badge-top .option-price,
  .cb-checkbox label.badge-top .cover-price,
  .cb-radio    label.badge-top .price-badge,
  .cb-radio    label.badge-top .option-price,
  .cb-radio    label.badge-top .cover-price{
    position:static !important;
    /* nos apoyamos en el flex del .wrap-icon (arriba) */
    align-self:flex-end !important;
    margin-top:6px !important;
  }
}

@media (min-width:641px){
  .cb-checkbox label.badge-bottom .price-badge,
  .cb-checkbox label.badge-bottom .option-price,
  .cb-checkbox label.badge-bottom .cover-price,
  .cb-radio    label.badge-bottom .price-badge,
  .cb-radio    label.badge-bottom .option-price,
  .cb-radio    label.badge-bottom .cover-price{
    padding:2px 6px; border-radius:6px;
  }
  .price-badge .amount, .option-price .amount, .cover-price .amount{ font-size:.8rem; }
  .price-badge .per,    .option-price .per,    .cover-price .per   { font-size:.7rem; }
}
/* ===== Optional Extras: precio fijo en el título (pill negro arriba-derecha) ===== */
.cb-checkbox label .wrap-icon > p.flex,
.cb-radio    label .wrap-icon > p.flex{
  position: relative;
}

.cb-checkbox label .wrap-icon > p.flex > span[id^="OptionalFees"],
.cb-radio    label .wrap-icon > p.flex > span[id^="OptionalFees"]{
  position: absolute;
  top: 0;
  right: 0;
  transform: translateY(-2px);
  background: #000;        /* fondo negro */
  color: #fff;             /* texto blanco */
  border: 1px solid #000;  /* borde negro para mantener el bloque sólido */
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* Mobile: pill más compacto */
@media (max-width:640px){
  .cb-checkbox label .wrap-icon > p.flex > span[id^="OptionalFees"],
  .cb-radio    label .wrap-icon > p.flex > span[id^="OptionalFees"]{
    padding: 2px 6px;
    border-radius: 6px;
    font-size: .9rem;
  }
}
/* === Totales en las tarjetas (badge negro con "Total:" incluido) === */
.cb-checkbox label p span.total-badge,
.cb-radio    label p span.total-badge{
  font-weight: 700;
  background:#000;
  color:#fff;
  padding:2px 8px;
  border-radius:6px;
  font-size:.8rem;        /* Texto más pequeño */
  line-height:1.2;
  display:inline-flex;
  align-items:center;
  gap:4px;                /* espacio entre “Total:” y el valor */
  vertical-align:middle;
  white-space:nowrap;
}

@media (max-width:640px){
  .cb-checkbox label p span.total-badge,
  .cb-radio    label p span.total-badge{
    padding:2px 6px;
    font-size:.75rem;     /* aún más compacto en mobile */
  }
}
/* === Ajustes de icono y separación en desktop === */
@media (min-width:641px){
  /* Más espacio entre icono y textos */
  .cb-checkbox label:has(.box-icon),
  .cb-radio    label:has(.box-icon){
    padding-left:22px;  /* antes 40px */
  }

  /* Íconos un poco más grandes */
  .cb-checkbox .box-icon,
  .cb-radio    .box-icon{
    width:28px;
    height:28px;
  }
  .cb-checkbox .box-icon i,
  .cb-radio    .box-icon i{
    font-size:24px; /* antes 20px */
  }
}
.cb-checkbox,
.cb-radio,
.cb-styled {
  box-shadow: 0 1px 4px rgba(255, 255, 255, 0) !important;
}
.total-badge{
  display:inline-block;
  background:#000;
  color:#fff;
  border:1px solid #000;
  padding:2px 6px;
  border-radius:6px;
  font-weight:700;
  font-size:.85rem; /* más pequeño */
  line-height:1;
  white-space:nowrap;
  vertical-align:middle;
}
.total-badge [id^="KmCharges"],
.total-badge [id^="InsuranceOptions"],
.total-badge [id^="OptionalFees"]{
  font-weight:700;
}
/* Ajuste para mobile: que el texto no quede tapado por el total-badge */
@media (max-width:640px){
  .cb-checkbox label .wrap-icon > p.flex,
  .cb-radio    label .wrap-icon > p.flex {
    padding-right: 4.5rem; /* margen extra a la derecha solo en mobile */
  }
}
/* === WSA Mobile – Cost Details FAB & flyout (solo mobile) === */
@media (max-width: 768px) {
  .wsa-cost-fab {
    position: fixed;
    right: 16px;
    bottom: 92px; /* deja espacio para el widget de chat */
    z-index: 2147483000;
    display: none; /* JS alterna a --show */
    background: #000021;
    color: #fff;
    border-radius: 999px;
    padding: 12px 16px;
    border: 0;
    box-shadow: 0 10px 20px rgba(0,0,0,.25);
    font-weight: 700;
    line-height: 1;
    gap: 10px;
    align-items: center;
  }
  .wsa-cost-fab__total {
    font-size: 16px;   /* un poco más grande */
    font-weight: 700;
  }
  .wsa-cost-fab__cta {
    font-size: 12px;
    background: #ff3b30;
    color: #fff;
    border-radius: 999px;
    padding: 6px 10px;
    font-weight: 700;
    white-space: nowrap;
  }
  .wsa-cost-fab--show { display: inline-flex; }

  /* Flyout (drawer) */
  .wsa-cost-flyout-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(2px);
    z-index: 2147483000;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .wsa-cost-flyout {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(420px, 90vw);
    background: #fff;
    box-shadow: -10px 0 30px rgba(0,0,0,.25);
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 2147483001;
    display: flex;
    flex-direction: column;
  }
  .wsa-cost-flyout__head {
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
    display: flex; align-items: center; justify-content: space-between;
  }
  .wsa-cost-flyout__title {
    font-size: 16px;
    font-weight: 800;
  }
  .wsa-cost-flyout__close {
    background: transparent;
    border: 0;
    font-size: 32px;       /* más grande que antes */
    width: 44px; height: 44px; /* mejor área táctil */
    line-height: 1;
    padding: 4px;
    cursor: pointer;
  }
  .wsa-cost-flyout__close:focus {
    outline: 2px solid rgba(0,0,0,.2);
    outline-offset: 2px;
  }
  .wsa-cost-flyout__body {
    padding: 14px 16px 80px;
    overflow: auto;
  }
  .wsa-cost-flyout-backdrop--open { opacity: 1; pointer-events: auto; }
  .wsa-cost-flyout--open { transform: translateX(0); }

  /* Elementos inertes del clon (por seguridad visual) */
  .wsa-cost-flyout__body [disabled] {
    opacity: 0.6;
    pointer-events: none;
  }
}
/* === WSA – Optional Extras: grid + alturas iguales === */
.wsa-extras-grid{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); /* 1→2→3 cols */
  align-items:stretch; /* fuerza stretch de los ítems */
}

/* el ítem de grilla (la tarjeta real) debe ocupar 100% de alto */
.wsa-extras-grid > .cb-checkbox{
  height:100%;
}

/* Card base */
.cb-checkbox.wsa-extra-card{
  display:flex;              /* para poder estirar el label */
  height:100%;               /* ocupar todo el alto disponible en la grilla */
  border:1px solid #E6E6EF;
  border-radius:14px;
  background:#fff;
  overflow:hidden;
}

/* Contenido de la card: ocupa todo el alto y empuja el botón hacia abajo */
.cb-checkbox.wsa-extra-card > label{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto;             /* estira el label a todo el alto */
  background:#e9f5ff !important;
  border:1.5px solid #b5bfd9 !important;
  border-radius:12px;
  padding:16px 18px 16px 56px !important;
  position:relative;
  min-height: 220px;         /* igualador suave; ajusta si lo ves necesario */
}

/* Estado seleccionado (mantiene tu azul activo) */
.cb-checkbox.wsa-extra-card input:checked ~ label{
  background:#cfe8ff !important;
  border-color:#2260ff !important;
}

/* Evitar que el badge rojo choque con el contenido */
.cb-checkbox.wsa-extra-card > label .wrap-icon > p.flex{
  position:relative;
  padding-right:88px;
}

/* Línea divisoria */
.cb-checkbox.wsa-extra-card > label hr{ margin:12px 0; opacity:.5 }

/* =========================================================
   WSA — Optional Extras (grid + botón)  ★ SOLO EXTRAS ★
   ========================================================= */

/* Contenedor en grilla (usamos el contenedor EXISTENTE al que el JS añade esta clase) */
.wsa-extras-grid{
  display: grid;
  width: 100%;
  max-width: none;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

@media (min-width: 1200px){
  .wsa-extras-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* La card ocupa todo el alto para que el botón quede abajo */
.wsa-extra-card{
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between;
  height:100%;
}

/* Botonera siempre al fondo de la card */
.wsa-extra-actions{
  margin-top:auto;                 /* pega el botón al fondo de la card */
  display:flex;
  justify-content:flex-end;
  padding-top:8px;
}

/* Botón Select / Selected */
.wsa-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 18px;
  border-radius:999px;
  border:2px solid #2260ff;
  background:#fff;
  color:#2260ff;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  transition:.18s;
}
.wsa-pill:active{ transform:translateY(1px) }
.wsa-pill.is-on{ background:#2260ff; color:#fff; border-color:#2260ff }

/* Ajustes en móviles para que no se monte con el icono/badge */
@media (max-width:640px){
  .cb-checkbox.wsa-extra-card > label{ padding:14px 12px 14px 40px !important; }
  .cb-checkbox.wsa-extra-card > label .wrap-icon > p.flex{ padding-right:72px; }
  .wsa-pill{ padding:9px 16px; }
}


/* =========================================================
   WSA — Radios (Damage / Kms) en 2 columnas  ★ SOLO RADIOS ★
   ========================================================= */
/* === Damage Covers (2 columnas) === */
.wsa-radios-2{
  display:grid;
  gap:24px;
  grid-template-columns:repeat(auto-fit, minmax(420px,1fr));
  justify-content:stretch;
  width:100%;
  margin:5px auto 0;
  max-width:none;
}
.wsa-radios-2 > .cb-radio.inline-block.cb-styled.daily.w-full{ width:100%; margin:0; }
.wsa-radios-2 > .cb-radio.inline-block.cb-styled.daily.w-full > label{
  display:flex; flex-direction:column; height:100%;
}

/* === Kms charges (3 columnas responsive) === */
.wsa-radios-3{
  display:grid;
  gap:24px;
  /* clave para que entren 3: reduce el min a 320px */
  grid-template-columns:repeat(auto-fit, minmax(320px,1fr));
  justify-content:stretch;
  width:100%;
  margin:5px auto 0;
  max-width:none;
}
.wsa-radios-3 > .cb-radio.inline-block.cb-styled.daily.w-full{ width:100%; margin:0; }
.wsa-radios-3 > .cb-radio.inline-block.cb-styled.daily.w-full > label{
  display:flex; flex-direction:column; height:100%;
}
/* === Kms charges: grid de 3 columnas === */
.wsa-radios-grid.wsa-3 {
  display: grid;
  gap: 24px;
  /* en pantallas medianas usa el auto-fit con mínimo 300px */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  width: 100%;
}

/* en desktop fuerza 3 columnas exactas */
@media (min-width: 1024px) {
  .wsa-radios-grid.wsa-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* que cada tarjeta llene su celda y mantenga tu look base */
.wsa-radios-grid.wsa-3 > .cb-radio.inline-block.cb-styled.daily.w-full {
  width: 100%;
  margin: 0;
}
.wsa-radios-grid.wsa-3 > .cb-radio.inline-block.cb-styled.daily.w-full > label {
  display: flex;          /* tu label ya viene estilado en el theme, solo lo hacemos flexible */
  flex-direction: column; /* apoya que rellene el alto */
  height: 100%;
}
/* === WSA · Kms Charges — centrar verticalmente el contenido === */
.wsa-radios-3 > .cb-radio.inline-block.cb-styled > label {
  display: flex;
  flex-direction: column;
  justify-content: center; /* centra verticalmente el contenido */
  align-items: flex-start; /* mantiene alineado a la izquierda */
  text-align: left;        /* texto alineado a la izquierda */
  height: 100%;
  padding-left: 50px;      /* mantiene espacio para el ícono */
}

/* Asegura que el bloque de texto conserve formato */
.wsa-radios-3 .wrap-icon {
  display: flex;
  flex-direction: column;
  justify-content: center; /* alinea verticalmente los textos dentro */
  height: 100%;
}
/* === WSA · Kms Charges — margen superior extra para no tapar texto === */
.wsa-radios-3 > .cb-radio.inline-block.cb-styled > label {
  padding-top: 36px !important; /* antes ~16px */
}

/* Si quieres ajustar solo cuando hay el badge rojo */
.wsa-radios-3 > .cb-radio.inline-block.cb-styled > label:has(.price-badge) {
  padding-top: 42px !important; /* más aire cuando hay badge “per day” */
}
/* === Ajuste margen superior para que el label no tape texto === */
.wsa-radios-2 > .cb-radio.inline-block.cb-styled.daily.w-full > label,
.wsa-radios-3 > .cb-radio.inline-block.cb-styled.daily.w-full > label {
  padding-top: 42px !important;  /* antes era ~16px */
}

/* Si tiene badge rojo (price-badge), da un poco más de aire */
.wsa-radios-2 > .cb-radio.inline-block.cb-styled.daily.w-full > label:has(.price-badge),
.wsa-radios-3 > .cb-radio.inline-block.cb-styled.daily.w-full > label:has(.price-badge) {
  padding-top: 52px !important;
}
/* Botonera al fondo en radios */
.wsa-radio-actions{
  margin-top:auto;
  display:flex;
  justify-content:flex-end;
  padding-top:8px;
}

/* Más aire arriba para no tapar el texto con el badge rojo */
.wsa-radios-2 > .cb-radio > label,
.wsa-radios-3 > .cb-radio > label{
  padding-top:42px !important;
}
.wsa-radios-2 > .cb-radio > label:has(.price-badge),
.wsa-radios-3 > .cb-radio > label:has(.price-badge){
  padding-top:52px !important;
}
/* ===========================
   Wicked Steps – compacto, moderno y con íconos de trazo fino
   =========================== */
   .wk-steps {
    --brand: #c51212;        /* rojo Wicked */
    --ink: #111111;          /* texto fuerte */
    --muted: #8f96a3;        /* texto apagado */
    --line: #e5e7eb;         /* línea base */
    --gap: 28px;             /* espacio entre pasos */
  
    background: #f6f7fb;
    border-radius: 12px;
    padding: 12px 10px 20px;
    position: relative;
    overflow: visible;
  }
  
  /* Línea de progreso */
  .wk-steps__track {
    position: absolute;
    left: 28px;
    right: 28px;
    top: 36px;
    height: 6px;
    background: var(--line);
    border-radius: 999px;
    overflow: hidden;
    z-index: 1;
  }
  
  .wk-steps__fill {
    height: 100%;
    width: var(--pct, 0%);
    background: var(--brand);
    transition: width 0.25s ease;
  }
  
  /* Lista de pasos */
  .wk-steps__list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap);
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 2;
  }
  
  /* Paso */
  .wk-step {
    text-align: center;
    flex: 1 1 0;
    min-width: 80px;
  }
  
  .wk-step__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
    color: var(--ink);
  }
  
  /* Punto (círculo) + icono */
  .wk-step__dot {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 3px solid var(--line);
    background: #fff;
    color: var(--muted);
    transition: all 0.18s ease;
  }
  
  /* Íconos SVG – trazo fino y elegante */
  .wk-step__dot svg,
  .wk-step__dot svg * {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.6 !important;        /* antes 2.25 → más fino */
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    vector-effect: non-scaling-stroke;
    width: 22px !important;
    height: 22px !important;
  }
  
  /* Label */
  .wk-step__label {
    font-weight: 800;
    font-size: 16px;
    line-height: 1.1;
    color: var(--muted);
    white-space: nowrap;
  }
  
  /* ===== Estados ===== */
  
  /* Paso completado */
  .wk-step--done .wk-step__dot {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    box-shadow: none;
  }
  
  .wk-step--done .wk-step__label {
    color: var(--ink);
  }
  
  /* Paso actual */
  .wk-step--current .wk-step__dot {
    background: #fff;
    border-color: var(--brand);
    color: var(--brand);
    box-shadow: 0 0 0 6px rgba(197, 18, 18, 0.1);
  }
  
  .wk-step--current .wk-step__label {
    color: var(--ink);
  }
  
  /* Paso pendiente */
  .wk-step--todo .wk-step__dot {
    background: #fff;
    border-color: var(--line);
    color: var(--muted);
  }
  
  .wk-step--todo .wk-step__label {
    color: var(--muted);
  }
  
  /* Accesibilidad */
  .wk-step__link[aria-disabled="true"] {
    pointer-events: none;
  }
  
  .wk-step__link:focus-visible .wk-step__dot {
    outline: 3px solid #000;
    outline-offset: 2px;
  }
  
  /* Oculta estilos antiguos */
  .multi-steps {
    display: none !important;
  }
  
  /* ===== FIX: que los cards NO se desborden en móvil/tablet ===== */

/* <= 1024px: relaja columnas (2 como mucho) y gaps */
@media (max-width: 1024px){
  .wsa-radios-2,
  .wsa-radios-3,
  .wsa-radios-grid.wsa-3{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 18px !important;
  }
}

/* <= 768px: UNA sola columna y nada de min 420px */
@media (max-width: 768px){
  .wsa-radios-2,
  .wsa-radios-3,
  .wsa-radios-grid.wsa-3{
    grid-template-columns: 1fr !important;     /* clave */
    gap: 16px !important;
  }

  /* la celda no “fuerza” ancho */
  .wsa-radios-grid .cb-radio.inline-block.cb-styled.daily.w-full{
    width: 100% !important;
    margin: 0 !important;
  }

  /* el label (card azul) ocupa EXACTO la celda y no se sale */
  .wsa-radios-grid .cb-radio.inline-block.cb-styled.daily.w-full > label{
    box-sizing: border-box !important;          /* padding no suma ancho */
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;                /* por si el badge empuja */
    border-radius: 12px !important;
  }

  /* badge y botón ABSOLUTOS dentro del label (no empujan ancho) */
  .wsa-radios-grid .cb-radio.inline-block.cb-styled.daily.w-full > label .price-badge{
    position: absolute !important;
    right: 12px; top: 12px; z-index: 2;
    max-width: 55%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .wsa-radios-grid .cb-radio.inline-block.cb-styled.daily.w-full > label .wsa-radio-actions{
    position: absolute !important;
    right: 12px; bottom: 12px; z-index: 2;
  }

  /* reserva hueco: badge derecha + botón abajo */
  .wsa-radios-grid .cb-radio.inline-block.cb-styled.daily.w-full > label{
    padding-right: 118px !important;            /* evita que el texto pase bajo el badge */
    padding-bottom: 56px !important;            /* evita que el texto pase bajo el botón */
  }
}
/* ===== WK Steps: compacto sin scroll (móvil) ===== */

/* ≤ 768px: encaja todo en una sola fila */
@media (max-width: 768px){
  .wk-steps{
    --gap: 10px;                 /* menos separación entre pasos */
    padding: 6px 8px 10px;
    overflow: hidden;            /* sin scroll */
  }

  /* Pista más fina y cercana al punto */
  .wk-steps__track{
    top: 26px;                   /* estaba ~36/30 */
    left: 10px;
    right: 10px;
    height: 3px;
  }

  .wk-steps__list{
    display: flex;
    align-items: center;
    justify-content: space-between; /* reparte el ancho disponible */
    gap: var(--gap);
    flex-wrap: nowrap;              /* 1 fila */
    min-width: 0;                   /* permite encoger hijos */
  }

  .wk-step{
    flex: 1 1 0;                    /* todos comparten el ancho */
    min-width: 0;                   /* deja que los textos encojan */
    text-align: center;
  }

  /* Punto/ícono más pequeño */
  .wk-step__dot{
    width: 34px; height: 34px;
    border-width: 2px;
  }
  .wk-step__dot svg, .wk-step__dot svg *{
    width: 15px !important;
    height: 15px !important;
    stroke-width: 1.2 !important;
  }

  /* Label en 1–2 líneas, pequeño y sin desbordes */
  .wk-step__label{
    font-size: 12px;
    line-height: 1.1;
    margin-top: 4px;
    white-space: normal;            /* permite 2 líneas */
    text-wrap: balance;             /* cortes más “bonitos” */
    word-break: keep-all;
    overflow: hidden;
  }

  /* Estado actual: un poco más legible, pero sin romper el layout */
  .wk-step--current .wk-step__label{
    font-size: 12.5px;
  }

  /* Quita halo grande para ganar aire */
  .wk-step--current .wk-step__dot{
    box-shadow: 0 0 0 4px rgba(197, 18, 18, .08);
  }
}

/* ≤ 380px: aún más compacto */
@media (max-width: 380px){
  .wk-steps{ --gap: 8px; padding: 6px 6px 8px; }
  .wk-steps__track{ top: 24px; left: 8px; right: 8px; height: 3px; }

  .wk-step__dot{ width: 30px; height: 30px; }
  .wk-step__dot svg, .wk-step__dot svg *{
    width: 14px !important; height: 14px !important;
  }

  .wk-step__label{
    font-size: 11.5px;             /* cabe en dos líneas cortas */
    max-width: 100%;
  }
}
/* ===========================
   EXTRAS – Título del card
   Objetivo: que el título (Top Covers / WK / Total coverage...)
   se vea como el botón "Select" pero SIN borde, texto negro
   y tamaño más grande.
   =========================== */

/* 1) Normalizamos el body de los <p> dentro del card (solo Optional Extras) */
.wsa-extras-grid .cb-radio label p,
.wsa-extras-grid .cb-checkbox label p {
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* 2) Estilo del TÍTULO del card en Optional Extras (primer <p> en bold) */
.wsa-extras-grid .cb-radio label .wrap-icon > p[style*="font-weight:bold"]:first-of-type,
.wsa-extras-grid .cb-checkbox label .wrap-icon > p[style*="font-weight:bold"]:first-of-type {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  line-height: 1.3 !important;
  color: #000021 !important;
  letter-spacing: .2px;
  margin: 6px 0 4px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-transform: none !important;
}

/* 5) Responsive: un poco más grande en desktop ancho (Optional Extras) */
@media (min-width: 1024px) {
  .wsa-extras-grid .cb-radio label .wrap-icon > p[style*="font-weight:bold"]:first-of-type,
  .wsa-extras-grid .cb-checkbox label .wrap-icon > p[style*="font-weight:bold"]:first-of-type {
    font-size: 24px !important;
  }
}

/* === PATCH – títulos tipo "TOP COVER", "EXTENDED COVER", "WK"
   Solo en .wsa-radios-2 (Damage Covers). Incluye captions de Optional Extras. === */
   .wsa-radios-grid.wsa-radios-2 > .cb-radio label p.flex.justify-between.gap-2 > span:first-child,
   .wsa-extras-grid > .cb-checkbox label p.flex.justify-between.gap-2 > span:first-child{
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-family: 'Poppins', sans-serif !important;
     font-weight: 700 !important;
     font-size: 14px !important;
     line-height: 1.3 !important;
     color: #000021 !important;
     background: #fff !important;
     border: 2px solid #fff !important;
     border-radius: 999px !important;
     padding: 4px 12px !important;
     letter-spacing: .2px;
     text-transform: none !important;
     box-shadow: 0 1px 3px rgba(0,0,0,.08);
   }
   
   /* Desktop un poquito más grande para esos títulos */
   @media (min-width:1024px){
     .wsa-radios-grid.wsa-radios-2 > .cb-radio label p.flex.justify-between.gap-2 > span:first-child,
     .wsa-extras-grid > .cb-checkbox label p.flex.justify-between.gap-2 > span:first-child{
       font-size: 15px !important;
       padding: 5px 14px !important;
     }
   }
   
   /* === RESETEO para KMS (wsa-radios-3) — vuelve al estilo normal === */
   .wsa-radios-grid.wsa-radios-3 > .cb-radio label p.flex.justify-between.gap-2 > span:first-child{
     all: unset;
     font-size: inherit !important;
     font-weight: inherit !important;
     color: inherit !important;
     display: inline !important;
   }
   
  /* === SUBTÍTULOS (chips frosted) – SOLO p pequeños, NO el p grande en bold === */
.wsa-radios-grid.wsa-radios-2 > .cb-radio label .wrap-icon
> p:not(.flex)                      /* no el título arriba */
   :not(:first-child)               /* no el primer hijo (suele ser título) */
   :not([style*="bold"])            /* no inline bold */
   :not(:has(b, br))                /* no si contiene <b> o <br> */
   :not(:empty)                     /* no vacíos */
{
display: inline-flex !important;
align-items: center;
justify-content: center;
font-family: 'Raleway', sans-serif !important;
font-weight: 500 !important;
font-size: 12.5px !important;
line-height: 1.3 !important;
color: #000021 !important;

background: rgba(255,255,255,.6) !important;
border: 1.5px solid rgba(255,255,255,.9) !important;
border-radius: 999px !important;

padding: 4px 10px !important;
margin: 4px 6px 6px 0 !important;   /* separa chips en fila */
letter-spacing: .25px;
text-transform: none !important;
box-shadow: 0 1px 4px rgba(0,0,0,.08);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
transition: all .25s ease;
}

/* Hover sutil en subtítulos */
.wsa-radios-grid.wsa-radios-2 > .cb-radio label .wrap-icon
> p:not(.flex):not(:first-child):not([style*="bold"]):not(:has(b, br)):hover{
background: rgba(255,255,255,.85) !important;
border-color: #fff !important;
box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

/* Reset explícito para el PÁRRAFO GRANDE en bold (nunca chip) */
.wsa-radios-grid.wsa-radios-2 > .cb-radio label .wrap-icon
> p[style*="font-weight"]:has(b),
.wsa-radios-grid.wsa-radios-2 > .cb-radio label .wrap-icon
> p[style*="font-weight:bold"]{
display: block !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 6px 0 !important;
color: #000021 !important;
font-family: 'Raleway', sans-serif !important;
font-weight: 500 !important;
line-height: 1.3 !important;
}
   
   /* =========================================
      FIX de clics/accsesibilidad (RADIOS + CHECKBOXES)
      — evita que textos internos bloqueen el clic y
        habilita botones dentro del card.
      ========================================= */
   .cb-radio label,
   .cb-checkbox label{
     position: relative !important;
     z-index: 0 !important;
     pointer-events: auto !important;
     cursor: pointer !important;
     user-select: none !important;
   }
   
   /* Lo decorativo NO intercepta */
   .cb-radio label *,
   .cb-checkbox label *{
     pointer-events: none !important;
   }
   
   /* Lo interactivo SÍ recibe clic */
   .cb-radio input,
   .cb-checkbox input,
   .cb-radio label .wsa-pill,
   .cb-checkbox label .wsa-pill,
   .cb-radio label .wsa-add,
   .cb-checkbox label .wsa-add,
   .cb-radio label .wsa-btn,
   .cb-checkbox label .wsa-btn,
   .cb-radio label .wsa-radio-actions *,
   .cb-checkbox label .wsa-extra-actions *,
   .cb-radio label a,
   .cb-checkbox label a,
   .cb-radio label button,
   .cb-checkbox label button{
     pointer-events: auto !important;
   }
   
   /* “Glow” sutil cuando está seleccionado */
   .cb-radio input:checked ~ label,
   .cb-checkbox input:checked ~ label{
     box-shadow: 0 0 0 2px rgba(34,96,255,.15) inset !important;
   }
   
   /* =========================================
      TÍTULO tipo “pill” — buen wrapping del texto
      ========================================= */
   .wsa-radios-grid.wsa-radios-2 > .cb-radio label p.flex.justify-between.gap-2{
     display: flex !important;
     align-items: flex-start !important;
     gap: .5rem !important;
   }
   
   /* inline-block + flex-grow para usar el ancho disponible */
   .wsa-radios-grid.wsa-radios-2 > .cb-radio label p.flex.justify-between.gap-2 > span:first-child,
   .wsa-extras-grid > .cb-checkbox label p.flex.justify-between.gap-2 > span:first-child{
     display: inline-block !important;
     flex: 1 1 auto !important;
     vertical-align: top !important;
     font-size: 14px !important;
     line-height: 1.28 !important;
     color: #000021 !important;
     background: #fff !important;
     border: 2px solid #fff !important;
     border-radius: 999px !important;
     padding: 6px 12px !important;
     max-width: 100% !important;
     white-space: normal !important;
     text-align: left !important;
     box-shadow: 0 1px 3px rgba(0,0,0,.08) !important;
   }
   
   /* Si hay un segundo <span> (ej: “== $0”), que no empuje el título */
   .wsa-radios-grid.wsa-radios-2 > .cb-radio label p.flex.justify-between.gap-2 > span:last-child{
     flex: 0 0 auto !important;
   }
   
   /* =========================================
      Mobile tweaks
      ========================================= */
   
   /* ≤ 640px */
   @media (max-width:640px){
     .wsa-radios-grid.wsa-radios-2 > .cb-radio label p.flex.justify-between.gap-2 > span:first-child,
     .wsa-extras-grid > .cb-checkbox label p.flex.justify-between.gap-2 > span:first-child{
       font-size: 13.5px !important;
       padding: 6px 12px !important;
     }
   
     /* Chips translúcidos más compactos */
     .wsa-radios-grid.wsa-radios-2 > .cb-radio label .wrap-icon
       > p[style*="font-weight"]:not(.flex):not(:first-of-type):not(:empty){
       font-size: 12px !important;
       padding: 4px 8px !important;
       border-radius: 12px !important;
       max-width: 100% !important;
       white-space: normal !important;
     }
   
     /* Badge rojo fijo arriba derecha */
     .wsa-radios-grid .cb-radio.inline-block.cb-styled.daily.w-full > label .price-badge{
       position: absolute !important;
       right: 10px; top: 10px; z-index: 2;
       white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
     }
   
     /* Botonera absoluta abajo derecha */
     .wsa-radios-grid .cb-radio.inline-block.cb-styled.daily.w-full > label .wsa-radio-actions{
       position: absolute !important;
       right: 12px; bottom: 14px; z-index: 2;
       display: flex !important; justify-content: flex-end !important;
     }
   
     /* Huecos del card: badge + botón */
     .wsa-radios-grid .cb-radio.inline-block.cb-styled.daily.w-full > label{
       padding-right: 118px !important;
       padding-bottom: 92px !important;
       padding-left: 46px !important;
     }
   
     .wsa-radios-2 .wrap-icon p,
     .wsa-radios-2 .wrap-icon li{
       font-size: 15px !important;
       line-height: 1.45 !important;
     }
   }
   
   /* ≤ 480px */
   @media (max-width:480px){
     .wsa-radios-grid.wsa-radios-2 > .cb-radio label p.flex.justify-between.gap-2 > span:first-child{
       font-size: 12.5px !important;
       line-height: 1.22 !important;
       padding: 5px 11px !important;
     }
     .wsa-radios-grid .cb-radio.inline-block.cb-styled.daily.w-full > label .price-badge{
       transform: scale(.9);
       transform-origin: top right;
     }
     .wsa-radios-grid .cb-radio.inline-block.cb-styled.daily.w-full > label{
       padding-right: 24px !important;
       padding-bottom: 102px !important;
       padding-left: 24px !important;
     }
     .wsa-pill{
       font-size: 13px !important;
       padding: 9px 14px !important;
       border-width: 2px !important;
     }
   }
   
   /* ≤ 360px */
   @media (max-width:360px){
     .wsa-radios-grid.wsa-radios-2 > .cb-radio label p.flex.justify-between.gap-2 > span:first-child{
       font-size: 11.5px !important;
       padding: 4px 8px !important;
     }
     .wsa-radios-grid .cb-radio.inline-block.cb-styled.daily.w-full > label{
       padding-bottom: 112px !important;
     }
   }
   
   /* === FIX específico: quita texto suelto tipo "== $0" y reduce padding del contenedor === */
   .wsa-radios-grid.wsa-radios-2 > .cb-radio label p.flex.justify-between.gap-2{
     display: flex !important;
     align-items: flex-start !important;
     gap: .5rem !important;
     font-size: 0 !important;           /* oculta texto suelto como "== $0" */
     line-height: 0 !important;         /* acompaña el truco sin afectar al span */
     padding-right: .75rem !important;  /* reduce padding que achicaba el pill */
   }
   
   /* Si el card tiene badge rojo (per day), deja un poco más de aire */
   .wsa-radios-grid.wsa-radios-2 > .cb-radio label:has(.price-badge) p.flex.justify-between.gap-2{
     padding-right: 1.25rem !important;
   }
   
   /* No tocar KMs (wsa-radios-3) ni Optional Extras */
   .wsa-radios-grid.wsa-radios-3 > .cb-radio label p.flex.justify-between.gap-2,
   .wsa-extras-grid .cb-checkbox label p.flex.justify-between.gap-2{
     padding-right: inherit !important;
   }
   
   /* Devolvemos tipografía solo al título real (primer span) */
   .wsa-radios-grid.wsa-radios-2 > .cb-radio label p.flex.justify-between.gap-2 > span:first-child{
     display: inline-block !important;
     flex: 1 1 auto !important;
     max-width: 100% !important;
     white-space: normal !important;
     vertical-align: top !important;
     font-size: 12px !important;
     line-height: 1.28 !important;
     color: #000021 !important;
     background: #fff !important;
     border: 2px solid #fff !important;
     border-radius: 999px !important;
     padding: 6px 12px !important;
     text-align: left !important;
     box-shadow: 0 1px 3px rgba(0,0,0,.08) !important;
   }
   
   /* Responsive: un pelín más compacto en móviles (reaplica parte de arriba) */
   @media (max-width:480px){
     .wsa-radios-grid.wsa-radios-2 > .cb-radio label p.flex.justify-between.gap-2{
       padding-right: .5rem !important;
     }
     .wsa-radios-grid.wsa-radios-2 > .cb-radio label:has(.price-badge) p.flex.justify-between.gap-2{
       padding-right: .75rem !important;
     }
     .wsa-radios-grid.wsa-radios-2 > .cb-radio label p.flex.justify-between.gap-2 > span:first-child{
       font-size: 12.5px !important;
       line-height: 1.22 !important;
       padding: 5px 11px !important;
     }
   }
   /* Optional Extras: que los botones siempre reciban clic */
.wsa-extra-actions,
.wsa-extra-actions * { pointer-events: auto !important; }
/* Refuerzo visual: el card no es "clickable" */
.wsa-radios-grid.wsa-radios-2 .cb-radio>label,
.wsa-radios-grid.wsa-radios-3 .cb-radio>label,
.cb-checkbox.wsa-extra-card>label {
  cursor: default !important;
}

/* Nada decorativo intercepta clic */
.wsa-radios-grid.wsa-radios-2 .cb-radio>label *,
.wsa-radios-grid.wsa-radios-3 .cb-radio>label *,
.cb-checkbox.wsa-extra-card>label * {
  pointer-events: none !important;
}

/* Pero los botones/links y acciones SÍ */
.wsa-radios-grid.wsa-radios-2 .cb-radio>label .wsa-pill,
.wsa-radios-grid.wsa-radios-2 .cb-radio>label .wsa-add,
.wsa-radios-grid.wsa-radios-2 .cb-radio>label .wsa-btn,
.wsa-radios-grid.wsa-radios-2 .cb-radio>label .wsa-radio-actions *,
.wsa-radios-grid.wsa-radios-3 .cb-radio>label .wsa-pill,
.wsa-radios-grid.wsa-radios-3 .cb-radio>label .wsa-add,
.wsa-radios-grid.wsa-radios-3 .cb-radio>label .wsa-btn,
.wsa-radios-grid.wsa-radios-3 .cb-radio>label .wsa-radio-actions *,
.cb-checkbox.wsa-extra-card>label .wsa-pill,
.cb-checkbox.wsa-extra-card>label .wsa-add,
.cb-checkbox.wsa-extra-card>label .wsa-btn,
.cb-checkbox.wsa-extra-card>label .wsa-extra-actions *,
.cb-checkbox.wsa-extra-card>label a,
.cb-checkbox.wsa-extra-card>label button {
  pointer-events: auto !important;
}