/* VAPI.bet brand layer. Loaded last on public pages. */
:root {
  --background: 240 8% 7%;
  --foreground: 240 5% 97%;
  --card: 225 10% 13%;
  --card-foreground: 240 5% 97%;
  --popover: 225 10% 13%;
  --popover-foreground: 240 5% 97%;
  --primary: #FFD600;
  --secondary: 225 10% 13%;
  --muted: 225 10% 13%;
  --muted-foreground: 228 6% 73%;
  --accent: 50 100% 50%;
  --border: 228 7% 26%;
  --ring: 50 100% 50%;
}
html, body { background: #101114 !important; color: #F7F7F8; }
body { accent-color: #FFD600; }
header.bg-brand, .bg-brand { background-color: #101114 !important; }
.bg-surface-200, .menu-bottom-nav, .bg-background { background-color: #1C1E24 !important; }
.menu-bottom-nav { border-top: 1px solid #34363d !important; }
.menu-bottom-nav-item:has([href="/"]) { color: #FFD600 !important; }
.vux-native-provider-card { background: linear-gradient(145deg,#292c34,#1C1E24) !important; border-color: #4a4d54 !important; }
#vux-maiores-ganhos { display: none !important; }
.vux-native-home-payout, .vux-paid-today, .vux-payout-badge { display: none !important; }
[class*="bg-header-primary"], [class*="bg-[#00ff99]"], [class*="bg-[#00e892]"] { background: #FFD600 !important; color: #101114 !important; filter: none !important; }
::selection { background: #FFD600; color: #101114; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid #FFD600; outline-offset: 2px; }
.vux-global-brand-logo, .green-modal-logo { width: 148px !important; max-height: 44px !important; object-fit: contain; }
.bg-gradient-brand { background: linear-gradient(180deg,#101114,#1C1E24 42%,#101114) !important; }
[data-sidebar], .vux-account-side, .vux-header-dropdown { background: #1C1E24 !important; border-color: #34363d !important; }
.vux-account-header, .vux-header, .vux-account-body, .vux-account-shell { background-color: #101114 !important; }
.vux-header-avatar, .vux-header-avatar:hover { color: #FFD600 !important; border-color: rgba(255,214,0,.6) !important; background: rgba(255,214,0,.12) !important; }
.vux-header-dropdown a span, .vux-header-dropdown button span { color: #FFD600 !important; }
.vux-header-dropdown a > .vux-menu-option-badge { background: #FFD600 !important; color: #101114 !important; box-shadow: none !important; }
.vux-header-account-actions > button[onclick*="openDepositModal"], .vux-account-deposit,
.btn-submit-auth, .wallet-pix-submit, .vux-bonus-claim, .vux-promo-cta,
.vux-account-wallet-actions button:first-child, .vux-bonus-card button,
.vux-bonus-card a { background: #FFD600 !important; border-color: #FFD600 !important; color: #101114 !important; box-shadow: 0 8px 24px rgba(255,214,0,.18) !important; font-weight: 850; }
.vux-header-account-actions > button[onclick*="openDepositModal"]:hover, .vux-account-deposit:hover,
.btn-submit-auth:hover, .wallet-pix-submit:hover { background: #ffe43a !important; }
.vux-account-title small, .vux-bonus-card small, .vux-promo-kicker { color: #FFD600 !important; }
.vux-bonus-card, .vux-account-balance-card, .wallet-native-card, .wallet-modal-card, .modal-card {
  background: #1C1E24 !important; border-color: #3b3d44 !important; color: #F7F7F8 !important;
}
.wallet-quick-values button, .wallet-amount-field, .wallet-native-body input { background: #24262c !important; border-color: #44464d !important; color: #F7F7F8 !important; }
.wallet-quick-values button.is-selected, .wallet-quick-values button:hover { border-color: #FFD600 !important; background: rgba(255,214,0,.13) !important; }
.wallet-most-picked em { background: #FFD600 !important; color: #101114 !important; }
.vux-promo-card { background: #1C1E24 !important; border-color: #FFD600 !important; color: #F7F7F8 !important; box-shadow: 0 24px 80px rgba(0,0,0,.7) !important; }
.vux-promo-art { background: #101114 !important; }
.vux-promo-content, .vux-promo-content h2, .vux-promo-reward strong { color: #F7F7F8 !important; }
.vux-promo-content p, .vux-promo-reward span, .vux-promo-content small { color: #B5B7BF !important; }
.vux-promo-reward { background: #25272d !important; border-color: #4b4d54 !important; }
.vux-promo-close { background: #303238 !important; color: #F7F7F8 !important; }
.vux-account-menu .is-active, .vux-bonus-tabs .is-active { color: #FFD600 !important; border-color: #FFD600 !important; }
.vux-bonus-empty { background: #1C1E24 !important; border-color: #3b3d44 !important; }
/* Account templates still carry a purple gradient in their shorthand background. */
.vux-account-body { --account-green: #FFD600; --account-bg: #101114; --account-card: #1C1E24; background: #101114 !important; }
.vux-account-header { background: #101114 !important; border-bottom: 1px solid #34363d !important; }
.vux-account-brand img { width: auto !important; height: 32px !important; max-width: 130px !important; max-height: 36px !important; }
.vux-account-person, .vux-account-menu, .vux-profile-card, .vux-profile-note,
.vux-transaction-card, .vux-bets-card, .vux-bonus-tabs, .vux-bonus-card,
.vux-bonus-empty, .vux-bonus-mobile-hero { background: #1C1E24 !important; border-color: #3b3d44 !important; }
.vux-account-menu a.is-active, .vux-bonus-tabs a.is-active { background: #FFD600 !important; color: #101114 !important; }
.vux-bonus-tabs a:not(.is-active) { color: #B5B7BF !important; }
.vux-account-title > span, .vux-bonus-empty > span, .vux-account-person > b { background: rgba(255,214,0,.13) !important; color: #FFD600 !important; }
.vux-account-wallet-actions button { border-color: #FFD600 !important; color: #FFD600 !important; }
.vux-account-wallet-actions button:first-child { background: #FFD600 !important; color: #101114 !important; }
.vux-account-body > footer { background: #101114 !important; border-top-color: #34363d !important; }
#primorHeroBanners, #vapiHeroBanners { border-radius: 18px; }
#primorHeroBanners img, #vapiHeroBanners img { border-color: rgba(255,214,0,.4) !important; }
.vapi-hero { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 4px 18px; overflow: hidden; }
.vapi-hero-track { display: flex; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-behavior: smooth; touch-action: pan-x pan-y; }
.vapi-hero-track::-webkit-scrollbar { display: none; }
.vapi-hero-slide { position: relative; flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.vapi-hero-slide a { display: block; }
.vapi-hero-slide img { display: block; width: 100%; height: auto; aspect-ratio: 1262 / 586; object-fit: cover; border-radius: 14px; }
.vapi-hero-status { position: absolute; top: 10px; right: 10px; padding: 5px 8px; border: 1px solid rgba(255,214,0,.7); border-radius: 7px; background: rgba(16,17,20,.92); color: #FFD600; font-size: 10px; font-weight: 850; line-height: 1.2; }
.vapi-hero-arrow { position: absolute; top: calc(50% - 12px); z-index: 2; display: grid; width: 32px; height: 36px; place-items: center; transform: translateY(-50%); border: 1px solid rgba(255,214,0,.6); border-radius: 9px; background: rgba(16,17,20,.78); color: #FFD600; font-size: 28px; line-height: 1; cursor: pointer; }
.vapi-hero-arrow.is-prev { left: 10px; }
.vapi-hero-arrow.is-next { right: 10px; }
.vapi-hero-arrow:hover { background: #FFD600; color: #101114; }
.vapi-hero-dots { position: absolute; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; gap: 6px; height: 16px; }
.vapi-hero-dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: #6c6e75; cursor: pointer; }
.vapi-hero-dots button[aria-current="true"] { width: 18px; background: #FFD600; }
@media (max-width: 640px) { .vapi-hero-status { top: 6px; right: 6px; padding: 3px 5px; font-size: 8px; } .vapi-hero-arrow { width: 25px; height: 29px; font-size: 22px; } }
@media (prefers-reduced-motion: reduce) { .vapi-hero-track { scroll-behavior: auto; } }
#VAPIHeroBanners { max-width: 1280px; border-radius: 12px; }
#VAPIHeroBanners a { height: clamp(136px, 36vw, 200px) !important; min-height: 0 !important; aspect-ratio: auto !important; }
#VAPIHeroBanners img { display: block; width: 100%; height: clamp(136px, 36vw, 200px) !important; object-fit: fill !important; border-radius: 12px; }
.vapi-shortcuts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; width: 100%; max-width: 850px; margin: 4px auto 0; padding: 5px 10px 4px; background: #101114; }
.vapi-shortcuts a { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; color: #F7F7F8; text-decoration: none; text-align: center; }
.vapi-shortcut-icon { display: block; width: clamp(54px, 14.5vw, 82px); height: clamp(48px, 13vw, 74px); overflow: hidden; border-radius: 50%; transition: transform .2s ease; }
.vapi-shortcuts img { display: block; width: 100%; height: auto; max-width: none; }
.vapi-shortcuts a:hover .vapi-shortcut-icon { transform: translateY(-3px); }
.vapi-shortcuts strong { display: block; font-size: clamp(10px, 2.5vw, 14px); font-weight: 750; line-height: 1.08; min-height: 2.16em; }
.vapi-shortcut-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 8px; width: 100%; max-width: 850px; margin: 1px auto 9px; padding: 0 11px; }
.vapi-shortcut-search label, .vapi-shortcut-search a { min-height: 40px; display: flex; align-items: center; gap: 7px; border: 1px solid #41434a; border-radius: 9px; background: #101114; color: #F7F7F8; }
.vapi-shortcut-search label { padding: 0 11px; }
.vapi-shortcut-search label span { color: #FFD600; font-size: 25px; line-height: 1; }
.vapi-shortcut-search input { min-width: 0; width: 100%; color: #F7F7F8; background: transparent; border: 0; outline: 0; font-size: 13px; }
.vapi-shortcut-search input::placeholder { color: #B5B7BF; opacity: 1; }
.vapi-shortcut-search a { padding: 0 12px; font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.vapi-shortcut-search a span { color: #FFD600; font-size: 17px; }
[class*="border-[#67efc4]"], [class*="border-[#00ff99]"] { border-color: rgba(255,214,0,.5) !important; }
[class*="text-[#00ff99]"], [class*="text-[#67efc4]"] { color: #FFD600 !important; }
[class~="bg-[#00ff99]"], [class~="bg-[#00e892]"] { background-color: #FFD600 !important; color: #101114 !important; }
/* Sports page and the home fixture shelf share the VAPI palette. */
body.vux-sports-page { background: #101114 !important; color: #F7F7F8; }
.vux-sports-header { background: #101114 !important; border-bottom-color: #34363d !important; box-shadow: none !important; }
.vux-sports-header nav a[href="/esportes"] { color: #FFD600 !important; border-color: #FFD600 !important; }
.vux-sports-auth-button.is-register, .vux-sports-deposit { background: #FFD600 !important; border-color: #FFD600 !important; color: #101114 !important; }
.vux-sports-auth-button.is-login { border-color: #B5B7BF !important; color: #F7F7F8 !important; }
.vux-sports-nav-btn { background: #24262c !important; border-color: #45474d !important; color: #B5B7BF !important; }
.vux-sports-nav-btn.is-active { background: #FFD600 !important; border-color: #FFD600 !important; color: #101114 !important; }
.vux-sports-promo { background: linear-gradient(115deg,#26282e,#1C1E24) !important; border-color: #505259 !important; box-shadow: none !important; }
.vux-sports-promo button { background: #FFD600 !important; color: #101114 !important; }
.vux-api-match-card, .vux-api-match-card:not(.has-native-image) { background: #1C1E24 !important; border-color: #45474d !important; box-shadow: none !important; }
.vux-api-match-card::before { background: linear-gradient(90deg,rgba(28,30,36,.98),rgba(28,30,36,.88),rgba(16,17,20,.52)),var(--event-image) center/cover no-repeat !important; }
.vux-api-match-card:not(.has-native-image)::before { background: #1C1E24 !important; }
.vux-api-match-card::after { background: linear-gradient(transparent,rgba(16,17,20,.95)) !important; }
.vux-api-match-meta { color: #B5B7BF !important; }
.vux-api-match-teams img, .vux-api-match-teams i { color: #101114 !important; }
.vux-api-odd-btn { background: #292b31 !important; border-color: #55575e !important; color: #F7F7F8 !important; }
.vux-api-odd-btn b { color: #FFD600 !important; }
.vux-api-odd-btn:hover, .vux-api-odd-btn.is-selected { background: #FFD600 !important; border-color: #FFD600 !important; color: #101114 !important; }
.vux-api-odd-btn:hover b, .vux-api-odd-btn.is-selected b { color: #101114 !important; }
.vux-api-match-more { color: #FFD600 !important; }
.vux-sports-skeleton { background-color: #24262c !important; }
.vux-sports-empty { background: #1C1E24 !important; border-color: #55575e !important; }
.vux-betslip-fab, .vux-betslip-submit { background: #FFD600 !important; border-color: #FFD600 !important; color: #101114 !important; }
.vux-betslip-fab-count, .vux-betslip-fab:not(.has-selections) .vux-betslip-fab-count { background: #101114 !important; color: #FFD600 !important; }
.vux-betslip-sheet, .vux-sports-details-panel { background: #1C1E24 !important; border-color: #505259 !important; color: #F7F7F8 !important; }
.vux-betslip-close, .vux-sports-details-head button, .vux-betslip-row button { background: #303238 !important; color: #F7F7F8 !important; }
.vux-betslip-heading, .vux-betslip-row, .vux-sports-details-head { border-color: #42444b !important; }
.vux-betslip-heading span, .vux-betslip-summary > div, .vux-betslip-summary label, .vux-betslip-empty, .vux-betslip-row small { color: #B5B7BF !important; }
.vux-betslip-row strong, .vux-betslip-summary strong, .vux-betslip-empty strong { color: #F7F7F8 !important; }
.vux-betslip-row span, .vux-betslip-row b, .vux-sports-market h4 { color: #FFD600 !important; }
.vux-betslip-stake, .vux-betslip-stake input { background: #24262c !important; color: #F7F7F8 !important; border-color: #55575e !important; }
.vux-sports-details-backdrop { background: rgba(0,0,0,.76) !important; }
[data-home-sport-event] { background: #292b31 !important; border-color: #505259 !important; color: #F7F7F8 !important; }
[data-home-sport-event] span:last-child { color: #FFD600 !important; }
[data-home-sport-event]:hover { background: #36383e !important; border-color: #FFD600 !important; }
@media (max-width:767px) {
  .vux-global-brand-logo, .green-modal-logo { width: 128px !important; max-height: 38px !important; }
  #primorHeroBanners, #vapiHeroBanners { margin: 0 8px; }
}
@media (min-width:768px) {
  #VAPIHeroBanners a { height: auto !important; }
  #VAPIHeroBanners img { height: auto !important; object-fit: contain !important; }
}

/* VAPI catalog navigation and search are built dynamically by app.js. */
.vux-native-game-track { overflow-x: auto; touch-action: pan-x pan-y !important; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
.vux-native-game-card { scroll-snap-align: start; }
.vux-native-game-card img { -webkit-user-drag: none; user-select: none; }
.vapi-shelf-all { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; min-height: 40px; padding: 3px 4px; color: #B5B7BF; text-decoration: none; white-space: nowrap; font-size: 11px; line-height: 1.4; }
.vapi-shelf-all b { color: #FFD600; font-size: 11px; font-weight: 700; }
.vapi-shelf-all:focus-visible { outline: 2px solid #FFD600; outline-offset: 2px; border-radius: 5px; }
.vux-shelf-controls { flex-shrink: 0; }
#vuxSearchModal { background: #101114 !important; color: #F7F7F8 !important; }
.vux-search-modal-head { background: #101114 !important; border-bottom-color: #34363d !important; }
.vux-search-modal-head label { background: #1C1E24 !important; border: 1px solid #55575e !important; color: #FFD600 !important; }
.vux-search-modal-head input { background: transparent !important; color: #F7F7F8 !important; outline: none; }
.vux-search-modal-head input::placeholder { color: #B5B7BF !important; opacity: 1; }
.vux-search-modal-head label:focus-within { border-color: #FFD600 !important; }
.vux-search-modal-close { color: #F7F7F8 !important; }
.vux-search-modal-scroll { background: #101114 !important; }
.vux-search-quick-links button { background: #1C1E24 !important; border-color: #55575e !important; color: #F7F7F8 !important; }
.vux-search-quick-links button:hover, .vux-search-quick-links button:focus-visible { background: #FFD600 !important; color: #101114 !important; }
.vux-search-section-title span, .vux-search-results a > span { color: #B5B7BF !important; }
.vux-search-results strong, .vux-search-providers strong { color: #F7F7F8 !important; }
.vux-search-providers button { background: #1C1E24 !important; border-color: #34363d !important; color: #F7F7F8 !important; }
.vux-search-results img { border-radius: 9px; }

/* Keep each game's complete artwork in the same black portrait frame. */
.vux-native-game-cover { aspect-ratio: 3 / 4; background: #000 !important; }
.vux-native-game-cover img { display: block; object-fit: contain !important; object-position: center; background: #000; }
.vux-search-results img, .vux-top-ten-card img { object-fit: contain !important; object-position: center; background: #000; }

/* Keep one rounded focus indicator around the auth field, not the input text. */
.modal-card .input-wrapper input,
.modal-card .input-wrapper input:focus,
.modal-card .input-wrapper input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.modal-card .input-wrapper:focus-within {
  border-color: #FFD600 !important;
  box-shadow: 0 0 0 2px rgba(255,214,0,.15) !important;
}
.vux-bonus-mobile-hero img { aspect-ratio: auto !important; height: auto !important; object-fit: contain !important; }
.vux-native-catalog { gap: 8px !important; row-gap: 8px !important; }
.vapi-recent-wins { margin: 0; min-width: 0; overflow: hidden; }
.vapi-recent-wins-body { display: flex; align-items: stretch; gap: 6px; min-width: 0; }
.vapi-recent-wins-heading { flex: 0 0 60px; width: 60px; min-height: 64px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2px; color: #FFD600; text-align: center; }
.vapi-recent-wins-trophy { display: block; font-size: 26px; line-height: 27px; }
.vapi-recent-wins h2 { margin: 0; color: #FAFAFA; font-size: 9px; line-height: 10px; font-weight: 800; }
.vapi-recent-wins-heading > small { color: #929292; font-size: 8px; font-weight: 500; line-height: 9px; }
.vapi-recent-wins-heading > small[hidden] { display: none; }
.vapi-recent-wins-track { display: flex; flex: 1 1 auto; min-width: 0; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; touch-action: pan-x pan-y; scrollbar-width: none; }
.vapi-recent-wins-track::-webkit-scrollbar { display: none; }
.vapi-recent-win-card { position: relative; flex: 0 0 200px; width: 200px; height: 64px; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 4px 0 0; border: 0; border-radius: 4px; overflow: hidden; background: #202126; color: #FAFAFA; text-decoration: none; }
.vapi-recent-win-card:hover { background: #2a2c32; }
.vapi-recent-win-portrait { display: block; position: relative; flex: 0 0 48px; width: 48px; height: 64px; overflow: hidden; border-radius: 4px; }
.vapi-recent-win-portrait > img { display: block; width: 48px; height: 64px; object-fit: cover; background: #000; }
.vapi-recent-win-portrait > i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.73); color: #FFD600; font-size: 10px; font-weight: 700; font-style: normal; opacity: 0; transition: opacity .16s ease; }
.vapi-recent-win-card:hover .vapi-recent-win-portrait > i, .vapi-recent-win-card:focus-visible .vapi-recent-win-portrait > i { opacity: 1; }
.vapi-recent-win-info { display: flex; min-width: 0; flex: 1; padding: 2px 0; flex-direction: column; justify-content: center; gap: 2px; }
.vapi-recent-win-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #FAFAFA; font-size: 12px; font-weight: 600; line-height: 14px; }
.vapi-recent-win-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #FFD600; font-size: 13px; font-weight: 700; line-height: 15px; }
.vapi-recent-win-info em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #B8BAC0; font-size: 11px; font-weight: 500; font-style: normal; line-height: 13px; }
.vapi-recent-win-card:focus-visible { outline: 2px solid #FFD600; outline-offset: -2px; }
.vapi-recent-wins-empty { margin: 0; width: 100%; padding: 18px 14px; border: 1px solid #34363d; border-radius: 8px; background: #1C1E24; color: #B5B7BF; font-size: 12px; }