/* ========================================
   GestãoBLZ - Popup "Agendar / detalhes do agendamento" v2 (camada visual)
   Alvo: components/agenda-popup.js (overlay .agenda-popup-overlay anexado ao
   <body>): novo agendamento (único/múltiplos), detalhes, bloqueio, edição,
   cadastro rápido de cliente e novo serviço.
   O JS injeta o próprio <style> depois deste arquivo, por isso todas as regras
   usam o prefixo body[data-support-page="agenda"] .agenda-popup-overlay.
   Só muda o visual: estrutura, textos, campos e fluxos continuam iguais.
   Os !important existem apenas onde o original usa estilo inline ou !important.
   Para voltar ao visual anterior, basta remover o <link> deste arquivo.
   ======================================== */

/* ========================================
   CASCA: overlay, container, cabeçalho, corpo, rodapé
   ======================================== */
body[data-support-page="agenda"] .agenda-popup-overlay {
    background: rgba(17, 24, 39, 0.45);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-popup {
    width: calc(100vw - 48px);
    max-width: 720px;
    max-height: min(92vh, 900px);
    max-height: min(92dvh, 900px);
    background: #ffffff;
    border: 1px solid var(--v2-card-border);
    border-radius: 14px;
    box-shadow: 0 20px 48px rgba(16, 24, 40, 0.18);
    transform: translateY(8px) scale(0.98);
    transition: transform 0.2s ease;
}

body[data-support-page="agenda"] .agenda-popup-overlay.active .agenda-popup {
    transform: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-popup-new-appointment {
    max-width: 640px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-popup-new-appointment.is-multiple-mode {
    max-width: 980px;
}

/* Cabeçalho branco, título escuro e ícone em caixinha chapada */
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-popup-header {
    min-height: 0;
    padding: 14px 56px 14px 20px;
    background: #ffffff;
    color: var(--v2-text);
    border-bottom: 1px solid var(--v2-card-divider);
    border-radius: 14px 14px 0 0;
    overflow: visible;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-popup-header::before {
    display: none;
    animation: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-popup-title {
    gap: 10px;
    min-width: 0;
    color: var(--v2-text);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-popup-title > i {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.12);
    color: var(--primary-color);
    font-size: 14px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-popup-close {
    top: 50%;
    right: 12px;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    border-radius: 8px;
    background: transparent;
    color: var(--v2-muted);
    font-size: 15px;
    transform: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-popup-close:hover,
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-popup-close:focus-visible {
    background: #f3f4f6;
    color: var(--v2-text);
    transform: none;
}

/* Corpo */
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-popup-body {
    padding: 20px;
    background: #ffffff;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-popup-new-appointment .agenda-popup-body {
    padding: 0;
    background: #ffffff;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-popup-body::-webkit-scrollbar-track,
body[data-support-page="agenda"] .agenda-popup-overlay .services-list::-webkit-scrollbar-track,
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-pro-select-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-popup-body::-webkit-scrollbar-thumb,
body[data-support-page="agenda"] .agenda-popup-overlay .services-list::-webkit-scrollbar-thumb,
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-pro-select-dropdown::-webkit-scrollbar-thumb {
    background: #d5d9e0;
}

/* Rodapé de ações: faixa clara */
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-popup-footer {
    padding: 12px 20px;
    gap: 8px;
    background: var(--v2-surface);
    border-top: 1px solid var(--v2-card-divider);
    border-radius: 0 0 14px 14px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-popup-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

/* ========================================
   BOTÕES
   ======================================== */
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-btn {
    min-width: 88px;
    min-height: 38px;
    padding: 8px 16px;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    box-shadow: none;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0;
    transform: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-btn:hover,
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-btn:active {
    transform: none;
    box-shadow: none;
    filter: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-btn::before {
    display: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.2);
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-btn-primary {
    background: var(--primary-color);
    color: #ffffff;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-btn-primary:hover {
    background: var(--primary-dark, var(--primary-color));
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-btn-secondary {
    background: #ffffff;
    border-color: var(--v2-card-border);
    color: var(--v2-text-2);
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-btn-secondary:hover {
    background: #f3f4f6;
    border-color: var(--v2-card-border);
    color: var(--v2-text);
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-btn-danger {
    background: #dc2626;
    color: #ffffff;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-btn-danger:hover {
    background: #b91c1c;
}

/* "Adicionar à lista" (modo múltiplos): sem degradê nem pulso */
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-btn-add-list {
    background: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.1);
    border: 1px solid rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.4);
    color: var(--primary-dark, var(--primary-color));
    box-shadow: none;
    animation: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-btn-add-list:hover {
    background: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.16);
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-new-multiple-inline-actions {
    margin-top: 4px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-new-multiple-inline-actions .agenda-btn {
    min-width: 180px;
    min-height: 40px;
    padding: 8px 16px;
}

/* ========================================
   CAMPOS
   ======================================== */
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-form-group {
    margin-bottom: 16px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-form-group.compact {
    margin-bottom: 14px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-form-group.compact:last-child {
    margin-bottom: 0;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-form-label,
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-popup-new-appointment .agenda-form-label {
    margin-bottom: 6px;
    color: var(--v2-text-2);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-form-label span {
    color: var(--v2-muted) !important;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-form-control,
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-popup-new-appointment .agenda-form-control {
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--v2-card-border);
    border-radius: 8px;
    background-color: #ffffff;
    color: var(--v2-text);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    box-shadow: none;
    transform: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-form-control::placeholder {
    color: #9aa1ad;
}

body[data-support-page="agenda"] .agenda-popup-overlay select.agenda-form-control {
    padding-right: 32px;
    cursor: pointer;
}

body[data-support-page="agenda"] .agenda-popup-overlay textarea.agenda-form-control {
    min-height: 64px;
    resize: vertical;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-form-control:hover:not(:focus):not(:disabled) {
    border-color: #d5d9e0;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.15);
    transform: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-form-control:disabled {
    background-color: var(--v2-surface);
    color: var(--v2-muted);
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-form-helper {
    margin-top: 6px;
    color: var(--v2-muted);
    font-size: 12.5px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-form-row,
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-form-row-3 {
    gap: 12px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-form-row > *,
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-form-row-3 > * {
    min-width: 0;
}

/* Validação: só o campo fica vermelho (não a caixa do grupo inteiro) */
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-client-input-group.agenda-field-invalid,
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-services-container.agenda-field-invalid {
    border-color: transparent !important;
    box-shadow: none !important;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-field-error-text {
    margin-top: 6px;
    color: #dc2626;
    font-size: 12.5px;
    font-weight: 500;
}

/* Aviso de encaixe */
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-encaixe-warning {
    gap: 10px;
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    background: #fff7ed;
    color: #9a3412;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-encaixe-warning strong {
    font-size: 13.5px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-encaixe-warning p {
    font-size: 13px;
}

/* ========================================
   NOVO AGENDAMENTO: modos, área do formulário, horário escolhido
   ======================================== */
/* Corrige coluna que crescia além do popup no celular (1fr -> minmax) */
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-new-workspace {
    grid-template-columns: minmax(0, 1fr);
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-popup-new-appointment.is-multiple-mode .agenda-new-workspace {
    grid-template-columns: minmax(0, 1fr) 320px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-new-form {
    min-width: 0;
    padding: 16px 20px 20px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-new-divider {
    margin: 4px 0 16px;
    background: var(--v2-card-divider);
    opacity: 1;
}

/* Seletor de modo: controle segmentado */
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-new-modebar {
    gap: 2px;
    margin: 16px 20px 0;
    padding: 3px;
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
    background: var(--v2-surface);
    box-shadow: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-new-mode-btn {
    min-height: 32px;
    padding: 0 12px;
    border-radius: 7px;
    color: var(--v2-text-2);
    font-size: 13px;
    font-weight: 500;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-new-mode-btn:hover:not(.active) {
    background: #eef0f3;
    color: var(--v2-text);
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-new-mode-btn.active {
    background: #ffffff;
    color: var(--primary-color);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1), 0 0 0 1px var(--v2-card-border);
}

/* Horário clicado na grade + "Bloquear este horário" */
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-time-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;
    margin: 0 0 16px;
    padding: 10px 12px 10px 14px;
    border: 1px solid rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.22);
    border-radius: 10px;
    background: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.06);
    box-shadow: none;
    text-align: left;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-time-info-title {
    grid-column: 1;
    margin: 0;
    color: var(--v2-text);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.35;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-time-info-value {
    grid-column: 1;
    color: var(--v2-text-2);
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-btn-block {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    margin: 0;
    min-width: 0;
    min-height: 36px;
    padding: 6px 12px;
    border: 1px solid var(--v2-card-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--v2-text-2);
    font-size: 13px;
    white-space: nowrap;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-btn-block i {
    color: #d97706;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-btn-block:hover {
    background: #f3f4f6;
    color: var(--v2-text);
}

/* ========================================
   CLIENTE: busca, lista, botão "+", histórico, pacote
   ======================================== */
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-client-input-group,
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-service-input-group {
    gap: 8px;
    align-items: flex-start;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-client-input-group .agenda-client-search,
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-service-input-group .agenda-service-dropdown-container {
    min-width: 0;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-add-client-btn,
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-add-service-btn {
    width: 40px;
    min-width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--primary-color);
    color: #ffffff;
    font-size: 14px;
    box-shadow: none;
    transform: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-add-client-btn:hover,
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-add-service-btn:hover {
    background: var(--primary-dark, var(--primary-color));
    box-shadow: none;
    transform: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-client-dropdown {
    top: calc(100% + 4px);
    max-height: 264px;
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.14);
    z-index: 30;
    overscroll-behavior: contain;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-client-option {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 48px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--v2-card-divider);
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-client-option:hover {
    background: var(--v2-surface);
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-client-option-name {
    color: var(--v2-text);
    font-size: 14px;
    font-weight: 500;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-client-option-phone {
    margin-top: 1px;
    color: var(--v2-muted);
    font-size: 12.5px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-client-option-phone:empty {
    display: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-client-option-empty {
    padding: 14px 12px;
    color: var(--v2-muted);
    font-size: 13px;
}

/* Últimos 3 agendamentos */
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-client-history {
    /* ocupa também a largura do botão "+" ao lado da busca */
    margin-right: -48px;
    margin-top: 10px;
    padding: 12px 14px 4px;
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
    background: var(--v2-surface);
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-client-history h6 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: var(--v2-text);
    font-size: 13px;
    font-weight: 500;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-client-history h6 i {
    color: var(--primary-color);
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-history-highlight {
    gap: 2px;
    margin-bottom: 6px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-history-highlight.warning {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-history-highlight.same {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-history-highlight-title {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-history-highlight-note {
    font-size: 12.5px;
    opacity: 1;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-history-item {
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--v2-card-divider);
    font-size: 13px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-history-item:hover {
    background: transparent;
    transform: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .history-item-content {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 8px;
    align-items: baseline;
    min-width: 0;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-history-date {
    color: var(--v2-text);
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-history-service {
    margin: 0;
    color: var(--v2-text-2);
    font-size: 13px;
    min-width: 0;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-history-professional {
    grid-column: 1 / -1;
    margin-top: 1px;
    color: var(--v2-muted);
    font-size: 12.5px;
    font-weight: 400;
}

body[data-support-page="agenda"] .agenda-popup-overlay .history-quick-select-btn {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: 1px solid rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.3);
    border-radius: 8px;
    background: #ffffff;
    color: var(--primary-color);
    font-size: 12px;
    box-shadow: none;
    transform: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .history-quick-select-btn:hover {
    background: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.1);
    box-shadow: none;
    transform: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .history-quick-select-btn[style*="background"] {
    color: #ffffff;
}

/* Cartão do pacote/assinatura do cliente */
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-package-preview {
    margin-top: 0;
}

body[data-support-page="agenda"] .agenda-popup-overlay .client-package-card {
    margin-top: 10px;
    padding: 12px 14px;
    border: 1px solid var(--v2-card-border);
    border-left: 3px solid var(--client-package-accent, var(--primary-color));
    border-radius: 10px;
    background: #ffffff;
    box-shadow: none;
    transform: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .client-package-card:hover {
    box-shadow: none;
    transform: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .client-package-card.is-unlimited {
    background: #f5f9ff;
    border-color: #cfe2ff;
    border-left-color: #037bff;
}

body[data-support-page="agenda"] .agenda-popup-overlay .client-package-card.is-multiple-benefits {
    padding: 0;
    border: 0;
    background: transparent;
}

body[data-support-page="agenda"] .agenda-popup-overlay .client-package-card.is-multiple-benefits > .client-package-benefit-card {
    margin-top: 0;
}

body[data-support-page="agenda"] .agenda-popup-overlay .client-package-card-header {
    gap: 8px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .client-package-card-header h6 {
    color: var(--v2-text);
    font-size: 14px;
    font-weight: 500;
}

body[data-support-page="agenda"] .agenda-popup-overlay .client-package-card-subtitle {
    color: var(--v2-muted);
    font-size: 12.5px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .client-package-card-status {
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .client-package-card-metrics {
    gap: 8px;
    margin-top: 10px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .client-package-card-metric {
    min-width: 120px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--v2-surface);
}

body[data-support-page="agenda"] .agenda-popup-overlay .client-package-card-metric-label,
body[data-support-page="agenda"] .agenda-popup-overlay .client-package-card-rights-title {
    color: var(--v2-muted);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .client-package-card-metric-value {
    margin: 2px 0 0;
    color: var(--v2-text);
    font-size: 16px;
    font-weight: 500;
}

body[data-support-page="agenda"] .agenda-popup-overlay .client-package-card-metric-hint,
body[data-support-page="agenda"] .agenda-popup-overlay .client-package-card-rights-text {
    color: var(--v2-muted);
    font-size: 12.5px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .client-package-card-rights {
    margin-top: 10px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .client-package-card-service {
    padding: 3px 8px;
    border: 0;
    border-radius: 6px;
    background: var(--v2-surface);
    color: var(--v2-text-2);
    font-size: 12px;
    font-weight: 500;
}

body[data-support-page="agenda"] .agenda-popup-overlay .client-package-card.is-unlimited .client-package-card-service {
    background: rgba(3, 123, 255, 0.1);
    color: #0b5cc2;
}

/* ========================================
   PROFISSIONAL (lista suspensa do novo agendamento)
   ======================================== */
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-pro-select-trigger {
    min-height: 40px;
    padding: 6px 12px;
    border: 1px solid var(--v2-card-border);
    border-radius: 8px;
    background: #ffffff;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-pro-select-trigger:hover {
    border-color: #d5d9e0;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-pro-select-trigger.has-value {
    border-color: var(--v2-card-border);
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-pro-select-trigger.is-open {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.15);
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-pro-select-placeholder {
    color: #9aa1ad;
    font-size: 14px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-pro-select-name {
    color: var(--v2-text);
    font-size: 14px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-pro-select-avatar,
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-pro-select-option-avatar {
    width: 28px;
    height: 28px;
    border: 0;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-pro-select-dropdown {
    max-height: 292px;
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.14);
    overscroll-behavior: contain;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-pro-select-group-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px 6px;
    border-bottom: 1px solid var(--v2-card-divider);
    background: var(--v2-surface);
    color: var(--v2-text-2);
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-pro-select-option {
    gap: 10px;
    min-height: 48px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--v2-card-divider);
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-pro-select-option:hover {
    background: var(--v2-surface);
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-pro-select-option.is-selected {
    background: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.08);
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-pro-select-option-name {
    color: var(--v2-text);
    font-size: 14px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-pro-select-option-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--v2-muted);
    font-size: 12.5px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-pro-select-recent-badge {
    padding: 1px 6px;
    border-radius: 6px;
    background: #fef3c7;
    color: #b45309;
    font-size: 11.5px;
    letter-spacing: 0;
    text-transform: none;
}

/* ========================================
   SERVIÇOS / PRODUTOS: gatilho, lista suspensa, itens escolhidos
   ======================================== */
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-services-container {
    gap: 8px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-selected-services:empty {
    display: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-service-dropdown-container {
    margin-top: 0;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-service-dropdown-trigger,
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-popup-new-appointment .agenda-service-dropdown-trigger {
    min-height: 40px;
    padding: 6px 12px;
    border: 1px solid var(--v2-card-border);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: none;
    transform: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-service-dropdown-trigger:hover {
    border-color: #d5d9e0;
    box-shadow: none;
    transform: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-service-dropdown-trigger.active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.15);
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-service-dropdown-trigger.has-selected-services {
    border-style: dashed;
    border-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.45);
    background: #ffffff;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-service-dropdown-trigger.has-selected-services .selected-service-text {
    color: var(--primary-dark, var(--primary-color));
    font-weight: 500;
}

body[data-support-page="agenda"] .agenda-popup-overlay .selected-service-text {
    min-width: 0;
    overflow: hidden;
    color: var(--v2-text-2);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[data-support-page="agenda"] .agenda-popup-overlay .dropdown-arrow {
    color: var(--v2-muted);
    font-size: 12px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-service-dropdown {
    max-height: 380px;
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.14);
    transform: translateY(-4px);
    transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-service-dropdown.active {
    transform: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .service-search-container {
    padding: 8px;
    border-bottom: 1px solid var(--v2-card-divider);
    background: #ffffff;
}

body[data-support-page="agenda"] .agenda-popup-overlay .service-search {
    height: 38px;
    padding: 6px 12px 6px 34px;
    border: 1px solid var(--v2-card-border);
    border-radius: 8px;
    background: var(--v2-surface);
    color: var(--v2-text);
    font-family: inherit;
    font-size: 14px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .service-search:focus {
    background: #ffffff;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.15);
}

body[data-support-page="agenda"] .agenda-popup-overlay .search-icon {
    left: 20px;
    color: var(--v2-muted);
    font-size: 13px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .services-list {
    max-height: 300px;
    padding-bottom: 0;
    overscroll-behavior: contain;
}

/* divisor inline entre "últimos serviços" e a lista completa */
body[data-support-page="agenda"] .agenda-popup-overlay .services-list > div[style*="height: 1px"] {
    margin: 0 !important;
    background: var(--v2-card-border) !important;
}

body[data-support-page="agenda"] .agenda-popup-overlay .services-section-title {
    margin: 0;
    padding: 8px 12px 6px;
    border-bottom: 1px solid var(--v2-card-divider);
    background: var(--v2-surface);
    color: var(--v2-text-2);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .services-section-title i {
    color: var(--primary-color);
}

body[data-support-page="agenda"] .agenda-popup-overlay .service-option {
    gap: 12px;
    min-height: 52px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--v2-card-divider);
    transition: background-color 0.15s ease;
}

body[data-support-page="agenda"] .agenda-popup-overlay .service-option:hover {
    background: var(--v2-surface);
    transform: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .service-option.recent {
    border-left: 3px solid var(--primary-color);
    background: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.05);
}

body[data-support-page="agenda"] .agenda-popup-overlay .service-option-content {
    min-width: 0;
    margin-right: 0;
}

body[data-support-page="agenda"] .agenda-popup-overlay .service-option-name {
    margin-bottom: 2px;
    color: var(--v2-text);
    font-size: 14px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .service-option-details {
    gap: 8px;
    color: var(--v2-muted);
    font-size: 12.5px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .service-option-price {
    flex-shrink: 0;
    color: var(--v2-text);
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}

body[data-support-page="agenda"] .agenda-popup-overlay .service-recent-badge {
    margin-left: 0;
    padding: 1px 6px;
    border-radius: 6px;
    background: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.12);
    color: var(--primary-dark, var(--primary-color));
    font-size: 11.5px;
    letter-spacing: 0;
    text-transform: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .service-promotion-badge,
body[data-support-page="agenda"] .agenda-popup-overlay .selected-service-promotion {
    padding: 1px 6px;
    border: 0;
    border-radius: 6px;
    background: #dcfce7;
    color: #15803d;
    font-size: 11.5px;
    font-weight: 500;
}

body[data-support-page="agenda"] .agenda-popup-overlay .services-empty-state {
    margin: 8px;
    padding: 14px 12px;
    border-color: var(--v2-card-border);
    border-radius: 8px;
    color: var(--v2-muted);
    font-size: 13px;
}

/* Itens escolhidos */
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-selected-services {
    gap: 8px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-selected-services-list {
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
    background: var(--v2-surface);
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-selected-services-head {
    flex-direction: row;
    align-items: center;
    padding: 0 4px 2px;
    color: var(--v2-text-2);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-selected-services-head small {
    color: var(--v2-muted);
    font-size: 12px;
    font-weight: 500;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-selected-service-item {
    align-items: center;
    gap: 10px;
    padding: 8px 8px 8px 10px;
    border: 1px solid var(--v2-card-border);
    border-radius: 8px;
    background: #ffffff;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-selected-service-item:hover {
    border-color: var(--v2-card-border);
    box-shadow: none;
    transform: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .selected-service-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 13px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .selected-service-name {
    color: var(--v2-text);
    font-size: 14px;
    font-weight: 500;
}

body[data-support-page="agenda"] .agenda-popup-overlay .selected-service-duration {
    color: var(--v2-muted);
    font-size: 12.5px;
    font-weight: 400;
}

body[data-support-page="agenda"] .agenda-popup-overlay .selected-service-price-badge {
    padding: 4px 8px;
    border: 0;
    border-radius: 6px;
    background: var(--v2-surface);
    color: var(--v2-text);
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

body[data-support-page="agenda"] .agenda-popup-overlay .remove-service-btn {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 8px;
    background: transparent;
    color: #9aa1ad;
    font-size: 13px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .remove-service-btn:hover {
    background: #fef2f2;
    color: #dc2626;
    transform: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-services-total {
    gap: 12px;
    padding: 8px 12px;
    border: 1px solid var(--v2-card-border);
    border-radius: 8px;
    background: #ffffff;
}

body[data-support-page="agenda"] .agenda-popup-overlay .services-total-label {
    color: var(--v2-text);
    font-size: 13.5px;
    font-weight: 500;
}

body[data-support-page="agenda"] .agenda-popup-overlay .services-total-caption {
    color: var(--v2-muted);
    font-size: 12.5px;
    font-weight: 400;
}

body[data-support-page="agenda"] .agenda-popup-overlay .services-total-duration {
    color: var(--v2-text-2);
    font-size: 13px;
    font-weight: 500;
}

body[data-support-page="agenda"] .agenda-popup-overlay .services-total-price {
    color: var(--v2-text);
    font-size: 15px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* Produtos escolhidos: quantidade */
body[data-support-page="agenda"] .agenda-popup-overlay .product-quantity-controls {
    gap: 4px;
    margin: 0;
}

body[data-support-page="agenda"] .agenda-popup-overlay .product-quantity-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--v2-card-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--v2-text-2);
    font-size: 11px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .product-quantity-value {
    min-width: 28px;
    color: var(--v2-text);
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}

/* ========================================
   MODO "MÚLTIPLOS": painel da lista
   ======================================== */
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-multiple-panel {
    margin: 16px 20px 16px 0;
    padding: 12px;
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-multiple-panel[hidden] {
    display: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-multiple-panel-head {
    margin-bottom: 10px;
    padding: 0 2px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-multiple-panel h4 {
    color: var(--v2-text);
    font-size: 14px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-multiple-count {
    min-width: 26px;
    height: 24px;
    padding: 0 7px;
    border-radius: 6px;
    background: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.12);
    color: var(--primary-dark, var(--primary-color));
    font-size: 12.5px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-multiple-list {
    gap: 6px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-multiple-empty {
    border-color: var(--v2-card-border);
    border-radius: 8px;
    background: var(--v2-surface);
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-multiple-empty i {
    border-radius: 8px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-multiple-empty strong {
    color: var(--v2-text);
    font-size: 13.5px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-multiple-empty span {
    color: var(--v2-muted);
    font-size: 12.5px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-multiple-item {
    grid-template-columns: minmax(0, 1fr) 32px;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--v2-card-border);
    border-radius: 8px;
    background: #ffffff;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-multiple-item-main strong {
    color: var(--v2-text);
    font-size: 13.5px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-multiple-item-main span,
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-multiple-item-main small,
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-multiple-item-main em {
    color: var(--v2-text-2);
    font-size: 12.5px;
    line-height: 1.35;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-multiple-item-main em {
    color: var(--primary-dark, var(--primary-color));
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-multiple-remove {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #9aa1ad;
    font-size: 13px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-multiple-remove:hover {
    background: #fef2f2;
    color: #dc2626;
}

/* ========================================
   EDITAR AGENDAMENTO: cartões de profissional
   ======================================== */
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-professional-selector {
    gap: 14px;
    margin-top: 2px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-professional-group {
    gap: 8px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-professional-section {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 8px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-professional-section-title,
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-professional-section-title-muted {
    align-items: center;
    padding: 0;
    color: var(--v2-text);
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-professional-section-title-copy strong {
    color: var(--v2-text);
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-professional-section-title-copy small {
    margin-top: 1px;
    color: var(--v2-muted);
    font-size: 12.5px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-professional-section-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 12px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-professional-section-count {
    min-width: 26px;
    height: 24px;
    margin-top: 0;
    border-radius: 6px;
    font-size: 12.5px;
}

/* Cartão horizontal: avatar à esquerda, textos à direita */
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-professional-card {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    min-height: 64px;
    padding: 10px 12px;
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: none;
    transform: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-professional-card:hover {
    border-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.45);
    box-shadow: none;
    transform: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-professional-card.recent {
    border-color: #fde68a;
    background: #fffdf5;
    box-shadow: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-professional-card.selected,
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-professional-card.recent.selected {
    border-color: var(--primary-color);
    background: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.06);
    box-shadow: 0 0 0 3px rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.12);
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-professional-card.unavailable {
    filter: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-professional-avatar {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 40px;
    height: 40px;
    margin: 0;
    border: 0;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-professional-name {
    grid-column: 2;
    margin: 0;
    padding-right: 64px;
    overflow: hidden;
    color: var(--v2-text);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-professional-caption {
    grid-column: 2;
    margin: 0;
    color: var(--v2-muted);
    font-size: 12.5px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-professional-status {
    grid-column: 2;
    justify-self: start;
    margin-top: 2px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-professional-badge {
    top: 10px;
    right: 10px;
    padding: 1px 6px;
    border: 0;
    border-radius: 6px;
    background: #fef3c7;
    font-size: 11.5px;
    letter-spacing: 0;
    text-transform: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-professional-selected-indicator {
    top: 6px;
    left: 6px;
    width: 20px;
    height: 20px;
    font-size: 10px;
    box-shadow: 0 0 0 2px #ffffff;
}

/* ========================================
   DETALHES DO AGENDAMENTO
   ======================================== */
/* Faixa de horário: mantém a cor do profissional (estilo inline do JS),
   mas mostra só o tom inicial do degradê, em bloco chapado e compacto */
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-appointment-view .appointment-header {
    margin-bottom: 16px !important;
    padding: 14px 16px !important;
    border-radius: 10px !important;
    background-size: 2000% 2000% !important;
    background-position: 0 0 !important;
}

body[data-support-page="agenda"] .agenda-popup-overlay .appointment-time-display {
    display: flex;
    align-items: center;
    font-variant-numeric: tabular-nums;
}

body[data-support-page="agenda"] .agenda-popup-overlay .appointment-time-display span {
    font-size: 18px !important;
    font-weight: 500 !important;
}

body[data-support-page="agenda"] .agenda-popup-overlay .appointment-date-display {
    margin-top: 4px !important;
    font-size: 13.5px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .appointment-info-cards {
    gap: 10px;
    margin-bottom: 16px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .info-card {
    min-width: 0;
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
    background: #ffffff;
}

body[data-support-page="agenda"] .agenda-popup-overlay .info-card-header {
    padding: 10px 14px 0;
    border-bottom: 0;
    background: transparent;
}

body[data-support-page="agenda"] .agenda-popup-overlay .info-card-header h6 {
    color: var(--v2-muted);
    font-size: 12.5px;
    font-weight: 500;
}

body[data-support-page="agenda"] .agenda-popup-overlay .info-card-content {
    padding: 8px 14px 12px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .info-card .client-info,
body[data-support-page="agenda"] .agenda-popup-overlay .info-card .professional-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 0;
    text-align: left;
}

body[data-support-page="agenda"] .agenda-popup-overlay .info-card .client-avatar,
body[data-support-page="agenda"] .agenda-popup-overlay .info-card .professional-avatar {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.12);
    color: var(--primary-color);
    box-shadow: none;
    font-size: 14px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .info-card .client-details,
body[data-support-page="agenda"] .agenda-popup-overlay .info-card .professional-details {
    min-width: 0;
    display: block;
    text-align: left;
}

body[data-support-page="agenda"] .agenda-popup-overlay .info-card .client-name,
body[data-support-page="agenda"] .agenda-popup-overlay .info-card .professional-name {
    margin: 0;
    max-width: 100%;
    overflow: hidden;
    color: var(--v2-text);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[data-support-page="agenda"] .agenda-popup-overlay .info-card .client-phone,
body[data-support-page="agenda"] .agenda-popup-overlay .info-card .professional-specialties {
    margin-top: 1px;
    color: var(--v2-muted);
    font-size: 12.5px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .info-card .service-name {
    margin-bottom: 4px;
    color: var(--v2-text);
    font-size: 14px;
    font-weight: 500;
}

body[data-support-page="agenda"] .agenda-popup-overlay .info-card .service-duration,
body[data-support-page="agenda"] .agenda-popup-overlay .info-card .service-price {
    margin-bottom: 2px;
    color: var(--v2-text-2);
    font-size: 13px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .info-card .observations-text {
    color: var(--v2-text);
    font-size: 14px;
}

/* Status: mesma cor (inline), forma mais discreta */
body[data-support-page="agenda"] .agenda-popup-overlay .status-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .status-info .status-badge {
    padding: 4px 10px !important;
    border-radius: 6px !important;
    gap: 6px !important;
    font-size: 13px;
    font-weight: 500 !important;
}

body[data-support-page="agenda"] .agenda-popup-overlay .status-info .status-dot {
    width: 6px !important;
    height: 6px !important;
}

/* Listas de serviços, produtos, resumo financeiro, ajustes */
body[data-support-page="agenda"] .agenda-popup-overlay .appointment-items,
body[data-support-page="agenda"] .agenda-popup-overlay .appointment-financial-summary {
    margin-bottom: 12px;
    padding: 12px 14px;
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
    background: #ffffff;
}

body[data-support-page="agenda"] .agenda-popup-overlay .appointment-items-header {
    margin-bottom: 8px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .appointment-items-header h6 {
    color: var(--v2-text);
    font-size: 13.5px;
    font-weight: 500;
}

body[data-support-page="agenda"] .agenda-popup-overlay .appointment-items-header h6 i {
    color: var(--v2-muted);
}

body[data-support-page="agenda"] .agenda-popup-overlay .appointment-items-count {
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--v2-surface);
    color: var(--v2-text-2);
    font-size: 12px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .appointment-item {
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--v2-card-divider);
}

body[data-support-page="agenda"] .agenda-popup-overlay .appointment-item:first-child {
    border-top: 0;
    padding-top: 0;
}

body[data-support-page="agenda"] .agenda-popup-overlay .appointment-item-main {
    min-width: 0;
}

body[data-support-page="agenda"] .agenda-popup-overlay .appointment-item-title {
    color: var(--v2-text);
    font-size: 14px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .appointment-item-meta {
    gap: 4px;
    margin-top: 4px;
    font-size: 12px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .appointment-item-meta span {
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--v2-surface);
    color: var(--v2-text-2);
}

body[data-support-page="agenda"] .agenda-popup-overlay .appointment-item-price {
    color: var(--v2-text);
    font-size: 14px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

body[data-support-page="agenda"] .agenda-popup-overlay .appointment-financial-lines {
    gap: 6px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .financial-line {
    gap: 12px;
    color: var(--v2-text-2);
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}

body[data-support-page="agenda"] .agenda-popup-overlay .financial-line strong {
    color: var(--v2-text);
    text-align: right;
}

body[data-support-page="agenda"] .agenda-popup-overlay .financial-line.discount strong {
    color: #dc2626;
}

body[data-support-page="agenda"] .agenda-popup-overlay .financial-line.total {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--v2-card-divider);
    color: var(--v2-text);
    font-size: 14.5px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .financial-tags {
    gap: 6px;
    margin-top: 10px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .financial-tag {
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--v2-surface);
    color: var(--v2-text-2);
    font-size: 12.5px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .financial-tag.cashback {
    background: #dcfce7;
    color: #15803d;
}

body[data-support-page="agenda"] .agenda-popup-overlay .financial-tag.coupon {
    background: #dbeafe;
    color: #1d4ed8;
}

body[data-support-page="agenda"] .agenda-popup-overlay .financial-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    color: var(--v2-text-2);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

/* Resumo de pacote/assinatura no detalhe */
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-package-summary {
    gap: 10px;
    margin-bottom: 12px;
    padding: 12px 14px;
    border: 1px solid var(--v2-card-border);
    border-left: 3px solid #037bff;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-package-summary--unlimited {
    background: #f5f9ff;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-package-summary-label,
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-package-summary-metrics div span {
    color: var(--v2-muted);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-package-summary-header strong {
    font-size: 15px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-package-summary-status {
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 12px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-package-summary-metrics {
    gap: 8px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-package-summary-metrics > div {
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--v2-surface);
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-package-summary-metrics div strong {
    font-size: 16px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-package-summary-notes,
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-package-summary-base,
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-package-summary-rights {
    font-size: 13px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-package-summary p {
    margin: 0;
}

/* Atalhos WhatsApp / Fechar Comanda */
body[data-support-page="agenda"] .agenda-popup-overlay .quick-actions {
    gap: 8px;
    justify-content: flex-start;
    margin-top: 4px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .quick-action-btn {
    min-height: 38px;
    padding: 8px 16px;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
    font-size: 13.5px;
    box-shadow: none;
    transform: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .quick-action-btn:hover {
    box-shadow: none;
    filter: brightness(0.95);
    transform: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .quick-action-btn[onclick*="openCloseCommand"] {
    background: #2563eb !important;
}

/* Bloqueio de horário (detalhe) */
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-block-view {
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-block-header i {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #fef3c7;
    color: #d97706;
    font-size: 15px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-block-header strong {
    color: var(--v2-text);
    font-size: 15px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-block-header p,
body[data-support-page="agenda"] .agenda-popup-overlay .agenda-block-detail span {
    color: var(--v2-muted);
    font-size: 12.5px;
    letter-spacing: 0;
    text-transform: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-block-metadata {
    gap: 8px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-block-detail {
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--v2-surface);
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-block-detail strong {
    margin-top: 1px;
    color: var(--v2-text);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-block-note {
    padding: 10px 12px;
    border: 1px solid #fde68a;
    border-radius: 8px;
    background: #fffbeb;
    box-shadow: none;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-block-note strong {
    color: #92400e;
    font-size: 13px;
}

body[data-support-page="agenda"] .agenda-popup-overlay .agenda-block-note p {
    color: #78350f;
    font-size: 14px;
}

/* ========================================
   CADASTRO RÁPIDO DE CLIENTE / NOVO SERVIÇO (mesma casca)
   ======================================== */
body[data-support-page="agenda"] #quickClientModal .agenda-popup-body,
body[data-support-page="agenda"] #newServiceModal .agenda-popup-body {
    padding: 18px 20px;
}

body[data-support-page="agenda"] #quickClientForm > div[style*="display: flex"] {
    gap: 12px !important;
    margin-bottom: 0 !important;
}

body[data-support-page="agenda"] #quickClientForm > div[style*="display: flex"] > .agenda-form-group {
    min-width: 0;
}

body[data-support-page="agenda"] #quickClientForm .agenda-form-group > div[style*="background: #fff3cd"] {
    border: 1px solid #fde68a;
    border-radius: 8px !important;
    background: #fffbeb !important;
    color: #78350f !important;
}

/* ========================================
   TABLET / CELULAR
   ======================================== */
@media (max-width: 900px) {
    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-popup-new-appointment.is-multiple-mode .agenda-new-workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-multiple-panel {
        margin: 0 20px 16px;
    }

    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-popup-new-appointment .agenda-popup-body {
        max-height: none;
    }

    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-new-modebar {
        width: calc(100% - 40px);
        margin: 16px 20px 0;
    }

    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-new-mode-btn {
        padding: 0 8px;
        font-size: 13px;
    }

    /* Resumo de serviços: rótulos e valores numa linha só */
    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-services-total {
        flex-direction: row;
        align-items: center;
    }

    body[data-support-page="agenda"] .agenda-popup-overlay .services-total-values {
        width: auto;
    }

    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-selected-service-item {
        align-items: center;
    }
}

@media (max-width: 768px) {
    /* Folha que sobe de baixo, com cabeçalho e rodapé sempre visíveis */
    body[data-support-page="agenda"] .agenda-popup-overlay {
        align-items: flex-end;
    }

    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-popup,
    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-popup-new-appointment,
    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-popup[style*="max-width"] {
        width: 100%;
        max-width: 100% !important;
        height: auto;
        max-height: calc(100vh - 16px);
        max-height: calc(100dvh - 16px);
        margin: 0;
        border-width: 1px 0 0;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 32px rgba(16, 24, 40, 0.18);
        transform: translateY(24px);
    }

    body[data-support-page="agenda"] .agenda-popup-overlay.active .agenda-popup {
        transform: none;
    }

    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-popup-header {
        padding: 12px 56px 12px 16px;
        border-radius: 16px 16px 0 0;
    }

    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-popup-title {
        font-size: 15.5px;
    }

    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-popup-title > i {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }

    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-popup-close {
        right: 8px;
        width: 40px;
        height: 40px;
        margin-top: -20px;
        font-size: 17px;
    }

    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-popup-body {
        max-height: none;
        padding: 16px;
    }

    body[data-support-page="agenda"] #quickClientModal .agenda-popup-body,
    body[data-support-page="agenda"] #newServiceModal .agenda-popup-body {
        padding: 16px;
    }

    /* Rodapé: botões em grade de 2 colunas (o último ímpar ocupa a linha toda) */
    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-popup-footer {
        padding: 10px 16px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        border-radius: 0;
    }

    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-popup-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
        margin: 0;
    }

    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-popup-actions .agenda-btn {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding: 6px 10px;
        gap: 6px;
        border-radius: 8px;
        font-size: 13.5px;
        box-shadow: none;
    }

    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-popup-actions .agenda-btn:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    /* Cadastro rápido / novo serviço: "Cancelar" compacto, ação principal larga */
    body[data-support-page="agenda"] #quickClientModal .agenda-popup-actions,
    body[data-support-page="agenda"] #newServiceModal .agenda-popup-actions {
        grid-template-columns: auto minmax(0, 1fr);
    }

    body[data-support-page="agenda"] #quickClientModal .agenda-popup-actions .agenda-btn-secondary,
    body[data-support-page="agenda"] #newServiceModal .agenda-popup-actions .agenda-btn-secondary {
        padding: 6px 18px;
    }

    /* No novo agendamento o "Cancelar" já fica oculto no celular (o X fecha) */
    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-popup-new-appointment .agenda-popup-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Campos: 44px e fonte 16px (evita zoom automático do iPhone ao focar) */
    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-form-control,
    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-popup-new-appointment .agenda-form-control,
    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-service-dropdown-trigger,
    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-popup-new-appointment .agenda-service-dropdown-trigger,
    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-pro-select-trigger {
        min-height: 44px;
        font-size: 16px;
    }

    body[data-support-page="agenda"] .agenda-popup-overlay .service-search {
        height: 44px;
        font-size: 16px;
    }

    body[data-support-page="agenda"] .agenda-popup-overlay .selected-service-text,
    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-pro-select-placeholder,
    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-pro-select-name {
        font-size: 15px;
    }

    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-client-history {
        margin-right: -52px;
    }

    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-add-client-btn,
    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-add-service-btn {
        width: 44px;
        min-width: 44px;
        height: 44px;
    }

    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-form-row,
    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-form-row-3 {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    /* Data em linha inteira; início e fim lado a lado */
    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-new-form .agenda-form-row-3,
    body[data-support-page="agenda"] .agenda-popup-overlay #agendaEditForm .agenda-form-row-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 10px;
    }

    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-new-form .agenda-form-row-3 > :first-child,
    body[data-support-page="agenda"] .agenda-popup-overlay #agendaEditForm .agenda-form-row-3 > :first-child {
        grid-column: 1 / -1;
    }

    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-new-form .agenda-form-row-3 > .agenda-form-group.compact {
        margin-bottom: 14px;
    }

    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-form-group {
        margin-bottom: 14px;
    }

    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-new-form {
        padding: 14px 16px 16px;
    }

    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-new-modebar {
        width: calc(100% - 32px);
        margin: 14px 16px 0;
    }

    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-new-mode-btn {
        min-height: 38px;
    }

    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-multiple-panel {
        margin: 0 16px 16px;
    }

    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-new-multiple-inline-actions .agenda-btn {
        width: 100%;
        min-height: 44px;
        font-size: 14px;
    }

    /* Horário escolhido: botão de bloquear em linha própria */
    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-time-info {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 2px;
        padding: 10px 12px;
    }

    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-btn-block {
        grid-column: 1;
        grid-row: auto;
        width: 100%;
        min-height: 40px;
        margin-top: 8px;
    }

    /* Listas de seleção com alvos maiores */
    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-client-option,
    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-pro-select-option,
    body[data-support-page="agenda"] .agenda-popup-overlay .service-option {
        min-height: 52px;
    }

    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-client-dropdown {
        max-height: min(300px, 45dvh);
    }

    body[data-support-page="agenda"] .agenda-popup-overlay .services-list {
        max-height: min(300px, 45dvh);
    }

    body[data-support-page="agenda"] .agenda-popup-overlay .history-quick-select-btn,
    body[data-support-page="agenda"] .agenda-popup-overlay .remove-service-btn,
    body[data-support-page="agenda"] .agenda-popup-overlay .product-quantity-btn,
    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-multiple-remove {
        width: 36px;
        height: 36px;
    }

    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-multiple-item {
        grid-template-columns: minmax(0, 1fr) 36px;
    }

    /* Produto escolhido: nome em cima; quantidade, preço e remover embaixo */
    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-selected-product-item {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-selected-product-item .selected-service-details {
        flex: 1 1 100%;
    }

    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-selected-product-item .selected-service-price-badge {
        margin-left: auto;
    }

    /* Detalhes */
    body[data-support-page="agenda"] .agenda-popup-overlay .appointment-info-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body[data-support-page="agenda"] .agenda-popup-overlay .info-card-header {
        padding: 10px 12px 0;
    }

    body[data-support-page="agenda"] .agenda-popup-overlay .info-card-content {
        padding: 6px 12px 12px;
    }

    body[data-support-page="agenda"] .agenda-popup-overlay .info-card .client-avatar,
    body[data-support-page="agenda"] .agenda-popup-overlay .info-card .professional-avatar {
        width: 32px;
        height: 32px;
    }

    body[data-support-page="agenda"] .agenda-popup-overlay .info-card .client-info,
    body[data-support-page="agenda"] .agenda-popup-overlay .info-card .professional-info {
        gap: 8px;
    }

    body[data-support-page="agenda"] .agenda-popup-overlay .quick-actions {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }

    body[data-support-page="agenda"] .agenda-popup-overlay .quick-action-btn {
        width: 100%;
        min-height: 44px;
    }

    body[data-support-page="agenda"] .agenda-popup-overlay .agenda-professional-section {
        grid-template-columns: minmax(0, 1fr);
    }

    body[data-support-page="agenda"] #quickClientForm > div[style*="display: flex"] {
        flex-direction: column;
        gap: 0 !important;
    }
}

@media (max-width: 340px) {
    body[data-support-page="agenda"] .agenda-popup-overlay .appointment-info-cards {
        grid-template-columns: minmax(0, 1fr);
    }
}