/* ===========================================================================
   Rookie Capital — site público (layout _LayoutPublico)
   Identidade do esboço aprovado (ETLSistemas.Rookie.Documentos/Esboco-Telas):
   fundo escuro, dourado #d5b36a, títulos em Barlow Condensed, texto em Inter.
   Componentes base reutilizados por todas as telas públicas; estilos próprios
   de cada tela ficam na seção "Styles" da view.
   =========================================================================== */

:root {
    --rk-bg: #0a0b0d;
    --rk-bg-soft: #0f1012;
    --rk-panel: #141518;
    --rk-panel-2: #1b1c20;
    --rk-line: #2c2d32;
    --rk-line-gold: #4a3e28;
    --rk-gold: #d5b36a;
    --rk-gold-hover: #ecca86;
    --rk-gold-soft: #2b2418;
    --rk-on-gold: #15110a;
    --rk-text: #f5f3ee;
    --rk-text-soft: #b4b1aa;
    --rk-muted: #a3a3aa;
    --rk-ok: #7be3aa;
    --rk-ok-bg: #103c27;
    --rk-warn: #e9c45a;
    --rk-warn-bg: #3a3014;
    --rk-danger: #ff9aa0;
    --rk-danger-bg: #4a1c22;
    --rk-live: #ff5a52;
    --rk-radius: 14px;
    --rk-font: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --rk-font-display: "Barlow Condensed", Inter, sans-serif;
}

/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }

body.rk-public {
    color-scheme: dark; /* controles nativos (data, checkbox, scrollbar) no tema escuro */
    background: var(--rk-bg);
    color: var(--rk-text);
    font-family: var(--rk-font);
    font-size: 15px;
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.rk-public a { color: var(--rk-gold); text-decoration: none; }
.rk-public a:hover { color: var(--rk-gold-hover); }
/* Só o <main> da página (filho do body): os <main> internos das telas usam o próprio flex. */
body.rk-public > main { flex: 1 0 auto; }

.rk-wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

.rk-display { font-family: var(--rk-font-display); letter-spacing: .5px; text-transform: uppercase; }
.rk-eyebrow { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--rk-gold); font-weight: 600; }
.rk-muted { color: var(--rk-muted); }

.rk-skip { position: absolute; left: -9999px; }
.rk-skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--rk-gold); color: var(--rk-on-gold); padding: 8px 14px; border-radius: 8px; }

/* ---------------------------------------------------------------------------
   Botões
   --------------------------------------------------------------------------- */
.rk-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; padding: 0 20px; border-radius: 10px;
    font: 600 15px/1 var(--rk-font);
    border: 1px solid #5a4b2f; background: #1b1a17; color: var(--rk-gold);
    cursor: pointer; white-space: nowrap;
}
.rk-btn:hover { background: var(--rk-gold-soft); color: var(--rk-gold-hover); }
.rk-btn--gold { background: var(--rk-gold); border-color: var(--rk-gold); color: var(--rk-on-gold); }
.rk-btn--gold:hover { background: var(--rk-gold-hover); color: var(--rk-on-gold); }
/* Botão feito com <a>: precisa vencer a cor de link do site (.rk-public a), mais específica que a classe. */
.rk-public a.rk-btn { color: var(--rk-gold); }
.rk-public a.rk-btn:hover { color: var(--rk-gold-hover); }
.rk-public a.rk-btn--gold, .rk-public a.rk-btn--gold:hover { color: var(--rk-on-gold); }
.rk-btn--sm { min-height: 40px; padding: 0 14px; font-size: 14px; }
.rk-btn:disabled, .rk-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

.rk-iconbtn {
    width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--rk-line);
    background: var(--rk-panel); color: #e9e6df;
    display: inline-flex; align-items: center; justify-content: center; position: relative;
}
.rk-public a.rk-iconbtn { color: #e9e6df; }
.rk-badge {
    position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; border-radius: 99px;
    background: var(--rk-gold); color: var(--rk-on-gold); font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.rk-badge[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   Componentes
   --------------------------------------------------------------------------- */
.rk-panel { background: var(--rk-panel); border: 1px solid var(--rk-line); border-radius: var(--rk-radius); }
.rk-panel--gold { border-color: var(--rk-line-gold); }

.rk-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 99px; padding: 5px 10px; font-size: 12px; font-weight: 600; }
.rk-pill--gold { background: var(--rk-gold); color: var(--rk-on-gold); }
.rk-pill--ok { background: var(--rk-ok-bg); color: var(--rk-ok); }
.rk-pill--warn { background: var(--rk-warn-bg); color: var(--rk-warn); }
.rk-pill--danger { background: var(--rk-danger-bg); color: var(--rk-danger); }
.rk-pill--neutral { background: #2a2a2e; color: #d6d3cc; }
/* O display:inline-flex acima venceria o atributo hidden (ex.: "Seu lance" na sala do leilão). */
.rk-pill[hidden] { display: none; }
.rk-pill--live { background: #3a1416; color: #ff9a94; }
.rk-pill--live::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: var(--rk-live); }

.rk-track { height: 10px; background: #2a2b30; border-radius: 99px; overflow: hidden; }
.rk-track > span { display: block; height: 100%; background: var(--rk-gold); }

.rk-notice { border: 1px solid #4d412a; background: #1d1a15; color: #e2d2b0; border-radius: 10px; padding: 12px 16px; font-size: 14px; }

/* Formulários */
.rk-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rk-field label { font-size: 13px; color: #c9c5bd; font-weight: 500; }
.rk-field small { font-size: 12px; color: var(--rk-muted); }
.rk-input, .rk-field input, .rk-field select, .rk-field textarea {
    min-height: 46px; width: 100%; background: #0f1013; border: 1px solid #3a3b40; border-radius: 10px;
    color: var(--rk-text); padding: 0 12px; font: inherit; outline: none;
}
.rk-field textarea { padding: 10px 12px; min-height: 90px; }
.rk-input:focus, .rk-field input:focus, .rk-field select:focus, .rk-field textarea:focus { border-color: var(--rk-gold); }
.rk-field .field-validation-error, .rk-field-error { color: var(--rk-danger); font-size: 12px; }
.rk-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: #d6d3cc; cursor: pointer; }
.rk-check input { width: 18px; height: 18px; accent-color: var(--rk-gold); margin-top: 2px; flex: none; }
.rk-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }

/* ---------------------------------------------------------------------------
   Barra superior, cabeçalho e navegação
   --------------------------------------------------------------------------- */
.rk-topbar { background: #15130f; border-bottom: 1px solid #2e281c; font-size: 13px; color: #c9bfa8; }
.rk-topbar .rk-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-top: 8px; padding-bottom: 8px; }
.rk-topbar__links { display: flex; gap: 18px; flex-wrap: wrap; }

.rk-header { border-bottom: 1px solid #2a2620; background: var(--rk-bg); }
.rk-header .rk-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; padding-bottom: 18px; }

.rk-brand { display: flex; align-items: center; gap: 12px; }
.rk-public a.rk-brand { color: var(--rk-text); }
.rk-brand__mark {
    width: 44px; height: 44px; border-radius: 10px; background: var(--rk-gold); color: var(--rk-on-gold);
    display: flex; align-items: center; justify-content: center;
    font: 700 28px/1 var(--rk-font-display);
}
.rk-brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.rk-brand__name { font-weight: 800; letter-spacing: 3px; font-size: 17px; }
.rk-brand__tag { font-size: 11px; letter-spacing: 2px; color: var(--rk-gold); text-transform: uppercase; }

.rk-nav { display: flex; flex-wrap: wrap; gap: 22px; }
.rk-public .rk-nav a { color: #c9c6bf; font-size: 14px; font-weight: 500; padding: 12px 4px; }
.rk-public .rk-nav a:hover, .rk-public .rk-nav a[aria-current="page"] { color: var(--rk-gold); }

.rk-header__actions { display: flex; gap: 10px; align-items: center; }
.rk-public .rk-header__actions .rk-link { color: #c9c6bf; font-size: 14px; font-weight: 500; padding: 12px 4px; }
.rk-public .rk-header__actions .rk-link:hover { color: var(--rk-gold); }
.rk-hello { font-size: 13px; color: var(--rk-muted); }
.rk-hello strong { color: var(--rk-text); }

/* ---------------------------------------------------------------------------
   Rodapé
   --------------------------------------------------------------------------- */
.rk-footer { margin-top: 72px; border-top: 1px solid #2a2620; background: #0d0e10; }
.rk-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; padding-top: 40px; padding-bottom: 28px; font-size: 14px; }
.rk-footer__col { display: flex; flex-direction: column; gap: 8px; }
.rk-public .rk-footer__col a { color: #b8b5ae; }
.rk-public .rk-footer__col a:hover { color: var(--rk-gold); }
.rk-footer__bottom { padding-bottom: 28px; color: #8d8d94; font-size: 12px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
/* Crédito da ETL Sistemas: símbolo pequeno + nome, no tom discreto do rodapé. */
.rk-public .rk-footer__etl { display: inline-flex; align-items: center; gap: 6px; color: #8d8d94; text-decoration: none; }
.rk-public .rk-footer__etl:hover, .rk-public .rk-footer__etl:focus-visible { color: var(--rk-text); }
.rk-footer__etl img { display: block; width: 18px; height: 18px; }
.rk-footer__etl strong { font-weight: 600; }

/* ---------------------------------------------------------------------------
   Loading (usado por showLoading/hideLoading do utils.js)
   --------------------------------------------------------------------------- */
#loading-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .6); z-index: 9998; }
#loading-spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: var(--rk-text); }
.rk-spinner { width: 42px; height: 42px; border: 4px solid var(--rk-line); border-top-color: var(--rk-gold); border-radius: 50%; animation: rk-spin .8s linear infinite; margin: 0 auto 10px; }
@keyframes rk-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------------
   Telefone
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {
    .rk-wrap { padding: 0 16px; }
    .rk-header .rk-wrap { gap: 10px; }
    .rk-nav { gap: 6px 16px; order: 3; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .rk-spinner { animation: none; }
}

/* ---------------------------------------------------------------------------
   Vitrine (Home, Loja, Produto, Break)
   --------------------------------------------------------------------------- */
.rk-section { padding-top: 56px; }
.rk-section__head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.rk-section__title { margin: 4px 0 0; font-size: 40px; line-height: 1; }

.rk-grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.rk-grid-cards--sm { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

.rk-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--rk-panel); border: 1px solid var(--rk-line); border-radius: var(--rk-radius); }
.rk-public a.rk-card { color: var(--rk-text); }
.rk-card:hover { border-color: #8c7446; }
.rk-card__art { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid #3a3326; background: linear-gradient(160deg, #2a2419 0%, #15161a 60%); aspect-ratio: 5 / 7; }
.rk-card__art--wide { aspect-ratio: 4 / 3; }
.rk-card__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rk-card__flag { position: absolute; top: 10px; left: 10px; }
.rk-card__cat { font-size: 12px; color: var(--rk-muted); letter-spacing: 1px; text-transform: uppercase; }
.rk-card__name { font-weight: 600; line-height: 1.3; }
.rk-card__sub { font-size: 13px; color: var(--rk-muted); }
.rk-card__price { font-size: 20px; font-weight: 700; color: var(--rk-gold); }
.rk-card__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: end; gap: 8px; }
.rk-card__meta { display: flex; justify-content: space-between; font-size: 13px; }

.rk-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.rk-tab { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--rk-line); background: var(--rk-panel); font-weight: 600; }
.rk-public a.rk-tab { color: #c9c6bf; }
.rk-public a.rk-tab[aria-current="page"] { background: var(--rk-gold); border-color: var(--rk-gold); color: var(--rk-on-gold); }

.rk-pager { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding-top: 32px; }
.rk-empty { padding: 40px; text-align: center; color: var(--rk-muted); }

.rk-hero { background: radial-gradient(circle at 70% -10%, #2b2418 0%, var(--rk-bg) 55%); }
.rk-page-head { background: radial-gradient(circle at 80% -40%, #2b2418 0%, var(--rk-bg) 60%); border-bottom: 1px solid #1f2024; }
.rk-crumbs { font-size: 13px; color: var(--rk-muted); }

/* ---------------------------------------------------------------------------
   Minha conta (Views/Conta/*: Dados e Pedidos compartilham o painel lateral)
   --------------------------------------------------------------------------- */
.conta { display: flex; flex-wrap: wrap; gap: 28px; padding-top: 32px; padding-bottom: 24px; align-items: flex-start; }
.conta__side { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.conta__perfil { padding: 18px; display: flex; gap: 12px; align-items: center; }
.conta__avatar { width: 48px; height: 48px; border-radius: 99px; background: var(--rk-gold-soft); color: var(--rk-gold); display: flex; align-items: center; justify-content: center; flex: none; }
.conta__nav { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.conta__nav a, .conta__nav button { display: flex; align-items: center; min-height: 46px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.rk-public .conta__nav a { color: #c9c6bf; }
.rk-public .conta__nav a[aria-current="page"] { background: var(--rk-gold-soft); color: #e7c886; font-weight: 600; }
.conta__nav button { color: var(--rk-danger); width: 100%; }
.conta__main { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.conta__title { margin: 0; font-size: 44px; line-height: 1; }
.conta__count { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--rk-muted); }

/* Live da Twitch (Views/Shared/_LiveTwitch) */
.rk-live { display: flex; flex-direction: column; gap: 8px; }
.rk-live iframe { width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--rk-line); border-radius: var(--rk-radius); background: #101114; display: block; }