/* ============================================================
   pulido.css · LOS ÚLTIMOS DETALLES ANTES DE PUBLICAR
   ------------------------------------------------------------
   Se carga al final de todo y manda sobre lo anterior.
   ============================================================ */

/* ============================================================
   1 · EL CARRITO SE VE EN COMPUTADOR
   ------------------------------------------------------------
   experiencia.css le da el mismo `bottom` al botón de WhatsApp y
   al del carrito, y solo los separa dentro de una media query de
   celular. En escritorio quedaban uno encima del otro: se veía
   solo el de WhatsApp y el carrito era inalcanzable.

   Se separan en todos los tamaños, con el carrito arriba porque
   es la acción propia de la carta; WhatsApp es la salida.
   ============================================================ */

.fab-cart {
  bottom: calc(90px + env(safe-area-inset-bottom)) !important;
  z-index: 95 !important;
}

.fab-wapp {
  bottom: calc(20px + env(safe-area-inset-bottom)) !important;
  z-index: 94 !important;
}

@media (min-width: 769px) {
  .fab-cart { bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
  .fab-cart, .fab-wapp { width: 60px !important; height: 60px !important; }
}

/* El contador del carrito, legible y en el rojo de marca. */
.cart-badge {
  background: #E63946 !important;
  border: 2px solid #0e0e0e;
  width: 24px !important;
  height: 24px !important;
  font-size: 12px !important;
}


/* ============================================================
   2 · EL PRECIO, SIN EL HALO AMARILLO
   ------------------------------------------------------------
   Los números llevaban un resplandor amarillo heredado de los
   titulares del hero. En una cifra chica no se lee como brillo:
   se lee como si estuviera fuera de foco.
   ============================================================ */

.card-price,
.fries-price,
.drink-price,
.total-amount,
.cart-total-amount,
.modal-price-base,
.sug-item-precio,
.db-num {
  text-shadow: none !important;
  filter: none !important;
}

/* El pie de la ficha tampoco necesita borde amarillo: ya tiene
   el botón verde abajo dando todo el peso que hace falta. */
.modal-pie {
  border-top: 1px solid rgba(255, 255, 255, .09) !important;
}


/* ============================================================
   3 · SACAR INGREDIENTES: QUE SE ENTIENDA SOLO
   ------------------------------------------------------------
   Las fichas se veían como etiquetas informativas, no como algo
   que se puede tocar. Ahora cada una trae su "−" desde el
   principio: se entiende que sirve para restar antes de leer
   una sola palabra. Al tocarla, el signo pasa a "✕", la ficha se
   apaga y el texto se tacha.
   ============================================================ */

#removables-section {
  padding: 17px !important;
  background: rgba(255, 255, 255, .025) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
}

/* --- La frase --- */
#removables-section .extras-title { font-size: 0 !important; }

#removables-section .extras-title::before {
  content: 'Tu burger, tus reglas';
  display: block;
  font-family: var(--f-display, 'Anton', Impact, sans-serif);
  font-size: clamp(19px, 5vw, 24px);
  font-weight: 400;
  letter-spacing: .4px;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
}

#removables-section .extras-title::after {
  content: 'Toca lo que no quieras y sale. Sin costo.';
  display: block;
  margin-top: 5px;
  font-family: var(--f-body, 'Barlow', sans-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #8A8A8A;
}

#removables-list { margin-top: 15px !important; gap: 9px !important; }

/* --- Las fichas --- */
#removables-list label {
  position: relative;
  gap: 9px !important;
  padding: 11px 16px 11px 14px !important;
  background: rgba(245, 197, 24, .1) !important;
  border: 1.5px solid rgba(245, 197, 24, .42) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #fff !important;
}

/* El signo "−" delante: dice qué hace la ficha sin explicarlo. */
#removables-list label::before {
  content: '−';
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  background: rgba(245, 197, 24, .22);
  border-radius: 50%;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: var(--y, #F5C518);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

#removables-list label:hover {
  background: rgba(245, 197, 24, .16) !important;
  border-color: rgba(245, 197, 24, .65) !important;
}
#removables-list label:hover::before { transform: scale(1.12); }

/* --- Apagada: ese ingrediente no va --- */
#removables-list label:has(input:checked) {
  background: rgba(230, 57, 70, .08) !important;
  border-color: rgba(230, 57, 70, .38) !important;
  border-style: dashed !important;
  color: #7d7d7d !important;
  text-decoration: line-through;
  text-decoration-color: rgba(230, 57, 70, .85);
  text-decoration-thickness: 2px;
}

#removables-list label:has(input:checked)::before {
  content: '\2715';
  background: rgba(230, 57, 70, .22);
  color: #ff9aa1;
  font-size: 11px;
  text-decoration: none;
}

/* El "✕" que había agregado al final ya no hace falta: el signo
   de adelante cambia solo y con eso basta. */
#removables-list label:has(input:checked)::after { content: none !important; }


/* ============================================================
   4 · EL AVISO DE LO QUE SE SACÓ
   ------------------------------------------------------------
   Un resumen bajo las fichas para que nadie mande un pedido sin
   darse cuenta de que dejó algo fuera.
   ============================================================ */

.quitados-resumen {
  display: none;
  margin-top: 13px;
  padding: 10px 13px;
  background: rgba(230, 57, 70, .08);
  border-left: 3px solid rgba(230, 57, 70, .55);
  border-radius: 0 9px 9px 0;
  font-family: var(--f-body, 'Barlow', sans-serif);
  font-size: 13px;
  line-height: 1.45;
  color: #c9c9c9;
}
.quitados-resumen.visible { display: block; }
.quitados-resumen b { color: #ff9aa1; font-weight: 700; }


/* ============================================================
   5 · LA ETIQUETA "NUEVO"
   ------------------------------------------------------------
   Smok y Ökla dejaron de ser novedad. La etiqueta se queda en el
   código para cuando entre una hamburguesa de verdad nueva.
   ============================================================ */

.badge.new {
  background: rgba(230, 57, 70, .16) !important;
  border: 1px solid rgba(230, 57, 70, .5) !important;
  color: #ff9aa1 !important;
}


/* ============================================================
   6 · EL PIE DE LA FICHA, ORDENADO
   ------------------------------------------------------------
   El total y el botón estaban ahí pero sin relación entre sí: el
   "TOTAL" flotando a la izquierda, la cifra pegada al borde
   derecho y el botón verde ocupando todo el ancho debajo, con un
   resplandor que lo hacía ver suelto del resto.

   Ahora son un solo bloque: una línea de total con su propia
   caja, el botón debajo con el mismo radio, y nada de brillos.
   ============================================================ */

.modal-pie {
  gap: 12px !important;
  padding: 15px 20px calc(17px + env(safe-area-inset-bottom)) !important;
  background: #0d0d0d !important;
}

/* La línea del total, dentro de su propia caja. */
.modal-pie .total-bar {
  padding: 12px 16px !important;
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  border-radius: 14px !important;
}

.modal-pie .total-label {
  font-size: 11.5px !important;
  font-weight: 900 !important;
  letter-spacing: 2.2px !important;
  color: #7a7a7a !important;
}

.modal-pie .total-amount {
  font-size: clamp(27px, 7vw, 34px) !important;
  line-height: 1 !important;
}

/* El botón: sin resplandor verde, mismo radio que la caja de
   arriba. Un botón que brilla se lee como si estuviera encendido
   por error, no como algo en lo que se puede confiar. */
.modal-pie .btn-order {
  min-height: 56px !important;
  border-radius: 14px !important;
  background: var(--whatsapp, #25D366) !important;
  color: #052e16 !important;
  box-shadow: none !important;
  filter: none !important;
  font-family: var(--f-cond, 'Barlow Condensed', sans-serif) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase;
  transition: filter .2s ease, transform .12s ease;
}

.modal-pie .btn-order:hover { filter: brightness(1.07) !important; }
.modal-pie .btn-order:active { transform: scale(.985); }

/* El degradado de arriba acompaña el fondo nuevo. */
.modal-pie::before {
  background: linear-gradient(180deg, rgba(13, 13, 13, 0), #0d0d0d) !important;
}

/* ============================================================
   7 · EL SELLO SANITARIO EN EL PIE
   ------------------------------------------------------------
   Smachil tiene su autorización sanitaria y eso se muestra con
   orgullo: para un cliente es la diferencia entre un local y un
   carrito. Va al pie, sobre el copyright, con el emblema del
   Ministerio de Salud y el número de resolución completo, y un
   enlace para verificarlo en el sitio de la SEREMI.
   ============================================================ */

.sello-sanitario {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 560px;
  margin: 0 auto clamp(22px, 5vw, 30px);
  padding: 16px 18px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 16px;
  text-align: left;
}

.sello-minsal {
  flex: 0 0 auto;
  width: 78px;
  height: 72px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}
.sello-minsal svg, .sello-minsal img { display: block; width: 100%; height: 100%; }

.sello-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.sello-texto .sello-eyebrow {
  font-family: var(--f-cond, 'Barlow Condensed', sans-serif);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--y, #F5C518);
}
.sello-texto strong {
  font-family: var(--f-display, 'Anton', Impact, sans-serif);
  font-size: clamp(16px, 4.2vw, 20px);
  letter-spacing: .4px;
  line-height: 1.05;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.sello-texto span:not(.sello-eyebrow) {
  font-family: var(--f-body, 'Barlow', sans-serif);
  font-size: 12.5px;
  color: #9a9a9a;
}
.sello-texto a {
  margin-top: 3px;
  font-family: var(--f-body, 'Barlow', sans-serif);
  font-size: 12px;
  color: #8A8A8A;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.sello-texto a:hover { color: var(--y, #F5C518); }

@media (max-width: 420px) {
  .sello-sanitario { gap: 13px; padding: 14px; }
  .sello-minsal { width: 66px; height: 61px; }
}

/* Sello: en el teléfono el emblema crece y el texto no se parte. */
.sello-minsal { width: 92px; height: 85px; }
.sello-texto .sello-eyebrow { font-size: 10.5px; letter-spacing: 1.6px; }
.sello-texto strong { font-size: clamp(17px, 4.6vw, 21px); }
.sello-texto span:not(.sello-eyebrow) { font-size: 12px; }
.sello-texto a { font-size: 11.5px; }
@media (max-width: 420px) {
  .sello-minsal { width: 84px; height: 78px; }
  .sello-sanitario { gap: 12px; padding: 14px 13px; }
}
/* Que los botones flotantes no tapen el copyright ni el sello. */
footer { padding-bottom: calc(118px + env(safe-area-inset-bottom)) !important; }
/* El emblema tiene proporción 184:144; la caja lo respeta. */
.sello-minsal { width: 96px; height: 75px; }
@media (max-width: 420px) { .sello-minsal { width: 88px; height: 69px; } }
.sello-texto strong { font-size: clamp(22px, 6vw, 26px); letter-spacing: .6px; }