/* =============================== */
/*  ESTILOS GENERALES DEL BOTÓN DEL CARRITO  */
/* =============================== */




/* =============================== */
/*  ESTILOS DEL CONTADOR DEL CARRITO  */
/* =============================== */
.cart-count {
  position: absolute; /* Posicionado de forma absoluta respecto al contenedor padre */
  margin-top:-5px;
  top: -5px; /* Ubicado 5px por encima del contenedor */
  right: -5px; /* Ubicado 5px hacia la izquierda del borde derecho */
  background-color: red; /* Fondo rojo */
  color: white; /* Texto blanco */
  border-radius: 50%; /* Forma circular */
  padding: 5px 10px; /* Relleno interno */
  font-size: 16px; /* Tamaño de fuente */
  font-weight: bold; /* Texto en negrita */
  display: none; /* Se oculta inicialmente */
}

/* =============================== */
/*  ESTILOS DEL MENÚ LATERAL DEL CARRITO  */
/* =============================== */
.cart-sidebar {
  position: fixed;           /* Fijo en la pantalla */
  top: 0;                    /* Inicia en la parte superior */
  right: 0;                  /* Se ubica a la derecha */
  width: 350px;              /* Ancho del menú lateral */
  background-color: #1a1a1a; /* Fondo oscuro */
  
  transform: translateX(100%);  /* Se posiciona fuera de la vista inicialmente */
  transition: transform 0.3s ease; /* Transición suave para mover el sidebar */
  z-index: 1310;             /* Se sitúa por encima de otros elementos */
  display: flex;             /* Usa Flexbox */
  flex-direction: column;    /* Organiza los elementos en columna */
  height: auto;              /* Altura automática */
  min-height: 100px;         /* Altura mínima */
  max-height: 90vh;          /* Altura máxima del 90% de la ventana */
  overflow: hidden;          /* Oculta contenido que se desborda */
  
}
/* Al abrir, añade el resplandor dorado */
.cart-sidebar.open {
  transform: translateX(0);
  box-shadow:
    -4px 0 12px rgba(0, 0, 0, 0.5),        /* sombra oscura lateral */
    0 0 15px rgba(255, 215, 0, 0.8),       /* glow dorado intenso */
    0 0 30px rgba(255, 223, 0, 0.4);       /* glow dorado suave */;
}

.cart-sidebar.open {
  transform: translateX(0); /* Muestra el menú lateral */
  
}

.cart-sidebar-header {
  position: relative; /* Para posicionar el botón de cierre correctamente */
  display: flex; /* Usa Flexbox para organizar el contenido */
  justify-content: space-between; /* Distribuye el espacio entre elementos */
  align-items: center; /* Centra verticalmente */
  padding: 1em; /* Relleno interno */
  border-bottom: 1px solid #ccc; /* Línea divisoria inferior */
  padding-bottom: 0em;  /* antes: 1em */
}

.cart-sidebar-header h2 {
  font-size: 2.8rem;                             /* Tamaño grande */
  background: linear-gradient(to top, red, orange, yellow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  /* Trazado rojo de 0.5px alrededor de cada carácter */
  -webkit-text-stroke-width: 0.5px;
  -webkit-text-stroke-color: red;
}



.cart-sidebar-content {
  flex-grow: 1; /* Ocupa el espacio restante */
  padding: 1em; /* Relleno interno */
  overflow-y: auto; /* Permite scroll vertical si hay mucho contenido */
  max-height: 60vh; /* Altura máxima del 60% de la ventana */
}

.cart-sidebar-footer {
  padding: 1em; /* Relleno interno */
  border-top: 1px solid #ccc; /* Línea divisoria superior */
  display: flex; /* Usa Flexbox */
  flex-direction: column; /* Organiza en columna */
  gap: 0.5em; /* Espacio entre botones */
}

.cart-sidebar-footer a {
  display: block; /* Se muestra como bloque */
  text-align: center; /* Texto centrado */
  padding: 0.75em; /* Relleno interno */
  text-decoration: none; /* Sin subrayado */
  border-radius: 4px; /* Bordes redondeados */
  font-weight: bold; /* Negrita */
}

/* Botón "Finalizar compra" en verde */
.cart-sidebar-footer .btn-pay-now {
  background-color: #28a745; /* Fondo verde */
  color: #fff; /* Texto blanco */
}

/* =============================== */
/*  BOTÓN DE CIERRE DEL CARRITO (solo la "X")  */
/* =============================== */


/* Fuerza el color del texto a negro en el menú lateral */
.cart-sidebar,
.cart-sidebar * {
  color: #fff !important; /* texto blanco */
}
.close-cart {
  position: absolute; /* Posicionado de forma absoluta dentro del sidebar */
  top: 10px; /* Ubicado a 10px desde el borde superior */
  right: 20px; /* Ubicado a 10px desde el borde derecho */
  font-size: 38px; /* Tamaño grande para la "X" */
  background: transparent; /* Sin fondo */
  color: #e67e22 !important; /* Color naranja */
  cursor: pointer; /* Cursor de puntero */
  padding: 0; /* Sin padding */
  border: none; /* Sin borde */
  transition: color 0.3s ease, transform 0.3s ease; /* Transiciones suaves */
  font-weight: 500;
}

.close-cart:hover {
  color: #e67e22; /* Color al hacer hover */
  transform: scale(1.1); /* Incrementa ligeramente el tamaño */
}

/* =============================== */
/*  BARRA DE ENVÍO GRATIS PRO PRO  */
/* =============================== */
.free-shipping-progress {
  margin: 0.5em 0;
  text-align: center;
}

.progress-bar {
  width: 90%;
  height: 18px;
  background-color: #423e12;        /* fondo oscuro */
  border: 2px solid #ff8800;        /* borde amarillo puro */
  border-radius: 20px;              /* mismo radio */
  margin: 1em auto 0.5em;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.4); /* sombra interior más profunda */
  position: relative;
}


.progress-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(
    135deg,
    #ff9933 25%,
    #ff6f00 25%,
    #ff9933 50%,
    #ff6f00 50%,
    #ff9933 75%,
    #ff6f00 75%,
    #ff9933
  );
  background-size: 40px 40px;
  animation: moveStripes 1s linear infinite;
  border-radius: 20px;
  transition: width 0.4s ease-in-out;
}
#cartMessage {
  text-align: center;      /* Centrado */
  font-size: 1.5rem;       /* Más grande */
  font-weight: bold;       /* Negrita */
  color: #ff8800 !important;          /* Amarillo Dracollectors */
  margin: 1rem 0;          /* Espacio arriba/abajo, opcional */
}

.progress-bar-text {
  text-align: center;
  font-size: 16px;
  
  margin-top: 8px;
  font-weight: bold;
  color: #ffcc00 !important; /* amarillo Dracollectors */
}

@keyframes moveStripes {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 40px 0;
  }
}

/* =============================== */
/*  ESTILOS DE CADA ELEMENTO DEL CARRITO  */
/* =============================== */
.cart-sidebar ul {
  list-style: none; /* Elimina puntos de lista */
  margin: 0;
  padding: 0;
}

.cart-sidebar ul li {
  display: flex; /* Organiza elementos en fila */
  align-items: flex-start; /* Alinea al inicio verticalmente */
  padding: 8px 12px;
  border-bottom: 1px solid #eee;
  gap: 8px; /* Espacio entre imagen y detalles */
}

.item-image {
  flex-shrink: 0;
  width: 40px; /* Ancho fijo */
  margin: 0;
}

.item-details {
  flex: 1; /* Toma el espacio restante */
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.item-title {
  display: grid; /* Usa grid para separar columnas */
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-bottom: 4px;
  width: 100%;
}

.item-name {
  white-space: normal;
  display: block;
}

.item-price {
  text-align: right;
  white-space: nowrap;
}

.item-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* =============================== */
/*  ESTILOS PARA EL WIDGET DE CANTIDAD  */
/* =============================== */
.quantity-controls {
  display: inline-flex;
  align-items: center;
  background-color: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
}

.quantity-controls button {
  background-color: transparent;
  border: none;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 16px;
  color: #333;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.quantity-controls button:hover {
  background-color: #e0e0e0;
}

.quantity-controls input.item-quantity {
  width: 40px;
  text-align: center;
  font-weight: bold;
  color: #333;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  height: 28px;
}

/* Botón del cubo de basura */
.remove-item {
  background: transparent;
  border: none;
  cursor: pointer;
  align-self: flex-end;
}

.remove-item i {
  font-size: 16px;
}

/* =============================== */
/*  ESTILOS PARA LOS INPUTS  */
/* =============================== */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

/* =============================== */
/*  ESTILOS PARA LOS BOTONES DE ESTADO DEL CARRITO  */
/* =============================== */
#cartEmptyState {
  display: block;
}

#cartFilledState {
  display: none;
}

.btn-explore,
.btn-view-cart,
.btn-checkout {
  display: inline-block;
  padding: 10px 20px;
  margin: 5px;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s ease, transform 0.3s ease, border 0.3s ease, color 0.3s ease;
}

.btn-explore {
  background-color: #007bff;
  border: none;
  color: #fff;
}
.btn-explore:hover {
  background-color: #fff;
  border: 1px solid #007bff;
  color: #007bff !important;
  transform: scale(1.05);
}

.btn-view-cart {
  background-color: #007bff;
  border: none;
  color: #fff;
}
.btn-view-cart:hover {
  background-color: #fff;
  border: 1px solid #007bff;
  color: #007bff !important;
  transform: scale(1.05);
}

.btn-checkout {
  background-color: #28a745;
  border: none;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  padding: 10px 20px;
  text-align: center;
  display: inline-block;
  margin: 5px;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s ease, transform 0.3s ease, border 0.3s ease, color 0.3s ease;
}




.btn-checkout:hover {
  background-color: #fff;
  border: 1px solid #28a745;
  color: #28a745 !important;
  transform: scale(1.05);
}


.cart-sidebar-footer .btn-view-cart,
.cart-sidebar-footer .btn-checkout {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.2;
}


.cart-sidebar-footer .btn-view-cart {
  margin-bottom: 3px;
}
 
.cart-sidebar-footer .btn-checkout {
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 10;
}


/* =============================== */
/*  ESTILOS DEL OVERLAY DEL CARRITO  */
/* =============================== */
#cartOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1306;
  display: none;
}

/* =============================== */
/*  ESTILOS DEL MODAL DE ALERTA PERSONALIZADO  */
/* =============================== */

/* Overlay del modal: cubre toda la pantalla, oscurece el fondo y centra el modal */
.custom-alert-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* Caja del modal: contenedor principal del alerta */
.custom-alert-box {
  background: url('assets/images/imagenfondo1.png') no-repeat center center;
  background-size: cover;
  width: 80%;
  max-width: 300px;
  height: 210px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  /* border: 6px solid #89bef7; */
}

/* Encabezado del modal: contiene el logo y el título */
.custom-alert-header {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Título del encabezado: elimina márgenes para evitar espacios extra */
.custom-alert-header h2 {
  margin: 0;
  padding: 0;
  font-size: 18px;
}

/* Logo: ocupa el 95% del ancho, centrado; se reduce el margen superior */
.custom-alert-logo {
  width: 100%; /* Puedes ajustar a 100% para que ocupe todo el contenedor */
  height: auto;
  display: block;
  margin: 0% auto 0; /* Márgen superior reducido para acercarlo al contenido siguiente */
}

/* Contenedor del mensaje: se ajusta al contenido sin altura fija */
.custom-alert-message {
  flex: 0 0 auto;
  margin: 0;
  padding: 5px 10px;
  text-align: center;
  font-size: 16px;
  color: #000000;
  font-weight: bold;
  text-shadow: 
    -0.5px -0.5px 0 #ffffff,  
     0.5px -0.5px 0 #ffffff,  
    -0.5px  0.5px 0 #ffffff,  
     0.5px  0.5px 0 #ffffff;
}

/* Botón de cierre: botón normal centrado sin ocupar todo el ancho */
.custom-alert-close {
  margin: 10px auto;
  padding: 10px 20px;
  background: #007bff;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  transition: background 0.3s ease;
  display: block;
  max-width: 80%;
  text-align: center;
}

.custom-alert-close:hover {
  background: #0056b3;
}

.cart-subtotal {
  font-weight: bold;
  font-size: 25px;
  text-align: right;
  margin: 0.5em 1em 0 1em;
}

.subtotal-label {
  color: black !important ;
}

.subtotal-amount {
  color: #ff6004 !important ; /* Naranja fuerte */
}


/* =============================== */
/* MEDIA QUERIES PARA PANTALLAS PEQUEÑAS DEL CARRITO */
/* =============================== */
@media screen and (max-width: 680px) {
  /* Ajustes para el contenedor principal del carrito */
  .cart-sidebar {
    width: 90%;              /* El sidebar ocupará el 90% del ancho de la pantalla */
    max-width: none;         /* Se elimina la restricción de ancho máximo */
  }
  /* Ajustes en el encabezado del sidebar */
  .cart-sidebar-header h2 {
    font-size: 30px;         /* Se reduce el tamaño de fuente del título para pantallas pequeñas */
  }
  /* Ajustes en el contenido del sidebar */
  .cart-sidebar-content {
    padding: 0.5em;          /* Disminuye el padding interno */
    max-height: 50vh;        /* Limita la altura a la mitad de la ventana para evitar overflow */
    padding: 0.25em 1em 1em; /* top 0.25em, right/left 1em, bottom 1em */
    
  }
  /* Ajustes en el pie del sidebar */
  .cart-sidebar-footer {
    padding: 0.5em;          /* Reduce el padding en el footer */
  }
  /* Ajustes en los botones del footer del sidebar */
  .btn-explore,
  .btn-view-cart,
  .btn-checkout {
    padding: 8px 16px;       /* Reduce el padding de los botones */
    font-size: 100px;         /* Disminuye el tamaño de fuente de los botones */
  }
  
  /* Ajustes para cada producto listado en el carrito */
  .cart-sidebar ul li {
    padding: 6px 10px;       /* Reduce el padding interno de cada item */
    gap: 6px;                /* Disminuye el espacio entre la imagen y los detalles */
  }
  /* Ajuste en la imagen del producto */
  .item-image {
    width: 30px;             /* Reduce el ancho de la imagen para pantallas pequeñas */
  }
  /* Ajustes en el contenedor de nombre y precio */
  .item-title {
    grid-template-columns: 1fr auto; /* Se mantiene la estructura */
    gap: 5px;                /* Reduce el espacio entre el nombre y el precio */
    font-size: 14px;         /* Disminuye el tamaño de fuente general en esta sección */
  }
  /* Ajustes para el nombre y el precio */
  .item-name,
  .item-price,
  .item-controls {
    font-size: 14px;         /* Se reduce el tamaño de fuente para que se ajuste al espacio */
  }
}

/* Media query adicional para pantallas muy pequeñas (por ejemplo, 400px o menos) */
@media screen and (max-width: 400px) {
  .cart-sidebar {
    width: 90%;
    max-width: none;
  }
  .cart-sidebar-header h2 {
    font-size: 42px;         /* Reduce aún más el tamaño del título */
  }
  .cart-sidebar-content {
    padding: 0.4em;          /* Disminuye ligeramente el padding */
    max-height: 45vh;        /* Reduce la altura máxima para adaptarse a la pantalla */
  }
  .cart-sidebar-footer {
    padding: 0.4em;
  }
  .btn-explore,
  .btn-view-cart,
  .btn-checkout {
    padding: 6px 12px;       /* Reduce el padding de los botones */
    font-size: 13px;         /* Disminuye el tamaño de fuente de los botones */
  }
  .cart-sidebar ul li {
    padding: 4px 8px;        /* Reduce el padding en cada producto */
    gap: 4px;                /* Reduce el espacio entre los elementos */
  }
  .item-image {
    width: 50px;             /* Ajusta el ancho de la imagen del producto */
  }
  .item-title {
    gap: 6px;                /* Disminuye el espacio entre el nombre y el precio */
    font-size: 13px;         /* Ajusta la fuente en el contenedor del título */
  }
  .item-name,
  .item-price,
  .item-controls {
    font-size: 15px;         /* Ajusta el tamaño de fuente para los detalles del producto */
  }
}


.cart-item-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
  padding: 0.5rem 0;
}
.cart-item-link:hover .item-image {
  transform: scale(1.05);
}
.item-info {
  display: flex;
  flex-direction: column;
}


/* Header del carrito */
.cart-sidebar-header {
  border-bottom: 1px solid #ffff00; /* antes: #ccc */
}

/* Footer del carrito */
.cart-sidebar-footer {
  border-top: 1px solid #ffff00; /* antes: #ccc */
}

/* Separador entre ítems del carrito */
.cart-sidebar ul li {
  border-bottom: 1px solid #ffff00; /* antes: #eee */
}

/* Header de “Mi cuenta” */
.account-sidebar-header {
  border-bottom: 1px solid #ffff00; /* antes: rgba(255,255,255,0.6) */
}

/* Footer de “Mi cuenta” */
.account-sidebar-footer {
  border-top: 1px solid #ffff00; /* antes: rgba(255,255,255,0.6) */
}

/* Separador entre opciones de menú */
.account-menu li {
  border-bottom: 1px solid #ffff00; /* antes: rgba(255,217,0,0.5) */
}

.btn-explore {
  display: inline-block;               /* conserva el display */
  
  margin: 5px;                         /* conserva el margin */
  text-decoration: none;               /* sin subrayado */
  border: 3px solid #ffcc00;           /* borde amarillo puro de 3px */
  border-radius: 30px !important;                  /* esquinas redondeadas */
  background: transparent;             /* fondo transparente */
  color: #ff8800 !important;
  font-size: 16px;/* texto amarillo */
  transition: color 0.3s ease,
              transform 0.1s ease,
              border-color 0.3s ease;
              
}

.btn-explore:hover {
  color: #ffcc00 !important;                      /* texto naranja Dracollectors */
  transform: scale(1.05);              /* ligera ampliación al pasar el cursor */
  border: 3px solid #ff8800 !important;
  background: transparent; 
}

.btn-explore:active {
  transform: scale(0.95);              /* sensación de “clicaje” al presionar */
}
/* Esto debe ir **después** de la regla .cart-sidebar-footer a */
#cartEmptyState .btn-explore {
  display: inline-block;  /* que solo ocupe lo que necesite */
  width: auto;            /* anula cualquier width:100% heredado */
  padding: 10px 14px;      /* ajusta aquí el padding horizontal a tu gusto */
  margin: 0.5rem auto 0.5rem;    /* 1rem arriba, auto izquierda/derecha, 0 abajo */
}

#cartEmptyState {
  text-align: center;
}


.quantity-controls {
  display: inline-flex;
  align-items: center;
  border: 2px solid #ffcc00;    /* borde amarillo Dracollectors */
  border-radius: 6px;           /* esquinas suaves */
  overflow: hidden;             /* para que no sobresalga nada */
  background-color: #423e12;    /* fondo amarillo oscuro */
}

/* Botones “+” y “–” */
.quantity-controls button {
  background: transparent;      
  border: none;
  width: 28px;
  height: 28px;
  font-size: 14px !important;
  color: #ff6004 !important;               /* naranja Dracollectors */
  cursor: pointer;
  transition: transform 0.1s ease;
}
.quantity-controls button:hover {
  transform: scale(1.1);
}
.quantity-controls button:active {
  transform: scale(0.9);
}

/* Input de cantidad */
.quantity-controls input.item-quantity {
  width: 40px;
  text-align: center;
  font-weight: bold;
  color: #ff6004;               /* naranja Dracollectors */
  background: transparent;      /* deja ver el fondo amarillo */
  border: none;                 /* sin borde extra */
  outline: none;
  border: 2px solid #fd9902;    /* borde naranja alrededor del número */
}

.cart-sidebar-content .item-name {
  font-size: 1rem;
  font-weight: bold;
  color: #ffff00 !important;
}
.cart-sidebar ul li {
  padding-bottom: 12px; /* antes eran 8px */
}
.cart-sidebar-content .item-controls {
  margin-top: 5px; /* separa 8px de lo que esté encima */
}
/* Aumenta la separación entre imagen y contenido */
.cart-sidebar ul li {
  gap: 0.5rem;              /* antes 8px, ahora 16px */
}

/* Opcional: si quieres mover todo el contenido un pelín más a la derecha */
.cart-sidebar-content .item-details {
  padding-left: 0.5rem;   /* añade 8px extra sólo al bloque de detalles */
}

/* Para todo el sidebar */
.cart-sidebar {
  font-family: "TuFuenteDraco", sans-serif;
}

/* O solo para los nombres de producto */
.cart-sidebar-content .item-name {
  font-family: "TuFuenteDraco", sans-serif;
}

/* Precio destacado en carrito */
.cart-sidebar-content .item-price {
  font-size: 1.1rem;       /* un pelín más grande */
  font-weight: bold;        /* negrita */
  color: #fd9902 !important;           /* naranja Dracollectors */
  white-space: nowrap;      /* evita que se parta en varias líneas */
}
/* Icono de eliminar (cubo de basura) destacado */
.remove-item i {
  font-size: 1.4rem;               /* un poco más grande */
  color: #ffcc00 !important;       /* amarillo Dracollectors */
  transition: transform 0.15s ease;
}

/* Efecto al pasar el ratón */
.remove-item:hover i {
  transform: scale(1.2);
}
/* Label “Subtotal” en naranja Dracollectors */
.subtotal-label {
  color: #fd9902 !important;
}

/* Importe de subtotal en amarillo puro */
.subtotal-amount {
  color: #ffff00 !important;
}
/* ———————————————————————— */
/* Botones “Ver carrito” y “Finalizar compra” centrados al 80% */
/* ———————————————————————— */
.cart-sidebar-footer .btn-view-cart,
.cart-sidebar-footer .btn-checkout {
  display: block !important;        /* permite que margin auto funcione */
  width: 80% !important;            /* tu ancho deseado */
  margin: 0.5rem auto !important;   /* centra horizontalmente */
  font-size: 18px;
  padding: 0.3rem;
  border-radius: 40px;
  text-align: center;
  transition: all 0.3s ease;
}

/* — Ver carrito — */
.cart-sidebar-footer .btn-view-cart {
  background-color: #000000; /* fondo negro puro */

  border: 3px solid #FFD700;
  color: #FFD700 !important;
}
.cart-sidebar-footer .btn-view-cart:hover {
  
  color: #FFD700 !important;
  border-color: #ff8800 !important;
  box-shadow:
    0 0 8px rgba(255,215,0,0.7),
    0 0 16px rgba(255,140,0,0.5);
}

/* — Finalizar compra — */
.cart-sidebar-footer .btn-checkout {
  background-color: #000000; /* fondo negro puro */

  border: 3px solid #ff8800;
  color: #ff8800 !important;
}
.cart-sidebar-footer .btn-checkout:hover {
 
  color: #ff8800 !important;
  border-color: #FFD700 !important;
  box-shadow:
    0 0 8px rgba(255,165,0,0.7),
    0 0 16px rgba(255,69,0,0.5);
}


/* Aumentar ancho del sidebar del carrito solo en escritorio */
@media (min-width: 769px) {
  .cart-sidebar {
    width: 400px;            /* nuevo ancho */
    right: -400px;           /* offset igual al ancho */
  }
  .cart-sidebar.open {
    right: 0;                /* al abrir vuelve a 0 */
  }
}

.fixed-bg {
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}
/* Al principio de css_tcg_pokemon.css */
body {
  font-family: 'Roboto', sans-serif;
}
/* Sidebar: "Pago seguro:" + logos en una línea, sin recuadro */
#cartSidebar .mini-payments-inline{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  margin:.6rem 0 .2rem;
}

#cartSidebar .mini-payments-inline .label{
  color:#FFD700 !important;           /* naranja vivo marca */
  font-weight:600;
  letter-spacing:.2px;
  
}

#cartSidebar .mini-payments-inline img{
  height:26px;
  width:auto;
  display:block;
  opacity:.95;
  transition:opacity .2s;
}
#cartSidebar .mini-payments-inline img:hover{ opacity:1; }

@media (max-width: 768px){
    #cartSidebar .mini-payments-inline .label{
        font-size: 13px;
    }
}

@media (max-width: 768px){
  #cartSidebar .mini-payments-inline{ gap:.5rem; }
  #cartSidebar .mini-payments-inline img{ height:20px; }
  
}

/* (opcional) si dejaste las reglas antiguas, neutralízalas */
#cartSidebar .mini-payments,
#cartSidebar .mini-payments-note{ display:none !important; }

.cart-payments-inline img[alt="Bizum"] {
  margin-top: 0.6rem !important;
  vertical-align: middle;
}
.checkout-payments-inline  img[alt="Bizum"] {
  margin-top: 0.6rem !important;
  vertical-align: middle;
}

.shipping-conditions-note {
  margin-top: 4px;
  font-size: 0.9rem;
  color: #FF8A3C !important;
}

.shipping-conditions-note a {
  color: #f5d76e !important;
  text-decoration: underline;
}

.shipping-conditions-note a:hover {
  text-decoration: none;
}