/* Etapas da compra (Carrinho > Entrega > Pagamento). */
.checkout-steps {
    display: flex;
    gap: var(--space-2);
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-muted);
}

.checkout-steps li {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--space-2);
    padding: 0.5rem 0.6rem;
    border-bottom: 3px solid var(--border);
}

.checkout-steps li.is-done {
    border-bottom-color: var(--navy);
    color: var(--navy);
}

.checkout-steps li.is-current {
    border-bottom-color: var(--red);
    color: var(--navy-dark);
}

.checkout-steps a {
    color: inherit;
    text-decoration: none;
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-round);
    background: var(--border);
    color: var(--navy-dark);
    font-size: var(--fs-sm);
}

.checkout-steps li.is-current .step-number {
    background: var(--red);
    color: #fff;
}

.checkout-steps li.is-done .step-number {
    background: var(--navy);
    color: #fff;
}

.cart-aside .cart-summary {
    max-width: none;
    margin: 0 0 1rem;
}

/* Resumo da compra do carrinho (etapa 1). */
/* Itens à esquerda e resumo ao lado (desktop); uma coluna no celular. */
/* Uma coluna por padrão (celular); duas a partir de 721px. É `min-width` e
   não uma regra no bloco mobile do fim porque este trecho vem depois dele no
   arquivo e venceria o override. */
.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
}

@media (min-width: 721px) {
    .cart-layout:not(.cart-layout--single) {
        grid-template-columns: minmax(0, 1fr) 24rem;
    }

    .cart-aside {
        position: sticky;
        top: 1rem;
    }
}

.cart-summary--review {
    max-width: none;
    margin: 0 0 1rem;
}

.summary-grand {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border);
}

.summary-grand-label {
    font-size: var(--fs-lg);
    font-weight: 800;
    color: var(--navy-dark);
}

.summary-grand-values {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.summary-grand-pix {
    color: var(--navy-dark);
    font-size: var(--fs-2xl);
    line-height: 1.15;
}

.summary-grand-values small {
    color: #4A463D;
}

.btn-checkout--block {
    display: block;
    width: 100%;
    text-align: center;
}

.cart-summary .cart-checkout-actions {
    margin-top: 0.9rem;
}

/* Tela de pagamento: mostra só a versão dos valores da forma escolhida. */
.checkout-flow[data-method="card"] .pay-pix,
.checkout-flow[data-method="pix"] .pay-card {
    display: none;
}

.checkout-section-title {
    margin: 1.5rem 0 0.5rem;
}

.checkout-review {
    margin-top: 1.5rem;
}

/* Autorização de avisos por WhatsApp (templates/_whatsapp_optin.html). */
.whatsapp-optin {
    margin: 1.25rem 0;
}

.whatsapp-optin-box {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: 1rem 1.1rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--paper);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.whatsapp-optin-box:has(input:checked) {
    border-color: #25D366;
    background: #F0FBF4;
}

.whatsapp-optin-box input[type="checkbox"] {
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: 0.15rem;
    accent-color: #25D366;
}

.whatsapp-optin-icon {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    fill: #25D366;
}

.whatsapp-optin-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    color: var(--ink);
}

.whatsapp-optin-text > strong {
    color: var(--navy-dark);
    font-size: var(--fs-base);
}

.whatsapp-optin-text > span {
    font-weight: 400;
}

.whatsapp-optin-warning {
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-sm);
    background: #FFF8DC;
    color: #6B4E00;
    font-size: var(--fs-sm);
}

.whatsapp-optin-box:has(input:checked) .whatsapp-optin-warning {
    display: none;
}

.skip-notice-option label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
}

.skip-notice-option .form-hint {
    display: block;
    margin: 0.2rem 0 0 1.6rem;
}

.whatsapp-optin-note {
    margin: 0.4rem 0 0;
    color: #6B6357;
    font-size: var(--fs-sm);
}

.checkout-timer {
    margin: 0 0 1rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--paper);
    color: var(--navy-dark);
    font-size: var(--fs-md);
}

.checkout-timer--low {
    border-color: var(--gold);
    background: #FFF8DC;
}

.checkout-timer--expired {
    border-color: var(--red);
    background: #FDECEA;
}

.checkout-timer-expired[hidden] {
    display: none;
}

.summary-card-note {
    margin: 0.6rem 0 0;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-sm);
    background: #eaf5e7;
    color: #35572c;
    font-size: var(--fs-sm);
}

.summary-installments {
    margin: -0.15rem 0 0.4rem;
    color: #6B6357;
    font-size: var(--fs-sm);
    text-align: right;
}

/* Forma de pagamento: cada opção mostra quanto fica o total. */
.payment-options {
    display: grid;
    gap: var(--space-2);
    margin: 0.5rem 0;
}

/* O cashback cobre o pedido inteiro: a escolha de Pix/cartão some (display vencia o hidden). */
.payment-options[hidden],
.rental-payment-options[hidden] {
    display: none;
}

.cashback-covers-note {
    margin: 0.5rem 0;
    padding: 0.6rem 0.8rem;
    border-left: 4px solid #2E7D32;
    background: #EEF7EE;
    border-radius: var(--radius-sm);
}

.payment-option {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--paper);
    cursor: pointer;
}

.payment-option:has(input:checked) {
    border-color: var(--navy);
    background: var(--cream);
}

.payment-option input {
    margin-top: 0.3rem;
}

.payment-option-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.payment-option-name {
    color: var(--navy);
    font-weight: 700;
}

.payment-option-price small {
    display: block;
    color: #6B6357;
}

/* Endereço e entrega/frete lado a lado: duas colunas quando cabem (desktop) e
   uma só no celular, sem precisar de media query (auto-fit). */
.delivery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: var(--space-4);
    align-items: start;
    margin: 1.25rem 0;
}

.delivery-grid > .address-block,
.delivery-grid > .shipping-calculator {
    margin: 0;
}

/* Endereço de entrega no carrinho (cart/_delivery_address.html). */
.address-block {
    margin: 1.25rem 0;
    padding: 1rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--paper);
}

.address-block--pending {
    border-color: var(--red);
}

.address-block h3 {
    margin-top: 0;
}

.address-summary {
    margin: 0 0 0.6rem;
}

.address-missing {
    color: var(--red);
    font-weight: 700;
}

.address-other {
    margin-top: 0.8rem;
}

.address-other > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--navy);
}

.address-form,
.address-number-form {
    margin-top: 0.8rem;
}

/* O .form-hint global tem margem superior negativa (cola a dica no campo
   acima); depois de um botão isso a colocava por baixo dele. Dentro do bloco
   de endereço, as dicas têm espaço normal. */
.address-block .form-hint {
    margin: 0.9rem 0 0.6rem;
}

.address-save label {
    display: inline;
    font-weight: 600;
}

/* Resumo de erros/pendências: o motivo de o botão de finalizar não estar
   liberado precisa saltar aos olhos, com link para o ponto que resolve. */
.form-error-summary,
.checkout-pending {
    margin: 1rem 0;
    padding: 0.9rem 1.1rem;
    border: 2px solid var(--red);
    border-left-width: 6px;
    border-radius: var(--radius-md);
    background: #FDECEA;
    color: var(--navy-dark);
}

.checkout-pending h3 {
    margin: 0 0 0.4rem;
}

.checkout-pending ul,
.form-error-summary ul {
    margin: 0;
    padding-left: 1.2rem;
}

.checkout-pending a,
.form-error-summary a {
    color: var(--red);
    font-weight: 700;
}

.btn-checkout--disabled,
.btn-checkout--disabled:hover,
button.btn-checkout[disabled] {
    background: #C9C5B8;
    color: #5c5a52;
    cursor: not-allowed;
    box-shadow: none;
}

/* Exclusão irreversível: fica no fim da tela de edição, colapsada (só o botão
   "Excluir") até o clique — o destaque vermelho e o aviso só aparecem depois
   de aberta, pra não ocupar espaço/chamar atenção numa tela que na maioria
   das vezes é só edição normal. */
.danger-zone {
    margin: 2rem 0 1rem;
}

.danger-zone > summary {
    list-style: none;
    cursor: pointer;
    display: inline-block;
}

.danger-zone > summary::-webkit-details-marker {
    display: none;
}

.danger-zone[open] {
    padding: 0.5rem 1.1rem 1rem;
    border: 2px solid var(--red);
    border-radius: var(--radius-md);
    background: #FDF3F1;
}

.danger-zone[open] > summary {
    margin: 0.7rem 0 0.8rem;
}

.danger-zone-content {
    padding-top: 0.2rem;
}

.danger-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.danger-form input[type="text"] {
    width: 12rem;
}

.btn-danger {
    background: var(--red);
    color: #fff;
    border: 0;
    border-radius: var(--radius-sm);
    padding: 0.6rem 1.1rem;
    font-weight: 700;
    cursor: pointer;
}

.btn-danger:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Painel de filtros por tipo (product_list.html — jogos e livros). Compacto de
   propósito: campos pequenos numa linha só e grupos de opções como uma linha
   "rótulo + chips" (a cada input/select o width:100% global é sobrescrito). */
.product-filters {
    margin-bottom: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--paper);
    font-size: var(--fs-sm);
}

.product-filters > summary {
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    font-weight: 700;
    color: var(--navy);
}

.product-filters-count {
    display: inline-block;
    min-width: 1.25rem;
    margin-left: 0.25rem;
    padding: 0 0.35rem;
    border-radius: var(--radius-pill);
    background: var(--navy);
    color: #fff;
    font-size: var(--fs-xs);
    text-align: center;
}

.product-filters-form {
    padding: 0 0.75rem 0.6rem;
}

.pf-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    margin-bottom: 0.4rem;
}

.pf-field {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--fs-sm);
}

.product-filters .pf-number,
.product-filters .pf-select {
    padding: 0.2rem 0.45rem;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
}

.product-filters .pf-number {
    width: 4.5rem;
}

.product-filters .pf-select {
    width: 9rem;
}

.pf-group {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    padding: 0.25rem 0;
    border-top: 1px dashed var(--border);
}

.pf-group-label {
    flex: 0 0 6.5rem;
    font-weight: 700;
    color: var(--navy);
}

.pf-options {
    flex: 1 1 12rem;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.pf-option {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    padding: 0.1rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: #fff;
    cursor: pointer;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--navy);
}

.pf-option input {
    width: auto;
    margin: 0;
}

.pf-option:has(input:checked) {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.pf-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: 0.4rem;
}

.pf-actions button,
.pf-actions .btn-secondary {
    padding: 0.3rem 0.9rem;
    font-size: var(--fs-sm);
}

/* Feedback da experiência de compra (orders/feedback_views.py) */
.feedback-page {
    max-width: 640px;
}

.feedback-form textarea {
    width: 100%;
    box-sizing: border-box;
}

.feedback-rating {
    border: 1px solid #E2DCCB;
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    margin: 0 0 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.feedback-rating legend {
    font-weight: 700;
    padding: 0 0.25rem;
}

.feedback-rating-option {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.4rem 0.75rem;
    border: 1px solid #E2DCCB;
    border-radius: var(--radius-pill);
    background: #fff;
    cursor: pointer;
    font-weight: 600;
}

.feedback-rating-option:has(input:checked) {
    border-color: var(--navy);
    background: var(--navy);
    color: #fff;
}

.feedback-invite {
    border: 1px solid var(--gold);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius-sm);
    background: #FFF8E6;
    padding: 0.75rem 1rem;
    margin: 1rem 0;
}

.feedback-invite h3 {
    margin-top: 0;
}

.feedback-invite--done {
    border-color: #4F7942;
    background: #EEF5EA;
}

.feedback-list-link {
    display: block;
    font-weight: 600;
}

.feedback-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: 0.75rem;
}

.feedback-filters .search-chip {
    background: #fff;
    color: var(--navy);
    border: 1px solid var(--navy);
}

.feedback-filters .search-chip.feedback-filter--active {
    background: var(--navy);
    color: #fff;
}

.feedback-row--unread td {
    font-weight: 600;
}

.feedback-score {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    font-weight: 700;
    background: #E8E8E8;
    color: #333;
}

.feedback-score--4, .feedback-score--5 {
    background: #EEF5EA;
    color: #2F5A26;
}

.feedback-score--1, .feedback-score--2 {
    background: #FBE7E6;
    color: #A3241D;
}

.feedback-problem-flag {
    color: var(--red);
}

.feedback-answer h4 {
    margin: 0.75rem 0 0.25rem;
}

.feedback-answer p {
    margin: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.feedback-answer--problem {
    border-left: 3px solid var(--red);
    padding-left: 0.6rem;
}

.feedback-reply-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* ===== Aluguel de jogos (vitrine /aluguel/) =====
   Cor de identidade do aluguel: azul-petróleo (nunca vermelho, que lê como
   erro). Cartões reaproveitam .product-card; o calendário usa grid com
   auto-fill, então se ajusta ao celular sem media query própria. */
.nav-links .nav-rental {
    font-weight: 700;
}

.product-card-type--rental {
    border-top-color: #1F6F78;
    background: #DDF0F1;
    color: #17565D;
}

.badge--rental-available {
    background: #E3EFDA;
    color: #4F7942;
}

.badge--rental-unavailable {
    background: #EDEBE6;
    color: #6B6357;
}

.rental-intro {
    margin: 0 0 0.5rem;
}

.rental-pickup-notice {
    background: #EEF3F9;
    border-left: 4px solid #4A78A8;
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.9rem;
    margin: 0 0 1.25rem;
    font-size: var(--fs-md);
}

.rental-card-facts {
    margin: 0 0 0.35rem;
    font-size: var(--fs-sm);
    color: #6B6357;
}

.rental-card-price {
    margin: 0 0 0.9rem;
}

.rental-prices p {
    margin: 0.2rem 0;
    font-size: var(--fs-base);
}

.rental-dates {
    margin: 2rem 0;
}

.rental-date-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    margin-bottom: 0.5rem;
}

.rental-date-form label {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-weight: 600;
    font-size: var(--fs-md);
}

.rental-date-answer {
    min-height: 1.4rem;
    margin: 0.25rem 0 1rem;
    font-weight: 600;
}

.rental-date-answer--ok {
    color: #4F7942;
}

.rental-date-answer--no {
    color: #8A6D1F;
}

.rental-calendar {
    list-style: none;
    padding: 0;
    margin: 0 0 0.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
    gap: var(--space-2);
}

.rental-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.4rem 0.2rem;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    border: 1px solid #E2DDD0;
    background: #FFFFFF;
}

.rental-day-week {
    text-transform: uppercase;
    font-size: var(--fs-xs);
    color: #6B6357;
}

.rental-day-date {
    font-weight: 700;
}

.rental-day--free {
    background: #E3EFDA;
    border-color: #B9D3A8;
    color: #31572C;
}

.rental-day--busy {
    background: #EDEBE6;
    color: #6B6357;
}

.rental-day--closed {
    opacity: 0.55;
}

.rental-day--later {
    border-style: dashed;
    opacity: 0.6;
}

.btn-primary[aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
}

/* Dia livre é um botão: tocar escolhe a retirada (a devolução é marcada). */
.rental-day-pick {
    all: unset;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    cursor: pointer;
}

.rental-day-pick:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.rental-day--selected {
    background: var(--navy);
    border-color: var(--navy);
    color: #FFFFFF;
}

.rental-day--selected .rental-day-week {
    color: #D9E2EE;
}

.rental-day--range {
    box-shadow: inset 0 -3px 0 var(--gold);
}

.rental-day--return {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--navy);
}

/* No dia escolhido e no da devolução o texto vira "retirada"/"devolução". */
.rental-day--selected .rental-day-state,
.rental-day--return .rental-day-state {
    font-size: 0;
}

.rental-day--selected .rental-day-state::after,
.rental-day--return .rental-day-state::after {
    font-size: var(--fs-sm);
    font-weight: 700;
}

.rental-day--selected .rental-day-state::after {
    content: 'retirada';
}

.rental-day--return .rental-day-state::after {
    content: 'devolução';
}

/* Vídeos do YouTube e links úteis do jogo (loja e aluguel) */
.game-media {
    margin: 2rem 0;
}

.game-videos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: var(--space-4);
}

.game-video {
    max-width: 720px;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #000000;
}

.game-video iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.game-links {
    padding-left: 1.2rem;
}

.game-links li {
    margin: 0.35rem 0;
}

.game-links a {
    color: var(--navy);
    font-weight: 600;
}

.rental-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: 1.25rem;
}

.rental-staff-preview {
    background: #DDF0F1;
    border-left: 4px solid #1F6F78;
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.9rem;
    margin: 0 0 1rem;
    font-size: var(--fs-md);
}

.rental-section--attention {
    border-left: 4px solid var(--gold);
    padding-left: 0.9rem;
}

.rental-late {
    color: var(--red);
}

.rental-timeline {
    padding-left: 1.1rem;
    margin: 0;
}

.rental-timeline li {
    margin: 0.2rem 0;
}

.rental-renewal-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.rental-late-box {
    background: #FBE1DF;
    border-left: 4px solid var(--red);
    border-radius: var(--radius-sm);
}

/* Avisos do aluguel em três níveis: informativo (.rental-pickup-notice, azul), atenção
   (.rental-attention, âmbar) e problema (.rental-late-box / .rental-blocked-warning, vermelho). */
.rental-attention {
    background: #FFF8E1;
    border-left: 4px solid var(--gold);
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.9rem;
    margin: 0 0 1.25rem;
}
.contract-rules { margin: .25rem 0 .75rem; padding-left: 1.2rem; font-weight: 600; }
.rental-date-alt summary { cursor: pointer; font-size: var(--fs-md); color: #555; }
.renewal-some summary { cursor: pointer; font-weight: 600; margin: .5rem 0; }
.rental-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: end; margin-bottom: 1rem; }
.plan-switch-note { font-size: var(--fs-sm); color: #6B5312; }

.cart-section-title {
    margin: 1rem 0 0.5rem;
    font-size: var(--fs-base);
}

.badge--rental {
    background: #DDF0F1;
    color: #17565D;
    margin-bottom: 0.2rem;
}

.rental-payment-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.rental-checkout-items {
    padding-left: 1.1rem;
}

.rental-blocked-warning {
    background: #FBE1DF;
    color: var(--red);
    border-left: 4px solid var(--red);
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.9rem;
    font-weight: 600;
}


/* Planos de assinatura do aluguel (rentals/plan_list.html) */
.plan-kicker { text-transform: uppercase; letter-spacing: .08em; font-size: var(--fs-sm); color: var(--gold, #b8860b); margin: 0; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-4); margin: 1.25rem 0; }
.plan-card { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: 1.25rem 1rem;
    border: 1px solid #ddd6c4; border-radius: var(--radius-md); background: #fff; }
.plan-card h3 { margin: 0; }
.plan-card--highlight { border: 2px solid #2d6a4f; box-shadow: 0 4px 14px rgba(45, 106, 79, .15); }
.plan-card--current { outline: 2px dashed #2d6a9f; outline-offset: 3px; }
.plan-badge { position: absolute; top: -.7rem; left: 1rem; background: #2d6a4f; color: #fff; font-size: var(--fs-xs);
    font-weight: 700; text-transform: uppercase; padding: .2rem .6rem; border-radius: var(--radius-pill); }
.plan-price { margin: 0; }
.plan-price strong { font-size: var(--fs-2xl); }
.plan-price span { color: #666; }
.plan-features { margin: 0; padding-left: 1.1rem; flex: 1; }
.plan-card .btn-primary, .plan-card .btn-secondary { text-align: center; margin-top: auto; }
.plan-current-label { margin-top: auto; font-weight: 700; color: #2d6a9f; text-align: center; }

/* Fotos de evidência do aluguel (retirada/conferência) */
.evidence-photo-list { list-style: none; padding: 0; margin: 0.5rem 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.evidence-photo-list li { display: flex; flex-direction: column; gap: var(--space-1); max-width: 8rem; }
.evidence-photo-list img { width: 6rem; height: 6rem; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid #ddd; }
.evidence-upload { margin: 0.75rem 0; }

/* Aluguel: cartões de pedido, selo de ação e bloco "O que fazer agora" */
.rental-order-card { margin-bottom: 1rem; }
.rental-order-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.rental-order-head h3 { margin: 0; }
.rental-order-games { margin: .5rem 0; padding-left: 1.1rem; }
.rental-order-foot { margin: 0; color: #555; font-size: var(--fs-md); }
.rental-action-badge { display: inline-block; padding: .25rem .7rem; border-radius: var(--radius-pill); font-weight: 700; font-size: var(--fs-sm); text-decoration: none; background: #E8EEF6; color: #1B3B63; }
.rental-action-badge--action { background: #FFF3C4; color: #6B5312; }
.rental-action-badge--urgent { background: #C0392B; color: #fff; }
.rental-next-action { border-left: 6px solid #1B3B63; }
.rental-next-action--action { border-left-color: #D4A017; background: #FFFBEA; }
.rental-next-action--urgent { border-left-color: #C0392B; background: #FDECEA; }
.rental-next-action-kicker { margin: 0; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .05em; color: #555; }
.rental-next-action h3 { margin: .2rem 0 .4rem; }

/* display de .btn-secondary vence o atributo hidden (mesma armadilha do .summary-line[hidden]) */
#rental-retry[hidden] { display: none; }

/* Campo de data digitada: só o espaço necessário na horizontal */
.rental-date-alt { flex: 0 0 auto; }
.rental-date-alt label { width: max-content; }
.rental-date-alt input[type="date"] { width: 11rem; max-width: 100%; }

/* .form-hint sobe 0.5rem (feita para ficar colada num campo com margem embaixo). Fora de formulários de
   campos com margem — dica do campo de data, cartões, Pix, renovação —, essa margem negativa fazia o
   texto passar por cima do campo. */
.rental-date-hint,
.rental-date-alt .form-hint,
.rental-dates .form-hint,
.rental-game-card .form-hint,
.rental-next-action .form-hint,
.renewal-pending .form-hint,
.pix-payment .form-hint,
.rental-order-card .form-hint,
.rental-attention .form-hint {
    margin: 0.35rem 0 0.9rem;
}

/* Dica logo abaixo de um <summary> (Como funciona a conferência etc.): sem subir sobre o título */
summary + .form-hint,
details > .form-hint:first-of-type {
    margin: 0.6rem 0 0.9rem;
}
/* Motivo de um botão desabilitado: texto visível (title não aparece no toque nem em leitor de tela). */
.rental-renewal-options form { display: flex; flex-direction: column; gap: var(--space-1); max-width: 16rem; }
.renewal-why { color: #8A1F17; font-size: var(--fs-sm); line-height: 1.3; }
.contract-summary { background: #EAF2FB; border-left: 4px solid var(--navy); border-radius: var(--radius-sm); padding: .65rem .9rem; margin: 0 0 1rem; }
.contract-summary h3 { margin: 0 0 .25rem; font-size: var(--fs-base); }
.sticky-actions .checkout-blocked-why { flex: 1 1 100%; margin: 0 0 .35rem; font-size: var(--fs-sm); color: #8A1F17; }

/* Legenda do calendário do aluguel: texto visível (o title do dia não aparece no toque). */
.rental-legend { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1rem; padding: 0; margin: .25rem 0 .6rem; font-size: var(--fs-sm); color: #4A443A; }
.rental-legend li { display: flex; align-items: center; gap: var(--space-2); }
.rental-legend-swatch { display: inline-block; width: 1rem; height: 1rem; border-radius: var(--radius-xs); border: 1px solid #E2DDD0; flex: none; }
.rental-summary-box > summary, .rental-games-box > summary { cursor: pointer; }
.rental-games-title { display: inline; margin: 0; }
.today-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-2); margin: 0 0 1rem; }
.today-counter { display: block; text-decoration: none; color: inherit; border: 1px solid #E2DDD0; border-radius: var(--radius-md); padding: .6rem .8rem; background: #fff; }
.today-counter strong { display: block; font-size: var(--fs-2xl); line-height: 1.1; }
.today-counter--alert { border-color: var(--red); background: #FBE1DF; }

/* --- Fase 5: vitrine e página do aluguel -------------------------------------------------------------- */
.hero-slide--rental-dates { background: linear-gradient(125deg, #1B4A5C 0%, #2F7A6B 100%); }
.hero-slide--recommend { background: linear-gradient(125deg, #2F4A27 0%, #4F7942 100%); }
.hero-slide--plans { background: linear-gradient(125deg, #3A245F 0%, #5B3A8F 60%, #8A4FA0 100%); }
.hero-arrow:focus-visible, .hero-dot:focus-visible, .hero-toggle:focus-visible, .hero-slide:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}

/* Seções recolhíveis da página do jogo (abertas no computador, recolhidas no celular por responsive-details.js) */
.rental-collapse { margin: 1.25rem 0; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; }
.rental-collapse > summary { cursor: pointer; padding: .7rem 1rem; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.rental-collapse > summary::-webkit-details-marker { display: none; }
.rental-collapse > summary::after { content: '▾'; font-size: var(--fs-lg); color: #6B6357; transition: transform .15s ease; }
.rental-collapse[open] > summary::after { transform: rotate(180deg); }
.rental-collapse > summary:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; border-radius: var(--radius-md); }
.rental-collapse-title { margin: 0; font-size: var(--fs-lg); }
.rental-collapse > :not(summary) { margin-left: 1rem; margin-right: 1rem; }
.rental-collapse > :last-child { margin-bottom: 1rem; }
.game-media.rental-collapse h4 { margin: 1rem 1rem .5rem; }

.rental-add-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: .5rem 0 0; }
.rental-add-row button, .rental-add-row .btn-primary { min-width: 12rem; }

/* Barra fixa do aluguel: só no celular e só depois que há uma data válida (rental-sticky-bar.js na própria página). */
.rental-sticky-bar { display: none; }
@media (max-width: 720px) {
    .rental-sticky-bar:not([hidden]) {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
        display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
        padding: .6rem 5.25rem .6rem 1rem;  /* espaço à direita para o botão do WhatsApp */
        background: var(--paper); border-top: 2px solid var(--border); box-shadow: 0 -4px 12px rgba(0, 0, 0, .1);
    }
    .rental-sticky-bar-text { font-size: var(--fs-sm); font-weight: 600; }
    .product-sticky-price { font-size: var(--fs-base); font-weight: 700; color: var(--navy); white-space: nowrap; }
    .product-sticky-price small { display: block; font-size: var(--fs-xs); font-weight: 600; color: #4F7942; }
    .rental-sticky-bar button { padding: .55rem 1rem; font-size: var(--fs-md); white-space: nowrap; }
    body.has-rental-sticky-bar main { padding-bottom: 5rem; }
}

/* Voltar ao topo: canto inferior ESQUERDO (o WhatsApp fica no direito) e acima de qualquer barra fixa
   (--fixed-bar-offset é calculado por back-to-top.js). */
.back-to-top {
    position: fixed; left: 1rem; bottom: calc(1.25rem + var(--fixed-bar-offset, 0px)); z-index: 45;
    width: 2.75rem; height: 2.75rem; padding: 0; border-radius: var(--radius-round);
    display: flex; align-items: center; justify-content: center;
    background: var(--navy); color: #fff; border: 2px solid #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
    font-size: var(--fs-lg); line-height: 1; cursor: pointer;
    opacity: 0; transform: translateY(.5rem); pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.back-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.back-to-top:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .back-to-top { transition: none; }
}
@media print { .back-to-top, .rental-sticky-bar { display: none !important; } }

/* Os botões flutuantes (WhatsApp à direita, voltar ao topo à esquerda) nunca cobrem o texto do rodapé
   quando a página chega ao fim (visto a 360 px: a frase do rodapé ficava atrás do botão do WhatsApp). */
.site-footer { padding-bottom: 5.5rem; }

/* Alternar Comprar / Alugar (carrinho único) */
.mode-switch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 1rem 0 0; }
.mode-switch-item { padding: .45rem 1.25rem; border: 2px solid var(--navy); border-radius: var(--radius-pill); color: var(--navy); font-weight: 700; text-decoration: none; background: #fff; }
.mode-switch-item.is-active { background: var(--navy); color: #fff; }
.mode-switch-item:focus-visible, .mode-switch-cart:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.mode-switch-cart { margin-left: auto; font-size: var(--fs-md); font-weight: 600; color: var(--navy); }

.rental-also-sale, .rental-also-rent { margin: .25rem 0 .75rem; padding: .5rem .75rem; background: #EEF3F9; border-left: 4px solid #4A78A8; border-radius: var(--radius-sm); font-size: var(--fs-md); }

/* --- Coleção: página do jogo como centro de trabalho (cópias no topo + gaveta lateral) -------------------- */
.game-hub-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin: 0 0 1rem; padding: .5rem .75rem; background: #EEF3F9; border-radius: var(--radius-md); font-weight: 600; }
.game-hub-nav a { color: var(--navy); }
.game-hub-links { margin-left: auto; display: flex; gap: var(--space-4); font-weight: 500; font-size: var(--fs-md); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.section-head h3 { margin: .5rem 0; }
.copy-cards { list-style: none; padding: 0; margin: .5rem 0 1rem; display: grid; gap: var(--space-2); }
.copy-card { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: .7rem .9rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; }
.copy-card--empty { color: #6B6357; }
.copy-card-main { min-width: 0; }
.copy-card-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: .35rem 0; }
.copy-card .form-hint { margin: .25rem 0 0; }
.badge--sale { background: #E6F0DC; color: #31572C; }
.badge--copy-maintenance { background: #FFF3C4; color: #6B5312; }
.badge--copy-retired { background: #EDEBE6; color: #6B6357; }
.game-gallery-admin { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-3); padding: 0; }
.copy-listing { padding: .5rem .75rem; background: #EEF3F9; border-left: 4px solid #4A78A8; border-radius: var(--radius-sm); font-size: var(--fs-md); }
.form-error-summary { color: #8A1F17; font-weight: 700; }

.side-drawer { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(560px, 100%); max-width: 100%; height: 100dvh; max-height: 100dvh; padding: 0; border: 0; border-left: 4px solid var(--navy); background: var(--paper); box-shadow: -8px 0 24px rgba(0, 0, 0, .25); overflow: hidden; }
.side-drawer::backdrop { background: rgba(0, 0, 0, .45); }
.side-drawer-body { height: 100%; overflow-y: auto; padding: 0 1rem 2rem; }
.drawer-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: .75rem 0; background: var(--paper); border-bottom: 1px solid var(--border); }
.drawer-head h3 { margin: 0; font-size: var(--fs-lg); }
.drawer-close { width: 2.25rem; height: 2.25rem; padding: 0; border-radius: var(--radius-round); font-size: var(--fs-xl); line-height: 1; background: #fff; color: var(--navy); border: 1px solid var(--border); }
.drawer-actions { position: sticky; bottom: 0; display: flex; gap: var(--space-2); padding: .75rem 0; background: var(--paper); border-top: 2px solid var(--border); }
.drawer-form .form-section { margin: .75rem 0; }
@media (prefers-reduced-motion: no-preference) {
    .side-drawer[open] { animation: drawer-in .18s ease-out; }
    @keyframes drawer-in { from { transform: translateX(2rem); opacity: .4; } to { transform: none; opacity: 1; } }
}


.settings-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 1.25rem; }
.settings-tabs a { padding: .45rem 1rem; border: 2px solid var(--navy); border-radius: var(--radius-pill); color: var(--navy); font-weight: 700; text-decoration: none; background: #fff; }
.settings-tabs a.is-active { background: var(--navy); color: #fff; }
.settings-showcase-status { margin: 0 0 .75rem; }

.area-choice { max-width: 34rem; margin: 3rem auto; text-align: center; }
.area-choice-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: 1.25rem; }

.area-overlay { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(27, 59, 99, .6); }
.area-dialog { background: #fff; border-radius: var(--radius-md); max-width: 34rem; width: 100%; padding: 1.5rem; text-align: center; box-shadow: 0 10px 40px rgba(0, 0, 0, .35); }

/* Tela de entrar: cartão estreito e centralizado (campos, botões e links numa coluna só). */
.auth-card { max-width: 26rem; margin: 1.5rem auto 2rem; padding: 1.5rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); }
.auth-card h1,
.auth-card h2 { margin-top: 0; }
.auth-form p { margin: 0 0 1rem; }
.auth-form label { display: block; margin-bottom: 0.3rem; }
.auth-form .errorlist { margin: 0 0 0.5rem; padding-left: 1.1rem; color: #b3261e; }
.auth-submit { width: 100%; padding: 0.75rem 1rem; font-size: var(--fs-base); }
.auth-forgot { margin: 0.9rem 0 0; text-align: center; font-size: var(--fs-md); }
.auth-divider { display: flex; align-items: center; gap: var(--space-3); margin: 1.25rem 0; color: #6b6b6b; font-size: var(--fs-sm); }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.auth-switch { margin: 1.25rem 0 0; text-align: center; }
/* Botão do Google: branco, borda cinza, "G" colorido (segue as diretrizes de marca do Google). */
.btn-google { display: flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; box-sizing: border-box; padding: 0.7rem 1rem; background: #fff; color: #3c4043; border: 1px solid #dadce0; border-radius: var(--radius-sm); font-weight: 600; font-size: var(--fs-md); text-decoration: none; }
.btn-google:hover { background: #f8f9fa; border-color: #d2e3fc; }
.btn-google:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.google-logo { flex-shrink: 0; }
.google-hint { margin: 0.6rem 0 0; text-align: center; }
.google-login { margin: 1rem 0; }
.auth-card .google-login { margin: 0; }


/* Lembrete discreto de marketing/WhatsApp no pedido e no aluguel: sem destaque de propósito. */
.contact-reminder {
    margin: 1rem 0;
    font-size: var(--fs-sm);
    color: #6b7280;
}
.contact-reminder p { margin: 0 0 0.35rem; }
.contact-reminder label { display: block; margin: 0.15rem 0; cursor: pointer; }
.contact-reminder input[type="checkbox"] { margin-right: 0.4rem; }


/* Botão de informações do cashback (ⓘ) ao lado da caixa "Usar meu cashback". */
.cashback-info { margin: 0.25rem 0 0.75rem 1.6rem; font-size: var(--fs-sm); color: #4b5563; }
.cashback-info summary { cursor: pointer; color: var(--navy); font-weight: 600; width: fit-content; }
.cashback-info-body { margin-top: 0.4rem; padding: 0.6rem 0.8rem; background: var(--cream); border: 1px solid var(--border); border-radius: var(--radius-sm); max-width: 34rem; }
.cashback-info-body ul { margin: 0 0 0.4rem; padding-left: 1.1rem; }
.cashback-info-body a { color: var(--navy); font-weight: 600; text-decoration: underline; }
.cashback-use--inline + .cashback-info, .cashback-info--inline { margin-left: 0; }

/* --- Telas da equipe (Hoje e Aluguéis): cartão por pedido, blocos por prioridade ------------------------- */
.board-summary { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: .5rem 0 1rem; }
.board-chip { display: inline-block; text-decoration: none; color: inherit; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: .25rem .7rem; background: #fff; font-size: var(--fs-md); }
.board-chip--urgent { border-color: var(--red); background: #FBE1DF; }
.board-chip--action { border-color: var(--gold-dark); background: #FFF3C4; }
.board-chip--info { border-color: #9CB8D9; background: #E8F0FA; }
.board-chip--wait { background: #F1EFE8; }
.board-allclear { margin: 1rem 0; padding: .8rem 1rem; border: 1px solid #A9D5B4; border-radius: var(--radius-md); background: #E6F4EA; }
.board-block { margin: .75rem 0; border: 1px solid var(--border); border-left: 5px solid #B8B3A4; border-radius: var(--radius-md); background: #fff; padding: 0 .75rem .5rem; }
.board-block--urgent { border-left-color: var(--red); }
.board-block--action { border-left-color: var(--gold); }
.board-block--info { border-left-color: #2D6A9F; }
.board-block > summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem .75rem; align-items: baseline; padding: .7rem 0; cursor: pointer; }
.board-block-title { font-weight: 700; }
.board-count { font-size: var(--fs-sm); color: #5A5F66; }
.board-uptodate { margin: 1rem 0; color: #5A5F66; }
.board-uptodate ul { margin: .4rem 0 0; padding-left: 1.2rem; list-style: none; }
.order-card { position: relative; margin: .6rem 0; padding: .7rem .8rem .7rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); overflow-wrap: anywhere; }
.order-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: 10px 0 0 10px; background: #B8B3A4; }
.order-card--urgent::before { background: var(--red); }
.order-card--action::before { background: var(--gold); }
.order-card--info::before { background: #2D6A9F; }
.order-card-head { display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: baseline; }
.order-card-number { font-weight: 800; font-size: var(--fs-lg); }
.order-card-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: .4rem 0; }
.oc-chip { display: inline-block; padding: .1rem .55rem; border-radius: var(--radius-pill); background: #F1EFE8; font-size: var(--fs-sm); }
.oc-chip--returning { background: #DCE8FA; color: #1F4E96; }
.oc-chip--new { background: #E6F4EA; color: #1F6B3A; }
.oc-chip--ok { background: #E6F4EA; color: #1F6B3A; }
.oc-chip--wait { background: #FFF3C4; color: #6B5312; }
.oc-chip--late { background: #FBE1DF; color: #9C241E; font-weight: 700; }
.order-card-games { list-style: none; margin: .3rem 0; padding: 0; }
.order-card-games li { padding: .15rem 0; }
.order-card-dates { display: block; font-size: var(--fs-sm); color: #5A5F66; }
.order-card-more { margin: .2rem 0; font-size: var(--fs-sm); color: #5A5F66; }
.order-card-facts { margin: .4rem 0; }
.order-card-facts div { display: flex; flex-wrap: wrap; gap: .1rem .6rem; padding: .1rem 0; }
.order-card-facts dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .03em; color: #6B7078; min-width: 8.5rem; }
.order-card-facts dd { margin: 0; }
.order-card-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-start; margin-top: .5rem; }
.order-quick > summary { display: inline-block; cursor: pointer; list-style: none; }
.order-quick > summary::-webkit-details-marker { display: none; }
.order-quick form { margin-top: .4rem; }
.closed-list { display: flex; flex-direction: column; gap: var(--space-1); margin: .5rem 0; }
.closed-row { display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: baseline; text-decoration: none; color: inherit; padding: .45rem .6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.closed-row-meta { color: #5A5F66; font-size: var(--fs-sm); }
.check-copy { display: flex; flex-direction: column; gap: var(--space-2); padding: .4rem 0; border-top: 1px solid var(--border); }
.check-copy:first-of-type { border-top: 0; }
.day-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin: .25rem 0 .5rem; }
.day-nav h1,
.day-nav h2 { margin: 0; flex: 1; text-align: center; font-size: var(--fs-lg); }
.day-nav-link { flex: 0 0 auto; min-width: 5.5rem; padding: .45rem .6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; text-decoration: none; text-align: center; font-size: var(--fs-md); }
.day-nav-link--off { border-color: transparent; background: transparent; }
.income-list { display: flex; flex-direction: column; gap: var(--space-2); margin: .5rem 0 1rem; }
.income-row { padding: .6rem .8rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; overflow-wrap: anywhere; }
.income-row-head { display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: baseline; }
.income-row-date { margin-left: auto; color: #5A5F66; font-size: var(--fs-sm); }
.income-row-games { margin: .3rem 0; }
.income-row-amounts { display: flex; flex-wrap: wrap; gap: .1rem .8rem; margin: 0; font-size: var(--fs-md); }

/* Convite para ativar as notificações / instalar o app (templates/_push_client.html) */
.push-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0;
    padding: 0.75rem 1rem;
    background: #E8F0FA;
    border-bottom: 1px solid #B8CCE6;
    color: var(--navy);
}

.push-banner[hidden] {
    display: none;
}

.push-banner-text {
    margin: 0;
    flex: 1 1 16rem;
}

.push-banner-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.push-devices {
    margin-top: 0.75rem;
}

.push-devices ul {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
}

/* Tela Hoje: pedidos da loja (enviar/preparar, retiradas na loja). Uma linha que quebra no celular. */
.board-store-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
    display: grid;
    gap: var(--space-2);
}

.board-store-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.9rem;
    align-items: baseline;
    padding: 0.6rem 0.8rem;
    background: #fff;
    border: 1px solid #E3E6EB;
    border-radius: var(--radius-sm);
}

.board-store-action {
    color: #5A4A12;
    font-weight: 600;
}

.board-store-total {
    margin-left: auto;
    font-weight: 700;
}

/* Aviso discreto (avisos que não saíram) nas configurações: cinza, sem alarde. */
.quiet-notice {
    font-size: var(--fs-md);
    color: #4A5566;
    background: #F2F4F7;
    border-left: 3px solid #A9B3C1;
    padding: 0.5rem 0.8rem;
    border-radius: var(--radius-sm);
}
.settings-tabs .nav-badge--muted { background: #E6E9EE; color: #4A5566; }

/* Termo e contrato lidos dentro do pagamento: painel recolhível, texto com rolagem própria e o aceite no fim. */
.doc-reader {
    border: 1px solid #D5DCE6;
    border-radius: var(--radius-md);
    background: #fff;
    margin: 0.75rem 0;
}

.doc-reader > summary {
    cursor: pointer;
    padding: 0.75rem 0.9rem;
    font-weight: 700;
    color: var(--navy);
}

.doc-reader-version {
    font-weight: 500;
    color: #5A6678;
    font-size: var(--fs-md);
}

.doc-reader-text {
    max-height: min(55vh, 28rem);
    overflow-y: auto;
    margin: 0 0.9rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid #E3E6EB;
    border-radius: var(--radius-sm);
    background: #FAFBFC;
    font-size: var(--fs-md);
    line-height: 1.55;
}

.doc-reader-end {
    height: 1px;
}

.doc-reader-hint,
.doc-reader-accept {
    margin: 0.6rem 0.9rem;
}

.doc-reader-accept {
    padding-bottom: 0.75rem;
    font-weight: 600;
}
.help-conditions dt { font-weight: 700; margin-top: .6rem; } .help-conditions dd { margin: .15rem 0 0; }
.acervo-notice { font-size: var(--fs-md); background: #FFF8E6; border-left: 3px solid var(--gold); padding: .5rem .75rem; border-radius: var(--radius-sm); }

/* "Descubra seu próximo jogo" (rentals/recommend.html). Sem JS as perguntas aparecem todas; com JS,
   static/js/recommender.js mostra uma por vez (.quiz--steps). Opções são botões grandes (≥ 44 px). */
.quiz [hidden] {
    display: none !important;
}

.quiz-step {
    margin: 0 0 1.25rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--paper);
}

.quiz-step legend {
    padding: 0 0.25rem;
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--navy);
}

.quiz-progress {
    margin: 0 0 0.5rem;
    font-size: var(--fs-md);
    font-weight: 600;
    color: #5c6470;
}

.quiz-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--space-2);
    margin-top: 0.5rem;
}

.quiz-options--compact {
    grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
}

.quiz-option {
    position: relative;
    display: block;
    cursor: pointer;
}

.quiz-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.quiz-option span {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 3rem;
    padding: 0.65rem 0.9rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--cream);
    font-weight: 600;
    text-align: center;
}

.quiz-option small {
    margin-top: 0.15rem;
    font-weight: 400;
    font-size: var(--fs-sm);
    color: #5c6470;
}

.quiz-option input:checked + span {
    border-color: #4F7942;
    background: #EAF3E6;
    color: #2F4A27;
}

.quiz-option input:focus-visible + span {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}

.quiz-age,
.quiz-date {
    display: block;
    margin-top: 0.9rem;
    font-weight: 600;
}

.quiz-age input,
.quiz-date input {
    display: block;
    margin-top: 0.35rem;
    max-width: 12rem;
}

.quiz-extras {
    margin-top: 0.5rem;
}

.recommend-reasons {
    margin: 0.4rem 0;
    padding-left: 1.1rem;
    font-size: var(--fs-sm);
    color: #2F4A27;
}

.recommend-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 1.25rem 0;
}

.recommend-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 1rem 0;
    padding: 0.9rem 1rem;
    border: 2px solid #4F7942;
    border-radius: var(--radius-md);
    background: #EAF3E6;
}

.recommend-cta p {
    margin: 0;
    font-weight: 600;
    color: #2F4A27;
}

/* Selos e coração da vitrine do aluguel (2026-10-04): ícones com texto escondido para leitor de tela. */
.rental-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.rental-card-marks { display: inline-flex; align-items: center; gap: var(--space-1); margin-left: auto; }
.rental-seal {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.6rem; height: 1.6rem; border-radius: var(--radius-round); font-size: var(--fs-sm); font-weight: 700; line-height: 1;
}
.rental-seal--rented { background: #E3F1DF; color: #2F5E27; border: 1px solid #4F7942; }
.rental-seal--never { background: #EAF2FA; color: #2D6A9F; border: 1px solid #2D6A9F; }
.rental-seal--new { background: #FFF3C4; color: #8A6D1F; border: 1px solid #C9A227; }
.wish-form { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; }
.wish-heart {
    background: transparent; border: 1px solid #D9CFC0; color: #B4233C; border-radius: var(--radius-round);
    width: 2rem; height: 2rem; padding: 0; font-size: var(--fs-lg); line-height: 1; cursor: pointer;
}
.wish-heart.is-wished { background: #FDE8EC; border-color: #B4233C; }
.wish-heart:focus-visible { outline: 2px solid #2D6A9F; outline-offset: 2px; }
.wish-heart-legend { color: #B4233C; font-weight: 700; }
.rental-seal-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: var(--fs-sm); color: #555; align-items: center; }
.rental-seal-legend > span { display: inline-flex; align-items: center; gap: var(--space-1); }
.rental-seal-legend .rental-seal { width: 1.3rem; height: 1.3rem; font-size: var(--fs-xs); }
.rental-wish { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: .5rem 0; }
.wish-notify-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.rental-already { display: flex; align-items: center; gap: var(--space-2); margin: .4rem 0; color: #2F5E27; }
.wishlist-entry { display: flex; flex-direction: column; }
.wishlist-notice { font-size: var(--fs-sm); margin: .3rem 0 0; }
.cashback-hint {
    background: #EEF6EA; border-left: 4px solid #4F7942; padding: .5rem .75rem; border-radius: var(--radius-xs); margin: .6rem 0;
}
.rental-plan-hint {
    background: #EAF2FA; border-left: 4px solid #2D6A9F; padding: .5rem .75rem; border-radius: var(--radius-xs); margin: .6rem 0;
}
.rental-recommended-note {
    background: #FFF3C4; border-left: 4px solid #C9A227; padding: .5rem .75rem; border-radius: var(--radius-xs);
}
.badge--new-in-collection { background: #FFF3C4; color: #8A6D1F; }
.badge--trait { background: #F1EDE4; color: #4A4033; }

/* Quem alugou o quê (ficha do cliente e jogo da coleção): uma linha por jogo/cliente, a mais recente primeiro. */
.rental-history-list { list-style: none; padding: 0; margin: 0; }
.rental-history-list li { padding: .45rem 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.rental-history-list li:last-child { border-bottom: none; }
.customer-cashback p { margin-bottom: .6rem; }

.rental-date-hint--error { color: #9b1c1c; font-weight: 600; }

.badge--payback-yes { background: #E3F1DC; color: #2F5D1F; }
.badge--payback-no { background: #ECE9DF; color: #5A5646; }

/* Cupom de desconto: botão que revela o campo; regras do aniversário só com código ANIVER- */
.coupon-toggle > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--navy);
    text-decoration: underline;
    padding: var(--space-2) 0;
}
.coupon-toggle[open] > summary { margin-bottom: var(--space-2); }
.coupon-rules[hidden] { display: none; }
.coupon-copy-code {
    width: 100%;
    max-width: 22rem;
    font-family: "Courier New", monospace;
    font-size: var(--fs-xl);
    font-weight: 700;
    text-align: center;
    letter-spacing: 1px;
    background: #fff8e1;
    border: 2px dashed #b8860b;
}

/* Componentes do jogo (Coleção): tabela editável; inputs compactos sem estourar a largura. */
.components-table input[type="text"] { width: 100%; min-width: 9rem; }
.components-table .components-qty { width: 4.5rem; }
.components-form textarea { width: 100%; }

/* No celular cada componente vira um cartão: qtd + nome (largura útil) na 1ª linha, observação inteira, e as caixas lado a lado.
   O seletor duplo (.components-table.data-table) vence as bordas/paddings de `.data-table td` (90-components.css). */
.components-flag-label { display: none; }
@media (max-width: 720px) {
    .components-table.data-table, .components-table.data-table tbody { display: block; }
    .components-table.data-table thead { display: none; }
    .components-table.data-table tr {
        display: grid;
        grid-template-columns: 4.5rem minmax(0, 1fr);
        align-items: center;
        gap: var(--space-2) var(--space-3);
        padding: var(--space-3) 0;
        border-bottom: 1px solid var(--border);
    }
    .components-table.data-table td { display: block; padding: 0; border: 0; min-width: 0; }
    .components-table.data-table .components-qty { width: 4.5rem; }
    .components-table.data-table input[type="text"] { width: 100%; min-width: 0; }
    .components-table.data-table .components-name { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
    .components-table.data-table .components-notes { grid-column: 1 / -1; }
    .components-table.data-table .components-flag { display: inline-block; grid-column: 1 / -1; }
    .components-table.data-table .components-flag label { display: inline-flex; align-items: center; gap: var(--space-1); }
    .components-table.data-table .components-flag-label { display: inline; font-size: var(--fs-sm); }
    .components-table.data-table .components-flag + .components-flag { margin-left: var(--space-4); }
}

/* Sugestões da IA aguardando aceite, no celular: qtd + nome (largura útil) na 1ª linha; "Essencial", Aceitar e Rejeitar juntos na 2ª. */
@media (max-width: 720px) {
    .components-table.data-table.components-review-table tr {
        display: grid;
        grid-template-columns: 4.5rem minmax(0, 1fr);
        align-items: center;
        gap: var(--space-2) var(--space-3);
        padding: var(--space-3) 0;
    }
    .components-table.data-table.components-review-table td { border: 0; padding: 0; min-width: 0; }
    .components-table.data-table.components-review-table .components-name { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
    .components-table.data-table.components-review-table .components-name input[type="text"] { width: 100%; min-width: 0; }
    .components-table.data-table.components-review-table .components-flag { grid-column: 1 / -1; }
    .components-table.data-table.components-review-table td.components-flag:last-child { display: flex; flex-wrap: wrap; gap: var(--space-2); }
}

/* Componentes de uma cópia: lista compacta (2 linhas por componente), igual no celular e no computador. */
.comp-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.comp-row, .comp-removed li { padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
.comp-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.comp-verified { font-size: var(--fs-xs); color: var(--text-muted); }
.comp-fields { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin-top: var(--space-1); }
.comp-fields label { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-sm); }
.comp-fields input[type="number"] { width: 4.5rem; }
.comp-check { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-sm); }
.comp-more { margin-top: var(--space-1); font-size: var(--fs-sm); }
.comp-more > summary { cursor: pointer; color: var(--text-muted); }
.comp-more input[type="text"] { width: 100%; margin: var(--space-1) 0; }
.comp-removed { margin: 0 0 var(--space-3); }

/* Contagem na conferência (celular): nome e Recebeu na mesma linha; contagem, "+" e "C" numa linha só; Com avaria e Conferido na seguinte. */
@media (max-width: 720px) {
    .components-table.data-table.components-count-table tr {
        grid-template-columns: 1fr 1fr;
    }
    .components-count-table .count-name { grid-column: 1; font-weight: 700; }
    .components-count-table .count-received { grid-column: 2; text-align: right; color: var(--text-muted); font-size: var(--fs-sm); }
    .components-count-table [data-label]::before { content: attr(data-label) ": "; font-size: var(--fs-sm); }
    .components-count-table .count-field { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-1); }
    .components-count-table .count-field::before { content: attr(data-label); }
    .components-count-table .count-received + .count-field { grid-column: 1 / -1; }
    .components-count-table .count-ok { grid-column: 2; }
    .components-count-table .components-flag-label { display: inline; }
}

/* Status dos jogos no celular: cada cópia vira um cartão (sem rolagem lateral); o rótulo de cada campo vem de data-label.
   Cabeçalho vira a barra de ordenação (links de ordenar em linha). Seletor duplo vence `.data-table td`. */
@media (max-width: 720px) {
    .copy-table.data-table, .copy-table.data-table tbody { display: block; }
    .copy-table.data-table thead { display: block; }
    .copy-table.data-table thead tr { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding: var(--space-2) 0; }
    .copy-table.data-table thead th { display: block; padding: 0; border: 0; background: none; color: inherit; }
    .copy-table.data-table thead th.copy-th-plain { display: none; }
    .copy-table.data-table tbody tr {
        display: block;
        margin-bottom: var(--space-3);
        padding: var(--space-3);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
    }
    .copy-table.data-table td { display: block; padding: 0 0 var(--space-2); border: 0; min-width: 0; overflow-wrap: anywhere; }
    .copy-table.data-table td:last-child { padding-bottom: 0; }
    .copy-table.data-table td::before {
        content: attr(data-label);
        display: block;
        font-size: var(--fs-xs);
        color: var(--text-muted);
        text-transform: uppercase;
    }
    .copy-table.data-table td:first-child::before { display: none; }
}