/* =====================================================
   BUBBLES BOOKING WIZARD
   Incluye calendario, time slots y payment integration
===================================================== */

/* =====================================================
   1) VARIABLES
===================================================== */
.bb-wizard {
  --bb-accent:       var(--wp--preset--color--primary, var(--ast-global-color-0, #3b82f6));
  --bb-accent-hover: var(--wp--preset--color--secondary, var(--ast-global-color-1, #2563eb));
  --bb-surface:      var(--wp--preset--color--base, #ffffff);
  --bb-text:         var(--wp--preset--color--contrast, #111111);

  --bb-border:       rgba(0,0,0,0.10);
  --bb-border-input: rgba(0,0,0,0.15);
  --bb-border-radius:    12px;
  --bb-border-radius-sm: 10px;

  --bb-error-bg:     #fef2f2;
  --bb-error-border: #fecaca;
  --bb-error-text:   #991b1b;

  --bb-success-bg:     #f0fdf4;
  --bb-success-border: #bbf7d0;
  --bb-success-text:   #051c0e;

  --bb-spacing-xs: 6px;
  --bb-spacing-sm: 12px;
  --bb-spacing-md: 16px;
  --bb-spacing-lg: 24px;

  --bb-text-xs:   var(--wp--preset--font-size--small, 13px);
  --bb-text-sm:   14px;
  --bb-text-base: 1rem;
  --bb-text-lg:   var(--wp--preset--font-size--medium, 20px);

  --bb-transition: 0.15s ease;
}

/* =====================================================
   1.5) FONT INHERITANCE — theme-agnostic
   Fuerza a TODOS los elementos a heredar la fuente del tema.
   Los controles de formulario (button, input, select, textarea)
   NO heredan la fuente por defecto del navegador, por eso salían
   en otra tipografía. Con `inherit` toman siempre la del tema
   donde esté instalado el plugin, sin fijar ningún nombre de fuente.
===================================================== */
.bb-wizard,
.bb-wizard *,
.bb-client-portal,
.bb-client-portal * {
  font-family: inherit;
}

/* =====================================================
   2) WRAPPER
===================================================== */
.bb-wizard-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--bb-spacing-lg) var(--bb-spacing-md);
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* =====================================================
   3) PROGRESS BAR
===================================================== */
.bb-progress-wrapper  { margin-bottom: var(--bb-spacing-lg); }
.bb-progress-counter  { text-align: center; font-weight: 600; opacity: 0.6; margin-bottom: 6px; }
.bb-progress-bar      { width: 100%; height: 3px; background: var(--bb-border); border-radius: 999px; overflow: hidden; margin-bottom: 10px; }
.bb-progress-fill     { height: 100%; background: var(--bb-accent); border-radius: 999px; transition: width 0.3s ease; }

/* =====================================================
   4) STEP LABELS — Mobile
===================================================== */
.bb-step-labels { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0; }

.bb-step-item {
  display: none;
  padding: 6px 12px;
  border-radius: 6px;
  transition: all var(--bb-transition);
  white-space: nowrap;
}
.bb-step-item.is-active {
  display: inline-block;
  background: var(--bb-accent);
  color: white;
  padding: 6px 14px;
}
.bb-step-item.is-active + .bb-step-item {
  display: inline-block;
  background: rgba(0,0,0,0.04);
  margin-left: 8px;
  padding: 6px 14px;
}
.bb-step-item.is-active + .bb-step-item::before { content: "Next ›› "; margin-right: 6px; opacity: 0.6; }

/* =====================================================
   5) STEP LABELS — Desktop
===================================================== */
@media (min-width: 768px) {
  .bb-step-labels { display: flex; justify-content: space-between; gap: 8px; flex-wrap: nowrap; }

  .bb-step-item {
    display: flex; flex: 1; justify-content: center; align-items: center; text-align: center;
    opacity: 0.85; background: var(--bb-border); padding: 8px 6px; margin-left: 0;
  }
  .bb-step-item:hover { opacity: 0.95; transform: translateY(-1px); }
  .bb-step-item.is-done { opacity: 0.7; background: var(--bb-success-bg); color: var(--bb-success-text); }
  .bb-step-item.is-done::after { content: " ✓"; opacity: 0.8; font-weight: 600; padding-left: 5px; }
  .bb-step-item.is-active { display: flex; opacity: 1; background: var(--bb-accent); color: var(--bb-surface); padding: 8px 6px; }
  .bb-step-item.is-active + .bb-step-item::before { content: ""; margin: 0; }
  .bb-step-item.is-active + .bb-step-item { display: flex; opacity: 0.85; background: var(--bb-border); margin-left: 0; padding: 8px 6px; }
}

/* =====================================================
   6) LAYOUT
===================================================== */
.bb-layout { display: grid; grid-template-columns: 3fr 1fr; gap: var(--bb-spacing-lg); }

@media (max-width: 900px) {
  .bb-layout { grid-template-columns: 1fr; }
}

/* =====================================================
   7) PANELS & CARDS
===================================================== */
.bb-panel,
.bb-card {
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-border-radius);
  padding: var(--bb-spacing-md);
  background: transparent;
  box-sizing: border-box;
}
.bb-card { display: flex; gap: var(--bb-spacing-sm); align-items: flex-start; cursor: pointer; }

/* =====================================================
   8) STEP HEADER
===================================================== */
.bb-step-header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--bb-spacing-sm); padding-bottom: var(--bb-spacing-md);
  border-bottom: 1px solid var(--bb-border);
}
.bb-step-title { margin: 0; color: inherit; }
.bb-start-over { font-size: var(--bb-text-sm); text-decoration: none; padding: 6px 12px; border-radius: var(--bb-border-radius-sm); }
.bb-start-over:hover { opacity: 1; text-decoration: underline; }

/* =====================================================
   9) FORM ELEMENTS — let the theme control font
===================================================== */
.bb-wizard input[type="text"],
.bb-wizard input[type="email"],
.bb-wizard input[type="tel"],
.bb-wizard select,
.bb-wizard textarea {
  width: 100%;
  font-family: inherit;
  border: 1px solid var(--bb-border-input);
  border-radius: var(--bb-border-radius-sm);
  padding: 10px;
  box-sizing: border-box;
}
.bb-wizard input:focus,
.bb-wizard select:focus,
.bb-wizard textarea:focus { outline: none; border-color: var(--bb-accent); }

/* =====================================================
   10) RADIO & CHECKBOX PILLS
===================================================== */
.bb-radio-row  { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.bb-radio-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--bb-border); border-radius: var(--bb-border-radius-sm); }
.bb-radio-pill input { margin: 0; }

/* =====================================================
   11) CARD CONTENT
===================================================== */
.bb-card-body  { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.bb-card-title { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; }
.bb-card-price { white-space: nowrap; }
.bb-card-desc  { font-size: var(--bb-text-base); opacity: 0.85; }
.bb-card-meta  { font-size: var(--bb-text-base); margin: 4px 0; }
.bb-card-meta strong { font-weight: 500; opacity: 0.8; }

/* =====================================================
   12) SELECTION CARDS
===================================================== */
.bb-selection-cards {
  display: grid; gap: var(--bb-spacing-sm);
  padding: 0; margin: var(--bb-spacing-md) 0; border: 0;
}
.bb-selection-card {
  display: flex; gap: var(--bb-spacing-sm); align-items: flex-start;
  padding: var(--bb-spacing-md); border: 1px solid var(--bb-border);
  border-radius: var(--bb-border-radius); cursor: pointer;
  transition: all var(--bb-transition); background: transparent;
}
.bb-selection-card:hover {
  border-color: var(--bb-accent);
  background: color-mix(in srgb, var(--bb-accent) 2%, transparent);
  transform: translateY(-2px);
}
.bb-selection-card:has(input[type="radio"]:checked),
.bb-selection-card:has(input[type="checkbox"]:checked) {
  border-color: var(--bb-accent);
  background: color-mix(in srgb, var(--bb-accent) 5%, transparent);
}
.bb-selection-card .bb-radio,
.bb-selection-card .bb-checkbox { margin-top: 2px; flex-shrink: 0; width: 18px; height: 18px; cursor: pointer; }
.bb-selection-card .bb-card-body { flex: 1; min-width: 0; }
.bb-selection-card .bb-card-title { display: flex; justify-content: space-between; align-items: baseline; gap: var(--bb-spacing-sm); margin-bottom: 6px; font-weight: 600; font-size: var(--bb-text-base); }
.bb-selection-card .bb-card-price { color: var(--bb-accent); font-weight: 600; white-space: nowrap; font-size: var(--bb-text-base); }
.bb-selection-card .bb-card-desc  { font-size: var(--bb-text-base); opacity: 0.75; line-height: 1.5; margin-bottom: 6px; }

/* =====================================================
   13) TECHNICIAN CARDS
===================================================== */
.bb-tech-avatar     { flex: 0 0 auto; margin-top: 2px; }
.bb-tech-avatar-img { width: 65px; height: 65px; border-radius: 50%; object-fit: cover; border: 1px solid var(--bb-border); display: block; }
.bb-tech-avatar-initial { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--bb-border); background: var(--bb-border); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: var(--bb-text-lg); opacity: 0.6; }
.bb-tech-portfolio { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.bb-tech-portfolio img { width: 78px; height: 58px; border-radius: 10px; object-fit: cover; border: 1px solid var(--bb-border); }

@media (max-width: 600px) {
  .bb-tech-portfolio img { width: 64px; height: 48px; }
}

/* =====================================================
   14) ERRORS
===================================================== */
.bb-error,
.bb-errors {
  margin: 10px 0; padding: 12px 14px; border-radius: var(--bb-border-radius-sm);
  border: 1px solid var(--bb-error-border); background: var(--bb-error-bg);
  color: var(--bb-error-text); font-size: var(--bb-text-sm);
}
.bb-error:empty { display: none; }
.bb-errors ul   { list-style: none; padding: 0; margin: 6px 0 0; }
.bb-errors li   { margin: 4px 0; position: relative; padding-left: 18px; }
.bb-errors li::before { content: "⚠"; position: absolute; left: 0; }

/* =====================================================
   15) BUTTONS
===================================================== */
.bb-wizard-buttons {
  display: flex; justify-content: space-between; gap: var(--bb-spacing-sm);
  margin-top: var(--bb-spacing-lg); padding-top: var(--bb-spacing-lg);
  border-top: 1px solid var(--bb-border);
}
.bb-btn-continue       { margin-left: auto; background: var(--bb-accent); border-color: var(--bb-accent); }
.bb-btn-continue:hover { background: var(--bb-accent-hover); border-color: var(--bb-accent-hover); }

/* =====================================================
   16) FIELDS & GRID
===================================================== */
.bb-fields-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bb-spacing-md); margin: var(--bb-spacing-md) 0;
}
.bb-field       { display: flex; flex-direction: column; }
.bb-field-full  { grid-column: 1 / -1; }
.bb-field label,
.bb-field-label { font-weight: 600; margin-bottom: var(--bb-spacing-xs); }
.bb-help { font-size: var(--bb-text-xs); opacity: 0.75; margin-top: var(--bb-spacing-xs); line-height: 1.4; }
.bb-warn { font-size: var(--bb-text-xs); color: #d97706; margin-top: var(--bb-spacing-xs); }

@media (max-width: 700px) {
  .bb-fields-grid { grid-template-columns: 1fr; }
  .bb-field-full  { grid-column: auto; }
}

/* =====================================================
   17) AUTOCOMPLETE
===================================================== */
.bb-suggest { position: relative; }

/* Las sugerencias heredan la fuente del tema, igual que los inputs.
   !important asegura que gane sobre cualquier estilo del tema, en
   cualquier sitio donde se instale el plugin (sigue siendo agnóstico:
   `inherit` toma la fuente que use ese tema, no una fija). */
.bb-suggest,
.bb-suggest *,
.bb-suggest-list,
.bb-suggest-item {
  font-family: inherit !important;
}

.bb-suggest-list {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 1000;
  max-height: 200px; overflow-y: auto; background: var(--bb-surface);
  border: 1px solid var(--bb-border-input); border-top: none;
  border-radius: 0 0 var(--bb-border-radius-sm) var(--bb-border-radius-sm);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin-top: -1px;
}
.bb-suggest-item { padding: 10px 12px; cursor: pointer; transition: background var(--bb-transition); border-bottom: 1px solid var(--bb-border); }
.bb-suggest-item:last-child { border-bottom: none; }
.bb-suggest-item:hover,
.bb-suggest-item.is-active { background: color-mix(in srgb, var(--bb-accent) 8%, transparent); }
.bb-suggest-list:empty { display: none; }

/* =====================================================
   18) SUMMARY — Desktop sidebar + Mobile popup
   Theme-agnostic: font family, font size and text colors
   are inherited from the active WordPress theme.
===================================================== */

.bb-summary,
.bb-summary *,
.bb-summary-popup,
.bb-summary-popup * {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  line-height: inherit;
}

.bb-summary.bb-summary-hidden { display: none !important; }
.bb-sum-summary::-webkit-details-marker { display: none; }

/* Cart icon */
.bb-summary-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-accent);
}
.bb-summary-cart svg {
  display: block;
  width: 1.8em;
  height: 1.8em;
}

/* ---------- DESKTOP ---------- */
@media (min-width: 901px) {
  .bb-summary.bb-panel {
    position: sticky;
    top: 24px;
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-border-radius);
    padding: 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
  }

  .bb-summary-head {
    background: transparent;
    border-bottom: 1px solid var(--bb-border);
    padding: var(--bb-spacing-lg);
    margin: 0;
  }

  .bb-summary-head-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
  }
  .bb-summary-head-total span { font-weight: 500; opacity: .7; }
  .bb-summary-head-total strong { font-weight: 700; }

  .bb-sum-details {
    border: none;
    border-bottom: 1px solid var(--bb-border);
    margin: 0;
  }
  .bb-sum-details:last-of-type { border-bottom: none; }

  .bb-sum-summary {
    padding: var(--bb-spacing-md) var(--bb-spacing-lg);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    font-weight: 600;
    transition: background var(--bb-transition);
    user-select: none;
  }
  .bb-sum-summary:hover { background: rgba(0,0,0,.02); }
  .bb-sum-summary::marker { display: none; }

  .bb-sum-summary-left { display: flex; align-items: center; gap: 8px; }
  .bb-sum-muted { opacity: .5; font-weight: 400; }
  .bb-sum-caret { transition: transform .2s ease; opacity: .4; }
  .bb-sum-details[open] .bb-sum-caret { transform: rotate(180deg); }

  .bb-sum-item {
    padding: var(--bb-spacing-md) var(--bb-spacing-lg);
    border-top: 1px solid var(--bb-border);
  }
  .bb-sum-item:first-child { border-top: none; }

  .bb-sum-item-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-weight: 600;
  }
  .bb-sum-item-sub { opacity: .7; }

  .bb-sum-tag {
    display: inline-block;
    font-weight: 600;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--bb-border);
    background: transparent;
  }

  /* Add-ons: clean nested subsection, no boxed black border */
  .bb-sum-addons {
    margin: 12px 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }
  .bb-sum-addons > .bb-sum-summary-small {
    padding: 8px 0;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--bb-border);
    background: transparent;
    font-weight: 600;
  }
  .bb-sum-addons-list {
    list-style: none;
    padding: 4px 0 0;
    margin: 0;
  }
  .bb-sum-addons-list li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 5px 0;
    border: 0;
  }
  .bb-sum-addons-list li .bb-sum-muted { flex-shrink: 0; }

  .bb-summary-blocks {
    padding: var(--bb-spacing-lg);
    background: transparent;
    margin: 0;
  }
  .bb-summary-kv {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 12px 0;
    border-bottom: 1px solid var(--bb-border);
  }
  .bb-summary-kv:last-child { border-bottom: none; padding-bottom: 0; }
  .bb-summary-kv:first-child { padding-top: 0; }
  .bb-summary-k { font-weight: 600; opacity: .6; text-transform: uppercase; }
  .bb-summary-v {
    font-weight: 600;
    text-align: right;
    max-width: 65%;
    word-break: break-word;
  }

  .bb-float-btn,
  .bb-summary-popup { display: none !important; }
}

/* =====================================================
   MOBILE — FLOATING SUMMARY BUTTON
   Carrito + precio
===================================================== */
@media (max-width: 900px) {

  /* Ocultar summary lateral de escritorio */
  .bb-summary.bb-panel {
    display: none !important;
  }

  /* -----------------------------
     Botón flotante
  ----------------------------- */
  .bb-float-btn {
    position: fixed !important;
    right: 20px !important;
    bottom: 24px !important;
    z-index: 9999 !important;

    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    width: auto !important;
    min-width: 0 !important;
    height: auto !important;

    padding: 12px 18px !important;

    /* Color principal del plugin/tema */
    background: var(--bb-accent, #2ea9bd) !important;
    color: #ffffff !important;

    border: none !important;
    border-radius: 999px !important;

    cursor: pointer !important;

    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;

    opacity: 1 !important;

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18) !important;

    transition:
      transform 0.15s ease,
      box-shadow 0.15s ease !important;
  }

  .bb-float-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22) !important;
  }

  .bb-float-btn:active {
    transform: translateY(0) !important;
  }

  /* Carrito */
  .bb-float-btn-cart {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;

    color: inherit !important;
    opacity: 1 !important;
  }

  .bb-float-btn-cart svg {
    display: block !important;

    width: 1.5em !important;
    height: 1.5em !important;

    color: inherit !important;
    stroke: currentColor !important;
  }

  /* Precio */
  .bb-float-btn-price {
    display: inline-block !important;

    color: inherit !important;

    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: 700 !important;
    line-height: inherit !important;

    white-space: nowrap !important;
    opacity: 1 !important;
  }

}


/* =====================================================
   MOBILE — SUMMARY POPUP
===================================================== */

/*
 * Fondo oscuro detrás del popup.
 * Este sí debe ser transparente.
 */
.bb-summary-popup {
  display: none;

  position: fixed !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  z-index: 10000 !important;

  background: rgba(0, 0, 0, 0.55) !important;

  align-items: flex-end !important;
  justify-content: center !important;
}


/* Mostrar popup */
.bb-summary-popup.active {
  display: flex !important;
}


/* -----------------------------
   Caja blanca del Summary
----------------------------- */
.bb-summary-popup-content {
  position: relative !important;

  width: 100% !important;
  max-width: 100% !important;

  max-height: 82vh !important;

  margin: 0 !important;
  padding: 24px !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  /*
   * IMPORTANTE:
   * NO usar background: inherit aquí.
   */
  background: var(--bb-surface, #ffffff) !important;
  color: var(--bb-text, inherit) !important;

  opacity: 1 !important;

  border: none !important;
  border-radius: 18px 18px 0 0 !important;

  box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.18) !important;

  animation: bb-slide-up 0.28s ease-out;
}


/* Animación */
@keyframes bb-slide-up {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}


/* =====================================================
   POPUP HEADER
===================================================== */

.bb-summary-popup-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;

  gap: 16px !important;

  margin: 0 0 16px !important;
  padding: 0 0 14px !important;

  border-bottom: 1px solid var(--bb-border) !important;

  background: transparent !important;
  color: inherit !important;
}


/* Título */
.bb-summary-popup-title {
  margin: 0 !important;
  padding: 0 !important;

  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;

  font-weight: 600 !important;

  color: inherit !important;
}


/* Botón X */
.bb-summary-popup-close {
  flex: 0 0 auto !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 40px !important;
  height: 40px !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  color: inherit !important;

  border: none !important;
  border-radius: 50% !important;

  font-family: inherit !important;
  font-size: inherit !important;
  line-height: 1 !important;

  cursor: pointer !important;

  opacity: 0.65 !important;
}

.bb-summary-popup-close:hover {
  opacity: 1 !important;
}


/* =====================================================
   POPUP BODY
===================================================== */

.bb-summary-popup-body {
  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  color: inherit !important;

  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}


/* Summary copiado dentro del popup */
.bb-summary-popup-body .bb-summary-collapsible {
  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  border: none !important;
  border-radius: 0 !important;

  background: transparent !important;
  color: inherit !important;

  box-shadow: none !important;
}


/* =====================================================
   TOTAL
===================================================== */

.bb-summary-popup-body .bb-summary-head {
  margin: 0 0 16px !important;
  padding: 16px 0 !important;

  background: transparent !important;

  border: none !important;
  border-bottom: 1px solid var(--bb-border) !important;

  border-radius: 0 !important;

  color: inherit !important;
}


.bb-summary-popup-body .bb-summary-head-total {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  gap: 16px !important;
}


.bb-summary-popup-body .bb-summary-head-total span {
  display: inline-flex;
  align-items: center;

  color: inherit !important;

  font-size: inherit !important;
}


.bb-summary-popup-body .bb-summary-head-total svg {
  width: 1.6em;
  height: 1.6em;

  color: var(--bb-accent, currentColor);
}


.bb-summary-popup-body .bb-summary-head-total strong {
  color: inherit !important;

  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;

  font-weight: 700 !important;
}


/* =====================================================
   SERVICES
===================================================== */

.bb-summary-popup-body .bb-sum-details {
  margin: 0 !important;

  border: none !important;
  border-bottom: 1px solid var(--bb-border) !important;

  border-radius: 0 !important;

  background: transparent !important;

  overflow: visible !important;
}


.bb-summary-popup-body .bb-sum-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  gap: 12px !important;

  margin: 0 !important;
  padding: 14px 0 !important;

  list-style: none !important;

  background: transparent !important;
  color: inherit !important;

  border: none !important;

  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;

  font-weight: 600 !important;

  cursor: pointer !important;
}


.bb-summary-popup-body .bb-sum-summary::-webkit-details-marker {
  display: none;
}


.bb-summary-popup-body .bb-sum-summary-left {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}


.bb-summary-popup-body .bb-sum-caret {
  flex: 0 0 auto;

  color: inherit !important;

  opacity: 0.5;

  transition: transform 0.2s ease;
}


.bb-summary-popup-body
.bb-sum-details[open]
> .bb-sum-summary
.bb-sum-caret {
  transform: rotate(180deg);
}


/* =====================================================
   SERVICE ITEM
===================================================== */

.bb-summary-popup-body .bb-sum-item {
  margin: 0 !important;
  padding: 14px 0 !important;

  border-top: 1px solid var(--bb-border) !important;

  background: transparent !important;
  color: inherit !important;
}


.bb-summary-popup-body .bb-sum-item-title {
  display: flex;
  align-items: center;
  gap: 8px;

  margin: 0 0 5px !important;

  color: inherit !important;

  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;

  font-weight: 600 !important;
}


.bb-summary-popup-body .bb-sum-item-sub {
  margin: 0 !important;

  color: inherit !important;

  font-size: inherit !important;
  line-height: inherit !important;

  opacity: 0.7;
}


/* =====================================================
   ADD-ONS — limpio, sin caja negra
===================================================== */

.bb-summary-popup-body .bb-sum-addons {
  margin: 12px 0 0 !important;
  padding: 0 !important;

  border: none !important;
  border-radius: 0 !important;

  background: transparent !important;

  overflow: visible !important;
}


.bb-summary-popup-body
.bb-sum-addons
> .bb-sum-summary-small {

  margin: 0 !important;
  padding: 9px 0 !important;

  border: none !important;
  border-top: 1px solid var(--bb-border) !important;

  background: transparent !important;
  color: inherit !important;

  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;

  font-weight: 600 !important;
}


.bb-summary-popup-body .bb-sum-addons-list {
  list-style: none !important;

  margin: 0 !important;
  padding: 4px 0 6px !important;

  background: transparent !important;
}


.bb-summary-popup-body .bb-sum-addons-list li {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;

  gap: 14px !important;

  margin: 0 !important;
  padding: 5px 0 !important;

  border: none !important;

  background: transparent !important;
  color: inherit !important;

  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}


.bb-summary-popup-body
.bb-sum-addons-list
li
.bb-sum-muted {
  flex: 0 0 auto;
}


/* =====================================================
   ADDRESS / WHEN / CUSTOMER
===================================================== */

.bb-summary-popup-body .bb-summary-blocks {
  display: flex !important;
  flex-direction: column !important;

  gap: 0 !important;

  margin: 16px 0 0 !important;
  padding: 0 !important;

  background: transparent !important;
  color: inherit !important;

  border: none !important;
  border-radius: 0 !important;
}


.bb-summary-popup-body .bb-summary-kv {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;

  gap: 16px !important;

  margin: 0 !important;
  padding: 12px 0 !important;

  border-bottom: 1px solid var(--bb-border) !important;

  background: transparent !important;
  color: inherit !important;

  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}


.bb-summary-popup-body .bb-summary-kv:last-child {
  border-bottom: none !important;
}


.bb-summary-popup-body .bb-summary-k {
  flex: 0 0 auto;

  color: inherit !important;

  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;

  font-weight: 600 !important;

  text-transform: uppercase;

  opacity: 0.6;
}


.bb-summary-popup-body .bb-summary-v {
  max-width: 65%;

  color: inherit !important;

  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;

  font-weight: 600 !important;

  text-align: right;

  word-break: break-word;
}


/* =====================================================
   MUTED + TAG
===================================================== */

.bb-summary-popup-body .bb-sum-muted {
  color: inherit !important;
  opacity: 0.6;
}


.bb-summary-popup-body .bb-sum-tag {
  display: inline-block;

  margin-left: 6px;
  padding: 2px 7px;

  background: transparent !important;
  color: inherit !important;

  border: 1px solid var(--bb-border) !important;
  border-radius: 999px;

  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;

  font-weight: 500;
}

/* =====================================================
   19) DATE & TIME
===================================================== */
.bb-datetime-grid {
   display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(var(--bb-spacing-lg) * 1.5);
}
.bb-datetime-col { min-width: 0; width: 100%; box-sizing: border-box; display: grid; align-items: center; padding: 5px; }

.bb-calendar {
  border: 1px solid var(--bb-border); border-radius: var(--bb-border-radius);
  padding: var(--bb-spacing-md); background: transparent; overflow: hidden;
  box-sizing: border-box; width: 100%;
}
.bb-calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--bb-spacing-md); padding-bottom: var(--bb-spacing-sm); border-bottom: 1px solid var(--bb-border); }
.bb-calendar-title  { font-weight: 600; font-size: clamp(14px, 2.5vw, 16px); display: flex; gap: 6px; }
.bb-calendar-nav    { width: 32px; height: 32px; box-shadow: none; background: transparent; cursor: pointer; transition: all var(--bb-transition); display: flex; align-items: center; justify-content: center; font-size: var(--bb-text-lg); font-weight: 600; color: inherit; }
.bb-calendar-nav:hover    { background: var(--bb-border); border-color: var(--bb-accent); }
.bb-calendar-nav:disabled { opacity: 0.7; cursor: not-allowed; }

.bb-calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(1px, 1vw, 3px); margin-bottom: var(--bb-spacing-xs); width: 100%; box-sizing: border-box; }
.bb-calendar-weekday  { text-align: center; font-size: clamp(14px, 2.5vw, 16px); padding: 6px 0; box-sizing: border-box; }
.bb-calendar-days     { display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(1px, 0.5vw, 4px); margin-bottom: var(--bb-spacing-xs); width: 100%; box-sizing: border-box; }

.bb-calendar-day {
  text-align: center; font-size: clamp(14px, 2.5vw, 16px); padding: 0; box-sizing: border-box;
  background: transparent; color: var(--bb-accent); border: 1px solid var(--bb-accent);
  aspect-ratio: 1; border-radius: var(--bb-border-radius-sm); cursor: pointer;
  transition: all var(--bb-transition); display: flex; align-items: center; justify-content: center; box-shadow: none;
}
.bb-calendar-day:hover:not(.is-disabled):not(.is-other-month):not(.is-selected) { background: color-mix(in srgb, var(--bb-accent) 70%, var(--bb-surface)); border-color: var(--bb-accent); transform: translateY(-2px); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.bb-calendar-day.is-selected       { background: var(--bb-accent); border-color: var(--bb-accent-hover); color: var(--bb-surface); font-weight: 500; }
.bb-calendar-day.is-selected:hover { border-color: var(--bb-accent); background: color-mix(in srgb, var(--bb-accent) 80%, transparent); transform: translateY(1px); }
.bb-calendar-day.is-today.is-selected { border-width: 2px; }
.bb-calendar-day.is-disabled       { opacity: 0.4; cursor: not-allowed; pointer-events: none; border: none; background: transparent; color: currentColor; }
.bb-calendar-day.is-other-month    { opacity: 0; pointer-events: none; }

.bb-slots-panel    { display: flex; flex-direction: column; gap: var(--bb-spacing-md); }
.bb-slot-group-title { font-size: var(--bb-text-base); margin-bottom: var(--bb-spacing-xs); }
.bb-slot-group-body  { display: flex; flex-wrap: wrap; gap: 8px; }
.bb-slot-placeholder { font-size: var(--bb-text-xs); opacity: 0.6; font-style: italic; padding: var(--bb-spacing-sm); }

.bb-time-slot {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 16px; border: 1px solid var(--bb-border-input);
  border-radius: var(--bb-border-radius-sm); background: transparent;
  font-size: var(--bb-text-sm); font-weight: 500; color: inherit;
  cursor: pointer; transition: all var(--bb-transition); user-select: none; white-space: nowrap;
}
.bb-time-slot:hover       { border-color: var(--bb-accent); background: color-mix(in srgb, var(--bb-accent) 80%, transparent); transform: translateY(1px); }
.bb-time-slot.is-selected { background: var(--bb-accent); border-color: var(--bb-accent-hover); color: var(--bb-surface); font-weight: 500; }
.bb-time-slot.is-selected:hover { background: var(--bb-accent-hover); }
.bb-time-slot.is-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

@media (max-width: 900px) { .bb-datetime-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .bb-calendar { padding: var(--bb-spacing-sm); } }

/* =====================================================
   20) PAYMENT — Stripe
===================================================== */
.bb-payment-field { margin-bottom: var(--bb-spacing-lg); }
.bb-stripe-label  { display: block; font-size: var(--bb-text-sm); font-weight: 500; color: var(--bb-text); margin-bottom: var(--bb-spacing-xs); }

#bb-stripe-card-element {
  display: block !important; min-height: 48px !important; padding: var(--bb-spacing-sm) !important;
  border: 1px solid var(--bb-border-input) !important; border-radius: var(--bb-border-radius-sm) !important;
  background: var(--bb-surface, #fff) !important; transition: border-color var(--bb-transition), box-shadow var(--bb-transition) !important;
  box-sizing: border-box !important;
}
#bb-stripe-card-element:focus-within { border-color: var(--bb-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--bb-accent) 10%, transparent) !important; outline: none !important; }
#bb-stripe-card-element .StripeElement,
#bb-stripe-card-element iframe { width: 100% !important; min-height: 24px !important; }
#bb-stripe-card-element.has-error { border-color: var(--bb-error-border) !important; background: var(--bb-error-bg) !important; }

#bb-stripe-errors {
  display: block; min-height: 0; margin-top: 0; padding: 0;
  font-size: var(--bb-text-sm); color: var(--bb-error-text);
  opacity: 0; max-height: 0; overflow: hidden; transition: all var(--bb-transition);
}
#bb-stripe-errors:not(:empty) { opacity: 1; max-height: 100px; margin-top: var(--bb-spacing-xs); padding: var(--bb-spacing-xs) var(--bb-spacing-sm); background: var(--bb-error-bg); border: 1px solid var(--bb-error-border); border-radius: var(--bb-border-radius-sm); }
#bb-stripe-errors::before { content: '⚠ '; margin-right: 4px; }

#bb-pay-inline {
  margin-left: auto; display: block; margin-top: var(--bb-spacing-md);
  padding: var(--bb-spacing-sm) var(--bb-spacing-md); font-size: var(--bb-text-base);
  background: var(--bb-accent); color: white; border: none; cursor: pointer;
  transition: all var(--bb-transition); user-select: none; -webkit-tap-highlight-color: transparent;
}
#bb-pay-inline:hover:not(:disabled)  { background: var(--bb-accent-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
#bb-pay-inline:active:not(:disabled) { transform: translateY(0); box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
#bb-pay-inline:disabled { opacity: 0.5; cursor: not-allowed; background: var(--bb-border); color: rgba(255,255,255,0.8); }
#bb-pay-inline.is-processing { position: relative; color: transparent; pointer-events: none; }
#bb-pay-inline.is-processing::after { content: ''; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: bb-spin 0.6s linear infinite; }
#bb-pay-inline.is-success { background: var(--bb-success-border); color: var(--bb-success-text); }
#bb-pay-inline.is-success::before { content: '✓ '; margin-right: 4px; }
@keyframes bb-spin { to { transform: rotate(360deg); } }

@media (max-width: 600px) {
  #bb-pay-inline    { font-size: var(--bb-text-sm); padding: var(--bb-spacing-sm); }
  .bb-stripe-label  { font-size: var(--bb-text-xs); }
}

/* =====================================================
   21) FALLBACKS — sin color-mix()
===================================================== */
@supports not (background: color-mix(in srgb, white, black)) {
  .bb-selection-card:hover              { background: rgba(59,130,246,0.02); }
  .bb-selection-card:has(input:checked) { background: rgba(59,130,246,0.05); }
  .bb-suggest-item:hover,
  .bb-suggest-item.is-active            { background: rgba(59,130,246,0.08); }
  .bb-calendar-day                      { background: transparent; }
  .bb-calendar-day:hover:not(.is-disabled):not(.is-other-month):not(.is-selected) { background: rgba(59,130,246,0.1); }
  .bb-calendar-day.is-selected          { background: #3b82f6; color: white; }
  .bb-calendar-day.is-disabled          { background: transparent; }
  .bb-time-slot                         { background: transparent; }
  .bb-time-slot:hover                   { background: rgba(59,130,246,0.1); }
  #bb-stripe-card-element:focus-within  { box-shadow: 0 0 0 3px rgba(59,130,246,0.1) !important; }
  .bb-wizard .bb-ideal-tag              { background: rgba(59,130,246,0.12); border-color: rgba(59,130,246,0.4); color: #3b82f6; }
}

/* =====================================================
   22) PACKAGE CARDS
===================================================== */
.bb-wizard .bb-card-keywords { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.bb-wizard .bb-keyword-chip  {  font-weight: 400; padding: 2px 10px; border-radius: 99px; background: rgba(0,0,0,0.04); border: 1px solid var(--bb-border-input); color: var(--bb-text); opacity: 0.8; }
.bb-wizard .bb-card-meta     { font-size: var(--bb-text-xs); font-weight: 400; color: var(--bb-text); opacity: 0.6; margin-bottom: 4px; }

.bb-wizard .bb-pkg-toggle    { display: flex; align-items: center; gap: 6px; font-weight: 400; color: var(--bb-text); opacity: 0.7; cursor: pointer; user-select: none; padding: 8px 0; border-top: 1px solid var(--bb-border-input); margin-top: 6px; }
.bb-wizard .bb-pkg-toggle:hover { opacity: 1; }
.bb-wizard .bb-toggle-arr    { font-size: 9px; transition: transform 0.2s ease; display: inline-block; }
.bb-wizard .bb-toggle-arr.is-open { transform: rotate(90deg); }
.bb-wizard .bb-pkg-collapsible { overflow: hidden; max-height: 0; transition: max-height 0.25s ease; }
.bb-wizard .bb-pkg-collapsible.is-open { max-height: 400px; }

.bb-wizard .bb-includes-list { list-style: none; padding: 8px 0 4px; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.bb-wizard .bb-includes-list li { font-weight: 400; color: var(--bb-text); opacity: 0.75; display: flex; align-items: center; gap: 6px; }
.bb-wizard .bb-includes-list li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--bb-accent); flex-shrink: 0; opacity: 1; }

.bb-wizard .bb-ideal-section { border-top: 1px solid var(--bb-border-input); padding-top: 10px; margin-top: 8px; }
.bb-wizard .bb-ideal-label   { font-size: var(--bb-text-xs); font-weight: 400; color: var(--bb-text); opacity: 0.5; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.bb-wizard .bb-ideal-tags    { display: flex; flex-wrap: wrap; gap: 6px; }
.bb-wizard .bb-ideal-tag     {  font-weight: 400; padding: 3px 10px; border-radius: 99px; background: color-mix(in srgb, var(--bb-accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--bb-accent) 40%, transparent); color: var(--bb-accent); }

.bb-wizard .bb-qty-label     { font-size: var(--bb-text-xs); font-weight: 500; color: var(--bb-text); margin-bottom: 6px; }
.bb-wizard .bb-notes-list    { list-style: none; padding: 8px 0 4px; margin: 0; }
.bb-wizard .bb-notes-list li { font-size: var(--bb-text-xs); color: var(--bb-text); opacity: 0.75; padding: 3px 0; display: flex; align-items: flex-start; gap: 8px; }
.bb-wizard .bb-notes-list li::before { content: '·'; color: var(--bb-accent); font-weight: 700; flex-shrink: 0; }

.bb-wizard .bb-addon-qty-wrap { margin-top: 10px; }
.bb-wizard .bb-qty-selector   { display: inline-flex; align-items: center; gap: 8px; }
.bb-wizard .bb-qty-btn        { width: 28px; height: 28px; border: 1px solid var(--bb-border-input); border-radius: 6px; background: transparent; font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--bb-transition); }
.bb-wizard .bb-qty-btn:hover  { border-color: var(--bb-accent); background: color-mix(in srgb, var(--bb-accent) 8%, transparent); }
.bb-wizard .bb-qty-display    { min-width: 24px; text-align: center; font-weight: 600; font-size: var(--bb-text-sm); }

/* =====================================================
   23) CLIENT PORTAL
===================================================== */
.bb-client-portal {
  --bb-accent: var(--wp--preset--color--primary, var(--ast-global-color-0, #1D9E75));
  --bb-border: rgba(0,0,0,0.10);
  --bb-border-radius: 12px;
  --bb-border-radius-sm: 10px;
  --bb-transition: 0.15s ease;
  max-width: 800px; margin: 0 auto; padding: 24px 16px; font-family: inherit;
}
.bb-portal-header    { margin-bottom: 24px; }
.bb-portal-header h2 { margin: 0 0 4px; }
.bb-portal-email     { font-size: var(--bb-text-sm); opacity: 0.6; margin: 0; }

.bb-portal-message { padding: 14px 16px; border-radius: var(--bb-border-radius-sm); border: 1px solid rgba(0,0,0,0.1); margin-bottom: 20px; font-size: var(--bb-text-sm); }
.bb-portal-success { background: #f0fdf4; border-color: #bbf7d0; color: #051c0e; }
.bb-portal-error   { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

.bb-portal-form      { max-width: 420px; margin-top: 20px; }
.bb-portal-field     { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.bb-portal-field label { font-size: var(--bb-text-sm); font-weight: 500; }
.bb-portal-input     { padding: 10px 12px; border: 1px solid rgba(0,0,0,0.15); border-radius: var(--bb-border-radius-sm); width: 100%; box-sizing: border-box; }
.bb-portal-input:focus { outline: none; border-color: var(--bb-accent); }

.bb-portal-btn         { display: inline-block; padding: 10px 20px; background: var(--bb-accent); color: #fff; border: none; border-radius: var(--bb-border-radius-sm); font-size: var(--bb-text-sm); font-weight: 500; cursor: pointer; text-decoration: none; transition: all var(--bb-transition); }
.bb-portal-btn:hover   { opacity: 0.9; transform: translateY(-1px); color: #fff; }
.bb-portal-btn-cancel  { background: transparent; color: #991b1b; border: 1px solid #fecaca; }
.bb-portal-btn-cancel:hover  { background: #fef2f2; color: #991b1b; }
.bb-portal-btn-review        { background: transparent; color: var(--bb-accent); border: 1px solid var(--bb-accent); }
.bb-portal-btn-review:hover  { background: color-mix(in srgb, var(--bb-accent) 8%, transparent); color: var(--bb-accent); }

.bb-portal-bookings { display: grid; gap: 16px; }
.bb-portal-card     { border: 1px solid var(--bb-border); border-radius: var(--bb-border-radius); padding: 16px 20px; transition: box-shadow var(--bb-transition); }
.bb-portal-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.07); }
.bb-portal-status-confirmed,
.bb-portal-status-scheduled,
.bb-portal-status-paid  { border-left: 3px solid var(--bb-accent); }
.bb-portal-status-completed { border-left: 3px solid #60a5fa; }
.bb-portal-status-cancelled { opacity: 0.6; }

.bb-portal-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--bb-border); }
.bb-portal-card-id     { font-weight: 600; font-size: var(--bb-text-sm); }
.bb-portal-card-status { font-size: var(--bb-text-xs); opacity: 0.7; }
.bb-portal-card-body   { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.bb-portal-row         { display: flex; gap: 12px; font-size: var(--bb-text-sm); }
.bb-portal-label       { font-weight: 500; min-width: 70px; opacity: 0.6; flex-shrink: 0; }
.bb-portal-value       { flex: 1; }
.bb-portal-service     { font-size: var(--bb-text-xs); opacity: 0.85; }
.bb-portal-card-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding-top: 12px; border-top: 1px solid var(--bb-border); }
.bb-portal-action-form  { margin: 0; }
.bb-portal-review-done  { font-size: var(--bb-text-xs); opacity: 0.7; }

@media (max-width: 600px) {
  .bb-portal-row   { flex-direction: column; gap: 2px; }
  .bb-portal-label { min-width: auto; }
  .bb-wizard .bb-includes-list {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}


/* =====================================================
   24) BOTÓN "ADD ANOTHER VEHICLE" — estilo enlace discreto
   El círculo con el "+" se dibuja con ::before (sin tocar el HTML).
   Clase real del botón: .bb-btn-add-vehicle (además tiene .bb-btn).
   ► IMPORTANTE: quita el "+ " del texto del botón para que no salga
     doble (el "+" ahora lo pone el CSS). Deja solo el texto, ej:
     "Add another vehicle".
===================================================== */
.bb-wizard .bb-btn-add-vehicle {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  width: auto !important;
  margin-top: var(--bb-spacing-sm);
  padding: 8px 4px !important;
  background: transparent !important;
  color: var(--bb-accent) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: inherit;
  font-size: var(--bb-text-base);
  font-weight: 500;
  text-transform: none !important;
  letter-spacing: normal;
  line-height: 1.2;
  cursor: pointer;
  transition: opacity var(--bb-transition);
}

.bb-wizard .bb-btn-add-vehicle:hover {
  opacity: 0.75;
  background: transparent !important;
  color: var(--bb-accent) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Círculo teal con el "+" al inicio */
.bb-wizard .bb-btn-add-vehicle::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--bb-accent);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}

/* Estado deshabilitado (aún no hay dirección válida): se apaga en gris */
.bb-wizard .bb-btn-add-vehicle:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  color: var(--bb-text) !important;
}
.bb-wizard .bb-btn-add-vehicle:disabled::before {
  background: var(--bb-border-input);
}
.bb-wizard .bb-btn-add-vehicle:disabled:hover {
  opacity: 0.4;
}

/* Texto de ayuda bajo el botón ("Select a valid address first.") */
.bb-wizard .bb-add-vehicle-hint {
  font-size: var(--bb-text-xs);
  opacity: 0.6;
  margin: var(--bb-spacing-xs) 0 0;
}