/* ============================================================
   Pizzería Ofertas Avanzadas — Frontend CSS
   Diseñado para integrarse con Blocksy + WooCommerce.
   Se apoya en las variables CSS del tema para tipografía,
   colores y espaciado.
   ============================================================ */

/* ── Catálogo: badge "OFERTA" ─────────────────────────────────────────────
   Usa la clase .onsale de Blocksy: hereda posición, tamaño, forma y color
   del badge SALE ya configurado en el tema.
   Solo sobreescribimos el color de fondo para diferenciarlo del SALE nativo.
------------------------------------------------------------------------- */
.poa-loop-badge {
  background-color: var(--theme-palette-color-1, #e8590c);
}

/* Si el producto tiene tanto SALE nativo como badge de oferta,
   desplazamos el nuestro para que no se solapen. */
.poa-loop-badge + .onsale:not(.poa-loop-badge),
.onsale:not(.poa-loop-badge) ~ .poa-loop-badge {
  top: calc(var(--badge-top, 15px) + 36px);
}

/* ── Ficha de producto: panel de detalle ──────────────────────────────────
   Estilo "módulo de producto" de Blocksy: sin cajas con sombra,
   separado por una línea fina, tipografía y colores del tema.
------------------------------------------------------------------------- */
.poa-offer-panel {
  border-top: 1px solid var(--theme-border-color, #e0e0e0);
  padding-top: var(--product-element-spacing, 10px);
  margin-bottom: var(--product-element-spacing, 10px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.poa-offer-panel__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--theme-text-color, #333);
  font-family: var(--theme-font-family, inherit);
}

.poa-offer-panel__icon {
  font-size: 16px;
  flex-shrink: 0;
  line-height: 1.7;
}

.poa-offer-panel__body {
  flex: 1;
  min-width: 0;
}

.poa-offer-panel__body strong {
  font-weight: 600;
  color: var(--theme-heading-color, inherit);
}

.poa-offer-panel__until {
  color: var(--theme-text-color, #555);
  opacity: .75;
  font-size: 13px;
}

/* Cuenta atrás Happy Hour */
.poa-countdown {
  display: inline-block;
  margin-left: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--theme-palette-color-1, #e8590c);
}

.poa-countdown:not(:empty)::before { content: '('; }
.poa-countdown:not(:empty)::after  { content: ')'; }

/* ── Mensaje de cabecera del panel ────────────────────────────────────────
   Texto introductorio antes de listar las ofertas disponibles.
------------------------------------------------------------------------- */
.poa-offer-panel__intro {
  margin: 0 0 8px 0;
  font-size: 13px;
  color: var(--theme-text-color, #555);
  font-style: italic;
}

/* ── Lista de componentes del pack ────────────────────────────────────────
   Igual que las listas de atributos/variaciones de WooCommerce en Blocksy.
------------------------------------------------------------------------- */
.poa-pack-list {
  margin: 6px 0 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.poa-pack-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--theme-text-color, #333);
}

.poa-pack-list li::before {
  content: '·';
  color: var(--theme-palette-color-1, #e8590c);
  font-weight: 700;
  flex-shrink: 0;
}

.poa-pack-list__qty {
  font-weight: 600;
  color: var(--theme-palette-color-1, #e8590c);
  flex-shrink: 0;
}

.poa-pack-list a {
  color: var(--theme-link-initial-color, var(--theme-palette-color-1, #e8590c));
  text-decoration: none;
}

.poa-pack-list a:hover {
  color: var(--theme-link-hover-color, var(--theme-palette-color-1, #e8590c));
  text-decoration: underline;
}

/* ── Estado del carrito vs pack ───────────────────────────────────────────
   JS añade is-ok / is-pending a cada <li> y rellena .poa-cart-status.
------------------------------------------------------------------------- */
.poa-pack-list li .poa-cart-status {
  margin-left: 5px;
  font-size: 12px;
  font-weight: 700;
  transition: color .2s;
}

.poa-pack-list li.is-ok {
  opacity: .55;
}

.poa-pack-list li.is-ok .poa-cart-status {
  color: #00a32a;
}

.poa-pack-list li.is-ok a {
  text-decoration: line-through;
  text-decoration-color: currentColor;
}

/* Mensaje resumen ("te falta añadir X, Y") */
.poa-cart-summary {
  margin-top: 8px;
  font-size: 13px;
  min-height: 0;
}

.poa-cart-summary.is-pending {
  color: var(--theme-palette-color-1, #e8590c);
  font-weight: 600;
}

.poa-cart-summary.is-complete {
  color: #00a32a;
  font-weight: 600;
}

/* ── Expirado (JS lo añade) ───────────────────────────────────────────── */
.poa-loop-badge.is-expired,
.poa-offer-panel__item.is-expired {
  display: none !important;
}