/* ═══════════════════════════════════════════════════
   GIRO PRIME — Elegant Light UI
   Functional · refined · casino salon
   ═══════════════════════════════════════════════════ */

:root,
html[data-theme="light"],
html {
  --bg-body: #f3f0eb;
  --bg-primary: #faf8f5;
  --bg-secondary: #ffffff;
  --bg-tertiary: #eee9e2;
  --bg-card: #ffffff;
  --bg-card-hover: #faf8f5;
  --bg-input: #f7f5f1;
  --bg-overlay: rgba(15, 23, 42, 0.48);

  --color-red: #c62828;
  --color-red-dark: #a31f1f;
  --color-red-light: #e53935;
  --color-red-glow: rgba(198, 40, 40, 0.2);

  --color-black: #1e2430;
  --color-black-dark: #141820;
  --color-black-light: #323a4a;
  --color-black-glow: rgba(30, 36, 48, 0.18);

  --color-white: #f5f5f5;
  --color-white-dark: #e0e0e0;
  --color-white-light: #ffffff;
  --color-white-glow: rgba(255, 255, 255, 0.5);

  --color-green: #1b8a4a;
  --color-green-dark: #156b3a;
  --color-gold: #b8860b;
  --color-blue: #0d47a1;

  --text-primary: #1a2332;
  --text-secondary: #5c6b7e;
  --text-muted: #8b97a8;
  --text-bright: #0f1724;

  --border-color: rgba(26, 35, 50, 0.1);
  --border-light: rgba(26, 35, 50, 0.14);

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 6px 18px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 14px 36px rgba(15, 23, 42, 0.1);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  color-scheme: light;
}

/* Base */
html, body {
  background: var(--bg-body) !important;
  color: var(--text-primary);
}
body {
  background:
    radial-gradient(ellipse 90% 50% at 50% -15%, rgba(13, 71, 161, 0.07), transparent 50%),
    linear-gradient(180deg, #faf8f5 0%, #f3f0eb 100%) !important;
  background-attachment: fixed !important;
}

/* Hide noisy ambient if present */
.gp-ambient { display: none !important; }

/* ── Header ── */
.header {
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom: 1px solid var(--border-color) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.8), 0 4px 20px rgba(15, 23, 42, 0.04);
}
.header__logo-img {
  height: 40px !important;
  width: auto !important;
  border-radius: 0 !important;
  filter: none !important;
  object-fit: contain;
}
.header__balance {
  background: #fff !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-sm);
}
.balance__amount,
.profile__name {
  color: var(--text-bright) !important;
  font-weight: 700;
}
.header__balance > i { color: var(--color-gold) !important; }

/* Auth CTAs */
.header__auth-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none !important;
  transition: transform .15s, box-shadow .15s, background .15s;
}
#loginQuickBtn {
  background: #fff !important;
  color: #0d47a1 !important;
  border: 1px solid rgba(13, 71, 161, 0.25) !important;
}
#loginQuickBtn:hover {
  background: #f0f5ff !important;
  transform: translateY(-1px);
}
#registerQuickBtn {
  background: linear-gradient(135deg, #0a2a6b, #0d47a1 55%, #1565c0) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 6px 16px rgba(13, 71, 161, 0.28) !important;
}
#registerQuickBtn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.profile__dropdown {
  background: #fff !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-lg) !important;
  border-radius: 12px !important;
}
.dropdown__item {
  color: var(--text-secondary) !important;
  border-radius: 8px;
}
.dropdown__item:hover {
  background: rgba(13, 71, 161, 0.06) !important;
  color: var(--text-bright) !important;
}
.dropdown__item--logout { color: var(--color-red) !important; }
.dropdown__divider { background: var(--border-color) !important; }

/* ── Surfaces (cards) — subtle, readable ── */
.livestream,
.roulette,
.previous-rolls,
.roulette-table,
.chip-rack,
.table-players__panel,
.chat,
.last-result-panel,
.modal {
  background: #ffffff !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-md) !important;
  border-radius: var(--radius-lg) !important;
}

/* Livestream */
.livestream__topbar {
  background: #faf8f5 !important;
  border-bottom: 1px solid var(--border-color) !important;
}
.livestream__title { color: var(--text-bright) !important; font-weight: 700; }
.livestream__viewers { color: var(--text-secondary) !important; }
.livestream__badge {
  background: rgba(198, 40, 40, 0.1) !important;
  color: var(--color-red) !important;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.livestream__action-btn {
  background: #fff !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-color) !important;
}
.livestream__action-btn:hover {
  color: var(--color-blue) !important;
  border-color: rgba(13, 71, 161, 0.3) !important;
}

/* Roulette status */
.roulette__viewport {
  background: linear-gradient(180deg, #ebe6df, #e2dcd3) !important;
}
.status__text { color: var(--text-bright) !important; font-weight: 600; }
.previous-rolls__label,
.chip-rack__label,
.panel__bets-count,
.panel__bets-total,
.stats__item,
.last-result-panel__label {
  color: var(--text-secondary) !important;
}

/* Betting table — keep game colors vivid */
.table__cell {
  border-color: rgba(0, 0, 0, 0.12) !important;
  font-weight: 700;
}
.table__cell--red,
.table__cell--black {
  color: #fff !important;
}
.table__cell--zero {
  background: #e8e4dc !important;
  color: #1a2332 !important;
}
.table__cell:hover {
  filter: brightness(0.97);
  outline: 2px solid rgba(184, 134, 11, 0.45);
  outline-offset: -2px;
}

/* Chat — functional side panel */
.chat {
  box-shadow: var(--shadow-lg) !important;
}
.chat__header {
  background: #faf8f5 !important;
  border-bottom: 1px solid var(--border-color) !important;
}
.chat__header-title { color: var(--text-bright) !important; }
.chat__messages { background: #f7f5f1 !important; }
.chat__message { color: var(--text-primary) !important; }
.chat__input-field {
  background: #fff !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  border-radius: 10px !important;
}
.chat-toggle {
  background: #fff !important;
  border: 1px solid var(--border-color) !important;
  color: var(--color-gold) !important;
  box-shadow: var(--shadow-md) !important;
}
.chat-toggle:hover {
  border-color: rgba(184, 134, 11, 0.4) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
}

/* Modal */
.modal__header {
  background: #faf8f5 !important;
  border-bottom: 1px solid var(--border-color) !important;
}
.modal__title { color: var(--text-bright) !important; }
.modal__close { color: var(--text-muted) !important; }
.profile-form__label { color: var(--text-secondary) !important; }
.profile-form__input {
  background: var(--bg-input) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  border-radius: 10px !important;
}
.profile-form__input:focus {
  background: #fff !important;
  border-color: rgba(13, 71, 161, 0.45) !important;
  box-shadow: 0 0 0 3px rgba(13, 71, 161, 0.12);
}

/* Toast */
.toast {
  background: #fff !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Payment modals — clean white */
.payment-modal__overlay {
  background: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(4px);
}
.payment-modal__container {
  background: #fff !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18) !important;
  border-radius: 16px !important;
}
.payment-modal__header {
  border-bottom: 1px solid var(--border-color) !important;
}
.payment-modal__header h2,
.payment-amount-btn__value,
.payment-method-btn__name,
.payment-processing h3,
.payment-success h3 {
  color: var(--text-bright) !important;
}
.payment-step__label,
.payment-custom-amount label,
.payment-method-btn__desc,
.payment-processing p,
.payment-success p,
.payment-security,
.payment-balance-info span {
  color: var(--text-secondary) !important;
}
.payment-amount-btn,
.payment-method-btn,
.payment-custom-amount__input-wrap,
.payment-quick-btn,
.payment-balance-info,
.payment-pix-key select,
.payment-pix-key input {
  background: var(--bg-input) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
.payment-pix-key select option {
  background: #fff !important;
  color: var(--text-primary) !important;
}
.payment-custom-amount__input-wrap input,
.payment-pix-key input {
  color: var(--text-primary) !important;
}
.payment-amount-btn--active {
  border-color: var(--color-green) !important;
  background: rgba(27, 138, 74, 0.08) !important;
}
.payment-method-btn--active {
  border-color: var(--color-green) !important;
  background: rgba(27, 138, 74, 0.06) !important;
}
.payment-btn--secondary {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
}
.payment-modal__close {
  background: var(--bg-input) !important;
  color: var(--text-secondary) !important;
}
.payment-modal__footer {
  border-top: 1px solid var(--border-color) !important;
}

/* History / settings pieces in main CSS */
.history__item {
  background: #fff !important;
  border-color: var(--border-color) !important;
}
.history__item-title { color: var(--text-bright) !important; }
.history__tab:not(.history__tab--active) {
  color: var(--text-secondary) !important;
}
.settings__option {
  background: #fff !important;
  border-color: var(--border-color) !important;
}
.settings__option-label { color: var(--text-primary) !important; }

/* Scrollbar */
::-webkit-scrollbar-thumb {
  background: rgba(26, 35, 50, 0.18) !important;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(26, 35, 50, 0.3) !important;
}
::selection {
  background: rgba(184, 134, 11, 0.25);
  color: var(--text-bright);
}

/* ── Secondary pages shared shell ── */
.page-header,
.wallet-header,
.top-bar {
  background: rgba(255,255,255,0.94) !important;
  border-bottom: 1px solid var(--border-color) !important;
  backdrop-filter: blur(10px);
}
.balance-card,
.wallet-card,
.profile-card,
.settings-card,
.history-card,
.card,
.panel,
.section {
  background: #fff !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-md) !important;
  border-radius: 14px !important;
  color: var(--text-primary) !important;
}
input, select, textarea, .form-input {
  background: var(--bg-input) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}
input:focus, select:focus, textarea:focus, .form-input:focus {
  background: #fff !important;
  border-color: rgba(13, 71, 161, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(13, 71, 161, 0.1);
}