/*
    Dark mode — tema criativatek-gym-3
    ------------------------------------------------------------------
    Todos os overrides estão scoped a html[data-theme="dark"], por isso
    o light mode (default) nunca é afetado. O atributo é definido pelo
    script inline no <head> (sem flash) e alternado pelo js/theme.js.

    Paleta dark (alinhada com os tons slate/charcoal do próprio tema):
      fundo base ........ #0e0f12
      superfície 1 ...... #16171b   (substitui .bg-white)
      superfície 2 ...... #1c1d22   (substitui .bg-very-light-gray / .bg-cultured)
      texto principal ... #f5f5f4   (substitui texto .text-dark-gray)
      texto secundário .. #a9aaac   (substitui texto .text-medium-gray)
      bordas ............ rgba(255, 255, 255, 0.12)
    A cor primária (--base-color #FCB50F) mantém-se — destaca bem no escuro.
    Elementos sobre a cor primária mantêm texto ESCURO (ver "Exceções").
*/

/* ---------- Base ---------- */
html[data-theme="dark"] {
    color-scheme: dark;
}

html[data-theme="dark"] body {
    background-color: #0e0f12;
    color: #dbdbdb;
}

/* ---------- Fundos claros -> superfícies escuras ---------- */
/* !important necessário: o .bg-white do Bootstrap (vendors) também usa !important */
html[data-theme="dark"] .bg-white {
    background-color: #16171b !important;
}

html[data-theme="dark"] .bg-very-light-gray,
html[data-theme="dark"] .bg-cultured,
html[data-theme="dark"] .bg-gradient-very-light-gray {
    background-color: #1c1d22;
    background-image: none;
}

html[data-theme="dark"] .bg-extra-medium-gray,
html[data-theme="dark"] .bg-light-medium-gray {
    background-color: #26272e;
}

html[data-theme="dark"] .bg-gradient-white-dark-transparent,
html[data-theme="dark"] .bg-gradient-gray-light-dark-transparent {
    background-image: linear-gradient(180deg, rgba(14, 15, 18, 0) 0%, rgba(14, 15, 18, 1) 100%);
}

/* ---------- Texto ---------- */
html[data-theme="dark"] .text-dark-gray,
html[data-theme="dark"] .text-black {
    color: #f5f5f4;
}

html[data-theme="dark"] .text-medium-gray {
    color: #a9aaac;
}

html[data-theme="dark"] .text-dark-gray-hover:hover {
    color: #ffffff;
}

/* Título com contorno (outline) — contorno claro sobre fundo escuro */
html[data-theme="dark"] .text-outline-color-extra-medium-gray {
    -webkit-text-stroke-color: rgba(255, 255, 255, 0.25);
}

/* Watermarks decorativos gigantes (ex.: "Treino") — voltam a ser subtis no escuro */
html[data-theme="dark"] .text-gradient-light-gray-white {
    background-image: linear-gradient(to bottom, #1d1e23, #212228, #26272e);
}

/* ---------- Exceções: texto sobre a cor primária fica escuro ---------- */
/* O override global de .text-dark-gray tornaria o texto claro sobre amarelo #FCB50F */
html[data-theme="dark"] .bg-base-color.text-dark-gray,
html[data-theme="dark"] .bg-base-color .text-dark-gray,
html[data-theme="dark"] .bg-yellow.text-dark-gray,
html[data-theme="dark"] .bg-yellow .text-dark-gray,
html[data-theme="dark"] .bg-base-color-transparent.text-dark-gray,
html[data-theme="dark"] .interactive-banner-style-04 .features-content .text-dark-gray {
    color: #232323;
}

html[data-theme="dark"] .interactive-banner-style-04 .features-content .text-dark-gray-hover:hover {
    color: #000000;
}

/* Círculo branco da seta nos cartões de modalidades (overlay amarelo) — mantém-se branco */
html[data-theme="dark"] .interactive-banner-style-04 .features-content .bg-white {
    background-color: #ffffff !important;
}

/* ---------- Bordas ---------- */
html[data-theme="dark"] .border-color-extra-medium-gray,
html[data-theme="dark"] .border-color-light-medium-gray {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="dark"] .border-color-transparent-dark-very-light {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ---------- Barra do topo ----------
   No tema escuro a barra passa a branca, para se destacar da página escura. */
html[data-theme="dark"] header .navbar.xp-header,
html[data-theme="dark"] .navbar.xp-header .navbar-collapse {
    background-color: #ffffff;
}
html[data-theme="dark"] .navbar.xp-header .navbar-nav .nav-link,
html[data-theme="dark"] .xp-header .xp-header-tema {
    color: #111215;
}
html[data-theme="dark"] .navbar.xp-header .navbar-nav .nav-item:hover .nav-link,
html[data-theme="dark"] .navbar.xp-header .navbar-nav .nav-link:focus-visible,
html[data-theme="dark"] .xp-header .xp-header-tema:hover,
html[data-theme="dark"] .xp-header .xp-header-telefone:hover {
    /* o amarelo da marca lê mal sobre branco; no hover usa-se um tom mais escuro dele */
    color: #b07c00 !important;
}
html[data-theme="dark"] .xp-header .xp-header-telefone {
    color: rgba(17, 18, 21, .6);
}
html[data-theme="dark"] .navbar.xp-header .navbar-toggler-line {
    background-color: #111215;
}
html[data-theme="dark"] .xp-header .xp-logo-claro {
    display: none;
}
html[data-theme="dark"] .xp-header .xp-logo-escuro {
    display: inline-block;
}

/* ---------- Botões ---------- */
/* Botão outline escuro -> outline claro */
html[data-theme="dark"] .btn.btn-transparent-dark-gray {
    color: #f5f5f4;
    border-color: rgba(255, 255, 255, 0.3);
}

/* btn-dark-gray: no hover o tema usa fundo transparente + texto escuro -> fica claro */
html[data-theme="dark"] .btn.btn-dark-gray:hover,
html[data-theme="dark"] .btn.btn-dark-gray:active {
    color: #f5f5f4;
    border-color: rgba(255, 255, 255, 0.3);
}

/* Variante slide-right: o span claro desliza no hover, o texto volta a ser escuro */
html[data-theme="dark"] .btn.btn-slide-right span.bg-white,
html[data-theme="dark"] .btn.btn-slide-right span.bg-very-light-gray,
html[data-theme="dark"] .btn.btn-slide-right span.bg-cultured {
    background-color: #f5f5f4 !important;
}

html[data-theme="dark"] .btn.btn-dark-gray.btn-slide-right:hover,
html[data-theme="dark"] .btn.btn-dark-gray.btn-slide-right:active {
    color: #0e0f12;
}

/* ---------- Componentes ---------- */
/* Tabs de planos/contactos (tab-style-08) */
html[data-theme="dark"] .tab-style-08 ul .nav-item .nav-link {
    color: #a9aaac;
}

/* Linha indicadora da tab ativa (span.tab-border) — era escura sobre escuro */
html[data-theme="dark"] .tab-border.bg-dark-gray {
    background-color: #f5f5f4;
}

html[data-theme="dark"] .tab-style-08 ul .nav-item .nav-link.active,
html[data-theme="dark"] .tab-style-08 ul .nav-item .nav-link.show,
html[data-theme="dark"] .tab-style-08 ul .nav-item .nav-link:hover {
    color: #f5f5f4;
}

/* ---------- Tabs do horário semanal (event-style-03) ----------
   Antes: barra toda amarela com os dias inativos em branco (contraste mau) e o
   dia ativo a branco. Agora invertido: barra neutra, e o AMARELO marca apenas o
   dia selecionado — acento raro, legível, e o utilizador percebe logo onde está.
   Vale para os dois temas, por isso não está limitado ao [data-theme="dark"]. */
.event-style-03 .nav-tabs.schedule-tabs {
    background-color: transparent;
    border-bottom: 1px solid rgba(150, 150, 150, .22);
}

.event-style-03 .nav-tabs.schedule-tabs > li.nav-item:not(:last-child) {
    border-right: 1px solid rgba(150, 150, 150, .18);
}

.event-style-03 .nav-tabs.schedule-tabs .nav-link {
    color: #6d6d6d;
    transition: background-color .25s ease, color .25s ease;
}

.event-style-03 .nav-tabs.schedule-tabs .nav-link:hover {
    background-color: rgba(150, 150, 150, .1);
    color: #232323;
}

.event-style-03 .nav-tabs.schedule-tabs .nav-link.active,
.event-style-03 .nav-tabs.schedule-tabs .nav-link.show {
    background-color: var(--base-color);
    color: #232323;
}

html[data-theme="dark"] .event-style-03 .nav-tabs.schedule-tabs .nav-link {
    color: rgba(245, 245, 244, .6);
}

html[data-theme="dark"] .event-style-03 .nav-tabs.schedule-tabs .nav-link:hover {
    color: #f5f5f4;
}

/* O dia ativo mantém texto escuro — é o que contrasta sobre o amarelo */
html[data-theme="dark"] .event-style-03 .nav-tabs.schedule-tabs .nav-link.active,
html[data-theme="dark"] .event-style-03 .nav-tabs.schedule-tabs .nav-link.show {
    background-color: var(--base-color);
    color: #232323;
}

/* Accordion (FAQ): itens fechados herdam fundo branco do Bootstrap */
html[data-theme="dark"] .accordion-style-06 .accordion-item {
    background-color: #16171b;
}

/* Accordion (FAQ style-01): fundo do card (#16171b) quase idêntico ao da
   página (#0e0f12) — sem borda o item torna-se impercetível. */
html[data-theme="dark"] .accordion-style-01 .accordion-item {
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Accordion (FAQ): o item ativo tinha gradiente quase branco */
html[data-theme="dark"] .accordion-style-06 .accordion-item.active-accordion {
    background-image: linear-gradient(to bottom, #1c1d22, #16171b);
}

/* Lista de treinadores (team-style-09): números e sublinhado do item ativo */
html[data-theme="dark"] .team-style-09 .nav-tabs > li.nav-item .number {
    color: #f5f5f4;
}

html[data-theme="dark"] .team-style-09 .nav-tabs .nav-link.active,
html[data-theme="dark"] .team-style-09 .nav-tabs .nav-link:hover {
    border-bottom-color: #f5f5f4;
}

/* Imagem de fundo clara atrás do preçário — esbatida no escuro */
html[data-theme="dark"] .pricing-table-style-10 .cover-background {
    opacity: 0.35;
}

/* ---------- Imagens monocromáticas escuras -> claras ---------- */
/* Logo Reviews.io (preto) e assinatura do head coach (PNG preto) */
html[data-theme="dark"] img[src*="reviewsio"] {
    filter: invert(1) hue-rotate(180deg);
}

html[data-theme="dark"] img[src*="trainer-signechar"] {
    filter: invert(1);
}

/* ---------- Barra social (footer, variante "dark" = texto escuro) ---------- */
html[data-theme="dark"] .elements-social ul.dark li a {
    color: #f5f5f4;
}

html[data-theme="dark"] .social-icon-style-11 ul li a {
    border-right-color: rgba(255, 255, 255, 0.12);
}

/* Ícones sociais com borda escura (página de treinadores) */
html[data-theme="dark"] .social-icon-style-09 ul li a {
    border-color: rgba(255, 255, 255, 0.18);
}

/* ---------- Formulários ---------- */
html[data-theme="dark"] input:not([type="submit"]):not([type="button"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background-color: #1c1d22;
    border-color: rgba(255, 255, 255, 0.12);
    color: #f5f5f4;
}

/* !important necessário: os placeholders do tema também usam !important */
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #a9aaac !important;
}

/* ---------- Cursor personalizado ---------- */
html[data-theme="dark"] .circle-cursor-inner {
    background-color: #f5f5f4;
}

html[data-theme="dark"] .circle-cursor-outer {
    border-color: rgba(255, 255, 255, 0.4);
}

/* ---------- Scroll progress ("Scroll" lateral) ---------- */
html[data-theme="dark"] .scroll-progress a {
    color: #f5f5f4;
}

/* ---------- Seletor de separadores "Aqui superas os teus limites" ----------
   A pílula ativa mantém-se amarela (acento da marca) nos dois temas; muda só o
   fundo do controlo e a cor do texto inativo. */
html[data-theme="dark"] .why-tabs {
    background: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .why-tabs li a {
    color: rgba(245, 245, 244, 0.65);
}
html[data-theme="dark"] .why-tabs li a.active {
    color: #1a1a1a;
}

/* ---------- Linha social (antes do footer) em MOBILE ----------
   O tema empilha os sociais a ≤767px (responsive.css: flex-direction: column).
   Aqui voltam a ficar LADO A LADO, na mesma linha, com o separador vertical
   (como em desktop). */
@media (max-width: 767px) {
    .social-icon-style-11 ul {
        flex-direction: row;
    }
    .social-icon-style-11 ul li a {
        border-bottom: 0;
        border-right: 1px solid var(--extra-medium-gray);
        padding: 22px 10px;
    }
    .social-icon-style-11 ul li:last-child a {
        border-right: 0;
    }
}

/* ---------- Toques de marca ---------- */
html[data-theme="dark"] ::selection {
    background-color: #FCB50F;
    color: #0e0f12;
}

html[data-theme="dark"] a.text-dark-gray:hover,
html[data-theme="dark"] .text-dark-gray a:hover {
    color: #FCB50F;
}