/* =============== ESTILOS GLOBAIS E UTILITÁRIOS =============== */
body {
    font-family: "Rubik", sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px; /* Pode ser removido se os containers principais tiverem seu próprio padding */
    background-color: var(--color-background-light);
    color: var(--color-text-dark);
    /* As propriedades abaixo centralizam o conteúdo principal da página.
       Isso é bom para páginas de login/auth. Se outras páginas (como app.html)
       não devem ser centralizadas assim, você pode precisar adicionar uma classe
       ao body de index.html e aplicar esses estilos apenas a essa classe. */
    /* display: flex;
    flex-direction: column; */
    align-items: center;
    min-height: 100vh;
    justify-content: center;
}

#auth{
    display: flex;
}

/* ===  login  ====*/

/* Adicione ao seu style.css */
.hidden {
    display: none;
}
.google-btn, .phone-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
    font-family: "Rubik", sans-serif;
    background-color: var(--color-background-neutral);
    border: 1px solid var(--color-gray-border);
    border-radius: 4px 4px 0 0;
    width: 100%;
    padding: 12px;
    font-size: 16px;
    cursor: pointer;
}
.google-btn img {
    width: 18px;
    height: 18px;
}

#authMethods{
    text-align: center;
}

.container { /* Container principal para conteúdo nas páginas */
    margin: 20px auto; /* Centraliza e adiciona margem vertical */
    background: var(--color-white);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px var(--color-black-shadow-01);
}

.container, .auth-container{
    max-width: 100%;
    width: 90%;
}

header {
    border-bottom: 1px solid var(--color-gray-light);
    padding-bottom: 10px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header h1 {
    margin: 0;
    font-size: 1.8em;
}

footer{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

footer .imgFooter img{
    width: 30px;
}

footer span{
    font-size: 13px;
}
/*====  imagens do login =======*/
.imgLogin {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.imgLogin img{
    max-width: 100%;
    width: 30%;
}

.imgLogin h5{
    color: var(--color-text-subtle);
    font-size: 12px;
}

h2{
    color: var(--color-text-heading);
    margin: 0px 0px 6px 0px;
}

#bookingMessage{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#bookingMessage a{
    max-width: 100%;
    width: 200px;
    text-decoration: none;
}

/* =============== FORMULÁRIOS E BOTÕES GERAIS =============== */
input{
    background-color: var(--color-input-special);
}
.form-group p {
   text-align: center;
}

.form-group label {
    line-height: 1;
    display: block;
    margin-bottom: 5px;
    color: var(--color-text-dark);
}

.form-group input[type="text"],
.form-group input[type="tel"],
.form-group input[type="password"],
.form-group input[type="date"],
.form-group input[type="time"], /* Adicionado input[type="time"] */
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--color-gray-border);
    border-radius: 4px;
    box-sizing: border-box;
    background-color: var(--color-input-background);
    color: var(--color-input-text);
}

.form-tabs{
    display: flex;
    justify-content: space-between;
}

.tab-btn{
	    display: block;
    width: 40%;
    padding: 12px;
    background-color: var(--color-button-primary); /* Azul padrão */
    color: var(--color-white);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.2s;
    margin-top: 10px; /* Espaçamento para botões de formulário */
    margin-bottom: 20px;
}

/* Botões de ação principais (Submit, Agendar) */
button[type="submit"], .buttonPrimary, 
#bookAppointmentButton, /* app.html */
#saveServiceButton, /* professional-admin.html */
#workingHoursForm button[type="submit"], /* professional-admin.html */
#breakForm button[type="submit"], /* professional-admin.html */
#editAppointmentForm button[type="submit"] /* professional-admin.html */
 {
    display: block;
    width: 100%;
    padding: 12px;
    background-color: var(--color-button-primary); /* Azul padrão */
    color: var(--color-white);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.2s;
    margin-top: 10px; /* Espaçamento para botões de formulário */
    margin-bottom: 20px;
}

button[type="submit"]:hover,
#bookAppointmentButton:hover,
#saveServiceButton:hover,
#workingHoursForm button[type="submit"]:hover,
#breakForm button[type="submit"]:hover,
#editAppointmentForm button[type="submit"]:hover {
    background-color: var(--color-button-primary-hover); /* Azul mais escuro */
}

/* Botões secundários ou de ação específica */
#logoutButton {
    padding: 8px 12px;
    background-color: var(--color-button-logout); /* Vermelho */
    color: var(--color-white);
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
#logoutButton:hover {
    background-color: var(--color-button-cancel-hover);
}

.butProfArea{
    padding: 8px 12px;
    background-color: var(--color-background-selected);
    color: var(--color-text-secondary);
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid var(--color-border-light);
    text-decoration: none;
}

.butProfArea a{
    text-decoration: none;
}

.cancel-btn, /* app.html - cancelar agendamento cliente */
button.delete-service-btn, /* professional-admin.html */
button.delete-break-btn, .delete-client-btn, /* professional-admin.html */
#professionalAppointmentsList .delete-appt-btn /* professional-admin.html */
{
    background-color: var(--color-button-cancel); /* Vermelho para exclusão/cancelamento */
    color: var(--color-white);
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.9em;
    max-width: 50%;
}
.cancel-btn:hover,
button.delete-service-btn:hover,
button.delete-break-btn:hover, .delete-client-btn,
#professionalAppointmentsList .delete-appt-btn:hover {
    background-color: var(--color-button-cancel-hover);
}

button.edit-service-btn, .edit-client-btn, /* professional-admin.html */
#professionalAppointmentsList .edit-appt-btn /* professional-admin.html */
{
    background-color: var(--color-button-edit); /* Amarelo para edição */
    color: var(--color-button-edit-text);
    border: none;
    padding: 5px 10px; /* Ajustado para consistência */
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.9em; /* Ajustado para consistência */
    max-width: 50%;
}
button.edit-service-btn:hover, .edit-client-btn,
#professionalAppointmentsList .edit-appt-btn:hover {
    background-color: var(--color-button-edit-hover);
}

#cancelEditServiceButton { /* professional-admin.html */
    background-color: var(--color-button-gray); /* Cinza */
    color: var(--color-white);
    padding: 10px 15px; /* Ajustado para ser mais como um botão principal */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 10px; /* Para separar do botão de salvar */
    width: auto; /* Para não ocupar 100% da largura */
    display: inline-block; /* Para ficar ao lado */
}
#cancelEditServiceButton:hover {
    background-color: var(--color-button-gray-hover);
}

#statusDate{
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
}

.filters button { /* professional-admin.html */
    padding: 10px 15px;
    background-color: var(--color-button-filter); /* Ciano para filtros */
    color: var(--color-white);
    border:none;
    border-radius: 4px;
    cursor: pointer;
}
.filters button:hover {
    background-color: var(--color-button-filter-hover);
}

.pagination-controls button { /* professional-admin.html */
    padding: 8px 12px;
    margin: 0 -6px;
    background-color: var(--color-button-gray); /* Cinza para paginação */
    color: var(--color-white);
    border:none;
    border-radius: 4px;
    cursor: pointer;
}
.pagination-controls button:hover {
    background-color: var(--color-button-gray-hover);
}

button:disabled {
    background-color: var(--color-disabled-background) !important; /* Garante override */
    color: var(--color-disabled-text) !important;
    cursor: not-allowed !important;
}

/* NOVA MENSAGENS */

/* Estilos para Caixas de Mensagem (Geral) */
.message-box {
    padding: 12px;
    margin-top: 15px;
    border-radius: 5px;
    text-align: center;
    font-weight: 500;
    opacity: 0; /* Começa invisível */
    max-height: 0; /* Começa sem altura */
    overflow: hidden; /* Garante que o conteúdo não vaze */
    transition: opacity 0.3s ease, max-height 0.3s ease, padding 0.3s ease; /* Transição suave */
}

/* Classe para mostrar a caixa de mensagem */
.message-box.show {
    opacity: 1; /* Torna visível */
    max-height: initial; /* Define uma altura máxima para a animação */
    /* O padding será redefinido pelas classes de sucesso/erro */
}

/* Classe para mensagens de sucesso */
.message-box.success {
    background-color: var(--color-success-background);
    color: var(--color-success-text);
    border: 1px solid var(--color-success-border);
    padding: 12px; /* Adiciona padding de volta quando visível */
}

/* Classe para mensagens de erro */
.message-box.error {
    background-color: var(--color-error-background);
    color: var(--color-error-text);
    border: 1px solid var(--color-error-border);
    padding: 12px; /* Adiciona padding de volta quando visível */
}

/* Classe para mensagens de informação/carregando */
.message-box.info {
    background-color: var(--color-info-background);
    color: var(--color-info-text);
    border: 1px solid var(--color-info-border);
    padding: 12px; /* Adiciona padding de volta quando visível */
}

/* MENSAGENS */
.message, .error-message, .success-message {
    margin-top: 10px;
    padding: 10px;
    border-radius: 4px;
    font-size: 0.9em;
    text-align: center; /* Centralizar mensagens */
}
.error-message {
    color: var(--color-error-text);
    background-color: var(--color-error-background);
    border: 1px solid var(--color-error-border);
}
.success-message {
    color: var(--color-success-text);
    background-color: var(--color-success-background);
    border: 1px solid var(--color-success-border);
}
.message { /* Mensagem genérica, informativa */
    color: var(--color-message-text);
    background-color: var(--color-message-background);
    border: 1px solid var(--color-message-border);
    font-weight: normal; /* Removido bold para diferenciar de erro/sucesso */
}

/* =============== ESTILOS PARA PÁGINA DE LOGIN/CADASTRO (index.html) =============== */
.auth-container { /* Wrapper para os formulários de login e cadastro */
    max-width: 450px; /* Mais estreito que o container geral */
    width: 90%;
    background-color: var(--color-background-auth);
    /* margin e padding já são tratados pelo .container e body, mas podem ser ajustados aqui se necessário */
}

.auth-form-section { /* Container para o formulário de login */
    background-color: var(--color-background-light-gray); /* Redundante se dentro de .container, mas bom para standalone */
    padding: 25px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px var(--color-black-shadow-005); /* Sombra mais suave */
}

.auth-form-section h1,
.signup-accordion-module .accordion-content h1 { /* Título dos formulários de auth */
    text-align: center;
    margin-top: 0;
    margin-bottom: 25px;
    color: var(--color-button-logout);
    font-size: 1.5em;
}

/* Por padrão, o conteúdo do acordeão fica escondido quando ele está fechado. */
.accordion-content {
    overflow: hidden; /* Garante que o conteúdo não vaze quando o acordeão está fechado */
    /* A transição suave do max-height ainda funciona */
    transition: max-height 0.3s ease-out;
}

/* APENAS quando o acordeão estiver aberto (com a nossa classe JS),
   permitimos que o conteúdo (a lista de clientes) fique visível. */
.accordion-content.accordion-open {
    overflow: visible;
}
.form-divider { /* Linha separadora (se usada) */
    margin: 30px 0;
    border: 0;
    border-top: 1px solid var(--color-gray-light);
}

/* Accordion para Cadastro em index.html */
.signup-accordion-module .accordion-header { /* Usando a classe genérica .accordion-header */
    font-size: 1.0em;
    padding: 15px 18px;
    border-radius: 4px 4px 0 0;
    margin-top: 0; /* Sem margem superior para este accordion específico */
    color: var(--color-input-text);
}
.signup-accordion-module .accordion-header.active + .accordion-content {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}
/* Se o accordion de cadastro for o último elemento e estiver fechado */
.signup-accordion-module:last-of-type .accordion-header:not(.active) {
    border-bottom: 1px solid var(--color-gray-border);
    border-radius: 4px;
}

/* =============== ESTILOS PARA PÁGINA DO CLIENTE (app.html) =============== */
#serviceInfo { /* Informação do serviço selecionado */
    font-size: 0.9em;
    color: var(--color-text-light);
    margin-top: 10px;
    font-weight: bold;
}

/* 2. A Galeria de Profissionais, que agora se comporta como a de serviços */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.app-layout #main-content-container {
    background: var(--duoo-catalog-bg);
    color: var(--duoo-catalog-text);
    border-radius: 8px;
    box-shadow: 0 16px 40px rgba(12, 9, 28, 0.24);
}

.app-layout #main-content-container h1,
.app-layout #main-content-container p,
.app-layout #main-content-container label,
.app-layout #main-content-container h4 {
    color: var(--duoo-catalog-text);
}

.app-layout #main-content-container .form-group label {
    color: var(--duoo-catalog-text);
    font-weight: 700;
}

.service-step-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 14px;
}

.service-step-header span {
    color: var(--duoo-catalog-text);
    font-size: 15px;
    font-weight: 800;
}

.service-step-back {
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid rgba(218, 158, 20, 0.45);
    border-radius: 8px;
    background: rgba(218, 158, 20, 0.12);
    color: var(--duoo-catalog-accent-strong);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.service-categories-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}

.service-category-card {
    min-height: 118px;
    padding: 16px 10px 14px;
    border: 1px solid var(--duoo-catalog-border-soft);
    border-radius: 8px;
    background: var(--duoo-catalog-surface);
    color: var(--duoo-catalog-text);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    box-shadow: 0 10px 22px var(--duoo-catalog-shadow);
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.service-category-card.has-image {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(var(--duoo-category-image-overlay), var(--duoo-category-image-overlay-strong)), var(--category-card-image);
    background-size: cover;
    background-position: center;
}

.service-category-card.has-image:hover,
.service-category-card.has-image:focus-visible {
    background-image: linear-gradient(var(--duoo-category-image-overlay), var(--duoo-category-image-overlay)), var(--category-card-image);
}

.service-category-card.has-image i,
.service-category-card.has-image .service-category-name,
.service-category-card.has-image .service-category-count {
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 6px rgba(255, 255, 255, 0.55);
}

.service-category-card:hover,
.service-category-card:focus-visible {
    transform: translateY(-2px);
    border-color: var(--duoo-catalog-accent);
    background: var(--duoo-catalog-surface-hover);
    outline: none;
}

.service-category-card i {
    color: var(--duoo-catalog-accent);
    font-size: 30px;
    line-height: 1;
}

.service-category-name {
    color: var(--duoo-catalog-text);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.service-category-count {
    color: var(--duoo-catalog-text-muted);
    font-size: 11px;
    line-height: 1.1;
}

.professionals-gallery {
    display: flex;          /* Essencial para alinhar os cards lado a lado */
    flex-wrap: nowrap;      /* IMPEDE que os cards quebrem para a linha de baixo */
    gap: 15px;              /* Espaçamento entre os cards */
    min-width: min-content; /* Ajuda o flexbox a calcular a largura mínima necessária */
    
    /* Adiciona um padding para que os cards não colem nas bordas do container de rolagem */
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 15px; /* Importante para a sombra e a barra de rolagem não cortarem o card */
}

/* 3. O Card do Profissional (já estava bom, mas adicionamos flex-shrink) */
.professional-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    text-align: center;
    
    flex-shrink: 0; /* Impede que os cards encolham */
    
    width: 80px;
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 8px;
    transition: all 0.3s ease;
}

/* O resto das suas regras para .professional-card, .professional-card.selected, img, e span continuam as mesmas. */
.professional-card.selected {
    border-color: var(--color-primary);
    background-color: var(--color-selected-background);
}

.professional-card img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 8px;
    border: 2px solid var(--color-gray-border);
}

.professional-card span {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-medium);
}

/* Cards de Serviço com Rolagem Horizontal */
.services-horizontal-scroll-container {
    overflow-x: auto;   /* Habilita a barra de rolagem horizontal QUANDO necessário */
    overflow-y: hidden; /* Esconde a rolagem vertical desnecessária */
    width: 100%;        /* Força o container a ocupar 100% da largura do seu pai (o .container) */
    padding-bottom: 15px; /* Adiciona um espaço para a barra de rolagem não ficar colada nos cards */
    
    /* Adiciona um efeito de "fade out" nas bordas para indicar que há mais conteúdo */
    -webkit-mask-image: linear-gradient(to right, var(--color-black-transparent-0), var(--color-black-solid-1) 5%, var(--color-black-solid-1) 95%, var(--color-black-transparent-0));
    mask-image: linear-gradient(to right, var(--color-black-transparent-0), var(--color-black-solid-1) 5%, var(--color-black-solid-1) 95%, var(--color-black-transparent-0));
}

#servicesContainer.services-cards-container-horizontal {
    display: flex;          /* Essencial para alinhar os cards lado a lado */
    flex-wrap: nowrap;      /* IMPEDE que os cards quebrem para a linha de baixo */
    gap: 15px;              /* Espaçamento entre os cards */
    min-width: min-content; /* Ajuda o flexbox a calcular a largura mínima necessária */
    padding-left: 5px;      /* Pequeno respiro no início */
    padding-right: 5px;     /* Pequeno respiro no fim */
    padding-top: 10px;
}
.services-horizontal-scroll-container::-webkit-scrollbar { height: 8px; }
.services-horizontal-scroll-container::-webkit-scrollbar-track { background: var(--color-scrollbar-track); border-radius: 4px; }
.services-horizontal-scroll-container::-webkit-scrollbar-thumb { background: var(--color-scrollbar-thumb); border-radius: 4px; }
.services-horizontal-scroll-container::-webkit-scrollbar-thumb:hover { background: var(--color-scrollbar-thumb-hover); }

.services-cards-container-horizontal { /* Nomeado para diferenciar de outros containers de cards */
    display: inline-flex;
    gap: 15px;
}

/* CARD com recorte orgânico para encaixar a badge */
.service-card {
    position: relative;
    width: 180px;
    height: 120px;
    flex-shrink: 0;
    cursor: pointer;
    background-color: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-card-content-wrapper {
    background-color: var(--color-service-card-background);
    /* border: 2px solid var(--color-text-medium); */
    clip-path: path("M0,36 Q-14,-11 41,0 H121 q26,-1 23,18 v11 q0,7 11,7 q23,-1 19,21 v26 q3,34 -9,37 H7 Q-3,115 0,100 Z");
    /* border-radius: 36px; */
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    z-index: 1;
}

.service-card.has-image .service-card-content-wrapper {
    overflow: hidden;
    background-image: linear-gradient(var(--duoo-category-image-overlay), var(--duoo-category-image-overlay-strong)), var(--service-card-image);
    background-size: cover;
    background-position: center;
}

.service-card.has-image .service-card-content {
    position: relative;
    z-index: 2;
    width: 78%;
    margin-left: 0;
    padding-left: 12px;
}

.service-card.has-image .service-card-title,
.service-card.has-image .service-card-description,
.service-card.has-image .service-card-price {
    color: var(--duoo-catalog-text);
    text-shadow: 0 1px 6px rgba(255, 255, 255, 0.55);
}


/* Badge circular “encaixada” no recorte superior direito */
.service-card-duration-badge {
    position: absolute;
    top: 15px;
    left: 91%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    background-color: var(--color-service-card-background);
    /* border: 2px solid var(--color-text-medium); */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-card);
    z-index: 2;
}


/* Layout interno */
.service-card-content {
    height: 100%;
    display: flex;
    text-align: start;
    width: 75%;
    padding: 10px 10px 10px 10px;
    flex-direction: column;
    justify-content: space-around;
}
.service-card-title {
    text-align: start;
    margin: 5px 0px 2px 0px;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-card);
    text-transform: uppercase;
}
.service-card-description {
    margin: 0;
    font-size: 11px;
    line-height: 1.25;
    color: var(--color-text-soft);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.service-card-price {
    font-size: 14px;
    color: var(--color-text-card-price);
}

.service-card.price-hidden .service-card-price {
    display: none !important;
}

/* Estado selecionado para o CARD */
.service-card.selected .service-card-content-wrapper {
    background-color: var(--color-text-medium);
    border-color: var(--color-white);
}

.service-card.has-image.selected .service-card-content-wrapper {
    background-image: linear-gradient(rgba(48, 48, 48, 0.48), rgba(48, 48, 48, 0.68)), var(--service-card-image);
    background-size: cover;
    background-position: center;
}

/* Título e preço em branco */
.service-card.selected .service-card-title,
.service-card.selected .service-card-description,
.service-card.selected .service-card-price {
    color: var(--color-white);
}

/* Badge selecionada */
.service-card.selected .service-card-duration-badge {
    background-color: var(--color-text-medium);
    border-color: var(--color-white);
    color: var(--color-white);
}

#selectProfessionalFirstMsg {
    color: var(--color-text-muted);
    font-style: italic;
    padding: 10px;
    white-space: normal;
}

.app-layout .service-card-content-wrapper,
.app-layout .service-card-duration-badge {
    background-color: var(--color-service-card-background);
}

.app-layout .service-card-title,
.app-layout .service-card-duration-badge {
    color: var(--color-text-card);
}

.app-layout .service-card-price {
    color: var(--color-text-card-price);
}

.app-layout .service-card.has-image .service-card-title,
.app-layout .service-card.has-image .service-card-description,
.app-layout .service-card.has-image .service-card-price {
    color: var(--duoo-catalog-text);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.app-layout .service-card.selected .service-card-content-wrapper,
.app-layout .service-card.selected .service-card-duration-badge {
    background-color: var(--color-background-day-card-selected);
}

.app-layout .service-card.selected .service-card-title,
.app-layout .service-card.selected .service-card-description,
.app-layout .service-card.selected .service-card-price,
.app-layout .service-card.selected .service-card-duration-badge {
    color: var(--color-text-card-selected);
}

/* Seção de Serviços Selecionados */
.app-layout .service-card.has-image.selected .service-card-title,
.app-layout .service-card.has-image.selected .service-card-description,
.app-layout .service-card.has-image.selected .service-card-price {
    color: var(--duoo-catalog-text);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
}

.app-layout .service-card.has-image.selected .service-card-duration-badge {
    background-color: var(--color-background-day-card-selected);
    color: var(--color-text-card-selected);
}

#selectedServicesSection {
    background-color: var(--color-gray-light);; /* Cinza claro */
    border: 1px solid var(--color-border-medium);
    border-radius: 5px;
    padding: 15px;
    margin-top: 15px; /* Adicionado para separar dos cards */
    margin-bottom: 15px;
}
#selectedServicesSection h4 { margin-top: 0; margin-bottom: 10px; color: var(--color-text-dark-gray); }
#selectedServicesList { list-style: disc; padding-left: 20px; margin-bottom: 10px; font-size: 13px; }
#selectedServicesList li { margin-bottom: 5px; font-size: 0.95em; }
.app-layout #selectedServicesSection,
.app-layout #selectedServicesSection h4,
.app-layout #selectedServicesSection p,
.app-layout #selectedServicesSection li {
    color: var(--color-text-dark-gray);
}

.category-image-preview {
    width: 100%;
    max-width: 280px;
    height: 120px;
    margin-top: 10px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--color-border-soft);
    background: var(--color-background-soft);
}

.service-image-preview {
    width: 100%;
    max-width: 280px;
    height: 120px;
    margin-top: 10px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--duoo-admin-modal-border);
    background: var(--duoo-admin-modal-surface);
}

.category-list-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.category-list-thumb {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--color-background-soft);
    border: 1px solid var(--color-border-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
}

/* Accordion "Meus Agendamentos" em app.html */
.my-appointments-accordion .accordion-header-client { /* Classe específica */
    /* Estilos já definidos em .accordion-header genérico se aplicável, ou pode ter overrides aqui */
    margin-top: 30px;
}

/* Lista de "Meus Agendamentos" */
#appointmentsList {
    list-style: none;
    padding: 0;
    margin:0;
}
#appointmentsList li strong { font-size: 1.05em; }
#appointmentsList .cancel-btn { float: right; margin-top: -5px; /* Ajuste para alinhar melhor */}

/* =============== ESTILOS PARA PÁGINA DO PROFISSIONAL (professional-admin.html) =============== */
/* Módulos de Administração */
.admin-module {
    /* Se usando accordion, .admin-module é o wrapper do accordion */
    padding: 0;
    margin-bottom: 10px;
    border: none;
}
#profPhoneAuthSection p, label{
    font-size: 13px;
}
.admin-module .accordion-header { /* Cabeçalho dos accordions no admin */
    /* Estilos já definidos em .accordion-header genérico */
    color: var(--color-text-dark);
}
.admin-module .accordion-content > div { /* Conteúdo interno dos accordions no admin */
    /* padding-top e padding-bottom já definidos em .accordion-content > div */
    
}

/* Títulos dentro dos módulos de admin (se não for o header do accordion) */
.admin-module h2 { margin-top: 0; border-bottom: 1px solid var(--color-disabled-background); padding-bottom: 10px; margin-bottom: 15px; }
.admin-module h3 { margin-top: 20px; font-size: 1.2em; } /* Destaque para subtítulos */
.admin-module h4 { margin-top: 5px; margin-bottom: 10px; font-size: 1.1em; }

/* Listas de Serviços e Pausas no admin */
#servicesList ul, #breaksList ul { list-style: none; padding-left: 0; }
#servicesList li, #breaksList li {
    padding: 10px; /* Aumentei padding */
    border-bottom: 1px solid var(--color-gray-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-white); /* Fundo para destacar da base do accordion */
    font-size: 13px;
}
#servicesList li:first-of-type, #breaksList li:first-of-type { border-top: 1px solid var(--color-gray-light); } /* Linha no topo da primeira */
#servicesList li:last-child, #breaksList li:last-child { border-bottom: none; }
#servicesList button, #breaksList button { margin-left: 10px; } /* Botões de editar/excluir nessas listas */

.add-service-accordion-module {
    margin-top: 18px;
}

.add-service-accordion-module form {
    padding-top: 4px;
}

/* Clientes - layout moderno */
.clients-modern-container { max-width: 760px; }
.clients-modern-header { display: flex; align-items: center; justify-content: center; min-height: 28px; margin-bottom: 12px; }
.clients-modern-header h2 { margin: 0; font-size: 16px; line-height: 1.2; color: var(--color-text-admin); }
.clients-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(142px, 180px); gap: 12px; align-items: center; margin-bottom: 10px; }
.client-search-field { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px; border: 1px solid var(--color-border-soft); border-radius: 8px; background: var(--duoo-admin-modal-surface, var(--color-background-admin)); color: var(--color-text-muted); }
.client-search-field i { color: var(--duoo-admin-modal-accent, var(--color-primary)); }
.client-search-field input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--color-text-admin); font-weight: 700; }
.client-search-field input::placeholder { color: var(--color-text-muted); }
.clients-new-button { min-height: 40px; border: 0; border-radius: 8px; background: var(--duoo-admin-modal-accent, var(--color-primary)); color: var(--color-text-white); font-size: 12px; font-weight: 900; text-transform: uppercase; cursor: pointer; }
.hidden-client-form { display: none; }
.clients-secondary-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; margin-bottom: 8px; }
.client-import-button { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border: 1px solid var(--color-border-soft); border-radius: 8px; background: transparent; color: var(--color-text-admin); font-size: 12px; font-weight: 800; cursor: pointer; }
.clients-total-fee { color: var(--color-pending-fee); font-size: 12px; font-weight: 800; }
.clients-list-modern { display: grid; gap: 6px; margin-top: 8px; }
.client-modern-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 28px; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 10px; border: 1px solid transparent; border-radius: 8px; background: var(--color-background-soft); color: var(--color-text-admin); text-align: left; cursor: pointer; }
.client-modern-row:hover, .client-modern-row:focus-visible { border-color: var(--duoo-admin-modal-accent, var(--color-primary)); outline: none; }
.client-row-main { display: inline-flex; align-items: center; min-width: 0; gap: 8px; }
.client-row-main strong { overflow: hidden; color: var(--color-text-admin); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.client-row-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: transparent; background-position: center; background-size: cover; color: var(--duoo-admin-modal-accent, var(--color-primary)); font-size: 14px; }
.client-row-avatar.has-photo { border: 1px solid var(--duoo-admin-modal-accent, var(--color-primary)); }
.client-row-phone { color: var(--color-text-admin); font-size: 12px; font-weight: 900; white-space: nowrap; }
.client-row-more { color: var(--color-text-admin); font-weight: 900; letter-spacing: 0; text-align: right; }
.clients-empty-state { padding: 18px 10px; color: var(--color-text-muted); text-align: center; }
.clients-pagination { margin-top: 14px; }
.client-profile-modal { padding: 0; align-items: stretch; }
.client-profile-content { position: relative; width: min(100%, 620px); min-height: 100vh; max-height: 100vh; margin: 0 auto; padding: 12px 22px 28px; border-radius: 0; background: var(--color-background-admin); color: var(--color-text-admin); }
.client-profile-content .client-modal-back { position: absolute; top: 10px; left: 10px; width: 34px; height: 34px; padding: 0; border: 0; background: transparent; color: var(--duoo-admin-modal-accent, var(--color-primary)); font-size: 18px; text-align: center; }
.client-profile-content .client-modal-back.close-button { position: absolute; width: 34px; }
.client-profile-content h3 { margin: 0 42px 18px; color: var(--color-text-admin); font-size: 15px; line-height: 34px; text-align: center; }
.client-profile-form { display: grid; gap: 18px; }
.client-avatar-editor { position: relative; width: 116px; height: 116px; margin: 8px auto 0; }
.client-avatar-large { display: flex; align-items: center; justify-content: center; width: 108px; height: 108px; border: 3px solid var(--duoo-admin-modal-accent, var(--color-primary)); border-radius: 50%; background: var(--color-background-soft); background-position: center; background-size: cover; color: var(--duoo-admin-modal-accent, var(--color-primary)); overflow: hidden; }
.client-avatar-large.has-photo i, .client-avatar-large.has-photo .client-avatar-initials { display: none; }
.client-avatar-large i { font-size: 54px; }
.client-avatar-initials { position: absolute; color: transparent; }
.client-avatar-camera { position: absolute; right: 0; bottom: 10px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--duoo-admin-modal-surface, var(--color-background-soft)); color: var(--duoo-admin-modal-accent, var(--color-primary)); box-shadow: 0 4px 10px var(--color-black-shadow-02); cursor: pointer; }
.client-profile-tabs { display: inline-flex; justify-self: center; padding: 4px; border-radius: 8px; background: var(--color-background-soft); }
.client-profile-tab { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--color-text-muted); font-size: 13px; font-weight: 800; cursor: pointer; }
.client-profile-tab.active { background: var(--color-background-selected); color: var(--duoo-admin-modal-accent, var(--color-primary)); }
.client-tab-panel { display: none; gap: 18px; }
.client-tab-panel.active { display: grid; }
.client-floating-field { position: relative; display: grid; }
.client-floating-field span { position: relative; z-index: 1; width: fit-content; margin: 0 0 -8px 14px; padding: 0 5px; background: var(--color-background-admin); color: var(--duoo-admin-modal-accent, var(--color-primary)); font-size: 12px; font-weight: 900; }
.client-floating-field input { width: 100%; min-height: 38px; border: 1px solid var(--duoo-admin-modal-border, var(--color-border-soft)); border-radius: 4px; background: var(--duoo-admin-modal-surface, var(--color-background-soft)); color: var(--color-text-admin); font-weight: 800; }
.client-current-phone { display: none; }
.client-gender-group { display: grid; gap: 14px; }
.client-gender-group > span { color: var(--color-text-admin); font-weight: 900; }
.client-gender-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.client-gender-options label { display: flex; align-items: center; gap: 8px; color: var(--color-text-admin); font-size: 12px; font-weight: 800; }
.client-gender-options input { accent-color: var(--duoo-admin-modal-accent, var(--color-primary)); }
.client-modal-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.client-modal-actions button { min-width: 130px; }
.danger-button { border-color: var(--color-error, #d9534f); color: var(--color-error, #d9534f); }
.client-history-list { display: grid; gap: 10px; }
.client-history-item { display: flex; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--color-border-soft); border-radius: 8px; background: var(--color-background-soft); }
.client-history-item div { display: grid; gap: 4px; }
.client-history-item span, .client-history-item small { color: var(--color-text-muted); font-size: 12px; font-weight: 800; }
.admin-option-list { display: grid; gap: 6px; margin-top: 8px; }
.admin-option-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; background: var(--color-background-soft); color: var(--color-text-admin); }
.admin-option-row:hover { border-color: var(--duoo-admin-modal-accent, var(--color-primary)); }
.admin-option-main { display: inline-flex; align-items: center; min-width: 0; gap: 8px; }
.admin-option-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: transparent; background-position: center; background-size: cover; color: var(--duoo-admin-modal-accent, var(--color-primary)); font-size: 14px; }
.admin-option-avatar.has-photo { border: 1px solid var(--duoo-admin-modal-accent, var(--color-primary)); }
.admin-option-text { display: grid; min-width: 0; gap: 2px; }
.admin-option-text strong { overflow: hidden; color: var(--color-text-admin); font-size: 14px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.admin-option-text small { overflow: hidden; color: var(--color-text-muted); font-size: 12px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.admin-option-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
.admin-option-actions button { display: inline-flex; align-items: center; justify-content: center; width: 34px; min-width: 34px; height: 34px; min-height: 34px; margin: 0; padding: 0; border: 1px solid var(--color-border-soft); border-radius: 8px; background: transparent; color: var(--color-text-admin); font-size: 13px; }
.admin-option-actions button:hover { border-color: var(--duoo-admin-modal-accent, var(--color-primary)); color: var(--duoo-admin-modal-accent, var(--color-primary)); transform: none; box-shadow: none; }
.appointment-modern-list { gap: 8px; }
.appointment-modern-row { grid-template-columns: minmax(0, 1fr) auto auto; min-height: 58px; }
.appointment-row-main { gap: 10px; }
.appointment-client-avatar { flex-basis: 34px; width: 34px; height: 34px; font-size: 12px; font-weight: 900; }
.appointment-row-text small { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.appointment-row-text small i { color: var(--duoo-admin-modal-accent, var(--color-primary)); font-size: 11px; }
.appointment-row-status { min-width: 88px; padding: 6px 8px; border-radius: 999px; background: color-mix(in srgb, var(--duoo-admin-modal-accent, var(--color-primary)) 10%, transparent); color: var(--color-text-admin); font-size: 11px; font-weight: 900; text-align: center; }
.appointment-row-status.status-client_confirmed,
.appointment-row-status.status-confirmed { color: var(--color-status-confirmed); }
.appointment-row-status.status-pending { color: var(--duoo-admin-modal-accent, var(--color-primary)); }
.appointment-row-status.status-cancelled { color: var(--color-button-cancel); text-decoration: line-through; opacity: 0.8; }
.appointment-row-status.status-passed { color: var(--color-text-muted); font-style: italic; }
.appointment-row-actions button { width: 32px; min-width: 32px; height: 32px; min-height: 32px; }
.appointment-row-actions .delete-appt-btn:hover { border-color: var(--color-error, #d9534f); color: var(--color-error, #d9534f); }
#editAppointmentModal .modal-content,
#newAppointmentModal .modal-content { max-width: 560px; }
#editAppointmentModal .form-group,
#newAppointmentModal .form-group { margin-bottom: 14px; }
#editAppointmentModal .form-group > label,
#newAppointmentModal .form-group > label { color: var(--duoo-admin-modal-accent, var(--color-primary)); font-size: 12px; font-weight: 900; }
#modalClientName,
#modalServiceName { margin: 6px 0 0; }
.appointment-modal-summary { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--color-border-soft); border-radius: 8px; background: var(--color-background-soft); }
.appointment-modal-avatar { flex-basis: 38px; width: 38px; height: 38px; font-size: 13px; font-weight: 900; }
.appointment-modal-option { margin-bottom: 6px; }
.appointment-service-options { display: grid; gap: 6px; }
.appointment-service-option { cursor: pointer; }
.appointment-service-option input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--duoo-admin-modal-accent, var(--color-primary)); }
#editAppointmentModal input,
#editAppointmentModal select,
#newAppointmentModal input,
#newAppointmentModal select { border-radius: 8px; background: var(--color-background-soft); color: var(--color-text-admin); }
#newApptSummary { margin-top: 8px; color: var(--color-text-admin); font-size: 12px; font-weight: 900; text-align: center; }
@media (max-width: 620px) {
    .clients-toolbar { grid-template-columns: minmax(0, 1fr) 142px; }
    .clients-secondary-actions { align-items: flex-start; flex-direction: column; }
    .client-row-phone { font-size: 11px; }
    .client-profile-content { width: 100%; }
    .client-gender-options { grid-template-columns: 1fr; }
    .admin-option-row { grid-template-columns: minmax(0, 1fr) auto; }
    .admin-option-text strong, .admin-option-text small { white-space: normal; }
    .appointment-modern-row { grid-template-columns: minmax(0, 1fr); }
    .appointment-row-status { justify-self: flex-start; min-width: 0; }
    .appointment-row-actions { justify-content: flex-start; }
}

/* Horários de Trabalho no Admin */
.working-day { border: 1px solid var(--color-gray-border); padding: 15px; margin-bottom: 10px; border-radius: 4px; background-color: var(--color-white); }
.working-day h4 { margin-top:0; margin-bottom: 15px; font-size: 1.15em; }
.working-day label { margin-right: 10px; }
.working-day input[type="time"] { width: auto; margin-right: 15px; padding: 8px;} /* Tamanho menor para input de tempo */
.working-day .time-inputs { margin-top:10px; padding-top:10px; border-top: 1px dashed var(--color-gray-light); }

/* Tabela de Agendamentos do Profissional */
#professionalAppointmentsList ul.appointments-table,
#professionalAppointmentsList ul.appointments-table,
#appointmentsList { list-style: none; padding: 0; border: 1px solid var(--color-gray-border); border-radius: 4px; font-size: 12px; }
#professionalAppointmentsList li.appointments-table-header,
#professionalAppointmentsList li.appointments-table-row {
    grid-template-columns: 100px 80px minmax(150px, 1fr) minmax(120px, 1fr) 80px 100px 120px; /* Ajustado para ser mais flexível */
    gap: 10px;
    padding: 10px;
    border-bottom: 1px solid var(--color-gray-light);
    align-items: center;
}

#professionalAppointmentsList li.appointments-table-row span.status-client_confirmed { color: var(--color-status-confirmed); font-weight: bold; }
#professionalAppointmentsList li.appointments-table-row span.status-confirmed { color: var(--color-status-confirmed); font-weight: bold; } /* Verde */
#professionalAppointmentsList li.appointments-table-row span.status-cancelled { color: var(--color-button-cancel); text-decoration: line-through; opacity: 0.7; } /* Vermelho */
#professionalAppointmentsList li.appointments-table-row span.status-passed, /* NOVA CLASSE PARA PROFISSIONAL */
#appointmentsList li span.status-passed { /* NOVA CLASSE PARA CLIENTE */
    color: var(--color-button-gray); /* Cinza */
    font-style: italic; /* Itálico */
    opacity: 0.9;
}

#professionalAppointmentsList li.appointments-table-header { background-color: var(--color-background-light-gray); font-weight: bold; }
#professionalAppointmentsList li.appointments-table-row:last-child { border-bottom: none; }
#professionalAppointmentsList li.appointments-table-row:hover { background-color: var(--color-background-light); /* Hover mais sutil */ }
#professionalAppointmentsList .actions button { margin-right: 5px; padding: 4px 8px; font-size: 0.85em; }
.status-client_confirmed { color: var(--color-status-confirmed); font-weight: bold; }
.status-confirmed { color: var(--color-status-confirmed); font-weight: bold; } /* Verde mais vibrante */
.status-cancelled { color: var(--color-button-cancel); text-decoration: line-through; opacity: 0.7; } /* Opacidade para cancelados */

/* Paginação */
.pagination-controls { margin-top: 20px; text-align: center; margin-bottom: 20px; }
.pagination-controls span { margin: 0 10px; vertical-align: middle; }

/* =============== COMPONENTE ACCORDION GENÉRICO =============== */
/* Usado em professional-admin.html e para "Meus Agendamentos" em app.html */
.accordion-header, .accordion-header-client { /* Combinando seletores para propriedades comuns */
    background-color: var(--color-gray-light);
    color: var(--color-text-dark);
    cursor: pointer;
    padding: 15px 18px;
    width: 100%;
    border: 1px solid var(--color-gray-border);
    border-bottom: none;
    text-align: left;
    outline: none;
    font-size: 1.1em;
    transition: background-color 0.4s;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px 4px 0 0;
    font-family: "Rubik", sans-serif;
}
.accordion-header:hover, .accordion-header-client:hover,
.accordion-header.active, .accordion-header-client.active {
    background-color: var(--color-background-neutral);
}
.accordion-header.active, .accordion-header-client.active {
    border-bottom: none;
}
.accordion-header.active + .accordion-content,
.accordion-header-client.active + .accordion-content-client {
     border-bottom-left-radius: 4px;
     border-bottom-right-radius: 4px;
}

.accordion-header::after, .accordion-header-client::after {
    content: '\002B';
    color: var(--color-text-muted);
    font-weight: bold;
    font-size: 1.3em;
    transition: transform 0.3s ease-out;
}
.accordion-header.active::after, .accordion-header-client.active::after {
    content: "\2212";
    /* transform: rotate(180deg); /* Removido para simplificar, pode ser adicionado de volta */
}

.accordion-content, .accordion-content-client { /* Combinando seletores */
    background-color: var(--color-white);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    border-left: 1px solid var(--color-gray-border);
    border-right: 1px solid var(--color-gray-border);
    border-bottom: 1px solid var(--color-gray-border);
}
/* Div interna para padding, se usada (ex: .accordion-content > div ou .accordion-inner-content) */
.accordion-content > div, .accordion-inner-content {
    padding: 15px 18px;
}

/* Borda inferior para o último accordion fechado */
.admin-module:last-of-type .accordion-header:not(.active),
.my-appointments-accordion:last-of-type .accordion-header-client:not(.active) {
    border-bottom: 1px solid var(--color-gray-border);
    border-radius: 4px;
}

/* Scroll para lista de agendamentos do cliente */
.appointments-list-scrollable {
    max-height: 250px;
    overflow-y: auto;
}

/* Tabela de Agendamentos (Admin) */
#professionalAppointmentsList .appointments-table-header,
#professionalAppointmentsList .appointments-table-row {
    grid-template-columns: 140px 1.2fr 1.2fr 1fr 80px 90px 110px;
}

/* Tabela de Clientes (Admin) */
#professionalClientsList .appointments-table-header,
#professionalClientsList .appointments-table-row {
    grid-template-columns: 1.5fr 120px 100px 120px;
}
span.pending-fee { font-weight: bold; color: var(--color-button-edit); }

/* --- Barra de Navegação Inferior --- */
.bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-color: var(--color-white);
    border-top: 1px solid var(--color-border-soft);
    box-shadow: 0 -2px 5px var(--color-black-shadow-005);
    z-index: 1000;
}
.nav-item {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--color-nav-inactive);
    font-size: 12px;
}
.nav-item i { font-size: 22px; margin-bottom: 4px; }
.nav-item.active { color: var(--color-nav-active); }

/* =============== MODAL GENÉRICO =============== */
.modal {
    /* display: none; */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: var(--color-black-overlay-05); /* Fundo mais escuro */
    /* display: flex; /* Removido flex para que o padding-top funcione para o conteúdo */
    /* align-items: center; */
    /* justify-content: center; */
    padding-top: 80px; /* Espaço do topo para o modal não ficar colado */
}
.modal-content {
    background-color: var(--color-white);
    margin: auto;
    padding: 25px; /* Aumentado padding */
    border: 1px solid var(--color-border-modal); /* Borda mais suave */
    width: 90%; /* Mais responsivo */
    max-width: 500px;
    border-radius: 8px; /* Borda mais arredondada */
    position: relative;
    box-shadow: 0 5px 15px var(--color-black-shadow-02); /* Sombra mais pronunciada */
}
.close-button {
    color: var(--color-text-muted); /* Mais suave */
    /* float: right; /* Removido para usar position absolute */
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 15px;
    line-height: 1; /* Para alinhar melhor o X */
}
.close-button:hover,
.close-button:focus {
    color: var(--color-text-medium); /* Mais escuro no hover */
    text-decoration: none;
    cursor: pointer;
}
#modalClientName, #modalServiceName { font-weight: bold; }

/* =============== RESPONSIVIDADE =============== */
/* Tablets e telas médias */
@media (max-width: 900px) {
    #professionalAppointmentsList .appointments-table-header,
    #professionalAppointmentsList .appointments-table-row {
        grid-template-columns: 130px 1fr 1fr 1fr 70px 80px 100px;
        font-size: 0.9em;
    }
}

/* Celulares (empilhamento começa aqui) */
@media (max-width: 768px) {
    .container { padding: 15px; }
    header { flex-direction: column; align-items: center; }
    header #logoutButton { margin-top: 10px; }

    /* --- Regra Geral para Tabelas Empilhadas --- */
    .appointments-table .appointments-table-header {
        display: none;
    }
    .appointments-table .appointments-table-row {
        display: block;
        margin-bottom: 15px;
        padding: 7px;
        border: 1px solid var(--color-gray-border);
        border-radius: 4px;
    }
    .appointments-table .appointments-table-row span {
        display: block;
        padding-left: 0;
        /* margin-bottom: 8px; */
    }

    .appointments-table-row .clients-table-row{
        background-color: var(--color-disabled-background);
    }
    .appointments-table .appointments-table-row span::before {
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        margin-right: 12px;
        width: 20px;
        display: inline-block;
        text-align: center;
        color: var(--color-button-primary);
    }
    .appointments-table .appointments-table-row .actions {
        text-align: right;
        margin-top: 10px;
    }

    /* --- Ícones para Tabela de Agendamentos --- */
    #professionalAppointmentsList .appointments-table-row span:nth-child(1)::before { content: "\f073"; } /* Data */
    #professionalAppointmentsList .appointments-table-row span:nth-child(2)::before { content: "\f007"; } /* Cliente */
    #professionalAppointmentsList .appointments-table-row span:nth-child(3)::before { content: "\f013"; } /* Serviços */
    #professionalAppointmentsList .appointments-table-row span:nth-child(4)::before { content: "\f508"; } /* Profissional */
    #professionalAppointmentsList .appointments-table-row span:nth-child(5)::before { content: "\f155"; } /* Valor */
    #professionalAppointmentsList .appointments-table-row span:nth-child(6)::before { content: "\f058"; } /* Status */
    #professionalAppointmentsList .appointments-table-row span:nth-child(7)::before { content: "\f044"; margin: 0; } /* Ações */
    
    /* --- Ícones para Tabela de Clientes --- */
    #professionalClientsList .appointments-table-row span:nth-child(1)::before { content: "\f007"; } /* Nome */
    #professionalClientsList .appointments-table-row span:nth-child(2)::before { content: "\f095"; } /* Telefone */
    #professionalClientsList .appointments-table-row span:nth-child(3)::before { content: "\f155"; } /* Taxa */
    #professionalClientsList .appointments-table-row span:nth-child(4)::before { content: "\f044"; margin: 0; } /* Ações */
}

/* Telas muito pequenas */
@media (max-width: 480px) {
    #servicesList li {
        flex-direction: column;
        align-items: flex-start;
    }
    #servicesList li > div:first-child { margin-bottom: 10px; }
    #servicesList li .actions { width: 100%; }
    #servicesList li .actions button { width: 100%; margin: 5px 0 0 0; }

    /* Ícones para lista de serviços */
    #servicesList li strong::before {
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        content: "\f013";
        margin-right: 10px;
        color: var(--color-button-primary);
    }
    #servicesList li small::before {
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        content: "\f017";
        margin-right: 10px;
        color: var(--color-button-primary);
    }
}

/* =============== ESTILOS PARA PÁGINA DO PROFISSIONAL (professional-admin.html) =============== */

/* Wrapper principal para o conteúdo do admin do profissional, se necessário um container diferente */
/* Se você já usa a classe .container globalmente e ela serve, não precisa deste .admin-container */
/*
.admin-container {
    max-width: 900px; / Exemplo: um pouco mais largo que o container padrão
    margin: 20px auto;
    padding: 25px;
    background: var(--color-background-admin); / Cor de fundo ligeiramente diferente
    border-radius: 8px;
    box-shadow: 0 2px 15px var(--color-black-shadow-01);
}
*/

#enableNotificationsBtn,
#testNotificationBtn{
    font-family: "Rubik", sans-serif;
    background-color: var(--color-button-edit);
    color: var(--color-button-edit-text);
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    max-width: 80%;
}

.calendar-sync-status {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    margin: 12px 0;
    border: 1px solid var(--color-border-soft);
    border-radius: 8px;
    background: var(--color-surface-soft);
    color: var(--color-text-main);
    font-size: 0.95rem;
    line-height: 1.35;
}

.calendar-sync-status.connected {
    border-color: var(--color-success-border);
    background: var(--color-success-soft);
    color: var(--color-success-text);
}

.calendar-sync-status.disconnected {
    border-color: var(--color-warning-border);
    background: var(--color-warning-soft);
    color: var(--color-warning-text);
}

.calendar-sync-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.calendar-sync-actions button {
    width: 100%;
}

.calendar-sync-settings {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.calendar-sync-settings small {
    display: block;
    margin-top: 6px;
    color: var(--color-text-muted);
    line-height: 1.35;
}

.settings-toggle-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border-soft);
    border-radius: 8px;
    background: var(--color-surface-soft);
    color: var(--color-text-main);
    line-height: 1.35;
}

.settings-toggle-row input {
    width: auto;
    min-width: 18px;
    margin-top: 2px;
}

@media (min-width: 640px) {
    .calendar-sync-actions {
        flex-direction: row;
        align-items: center;
    }

    .calendar-sync-actions button {
        width: auto;
    }
}

#testNotificationBtn {
    background-color: var(--color-button-primary);
    color: var(--color-text-white);
}

.notification-status-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.notification-help-box {
    max-width: 280px;
    margin: 6px auto 8px;
    padding: 7px 9px;
    border-radius: 5px;
    background: var(--color-card-background-alt);
    color: var(--color-text-neutral);
    font-size: 11px;
    line-height: 1.35;
    text-align: center;
}

#profLogoutButton{
    font-family: "Rubik", sans-serif;
    background-color: var(--color-button-logout-alt);
    color: var(--color-text-white);
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    max-width: 80%;
}

/* Header específico para a página de admin do profissional */
#professionalAdminSection header {
    /* Herda estilos do header global, mas pode ter overrides */
    margin: 27px 0px 10px 0px;
}
#professionalAdminSection header h1 {
    font-size: 1.6em; /* Um pouco menor que o H1 principal do app */
    color: var(--color-text-medium);
}
#professionalAdminSection header #adminProfName {
    font-weight: normal;
    color: var(--color-primary);
}
#profLogoutButton { /* Já estilizado na seção de botões gerais */
    /* Pode adicionar overrides aqui se necessário */
}

/* Módulos de Administração (Accordion Wrappers) */
.admin-module {
    /* Estilos base do accordion já estão em .accordion-header e .accordion-content */
    margin-bottom: 15px; /* Espaçamento entre os módulos/accordions */
}

/* Cabeçalho dos accordions no admin (usando a classe genérica .accordion-header) */
.admin-module .accordion-header {
    background-color: var(--color-background-table); /* Um cinza um pouco diferente para admin */
    border: 1px solid var(--color-border-medium);
    border-bottom: none; /* A borda inferior é controlada pelo estado active/content */
}
.admin-module .accordion-header:hover,
.admin-module .accordion-header.active {
    background-color: var(--color-background-header);
}

/* Conteúdo dos accordions no admin */
.admin-module .accordion-content {
    border-color: var(--color-border-medium); /* Combinar com a borda do header */
    background-color: var(--color-white); /* Fundo branco para o conteúdo */
}
.admin-module .accordion-content > div { /* Padding interno */
    padding: 20px;
}

/* Títulos dentro dos módulos de admin (se não for o header do accordion) */
.admin-module h3 {
    margin-top: 0; /* Resetar margem se for o primeiro elemento após um hr */
    margin-bottom: 15px;
    font-size: 1.25em;
    color: var(--color-text-admin);
    border-bottom: 1px solid var(--color-gray-light);
    padding-bottom: 8px;
}
.admin-module h4 {
    margin-top: 10px;
    margin-bottom: 8px;
    font-size: 1.1em;
    color: var(--color-text-light);
}

/* Formulários dentro dos módulos de admin */
.admin-module form {
    margin-top: 15px;
}
.form-group{
    margin-bottom: 10px;
}
.admin-module .form-group label {
    font-weight: 100; /* Um pouco menos bold que o padrão */
    color: var(--color-text-admin);
    line-height: 1;
}
.admin-module .form-group input,
.admin-module .form-group select {
    background-color: var(--color-white); /* Garante fundo branco se o accordion tiver cor */
}

/* Listas de Serviços e Pausas no admin */
#servicesList ul, #breaksList ul {
    list-style: none;
    padding-left: 0;
    margin-top: 10px;
}
#servicesList li, #breaksList li {
    padding: 12px 10px;
    border-bottom: 1px solid var(--color-background-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-white);
}
#servicesList li:first-of-type, #breaksList li:first-of-type {
    border-top: 1px solid var(--color-background-light);
}
#servicesList li:last-child, #breaksList li:last-child {
    border-bottom: none;
}
/* Botões de editar/excluir nas listas de serviço/pausa (já estilizados na seção de botões) */
#servicesList button, #breaksList button {
    margin-left: 8px;
}

.edit-service-modal-content {
    width: min(92vw, 476px);
    max-height: 90vh;
    overflow-y: auto;
    background: var(--duoo-admin-modal-bg);
    color: var(--duoo-admin-modal-text);
    border-radius: 8px;
    border-right: 4px solid var(--duoo-admin-modal-accent);
}

.edit-service-modal-content .close-button {
    color: var(--duoo-admin-modal-accent);
    opacity: 1;
}

.edit-service-modal-content h3 {
    color: var(--duoo-admin-modal-text);
    margin-bottom: 22px;
}

.duoo-service-editor {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.service-editor-current-name {
    margin: 0 0 4px;
    color: var(--duoo-admin-modal-accent);
    text-align: center;
    font-weight: 800;
}

.service-editor-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.service-editor-question,
.service-editor-field label,
.edit-service-modal-content .form-group label {
    color: var(--duoo-admin-modal-text);
    font-size: 12px;
    font-weight: 800;
}

.service-editor-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 22px;
}

.duoo-radio-pill,
.duoo-checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--duoo-admin-modal-text);
    font-weight: 800;
    cursor: pointer;
}

.duoo-radio-pill input,
.duoo-checkbox-row input {
    appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: var(--duoo-admin-modal-surface);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.duoo-checkbox-row input {
    border-radius: 3px;
}

.duoo-radio-pill input:checked,
.duoo-checkbox-row input:checked {
    background: var(--duoo-admin-modal-accent);
    box-shadow: var(--button-focus-ring);
}

.duoo-checkbox-row input:checked::after {
    content: "\f00c";
    display: block;
    color: var(--color-text-white);
    font-family: "Font Awesome 6 Free";
    font-size: 12px;
    font-weight: 900;
    line-height: 18px;
    text-align: center;
}

.service-editor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
}

.service-editor-field {
    position: relative;
    display: flex;
    flex-direction: column;
}

.service-editor-field.full {
    margin-top: 4px;
}

.service-editor-field label {
    width: fit-content;
    margin: 0 0 -7px 14px;
    padding: 0 5px;
    color: var(--duoo-admin-modal-accent);
    background: var(--duoo-admin-modal-bg);
    z-index: 1;
}

.service-editor-field input,
.edit-service-modal-content .form-group select {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--duoo-admin-modal-border);
    border-radius: 3px;
    background: var(--duoo-admin-modal-surface);
    color: var(--duoo-admin-modal-text);
    font-weight: 800;
}

.service-editor-note {
    margin: 0;
    color: var(--duoo-admin-modal-text);
    font-size: 12px;
    line-height: 1.7;
}

.service-editor-note a {
    color: var(--duoo-admin-modal-accent);
    font-weight: 800;
}

.service-editor-submit {
    align-self: center;
    width: min(100%, 205px);
    border-radius: 999px;
    background: var(--duoo-admin-modal-accent);
    color: var(--color-text-white);
    text-transform: uppercase;
}

@media (max-width: 520px) {
    .service-editor-grid,
    .service-editor-options {
        grid-template-columns: 1fr;
    }
}

/* Estilos para a Tabela de Clientes (Reutilizando classes da tabela de Agendamentos) */
#professionalClientsList ul.appointments-table {
    /* Pode herdar estilos gerais de borda/fonte de ul.appointments-table */
    margin-top: 15px; /* Espaço acima da lista */
    padding: 0px;
}

/* Cabeçalho da Tabela de Clientes */
#professionalClientsList li.appointments-table-header {
    /* Herda estilos gerais (fundo, padding) */
    /* SOBRESCREVER o grid-template-columns para as colunas de cliente */
    grid-template-columns: minmax(120px, 1.5fr) 120px 100px 120px; /* Ajuste as larguras conforme necessário */
    /* Exemplo: Nome (flexível), Telefone (fixo), Taxa (fixo), Ações (fixo) */
    gap: 10px; /* Manter o mesmo gap dos agendamentos */
}

.appointments-table-row .clients-table-row{
}

/* Linhas da Tabela de Clientes */
#professionalClientsList li.appointments-table-row {
    /* Herda estilos gerais (borda, padding, hover, zebrado) */
    /* SOBRESCREVER o grid-template-columns para as colunas de cliente */
    grid-template-columns: minmax(120px, 1.5fr) 120px 100px 120px; /* Mesmo grid do header */
    font-size: 12px;
    background-color: var(--color-background-soft);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* Estilo opcional para o span da taxa pendente */
#professionalClientsList li.appointments-table-row span.pending-fee {
    font-weight: bold;
    color: var(--color-pending-fee); /* Cor de destaque para a taxa */
}

/* Estilos para os botões de ação (já devem ser aplicados por .actions button ou seletores mais genéricos) */
#professionalClientsList li.appointments-table-row .actions button {
    /* Já estilizados na seção de botões gerais ou específicos de admin */
    margin-right: 5px;
}

/* Horários de Trabalho no Admin */
.working-day {
    border: 1px solid var(--color-border-soft);
    padding: 15px;
    margin-bottom: 12px;
    border-radius: 5px;
    background-color: var(--color-background-admin);
}
.working-day h4 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 1.1em;
    color: var(--color-text-medium);
}
.working-day label {
    margin-right: 8px;
    font-weight: normal; /* Menos destaque para labels de checkbox/time */
}
.working-day input[type="checkbox"] {
    margin-right: 15px;
    transform: scale(1.1); /* Aumentar um pouco o checkbox */
}
.working-day input[type="time"] {
    width: auto;
    margin-right: 10px;
    padding: 6px 8px;
    font-size: 0.95em;
}
.working-day .time-inputs {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--color-border-soft);
}

/* Filtros e Tabela de Agendamentos do Profissional */
.filters {
    background-color: var(--color-background-selected);
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    border: 1px solid var(--color-background-header);
}
.filters .form-group {
    margin-bottom: 0; /* Resetar se dentro de flex */
}
/* Botões de filtro já estilizados */

#appointmentsTotalValue {
    font-size: 15px;
    padding: 10px;
    background-color: var(--color-background-table);
    border-radius: 4px;
    margin-bottom: 15px;
    text-align: right;
}

#totalSelectedInfo{
    font-size: 12px;
}

#professionalAppointmentsList ul.appointments-table {
    font-size: 0.88em; /* Fonte um pouco menor para a tabela */
    border-collapse: collapse; /* Para remover espaços se fosse uma tabela real */
    width: 100%;
}
#professionalAppointmentsList li.appointments-table-header {
    background-color: var(--color-background-table); /* Cinza mais claro para cabeçalho */
    color: var(--color-text-admin);
}
#professionalAppointmentsList li.appointments-table-row:nth-child(even) {
    background-color: var(--color-background-admin); /* Zebrado sutil */
}
#professionalAppointmentsList li.appointments-table-row:hover {
    background-color: var(--color-selected-background); /* Azul bem claro no hover */
}
/* Botões de ação na tabela já estilizados */

/* Paginação (botões já estilizados) */
.pagination-controls span {
    font-size: 0.95em;
    color: var(--color-text-admin);
}

/* Modal de Edição de Agendamento (estilos base já em .modal, .modal-content) */
#editAppointmentModal .modal-content {
    /* Pode adicionar overrides aqui se precisar de um modal diferente para admin */
}
#editAppointmentModal h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--color-text-medium);
    text-align: center;
}

/* =============== RESPONSIVIDADE PARA PAINEL DO PROFISSIONAL =============== */

@media (max-width: 900px) { /* Ajustes para telas um pouco menores que o admin-container ideal */
    /* Se você usar um .admin-container específico, ajuste seu max-width aqui */
    /* .admin-container { max-width: 100%; margin: 10px; padding: 15px; } */

    #professionalAppointmentsList li.appointments-table-header,
    #professionalAppointmentsList li.appointments-table-row {
        /* Pode começar a simplificar a grade aqui se necessário */
        font-size: 0.85em; /* Reduzir um pouco a fonte da tabela */
    }
    #categoriesList li{
        font-size: 13px;
        margin-bottom: 5px;
    }
}

/* --- ESTILOS PARA O MODAL DE CONFIRMAÇÃO (CORRIGIDO) --- */

/* O fundo escurecido que cobre a página inteira */
#confirmationOverlay { /* ALTERADO DE .overlay PARA #confirmationOverlay */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-black-overlay-07);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Classe para mostrar o overlay */
#confirmationOverlay.show { /* ALTERADO */
    opacity: 1;
    visibility: visible;
}

/* A janela (modal) de confirmação */
#confirmationModal { /* ALTERADO DE .modal PARA #confirmationModal */
    background-color: var(--color-white);
    padding: 25px 30px;
    border-radius: 12px;
    box-shadow: 0 5px 15px var(--color-black-shadow-03);
    text-align: center;
    max-width: 450px;
    width: 90%;
    transform: scale(0.9);
    transition: transform 0.3s ease;
    /* Adicionado para garantir que não herde o display:none do .modal genérico */
    display: block; 
}

#confirmationOverlay.show #confirmationModal { /* ALTERADO */
    transform: scale(1);
}

#confirmationModal h2 { /* Trocado .modal h2 por #confirmationModal h2 */
    margin-top: 0;
    color: var(--color-text-medium);
    font-family: 'Rubik', sans-serif;
}

#confirmationModal p { /* Trocado .modal p por #confirmationModal p */
    margin-bottom: 20px;
    color: var(--color-text-light);
    line-height: 1.5;
}

/* O resto dos estilos já usam IDs, então estão corretos */
#modal-summary {
    background-color: var(--color-background-admin);
    border: 1px solid var(--color-gray-light);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 25px;
    text-align: left;
    font-size: 0.95em;
}

#modal-summary strong {
    color: var(--color-text-medium);
}

#whatsappButtonContainer {
    margin-bottom: 15px;
}

.whatsapp-confirm-button {
    background-color: var(--color-whatsapp);
    color: var(--color-white);
    font-weight: bold;
    padding: 12px 25px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    font-size: 1.1em;
    transition: background-color 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 8px var(--color-black-shadow-02);
}

.whatsapp-confirm-button:hover {
    background-color: var(--color-whatsapp-hover);
    transform: scale(1.05);
}

.button-secondary {
    background-color: transparent;
    border: 1px solid var(--color-disabled-background);
    color: var(--color-text-muted);
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.button-secondary:hover {
    background-color: var(--color-background-auth);
    color: var(--color-text-medium);
}

/* --- Estilo da Barra de Navegação Inferior --- */
.bottom-nav {
    display: flex; /* Alinha os itens lado a lado */
    justify-content: space-around; /* Distribui os itens igualmente */
    align-items: center; /* Centraliza verticalmente */
    
    position: fixed; /* A MÁGICA ACONTECE AQUI: fixa na tela */
    bottom: 0;       /* Cola na parte inferior */
    left: 0;
    right: 0;
    
    width: 100%;
    height: 60px; /* Altura da barra */
    
    background-color: var(--color-white); /* Cor de fundo */
    border-top: 1px solid var(--color-border-soft); /* Linha sutil de separação */
    box-shadow: 0 -2px 5px var(--color-black-shadow-005); /* Sombra suave para dar profundidade */
    z-index: 1000; /* Garante que fique acima de outros conteúdos */
}

/* --- Estilo de cada item da navegação --- */
.nav-item {
    display: flex;
    flex-direction: column; /* Coloca o ícone acima do texto */
    align-items: center;
    justify-content: center;
    
    flex-grow: 1; /* Faz com que todos os itens ocupem o mesmo espaço */
    
    text-decoration: none;
    color: var(--color-nav-inactive); /* Cor para itens inativos */
    font-size: 12px;
    
    padding: 5px 0;
    transition: color 0.3s ease; /* Transição suave de cor */
}

/* --- Estilo dos ícones --- */
.nav-item i {
    font-size: 16px; /* Tamanho do ícone */
    margin-bottom: 4px;
}

/* --- Estilo para o item ATIVO --- */
.nav-item.active {
    color: var(--color-nav-active-dark); /* Cor para o item ativo (ex: azul do Google) */
}

/* --- Evita que a barra de navegação cubra o final do conteúdo --- */
/* Adiciona um preenchimento na parte inferior do corpo da página */
body {
    padding-bottom: 70px; /* Um pouco mais que a altura da barra */
}

/* Esconde todas as telas por padrão */
.view {
    display: none;
    padding: 0 15px; /* Adiciona um respiro nas laterais */
}

/* Mostra apenas a tela que tem a classe 'active-view' */
.view.active-view {
    display: block;
}

/* 3. A view ativa deve se comportar como um container de bloco normal */
.view.active-view {
    display: block;
    width: 100%;
    box-sizing: border-box; /* Garante que padding não adicione à largura total */
    margin: 0px;
    padding: 0px;
}

/* =================================================================== */
/* === CORREÇÕES DE LAYOUT PARA PÁGINAS DE APLICATIVO (app.html etc.) === */
/* =================================================================== */

/* 1. Reset e Estrutura para o Body do App */
body.app-layout {
    /* display: flex;
    flex-direction: column; */
    
    /* SOBRESCREVE o comportamento de centralização do login */
    justify-content: flex-start;
    align-items: stretch;
    
    height: 100vh; /* Ocupa 100% da altura da tela */
    padding: 0;    /* Remove o padding global para controle total */
}

/* 2. Container principal das views (a área de conteúdo rolável) */
#client-views-container, #admin-views-container {
    flex-grow: 1;      /* A MÁGICA: Faz este container crescer e ocupar todo o espaço disponível */
    overflow-y: auto;  /* Habilita a rolagem vertical APENAS nesta área */
    width: 100%;
}

/* 3. Ajuste de Padding */
/* O padding que estava no body agora vai para o .container dentro da view */
body.app-layout .container {
    padding: 15px;
    margin-top: 0; /* Remove margem superior desnecessária no contexto do app */
    margin-bottom: 0;
}

/* 4. Evita que a barra de navegação cubra o conteúdo */
/* A área de scroll precisa de um espaço no final */
#client-views-container, #admin-views-container {
    /* Altura da barra de navegação (60px) + um respiro (10px) */
    padding-bottom: 70px;
}

/* 5. Garante que a view ativa se comporte corretamente */
.view.active-view {
    /* As regras existentes .view e .view.active-view já estão boas. */
    /* Este bloco é mais para reforçar a intenção. */
    display: block;
}

#professionalLoginSection {
    background: var(--color-white);
    padding: 25px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px var(--color-black-shadow-01);
    width: 90%;
    max-width: 450px;
    box-sizing: border-box;
    text-align: center; /* Centraliza o texto e botões internos */
}

#professionalLoginSection h1 {
    margin-top: 0px;
    margin-bottom: 20px;
}

/* 3. A MÁGICA DA CENTRALIZAÇÃO */
/* Quando o painel do admin está escondido, o body deve centralizar o que sobrou (o login) */
#professionalAdminSection[style*="display: none;"] + body, /* Para deploy */
body:has(#professionalAdminSection[style*="display: none;"]) /* Para teste local (melhor suporte) */
{
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centraliza verticalmente */
    align-items: center;     /* Centraliza horizontalmente */
    min-height: 100vh;
}

/* Quando o painel de login está escondido, usamos o layout de app */
#professionalLoginSection[style*="display: none;"] + body, /* Para deploy */
body:has(#professionalLoginSection[style*="display: none;"]) /* Para teste local */
{
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Alinha no topo */
    align-items: stretch;      /* Estica os itens */
}

/* --- Fallback (Abordagem mais simples e robusta) --- */
/* Esta é a forma mais garantida de funcionar, usando uma classe no body. */
/* Remova ou comente as regras com ':has()' acima se usar esta abordagem. */

/* Estilo para a página quando estiver no modo de login */
body.login-mode {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* Estilo para a página quando estiver no modo de aplicativo */
body.app-mode {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    height: 100vh;
    padding: 0;
}

.fab-container {
    position: fixed;
    bottom: 80px; /* Acima da barra de navegação inferior */
    right: 20px;
    z-index: 1000;
}

.fab-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background-color: var(--color-primary); /* Use a cor primária do seu site */
    color: var(--color-white);
    border-radius: 50%;
    border: none;
    font-size: 24px;
    box-shadow: 0 4px 8px var(--color-black-shadow-02);
    cursor: pointer;
    transition: transform 0.2s ease-in-out, background-color 0.2s;
}

.fab-button:hover {
    background-color: var(--color-button-primary-hover);
    transform: scale(1.05);
}

/* Estilos para a lista de serviços dentro do novo modal */
.services-checkbox-list {
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid var(--color-disabled-background);
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
}

.services-checkbox-list label {
    display: block;
    margin-bottom: 8px;
    cursor: pointer;
}

.modal {
    /* Adiciona padding para garantir que o modal não encoste nas bordas da tela */
    padding: 20px 10px; 
}

.modal-content {
    /* Permite que o conteúdo role se for maior que a tela */
    max-height: 90vh; /* Limita a altura a 90% da altura da viewport */
    overflow-y: auto; /* Adiciona uma barra de rolagem vertical quando necessário */
    
    /* Melhora a experiência de rolagem em dispositivos touch */
    -webkit-overflow-scrolling: touch;
}

/* Garante que o botão de fechar fique fixo no topo durante a rolagem */
.modal-content .close-button {
    position: sticky;
    top: 0;
    right: 0; /* Alinhado à direita do conteúdo */
    background-color: var(--color-white); /* Garante que não fique transparente sobre o conteúdo */
    padding: 5px 0; /* Um pequeno espaçamento */
    z-index: 10; /* Fica acima do resto do conteúdo */
    width: 100%;
    text-align: right;
    box-sizing: border-box; /* Garante que o padding não aumente a largura */
}

/* Garante que a lista de opções do Choices.js apareça acima de outros elementos do modal */
.choices__list--dropdown {
  z-index: 1051; /* Valor alto para garantir a sobreposição */
}

/* Ajusta a aparência para combinar com os outros campos do formulário */
.choices {
  margin-bottom: 10px;
}

.choices__inner {
  background-color: var(--color-background-admin);
  border: 1px solid var(--color-disabled-background);
  border-radius: 4px;
  padding: 4px 7.5px;
  min-height: auto;
  margin-bottom: 10px;
}

.is-open .choices__inner {
  border-radius: 4px 4px 0 0;
}

.choices__list--dropdown {
  /* Garante que a lista suspensa apareça acima de outros elementos do modal.
     Este valor deve ser maior que o z-index do modal-content se houver sobreposição. */
  z-index: 1051; 
}

.choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted{
    background-color: var(--color-text-dark);
}

.choices__list--dropdown .choices__list {
  /* ESTA É A CORREÇÃO PRINCIPAL */
  /* Define uma altura máxima para a lista de opções.
     Ajuste este valor conforme necessário para sua tela. */
  max-height: 200px; /* Por exemplo, 200 pixels */

  /* Adiciona uma barra de rolagem vertical APENAS quando a lista exceder a altura máxima. */
  overflow-y: auto;

  /* Melhora a experiência de rolagem em dispositivos touch. */
  -webkit-overflow-scrolling: touch;
}

/* Opcional: Melhora a aparência do item selecionado na lista */
.choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: var(--color-primary); /* Usa a cor primária do seu site */
  color: var(--color-white);
}

/* barra de nificação paa IOS*/
.in-app-notification {
    background-color: var(--color-notification); /* Azul vibrante */
    color: var(--color-white);
    padding: 12px 15px;
    text-align: center;
    position: sticky; /* Fica fixo no topo ao rolar */
    top: 0;
    z-index: 2000;
    display: flex; /* Usado para alinhar itens */
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 5px var(--color-black-shadow-02);
    font-size: 14px;
}

.in-app-notification p {
    margin: 0;
    font-weight: 500;
    text-align: left;
    flex-grow: 1; /* Faz o texto ocupar o espaço disponível */
}

.in-app-notification-actions button {
    background-color: var(--color-white-transparent-02);
    border: 1px solid var(--color-white-transparent-08);
    color: var(--color-white);
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 10px;
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap; /* Evita que o texto quebre linha */
}
.in-app-notification-actions button:hover {
    background-color: var(--color-white-transparent-04);
}

/* Estilos básicos para o calendário */
#calendar {
    max-width: 900px;
    margin: 20px auto;
    padding: 10px;
    background-color: var(--color-white);
    border-radius: 8px;
    box-shadow: 0 2px 5px var(--color-black-shadow-01);
}
/* Ajuste para o texto dos eventos ser mais legível */
.fc-event-title {
    white-space: normal; /* Permite que o texto quebre a linha */
}
.fc-daygrid-event {
    font-size: 12px;
}

/* Media Query para dispositivos com tela menor que 768px (padrão para celulares) */
@media (max-width: 768px) {
#calendar {
    padding: 5px; /* Menos preenchimento nas laterais */
}
.fc { /* Fonte base do calendário */
    font-size: 13px;
}
.fc-list-event-title a { /* Título do evento na visão de lista */
    font-size: 14px;
    font-weight: 500;
}
.fc-list-event-time { /* Horário do evento na visão de lista */
    font-weight: bold;
}

/* Ajusta o cabeçalho do calendário para telas pequenas */
.fc .fc-toolbar.fc-header-toolbar {
    display: flex;
    flex-direction: column; /* Coloca os elementos um abaixo do outro */
    gap: 10px; /* Adiciona um espaço entre as linhas */
    margin-bottom: 15px;
}

/* Ajusta os modais para ocupar mais a tela */
.modal-content {
    width: 95%;
    padding: 15px;
}
}

.fc .fc-toolbar-title{
    font-size: 1.4em;
}

.fc .fc-button-primary{
    background-color: var(--color-calendar-button);
}

    /* CSS para o Toggle Switch de Visibilidade */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-border-muted);
  -webkit-transition: .4s;
  transition: .4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: var(--color-white);
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .slider {
  background-color: var(--color-switch-active); /* Azul quando ligado */
}
input:focus + .slider {
  box-shadow: 0 0 1px var(--color-switch-active);
}
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 50%;
}

/*  Novo código Adicionado  */
/* ================================================================ */
/* ==== SEÇÃO DE CORREÇÃO PARA A ROLAGEM DE PROFISSIONAIS ==== */
/* ================================================================ */

/* 1. O container de rolagem (que você já usa para os serviços) */
/* Nenhuma mudança aqui, a classe .services-horizontal-scroll-container já está correta. */
.services-horizontal-scroll-container {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    padding-bottom: 15px;
    -webkit-mask-image: linear-gradient(to right, var(--color-black-transparent-0), var(--color-black-solid-1) 5%, var(--color-black-solid-1) 95%, var(--color-black-transparent-0));
    mask-image: linear-gradient(to right, var(--color-black-transparent-0), var(--color-black-solid-1) 5%, var(--color-black-solid-1) 95%, var(--color-black-transparent-0));
}
/* Estilos para a barra de rolagem (opcional, mas bom ter) */
.services-horizontal-scroll-container::-webkit-scrollbar { height: 8px; }
.services-horizontal-scroll-container::-webkit-scrollbar-track { background: var(--color-background-auth); border-radius: 4px; }
.services-horizontal-scroll-container::-webkit-scrollbar-thumb { background: var(--color-scrollbar-thumb); border-radius: 4px; }
.services-horizontal-scroll-container::-webkit-scrollbar-thumb:hover { background: var(--color-scrollbar-thumb-hover); }


/* 2. A galeria interna dos profissionais (onde a correção é aplicada) */
/* Substitua a sua regra .professionals-gallery por esta */
.professionals-gallery {
    display: flex;
    flex-wrap: nowrap;      /* A MUDANÇA CRUCIAL: Impede a quebra de linha */
    gap: 15px;
    min-width: min-content; /* Garante que o container se estique o necessário */
    padding: 10px 15px;     /* Espaçamento interno para os cards não colarem nas bordas */
}

/* 3. O card individual do profissional (adicionando flex-shrink) */
/* Substitua a sua regra .professional-card por esta */
.professional-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    text-align: center;
    flex-shrink: 0;         /* A MUDANÇA CRUCIAL: Impede que os cards encolham */
    width: 80px;
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 8px;
    transition: all 0.3s ease;
}

.professional-card.selected {
    border-color: var(--color-button-primary); /* Cor quando selecionado */
    background-color: var(--color-selected-background);
}
.professional-card img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 8px;
    border: 2px solid var(--color-gray-border);
}
.professional-card span {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-medium);
}

/* para o perfil de fotos do profissional */

.small-text { font-size: 14px; margin-bottom: 10px; color: var(--color-text-soft); }
.preview-container { margin-bottom: 15px; text-align: center; }
.profile-preview-img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 3px solid var(--color-gray-light); }
.background-preview-img { width: 100%; max-width: 400px; height: 150px; object-fit: cover; border: 3px solid var(--color-gray-light); border-radius: 8px; }
.section-divider { margin: 10px 0; border: 0; border-top: 1px solid var(--color-gray-light); }

/* Imagens para o app do cliente */
/* Mantém a barra de navegação fixa na parte inferior da tela */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    /* O resto do seu estilo para .bottom-nav (background, display:flex, etc.) continua aqui */
}

/* O header da empresa é tratado como um bloco normal no fluxo */
#company-header-container {
    position: relative;
    width: 100%;
    height: 20vh;
}

#company-background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.logo-wrapper {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: var(--color-white);
    padding: 5px;
    box-shadow: 0 4px 8px var(--color-black-shadow-01);
}

#company-logo-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* O container principal das views não precisa de regras especiais de altura ou rolagem */
#client-views-container {
    /* Remova flex: 1 e overflow-y: auto */
    padding-top: 20px; /* Mantém o espaçamento para a logo */
}

/* ======================================== */
/* === ESTILOS PARA O SELETOR DE DATAS === */
/* ======================================== */

/* Hero do app cliente */
.app-layout #company-header-container {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 268px;
    padding-bottom: 22px;
    background: var(--duoo-catalog-bg);
    overflow: visible;
}

.client-hero-menu {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 4;
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    color: var(--duoo-catalog-accent-strong);
    font-size: 21px;
    cursor: pointer;
}

.client-theme-toggle {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 4;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: var(--duoo-hero-action-bg);
    color: var(--color-text-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 8px 18px var(--color-black-shadow-015);
}

.client-theme-toggle:focus-visible {
    outline: none;
    box-shadow: var(--button-focus-ring), 0 8px 18px var(--color-black-shadow-015);
}

body.app-layout.client-dark-mode {
    --duoo-catalog-bg: #151515;
    --duoo-catalog-surface: #242424;
    --duoo-catalog-surface-hover: #303030;
    --duoo-catalog-text: #f4f4f4;
    --duoo-catalog-text-muted: #b8b8b8;
    --duoo-catalog-accent: #f1f1f1;
    --duoo-catalog-accent-strong: #f1f1f1;
    --duoo-catalog-border-soft: rgba(255, 255, 255, 0.1);
    --duoo-catalog-shadow: rgba(0, 0, 0, 0.35);
    --duoo-category-image-overlay: rgba(18, 18, 18, 0.5);
    --duoo-category-image-overlay-strong: rgba(18, 18, 18, 0.72);
    --duoo-hero-action-bg: #303030;
    --duoo-hero-logo-border: #f1f1f1;
    --color-service-card-background: #242424;
    --color-text-card: #f1f1f1;
    --color-text-card-price: #d7d7d7;
    --color-background-selected: #2d2d2d;
    --color-background-day-card-selected: #f1f1f1;
    --color-text-card-selected: #151515;
}

body.app-layout.client-dark-mode .client-theme-toggle i::before {
    content: "\f185";
}

body.app-layout.client-dark-mode .service-category-card.has-image i,
body.app-layout.client-dark-mode .service-category-card.has-image .service-category-name,
body.app-layout.client-dark-mode .service-category-card.has-image .service-category-count {
    color: var(--duoo-catalog-text);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

body.app-layout.client-dark-mode .service-card.has-image .service-card-content-wrapper {
    background-image: linear-gradient(var(--duoo-category-image-overlay), var(--duoo-category-image-overlay-strong)), var(--service-card-image);
}

body.app-layout.client-dark-mode .service-card.has-image .service-card-title,
body.app-layout.client-dark-mode .service-card.has-image .service-card-price {
    color: var(--duoo-catalog-text);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

.app-layout #company-background-image {
    width: 100%;
    height: var(--duoo-hero-banner-height);
    object-fit: cover;
    display: block;
}

.app-layout .logo-wrapper {
    position: absolute;
    top: calc(var(--duoo-hero-banner-height) - 52px);
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background-color: var(--color-white);
    padding: 7px;
    border: 6px solid var(--duoo-hero-logo-border);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
    z-index: 3;
}

.app-layout #company-logo-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.company-hero-actions {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 34px 34px minmax(92px, 1fr) 34px 34px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: min(calc(100% - 32px), 272px);
    margin: 0 auto;
    padding: 12px 0 0;
}

.company-hero-action {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--duoo-hero-action-bg);
    color: var(--color-text-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 17px;
}

.company-hero-action.disabled {
    opacity: 1;
    cursor: default;
}

.company-hero-action:nth-child(3) {
    grid-column: 4;
}

.company-hero-action:nth-child(4) {
    grid-column: 5;
}

.company-hero-title-wrap {
    margin-top: 54px;
    text-align: center;
    color: var(--duoo-catalog-text);
}

#company-hero-title {
    margin: 0;
    color: var(--duoo-catalog-text);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
}

.company-hero-divider {
    display: block;
    width: 26px;
    height: 2px;
    margin: 12px auto 0;
    border-radius: 999px;
    background: rgba(247, 242, 255, 0.22);
}

.app-layout #client-views-container {
    padding-top: 0;
    background: var(--duoo-catalog-bg);
}

#date-picker-container {
    /* background-color: var(--color-background-admin); */
    /* border: 1px solid var(--color-border-soft); */
    /* border-radius: 8px; */
    padding: 10px;
    margin-top: 5px;
    
}

.date-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 0 5px;
}

#current-month-year {
    font-size: 1.1em;
    font-weight: 500;
    color: var(--color-text-medium);
}

.date-nav-btn {
    background: none;
    border: none;
    font-size: 24px;
    font-weight: bold;
    color: var(--color-text-light);
    cursor: pointer;
    padding: 0 10px;
}
.date-nav-btn:disabled {
    color: var(--color-border-muted);
    cursor: not-allowed;
}


.days-strip-scroll-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, var(--color-black-transparent-0), var(--color-black-solid-1) 5%, var(--color-black-solid-1) 95%, var(--color-black-transparent-0));
    mask-image: linear-gradient(to right, var(--color-black-transparent-0), var(--color-black-solid-1) 5%, var(--color-black-solid-1) 95%, var(--color-black-transparent-0));
}
/* Esconde a barra de rolagem visualmente */
.days-strip-scroll-wrapper::-webkit-scrollbar {
    display: none;
}
.days-strip-scroll-wrapper {
  scrollbar-width: none;
  -ms-overflow-style: none;
}


.days-strip-content {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    padding-bottom: 5px; /* Espaço para sombra/foco */
}

.day-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    flex-shrink: 0;
    width: 36px;
    height: 52px;
    
    border: 1px solid var(--color-border-muted);
    border-radius: 8px;
    background-color: var(--color-white);
    cursor: pointer;
    opacity: 0;
    animation: slideUpFadeIn 0.36s ease-out forwards;
    animation-delay: var(--day-card-delay, 0ms);
    transition: all 0.2s ease;
    font-size: 12px;
}

.day-card .day-name {
    font-weight: 500;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

.day-card .day-number {
    font-size: 16px;
    font-weight: bold;
    color: var(--color-text-medium);
}

.day-card:hover {
    border-color: var(--color-text-quiet);
}

.day-card.selected {
    background-color: var(--color-background-day-card-selected); /* Cor escura para selecionado */
    color: var(--color-white);
    border-color: var(--color-background-day-card-selected);
}
.day-card.selected .day-name,
.day-card.selected .day-number {
    color: var(--color-white);
}

.day-card.disabled {
    background-color: var(--color-background-table);
    color: var(--color-text-disabled);
    cursor: not-allowed;
    opacity: 0.7;
}
.day-card.disabled .day-name,
.day-card.disabled .day-number {
    color: var(--color-text-disabled);
}

@media (prefers-reduced-motion: reduce) {
    .day-card {
        opacity: 1;
        animation: none;
    }
}

/* =============================== */
/* === ESTILOS PARA TOUR E ALERTAS === */
/* =============================== */

/* Overlay que escurece a página */
#tour-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-black-overlay-06);
    z-index: 10000;
}

/* Destaque para o elemento do tour */
.tour-highlight {
    position: relative;
    z-index: 10001;
    background-color: var(--color-white); /* Garante que o elemento fique sobre o overlay */
    box-shadow: 0 0 0 4px var(--color-white); /* Borda de destaque */
    border-radius: 8px; /* Arredonda a borda do destaque */
}

/* A caixa de dica (tooltip) */
#tour-tip {
    position: absolute;
    z-index: 10002;
    background-color: var(--color-text-medium);
    color: var(--color-white);
    padding: 15px;
    border-radius: 8px;
    max-width: 280px;
    font-size: 14px;
    box-shadow: 0 4px 12px var(--color-black-shadow-03);
}

/* Setas para a dica */
#tour-tip.arrow-top::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent var(--color-text-medium) transparent;
}
#tour-tip.arrow-bottom::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: var(--color-text-medium) transparent transparent transparent;
}
/* (Você pode adicionar .arrow-left e .arrow-right se precisar) */

/* Botões de navegação do tour */
.tour-nav {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
}
.tour-nav button {
    background: var(--color-text-light);
    color: var(--color-white);
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
}
.tour-nav #end-tour {
    background-color: transparent;
    border: 1px solid var(--color-text-muted);
}

/* Botão para iniciar o tour */
#start-tour-btn {
    background-color: var(--color-dark-gray-button);
    color: var(--color-white);
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    margin: 10px 0;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Alerta visual para validação de campos */
.visual-alert {
    border: 2px solid var(--color-button-cancel) !important; /* Borda vermelha de erro */
    box-shadow: 0 0 8px var(--color-error-shadow) !important;
    border-radius: 8px;
}

/* Adicione este bloco ao style.css */

/* O container pai precisa de position: relative para que a sobreposição funcione */
.form-group[id$="-group-wrapper"] {
    position: relative;
}

/* A camada de sobreposição transparente */
.disabled-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* Garante que fique acima do input/select desabilitado */
    cursor: not-allowed; /* Mostra o cursor de "não permitido" */
}

#professional-group-wrapper,
#services-group-wrapper {
    position: relative; /* Necessário para futuras sobreposições, se precisar */
}

/* Adicione ao seu style.css */

/* Setas para a dica (tooltip) */
#tour-tip::before {
    content: '';
    position: absolute;
    border-width: 8px;
    border-style: solid;
}

#tour-tip.arrow-top::before {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-color: transparent transparent var(--color-text-medium) transparent;
}

#tour-tip.arrow-bottom::before {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-color: var(--color-text-medium) transparent transparent transparent;
}

#tour-tip.arrow-left::before {
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    border-color: transparent var(--color-text-medium) transparent transparent;
}

#tour-tip.arrow-right::before {
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    border-color: transparent transparent transparent var(--color-text-medium);
}

/* Adicione este CSS ao seu style.css */

.profile-section {
    background-color: var(--color-background-profile-section);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 10px;
    border: 1px solid var(--color-gray-light);
}

.profile-section h3 {
    margin-top: 0;
    border-bottom: 1px solid var(--color-background-profile-section);
    padding-bottom: 10px;
    margin-bottom: 15px;
}

/* Estilo específico para o botão de logout na página de perfil */
.button-danger {
    background-color: var(--color-button-cancel); /* Vermelho */
    color: var(--color-white);
    width: auto; /* Não ocupa 100% da largura */
    display: inline-block;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.button-danger:hover {
    background-color: var(--color-button-cancel-hover);
}


/* ======================================================== */
/* === ESTILOS PARA O BANNER DE ATUALIZAÇÃO DO APLICATIVO === */
/* ======================================================== */
/* O container principal do banner */
.update-banner {
    display: none; /* Começa escondido, o JS irá mostrar */
    position: fixed; /* Fixo na tela, mesmo com rolagem */
    bottom: 70px; /* Posicionado acima da barra de navegação inferior */
    left: 50%;
    transform: translateX(-50%); /* Centraliza horizontalmente */
    
    width: 90%;
    max-width: 500px; /* Limita a largura em telas grandes */
    
    background-color: var(--color-text-dark); /* Usa a cor escura principal do seu tema */
    color: var(--color-white);
    
    padding: 12px 18px;
    border-radius: 8px; /* Bordas arredondadas consistentes */
    
    box-shadow: 0 4px 15px var(--color-black-shadow-02); /* Sombra para dar profundidade */
    z-index: 9999; /* Garante que fique acima de quase tudo */

    /* Alinhamento dos itens internos (texto e botão) */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px; /* Espaço entre o texto e o botão */
    
    font-size: 14px;
    font-weight: 500;
}

/* O botão de recarregar dentro do banner */
.update-banner button#reload-button {
    background-color: var(--color-button-edit); /* Cor de destaque (amarelo), como nos botões de editar */
    color: var(--color-button-edit-text); /* Cor do texto para contraste com o amarelo */
    
    border: none;
    border-radius: 5px;
    padding: 8px 16px;
    
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    
    flex-shrink: 0; /* Impede que o botão encolha se o texto for grande */
    white-space: nowrap; /* Evita que a palavra "Recarregar" quebre linha */
    
    transition: background-color 0.2s, transform 0.2s;
}
.update-banner button#reload-button:hover {
    background-color: var(--color-button-edit-hover); /* Cor de hover consistente com outros botões amarelos */
    transform: scale(1.05);
}

/* Container para os botões de ação na lista de agendamentos */
.appointment-actions {
    margin-top: 10px;
    display: flex;
    gap: 10px; /* Espaço entre os botões */
    flex-wrap: wrap; /* Permite que os botões quebrem a linha se não houver espaço */
}

/* Botão de Confirmação na lista */
.confirm-btn-list {
    background-color: var(--color-confirm-btn-list); /* Verde (cor de sucesso) */
    color: var(--color-white);
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
}
.confirm-btn-list:hover {
    background-color: var(--color-confirm-btn-list);
}

/* Ajuste no botão de cancelar para ter uma classe específica */
.cancel-btn-list {
    background-color: var(--color-cancel-btn-list); /* Vermelho */
    color: var(--color-white);
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
}
.cancel-btn-list:hover {
    background-color: var(--color-cancel-btn-list);
}

/* O container que segura o botão e o indicador precisa ser relativo */
.notification-status-wrapper {
    position: relative;
    display: inline-block; /* Faz o wrapper se ajustar ao tamanho do botão */
}

/* ======================================================== */
/* [NOVO] ESTILO PARA O INDICADOR DE STATUS COM SVG ====== */
/* ======================================================== */

/* O container que segura o botão ou texto e o indicador precisa ser relativo */
.notification-status-wrapper, .client-name-wrapper {
    position: relative;
    display: inline-block;
}

/* O indicador SVG */
.online-indicator {
    position: absolute;
    width: 15px;  /* Ajuste o tamanho do SVG conforme necessário */
    height: 12px;
    
    /* Remove os estilos antigos de bolinha */
    border-radius: 0;
    border: none;
    
    /* Configura a imagem de fundo */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    /* Define a imagem OFFLINE como padrão */
    background-image: url('../img/offline-indicator.svg'); 
    
    transition: background-image 0.3s ease; /* Transição não se aplica bem a imagens, mas deixamos */
}

/* Classe para quando o status está ativo, que TROCA a imagem */
.online-indicator.active {
    background-image: url('../img/online-indicator.svg');
}

/* Posicionamento para o indicador do PROFISSIONAL (ao lado do botão) */
.notification-status-wrapper .online-indicator {
    top: -3px;
    right: -3px;
}

/* Posicionamento para o indicador do CLIENTE (ao lado do nome) */
.client-name-wrapper {
    padding-right: 18px; /* Aumenta um pouco o espaço para o SVG */
}

.client-name-wrapper .online-indicator {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
/* ======================================================== */
/* ========= ESTILOS PARA O DASHBOARD DE ESTATÍSTICAS ========= */
/* ======================================================== */

.stats-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* Layout responsivo */
    gap: 15px;
    margin-bottom: 25px;
}

.stat-card {
    background-color: var(--color-white);
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 2px 8px var(--color-black-shadow-008);
    border-left: 5px solid var(--color-primary); /* Cor de destaque (pode variar) */
    text-align: left;
}

/* Estilo para quando os dados estão carregando */
.stat-card.loading {
    color: var(--color-text-empty);
    font-style: italic;
    border-left-color: var(--color-border-muted);
}

.stat-card-title {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-button-gray);
    margin: 0 0 8px 0;
    text-transform: uppercase;
}

.stat-card-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-button-edit-text);
    margin: 0;
}

.stat-card-subtitle {
    font-size: 12px;
    color: var(--color-text-admin);
    margin: 5px 0 0 0;
}

/* Cores de destaque diferentes para cada cartão */
.stat-card.faturamento { border-left-color: var(--color-status-confirmed); } /* Verde para faturamento */
.stat-card.agendamentos { border-left-color: var(--color-button-edit); } /* Amarelo para contagem */
.stat-card.cliente { border-left-color: var(--color-button-filter); }    /* Ciano para clientes */

.chart-dashboard {
    position: relative;
    width: 100%;
    max-width: 900px; /* Limita a largura em telas grandes */
    margin: 0 auto 25px auto; /* Centraliza e adiciona margem inferior */
    padding: 0px;
    background-color: var(--color-white);
    border-radius: 8px;
    box-shadow: 0 2px 8px var(--color-black-shadow-008);
}

.dashboard-controls {
    margin-bottom: 15px;
    padding: 10px;
    background-color: var(--color-background-selected);
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dashboard-controls label {
    font-weight: 500;
    color: var(--color-text-admin);
}

#stats-month-picker {
    padding: 8px;
    border: 1px solid var(--color-border-medium);
    border-radius: 4px;
    font-family: "Rubik", sans-serif;
    font-size: 14px;
}

#time-slots-container {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-mask-image: linear-gradient(to right, var(--color-black-transparent-0), var(--color-black-solid-1) 5%, var(--color-black-solid-1) 95%, var(--color-black-transparent-0));
    mask-image: linear-gradient(to right, var(--color-black-transparent-0), var(--color-black-solid-1) 5%, var(--color-black-solid-1) 95%, var(--color-black-transparent-0));
    
}
#time-slots-strip {
    display: inline-flex;
}
.time-card {
    display: inline-block;
    width: 32px;
    padding: 8px;
    margin: 10px 5px 15px 0px;
    border: 1px solid var(--color-border-muted);
    text-align: center;
    cursor: pointer;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
}
.time-card.selected {
    background-color: var(--color-time-card-selected);
    color: var(--color-white);
    border-color: var(--color-border-strong);
}

/* ======================================================== */
/* ======= ESTILOS PARA AS EXCEÇÕES DE AGENDA (ADMIN) ======= */
/* ======================================================== */

.exception-form {
    background-color: var(--color-background-selected);
    padding: 15px;
    border-radius: 5px;
    border: 1px solid var(--color-background-header);
    margin: 15px 0;
}

.time-inputs-inline {
    display: flex;
    align-items: center;
    gap: 10px;
}

.time-inputs-inline input[type="time"] {
    width: auto;
}

#exceptionsList {
    margin-top: 15px;
}

#exceptionsList ul {
    list-style: none;
    padding: 0;
}

#exceptionsList li {
    background-color: var(--color-white);
    padding: 10px 15px;
    border: 1px solid var(--color-gray-light);
    border-radius: 4px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#exceptionsList li .date {
    font-weight: 600;
}

#exceptionsList li .details {
    color: var(--color-text-light);
}

#exceptionsList li button {
    background-color: var(--color-button-cancel);
    color: var(--color-white);
    border: none;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 3px;
    cursor: pointer;
}

/* ======================================================== */
/* [NOVO] ESTILO CORRIGIDO PARA GUIA DE INSTALAÇÃO PWA (iOS) */
/* ======================================================== */

body.modal-open {
  overflow: hidden;
}

.install-prompt-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--color-black-overlay-085);
  backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.install-prompt-overlay[style*="display: flex"] {
  opacity: 1;
  pointer-events: all;
}

.install-prompt-content {
  background-color: var(--color-white);
  color: var(--color-text-medium);
  border-radius: 16px;
  padding: 25px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: 0 5px 25px var(--color-black-shadow-02);
  border: 1px solid var(--color-white-transparent-02);
  margin: auto;
  animation: slideUpFadeIn 0.4s ease-out;
}

@keyframes slideUpFadeIn {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.prompt-header::before {
  content: "";
  display: block;
  height: 6px;
  width: 60px;
  background: linear-gradient(to right, var(--color-prompt-accent-start), var(--color-prompt-accent-end));
  border-radius: 3px;
  margin: 0 auto 15px auto;
}

.prompt-app-icon {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  margin: 0 auto 15px auto;
  box-shadow: 0 4px 10px var(--color-black-shadow-01);
}

.install-prompt-content h2 {
  font-size: 1.2em;
  margin-bottom: 10px;
  color: var(--color-text-strong);
}

.install-prompt-content p {
  line-height: 1.6;
  font-size: 1em;
  color: var(--color-text-light);
  margin-bottom: 20px;
}

.install-instructions {
  text-align: left;
  background-color: var(--color-background-admin);
  padding: 15px;
  border-radius: 8px;
  border: 1px solid var(--color-gray-light);
  margin-bottom: 20px;
}

.install-instructions p {
  display: flex;
  align-items: center;
  font-size: 14px;
  margin-bottom: 15px;
}

.inline-icon {
  width: 22px;
  height: 22px;
  margin-left: 8px;
  vertical-align: middle;
}

.instruction-image {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--color-gray-border);
  margin-bottom: 15px;
}

.close-prompt-button {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 1em;
  font-weight: 500;
  cursor: pointer;
  margin-top: 10px;
  width: 100%;
}

.close-prompt-button.secondary {
  background-color: var(--color-gray-border);
  color: var(--color-text-medium);
}

.loading-spinner {
    border: 4px solid var(--color-black-shadow-01);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: var(--primary-color, var(--color-primary));
    animation: spin 1s ease infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Estilo base para todos os overlays (fundo escurecido) */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-black-overlay-06);
    display: none; /* Começa escondido por padrão */
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Estilo para quando o overlay deve ser mostrado (via JS ou CSS) */
/* Esta regra torna o fundo escuro visível */
.overlay.show,
.overlay[style*="display: flex"] {
    display: flex;
    opacity: 1;
    visibility: visible;
}

/* 
   =================================================================
   =========== INÍCIO DA CORREÇÃO (REGRA MAIS ESPECÍFICA) ===========
   =================================================================
*/

/* 
   Esta nova regra diz: "Qualquer elemento com a classe .modal
   QUE ESTEJA DENTRO de um .overlay que esteja visível,
   DEVE ter estas propriedades."
   Isso força o modal a aparecer junto com o overlay.
*/
.overlay.show .modal,
.overlay[style*="display: flex"] .modal {
    transform: scale(1); /* Garante que o tamanho seja normal */
    opacity: 1; /* Garante que esteja totalmente visível */
}


/* Estilo base para o conteúdo do modal */
.modal {
    background-color: var(--color-white);
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 5px 15px var(--color-black-shadow-03);
    width: 90%;
    max-width: 450px;
    text-align: center;
    /* Adiciona uma transição suave de escala e opacidade */
    transform: scale(0.95);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 1. O fundo escurecido (Overlay) */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-black-overlay-06);
    z-index: 1000;

    /* Controla a exibição com display, como o JS está fazendo */
    display: none; /* COMEÇA ESCONDIDO */
    justify-content: center;
    align-items: center;

    /* Adiciona padding para o conteúdo não colar nas bordas em telas pequenas */
    padding: 20px;
    box-sizing: border-box;
}

/* 2. O conteúdo (Modal) dentro do Overlay */
.overlay .modal {
    background-color: var(--color-white);
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 5px 15px var(--color-black-shadow-03);
    width: 100%;
    max-width: 450px;
    text-align: center;
    
    /* Configura o estado inicial para a animação */
    transform: scale(0.95);
    opacity: 0;
    
    /* Define a animação */
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;

    /* Garante que o conteúdo interno possa rolar se for muito grande */
    max-height: 90vh;
    overflow-y: auto;
}

/* 3. A MÁGICA: Quando o overlay é tornado visível pelo JS... */
.overlay[style*="display: flex"] {
    /* (Esta regra não é estritamente necessária, mas não prejudica) */
    /* A principal ação é feita no seletor abaixo */
}

/* ...o modal filho DENTRO dele se torna visível com uma animação. */
.overlay[style*="display: flex"] .modal {
    transform: scale(1);
    opacity: 1;
    max-width: 100%;
    width: 90%;
}

.modal-actions {
    display: flex;
    flex-direction: column; /* Empilha os botões em telas pequenas */
    gap: 10px; /* Espaço entre os botões */
    margin-top: 15px;
}

/* Em telas maiores, coloca os botões lado a lado */
@media (min-width: 480px) {
    .modal-actions {
        flex-direction: row;
    }
    .modal-actions > button {
        flex: 1; /* Faz os dois botões terem a mesma largura */
    }
}

.confirm-appt-btn {
    background-color: var(--color-status-confirmed); /* Verde */
    color: var(--color-white);
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.9em;
}
.confirm-appt-btn:hover {
    background-color: var(--color-success-hover);
}

.status-pending {
    color: var(--color-button-edit); /* Amarelo/Laranja */
    font-weight: bold;
    font-style: italic;
}

/* Estilo para o item da lista (o card do agendamento do cliente) */
#appointmentsList li {
    background-color: var(--color-background-light-gray);
    border: 1px solid var(--color-gray-light);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 12px;
    line-height: 1.5;
    /* Propriedades essenciais para o layout funcionar */
    display: flex;
    flex-direction: column; /* Organiza os itens internos em coluna (um abaixo do outro) */
    gap: 8px; /* Adiciona um espaço vertical entre os elementos dentro do card */
}

/* Estilo para o container da contagem regressiva */
.appointment-countdown {
    /* As classes 'message-box' e 'info' já aplicam o estilo visual */
    width: 100%;
    box-sizing: border-box; /* Garante que o padding não afete a largura */
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: 500;
}

/* Estilo para o container dos botões de ação */
.appointment-actions {
    margin-top: auto; /* Empurra os botões para a parte inferior do card */
    padding-top: 8px;
    border-top: 1px solid var(--color-background-table); /* Linha de separação sutil */
    width: 100%;
    text-align: right; /* Alinha o botão de cancelar à direita */
}

/* Estilo para quando a lista está vazia ou limitada */
.load-more-container {
    text-align: center;
    padding: 20px;
}

.btn-load-more {
    background-color: transparent;
    border: 1px solid var(--color-border-medium);
    color: var(--color-text-muted);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    transition: all 0.2s;
}

.btn-load-more:hover {
    background-color: var(--color-gray-light);
    color: var(--color-text-dark);
}

/* Badge de "Recente" para destacar o último agendamento */
.badge-recent {
    background-color: var(--color-background-soft-blue);
    color: var(--color-blue-text);
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    text-transform: uppercase;
}

/* Container de Período de Datas */
.date-range-container {
    display: flex;
    gap: 15px;
    flex-wrap: wrap; /* Garante que quebre linha em telas pequenas */
    margin-bottom: 15px;
}

.date-field {
    flex: 1; /* Faz os dois campos ocuparem o mesmo espaço */
    min-width: 140px; /* Impede que fiquem pequenos demais */
}

.date-field label {
    font-size: 12px;
    font-weight: bold;
    color: var(--color-text-muted);
    margin-bottom: 5px;
    display: block;
}

@media (max-width: 480px) {
    .date-range-container {
        flex-direction: column;
        gap: 10px;
    }
}

/* Estilos para o Ranking dentro dos Cards */
.stat-ranking-list {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
}

.stat-ranking-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    padding: 4px 0;
    border-bottom: 1px solid var(--color-background-light);
}

.stat-ranking-list li:last-child {
    border-bottom: none;
}

.rank-number {
    font-weight: bold;
    color: var(--color-primary);
    min-width: 25px;
}

.rank-name {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Corta nomes muito longos com ... */
    color: var(--color-text-dark);
}

.rank-count {
    background-color: var(--color-background-table);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
}

.stat-card.servicos-top {
    border-left-color: var(--reports-card-border); /* Cor roxa para diferenciar */
    grid-column: span 2; /* Opcional: faz o card ser mais largo se houver espaço */
}

@media (max-width: 600px) {
    .stat-card.servicos-top {
        grid-column: span 1;
    }
}

/* ========================================================
   SISTEMA DE BOTOES - UI/UX
   ======================================================== */
.button-primary,
.buttonPrimary,
.button-secondary,
.btn-secondary,
.button-danger,
.btn-load-more,
.google-btn,
.phone-btn,
.google-login-btn,
.butProfArea,
.whatsapp-confirm-button,
.button-whatsapp,
.date-nav-btn,
.confirm-btn,
.cancel-btn,
.confirm-btn-list,
.cancel-btn-list,
.edit-service-btn,
.delete-service-btn,
.delete-break-btn,
.edit-client-btn,
.delete-client-btn,
.reset-client-auth-btn,
.edit-category-btn,
.delete-category-btn,
.edit-appt-btn,
.calendar-appt-btn,
.delete-appt-btn,
.confirm-appt-btn,
button[type="submit"],
#bookAppointmentButton,
#saveServiceButton,
#enableNotificationsBtn,
#testNotificationBtn,
#profLogoutButton,
#logoutButton,
#shareScheduleBtn,
#disableShareBtn,
#copyLinkFromModalBtn,
#reload-button,
#copyPixKeyBtn,
#advanceNoticeConfirmBtn,
#skip-profile-btn,
#cancelModalButton,
.filters button,
.pagination-controls button,
#servicesList button,
#breaksList button,
#categoriesList button,
#exceptionsList li button,
#professionalAppointmentsList .actions button,
#professionalClientsList .actions button,
.modal-actions button,
.tour-nav button,
.close-prompt-button {
    min-height: var(--button-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--button-gap);
    padding: 0 var(--button-padding-x);
    border: 1px solid transparent;
    border-radius: var(--button-radius);
    box-sizing: border-box;
    font-family: "Rubik", sans-serif;
    font-size: var(--button-font-size);
    font-weight: var(--button-font-weight);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.button-primary,
.buttonPrimary,
button[type="submit"],
#bookAppointmentButton,
#saveServiceButton,
#shareScheduleBtn,
#advanceNoticeConfirmBtn,
#copyLinkFromModalBtn,
.tour-nav #next-tour-step {
    width: 100%;
    background-color: var(--color-button-primary);
    color: var(--color-white);
    border-color: var(--color-button-primary);
    box-shadow: var(--button-shadow);
}

.button-primary:hover,
.buttonPrimary:hover,
button[type="submit"]:hover,
#bookAppointmentButton:hover,
#saveServiceButton:hover,
#shareScheduleBtn:hover,
#advanceNoticeConfirmBtn:hover,
#copyLinkFromModalBtn:hover,
.tour-nav #next-tour-step:hover {
    background-color: var(--color-button-primary-hover);
    border-color: var(--color-button-primary-hover);
}

.button-secondary,
.btn-secondary,
.btn-load-more,
.date-nav-btn,
.calendar-appt-btn,
#skip-profile-btn,
#cancelModalButton,
#cancelEditServiceButton,
#cancelEditCategoryButton,
.reset-client-auth-btn,
.butProfArea,
.pagination-controls button,
.filters #resetFiltersButton {
    background-color: var(--color-white);
    color: var(--color-text-medium);
    border-color: var(--color-gray-border);
    box-shadow: none;
}

.button-secondary:hover,
.btn-secondary:hover,
.btn-load-more:hover,
.date-nav-btn:hover,
.calendar-appt-btn:hover,
#skip-profile-btn:hover,
#cancelModalButton:hover,
#cancelEditServiceButton:hover,
#cancelEditCategoryButton:hover,
.reset-client-auth-btn:hover,
.butProfArea:hover,
.pagination-controls button:hover,
.filters #resetFiltersButton:hover {
    background-color: var(--color-background-selected);
    border-color: var(--color-border-medium);
    color: var(--color-text-dark);
}

.button-danger,
#logoutButton,
#profLogoutButton,
#disableShareBtn,
.cancel-btn,
.cancel-btn-list,
.delete-service-btn,
.delete-break-btn,
.delete-client-btn,
.delete-category-btn,
.delete-appt-btn {
    background-color: var(--color-button-cancel);
    color: var(--color-white);
    border-color: var(--color-button-cancel);
}

.button-danger:hover,
#logoutButton:hover,
#profLogoutButton:hover,
#disableShareBtn:hover,
.cancel-btn:hover,
.cancel-btn-list:hover,
.delete-service-btn:hover,
.delete-break-btn:hover,
.delete-client-btn:hover,
.delete-category-btn:hover,
.delete-appt-btn:hover {
    background-color: var(--color-button-cancel-hover);
    border-color: var(--color-button-cancel-hover);
}

.confirm-btn,
.confirm-btn-list,
.confirm-appt-btn {
    background-color: var(--color-confirm-btn-list);
    color: var(--color-white);
    border-color: var(--color-confirm-btn-list);
}

.confirm-btn:hover,
.confirm-btn-list:hover,
.confirm-appt-btn:hover {
    background-color: var(--color-success-hover);
    border-color: var(--color-success-hover);
}

.edit-service-btn,
.edit-client-btn,
.edit-category-btn,
.edit-appt-btn,
#reload-button {
    background-color: var(--color-button-edit);
    color: var(--color-button-edit-text);
    border-color: var(--color-button-edit);
}

.edit-service-btn:hover,
.edit-client-btn:hover,
.edit-category-btn:hover,
.edit-appt-btn:hover,
#reload-button:hover {
    background-color: var(--color-button-edit-hover);
    border-color: var(--color-button-edit-hover);
}

.filters button,
#enableNotificationsBtn,
#testNotificationBtn {
    background-color: var(--color-button-filter);
    color: var(--color-white);
    border-color: var(--color-button-filter);
}

.filters button:hover,
#enableNotificationsBtn:hover,
#testNotificationBtn:hover {
    background-color: var(--color-button-filter-hover);
    border-color: var(--color-button-filter-hover);
}

.filters #resetFiltersButton {
    background-color: var(--color-white);
    color: var(--color-text-medium);
    border-color: var(--color-gray-border);
}

.filters #resetFiltersButton:hover {
    background-color: var(--color-background-selected);
    border-color: var(--color-border-medium);
    color: var(--color-text-dark);
}

.google-login-btn {
    background-color: var(--color-google);
    color: var(--color-white);
    border-color: var(--color-google);
}

.whatsapp-confirm-button,
.button-whatsapp,
#whatsappShareLink {
    background-color: var(--color-whatsapp) !important;
    color: var(--color-white);
    border-color: var(--color-whatsapp);
}

.whatsapp-confirm-button:hover,
.button-whatsapp:hover,
#whatsappShareLink:hover {
    background-color: var(--color-whatsapp-hover) !important;
    border-color: var(--color-whatsapp-hover);
}

.google-btn,
.phone-btn {
    width: 100%;
    background-color: var(--color-background-neutral);
    color: var(--color-text-medium);
    border-color: var(--color-gray-border);
}

.button-primary:hover,
.buttonPrimary:hover,
.button-secondary:hover,
.btn-secondary:hover,
.button-danger:hover,
.btn-load-more:hover,
.google-btn:hover,
.phone-btn:hover,
.google-login-btn:hover,
.butProfArea:hover,
.whatsapp-confirm-button:hover,
.button-whatsapp:hover,
.date-nav-btn:hover,
.confirm-btn:hover,
.cancel-btn:hover,
.confirm-btn-list:hover,
.cancel-btn-list:hover,
.edit-service-btn:hover,
.delete-service-btn:hover,
.delete-break-btn:hover,
.edit-client-btn:hover,
.delete-client-btn:hover,
.reset-client-auth-btn:hover,
.edit-category-btn:hover,
.delete-category-btn:hover,
.edit-appt-btn:hover,
.calendar-appt-btn:hover,
.delete-appt-btn:hover,
.confirm-appt-btn:hover,
button[type="submit"]:hover,
#bookAppointmentButton:hover,
#saveServiceButton:hover,
#enableNotificationsBtn:hover,
#testNotificationBtn:hover,
#profLogoutButton:hover,
#logoutButton:hover,
#shareScheduleBtn:hover,
#disableShareBtn:hover,
#copyLinkFromModalBtn:hover,
#reload-button:hover,
#copyPixKeyBtn:hover,
#advanceNoticeConfirmBtn:hover,
#skip-profile-btn:hover,
#cancelModalButton:hover,
.filters button:hover,
.pagination-controls button:hover,
#servicesList button:hover,
#breaksList button:hover,
#categoriesList button:hover,
#exceptionsList li button:hover,
#professionalAppointmentsList .actions button:hover,
#professionalClientsList .actions button:hover,
.modal-actions button:hover,
.tour-nav button:hover,
.close-prompt-button:hover {
    transform: translateY(-1px);
    box-shadow: var(--button-shadow-hover);
}

.button-primary:focus-visible,
.buttonPrimary:focus-visible,
.button-secondary:focus-visible,
.btn-secondary:focus-visible,
.button-danger:focus-visible,
.btn-load-more:focus-visible,
.google-btn:focus-visible,
.phone-btn:focus-visible,
.google-login-btn:focus-visible,
.butProfArea:focus-visible,
.whatsapp-confirm-button:focus-visible,
.button-whatsapp:focus-visible,
.date-nav-btn:focus-visible,
.confirm-btn:focus-visible,
.cancel-btn:focus-visible,
.confirm-btn-list:focus-visible,
.cancel-btn-list:focus-visible,
button[type="submit"]:focus-visible,
#bookAppointmentButton:focus-visible,
#saveServiceButton:focus-visible,
#enableNotificationsBtn:focus-visible,
#testNotificationBtn:focus-visible,
#profLogoutButton:focus-visible,
#logoutButton:focus-visible,
.filters button:focus-visible,
.pagination-controls button:focus-visible {
    outline: none;
    box-shadow: var(--button-focus-ring);
}

.edit-service-btn,
.delete-service-btn,
.delete-break-btn,
.edit-client-btn,
.delete-client-btn,
.reset-client-auth-btn,
.edit-category-btn,
.delete-category-btn,
.edit-appt-btn,
.calendar-appt-btn,
.delete-appt-btn,
.confirm-appt-btn,
.date-nav-btn,
.pagination-controls button,
#exceptionsList li button,
#breaksList button,
#categoriesList button,
#servicesList button {
    min-height: var(--button-height-compact);
    padding: 0 12px;
    font-size: 12px;
}

button:disabled,
.button-primary:disabled,
.button-secondary:disabled,
.button-danger:disabled,
.btn-secondary:disabled,
.btn-load-more:disabled {
    background-color: var(--color-disabled-background) !important;
    color: var(--color-disabled-text) !important;
    border-color: var(--color-gray-border) !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: not-allowed !important;
    opacity: .72;
}

@media (max-width: 480px) {
    .button-primary,
    .buttonPrimary,
    .button-secondary,
    .btn-secondary,
    .button-danger,
    .btn-load-more,
    .whatsapp-confirm-button,
    .button-whatsapp,
    .confirm-btn,
    .cancel-btn,
    #bookAppointmentButton,
    #shareScheduleBtn,
    #disableShareBtn,
    #advanceNoticeConfirmBtn {
        width: 100%;
        white-space: normal;
    }
}

/* ========================================================
   CARDS DE CLIENTES - MOBILE FIRST
   ======================================================== */
.client-search-wrapper {
    margin: 14px 0 12px;
}

.client-search-wrapper label {
    display: block;
    margin-bottom: 6px;
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.client-search-field {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    border: 1px solid var(--color-gray-border);
    border-radius: 8px;
    background-color: var(--color-white);
    box-shadow: 0 2px 8px var(--color-black-shadow-008);
}

.client-search-field i {
    color: var(--color-text-muted);
    font-size: 14px;
}

.client-search-field input {
    width: 100%;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--color-text-dark);
    font: inherit;
}

.client-search-field:focus-within {
    border-color: var(--color-primary);
    box-shadow: var(--button-focus-ring);
}

#professionalClientsList ul.appointments-table {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
}

#professionalClientsList .clients-table-header {
    display: none;
}

#professionalClientsList li.clients-table-row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--color-border-soft);
    border-left: 5px solid var(--color-primary);
    border-radius: 8px;
    background:
        linear-gradient(180deg, var(--color-white), var(--color-background-selected));
    box-shadow: 0 4px 14px var(--color-black-shadow-008);
    font-size: 14px;
    overflow: hidden;
}

#professionalClientsList li.clients-table-row::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-button-filter), transparent);
    opacity: .65;
}

#professionalClientsList li.clients-table-row > span {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-light);
    line-height: 1.35;
    word-break: break-word;
}

#professionalClientsList li.clients-table-row > span::before {
    min-width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--color-background-table);
    color: var(--color-text-muted);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 11px;
}

#professionalClientsList li.clients-table-row > span:nth-child(1) {
    padding-right: 6px;
    color: var(--color-text-dark);
    font-size: 16px;
    font-weight: 800;
}

#professionalClientsList li.clients-table-row > span:nth-child(1)::before {
    content: "\f007";
    background-color: var(--color-selected-background);
    color: var(--color-primary);
}

#professionalClientsList li.clients-table-row > span:nth-child(2)::before {
    content: "\f095";
}

#professionalClientsList li.clients-table-row > span.pending-fee {
    width: fit-content;
    padding: 6px 10px;
    border-radius: var(--button-pill-radius);
    background-color: var(--color-background-soft);
    color: var(--color-pending-fee);
    font-size: 13px;
    font-weight: 800;
}

#professionalClientsList li.clients-table-row > span.pending-fee::before {
    content: "\f155";
    background-color: transparent;
    color: var(--color-pending-fee);
}

#professionalClientsList li.clients-table-row > .actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px solid var(--color-gray-light);
}

#professionalClientsList li.clients-table-row > .actions::before {
    display: none;
}

#professionalClientsList li.clients-table-row .actions button {
    width: 100%;
    min-height: 40px;
    margin: 0;
}

#professionalClientsList li.clients-table-row .reset-client-auth-btn {
    white-space: normal;
}

@media (min-width: 520px) {
    #professionalClientsList li.clients-table-row > .actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    #professionalClientsList ul.appointments-table {
        gap: 0;
        border: 1px solid var(--color-border-soft);
        border-radius: 8px;
        overflow: hidden;
        background-color: var(--color-white);
    }

    #professionalClientsList .clients-table-header {
        display: grid;
        grid-template-columns: minmax(180px, 1.3fr) minmax(150px, .9fr) minmax(120px, .7fr) minmax(280px, 1.2fr);
        gap: 12px;
        padding: 12px 16px;
        background-color: var(--color-background-table);
        color: var(--color-text-admin);
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .02em;
    }

    #professionalClientsList li.clients-table-row {
        grid-template-columns: minmax(180px, 1.3fr) minmax(150px, .9fr) minmax(120px, .7fr) minmax(280px, 1.2fr);
        align-items: center;
        gap: 12px;
        padding: 14px 16px;
        border: none;
        border-left: 4px solid transparent;
        border-radius: 0;
        background: var(--color-white);
        box-shadow: none;
    }

    #professionalClientsList li.clients-table-row:nth-child(even) {
        background-color: var(--color-background-selected);
    }

    #professionalClientsList li.clients-table-row:hover {
        border-left-color: var(--color-primary);
        background-color: var(--color-background-table-hover);
    }

    #professionalClientsList li.clients-table-row::before {
        display: none;
    }

    #professionalClientsList li.clients-table-row > span:nth-child(1) {
        font-size: 14px;
    }

    #professionalClientsList li.clients-table-row > .actions {
        grid-template-columns: repeat(3, minmax(0, auto));
        justify-content: end;
        padding-top: 0;
        margin-top: 0;
        border-top: none;
    }

    #professionalClientsList li.clients-table-row .actions button {
        width: auto;
    }
}

.client-profile-content .client-modal-back.close-button {
    position: absolute;
    top: 10px;
    left: 10px;
    right: auto;
    width: 34px;
    height: 34px;
    padding: 0;
    background: transparent;
    z-index: 20;
    text-align: center;
}

.client-self-profile-section .client-profile-form { gap: 16px; }
.client-self-profile-section .client-floating-field span { background: var(--color-background-profile-section); }
.client-self-profile-section .client-avatar-editor { margin-top: 0; }
.client-self-profile-section .client-gender-group > span { color: var(--color-text-dark); }
.client-self-profile-section .client-gender-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.client-self-profile-section .client-gender-options label { color: var(--color-text-dark); }
@media (max-width: 620px) {
    .client-self-profile-section .client-gender-options { grid-template-columns: 1fr; }
}

.service-library-import-module {
    margin-bottom: 18px;
}

.services-view-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.services-view-header h2 {
    margin: 0;
}

.service-library-open-btn {
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 14px;
    border-radius: 8px;
    white-space: nowrap;
}

.service-library-toolbar {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(160px, 240px);
    gap: 10px;
    margin-bottom: 14px;
}

.service-library-toolbar input,
.service-library-toolbar select {
    min-height: 42px;
    border: 1px solid var(--color-gray-border);
    border-radius: 8px;
    padding: 8px 12px;
    font: inherit;
    background: var(--color-white);
}

.service-library-list {
    display: grid;
    gap: 12px;
}

.service-library-category {
    border: 1px solid var(--color-gray-border);
    border-radius: 8px;
    background: var(--color-white);
    overflow: hidden;
}

.service-library-category-header,
.service-library-service-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.service-library-category-header {
    padding: 0;
    border-bottom: none;
}

.service-library-category.is-open .service-library-category-header {
    border-bottom: 1px solid var(--color-gray-light);
}

.service-library-category-toggle {
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    text-align: left;
    cursor: pointer;
}

.service-library-category-toggle:hover {
    background: var(--color-gray-light);
}

.service-library-toggle-icon {
    width: 16px;
    color: var(--color-text-soft);
    flex: 0 0 auto;
    transition: transform 0.18s ease;
}

.service-library-category.is-open .service-library-toggle-icon {
    transform: rotate(90deg);
}

.service-library-service-list[hidden] {
    display: none !important;
}

.service-library-service-row {
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-gray-light);
}

.service-library-service-row:last-child {
    border-bottom: none;
}

.service-library-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.service-library-thumb {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: var(--color-background-auth) center/cover no-repeat;
    color: var(--color-text-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.service-library-main strong {
    display: block;
    color: var(--color-text-medium);
}

.service-library-main small {
    display: block;
    color: var(--color-text-soft);
    margin-top: 2px;
}

.service-library-description {
    margin: 3px 0 2px;
    color: var(--color-text-light);
    font-size: 12px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.service-library-copy-btn {
    width: auto;
    min-width: 92px;
    padding: 8px 12px;
    border-radius: 8px;
}

@media (max-width: 640px) {
    .services-view-header {
        align-items: stretch;
    }

    .service-library-open-btn {
        width: 100%;
    }

    .service-library-toolbar {
        grid-template-columns: 1fr;
    }

    .service-library-service-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .service-library-copy-btn {
        width: 100%;
    }
}

/* Tela de bloqueio total por licença */
#license-blocker {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(10, 15, 28, 0.95);
    z-index: 999999;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    backdrop-filter: blur(10px);
}

#license-blocker h1 {
    color: #ff4d4d;
    font-size: 2.5rem;
    line-height: 1.1;
    margin: 0 0 1rem;
    letter-spacing: 0;
}

#license-blocker p {
    font-size: 1.2rem;
    line-height: 1.5;
    max-width: 500px;
    margin: 0 0 2rem;
}

#license-blocker .btn-support {
    background: #25d366;
    color: #ffffff;
    padding: 15px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
}

@media (max-width: 520px) {
    #license-blocker h1 {
        font-size: 2rem;
    }

    #license-blocker p {
        font-size: 1rem;
    }
}
.pix-payment-box {
    border: 1px solid var(--color-gray-border);
    border-radius: 8px;
    padding: 14px;
    background: var(--color-background-light);
}

.pix-qr-container {
    text-align: center;
    margin-bottom: 12px;
}

.pix-payment-value {
    margin: 0 0 10px;
    font-weight: 700;
}

.pix-payment-countdown {
    margin: 10px 0 12px;
}

.pix-qr-image {
    width: min(220px, 70vw);
    height: min(220px, 70vw);
    object-fit: contain;
    background: #fff;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}