/*
.login-card {
  width: 100%;
  max-width: 400px;
  padding: 30px;
  border-radius: 15px;
  background-color: white;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  
}

a {
  text-decoration: none;
  color: #2575fc;
}

a:hover {
  text-decoration: underline;
}
*/

/* --- Tarjeta de Login --- */
.login-card {
  width: 100%;
  max-width: 400px;
  padding: 32px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  font-family: "Segoe UI", Tahoma, sans-serif;
}

/* Efecto hover (sutil y elegante) */
.login-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
}

/* ---- Enlaces ---- */
a {
  text-decoration: none;
  color: #2575fc;
  font-weight: 500;
}

a:hover {
  text-decoration: underline;
  color: #1a5bd8;
}

/* --- Inputs dentro del login (por si los usas) --- */
.login-card input {
  width: 100%;
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 10px;
  border: 1px solid #cccccc;
  transition: border 0.2s ease, box-shadow 0.2s ease;
}

.login-card input:focus {
  border-color: #2575fc;
  box-shadow: 0 0 4px rgba(37, 117, 252, 0.6);
  outline: none;
}

/* --- Botón general --- */
.login-card button {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: #2575fc;
  color: white;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s ease;
}

.login-card button:hover {
  background: #1a5bd8;
}

/* ... (Tus estilos existentes) ... */

/* Para hacer el resumen del carrito "sticky" */
.sticky-top {
    position: -webkit-sticky; /* Para compatibilidad con Safari */
    position: sticky;
    top: 80px; /* Ajusta este valor si tu navbar cambia de altura */
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
}

/* Estilos para el resumen del pedido en cart.html */
#cart-subtotal, #shipping-cost, #discount-amount, #cart-total {
    font-size: 1.1em; /* Un poco más grande para los valores */
}
#cart-total {
    font-size: 1.4em; /* El total aún más grande y resaltado */
    color: var(--bs-primary); /* Usar el color primario de Bootstrap para el total */
}

/* Ajustes para el botón de eliminar individualmente */
.remove-from-cart {
    font-size: 0.9em;
}

/* --- OFFCANVAS DE LOGIN (ajustes adicionales para el oso) --- */

.bear-avatar {
    margin-top: 1rem; /* Espacio superior para el oso */
    margin-bottom: 2rem; /* Espacio inferior entre el oso y el formulario */
    position: relative;
    z-index: 1; /* Asegura que el oso esté por encima de cualquier otro elemento que pueda solaparse */
}

/* Puedes añadir más estilos si quieres un círculo alrededor del oso, etc. */
/* Por ejemplo: */
.bear-avatar img {
    border-radius: 50%; /* Si quieres que la imagen sea un círculo */
    border: 3px solid #0dcaf0; /* Un borde sutil */
    box-shadow: 0 0 15px rgba(13, 202, 240, 0.4); /* Sombra que haga juego con el botón */
}