/* Área da Cliente (#1721) — complementa site-forms.css; sem Tailwind. */

/* ---- Casca própria da área da cliente (18/09): sem o menu institucional ---- */
.portal-body { background: #fff; }
.portal-head { border-bottom: 1px solid #e9e9e9; background: #fff; }
.portal-head-inner { max-width: 1100px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.portal-head-top { padding: 10px 0; }
.portal-head-logo img { max-height: 58px; width: auto; display: block; }
.portal-head-user { display: flex; align-items: center; gap: 14px; }
.portal-head-hello { font-weight: 600; font-size: 14px; }
/* #1935 — saldo ao lado do nome; no celular desce para uma linha própria */
/* #2138 — rótulo "Meu saldo de pontos" e caixa na cor da marca, para chamar atenção */
.portal-head-balance { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 12px; border: 1px solid #c7e9e6; border-radius: 10px; background: #eaf7f6; font-size: 13px; color: #555 !important; white-space: nowrap; }
.portal-head-balance:hover, .portal-head-balance:focus-visible { background: #dcf1ef; color: #2a8e89 !important; }
.portal-head-balance-label { font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: #2a6f6b; }
.portal-head-balance-values { display: inline-flex; flex-wrap: wrap; align-items: baseline; }
.portal-head-balance strong { font-weight: 700; color: #000; }
.portal-head-balance-values > span + span::before { content: "·"; margin: 0 7px; color: #aaa; }
.portal-head-balance .is-negative, .portal-head-balance .is-negative strong { color: #d9534f; }
.portal-head-logout { border: 1px solid #ddd; background: #fff; border-radius: 20px; padding: 7px 16px; font-size: 13px; font-weight: 500; color: #ff6a51 !important; cursor: pointer; display: inline-block; }
.portal-head-logout:hover { background: #fff5f3; }
.portal-head-nav { border-top: 1px solid #f0f0f0; background: #fafafa; }
.portal-head-nav .portal-head-inner { justify-content: flex-start; flex-wrap: wrap; gap: 4px 22px; padding-top: 10px; padding-bottom: 10px; }
.portal-head-nav a { font-size: 14px; font-weight: 500; color: #000 !important; padding: 4px 0; border-bottom: 2px solid transparent; }
.portal-head-nav a.is-active { border-bottom-color: #45b4ae; color: #2a8e89 !important; }

.portal-foot { margin-top: 48px; padding: 22px 0 28px; border-top: 1px solid #e9e9e9; background: #fafafa; }
.portal-foot .portal-head-inner { flex-direction: column; gap: 6px; text-align: center; }
.portal-foot-links { margin: 0; font-size: 13px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.portal-foot-links a { color: #2a8e89 !important; font-weight: 500; }
.portal-foot-note { margin: 0; font-size: 12px; color: #888; }

@media (max-width: 640px) {
    .portal-head-logo img { max-height: 46px; }
    .portal-head-hello { display: none; }
    .portal-head-top .portal-head-inner { flex-wrap: wrap; row-gap: 8px; }
    .portal-head-user { display: contents; }
    .portal-head-balance { order: 3; flex: 0 0 100%; align-items: center; white-space: normal; padding: 8px 12px; }
    .portal-head-balance-values { justify-content: center; }
    .portal-head-nav .portal-head-inner { gap: 4px 16px; justify-content: center; }
    .portal-head-nav a { font-size: 13px; }
}
.portal .portal-notice { max-width: 900px; margin: 0 auto 20px; padding: 12px 16px; border-radius: 8px; background: #eaf7f6; color: #2a6f6b; text-align: center; }
.portal .portal-alert { margin-bottom: 20px; padding: 12px 16px; border-radius: 8px; background: #dd7774; color: #fff; }
.portal .portal-login { max-width: 560px; }
.portal .portal-login-intro { margin: 0 0 24px; padding: 16px 20px; border-radius: 12px; background: #eaf7f6; }
.portal .portal-login-intro p { margin: 0 0 10px; font-size: 16px; font-weight: 600; color: #2a6f6b; }
.portal .portal-login-intro ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.portal .portal-login-intro li { position: relative; padding-left: 20px; font-size: 15px; font-weight: 500; color: #222; }
.portal .portal-login-intro li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: #45b4ae; }
.portal .portal-hp { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; }
.portal .portal-help { font-size: 12px; color: #777; }
.portal .portal-link { color: #2a8e89; font-weight: 500; }
.portal .portal-empty { color: #777; }

.portal .portal-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 900px; margin: 0 auto 24px; }
.portal .portal-card { border: 1px solid #e5e5e5; border-radius: 12px; padding: 20px 22px; background: #fff; }
.portal .portal-card h2 { font-size: 16px; font-weight: 600; margin: 0 0 14px; }
.portal .portal-subtitle { font-size: 14px; font-weight: 600; margin: 18px 0 8px; }
.portal .portal-balance { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px dashed #eee; }
.portal .portal-balance:last-of-type { border-bottom: 0; }
.portal .portal-balance-label { color: #555; }
.portal .portal-balance-value { font-size: 18px; font-weight: 600; white-space: nowrap; }
.portal .portal-balance-value.is-negative { color: #d9534f; }
.portal .portal-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
.portal .portal-dl dt { color: #555; }
.portal .portal-dl dd { margin: 0; }
.portal .portal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.portal .portal-actions .btn { padding: 10px 14px; font-size: 12px !important; }

.portal .portal-shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 900px; margin: 0 auto; }
.portal .portal-shortcut { display: block; border: 2px solid #000; border-radius: 12px; padding: 18px 20px; color: #000 !important; }
.portal .portal-shortcut strong { display: block; font-size: 16px; margin-bottom: 4px; }
.portal .portal-shortcut span { color: #666; font-size: 13px; }

.portal .portal-filters { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; max-width: 900px; margin: 0 auto 20px; }
.portal .portal-filters > div { flex: 1 1 160px; }
.portal .portal-filters label { display: block; font-size: 12px; margin-bottom: 4px; }
.portal .portal-filters .form-control { border: 1px solid #ccc; border-radius: 8px; padding: 9px 12px; width: 100%; }
.portal .portal-filters-actions { display: flex; gap: 14px; align-items: center; }
.portal .portal-filters-actions .btn { padding: 10px 18px; }

.portal .portal-table-wrap { max-width: 900px; margin: 0 auto; overflow-x: auto; }
.portal .portal-table { width: 100%; border-collapse: collapse; }
.portal .portal-table th, .portal .portal-table td { padding: 10px 8px; border-bottom: 1px solid #eee; text-align: left; vertical-align: top; }
.portal .portal-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #777; }
.portal .portal-table .is-right { text-align: right; }
.portal .portal-table small { display: block; color: #888; font-size: 11px; }
.portal .portal-table .is-in { color: #2a8e89; font-weight: 600; }
.portal .portal-table .is-out { color: #d9534f; font-weight: 600; }
.portal .portal-table tr.is-muted td { color: #999; }
/* #1947 — foto da peça ao lado do nome nas tabelas de pedido */
.portal .portal-piece { display: inline-flex; align-items: center; gap: 10px; text-align: left; }
.portal .portal-piece img { width: 48px; height: 64px; object-fit: cover; border-radius: 6px; background: #f2f2f2; flex: 0 0 auto; }
.portal .portal-table tr.is-muted .portal-piece img { opacity: .5; }
.portal .portal-section-title { font-size: 16px; font-weight: 600; max-width: 900px; margin: 24px auto 10px; }
.portal .portal-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; background: #eee; font-size: 11px; font-weight: 600; margin: 1px 4px 1px 0; }
.portal .portal-badge.is-warning { background: #fff1e6; color: #c25a2b; }
.portal .portal-badge.is-ok { background: #eaf7f6; color: #2a8e89; }
.portal .portal-badge.is-danger { background: #fdecec; color: #b71c1c; }

/* #1988 — andamento da solicitação de desapego: etapas feitas em verde, as próximas em cinza */
.portal .request-steps { list-style: none; margin: 18px 0 0; padding: 0; }
.portal .request-step { position: relative; display: flex; gap: 12px; padding: 0 0 16px; color: #8a8a8a; }
.portal .request-step:last-child { padding-bottom: 0; }
.portal .request-step::before { content: ""; position: absolute; left: 6px; top: 18px; bottom: 0; width: 2px; background: #e3e3e3; }
.portal .request-step:last-child::before { display: none; }
.portal .request-step-dot { flex: none; width: 14px; height: 14px; margin-top: 3px; border: 2px solid #c8c8c8; border-radius: 50%; background: #fff; }
.portal .request-step-text { display: flex; flex-direction: column; line-height: 1.35; }
.portal .request-step-text small { font-size: 12px; }
.portal .request-step.is-done { color: #1f1f1f; }
.portal .request-step.is-done .request-step-dot { border-color: #2a8e89; background: #2a8e89; }
/* A linha só fica verde entre duas etapas feitas */
.portal .request-step.is-done:has(+ .request-step.is-done)::before { background: #2a8e89; }
.portal .portal-pagination { display: flex; justify-content: center; align-items: center; gap: 18px; margin: 20px 0 0; }
.portal .portal-pagination .is-disabled { color: #bbb; }
.portal .portal-pagination-info { color: #777; font-size: 12px; }

@media (max-width: 640px) {
    .portal .portal-cards, .portal .portal-shortcuts { grid-template-columns: 1fr; }
    .portal .portal-nav-logout { margin-left: 0; }
    .portal .portal-table thead { display: none; }
    .portal .portal-table tr { display: block; border-bottom: 1px solid #e5e5e5; padding: 8px 0; }
    .portal .portal-table td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 4px 0; text-align: right; }
    .portal .portal-table td::before { content: attr(data-label); color: #777; font-size: 12px; text-align: left; }
    .portal .portal-table td:not([data-label])::before { content: none; }
    .portal .portal-table td:not([data-label]) { justify-content: flex-end; }
    .portal .portal-table td small { display: inline; margin-left: 6px; }
    /* #1947 — no celular a célula alinha à direita: o bloco foto+nome precisa encolher e quebrar o texto */
    .portal .portal-table td .portal-piece { flex: 1 1 auto; min-width: 0; justify-content: flex-end; text-align: right; }
    .portal .portal-table td .portal-piece > span { min-width: 0; overflow-wrap: anywhere; }
    .portal .portal-table td .portal-piece small { display: block; margin-left: 0; }
}

/* #1722 — solicitação de desapego online */
.portal .portal-request { max-width: 720px; }
/* Folha de contagem: cada linha é UM tipo de peça.
   Antes eram 3 colunas coladas e o campo ficava a 88px do próprio rótulo e a
   16px do rótulo da coluna vizinha — o olho pareava com o tipo errado. Agora o
   traço liga o nome ao seu campo e o vão entre colunas é maior que tudo que
   existe dentro de uma linha. */
.portal .portal-qty-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 320px)); justify-content: center; gap: 2px 48px; margin-bottom: 8px; }
.portal .portal-qty { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; transition: background-color .12s ease; }
.portal .portal-qty label { margin: 0; flex: 0 1 auto; min-width: 0; cursor: pointer; }
.portal .portal-qty[hidden] { display: none; } /* a busca esconde pela propriedade hidden; display:flex acima venceria a regra do navegador */
.portal .portal-qty .form-control { width: 68px; flex: none; padding: 7px 8px; text-align: center; }
/* O traço é o que amarra nome e campo; some da leitura de quem usa leitor de tela */
.portal .portal-qty-leader { flex: 1 1 12px; min-width: 12px; height: 1px; background: #e4e4e4; }
.portal .portal-qty:hover, .portal .portal-qty:focus-within { background: #f5fbfb; }
/* Linha contada precisa parecer contada: é o que denuncia na hora o número
   digitado no tipo errado */
.portal .portal-qty.is-filled { background: #eaf7f6; }
.portal .portal-qty.is-filled label { font-weight: 600; color: #2a6f6b; }
.portal .portal-qty.is-filled .portal-qty-leader { background: #9fd8d5; }
.portal .portal-qty.is-filled .form-control { border-color: #45b4ae; color: #2a6f6b; font-weight: 600; }
.portal .portal-terms { padding-left: 20px; margin: 0 0 12px; color: #444; font-size: 14px; }
.portal .portal-terms li { margin-bottom: 6px; }
.portal .portal-check { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; cursor: pointer; }
.portal .portal-check input { margin-top: 4px; width: 18px; height: 18px; }
.portal .portal-confirm summary { cursor: pointer; color: #d9534f; font-weight: 500; list-style: none; }
.portal .portal-confirm summary::-webkit-details-marker { display: none; }
.portal .portal-confirm form { margin-top: 10px; padding: 12px 14px; border: 1px solid #f0c9c7; border-radius: 8px; background: #fff7f6; }
.portal .portal-confirm form p { margin: 0 0 10px; }
.portal .portal-confirm .btn { padding: 8px 14px; font-size: 12px !important; }
.portal .portal-request-card { border: 2px solid #45b4ae; }
/* #1948 — chamada para o WhatsApp na tela do pedido: verde da marca do WhatsApp, o mesmo do botão flutuante do site */
.portal .btn-whatsapp-cta { display: inline-flex; align-items: center; gap: 8px; background: #4dc247; border-color: #4dc247; color: #fff !important; }
.portal .btn-whatsapp-cta:hover, .portal .btn-whatsapp-cta:focus { background: #3fae3a; border-color: #3fae3a; color: #fff !important; }
.portal .btn-whatsapp-cta svg { flex: 0 0 auto; }
.portal .portal-card.is-full { grid-column: 1 / -1; }
@media (max-width: 640px) {
    /* Uma coluna: em 375px duas colunas deixavam "Calça Jeans" e "Vestido de
       Festa" quebrando em duas linhas, com o campo de uma colado no nome da
       outra */
    .portal .portal-qty-grid { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
}
.portal .portal-others { margin: 6px 0 14px; padding: 12px 14px; border: 1px dashed #cfcfcf; border-radius: 10px; }
.portal .portal-others summary { cursor: pointer; font-weight: 500; color: #2a8e89; }
.portal .portal-others .form-group { margin: 12px 0; }
.portal .portal-others .portal-qty-grid { margin-bottom: 0; }
.portal .portal-summary { margin: 4px 0 8px; padding: 10px 14px; border-radius: 8px; background: #eaf7f6; color: #2a6f6b; font-size: 14px; }

/* #1722 — montador da lista de desapego.
   A tela mostra o que é da cliente, não o catálogo de 224 tipos da loja: ela
   busca o tipo (ou toca num atalho) e a linha entra na lista dela. */
.portal .tally { margin-bottom: 18px; }
.portal .tally[hidden] { display: none; }

.portal .tally-search { position: relative; margin-bottom: 12px; }
.portal .tally-search label { display: block; margin-bottom: 6px; }
.portal .tally-suggestions { position: absolute; z-index: 5; top: 100%; left: 0; right: 0; margin: 4px 0 0; padding: 4px; list-style: none; background: #fff; border: 1px solid #cfe8e6; border-radius: 10px; box-shadow: 0 8px 20px rgba(42, 111, 107, .12); max-height: 280px; overflow-y: auto; }
.portal .tally-suggestions[hidden] { display: none; }
.portal .tally-suggestion { padding: 9px 12px; border-radius: 7px; cursor: pointer; }
.portal .tally-suggestion.is-marked, .portal .tally-suggestion:hover { background: #eaf7f6; color: #2a6f6b; font-weight: 600; }
.portal .tally-none { padding: 10px 12px; color: #777; font-size: 14px; }
.portal .tally-none-action { display: block; margin-top: 6px; padding: 0; border: 0; background: none; color: #2a8e89; font: inherit; font-weight: 600; cursor: pointer; text-align: left; }

/* Atalhos dos tipos mais trazidos: some o que já está na lista, então o bloco
   encolhe conforme ela monta */
.portal .tally-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.portal .tally-shortcuts[hidden] { display: none; }
.portal .tally-chip { padding: 7px 14px; border: 1px solid #cfe8e6; border-radius: 999px; background: #fff; color: #2a6f6b; font: inherit; font-size: 14px; cursor: pointer; }
.portal .tally-chip:hover { background: #eaf7f6; border-color: #9fd8d5; }

/* #1987 — a folha da lista vem primeiro; o traço embaixo separa da busca */
.portal .tally-sheet { border-bottom: 2px solid #eaf7f6; padding-bottom: 14px; margin-bottom: 16px; }
.portal .tally-sheet-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.portal .tally-sheet-head h3 { margin: 0; font-size: 16px; color: #2a6f6b; }
.portal .tally-total { color: #2a6f6b; font-weight: 600; font-size: 14px; }
.portal .tally-empty { margin: 8px 0 0; color: #888; font-size: 14px; }
.portal .tally-empty[hidden] { display: none; }
.portal .tally-list { display: flex; flex-direction: column; gap: 2px; }

/* A linha dentro da lista: o nome, o traço que leva até o número, o contador
   e o botão de tirar. O campo continua sendo o mesmo do depósito. */
.portal .tally-list .portal-qty { background: #eaf7f6; padding: 7px 10px; }
.portal .tally-list .portal-qty label { font-weight: 600; color: #2a6f6b; }
.portal .tally-list .portal-qty-leader { background: #9fd8d5; }
.portal .tally-list .portal-qty .form-control { width: 46px; padding: 6px 4px; border-color: #45b4ae; color: #2a6f6b; font-weight: 600; }
.portal .tally-count { display: flex; align-items: center; gap: 6px; flex: none; }
.portal .tally-step { width: 30px; height: 30px; flex: none; border: 1px solid #9fd8d5; border-radius: 8px; background: #fff; color: #2a6f6b; font: inherit; font-size: 17px; line-height: 1; cursor: pointer; }
.portal .tally-step:hover { background: #d9f0ee; }
.portal .tally-remove { width: 28px; height: 28px; flex: none; margin-left: 4px; border: 0; border-radius: 8px; background: none; color: #9a9a9a; font-size: 19px; line-height: 1; cursor: pointer; }
.portal .tally-remove:hover { background: #fdeceb; color: #d9534f; }

.portal .tally-chip:focus-visible, .portal .tally-step:focus-visible, .portal .tally-remove:focus-visible, .portal .tally-none-action:focus-visible { outline: 2px solid #2a8e89; outline-offset: 2px; }

@media (max-width: 640px) {
    /* Alvos maiores no celular, onde a lista é montada com o polegar */
    .portal .tally-step { width: 36px; height: 36px; }
    .portal .tally-list .portal-qty .form-control { width: 42px; }
}

/* Valor que a cliente não escolhe (ex.: a loja, quando só existe uma). Não
   imita campo desabilitado — é informação, não um controle bloqueado —, mas o
   rótulo copia o do tema e a altura casa com a do input ao lado (11+11+21+2),
   para os dois campos da linha ficarem alinhados. */
.portal .portal-field-label { display: block; margin-bottom: 6px; font-weight: 500; font-size: 14px; color: #333; }
.portal .portal-field-value { margin: 0; padding: 12px 0; font-size: 15px; line-height: 1.4; font-weight: 600; color: #2a6f6b; }

/* ==== #1996 — Carrinho em formato de pedido ====================================
   Lista de peças à esquerda (linhas com divisória fina, sem cards) e o resumo à
   direita como um cupom, único bloco com fundo. As cores são as do logo: coral
   para a ação principal, verde-água para a secundária e para os pontos. */
.portal .cart { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px 40px; max-width: 1000px; margin: 0 auto; align-items: start; }
.portal .cart-count { margin: 0 0 6px; font-size: 14px; color: #555; }
.portal .cart-lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid #e9e9e9; }
.portal .cart-line { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 0 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid #e9e9e9; }
.portal .cart-line-photo { display: block; width: 64px; height: 84px; border-radius: 8px; overflow: hidden; background: #f2f2f2; }
.portal .cart-line-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portal .cart-line-info { min-width: 0; }
.portal .cart-line-name { display: block; font-size: 15px; font-weight: 500; line-height: 1.35; color: #1f1f1f !important; overflow-wrap: anywhere; }
.portal .cart-line-name:hover { color: #2a8e89 !important; }
.portal .cart-line-sku { display: block; margin-top: 2px; font-size: 12px; color: #888; }
.portal .cart-line-remove { margin-top: 6px; }
.portal .cart-line-remove button { padding: 0; border: 0; background: none; font: inherit; font-size: 13px; color: #888; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.portal .cart-line-remove button:hover { color: #dd7774; }
.portal .cart-line-values { display: flex; flex-direction: column; align-items: flex-end; text-align: right; white-space: nowrap; }
.portal .cart-line-values strong { font-size: 15px; font-weight: 600; color: #2a8e89; }
.portal .cart-line-values span { font-size: 12px; color: #666; }
.portal .cart-line-values .cart-line-points { font-size: 13px; color: #444; font-weight: 500; }
/* #2135 — o rótulo longo do valor de venda quebra em duas linhas em vez de tirar largura do nome */
.portal .cart-line-values { max-width: 170px; }
.portal .cart-line-values .cart-line-sale { white-space: normal; }
.portal .cart-continue { display: inline-block; margin-top: 14px; font-size: 14px; }

.portal .cart-summary { position: sticky; top: 16px; padding: 20px 22px 22px; border-radius: 14px; background: #eaf7f6; }
.portal .cart-summary h2 { margin: 0 0 12px; font-size: 16px; font-weight: 600; color: #1f1f1f; }
.portal .cart-totals { margin: 0 0 4px; }
.portal .cart-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px dashed #c9e7e5; }
.portal .cart-total dt { color: #444; font-size: 14px; }
.portal .cart-total dd { margin: 0; text-align: right; }
.portal .cart-total dd strong { display: block; font-size: 18px; font-weight: 700; color: #1f1f1f; }
.portal .cart-total dd small { display: block; font-size: 12px; color: #2a8e89; }
.portal .cart-total.is-short dd strong, .portal .cart-total.is-short dd small { color: #b8641f; }
.portal .cart-total-fee { border-bottom: 0; }
.portal .cart-total-fee dd strong { font-size: 16px; }
/* Falta de pontos: informação do resumo, no tamanho da informação */
.portal .cart-short { display: flex; gap: 8px; margin: 6px 0 14px; padding: 10px 12px; border-radius: 8px; background: #fff; color: #7a4a1c; font-size: 13px; line-height: 1.45; }
.portal .cart-short svg { flex: 0 0 auto; margin-top: 2px; color: #dc8f38; }
.portal .cart-short a { color: #2a8e89; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.portal .cart-form { margin-top: 12px; }
.portal .cart-form .form-group { margin-bottom: 12px; }
.portal .cart-form label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 500; color: #333; }
.portal .cart-form .form-control { width: 100%; padding: 10px 12px; border: 1px solid #cfe8e6; border-radius: 8px; background: #fff; font: inherit; font-size: 14px; }
.portal .cart-form .form-control:focus { outline: 0; border-color: #45b4ae; box-shadow: 0 0 0 3px rgba(69, 180, 174, .18); }
.portal .cart-rules { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: #666; }

/* Botões do portal nas cores da marca. Classes próprias (sem .btn) para o tema
   herdado não impor preto, caixa alta e espaçamento. */
.portal .cart-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border: 0; border-radius: 10px; font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0; text-transform: none; text-decoration: none; cursor: pointer; transition: background-color .15s ease, transform .15s ease; }
.portal .cart-btn:active { transform: translateY(1px); }
.portal .cart-btn:focus-visible { outline: 3px solid rgba(69, 180, 174, .45); outline-offset: 2px; }
.portal .cart-btn-coral { background: #ff6a51; color: #fff !important; }
.portal .cart-btn-coral:hover, .portal .cart-btn-coral:focus { background: #ea5a42; color: #fff !important; }
.portal .cart-btn-teal { background: #45b4ae; color: #fff !important; }
.portal .cart-btn-teal:hover, .portal .cart-btn-teal:focus { background: #3aa39d; color: #fff !important; }
.portal .cart-submit { width: 100%; }
.portal .cart-empty { max-width: 460px; margin: 24px auto; text-align: center; }
.portal .cart-empty p { margin: 0 0 16px; font-size: 16px; color: #555; }

@media (max-width: 860px) {
    .portal .cart { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .portal .cart-summary { position: static; }
}
@media (max-width: 640px) {
    /* #2135 — no celular os três valores descem para baixo do nome, para o rótulo
       "Aquisição ou sem pontos" não espremer o nome da peça */
    .portal .cart-line { grid-template-columns: 56px minmax(0, 1fr); gap: 0 12px; padding: 12px 0; align-items: start; }
    .portal .cart-line-photo { width: 56px; height: 74px; grid-row: span 2; }
    .portal .cart-line-name { font-size: 14px; }
    .portal .cart-line-values { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 6px; text-align: left; white-space: normal; max-width: none; }
    .portal .cart-line-values strong { font-size: 14px; }
    .portal .cart-summary { padding: 18px 16px 20px; border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .portal .cart-btn { transition: none; }
    .portal .cart-btn:active { transform: none; }
}

/* ==== #1982 — Início: carteira, ações com ícones e novidades ====================
   A carteira é o único bloco com cor forte. As ações são uma lista com ícone,
   não cards. #2439 — a loja pediu nova ordem (reunião de 19/10): no celular,
   carteira → ações → passo a passo → novidades; no desktop, carteira e ações
   lado a lado, e o passo a passo e as novidades embaixo, na largura toda.
   Laranja dos títulos (#cf4527): o tom do site (#ff6a51) dá contraste 2,8:1
   sobre branco; este, 4,6:1 (AA). Sobre o verde da carteira nenhum laranja é
   legível, por isso o título dela vai numa etiqueta branca. */
.portal .home { display: grid; grid-template-areas: "wallet" "actions" "steps" "news"; grid-template-columns: minmax(0, 1fr); gap: 28px; max-width: 1000px; margin: 0 auto; }
.portal .wallet { grid-area: wallet; padding: 22px 24px 20px; border-radius: 16px; background: #45b4ae; color: #fff; }
.portal .wallet-label { display: inline-block; margin: 0 0 14px; padding: 4px 12px; border-radius: 999px; background: #fff; font-size: 14px; font-weight: 700; line-height: 1.4; color: #cf4527; }
.portal .wallet-points { display: flex; flex-wrap: wrap; gap: 12px 36px; margin-bottom: 16px; }
.portal .wallet-point { display: flex; flex-direction: column; }
.portal .wallet-point strong small { margin-left: 4px; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .85); letter-spacing: 0; }
.portal .wallet-point span { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .85); }
.portal .wallet-point strong { font-size: 34px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
.portal .wallet-point small { font-size: 13px; color: rgba(255, 255, 255, .85); }
.portal .wallet-point.is-negative strong { color: #ffd9d2; }
.portal .wallet-credit { margin: 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .35); }
.portal .wallet-credit > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0; }
.portal .wallet-credit dt { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .85); }
.portal .wallet-credit dd { margin: 0; font-size: 16px; font-weight: 600; }
.portal .wallet-credit .is-negative dd { color: #ffd9d2; }
.portal .wallet-help { margin: 8px 0 0; font-size: 12px; color: rgba(255, 255, 255, .85); }
.portal .wallet-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 8px 12px 8px 10px; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff !important; font-size: 13px; font-weight: 600; }
.portal .wallet-link:hover, .portal .wallet-link:focus-visible { background: rgba(255, 255, 255, .28); }
.portal .wallet-link .portal-icon-chevron { margin-left: -2px; }
/* #2384 — convite de conversão: quadro claro e compacto dentro da carteira. O botão
   reaproveita .cart-btn (foco, movimento) em verde escuro: contraste AA sem competir
   com o saldo, que segue sendo a única cor forte. */
.portal .wallet-convert { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: #fff; color: #1f1f1f; }
.portal .wallet-convert-title { margin: 0; font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.3; letter-spacing: 0; text-transform: none; color: #cf4527; }
.portal .wallet-convert-text { margin: 2px 0 10px; font-size: 14px; line-height: 1.4; color: #444; }
.portal .wallet-convert-cta { padding: 9px 16px; border-radius: 999px; font-size: 14px; background: #1f6f6b; color: #fff !important; }
.portal .wallet-convert-cta:hover, .portal .wallet-convert-cta:focus { background: #185a57; color: #fff !important; }

.portal .home-actions { grid-area: actions; display: flex; flex-direction: column; border-top: 1px solid #e9e9e9; }
.portal .home-action { display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-bottom: 1px solid #e9e9e9; color: #1f1f1f !important; }
.portal .home-action:hover .home-action-icon, .portal .home-action:focus-visible .home-action-icon { background: #d9f0ee; }
.portal .home-action-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; background: #eaf7f6; color: #2a8e89; transition: background-color .15s ease; }
.portal .home-action-text { flex: 1 1 auto; min-width: 0; }
.portal .home-action-text strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.portal .home-action-text small { display: block; font-size: 13px; color: #666; }
.portal .home-action > .portal-icon-chevron { flex: 0 0 auto; color: #9a9a9a; }
.portal .home-flag { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: #ff6a51; color: #fff; font-size: 11px; font-style: normal; font-weight: 600; vertical-align: 2px; }

/* #2439 — passo a passo resumido: 2 colunas no celular (figura em cima do texto),
   4 no desktop (figura ao lado) */
.portal .home-steps { grid-area: steps; min-width: 0; }
.portal .home-steps-title { margin: 0 0 12px; font-size: 17px; font-weight: 600; }
.portal .home-steps-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.portal .home-step { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; border: 1px solid #e9e9e9; border-radius: 12px; }
.portal .home-step img { width: 40px; height: 40px; flex: 0 0 auto; object-fit: contain; }
.portal .home-step-text { min-width: 0; }
.portal .home-step-text strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.portal .home-step-text small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: #666; }

.portal .home-news { grid-area: news; min-width: 0; }
.portal .home-news-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 12px; }
.portal .home-news-head h2 { margin: 0; font-size: 17px; font-weight: 600; }
.portal .home-news-head a { font-size: 14px; white-space: nowrap; }
.portal .home-news-list { display: grid; grid-auto-flow: column; grid-auto-columns: 128px; gap: 12px; margin: 0; padding: 0 0 6px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.portal .home-news-list::-webkit-scrollbar { display: none; }
.portal .home-news-list li { scroll-snap-align: start; }
.portal .home-news-item { display: block; color: #1f1f1f !important; }
.portal .home-news-photo { display: block; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: #f4f4f4; }
.portal .home-news-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portal .home-news-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 8px; font-size: 13px; font-weight: 500; line-height: 1.3; }
/* #2439 — como no card da vitrine (#2135): a taxa em destaque, os pontos abaixo */
.portal .home-news-fee { display: block; margin-top: 4px; font-size: 14px; font-weight: 600; line-height: 1.3; color: #2a8e89; }
.portal .home-news-points { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: #444; }
.portal .home-last { margin-top: 28px; }

@media (min-width: 861px) {
    .portal .home { grid-template-areas: "wallet actions" "steps steps" "news news"; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 40px; align-items: start; }
    .portal .home-steps-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .portal .home-step { flex-direction: row; align-items: center; gap: 10px; }
    .portal .home-step img { width: 44px; height: 44px; }
    .portal .home-actions { border-top: 0; }
    .portal .home-action:first-child { padding-top: 4px; }
    .portal .home-news-list { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-columns: auto; padding: 0; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
    .portal .home-action-icon { transition: none; }
}

/* ==== #1998 — Extrato: chips de filtro, resumo e linha do tempo por dia ==========
   Os chips repetem o desenho da vitrine (mesmas cores), para a cliente aprender
   um só jeito de filtrar. A única cor forte é o verde das entradas. */
.portal .statement { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 1000px; margin: 0 auto; }
.portal .statement .chips-group { margin-bottom: 12px; min-width: 0; }
.portal .statement .chips-group h2 { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: #555; }
.portal .statement .chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.portal .statement .chips::-webkit-scrollbar { display: none; }
.portal .statement .chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid #cfe8e6; border-radius: 999px; background: #fff; color: #2a6f6b !important; font: inherit; font-size: 13px; font-weight: 500; line-height: 1.2; white-space: nowrap; text-decoration: none; cursor: pointer; }
.portal .statement .chip:hover { background: #eaf7f6; }
.portal .statement .chip:focus-visible { outline: 3px solid rgba(69, 180, 174, .45); outline-offset: 2px; }
.portal .statement .chip.is-active { background: #45b4ae; border-color: #45b4ae; color: #fff !important; }
.portal .statement-dates { margin-top: 8px; }
.portal .statement-dates summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #2a8e89; }
.portal .statement-dates summary::-webkit-details-marker { display: none; }
.portal .statement-dates summary::before { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.portal .statement-dates[open] summary::before { transform: rotate(45deg); }
.portal .statement-dates-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 10px; }
.portal .statement-dates-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #555; }
.portal .statement-dates-form .form-control { padding: 8px 10px; border: 1px solid #cfe8e6; border-radius: 8px; font: inherit; font-size: 14px; }
.portal .statement-dates-form .chip-button { align-self: flex-end; height: 38px; }

.portal .statement-main { min-width: 0; }
.portal .statement-summary { margin-bottom: 20px; padding: 14px 18px; border-radius: 12px; background: #eaf7f6; }
.portal .statement-summary h2 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: #2a6f6b; }
.portal .statement-summary dl { margin: 0; }
.portal .statement-summary dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0; }
.portal .statement-summary dt { font-size: 14px; color: #333; }
.portal .statement-summary dd { margin: 0; display: flex; align-items: baseline; gap: 10px; font-size: 14px; font-weight: 600; }
.portal .statement-summary dd small { font-weight: 500; color: #666; }
.portal .statement .is-in { color: #2a8e89; }
.portal .statement .is-out { color: #1f1f1f; }
/* #2665 — saldo atual no topo do resumo; o resumo do período vem depois do divisor */
.portal .statement-balance dd { font-size: 15px; font-weight: 700; color: #1f1f1f; white-space: nowrap; }
.portal .statement-balance .is-negative dd { color: #d9534f; }
.portal .statement-balance ~ h2 { margin-top: 10px; padding-top: 10px; border-top: 1px solid #cfe8e6; }

.portal .statement-day { margin-bottom: 18px; }
.portal .statement-day h3 { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: #777; }
.portal .statement-lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid #e9e9e9; }
.portal .statement-line { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid #e9e9e9; }
.portal .statement-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; background: #eaf7f6; color: #2a8e89; }
.portal .statement-icon-order, .portal .statement-icon-expired { background: #f3f3f3; color: #666; }
.portal .statement-text { flex: 1 1 auto; min-width: 0; }
.portal .statement-label { display: block; font-size: 14px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.portal .statement-text small { display: block; font-size: 12px; color: #888; }
.portal .statement-value { flex: 0 0 auto; text-align: right; }
.portal .statement-value strong { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; }
.portal .statement-value small { display: block; font-size: 11px; color: #888; }
.portal .statement-empty { margin: 30px auto; text-align: center; color: #555; }
.portal .statement-empty p { margin: 0 0 12px; }

@media (min-width: 861px) {
    .portal .statement { grid-template-columns: 230px minmax(0, 1fr); gap: 24px 36px; align-items: start; }
    .portal .statement-filters { position: sticky; top: 16px; }
    .portal .statement .chips { flex-wrap: wrap; overflow: visible; }
    .portal .statement .chips-group { margin-bottom: 18px; }
    .portal .statement-dates-form { flex-direction: column; align-items: stretch; }
    .portal .statement-dates-form .chip-button { align-self: flex-start; }
}

/* ==== #1999 — Desapegos: lista por mês e detalhe como recibo ===================
   Reaproveita as linhas de ação do Início e o desenho de linha do extrato. A
   única moldura com cor é o recibo; a numeração só aparece na curadoria,
   que é uma sequência de verdade. */
.portal .dropoffs { max-width: 760px; margin: 0 auto; }
.portal .dropoffs-cta { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px 14px; align-items: center; padding: 16px 18px; border: 1.5px solid #cfe8e6; border-radius: 14px; margin-bottom: 10px; }
.portal .dropoffs-cta-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #eaf7f6; color: #2a8e89; }
.portal .dropoffs-cta-text strong { display: block; font-size: 15px; font-weight: 600; }
.portal .dropoffs-cta-text small { display: block; font-size: 13px; color: #666; line-height: 1.4; }
.portal .dropoffs-cta-btn { grid-column: 1 / -1; justify-content: center; }
@media (min-width: 640px) {
    .portal .dropoffs-cta { grid-template-columns: 44px minmax(0, 1fr) auto; }
    .portal .dropoffs-cta-btn { grid-column: auto; }
}
.portal .dropoffs-previous { margin: 0 0 22px; }
.portal .dropoffs-previous summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; font-size: 13px; font-weight: 600; color: #2a8e89; }
.portal .dropoffs-previous summary::-webkit-details-marker { display: none; }
.portal .dropoffs-previous summary::before { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.portal .dropoffs-previous[open] summary::before { transform: rotate(45deg); }
.portal .dropoffs-previous-list { list-style: none; margin: 4px 0 0; padding: 0; }
.portal .dropoffs-previous-list a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #eee; color: #333 !important; font-size: 13px; }
.portal .dropoffs-summary { margin: 18px 0 14px; font-size: 14px; color: #555; }
.portal .dropoffs-summary strong { color: #1f1f1f; }
.portal .dropoffs-empty { margin: 30px auto; text-align: center; color: #555; }
.portal .dropoffs-empty p { margin: 0 0 6px; }
.portal .dropoffs-month { margin-bottom: 18px; }
.portal .dropoffs-month h2 { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: #777; }
.portal .dropoffs-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #e9e9e9; }
.portal .dropoffs-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #e9e9e9; color: #1f1f1f !important; }
.portal .dropoffs-item:hover .dropoffs-icon { background: #d9f0ee; }
.portal .dropoffs-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; background: #eaf7f6; color: #2a8e89; }
.portal .dropoffs-text { flex: 1 1 auto; min-width: 0; }
.portal .dropoffs-text strong { display: block; font-size: 14px; font-weight: 600; }
.portal .dropoffs-text small { display: block; font-size: 12px; color: #777; }
.portal .dropoffs-text .portal-badge { margin-top: 4px; }
.portal .dropoffs-points strong { display: block; font-size: 15px; font-weight: 600; color: #2a8e89; white-space: nowrap; }
.portal .dropoffs-item > .portal-icon-chevron { flex: 0 0 auto; color: #9a9a9a; }

.portal .dropoff { max-width: 760px; margin: 0 auto; }
.portal .dropoff-receipt { padding: 18px 20px 20px; border-radius: 14px; background: #eaf7f6; margin-bottom: 24px; }
.portal .dropoff-receipt-head { margin: 0 0 12px; font-size: 13px; color: #2a6f6b; }
.portal .dropoff-points { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-bottom: 8px; }
.portal .dropoff-point { display: flex; flex-direction: column; }
.portal .dropoff-point span { font-size: 13px; font-weight: 500; color: #2a6f6b; }
.portal .dropoff-point strong { font-size: 30px; font-weight: 700; line-height: 1.1; color: #1f1f1f; }
.portal .dropoff-point strong small { margin-left: 4px; font-size: 13px; font-weight: 500; color: #2a6f6b; }
.portal .dropoff-pieces-count { margin: 0; font-size: 14px; color: #333; }
.portal .dropoff-docs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.portal .dropoff-doc { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1.5px solid #45b4ae; border-radius: 999px; background: #fff; color: #2a6f6b !important; font-size: 13px; font-weight: 600; text-decoration: none; }
.portal .dropoff-doc:hover { background: #d9f0ee; }
.portal .dropoff-doc:focus-visible { outline: 3px solid rgba(69, 180, 174, .45); outline-offset: 2px; }
.portal .dropoff h2 { margin: 0 0 10px; font-size: 16px; font-weight: 600; }
.portal .dropoff-steps { margin-bottom: 24px; }
.portal .steps { list-style: none; margin: 0; padding: 0; }
.portal .step { position: relative; display: flex; gap: 14px; padding: 0 0 18px 0; }
.portal .step::before { content: ""; position: absolute; left: 15px; top: 32px; bottom: -2px; width: 2px; background: #e4e4e4; }
.portal .step:last-child::before { display: none; }
.portal .step-mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%; border: 2px solid #cfcfcf; background: #fff; color: #777; font-size: 13px; font-weight: 700; }
.portal .step.is-done .step-mark { background: #45b4ae; border-color: #45b4ae; color: #fff; }
.portal .step.is-done::before { background: #9fd8d5; }
.portal .step.is-next .step-mark { border-color: #dc8f38; color: #b8641f; }
/* #2664 — retirada das recusadas pendente: vermelho, como a loja pediu */
.portal .step.is-urgent .step-mark { border-color: #c62828; background: #c62828; color: #fff; }
.portal .step.is-urgent .step-text strong { color: #b71c1c; }
.portal .dropoff-pickup-alert { margin: 12px 0 0; padding: 12px 14px; border: 1px solid #f3b4b4; border-radius: 8px; background: #fdecec; color: #8e1414; font-size: 14px; line-height: 1.45; }
.portal .dropoff-pickup-alert strong { display: block; color: #b71c1c; }
.portal .step-text { padding-top: 5px; }
.portal .step-text strong { display: block; font-size: 14px; font-weight: 600; }
.portal .step-text small { display: block; font-size: 12px; color: #777; line-height: 1.4; }
.portal .dropoff-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #e9e9e9; }
.portal .dropoff-piece { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid #e9e9e9; }
.portal .dropoff-piece-text { flex: 1 1 auto; min-width: 0; }
.portal .dropoff-piece-text strong { display: block; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.portal .dropoff-piece-text small { display: block; font-size: 12px; color: #888; }
.portal .dropoff-verdict { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12px; font-weight: 600; color: #777; }
.portal .dropoff-verdict.is-accepted { color: #2a8e89; }
.portal .dropoff-verdict.is-refused { color: #b8641f; }
.portal .dropoff-piece.is-refused .dropoff-piece-points strong { color: #999; text-decoration: line-through; }
.portal .dropoff-piece-points { flex: 0 0 auto; text-align: right; }
.portal .dropoff-piece-points strong { display: block; font-size: 14px; font-weight: 600; color: #2a8e89; white-space: nowrap; }
.portal .dropoff-piece-points small { display: block; font-size: 11px; color: #888; }