/* FBT Bundles — Frecuentemente Comprados Juntos
 * Layout EVL: desktop side-by-side compacto (productos izq + total/botón der).
 * Mobile: stack vertical. Rojo #FF0D09 a prueba de overrides.
 */

.fbt-bundle {
  margin: 20px 0 20px 25px;
  padding: 16px 0;
  background: #fff;
  border: 0 !important;
  border-radius: 0 !important;
  color: #222;
  max-width: 700px;
}

.fbt-header {
  margin-bottom: 12px;
}
.fbt-title {
  margin: 0 0 4px 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #222;
  border-bottom: 2px solid #FF0D09;
  display: inline-block;
  padding-bottom: 3px;
}
.fbt-subtitle {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #777;
}

/* Desktop: side-by-side compacto (productos izq + total/botón der).
 * Body y items-list comparten el mismo ancho fijo (~640px) para que el
 * borde derecho del precio quede exactamente alineado con el del botón. */
.fbt-body {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  flex-wrap: nowrap;
  width: 640px;
  max-width: 100%;
}

.fbt-products {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
}
.fbt-product {
  flex: 0 0 auto;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fbt-product-link {
  display: block;
  overflow: hidden;
}
.fbt-product-img {
  display: block;
  width: 100px;
  height: 100px;
  object-fit: cover;
  object-position: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  transform: scale(1.12);
  transform-origin: center center;
}
.fbt-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
  font-size: 22px;
}
.fbt-plus {
  font-size: 20px;
  font-weight: 700;
  color: #999;
  flex: 0 0 auto;
}

.fbt-summary {
  flex: 0 0 auto;
  width: 260px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fbt-totals {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 14px;
  flex-wrap: wrap;
}
.fbt-total-label {
  font-weight: 600;
  color: #222;
}
.fbt-total-strike {
  color: #999;
  text-decoration: line-through;
  font-weight: 500;
  font-size: 13px;
}
.fbt-total-final {
  color: #FF0D09;
  font-weight: 700;
  font-size: 17px;
}

/* Botón AGREGAR SELECCIONADOS — copia exacta del rojo del nativo (#FF0D09).
 * Hover/active: negro (#2e2323) igual que el btn-primary del tema. */
.fbt-add-btn {
  background: #FF0D09 !important;
  background-color: #FF0D09 !important;
  color: #fff !important;
  border: 1px solid #FF0D09 !important;
  padding: 8px 14px;
  font-size: 16px;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
  line-height: 1.4;
  position: relative;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.fbt-add-btn:hover,
.fbt-add-btn:focus,
.fbt-add-btn:active,
.fbt-add-btn:not(:disabled):not(.disabled):active {
  background: #2e2323 !important;
  background-color: #2e2323 !important;
  border-color: #2e2323 !important;
  color: #fff !important;
}
.fbt-add-btn:disabled {
  background: #999 !important;
  background-color: #999 !important;
  border-color: #999 !important;
  cursor: not-allowed;
}

/* Loading state — durante el AJAX add-to-cart.
 * Mobile usa esta variante: botón transparente + spinner girando. */
.fbt-add-btn.fbt-loading {
  color: transparent !important;
  pointer-events: none;
}
.fbt-add-btn.fbt-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  margin-left: -11px;
  border: 3px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: fbt-spin 0.8s linear infinite;
}
@keyframes fbt-spin {
  to { transform: rotate(360deg); }
}

.fbt-items-list {
  list-style: none;
  margin: 14px 0 0 0;
  padding: 0;
  border-top: 0 !important;
  border-bottom: 0 !important;
  width: 640px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.fbt-item-row {
  padding: 0;
  border: 0 !important;
  border-bottom: 0 !important;
}
.fbt-item-row:last-child { border-bottom: 0 !important; }
.fbt-item-check {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  position: static !important;
  height: auto !important;
  background: transparent !important;
  box-shadow: none !important;
}
.fbt-item-checkbox {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  accent-color: #2e7d32;
}
.fbt-item-label {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 14px;
  color: #222;
  min-width: 0;
}
.fbt-item-label strong {
  font-size: 11px;
  text-transform: uppercase;
  color: #777;
  letter-spacing: 0.4px;
  flex: 0 0 auto;
}
.fbt-item-name {
  flex: 0 1 auto;
}
.fbt-item-name {
  color: #222;
  font-weight: 500;
  text-decoration: none;
}
.fbt-item-name:hover { color: #FF0D09; }
.fbt-item-variant {
  margin: 0;
  padding: 4px 8px !important;
  font-size: 12px !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: #222 !important;
  width: 130px !important;
  min-width: 130px !important;
  max-width: 130px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  cursor: pointer;
  flex: 0 0 auto;
}
.fbt-item-variant:focus,
.fbt-item-variant:focus-visible,
.fbt-item-variant:active {
  outline: none;
  border-color: #888;
  border-width: 2px;
  padding: 3px 5px;
  box-shadow: none;
}
.fbt-item-price {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
  font-size: 14px;
}
.fbt-item-price-strike {
  color: #999;
  text-decoration: line-through;
  font-size: 12px;
}
.fbt-item-price-current {
  color: #222;
  font-weight: 600;
}

/* === Mobile (< 768px) ===
 * Stack vertical. Botón loading = transparente + spinner.
 */
@media (max-width: 768px) {
  .fbt-bundle {
    margin: 18px 0;
    padding: 14px 18px;
    max-width: none;
    border: 1px solid #eee !important;
    border-radius: 4px !important;
  }
  .fbt-items-list {
    border-top: 1px solid #eee !important;
  }
  .fbt-item-row {
    border-bottom: 1px solid #eee !important;
  }
  .fbt-item-row:last-child { border-bottom: 0 !important; }
  .fbt-title { font-size: 16px; padding-bottom: 4px; }
  .fbt-subtitle { font-size: 11px; }
  .fbt-header { margin-bottom: 12px; }

  .fbt-body {
    flex-direction: column;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
  }
  .fbt-items-list {
    width: 100%;
  }
  .fbt-products {
    gap: 4px;
    justify-content: center;
    width: 100%;
    flex-wrap: nowrap;
    padding: 0 4px;
    box-sizing: border-box;
  }
  .fbt-product {
    flex: 1 1 0;
    min-width: 0;
    max-width: 110px;
  }
  .fbt-product-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    padding: 0;
    object-fit: cover;
    transform: scale(1.12);
  }
  .fbt-plus {
    font-size: 14px;
    flex: 0 0 auto;
  }

  .fbt-summary {
    width: 100%;
    max-width: 520px;
    align-items: center;
  }
  .fbt-totals {
    font-size: 14px;
    justify-content: center;
  }
  .fbt-total-final { font-size: 17px; }

  /* Mobile: el botón mantiene el rojo igual que el nativo
   * + al click se vuelve transparente con spinner (estado .fbt-loading) */
  .fbt-add-btn {
    background: #FF0D09 !important;
    background-color: #FF0D09 !important;
    color: #fff !important;
    border: 1px solid #FF0D09 !important;
    padding: 12px 16px;
    font-size: 16px;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    min-height: 46px;
  }
  .fbt-add-btn.fbt-loading {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    color: transparent !important;
  }
  .fbt-add-btn.fbt-loading::after {
    border-color: rgba(255, 13, 9, 0.25);
    border-top-color: #FF0D09;
    width: 26px;
    height: 26px;
    margin-top: -13px;
    margin-left: -13px;
  }

  .fbt-items-list { margin-top: 12px; }
  .fbt-item-row { padding: 8px 0; }
  .fbt-item-check { gap: 10px; }
  /* Mobile: nombre + variante apilados (dropdown debajo del nombre) */
  .fbt-item-label {
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 2px;
    font-size: 13px;
  }
  .fbt-item-label strong { font-size: 10px; }
  .fbt-item-variant {
    margin-top: 4px !important;
    width: 170px !important;
    min-width: 170px !important;
    max-width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 5px 8px !important;
    font-size: 12px !important;
  }
  .fbt-item-price { font-size: 13px; }
  .fbt-item-price-strike { font-size: 11px; }
}

/* Mobile muy chico (< 380px) — productos siguen en una sola fila, auto-shrink */
@media (max-width: 380px) {
  .fbt-product {
    max-width: 90px;
  }
  .fbt-products { gap: 2px; padding: 0 2px; }
  .fbt-plus { font-size: 12px; }
}