/*
Theme Name: O Bizu
Theme URI: https://obizu.online
Author: O Bizu
Author URI: https://obizu.online
Description: Tema oficial do site institucional, blog e loja de assinaturas (WooCommerce + WooCommerce Subscriptions) do O Bizu — plataforma de preparatório com identidade naval preto e dourado, coerente com o app em app.obizu.online.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Tested up to: 6.6
WC requires at least: 8.0
WC tested up to: 9.0
Text Domain: obizu
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: education, e-commerce, dark, custom-colors, custom-menu, custom-logo, translation-ready
*/

/* ============================================================
   O BIZU — identidade visual (preto + dourado, tema naval)
   Tokens espelhados de client/src/styles.css do app Angular,
   para que site institucional, blog, loja e app sejam a mesma marca.
   ============================================================ */
:root {
  --obizu-gold: #D4AF37;
  --obizu-gold-light: #F0D264;
  --obizu-gold-dark: #A9791F;
  --obizu-black: #000000;
  --obizu-surface: #121212;
  --obizu-surface-2: #1a1a1a;
  --obizu-surface-3: #202020;
  --obizu-border: #3a3a3a;
  --obizu-border-translucent: rgba(212, 175, 55, 0.3);
  --obizu-body-color: #f0f0f0;
  --obizu-secondary-color: rgba(240, 240, 240, 0.75);
  --obizu-tertiary-color: rgba(240, 240, 240, 0.5);
  --obizu-success: #198754;
  --obizu-warning: #F0D264;
  --obizu-danger: #dc3545;
  --obizu-info: #0dcaf0;
  --obizu-font-body: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --obizu-font-heading: "Oswald", var(--obizu-font-body);
  --obizu-radius: 0.375rem;
  --obizu-radius-sm: 0.25rem;
  --obizu-radius-lg: 0.5rem;
  --obizu-radius-pill: 50rem;
  --obizu-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
  --obizu-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.4);
  --obizu-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.6);
  --obizu-container: 1140px;
  /* Altura do header — pensada pra caber o logo (âncora + "O BIZU" +
     "Preparatório") de forma legível, não o contrário. Se o logo
     precisar de mais espaço, aumente este valor em vez de forçar uma
     altura menor na imagem. */
  --obizu-header-h: 88px;
}

@media (max-width: 480px) {
  :root { --obizu-header-h: 72px; }
}

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

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--obizu-font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--obizu-body-color);
  background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(212, 175, 55, 0.12), transparent), var(--obizu-black);
  min-height: 100vh;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--obizu-gold); text-decoration: none; }
a:hover, a:focus { color: var(--obizu-gold-light); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--obizu-font-heading);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
  margin: 0 0 0.75rem;
}

/* Sem isso, cada navegador aplica sua própria margem padrão de <p>,
   <ul>, <ol> e <blockquote> — diferente dos gaps/paddings que o resto
   deste arquivo já define via rem, e o resultado são espaços que não
   batem com o ritmo do layout ("esquisitos"). Um único valor, e cada
   componente decide se some no último filho. */
p, ul, ol, blockquote, dl { margin: 0 0 1rem; }
ul, ol { padding-left: 1.25rem; }
p:last-child, ul:last-child, ol:last-child, blockquote:last-child,
.card-body > *:last-child, .widget > *:last-child { margin-bottom: 0; }

.brand-wordmark {
  font-family: var(--obizu-font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #ffffff;
}

.text-gold { color: var(--obizu-gold) !important; }
.text-muted-obizu { color: var(--obizu-tertiary-color); }

.container {
  width: 100%;
  max-width: var(--obizu-container);
  margin: 0 auto;
  padding: 0 1.25rem;
}
.container-narrow { max-width: 760px; }

.section { padding: 4rem 0; }
.section-tight { padding: 2.5rem 0; }

.eyebrow {
  display: inline-block;
  font-family: var(--obizu-font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--obizu-gold);
  margin-bottom: 0.75rem;
}

/* Cabeçalho de seção (eyebrow + título + texto de apoio, centralizado).
   Um componente único no lugar de margin inline repetida em cada
   template — mesmo bloco, mesma distância sempre. */
.section-header { max-width: 640px; margin: 0 auto 3rem; text-align: center; }
.section-header .eyebrow { margin-bottom: 0.5rem; }
.section-header h2 { margin-bottom: 0; }
.section-header p { margin: 0.75rem 0 0; color: var(--obizu-secondary-color); }

.section-bordered { border-top: 1px solid var(--obizu-border); }

/* Duas colunas com conteúdo principal + sidebar (blog). Único lugar
   onde essa grade é definida — os templates só aplicam a classe. */
.row-with-sidebar { display: grid; grid-template-columns: 2fr 1fr; gap: 2.5rem; align-items: start; }

/* Pílula com borda dourada e leve brilho — destaques curtos tipo
   "Acesso até a data da prova". */
.badge-pill-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--obizu-gold);
  border-radius: var(--obizu-radius-pill);
  padding: 0.65rem 1.75rem;
  font-family: var(--obizu-font-heading);
  letter-spacing: 0.02em;
  color: var(--obizu-body-color);
  box-shadow: 0 0 28px rgba(212, 175, 55, 0.15);
}

/* Lista de benefícios com ícone à esquerda, uma caixa com borda por
   item — para uso em páginas de vendas (Editor de blocos: liste os
   itens em uma lista e adicione a classe "obizu-checklist"; cada
   <li> começando com um <i class="bi bi-check-circle-fill"> herda o
   estilo de ícone). */
.obizu-checklist { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.obizu-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  border: 1px solid var(--obizu-border-translucent);
  border-radius: var(--obizu-radius-lg);
  padding: 1.1rem 1.4rem;
  margin: 0;
  color: var(--obizu-body-color);
}
.obizu-checklist li i,
.obizu-checklist li .icon { flex: none; font-size: 1.3rem; line-height: 1.4; color: var(--obizu-gold); }

/* Lista de perguntas com círculo numerado/ícone — para blocos tipo
   "Pense comigo". Mesma convenção de uso do checklist acima. */
.obizu-qa-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.obizu-qa-list li { display: flex; align-items: flex-start; gap: 1rem; margin: 0; }
.obizu-qa-list li .qa-icon {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--obizu-gold);
  color: #000;
  font-weight: 700;
  font-family: var(--obizu-font-heading);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--obizu-font-body);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.65rem 1.5rem;
  border-radius: var(--obizu-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  line-height: 1.4;
}
.btn:active { transform: translateY(1px); }

.btn-primary,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce input.button,
.woocommerce-Button {
  background-color: var(--obizu-gold) !important;
  border-color: var(--obizu-gold) !important;
  color: #000 !important;
}
.btn-primary:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce input.button:hover {
  background-color: var(--obizu-gold-light) !important;
  border-color: var(--obizu-gold-light) !important;
  color: #000 !important;
}
.btn-primary:active,
.woocommerce a.button:active {
  background-color: var(--obizu-gold-dark) !important;
  border-color: var(--obizu-gold-dark) !important;
}
.btn-primary.btn-lg { padding: 0.9rem 2rem; font-size: 1.05rem; }

.btn-outline {
  background: transparent;
  border-color: var(--obizu-gold);
  color: var(--obizu-gold);
}
.btn-outline:hover { background: var(--obizu-gold); color: #000; }

.btn-block { display: flex; width: 100%; }

/* ---------- Cards ---------- */
.card {
  background-color: var(--obizu-surface);
  border: 1px solid var(--obizu-border);
  border-radius: var(--obizu-radius-lg);
  overflow: hidden;
}
.card-header {
  background-color: var(--obizu-surface-2);
  border-bottom: 1px solid var(--obizu-border);
  padding: 1rem 1.25rem;
  font-family: var(--obizu-font-heading);
  font-weight: 600;
}
.card-body { padding: 1.25rem; }
.card-footer {
  background-color: var(--obizu-surface-2);
  border-top: 1px solid var(--obizu-border);
  padding: 1rem 1.25rem;
}

/* ---------- Formulários ---------- */
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="search"],
input[type="url"], textarea, select {
  width: 100%;
  background-color: var(--obizu-surface-2);
  border: 1px solid var(--obizu-border);
  border-radius: var(--obizu-radius);
  color: var(--obizu-body-color);
  padding: 0.65rem 0.9rem;
  font-family: var(--obizu-font-body);
  font-size: 1rem;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--obizu-gold);
  box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25);
}
input::placeholder, textarea::placeholder { color: #8a8a8a; }
label { display: block; font-weight: 500; margin-bottom: 0.35rem; color: var(--obizu-body-color); }

/* ---------- Header / navegação ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--obizu-header-h);
  display: flex;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--obizu-border);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }

/* Logo próprio (imagem única já composta: âncora + texto), enviado em
   Aparência → Personalizar → Identidade do site → Logo. Só max-height
   é travado (a partir de --obizu-header-h) — height/width ficam auto,
   pra imagem escalar mantendo a proporção real do arquivo. Definir
   height E max-width juntos (como antes) trava as duas dimensões ao
   mesmo tempo e ESPREME a imagem fora de proporção; com só max-height
   + auto, o navegador calcula a largura sozinho.
   flex-shrink:0 e sem overflow:hidden: o logo nunca deve encolher (e
   muito menos ser cortado) pra abrir espaço pro menu/ícones — se
   faltar espaço na tela, o problema é do resto do header, não do
   logo. Abaixo de 900px o menu já vira o hambúrguer, então essa
   disputa por espaço só existiria numa faixa estreita de larguras
   médias, que a prioridade abaixo evita. */
.site-logo { display: flex; align-items: center; height: 100%; flex-shrink: 0; }
.site-header .site-logo img.custom-logo {
  height: auto !important;
  width: auto !important;
  max-height: calc(var(--obizu-header-h) - 24px) !important;
  max-width: none !important;
}
.site-footer .site-logo img.custom-logo {
  height: auto !important;
  width: auto !important;
  max-height: 56px !important;
  max-width: 100% !important;
}

/* Fallback só usado enquanto nenhum logo próprio for enviado: âncora +
   divisor fino + "O BIZU"/"Preparatório" empilhado, remontado em CSS. */
.site-logo-mark { display: flex; align-items: center; }
.site-logo-mark img { height: calc(var(--obizu-header-h) - 40px); width: auto; }
.site-logo-divider { width: 1px; height: calc(var(--obizu-header-h) - 44px); background: var(--obizu-border); flex: none; margin: 0 0.65rem; }
.site-logo-text { display: flex; flex-direction: column; line-height: 1.15; gap: 0.15rem; }
.site-logo-title {
  font-family: var(--obizu-font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.25rem;
  color: #ffffff;
}

.primary-nav { display: flex; align-items: center; gap: 1.75rem; }
.primary-nav ul { list-style: none; display: flex; gap: 1.75rem; margin: 0; padding: 0; }
.primary-nav a {
  color: var(--obizu-body-color);
  font-weight: 500;
  font-size: 0.95rem;
}
.primary-nav a:hover, .primary-nav .current-menu-item > a { color: var(--obizu-gold); }

.header-actions { display: flex; align-items: center; gap: 0.75rem; }
.header-icon-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--obizu-body-color);
  border: 1px solid var(--obizu-border);
}
.header-icon-link:hover { border-color: var(--obizu-gold); color: var(--obizu-gold); }
.cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--obizu-gold);
  color: #000;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--obizu-border);
  border-radius: var(--obizu-radius);
  color: #fff;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
}

@media (max-width: 900px) {
  /* O hambúrguer só abria um menu com 1 link ("Conta") que já duplicava o
     ícone de conta ao lado - removido do header.php nesta mesma rodada
     (junto com o carrinho). Sem conteúdo de verdade pra mostrar, o
     hambúrguer some no mobile em vez de abrir um painel vazio-parecendo;
     .primary-nav simplesmente nunca ganha .is-open sem o botão que a
     alternava, então nem precisa de position:fixed/transform aqui.
     Continua renderizado normalmente (inline) em telas ≥900px. */
  .nav-toggle { display: none; }
  .primary-nav { display: none; }
  /* "Acessar o app" nunca tinha ajuste mobile - mantinha o padding/fonte
     de desktop. Com carrinho e hambúrguer fora, só resta o ícone de conta
     + o botão numa linha só - cabe sem precisar quebrar linha (quebrar
     "caía" o botão pra fora da barra de altura fixa do header, pior que
     o problema original). */
  .header-actions { flex-wrap: nowrap; }
  .header-actions .btn-primary { padding: 0.5rem 1rem; font-size: 0.85rem; white-space: nowrap; }
}

/* ---------- Hero / home ---------- */
.hero {
  padding: 5rem 0 4rem;
  text-align: center;
  border-bottom: 1px solid var(--obizu-border);
  background: radial-gradient(ellipse 60% 60% at 50% 0%, rgba(212, 175, 55, 0.15), transparent);
}
/* img virou display:block no reset global (evita o espaço fantasma
   que <img> inline deixa embaixo) — o efeito colateral é que
   text-align:center do pai deixa de centralizar uma imagem block,
   por isso margin:0 auto explícito aqui e no logo de login/conta. */
.hero img.hero-anchor { height: 96px; margin: 0 auto 1.5rem; }
.hero h1 { font-size: clamp(2rem, 4vw, 3.2rem); text-transform: uppercase; letter-spacing: 0.02em; }
.hero p.lead { font-size: 1.2rem; color: var(--obizu-secondary-color); max-width: 620px; margin: 0 auto 2rem; }
.hero .hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }
.feature-grid .card { padding: 1.75rem; text-align: left; }
.feature-grid .feature-icon { font-size: 1.75rem; color: var(--obizu-gold); margin-bottom: 0.75rem; }

.cta-band {
  background-color: var(--obizu-surface);
  border-top: 1px solid var(--obizu-border);
  border-bottom: 1px solid var(--obizu-border);
  text-align: center;
  padding: 3.5rem 0;
}

/* ---------- Blog ---------- */
.posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.75rem; }
.post-card { display: flex; flex-direction: column; height: 100%; }
.post-card .post-thumb { aspect-ratio: 16/9; overflow: hidden; background-color: var(--obizu-surface-2); }
.post-card .post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card .card-body { flex: 1; display: flex; flex-direction: column; }
.post-card .post-meta { font-size: 0.8rem; color: var(--obizu-tertiary-color); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.04em; }
.post-card h2, .post-card h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.post-card p { color: var(--obizu-secondary-color); flex: 1; }
.post-card .read-more { margin-top: auto; font-weight: 600; }

.badge-category {
  display: inline-block;
  background-color: var(--obizu-surface-2);
  border: 1px solid var(--obizu-border);
  color: var(--obizu-body-color);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.65rem;
  border-radius: var(--obizu-radius-pill);
  margin: 0 0.35rem 0.35rem 0;
}

.single-article { max-width: 760px; margin: 0 auto; }
.single-article .post-thumb { border-radius: var(--obizu-radius-lg); overflow: hidden; margin-bottom: 2rem; }
.single-article .post-content { font-size: 1.08rem; line-height: 1.8; }
.single-article .post-content h2 { margin-top: 2rem; font-size: 1.5rem; }
.single-article .post-content h3 { margin-top: 1.5rem; font-size: 1.2rem; }
.single-article .post-content blockquote {
  border-left: 3px solid var(--obizu-gold);
  margin: 1.5rem 0;
  padding: 0.5rem 0 0.5rem 1.25rem;
  color: var(--obizu-secondary-color);
  font-style: italic;
}
.single-article .post-content pre, .single-article .post-content code {
  background-color: var(--obizu-surface-2);
  border-radius: var(--obizu-radius);
}
.single-article .post-content pre { padding: 1rem; overflow-x: auto; }
.single-article .post-content img { border-radius: var(--obizu-radius); }
.single-article .post-content a { text-decoration: underline; }

.author-box {
  display: flex;
  gap: 1rem;
  align-items: center;
  background-color: var(--obizu-surface);
  border: 1px solid var(--obizu-border);
  border-radius: var(--obizu-radius-lg);
  padding: 1.25rem;
  margin: 2.5rem 0;
}
.author-box img { border-radius: 50%; width: 56px; height: 56px; }

.tags-list { margin: 1.5rem 0; }

/* ---------- Comentários ---------- */
.comments-area { max-width: 760px; margin: 3rem auto 0; }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list .comment { border-top: 1px solid var(--obizu-border); padding: 1.25rem 0; }
.comment-author { font-weight: 700; color: #fff; }
.comment-metadata { font-size: 0.8rem; color: var(--obizu-tertiary-color); }
.comment-respond { margin-top: 2rem; }
.comment-form p { margin-bottom: 1rem; }

/* ---------- Sidebar ---------- */
.widget { background-color: var(--obizu-surface); border: 1px solid var(--obizu-border); border-radius: var(--obizu-radius-lg); padding: 1.25rem; margin-bottom: 1.5rem; }
.widget-title { font-family: var(--obizu-font-heading); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--obizu-gold); margin-bottom: 1rem; }
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { padding: 0.4rem 0; border-bottom: 1px dashed var(--obizu-border); }
.widget li:last-child { border-bottom: none; }

/* ---------- Rodapé ---------- */
.site-footer { border-top: 1px solid var(--obizu-border); background-color: var(--obizu-surface); padding: 3rem 0 1.5rem; margin-top: 4rem; }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 2rem; margin-bottom: 2rem; }
.footer-grid .widget { background: transparent; border: none; padding: 0; margin-bottom: 0; }

/* Widgets em bloco (editor de widgets do Gutenberg) — a barra lateral
   do blog já herda o cartão escuro (.widget) e a lista (.widget ul/li)
   das regras acima porque essas classes convivem lado a lado nas
   mesmas divs, mas o título e o botão de busca do bloco usam classes
   próprias do WordPress que não herdam nada disso. */
.widget .wp-block-heading { font-family: var(--obizu-font-heading); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--obizu-gold); margin-bottom: 1rem; }
.widget .wp-element-button,
.widget .wp-block-search__button {
  background-color: var(--obizu-gold);
  color: #000;
  border: none;
  border-radius: var(--obizu-radius);
  padding: 0.6rem 1rem;
  font-weight: 700;
  cursor: pointer;
}
.widget .wp-block-search__button:hover { background-color: var(--obizu-gold-light); }
.widget .no-comments { color: var(--obizu-tertiary-color); }
.footer-brand p { color: var(--obizu-secondary-color); max-width: 320px; }
.footer-social { display: flex; gap: 0.75rem; margin-top: 1rem; }
.footer-bottom { border-top: 1px solid var(--obizu-border); padding-top: 1.5rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; font-size: 0.85rem; color: var(--obizu-tertiary-color); }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Utilidades ---------- */
.pagination { display: flex; gap: 0.5rem; justify-content: center; margin: 2.5rem 0; flex-wrap: wrap; }
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; border-radius: var(--obizu-radius);
  border: 1px solid var(--obizu-border); color: var(--obizu-body-color);
}
.pagination .current { background-color: var(--obizu-gold); border-color: var(--obizu-gold); color: #000; font-weight: 700; }
.pagination a:hover { border-color: var(--obizu-gold); color: var(--obizu-gold); }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--obizu-gold); color: #000; padding: 0.75rem 1.25rem; z-index: 2000; }
.skip-link:focus { left: 1rem; top: 1rem; }

.alert { border-radius: var(--obizu-radius); padding: 1rem 1.25rem; border: 1px solid var(--obizu-border); margin-bottom: 1.5rem; }
.alert-info { border-color: var(--obizu-info); color: var(--obizu-info); }
.alert-success { border-color: var(--obizu-success); color: #75b798; }
.alert-danger { border-color: var(--obizu-danger); color: #ea868f; }

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
@media (max-width: 900px) {
  .row-with-sidebar { grid-template-columns: 1fr; }
}
.spinner {
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 3px solid var(--obizu-border); border-top-color: var(--obizu-gold);
  animation: obizu-spin 0.8s linear infinite; margin: 2rem auto; display: block;
}
@keyframes obizu-spin { to { transform: rotate(360deg); } }