/* ============ SCREEN CONTAINER ============ */
.screen {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-page);
}

.screen--confirmation {
  align-items: center;
  justify-content: flex-start;
}

/* ============ HEADER / PAGE ============ */
.page-header {
  background: var(--color-bg-lavender);
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-md);
  flex-shrink: 0;
}

.page-header__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  margin-bottom: var(--spacing-sm);
}

.page-header__back {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
  color: var(--color-text-primary);
  background: none;
  border: none;
  padding: 0;
  transition: transform var(--duration-fast) var(--ease-standard);
}

.page-header__back:active { transform: scale(0.92); }

.page-header__title {
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  text-align: center;
  flex: 1;
  margin: 0;
}

.page-header__spacer { width: 28px; }

.page-header__h1 {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  margin: 0;
  line-height: 1.3;
}

/* ============ BOTTOM TAB BAR ============ */
.bottom-tab-bar {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-bg-white);
  border-top: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 68px;
  padding-bottom: env(safe-area-inset-bottom, 0);
  z-index: 10;
  flex-shrink: 0;
  margin-top: auto;
}

.bottom-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: none;
  border: none;
  padding: 0;
  color: var(--color-tab-inactive);
  font-size: 10px;
  font-weight: var(--fw-medium);
}

.bottom-tab__icon {
  font-size: 22px;
  line-height: 1;
  display: block;
}

.bottom-tab.is-active { color: var(--color-tab-active); }

/* ============ TAB CHIPS ============ */
.tab-chips {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  flex-shrink: 0;
}

.tab-chips::-webkit-scrollbar { display: none; }

.tab-chip {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  border: 1px solid var(--color-border);
  background: var(--color-bg-white);
  color: var(--color-text-secondary);
  scroll-snap-align: start;
  flex-shrink: 0;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.tab-chip.is-active {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-bg-white);
}

.tab-chip:active { transform: scale(0.97); }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 var(--spacing-md);
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: transform 100ms var(--ease-standard), opacity 100ms var(--ease-standard);
}

.btn--full { width: 100%; }

.btn--primary {
  background: var(--color-primary);
  color: var(--color-bg-white);
}
.btn--primary:active { transform: scale(0.97); opacity: 0.9; }
.btn--primary:disabled {
  background: var(--color-border);
  color: var(--color-text-secondary);
  cursor: not-allowed;
}

.btn--outline {
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}
.btn--outline:active { transform: scale(0.97); opacity: 0.9; }

.btn--small {
  height: 36px;
  padding: 0 var(--spacing-md);
  font-size: var(--text-sm);
}

/* ============ CARDS ============ */
.card {
  background: var(--color-bg-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 0 var(--spacing-md);
}

.card + .card { margin-top: var(--spacing-md); }

/* Card/Plan — violet header + body with price badge */
.card-plan__header {
  background: var(--color-secondary);
  padding: var(--spacing-md);
  color: var(--color-bg-white);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
}

.card-plan__body {
  padding: var(--spacing-md);
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
  justify-content: space-between;
}

.card-plan__info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  flex: 1;
  min-width: 0;
}

.card-plan__name {
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin: 0;
}

.card-plan__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.4;
  margin: 0;
}

.card-plan__price {
  align-self: flex-start;
  margin-top: var(--spacing-xs);
  background: var(--color-primary);
  color: var(--color-bg-white);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  display: inline-block;
}

.card-plan__tag {
  align-self: flex-start;
  background: var(--color-secondary);
  color: var(--color-bg-white);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  margin-right: var(--spacing-xs);
}

.card-plan__cta {
  flex-shrink: 0;
}

/* Card/Service — violet header + body with photo placeholder + CTA */
.card-service__header {
  background: var(--color-secondary);
  padding: var(--spacing-md);
  color: var(--color-bg-white);
}

.card-service__title {
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  margin: 0;
}

.card-service__subtitle {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.85);
  margin: 2px 0 0;
}

.card-service__body {
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.card-service__photo {
  width: 100%;
  height: 120px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #E0E0E0 0%, #CCCCCC 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  font-size: 32px;
}

.card-service__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* ============ LIST ITEMS ============ */
.list {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin: 0 var(--spacing-md);
  overflow: hidden;
}

.list-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-white);
  transition: background var(--duration-fast) var(--ease-standard);
}

.list-item:last-child { border-bottom: none; }
.list-item:active { background: var(--color-bg-hover); }

.list-item__label {
  flex: 1;
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
}

.list-item__chevron {
  color: var(--color-text-secondary);
  font-size: 20px;
  line-height: 1;
}

/* ============ RADIO ============ */
.radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  position: relative;
  flex-shrink: 0;
  transition: border-color var(--duration-fast) var(--ease-standard);
}

.radio.is-selected { border-color: var(--color-primary); }

.radio.is-selected::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: var(--color-primary);
  border-radius: 50%;
}

/* ============ PAGE SECTIONS (labels + content containers) ============ */
.section-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm);
}

.content-area {
  flex: 1;
  padding-bottom: var(--spacing-md);
}

.content-scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ============ LINK TEXT ============ */
.link {
  display: block;
  text-align: center;
  color: var(--color-text-link);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  padding: var(--spacing-md);
  background: none;
  border: none;
  width: 100%;
}

.link:active { opacity: 0.7; }

/* ============ SKELETON LOADER ============ */
.skeleton {
  background: linear-gradient(90deg, #EEE 25%, #F5F5F5 50%, #EEE 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.2s infinite;
  border-radius: var(--radius-md);
}

.skeleton-card {
  height: 133px;
  margin: 0 var(--spacing-md) var(--spacing-md);
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============ MODAL ============ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
  z-index: 100;
  animation: fadeIn var(--duration-medium) var(--ease-standard);
}

.modal {
  background: var(--color-bg-white);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  max-width: 320px;
  width: 100%;
  animation: modalIn var(--duration-medium) var(--ease-standard);
}

.modal__title {
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--spacing-sm);
}

.modal__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--spacing-lg);
  line-height: 1.5;
}

.modal__actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* ============ CONFIRMATION SCREEN ============ */
.confirmation {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl) var(--spacing-md);
  text-align: center;
  gap: var(--spacing-md);
}

.confirmation__icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--color-success);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-bg-white);
  font-size: 44px;
  line-height: 1;
  margin-bottom: var(--spacing-md);
}

.confirmation__icon--trophy {
  background: linear-gradient(135deg, #FFC33B 0%, #E8682A 100%);
  font-size: 44px;
}

.confirmation__icon--heart {
  background: linear-gradient(135deg, #FF4E7E 0%, #E8682A 100%);
  font-size: 38px;
}

.confirmation__title {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin: 0;
}

.confirmation__subtitle {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
  max-width: 320px;
}

.confirmation__detail {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  margin-top: var(--spacing-sm);
}

.confirmation__cta {
  width: calc(100% - var(--spacing-md) * 2);
  margin: auto var(--spacing-md) var(--spacing-lg);
  position: sticky;
  bottom: var(--spacing-md);
}

/* ============ REGULAMENTO ============ */
.regulamento__content {
  padding: var(--spacing-md);
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.regulamento__item {
  font-size: var(--text-base);
  color: var(--color-text-primary);
  line-height: 1.6;
  margin-bottom: var(--spacing-md);
}

.regulamento__item strong {
  display: block;
  font-weight: var(--fw-bold);
  color: var(--color-secondary);
  margin-bottom: 2px;
}

.regulamento__footer {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-bg-page);
  padding: var(--spacing-md);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

/* ============ HERO CARD (Saldo Mania) ============ */
.hero-card {
  margin: var(--spacing-md);
  background: var(--color-bg-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.hero-card__header {
  background: linear-gradient(135deg, #7B2D8B 0%, #9C4AB0 100%);
  padding: var(--spacing-lg);
  color: var(--color-bg-white);
  text-align: center;
}

.hero-card__icon {
  font-size: 56px;
  line-height: 1;
  display: block;
  margin-bottom: var(--spacing-sm);
}

.hero-card__title {
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  margin: 0;
}

.hero-card__body {
  padding: var(--spacing-md);
}

.hero-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0 0 var(--spacing-md);
}

.hero-card__counter {
  background: var(--color-bg-lavender);
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: center;
  margin-bottom: var(--spacing-md);
}

.hero-card__counter-value {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--color-secondary);
}

.hero-card__counter-label {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  display: block;
}

/* ============ UTILITY ============ */
.stack-v > * + * { margin-top: var(--spacing-md); }
.stack-sm > * + * { margin-top: var(--spacing-sm); }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}