/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. VARIÁVEIS LOCAIS: Tokens de espaçamento e cores.
  2. CONTAINER PRINCIPAL: Grid base e perspectiva 3D.
  3. ESTRUTURA DO CARD: Flip logic (.inner) e faces (.front, .back).
  4. CONTEÚDO DA FRENTE (FRONT): Header, Preço, Descrição, Footer.
  5. CONTEÚDO DO VERSO (BACK): Detalhes de packs, Price Box e Notas.
  6. VARIANTES DE CARTÃO: Cores por serviço (VivaGym, Online, etc.).
  7. INTERAÇÕES E ANIMAÇÕES: Staggered entrance e Flip states.
  8. MEDIA QUERIES (DESKTOP): Grid 2 colunas e efeitos Hover.
  9. MEDIA QUERIES (MOBILE): Carrossel, Compactação e Safe Areas.
  10. MODAIS ESPECÍFICOS: Estilos para o Modal de Mapa e Tabela Completa.
*/

/* ==========================================================================
   1. VARIÁVEIS LOCAIS (TOKENS)
   ========================================================================== */
.pricing-card {
  --pricing-transition-duration: var(--duration-elegant);
  --pricing-flip-easing: var(--ease-ethereal);

  /* Sistema de espaçamento compacto para pricing mobile */
  --pricing-mobile-xs: clamp(0.125rem, 0.1rem + 0.125vw, 0.25rem);
  --pricing-mobile-sm: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);
  --pricing-mobile-md: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
  --pricing-mobile-lg: clamp(0.75rem, 0.6rem + 0.75vw, 1rem);
}

/* ==========================================================================
   2. CONTAINER PRINCIPAL
   ========================================================================== */
.pricing__container {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;

  /* Base: Mobile */
  gap: var(--space-xl);
  align-items: stretch;
  max-width: var(--max-width-content-narrow);
  margin: 0 auto;
  perspective: 1000px;
}

/* ==========================================================================
   3. ESTRUTURA DO CARD (FLIP LOGIC)
   ========================================================================== */
.pricing-card__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  height: 100%;
  border-radius: var(--md-sys-shape-corner-extra-large);
  transform-style: preserve-3d;
  transition: transform var(--pricing-transition-duration) var(--pricing-flip-easing);
}

.pricing-card.is-flipped .pricing-card__inner {
  transform: rotateY(180deg);
}

/* Estilos Comuns para ambas as faces */
.pricing-card__front,
.pricing-card__back {
  display: flex;
  flex-direction: column;
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-extra-large);
  backface-visibility: hidden;
  transform-style: preserve-3d;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Face oculta não recebe cliques (backface-visibility só esconde visualmente) */
.pricing-card.is-flipped .pricing-card__front {
  pointer-events: none;
}

.pricing-card:not(.is-flipped) .pricing-card__back {
  pointer-events: none;
}

/* Flip Hint (Ícone de Rotação) */
.flip-hint {
  position: absolute;
  top: var(--space-s);
  right: var(--space-s);
  z-index: var(--z-above-content);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--height-component-xs);
  height: var(--height-component-xs);
  padding: 0;
  overflow: hidden;
  font-size: var(--text-lg);
  color: var(--md-sys-color-primary);
  cursor: pointer;
  background: var(--md-sys-color-surface-container-high);
  border-radius: var(--md-sys-shape-corner-full);
  box-shadow: var(--md-sys-elevation-level1);
  opacity: 0.8;
  transition:
    padding var(--duration-smooth) var(--ease-fluid),
    opacity var(--duration-smooth) var(--ease-fluid),
    background-color var(--duration-smooth) var(--ease-fluid),
    color var(--duration-smooth) var(--ease-fluid),
    box-shadow var(--duration-smooth) var(--ease-fluid);
}

.flip-hint iconify-icon {
  transition: transform var(--duration-smooth) var(--ease-fluid);
}

.flip-hint__text {
  max-width: 0;
  margin-left: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  opacity: var(--opacity-hidden);
  transition:
    max-width var(--duration-smooth) var(--ease-fluid),
    opacity var(--duration-smooth) var(--ease-fluid),
    margin-left var(--duration-smooth) var(--ease-fluid);
}

.pricing-card:hover .flip-hint {
  opacity: var(--opacity-visible);
}

.flip-hint:hover {
  padding: 0 var(--space-s);
  color: var(--md-sys-color-on-primary);
  background: var(--md-sys-color-primary);
  box-shadow: var(--shadow-sm);
  opacity: var(--opacity-visible);
}

.flip-hint:hover iconify-icon {
  transform: rotate(-180deg);
}

.flip-hint:hover .flip-hint__text {
  max-width: 60px;
  margin-left: var(--space-3xs);
  opacity: var(--opacity-visible);
}

/* Esconder indicadores (dots) do carrossel no desktop */
.pricing-dots {
  display: none;
}

/* ==========================================================================
   4. CONTEÚDO DA FRENTE (FRONT)
   ========================================================================== */
.pricing-card__front {
  z-index: var(--z-elevated);
  gap: var(--space-m);
  align-items: center;
  padding: var(--space-l);
  transition:
    border-color var(--duration-smooth) var(--ease-fluid),
    box-shadow var(--duration-smooth) var(--ease-fluid),
    transform var(--duration-smooth) var(--ease-fluid),
    background-color var(--duration-smooth) var(--ease-fluid);
}

.pricing-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-s);
  width: 100%;
  flex: 1 1;
}

/* Badge: Sessão Gratuita / Risk Reversal */
.pricing-badge--free-session {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--md-sys-color-on-tertiary-container);
  background: var(--md-sys-color-tertiary-container);
  padding: var(--space-xs) var(--space-m);
  border-radius: var(--md-sys-shape-corner-small);
  line-height: 1.4;
}

.pricing-badge--free-session iconify-icon {
  font-size: 1.1em;
  flex-shrink: 0;
}

/* Badge: Packs Familia & Amigo (Teal) */
.pricing-badge--teal {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--md-sys-color-on-tertiary-container);
  background: var(--md-sys-color-tertiary-container);
  padding: var(--space-xs) var(--space-m);
  border-radius: var(--md-sys-shape-corner-small);
  text-align: center;
  line-height: 1.4;
}

html.dark-theme .pricing-badge--teal {
  color: var(--md-sys-color-tertiary-container);
  background: var(--md-sys-color-on-tertiary-container);
}

.pricing-badge--teal iconify-icon {
  font-size: 1.1em;
  flex-shrink: 0;
}

/* Badge: Preço Fundador */
.pricing-badge--campaign {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  color: var(--brand-neutral-white);
  background: var(--pricing-online);
  padding: var(--space-xs) var(--space-m);
  border-radius: var(--md-sys-shape-corner-small);
  text-align: center;
  line-height: 1.4;
}

.pricing-badge--campaign iconify-icon {
  font-size: 1.1em;
  flex-shrink: 0;
}

/* Preço original riscado (campanha) */
.price-original {
  text-decoration: line-through;
  color: var(--md-sys-color-on-surface-variant);
  opacity: 0.7;
  font-weight: normal;
  font-size: var(--text-lg);
  vertical-align: baseline;
}

.pricing-value {
  display: flex;
  gap: var(--space-gap-micro);
  align-items: baseline;
  justify-content: center;
  margin-bottom: var(--space-xs);
  color: var(--md-sys-color-primary);
}

.pricing-prefix {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--md-sys-color-on-surface-variant);
  text-transform: lowercase;
  opacity: 0.8;
}

.pricing-number {
  font-size: var(--text-6xl);

  /* DESTAQUE MÁXIMO NO NÚMERO */
  font-weight: var(--font-weight-black);
  line-height: 1;
}

.pricing-currency {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: inherit;
}

.pricing-suffix {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--md-sys-color-on-surface-variant);
  opacity: 0.7;
}

.pricing-title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--md-sys-color-on-surface);
  text-align: center;
}

.pricing-description {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-s);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--md-sys-color-on-surface-variant);
  text-align: center;
}

.pricing-description-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  justify-content: center;
  margin-top: var(--space-s);
}

.pricing-description-tags .pricing-badge {
  position: static;
  top: auto;
  right: auto;
  display: inline-flex;
  transform: none;
}

.pricing-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: auto;
}

/* ==========================================================================
   4.1. TOGGLE PLANOS (Domicílio / Outdoor)
   ========================================================================== */
.pricing-toggle-container {
  position: relative;
  display: flex;
  gap: 4px;
  width: 100%;
  padding: 4px;
  margin-bottom: var(--space-s);
  background: var(--md-sys-color-surface-container-highest);
  border-radius: var(--md-sys-shape-corner-medium);
}

.pricing-toggle-btn {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  flex: 1 1;
  gap: var(--space-xs);
  align-items: center;
  justify-content: center;
  padding: var(--space-s) var(--space-m);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: calc(var(--md-sys-shape-corner-medium) - 2px);
  transition: color var(--duration-smooth) var(--ease-fluid);
}

.pricing-toggle-btn.active {
  color: var(--md-sys-color-on-primary);
}

.pricing-toggle-btn iconify-icon {
  font-size: 1.1rem;
}

.pricing-toggle-slider {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: var(--z-base);
  width: calc(50% - 6px);
  height: calc(100% - 8px);
  pointer-events: none;
  background: var(--card-highlight);
  border-radius: calc(var(--md-sys-shape-corner-medium) - 2px);
  transition: transform var(--duration-smooth) var(--ease-snappy);
}

.pricing-toggle-slider.is-outdoor {
  transform: translateX(calc(100% + 4px));
}

.plan-content-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  width: 100%;
  flex: 1 1;
}

.plan-content {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  z-index: var(--z-base);
  transition:
    opacity var(--duration-smooth) var(--ease-fluid),
    visibility 0s linear var(--duration-smooth);
}

.plan-content.is-active {
  opacity: 1;
  visibility: visible;
  z-index: var(--z-elevated);
  transition:
    opacity var(--duration-smooth) var(--ease-fluid),
    visibility 0s linear 0s;
}

/* ==========================================================================
   5. CONTEÚDO DO VERSO (BACK)
   ========================================================================== */
.pricing-card__back {
  text-align: left;
  transform: rotateY(180deg);
}

.pricing-back-content {
  position: relative;
  z-index: var(--z-elevated);
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  justify-content: center;
  height: 100%;
  padding: var(--space-l);
}

.dc-price-box {
  box-sizing: border-box;
  width: min(100%, 22rem);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-l);
  text-align: left;
  background: oklch(from var(--md-sys-color-surface-container-highest) l c h / 82%);
  border: 1px solid oklch(from var(--md-sys-color-outline-variant) l c h / 32%);
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow:
    inset 0 1px 0 oklch(from var(--md-sys-color-surface-bright) l c h / 18%),
    0 var(--space-3xs) var(--space-l) oklch(0% 0 0deg / 12%);
}

.dc-price-list,
.dc-price-box .plan-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.dc-price-box .plan-content-wrapper {
  display: grid;
}

.dc-price-box .plan-content {
  grid-area: 1 / 1;
}

/* --- Sistema de Dropdown (Details/Summary) --- */
.dc-price-details {
  display: block;
  width: 100%;
  overflow: hidden;
  background: oklch(from var(--md-sys-color-surface-container-highest) l c h / 52%);
  border: 1px solid oklch(from var(--md-sys-color-outline-variant) l c h / 14%);
  border-radius: var(--md-sys-shape-corner-medium);
  transition:
    background-color var(--duration-smooth) var(--ease-fluid),
    border-color var(--duration-smooth) var(--ease-fluid),
    box-shadow var(--duration-smooth) var(--ease-fluid),
    transform var(--duration-smooth) var(--ease-fluid);
}

.dc-price-details[open] {
  background: oklch(from var(--md-sys-color-surface-container-highest) l c h / 92%);
  border-color: oklch(from var(--md-sys-color-primary) l c h / 32%);
  box-shadow:
    0 var(--space-4xs) var(--space-m) oklch(0% 0 0deg / 12%),
    inset 0 1px 0 oklch(from var(--md-sys-color-surface-bright) l c h / 12%);
  transform: translateY(calc(var(--space-5xs)*-1));
}

.dc-price-details[open].is-closing {
  transform: translateY(0);
  box-shadow: none;
}

.dc-price-summary {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xs);
  justify-items: center;
  align-items: center;
  width: 100%;
  min-height: calc(var(--touch-target-min, 44px) + var(--space-2xs));
  padding: var(--space-s) calc(var(--space-l) + var(--space-s)) var(--space-s) var(--space-s);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  list-style: none;
  border-radius: calc(var(--md-sys-shape-corner-medium) - 1px);
  transition:
    background-color var(--duration-smooth) var(--ease-fluid),
    box-shadow var(--duration-smooth) var(--ease-fluid),
    transform var(--duration-smooth) var(--ease-fluid);
}

.dc-price-summary::-webkit-details-marker {
  display: none;
}

.dc-price-summary::after {
  position: absolute;
  top: 50%;
  right: var(--space-s);
  font-size: 0.75rem;
  color: var(--md-sys-color-primary);
  content: '▼';
  opacity: 0.6;
  transform: translateY(-50%);
  transition:
    transform var(--duration-fast) var(--ease-snappy),
    opacity var(--duration-fast) var(--ease-snappy);
}

.dc-price-details[open]>.dc-price-summary::after {
  opacity: var(--opacity-visible);
  transform: translateY(-50%) rotate(180deg) scale(1.1);
}

.dc-price-summary:hover::after {
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
}

.dc-price-summary:hover {
  background: var(--md-sys-color-primary-container-low);
  box-shadow: inset 0 0 0 1px oklch(from var(--card-highlight) l c h / 30%);
  transform: translateY(calc(var(--space-5xs)*-1));
}

.dc-price-details[open] > .dc-price-summary {
  background: oklch(from var(--md-sys-color-primary-container-low) l c h / 46%);
  box-shadow: inset 0 0 0 1px oklch(from var(--card-highlight) l c h / 24%);
}

.dc-price-summary:active {
  background: var(--md-sys-color-primary-container-low);
  transform: none;
}

.dc-price-summary .pricing-detail-label,
.dc-price-summary .pricing-detail-label--normal {
  display: block;
  grid-column: 1;
  align-self: center;
  font-size: var(--text-sm);
  line-height: 1.15;
  min-width: 0;
  text-align: center;
}

.dc-price-summary .price-big {
  grid-column: 1;
  align-self: center;
  justify-self: center;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  text-align: center;
}

.dc-price-summary .price-row {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2xs);
  align-items: baseline;
  justify-content: center;
  min-width: 0;
}

.dc-price-summary .price-original {
  flex-shrink: 1;
  min-width: 0;
}

/* Estado base (fechado) - sempre renderizado mas escondido */
.dc-price-body {
  display: block;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  border-top: 1px solid transparent;
  opacity: var(--opacity-hidden);
  transform-origin: top center;
  transform: translateY(-10px) scale(0.98);
  will-change: max-height, opacity, transform, padding-top, padding-bottom;

  /* Transição suave para abrir e fechar */
  transition:
    max-height var(--duration-elegant) var(--ease-ethereal),
    opacity var(--duration-smooth) var(--ease-fluid),
    padding-top var(--duration-smooth) var(--ease-fluid),
    padding-bottom var(--duration-smooth) var(--ease-fluid),
    transform var(--duration-smooth) var(--ease-fluid),
    border-color var(--duration-smooth) var(--ease-fluid);
}

.dc-price-details .price-small {
  padding-inline: var(--space-s);
}

/* Estado aberto */
.dc-price-details[open] > .dc-price-body {
  max-height: 10rem;
  padding-top: var(--space-2xs);
  padding-bottom: var(--space-s);
  border-top: 1px solid oklch(from var(--md-sys-color-outline-variant) l c h / 20%);
  opacity: var(--opacity-visible);
  transform: translateY(0) scale(1);
  background: oklch(from var(--md-sys-color-surface-container-high) l c h / 55%);
}

/* Estado a fechar (ainda com [open] mas a transitar para fechado) */
.dc-price-details[open].is-closing > .dc-price-body {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top-color: transparent;
  opacity: var(--opacity-hidden);
  transform: translateY(-10px) scale(0.98);
}

.dc-price-details[open].is-closing>.dc-price-summary::after {
  opacity: 0.6;
  transform: translateY(-50%) rotate(0deg);
}

.dc-price-row {
  display: flex;
  flex-direction: row;
  gap: var(--space-m);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-s) 0;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.dc-price-row:last-child {
  border: none;
}

.dc-price-row--simple {
  padding-top: var(--space-s);
  padding-inline: var(--space-m);
  background: oklch(from var(--md-sys-color-surface-container-highest) l c h / 28%);
  border: 1px solid oklch(from var(--md-sys-color-outline-variant) l c h / 14%);
  border-radius: var(--md-sys-shape-corner-medium);
}

.dc-price-row .pricing-detail-label,
.dc-price-row .pricing-detail-label--normal {
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--md-sys-color-on-surface-variant);
}

.dc-price-row .price-big {
  /* justify-content: flex-end; */
  flex: 1 1;
  text-align: right;
}

.price-big {
  display: flex;
  gap: var(--space-xs);
  align-items: baseline;
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--card-highlight);
}

.dc-final-note {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-s);
  margin: 0;
  list-style: none;
  background: oklch(from var(--md-sys-color-surface-container-highest) l c h / 96%);
  border: 1px solid oklch(from var(--md-sys-color-outline-variant) l c h / 22%);
  border-radius: var(--md-sys-shape-corner-small);
}

.dc-final-note li {
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--md-sys-color-on-surface-variant);
}

.dc-note-line {
  display: inline;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  color: var(--md-sys-color-on-surface-variant);
  text-align: center;
}

.feature-map-button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-s);
  margin-top: var(--space-m);
}

.back-bg-decoration {
  position: absolute;
  top: -50%;
  right: -50%;
  z-index: var(--z-negative);
  width: 200%;
  height: 200%;
  pointer-events: none;
  background: radial-gradient(circle,
      var(--md-sys-color-primary-container-low) 0%,
      transparent 60%);
  opacity: 0.15;
  animation: spin 20s var(--easing-linear) infinite;
}

/* ==========================================================================
   6. VARIANTES DE CARTÃO (CORES)
   ========================================================================== */
.pricing-card--vivagym {
  --card-highlight: var(--pricing-vivagym);
}

.pricing-card--online {
  --card-highlight: var(--pricing-online);
}

.pricing-card--domicilio {
  --card-highlight: var(--pricing-domicilio);
}

.pricing-card--gcp {
  --card-highlight: var(--pricing-gcp);
}

.pricing-card .pricing-title {
  color: var(--card-highlight);
}

/* ==========================================================================
   6.1. ESTADOS DE DESTAQUE (CENTERED/ACTIVE - MOBILE ONLY)
   ========================================================================== */

/* 
   Destaque para cards centrados no mobile (via PricingCardsManager) 
   ou selecionados manualmente em mobile.
*/

/* ==========================================================================
   7. INTERAÇÕES E ANIMAÇÕES (HOVER EM DESKTOP)
   ========================================================================== */

@keyframes pricingCardEnter {
  from {
    opacity: var(--opacity-hidden);
    transform: translateY(30px);
  }

  to {
    opacity: var(--opacity-visible);
    transform: translateY(0);
  }
}

.pricing-card.is-visible:nth-child(1) {
  animation: pricingCardEnter var(--duration-elegant) var(--ease-ethereal) 0ms backwards;
}

.pricing-card.is-visible:nth-child(2) {
  animation: pricingCardEnter var(--duration-elegant) var(--ease-ethereal) var(--delay-sm) backwards;
}

.pricing-card.is-visible:nth-child(3) {
  animation: pricingCardEnter var(--duration-elegant) var(--ease-ethereal) var(--delay-md) backwards;
}

.pricing-card.is-visible:nth-child(4) {
  animation: pricingCardEnter var(--duration-elegant) var(--ease-ethereal) var(--delay-lg) backwards;
}

/* ==========================================================================
   8. MEDIA QUERIES (DESKTOP >= 769px)
   ========================================================================== */

/* ==========================================================================
   9. MEDIA QUERIES (MOBILE <= 768px)
   ========================================================================== */

/* ==========================================================================
   10. MODAIS ESPECÍFICOS E ACESSIBILIDADE
   ========================================================================== */
/* --- Map Modal --- */
.map-modal-content {
  max-width: var(--max-width-content-wide);
  width: 100%;
  height: 95dvh;
  max-height: 95dvh;
}

.modal__body--map {
  position: relative;
  flex: 1 1;
  min-height: 300px;
  padding: 0;
  overflow: hidden;
}

.map-iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--md-sys-shape-corner-medium);
}

.map-note-container {
  padding: var(--space-m);
  text-align: center;
}

/* Nota de zona no modal do mapa */
.map-zone-note {
  padding: var(--space-s) var(--space-m);
  margin: 0;
  font-size: var(--text-sm);
  color: var(--md-sys-color-on-surface-variant);
  text-align: center;
  line-height: var(--line-height-relaxed);
}

.map-zone-note .btn--inline {
  color: var(--md-sys-color-primary);
  cursor: pointer;
  background: none;
  border: none;
  font-size: inherit;
}

.map-zone-note .btn--inline:hover {
  text-decoration: underline;
}

/* ==========================================================================
   11. CONDIÇÕES GERAIS (Cards em bloco)
   ========================================================================== */
.pricing-conditions {
  padding: var(--space-s) 0 0;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

.section__title--level-3 {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--md-sys-color-on-surface);
  text-align: center;
}

/* Cards em bloco para ambos os breakpoints */
.conditions-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-m);
  margin-top: var(--space-m);
  padding: 0;
}

.condition-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-m);
  background: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  transition:
    background-color var(--duration-smooth) var(--ease-fluid),
    border-color var(--duration-smooth) var(--ease-snappy);
}

.condition-row:hover {
  background: var(--md-sys-color-surface-container);
  border-color: var(--md-sys-color-primary);
}

.condition-row dt {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--md-sys-color-primary);
}

.condition-row dt iconify-icon {
  flex-shrink: 0;
  font-size: var(--text-xl);
}

.condition-row dd {
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  color: var(--md-sys-color-on-surface-variant);
}

@media (width > 768px) {
  .pricing-card:hover .pricing-card__front {
    z-index: var(--z-elevated);
    background: var(--md-sys-color-surface-container-low);
    border-color: var(--card-highlight);
    box-shadow:
      var(--md-sys-elevation-level3),
      0 0 25px oklch(from var(--card-highlight) l c h / 20%);
    transform: translateY(-8px);
    /* Scale removido para evitar desfoque visual */
  }

  .pricing-card:hover .pricing-number {
    color: var(--card-highlight);
    /* Scale removido para evitar desfoque visual */
  }
  .pricing__container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width <=768px) {

  .pricing-card.is-centered,
  .pricing-card.is-active,
  .pricing-card.active {
    z-index: var(--z-elevated);
  }

  .pricing-card.is-centered .pricing-card__front,
  .pricing-card.is-active .pricing-card__front,
  .pricing-card.active .pricing-card__front {
    background: var(--md-sys-color-surface-container-low);
    border-color: var(--card-highlight);
    box-shadow:
      var(--md-sys-elevation-level3),
      0 0 20px oklch(from var(--card-highlight) l c h / 15%);
    transform: translateY(-4px);
    /* Scale removido para evitar desfoque visual */
  }

  .pricing-card.is-centered .pricing-number,
  .pricing-card.is-active .pricing-number,
  .pricing-card.active .pricing-number {
    color: var(--card-highlight);
    transform: scale(1.05);
    transition: transform var(--duration-smooth) var(--ease-fluid);
  }

  /* --- 1. Layout de Carrossel --- */
  .pricing__container {
    display: flex;
    flex-direction: row;
    gap: var(--space-l);
    padding: var(--space-l);
    margin-inline: calc(max(var(--space-inset-screen), env(safe-area-inset-left), env(safe-area-inset-right))*-1);
    overflow-x: hidden;
    overflow-y: visible;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: auto;
    scroll-padding-inline: calc(7.5% + max(var(--space-inset-screen), env(safe-area-inset-left), env(safe-area-inset-right)));
    scrollbar-width: none;
    touch-action: pan-y pinch-zoom;
  }

  .pricing__container::-webkit-scrollbar {
    display: none;
  }

  .pricing-card {
    flex: 0 0 calc(85% - max(var(--space-inset-screen), env(safe-area-inset-right))*2);
    width: 100%;
    scroll-snap-align: center;
    scroll-snap-stop: normal;
    transition: transform var(--duration-smooth) var(--ease-fluid);
  }

  /* --- 2. Compactação de Altura e Espaçamento --- */
  .pricing-card__front {
    gap: var(--space-xs);
    justify-content: space-between;

    /* Deixa o conteúdo definir a altura */
    padding: var(--space-m);
  }

  /* --- 3. Flip Hint Persistente em Mobile --- */
  .flip-hint {
    padding: 0 var(--space-s);
    color: var(--md-sys-color-on-primary);
    background: var(--md-sys-color-primary);
    box-shadow: var(--shadow-sm);
    opacity: var(--opacity-visible);
    z-index: var(--z-above-content);
  }

  .flip-hint iconify-icon {
    transform: rotate(-180deg);
  }

  .flip-hint__text {
    max-width: 60px;
    margin-left: var(--space-3xs);
    opacity: var(--opacity-visible);
  }

  /* Garante altura mínima consistente frente/verso */
  .pricing-card__inner {
    min-height: 16rem;

    /* Altura base para mobile */
  }

  .pricing-header {
    gap: var(--space-xs);
  }

  /* --- 3.1. Toggle Planos Mobile (só ícones) --- */
  .pricing-toggle-container {
    padding: 2px;
    margin-bottom: var(--space-m);
    background: var(--md-sys-color-surface-container-high);
  }

  .pricing-toggle-btn {
    padding: var(--space-xs);
    font-size: 0;
    gap: 0;
    min-height: 2.75rem;
    /* Touch target 44px */
  }

  .pricing-toggle-btn iconify-icon {
    font-size: 1.25rem;
  }

  .pricing-toggle-slider {
    top: 2px;
    left: 2px;
    width: calc(50% - 4px);
    height: calc(100% - 4px);
    border-radius: calc(var(--md-sys-shape-corner-medium) - 4px);
  }

  .pricing-toggle-slider.is-outdoor {
    transform: translateX(calc(100% + 4px));
  }

  /* --- 3. Tipografia Mobile (Refinada) --- */
  .pricing-prefix {
    margin-bottom: 2px;
    font-size: 0.75rem;
  }

  .pricing-number {
    font-size: clamp(2rem, 8vw, 2.5rem);

    /* DESTAQUE MOBILE */
  }

  .pricing-currency {
    font-size: 1rem;
  }

  .pricing-suffix {
    font-size: 0.75rem;
  }

  .pricing-title {
    margin-block-end: 0;
    font-size: 1.125rem;
    line-height: 1.2;

    /* Remove o margin do h3 em mobile (gap já controla espaçamento) */
  }

  .pricing-description {
    height: auto;

    /* Remove o margin em mobile (gap já controla espaçamento) */
    padding: var(--space-3xs) 0;
    margin-bottom: 0;
    font-size: 0.875rem;
    line-height: 1.4;
  }

  .pricing-card__back {
    /* Deixa o conteúdo definir a altura */
    padding: 0;
    background: var(--md-sys-color-surface-container-low);
  }

  .pricing-back-content {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    gap: var(--space-2xs);

    /* Herda o gap do dc-price-box */
    justify-content: center;

    /* Centrado verticalmente */
    padding: var(--space-2xl) var(--space-m) var(--space-s);
    /* Top-padding for the button */
    overflow-y: auto;

    /* Scroll se necessário */
  }

  .dc-price-box {
    display: contents;

    /* "Desaparece" o wrapper em mobile - ganha ~16px de espaço */
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    padding: var(--space-s);
    background: oklch(from var(--md-sys-color-surface-container-high) l c h / 72%);
    border: 1px solid oklch(from var(--md-sys-color-outline-variant) l c h / 28%);
    border-radius: var(--md-sys-shape-corner-medium);
    box-shadow: inset 0 1px 0 oklch(from var(--md-sys-color-surface-bright) l c h / 14%);
  }

  /* Layout compacto para price rows (tudo centrado em mobile) */
  .dc-price-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-4xs);
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--space-xs) var(--space-s);
    margin: 0;
    background: var(--md-sys-color-surface-container-high);
    border-radius: var(--md-sys-shape-corner-small);
  }

  .dc-price-row .pricing-detail-label,
  .dc-price-row .pricing-detail-label--normal {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--md-sys-color-on-surface);
    text-align: center;
  }

  .dc-price-row .price-big {
    display: block;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1;
    color: var(--card-highlight);
    text-shadow: 0 0 8px oklch(from var(--card-highlight) l c h / 15%);
  }

  /* Sub-info (preço por sessão) embaixo, centrado */
  .price-small {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--md-sys-color-on-surface-variant);
    text-align: center;
    opacity: 0.8;
    padding-inline: var(--space-2xs);
    padding-bottom: var(--space-xs);
  }

  /* Row simples (sem dropdown) - para Sessão Avulsa */
  .dc-price-row--simple {
    background: var(--md-sys-color-surface-container-high);
  }

  /* Nota final — lista compacta em mobile */
  .dc-final-note {
    gap: var(--space-3xs);
    padding: var(--space-xs);
  }

  .dc-final-note li {
    font-size: 0.7rem;
    line-height: 1.3;
  }

  /* Botão do mapa otimizado */

  .dc-price-details {
    background: oklch(from var(--md-sys-color-surface-container-highest) l c h / 52%);
    border-radius: var(--md-sys-shape-corner-small);
  }

  .dc-price-details[open] {
    transform: none;
    box-shadow: 0 var(--space-4xs) var(--space-xs) oklch(0% 0 0deg / 10%);
  }

  .dc-price-summary {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--space-3xs);
    min-height: auto;
    padding: var(--space-s) var(--space-xl) var(--space-s) var(--space-s);
    text-align: center;
  }

  .dc-price-summary .pricing-detail-label,
  .dc-price-summary .pricing-detail-label--normal,
  .dc-price-summary .price-big {
    grid-column: 1;
    justify-self: center;
    text-align: center;
  }

  .dc-price-summary .price-big {
    min-width: 0;
  }

  .feature-map-button-container {
    margin-top: var(--space-2xs);
  }

  .feature-map-button-container .btn {
    display: flex;
    gap: var(--space-2xs);
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--height-component-sm);
    padding: var(--space-2xs) var(--space-s);
    font-size: 0.75rem;
    color: var(--md-sys-color-primary);
    border-color: var(--md-sys-color-outline-variant);
  }

  .feature-map-button-container .btn iconify-icon {
    font-size: 1rem;
  }

  /* --- 5. Botões e Controles --- */
  .pricing-footer {
    margin-top: auto;
  }

  .pricing-footer .btn {
    width: 100%;
    min-height: var(--height-component-md);

    /* Acessibilidade: 44px+ */
    padding: 0 var(--space-l);
    font-size: 0.9375rem;
    font-weight: var(--font-weight-bold);
    color: var(--md-sys-color-on-secondary-container);
    background: var(--md-sys-color-secondary-container);
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
    box-shadow: none;

    /* Tonal buttons usually don't have shadow in MD3 */
  }

  .pricing-dots {
    display: flex;
    gap: var(--space-m);
    justify-content: center;
    padding: var(--space-m);
  }

  .pricing-dot {
    width: 8px;
    height: 8px;
    background: var(--md-sys-color-outline-variant);
    border: none;
    border-radius: 50%;
    transition:
      width var(--duration-smooth) var(--ease-snappy),
      background-color var(--duration-smooth) var(--ease-snappy),
      border-radius var(--duration-smooth) var(--ease-snappy);
  }

  .pricing-dot.active {
    width: 1.25rem;
    background: var(--md-sys-color-primary);
    border-radius: var(--md-sys-shape-corner-full);
  }

  .full-pricing-table th,
  .full-pricing-table td {
    padding: var(--space-m);
  }

  .map-modal-content {
    max-width: 100vw;
    border-radius: 0;
  }

  .modal__body--map {
    flex: 1 1;
    min-height: 0;
  }

  .map-iframe {
    border-radius: 0;
  }
  .conditions-list {
    grid-template-columns: 1fr;
    gap: var(--space-s);
  }

  .condition-row {
    padding: var(--space-s);
  }

  .condition-row dt {
    font-size: var(--text-xs);
  }

  .condition-row dt iconify-icon {
    font-size: var(--text-lg);
  }

  .condition-row dd {
    font-size: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-card {
    transition: none !important;
    animation: none !important;
  }
}
/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. Modal Content Base: Largura máxima e integração com _dialogs.css.
  2. View Toggle: Botões para alternar entre vista Simples e Detalhada.
  3. Simple View (Table): Grid de comparação direta com subgrid.
  4. Badges & Labels: Destaques para novos planos e reembolsos.
  5. Detailed View (Accordion): Sistema de cards expansíveis por categoria.
  6. Card Internals: Headers coloridos, grelha de detalhes e Price Box.
  7. Footer & Notes: Rodapé com informações adicionais.
  8. MEDIA QUERIES: Ajustes de coluna única e scroll lateral para tabelas.
*/

/* ===================================
   PAGINA - PREÇOS MODAL COMPLETA
   Nota: O container principal (.modal) é gerido por _dialogs.css
   para manter a consistência do sistema "Glass".
   =================================== */
/* --- HANDLE (NEW V14 BOTTOM SHEET) --- */
.modal__handle {
  display: none;
}

/* --- TOGGLE (RESTORED DESKTOP STYLE) --- */
.view-toggle {
  display: flex;
  gap: var(--space-s);
  justify-content: center;
  margin-bottom: var(--space-m);
}

/* .toggle-btn styles removed - centralized in _buttons.css */
/* .dark-theme .toggle-btn.active kept for modal-specific dark mode override */

/* Modo escuro: garantir contraste do botão ativo */
.dark-theme .toggle-btn.active {
  color: var(--md-sys-color-on-primary-container) !important;
  background: var(--md-sys-color-primary-container) !important;
  border-color: var(--md-sys-color-primary-container) !important;
}

/* --- ROTATE BUTTON (REMOVIDO PARA V14 VERTICAL LAYOUT) --- */
.btn-rotate-mobile {
  display: none !important;
}

/* --- LANDSCAPE MODE TRANSFORM (DEPRECATED) --- */
.modal-landscape-mode {
  display: none !important;
}

/* --- VISTA SIMPLIFICADA (TABELA) & DETALHADA (ACCORDION) --- */
.simple-view,
.detail-card {
  overflow: hidden;
  box-shadow: var(--shadow-elevation-1);
}

.simple-view {
  display: none;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
}

/* --- GRID SYSTEM (UNIFICADO V14) --- */
.simple-view.active {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) repeat(3, minmax(130px, 1fr));
  width: 100%;
}

.tbl-header,
.tbl-row {
  display: contents;

  /* Os filhos saltam para o grid */
}

/* Header cells: fundo + borda inferior mais forte (display: contents no parent) */
.tbl-header .sticky-col {
  background: var(--md-sys-color-surface-container-low);
  border-right: 1px solid var(--md-sys-color-outline-variant);
  border-bottom: 2px solid var(--md-sys-color-outline-variant);
}

.tbl-row:last-child .td-first,
.tbl-row:last-child .td-cell {
  border-bottom: none;
}

.tbl-row:hover .td-first,
.tbl-row:hover .td-cell {
  background: var(--md-sys-color-surface-container-lowest);
}

.tbl-row--highlight .td-first,
.tbl-row--highlight .td-cell {
  background: var(--md-sys-color-surface-container-low);
}

.th-cell {
  padding: var(--space-m) var(--space-xs);
  font-size: var(--text-sm);
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--md-sys-color-surface-container-low);
  border-left: 1px solid var(--md-sys-color-outline-variant);
  border-bottom: 2px solid var(--md-sys-color-outline-variant);
}

.th-cell.viva {
  color: var(--pricing-vivagym);
  border-top: 4px solid var(--pricing-vivagym);
}

.th-cell.dom {
  color: var(--pricing-domicilio);
  border-top: 4px solid var(--pricing-domicilio);
}

.th-cell.gcp {
  color: var(--pricing-gcp);
  border-top: 4px solid var(--pricing-gcp);
}

.td-first {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-m);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--md-sys-color-on-surface);
  border-right: 1px solid var(--md-sys-color-outline-variant);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.td-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-m) var(--space-xs);
  text-align: center;
  border-left: 1px solid var(--md-sys-color-outline-variant);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

/* .price-big e .price-small removidos - definidos em _pricing.css */

.price-big--free {
  color: var(--md-sys-color-primary);
}

.price-big--tertiary {
  color: var(--md-sys-color-tertiary);
}

.extra-cost {
  display: inline-block;
  padding: var(--space-xs) var(--space-s);
  margin-top: var(--space-s);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--md-sys-color-on-error-container);
  background: var(--md-sys-color-error-container);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
}

/* BADGES */
.badge-deductible {
  display: inline-block;
  padding: var(--space-xs) var(--space-s);
  margin-top: var(--space-s);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--md-sys-color-on-tertiary-container);
  background-color: var(--md-sys-color-tertiary-container);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
}

.badge-new {
  padding: var(--space-gap-micro) var(--space-s);
  margin-left: var(--space-s);
  font-size: var(--text-xs);
  font-weight: 700;
  vertical-align: middle;
  color: var(--md-sys-color-on-primary);
  text-transform: uppercase;
  background-color: var(--md-sys-color-primary);
  border-radius: var(--md-sys-shape-corner-extra-small);
}

.badge-scarcity {
  display: inline-block;
  padding: var(--space-4xs) var(--space-xs);
  margin-left: var(--space-xs);
  font-size: var(--text-xs);
  font-weight: 700;
  vertical-align: middle;
  color: var(--md-sys-color-on-error);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background-color: var(--md-sys-color-error);
  border-radius: var(--md-sys-shape-corner-extra-small);
}

/* --- VISTA DETALHADA (ACCORDION) --- */
.detailed-view {
  display: none;
}

.detailed-view.active {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
  align-items: start;
}

.detail-card {
  border-radius: var(--md-sys-shape-corner-large);
  overflow: hidden;
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface);
  transition:
    border-color var(--duration-smooth) var(--ease-snappy),
    box-shadow var(--duration-smooth) var(--ease-snappy);
}

.detail-card[open] {
  border-color: var(--md-sys-color-primary);
  box-shadow: var(--md-sys-elevation-level2);
}

.dc-header {
  display: flex;
  align-items: center;
  gap: var(--space-l);
  padding: var(--space-m) var(--space-l);
  color: var(--md-sys-color-on-primary);
  cursor: pointer;
  transition: filter var(--duration-fast) var(--ease-snappy);
}

.dc-header:hover {
  filter: brightness(1.05);
}

.dc-header:active {
  filter: brightness(1.1);
}

.dc-header.viva {
  background: var(--pricing-vivagym);
}

.dc-header.dom {
  background: var(--pricing-domicilio);
}

.dc-header.gcp {
  background: var(--pricing-gcp);
}

.dc-header.hyb {
  background: var(--pricing-online);
}

.header-content {
  flex: 1 1;
  min-width: 0;
}

.dc-title {
  margin-bottom: var(--space-4xs);
  font-size: var(--text-lg);
  font-weight: 800;
}

.dc-subtitle {
  font-size: var(--text-sm);
  font-weight: 500;
  opacity: 0.9;
}

.dc-chevron {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: inherit;
  transition: transform var(--duration-smooth) var(--ease-ethereal);
}

.dc-body {
  padding: 0 var(--space-l);
  background: var(--md-sys-color-surface);
}

/* <details> nativo gere a visibilidade — evita conflito com max-height animado */
.dc-body > * {
  padding: var(--space-l) 0;
}

.detail-card[open] .dc-chevron {
  transform: rotate(180deg);
}

.dc-grid {
  display: grid;
  grid-template-columns: 1fr minmax(200px, 280px);
  gap: var(--space-xl);
}

.dc-section-title {
  margin-top: var(--space-l);
  margin-bottom: var(--space-m);
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--md-sys-color-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dc-section-title:first-child {
  margin-top: 0;
}

.dc-text {
  margin-bottom: var(--space-m);
  font-size: var(--text-sm);
  color: var(--md-sys-color-on-surface);
}

.dc-list {
  padding-left: 0;
  margin-bottom: var(--space-m);
  list-style: none;
}

.dc-list li {
  position: relative;
  padding-left: var(--space-l);
  margin-bottom: var(--space-4xs);
  font-size: var(--text-sm);
  color: var(--md-sys-color-on-surface-variant);
}

.dc-list li::before {
  position: absolute;
  left: 0;
  font-size: var(--text-lg);
  font-weight: bold;
  line-height: var(--line-height-normal);
  color: var(--md-sys-color-primary);
  content: '•';
}

/* Overrides para dc-price-box/row dentro do accordion do modal.
   O base (_pricing.css) usa width: min(100%, 22rem) para os pricing cards,
   mas dentro do dc-grid a caixa de preços precisa preencher a coluna. */
.detail-card .dc-price-box {
  width: 100%;
  max-width: none;
  padding: var(--space-m);
  margin-inline: 0;
}

.detail-card .dc-price-row {
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-m);
}

.detail-card .dc-price-row .pricing-detail-label,
.detail-card .dc-price-row .pricing-detail-label--normal {
  flex: 1 1 auto;
  min-width: 0;
}

.detail-card .dc-price-row .price-big {
  flex: 0 1 auto;
  min-width: 0;
  font-size: var(--text-2xl);
}

.detail-card .dc-price-row .price-small {
  flex-basis: 100%;
  text-align: left;
}

/* Zone pricing toggle styles moved to _zone-pricing-modal.css */

/* ==========================================================================
   MEDIA QUERIES (FULLSCREEN MOBILE - V14)
   ========================================================================== */

@media (width <=768px) {
  /* O pricing-modal agora usa o padrão fullscreen de _modal-base.css */

  /* Apenas ajustes específicos aqui */

  .detailed-view.active {
    grid-template-columns: 1fr;
  }

  /* --- HANDLE (não necessário em fullscreen) --- */
  .modal__handle {
    display: none;
  }

  /* Zone pricing toggle styles moved to _zone-pricing-modal.css */
  .view-toggle {
    display: inline-flex;
    gap: 0;
    align-self: center;
    width: auto;
    padding: 4px;
    margin: var(--space-m) auto;
    background: var(--md-sys-color-surface-container-high);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-full);
  }

  /* --- NEW V14 MOBILE PRICING TABLE (CARD + GRID) --- */
  .simple-view.active {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    width: 100%;
    padding-bottom: 0;
    overflow: visible;
    border: none;
  }

  /* Reset desktop borders */
  .tbl-header .sticky-col {
    border-right: none;
    border-bottom: none;
  }

  .th-cell {
    border-left: none;
    border-bottom: none;
    background: transparent;
  }

  .tbl-row .td-first {
    border-right: none;
  }

  .td-cell {
    border-left: none;
    border-bottom: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-m) var(--space-xs);
    text-align: center;
    background: var(--md-sys-color-surface);
    border-right: 1px solid var(--md-sys-color-outline-variant);
  }

  .tbl-row--highlight .td-first,
  .tbl-row--highlight .td-cell {
    background: transparent;
  }

  .tbl-row:last-child .td-first,
  .tbl-row:last-child .td-cell {
    border-bottom: none;
  }

  /* Reset Stickiness */
  .tbl-header .sticky-col,
  .tbl-row .td-first {
    position: static;
    background: transparent;
  }

  .tbl-header {
    display: none;
  }

  /* Cada linha vira um Card com Grid Interna */
  .tbl-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    /* 3 colunas iguais para os preços */
    margin-bottom: 0;

    /* Controlado pelo gap do container */
    overflow: hidden;

    /* Para o header não sair dos cantos arredondados */
    background: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-medium);
    box-shadow: var(--shadow-elevation-1);
  }

  /* Cabeçalho do Card (Nome do Serviço) */
  .td-first {
    display: flex;
    grid-column: 1 / -1;

    /* Ocupa toda a largura */
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--space-s) var(--space-m);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--md-sys-color-on-surface);
    text-align: center;
    text-transform: uppercase;
    background: var(--md-sys-color-surface-container-high);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
  }

  /* Células de Preço */

  .td-cell:last-child {
    border-right: none;
  }

  /* Labels dos Planos (Viva, Dom, GCP) em cima do preço */
  .td-cell::before {
    display: block;
    margin-bottom: var(--space-xs);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--md-sys-color-primary);
    text-transform: uppercase;
    content: attr(data-label);
  }

  /* Cores específicas para os labels (opcional, para match visual com desktop) */
  .td-cell[data-label='VivaGym']::before {
    color: var(--pricing-vivagym);
  }

  .td-cell[data-label='Domicílio']::before {
    color: var(--pricing-domicilio);
  }

  .td-cell[data-label='GCP']::before {
    color: var(--pricing-gcp);
  }

  .price-big {
    font-size: var(--text-base);
  }

  .price-small {
    margin-top: 2px;
    font-size: var(--text-xs);
  }

  /* --- ACCORDION PRICE BOX RESPONSIVE (V14) --- */
  .dc-grid {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }

  .dc-price-box {
    width: 100%;
    max-width: 100%;
  }

  /* --- ACCORDION MOBILE (V14): Scroll no modal, não no card --- */
  .detail-card[open] .dc-body {
    max-height: none;
    overflow-y: visible;
  }
}