/* ── Hotel Booking — Frontend ─────────────────────────────────── */
:root {
    --hb-primary:   #2c5f8a;
    --hb-secondary: #e8a040;
    --hb-bg:        #f9f9f9;
    --hb-border:    #dde3ea;
    --hb-text:      #2d2d2d;
    --hb-radius:    8px;
    --hb-shadow:    0 2px 12px rgba(0,0,0,.08);
}

/* ── Grid de quartos ──────────────────────────────────────────── */
.hb-quartos { display: grid; gap: 24px; }
.hb-cols-2  { grid-template-columns: repeat(2, 1fr); }
.hb-cols-3  { grid-template-columns: repeat(3, 1fr); }
.hb-cols-4  { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) {
    .hb-cols-2, .hb-cols-3, .hb-cols-4 { grid-template-columns: 1fr; }
}

.hb-quarto-card {
    background: #fff;
    border: 1px solid var(--hb-border);
    border-radius: var(--hb-radius);
    overflow: hidden;
    box-shadow: var(--hb-shadow);
    transition: transform .2s, box-shadow .2s;
}
.hb-quarto-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 24px rgba(0,0,0,.12);
}
.hb-card-img img  { width: 100%; height: 200px; object-fit: cover; display: block; }
.hb-card-body     { padding: 20px; }
.hb-card-title    { margin: 0 0 6px; font-size: 1.15em; color: var(--hb-primary); }
.hb-card-desc     { font-size: .9em; color: #666; margin: 8px 0 12px; }
.hb-badge-tipo    { display: inline-block; background: var(--hb-primary); color: #fff; font-size: .75em; padding: 2px 8px; border-radius: 20px; margin-bottom: 8px; }
.hb-card-info     { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; font-size: .9em; color: #555; }
.hb-preco         { font-weight: 700; color: var(--hb-primary); font-size: 1.05em; }

/* ── Botões ───────────────────────────────────────────────────── */
.hb-btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: var(--hb-radius);
    font-size: .95em;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s, transform .1s;
    border: none;
}
.hb-btn-reservar { background: var(--hb-secondary); color: #fff; width: 100%; text-align: center; }
.hb-btn-reservar:hover { background: #d08c2e; color: #fff; }
.hb-btn-submit   { background: var(--hb-primary); color: #fff; width: 100%; padding: 14px; font-size: 1em; }
.hb-btn-submit:hover { background: #1e4a70; }
.hb-btn-submit:active { transform: scale(.98); }

/* ── Formulário ──────────────────────────────────────────────── */
.hb-form-wrap { background: #fff; border: 1px solid var(--hb-border); border-radius: var(--hb-radius); padding: 32px; box-shadow: var(--hb-shadow); max-width: 720px; margin: 32px auto; }
.hb-form-wrap h2 { margin-top: 0; color: var(--hb-primary); font-size: 1.5em; border-bottom: 2px solid var(--hb-border); padding-bottom: 12px; margin-bottom: 24px; }
.hb-row  { display: flex; gap: 16px; margin-bottom: 16px; }
.hb-col  { flex: 1; }
.hb-col-full { flex: 1 1 100%; }
@media (max-width: 600px) { .hb-row { flex-direction: column; } }

.hb-form-wrap label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .9em; color: #444; }
.hb-form-wrap label span { color: #e53e3e; }
.hb-form-wrap input,
.hb-form-wrap select,
.hb-form-wrap textarea {
    width: 100%; box-sizing: border-box;
    border: 1px solid var(--hb-border);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: .95em;
    transition: border-color .2s, box-shadow .2s;
}
.hb-form-wrap input:focus,
.hb-form-wrap select:focus,
.hb-form-wrap textarea:focus {
    outline: none;
    border-color: var(--hb-primary);
    box-shadow: 0 0 0 3px rgba(44,95,138,.15);
}

/* ── Resumo ───────────────────────────────────────────────────── */
.hb-resumo {
    background: #eef5fb;
    border: 1px solid #c3daea;
    border-radius: 6px;
    padding: 14px 18px;
    margin-bottom: 16px;
    font-size: .95em;
    color: #2c5f8a;
}

/* ── Mensagem de retorno ─────────────────────────────────────── */
.hb-mensagem { padding: 14px 18px; border-radius: 6px; margin-bottom: 16px; font-size: .95em; }
.hb-mensagem.hb-ok    { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.hb-mensagem.hb-erro  { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

/* ── Calendário público ─────────────────────────────────────── */
.hb-cal-pub    { max-width: 480px; margin: 0 auto; }
.hb-cal-nav    { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 1em; }
.hb-cal-nav a  { text-decoration: none; color: var(--hb-primary); font-weight: 700; padding: 4px 10px; border: 1px solid var(--hb-border); border-radius: 4px; }
.hb-cal-nav a:hover { background: var(--hb-primary); color: #fff; }

.hb-calendario { width: 100%; border-collapse: collapse; }
.hb-calendario th { background: var(--hb-primary); color: #fff; padding: 8px 4px; text-align: center; font-size: .85em; }
.hb-calendario td { padding: 6px; text-align: center; border: 1px solid #eee; font-size: .9em; }
.hb-dia span      { display: inline-block; width: 30px; height: 30px; line-height: 30px; border-radius: 50%; }
.hb-livre span    { background: #d4edda; color: #155724; }
.hb-ocupado span  { background: #f8d7da; color: #721c24; }
.hb-hoje span     { font-weight: 700; outline: 2px solid var(--hb-secondary); outline-offset: 1px; }
.hb-vazio         { background: #fafafa; }

.hb-legenda       { font-size: .82em; color: #666; margin-top: 8px; }
.hb-leg-livre     { color: #28a745; }
.hb-leg-ocupado   { color: #dc3545; }

/* ── Info de capacidade ──────────────────────────────────────── */
.hb-info-quarto {
    background: #eef5fb;
    border-left: 4px solid var(--hb-primary);
    border-radius: 0 6px 6px 0;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: .92em;
    color: #2c5f8a;
}

/* ── Seção título ────────────────────────────────────────────── */
.hb-secao-titulo {
    font-weight: 700;
    font-size: 1em;
    color: var(--hb-primary);
    border-bottom: 2px solid var(--hb-border);
    padding-bottom: 8px;
    margin: 24px 0 16px;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: .85em;
}
.hb-secao-hospedes {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.hb-secao-hospedes small {
    color: #888;
    font-weight: 400;
    font-size: .8em;
    text-transform: none;
    letter-spacing: 0;
}

/* ── Contador de hóspedes ────────────────────────────────────── */
.hb-counter {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--hb-border);
    border-radius: 6px;
    overflow: hidden;
}
.hb-counter button {
    background: #f0f4f8;
    border: none;
    width: 32px;
    height: 32px;
    font-size: 1.2em;
    cursor: pointer;
    line-height: 1;
    transition: background .15s;
    color: var(--hb-primary);
    font-weight: 700;
}
.hb-counter button:hover { background: var(--hb-primary); color: #fff; }
.hb-counter #hb-qtd {
    min-width: 36px;
    text-align: center;
    font-weight: 700;
    font-size: .95em;
    color: var(--hb-text);
}

/* ── Item de hóspede ─────────────────────────────────────────── */
.hb-hospede-item {
    background: #f8fafc;
    border: 1px solid var(--hb-border);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    animation: hbFadeIn .25s ease;
}
@keyframes hbFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hb-hospede-num {
    font-weight: 700;
    font-size: .88em;
    color: var(--hb-primary);
    margin-bottom: 10px;
}
.hb-col-idade { max-width: 110px; flex: 0 0 110px; }

/* ── Shake no botão + ────────────────────────────────────────── */
@keyframes hbShake {
    0%,100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
}
.hb-shake { animation: hbShake .3s ease; }

/* ── Tabela de resumo de valores ─────────────────────────────── */
.hb-resumo-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: .92em;
}
.hb-resumo-tabela td {
    padding: 5px 0;
    color: var(--hb-primary);
}
.hb-resumo-tabela td:last-child {
    text-align: right;
    font-weight: 600;
    white-space: nowrap;
}
.hb-resumo-tabela tr + tr td {
    border-top: 1px solid #c3daea;
}
.hb-resumo-total td {
    font-size: 1.05em;
    padding-top: 8px !important;
    border-top: 2px solid var(--hb-primary) !important;
}

/* Cupom */
.hb-cupom-row { display:flex; gap:8px; }
.hb-cupom-row input { flex:1; }
.hb-btn-cupom { padding:10px 16px; background:#1a2e44; color:#fff; border:none; border-radius:6px; font-weight:600; font-size:.8rem; cursor:pointer; white-space:nowrap; }
.hb-btn-cupom:hover { background:#2c5f8a; }

/* Avaliações frontend */
.hb-avaliacoes { margin:20px 0; }
.hb-aval-media { font-size:1.3rem; font-weight:700; color:#374151; margin-bottom:14px; }
.hb-aval-media span { font-size:.85rem; color:#9ca3af; font-weight:400; }
.hb-aval-item { background:#f9fafb; border:1px solid #e5e7eb; border-radius:8px; padding:14px 16px; margin-bottom:10px; }
.hb-aval-topo { display:flex; align-items:center; gap:10px; margin-bottom:6px; flex-wrap:wrap; }
.hb-aval-topo strong { color:#111827; }
.hb-aval-stars { font-size:.9rem; letter-spacing:1px; }
.hb-aval-topo small { color:#9ca3af; font-size:.72rem; margin-left:auto; }
.hb-aval-txt { font-size:.85rem; color:#4b5563; line-height:1.5; }