/* =====================================================================
   CHECKOUT — Figma "checkoutcosmic" (frames CHECKOUTPC / CHECKOUTCELULAR)

   POR QUE ESTE ARQUIVO EXISTE (2 motivos):
   1) O tema usa TAILWIND COMPILADO (tw-a.css + tw-b.css). Classe com valor
      arbitrário (h-[72px], text-[46px], rounded-[13px]...) NÃO existe no
      build e simplesmente não aplica nada. Então as medidas/cores do
      checkout moram aqui, em CSS puro.
      Recompilar o Tailwind: ~/Documents/cosmicbay/otimizacao/tw-build/README.md
   2) O servidor da CentralCart tem limite de tamanho por arquivo (~64KB) e
      DESCARTA o PATCH em silêncio quando passa. Com o dragão embutido em
      data URI, o pages/checkout.html estourava. Separando o CSS, cada
      arquivo fica com folga.

   Tokens tirados do .fig:
     roxo #c462fc · laranja #ff8a5d · laranja do cupom #ff5e00
     cartão claro #fafafa / borda #dedede / raio 20
     resumo do pedido = gradiente radial roxo→laranja
     chips da barra: timer #44a830 · oferta #64eb49
   ===================================================================== */

#checkout {
  --cc-purple: #c462fc;
  --cc-orange: #ff8a5d;
  --cc-coupon: #ff5e00;
  --cc-grad: linear-gradient(90deg, var(--cc-purple) 0%, var(--cc-orange) 100%);
  --cc-grad-rev: linear-gradient(90deg, var(--cc-orange) 0%, var(--cc-purple) 100%);
  padding-bottom: 64px;
}

/* Igual à página do Pix: sem navbar dentro do fluxo de pagamento. */
body:has(#checkout) > div:has(> .navbar-border-wrap) { display: none !important; }

/* Torna o .hidden determinístico aqui dentro: checkout.js e custom-fields.js
   ligam/desligam elementos por essa classe. */
#checkout .hidden { display: none !important; }

/* ===================== barra de oferta + dragão ==================== */
/* Desktop = barra full-bleed quadrada (Rectangle 52, 1920x75, sem raio).
   overflow visível de propósito: no .fig o dragão é maior que a barra e
   transborda pra cima e pra baixo. */
.cc-bar { background: var(--cc-grad); position: relative; overflow: visible; }
/* position: static de propósito — assim o dragão se posiciona pela .cc-bar
   (que é full-bleed no desktop) e não por este container centralizado.
   No .fig o x do dragão é medido a partir da borda da TELA. */
.cc-bar-inner {
  position: static;
  min-height: 89px;              /* .fig mobile: cartão 345x89 */
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px 10px 101px;  /* .fig mobile: o texto começa em x=101 */
}

/* .fig mobile: "image 4" 92x88 em (0,1) — colado na esquerda, dentro do
   cartão. Desktop tem outra medida, no media query lá embaixo.
   scaleMode do arquivo é STRETCH, por isso background-size 100% 100%.
   A arte em si mora em styles/checkout-dragon.css (limite de 64KB). */
.cc-dragon {
  position: absolute; left: 0; top: 1px; transform: none;
  width: 92px; height: 88px; pointer-events: none; z-index: 2;
  background-size: 100% 100%; background-repeat: no-repeat; background-position: center;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .28));
}
.cc-bar-title {
  flex: 1 1 auto; text-align: center;
  color: #fff; font-weight: 700; font-size: 14px; line-height: 1.15; letter-spacing: -0.02em;
}




/* ============================ cabeçalho =========================== */
.cc-head { margin: 28px 0 24px; text-align: center; }
.cc-head-row { display: flex; align-items: center; justify-content: center; gap: 14px; }
.cc-back {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: #121212; color: #fff; transition: transform .15s, filter .2s;
}
.cc-back:hover { filter: brightness(1.6); transform: translateX(-2px); }
/* .fig CHECKOUTCELULAR: título 206x38 (~28px), subtítulo 264x19 (~13px) */
.cc-title { font-size: 28px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--cc-purple); }
.cc-sub { font-size: 14px; color: #979797; letter-spacing: -0.01em; margin-top: 4px; }

/* ============================== grade ============================= */
.cc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.cc-col-left { order: 2; }
#upsell-card { order: 1; }
.cc-col-right { order: 3; }
.cc-col-left > * + * { margin-top: 20px; }
.cc-col-right > * + * { margin-top: 20px; }

/* ============================= cartões ============================ */
.cc-card {
  position: relative;
  background: #fafafa;
  border: 1px solid #dedede;
  border-radius: 20px;
  padding: 20px;
  text-align: center;
}
.cc-card + .cc-card { margin-top: 20px; }

/* .fig CHECKOUTCELULAR: "INFORME SEUS DADOS" 165x17 (~14px),
   "FORMAS DE PAGAMENTO" 197x19 (~15px) */
.cc-h2 {
  color: #3a3c3f; letter-spacing: 2px; text-transform: uppercase;
  font-weight: 700; line-height: 1; font-size: 14px; margin-bottom: 16px;
}
.cc-h2-lg { font-size: 15px; }
.cc-h2-sub { margin-top: 20px; }

/* Selo pequeno no canto do cartão de pagamento. É bem miúdo de propósito
   (no .fig tem 107x19 com texto de 8.7px): se crescer, encosta no título
   centralizado "FORMAS DE PAGAMENTO". */
.cc-card-seal {
  position: absolute; right: 12px; top: 12px;
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 7px; border-radius: 999px;
  background: rgba(255, 138, 93, .6); border: 1px solid var(--cc-orange);
  color: #fff; font-size: 9px; font-weight: 500; white-space: nowrap;
}
.cc-card-seal .size-4 { width: 12px; height: 12px; }

/* ======================= formas de pagamento ====================== */
.cc-gw-list { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
/* Aba de pagamento: no .fig o "Active tab" tem 173x52 (mobile) e 245x67
   (desktop), raio 20.8 — daí o min-width, senão a pilula fica curta demais. */
.cc-gw {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; min-width: 173px; padding: 0 24px; border-radius: 21px;
  border: 1px solid #dedede; background: #fff; color: #3a3c3f;
  transition: border-color .2s, background .2s, color .2s;
}
.cc-gw:hover { border-color: rgba(196, 98, 252, .6); }
.cc-gw-icon { height: 26px; width: auto; object-fit: contain; }
.cc-gw-label { font-size: 18px; font-weight: 700; letter-spacing: 2px; }
/* #checkout na frente só pra garantir que nada do tema ganhe daqui. */
#checkout .cc-gw[data-selected="true"] {
  background: var(--cc-grad); border-color: transparent; color: #fff;
}
#checkout .cc-gw[data-selected="true"] .cc-gw-icon { filter: brightness(0) invert(1); }

/* ============================= campos ============================= */
.cc-fields { text-align: left; }
.cc-fields > * + * { margin-top: 12px; }

/* "Field Placeholder" do Figma: fill #e9e9e9 + borda em gradiente, r20 */
.cc-gfield {
  display: block;
  background: var(--cc-grad-rev);
  padding: 1.5px;
  border-radius: 20px;
}
.cc-gfield > input,
.cc-gfield > select {
  display: block; width: 100%;
  height: 51px; padding: 0 20px;
  font-size: 15px; line-height: 51px;
  background: #e9e9e9; color: #1a1a1a;
  border: 0 !important; border-radius: 18.5px;
  outline: none; box-shadow: none !important;
  -webkit-appearance: none; appearance: none;
}
.cc-gfield > input::placeholder { color: #848484; opacity: 1; }
.cc-gfield > input:focus,
.cc-gfield > select:focus { box-shadow: none !important; outline: none; }

/* o checkout.js marca o input inválido com .cc-field-error */
.cc-gfield > input.cc-field-error,
.cc-field-error { box-shadow: 0 0 0 2px #ff4d4d inset !important; }

/* o checkout.js esconde o INPUT do CPF; a moldura vai junto */
.cc-gfield:has(> input.hidden) { display: none; }

.cc-phone-row { display: flex; align-items: stretch; gap: 8px; }
.cc-phone-row .cc-gfield { flex: 1 1 auto; min-width: 0; }

/* O components/phone-country-dropdown traz estilo próprio do tema (com
   variantes dark:). Aqui ele acompanha o campo claro do Figma. */
#phone-field-wrapper #phone-country-button {
  height: 51px; border-radius: 20px;
  background: #e9e9e9 !important;
  border: 1px solid #dedede !important;
  color: #1a1a1a !important;
}
#phone-field-wrapper #phone-country-button svg { color: #848484; }
#phone-country-menu { background: #fafafa !important; }
#phone-country-menu button { color: #1a1a1a !important; }

/* --------------- campos personalizados (cartão gradiente) --------- */
.cc-fields-card { background: var(--cc-grad); border-radius: 28px; padding: 18px; text-align: center; }
#checkout-fields-card:has(> #checkout_fields.hidden) { display: none; }

#checkout_fields > * + * { margin-top: 14px; }
#checkout_fields label {
  display: block; text-align: center;
  color: #fff !important; text-transform: uppercase;
  letter-spacing: 1.5px; font-weight: 700; font-size: 14px; margin-bottom: 10px;
}
#checkout_fields .cc-input {
  height: 51px !important; padding: 0 20px !important;
  border-radius: 20px !important;
  background: #e9e9e9 !important; border-color: transparent !important;
  color: #1a1a1a !important; font-size: 15px !important;
}
#checkout_fields .cc-input::placeholder { color: #848484 !important; }
#checkout_fields p { color: #fff !important; }

/* ---- Campo ROBLOX (busca do avatar pelo nick) ----------------------------
   O components/custom-field.html traz o ícone de lupa, o avatar, o loader e o
   cartão de resultado. Dois ajustes aqui:
   1) a regra .cc-input acima usa padding !important e matava o "!pl-10" do
      componente — o texto ficava por baixo da lupa;
   2) o cartão de resultado vem com variantes dark:, e o checkout é claro. */
#checkout_fields [data-field-type="ROBLOX"] .cc-input { padding-left: 44px !important; }
#checkout_fields [data-field-type="ROBLOX"] [data-lucide="search"] { color: #848484; }
#checkout_fields [id^="roblox-result-"] {
  background: #fff !important;
  border-color: #e0e0e0 !important;
}
#checkout_fields [id^="roblox-result-"] p { color: #1a1a1a !important; }
#checkout_fields [id^="roblox-username-"] { color: #8f8f8f !important; }
#checkout_fields [id^="roblox-loader-"] { color: #848484; }
/* mensagem de erro do campo fica legível sobre o cartão em gradiente */
#checkout_fields [id^="error-"] { color: #fff !important; font-weight: 600; }

/* ============================ endereço ============================ */
.cc-addr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; text-align: left; }
.cc-span2 { grid-column: 1 / -1; }
.cc-note { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: #979797; }
.cc-err { margin-top: 8px; font-size: 13px; font-weight: 500; color: #ff4d4d; text-align: left; }
.cc-uf > input { text-transform: uppercase; }

/* ============================= cartão ============================= */
.cc-cc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cc-cc-num { position: relative; }
.cc-cc-num .cc-gfield > input { padding-right: 56px; }
#card-brand-icon { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; }

/* ========================= aceite + pagar ========================= */
.cc-terms { font-size: 12px; color: #3a3c3f; margin: 16px 0 10px; text-align: left; }
.cc-terms a { text-decoration: underline; text-underline-offset: 2px; }
.cc-terms a:hover { color: var(--cc-purple); }

.cc-pay {
  position: relative;
  width: 100%; height: 58px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  border-radius: 12px;
  background: var(--cc-grad-rev);
  color: #fff; font-weight: 600; font-size: 18px;
  transition: filter .2s, transform .1s;
}
.cc-pay:hover { filter: brightness(1.06); }
.cc-pay:active { transform: scale(.995); }
.cc-pay::before {
  content: ""; position: absolute; inset: auto 3% -10px 3%;
  height: 34px; border-radius: 16px; z-index: -1; pointer-events: none;
  background: var(--cc-grad-rev); filter: blur(18px); opacity: .55;
}
html.reduce-motion .cc-pay::before { display: none; }

/* ====================== ofertas especiais ========================= */
.cc-ups { position: relative; padding-top: 14px; }
.cc-ups-badge {
  position: absolute; left: 50%; transform: translateX(-50%); top: 0; z-index: 10;
  display: inline-flex; align-items: center; height: 28px; padding: 0 14px;
  border-radius: 8px; color: #fff; font-weight: 900; font-size: 12px;
  letter-spacing: .5px; background: var(--cc-grad-rev); white-space: nowrap;
}
.cc-ups-border { border-radius: 22px; padding: 1.5px; background: linear-gradient(90deg, #c764f5 0%, var(--cc-orange) 100%); }
.cc-ups-inner { position: relative; border-radius: 20.5px; background: #fafafa; padding: 22px 12px 14px; }

.cc-ups-row { display: flex; align-items: center; gap: 10px; }
.cc-ups-nav {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: #121212; color: #fff; transition: filter .2s;
}
.cc-ups-nav:hover { filter: brightness(1.8); }
.cc-ups-nav:disabled { opacity: .3; pointer-events: none; }

.cc-ups-item {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: 17px; background: #ededed; border: 1px solid #e0e0e0;
}
.cc-ups-thumb { width: 54px; height: 54px; flex-shrink: 0; border-radius: 12px; overflow: hidden; background: #c8c8c8; }
.cc-ups-name { font-size: 14px; font-weight: 500; letter-spacing: -0.02em; color: #000; text-align: left; }
.cc-ups-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 2px; min-width: 0; }
.cc-ups-price { font-size: 17px; font-weight: 900; color: #000; }
.cc-ups-tag {
  display: inline-flex; align-items: center; height: 18px; padding: 0 8px;
  border-radius: 9px; background: var(--cc-grad-rev);
  color: #fff; font-size: 9px; font-weight: 900; letter-spacing: .3px; white-space: nowrap;
}
.cc-ups-add {
  flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: var(--cc-grad); box-shadow: 0 4px 12px rgba(196, 98, 252, .45);
  transition: filter .2s, transform .15s;
}
.cc-ups-add:hover { filter: brightness(1.1); transform: scale(1.06); }
.cc-ups-add:active { transform: scale(.94); }

/* ============================= resumo ============================= */
.cc-summary {
  background: radial-gradient(135% 105% at 50% 0%, #c462fc 0%, #ff8a5d 100%);
  border-radius: 20px; color: #fff; overflow: hidden;
}
.cc-sum-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; }
.cc-sum-title { font-size: 20px; font-weight: 700; color: #fafafa; }
.cc-secure {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  height: 32px; padding: 0 12px; border-radius: 999px;
  background: rgba(255, 138, 93, .6); border: 1px solid var(--cc-orange);
  color: #fff; font-size: 12px; font-weight: 500;
}
.cc-divider { height: 1px; background: rgba(255, 255, 255, .2); margin: 0 20px; }
.cc-items { padding: 0 20px; }
.cc-sum-body { padding: 18px 20px; }
.cc-sum-body > * + * { margin-top: 14px; }

.cc-empty { padding: 36px 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.cc-empty-icon { width: 56px; height: 56px; border-radius: 999px; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; }
.cc-empty-text { font-size: 15px; font-weight: 700; color: #fafafa; }
.cc-empty-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 999px;
  background: #fff; color: var(--cc-purple); font-size: 14px; font-weight: 700;
  transition: background .2s;
}
.cc-empty-btn:hover { background: rgba(255,255,255,.9); }

/* ------------------------ cupom em destaque ----------------------- */
.cc-cup { border-radius: 13px; border: 1px solid rgba(255,255,255,.3); background: #fff; overflow: hidden; display: flex; align-items: stretch; }
.cc-cup-left {
  flex-shrink: 0; width: 70px; padding: 12px 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-right: 1px solid rgba(255, 94, 0, .4);
}
.cc-cup-val { margin-top: 3px; font-size: 18px; font-weight: 900; color: var(--cc-coupon); line-height: 1; }
.cc-cup-off { margin-top: 2px; font-size: 12px; font-weight: 700; letter-spacing: 1.66px; color: #ababab; line-height: 1; }
.cc-cup-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; }
.cc-cup-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: #000; }
.cc-cup-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--cc-coupon); flex-shrink: 0; }
.cc-cup-desc { margin-top: 3px; font-size: 13px; font-weight: 700; color: #ababab; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-cup-desc b { color: var(--cc-coupon); font-weight: 900; }
/* .fig: Button 99x48, raio 12.9 */
.cc-cup-btn {
  flex-shrink: 0; height: 44px; padding: 0 16px; border-radius: 13px;
  background: var(--cc-purple); color: #fff; font-size: 14px; font-weight: 600;
  transition: filter .2s;
}
.cc-cup-btn:hover { filter: brightness(1.1); }

/* --------------------------- campo cupom -------------------------- */
.cc-coupon-row { display: flex; align-items: stretch; gap: 10px; }
#coupon input {
  flex: 1 1 auto; min-width: 0;
  height: 51px !important; padding: 0 16px !important;
  border-radius: 13px !important;
  background: #09090b !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  color: #fafafa !important; font-size: 15px !important;
  box-shadow: none !important; outline: none;
}
#coupon input::placeholder { color: #9ca3af !important; opacity: 1; }
#coupon input:focus { border-color: rgba(255,255,255,.3) !important; box-shadow: none !important; }
.cc-coupon-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 51px; padding: 0 18px; border-radius: 13px;
  background: var(--cc-orange); color: #fff; font-size: 15px; font-weight: 600;
  transition: filter .2s, background .2s, color .2s;
}
.cc-coupon-btn:hover { filter: brightness(1.1); }
.cc-coupon-btn[data-state="remove"] { background: #fff; color: var(--cc-coupon); }
.cc-coupon-btn[data-state="apply"] .cc-st-remove { display: none; }
.cc-coupon-btn[data-state="remove"] .cc-st-apply { display: none; }
#coupon-error { margin-top: 8px; font-size: 13px; font-weight: 500; color: #fff; }
#coupon-error:empty { display: none; }

/* ----------------------------- totais ----------------------------- */
#pricing { border-radius: 8px; background: rgba(0,0,0,.1); border: 1px solid rgba(255,255,255,.05); padding: 14px 16px; }
#pricing > * + * { margin-top: 8px; }
.cc-prow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cc-prow span { font-size: 15px; color: #fafafa; }
.cc-prow-total { padding-top: 6px; }
.cc-prow-total span { font-size: 18px; font-weight: 600; }

/* ======================== itens do resumo ========================= */
.cc-sum-item { display: flex; flex-direction: column; gap: 10px; padding: 14px 0; }
.cc-sum-item + .cc-sum-item { border-top: 1px solid rgba(255,255,255,.16); }
.cc-it-top { display: flex; align-items: flex-start; gap: 12px; }
.cc-it-thumb { width: 52px; height: 52px; flex-shrink: 0; border-radius: 12px; overflow: hidden; background: #09090b; border: 1px solid rgba(255,255,255,.1); }
.cc-it-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cc-it-name { font-size: 14px; font-weight: 700; line-height: 1.25; color: #fafafa; }
.cc-it-unit { font-size: 12px; color: rgba(255,255,255,.85); margin-top: 2px; }
.cc-it-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cc-it-qty { display: flex; align-items: center; gap: 8px; }
.cc-it-btn {
  width: 36px; height: 36px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: #09090b; transition: background .2s;
}
.cc-it-btn:hover { background: rgba(255,255,255,.85); }
.cc-it-btn:disabled { opacity: .4; pointer-events: none; }
.cc-it-del { background: rgba(255,0,0,.15); color: #fff; }
.cc-it-del:hover { background: rgba(255,0,0,.3); }
.cc-sum-item input[data-cart-action="input"] {
  width: 52px !important; height: 36px !important; padding: 0 !important;
  border-radius: 12px !important; text-align: center;
  background: #09090b !important; border: 1px solid rgba(255,255,255,.1) !important;
  color: #fafafa !important; font-size: 15px !important; font-weight: 600;
  box-shadow: none !important; outline: none;
}
.cc-sum-item input[data-cart-action="input"]:focus { border-color: rgba(255,255,255,.25) !important; box-shadow: none !important; }
.cc-it-total { font-size: 17px; font-weight: 900; color: #fafafa; font-variant-numeric: tabular-nums; white-space: nowrap; }
[id^="cart-actions-"][data-loading] { opacity: .6; pointer-events: none; }

/* ============================ desktop ============================= */
@media (min-width: 768px) {
  /* .fig desktop: barra Rectangle 52 = 1920x75.
     padding-left 240 tira os chips de cima do dragão (que termina em 234). */
  .cc-bar-inner {
    min-height: 75px;
    padding: 10px 16px 10px 240px;
    justify-content: space-between;
  }
  /* No .fig o título é centralizado na LARGURA DA TELA, não no espaço que
     sobra depois do dragão. Fora do fluxo, os chips ficam nas pontas. */
  .cc-bar-title {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    flex: none; white-space: nowrap;
    /* O .fig usa 26.25px, mas ele foi desenhado em 1920. Abaixo de ~1600 a
       frase nesse tamanho encavala no chip "OFERTA ESPECIAL", então cai um
       degrau e só volta ao valor do arquivo quando há largura pra isso. */
    font-size: 20px;
  }
  /* .fig desktop: "image 5" 174x111 em (60,-36) — ou seja, 60px da borda da
     TELA e alinhado pela BASE da barra, transbordando 36px pra cima. */
  .cc-dragon { left: 60px; top: auto; bottom: 0; width: 174px; height: 111px; }
  
  
  
  .cc-head { margin: 40px 0 32px; }
  .cc-title { font-size: 46px; }
  .cc-sub { font-size: 23px; }
  .cc-back { width: 48px; height: 48px; }
  .cc-card { padding: 26px 28px; }
  .cc-h2 { font-size: 20px; margin-bottom: 20px; }
  .cc-h2-lg { font-size: 22px; }
  .cc-card-seal { right: 16px; top: 16px; height: 22px; font-size: 10px; }
  .cc-gw { height: 67px; min-width: 245px; padding: 0 28px; }
  .cc-gw-icon { height: 30px; }
  .cc-gw-label { font-size: 25px; }
  .cc-fields > * + * { margin-top: 16px; }
  /* .fig: Field Placeholder 453x72, texto 20.4px */
  .cc-gfield > input,
  .cc-gfield > select { height: 72px; line-height: 72px; padding: 0 24px; font-size: 20px; }
  #phone-field-wrapper #phone-country-button { height: 72px; }
  .cc-fields-card { padding: 22px; }
  /* .fig: "DIGITE SEU NICK DO ROBLOX" Inter 28pt Bold 20.42, ls 2 */
  #checkout_fields label { font-size: 20px; letter-spacing: 2px; }
  #checkout_fields .cc-input { height: 72px !important; padding: 0 24px !important; font-size: 20px !important; }
  #checkout_fields [data-field-type="ROBLOX"] .cc-input { padding-left: 52px !important; }
  .cc-cup-off { font-size: 17px; }
  .cc-addr { grid-template-columns: 1fr 1fr; gap: 16px; }
  .cc-cc-row { gap: 16px; }
  /* .fig: Button 513x72, raio 12.4, texto 23.2px */
  .cc-pay { height: 72px; font-size: 23px; }
  .cc-ups-badge { font-size: 14px; height: 30px; }
  .cc-ups-inner { padding: 24px 14px 16px; }
  .cc-sum-head { padding: 20px 26px; }
  .cc-sum-title { font-size: 24px; }
  .cc-secure { font-size: 14px; height: 34px; }
  .cc-divider { margin: 0 26px; }
  .cc-items { padding: 0 26px; }
  .cc-sum-body { padding: 20px 26px; }
  .cc-cup-left { width: 76px; }
  .cc-cup-val { font-size: 21px; }
  .cc-cup-title { font-size: 19px; }
  .cc-cup-desc { font-size: 16px; }
  .cc-cup-btn { height: 48px; font-size: 16px; }
  #coupon input { height: 55px !important; font-size: 19px !important; }
  .cc-coupon-btn { height: 55px; padding: 0 24px; font-size: 19px; }
  .cc-ups-price { font-size: 19px; }
  /* .fig: 10.53px — o aceite é bem miudinho mesmo */
  .cc-terms { font-size: 11px; }
  #pricing { padding: 16px 18px; }
  .cc-prow span { font-size: 18px; }
  .cc-prow-total span { font-size: 21px; }
  .cc-it-thumb { width: 60px; height: 60px; }
  .cc-it-name { font-size: 16px; }
  .cc-it-unit { font-size: 14px; }
  .cc-it-btn { width: 40px; height: 40px; }
  .cc-sum-item input[data-cart-action="input"] { width: 60px !important; height: 40px !important; font-size: 17px !important; }
  .cc-it-total { font-size: 20px; }
}

/* ============================ mobile ============================== */
@media (max-width: 767px) {
  /* No frame CHECKOUTCELULAR o banner NÃO é a barra full-bleed do desktop:
     é um CARTÃO arredondado — Rectangle 44, 345x89, gradiente RADIAL
     #c462fc→#ff8a5d, raio 13, com um glow atrás (Rectangle 21 borrado). */
  .cc-bar {
    margin: 12px 12px 0;
    border-radius: 13px;
    /* Amostrei as cores do render do Figma ao longo da largura do cartão:
       25% #cc68e5 · 50% #d66ece · 88% #e478a6. Na rampa #c462fc→#ff8a5d isso
       dá t = 0.14 / 0.30 / 0.54 — linear, com o laranja caindo FORA do
       cartão. Daí o 161%: a rampa inteira ocupa 1,61x a largura. */
    background: linear-gradient(90deg, #c462fc 0%, #ff8a5d 161%);
    box-shadow: 0 12px 28px -12px rgba(196, 98, 252, .6);
  }

  /* Chips numa linha (à direita do dragão) e a chamada embaixo. Em linha
     única o texto quebrava em 4. */
  .cc-bar-inner { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
  .cc-bar-title { flex: 1 0 100%; order: 3; text-align: left; }

  /* .fig: OFERTA ESPECIAL 210x28 r8.5 · timer 52x17 r4.6 */

  /* O selo sai do canto e vira uma linha própria acima do título, senão
     encosta em "FORMAS DE PAGAMENTO" no cartão estreito. */
  .cc-card-seal { position: static; margin: 0 auto 10px; }
}

@media (max-width: 479px) {
  .cc-sum-title { font-size: 18px; white-space: nowrap; }
  .cc-secure { font-size: 11px; height: 28px; padding: 0 9px; gap: 4px; }
  .cc-coupon-btn { padding: 0 14px; }
  .cc-bar-title { font-size: 13px; }
  /* No .fig o cupom cabe numa linha só; aqui as fontes/botão encolhem pra
     caber em 390px em vez de empurrar o "Resgatar" pra baixo. */
  .cc-cup-left { width: 58px; padding: 10px 4px; }
  .cc-cup-val { font-size: 16px; }
  .cc-cup-off { font-size: 10px; letter-spacing: 1.2px; }
  .cc-cup-main { padding: 10px; gap: 8px; }
  .cc-cup-title { font-size: 13px; gap: 6px; }
  .cc-cup-dot { width: 7px; height: 7px; }
  .cc-cup-desc { font-size: 11px; }
  /* o que importa é o CÓDIGO aparecer inteiro; o resto da frase sai fora */
  .cc-cup-tail { display: none; }
  .cc-cup-btn { height: 36px; padding: 0 12px; font-size: 12px; border-radius: 11px; }
  /* o "+" da oferta divide 390px com thumb + nome + preço + tag */
  .cc-ups-add { width: 34px; height: 34px; }
  .cc-ups-item { gap: 8px; padding: 10px; }
  .cc-ups-thumb { width: 46px; height: 46px; }
  .cc-ups-name { font-size: 13px; }
  .cc-ups-price { font-size: 15px; }
}

@media (min-width: 1024px) {
  .cc-grid { grid-template-columns: minmax(0, 1fr) 520px; gap: 28px; }
  .cc-col-left, #upsell-card, .cc-col-right { order: 0; }
  .cc-col-left { grid-column: 1; }
  #upsell-card { grid-column: 2; }
  .cc-col-right { grid-column: 2; }
  /* com a vitrine visível, a coluna esquerda ocupa as duas linhas */
  .cc-grid:has(#upsell-card:not(.hidden)) .cc-col-left { grid-row: 1 / span 2; }
  /* 619px é a largura do cartão no frame CHECKOUTPC do Figma */
  .cc-form-wrap { max-width: 619px; margin: 0 auto; }
}

/* =====================================================================
   TIPOGRAFIA — 1:1 com o checkoutcosmic.fig

   O layout só carrega Geist + Poppins; a página do checkout carrega Inter
   à parte. Cada regra abaixo veio direto do binário do Figma (família,
   peso, tamanho e letter-spacing em px). "Inter 28pt" no arquivo = eixo
   óptico opsz 28 da Inter variável.

   Geist fica com: selo "Pagamento seguro", quantidade, Subtotal/Descontos/
   Total, campo e botão do cupom, aceite dos termos e o botão Pagar.
   Todo o resto é Inter.
   ===================================================================== */
#checkout { font-family: Geist, sans-serif; }

.cc-inter,
.cc-title, .cc-sub, .cc-h2, .cc-gw-label,
.cc-bar-title, .cc-chip-label, .cc-chip-timer,
.cc-sum-title, .cc-it-name, .cc-it-unit, .cc-it-total,
.cc-cup-title, .cc-cup-desc, .cc-cup-val, .cc-cup-off, .cc-cup-btn,
.cc-ups-badge, .cc-ups-name, .cc-ups-price, .cc-ups-tag,
.cc-empty-text, .cc-empty-btn,
.cc-gfield > input, .cc-gfield > select,
#checkout_fields label, #checkout_fields .cc-input {
  font-family: Inter, Geist, sans-serif;
  font-variation-settings: 'opsz' 28;
}

/* --- pesos exatos do .fig ------------------------------------------- */
.cc-title           { font-weight: 700; }  /* Inter Bold        */
.cc-sub             { font-weight: 400; }  /* Inter Regular     */
.cc-h2              { font-weight: 700; }  /* Inter 28pt Bold   */
.cc-gw-label        { font-weight: 700; }
.cc-bar-title       { font-weight: 700; }  /* Inter Bold        */
.cc-chip-label     { font-weight: 700; }
.cc-chip-timer     { font-weight: 700; }
.cc-sum-title       { font-weight: 700; }
.cc-it-name         { font-weight: 700; }
.cc-it-unit         { font-weight: 400; }  /* Inter 28pt Regular */
.cc-it-total        { font-weight: 900; }  /* Inter 28pt Black  */
.cc-cup-title       { font-weight: 700; }
.cc-cup-desc        { font-weight: 700; }
.cc-cup-val         { font-weight: 900; }  /* Inter 28pt Black  */
.cc-cup-off         { font-weight: 700; }
.cc-cup-btn         { font-weight: 600; }  /* Inter 28pt SemiBold */
.cc-ups-badge       { font-weight: 900; }  /* Inter Black       */
.cc-ups-tag         { font-weight: 900; }
.cc-ups-name        { font-weight: 500; }  /* Inter Medium      */
.cc-ups-price       { font-weight: 900; }  /* Inter Black       */
.cc-gfield > input,
.cc-gfield > select { font-weight: 400; }  /* Inter 28pt Regular */
#checkout_fields label { font-weight: 700; }
/* o custom-field.html vem com font-medium; o .fig usa Regular no campo */
#checkout_fields .cc-input { font-weight: 400 !important; }

/* --- letter-spacing e line-height exatos ----------------------------
   ATENÇÃO: no .fig o letter-spacing vem em PERCENT, não em pixels.
   "ls -4" = -0.04em. Escrever -4px esmagava as palavras
   ("ADICIONE+1PRODUTOEGANHE..."). Só o "OFF" do cupom é PIXELS (1.66). */
.cc-title           { letter-spacing: -0.02em; line-height: 1.4; }
.cc-sub             { letter-spacing: -0.02em; line-height: 1.4; }
.cc-h2              { letter-spacing: 0.02em; line-height: 1; }
.cc-gw-label        { letter-spacing: 0.02em; line-height: 1; }
.cc-bar-title       { letter-spacing: -0.04em; line-height: 1.1; }
.cc-chip-label      { letter-spacing: -0.04em; }
.cc-chip-timer      { letter-spacing: -0.04em; }
.cc-gfield > input,
.cc-gfield > select { letter-spacing: -0.01em; }
#checkout_fields .cc-input { letter-spacing: -0.01em; }
#checkout_fields label     { letter-spacing: 0.02em; }
/* .cc-cup-off fica de fora: é o único em PIXELS no .fig e já está definido
   na regra base (1.66px) + override do mobile. Repetir aqui atropelaria o
   valor menor do mobile, porque este bloco vem depois do media query. */
.cc-ups-name        { letter-spacing: -0.02em; line-height: 1.4; }
.cc-ups-price       { letter-spacing: -0.02em; line-height: 1.4; }
.cc-ups-badge       { letter-spacing: 0; line-height: 1.4; }

/* Geist onde o .fig pede Geist (herda do #checkout, só o peso muda) */
.cc-secure, .cc-card-seal { font-weight: 500; }   /* Geist Medium   */
.cc-prow span             { font-weight: 400; }   /* Geist Regular  */
.cc-prow-total span       { font-weight: 600; }   /* Geist SemiBold */
#coupon input             { font-weight: 400; }
.cc-coupon-btn            { font-weight: 600; }
.cc-terms                 { font-weight: 400; }
.cc-pay                   { font-weight: 600; }
.cc-sum-item input[data-cart-action="input"] { font-weight: 400; }


/* =====================================================================
   ÍCONES — tamanhos do .fig
   O lucide entra com as classes size-4/size-5 do Tailwind; estes três
   estavam menores que o "Icon frame" do arquivo.
   ===================================================================== */
.cc-secure svg      { width: 20px; height: 20px; }  /* .fig Icon 20x20 */
.cc-cup-left svg    { width: 26px; height: 26px; }  /* .fig Icon 27x27 */
.cc-coupon-btn svg  { width: 26px; height: 26px; }  /* .fig Icon 27x27 */

@media (max-width: 767px) {
  .cc-secure svg     { width: 16px; height: 16px; }
  .cc-cup-left svg   { width: 20px; height: 20px; }
  .cc-coupon-btn svg { width: 20px; height: 20px; }
}

/* A partir de ~1600px há largura pra frase da barra no tamanho do .fig
   (26.25px) sem encostar no chip "OFERTA ESPECIAL". */
@media (min-width: 1600px) {
  .cc-bar-title { font-size: 26px; }
}

/* Duas versões da chamada da barra: o .fig usa MAIÚSCULA no frame desktop e
   caixa mista no mobile. */
.cc-bar-desk { display: none; }
.cc-bar-mob { display: inline; }
@media (min-width: 768px) {
  .cc-bar-desk { display: inline; }
  .cc-bar-mob { display: none; }
}

/* =====================================================================
   BARRA DE OFERTA — comportamento tirado do render do Figma

   1) O dragão NÃO transborda: a barra/cartão recorta ele. Em vez de usar
      overflow:hidden na barra (que cortaria o chip, veja o item 2), a
      própria caixa do dragão faz o recorte — no desktop ela tem a altura
      da barra e a arte é deslocada 36px pra cima com background-position.
   2) No MOBILE "OFERTA ESPECIAL" e o timer são UMA pílula só, com o timer
      ANINHADO dentro dela, e o conjunto atravessa a borda de cima do
      cartão (7px pra fora). No DESKTOP são duas pílulas separadas, uma em
      cada ponta — por isso o display:contents solta os filhos no flex.
   ===================================================================== */

/* --------------------------- dragão -------------------------------- */
.cc-dragon {
  position: absolute; left: 0; top: 1px; transform: none;
  width: 92px; height: 88px;          /* .fig mobile: image 4 92x88 em (0,1) */
  border-radius: 13px 0 0 13px;       /* acompanha os cantos do cartão */
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none; z-index: 2;
  filter: none;
}

/* ---------------------- chips (mobile) ----------------------------- */
.cc-chip-combo {
  position: absolute; left: 101px; top: -7px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  height: 28px; padding: 0 5px 0 14px;
  border-radius: 999px; background: #64eb49;
}
.cc-chip-label { color: #000; font-size: 13px; white-space: nowrap; }
.cc-chip-timer {
  display: inline-flex; align-items: center; gap: 4px;
  height: 18px; padding: 0 7px; border-radius: 999px;
  background: #44a830; color: #fff; font-size: 10px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cc-chip-timer svg { width: 10px; height: 10px; }

@media (max-width: 767px) {
  /* título começa em (101, 33) no .fig, logo abaixo da pílula */
  .cc-bar-inner { padding: 33px 12px 12px 101px; }
  .cc-bar-title { flex: 1 0 100%; text-align: left; }
}

/* ---------------------- chips (desktop) ---------------------------- */
@media (min-width: 768px) {
  /* solta os dois filhos como itens do flex da barra: verde na esquerda,
     timer na direita (justify-content: space-between) */
  .cc-chip-combo { display: contents; }

  .cc-chip-label {
    display: inline-flex; align-items: center; flex-shrink: 0;
    height: 33px; padding: 0 14px; border-radius: 10px;   /* .fig 187x33 r10 */
    background: #64eb49; color: #000; font-size: 17px;
  }
  .cc-chip-timer {
    height: 33px; padding: 0 12px; gap: 6px;
    border-radius: 9px;                                    /* .fig 101x33 r9 */
    font-size: 18px;
  }
  .cc-chip-timer svg { width: 16px; height: 16px; }

  /* a caixa passa a ter a altura da barra e recorta a arte sozinha */
  .cc-dragon {
    left: 60px; top: 0; bottom: auto;
    width: 174px; height: 75px;
    border-radius: 0;
    background-size: 174px 111px;
    background-position: 0 -36px;   /* .fig: caixa 174x111 começa em y=-36 */
  }
}

/* .fig CHECKOUTCELULAR: a chamada é 15.95px (lh 1.09), não 13 — a 13px com
   ls -0.04em o espaço de "+1 PRODUTO" colapsava. Timer 9.34px. */
@media (max-width: 767px) {
  .cc-bar-title { font-size: 16px; line-height: 1.09; }
  .cc-chip-label { font-size: 14px; }
  .cc-chip-timer { font-size: 9px; }
}

/* Bolinha do cupom piscando, pra chamar atenção pro código disponível.
   O gate é o prefers-reduced-motion do sistema, e NÃO a classe .reduce-motion
   do tema — aquela é ligada em todo mobile (layout.html), o que desligaria a
   animação justamente onde a maioria compra. */
@keyframes cc-cup-pisca {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .3; transform: scale(.75); }
}
.cc-cup-dot {
  animation: cc-cup-pisca 1.1s ease-in-out infinite;
  will-change: opacity, transform;
}
@media (prefers-reduced-motion: reduce) {
  .cc-cup-dot { animation: none; }
}

/* =====================================================================
   DESKTOP — planta baixa do frame CHECKOUTPC (1920x1080)

   Medidas absolutas tiradas do .fig, com a origem no canto sup-esq da
   barra (Rectangle 52):
     coluna esquerda .. x 245..864   = 619 de largura
     vão ............. 864..1049    = 185
     coluna direita .. 1049..1597    = 548
     total ........... 1352 (centralizado em 1920)

   Dentro do cartão de 619 os elementos NÃO ocupam a largura toda:
     campo ........... 453  (Field Placeholder)
     cartão do nick .. 518  (Rectangle 50)
     botão Pagar ..... 513  (Button)
   ===================================================================== */
@media (min-width: 1024px) {
  .cc-grid {
    max-width: 1352px;
    margin-left: auto; margin-right: auto;
    grid-template-columns: minmax(0, 1fr) 548px;
    /* o vão é 185 quando cabe (>=1352 de área útil) e encolhe suave abaixo
       disso, em vez de espremer a coluna do formulário */
    gap: clamp(32px, calc(100% - 1167px), 185px);
  }
  .cc-form-wrap { max-width: 619px; margin: 0 auto; }
}

/* telas de desktop menores: a coluna do resumo cede um pouco */
@media (min-width: 1024px) and (max-width: 1279px) {
  .cc-grid { grid-template-columns: minmax(0, 1fr) 460px; }
}

@media (min-width: 768px) {
  /* campos 453 · cartão do nick 518 · aceite e Pagar 513 — todos centrados */
  .cc-fields > * {
    max-width: 453px;
    margin-left: auto; margin-right: auto;
  }
  .cc-fields > #checkout-fields-card { max-width: 518px; }
  .cc-terms, .cc-pay { max-width: 513px; margin-left: auto; margin-right: auto; }

  /* .fig: cartão 1 tem 13 de topo e 20 de base; cartão 2 tem 30 e 44 */
  .cc-card { padding: 24px 28px 28px; }

  /* Barra: no .fig é uma linha de 1296 centralizada com espaçamento IGUAL
     entre os três blocos (gap 161 dos dois lados) — ou seja space-between,
     não título absoluto. O padding à esquerda é só pra não passar por cima
     do dragão em telas menores que as 1920 do arquivo. */
  .cc-bar-title {
    position: static;
    transform: none;
    flex: 0 1 auto;
    font-size: 26px;
  }
}

/* abaixo de 1280 a frase inteira a 26px não cabe entre os dois chips */
@media (min-width: 768px) and (max-width: 1279px) {
  .cc-bar-title { font-size: 17px; }
}

/* Com display:contents os filhos do combo entram no flex na ordem do DOM
   (label, timer, título) — e o timer acabava ANTES do título. A ordem do
   .fig é: OFERTA à esquerda, frase no meio, timer à direita. */
@media (min-width: 768px) {
  .cc-chip-label { order: 1; }
  .cc-bar-title { order: 2; }
  .cc-chip-timer { order: 3; }
}

/* No .fig o cabeçalho pertence à COLUNA ESQUERDA e a coluna direita começa
   lá em cima, ao lado do título:
     badge OFERTAS ESPECIAIS .. y 131
     título Finalizar Pedido .. y 141   (centrado em 580 = centro dos 619)
     cartão esquerdo ......... y 256
   Logo o resumo sobe 125px em relação ao cartão da esquerda. */
@media (min-width: 1024px) {
  .cc-grid { margin-top: -125px; }
  .cc-col-left { margin-top: 125px; }

  .cc-head {
    max-width: 1352px;
    margin-left: auto; margin-right: auto;
    padding-right: 733px;   /* 185 do vão + 548 da direita => sobram os 619 */
  }
}

/* =====================================================================
   BARRA COLADA NO TOPO + UM POUCO MAIOR (pedido do cliente)

   O layout põe pt-[112px] no <main> pra reservar espaço da navbar fixa.
   Como o checkout esconde a navbar, aquilo é espaço morto: no desktop a
   barra encosta no topo e no mobile fica só uma folga curta.

   O tamanho sobe de 75 (valor do .fig) pra 92 — +23%. O dragão acompanha
   na mesma proporção pra não desproporcionar: 174x111 -> 213x136, e o
   deslocamento da arte de -36 -> -44.
   ===================================================================== */
/* Só no desktop: no mobile o espaçamento do topo fica como estava. */
@media (min-width: 768px) {
  body:has(#checkout) main { padding-top: 0; }

  .cc-bar-inner {
    min-height: 92px;
    padding: 12px 16px 12px 290px;   /* 290 limpa o dragão, que agora vai até 273 */
  }
  .cc-dragon {
    width: 213px; height: 92px;      /* a caixa tem a altura da barra e recorta */
    background-size: 213px 136px;
    background-position: 0 -44px;
  }
  .cc-chip-label, .cc-chip-timer { height: 38px; }
  .cc-bar-title { font-size: 28px; }
}

/* =====================================================================
   BARRA FLUTUANTE (desktop) + TOPO NO MOBILE

   Desktop: a barra acompanha a rolagem, grudada no topo.
   Mobile: some o pt-[112px] que o layout reserva pra navbar fixa — aqui a
   navbar está escondida, então era só espaço vazio; fica a margem curta do
   próprio cartão.
   ===================================================================== */
body:has(#checkout) main { padding-top: 0; }

/* o cartão do mobile mantém uma folga curta — a pílula verde sai 7px pra
   cima dele e não pode encostar na borda da tela */
@media (max-width: 767px) {
  .cc-bar { margin-top: 14px; }
}

@media (min-width: 768px) {
  .cc-bar {
    position: sticky;
    top: 0;
    z-index: 40;
  }
}

/* =====================================================================
   MOBILE — barra flutuante e cartão único

   1) A barra também acompanha a rolagem no mobile. Fica em top:12 (e não 0)
      porque a pílula verde sai 7px pra cima do cartão: colada em 0 ela
      encostaria na borda da tela.
   2) No .fig mobile pagamento e dados estão no MESMO cartão (Rectangle 29,
      366x279: FORMAS DE PAGAMENTO + Pix + INFORME SEUS DADOS + os 2 campos).
      Só o desktop tem dois cartões separados. Aqui os dois <section> são
      fundidos visualmente, sem mexer no DOM — o desktop segue com dois.
   3) O selo "Pagamento seguro" não existe no cartão no frame mobile; lá ele
      aparece só no "Resumo do pedido", que continua mostrando.
   ===================================================================== */
@media (max-width: 767px) {
  .cc-bar { position: sticky; top: 12px; z-index: 40; }

  .cc-form-wrap .cc-card:first-child {
    padding-bottom: 0;
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .cc-form-wrap .cc-card + .cc-card {
    margin-top: 0;
    padding-top: 16px;
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .cc-card-seal { display: none; }
}