/**
 * Draco Agenda — formulário público.
 *
 * As cores saem de variáveis para que o tema do cliente possa
 * sobrescrevê-las sem tocar neste arquivo.
 */

/*
 * Valores de reserva.
 *
 * Precisam ficar no :root, e não nos componentes.
 *
 * Uma variável declarada no próprio elemento vence a herdada do :root
 * sempre — não importa qual folha de estilo veio depois, porque isso é
 * herança, não ordem da cascata. Declarando aqui dentro do .dagenda-card,
 * o plugin sobrescrevia as variáveis que ele mesmo publica, e trocar a
 * paleta no painel não mudava nada no card nem no formulário.
 *
 * No :root, o bloco que o plugin imprime no wp_head (prioridade 20, depois
 * das folhas) vence estes valores. Eles só valem quando o Branding não
 * publicou nada.
 */
:root {
    --dagenda-accent: #2563eb;
    --dagenda-accent-soft: #eff6ff;
    --dagenda-text: #1f2937;
    --dagenda-muted: #6b7280;
    --dagenda-border: #e5e7eb;
    --dagenda-radius: 10px;
}

.dagenda-booking,
.dagenda-status {
    max-width: 620px;
    margin: 0 auto;
    color: var(--dagenda-text);
    font-size: 15px;
    line-height: 1.55;
}

/* ---------- Cabeçalho ---------- */

.dagenda-booking__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--dagenda-border);
}

.dagenda-booking__head h3 {
    margin: 0;
    font-size: 20px;
}

.dagenda-price {
    font-weight: 700;
    font-size: 18px;
    color: var(--dagenda-accent);
}

/* ---------- Etapas ---------- */

.dagenda-step {
    margin-bottom: 26px;
}

.dagenda-label {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
    font-weight: 600;
}

.dagenda-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--dagenda-accent);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    flex: none;
}

.dagenda-select {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--dagenda-border);
    border-radius: var(--dagenda-radius);
    background: #fff;
    font-size: 15px;
}

/* ---------- Horários ---------- */

.dagenda-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 44px;
}

.dagenda-slot {
    padding: 10px 16px;
    border: 1px solid var(--dagenda-border);
    border-radius: var(--dagenda-radius);
    background: #fff;
    color: var(--dagenda-text);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.dagenda-slot:hover {
    border-color: var(--dagenda-accent);
}

.dagenda-slot.is-selected {
    background: var(--dagenda-accent);
    border-color: var(--dagenda-accent);
    color: #fff;
}

/* ---------- Campos ---------- */

.dagenda-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.dagenda-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.dagenda-field--full {
    grid-column: 1 / -1;
}

.dagenda-field span {
    font-size: 13px;
    font-weight: 600;
    color: var(--dagenda-muted);
}

.dagenda-field input,
.dagenda-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--dagenda-border);
    border-radius: var(--dagenda-radius);
    background: #fff;
    font-size: 15px;
    font-family: inherit;
}

.dagenda-field input:focus,
.dagenda-field textarea:focus,
.dagenda-select:focus {
    outline: 2px solid var(--dagenda-accent);
    outline-offset: 1px;
    border-color: transparent;
}

/* Honeypot: fora da tela, mas não display:none — alguns robôs pulam
   campos escondidos com display, e o objetivo é justamente que eles
   preencham. */
.dagenda-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- Botões ---------- */

.dagenda-submit {
    display: inline-block;
    width: 100%;
    padding: 14px 20px;
    border: none;
    border-radius: var(--dagenda-radius);
    background: var(--dagenda-accent);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.dagenda-submit:hover {
    filter: brightness(.94);
}

.dagenda-submit:disabled {
    opacity: .6;
    cursor: default;
}

.dagenda-cancel {
    padding: 12px 18px;
    border: 1px solid #fecaca;
    border-radius: var(--dagenda-radius);
    background: #fff;
    color: #b91c1c;
    font-size: 15px;
    cursor: pointer;
}

.dagenda-cancel:hover {
    background: #fef2f2;
}

/* ---------- Avisos ---------- */

.dagenda-feedback {
    margin: 12px 0 0;
    font-size: 14px;
}

.dagenda-feedback.is-error {
    padding: 10px 12px;
    border-radius: var(--dagenda-radius);
    background: #fef2f2;
    color: #b91c1c;
}

.dagenda-feedback.is-ok {
    padding: 10px 12px;
    border-radius: var(--dagenda-radius);
    background: #f0fdf4;
    color: #15803d;
}

.dagenda-notice {
    padding: 14px 16px;
    border-radius: var(--dagenda-radius);
    background: var(--dagenda-accent-soft);
    color: var(--dagenda-text);
}

.dagenda-notice--error {
    background: #fef2f2;
    color: #b91c1c;
}

.dagenda-notice--ok {
    background: #f0fdf4;
    color: #15803d;
}

.dagenda-hint-text {
    margin: 8px 0 0;
    color: var(--dagenda-muted);
    font-size: 14px;
}

/* ---------- Tela de status ---------- */

.dagenda-status h3 {
    margin: 0 0 4px;
}

.dagenda-status__when {
    margin: 0 0 18px;
    font-size: 22px;
    font-weight: 700;
    color: var(--dagenda-accent);
}

.dagenda-status__meta {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--dagenda-border);
}

.dagenda-status__meta li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--dagenda-border);
}

.dagenda-status__meta span {
    color: var(--dagenda-muted);
    font-size: 14px;
}

.dagenda-status__address {
    padding: 12px 14px;
    border-radius: var(--dagenda-radius);
    background: var(--dagenda-accent-soft);
}

.dagenda-status__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ---------- Chips ---------- */

.dagenda-chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #374151;
    font-size: 12px;
    font-weight: 600;
}

.dagenda-chip--confirmed,
.dagenda-chip--paid {
    background: #dcfce7;
    color: #15803d;
}

.dagenda-chip--pending {
    background: #fef3c7;
    color: #92400e;
}

.dagenda-chip--unpaid {
    background: #fee2e2;
    color: #b91c1c;
}

.dagenda-chip--cancelled,
.dagenda-chip--no_show {
    background: #f3f4f6;
    color: #6b7280;
    text-decoration: line-through;
}

/* ---------- Lista "meus agendamentos" ---------- */

.dagenda-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dagenda-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--dagenda-border);
}

.dagenda-list__item > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.dagenda-link {
    color: var(--dagenda-accent);
    font-size: 14px;
    white-space: nowrap;
}

/* ---------- Telas estreitas ---------- */

@media (max-width: 520px) {
    .dagenda-fields {
        grid-template-columns: 1fr;
    }

    .dagenda-list__item {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
 *  Card do herói
 * ============================================================ */

.dagenda-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 380px;
    padding: 22px;
    border-radius: calc(var(--dagenda-radius) * 1.6);
    background: #fff;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .18);
    color: var(--dagenda-text);
    font-size: 15px;
    line-height: 1.5;
}

.dagenda-card *,
.dagenda-card *::before,
.dagenda-card *::after {
    box-sizing: inherit;
}

.dagenda-card__head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 4px;
    font-size: 17px;
}

.dagenda-card__icon {
    display: inline-flex;
    color: var(--dagenda-accent);
}

.dagenda-card__icon svg {
    width: 21px;
    height: 21px;
}

.dagenda-card__sub {
    margin: 0 0 16px;
    color: var(--dagenda-muted);
    font-size: 14px;
}

.dagenda-card__slots {
    margin: 14px 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dagenda-card__slot {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--dagenda-border);
    border-radius: var(--dagenda-radius);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s, background .15s;
}

.dagenda-card__slot:hover {
    border-color: var(--dagenda-accent);
    background: var(--dagenda-accent-soft, #eff6ff);
    color: inherit;
}

.dagenda-card__day {
    font-weight: 600;
    text-transform: capitalize;
}

.dagenda-card__date {
    color: var(--dagenda-muted);
    font-size: 14px;
}

.dagenda-card__hour {
    font-weight: 700;
    font-size: 17px;
    color: var(--dagenda-accent);
    font-variant-numeric: tabular-nums;
}

.dagenda-card__cta {
    display: block;
    width: 100%;
    padding: 13px 18px;
    border-radius: var(--dagenda-radius);
    background: var(--dagenda-accent);
    color: #fff;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.dagenda-card__cta:hover {
    filter: brightness(.94);
    color: #fff;
}

.dagenda-card__foot,
.dagenda-card__empty {
    margin: 12px 0 0;
    color: var(--dagenda-muted);
    font-size: 13px;
    text-align: center;
}

.dagenda-card__empty {
    margin: 8px 0 14px;
    font-size: 14px;
}

/* ============================================================
 *  Formulário progressivo
 * ============================================================ */

/* A classe entra por JavaScript. Sem script, nada fica escondido e o
   formulário continua inteiro — daí o seletor não usar display:none no
   HTML de origem. */
.dagenda-step--data.is-hidden,
.dagenda-submit.is-hidden {
    display: none;
}

.dagenda-step--data:not(.is-hidden) {
    animation: dagenda-reveal .22s ease-out;
}

@keyframes dagenda-reveal {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .dagenda-step--data:not(.is-hidden) {
        animation: none;
    }
}

/* ============================================================
 *  Estilo dos componentes
 *
 *  A classe entra no <body> pelo plugin. Três blocos previsíveis
 *  valem mais que malabarismo com variáveis.
 * ============================================================ */

.dagenda-estilo-contorno .dagenda-card,
.dagenda-estilo-contorno .dagenda-booking {
    box-shadow: none;
    border: 2px solid var(--dagenda-text);
}

.dagenda-estilo-contorno .dagenda-slot,
.dagenda-estilo-contorno .dagenda-card__slot,
.dagenda-estilo-contorno .dagenda-field input,
.dagenda-estilo-contorno .dagenda-field textarea,
.dagenda-estilo-contorno .dagenda-select {
    border-width: 2px;
}

.dagenda-estilo-solido .dagenda-card,
.dagenda-estilo-solido .dagenda-booking {
    background: var(--dagenda-accent-soft);
    box-shadow: none;
    border: 1px solid var(--dagenda-border);
}

.dagenda-estilo-solido .dagenda-card__slot,
.dagenda-estilo-solido .dagenda-slot,
.dagenda-estilo-solido .dagenda-field input,
.dagenda-estilo-solido .dagenda-field textarea,
.dagenda-estilo-solido .dagenda-select {
    background: #fff;
}

/* ============================================================
 *  Escolha do atendimento
 * ============================================================ */

.dagenda-servicos {
    display: grid;
    gap: 8px;
}

.dagenda-servico {
    display: block;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--dagenda-border);
    border-radius: var(--dagenda-radius);
    background: #fff;
    color: var(--dagenda-text);
    font-family: inherit;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.dagenda-servico:hover { border-color: var(--dagenda-accent); }

.dagenda-servico.is-selected {
    border-color: var(--dagenda-accent);
    background: var(--dagenda-accent-soft);
    box-shadow: inset 0 0 0 1px var(--dagenda-accent);
}

.dagenda-servico__nome { display: block; font-weight: 600; }

.dagenda-servico__desc {
    display: block;
    margin-top: 2px;
    color: var(--dagenda-muted);
    font-size: 14px;
}

.dagenda-servico__meta {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 6px;
    color: var(--dagenda-muted);
    font-size: 13px;
}

.dagenda-servico__meta b {
    color: var(--dagenda-accent);
    font-size: 15px;
}

/* ============================================================
 *  Botão de WhatsApp no meio do conteúdo
 *
 *  Vive aqui, e não inline na classe, porque o shortcode pode
 *  aparecer numa página onde o botão flutuante está desligado —
 *  e era exatamente assim que ele saía sem estilo nenhum.
 * ============================================================ */

.dagenda-wa-inline {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 22px;
    border: 2px solid #25D366;
    border-radius: var(--dagenda-radius, 10px);
    background: #25D366;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
    text-decoration: none;
    transition: filter .15s, background .15s, color .15s;
}

.dagenda-wa-inline:hover {
    filter: brightness(.94);
    color: #fff;
}

.dagenda-wa-inline svg {
    width: 20px;
    height: 20px;
    flex: none;
    fill: currentColor;
}

/* Versão vazada, para quando o verde cheio briga com a paleta da página. */
.dagenda-wa-inline--contorno {
    background: transparent;
    color: #1F9D51;
}

.dagenda-wa-inline--contorno:hover {
    background: #25D366;
    color: #fff;
}

/* ============================================================
 *  Área do cliente
 * ============================================================ */

.dagenda-conta {
    max-width: 620px;
    margin: 0 auto;
    color: var(--dagenda-text);
}

.dagenda-conta__topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--dagenda-border);
}

.dagenda-conta__topo h3 { margin: 0; }

.dagenda-entrar h3 { margin: 0 0 6px; }

/* O formulário de entrada é do próprio WordPress; aqui ele só herda a
   aparência do resto do plugin, em vez de sair com o estilo do tema. */
.dagenda-entrar .login-username,
.dagenda-entrar .login-password {
    margin-bottom: 14px;
}

.dagenda-entrar label {
    display: block;
    margin-bottom: 5px;
    color: var(--dagenda-muted);
    font-size: 13px;
    font-weight: 600;
}

.dagenda-entrar input[type="text"],
.dagenda-entrar input[type="password"] {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--dagenda-border);
    border-radius: var(--dagenda-radius);
    font-family: inherit;
    font-size: 15px;
}

.dagenda-entrar .login-remember label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 400;
}

.dagenda-entrar .login-submit input[type="submit"] {
    width: 100%;
    padding: 14px 20px;
    border: 0;
    border-radius: var(--dagenda-radius);
    background: var(--dagenda-accent);
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.dagenda-list__servico {
    color: var(--dagenda-muted);
    font-size: 14px;
}

.dagenda-list__acoes {
    display: flex;
    align-items: center;
    gap: 14px;
    white-space: nowrap;
}

.dagenda-link--forte { font-weight: 600; }

.dagenda-campo-nota {
    color: var(--dagenda-muted);
    font-size: 12.5px;
    line-height: 1.4;
}

/* O rótulo do botão de WhatsApp não deve quebrar em duas linhas. */
.dagenda-wa-inline span { white-space: nowrap; }

@media (max-width: 520px) {
    .dagenda-wa-inline span { white-space: normal; }
}

/* Gratuito não é o mesmo que pago: cor neutra, sem o verde de confirmação. */
.dagenda-chip--free {
    background: #f3f4f6;
    color: #4b5563;
}

/* Campo de documento escondido quando o atendimento é gratuito. */
.dagenda-field--doc.is-hidden {
    display: none;
}

/* Mantém o preço oculto até a escolha explícita, inclusive com estilos do tema. */
.dagenda-price[hidden] { display: none !important; }

/* Etapa de profissional escondida quando só existe um: o campo continua
   no HTML porque o id precisa ser enviado e o JavaScript precisa de um
   lugar para escrevê-lo. */
.dagenda-step--oculto {
    display: none;
}