/* Tema global: variáveis e sobrescritas visuais compartilhadas por HTML e PHP. */
:root {
  color-scheme: dark;
  --theme-navy: #f5f5f5;
  --theme-navy-deep: #050505;
  --theme-gray: #c2c2c2;
  --theme-muted: #999;
  --theme-light: #0b0b0b;
  --theme-white: #f5f5f5;
  --theme-surface: #161616;
  --theme-border: #333;
}

/* Cores-base para texto, fundo, títulos, parágrafos, navegação e rodapés. */
body {
  color: var(--theme-navy) !important;
  background: var(--theme-light) !important;
}

/* Unifica cores de títulos, texto corrido e elementos da navegação. */
h1, h2, h3, h4, h5, h6,
.logo, .section-title, .hero-content h1, .era-body h2,
.musician-body h2, .album-body h2, .curio-card h3,
.mission-inner h2, .stats-grid .val, .gp-num {
  color: var(--theme-navy) !important;
}

p, li, label, .section-subtitle, .hero-content p, .album-artist,
.album-body > p.album-desc, .curio-card p, .musician-body p,
.musician-genre, .era-body p, .highlights li, .mission-inner p,
.stats-grid .lbl, .quote cite, .quote blockquote, .explore-link,
footer, .login-logo p, .voltar {
  color: var(--theme-gray) !important;
}

.nav, header, .store-header {
  color: var(--theme-white) !important;
  background: var(--theme-navy-deep) !important;
  border-color: var(--theme-border) !important;
}

.nav .logo, .nav-links a, .store-header, .store-brand,
.store-brand small, .account-tools strong, .nav-actions,
.nav-actions a, .nav-actions button {
  color: var(--theme-white) !important;
}

.nav-links a:hover, .nav-links a.active {
  color: #ccc !important;
}

footer, .store-footer {
  color: #e4e4e4 !important;
  background: var(--theme-navy-deep) !important;
  border-color: var(--theme-border) !important;
}

/* Reserva espaço para a marca no rodapé, sem alterar o rodapé compacto da loja. */
footer:not(.store-footer) {
  position: relative;
  padding-right: 148px;
  padding-bottom: 120px;
}

.store-footer {
  position: relative;
  min-height: 132px;
  padding-right: 148px !important;
}

footer::after, .store-footer::after {
  content: "";
  position: absolute;
  right: 24px;
  bottom: 12px;
  width: 108px;
  height: 108px;
  background: url("../img/alcina.png") center / contain no-repeat;
}

.store-footer a {
  color: #e4e4e4 !important;
}

.hero, .login-bg {
  background: linear-gradient(135deg, #151515 0%, var(--theme-light) 100%) !important;
  border-color: var(--theme-border) !important;
}

.explore, .stats, .quote, .cta, .albums, .milestones, .eras,
.curiosidades, .musicians, .mission, .values-section, .login-page {
  color: var(--theme-navy) !important;
  background: var(--theme-light) !important;
  border-color: var(--theme-border) !important;
}

/* Superfícies, cartões, botões e seus estados de interação no tema escuro. */
.explore-card, .curio-card, .era-card, .musician-card, .album-card,
.login-box, .cart-panel, .carrinho, .card, .product-card,
.catalog-filters, .empty-catalog {
  color: var(--theme-navy) !important;
  background: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
}

.explore-card:hover, .curio-card:hover, .era-card:hover,
.musician-card:hover, .album-card:hover {
  background: #222 !important;
  border-color: #555 !important;
}

.nav-links a:last-child, .btn-primary, .btn-submit, .btn-add,
.btn-finalizar, .filter-submit, .checkout-button, .add-button,
.btn-sair {
  color: var(--theme-white) !important;
  background: #242424 !important;
  border-color: #444 !important;
}

.btn-primary:hover, .btn-submit:hover, .btn-add:hover,
.btn-finalizar:hover, .filter-submit:hover, .checkout-button:hover,
.add-button:hover, .btn-sair:hover, .nav-links a:last-child:hover {
  color: var(--theme-white) !important;
  background: #383838 !important;
}

.btn-secondary, .badge-outline, .song-badge, .gp-num.active,
.era-period, .musician-period, .curio-card .badge-year {
  color: var(--theme-white) !important;
  background: #242424 !important;
  border-color: var(--theme-border) !important;
}

.btn-secondary:hover {
  color: var(--theme-white) !important;
  background: #383838 !important;
}

.nav-links a:last-child {
  color: var(--theme-white) !important;
}

.fg label, .tracks-label, .highlights h4, .achievements h4,
.topsongs h4, .product-info h2, .cart-heading h2,
.catalog-heading h1 {
  color: var(--theme-navy) !important;
}

/* Ajusta os campos de texto, seletores e seus indicadores de foco. */
.fg input, .catalog-filters input, .catalog-filters select {
  color: var(--theme-white) !important;
  background: #101010 !important;
  border-color: var(--theme-border) !important;
}

.fg input:focus, .catalog-filters input:focus,
.catalog-filters select:focus {
  border-color: #888 !important;
  outline-color: #888 !important;
}

/* Estados das abas, mensagens de formulário e cartão de acesso. */
.mode-toggle {
  background: var(--theme-light) !important;
  border-color: var(--theme-border) !important;
}

.mode-btn {
  color: var(--theme-gray) !important;
}

.mode-btn.active {
  color: var(--theme-white) !important;
  background: #242424 !important;
}

.msg.success, .msg.error {
  color: var(--theme-white) !important;
  background: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
}

.login-box {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55) !important;
}

/* Ajusta contraste de categorias, preços, estoque e imagens da loja. */
.product-category, .category-pill, .cart-count {
  color: var(--theme-white) !important;
  background: #292929 !important;
}

.product-price, .preco, .inline-0dae1853a2, .eyebrow,
.product-category, .empty-cart span {
  color: var(--theme-white) !important;
}

.logout-link {
  color: var(--theme-white) !important;
}

.product-image, .cart-item > img, .quantity-controls button {
  background: #101010 !important;
}

.quantity-controls button, .remove-form button, .clear-filters {
  color: var(--theme-white) !important;
  border-color: var(--theme-border) !important;
}

.logout-link:hover, .store-footer a:hover {
  color: #ccc !important;
}

.stars, .achievements li::before, .highlights li::before {
  color: #eee !important;
}

.curio-divider {
  border-color: var(--theme-border) !important;
}

/* Mantém legíveis as opções e os painéis da demonstração de pagamento. */
.payment-option {
  color: var(--theme-white) !important;
  background: #101010 !important;
  border-color: var(--theme-border) !important;
}

.payment-option.is-selected {
  background: #1d2a23 !important;
  border-color: #66806e !important;
}

.payment-option-copy strong,
.payment-total strong {
  color: var(--theme-white) !important;
}

.payment-step-heading > div > span,
.payment-option-copy small,
.payment-selected-hint,
.payment-total > span {
  color: var(--theme-gray) !important;
}

.payment-option-icon,
.payment-total,
.card-payment-panel,
.pix-payment-panel,
.payment-dialog,
.payment-dialog-header,
.payment-field input,
.demo-pix-key {
  background: #161616 !important;
  border-color: var(--theme-border) !important;
}

.payment-panel-heading h3,
.payment-dialog-header h2,
.payment-field input {
  color: var(--theme-white) !important;
}

.payment-dialog-close,
.payment-back {
  color: var(--theme-white) !important;
  background: #242424 !important;
  border-color: var(--theme-border) !important;
}

.payment-dialog-close:hover,
.payment-back:hover {
  background: #383838 !important;
}

.payment-dialog-eyebrow {
  color: #b9dfc6 !important;
}

.payment-panel-heading p,
.payment-dialog-header > div > p:last-child,
.payment-field {
  color: var(--theme-gray) !important;
}

.demo-card-preview {
  color: #fff !important;
  background: linear-gradient(135deg, #244d3d, #152c23) !important;
}

.demo-pix-key code {
  color: #c2e0ca !important;
}

.payment-demo-note {
  color: #f2e3b8 !important;
  background: #292414 !important;
  border-color: #514725 !important;
}
