/*
 * Carrinho, checkout e pedido confirmado sobre o tema Pillar (não é arquivo do
 * tema). Cobre as classes que os scripts da loja (loja-carrinho.js,
 * loja-checkout.js, loja-checkout-empresa.js) ainda usam — herança do Bootstrap —
 * e o que o tema não tem: o formulário do checkout (no Shopify o checkout é
 * hospedado) e o resumo do pedido.
 */

/* --- Classes que os scripts alternam --- */
.d-none {
  display: none !important;
}

.text-success {
  color: rgb(var(--color-progress-bar));
}

.text-danger {
  color: #c4301c;
}

.form-control.is-invalid {
  border-color: #c4301c;
  --inputs-border-width: 1px;
}

.invalid-feedback {
  display: none;
  margin-top: 0.6rem;
  font-size: var(--font-size-static-sm, 1.4rem);
  color: #c4301c;
}

.is-invalid ~ .invalid-feedback {
  display: block;
}

/* Toast "Produto adicionado" (criado pelo loja-carrinho.js na página do produto) */
.loja-carrinho-toast {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  max-width: calc(100vw - 4rem);
  padding: 1.4rem 1.8rem;
  border-radius: var(--blocks-radius, 0.8rem);
  background: rgb(var(--color-background));
  color: rgb(var(--color-progress-bar));
  box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.12);
}

.loja-carrinho-toast a {
  margin-inline-start: auto;
  font-weight: var(--font-body-weight-bold);
  color: rgb(var(--color-foreground));
}

/* --- Alertas (o .alert do tema tem padding de bloco grande) --- */
.loja-pillar-alerta {
  padding: 1.2rem 1.6rem;
  margin-bottom: 2rem;
}

/* --- Carrinho --- */
.cart-item .select {
  width: auto;
}

.cart-item .form-control--select {
  min-width: 15rem;
}

.cart-item .btn-remove {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: rgb(var(--color-foreground));
}

.cart-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart__continue {
  margin-top: 2.4rem;
}

#carrinhoCep {
  flex: 1;
  min-width: 0;
}

/* --- Checkout --- */
.checkout-page__layout {
  display: grid;
  gap: 3.2rem;
}

@media (min-width: 1024px) {
  .checkout-page__layout {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
    gap: 4.8rem;
  }
}

.checkout-block {
  padding: 2.4rem;
  border: 1px solid rgb(var(--color-border));
  border-radius: var(--blocks-radius, 0.8rem);
}

.checkout-block + .checkout-block {
  margin-top: 2.4rem;
}

.checkout-block__title {
  margin: 0 0 2rem;
}

.checkout-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2rem 1.6rem;
}

.checkout-grid > * {
  grid-column: span 12;
}

@media (min-width: 768px) {
  .checkout-grid .col-md-2 { grid-column: span 2; }
  .checkout-grid .col-md-4 { grid-column: span 4; }
  .checkout-grid .col-md-5 { grid-column: span 5; }
  .checkout-grid .col-md-6 { grid-column: span 6; }
  .checkout-grid .col-md-8 { grid-column: span 8; }
}

.checkout-grid .form-control {
  width: 100%;
}

.form-control[readonly] {
  background-color: rgb(var(--color-secondary-background));
}

.checkout-radio {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.checkout-radio + .checkout-radio {
  margin-top: 1.2rem;
}

.checkout-radio input {
  margin-top: 0.4rem;
  accent-color: rgb(var(--color-button));
  width: 1.8rem;
  height: 1.8rem;
  flex-shrink: 0;
}

.checkout-summary {
  padding: 2.4rem;
  border-radius: var(--blocks-radius, 0.8rem);
  background: rgb(var(--color-secondary-background));
}

@media (min-width: 1024px) {
  .checkout-summary {
    position: sticky;
    top: calc(var(--header-height, 0px) + 2rem);
  }
}

.checkout-summary__item {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  padding-block: 1rem;
}

.checkout-summary__item + .checkout-summary__item {
  border-top: 1px solid rgb(var(--color-border));
}

.checkout-summary__thumb {
  position: relative;
  width: 6.4rem;
  flex-shrink: 0;
}

.checkout-summary__thumb img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--blocks-radius-sm, 0.6rem);
  background: rgb(var(--color-background));
}

.checkout-summary__qty {
  position: absolute;
  top: -0.8rem;
  right: -0.8rem;
  min-width: 2.2rem;
  height: 2.2rem;
  padding-inline: 0.6rem;
  border-radius: 1.1rem;
  background: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  font-size: 1.2rem;
  line-height: 2.2rem;
  text-align: center;
}

.checkout-summary__totals {
  display: grid;
  gap: 0.8rem;
  margin-top: 1.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgb(var(--color-border));
}

.checkout-summary fieldset {
  border: 0;
  padding: 0;
  margin: 2rem 0 0;
}

.checkout-summary .btn {
  margin-top: 2rem;
}

.checkout-summary .btn--link {
  margin-top: 1.2rem;
}

/* --- Pedido confirmado --- */
.pedido-confirmado__box {
  max-width: 72rem;
  margin-inline: auto;
}

.cart-item .price,
.cart-item__action .font-body-bolder,
.cart-item__total .font-body-bolder {
  white-space: nowrap;
}

.checkout-block__nota {
  margin-top: 1.6rem;
}

.checkout-summary .btn--link-carrinho {
  margin-top: 1.2rem;
}

.checkout-summary .text-center {
  margin-top: 1.2rem;
}

@media (max-width: 767px) {
  .checkout-block,
  .checkout-summary {
    padding: 1.6rem;
  }
}

.pedido-confirmado__header {
  justify-items: center;
  margin-bottom: 3.2rem;
}

.pedido-confirmado__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 6.4rem;
  height: 6.4rem;
  padding: 0;
  border-radius: 50%;
}

.pedido-confirmado__pagar,
.pedido-confirmado__resumo {
  margin-bottom: 2.4rem;
}

.pedido-confirmado__wa {
  background-color: #25d366;
  border-color: #25d366;
}

.pedido-confirmado__wa svg {
  width: 2rem;
  height: 2rem;
}

/* Painel "Calcular frete": o cart.css arredonda .cart__addon com o raio dos botões
   (pílula) e só volta a 1rem quando o JS do tema põe .active ao abrir. Aqui o painel
   já nasce aberto e não usa esse JS, então o estado vem do próprio <details>. */
.cart__addon:has(details[open]) {
  border-radius: min(var(--buttons-radius), 1rem);
}