/* ============================================================
   GANAMOS365 THEME — Purple/Magenta Casino Design
   Inspired by ganamos365.biz
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800;900&display=swap');

/* ============================================================
   CSS VARIABLES — Color Palette
   ============================================================ */
:root {
    /* Override futuristic gold theme */
    --casino-primary:      #A855F7;   /* purple */
    --casino-secondary:    #EC4899;   /* magenta/pink */
    --casino-accent:       #F59E0B;   /* amber/gold accent */
    --casino-dark:         #1A0B2E;   /* very dark purple bg */
    --casino-darker:       #0D0612;   /* header bg */
    --casino-card:         #241040;   /* card background */
    --casino-glow:         rgba(168, 85, 247, 0.35);
    --casino-glow-blue:    rgba(236, 72, 153, 0.35);

    /* Ganamos365 specific */
    --g365-bg:             #1A0B2E;
    --g365-header:         #0D0612;
    --g365-purple:         #8B5CF6;
    --g365-magenta:        #9333EA;
    --g365-hot:            #EC4899;
    --g365-gold:           #F59E0B;
    --g365-card-bg:        linear-gradient(145deg, #1E0D35 0%, #2D1250 100%);
    --g365-border:         rgba(139, 92, 246, 0.3);
    --g365-glow:           0 0 20px rgba(139, 92, 246, 0.5);
    --g365-text:           #FFFFFF;
    --g365-text-muted:     rgba(255,255,255,0.6);
}

/* ============================================================
   GLOBAL TYPOGRAPHY & BASE
   ============================================================ */
* {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    box-sizing: border-box;
}

body.casino-futuristic {
    background: var(--g365-bg) !important;
    background-image: radial-gradient(ellipse at top left, #2D1055 0%, #1A0B2E 50%, #0D0612 100%) !important;
    color: var(--g365-text) !important;
}

/* ============================================================
   SCROLLBAR — Purple
   ============================================================ */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0D0612; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #8B5CF6 0%, #EC4899 100%);
    border-radius: 6px;
}

/* ============================================================
   HEADER — Dark with Purple Accent
   ============================================================ */
.casino-header,
.casino-header-guest {
    background: var(--g365-header) !important;
    border-bottom: 2px solid rgba(139, 92, 246, 0.4) !important;
    box-shadow: 0 4px 30px rgba(139, 92, 246, 0.15) !important;
}

.casino-header::before,
.casino-header-guest::before {
    background: linear-gradient(90deg, transparent, #8B5CF6 30%, #EC4899 60%, #8B5CF6 80%, transparent) !important;
}

/* Logo */
.casino-header__logo-img,
.casino-header-guest__logo-img {
    filter: drop-shadow(0 0 12px rgba(139, 92, 246, 0.7)) !important;
}
.casino-header__logo-img:hover,
.casino-header-guest__logo-img:hover {
    filter: drop-shadow(0 0 22px rgba(236, 72, 153, 0.9)) !important;
}

/* Nav links */
.casino-header__nav-link,
.casino-header-guest__nav-link {
    color: rgba(255,255,255,0.85) !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
}
.casino-header__nav-link:hover,
.casino-header-guest__nav-link:hover {
    color: #ffffff !important;
    background: rgba(139, 92, 246, 0.2) !important;
    text-shadow: 0 0 12px rgba(139, 92, 246, 0.9) !important;
}
.casino-header__nav-link--active {
    color: #fff !important;
    background: rgba(139, 92, 246, 0.25) !important;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.4) !important;
}

/* Search input */
.casino-header__search-input,
.casino-header-guest__search-input {
    background: rgba(29, 11, 56, 0.9) !important;
    border-color: rgba(139, 92, 246, 0.35) !important;
    color: #fff !important;
}
.casino-header__search-input:focus,
.casino-header-guest__search-input:focus {
    border-color: #8B5CF6 !important;
    box-shadow: 0 0 18px rgba(139, 92, 246, 0.5) !important;
}
.casino-header__search-input::placeholder,
.casino-header-guest__search-input::placeholder {
    color: rgba(139, 92, 246, 0.6) !important;
}

/* Balance widget */
.casino-header__balance {
    background: rgba(29, 11, 56, 0.7) !important;
    border-color: rgba(139, 92, 246, 0.3) !important;
}
.casino-header__balance:hover {
    border-color: #8B5CF6 !important;
    box-shadow: 0 0 18px rgba(139, 92, 246, 0.35) !important;
}
.casino-header__balance-amount {
    color: #A78BFA !important;
    font-family: 'Poppins', sans-serif !important;
}

/* Primary button — purple */
.casino-header__btn--primary,
.casino-header-guest__btn--primary {
    background: linear-gradient(135deg, #8B5CF6 0%, #9333EA 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 18px rgba(139, 92, 246, 0.5) !important;
}
.casino-header__btn--primary:hover,
.casino-header-guest__btn--primary:hover {
    box-shadow: 0 6px 28px rgba(139, 92, 246, 0.75) !important;
    transform: translateY(-2px) !important;
}

/* Secondary button — magenta outline */
.casino-header__btn--secondary,
.casino-header-guest__btn--secondary {
    background: rgba(29, 11, 56, 0.7) !important;
    border-color: rgba(139, 92, 246, 0.45) !important;
    color: #A78BFA !important;
}
.casino-header__btn--secondary:hover,
.casino-header-guest__btn--secondary:hover {
    border-color: #8B5CF6 !important;
    box-shadow: 0 0 18px rgba(139, 92, 246, 0.5) !important;
    color: #ffffff !important;
}

/* Mobile toggle */
.casino-header__mobile-toggle-line,
.casino-header-guest__mobile-toggle-line {
    background: #8B5CF6 !important;
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.7) !important;
}

/* ============================================================
   HERO BANNER — Purple/Magenta Gradient
   ============================================================ */
.main-slider__img {
    filter: brightness(0.85) saturate(1.2) hue-rotate(-10deg);
}

.main-slider__promo-txt {
    color: #fff !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 20px rgba(139, 92, 246, 0.8) !important;
}

.main-slider__promo-separator {
    color: #EC4899 !important;
    text-shadow: 0 0 15px rgba(236, 72, 153, 0.7) !important;
}

.text-color-yellow { color: #F59E0B !important; }
.text-color-blue   { color: #A78BFA !important; }

.button.button-secondary,
.button-secondary {
    background: linear-gradient(135deg, #8B5CF6 0%, #9333EA 100%) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    border-radius: 30px !important;
    box-shadow: 0 4px 18px rgba(139, 92, 246, 0.5) !important;
    transition: all 0.3s ease !important;
}
.button.button-secondary:hover,
.button-secondary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 28px rgba(139, 92, 246, 0.7) !important;
}

.button.button-primary,
.button-primary {
    background: linear-gradient(135deg, #EC4899 0%, #9333EA 100%) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-radius: 30px !important;
    box-shadow: 0 4px 18px rgba(236, 72, 153, 0.45) !important;
}
.button.button-primary:hover,
.button-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 28px rgba(236, 72, 153, 0.65) !important;
}

/* ============================================================
   CATEGORY NAV — Purple Neon
   ============================================================ */
.neon-categories {
    background: linear-gradient(135deg, #0D0612 0%, #1A0B2E 60%, #120840 100%) !important;
    border-image: linear-gradient(90deg, transparent, #8B5CF6, #EC4899, #8B5CF6, transparent) 1 !important;
}

.neon-categories::before {
    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.12), transparent) !important;
}

.neon-categories__link {
    background: rgba(29, 11, 56, 0.6) !important;
    border-color: rgba(139, 92, 246, 0.25) !important;
    color: rgba(255,255,255,0.9) !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
}
.neon-categories__link:hover {
    background: rgba(139, 92, 246, 0.2) !important;
    border-color: #8B5CF6 !important;
    color: #ffffff !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 0 22px rgba(139, 92, 246, 0.5),
                0 5px 15px rgba(0,0,0,0.4) !important;
}
.neon-categories__link--active {
    background: linear-gradient(135deg, #8B5CF6, #9333EA) !important;
    border-color: #8B5CF6 !important;
    color: #ffffff !important;
    animation: none !important;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.6) !important;
}
.neon-categories__icon { filter: drop-shadow(0 0 6px #8B5CF6) !important; }

/* ============================================================
   PROVIDERS — Purple Glass Cards
   ============================================================ */
.providers-section {
    background: linear-gradient(180deg, #120840 0%, #0D0612 100%) !important;
}
.providers-section::before {
    background: linear-gradient(90deg, transparent, #8B5CF6, transparent) !important;
}
.providers-section__title { color: #ffffff !important; }
.providers-section__badge {
    background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%) !important;
    color: #fff !important;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.6) !important;
}
.providers-section__toggle {
    background: rgba(29, 11, 56, 0.7) !important;
    border-color: rgba(139, 92, 246, 0.4) !important;
    color: #A78BFA !important;
}
.providers-section__toggle:hover {
    border-color: #8B5CF6 !important;
    box-shadow: 0 0 18px rgba(139, 92, 246, 0.5) !important;
    color: #fff !important;
}

.providers-grid__link {
    background: rgba(29, 11, 56, 0.55) !important;
    border-color: rgba(139, 92, 246, 0.2) !important;
}
.providers-grid__link:hover {
    background: rgba(29, 11, 56, 0.85) !important;
    border-color: #8B5CF6 !important;
    box-shadow: 0 0 28px rgba(139, 92, 246, 0.5),
                0 10px 30px rgba(0,0,0,0.5) !important;
    transform: translateY(-5px) scale(1.02) !important;
}
.providers-grid__link--active {
    background: rgba(139, 92, 246, 0.2) !important;
    border-color: #8B5CF6 !important;
    box-shadow: 0 0 22px rgba(139, 92, 246, 0.6) !important;
}
.providers-grid__name { color: rgba(255,255,255,0.85) !important; }
.providers-grid__link:hover .providers-grid__name,
.providers-grid__link--active .providers-grid__name {
    color: #A78BFA !important;
    text-shadow: 0 0 10px rgba(167, 139, 250, 0.8) !important;
}
.providers-grid__logo {
    filter: brightness(0.9) drop-shadow(0 0 5px rgba(139, 92, 246, 0.3)) !important;
}
.providers-grid__link:hover .providers-grid__logo {
    filter: brightness(1.2) drop-shadow(0 0 14px rgba(139, 92, 246, 0.8)) !important;
}

/* ============================================================
   GAME CARDS — Purple Glass
   ============================================================ */
.game-item {
    background: linear-gradient(145deg, #1E0D35 0%, #2D1250 100%) !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.4) !important;
    border: 1px solid rgba(139, 92, 246, 0.15) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}
.game-item:hover {
    box-shadow: 0 4px 18px rgba(139, 92, 246, 0.4) !important;
    border-color: rgba(139, 92, 246, 0.5) !important;
}
.game-item__block {
    background: linear-gradient(135deg, #120840 0%, #1E0D35 100%) !important;
}
.game-item__overlay {
    background: rgba(13, 6, 18, 0.92) !important;
}
.game-item__overlay-category { color: #A78BFA !important; }

/* Play button on hover */
.game-item__actions .button-primary {
    background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 18px rgba(139, 92, 246, 0.5) !important;
    border-radius: 24px !important;
}
.game-item__actions .button-primary:hover {
    box-shadow: 0 6px 28px rgba(139, 92, 246, 0.75) !important;
    transform: translateY(-2px) !important;
}

/* Label chips */
.game-item__label--hot      { background: linear-gradient(135deg, #EC4899 0%, #BE185D 100%) !important; }
.game-item__label--new      { background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%) !important; }
.game-item__label--jackpot  { background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%) !important; }
.game-item__label--exclusive{ background: linear-gradient(135deg, #EC4899 0%, #9333EA 100%) !important; color: #fff !important; }

/* Gold border shimmer on hover */
.game-item::after {
    background: linear-gradient(45deg, #8B5CF6, #EC4899, #8B5CF6, #EC4899) !important;
}

/* ============================================================
   FOOTER — Very Dark Purple
   ============================================================ */
.footer {
    background: linear-gradient(180deg, rgba(13,6,18,0.97) 0%, rgba(8,3,12,1) 100%) !important;
    border-top: 2px solid rgba(139, 92, 246, 0.25) !important;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.5) !important;
}
.footer::before {
    background: linear-gradient(90deg, transparent, #8B5CF6, #EC4899, transparent) !important;
}

.games__footer__btns .games__button {
    background: rgba(29, 11, 56, 0.7) !important;
    border-color: rgba(139, 92, 246, 0.35) !important;
    color: #A78BFA !important;
    font-weight: 700 !important;
}
.games__footer__btns .games__button:hover {
    border-color: #8B5CF6 !important;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.5) !important;
}

/* ============================================================
   BOTTOM NAVBAR — Dark Purple
   ============================================================ */
.bottom-navbar {
    background: linear-gradient(180deg, rgba(13,6,18,0.98) 0%, rgba(8,3,12,1) 100%) !important;
    border-top: 2px solid rgba(139, 92, 246, 0.3) !important;
}
.bottom-navbar::before {
    background: linear-gradient(90deg, transparent, #8B5CF6 20%, #EC4899 50%, #8B5CF6 80%, transparent) !important;
}
.bottom-navbar-item-icon  { color: #8B5CF6 !important; filter: drop-shadow(0 0 8px rgba(139,92,246,0.5)) !important; }
.bottom-navbar-item span  { color: rgba(167,139,250,0.9) !important; }
.bottom-navbar-item:hover .bottom-navbar-item-icon { color: #EC4899 !important; filter: drop-shadow(0 0 15px rgba(236,72,153,0.7)) !important; }
.bottom-navbar-item::after { background: linear-gradient(90deg, #8B5CF6, #EC4899) !important; }

/* ============================================================
   ADVANTAGES SECTION
   ============================================================ */
.advantages {
    background: linear-gradient(135deg, #0D0612 0%, #1A0B2E 100%) !important;
}
.advantages__item { border-color: rgba(139,92,246,0.2) !important; }
.advantages__title { color: #A78BFA !important; font-weight: 700 !important; }
.advantages__descr { color: rgba(255,255,255,0.65) !important; }
.advantages__icon  { color: #8B5CF6 !important; }

/* ============================================================
   PROMO BLOCK
   ============================================================ */
.promo-block { color: rgba(255,255,255,0.8) !important; }
.promo-block__ttl { color: #A78BFA !important; font-weight: 800 !important; text-transform: uppercase !important; }
.toggle-block_header { color: #A78BFA !important; border-color: rgba(139,92,246,0.3) !important; }

/* ============================================================
   MODALS & POPUPS — Dark Purple
   ============================================================ */
.pop-wrapper {
    background: linear-gradient(145deg, #1A0B2E 0%, #160A28 100%) !important;
    border-color: rgba(139,92,246,0.4) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 40px rgba(139,92,246,0.25) !important;
}
.close-pop {
    color: #8B5CF6 !important;
    text-shadow: 0 0 10px rgba(139,92,246,0.7) !important;
}

.modal { background: linear-gradient(145deg, #1A0B2E, #120840) !important; }
.modal__header { background: rgba(13,6,18,0.95) !important; border-bottom-color: rgba(139,92,246,0.3) !important; }
.modal__title  { color: #A78BFA !important; font-weight: 700 !important; }

.popup__link        { color: rgba(255,255,255,0.7) !important; }
.popup__link.active { color: #A78BFA !important; border-bottom-color: #8B5CF6 !important; }
.popup__card        { background: rgba(29,11,56,0.6) !important; border-color: rgba(139,92,246,0.2) !important; }
.history__name      { color: #A78BFA !important; }

.popup__button,
.popup__button.button-primary {
    background: linear-gradient(135deg, #8B5CF6 0%, #9333EA 100%) !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-radius: 24px !important;
}

/* ============================================================
   HERO BANNER — Gradient Override
   ============================================================ */
.main-content__first-screen {
    position: relative;
}
.main-content__first-screen::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(139,92,246,0.1) 0%, rgba(236,72,153,0.05) 100%);
    pointer-events: none;
    z-index: 1;
}

/* ============================================================
   NO-GAMES EMPTY STATE
   ============================================================ */
.no-games-message {
    background: rgba(29,11,56,0.6) !important;
    border-color: rgba(139,92,246,0.2) !important;
}
.no-games-message__icon  { background: rgba(139,92,246,0.15) !important; }
.no-games-message__title { color: #fff !important; }
.no-games-message__text  { color: rgba(255,255,255,0.55) !important; }
.favorites-section__title { color: #A78BFA !important; }

/* ============================================================
   LOGIN / REGISTER IFRAMES
   ============================================================ */
.frame__cont_log,
.frame__cont_reg {
    background: rgba(13,6,18,0.85) !important;
}

/* ============================================================
   LOCK SCREEN
   ============================================================ */
#lock__screen {
    background: rgba(13,6,18,0.8) !important;
    backdrop-filter: blur(15px) !important;
}

/* ============================================================
   ANIMATIONS — Purple variants
   ============================================================ */
@keyframes navbarGlow {
    0%, 100% { opacity: 0.4; }
    50%       { opacity: 1; }
}
@keyframes magicPulse {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(139,92,246,0.6)); transform: scale(1); }
    50%       { filter: drop-shadow(0 0 22px rgba(236,72,153,0.8)); transform: scale(1.1); }
}
@keyframes neonPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(139,92,246,0.5), 0 0 16px rgba(139,92,246,0.3); }
    50%       { box-shadow: 0 0 16px rgba(139,92,246,0.8), 0 0 28px rgba(236,72,153,0.5); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .game-item {
        border-radius: 8px !important;
    }
    .neon-categories__link {
        padding: 8px 14px !important;
        font-size: 11px !important;
    }
}
@media (max-width: 480px) {
    .neon-categories__link {
        padding: 6px 10px !important;
        font-size: 10px !important;
    }
}