/*
 * manual-choice.css — tela de escolha manual de cotas (type_of_draw = 2).
 * Tudo sob .mc (prefixo mc-): não usar am- (PR #671) nem mr- (campanha/marcos.css).
 *
 * Visual escuro fixo; só a cor de destaque vem do tema do cliente
 * (--mc-ac / --mc-ac-ink, definidas inline a partir de participate_color).
 */
.mc {
    /* Os nomes --mc-* continuam (129 usos nesta folha), mas o VALOR agora
       vem dos tokens do TOKENS.md: assim a tela acompanha o modelo escolhido
       em Temas V2 como os outros blocos da campanha, sem reescrever cada
       regra. O fallback é a paleta escura de antes, para quem ainda não
       escolheu um modelo; o PHP (tema_manual_vars) segue sobrescrevendo
       quem personaliza cor a cor. */
    --mc-ac: var(--ur-accent, #e3b243);
    --mc-ac-ink: var(--ur-accent-ink, #111111);
    --mc-ac-soft: var(--ur-accent-wash, rgba(227, 178, 67, .22));
    --mc-bg: var(--ur-bg, #0b0b0a);
    --mc-card: var(--ur-card, #161614);
    --mc-line: var(--ur-line, #2a2926);
    --mc-off: var(--ur-off-soft, #2a2a28);
    --mc-txt: var(--ur-tx, #f3f1ec);
    --mc-mut: var(--ur-mu, #9a988f);
    --mc-dim: var(--ur-mu, #5f5e59);
    --mc-gold: var(--ur-accent, #f2c14e);
    /* Raios no mesmo tom dos widgets da campanha, que agora dividem a tela
       com estes blocos: lá os cartões têm 8px, os chips de desconto 12px e o
       "Por apenas" 8px. Os 22px/14px/16px de antes vinham de quando a tela
       era um mundo à parte, e ao lado dos widgets novos saltavam à vista. */
    --mc-r: 12px;
    --mc-rs: 8px;
    --mc-rc: 10px;
    --mc-f-ui: Manrope, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mc-f-disp: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;

    background: var(--mc-bg);
    color: var(--mc-txt);
    font-family: var(--mc-f-ui);
    font-size: 14px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 12px;
}
.mc:empty { display: none; }
.mc *, .mc *::before, .mc *::after { box-sizing: border-box; }
.mc a { color: inherit; text-decoration: none; }
.mc button { font-family: inherit; color: inherit; }
.mc :focus-visible { outline: 2px solid var(--mc-ac); outline-offset: 2px; }
.mc [hidden] { display: none !important; }

.mc-sec { padding: 24px 16px 0; scroll-margin-top: 90px; }
.mc-sec:last-child { padding-bottom: 20px; }
.mc-sh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mc-sh h2 {
    margin: 0;
    font: 800 22px/1 var(--mc-f-disp);
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--mc-txt);
}
.mc-sh__aside { font-size: 12px; font-weight: 700; color: var(--mc-ac); }
.mc-sub { margin: 6px 0 0; font-size: 12px; font-weight: 600; color: var(--mc-mut); }
.mc-card { background: var(--mc-card); border: 1px solid var(--mc-line); border-radius: var(--mc-r); padding: 14px; }
.mc-empty {
    padding: 18px;
    text-align: center;
    border: 1px dashed var(--mc-line);
    border-radius: var(--mc-r);
    font-size: 13px;
    color: var(--mc-mut);
}
.mc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--mc-line);
    background: var(--mc-card);
    font-size: 12px;
    font-weight: 700;
    color: var(--mc-txt);
}
.mc-btn-ghost {
    height: 40px;
    padding: 0 16px;
    border-radius: var(--mc-rs);
    border: 1px solid var(--mc-line);
    background: var(--mc-card);
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
}
.mc-dot { width: 8px; height: 8px; border-radius: 50%; background: #2fcf7a; display: inline-block; flex: none; }
.mc-dot--off { background: var(--mc-dim); }
.mc-dot--pulse { animation: mc-pulse 1.4s infinite; }
@keyframes mc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.mc-spin {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--mc-line);
    border-top-color: var(--mc-ac);
    animation: mc-spin .8s linear infinite;
    vertical-align: -3px;
}
@keyframes mc-spin { to { transform: rotate(360deg); } }

/* ── Prêmio (P2) ─────────────────────────────────────────────────────── */
.mc-hero { padding: 10px 8px 0; }
.mc-hero__media {
    position: relative;
    border-radius: var(--mc-r);
    overflow: hidden;
    max-width: 100%;
    background: #000;
}
/* A foto aparece inteira, na proporção dela: a caixa acompanha a altura da
   imagem em vez de recortar num 4:3. Sem altura em % (o Safari não resolve). */
.mc-hero__track {
    display: flex;
    align-items: center;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.mc-hero__track::-webkit-scrollbar { display: none; }
.mc-hero__slide { flex: 0 0 100%; scroll-snap-align: center; }
.mc-hero__slide img, .mc-hero__slide video { width: 100%; height: auto; max-height: 80vh; object-fit: contain; display: block; }
.mc-hero__fade {
    position: absolute;
    inset: auto 0 0 0;
    height: 40%;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .8));
    pointer-events: none;
}
.mc-hero__status {
    position: absolute;
    left: 12px;
    top: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
}
.mc-hero__dots {
    position: absolute;
    right: 12px;
    top: 18px;
    display: flex;
    gap: 6px;
}
.mc-hero__dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .45);
    cursor: pointer;
    transition: width .2s;
}
.mc-hero__dots button[aria-selected="true"] { width: 22px; background: #fff; }
.mc-hero__row {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    pointer-events: none;
}
.mc-hero__title {
    margin: 0;
    min-width: 0;
    font: 800 34px/.95 var(--mc-f-disp);
    text-transform: uppercase;
    letter-spacing: .01em;
    color: #fff;
    text-wrap: balance;
    overflow-wrap: anywhere;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}
.mc-hero__price {
    flex: none;
    padding: 8px 12px;
    border-radius: var(--mc-rs);
    background: var(--mc-ac);
    color: var(--mc-ac-ink);
    text-align: center;
}
.mc-hero__price small { display: block; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.mc-hero__price b { font: 800 24px/1 var(--mc-f-disp); white-space: nowrap; }
.mc-hero__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }


/* ── Progresso (G2) ──────────────────────────────────────────────────── */
.mc-progress { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.mc-sec > .mc-progress:first-child { margin-top: 0; }
.mc-progress__bar { flex: 1; height: 12px; border-radius: 999px; background: var(--mc-card); overflow: hidden; }
.mc-progress__bar div { height: 100%; border-radius: 999px; background: var(--mc-ac); }
.mc-progress__txt { flex: none; font-size: 18px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }

/* ── Ganhadores / descrição / encerrada ──────────────────────────────── */
.mc-winners { display: grid; gap: 8px; margin-top: 12px; }
.mc-winner { display: flex; align-items: center; gap: 12px; background: var(--mc-card); border: 1px solid var(--mc-ac); border-radius: var(--mc-r); padding: 10px 12px; }
.mc-winner img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.mc-winner b { display: block; text-transform: uppercase; color: #fff; }
.mc-winner span { font-size: 12px; color: var(--mc-mut); }
.mc-fold { padding: 0; }
.mc-fold__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    cursor: pointer;
    list-style: none;
}
.mc-fold__head::-webkit-details-marker { display: none; }
.mc-fold__head h2 { margin: 0; font: 800 22px/1 var(--mc-f-disp); text-transform: uppercase; letter-spacing: .03em; color: var(--mc-txt); }
.mc-fold__hint { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--mc-ac); }
.mc-fold__hint i {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .15s;
}
.mc-fold[open] .mc-fold__hint i { transform: rotate(-135deg) translateY(-2px); }
.mc-fold__close, .mc-fold[open] .mc-fold__open { display: none; }
.mc-fold[open] .mc-fold__close { display: inline; }
.mc-fold__body { padding: 0 14px 14px; border-top: 1px solid var(--mc-line); padding-top: 12px; }
.mc-desc { font-size: 14px; color: #dedcd5; overflow-wrap: anywhere; }
.mc-desc p:last-child { margin-bottom: 0; }
.mc-desc img { max-width: 100%; height: auto; }
.mc-closed { display: grid; gap: 4px; text-align: center; }
.mc-closed b { font: 800 20px var(--mc-f-disp); text-transform: uppercase; color: #fff; }
.mc-closed span { color: var(--mc-mut); }

/* ── Promoção ────────────────────────────────────────────────────────── */
.mc-promos { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-top: 12px; padding-bottom: 2px; }
.mc-promo {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 14px;
    border-radius: var(--mc-rs);
    border: 1px solid var(--mc-ac);
    background: var(--mc-ac-soft);
    cursor: pointer;
    text-align: left;
}
.mc-promo b { font: 800 18px/1 var(--mc-f-disp); text-transform: uppercase; color: #fff; }
.mc-promo span { font-size: 12px; font-weight: 700; color: var(--mc-ac); }

/* ── Top compradores (lista) ────────────────────────────────────────── */
.mc-rank {
    list-style: none;
    margin: 12px 0 0;
    padding: 6px 14px;
    background: var(--mc-card);
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-r);
}
.mc-rank__row { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.mc-rank__row + .mc-rank__row { border-top: 1px solid var(--mc-line); }
.mc-rank__rest { list-style: none; margin: 0; padding: 0; }
.mc-rank__rest .mc-rank__row { border-top: 1px solid var(--mc-line); }
.mc-rank--fold > summary { list-style: none; cursor: pointer; }
.mc-rank--fold > summary::-webkit-details-marker { display: none; }
.mc-rank__chev {
    flex: none;
    width: 8px;
    height: 8px;
    margin-left: 2px;
    border-right: 2px solid var(--mc-ac);
    border-bottom: 2px solid var(--mc-ac);
    transform: rotate(45deg) translateY(-2px);
    transition: transform .15s;
}
.mc-rank--fold[open] .mc-rank__chev { transform: rotate(-135deg) translateY(-2px); }
.mc-rank__pos { width: 26px; flex: none; display: grid; place-items: center; font: 800 16px var(--mc-f-disp); color: var(--mc-mut); }
.mc-rank__row--p1 .mc-rank__pos { color: var(--mc-ac); }
.mc-rank__row--p2 .mc-rank__pos { color: #c9c9c5; }
.mc-rank__row--p3 .mc-rank__pos { color: #b9824f; }
.mc-rank__avatar {
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font: 800 14px var(--mc-f-disp);
    background: var(--mc-line);
    color: var(--mc-txt);
}
.mc-rank__row--p1 .mc-rank__avatar { background: var(--mc-ac); color: var(--mc-ac-ink); }
.mc-rank__name { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-rank__qty { flex: none; font: 800 20px/1 var(--mc-f-disp); color: #fff; font-variant-numeric: tabular-nums; }
.mc-rank__qty small { font: 700 10px var(--mc-f-ui); letter-spacing: .06em; color: var(--mc-mut); }
.mc-rank__empty { margin-top: 12px; }
.mc-rank__note { margin: 10px 0 0; text-align: center; font-size: 12px; font-weight: 700; color: var(--mc-ac); }

/* ── Cotas premiadas ─────────────────────────────────────────────────── */
.mc-awarded { margin-top: 12px; max-height: 320px; overflow-y: auto; padding: 4px; border-radius: var(--mc-r); }

/* ── Sorte rápida (Q2) ───────────────────────────────────────────────── */
.mc-quick { display: flex; gap: 8px; margin-top: 14px; }
.mc-quick__btn {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid var(--mc-ac);
    background: transparent;
    color: var(--mc-ac) !important;
    font-weight: 800;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
}
.mc-quick__btn.is-main { background: var(--mc-ac); color: var(--mc-ac-ink) !important; }
.mc-quick__btn:active { transform: scale(.97); }

/* ── Busca (S2) ──────────────────────────────────────────────────────── */
.mc-search { margin-top: 12px; }
.mc-search__box {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    height: 46px;
    padding: 0 12px;
    background: var(--mc-card);
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-rs);
    cursor: text;
}
.mc-search__box:focus-within { border-color: var(--mc-ac); }
.mc-search__prefix { font: 800 13px var(--mc-f-disp); letter-spacing: .08em; color: var(--mc-mut); }
.mc-search__box input {
    flex: 1;
    min-width: 0;
    height: 44px;
    border: 0;
    outline: none;
    background: transparent;
    color: #fff;
    font: 600 16px var(--mc-f-ui); /* 16px evita o zoom do iOS */
}
.mc-search__box input::placeholder { color: #77756f; }
.mc-search__clear {
    flex: none;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: var(--mc-line);
    font-size: 14px;
    cursor: pointer;
}

/* ── Filtros (F1) ────────────────────────────────────────────────────── */
.mc-filters { display: flex; gap: 6px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.mc-filter {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    /* Mesmo raio do botão Surpresinha (.mc-cart__act): eram pílulas de 999px
       ao lado de botões de canto reto, e o contraste saltava à vista. */
    border-radius: 6px;
    border: 1px solid var(--mc-line);
    background: var(--mc-card);
    color: #c9cbd1 !important;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}
.mc-filter em {
    font-style: normal;
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--mc-off);
    color: #a3a19a;
    font-variant-numeric: tabular-nums;
}
.mc-filter.is-on { border-color: var(--mc-ac); background: var(--mc-ac-soft); color: var(--mc-txt) !important; }
.mc-filter.is-on em { background: var(--mc-ac); color: var(--mc-ac-ink); }

/* ── Grade (N4) ──────────────────────────────────────────────────────── */
.mc-grid-wrap { margin-top: 14px; }
.mc-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.mc-grid--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mc-grid__empty { grid-column: 1 / -1; }
.mc-cell {
    position: relative;
    min-height: 0;
    padding: 8px 0;
    display: grid;
    place-items: center;
    border-radius: 6px;
    font: 700 12.5px/1.2 var(--mc-f-ui);
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    transition: transform .12s, background-color .12s, box-shadow .12s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.mc-cell.is-free { background: var(--mc-card); color: var(--mc-txt) !important; border: 1px solid var(--mc-line); cursor: pointer; }
.mc-cell.is-free:hover { border-color: var(--mc-ac); }
.mc-cell.is-sel {
    background: var(--mc-ac);
    color: var(--mc-ac-ink) !important;
    border: 1px solid var(--mc-ac);
    transform: scale(1.04);
    box-shadow: 0 6px 18px var(--mc-ac-soft);
    cursor: pointer;
}
.mc-cell.is-sel::after {
    content: "✓";
    position: absolute;
    right: 5px;
    top: 5px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--mc-ac-ink);
    color: var(--mc-ac);
    font: 800 10px/14px var(--mc-f-ui);
    text-align: center;
}
.mc-cell.is-res {
    background: var(--ur-wait-soft, rgba(217, 119, 6, .14));
    color: var(--ur-wait, #d97706) !important;
    border: 1px solid transparent;
    cursor: not-allowed;
}
.mc-cell.is-paid {
    /* --mc-paid: cor escolhida em Personalizar Tema (manual_paid_color); sem ela, o listrado. */
    background: var(--mc-paid, var(--ur-off-soft, rgba(138, 138, 132, .16)));
    color: var(--ur-off, #8a8a84) !important;
    border: 1px solid transparent;
    text-decoration: line-through;
    cursor: not-allowed;
}
.mc-cell:disabled { opacity: 1; }
.mc-cell.is-res:disabled { opacity: .8; }
.mc-grid-state { padding: 18px; text-align: center; color: var(--mc-mut); font-size: 13px; }
.mc-grid-more { margin-top: 12px; text-align: center; }

/* ── Legenda (L1) ────────────────────────────────────────────────────── */
.mc-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 16px; font-size: 11px; font-weight: 700; color: var(--mc-mut); }
.mc-legend span { display: flex; align-items: center; gap: 6px; }
.mc-legend i { width: 13px; height: 13px; border-radius: 4px; display: inline-block; }
.mc-legend__free { background: var(--mc-card); border: 1px solid var(--mc-line); }
.mc-legend__res { background: var(--ur-wait-soft, rgba(217, 119, 6, .14)); border: 1px solid var(--ur-wait, #d97706); }
.mc-legend__paid { background: var(--ur-off-soft, rgba(138, 138, 132, .16)); border: 1px solid var(--ur-off, #8a8a84); }
.mc-legend__sel { background: var(--mc-ac); }

/* ── Carrinho (C2): gruda no rodapé enquanto a grade está na tela ────── */
/* overflow: hidden no bloco viraria o contêiner do sticky e o carrinho não
   grudaria; overflow: clip resolveria, mas não existe em Safari < 16. */
.mc.mc--grid { overflow: visible; }
.mc-picker { padding-bottom: 0; }
.mc-cart {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 20px -16px 0;
    border-radius: 10px 10px 12px 12px; /* menos arredondado que o bloco */
    /* Fundo do tema, não a cor escura fixa de antes: no modelo Claro o
       carrinho ficava preto no meio de uma tela clara. */
    background: var(--mc-bg);
    border-top: 1px solid var(--mc-line);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .18);
}
.mc-cart { transition: transform .25s ease-out, opacity .25s ease-out; }
.mc-cart.is-waiting { transform: translateY(110%); opacity: 0; pointer-events: none; }
.mc-cart__in { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
.mc-cart__chips { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
/* Os chips quebram em linhas em vez de rolar na horizontal: com muitos
   números escolhidos, o cliente via só os primeiros. */
.mc-cart__list { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; padding: 2px 0; }
.mc-cart__list::-webkit-scrollbar { display: none; }
.mc-chipnum {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    padding: 0 6px 0 8px;
    border-radius: 6px;
    border: 1px solid var(--mc-line);
    background: var(--mc-card);
    color: var(--mc-txt);
    font: 700 12.5px var(--mc-f-ui);
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.mc-chipnum.is-hidden { display: none; }
.mc-chipnum small { font: 700 11px var(--mc-f-ui); color: var(--mc-mut); }
.mc-chipnum--more { cursor: default; padding: 0 10px; color: var(--mc-mut); }
/* Surpresinha, Ver todos e Limpar: mesma linha, mesmo peso. */
.mc-cart__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.mc-cart__act {
    border: 1px solid var(--mc-line);
    background: var(--mc-card);
    color: var(--mc-txt);
    border-radius: 6px;
    padding: 7px 12px;
    font: 700 12.5px var(--mc-f-ui);
    cursor: pointer;
}
.mc-cart__act:hover { border-color: var(--mc-ac); }
.mc-cart__act[hidden] { display: none; }
.mc-cart__hint { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--mc-gold); text-align: center; }
.mc-cta {
    width: 100%;
    min-height: 58px;
    border: 0;
    border-radius: var(--mc-rs);
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--mc-ac);
    color: var(--mc-ac-ink) !important;
    font-family: var(--mc-f-ui);
    text-align: left;
    cursor: pointer;
    transition: opacity .15s, background-color .15s;
}
/* O style.css global pinta #add_to_cart no :hover/:active com
   --tema-participate-hover-* e !important. Quando a loja não escolhe essa
   cor, as variáveis não existem e o botão ficava sem fundo — transparente
   sobre o carrinho. Aqui o acento é o padrão das duas. */
.mc-cart .mc-cta:hover,
.mc-cart .mc-cta:active {
    background: var(--tema-participate-hover-bg, var(--mc-ac)) !important;
    border-color: var(--tema-participate-hover-bg, var(--mc-ac)) !important;
    color: var(--tema-participate-hover-text, var(--mc-ac-ink)) !important;
}
.mc-cart .mc-cta:hover *,
.mc-cart .mc-cta:active * {
    color: var(--tema-participate-hover-text, var(--mc-ac-ink)) !important;
}

.mc-cta.is-off { background: var(--mc-card); color: var(--mc-mut) !important; }
.mc-cta:disabled { opacity: .55; cursor: wait; }
.mc-cart .mc-cta:disabled { opacity: 1; background: var(--mc-card); color: #6f6f6c !important; cursor: not-allowed; }
/* Seta + texto + total, como o CTA das outras telas. O tema SDS já tinha
   esse formato; agora vale também no padrão. */
.mc-cta__arrow {
    flex: none;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--mc-ac-ink);
    color: var(--mc-ac);
}
.mc-cta__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mc-cta__text small { margin-top: 2px; font-size: 12px; font-weight: 400; line-height: 16px; opacity: .9; }
.mc-cta__label { font-size: 16px; font-weight: 700; line-height: 18px; }
.mc-cta__total { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.mc-cta__total s { font-size: 12px; font-weight: 700; opacity: .7; }
.mc-cta__total b { font: 700 16px/1 var(--mc-f-ui); }
.mc-cart__foot { margin: 8px 0 0; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .04em; color: #6f6f6c; }

/* ── Confirmação da reserva ──────────────────────────────────────────── */
.mc-modal { --mc-rs: 14px; }
.mc-modal .modal-content { border-radius: 20px; }
/* O card do pedido é o .ur-promo do checkout; aqui só a lista de números
   que vem abaixo dele. Cores por token: o fundo claro fixo de antes
   deixava texto branco sobre branco no tema escuro. */
.mc-co__nums {
    margin-top: 8px;
    padding: 0 2px;
    font-size: 13px;
    color: var(--ur-mu, var(--mc-mut));
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}
.mc-co__user { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.mc-co__user img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.mc-co__user b { display: block; }
.mc-co__user span { font-size: 13px; color: var(--ur-mu, var(--mc-mut)); }
.mc-co__note { margin: 14px 0; font-size: 12px; color: var(--ur-mu, var(--mc-mut)); }
.mc-cta--block { justify-content: center; }
.mc-modal .mc-cta { font-family: Manrope, system-ui, sans-serif; }
.mc-co__switch { display: block; margin-top: 12px; text-align: center; font-size: 13px; color: var(--ur-mu, var(--mc-mut)); }

/* Spinner global (#overlay) da tela */
#overlay { position: fixed; inset: 0; width: 100%; height: 100%; display: none; background: rgba(0, 0, 0, .6); z-index: 99999999; }
#overlay .cv-spinner { height: 100%; display: flex; justify-content: center; align-items: center; }
#overlay .spinner { width: 40px; height: 40px; border: 4px solid #ddd; border-top: 4px solid #2e93e6; border-radius: 50%; animation: mc-spin .8s linear infinite; }

/* ── Celular: a coluna tem ~360px, então os tamanhos do desktop pesavam ── */
@media (max-width: 480px) {
    .mc-sec { padding-top: 20px; }
    .mc-sh h2, .mc-fold__head h2 { font-size: 19px; }
    .mc-sh__aside, .mc-fold__hint { font-size: 11px; }
    .mc-sub { font-size: 11px; }

    .mc-hero { padding-top: 8px; }
    .mc-hero__title { font-size: 27px; }
    .mc-hero__status { font-size: 10px; padding: 5px 9px; }
    .mc-hero__price { padding: 6px 10px; }
    .mc-hero__price b { font-size: 20px; }
    .mc-fold__head { padding: 12px 14px; }

    .mc-rank__row { gap: 10px; padding: 10px 0; }
    .mc-rank__pos { width: 22px; font-size: 14px; }
    .mc-rank__avatar { width: 32px; height: 32px; font-size: 13px; }
    .mc-rank__name { font-size: 13px; }
    .mc-rank__qty { font-size: 17px; }

    .mc-search__box { height: 42px; }
    .mc-search__box input { height: 40px; } /* fonte fica em 16px: menos que isso o iPhone dá zoom */
    /* Pílulas compactas: cabem inteiras a partir de ~375px; abaixo disso a
       fileira rola de lado, como no desktop estreito. */
    .mc-filters { gap: 4px; }
    .mc-filter { height: 32px; padding: 0 6px; gap: 3px; font-size: 10.5px; }
    .mc-filter em { font-size: 10px; padding: 1px 5px; }
    .mc-progress__bar { height: 10px; }
    .mc-progress__txt { font-size: 16px; }

    .mc-grid { gap: 6px; }
    .mc-cell { min-height: 46px; font-size: 18px; border-radius: 6px; }
    .mc-cell.is-sel::after { width: 12px; height: 12px; font-size: 9px; line-height: 12px; right: 4px; top: 4px; }
    .mc-legend { font-size: 10px; }

    .mc-chipnum { height: 24px; font-size: 12px; }
    .mc-cta { min-height: 52px; padding: 0 16px; }
    .mc-cta__label { font-size: 14px; }
    .mc-cta__total b { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
    .mc * { animation: none !important; transition: none !important; }
}

/* ── Termos de uso (manual_choice/terms.php) ───────────────────────── */

.mc-terms__lead {
  margin: 0 0 8px;
  font-weight: 700;
  color: var(--mc-txt);
}

.mc-terms__list {
  margin: 0;
  padding-left: 18px;
}

.mc-terms__list li {
  margin-bottom: 6px;
}

.mc-terms__list li:last-child {
  margin-bottom: 0;
}

.mc-terms__link {
  display: inline-block;
  margin-top: 10px;
  color: var(--mc-ac);
  font-weight: 700;
  text-decoration: underline;
}