/* =========================================================
   WPORIUM TRANSACTION UI — 0.15.0
   Base compartida por Cart + Checkout.

   Principios:
   - No modifica la rejilla interna de WooCommerce Blocks.
   - No fuerza sidebar-layout, grid ni flex de WooCommerce.
   - Usa el Design System de WPorium Core.
   - Mobile first en legibilidad y objetivos táctiles.
   ========================================================= */

.wporium-transaction-page {
  background: var(--wpo-color-page);
  color: var(--wpo-color-text);
  font-family: var(--wpo-font-sans);
}

/* GeneratePress deja de aportar la gran superficie blanca exterior. */
.wporium-transaction-page #page,
.wporium-transaction-page .site-content {
  width: 100%;
  max-width: none;
  background: var(--wpo-color-page);
}

.wporium-transaction-page #primary,
.wporium-transaction-page .content-area {
  width: 100%;
  max-width: 100%;
  float: none;
}

.wporium-transaction-page .site-main {
  margin: 0;
}

.wporium-transaction-page .inside-article {
  padding: 0;
  background: transparent;
}

.wporium-transaction-page .entry-header {
  width: 100%;
  max-width: var(--wpo-container);
  margin: 0 auto;
  padding: 44px var(--wpo-gutter-desktop) 26px;
  box-sizing: border-box;
  text-align: center;
}

.wporium-transaction-page .entry-title {
  margin: 0;
  color: var(--wpo-color-text);
  font-size: clamp(34px, 4vw, 44px);
  line-height: var(--wpo-line-tight);
  letter-spacing: -.04em;
  font-weight: var(--wpo-font-weight-bold);
}

.wporium-transaction-page .entry-content {
  margin-top: 0;
}

/* Contenedores principales: controlamos solo el marco exterior. */
.wporium-transaction-page .wp-block-woocommerce-cart,
.wporium-transaction-page .wp-block-woocommerce-cart.alignwide,
.wporium-transaction-page .wp-block-woocommerce-cart.alignfull,
.wporium-transaction-page .wp-block-woocommerce-checkout,
.wporium-transaction-page .wp-block-woocommerce-checkout.alignwide,
.wporium-transaction-page .wp-block-woocommerce-checkout.alignfull {
  width: 100% !important;
  max-width: var(--wpo-container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 var(--wpo-gutter-desktop) 76px !important;
  box-sizing: border-box !important;
}

/* Tipografía base de componentes WooCommerce. */
.wporium-transaction-page .wc-block-components-product-name {
  color: var(--wpo-color-text);
  font-size: 15px;
  line-height: 1.4;
  font-weight: var(--wpo-font-weight-semibold);
  overflow-wrap: anywhere;
}

.wporium-transaction-page .wc-block-components-product-price,
.wporium-transaction-page .wc-block-components-formatted-money-amount {
  color: var(--wpo-color-text);
  font-size: 14px;
}

.wporium-transaction-page .wc-block-components-product-metadata,
.wporium-transaction-page .wc-block-components-product-metadata__description,
.wporium-transaction-page .wc-block-components-order-summary-item__description {
  color: var(--wpo-color-text-muted);
  font-size: 13px;
  line-height: 1.55;
}

/* Botones WooCommerce con identidad WPorium. */
.wporium-transaction-page .wc-block-components-button:not(.is-link) {
  min-height: 50px;
  border: 0;
  border-radius: var(--wpo-radius-md);
  background: var(--wpo-color-brand);
  color: #fff;
  box-shadow: 0 10px 24px rgba(102, 87, 232, .18);
  font-family: var(--wpo-font-sans);
  font-size: 15px;
  line-height: 1.2;
  font-weight: var(--wpo-font-weight-bold);
  transition:
    background var(--wpo-transition-fast),
    box-shadow var(--wpo-transition-fast),
    transform var(--wpo-transition-fast);
}

.wporium-transaction-page .wc-block-components-button:not(.is-link):hover {
  background: var(--wpo-color-brand-hover);
  color: #fff;
  box-shadow: 0 12px 28px rgba(102, 87, 232, .24);
  transform: translateY(-1px);
}

.wporium-transaction-page .wc-block-components-button:not(.is-link):focus-visible {
  outline: none;
  box-shadow: var(--wpo-focus-ring), 0 10px 24px rgba(102, 87, 232, .18);
}

.wporium-transaction-page .wc-block-components-button:not(.is-link):disabled {
  opacity: .55;
  transform: none;
  box-shadow: none;
}

/* Links/acciones secundarias. */
.wporium-transaction-page .wc-block-components-button.is-link,
.wporium-transaction-page .wc-block-components-product-name,
.wporium-transaction-page a {
  text-underline-offset: 2px;
}

/* Campos comunes. */
.wporium-transaction-page .wc-block-components-text-input input,
.wporium-transaction-page .wc-block-components-combobox input,
.wporium-transaction-page .wc-block-components-textarea,
.wporium-transaction-page .wc-block-components-address-form select {
  min-height: 50px;
  border-color: #d8dee8;
  border-radius: var(--wpo-radius-md);
  background: #fff;
  color: var(--wpo-color-text);
  font-family: var(--wpo-font-sans);
  font-size: 15px;
  box-shadow: none;
}

.wporium-transaction-page .wc-block-components-text-input input:focus,
.wporium-transaction-page .wc-block-components-combobox input:focus,
.wporium-transaction-page .wc-block-components-textarea:focus,
.wporium-transaction-page .wc-block-components-address-form select:focus {
  border-color: #8b80ed;
  outline: none;
  box-shadow: var(--wpo-focus-ring);
}

.wporium-transaction-page .wc-block-components-text-input label,
.wporium-transaction-page .wc-block-components-combobox-control label {
  color: #697286;
  font-size: 13px;
}

/* Totales: lectura tipo recibo. */
.wporium-transaction-page .wc-block-components-totals-wrapper {
  box-sizing: border-box;
}

.wporium-transaction-page .wc-block-components-totals-item {
  min-height: 46px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.wporium-transaction-page .wc-block-components-totals-item__label {
  color: #5f687c;
  font-size: 13px;
  line-height: 1.45;
}

.wporium-transaction-page .wc-block-components-totals-item__value {
  color: var(--wpo-color-text);
  font-size: 14px;
  line-height: 1.45;
  font-weight: var(--wpo-font-weight-semibold);
}

.wporium-transaction-page .wc-block-components-totals-footer-item {
  padding-top: 16px;
  padding-bottom: 16px;
}

.wporium-transaction-page .wc-block-components-totals-footer-item
.wc-block-components-totals-item__label,
.wporium-transaction-page .wc-block-components-totals-footer-item
.wc-block-components-totals-item__value {
  color: var(--wpo-color-text);
  font-size: 17px;
  font-weight: var(--wpo-font-weight-bold);
}

/*
 * WooCommerce Subscriptions puede renderizar el desglose recurrente
 * dentro de <details>. En una página de compra preferimos el recibo
 * visible sin un clic adicional.
 *
 * Está limitado exclusivamente a DETAILS dentro de wrappers de totales;
 * no altera acordeones, campos ni layout de WooCommerce.
 */
.wporium-transaction-page
.wc-block-components-totals-wrapper
details > summary {
  display: none !important;
}

.wporium-transaction-page
.wc-block-components-totals-wrapper
details:not([open]) > :not(summary) {
  display: block !important;
}

/* Feedback / notices. */
.wporium-transaction-page .wc-block-components-notice-banner {
  border-radius: var(--wpo-radius-md);
  font-size: 14px;
  line-height: 1.55;
}

/* Mobile: no encoger; dar aire y permitir que Woo reordene. */
@media (max-width: 520px) {
  .wporium-transaction-page .entry-header {
    padding: 28px var(--wpo-gutter-mobile) 20px;
  }

  .wporium-transaction-page .entry-title {
    font-size: 32px;
  }

  .wporium-transaction-page .wp-block-woocommerce-cart,
  .wporium-transaction-page .wp-block-woocommerce-cart.alignwide,
  .wporium-transaction-page .wp-block-woocommerce-cart.alignfull,
  .wporium-transaction-page .wp-block-woocommerce-checkout,
  .wporium-transaction-page .wp-block-woocommerce-checkout.alignwide,
  .wporium-transaction-page .wp-block-woocommerce-checkout.alignfull {
    padding-left: var(--wpo-gutter-mobile) !important;
    padding-right: var(--wpo-gutter-mobile) !important;
    padding-bottom: 58px !important;
  }

  .wporium-transaction-page .wc-block-components-product-name {
    font-size: 15px;
  }

  .wporium-transaction-page .wc-block-components-product-price,
  .wporium-transaction-page .wc-block-components-formatted-money-amount {
    font-size: 14px;
  }

  .wporium-transaction-page .wc-block-components-text-input input,
  .wporium-transaction-page .wc-block-components-combobox input,
  .wporium-transaction-page .wc-block-components-textarea,
  .wporium-transaction-page .wc-block-components-address-form select {
    font-size: var(--wpo-input-font-size);
  }

  .wporium-transaction-page .wc-block-components-button:not(.is-link) {
    min-height: 52px;
    font-size: 15px;
  }
}

/* =========================================================
   WPORIUM TRANSACTION UI — 0.16.0
   Resumen móvil + renovación visible
   ========================================================= */

/*
 * WooCommerce duplica Order Summary en checkout compacto.
 * WPorium conserva el resumen superior (dentro del flujo) y elimina
 * el totals block inferior duplicado.
 *
 * Se basa en las clases responsive del propio Checkout Block,
 * no en detección de dispositivo del servidor.
 */
.wporium-checkout-page
.wc-block-checkout.wporium-compact-checkout
> .wp-block-woocommerce-checkout-totals-block {
  display: none !important;
}

/* Resumen superior: abierto y con aspecto de recibo compacto. */
.wporium-checkout-page
.wc-block-checkout.wporium-compact-checkout
.wporium-mobile-order-summary {
  overflow: hidden;
  margin-bottom: 20px;
  border: 1px solid var(--wpo-color-border);
  border-radius: var(--wpo-radius-lg);
  background: var(--wpo-color-surface);
  box-shadow: var(--wpo-shadow-xs);
}

/*
 * El usuario puede seguir cerrándolo si quiere, pero ya no necesita
 * abrirlo para conocer su pedido: JS lo deja abierto por defecto.
 */
.wporium-checkout-page
.wporium-order-summary-toggle {
  min-height: 52px;
  color: var(--wpo-color-text);
  font-size: 15px;
  line-height: 1.3;
  font-weight: var(--wpo-font-weight-bold);
}

/* Renovación: una vez abierta, escondemos únicamente el toggle "Detalles". */
.wporium-transaction-page
.wc-block-components-totals-wrapper.wporium-recurring-total
.wporium-recurring-details-toggle {
  display: none !important;
}

.wporium-transaction-page
.wc-block-components-totals-wrapper.wporium-recurring-total {
  margin-top: 4px;
  padding: 10px 0 4px;
  border-top: 1px solid var(--wpo-color-border);
  background: #fafaff;
}

.wporium-transaction-page
.wc-block-components-totals-wrapper.wporium-recurring-total
.wc-block-components-totals-item {
  min-height: 42px;
}

/* El contenido recurrente no debe volver a microtipografía. */
.wporium-transaction-page
.wc-block-components-totals-wrapper.wporium-recurring-total {
  color: var(--wpo-color-text-muted);
  font-size: 13px;
  line-height: 1.55;
}