.leroof-reservas-floating-button {
    position: fixed;
    right: 20px;
    bottom: 20px;
    background: var(--leroof-primary, #000);
    color: var(--leroof-primary-text, #fff);
    /* ~30% maior */
    padding: 16px 26px;
    border-radius: 999px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    z-index: 9999;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    /* Evita flash do botão ao carregar (o JS controla exibir/ocultar). */
    display: none;
}

/* Caixa principal do box de reservas */

.leroof-reservas-box {
    position: fixed;
    right: 20px;
    bottom: 80px;
    width: 360px;
    max-height: 80vh;
    background: var(--leroof-box-bg, #ffffff);
    color: var(--leroof-box-text, #111111);
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.3);
    z-index: 9999;
    overflow-y: auto;
    overflow-x: hidden;
    /* Por padrão o box fica visível ao carregar a página (pode ser minimizado). */
    display: block;
}

/* Mensagem de sucesso bem visível (banner) */
.leroof-banner {
    position: sticky;
    top: 0;
    z-index: 2;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.35;
    border: 1px solid #ddd;
    background: #f7f7f7;
}

.leroof-banner-success {
    border-color: #0a7c2f;
    background: #eaffea;
}

.leroof-banner-error {
    border-color: #b00020;
    background: #ffecec;
}

.leroof-banner-close {
    float: right;
    border: none;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: #333;
}

@media (max-width: 600px) {
    .leroof-reservas-box {
        right: 10px;
        left: 10px;
        width: auto;
    }
}

/* Estrutura interna: header fixo + conteúdo rolável */
.leroof-reservas-box-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.leroof-reservas-box-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--leroof-border, #eee);
    background: var(--leroof-header-bg, #fafafa);
}

.leroof-reservas-tabs {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 8px;
}

.leroof-reservas-tabs li {
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

/* Cores visíveis mesmo quando a aba não está ativa */
.leroof-reservas-tabs li[data-tab="pergunte"] {
    color: #CB8D63;
    border-color: rgba(203, 141, 99, .45);
}

.leroof-reservas-tabs li[data-tab="contato"] {
    color: #40471F;
    border-color: rgba(64, 71, 31, .45);
}

.leroof-reservas-tabs li[data-tab="pergunte"]:hover {
    background: rgba(203, 141, 99, .10);
    border-color: rgba(203, 141, 99, .70);
}

.leroof-reservas-tabs li[data-tab="contato"]:hover {
    background: rgba(64, 71, 31, .10);
    border-color: rgba(64, 71, 31, .70);
}

.leroof-reservas-tabs li.active {
    background: var(--leroof-primary, #000);
    color: var(--leroof-primary-text, #fff);
    border-color: var(--leroof-primary, #000);
}

/* Cores específicas por aba (quando ativa) */
.leroof-reservas-tabs li.active[data-tab="pergunte"] {
    background: #CB8D63;
    border-color: #CB8D63;
    color: #fff;
}

.leroof-reservas-tabs li.active[data-tab="contato"] {
    background: #40471F;
    border-color: #40471F;
    color: #fff;
}

.leroof-reservas-close {
    /* Força estilo próprio (evita sobrescrita do tema) */
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;

    width: 38px;
    height: 38px;
    padding: 0 !important;
    margin: 0;
    border-radius: 10px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    color: #000 !important;
}

/* Aqui rola o conteúdo (formulário, convidados etc.) */
.leroof-reservas-box-body {
    padding: 12px 14px 14px;
}

.leroof-tab-panel {
    display: none;
}

.leroof-tab-panel.active {
    display: block;
}



/* Padronização de fonte/tamanho nas abas Sessenta Minutos IA e Via WhatsApp */
#leroof-tab-pergunte,
#leroof-tab-pergunte *,
#leroof-tab-contato,
#leroof-tab-contato * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

#leroof-tab-pergunte .leroof-greeting,
#leroof-tab-contato .leroof-greeting {
    font-size: 13px;
    line-height: 1.4;
}

.leroof-greeting {
    font-size: 13px;
    margin-bottom: 10px;
}

#leroof-reservation-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.leroof-field label {
    display: block;
    font-size: 12px;
    margin-bottom: 2px;
    font-weight: 500;
}

.leroof-field input,
.leroof-field select,
.leroof-field textarea {
    width: 100%;
    padding: 7px 8px;
    border-radius: 6px;
    border: 1px solid #ddd;
    font-size: 13px;
}

.leroof-field textarea {
    resize: vertical;
}

.leroof-date-message {
    font-size: 11px;
    color: #c00;
}

/* ===== Formulário em página (sem box flutuante) ===== */

.leroof-reservas-page {
    /* 100% da largura do conteúdo da página (sem caixa estreita) */
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    margin: 24px 0;
    padding: 20px 18px;
    border-radius: 16px;
    background: var(--leroof-box-bg, #ffffff);
    color: var(--leroof-box-text, #111111);
    border: 1px solid var(--leroof-border, #eeeeee);
    box-shadow: 0 10px 24px rgba(0,0,0,0.10);
}

.leroof-reservas-page #leroof-reservation-form {
    width: 100% !important;
    max-width: none !important;
}

/* Mensagem de sucesso bem destacada na página */
.leroof-reservas-page .leroof-message.leroof-success {
    margin-top: 10px;
    padding: 14px 14px;
    border-radius: 14px;
    border: 1px solid rgba(10,124,47,0.25);
    background: rgba(10,124,47,0.08);
    color: #0a7c2f;
}

.leroof-reservas-page .leroof-message.leroof-error {
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(176,0,32,0.25);
    background: rgba(176,0,32,0.08);
    color: #b00020;
}

.leroof-reservas-page .leroof-message-title {
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
}

.leroof-reservas-page .leroof-message-body {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
}

.leroof-reservas-page-title {
    margin: 0 0 6px;
    font-size: 22px;
    line-height: 1.2;
}

.leroof-reservas-page-subtitle {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.4;
    opacity: 0.85;
}

.leroof-reservas-page .leroof-banner {
    position: relative;
    top: auto;
}

@media (max-width: 600px) {
    .leroof-reservas-page {
        margin: 18px 10px;
        padding: 16px 14px;
    }
}

.leroof-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}

/* Botão Enviar Reserva – sempre preto com letra branca */
button.leroof-submit,
.leroof-reservas-box .leroof-submit,
#leroof-reservation-form .leroof-submit {
    background: var(--leroof-primary, #000) !important;
    color: var(--leroof-primary-text, #fff) !important;
    border: none !important;
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 14px;
    cursor: pointer;
}

.leroof-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.leroof-message {
    font-size: 12px;
}

.leroof-message.leroof-success {
    color: #0a7c2f;
}

.leroof-message.leroof-error {
    color: #b00020;
}

/* Mensagem de retorno (sucesso/erro) bem destacada quando o formulário está em uma página */
.leroof-reservas-page .leroof-message {
    display: block;
    padding: 14px 16px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    white-space: pre-line;
    border: 1px solid #ddd;
    background: #f7f7f7;
}

.leroof-reservas-page .leroof-message.leroof-success {
    border-color: #0a7c2f;
    background: #eaffea;
    color: #0a7c2f;
}

.leroof-reservas-page .leroof-message.leroof-error {
    border-color: #b00020;
    background: #ffecec;
    color: #b00020;
}

.leroof-guest-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 6px;
    padding: 6px;
    background: #f7f7f7;
    border-radius: 6px;
}

.leroof-guest-row input {
    font-size: 12px;
    padding: 5px 6px;
}

.leroof-whatsapp-link {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--leroof-primary, #000);
    text-decoration: none;
    font-size: 13px;
    color: var(--leroof-primary, #000);
}


/* Pergunte (KB + IA) */
#leroof-tab-pergunte .leroof-ask-suggestions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:10px 0 12px;
}
#leroof-tab-pergunte .leroof-suggested-question{
    border:1px solid #ddd;
    background:#fff;
    padding:8px 10px;
    border-radius:10px;
    font-size:13px;
    cursor:pointer;
}
#leroof-tab-pergunte .leroof-ask-form{
    display:flex;
    gap:8px;
    align-items:center;
    margin-top:6px;
}
#leroof-tab-pergunte #leroof_question{
    flex:1;
    padding:10px 12px;
    border:1px solid #ddd;
    border-radius:10px;
    font-size:14px;
}
#leroof-tab-pergunte #leroof_ask_submit{
    padding:10px 12px;
    border-radius:10px;
    border:0;
    background:var(--leroof-primary, #000);
    color:var(--leroof-primary-text, #fff);
    cursor:pointer;
    font-weight:600;
}

#leroof-tab-pergunte #leroof_ask_mic{
	width:40px;
	height:40px;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0;
	border-radius:10px;
	border:1px solid #ddd;
	background:#fff;
	cursor:pointer;
	font-size:16px;
	line-height:1;
}

#leroof-tab-pergunte #leroof_ask_mic.is-listening{
	border-color: var(--leroof-primary, #000);
	box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
}
#leroof-tab-pergunte .leroof-ask-loading{
    margin-top:10px;
    font-size:13px;
    color:#666;
}
#leroof-tab-pergunte .leroof-ask-answer{
    margin-top:10px;
    padding:12px;
    border-radius:12px;
    border:1px solid #ddd;
    background:#fafafa;
    font-size:14px;
    line-height:1.4;
}
#leroof-tab-pergunte .leroof-ask-badge{
    display:inline-block;
    font-size:11px;
    font-weight:700;
    padding:2px 8px;
    border-radius:999px;
    border:1px solid #ddd;
    background:#fff;
    margin-bottom:8px;
}
#leroof-tab-pergunte .leroof-ask-error{
    color:#a00;
    font-weight:600;
}

.leroof-reservas-close:hover,
.leroof-reservas-close:focus {
    color: #000 !important;
    background: rgba(0,0,0,0.06) !important;
    background-color: rgba(0,0,0,0.06) !important;
    box-shadow: none !important;
    opacity: 1 !important;
}


/* Maior especificidade para derrotar CSS do tema */
.leroof-reservas-box-header button.leroof-reservas-close{
    background: transparent !important;
    background-color: transparent !important;
    color: #000 !important;
}