﻿/* Live Commerce (área pública). Duas colunas: escolha dos serviços e dados do cliente à esquerda,
   resumo fixo (itens, total, pagar) à direita; no celular o resumo vem depois e o total fica numa
   barra fixa no rodapé. A cor do link vem em --lc-cor (com texto em --lc-cor-texto). */
:root { --lc-cor: #223E7D; --lc-cor-texto: #fff; }
body.clean-body { background: #f4f5f7; }
.lc-wrap { max-width: 1200px; padding-left: 16px; padding-right: 16px; }

/* cabeçalho */
.lc-header { background: var(--lc-cor); color: var(--lc-cor-texto); }
.lc-header-inner { max-width: 1200px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 14px; }
.lc-header-logo { max-height: 56px; max-width: 180px; width: auto; border-radius: 8px; background: #fff; padding: 2px; }
.lc-header-titulo { font-weight: 700; font-size: 1.1rem; margin: 0; line-height: 1.25; min-width: 0; color: var(--lc-cor-texto); }
.lc-header-sub { font-size: .8rem; opacity: .85; color: var(--lc-cor-texto); }
.lc-idiomas { margin-left: auto; display: flex; gap: 6px; flex: 0 0 auto; }
.lc-idiomas a { cursor: pointer; line-height: 0; }
.lc-idiomas img { width: 26px; height: 18px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.lc-banner img { width: 100%; display: block; }

/* cards */
.lc-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; box-shadow: 0 1px 4px rgba(0,0,0,.05); margin-bottom: 1rem; }
.lc-card > .lc-card-head { display: flex; align-items: center; gap: .6rem; padding: .9rem 1.2rem; border-bottom: 1px solid #eef0f3; }
.lc-card > .lc-card-body { padding: 1.1rem 1.2rem; }
.lc-card-head h5 { margin: 0; font-size: 1.02rem; font-weight: 700; color: #1f2937; }
.lc-num { width: 28px; height: 28px; border-radius: 50%; background: var(--lc-cor); color: var(--lc-cor-texto); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; flex: 0 0 auto; }
.lc-mini { font-size: .82rem; color: #6b7280; }
.lc-wrap .form-label { font-size: .82rem; font-weight: 600; color: #4b5563; margin-bottom: .2rem; }
.help-block { color: #dc3545; font-size: .8rem; margin-top: .2rem; display: block; }
.has-error .form-control, .has-error .form-select { border-color: #dc3545; }

/* item escolhido */
.lc-item { border: 1px solid #eef0f3; border-radius: 12px; padding: .9rem; }
.lc-item + .lc-item { margin-top: .9rem; }
.lc-item-topo { display: flex; gap: .9rem; align-items: flex-start; }
.lc-item-img { width: 120px; height: 90px; object-fit: cover; border-radius: 10px; flex: 0 0 auto; background: #f3f4f6; }
.lc-item-info { flex: 1 1 auto; min-width: 0; }
.lc-item-info h6 { font-weight: 700; margin: 0 0 .25rem; font-size: 1rem; color: #111827; }
.lc-item-sub { text-align: right; flex: 0 0 auto; }
.lc-item-sub b { font-size: 1.05rem; white-space: nowrap; }
.lc-saibamais { background: #f9fafb; border: 1px solid #eef0f3; border-radius: 10px; padding: .75rem .9rem; font-size: .88rem; margin-top: .6rem; }
.lc-combo { margin: .5rem 0 0; padding-left: 1rem; font-size: .85rem; color: #4b5563; }
.lc-vagas { font-size: .8rem; color: #0f766e; margin-top: .2rem; }

/* contador de pessoas */
.lc-pax { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .45rem 0; border-top: 1px dashed #eef0f3; }
.lc-pax:first-child { border-top: 0; }
.lc-pax-nome { font-weight: 600; font-size: .9rem; color: #374151; }
.lc-pax-preco { font-size: .82rem; color: #6b7280; }
.lc-pax-preco s { margin-right: .3rem; }
.lc-stepper { display: inline-flex; align-items: center; border: 1px solid #d1d5db; border-radius: 10px; overflow: hidden; flex: 0 0 auto; }
.lc-stepper button { width: 38px; height: 38px; border: 0; background: #f9fafb; font-size: 1rem; color: #374151; }
.lc-stepper button:hover:not(:disabled) { background: #eef0f3; }
.lc-stepper button:disabled { opacity: .45; }
.lc-stepper span { min-width: 38px; text-align: center; font-weight: 700; }

/* opcionais */
.lc-filtros { display: flex; flex-wrap: wrap; gap: .4rem; }
.lc-chip { border: 1px solid #d1d5db; background: #fff; border-radius: 999px; padding: .3rem .8rem; font-size: .82rem; color: #374151; }
.lc-chip.ativo { background: var(--lc-cor); border-color: var(--lc-cor); color: var(--lc-cor-texto); }
.lc-opcional { display: flex; gap: .8rem; align-items: center; border: 1px solid #eef0f3; border-radius: 12px; padding: .7rem; }
.lc-opcional + .lc-opcional { margin-top: .6rem; }
.lc-opcional img { width: 84px; height: 64px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; background: #f3f4f6; }
.lc-opcional-info { flex: 1 1 auto; min-width: 0; }
.lc-opcional-info h6 { margin: 0; font-size: .95rem; font-weight: 700; }

/* pagamento */
.lc-pgto-opcoes { display: flex; gap: .6rem; }
.lc-pgto-opcoes .btn { flex: 1 1 0; min-width: 0; padding: .75rem .5rem; border-radius: 10px; font-weight: 600; }
.lc-pgto-opcoes .btn.ativo { background: var(--lc-cor); border-color: var(--lc-cor); color: var(--lc-cor-texto); }
.lc-bandeira { font-size: .78rem; font-weight: 700; color: #0f766e; }

/* resumo */
.lc-resumo { position: sticky; top: 1rem; }
.lc-resumo-linha { display: flex; justify-content: space-between; gap: .5rem; font-size: .9rem; padding: .25rem 0; }
.lc-resumo-linha span:first-child { min-width: 0; }
.lc-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px dashed #d1d5db; margin-top: .6rem; padding-top: .7rem; }
.lc-total b { font-size: 1.6rem; color: #111827; }
.lc-pagar { padding: .85rem; font-size: 1.05rem; font-weight: 700; border-radius: 10px; }
.lc-seguro { font-size: .78rem; color: #6b7280; text-align: center; margin-top: .6rem; }

/* barra do total no celular */
.lc-barra { display: none; }
@media (max-width: 991.98px) {
    .lc-resumo { position: static; }
    .lc-barra { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: #fff; border-top: 1px solid #e5e7eb; box-shadow: 0 -2px 8px rgba(0,0,0,.06); padding: .6rem 16px; align-items: center; justify-content: space-between; gap: .6rem; }
    .lc-barra b { font-size: 1.2rem; }
    body.clean-body { padding-bottom: 72px; }
}

/* estados (concluído, erro, link indisponível) */
.lc-estado { max-width: 680px; margin: 32px auto; text-align: center; }
.lc-estado .lc-ico { font-size: 52px; margin-bottom: .8rem; }
.lc-localizador { display: inline-block; font-size: 1.8rem; font-weight: 800; letter-spacing: .04em; padding: .2rem 1rem; border-radius: 10px; background: #f3f4f6; color: #111827; }
.lc-pix-qr { max-width: 240px; width: 100%; border: 1px solid #e5e7eb; border-radius: 10px; padding: 6px; background: #fff; }
.lc-voucher { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .55rem 0; border-top: 1px solid #eef0f3; text-align: left; }

/* rodapé e WhatsApp */
.lc-footer { text-align: center; font-size: .85rem; color: #6b7280; padding: 24px 16px 32px; }
.lc-redes a { display: inline-flex; width: 40px; height: 40px; border-radius: 50%; align-items: center; justify-content: center; color: #fff; margin: 0 .3rem 1rem; font-size: 1.1rem; }
.lc-whats { position: fixed; right: 20px; bottom: 24px; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 2px 8px rgba(0,0,0,.25); z-index: 1040; }
.lc-whats:hover { color: #fff; }
@media (max-width: 991.98px) { .lc-whats { bottom: 84px; } }

@media (max-width: 575.98px) {
    .lc-header-inner { flex-wrap: wrap; }
    .lc-header-logo { max-height: 44px; }
    .lc-item-topo { flex-wrap: wrap; }
    .lc-item-img { width: 100%; height: 150px; }
    .lc-item-sub { text-align: left; }
    .lc-card > .lc-card-body { padding: .9rem; }
    .lc-pgto-opcoes { flex-wrap: wrap; }
}

/* google tradutor: esconde a barra que ele injeta no topo */
.goog-te-banner-frame, .skiptranslate iframe { display: none !important; }
body { top: 0 !important; }
#google_translate_element { display: none; }
