/* Meaple dark theme overrides for checkout flow */

body.meaple-checkout {
  background: var(--bg-600, #1a1b23) !important;
  color: var(--text-0, #fff) !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

body.meaple-checkout.outer-bg {
  background: var(--bg-600, #1a1b23) !important;
}

body.meaple-checkout .u-text-color,
body.meaple-checkout .theme-text-color,
body.meaple-checkout .theme-text-light-color {
  color: var(--text-0, #fff) !important;
}

body.meaple-checkout .theme-text-marginal-color {
  color: var(--text-300, #8b8f9a) !important;
}

body.meaple-checkout #page-wrapper {
  background: var(--bg-600, #1a1b23);
}

body.meaple-checkout main.margin-bottom-xxl {
  margin-bottom: 0 !important;
  background: var(--bg-600, #1a1b23);
}

/* Hide old legacy header when Meaple nav is present */
body.meaple-checkout .header.legacy-header-hidden {
  display: none !important;
}

/* Checkout steps (2+) */
body.meaple-checkout .nav {
  transition: transform 0.3s ease-in-out;
}

body.meaple-checkout .nav.header-hidden {
  transform: translateY(-100%);
}

body.meaple-checkout .step-section:not(#step-ingressos) {
  padding-top: 2rem;
  padding-bottom: 3rem;
}

body.meaple-checkout .step-section:not(#step-ingressos) .container {
  max-width: 1280px;
}

body.meaple-checkout .step-section:not(#step-ingressos) .card,
body.meaple-checkout .step-section:not(#step-ingressos) .standard-gray-shadow {
  background: var(--bg-500, #242630) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  color: var(--text-0, #fff) !important;
}

body.meaple-checkout .card-section,
body.meaple-checkout .theme-element-border,
body.meaple-checkout .bottom-separator,
body.meaple-checkout .top-separator {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

body.meaple-checkout .card-headline,
body.meaple-checkout .page-headline,
body.meaple-checkout h1,
body.meaple-checkout h2 {
  color: var(--text-0, #fff) !important;
}

body.meaple-checkout .btn-primary,
body.meaple-checkout .theme-btn {
  background: var(--accent, #009dff) !important;
  border-color: var(--accent, #009dff) !important;
  color: #fff !important;
  border-radius: 8px !important;
}

body.meaple-checkout .btn-primary:hover,
body.meaple-checkout .theme-btn:hover {
  background: var(--accent-hover, #0088dd) !important;
  border-color: var(--accent-hover, #0088dd) !important;
}

body.meaple-checkout .btn-link,
body.meaple-checkout .link,
body.meaple-checkout .delete-btn-label {
  color: var(--accent, #009dff) !important;
}

body.meaple-checkout .form-control {
  background: var(--bg-700, #13141a) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--text-0, #fff) !important;
  border-radius: 8px !important;
}

body.meaple-checkout .form-control:focus {
  border-color: var(--accent, #009dff) !important;
  box-shadow: 0 0 0 2px rgba(0, 157, 255, 0.15) !important;
}

body.meaple-checkout .form-control::placeholder {
  color: var(--text-300, #8b8f9a) !important;
}

body.meaple-checkout label,
body.meaple-checkout .field-label {
  color: var(--text-200, #a0a4b0) !important;
}

body.meaple-checkout .alert-warning {
  background: rgba(255, 193, 7, 0.12) !important;
  border: 1px solid rgba(255, 193, 7, 0.3) !important;
  color: #ffd666 !important;
  border-radius: 12px !important;
}

body.meaple-checkout .checkout-mini-basket-table {
  color: var(--text-0, #fff) !important;
}

body.meaple-checkout .checkout-mini-basket-table .price {
  color: var(--text-0, #fff) !important;
}

body.meaple-checkout .selection-list-item {
  background: var(--bg-500, #242630) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  color: var(--text-0, #fff) !important;
}

body.meaple-checkout .selection-list-item.selected,
body.meaple-checkout .selection-list-item.active {
  border-color: var(--accent, #009dff) !important;
}

body.meaple-checkout .footerContainer.legacy-footer-hidden {
  display: none !important;
}

body.meaple-checkout .meaple-footer {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
  background: var(--bg-800, #0d0d13);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2rem 1rem;
}

/* Loading overlay */
body.meaple-checkout #loading-overlay .loading-overlay-background {
  background: rgba(0, 0, 0, 0.7) !important;
}

body.meaple-checkout #loading-overlay .loading-spinner {
  border-color: rgba(0, 157, 255, 0.2) !important;
  border-top-color: var(--accent, #009dff) !important;
}

body.meaple-checkout #loading-overlay .loading-text {
  color: var(--text-0, #fff) !important;
}

/* PIX step */
body.meaple-checkout #step-pix .card {
  background: var(--bg-500, #242630) !important;
}

body.meaple-checkout #pix-code-text {
  background: var(--bg-700, #13141a) !important;
  color: var(--text-0, #fff) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Credit card modal - keep readable */
body.meaple-checkout #creditCardModal .simple-card {
  background: #fff !important;
}

body.meaple-checkout #creditCardModal .modal-title,
body.meaple-checkout #creditCardModal label {
  color: #1a1a1a !important;
}

/* Sector buttons hidden - use sidebar checkout */
body.meaple-checkout .sector-add-btn {
  display: none !important;
}

body.meaple-checkout .ticket-type-cta {
  display: none !important;
}

/* Meaple ticket rendering inside sectors-container */
body.meaple-checkout #sectors-container.ticket-categories {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

body.meaple-checkout #sectors-container .event-list-item,
body.meaple-checkout #sectors-container .pc-promo-component-wrapper,
body.meaple-checkout #sectors-container .card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.meaple-checkout .pc-list-category {
  display: none;
}

body.meaple-checkout .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Step ingressos layout */
body.meaple-checkout #step-ingressos .main-section {
  padding: 2.5rem 0 4rem;
}

body.meaple-checkout #step-ingressos .event-alert-wrap {
  padding: 1.5rem 0 0;
}

body.meaple-checkout #step-ingressos .content-grid {
  display: grid !important;
  gap: 2rem;
  width: 100%;
}

body.meaple-checkout #step-ingressos .content-grid::before,
body.meaple-checkout #step-ingressos .content-grid::after {
  display: none !important;
  content: none !important;
}

body.meaple-checkout #step-ingressos .tickets-column,
body.meaple-checkout #step-ingressos .cart-sidebar {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
}

@media (min-width: 1024px) {
  body.meaple-checkout #step-ingressos .content-grid {
    grid-template-columns: minmax(0, 1fr) 360px !important;
    align-items: start;
  }

  body.meaple-checkout #step-ingressos .tickets-column {
    grid-column: 1;
    order: 1;
  }

  body.meaple-checkout #step-ingressos .cart-sidebar {
    grid-column: 2;
    order: 2;
    position: sticky;
    top: 80px;
  }
}

@media (max-width: 1023px) {
  body.meaple-checkout #step-ingressos .tickets-column {
    order: 1;
  }

  body.meaple-checkout #step-ingressos .cart-sidebar {
    order: 2;
  }
}
