/* ============================================================
   HELLO CHILD THEME — main.css
   Carregado em todas as páginas do Child Theme.
   Tokens disponíveis via style.css (:root).
   ============================================================ */


/* === RESET GLOBAL ========================================== */
/* Complementa o reset de style.css com elementos adicionais  */


/* === TIPOGRAFIA BASE ======================================= */
/* Inter carregada via functions.php. Estilos base de h1-h6,  */
/* parágrafos e links globais.                                 */


/* === HEADER =============================================== */
/* Estilos do template-parts/header.php                        */
/* sticky, altura var(--header-height), fundo primary, nav,   */
/* hamburger, drawer mobile, sombra .scrolled                  */

.ref-header {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    height: var(--header-height, 64px);
    background-color: var(--color-white, #FFFFFF);
    border-bottom: 1px solid var(--color-border, #E0E4EA);
    transition: box-shadow var(--transition-fast, 150ms ease);
}

.ref-header.scrolled {
    box-shadow: var(--shadow-card, 0 2px 8px rgba(0, 0, 0, 0.08));
}

.ref-header-container {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    padding: 0 var(--space-4, 16px);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (min-width: 640px) {
    .ref-header-container {
        padding: 0 var(--space-6, 24px);
    }
}

/* Media query 1280px+ REMOVIDA — gabarito define máx. 24px padding em 640px+ */

.ref-header-logo {
    flex-shrink: 0;
}

.ref-header-logo img {
    height: 32px;
    width: auto;
    display: block;
}

.ref-header-nav-desktop {
    display: none;
    align-items: center;
    gap: var(--space-4, 16px);
}

@media (min-width: 1280px) {
    .ref-header-nav-desktop {
        display: flex;
    }
}

.ref-header-nav-desktop a {
    color: var(--color-primary, #231F5C);
    font-size: var(--font-size-base, 15px);
    font-weight: 500;
    text-decoration: none;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    border-radius: var(--radius-full, 9999px);
    transition: color var(--transition-fast, 150ms ease), background-color var(--transition-fast, 150ms ease);
}

.ref-header-nav-desktop a:hover {
    color: var(--color-teal, #008797);
    background-color: var(--color-bg-light, #F5F7FA);
}

.ref-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
}

@media (min-width: 1280px) {
    .ref-header-actions {
        display: none;
    }
}

/* Correção Bug 3 — A003 reincidente: wrapper .ref-header sobe especificidade de (0,1,0) para (0,2,0) */
.ref-header .ref-header-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--color-primary, #231F5C);
    cursor: pointer;
    border-radius: var(--radius-sm, 6px);
    transition: background-color var(--transition-fast, 150ms ease);
}

.ref-header .ref-header-hamburger:hover {
    background-color: var(--color-bg-light, #F5F7FA);
}

@media (min-width: 1280px) {
    .ref-header .ref-header-hamburger {
        display: none;
    }
}

/* Base Button Styles as we need them for popup & header */
.ref-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2, 8px) var(--space-4, 16px);
    font-size: var(--font-size-sm, 13px);
    font-weight: 600;
    border-radius: var(--radius-full, 9999px);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--transition-fast, 150ms ease), color var(--transition-fast, 150ms ease);
}

.ref-header .ref-btn-primary,
.ref-mobile-drawer .ref-btn-primary {
    background-color: var(--color-teal, #008797);
    color: var(--color-white, #FFFFFF);
    border: none;
}

.ref-header .ref-btn-primary:hover,
.ref-mobile-drawer .ref-btn-primary:hover {
    background-color: var(--color-teal-light, #0099B0);
}

.ref-btn-block {
    width: 100%;
}

/* Mobile Drawer */
.ref-mobile-drawer {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    justify-content: flex-end;
    visibility: hidden;
    opacity: 0;
    transition: visibility 250ms ease, opacity 250ms ease;
}

.drawer-open .ref-mobile-drawer {
    visibility: visible;
    opacity: 1;
}

.ref-mobile-drawer-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

.ref-mobile-drawer-content {
    position: relative;
    width: 100%;
    max-width: 320px;
    background-color: var(--color-white, #FFFFFF);
    height: 100%;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 250ms ease;
    box-shadow: var(--shadow-elevated, 0 4px 20px rgba(0, 0, 0, 0.12));
}

.drawer-open .ref-mobile-drawer-content {
    transform: translateX(0);
}

.ref-mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4, 16px);
    border-bottom: 1px solid var(--color-border, #E0E4EA);
}

.ref-drawer-logo {
    height: 24px;
    width: auto;
}

.ref-drawer-close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--color-primary, #231F5C);
    cursor: pointer;
    border-radius: var(--radius-full, 9999px);
}

.ref-mobile-drawer-nav {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4, 16px);
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 4px);
}

.ref-mobile-drawer-nav a {
    color: var(--color-primary, #231F5C);
    text-decoration: none;
    font-size: var(--font-size-md, 17px);
    font-weight: 500;
    padding: var(--space-3, 12px);
    border-radius: var(--radius-md, 10px);
    transition: background-color var(--transition-fast, 150ms ease);
}

.ref-mobile-drawer-nav a:hover {
    background-color: var(--color-bg-light, #F5F7FA);
    color: var(--color-teal, #008797);
}

.ref-mobile-drawer-footer {
    padding: var(--space-4, 16px);
    border-top: 1px solid var(--color-border, #E0E4EA);
}

@media (min-width: 1280px) {
    .drawer-open .ref-mobile-drawer {
        display: none;
    }
}

/* === FOOTER =============================================== */
/* Estilos do template-parts/footer.php                        */
/* 4 colunas desktop, coluna única mobile                      */
.ref-footer {
    background-color: var(--color-bg-light, #F5F7FA);
    border-top: 1px solid var(--color-border, #E0E4EA);
    margin-top: auto;
}

.ref-footer-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: var(--space-12, 48px) var(--space-6, 24px);
    display: flex;
    flex-direction: column;
    gap: var(--space-12, 48px);
}

@media (max-width: 767px) {
    .ref-footer-container {
        padding: var(--space-8, 32px) var(--space-5, 20px);
    }
}

.ref-footer-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4, 16px);
    max-width: 42rem;
    margin: 0 auto;
}

.ref-footer-logo img {
    height: 32px;
    width: auto;
}

.ref-footer-tagline {
    color: var(--color-text-muted, #666680);
    font-size: var(--font-size-sm, 13px);
    line-height: 1.6;
    margin: 0;
}

.ref-footer-social {
    display: flex;
    gap: var(--space-4, 16px);
    justify-content: center;
}

.ref-footer-social a {
    color: var(--color-teal, #008797);
    transition: opacity var(--transition-fast, 150ms ease);
}

.ref-footer-social a:hover {
    opacity: 0.7;
}

.ref-footer-social svg {
    width: 24px;
    height: 24px;
}

.ref-footer-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8, 32px);
    border-top: 1px solid var(--color-border, #E0E4EA);
    padding-top: var(--space-10, 40px);
}

@media (min-width: 768px) {
    .ref-footer-columns {
        grid-template-columns: repeat(3, 1fr);
    }
}

.ref-footer-col {
    text-align: center;
}

@media (min-width: 768px) {
    .ref-footer-col {
        text-align: left;
    }
}

.ref-footer-title {
    color: var(--color-text-muted, #666680);
    font-weight: 700;
    font-size: var(--font-size-xs, 11px);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 var(--space-4, 16px) 0;
}

.ref-footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
}

.ref-footer-col a,
.ref-footer-link-btn {
    color: var(--color-primary, #231F5C);
    text-decoration: none;
    font-size: var(--font-size-sm, 13px);
    transition: color var(--transition-fast, 150ms ease);
}

.ref-footer .ref-footer-link-btn {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    cursor: pointer;
    text-decoration: none;
}

.ref-footer .ref-footer-link-btn:hover {
    color: var(--color-teal, #008797);
}

.ref-footer-col a:hover {
    color: var(--color-teal, #008797);
}

.ref-footer-contact li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 8px);
    color: var(--color-primary, #231F5C);
    font-size: var(--font-size-sm, 13px);
}

@media (min-width: 768px) {
    .ref-footer-contact li {
        justify-content: flex-start;
    }
}

.ref-footer-contact li:last-child {
    align-items: flex-start;
}

.ref-footer-contact .ref-icon {
    width: 20px;
    height: 20px;
    color: var(--color-teal, #008797);
    flex-shrink: 0;
}

.ref-footer-contact li:last-child .ref-icon {
    margin-top: 2px;
}

.ref-footer .ref-footer-whatsapp-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: var(--space-3, 12px) var(--space-6, 24px);
    width: auto;
    align-self: flex-start;
    background-color: var(--color-teal, #008797);
    color: var(--color-white, #FFFFFF);
    border-radius: var(--radius-full, 9999px);
    font-weight: 600;
    text-decoration: none;
    /* Mantive as 3 regras abaixo da versão anterior pois são críticas para o layout e animação */
    margin-top: var(--space-6, 24px);
    font-size: var(--font-size-sm, 13px);
    transition: background-color var(--transition-fast, 150ms ease);
}

.ref-footer .ref-footer-whatsapp-btn:hover {
    background-color: var(--color-teal-light, #0099B0);
}

.ref-footer .ref-footer-whatsapp-btn,
.ref-footer .ref-footer-whatsapp-btn svg,
.ref-footer .ref-footer-whatsapp-btn:hover,
.ref-footer .ref-footer-whatsapp-btn:hover svg {
    color: var(--color-white, #FFFFFF);
    fill: var(--color-white, #FFFFFF);
}

.ref-footer-whatsapp-btn svg {
    width: 16px;
    height: 16px;
}

.ref-footer-legal {
    border-top: 1px solid var(--color-border, #E0E4EA);
    background-color: var(--color-bg-light, #F5F7FA);
}

.ref-footer-legal-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: var(--space-6, 24px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4, 16px);
}

@media (min-width: 768px) {
    .ref-footer-legal-container {
        flex-direction: row;
    }
}

.ref-footer-legal p {
    color: var(--color-text-muted, #666680);
    font-size: var(--font-size-xs, 11px);
    margin: 0;
}

/* === FOOTER ARCHIVE (Reduzido) === */
.ref-footer-archive {
    background-color: var(--color-bg-light, #F5F7FA);
    border-top: 1px solid var(--color-border, #E0E4EA);
    padding: var(--space-6, 24px);
    width: 100%;
}

.ref-footer-archive-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 16px);
    align-items: center;
    text-align: center;
}

.ref-footer-archive-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-4, 16px) var(--space-6, 24px);
}

.ref-footer-archive-links a {
    color: var(--color-primary, #231F5C);
    text-decoration: none;
    font-size: var(--font-size-sm, 13px);
    font-weight: 500;
    transition: color var(--transition-fast, 150ms ease);
}

.ref-footer-archive-btn {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    color: var(--color-primary, #231F5C);
    font-size: var(--font-size-sm, 13px);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    transition: color var(--transition-fast, 150ms ease);
}

/* A003: Hello Elementor sobrescreve [type=button] — especificidade forçada */
.ref-footer-archive .ref-footer-archive-btn[type="button"] {
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-width: unset !important;
  border-radius: 0 !important;
  color: var(--color-primary, #231F5C) !important;
  font-size: var(--font-size-sm, 13px) !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  cursor: pointer !important;
}

.ref-footer-archive-links a:hover,
.ref-footer-archive-btn:hover {
    color: var(--color-teal, #008797);
}

.ref-footer-archive-copyright p {
    color: var(--color-text-muted, #666680);
    font-size: var(--font-size-xs, 11px);
    margin: 0;
}


/* === POPUPS (CONTATO E AGENDAMENTO) ======================= */
/* Overlay fixed + drawer lateral. Classes .is-active gerenciadas */
/* pelo main.js. Foco trap e aria implementados.               */

/* Correção Bug 1 — Estratégia robusta contra:
   - display:none ignorado por JFB ou Elementor mobile
   - position:fixed quebrado por transform ancestral do Elementor
   z-index:-1 garante que o popup fique atrás de tudo quando fechado */
.ref-popup-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: -1;
    display: flex;
    justify-content: flex-end;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-normal, 300ms) ease,
        visibility var(--transition-normal, 300ms) ease;
}

.ref-popup-overlay.is-active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    z-index: 9999;
}

.ref-popup-drawer {
    width: 100%;
    max-width: 480px;
    height: 100vh;
    background-color: var(--color-white, #FFFFFF);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--transition-normal, 300ms) ease;
}

.ref-popup-overlay.is-active .ref-popup-drawer {
    transform: translateX(0);
}

.ref-popup-header {
    height: 64px;
    background-color: var(--color-primary, #231F5C);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-6, 24px);
    flex-shrink: 0;
}

.ref-popup-title {
    color: var(--color-white, #FFFFFF);
    font-size: var(--font-size-lg, 18px);
    font-weight: 600;
    margin: 0;
}

.ref-popup-close {
    background: none;
    border: none;
    color: var(--color-white, #FFFFFF);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transition-fast, 150ms ease);
}

.ref-popup-close:hover {
    opacity: 0.8;
}

.ref-popup-close .ref-icon {
    width: 24px;
    height: 24px;
}

.ref-popup-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: var(--space-6, 24px);
}

.ref-popup-body::-webkit-scrollbar {
    width: 6px;
}

.ref-popup-body::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.ref-popup-body::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.ref-popup-footer {
    min-height: 96px;
    padding: var(--space-6, 24px);
    border-top: 1px solid var(--color-border, #E0E4EA);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.ref-popup-whatsapp-link {
    display: flex;
    align-items: center;
    color: var(--color-teal, #008797);
    font-weight: 600;
    text-decoration: none;
    font-size: var(--font-size-sm, 13px);
    transition: color var(--transition-fast, 150ms ease);
}

.ref-popup-whatsapp-link:hover {
    color: var(--color-teal-light, #0099B0);
}

.ref-popup-whatsapp-link svg {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}


/* Correção Bug 4A — A003 nos botões internos do JFB:
   Neutraliza border:#c36 e color:#c36 do reset.css Hello Elementor
   dentro do body dos popups. Especificidade (0,2,0) vence (0,1,0) do reset. */
.ref-popup-body button,
.ref-popup-body [type=submit],
.ref-popup-body [type=button] {
    border-color: transparent;
    color: inherit;
}


/* === CORREÇÕES FASE 2 ===================================== */

.ref-header .ref-drawer-close {
    color: var(--color-primary, #231F5C);
    border: none;
    background: transparent;
}

.ref-mobile-drawer-header .ref-drawer-logo {
    height: 28px;
    width: auto;
}

.ref-header .ref-header-hamburger {
    width: 40px;
    height: 40px;
    padding: 0;
    flex-shrink: 0;
    background-color: #FFFFFF;
    color: var(--color-primary, #231F5C);
}

.ref-header .ref-header-hamburger:hover {
    background-color: var(--ref-tipo-color, #008797);
    color: var(--ref-white, #FFFFFF);
}

.ref-popup-body .jet-form-builder__fields-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2, 8px) var(--space-4, 16px);
}

.ref-popup-body .jet-form-builder__fields-group .jet-form-builder__field-wrap {
    flex: 0 0 auto;
}

.ref-popup-body .jet-form-builder__submit,
.ref-popup-body .jet-form-builder__next-page,
.ref-popup-body .jet-form-builder__prev-page,
.ref-popup-body .jet-form-builder__action-button {
    background-color: var(--color-teal, #008797);
    color: var(--color-white, #FFFFFF);
    border: none;
    border-radius: var(--radius-full, 9999px);
    padding: var(--space-2, 8px) var(--space-6, 24px);
    font-size: var(--font-size-sm, 13px);
    font-weight: 600;
    font-family: var(--font-family-base);
    cursor: pointer;
    transition: background-color var(--transition-fast, 150ms ease);
    display: inline-flex;
    align-items: center;
}

.ref-popup-body .jet-form-builder__submit:hover,
.ref-popup-body .jet-form-builder__next-page:hover,
.ref-popup-body .jet-form-builder__action-button:hover {
    background-color: var(--color-teal-light, #0099B0);
}

.ref-popup-body .jet-form-builder__prev-page {
    background-color: transparent;
    color: var(--color-primary, #231F5C);
    border: 1px solid var(--color-border, #E0E4EA);
}

.ref-popup-body .jet-form-builder__prev-page:hover {
    background-color: var(--color-bg-light, #F5F7FA);
}

/* === CONFIRMAÇÕES ========================================= */
/* Páginas /obrigado-pelo-contato/ e /obrigado-pelo-agendamento/ */

.ref-confirm-wrapper {
    padding: 48px 24px;
}

.ref-confirm-container {
    max-width: 640px;
    margin: 0 auto;
    background: var(--color-white, #FFFFFF);
    border-radius: var(--radius-lg, 16px);
    border: 1px solid var(--color-border, #E0E4EA);
    padding: 48px 40px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.ref-confirm-icon {
    width: 64px;
    height: 64px;
    background: rgba(0, 135, 151, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.ref-confirm-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--color-primary, #231F5C);
    line-height: 1.2;
    margin-bottom: 8px;
}

.ref-confirm-subtitle {
    font-size: 16px;
    color: var(--color-text-muted, #666680);
    margin-bottom: 32px;
}

.ref-confirm-card {
    background: var(--color-bg-light, #F5F7FA);
    border: 1px solid var(--color-border, #E0E4EA);
    border-radius: var(--radius-lg, 16px);
    padding: 32px;
    text-align: left;
    margin-bottom: 32px;
}

.ref-confirm-section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-teal, #008797);
    margin-bottom: 16px;
    font-weight: 700;
}

.ref-confirm-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ref-confirm-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.ref-confirm-icon-box {
    width: 44px;
    height: 44px;
    background: var(--color-white, #FFFFFF);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.ref-confirm-content {
    display: flex;
    flex-direction: column;
    padding-top: 2px;
}

.ref-confirm-label {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--color-text-muted, #666680);
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.ref-confirm-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-primary, #231F5C);
}

.ref-confirm-value a {
    color: var(--color-primary, #231F5C);
    text-decoration: none;
}

.ref-confirm-value a:hover {
    text-decoration: underline;
}

.ref-confirm-secondary {
    font-weight: 400;
    color: var(--color-text-muted, #666680);
    font-size: 14px;
}

.ref-confirm-link-action {
    color: var(--color-teal, #008797);
    font-size: 13px;
    text-decoration: none;
    font-weight: 600;
    margin-top: 4px;
    display: inline-block;
}

.ref-confirm-link-action:hover { text-decoration: underline; }

.ref-confirm-links-nav {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.ref-confirm-divider {
    border: 0;
    border-top: 1px solid var(--color-border, #E0E4EA);
    margin: 24px 0;
}

.ref-confirm-card-msg {
    font-size: 13px;
    color: var(--color-text-muted, #666680);
    text-align: center;
    font-style: italic;
}

.ref-confirm-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.ref-confirm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 8px;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s;
    cursor: pointer;
    border: none;
}

.ref-confirm-btn--primary {
    background: var(--color-teal, #008797);
    color: var(--color-white, #FFFFFF);
}

.ref-confirm-btn--primary:hover { background: #006e7a; }

.ref-confirm-btn--back {
    background: var(--color-primary, #231F5C);
    color: var(--color-white, #FFFFFF);
}

.ref-confirm-btn--back:hover { background: #1a1748; }

.ref-confirm-btn--outline {
    background: var(--color-white, #FFFFFF);
    border: 1px solid var(--color-border, #E0E4EA);
    color: var(--color-text, #1A1A2E);
}

.ref-confirm-btn--outline:hover { background: var(--color-bg-light, #F5F7FA); }

.ref-confirm-btn--whatsapp {
    background: #25D366;
    color: var(--color-white, #FFFFFF);
}

.ref-confirm-btn--whatsapp:hover { background: #1ebe5d; }

@media (max-width: 600px) {
    .ref-confirm-container {
        padding: 32px 20px;
    }
    .ref-confirm-title {
        font-size: 24px;
    }
}

/* === UTILITÁRIOS ========================================== */
/* Classes auxiliares reutilizáveis em todo o projeto.         */