/**
 * Bella Flor — Carrinho e checkout
 *
 * Estilizamos os templates nativos do WooCommerce em vez de sobrescrevê-los:
 * o checkout é a parte mais frágil da loja e cada template customizado vira
 * dívida a cada atualização do plugin.
 */

.woocommerce-cart .bf-main,
.woocommerce-checkout .bf-main,
.woocommerce-order-received .bf-main {
  padding-block: var(--bf-space-7) var(--bf-space-9);
}

.woocommerce-cart .bf-main > .woocommerce,
.woocommerce-checkout .bf-main > .woocommerce,
.woocommerce-order-received .bf-main > .woocommerce {
  width: 100%;
  max-width: var(--bf-container);
  margin-inline: auto;
  padding-inline: var(--bf-gutter);
}

/* ==========================================================================
   Mensagens do WooCommerce
   ========================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bf-space-3);
  margin-bottom: var(--bf-space-5);
  padding: var(--bf-space-4) var(--bf-space-5);
  border-left: 3px solid var(--bf-brand-strong);
  border-radius: var(--bf-radius-xs);
  background-color: var(--bf-brand-tint);
  list-style: none;
  font-size: var(--bf-text-sm);
}

.woocommerce-message { border-left-color: var(--bf-success); background-color: var(--bf-success-tint); }
.woocommerce-error   { border-left-color: var(--bf-danger); background-color: var(--bf-danger-tint); }

.woocommerce-message .button,
.woocommerce-info .button {
  margin-left: auto;
}

/* ==========================================================================
   Botões do WooCommerce
   ========================================================================== */

.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: var(--bf-space-3) var(--bf-space-6);
  background-color: var(--bf-brand-strong);
  color: var(--bf-text-inverse);
  border: 1px solid var(--bf-brand-strong);
  border-radius: var(--bf-radius-sm);
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-medium);
  letter-spacing: var(--bf-tracking-wide);
  text-transform: uppercase;
  transition: background-color var(--bf-duration-fast) var(--bf-ease);
}

.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover {
  background-color: var(--bf-brand-hover);
  border-color: var(--bf-brand-hover);
  color: var(--bf-text-inverse);
}

.woocommerce .button.alt,
.woocommerce button.button.alt {
  background-color: var(--bf-brand-strong);
  border-color: var(--bf-brand-strong);
}

.woocommerce .button:disabled,
.woocommerce button.button:disabled {
  opacity: 0.5;
}

/* ==========================================================================
   Carrinho
   ========================================================================== */

.woocommerce-cart-form__contents {
  width: 100%;
  margin-bottom: var(--bf-space-6);
}

.woocommerce-cart-form__contents th {
  padding: var(--bf-space-3) var(--bf-space-3);
  border-bottom: 1px solid var(--bf-line-strong);
  text-align: left;
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-semibold);
  letter-spacing: var(--bf-tracking-wide);
  text-transform: uppercase;
}

.woocommerce-cart-form__cart-item td {
  padding: var(--bf-space-4) var(--bf-space-3);
  border-bottom: 1px solid var(--bf-line);
  vertical-align: middle;
}

.woocommerce-cart-form__cart-item .product-thumbnail img {
  width: 84px;
  height: 112px;
  object-fit: cover;
  border-radius: var(--bf-radius-xs);
}

.woocommerce-cart-form__cart-item .product-name a {
  font-size: var(--bf-text-sm);
}

.woocommerce-cart-form__cart-item .product-remove a {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--bf-radius-pill);
  color: var(--bf-text-subtle);
  font-size: 1.25rem;
  line-height: 1;
}

.woocommerce-cart-form__cart-item .product-remove a:hover {
  background-color: var(--bf-danger-tint);
  color: var(--bf-danger);
}

.cart_totals {
  padding: var(--bf-space-6);
  background-color: var(--bf-surface);
  border: 1px solid var(--bf-line);
  border-radius: var(--bf-radius-sm);
}

.cart_totals h2 {
  margin-bottom: var(--bf-space-4);
  font-size: var(--bf-text-lg);
}

.cart_totals table th,
.cart_totals table td {
  padding: var(--bf-space-3) 0;
  border-bottom: 1px solid var(--bf-line);
  text-align: left;
  font-size: var(--bf-text-sm);
}

.cart_totals .order-total td {
  font-size: var(--bf-text-md);
  font-weight: var(--bf-weight-semibold);
  color: var(--bf-brand-strong);
}

.coupon {
  display: flex;
  gap: var(--bf-space-2);
  margin-bottom: var(--bf-space-4);
}

.coupon input[type="text"] {
  max-width: 220px;
}

/* ==========================================================================
   Checkout
   ========================================================================== */

.woocommerce-checkout .col2-set {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bf-space-6);
}

.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading {
  margin-bottom: var(--bf-space-4);
  font-size: var(--bf-text-lg);
}

.woocommerce-checkout .form-row {
  margin-bottom: var(--bf-space-4);
}

.woocommerce-checkout .form-row label {
  display: block;
  margin-bottom: var(--bf-space-2);
  font-size: var(--bf-text-sm);
}

.woocommerce-checkout .required {
  color: var(--bf-danger);
  text-decoration: none;
}

.woocommerce-checkout-review-order {
  padding: var(--bf-space-6);
  background-color: var(--bf-surface);
  border: 1px solid var(--bf-line);
  border-radius: var(--bf-radius-sm);
  /* Acompanha a rolagem enquanto o formulário é preenchido. */
  position: sticky;
  top: calc(var(--bf-header-h) + var(--bf-space-4));
}

.woocommerce-checkout-review-order-table {
  width: 100%;
  margin-bottom: var(--bf-space-4);
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  padding: var(--bf-space-3) 0;
  border-bottom: 1px solid var(--bf-line);
  text-align: left;
  font-size: var(--bf-text-sm);
}

.woocommerce-checkout-review-order-table .order-total {
  font-size: var(--bf-text-md);
  font-weight: var(--bf-weight-semibold);
}

/* --- Formas de pagamento --------------------------------------------------- */

.wc_payment_methods {
  display: grid;
  gap: var(--bf-space-2);
  margin-bottom: var(--bf-space-5);
  list-style: none;
  padding: 0;
}

.wc_payment_method > label {
  display: flex;
  align-items: center;
  gap: var(--bf-space-3);
  padding: var(--bf-space-4);
  border: 1px solid var(--bf-line-strong);
  border-radius: var(--bf-radius-sm);
  font-size: var(--bf-text-sm);
  cursor: pointer;
  transition: border-color var(--bf-duration-fast) var(--bf-ease);
}

.wc_payment_method > input:checked + label {
  border-color: var(--bf-brand-strong);
  background-color: var(--bf-brand-tint);
}

.payment_box {
  padding: var(--bf-space-4);
  background-color: var(--bf-bg);
  border-radius: var(--bf-radius-xs);
  font-size: var(--bf-text-sm);
  color: var(--bf-text-muted);
}

#place_order {
  width: 100%;
  min-height: 54px;
  font-size: var(--bf-text-sm);
}

.woocommerce-terms-and-conditions-wrapper {
  margin-bottom: var(--bf-space-4);
  font-size: var(--bf-text-xs);
  color: var(--bf-text-muted);
}

/* ==========================================================================
   Barra de frete grátis (mini carrinho)
   ========================================================================== */

.bf-ship-bar {
  padding: var(--bf-space-4) var(--bf-space-5);
  background-color: var(--bf-brand-tint);
  border-bottom: 1px solid var(--bf-brand-tint-deep);
}

.bf-ship-bar__text {
  display: flex;
  align-items: center;
  gap: var(--bf-space-2);
  font-size: var(--bf-text-xs);
  color: var(--bf-brand-strong);
}

.bf-ship-bar__track {
  height: 4px;
  margin-top: var(--bf-space-2);
  background-color: var(--bf-brand-tint-deep);
  border-radius: var(--bf-radius-pill);
  overflow: hidden;
}

/*
 * O rosé claro da marca rende só 1,9:1 contra o trilho da barra — o progresso
 * some. Indicador é informação, não decoração: usa o tom forte (4,4:1).
 */
.bf-ship-bar__fill {
  display: block;
  height: 100%;
  background-color: var(--bf-brand-strong);
  border-radius: var(--bf-radius-pill);
  transition: width var(--bf-duration-slow) var(--bf-ease-out);
}

/* ==========================================================================
   Itens do mini carrinho
   ========================================================================== */

.bf-cart-items {
  display: grid;
  gap: var(--bf-space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.bf-cart-item {
  position: relative;
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: var(--bf-space-3);
  padding-bottom: var(--bf-space-4);
  border-bottom: 1px solid var(--bf-line);
}

.bf-cart-item__media img {
  width: 72px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--bf-radius-xs);
  background-color: var(--bf-surface-alt);
}

.bf-cart-item__name {
  display: block;
  font-size: var(--bf-text-sm);
  line-height: var(--bf-leading-snug);
}

.bf-cart-item .variation {
  margin-top: var(--bf-space-1);
  font-size: var(--bf-text-xs);
  color: var(--bf-text-muted);
}

.bf-cart-item .variation dt,
.bf-cart-item .variation dd {
  display: inline;
  margin: 0;
}

.bf-cart-item .variation dd::after {
  content: " ";
}

.bf-cart-item__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bf-space-3);
  margin-top: var(--bf-space-3);
}

.bf-cart-item__price {
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-medium);
}

.bf-cart-item__remove {
  align-self: start;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--bf-text-subtle);
  border-radius: var(--bf-radius-pill);
  transition:
    background-color var(--bf-duration-fast) var(--bf-ease),
    color var(--bf-duration-fast) var(--bf-ease);
}

.bf-cart-item__remove:hover {
  background-color: var(--bf-danger-tint);
  color: var(--bf-danger);
}

/* Contador de quantidade */

.bf-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--bf-line-strong);
  border-radius: var(--bf-radius-sm);
}

.bf-qty__btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 32px;
  color: var(--bf-text-muted);
  transition: color var(--bf-duration-fast) var(--bf-ease);
}

.bf-qty__btn:hover {
  color: var(--bf-brand-strong);
}

.bf-qty__input {
  width: 38px;
  height: 32px;
  padding: 0;
  border: 0;
  border-inline: 1px solid var(--bf-line);
  border-radius: 0;
  text-align: center;
  font-size: var(--bf-text-sm);
  -moz-appearance: textfield;
}

.bf-qty__input::-webkit-outer-spin-button,
.bf-qty__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.bf-qty__input:focus {
  box-shadow: none;
}

/* Estado de carregamento do drawer */

.bf-mini-cart.is-busy .bf-drawer__body {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity var(--bf-duration-fast) var(--bf-ease);
}

.bf-mini-cart__count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: var(--bf-space-2);
  padding-inline: 6px;
  background-color: var(--bf-brand-strong);
  color: var(--bf-text-inverse);
  border-radius: var(--bf-radius-pill);
  font-size: 10px;
}

.bf-cart-foot__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bf-space-3);
  margin-bottom: var(--bf-space-2);
  font-size: var(--bf-text-sm);
}

.bf-cart-foot__total {
  font-size: var(--bf-text-lg);
  color: var(--bf-brand-strong);
}

.bf-cart-foot__note {
  margin-bottom: var(--bf-space-4);
  font-size: var(--bf-text-xs);
  color: var(--bf-text-muted);
}

.bf-cart-foot .bf-btn + .bf-btn {
  margin-top: var(--bf-space-2);
}

/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (min-width: 1024px) {
  /* Formulário à esquerda, resumo à direita — padrão consolidado de checkout. */
  .woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    align-items: start;
    gap: var(--bf-space-8);
  }

  .woocommerce-checkout form.checkout > .col2-set {
    grid-column: 1;
  }

  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review {
    grid-column: 2;
  }

  .woocommerce-cart .woocommerce > .woocommerce-cart-form,
  .woocommerce-cart .woocommerce > .cart-collaterals {
    display: inline-block;
    vertical-align: top;
  }

  .woocommerce-cart .cart-collaterals {
    width: 34%;
    padding-left: var(--bf-space-6);
  }

  .woocommerce-cart .woocommerce-cart-form {
    width: 65%;
  }
}

@media (max-width: 768px) {
  /* Tabela do carrinho vira cartões empilhados. */
  .woocommerce-cart-form__contents thead {
    display: none;
  }

  .woocommerce-cart-form__cart-item {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: var(--bf-space-2) var(--bf-space-3);
    padding: var(--bf-space-4) 0;
    border-bottom: 1px solid var(--bf-line);
  }

  .woocommerce-cart-form__cart-item td {
    padding: 0;
    border: 0;
  }

  .woocommerce-cart-form__cart-item .product-thumbnail {
    grid-row: span 4;
  }

  .woocommerce-cart-form__cart-item .product-remove {
    position: absolute;
    right: 0;
  }

  .coupon {
    flex-direction: column;
  }

  .coupon input[type="text"] {
    max-width: none;
  }

  .woocommerce-checkout-review-order {
    position: static;
  }
}