/* Temas visuais da página pública de agendamento (PublicBooking.razor).
   Ativado via [data-theme] no contêiner .themed-booking. Sem tema selecionado,
   nenhuma destas regras se aplica e a página mantém o visual padrão da marca Carmen. */

.themed-booking[data-theme="suave"] {
    --bg: #F1EFE9;
    --ink: #2B2A25;
    --muted: #6B665C;
    --display: 'Fraunces', serif;
    --display-weight: 500;
    --display-style: normal;
    --hero-bg: linear-gradient(155deg, #5B6B54, #48573F);
    --onhero: #F3F1E9;
    --onhero-muted: #C9D2C0;
    --accent: #B7855A;
    --accent-strong: #5B6B54;
    --accent-shadow: rgba(91, 107, 84, .35);
    --onaccent: #241F1A;
    --onaccent-strong: #F3F1E9;
    --card: #FBFAF7;
    --card-selected: #EFE8DC;
    --card-border: #E2DDD1;
    --ok: #35593B;
    --warn: #784B1D;
    --accent-text: #5B6B54;
    --radius-lg: 20px;
    --radius-md: 12px;
}

.themed-booking[data-theme="vibrante"] {
    --bg: #FFF9F2;
    --ink: #241C1A;
    --muted: #74695F;
    --display: 'Fredoka', sans-serif;
    --display-weight: 600;
    --display-style: normal;
    --hero-bg: linear-gradient(155deg, #FF6B5B, #FF9166);
    --onhero: #FFFFFF;
    --onhero-muted: #FFE3DB;
    --accent: #3EC6C6;
    --accent-strong: #FF6B5B;
    --accent-shadow: rgba(255, 107, 91, .4);
    --onaccent: #20302F;
    --onaccent-strong: #2A0F0B;
    --card: #FFFFFF;
    --card-selected: #FFEDE7;
    --card-border: #F4E4DC;
    --ok: #12604E;
    --warn: #85460D;
    --accent-text: #B53422;
    --radius-lg: 26px;
    --radius-md: 16px;
}

.themed-booking[data-theme="glam"] {
    --bg: #171215;
    --ink: #F2E9E6;
    --muted: #9C8D8C;
    --display: 'Cormorant Garamond', serif;
    --display-weight: 500;
    --display-style: italic;
    --display-brand: 'Italiana', serif;
    --hero-bg: linear-gradient(160deg, #2A1E23, #171215 70%);
    --onhero: #F2E9E6;
    --onhero-muted: #C9A227;
    --accent: #C9A227;
    --accent-strong: #C9A227;
    --accent-shadow: rgba(201, 162, 39, .3);
    --onaccent: #171215;
    --onaccent-strong: #171215;
    --card: #1F1A1D;
    --card-selected: #2B2225;
    --card-border: #332B2E;
    --ok: #7EC48C;
    --warn: #E6C87E;
    --accent-text: #C9A227;
    --radius-lg: 4px;
    --radius-md: 2px;
}

/* ---------------------------------------------------------------------------
   Paleta anterior, preservada para as páginas do cliente final.

   A nova identidade UseCarmen (css/tokens.css + ponte em app.css) vale só para
   o app da profissional. A página pública de agendamento tem quatro temas que o
   negócio escolhe -- "Padrão", suave, vibrante e glam -- e todos já estão no ar
   com clientes usando. Nenhum deles segue a paleta nova.

   Os três temas com [data-theme] já eram imunes, porque declaram as próprias
   variáveis. O "Padrão" não: sem [data-theme], ele herdava as --bs-* do app e
   teria mudado junto. Este bloco devolve, dentro de .themed-booking, os valores
   que estavam em vigor antes da repaginação: os cinco overrides do app.css
   antigo (#D96E59 / #FAEDCD / #CCD5AE / #4A3E3D / #FCFBF7) e o padrão do
   Bootstrap 5.3 para todo o resto.

   Ao mexer em tokens.css, nada aqui muda -- é de propósito.
   --------------------------------------------------------------------------- */

.themed-booking {
    /* Fonte de texto corrido da página pública. Os temas só trocavam a display (--display);
       o sans vinha de um style inline repetido em cada página. Como token, um tema pode
       trocá-lo sem que nenhum componente mude. */
    --sans: 'Plus Jakarta Sans', sans-serif;

    /* Destaque como texto do "Padrão"; os temas sobrescrevem no próprio bloco. */
    --accent-text: #B4432C;

    /* Overrides do app.css antigo */
    --bs-primary: #D96E59;
    --bs-primary-rgb: 217, 110, 89;
    --bs-secondary: #FAEDCD;
    --bs-secondary-rgb: 250, 237, 205;
    --bs-success: #CCD5AE;
    --bs-success-rgb: 204, 213, 174;
    --bs-body-color: #4A3E3D;
    --bs-body-bg: #FCFBF7;

    /* Padrão do Bootstrap 5.3 para o que o app.css antigo não tocava */
    --bs-body-color-rgb: 33, 37, 41;
    --bs-danger: #dc3545;
    --bs-danger-rgb: 220, 53, 69;
    --bs-warning: #ffc107;
    --bs-warning-rgb: 255, 193, 7;
    --bs-info: #0dcaf0;
    --bs-info-rgb: 13, 202, 240;
    --bs-light: #f8f9fa;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark: #212529;
    --bs-dark-rgb: 33, 37, 41;
    --bs-white: #fff;
    --bs-white-rgb: 255, 255, 255;
    --bs-emphasis-color: #000;
    --bs-emphasis-color-rgb: 0, 0, 0;
    --bs-secondary-color: rgba(33, 37, 41, 0.75);
    --bs-secondary-color-rgb: 33, 37, 41;
    --bs-secondary-bg: #e9ecef;
    --bs-tertiary-color: rgba(33, 37, 41, 0.5);
    --bs-tertiary-bg: #f8f9fa;
    --bs-border-color: #dee2e6;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
    --bs-link-color: #0d6efd;
    --bs-link-color-rgb: 13, 110, 253;
    --bs-link-hover-color: #0a58ca;
    --bs-link-hover-color-rgb: 10, 88, 202;
    --bs-primary-bg-subtle: #cfe2ff;
    --bs-primary-border-subtle: #9ec5fe;
    --bs-primary-text-emphasis: #052c65;
    --bs-secondary-bg-subtle: #e2e3e5;
    --bs-secondary-border-subtle: #c4c8cb;
    --bs-secondary-text-emphasis: #2b2f32;
    --bs-success-bg-subtle: #d1e7dd;
    --bs-success-border-subtle: #a3cfbb;
    --bs-success-text-emphasis: #0a3622;
    --bs-danger-bg-subtle: #f8d7da;
    --bs-danger-border-subtle: #f1aeb5;
    --bs-danger-text-emphasis: #58151c;
    --bs-warning-bg-subtle: #fff3cd;
    --bs-warning-border-subtle: #ffe69c;
    --bs-warning-text-emphasis: #664d03;
    --bs-info-bg-subtle: #cff4fc;
    --bs-info-border-subtle: #9eeaf9;
    --bs-info-text-emphasis: #055160;
    --bs-light-bg-subtle: #fcfcfd;
    --bs-light-border-subtle: #e9ecef;
    --bs-dark-bg-subtle: #ced4da;
    --bs-dark-border-subtle: #adb5bd;
    --bs-dark-text-emphasis: #495057;
    --bs-form-valid-color: #198754;
    --bs-form-valid-border-color: #198754;
    --bs-form-invalid-color: #dc3545;
    --bs-form-invalid-border-color: #dc3545;
    --bs-focus-ring-color: rgba(13, 110, 253, 0.25);

    /* A cor herdada do body já vinha resolvida com a tinta do app; re-resolve aqui. */
    color: var(--bs-body-color);
}

/* O fundo da página vem do .bg-light do EmptyLayout, que fica fora do
   .themed-booking e é compartilhado com telas do app (login, onboarding,
   assinar). Em vez de mexer nele, o "Padrão" pinta o próprio fundo com o
   cinza que o .bg-light dava antes, e o :has() corrige a sobra das laterais
   onde o browser suportar. */
.themed-booking:not([data-theme]) {
    background-color: #f8f9fa;
}

/* O "Padrão" nunca declarou os tokens semânticos (--ink/--accent/--card/...): as regras
   estruturais acima são todas escopadas em [data-theme], então ele nunca precisou deles.
   A tela unificada do agendamento fala só em tokens, e precisa funcionar nos quatro temas —
   este bloco dá ao "Padrão" o mesmo vocabulário, com a paleta salmão/creme que ele já usa.

   Escopado em .ag-page de propósito: PublicBooking.razor.css lê os mesmos nomes com
   fallback (var(--card-selected, var(--bs-secondary)), var(--accent-strong, var(--bs-success))),
   então declará-los no "Padrão" inteiro trocaria o painel de confirmação e o ícone de
   check da tela de agendar. A tela nova é a única que os enxerga. */
.themed-booking:not([data-theme]).ag-page {
    --bg: #f8f9fa;
    --ink: #4A3E3D;
    --muted: #857A78;
    --display: 'Plus Jakarta Sans', sans-serif;
    --display-weight: 600;
    --display-style: normal;
    --accent: #D96E59;
    --accent-strong: #D96E59;
    --accent-shadow: rgba(217, 110, 89, .3);
    --onaccent: #3A1008;
    --onaccent-strong: #3A1008;
    --card: #FCFBF7;
    --card-selected: #F7F3EC;
    --card-border: #E7E0D6;
    --ok: #2A5F38;
    --warn: #7A4E08;
    --accent-text: #B4432C;
}

.public-layout:has(.themed-booking) {
    --bs-light: #f8f9fa;
    --bs-light-rgb: 248, 249, 250;
}

/* Variantes de botão: o app.css novo redeclara as --bs-btn-* de cada uma, então
   aqui elas voltam ao valor compilado do Bootstrap. */
.themed-booking .btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0d6efd;
    --bs-btn-border-color: #0d6efd;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0b5ed7;
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;
}

/* ...e por cima delas, o override salmão que o app.css antigo aplicava. */
.themed-booking .btn-primary {
    background-color: #d96e59 !important;
    border-color: #d96e59 !important;
    color: #3A1008 !important;
}

.themed-booking .btn-primary:hover,
.themed-booking .btn-primary:focus,
.themed-booking .btn-primary:active {
    border-color: #d49386 !important;
    color: #3A1008 !important;
    box-shadow: 0 0 0 0.25rem rgba(232, 165, 152, 0.5) !important;
}

.themed-booking .btn-light {
    --bs-btn-color: #000;
    --bs-btn-bg: #f8f9fa;
    --bs-btn-border-color: #f8f9fa;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #d3d4d5;
    --bs-btn-hover-border-color: #c6c7c8;
    --bs-btn-focus-shadow-rgb: 211, 212, 213;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #c6c7c8;
    --bs-btn-active-border-color: #babbbc;
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #f8f9fa;
    --bs-btn-disabled-border-color: #f8f9fa;
}

.themed-booking .btn-outline-primary {
    --bs-btn-color: #0d6efd;
    --bs-btn-border-color: #0d6efd;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0d6efd;
    --bs-btn-hover-border-color: #0d6efd;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0d6efd;
    --bs-btn-active-border-color: #0d6efd;
    --bs-btn-disabled-color: #0d6efd;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #0d6efd;
}

.themed-booking .btn-outline-danger {
    --bs-btn-color: #dc3545;
    --bs-btn-border-color: #dc3545;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #dc3545;
    --bs-btn-hover-border-color: #dc3545;
    --bs-btn-focus-shadow-rgb: 220, 53, 69;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #dc3545;
    --bs-btn-active-border-color: #dc3545;
    --bs-btn-disabled-color: #dc3545;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #dc3545;
}

.themed-booking a,
.themed-booking .btn-link {
    color: #006bb7;
}

.themed-booking[data-theme] .tb-surface .btn-link,
.themed-booking[data-theme] .tb-surface a {
    color: var(--accent-text);
}

.themed-booking .card {
    --bs-card-bg: var(--bs-body-bg);
    --bs-card-color: inherit;
    --bs-card-border-color: var(--bs-border-color-translucent);
    --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03);
}

/* Campo de formulário volta a ser fundo de corpo, sem o --uc-surface do app. */
.themed-booking .form-control,
.themed-booking .form-select {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

.themed-booking .form-control::placeholder {
    color: var(--bs-secondary-color);
}

.themed-booking .form-control:disabled,
.themed-booking .form-select:disabled {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

/* Foco azul do Bootstrap, como era antes -- o anel laranja é do app. */
.themed-booking .form-control:focus,
.themed-booking .form-select:focus,
.themed-booking .form-check-input:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.themed-booking .form-check-input:checked,
.themed-booking .form-check-input[type=checkbox]:indeterminate {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.themed-booking .form-switch .form-check-input:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.themed-booking .form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2386b7fe'/%3e%3c/svg%3e");
}

.themed-booking .btn:focus-visible,
.themed-booking .form-control:focus-visible,
.themed-booking .form-select:focus-visible,
.themed-booking .form-check-input:focus-visible,
.themed-booking a:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* -------- Estrutura genérica que consome os tokens acima -------- */

.themed-booking[data-theme] {
    background-color: var(--bg);
    color: var(--ink);
    transition: background-color .25s ease, color .25s ease;
}

.themed-booking[data-theme] .tb-hero {
    display: block;
    background: var(--hero-bg);
    border-radius: var(--radius-lg);
    padding: 22px 20px 20px;
    margin-bottom: 1.25rem;
}

.themed-booking[data-theme="glam"] .tb-hero {
    border: 1px solid #332B2E;
}

.themed-booking[data-theme] .tb-hero-eyebrow {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--onhero-muted);
    margin: 0 0 .5rem;
}

.themed-booking[data-theme] .tb-hero-title {
    font-family: var(--display);
    font-weight: var(--display-weight);
    font-style: var(--display-style);
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--onhero);
    margin: 0;
}

.themed-booking[data-theme] .tb-surface {
    background-color: var(--card) !important;
    border-radius: var(--radius-lg) !important;
    color: var(--ink);
}

.themed-booking[data-theme] .tb-heading {
    font-family: var(--display);
    font-weight: var(--display-weight);
    font-style: var(--display-style);
    color: var(--ink);
}

.themed-booking[data-theme] .tb-choice.btn-light {
    background-color: var(--card) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--radius-md) !important;
    color: var(--ink) !important;
}

.themed-booking[data-theme] .tb-choice.btn-primary {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    border-radius: var(--radius-md) !important;
    color: var(--onaccent) !important;
    box-shadow: 0 6px 16px -6px var(--accent-shadow) !important;
}

/* Dia selecionado no calendário (.month-day): não é .tb-choice, então ficava de fora
   da regra acima e caía no --bs-primary (avermelhado) em vez da cor do tema. */
.themed-booking[data-theme] .month-day.btn-primary {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--onaccent) !important;
}

.themed-booking[data-theme] .tb-cta.btn-primary {
    background-color: var(--accent-strong) !important;
    border-color: var(--accent-strong) !important;
    border-radius: var(--radius-md) !important;
    color: var(--onaccent-strong) !important;
    font-family: var(--display);
    font-weight: var(--display-weight);
    box-shadow: 0 10px 22px -8px var(--accent-shadow) !important;
}

.themed-booking[data-theme] .tb-cta.btn-light {
    border-radius: var(--radius-md) !important;
}

/* Serviço selecionado: tint + borda (como o protótipo), não preenchimento
   sólido com --accent — diferente do padrão genérico de dia/horário acima,
   que preenche sólido de propósito. */
.themed-booking[data-theme] .tb-choice.tb-service.btn-primary {
    background-color: var(--card-selected) !important;
    border-color: var(--accent) !important;
    color: var(--ink) !important;
    box-shadow: 0 6px 18px -6px var(--accent-shadow) !important;
}

.themed-booking[data-theme] .tb-price {
    background-color: transparent !important;
    color: var(--accent-text) !important;
    font-weight: 800 !important;
}

/* .tb-avatar e .tb-brand-name morreram junto com o header antigo. O nome do negócio agora
   é .ag-brand, que já lê --display/--display-weight/--display-style em public-booking-shell.css.
   Só o Glam continua precisando de regra própria: ele tem uma display de marca separada
   (Italiana) e a display normal dele é itálica. */
.themed-booking[data-theme="glam"] .ag-brand {
    font-family: var(--display-brand);
    font-style: normal;
    letter-spacing: .02em;
}

/* A cor do painel de confirmação era decidida por token ausente
   (var(--card-selected, var(--bs-secondary))). Agora as duas páginas públicas declaram os
   tokens, então a intenção precisa ser explícita: sem tema, o creme de antes; com tema,
   as superfícies do tema. */
.themed-booking[data-theme] .tb-confirm-surface {
    background: var(--card-selected);
    border-color: var(--card-border) !important;
    color: var(--ink);
}

.themed-booking[data-theme] .tb-confirm-summary {
    background: var(--card);
}

/* -------- Textos e componentes que usam classes utilitárias do Bootstrap
   (com !important próprio), então precisam de override explícito para
   não ficar apagados/ilegíveis em temas de fundo escuro (ex.: Glam Noturno) -------- */

.themed-booking[data-theme] .text-muted {
    color: var(--muted) !important;
}

.themed-booking[data-theme] .selection-summary {
    background-color: var(--card-selected) !important;
    border: 1px solid var(--card-border);
}

.themed-booking[data-theme] .selection-summary .btn-link {
    color: var(--accent-text) !important;
}

.themed-booking[data-theme] .step-circle {
    background-color: var(--card) !important;
    border-color: var(--card-border) !important;
    color: var(--muted) !important;
}

.themed-booking[data-theme] .step-item.active .step-circle {
    border-color: var(--accent-strong) !important;
    background-color: var(--accent-strong) !important;
    color: var(--onaccent-strong) !important;
}

.themed-booking[data-theme] .step-item.done .step-circle {
    border-color: var(--accent) !important;
    background-color: var(--accent) !important;
    color: var(--onaccent) !important;
}

.themed-booking[data-theme] .step-label {
    color: var(--muted) !important;
}

.themed-booking[data-theme] .step-item.active .step-label {
    color: var(--ink) !important;
}

.themed-booking[data-theme] .step-connector {
    background-color: var(--card-border) !important;
}

.themed-booking[data-theme] .step-connector.done {
    background-color: var(--accent) !important;
}

/* -------- AppointmentDetails.razor: icons, outline buttons, form fields
   that reuse plain Bootstrap classes instead of tb-* hooks -------- */

.themed-booking[data-theme] .text-primary {
    color: var(--accent-strong) !important;
}

.themed-booking[data-theme] .btn-outline-primary {
    color: var(--accent-text) !important;
    border-color: var(--accent-text) !important;
}

.themed-booking[data-theme] .btn-outline-primary:hover,
.themed-booking[data-theme] .btn-outline-primary:focus {
    background-color: var(--accent-strong) !important;
    color: var(--onaccent-strong) !important;
}

.themed-booking[data-theme] .form-control.bg-light {
    background-color: var(--card) !important;
    border: 1px solid var(--card-border) !important;
    color: var(--ink) !important;
}

.themed-booking[data-theme] .form-control.bg-light::placeholder {
    color: var(--muted);
}

.themed-booking[data-theme] .form-label {
    color: var(--ink);
}