/* =========================================================
   FRIZA GELO
   COMPONENTS.CSS
   Componentes reutilizáveis da interface
========================================================= */


/* =========================================================
   1. BOTÕES
========================================================= */

.button {
  display: inline-flex;

  align-items: center;
  justify-content: center;
  gap: var(--space-2);

  min-height: 48px;

  padding: 0.8rem 1.25rem;

  border: 1px solid transparent;
  border-radius: var(--radius-md);

  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  line-height: 1;

  cursor: pointer;

  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}


.button:hover {
  transform: translateY(-1px);
}


.button:active {
  transform: translateY(0);
}


.button:disabled {
  cursor: not-allowed;

  opacity: 0.55;

  transform: none;
}


.button-primary {
  color: var(--color-white);
  background: var(--color-blue);

  box-shadow:
    0 8px 18px rgba(31, 120, 209, 0.18);
}


.button-primary:hover {
  color: var(--color-white);
  background: var(--color-blue-hover);

  box-shadow:
    0 10px 24px rgba(31, 120, 209, 0.24);
}


.button-secondary {
  color: var(--color-text-strong);
  background: var(--color-white);

  border-color: var(--color-border);
}


.button-secondary:hover {
  color: var(--color-text-strong);
  background: var(--color-surface);

  border-color: var(--color-border-strong);
}


.button-light {
  color: var(--color-navy);
  background: var(--color-white);

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.1);
}


.button-light:hover {
  color: var(--color-navy);
  background: var(--color-ice);
}


.button-full {
  width: 100%;
}


/* =========================================================
   2. FORMULÁRIO
========================================================= */

.order-form-wrapper {
  position: relative;

  display: flex;
  flex-direction: column;

  width: 100%;

  padding: var(--space-8);

  background:
    rgba(255, 255, 255, 0.96);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-xl);

  box-shadow: var(--shadow-lg);
}


.order-form-header {
  margin-bottom: var(--space-8);

  text-align: center;
}


#order-form {
  display: flex;
  flex-direction: column;

  min-width: 0;
  width: 100%;
}


.form-eyebrow {
  display: inline-block;

  margin-bottom: var(--space-2);

  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);

  color: var(--color-blue);
}


.order-form-header h2 {
  margin-bottom: var(--space-2);

  font-size: clamp(1.7rem, 2vw, 2.15rem);
  text-align: center;
}


/* =========================================================
   2.1 PROGRESSO DO FORMULÁRIO
========================================================= */

.form-progress {
  display: flex;

  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;

  gap: var(--space-2);

  width: 100%;

  margin-top: var(--space-3);

  font-size: 0.95rem;
}


.form-progress-item {
  display: inline-flex;

  align-items: center;

  font-size: 1rem;
  font-weight: var(--font-weight-semibold);

  color: var(--color-text-muted);

  transition:
    color var(--transition-fast),
    opacity var(--transition-fast);
}


/* Etapa atual */

.form-progress-item.is-active {
  color: var(--color-blue);
}


/* Etapa concluída */

.form-progress-item.is-complete {
  color: #0f7a55;
}


.form-progress-item.is-complete::before {
  content: "✓";

  margin-right: 0.3rem;

  font-weight: var(--font-weight-bold);
}


/* Separadores */

.form-progress-separator {
  font-size: 1rem;

  font-weight: var(--font-weight-semibold);

  color: var(--color-blue);

  opacity: 0.75;
}


/* =========================================================
   3. GRUPOS DE FORMULÁRIO
========================================================= */

.form-step {
  display: flex;
  flex-direction: column;

  min-width: 0;

  gap: var(--space-6);
}


@media (min-width: 769px) {

  /*
    Etapa 1 fica com altura natural
    para não criar espaço vazio
    abaixo do botão Continuar.
  */

  .form-step {
    min-height: auto;
  }


  /*
    Etapas 2 e 3 mantêm altura
    mínima mais estável.
  */

  .form-step[data-step="2"],
  .form-step[data-step="3"] {
    min-height: 610px;
  }

}


.form-group {
  display: flex;
  flex-direction: column;

  gap: var(--space-2);
}


.form-label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);

  color: var(--color-text-strong);
}


.optional {
  margin-left: var(--space-1);

  font-weight: var(--font-weight-regular);

  color: var(--color-text-muted);
}


.form-help {
  display: block;

  color: var(--color-text-muted);

  line-height: 1.45;
}


/* =========================================================
   4. INPUTS / TEXTAREA / SELECT
========================================================= */

.form-group input,
.form-group textarea,
.form-group select {
  min-height: 48px;

  padding: 0.8rem 0.95rem;

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

  outline: none;

  background: var(--color-white);

  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast);
}


.form-group textarea {
  min-height: 110px;

  resize: vertical;
}


#observacao {
  min-height: 88px;
}


.form-group input:hover,
.form-group textarea:hover,
.form-group select:hover {
  border-color: var(--color-border-strong);
}


.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--color-blue);

  box-shadow:
    0 0 0 3px rgba(31, 120, 209, 0.12);
}


.form-group input:disabled,
.form-group textarea:disabled,
.form-group select:disabled {
  cursor: not-allowed;

  background: var(--color-surface);

  color: var(--color-text-muted);
}


/* =========================================================
   5. INPUT DATE
========================================================= */

input[type="date"] {
  color: var(--color-text-strong);
}


input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;

  opacity: 0.7;
}


/* =========================================================
   6. RADIO / SELECTION CARDS
========================================================= */

.option-grid {
  display: grid;

  gap: var(--space-3);
}


.option-grid-two {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
}


.selection-card {
  position: relative;

  display: flex;

  align-items: center;
  justify-content: center;

  min-height: 64px;

  padding: var(--space-4);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

  background: var(--color-white);

  cursor: pointer;

  transition:
    border-color var(--transition-fast),
    background var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}


.selection-card:hover {
  border-color: var(--color-blue);

  background: var(--color-surface-blue);
}


.selection-card:active {
  transform: scale(0.99);
}


.selection-card input {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: 0;

  pointer-events: none;
}


.selection-card span {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);

  color: var(--color-text-strong);
}


.selection-card:has(input:checked) {
  border-color: var(--color-blue);

  background:
    linear-gradient(
      180deg,
      rgba(191, 232, 255, 0.55),
      rgba(234, 246, 253, 0.95)
    );

  box-shadow:
    0 0 0 3px rgba(31, 120, 209, 0.1);
}


.selection-card:has(input:checked) span {
  color: var(--color-blue);
}


.selection-card:has(input:focus-visible) {
  outline: 3px solid rgba(31, 120, 209, 0.22);
  outline-offset: 2px;
}


/* =========================================================
   6.1 PAGAMENTO
========================================================= */

.payment-group {
  min-width: 0;

  margin: 0;
  padding: 0;

  border: 0;
}


.payment-group legend {
  padding: 0;
}


.payment-options {
  margin-top: var(--space-2);
}


.payment-option {
  min-height: 54px;

  padding:
    var(--space-3)
    var(--space-4);
}


.payment-option span {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
}


/* =========================================================
   7. AÇÕES DO FORMULÁRIO
========================================================= */

.form-actions {
  display: grid;

  grid-template-columns:
    minmax(0, 0.8fr)
    minmax(0, 1.2fr);

  gap: var(--space-3);

  margin-top: auto;
}


/* =========================================================
   8. FEEDBACK DO FORMULÁRIO
========================================================= */

.form-feedback {
  display: none;

  margin-top: var(--space-5);

  padding: var(--space-4);

  border-radius: var(--radius-md);

  font-size: var(--text-sm);
  line-height: 1.5;
}


.form-feedback.is-visible {
  display: block;
}


.form-feedback.is-success {
  color: #0f6245;

  background: #eaf8f2;

  border: 1px solid #bde7d5;
}


.form-feedback.is-error {
  color: #9c2f3b;

  background: #fff0f1;

  border: 1px solid #f0c4ca;
}


.form-feedback.is-loading {
  color: var(--color-text);

  background: var(--color-surface-blue);

  border: 1px solid var(--color-border);
}


/* =========================================================
   9. ESTADO DE ERRO NOS CAMPOS
========================================================= */

.form-group.has-error input,
.form-group.has-error textarea,
.form-group.has-error select {
  border-color: var(--color-error);

  box-shadow:
    0 0 0 3px rgba(200, 62, 77, 0.08);
}


.field-error {
  font-size: var(--text-sm);

  color: var(--color-error);
}


/* =========================================================
   10. QUANTIDADE DE PRODUTOS / STEPPER
========================================================= */

.product-quantity-list {
  display: flex;
  flex-direction: column;

  gap: var(--space-3);
}


.product-quantity-item {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: var(--space-5);

  min-height: 72px;

  padding:
    var(--space-4)
    var(--space-5);

  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);

  background: var(--color-white);

  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast);
}


.product-quantity-item:hover {
  border-color: var(--color-border-strong);
}


.product-quantity-info {
  display: flex;
  flex-direction: column;

  min-width: 0;

  gap: 2px;
}


.product-quantity-info strong {
  display: block;

  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;

  color: var(--color-text-strong);
}


.product-unit-price {
  display: block;

  font-size: var(--text-sm);
  font-weight: var(--font-weight-regular);
  line-height: 1.3;

  color: var(--color-text-muted);
}


.quantity-stepper {
  display: inline-grid;

  grid-template-columns:
    44px
    52px
    44px;

  align-items: center;

  flex: 0 0 auto;

  overflow: hidden;

  min-height: 44px;

  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);

  background: var(--color-white);
}


.quantity-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  padding: 0;

  border: 0;

  background: var(--color-surface-blue);

  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1;

  color: var(--color-blue);

  cursor: pointer;

  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}


.quantity-button:hover {
  background: var(--color-ice);
}


.quantity-button:active {
  transform: scale(0.96);
}


.quantity-button:focus-visible {
  position: relative;
  z-index: 1;

  outline: 3px solid rgba(31, 120, 209, 0.2);
  outline-offset: -2px;
}


.quantity-stepper input[type="number"] {
  width: 52px;
  min-height: 44px;

  padding: 0;

  border: 0;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  border-radius: 0;

  background: var(--color-white);

  text-align: center;

  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);

  color: var(--color-text-strong);

  appearance: textfield;
  -moz-appearance: textfield;
}


.quantity-stepper input[type="number"]::-webkit-inner-spin-button,
.quantity-stepper input[type="number"]::-webkit-outer-spin-button {
  margin: 0;

  -webkit-appearance: none;
}


.quantity-stepper input[type="number"]:focus {
  box-shadow: none;
}


.product-quantity-item:has(
  .quantity-stepper input[value]:not([value="0"])
) {
  border-color: rgba(31, 120, 209, 0.35);

  background: var(--color-surface-blue);
}


/* =========================================================
   11. RESUMO DO PEDIDO
========================================================= */

.order-summary {
  padding:
    var(--space-4)
    var(--space-5);

  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);

  background: var(--color-surface-blue);
}


.order-summary-final {
  border-color: rgba(31, 120, 209, 0.18);

  background:
    rgba(234, 246, 253, 0.72);
}


.order-summary-label {
  display: block;

  margin-bottom: var(--space-3);

  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);

  text-transform: uppercase;
  letter-spacing: 0.04em;

  color: var(--color-blue);
}


.order-summary p {
  margin: 0;

  font-size: var(--text-sm);
  line-height: 1.4;

  color: var(--color-text);
}


.order-summary-empty {
  color: var(--color-text-muted);
}


/* Produto selecionado */

.order-summary-products {
  display: flex;
  flex-direction: column;

  gap: 2px;
}


.order-summary-products strong {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);

  color: var(--color-text-strong);
}


.order-summary-products span {
  font-size: var(--text-sm);

  color: var(--color-text-muted);
}


/* Data e cidade no resumo final */

.order-summary-details {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: var(--space-3);
}


.order-summary-detail {
  display: flex;
  flex-direction: column;

  gap: 2px;

  min-width: 0;
}


.order-summary-detail span {
  font-size: var(--text-xs);

  color: var(--color-text-muted);
}


.order-summary-detail strong {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);

  line-height: 1.35;

  color: var(--color-text-strong);

  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}


/* Divisória */

.order-summary-divider {
  width: 100%;
  height: 1px;

  margin:
    var(--space-3)
    0;

  background: var(--color-border);
}


/* Valores */

.order-summary-values {
  display: flex;
  flex-direction: column;

  gap: var(--space-2);
}


.order-summary-row {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: var(--space-4);

  font-size: var(--text-sm);
}


.order-summary-row > span {
  color: var(--color-text-muted);
}


.order-summary-row > strong {
  font-weight: var(--font-weight-semibold);

  color: var(--color-text-strong);
}


/* Total */

.order-summary-total {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: var(--space-4);
}


.order-summary-total span {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);

  text-transform: uppercase;
  letter-spacing: 0.03em;

  color: var(--color-text-strong);
}


.order-summary-total strong {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);

  color: var(--color-navy);
}


/* Frete */

.order-summary-delivery-free {
  display: inline-flex;

  align-items: center;

  gap: var(--space-2);
}


.order-summary-old-price {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);

  text-decoration: line-through;
  text-decoration-thickness: 1px;

  color: var(--color-text-muted);

  opacity: 0.65;
}


.order-summary-free {
  font-weight: var(--font-weight-semibold);

  color: #0f6245;
}


.order-summary-benefit {
  margin-top: var(--space-3);

  padding:
    var(--space-2)
    var(--space-3);

  border-radius: var(--radius-sm);

  background: rgba(255, 255, 255, 0.7);

  font-size: var(--text-xs);
  line-height: 1.4;

  color: var(--color-text-muted);
}


.order-summary-benefit strong {
  color: var(--color-text-strong);
}


.order-summary-benefit.is-success {
  border: 1px solid rgba(15, 98, 69, 0.12);

  background: #eaf8f2;

  color: #0f6245;
}


.order-summary-benefit.is-success strong {
  color: #0f6245;
}


/* =========================================================
   12. SEÇÕES INTERNAS DO FORMULÁRIO
========================================================= */

.form-section-heading {
  padding-top: var(--space-1);
}


.form-section-heading h3 {
  margin-bottom: var(--space-1);

  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);

  color: var(--color-text-strong);
}


.form-section-heading p {
  margin: 0;

  font-size: var(--text-sm);
  line-height: 1.5;

  color: var(--color-text-muted);
}


/* =========================================================
   13. LINHAS DO FORMULÁRIO
========================================================= */

.form-row {
  display: grid;

  gap: var(--space-3);
}


.form-row-two {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1.4fr);
}


.form-row-city-state {
  grid-template-columns:
    minmax(0, 1fr)
    92px;
}


/* =========================================================
   14. CAMPOS PREENCHIDOS AUTOMATICAMENTE
========================================================= */

.form-group input[readonly] {
  cursor: default;

  background: var(--color-surface);

  color: var(--color-text);
}


.form-group input[readonly]:focus {
  border-color: var(--color-border);

  box-shadow: none;
}


/* =========================================================
   15. FEEDBACK DO CEP
========================================================= */

#cep-feedback {
  min-height: 1.4em;
}


#cep-feedback.is-success {
  color: #0f6245;
}


#cep-feedback.is-error {
  color: var(--color-error);
}


/* =========================================================
   16. PRODUCT CARD
========================================================= */

.product-card {
  overflow: hidden;

  border: 1px solid var(--color-border);

  border-radius: var(--radius-xl);

  background: var(--color-white);

  box-shadow: var(--shadow-sm);

  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}


.product-card:hover {
  transform: translateY(-4px);

  border-color: var(--color-border-strong);

  box-shadow: var(--shadow-md);
}


.product-card .product-image {
  display: block;

  width: 100%;
  aspect-ratio: 1 / 1;

  object-fit: cover;

  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
}


.product-card h3 {
  padding:
    var(--space-5)
    var(--space-6);

  font-size: var(--text-lg);
}


/* =========================================================
   17. STEP ITEM
========================================================= */

.step-item {
  display: flex;

  flex-direction: column;
  align-items: center;

  text-align: center;
}


.step-icon-placeholder {
  margin-bottom: var(--space-5);

  background: var(--color-surface-blue);

  border-color: var(--color-border);
}


.step-item h3 {
  margin-bottom: var(--space-2);

  font-size: var(--text-lg);
}


.step-item p {
  max-width: 220px;

  font-size: var(--text-sm);

  color: var(--color-text-muted);
}


.step-arrow {
  display: flex;

  align-items: center;
  justify-content: center;

  font-family: var(--font-heading);
  font-size: 1.7rem;
  font-weight: var(--font-weight-bold);

  color: var(--color-blue);

  opacity: 0.7;
}


/* =========================================================
   18. ÁREA DE ATENDIMENTO / BADGES
========================================================= */

.service-area-list {
  display: flex;

  flex-wrap: wrap;

  gap: var(--space-3);

  margin:
    var(--space-6)
    0
    0;

  list-style: none;
}


.service-area-list li {
  display: inline-flex;

  align-items: center;

  min-height: 40px;

  padding:
    0.6rem
    0.9rem;

  border: 1px solid var(--color-border);

  border-radius: var(--radius-pill);

  background: var(--color-surface-blue);

  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);

  color: var(--color-text);
}


/* =========================================================
   19. ACCORDION / FAQ
========================================================= */

.accordion {
  overflow: hidden;

  border: 1px solid var(--color-border);

  border-radius: var(--radius-xl);

  background: var(--color-white);
}


.accordion-item + .accordion-item {
  border-top: 1px solid var(--color-border);
}


.accordion-trigger {
  display: flex;

  width: 100%;

  align-items: center;
  justify-content: space-between;

  gap: var(--space-6);

  padding: var(--space-6);

  text-align: left;

  color: var(--color-text-strong);

  background: transparent;

  cursor: pointer;

  transition:
    background var(--transition-fast),
    color var(--transition-fast);
}


.accordion-trigger:hover {
  background: var(--color-surface);
}


.accordion-trigger > span:first-child {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
}


.accordion-icon {
  display: flex;

  flex: 0 0 auto;

  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;

  border-radius: var(--radius-pill);

  background: var(--color-surface-blue);

  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: var(--font-weight-semibold);

  color: var(--color-blue);

  transition:
    transform var(--transition-base),
    background var(--transition-fast);
}


.accordion-trigger[aria-expanded="true"] {
  background: var(--color-surface);
}


.accordion-trigger[aria-expanded="true"] .accordion-icon {
  transform: rotate(45deg);

  background: var(--color-ice);
}


.accordion-content {
  padding:
    0
    var(--space-6)
    var(--space-6);
}


.accordion-content p {
  max-width: 800px;

  color: var(--color-text-muted);
}


/* =========================================================
   20. HEADER / NAV COMPONENTS
========================================================= */

.brand {
  display: inline-flex;

  align-items: center;
}


.main-nav {
  display: flex;

  align-items: center;

  gap: var(--space-6);
}


.main-nav a {
  position: relative;

  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);

  color: var(--color-text);
}


.main-nav a::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -6px;

  width: 0;
  height: 2px;

  border-radius: var(--radius-pill);

  background: var(--color-blue);

  transition:
    width var(--transition-base);
}


.main-nav a:hover {
  color: var(--color-blue);
}


.main-nav a:hover::after {
  width: 100%;
}


/* =========================================================
   21. FOOTER COMPONENTS
========================================================= */

.footer-title {
  margin-bottom: var(--space-4);

  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);

  text-transform: uppercase;
  letter-spacing: 0.06em;
}


.footer-contact {
  display: flex;

  flex-direction: column;

  gap: var(--space-2);
}


.footer-contact a {
  width: fit-content;
}


/* =========================================================
   22. LOADING / SUBMIT STATE
========================================================= */

.button.is-loading {
  position: relative;

  pointer-events: none;
}


/*
  Enquanto o pedido está sendo enviado,
  o botão recebe um floco de neve girando.

  O texto "Enviando..." é controlado
  pelo form.js.
*/

.button.is-loading::after {
  content: "❄";

  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 20px;
  height: 20px;

  flex: 0 0 auto;

  font-size: 1rem;
  line-height: 1;

  color: var(--color-white);

  transform-origin: center;

  animation:
    button-snowflake-spin
    0.9s
    linear
    infinite;
}


@keyframes button-snowflake-spin {

  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }

}


/* =========================================================
   23. TOAST
   Caso a gente queira usar futuramente
========================================================= */

.toast {
  position: fixed;

  right: 24px;
  bottom: 24px;

  z-index: var(--z-overlay);

  width:
    min(
      360px,
      calc(100% - 32px)
    );

  padding:
    var(--space-4)
    var(--space-5);

  border:
    1px solid
    var(--color-border);

  border-radius:
    var(--radius-md);

  background:
    var(--color-white);

  box-shadow:
    var(--shadow-lg);

  opacity: 0;

  transform:
    translateY(16px);

  pointer-events: none;

  transition:
    opacity var(--transition-base),
    transform var(--transition-base);
}


.toast.is-visible {
  opacity: 1;

  transform:
    translateY(0);

  pointer-events: auto;
}


.toast.is-success {
  border-color: #bde7d5;
}


.toast.is-error {
  border-color: #f0c4ca;
}


/* =========================================================
   24. TAG / BADGE GENÉRICO
========================================================= */

.badge {
  display: inline-flex;

  align-items: center;

  min-height: 30px;

  padding:
    0.35rem
    0.7rem;

  border:
    1px solid
    var(--color-border);

  border-radius:
    var(--radius-pill);

  background:
    var(--color-surface-blue);

  font-size: var(--text-xs);

  font-weight: var(--font-weight-semibold);

  color: var(--color-blue);
}


/* =========================================================
   25. CARD GENÉRICO
========================================================= */

.card {
  border:
    1px solid
    var(--color-border);

  border-radius:
    var(--radius-lg);

  background:
    var(--color-white);

  box-shadow:
    var(--shadow-sm);
}


/* =========================================================
   26. DIVIDER
========================================================= */

.divider {
  width: 100%;
  height: 1px;

  background:
    var(--color-border);
}


/* =========================================================
   27. MOBILE
========================================================= */

@media (max-width: 768px) {

  .button {
    min-height: 50px;
  }


  .order-form-wrapper {
    padding: var(--space-6);
  }


  .order-form-header {
    margin-bottom: var(--space-6);
  }


  .form-progress {
    justify-content: center;
    flex-wrap: wrap;

    gap: 7px;

    font-size: 0.9rem;
  }


  .form-progress-item {
    font-size: 0.9rem;
  }


  .form-step {
    min-height: 0;

    gap: var(--space-5);
  }


  .form-progress-item.is-complete::before {
    margin-right: 3px;
  }


  .form-actions {
    grid-template-columns: 1fr;
  }


  /*
    No mobile:
    Voltar fica primeiro.
    Continuar / Enviar fica abaixo.
  */

  .form-actions .button-secondary {
    order: 1;
  }


  .form-actions .button-primary {
    order: 2;
  }


  .selection-card {
    min-height: 60px;
  }


  .payment-option {
    min-height: 52px;
  }


  .product-quantity-item {
    min-height: 68px;

    padding: var(--space-4);
  }


  .quantity-stepper {
    grid-template-columns:
      42px
      48px
      42px;
  }


  .quantity-button {
    width: 42px;
    height: 42px;
  }


  .quantity-stepper input[type="number"] {
    width: 48px;
    min-height: 42px;
  }


  .form-row-two {
    grid-template-columns:
      1fr
      1fr;
  }


  .form-row-city-state {
    grid-template-columns:
      minmax(0, 1fr)
      84px;
  }


  .order-summary {
    padding:
      var(--space-4);
  }


  .product-card h3 {
    padding:
      var(--space-4)
      var(--space-5);

    font-size:
      var(--text-md);
  }


  .accordion-trigger {
    padding:
      var(--space-5);
  }


  .accordion-content {
    padding:
      0
      var(--space-5)
      var(--space-5);
  }


  .main-nav {
    gap:
      var(--space-4);
  }

}


/* =========================================================
   28. MOBILE PEQUENO
========================================================= */

@media (max-width: 480px) {

  .order-form-wrapper {
    padding:
      var(--space-5);

    border-radius:
      var(--radius-lg);
  }


  .form-progress {
    width: 100%;

    justify-content: center;

    gap: 6px;

    font-size: 0.85rem;
  }


  .form-progress-item {
    font-size: 0.85rem;
  }


  .form-progress-separator {
    font-size: 0.8rem;
  }


  .option-grid-two {
    grid-template-columns:
      1fr
      1fr;
  }


  .payment-options {
    grid-template-columns: 1fr;
  }


  .payment-option {
    min-height: 50px;
  }


  .product-quantity-item {
    align-items: flex-start;

    flex-direction: column;

    gap:
      var(--space-3);
  }


  .quantity-stepper {
    width: 100%;

    grid-template-columns:
      48px
      minmax(0, 1fr)
      48px;
  }


  .quantity-button {
    width: 48px;
    height: 46px;
  }


  .quantity-stepper input[type="number"] {
    width: 100%;
    min-height: 46px;
  }


  .form-row-two,
  .form-row-city-state {
    grid-template-columns:
      1fr;
  }


  .order-summary-details {
    grid-template-columns: 1fr;

    gap: var(--space-2);
  }


  .order-summary-detail strong {
    white-space: normal;
  }


  .order-summary-row,
  .order-summary-total {
    gap:
      var(--space-3);
  }


  .order-summary-delivery-free {
    gap:
      var(--space-1);
  }


  .accordion-trigger {
    gap:
      var(--space-4);
  }


  .accordion-trigger > span:first-child {
    font-size:
      var(--text-sm);
  }


  .service-area-list {
    gap:
      var(--space-2);
  }


  .service-area-list li {
    min-height: 36px;

    padding:
      0.5rem
      0.75rem;
  }


  .toast {
    right: 16px;
    bottom: 16px;

    width:
      calc(100% - 32px);
  }

}


/* =========================================================
   29. PREFERÊNCIA POR MENOS MOVIMENTO
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .button.is-loading::after {
    animation: none;
  }

}