/* ==========================================================
   CART.CSS — Sistema de Pedidos / Carrito Flotante
   ----------------------------------------------------------
   Estilos para:
   1. Botones "Agregar al pedido" en tarjetas
   2. Botón flotante del carrito (FAB)
   3. Panel lateral del carrito
   4. Formulario de datos del cliente
   5. Modal de selección de número WhatsApp
   6. Animaciones del carrito
   ========================================================== */

/* ========================
   1. BOTONES AGREGAR AL PEDIDO
   ======================== */

/* Ajuste: el texto del tamaño toma el espacio disponible */
.drink-card__size-item .drink-card__size {
  flex: 1;
}

/* Contenedor de botones +/− en la fila de tamaño */
.card-qty-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: var(--space-sm);
}

/* Botón pequeño circular para variantes de tamaño (junto al precio) */
.btn-add-size,
.btn-remove-size {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    background-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
  flex-shrink: 0;
  margin-left: 0;
}

.btn-add-size {
  background-color: #4CAF50;
}

.btn-remove-size {
  background-color: #E10600;
}

.btn-add-size:hover {
  background-color: #388E3C;
  transform: scale(1.15);
  box-shadow: 0 2px 10px rgba(76, 175, 80, 0.45);
}

.btn-remove-size:hover {
  background-color: #A00000;
  transform: scale(1.15);
  box-shadow: 0 2px 10px rgba(225, 6, 0, 0.45);
}

.btn-add-size:active,
.btn-remove-size:active {
  transform: scale(0.92);
}

.btn-add-size .material-symbols-outlined,
.btn-remove-size .material-symbols-outlined {
  font-size: 18px;
}

/* Botón completo para tarjetas con precio único */
.btn-add-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  margin-top: var(--space-sm);
  border: none;
  border-radius: var(--radius-pill);
  background-color: var(--clr-accent);
  color: #fff;
  font-family: var(--ff-heading);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    background-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.btn-add-cart:hover {
  background-color: var(--clr-accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(198, 134, 66, 0.45);
}

.btn-add-cart:active {
  transform: scale(0.97);
}

.btn-add-cart .material-symbols-outlined {
  font-size: 18px;
}

/* Animación de destello VERDE al agregar producto */
.btn-add-size.added,
.btn-add-cart.added {
  animation: btn-flash-green 1.5s ease forwards !important;
  transition: none !important;
}

/* Animación de destello ROJO al quitar producto */
.btn-remove-size.removed {
  animation: btn-flash-red 1.5s ease forwards !important;
  transition: none !important;
}

@keyframes btn-flash-green {
  0% {
    background-color: #4CAF50;
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
    transform: scale(1);
  }
  30% {
    background-color: #66BB6A;
    box-shadow: 0 0 0 10px rgba(76, 175, 80, 0.35);
    transform: scale(1.2);
  }
  60% {
    box-shadow: 0 0 0 18px rgba(76, 175, 80, 0);
    transform: scale(1);
  }
  100% {
    background-color: #4CAF50;
    box-shadow: none;
    transform: scale(1);
  }
}

@keyframes btn-flash-red {
  0% {
    background-color: #FF5252;
    box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7);
    transform: scale(1);
  }
  30% {
    background-color: #FF8A80;
    box-shadow: 0 0 0 10px rgba(255, 82, 82, 0.35);
    transform: scale(1.2);
  }
  60% {
    box-shadow: 0 0 0 18px rgba(255, 82, 82, 0);
    transform: scale(1);
  }
  100% {
    background-color: #E10600;
    box-shadow: none;
    transform: scale(1);
  }
}


/* ========================
   2. CARRITO FLOTANTE (FAB)
   ======================== */

.cart-fab {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 65px;
  border: 2px solid var(--clr-accent);
  border-radius: var(--radius-lg);
  background-color: var(--clr-surface);
  padding: 6px;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.cart-fab:hover {
  transform: scale(1.12);
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.45);
}

/* Ícono del carrito */
.cart-fab__icon {
  font-size: 2rem;
  color: var(--clr-primary);
  pointer-events: none;
}

/* Badge contador de ítems */
.cart-fab__count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background-color: #E10600;
  color: #fff;
  font-family: var(--ff-heading);
  font-size: 11px;
  font-weight: var(--fw-bold);
  line-height: 20px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  transition: transform var(--transition-fast);
  pointer-events: none;
  white-space: nowrap;
}

.cart-fab__count[data-count="0"] {
  display: none;
}

/* Animación bounce del contador */
.cart-fab__count.bounce {
  animation: counter-bounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes counter-bounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.5); }
  70%  { transform: scale(0.85); }
  100% { transform: scale(1); }
}

/* La iluminación del FAB al agregar producto se maneja con JS inline */


/* ========================
   3. OVERLAY / FONDO OSCURO
   ======================== */

.cart-overlay {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition-base),
    visibility var(--transition-base);
}

.cart-overlay.active {
  opacity: 1;
  visibility: visible;
}


/* ========================
   4. PANEL LATERAL DEL CARRITO
   ======================== */

.cart-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1002;
  display: flex;
  flex-direction: column;
  width: 390px;
  max-width: 100%;
  height: 100vh;
  height: 100dvh;
  background-color: var(--clr-bg);
  box-shadow: -4px 0 30px rgba(0, 0, 0, 0.35);
  transform: translateX(100%);
  transition: transform var(--transition-base);
}

.cart-panel.open {
  transform: translateX(0);
}

/* Cabecera del panel */
.cart-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg);
  border-bottom: 1px solid var(--clr-border);
  background-color: var(--clr-surface);
  flex-shrink: 0;
}

.cart-panel__title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--ff-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--clr-text);
  margin: 0;
}

.cart-panel__title .material-symbols-outlined {
  font-size: 24px;
  color: var(--clr-accent);
}

.cart-panel__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background-color: transparent;
  color: var(--clr-text-muted);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.cart-panel__close:hover {
  background-color: var(--clr-surface-hover);
  color: var(--clr-text);
}

/* Lista de productos (zona scrollable) */
.cart-panel__items {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md);
  scrollbar-width: thin;
  scrollbar-color: var(--clr-border) transparent;
}

.cart-panel__items::-webkit-scrollbar {
  width: 4px;
}

.cart-panel__items::-webkit-scrollbar-track {
  background: transparent;
}

.cart-panel__items::-webkit-scrollbar-thumb {
  background-color: var(--clr-border);
  border-radius: 2px;
}

/* Estado vacío del carrito */
.cart-panel__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-2xl) var(--space-lg);
  color: var(--clr-text-muted);
  text-align: center;
}

.cart-panel__empty .material-symbols-outlined {
  font-size: 52px;
  opacity: 0.35;
}

.cart-panel__empty p {
  font-size: var(--fs-body);
  margin: 0;
}

/* Fila de cada item del carrito */
.cart-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--clr-border);
}

.cart-item:last-child {
  border-bottom: none;
}

.cart-item__info {
  flex: 1;
  min-width: 0;
}

.cart-item__name {
  font-family: var(--ff-heading);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--clr-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-item__price {
  font-size: var(--fs-small);
  color: var(--clr-text-muted);
  margin-top: 2px;
}

/* Controles de cantidad (+/−) */
.cart-item__controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.cart-item__qty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--clr-border);
  border-radius: 50%;
  background-color: var(--clr-surface);
  color: var(--clr-text);
  cursor: pointer;
  font-size: 16px;
  font-weight: var(--fw-bold);
  line-height: 1;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.cart-item__qty-btn:hover {
  background-color: var(--clr-surface-hover);
  border-color: var(--clr-accent);
}

.cart-item__qty {
  min-width: 24px;
  text-align: center;
  font-family: var(--ff-heading);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--clr-text);
}

/* Botón eliminar item */
.cart-item__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background-color: transparent;
  color: var(--clr-text-muted);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
  flex-shrink: 0;
  margin-left: 4px;
}

.cart-item__remove:hover {
  background-color: rgba(225, 6, 0, 0.15);
  color: #E10600;
}

.cart-item__remove .material-symbols-outlined {
  font-size: 18px;
}


/* ========================
   5. FORMULARIO DEL CLIENTE
   ======================== */

.cart-panel__form {
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--clr-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.cart-form__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cart-form__field label {
  font-family: var(--ff-heading);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--clr-text-muted);
}

.cart-form__field input {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background-color: var(--clr-surface);
  color: var(--clr-text);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
  outline: none;
}

.cart-form__field input::placeholder {
  color: var(--clr-text-muted);
  opacity: 0.55;
}

.cart-form__field input:focus {
  border-color: var(--clr-accent);
  box-shadow: 0 0 0 3px rgba(198, 134, 66, 0.2);
}

.cart-form__field input.error {
  border-color: #E10600;
  box-shadow: 0 0 0 3px rgba(225, 6, 0, 0.15);
}


/* ========================
   6. PIE DEL PANEL — Total y Enviar
   ======================== */

.cart-panel__footer {
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--clr-border);
  background-color: var(--clr-surface);
  flex-shrink: 0;
}

.cart-panel__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
  font-family: var(--ff-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--clr-text);
}

#cart-total {
  color: var(--clr-accent);
}

.cart-panel__send {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-sm) var(--space-lg);
  border: none;
  border-radius: var(--radius-pill);
  background-color: #25D366;
  color: #fff;
  font-family: var(--ff-heading);
  font-size: var(--fs-btn);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    transform var(--transition-fast),
    opacity var(--transition-fast);
}

.cart-panel__send:hover:not(:disabled) {
  background-color: #1DA851;
  transform: translateY(-2px);
}

.cart-panel__send:active:not(:disabled) {
  transform: scale(0.98);
}

.cart-panel__send:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Ícono SVG de WhatsApp en el botón */
.cart-panel__send-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
  flex-shrink: 0;
}


/* ========================
   7. MODAL DE SELECCIÓN DE TELÉFONO
   ======================== */

.phone-modal {
  position: fixed;
  inset: 0;
  z-index: 1003;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition-base),
    visibility var(--transition-base);
}

.phone-modal.active {
  opacity: 1;
  visibility: visible;
}

.phone-modal__content {
  background-color: var(--clr-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  width: 340px;
  max-width: 90%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  transform: scale(0.9) translateY(20px);
  transition: transform var(--transition-base);
}

.phone-modal.active .phone-modal__content {
  transform: scale(1) translateY(0);
}

.phone-modal__content h3 {
  font-family: var(--ff-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--clr-text);
  margin: 0 0 var(--space-lg);
}

.phone-modal__option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-sm);
  border: 2px solid var(--clr-border);
  border-radius: var(--radius-lg);
  background-color: var(--clr-bg);
  color: var(--clr-text);
  font-family: var(--ff-heading);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    transform var(--transition-fast);
}

.phone-modal__option:hover {
  border-color: #25D366;
  background-color: rgba(37, 211, 102, 0.08);
  transform: translateY(-2px);
}

.phone-modal__option .material-symbols-outlined {
  font-size: 22px;
  color: #25D366;
}

.phone-modal__cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--space-sm) var(--space-lg);
  margin-top: var(--space-sm);
  border: none;
  border-radius: var(--radius-pill);
  background-color: transparent;
  color: var(--clr-text-muted);
  font-family: var(--ff-heading);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast);
}

.phone-modal__cancel:hover {
  color: var(--clr-text);
  background-color: var(--clr-surface-hover);
}


/* ========================
   8. RESPONSIVE
   ======================== */

@media (max-width: 480px) {
  .cart-panel {
    width: 100%;
  }

  .cart-fab {
    bottom: 1rem;
    right: 1rem;
    width: 56px;
    height: 56px;
  }

  .btn-add-size,
  .btn-remove-size {
    width: 28px;
    height: 28px;
  }

  .btn-add-size .material-symbols-outlined,
  .btn-remove-size .material-symbols-outlined {
    font-size: 16px;
  }
}