/* Casinoalemi — complete custom theme */
:root {
  --ca-black: #080808;
  --ca-surface: #121212;
  --ca-surface-2: #1d1d1d;
  --ca-orange: #ff7a00;
  --ca-orange-light: #ff9d00;
  --ca-white: #ffffff;
  --ca-muted: #b8b8b8;
  --ca-line: rgba(255, 122, 0, .22);
  --ca-radius: 14px;
}

html { scroll-behavior: smooth; }
body.ca-theme {
  min-height: 100vh;
  background: radial-gradient(circle at 50% -18%, rgba(255,122,0,.11), transparent 34rem), var(--ca-black) !important;
  color: var(--ca-white) !important;
}
body.ca-theme main { max-width: 1680px !important; }

/* Header */
.ca-site-header {
  background: rgba(10,10,10,.9) !important;
  border-bottom: 1px solid var(--ca-line) !important;
  box-shadow: 0 10px 35px rgba(0,0,0,.38);
  backdrop-filter: blur(16px);
}
.ca-site-header .container { max-width: 1680px; }
.ca-site-header nav a { color: #eee !important; transition: color .2s ease !important; }
.ca-site-header nav a:hover { color: var(--ca-orange) !important; }
.ca-login {
  border: 1px solid rgba(255,255,255,.52) !important;
  background: transparent !important;
  color: var(--ca-white) !important;
  transition: color .22s ease, border-color .22s ease !important;
}
.ca-login:hover { color: var(--ca-orange) !important; border-color: var(--ca-orange) !important; }
.ca-join, .ca-deposit, .ca-bonus {
  background: linear-gradient(135deg, var(--ca-orange), var(--ca-orange-light)) !important;
  color: #111 !important;
  box-shadow: 0 7px 20px rgba(255,122,0,.22);
  transition: transform .22s ease, box-shadow .22s ease !important;
}
.ca-join:hover, .ca-deposit:hover, .ca-bonus:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(255,122,0,.34); }

/* Quick actions: deposit, bonus and support */
.ca-quick-actions-shell {
  position: relative;
  overflow: hidden;
  height: auto !important;
  min-height: 64px !important;
  overflow: visible !important;
  background: linear-gradient(180deg, rgba(255,122,0,.07), rgba(0,0,0,.38)) !important;
  border-bottom: 1px solid var(--ca-line) !important;
}
.ca-quick-actions-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
.ca-quick-actions-grid .ca-deposit,
.ca-quick-actions-grid .ca-bonus,
.ca-quick-actions-grid .ca-quick-action {
  height: 48px !important;
  color: #fff !important;
  background: linear-gradient(135deg, rgba(255,122,0,.24), rgba(255,157,0,.09)) !important;
  border: 1px solid rgba(255,122,0,.38) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 20px rgba(0,0,0,.22) !important;
}
.ca-quick-actions-grid .ca-quick-action { font-size: 13px; }
.ca-quick-actions-grid .ca-deposit:hover,
.ca-quick-actions-grid .ca-bonus:hover,
.ca-quick-actions-grid .ca-quick-action:hover {
  background: linear-gradient(135deg, rgba(255,122,0,.52), rgba(255,157,0,.26)) !important;
  border-color: var(--ca-orange) !important;
  box-shadow: 0 12px 26px rgba(255,122,0,.22) !important;
}
.ca-quick-actions-grid .ca-deposit > span:first-child,
.ca-quick-actions-grid .ca-bonus > span:first-child,
.ca-quick-actions-grid .ca-quick-action__icon {
  background: rgba(255,255,255,.13) !important;
  color: #fff !important;
}
.ca-quick-actions-grid .ca-contact-disabled { opacity: 1; }

/* Refined action colours: clear hierarchy, no blue/green brand bleed. */
.ca-quick-actions-grid .ca-deposit,
.ca-quick-actions-grid .ca-bonus {
  color: #111 !important;
  background: linear-gradient(135deg, #ff8a00, #ff7000) !important;
  border-color: #ff9d00 !important;
}
.ca-quick-actions-grid .ca-telegram {
  color: #fff !important;
  background: linear-gradient(135deg, #2aabee, #168ac7) !important;
  border-color: #51bdf2 !important;
}
.ca-quick-actions-grid .ca-whatsapp {
  color: #fff !important;
  background: linear-gradient(135deg, #32c766, #1fa855) !important;
  border-color: #57d982 !important;
}
.ca-quick-actions-grid .ca-deposit > span:first-child,
.ca-quick-actions-grid .ca-bonus > span:first-child,
.ca-quick-actions-grid .ca-quick-action__icon { background: rgba(17,17,17,.16) !important; color: #111 !important; }
.ca-quick-actions-grid .ca-telegram .ca-quick-action__icon,
.ca-quick-actions-grid .ca-whatsapp .ca-quick-action__icon { background: rgba(255,255,255,.18) !important; color: #fff !important; }
.ca-quick-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: #fff !important;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .02em;
  text-decoration: none !important;
  transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}
.ca-quick-action:hover { transform: translateY(-2px); border-color: rgba(255,122,0,.82); box-shadow: 0 10px 22px rgba(0,0,0,.26); }
.ca-quick-action__icon {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
}
.ca-quick-action__icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.ca-telegram { background: rgba(28,144,216,.14); }
.ca-telegram:hover { background: rgba(28,144,216,.25); }
.ca-whatsapp { background: rgba(37,211,102,.12); }
.ca-whatsapp:hover { background: rgba(37,211,102,.22); }
.ca-contact-disabled { opacity: .62; cursor: not-allowed; }

/* Login and sign-up modals */
.ca-auth-modal {
  color: var(--ca-white) !important;
  background: #151515 !important;
  border: 1px solid var(--ca-line) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.58), 0 0 0 1px rgba(255,122,0,.07) !important;
}
.ca-auth-modal h1, .ca-auth-modal h2, .ca-auth-modal h3, .ca-auth-modal h4 { color: var(--ca-white) !important; }
.ca-auth-modal p, .ca-auth-modal label { color: var(--ca-muted) !important; }
.ca-auth-modal input, .ca-auth-modal select {
  color: var(--ca-white) !important;
  background: #0d0d0d !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: none !important;
}
.ca-auth-modal input::placeholder { color: #777 !important; }
.ca-auth-modal input:focus, .ca-auth-modal select:focus {
  border-color: var(--ca-orange) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(255,122,0,.16) !important;
}
.ca-auth-modal button[type="submit"],
.ca-auth-modal button:not([aria-label]):not([title]) {
  background: transparent !important;
  color: var(--ca-white) !important;
}
.ca-auth-modal > div > div:first-child {
  background: linear-gradient(135deg, #111, #1c1c1c) !important;
  border-bottom-color: var(--ca-line) !important;
}
.ca-auth-modal .ca-auth-primary,
.ca-auth-modal .ca-auth-register {
  background: linear-gradient(135deg, var(--ca-orange), var(--ca-orange-light)) !important;
  color: #111 !important;
  border: 0 !important;
  box-shadow: 0 8px 20px rgba(255,122,0,.22);
}
.ca-auth-modal .ca-auth-secondary {
  color: var(--ca-orange) !important;
  background: transparent !important;
  border: 0 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Live chat */
.ca-live-support-trigger {
  color: #fff !important;
  background: linear-gradient(135deg, var(--ca-orange), var(--ca-orange-light)) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 12px 28px rgba(255,122,0,.32) !important;
}
.ca-live-support-trigger:hover { box-shadow: 0 15px 34px rgba(255,122,0,.45) !important; }
.ca-live-support-trigger svg { color: #fff !important; stroke: currentColor !important; }
.ca-live-support-trigger span { background: #161616 !important; border: 1px solid var(--ca-line); }

.ca-chat-panel {
  color: var(--ca-white) !important;
  background: #151515 !important;
  border-color: var(--ca-line) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.58), 0 0 0 1px rgba(255,122,0,.07) !important;
}
.ca-chat-panel > div:first-child {
  background: linear-gradient(135deg, #e96800, var(--ca-orange-light)) !important;
}
.ca-chat-panel > div:last-child { background: #151515 !important; }
.ca-chat-panel h3, .ca-chat-panel h4 { color: #fff !important; }
.ca-chat-panel p { color: #b8b8b8 !important; }
.ca-chat-panel input {
  color: #fff !important;
  background: #0d0d0d !important;
  border-color: rgba(255,255,255,.14) !important;
}
.ca-chat-panel input::placeholder { color: #777 !important; }
.ca-chat-panel input:focus { border-color: var(--ca-orange) !important; box-shadow: 0 0 0 3px rgba(255,122,0,.16) !important; }
.ca-chat-panel > div:last-child button {
  background: linear-gradient(135deg, var(--ca-orange), var(--ca-orange-light)) !important;
  color: #111 !important;
}
/* Fallback selectors prevent the original green widget colour from flashing. */
button.bg-gradient-to-r.from-green-500.to-emerald-600,
div.fixed.bg-white > .bg-gradient-to-r.from-green-600.to-emerald-600 {
  background: linear-gradient(135deg, var(--ca-orange), var(--ca-orange-light)) !important;
}
div.fixed.bg-white {
  background: #151515 !important;
  border-color: var(--ca-line) !important;
}
div.fixed.bg-white > .flex-1 { background: #151515 !important; }
.ca-hide-bet-suggestion { display: none !important; }

/* Account balance card */
.ca-balance-card {
  background: linear-gradient(135deg, #1a1a1a, #0d0d0d) !important;
  border: 1px solid rgba(255,122,0,.3) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 24px rgba(0,0,0,.2);
}
.ca-balance-card .text-\[\#888\] { color: #aaa !important; }
.ca-balance-card .text-\[\#666\] { color: #aaa !important; }
.ca-balance-card .text-3xl,
.ca-balance-card .md\:text-2xl { color: var(--ca-orange) !important; }
.ca-balance-card button:not(.ca-deposit) {
  color: #fff !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
}
.ca-balance-card .ca-deposit {
  color: #111 !important;
  background: linear-gradient(135deg, var(--ca-orange), var(--ca-orange-light)) !important;
}

/* Universal image treatment */
.ca-category-grid > *, .ca-games-grid > * {
  overflow: hidden;
  border: 1px solid rgba(255,122,0,.18);
  border-radius: var(--ca-radius) !important;
  background: var(--ca-surface);
  box-shadow: 0 8px 22px rgba(0,0,0,.22);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.ca-category-grid > *:hover, .ca-games-grid > *:hover {
  border-color: var(--ca-orange);
  box-shadow: 0 12px 30px rgba(255,122,0,.18);
  transform: translateY(-3px);
}
.ca-category-grid img, .ca-provider-grid img, .ca-games-grid img, .ca-support-strip img {
  display: block;
  width: 100% !important;
  height: auto !important;
}

/* Category cards: 9 desktop / 3 mobile */
.ca-category-grid {
  display: grid !important;
  grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
  gap: 12px !important;
  justify-content: initial !important;
}
.ca-category-grid > * { width: auto !important; max-width: none !important; }

/* Provider cards: no frame, full-width 2x2 */
.ca-provider-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 100% !important;
  max-width: none !important;
  gap: clamp(8px, 1.2vw, 16px) !important;
  margin: 0 !important;
  justify-content: initial !important;
}
.ca-provider-grid > * {
  width: auto !important;
  max-width: none !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
.ca-provider-grid > *:hover { border: 0 !important; box-shadow: none !important; transform: none !important; }
.ca-provider-grid img { border-radius: 12px !important; }

/* Full width provider strip */
.ca-support-strip {
  width: 100% !important;
  max-width: none !important;
  overflow: hidden;
  border: 1px solid var(--ca-line);
  border-radius: var(--ca-radius) !important;
  background: var(--ca-surface);
}

/* Game cards: 9 desktop / 3 mobile */
.ca-games-grid {
  display: grid !important;
  grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 !important;
}
.ca-games-grid > * { width: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; }
.ca-games-grid > * > *, .ca-games-grid > * > * > * { min-height: 0 !important; }

/* Section labels injected by JavaScript */
.ca-games-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 36px 0 14px;
  color: var(--ca-white);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 800;
  letter-spacing: -.5px;
}
.ca-games-section-title::before {
  content: "";
  width: 5px;
  height: 28px;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--ca-orange-light), var(--ca-orange));
  box-shadow: 0 0 14px rgba(255,122,0,.45);
}
.ca-games-section-title span { color: var(--ca-orange); }

/* Footer */
.ca-site-footer {
  margin-top: 42px;
  background: radial-gradient(circle at 50% 0%, rgba(255,122,0,.11), transparent 28rem), #0b0b0b !important;
  border-top: 1px solid var(--ca-line);
}
.ca-site-footer h4 { color: var(--ca-orange) !important; }
.ca-site-footer a { color: var(--ca-muted) !important; transition: color .2s ease !important; }
.ca-site-footer a:hover { color: var(--ca-orange) !important; }

/* Loading screen */
.ca-preloader {
  position: fixed;
  z-index: 99999;
  inset: 0;
  display: grid;
  place-items: center;
  background: #080808;
  transition: opacity .4s ease, visibility .4s ease;
}
.ca-preloader.is-hidden { opacity: 0; visibility: hidden; }
.ca-preloader__logo { color: var(--ca-white); font-size: clamp(28px,4vw,42px); font-weight: 800; letter-spacing: -1px; }
.ca-preloader__logo strong { color: var(--ca-orange); }
.ca-preloader__bar { width: 130px; height: 3px; margin: 14px auto 0; overflow: hidden; border-radius: 99px; background: #252525; }
.ca-preloader__bar::after { content: ""; display: block; width: 45%; height: 100%; border-radius: inherit; background: var(--ca-orange); animation: ca-loading .8s ease-in-out infinite alternate; }
@keyframes ca-loading { from { transform: translateX(-20%); } to { transform: translateX(165%); } }

/* Mobile bottom navigation */
.ca-mobile-nav { display: none; }
@media (max-width: 767px) {
  body.ca-theme { padding-bottom: 76px !important; }
  body.ca-mobile-nav-route-hidden,
  body.ca-hide-mobile-nav { padding-bottom: 0 !important; }
  body.ca-theme main { padding-inline: 12px !important; }
  .ca-category-grid, .ca-games-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
  .ca-category-grid > *, .ca-games-grid > * { border-radius: 11px !important; }
  .ca-games-section-title { margin: 26px 0 11px; font-size: 19px; }
  .ca-games-section-title::before { width: 4px; height: 23px; }
  .ca-mobile-nav {
    position: fixed;
    z-index: 100;
    bottom: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    min-height: 66px;
    padding: 7px 6px max(7px, env(safe-area-inset-bottom));
    background: rgba(14,14,14,.97);
    border-top: 1px solid rgba(255,122,0,.28);
    box-shadow: 0 -10px 30px rgba(0,0,0,.35);
    backdrop-filter: blur(16px);
  }
  .ca-mobile-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 48px;
    color: #b8b8b8 !important;
    font-size: 9px;
    font-weight: 700;
    text-decoration: none;
    transition: color .2s ease, transform .2s ease;
  }
  .ca-mobile-nav a:hover, .ca-mobile-nav a.ca-active { color: var(--ca-orange) !important; }
  .ca-mobile-nav a:active { transform: scale(.94); }
  .ca-mobile-nav img { width: 21px; height: 21px; object-fit: contain; filter: brightness(0) invert(1); opacity: .78; }
  .ca-mobile-nav a.ca-active img, .ca-mobile-nav a:hover img { filter: brightness(0) saturate(100%) invert(55%) sepia(95%) saturate(1905%) hue-rotate(359deg) brightness(101%) contrast(102%); opacity: 1; }
  .ca-mobile-nav--hidden, body.ca-hide-mobile-nav .ca-mobile-nav { display: none !important; }
  .ca-quick-actions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .ca-quick-actions-shell {
    display: block !important;
    min-height: 118px !important;
    overflow: visible !important;
    z-index: 2;
  }
  .ca-quick-actions-shell > div {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .ca-quick-actions-grid {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .ca-quick-actions-grid .ca-deposit,
  .ca-quick-actions-grid .ca-bonus,
  .ca-quick-actions-grid .ca-quick-action { display: flex !important; height: 43px !important; gap: 7px; font-size: 10px; }
  .ca-quick-action__icon { width: 24px; height: 24px; }
}