/* ============================================
   JogaJunto Homepage v3 — Dark Green + White
   Navbar Odoo UNTOUCHED. Design starts below it.
   Zero url() references.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700&family=Oswald:wght@400;500;600;700&display=swap');


/* === NAVBAR BETANO v2 — injected via nginx sub_filter === */

/* White background with slight gradient */
header#top.o_header_standard,
header.o_header_standard {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0,200,83,0.15) !important;
    box-shadow: 0 1px 8px rgba(0,0,0,0.06) !important;
}

/* Navbar container */
header.o_header_standard nav.navbar,
#wrapwrap header.o_header_standard nav.navbar {
    background: transparent !important;
    padding: 8px 0 !important;
}

/* ALL nav links: dark text */
header.o_header_standard .navbar-nav .nav-link,
header.o_header_standard #top_menu .nav-link,
header.o_header_standard .top_menu .nav-link,
header.o_header_standard ul.navbar-nav a.nav-link,
header.o_header_standard nav a.nav-link {
    color: #1e293b !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
    opacity: 1 !important;
    text-shadow: none !important;
    transition: color 0.2s ease !important;
}

/* Nav link hover: green accent */
header.o_header_standard .navbar-nav .nav-link:hover,
header.o_header_standard #top_menu .nav-link:hover {
    color: #00c853 !important;
}

/* Active nav link */
header.o_header_standard .navbar-nav .nav-link.active {
    color: #00c853 !important;
    font-weight: 700 !important;
}

/* Brand/logo area */
header.o_header_standard .navbar-brand,
header.o_header_standard .navbar-brand span {
    color: #1e293b !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    padding: 4px 0 !important;
}

/* Brand image */
header.o_header_standard .navbar-brand img {
    max-height: 40px !important;
}

/* Right-side action buttons (cart, search, user) */
header.o_header_standard .o_navlink_background,
header.o_header_standard .o_navlink_background.btn {
    background: rgba(0,200,83,0.08) !important;
    border: none !important;
    color: #1e293b !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: all 0.2s ease !important;
}

header.o_header_standard .o_navlink_background:hover {
    background: rgba(0,200,83,0.15) !important;
    color: #00c853 !important;
}

/* Cart badge */
header.o_header_standard .my_cart_quantity.badge {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.65rem !important;
    background: #00c853 !important;
    color: #ffffff !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    line-height: 18px !important;
}

/* Phone number */
header.o_header_standard a[href^="tel"],
header.o_header_standard a[href^="tel"] span,
header.o_header_standard .o_nav-link_secondary {
    color: #475569 !important;
    font-weight: 500 !important;
    opacity: 1 !important;
}

/* Social media icons */
header.o_header_standard .o_header_social_links a,
header.o_header_standard .s_social_media a {
    color: #475569 !important;
    opacity: 0.75 !important;
    transition: opacity 0.2s ease !important;
}
header.o_header_standard .o_header_social_links a:hover,
header.o_header_standard .s_social_media a:hover {
    opacity: 1 !important;
    color: #00c853 !important;
}

/* Divider */
header.o_header_standard .divider {
    border-left: 1px solid #e2e8f0 !important;
    height: 24px !important;
}

/* Search input in modal */
header.o_header_standard .o_searchbar_form input {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
    border-radius: 24px !important;
    font-family: 'Inter', sans-serif !important;
    padding: 8px 16px !important;
}
header.o_header_standard .o_searchbar_form input:focus {
    border-color: #00c853 !important;
    box-shadow: 0 0 0 3px rgba(0,200,83,0.1) !important;
}

/* User menu dropdown */
header.o_header_standard .o_user_menu .nav-link,
header.o_header_standard .o-navbar-right .nav-link {
    color: #1e293b !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    opacity: 1 !important;
}

/* Login/Create account buttons in user area */
header.o_header_standard .o-navbar-right a.btn,
header.o_header_standard .navbar-nav a.btn {
    font-weight: 700 !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
}

/* Sticky header on scroll */
header.o_header_standard.o_header_affix,
header.o_header_standard.affixed {
    background: rgba(255,255,255,0.95) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08) !important;
}

/* Mobile toggle */
header.o_header_standard .navbar-toggler {
    border: none !important;
    color: #1e293b !important;
    padding: 8px !important;
}
header.o_header_standard .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%231e293b' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

/* === GLOBAL BOX-SIZING RESET (v4) === */
*,
*::before,
*::after {
    box-sizing: border-box;
}


/* ═══════════════════════════════════════════════════
   UNIFIED CARD DESIGN — Shared visual language
   .jj-game-card (homepage) == .oe_product_cart (shop)
   White interior · Dark green accents · Legible
   ═══════════════════════════════════════════════════ */

.jj-game-card,
.oe_product_cart,
.oe_product .oe_product_cart {
    background: #FFFFFF !important;
    border: 1px solid #C8E6D8 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: all .3s cubic-bezier(.25,.46,.45,.94) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
    display: flex !important;
    flex-direction: column !important;
    backdrop-filter: none !important;
}
.jj-game-card:hover,
.oe_product_cart:hover,
.oe_product .oe_product_cart:hover {
    border-color: #20B967 !important;
    box-shadow: 0 8px 32px rgba(32,185,103,.18), 0 0 0 2px rgba(32,185,103,.08) !important;
    transform: translateY(-4px) !important;
    background: #FFFFFF !important;
}
.jj-game-card img,
.oe_product_cart .oe_product_image,
.oe_product_image {
    background: #F0F7F2 !important;
    border-bottom: 1px solid #C8E6D8 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;
}
.jj-game-card img {
    height: 180px !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform .4s ease !important;
    border-bottom: none !important;
}
.oe_product_image img { transition: transform .4s ease !important; }
.oe_product_image_img_wrapper { aspect-ratio: 16/10 !important; }
.jj-game-card:hover img,
.oe_product_cart:hover .oe_product_image img {
    transform: scale(1.05) !important;
}
.jj-game-card-body,
.oe_product_cart section,
.oe_product_cart .o_wsale_product_information,
.oe_product_cart > div:not(.oe_product_image),
.o_wsale_product_information {
    background: #FFFFFF !important;
    padding: 16px !important;
    color: #1A1A1A !important;
}
.jj-game-card-body h4,
.jj-game-card-body h3,
.oe_product_cart a[itemprop="name"],
.oe_product_cart h6 a,
.oe_product_cart .o_wsale_products_item_title a,
.oe_product_cart .text-primary.text-decoration-none,
.o_wsale_products_item_title a,
.oe_product section h5 a,
.oe_product section strong a {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    font-size: .95rem !important;
    color: #1D3326 !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
    display: block !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin: 0 0 6px !important;
}
.jj-game-card:hover .jj-game-card-body h4,
.oe_product_cart:hover a[itemprop="name"],
.oe_product_cart:hover .o_wsale_products_item_title a,
.oe_product:hover a[itemprop="name"] {
    color: #20B967 !important;
}
.jj-game-card-body p,
.oe_product_cart .oe_subdescription,
.oe_product_cart .text-muted,
.oe_product_cart .oe_product_cart_description,
.oe_product section .text-muted,
.oe_product section small,
.oe_subdescription {
    font-family: 'Inter', sans-serif !important;
    font-size: .82rem !important;
    color: #6B7F72 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}
.oe_product_cart .oe_product_price .oe_currency_value,
.oe_product_cart .product_price,
.oe_product .oe_price,
.oe_product .oe_currency_value {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    color: #20B967 !important;
}
.oe_product_cart del, .oe_product del {
    font-family: 'Inter', sans-serif !important;
    color: #B0B8B2 !important;
    font-size: .82rem !important;
}
.oe_product_cart .btn, .oe_product .btn {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: .82rem !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    transition: all .2s ease !important;
    text-transform: none !important;
}
.oe_product_cart .btn-primary, .oe_product .btn-primary,
.oe_product_cart .btn-success, .oe_product .btn-success {
    background: linear-gradient(135deg, #1A8A4E, #20B967) !important;
    border: none !important; color: #FFF !important;
}
.oe_product_cart .btn-primary:hover, .oe_product .btn-primary:hover {
    background: linear-gradient(135deg, #20B967, #28C972) !important;
    box-shadow: 0 4px 14px rgba(32,185,103,.35) !important;
    transform: translateY(-1px) !important;
}
.oe_product_cart .btn-secondary, .oe_product .btn-secondary,
.oe_product_cart .btn-outline-primary {
    background: transparent !important;
    border: 1.5px solid #C8E6D8 !important;
    color: #1D3326 !important;
}
.oe_product_cart .btn-secondary:hover, .oe_product .btn-secondary:hover,
.oe_product_cart .btn-outline-primary:hover {
    background: #F0F7F2 !important;
    border-color: #20B967 !important;
    color: #20B967 !important;
}
.oe_product { padding: 10px !important; }
.oe_product_cart {
    flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between;
}
@keyframes casinoCardIn {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}
.jj-game-card, .oe_product { animation: casinoCardIn .45s ease both; }
.oe_product:nth-child(1){animation-delay:0s}.oe_product:nth-child(2){animation-delay:.06s}.oe_product:nth-child(3){animation-delay:.12s}.oe_product:nth-child(4){animation-delay:.18s}.oe_product:nth-child(5){animation-delay:.04s}.oe_product:nth-child(6){animation-delay:.10s}.oe_product:nth-child(7){animation-delay:.16s}.oe_product:nth-child(8){animation-delay:.22s}.oe_product:nth-child(9){animation-delay:.08s}.oe_product:nth-child(10){animation-delay:.14s}.oe_product:nth-child(11){animation-delay:.20s}.oe_product:nth-child(12){animation-delay:.26s}
.jj-game-card:nth-child(1){animation-delay:.05s}.jj-game-card:nth-child(2){animation-delay:.12s}.jj-game-card:nth-child(3){animation-delay:.19s}
.oe_product_image::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(255,255,255,.3) 0%, transparent 50%);
    opacity: 0; transition: opacity .3s ease; z-index: 1; pointer-events: none;
}
.oe_product_cart:hover .oe_product_image::after { opacity: 1; }
.oe_product_image_link::before {
    content: 'Jugar'; position: absolute; bottom: 16px; left: 50%;
    transform: translateX(-50%) translateY(12px);
    background: #20B967; color: #FFF;
    font-family: 'Outfit', sans-serif; font-weight: 700;
    font-size: .78rem; text-transform: uppercase; letter-spacing: .1em;
    padding: 7px 22px; border-radius: 20px;
    opacity: 0; transition: all .3s ease; z-index: 2; pointer-events: none;
}
.oe_product_cart:hover .oe_product_image_link::before {
    opacity: 1; transform: translateX(-50%) translateY(0);
}



/* === CASINO HOMEPAGE v1 — Main Landing === */

/* --- Global background → Casino Dark --- */
#wrapwrap,#wrap,main {
    background: #060E0A !important;
}
.jj-page {
    background: #060E0A !important;
    color: #E6F3F3 !important;
    overflow-x: hidden;
    font-family: 'Inter', sans-serif;
}
/* Edge coverage */
html,body {
    background: #060E0A !important;
}

/* ---- Hero background ambient glow ---- */
.jj-hero-stacked::before {
    content: '';
    position: absolute;
    top: -180px;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 600px;
    background: radial-gradient(ellipse at center, rgba(32,185,103,.12) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    animation: heroGlow 6s ease-in-out infinite alternate;
}
@keyframes heroGlow {
    0% { opacity: .6; transform: translateX(-50%) scale(1); }
    100% { opacity: 1; transform: translateX(-50%) scale(1.08); }
}

/* === HERO SECTION === */
.jj-hero-stacked {
    position: relative;
    z-index: 1;
    padding: 0;
}
.jj-hero-banner-wrapper {
    text-align: center;
    padding: 32px 0 0 0;
    position: relative;
    z-index: 1;
}
.jj-hero-banner-wrapper img {
    max-width: 92%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0,0,0,.5);
    transition: transform .3s ease;
}

/* Hero content — fade-in animation */
.jj-hero-content {
    padding: 2.5rem 1rem 0;
    text-align: center;
    position: relative;
    z-index: 2;
    animation: heroFadeIn .8s ease both;
}
@keyframes heroFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Title */
.jj-hero-title-split { margin-bottom: 6px; }
.jj-hero-line1 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    color: rgba(230,243,243,.65);
    font-weight: 400;
    letter-spacing: .04em;
    display: block;
    margin-bottom: 6px;
    animation: heroFadeIn .8s ease .15s both;
}
.jj-hero-line2 {
    font-family: 'Oswald', sans-serif;
    font-size: 3.2rem;
    font-weight: 700;
    color: #FFF;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: -.02em;
    display: block;
    margin-bottom: 10px;
    animation: heroFadeIn .8s ease .25s both;
}
.jj-hero-line2 span {
    background: linear-gradient(135deg, #20B967, #16A34A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.jj-hero-sub {
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    color: rgba(230,243,243,.5);
    font-weight: 400;
    margin-bottom: 16px;
    animation: heroFadeIn .8s ease .35s both;
}

/* Hero CTA Buttons */
.jj-hero-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 22px;
    animation: heroFadeIn .8s ease .45s both;
}
.jj-btn-hero-primary {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    padding: 15px 36px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #20B967, #16A34A) !important;
    color: #FFF !important;
    border: none !important;
    text-decoration: none !important;
    transition: all .25s ease !important;
    box-shadow: 0 4px 20px rgba(32,185,103,.25) !important;
    display: inline-block !important;
    letter-spacing: .02em !important;
    position: relative;
    overflow: hidden;
}
.jj-btn-hero-primary::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -75%;
    width: 50%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
    transform: rotate(25deg);
    animation: btnShine 3s ease-in-out infinite;
}
@keyframes btnShine {
    0%, 100% { left: -75%; }
    50% { left: 125%; }
}
.jj-btn-hero-primary:hover {
    background: linear-gradient(135deg, #28C972, #1DAC5E) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(32,185,103,.4) !important;
    color: #FFF !important;
    text-decoration: none !important;
}
.jj-btn-hero-secondary {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    font-size: .95rem !important;
    padding: 15px 32px !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #20B967 !important;
    border: 1.5px solid rgba(32,185,103,.4) !important;
    text-decoration: none !important;
    transition: all .25s ease !important;
    display: inline-block !important;
    letter-spacing: .02em !important;
}
.jj-btn-hero-secondary:hover {
    background: rgba(32,185,103,.1) !important;
    border-color: #20B967 !important;
    color: #FFF !important;
    transform: translateY(-2px) !important;
    text-decoration: none !important;
}

/* === FEATURE BADGES === */
.jj-hero-features {
    display: flex;
    gap: 48px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 28px;
    animation: heroFadeIn .8s ease .55s both;
}
.jj-feat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}
.jj-feat-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(32,185,103,.1);
    border: 1px solid rgba(32,185,103,.2);
    border-radius: 12px;
    transition: all .25s ease;
}
.jj-feat:hover .jj-feat-icon {
    background: rgba(32,185,103,.18);
    border-color: rgba(32,185,103,.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(32,185,103,.2);
}
.jj-feat p {
    color: rgba(230,243,243,.6);
    font-family: 'Inter', sans-serif;
    font-size: .85rem;
    font-weight: 500;
    margin: 0;
}

/* === GAME CARDS (injected) === */
.jj-games-section {
    padding: 28px 0 48px;
    position: relative;
    z-index: 1;
}
.jj-games-title {
    font-family: 'Oswald', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #E6F3F3;
    text-align: center;
    margin-bottom: 28px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.jj-games-title span {
    background: linear-gradient(135deg, #20B967, #16A34A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.jj-game-cards {
    display: flex;
    gap: 18px;
    justify-content: center;
    flex-wrap: nowrap;
    padding: 0 20px;
    max-width: 1100px;
    margin: 0 auto;
}
.jj-game-card {
    flex: 0 1 33.333%;
    min-width: 0;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(32,185,103,.12);
    border-radius: 14px;
    overflow: hidden;
    transition: all .3s cubic-bezier(.25,.46,.45,.94);
    position: relative;
    z-index: 1;
}
.jj-game-card:hover {
    background: rgba(255,255,255,.06);
    border-color: rgba(32,185,103,.35);
    transform: translateY(-6px);
    box-shadow: 0 12px 36px rgba(32,185,103,.15);
}
.jj-game-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    border-bottom: 1px solid rgba(32,185,103,.15);
}
.jj-game-card-body {
    padding: 16px;
}
.jj-game-card-body h4 {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: #E6F3F3;
    margin: 0 0 6px;
}
.jj-game-card-body p {
    font-family: 'Inter', sans-serif;
    font-size: .82rem;
    color: rgba(230,243,243,.45);
    margin: 0;
    line-height: 1.4;
}

/* === HIDE ODOO FOOTER === */
#wrapwrap>footer.o_footer,
footer#bottom.o_footer {
    display: none !important;
}

/* === FOOTER === */
.jj-footer-legal {
    text-align: center;
    padding: 14px 16px;
    color: rgba(230,243,243,.25);
    font-family: 'Inter', sans-serif;
    font-size: .72rem;
    line-height: 1.5;
}
.jj-footer-legal p { margin: 0; }
.jj-footer-logos {
    display: flex;
    gap: 24px;
    justify-content: center;
    align-items: center;
    padding: 10px 16px 16px;
}
.jj-footer-logo-box {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 8px;
    padding: 6px 14px;
}
.jj-footer-logo-text {
    color: rgba(230,243,243,.3);
    font-family: 'Inter', sans-serif;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
}
/* === LOGIN PAGE === */
.oe_website_login_container .oe_login_form{max-width:420px;margin:40px auto;padding:36px 32px;background:#fff;border-radius:18px;box-shadow:0 8px 40px rgba(255,255,255,.3)}
.oe_website_login_container .oe_login_buttons .btn-primary{background:linear-gradient(135deg,#0a6e3e,#0d8a4c)!important;border:none!important;color:#fff!important;border-radius:10px!important;font-weight:600!important;font-family:'Inter',sans-serif!important;padding:12px 28px!important;font-size:1rem!important;transition:all .3s ease!important;width:100%!important}
.oe_website_login_container .oe_login_buttons .btn-primary:hover{background:linear-gradient(135deg,#0d8a4c,#0fa85e)!important;transform:translateY(-2px)!important;box-shadow:0 6px 24px rgba(46,204,113,.3)!important}
.oe_website_login_container .btn-link{color:#0a6e3e!important;font-family:'Inter',sans-serif!important;font-weight:500!important}
.oe_website_login_container .btn-link:hover{color:#0d8a4c!important}
.oe_website_login_container .form-control{background:rgba(10,46,20,.04)!important;border:1px solid rgba(10,46,20,.2)!important;color:#1a1a1a!important;border-radius:10px!important;font-family:'Inter',sans-serif!important;padding:12px 14px!important}
.oe_website_login_container .form-control:focus{border-color:#0a6e3e!important;box-shadow:0 0 0 3px rgba(46,204,113,.15)!important}
.oe_website_login_container .form-label{color:#1a1a1a!important;font-family:'Inter',sans-serif!important;font-weight:500!important}
.oe_website_login_container h1{font-family:'Outfit',sans-serif!important;color:#fff!important;font-weight:700!important}

/* Remove empty Odoo footer dark bar */
#wrapwrap>footer.o_footer{display:none!important}

/* === BACKEND RESET === *//* === CASINO PORTAL — Matching reference design === */

/* PAGE BACKGROUND */
#wrapwrap:has(.o_portal) { background: #0C281A !important; }
#wrap.o_portal_wrap { background: transparent !important; }
.o_portal_wrap { background: transparent !important; }
.o_portal_content { background: transparent !important; }

/* ---- SIDEBAR ---- */
.o_portal_wrap .list-group {
    background: #102F20;
    border-radius: 13px !important;
    border: 1px solid #1C5C3C;
    overflow: hidden;
}
.o_portal_wrap .list-group-item {
    background: #102F20 !important;
    border: none !important;
    border-bottom: 1px solid #1A4A30 !important;
    padding: 13px 18px;
    font-size: .9rem;
    font-weight: 500;
    color: #8AAA94 !important;
    transition: background .12s;
}
.o_portal_wrap .list-group-item:hover {
    background: #173B29 !important;
    color: #C5DCC8 !important;
}
.o_portal_wrap .list-group-item.active {
    background: #1C5C3C !important;
    color: #FFF !important;
    font-weight: 700;
    box-shadow: inset 3px 0 0 #278B53;
}
.o_portal_wrap .list-group-item.bg-primary,
.o_portal_wrap .list-group-item.bg-info,
.o_portal_wrap .list-group-item.bg-success,
.o_portal_wrap .list-group-item[class*="bg-"] {
    background: #102F20 !important;
    color: #8AAA94 !important;
}
.o_portal_wrap .list-group-item.bg-primary.active,
.o_portal_wrap .list-group-item.bg-info.active,
.o_portal_wrap .list-group-item.bg-success.active,
.o_portal_wrap .list-group-item[class*="bg-"].active {
    background: #1C5C3C !important;
    color: #FFF !important;
}

/* ---- CARDS — flat, border-only ---- */
.o_portal .card {
    background: #102F20 !important;
    border: 1px solid #1C5C3C !important;
    border-radius: 13px !important;
    box-shadow: none !important;
    margin-bottom: 1.5rem;
}
.o_portal .card-header {
    background: #173B29 !important;
    color: #E7F4F4 !important;
    border-bottom: 1px solid #227742 !important;
    padding: 14px 20px;
    font-weight: 700;
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.o_portal .card-header.bg-primary,
.o_portal .card-header.bg-info,
.o_portal .card-header.bg-success,
.o_portal .card-header.bg-o-color-1,
.o_portal .card-header.bg-o-color-2,
.o_portal .card-header.bg-o-color-3,
.o_portal .card-header.bg-o-color-4,
.o_portal .card-header.bg-o-color-5,
.o_portal .card-header[class*="bg-"] {
    background: #173B29 !important;
    color: #E7F4F4 !important;
}
.o_portal .card-body {
    background: #102F20 !important;
    color: #D9EEEE !important;
    padding: 20px;
}

/* ---- TYPOGRAPHY ---- */
.o_portal_my_home h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #E6F3F3;
    margin-bottom: 1rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid #1C5C3C;
}
.o_portal h2 { font-size: 1.3rem; font-weight: 700; color: #E6F3F3; }
.o_portal h3 { font-size: 1.1rem; font-weight: 600; color: #D9EEEE; }
.o_portal h4 { font-size: 1rem; font-weight: 600; color: #C0D4C4; }
.o_portal p { color: #C0D4C4; }
.o_portal strong { color: #E6F3F3; }
.o_portal .text-muted { color: #4B7770 !important; }
.o_portal hr { border-color: #1C5C3C; opacity: 1; }

/* ---- INPUTS — LIGHT fill, blue-gray border (matching reference) ---- */
.o_portal .form-control,
.o_portal input[type="text"],
.o_portal input[type="number"],
.o_portal input[type="email"],
.o_portal input[type="password"],
.o_portal input[type="tel"],
.o_portal select,
.o_portal textarea {
    background: #F3F5F5 !important;
    border: 2px solid #66758C !important;
    border-radius: 8px !important;
    padding: 10px 14px;
    font-size: .93rem;
    color: #4A5555 !important;
}
.o_portal .form-control::placeholder,
.o_portal input::placeholder,
.o_portal textarea::placeholder {
    color: #5D7775;
    font-size: .93rem;
}
.o_portal .form-control:focus,
.o_portal input:focus,
.o_portal select:focus,
.o_portal textarea:focus {
    border-color: #20B967 !important;
    box-shadow: 0 0 0 3px rgba(32,185,103,.2) !important;
    outline: none;
    background: #FFF !important;
}
.o_portal label {
    font-weight: 600;
    color: #A0C0A8;
    font-size: .85rem;
}
.o_portal .input-group-text {
    background: #173B29 !important;
    border-color: #227742 !important;
    color: #B7D9D0 !important;
}

/* ---- BUTTONS — bright emerald green (matching reference) ---- */
.o_portal .btn {
    font-weight: 700;
    font-size: .9rem;
    padding: 10px 22px;
    border-radius: 8px;
    transition: all .12s ease;
}
/* Primary, Success, Submit = emerald green */
.o_portal .btn-primary,
.o_portal .btn-success,
.o_portal .o_withdrawal_submit {
    background: linear-gradient(135deg,#20B967,#1A9E55) !important;
    border: none !important;
    color: #FFF !important;
    box-shadow: 0 2px 8px rgba(32,185,103,.35);
}
.o_portal .btn-primary:hover,
.o_portal .btn-success:hover,
.o_portal .o_withdrawal_submit:hover {
    background: linear-gradient(135deg,#28C972,#1DAC5E) !important;
    box-shadow: 0 4px 14px rgba(32,185,103,.45);
}
/* Warning */
.o_portal .btn-warning {
    background: rgba(229,158,51,.15) !important;
    border: 1.5px solid #E59E33 !important;
    color: #E59E33 !important;
}
/* Danger */
.o_portal .btn-danger {
    background: rgba(220,53,69,.15) !important;
    border: 1.5px solid #DC3545 !important;
    color: #E8707A !important;
}
/* Outline / Secondary */
.o_portal .btn-outline-secondary,
.o_portal .btn-outline-primary,
.o_portal .btn-secondary {
    background: transparent !important;
    border: 1.5px solid #1C5C3C !important;
    color: #A0C0A8 !important;
}
.o_portal .btn-outline-secondary:hover,
.o_portal .btn-outline-primary:hover,
.o_portal .btn-secondary:hover {
    background: #173B29 !important;
    border-color: #20B967 !important;
    color: #FFF !important;
}
.o_portal .btn-sm {
    font-size: .82rem;
    padding: 7px 16px;
}

/* ---- TABLES — clean, no zebra, flat (matching reference) ---- */
.o_portal table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .9rem;
    border: 1px solid #1E6040;
    border-radius: 11px;
    overflow: hidden;
}
.o_portal thead th {
    background: #183C2A !important;
    color: #B7D9D0 !important;
    font-weight: 700 !important;
    font-size: .75rem !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    padding: 14px 17px !important;
    border-bottom: 1px solid #246B43 !important;
    text-align: left;
}
.o_portal thead th.bg-primary,
.o_portal thead th.bg-info,
.o_portal thead th.bg-success,
.o_portal thead th[class*="bg-"] {
    background: #183C2A !important;
    color: #B7D9D0 !important;
}
.o_portal tbody td {
    padding: 14px 17px;
    border-bottom: 1px solid #1A4A30;
    color: #D9EEEE;
    background: #0D291A;
    font-size: .9rem;
}
.o_portal tbody tr:last-child td { border-bottom: none; }
.o_portal tbody tr:hover td { background: #143022 !important; }

/* ---- BALANCE BADGE — clean green (matching reference) ---- */
.o_portal .badge {
    font-weight: 700;
    font-size: .78rem;
    padding: 6px 14px;
    border-radius: 20px;
    background: #1C5C3C;
    color: #E6F3F3;
}
.o_portal .badge.bg-success,
.o_portal .badge.badge-success,
.o_portal span.badge[class*="success"] {
    background: #20B967 !important;
    color: #FFF !important;
    box-shadow: 0 1px 4px rgba(32,185,103,.3);
}
.o_portal .badge.bg-info,
.o_portal .badge.badge-info {
    background: rgba(56,160,220,.2) !important;
    color: #60B0E0 !important;
}
.o_portal .badge.bg-warning,
.o_portal .badge.badge-warning {
    background: rgba(229,158,51,.2) !important;
    color: #E59E33 !important;
}
.o_portal .badge.bg-danger {
    background: rgba(220,53,69,.2) !important;
    color: #E8707A !important;
}

/* ---- ALERTS — plain style (no colored box), just subtle left border ---- */
.o_portal .alert {
    background: transparent !important;
    border: none !important;
    border-left: 3px solid #1C5C3C !important;
    border-radius: 0 !important;
    padding: 8px 14px;
    font-size: .82rem;
    color: #4B7770 !important;
}
.o_portal .alert-warning { border-left-color: #E59E33 !important; color: #C8A060 !important; }
.o_portal .alert-info { border-left-color: #38A0DC !important; color: #60B0E0 !important; }
.o_portal .alert-danger { border-left-color: #DC3545 !important; color: #E8707A !important; }
.o_portal .alert-success { border-left-color: #20B967 !important; color: #4ADE80 !important; }

/* ---- PAGINATION ---- */
.o_portal .pagination { gap: 3px; }
.o_portal .page-link {
    background: #102F20;
    border: 1px solid #1C5C3C;
    border-radius: 7px;
    color: #8AAA94;
    font-weight: 500;
    padding: 7px 13px;
    font-size: .85rem;
}
.o_portal .page-link:hover { background: #173B29; color: #FFF; }
.o_portal .page-item.active .page-link {
    background: #1C5C3C;
    border-color: #1C5C3C;
    color: #FFF;
}

/* ---- MODALS ---- */
.o_portal .modal-content {
    background: #102F20;
    border: 1px solid #1C5C3C;
    border-radius: 13px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.o_portal .modal-header { border-bottom: 1px solid #1C5C3C; color: #E6F3F3; }
.o_portal .modal-body { color: #D9EEEE; }
.o_portal .modal-footer { border-top: 1px solid #1C5C3C; }

/* ---- NAV TABS ---- */
.o_portal .nav-tabs { border-bottom: 1px solid #1C5C3C; }
.o_portal .nav-tabs .nav-link {
    color: #709878; font-weight: 500; padding: 9px 16px; border: none; font-size: .88rem;
}
.o_portal .nav-tabs .nav-link:hover { color: #FFF; background: #173B29; }
.o_portal .nav-tabs .nav-link.active {
    background: #102F20;
    color: #20B967;
    border-bottom: 2px solid #20B967;
}

/* ---- PORTAL NAV CARDS (on /my homepage) ---- */
.o_portal_my_home_item a,
.o_portal_docs a {
    display: block;
    background: #102F20;
    border: 1px solid #1C5C3C;
    border-radius: 13px;
    padding: 24px 20px;
    text-decoration: none !important;
    transition: all .15s ease;
    box-shadow: none !important;
}
.o_portal_my_home_item a:hover,
.o_portal_docs a:hover {
    background: #173B29;
    border-color: #20B967;
    transform: none;
}
.o_portal_my_home_item a strong,
.o_portal_docs a strong {
    display: block;
    color: #E6F3F3;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 5px;
}
.o_portal_my_home_item a small,
.o_portal_docs a small {
    display: block;
    color: #8AAA94;
    font-size: .8rem;
    line-height: 1.35;
}
.o_portal_my_home_item a[href*="club-support"] { border-left: 3px solid #38A0DC; }
.o_portal_my_home_item a[href*="/my/home"] { border-left: 3px solid #20B967; }

/* ---- CLUB SUPPORT PAGE ---- */
body:has(a.nav-link.active[href="/my/club-support"]) #wrapwrap {
    background: #0C281A !important;
}
body:has(a.nav-link.active[href="/my/club-support"]) #wrapwrap .card {
    background: #102F20 !important;
    border: 1px solid #1C5C3C !important;
    border-radius: 13px !important;
    box-shadow: none !important;
    margin-bottom: 1rem;
}
body:has(a.nav-link.active[href="/my/club-support"]) #wrapwrap .card:hover {
    background: #173B29 !important;
    border-color: #20B967 !important;
}
body:has(a.nav-link.active[href="/my/club-support"]) #wrapwrap .card-body {
    background: #102F20 !important;
    color: #D9EEEE !important;
}
body:has(a.nav-link.active[href="/my/club-support"]) #wrapwrap .btn-primary {
    background: linear-gradient(135deg,#20B967,#1A9E55);
    border: none;
    color: #FFF;
}
body:has(a.nav-link.active[href="/my/club-support"]) #wrapwrap h2 {
    color: #E6F3F3;
    font-weight: 700;
    border-bottom: 1px solid #1C5C3C;
    padding-bottom: .5rem;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
    .o_portal .card-body { padding: 14px; }
    .o_portal table { font-size: .82rem; }
    .o_portal thead th,
    .o_portal tbody td { padding: 10px 12px; }
    .o_portal_my_home_item a { padding: 16px 14px; }
}

body:not(:has(#wrapwrap)),html:not(:has(#wrapwrap)){background:#f1f1f3!important}
body:not(:has(#wrapwrap))::before{display:none!important;content:none!important}
body:not(:has(#wrapwrap)) #jj-particles{display:none!important}

/* === GAME CARD IMG Z-INDEX === */
.jj-games-section img,.jj-game-card img,.jj-game-card,.jj-hero img,.jj-hero-banner-wrapper img,.jj-cta img,.oe_website_sale .oe_product_image img,.oe_website_sale .oe_product_cart,.carousel,.s_image_gallery{position:relative;z-index:1}

/* === RESPONSIVE === */
@media(max-width:991px){
.jj-hero-line2{font-size:2.2rem}
.jj-game-cards{flex-wrap:wrap}
.jj-game-card{flex:0 1 calc(50% - 8px);min-width:200px}
.oe_website_login_container .oe_login_form{margin:20px 12px!important;padding:28px 20px!important}
}
@media(max-width:768px){
.jj-hero-line2{font-size:1.8rem}
.jj-hero-line1{font-size:.95rem}
.jj-hero-sub{font-size:.85rem}
.jj-btn-hero-primary,.jj-btn-hero-secondary{padding:12px 24px!important;font-size:.9rem!important}
.jj-game-card{flex:0 1 100%;max-width:360px;margin:0 auto}
.jj-game-cards{gap:12px;flex-wrap:wrap}
.jj-cta-content{padding:24px 18px}
.jj-cta-content h2{font-size:1.5rem}
.jj-hero-features{gap:10px;padding:16px 8px 0}
.jj-feat{padding:12px 14px;font-size:.8rem;min-width:150px}
.jj-feat-icon{width:36px;height:36px}
.jj-feat-icon svg{width:18px;height:18px}
}
@media(max-width:390px){
.jj-hero-line2{font-size:1.6rem}
.jj-hero-line1{font-size:.85rem}
.jj-btn-hero-primary,.jj-btn-hero-secondary{padding:.7rem 1.25rem!important;font-size:.8rem!important}
}

/* ═══════════════════════════════════════════════
   SHOP PAGE — COMPREHENSIVE (v=27)
   ═══════════════════════════════════════════════ */
.oe_website_sale #wrapwrap>main{position:relative;z-index:1}
.oe_website_sale .container.oe_website_sale{background:transparent!important;padding-top:20px!important}
/* Product grid cards */
.oe_product_cart{border-radius:16px!important;overflow:hidden!important;transition:all .3s ease!important}
.oe_product_cart:hover{transform:translateY(-6px)!important;box-shadow:0 16px 48px rgba(255,255,255,.5),0 0 0 1px rgba(46,204,113,.25)!important}
/* Product image area */
.oe_product_image{padding:12px 12px 0!important;background:transparent!important}
.oe_product_image img{border-radius:14px!important;transition:transform .4s ease!important}
.oe_product:hover .oe_product_image img{transform:scale(1.06)!important}
/* Product info area */
.o_wsale_product_information{background:rgba(255,255,255,.05)!important;border:1px solid rgba(46,204,113,.12)!important;border-radius:0 0 14px 14px!important;padding:16px!important;margin:0!important}
.o_wsale_product_information_text{padding:0!important}
.o_wsale_products_item_title,.o_wsale_products_item_title a{font-family:'Inter',sans-serif!important;font-weight:700!important;font-size:1rem!important;color:#fff!important;line-height:1.3!important}
.oe_subdescription,.oe_subdescription span,.text-muted{color:rgba(255,255,255,.5)!important;font-family:'Inter',sans-serif!important;font-size:.8rem!important}
/* Price */
.o_wsale_product_information .text-primary,.o_wsale_product_information .oe_price,.oe_price{color:#2ecc71!important;font-family:'Inter',sans-serif!important;font-weight:700!important;font-size:1.05rem!important}

/* ===== v=50 ODOO 18 SHOP CSS — targeting .oe_product, .o_wsale_ classes ===== */

/* Product grid card — glass-morphism on dark bg */
.oe_product{
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(46,204,113,.18) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  transition: transform .2s, box-shadow .2s, border-color .2s !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important
}
.oe_product:hover{
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(46,204,113,.2) !important;
  border-color: rgba(46,204,113,.4) !important
}

/* Product grid wrapper */
.o_wsale_product_grid_wrapper{
  display: flex ;
  flex-direction: column ;
  height: 100% ;
  padding: 0 ;
  background: transparent 
}

/* Product image area */
.oe_product_image{
  border-radius: 14px 14px 0 0 ;
  overflow: hidden ;
  aspect-ratio: 16/10 ;
  background: rgba(255,255,255,.3) 
}
.oe_product_image img{
  object-fit: cover ;
  transition: transform .3s 
}
.oe_product:hover .oe_product_image img{
  transform: scale(1.05) !important
}

/* Product info text area */
.o_wsale_product_information{
  padding: 1.125rem ;
  flex: 1 1 auto ;
  display: flex ;
  flex-direction: column 
}

/* Product title */
.o_wsale_products_item_title{
  font-family: Inter, sans-serif ;
  font-weight: 700 ;
  font-size: 1.05rem ;
  margin-bottom: 0.375rem ;
  line-height: 1.3 
}
.o_wsale_products_item_title a{
  color: #f0fdf4 ;
  text-decoration: none ;
  transition: color .2s 
}
.o_wsale_products_item_title a:hover{
  color: #2ecc71 
}

/* Product subtitle/description */
.oe_subdescription{
  font-family: Inter, sans-serif ;
  color: #94a3b8 ;
  font-size: .82rem ;
  line-height: 1.4 ;
  margin-bottom: 12px 
}

/* Product cart form — bottom-aligned */
.oe_product_cart{
  flex: 1 1 auto ;
  display: flex ;
  flex-direction: column ;
  justify-content: space-between 
}

/* Product ribbon badge */
.o_ribbon{
  z-index: 2 ;
  font-family: Inter, sans-serif ;
  font-weight: 700 
}

/* ===== SHOP FILTERS / SIDEBAR ===== */
.o_wsale_products_grid_before_rail{
  background: rgba(8,20,14,.6) ;
  border-right: 1px solid rgba(46,204,113,.12) ;
  color: #d1fae5 ;
  font-family: Inter, sans-serif ;
  border-radius: 0 0 0 14px 
}
.o_wsale_products_grid_before_rail .list-group-item{
  background: transparent ;
  color: #d1fae5 ;
  border-color: rgba(46,204,113,.1) ;
  font-family: Inter, sans-serif ;
  transition: background .2s 
}
.o_wsale_products_grid_before_rail .list-group-item:hover{
  background: rgba(46,204,113,.1) ;
  color: #fff 
}
.o_wsale_products_grid_before_rail .list-group-item.active{
  background: #2ecc71 ;
  color: #fff ;
  border-color: #2ecc71 ;
  font-weight: 700 
}

/* ===== SHOP SEARCH BAR ===== */
.o_wsale_products_searchbar_form input{
  background: rgba(255,255,255,.92) ;
  border: 2px solid #64748b ;
  border-radius: 8px ;
  color: #0f172a ;
  font-family: Inter, sans-serif ;
  padding: 10px 16px 
}
.o_wsale_products_searchbar_form input:focus{
  border-color: #2ecc71 ;
  box-shadow: 0 0 0 4px rgba(46,204,113,.2) 
}
.o_wsale_products_searchbar_form button{
  background: linear-gradient(135deg, #2ecc71, #1e8449) ;
  color: #fff ;
  border: none ;
  border-radius: 0 8px 8px 0 
}

/* ===== SHOP SORT / LAYOUT BUTTONS ===== */
.products_header .btn,
.o_wsale_apply_layout .btn{
  background: rgba(255,255,255,.1) ;
  color: #d1fae5 ;
  border: 1px solid rgba(46,204,113,.15) ;
  border-radius: 8px ;
  font-family: Inter, sans-serif ;
  transition: background .2s 
}
.products_header .btn:hover,
.o_wsale_apply_layout .btn:hover{
  background: rgba(46,204,113,.15) ;
  color: #fff 
}
.products_header .btn.active,
.o_wsale_apply_layout .btn.active{
  background: #2ecc71 ;
  color: #fff ;
  border-color: #2ecc71 
}

/* ===== SHOP PAGINATION ===== */
.o_pager .page-link{
  color: #d1fae5 ;
  background: rgba(255,255,255,.05) ;
  border: 1px solid rgba(46,204,113,.12) ;
  font-family: Inter, sans-serif 
}
.o_pager .page-item.active .page-link{
  background: #2ecc71 ;
  color: #fff ;
  border-color: #2ecc71 
}

/* ===== SHOP MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
  .oe_product{
    border-radius: 10px !important
  }
  .o_wsale_product_information{
    padding: 12px 
  }
}

/* ===== SHOP: Price display ===== */
.oe_product .oe_price,
.oe_product .text-muted,
.o_wsale_product_information_text .text-muted{
  color: #94a3b8 !important;
  font-family: Inter, sans-serif !important
}
.oe_product .badge{
  font-family: Inter, sans-serif !important;
  border-radius: 20px !important;
  padding: 4px 0.625rem !important
}

/* ---- ALL CARD BODIES: white bg, dark text ---- */
.card-body,
[class*="card-body"],
.panel-body,
[class*="panel-body"],
.tab-pane.active,
.tab-pane.fade.show,
.tab-pane.fade.in,
.tab-content > .active{
  background: #ffffff ;
  color: #0f172a ;
  padding: 1.500rem ;
  font-family: Inter, sans-serif ;
}

/* ---- ALL CARDS/PANELS: white rounded with shadow ---- */
.card,
.panel,
[class*="o_card"]{
  background: #ffffff ;
  border-radius: 12px ;
  border: 2px solid #e2e8f0 ;
  box-shadow: 0 4px 20px rgba(255,255,255,.12) ;
  overflow: hidden ;
  margin-bottom: 1.250rem ;
}

/* ---- ALL casino form containers: translucent card on dark bg ---- */
[id$="_form"].tab-pane,
[id$="_form"].active,
div[id$="_form"]{
  background: rgba(8,28,18,.72) ;
  border-radius: 14px ;
  padding: 1.750rem ;
  border: 1px solid rgba(46,204,113,.18) ;
  box-shadow: 0 8px 32px rgba(255,255,255,.3) ;
}

/* ---- FORM-SPECIFIC ID selectors for each section ---- */

/* Depositar */
#depositar_form,
#depositar_form *{
  font-family: Inter, sans-serif ;
}
#depositar_form .card-header,
#depositar_form [class*="card-header"],
#depositar_form [class*="bg-primary"]{
  background: linear-gradient(135deg, #2ecc71, #1e8449) !important;
  color: #fff !important;
  font-weight: 700 !important;
}
#depositar_form .card-body,
#depositar_form [class*="card-body"]{
  background: #ffffff ;
  color: #0f172a ;
}
#depositar_form input,
#depositar_form .form-control{
  border: 2px solid #64748b !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  padding: 0.625rem 0.875rem !important;
}
#depositar_form input:focus,
#depositar_form .form-control:focus{
  border-color: #2ecc71 !important;
  box-shadow: 0 0 0 4px rgba(46,204,113,.2) !important;
}
#depositar_form button,
#depositar_form .btn-success,
#depositar_form .btn-primary{
  background: linear-gradient(135deg, #2ecc71, #1e8449) ;
  color: #fff ;
  border: none ;
  border-radius: 8px ;
  font-weight: 700 ;
  padding: 0.750rem 1.750rem ;
  box-shadow: 0 4px 14px rgba(46,204,113,.35) ;
}
#depositar_form table th{
  background: #1e293b ;
  color: #fff ;
  text-transform: uppercase ;
  font-size: .78rem ;
  letter-spacing: .05em ;
  padding: 0.625rem 0.875rem ;
}
#depositar_form table td{
  color: #0f172a ;
  background: #fff ;
  border-bottom: 1px solid #e2e8f0 ;
  padding: 0.500rem 0.875rem ;
}

/* Retirar */
#retirar_form,
#retirar_form *{
  font-family: Inter, sans-serif ;
}
#retirar_form .card-header,
#retirar_form [class*="card-header"]{
  background: linear-gradient(135deg, #2ecc71, #1e8449) ;
  color: #fff ;
  font-weight: 700 ;
}
#retirar_form .card-body,
#retirar_form [class*="card-body"]{
  background: #ffffff ;
  color: #0f172a ;
}
#retirar_form .card,
#retirar_form [class*="method"]{
  background: #fff ;
  border: 2px solid #e2e8f0 ;
  border-radius: 12px ;
  padding: 1rem ;
  text-align: center ;
  cursor: pointer ;
  transition: border-color .2s, transform .15s ;
}
#retirar_form .card:hover,
#retirar_form [class*="method"]:hover{
  border-color: #2ecc71 ;
  transform: translateY(-2px) ;
}
#retirar_form table th{
  background: #1e293b ;
  color: #fff ;
  text-transform: uppercase ;
  font-size: .78rem ;
  letter-spacing: .05em ;
  padding: 0.625rem 0.875rem ;
}
#retirar_form table td{
  color: #0f172a ;
  background: #fff ;
  border-bottom: 1px solid #e2e8f0 ;
}

/* Registrar Bonus */
#registrar_bonus_form,
#registrar_bonus_form *{
  font-family: Inter, sans-serif ;
}
#registrar_bonus_form .card-header,
#registrar_bonus_form [class*="card-header"]{
  background: linear-gradient(135deg, #2ecc71, #1e8449) ;
  color: #fff ;
  font-weight: 700 ;
}
#registrar_bonus_form .card-body,
#registrar_bonus_form [class*="card-body"]{
  background: #ffffff ;
  color: #0f172a ;
}
#registrar_bonus_form input,
#registrar_bonus_form .form-control{
  border: 2px solid #64748b !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #0f172a !important;
  padding: 0.625rem 0.875rem !important;
}
#registrar_bonus_form input:focus{
  border-color: #2ecc71 ;
  box-shadow: 0 0 0 4px rgba(46,204,113,.2) ;
}
#registrar_bonus_form button{
  background: linear-gradient(135deg, #2ecc71, #1e8449) ;
  color: #fff ;
  border: none ;
  border-radius: 8px ;
  font-weight: 700 ;
  padding: 0.750rem 1.750rem ;
  box-shadow: 0 4px 14px rgba(46,204,113,.35) ;
}

/* Movimientos */
#movimientos_form,
#movimientos_form *{
  font-family: Inter, sans-serif ;
}
#movimientos_form .card-header{
  background: linear-gradient(135deg, #2ecc71, #1e8449) ;
  color: #fff ;
}
#movimientos_form .card-body{
  background: #ffffff ;
  color: #0f172a ;
}
#movimientos_form table th{
  background: #1e293b ;
  color: #fff ;
  text-transform: uppercase ;
  font-size: .78rem ;
  letter-spacing: .05em ;
  padding: 0.625rem 0.875rem ;
}
#movimientos_form table td{
  color: #0f172a ;
  background: #fff ;
  border-bottom: 1px solid #e2e8f0 ;
  padding: 0.500rem 0.875rem ;
}
#movimientos_form tbody tr:hover td{
  background: #f0fdf4 ;
}

/* Medios de Pago */
#medios_pagos_form,
#medios_pagos_form *{
  font-family: Inter, sans-serif ;
}
#medios_pagos_form .card-header{
  background: linear-gradient(135deg, #2ecc71, #1e8449) ;
  color: #fff ;
}
#medios_pagos_form .card-body{
  background: #ffffff ;
  color: #0f172a ;
}
#medios_pagos_form table th{
  background: #1e293b ;
  color: #fff ;
  text-transform: uppercase ;
  font-size: .78rem ;
  letter-spacing: .05em ;
  padding: 0.625rem 0.875rem ;
}
#medios_pagos_form table td{
  color: #0f172a ;
  background: #fff ;
  border-bottom: 1px solid #e2e8f0 ;
}
#medios_pagos_form input[type="checkbox"]{
  width: 1.250rem ;
  height: 1.250rem ;
  accent-color: #2ecc71 ;
}
#medios_pagos_form button{
  background: linear-gradient(135deg, #2ecc71, #1e8449) ;
  color: #fff ;
  border: none ;
  border-radius: 8px ;
  font-weight: 700 ;
  padding: 0.750rem 1.750rem ;
}

/* Mis Límites */
#mis_limites_form,
#mis_limites_form *{
  font-family: Inter, sans-serif ;
}
#mis_limites_form .card-header{
  background: linear-gradient(135deg, #2ecc71, #1e8449) ;
  color: #fff ;
}
#mis_limites_form .card-body{
  background: #ffffff ;
  color: #0f172a ;
}
#mis_limites_form input,
#mis_limites_form .form-control{
  border: 2px solid #64748b !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #0f172a !important;
}
#mis_limites_form table th{
  background: #1e293b ;
  color: #fff ;
  text-transform: uppercase ;
  font-size: .78rem ;
  letter-spacing: .05em ;
}
#mis_limites_form table td{
  color: #0f172a ;
  background: #fff ;
  border-bottom: 1px solid #e2e8f0 ;
}

/* Datos Bancarios */
#datos_bancarios_form,
#datos_bancarios_form *{
  font-family: Inter, sans-serif ;
}
#datos_bancarios_form .card-header{
  background: linear-gradient(135deg, #2ecc71, #1e8449) ;
  color: #fff ;
}
#datos_bancarios_form .card-body{
  background: #ffffff ;
  color: #0f172a ;
}
#datos_bancarios_form input,
#datos_bancarios_form .form-control{
  border: 2px solid #64748b !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #0f172a !important;
  padding: 0.625rem 0.875rem !important;
}
#datos_bancarios_form input:focus{
  border-color: #2ecc71 ;
  box-shadow: 0 0 0 4px rgba(46,204,113,.2) ;
}
#datos_bancarios_form button,
#datos_bancarios_form .btn-success{
  background: linear-gradient(135deg, #2ecc71, #1e8449) ;
  color: #fff ;
  border: none ;
  border-radius: 8px ;
  font-weight: 700 ;
  padding: 0.750rem 1.750rem ;
  box-shadow: 0 4px 14px rgba(46,204,113,.35) ;
}

/* ---- GLOBAL INPUT FIX: any input anywhere in a card body ---- */
.card-body input,
.card-body select,
.card-body textarea,
.card-body .form-control{
  border: 2px solid #94a3b8 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  font-family: Inter, sans-serif !important;
}
.card-body input:focus,
.card-body select:focus,
.card-body textarea:focus,
.card-body .form-control:focus{
  border-color: #2ecc71 !important;
  box-shadow: 0 0 0 4px rgba(46,204,113,.2) !important;
}

/* ---- BADGES global ---- */
.badge-success,
.badge[class*="Aprobado"],
.badge[class*="approved"]{
  background: #22c55e !important;
  color: #fff !important;
  border-radius: 20px !important;
  padding: 4px 0.750rem !important;
  font-weight: 600 !important;
}
.badge-warning,
.badge[class*="Pendiente"],
.badge[class*="pending"]{
  background: #f59e0b !important;
  color: #0f172a !important;
  border-radius: 20px !important;
  padding: 4px 0.750rem !important;
  font-weight: 600 !important;
}
.badge-danger,
.badge[class*="Rechazado"],
.badge[class*="rejected"]{
  background: #ef4444 !important;
  color: #fff !important;
  border-radius: 20px !important;
  padding: 4px 0.750rem !important;
  font-weight: 600 !important;
}

/* === HIDE ODOO FOOTER === */
#wrapwrap>footer.o_footer,
footer#bottom.o_footer {
    display: none !important;
}

/* === FOOTER === */
.jj-footer-legal {
    text-align: center;
    padding: 14px 16px;
    color: rgba(230,243,243,.25);
    font-family: 'Inter', sans-serif;
    font-size: .72rem;
    line-height: 1.5;
}
.jj-footer-legal p { margin: 0; }
.jj-footer-logos {
    display: flex;
    gap: 24px;
    justify-content: center;
    align-items: center;
    padding: 10px 16px 16px;
}
.jj-footer-logo-box {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 8px;
    padding: 6px 14px;
}
.jj-footer-logo-text {
    color: rgba(230,243,243,.3);
    font-family: 'Inter', sans-serif;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
}
/* === LOGIN PAGE — white text for contrast === */
.oe_login_form .form-label,
.o_login_auth label {
    color:#FFFFFF!important;
    opacity:.85!important;
}
.oe_website_login_container,
.o_login_auth {
    color:#E6F3F3!important;
}
.oe_login_form .card-header,
.o_login_auth .card-header {
    color:#FFFFFF!important;
}

/* === CARD CONSISTENCY — white titles for contrast === */
.jj-game-card-body h4 {
    color:#FFFFFF!important;
}


/* --- Header background --- */
#wrapwrap>header.o_header_standard,
.o_header_standard {
    background: #060E0A !important;
    border-bottom: 1px solid #1A3B2A !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.3) !important;
}
.o_header_standard .navbar {
    background: transparent !important;
    padding: 8px 0 !important;
}
.o_header_standard .navbar-light {
    background: transparent !important;
}

/* --- Nav links — light, legible --- */
.o_header_standard .navbar-nav .nav-link,
.o_header_standard .top_menu .nav-link,
.o_header_standard #top_menu .nav-link {
    font-family:'Inter',sans-serif!important;
    font-weight:500!important;
    color:#8AAA94!important;
    font-size:.92rem!important;
    padding:8px 16px!important;
    transition:color .2s ease!important;
    opacity:1!important;
}
.o_header_standard .nav-link:hover,
.o_header_standard .top_menu .nav-link:hover {
    color:#E6F3F3!important;
}
.o_header_standard .nav-link.active {
    color:#20B967!important;
    font-weight:600!important;
}

/* --- Logo --- */
.o_header_standard .navbar-brand {
    padding:4px 0!important;
    opacity:1!important;
}
.o_header_standard .navbar-brand img {
    max-height:36px!important;
    filter: brightness(0) invert(1)!important;
}

/* --- Cart & search circular buttons --- */
.o_header_standard .o_navlink_background,
.o_header_standard .o_navlink_background.btn {
    background: rgba(255,255,255,.06)!important;
    border:1px solid #1A3B2A!important;
    color:#8AAA94!important;
    width:38px!important;
    height:38px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:50%!important;
    transition:all .2s ease!important;
}
.o_header_standard .o_navlink_background:hover {
    background:rgba(32,185,103,.12)!important;
    border-color:#20B967!important;
    color:#20B967!important;
}
.o_header_standard .o_navlink_background .fa {
    font-size:1rem!important;
    color:inherit!important;
}

/* --- Cart count badge --- */
.o_header_standard .my_cart_quantity.badge {
    font-family:'Inter',sans-serif!important;
    font-size:.62rem!important;
    background:#20B967!important;
    color:#FFF!important;
    min-width:18px!important;
    height:18px!important;
    padding:0 2px!important;
    border-radius:50%!important;
    line-height:18px!important;
    font-weight:700!important;
}

/* --- Social links in header --- */
.o_header_standard .o_header_social_links a {
    opacity:.7!important;
    color:#8AAA94!important;
    transition:opacity .2s ease!important;
}
.o_header_standard .o_header_social_links a:hover {
    opacity:1!important;
    color:#20B967!important;
}

/* --- User menu --- */
.o_header_standard .o_user_menu .nav-link,
.o_header_standard .o-navbar-right .nav-link,
.o_header_standard .navbar-nav.align-items-center .nav-link {
    font-family:'Inter',sans-serif!important;
    color:#8AAA94!important;
    font-size:.88rem!important;
    font-weight:500!important;
    opacity:1!important;
}

/* --- Dropdown menus --- */
.o_header_standard .dropdown-menu {
    background:#0D1F16!important;
    border:1px solid #1A3B2A!important;
    border-radius:10px!important;
    padding:6px!important;
    box-shadow:0 8px 30px rgba(0,0,0,.5)!important;
}
.o_header_standard .dropdown-item {
    color:#8AAA94!important;
    font-family:'Inter',sans-serif!important;
    font-size:.85rem!important;
    padding:8px 14px!important;
    border-radius:6px!important;
    transition:all .15s ease!important;
}
.o_header_standard .dropdown-item:hover {
    background:rgba(32,185,103,.12)!important;
    color:#E6F3F3!important;
}
.o_header_standard .dropdown-divider {
    border-color:#1A3B2A!important;
    margin:4px 0!important;
}

/* --- Search bar in header --- */
.o_header_standard .o_searchbar_form input,
.o_header_standard .s_searchbar_input input {
    background:#0D1F16!important;
    border:1px solid #1A3B2A!important;
    color:#E6F3F3!important;
    border-radius:10px!important;
    font-family:'Inter',sans-serif!important;
    padding:9px 16px!important;
    font-size:.88rem!important;
}
.o_header_standard .o_searchbar_form input::placeholder {
    color:#5A7A62!important;
}
.o_header_standard .o_searchbar_form input:focus {
    border-color:#20B967!important;
    box-shadow:0 0 0 3px rgba(32,185,103,.15)!important;
}

/* --- Search modal --- */
#o_search_modal .modal-content {
    background:#0D1F16!important;
    border:1px solid #1A3B2A!important;
    border-radius:12px!important;
}

/* --- Mobile header --- */
.o_header_standard .o_header_mobile {
    background:#060E0A!important;
    border-bottom:1px solid #1A3B2A!important;
}
.o_header_standard .navbar-toggler {
    border-color:#1A3B2A!important;
    background:#0D1F16!important;
}
.o_header_standard .navbar-toggler-icon {
    filter:invert(.6)!important;
}

/* --- Mobile offcanvas --- */
.o_header_standard .offcanvas {
    background:#060E0A!important;
}
.o_header_standard .offcanvas .nav-link {
    color:#8AAA94!important;
}
.o_header_standard .offcanvas .nav-link:hover {
    color:#20B967!important;
}

/* --- Backend to frontend nav (hide the floating edit btn) --- */
.o_frontend_to_backend_nav {
    display:none!important;
}

/* ============================================
   LOGIN / REGISTER PAGE
   ============================================ */

/* --- Container background fix --- */
.oe_website_login_container,
.o_login_auth {
    background:#060E0A!important;
}
#wrapwrap:has(.oe_website_login_container) {
    background:#060E0A!important;
}

/* --- Login card --- */
.oe_login_form,
.oe_website_login_container .card,
.o_login_auth .card {
    background:#0D1F16!important;
    border:1px solid #1A3B2A!important;
    border-radius:14px!important;
    box-shadow:0 4px 24px rgba(0,0,0,.4)!important;
}
.oe_login_form .card-header,
.o_login_auth .card-header {
    background:#102A1D!important;
    border-bottom:1px solid #1A3B2A!important;
    color:#E6F3F3!important;
    font-family:'Outfit',sans-serif!important;
    font-weight:600!important;
}

/* --- Form inputs --- */
.oe_login_form .form-control,
.o_login_auth .form-control,
.oe_website_login_container input[type="text"],
.oe_website_login_container input[type="password"],
.oe_website_login_container input[type="email"] {
    background:#0A1912!important;
    border:1px solid #1A3B2A!important;
    color:#E6F3F3!important;
    border-radius:10px!important;
    padding:12px 16px!important;
    font-size:.92rem!important;
    font-family:'Inter',sans-serif!important;
}
.oe_login_form .form-control::placeholder,
.o_login_auth .form-control::placeholder {
    color:#5A7A62!important;
}
.oe_login_form .form-control:focus,
.o_login_auth .form-control:focus {
    border-color:#20B967!important;
    box-shadow:0 0 0 3px rgba(32,185,103,.15)!important;
}
.oe_login_form .form-label,
.o_login_auth label {
    color:#8AAA94!important;
    font-family:'Inter',sans-serif!important;
    font-weight:500!important;
    font-size:.85rem!important;
}

/* --- Login button --- */
.oe_login_form .btn-primary,
.o_login_auth .btn-primary,
.oe_login_buttons .btn-primary,
.oe_website_login_container .btn-primary {
    font-family:'Outfit',sans-serif!important;
    font-weight:700!important;
    font-size:.95rem!important;
    padding:12px 28px!important;
    border-radius:10px!important;
    background:linear-gradient(135deg,#20B967,#16A34A)!important;
    color:#FFF!important;
    border:none!important;
    transition:all .2s ease!important;
    box-shadow:0 4px 16px rgba(32,185,103,.25)!important;
}
.oe_login_form .btn-primary:hover,
.o_login_auth .btn-primary:hover {
    background:linear-gradient(135deg,#28C972,#1DAC5E)!important;
    transform:translateY(-1px)!important;
    box-shadow:0 6px 24px rgba(32,185,103,.35)!important;
}

/* --- Login links --- */
.oe_login_form .btn-link,
.o_login_auth a:not(.btn-primary) {
    color:#20B967!important;
}
.oe_login_form .btn-link:hover,
.o_login_auth a:not(.btn-primary):hover {
    color:#28C972!important;
}

/* --- Login page text --- */
.oe_website_login_container,
.o_login_auth {
    color:#8AAA94!important;
    font-family:'Inter',sans-serif!important;
}

/* --- Divider --- */
.oe_login_form hr,
.o_login_auth hr {
    border-color:#1A3B2A!important;
}

/* ============================================
   HOMEPAGE → SHOP CARD CONSISTENCY
   ============================================ */

/* Make homepage game cards match shop cards */
.jj-game-card {
    background:#0D1F16!important;
    border:1px solid #1A3B2A!important;
    border-radius:12px!important;
    overflow:hidden!important;
    transition:all .3s cubic-bezier(.25,.46,.45,.94)!important;
}
.jj-game-card:hover {
    border-color:#20B967!important;
    box-shadow:0 6px 28px rgba(32,185,103,.15)!important;
    transform:translateY(-4px)!important;
    background:#102A1D!important;
}
.jj-game-card img {
    width:100%!important;
    height:180px!important;
    object-fit:cover!important;
    border-bottom:1px solid #1A3B2A!important;
    transition:transform .4s ease!important;
}
.jj-game-card:hover img {
    transform:scale(1.05)!important;
}
.jj-game-card-body {
    padding:16px!important;
}
.jj-game-card-body h4 {
    font-family:'Outfit',sans-serif!important;
    font-weight:600!important;
    font-size:.95rem!important;
    color:#E6F3F3!important;
}
.jj-game-card-body p {
    font-family:'Inter',sans-serif!important;
    font-size:.82rem!important;
    color:#709878!important;
}

/* Stagger entrance for homepage game cards */
.jj-game-card:nth-child(1){animation:casinoCardIn .5s ease .05s both}
.jj-game-card:nth-child(2){animation:casinoCardIn .5s ease .12s both}
.jj-game-card:nth-child(3){animation:casinoCardIn .5s ease .19s both}

/* --- CTA section consistency --- */
.jj-cta-content {
    background:#0D1F16!important;
    border:1px solid #1A3B2A!important;
}
/* === BACKEND RESET === *//* === CASINO PORTAL — Matching reference design === */

/* PAGE BACKGROUND */
#wrapwrap:has(.o_portal) { background: #0C281A !important; }
#wrap.o_portal_wrap { background: transparent !important; }
.o_portal_wrap { background: transparent !important; }
.o_portal_content { background: transparent !important; }

/* ---- SIDEBAR ---- */
.o_portal_wrap .list-group {
    background: #102F20;
    border-radius: 13px !important;
    border: 1px solid #1C5C3C;
    overflow: hidden;
}
.o_portal_wrap .list-group-item {
    background: #102F20 !important;
    border: none !important;
    border-bottom: 1px solid #1A4A30 !important;
    padding: 13px 18px;
    font-size: .9rem;
    font-weight: 500;
    color: #8AAA94 !important;
    transition: background .12s;
}
.o_portal_wrap .list-group-item:hover {
    background: #173B29 !important;
    color: #C5DCC8 !important;
}
.o_portal_wrap .list-group-item.active {
    background: #1C5C3C !important;
    color: #FFF !important;
    font-weight: 700;
    box-shadow: inset 3px 0 0 #278B53;
}
.o_portal_wrap .list-group-item.bg-primary,
.o_portal_wrap .list-group-item.bg-info,
.o_portal_wrap .list-group-item.bg-success,
.o_portal_wrap .list-group-item[class*="bg-"] {
    background: #102F20 !important;
    color: #8AAA94 !important;
}
.o_portal_wrap .list-group-item.bg-primary.active,
.o_portal_wrap .list-group-item.bg-info.active,
.o_portal_wrap .list-group-item.bg-success.active,
.o_portal_wrap .list-group-item[class*="bg-"].active {
    background: #1C5C3C !important;
    color: #FFF !important;
}

/* ---- CARDS — flat, border-only ---- */
.o_portal .card {
    background: #102F20 !important;
    border: 1px solid #1C5C3C !important;
    border-radius: 13px !important;
    box-shadow: none !important;
    margin-bottom: 1.5rem;
}
.o_portal .card-header {
    background: #173B29 !important;
    color: #E7F4F4 !important;
    border-bottom: 1px solid #227742 !important;
    padding: 14px 20px;
    font-weight: 700;
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.o_portal .card-header.bg-primary,
.o_portal .card-header.bg-info,
.o_portal .card-header.bg-success,
.o_portal .card-header.bg-o-color-1,
.o_portal .card-header.bg-o-color-2,
.o_portal .card-header.bg-o-color-3,
.o_portal .card-header.bg-o-color-4,
.o_portal .card-header.bg-o-color-5,
.o_portal .card-header[class*="bg-"] {
    background: #173B29 !important;
    color: #E7F4F4 !important;
}
.o_portal .card-body {
    background: #102F20 !important;
    color: #D9EEEE !important;
    padding: 20px;
}

/* ---- TYPOGRAPHY ---- */
.o_portal_my_home h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #E6F3F3;
    margin-bottom: 1rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid #1C5C3C;
}
.o_portal h2 { font-size: 1.3rem; font-weight: 700; color: #E6F3F3; }
.o_portal h3 { font-size: 1.1rem; font-weight: 600; color: #D9EEEE; }
.o_portal h4 { font-size: 1rem; font-weight: 600; color: #C0D4C4; }
.o_portal p { color: #C0D4C4; }
.o_portal strong { color: #E6F3F3; }
.o_portal .text-muted { color: #4B7770 !important; }
.o_portal hr { border-color: #1C5C3C; opacity: 1; }

/* ---- INPUTS — LIGHT fill, blue-gray border (matching reference) ---- */
.o_portal .form-control,
.o_portal input[type="text"],
.o_portal input[type="number"],
.o_portal input[type="email"],
.o_portal input[type="password"],
.o_portal input[type="tel"],
.o_portal select,
.o_portal textarea {
    background: #F3F5F5 !important;
    border: 2px solid #66758C !important;
    border-radius: 8px !important;
    padding: 10px 14px;
    font-size: .93rem;
    color: #4A5555 !important;
}
.o_portal .form-control::placeholder,
.o_portal input::placeholder,
.o_portal textarea::placeholder {
    color: #5D7775;
    font-size: .93rem;
}
.o_portal .form-control:focus,
.o_portal input:focus,
.o_portal select:focus,
.o_portal textarea:focus {
    border-color: #20B967 !important;
    box-shadow: 0 0 0 3px rgba(32,185,103,.2) !important;
    outline: none;
    background: #FFF !important;
}
.o_portal label {
    font-weight: 600;
    color: #A0C0A8;
    font-size: .85rem;
}
.o_portal .input-group-text {
    background: #173B29 !important;
    border-color: #227742 !important;
    color: #B7D9D0 !important;
}

/* ---- BUTTONS — bright emerald green (matching reference) ---- */
.o_portal .btn {
    font-weight: 700;
    font-size: .9rem;
    padding: 10px 22px;
    border-radius: 8px;
    transition: all .12s ease;
}
/* Primary, Success, Submit = emerald green */
.o_portal .btn-primary,
.o_portal .btn-success,
.o_portal .o_withdrawal_submit {
    background: linear-gradient(135deg,#20B967,#1A9E55) !important;
    border: none !important;
    color: #FFF !important;
    box-shadow: 0 2px 8px rgba(32,185,103,.35);
}
.o_portal .btn-primary:hover,
.o_portal .btn-success:hover,
.o_portal .o_withdrawal_submit:hover {
    background: linear-gradient(135deg,#28C972,#1DAC5E) !important;
    box-shadow: 0 4px 14px rgba(32,185,103,.45);
}
/* Warning */
.o_portal .btn-warning {
    background: rgba(229,158,51,.15) !important;
    border: 1.5px solid #E59E33 !important;
    color: #E59E33 !important;
}
/* Danger */
.o_portal .btn-danger {
    background: rgba(220,53,69,.15) !important;
    border: 1.5px solid #DC3545 !important;
    color: #E8707A !important;
}
/* Outline / Secondary */
.o_portal .btn-outline-secondary,
.o_portal .btn-outline-primary,
.o_portal .btn-secondary {
    background: transparent !important;
    border: 1.5px solid #1C5C3C !important;
    color: #A0C0A8 !important;
}
.o_portal .btn-outline-secondary:hover,
.o_portal .btn-outline-primary:hover,
.o_portal .btn-secondary:hover {
    background: #173B29 !important;
    border-color: #20B967 !important;
    color: #FFF !important;
}
.o_portal .btn-sm {
    font-size: .82rem;
    padding: 7px 16px;
}

/* ---- TABLES — clean, no zebra, flat (matching reference) ---- */
.o_portal table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .9rem;
    border: 1px solid #1E6040;
    border-radius: 11px;
    overflow: hidden;
}
.o_portal thead th {
    background: #183C2A !important;
    color: #B7D9D0 !important;
    font-weight: 700 !important;
    font-size: .75rem !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    padding: 14px 17px !important;
    border-bottom: 1px solid #246B43 !important;
    text-align: left;
}
.o_portal thead th.bg-primary,
.o_portal thead th.bg-info,
.o_portal thead th.bg-success,
.o_portal thead th[class*="bg-"] {
    background: #183C2A !important;
    color: #B7D9D0 !important;
}
.o_portal tbody td {
    padding: 14px 17px;
    border-bottom: 1px solid #1A4A30;
    color: #D9EEEE;
    background: #0D291A;
    font-size: .9rem;
}
.o_portal tbody tr:last-child td { border-bottom: none; }
.o_portal tbody tr:hover td { background: #143022 !important; }

/* ---- BALANCE BADGE — clean green (matching reference) ---- */
.o_portal .badge {
    font-weight: 700;
    font-size: .78rem;
    padding: 6px 14px;
    border-radius: 20px;
    background: #1C5C3C;
    color: #E6F3F3;
}
.o_portal .badge.bg-success,
.o_portal .badge.badge-success,
.o_portal span.badge[class*="success"] {
    background: #20B967 !important;
    color: #FFF !important;
    box-shadow: 0 1px 4px rgba(32,185,103,.3);
}
.o_portal .badge.bg-info,
.o_portal .badge.badge-info {
    background: rgba(56,160,220,.2) !important;
    color: #60B0E0 !important;
}
.o_portal .badge.bg-warning,
.o_portal .badge.badge-warning {
    background: rgba(229,158,51,.2) !important;
    color: #E59E33 !important;
}
.o_portal .badge.bg-danger {
    background: rgba(220,53,69,.2) !important;
    color: #E8707A !important;
}

/* ---- ALERTS — plain style (no colored box), just subtle left border ---- */
.o_portal .alert {
    background: transparent !important;
    border: none !important;
    border-left: 3px solid #1C5C3C !important;
    border-radius: 0 !important;
    padding: 8px 14px;
    font-size: .82rem;
    color: #4B7770 !important;
}
.o_portal .alert-warning { border-left-color: #E59E33 !important; color: #C8A060 !important; }
.o_portal .alert-info { border-left-color: #38A0DC !important; color: #60B0E0 !important; }
.o_portal .alert-danger { border-left-color: #DC3545 !important; color: #E8707A !important; }
.o_portal .alert-success { border-left-color: #20B967 !important; color: #4ADE80 !important; }

/* ---- PAGINATION ---- */
.o_portal .pagination { gap: 3px; }
.o_portal .page-link {
    background: #102F20;
    border: 1px solid #1C5C3C;
    border-radius: 7px;
    color: #8AAA94;
    font-weight: 500;
    padding: 7px 13px;
    font-size: .85rem;
}
.o_portal .page-link:hover { background: #173B29; color: #FFF; }
.o_portal .page-item.active .page-link {
    background: #1C5C3C;
    border-color: #1C5C3C;
    color: #FFF;
}

/* ---- MODALS ---- */
.o_portal .modal-content {
    background: #102F20;
    border: 1px solid #1C5C3C;
    border-radius: 13px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.o_portal .modal-header { border-bottom: 1px solid #1C5C3C; color: #E6F3F3; }
.o_portal .modal-body { color: #D9EEEE; }
.o_portal .modal-footer { border-top: 1px solid #1C5C3C; }

/* ---- NAV TABS ---- */
.o_portal .nav-tabs { border-bottom: 1px solid #1C5C3C; }
.o_portal .nav-tabs .nav-link {
    color: #709878; font-weight: 500; padding: 9px 16px; border: none; font-size: .88rem;
}
.o_portal .nav-tabs .nav-link:hover { color: #FFF; background: #173B29; }
.o_portal .nav-tabs .nav-link.active {
    background: #102F20;
    color: #20B967;
    border-bottom: 2px solid #20B967;
}

/* ---- PORTAL NAV CARDS (on /my homepage) ---- */
.o_portal_my_home_item a,
.o_portal_docs a {
    display: block;
    background: #102F20;
    border: 1px solid #1C5C3C;
    border-radius: 13px;
    padding: 24px 20px;
    text-decoration: none !important;
    transition: all .15s ease;
    box-shadow: none !important;
}
.o_portal_my_home_item a:hover,
.o_portal_docs a:hover {
    background: #173B29;
    border-color: #20B967;
    transform: none;
}
.o_portal_my_home_item a strong,
.o_portal_docs a strong {
    display: block;
    color: #E6F3F3;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 5px;
}
.o_portal_my_home_item a small,
.o_portal_docs a small {
    display: block;
    color: #8AAA94;
    font-size: .8rem;
    line-height: 1.35;
}
.o_portal_my_home_item a[href*="club-support"] { border-left: 3px solid #38A0DC; }
.o_portal_my_home_item a[href*="/my/home"] { border-left: 3px solid #20B967; }

/* ---- CLUB SUPPORT PAGE ---- */
body:has(a.nav-link.active[href="/my/club-support"]) #wrapwrap {
    background: #0C281A !important;
}
body:has(a.nav-link.active[href="/my/club-support"]) #wrapwrap .card {
    background: #102F20 !important;
    border: 1px solid #1C5C3C !important;
    border-radius: 13px !important;
    box-shadow: none !important;
    margin-bottom: 1rem;
}
body:has(a.nav-link.active[href="/my/club-support"]) #wrapwrap .card:hover {
    background: #173B29 !important;
    border-color: #20B967 !important;
}
body:has(a.nav-link.active[href="/my/club-support"]) #wrapwrap .card-body {
    background: #102F20 !important;
    color: #D9EEEE !important;
}
body:has(a.nav-link.active[href="/my/club-support"]) #wrapwrap .btn-primary {
    background: linear-gradient(135deg,#20B967,#1A9E55);
    border: none;
    color: #FFF;
}
body:has(a.nav-link.active[href="/my/club-support"]) #wrapwrap h2 {
    color: #E6F3F3;
    font-weight: 700;
    border-bottom: 1px solid #1C5C3C;
    padding-bottom: .5rem;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
    .o_portal .card-body { padding: 14px; }
    .o_portal table { font-size: .82rem; }
    .o_portal thead th,
    .o_portal tbody td { padding: 10px 12px; }
    .o_portal_my_home_item a { padding: 16px 14px; }
}

body:not(:has(#wrapwrap)),html:not(:has(#wrapwrap)){background:#f1f1f3!important}
body:not(:has(#wrapwrap))::before{display:none!important;content:none!important}
body:not(:has(#wrapwrap)) #jj-particles{display:none!important}

/* === GAME CARD IMG Z-INDEX === */
.jj-games-section img,.jj-game-card img,.jj-game-card,.jj-hero img,.jj-hero-banner-wrapper img,.jj-cta img,.oe_website_sale .oe_product_image img,.oe_website_sale .oe_product_cart,.carousel,.s_image_gallery{position:relative;z-index:1}

/* === RESPONSIVE === */
@media(max-width:991px){
.jj-hero-line2{font-size:2.2rem}
.jj-game-cards{flex-wrap:wrap}
.jj-game-card{flex:0 1 calc(50% - 8px);min-width:200px}
.oe_website_login_container .oe_login_form{margin:20px 12px!important;padding:28px 20px!important}
}
@media(max-width:768px){
.jj-hero-line2{font-size:1.8rem}
.jj-hero-line1{font-size:.95rem}
.jj-hero-sub{font-size:.85rem}
.jj-btn-hero-primary,.jj-btn-hero-secondary{padding:12px 24px!important;font-size:.9rem!important}
.jj-game-card{flex:0 1 100%;max-width:360px;margin:0 auto}
.jj-game-cards{gap:12px;flex-wrap:wrap}
.jj-cta-content{padding:24px 18px}
.jj-cta-content h2{font-size:1.5rem}
.jj-hero-features{gap:10px;padding:16px 8px 0}
.jj-feat{padding:12px 14px;font-size:.8rem;min-width:150px}
.jj-feat-icon{width:36px;height:36px}
.jj-feat-icon svg{width:18px;height:18px}
}
@media(max-width:390px){
.jj-hero-line2{font-size:1.6rem}
.jj-hero-line1{font-size:.85rem}
.jj-btn-hero-primary,.jj-btn-hero-secondary{padding:.7rem 1.25rem!important;font-size:.8rem!important}
}

/* ═══════════════════════════════════════════════
   SHOP PAGE — COMPREHENSIVE (v=27)
   ═══════════════════════════════════════════════ */
.oe_website_sale #wrapwrap>main{position:relative;z-index:1}
.oe_website_sale .container.oe_website_sale{background:transparent!important;padding-top:20px!important}
/* Product grid cards */
.oe_product_cart{border-radius:16px!important;overflow:hidden!important;transition:all .3s ease!important}
.oe_product_cart:hover{transform:translateY(-6px)!important;box-shadow:0 16px 48px rgba(255,255,255,.5),0 0 0 1px rgba(46,204,113,.25)!important}
/* Product image area */
.oe_product_image{padding:12px 12px 0!important;background:transparent!important}
.oe_product_image img{border-radius:14px!important;transition:transform .4s ease!important}
.oe_product:hover .oe_product_image img{transform:scale(1.06)!important}
/* Product info area */
.o_wsale_product_information{background:rgba(255,255,255,.05)!important;border:1px solid rgba(46,204,113,.12)!important;border-radius:0 0 14px 14px!important;padding:16px!important;margin:0!important}
.o_wsale_product_information_text{padding:0!important}
.o_wsale_products_item_title,.o_wsale_products_item_title a{font-family:'Inter',sans-serif!important;font-weight:700!important;font-size:1rem!important;color:#fff!important;line-height:1.3!important}
.oe_subdescription,.oe_subdescription span,.text-muted{color:rgba(255,255,255,.5)!important;font-family:'Inter',sans-serif!important;font-size:.8rem!important}
/* Price */
.o_wsale_product_information .text-primary,.o_wsale_product_information .oe_price,.oe_price{color:#2ecc71!important;font-family:'Inter',sans-serif!important;font-weight:700!important;font-size:1.05rem!important}

/* ===== v=50 ODOO 18 SHOP CSS — targeting .oe_product, .o_wsale_ classes ===== */

/* Product grid card — glass-morphism on dark bg */
.oe_product{
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(46,204,113,.18) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  transition: transform .2s, box-shadow .2s, border-color .2s !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important
}
.oe_product:hover{
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(46,204,113,.2) !important;
  border-color: rgba(46,204,113,.4) !important
}

/* Product grid wrapper */
.o_wsale_product_grid_wrapper{
  display: flex ;
  flex-direction: column ;
  height: 100% ;
  padding: 0 ;
  background: transparent 
}

/* Product image area */
.oe_product_image{
  border-radius: 14px 14px 0 0 ;
  overflow: hidden ;
  aspect-ratio: 16/10 ;
  background: rgba(255,255,255,.3) 
}
.oe_product_image img{
  object-fit: cover ;
  transition: transform .3s 
}
.oe_product:hover .oe_product_image img{
  transform: scale(1.05) !important
}

/* Product info text area */
.o_wsale_product_information{
  padding: 1.125rem ;
  flex: 1 1 auto ;
  display: flex ;
  flex-direction: column 
}

/* Product title */
.o_wsale_products_item_title{
  font-family: Inter, sans-serif ;
  font-weight: 700 ;
  font-size: 1.05rem ;
  margin-bottom: 0.375rem ;
  line-height: 1.3 
}
.o_wsale_products_item_title a{
  color: #f0fdf4 ;
  text-decoration: none ;
  transition: color .2s 
}
.o_wsale_products_item_title a:hover{
  color: #2ecc71 
}

/* Product subtitle/description */
.oe_subdescription{
  font-family: Inter, sans-serif ;
  color: #94a3b8 ;
  font-size: .82rem ;
  line-height: 1.4 ;
  margin-bottom: 12px 
}

/* Product cart form — bottom-aligned */
.oe_product_cart{
  flex: 1 1 auto ;
  display: flex ;
  flex-direction: column ;
  justify-content: space-between 
}

/* Product ribbon badge */
.o_ribbon{
  z-index: 2 ;
  font-family: Inter, sans-serif ;
  font-weight: 700 
}

/* ===== SHOP FILTERS / SIDEBAR ===== */
.o_wsale_products_grid_before_rail{
  background: rgba(8,20,14,.6) ;
  border-right: 1px solid rgba(46,204,113,.12) ;
  color: #d1fae5 ;
  font-family: Inter, sans-serif ;
  border-radius: 0 0 0 14px 
}
.o_wsale_products_grid_before_rail .list-group-item{
  background: transparent ;
  color: #d1fae5 ;
  border-color: rgba(46,204,113,.1) ;
  font-family: Inter, sans-serif ;
  transition: background .2s 
}
.o_wsale_products_grid_before_rail .list-group-item:hover{
  background: rgba(46,204,113,.1) ;
  color: #fff 
}
.o_wsale_products_grid_before_rail .list-group-item.active{
  background: #2ecc71 ;
  color: #fff ;
  border-color: #2ecc71 ;
  font-weight: 700 
}

/* ===== SHOP SEARCH BAR ===== */
.o_wsale_products_searchbar_form input{
  background: rgba(255,255,255,.92) ;
  border: 2px solid #64748b ;
  border-radius: 8px ;
  color: #0f172a ;
  font-family: Inter, sans-serif ;
  padding: 10px 16px 
}
.o_wsale_products_searchbar_form input:focus{
  border-color: #2ecc71 ;
  box-shadow: 0 0 0 4px rgba(46,204,113,.2) 
}
.o_wsale_products_searchbar_form button{
  background: linear-gradient(135deg, #2ecc71, #1e8449) ;
  color: #fff ;
  border: none ;
  border-radius: 0 8px 8px 0 
}

/* ===== SHOP SORT / LAYOUT BUTTONS ===== */
.products_header .btn,
.o_wsale_apply_layout .btn{
  background: rgba(255,255,255,.1) ;
  color: #d1fae5 ;
  border: 1px solid rgba(46,204,113,.15) ;
  border-radius: 8px ;
  font-family: Inter, sans-serif ;
  transition: background .2s 
}
.products_header .btn:hover,
.o_wsale_apply_layout .btn:hover{
  background: rgba(46,204,113,.15) ;
  color: #fff 
}
.products_header .btn.active,
.o_wsale_apply_layout .btn.active{
  background: #2ecc71 ;
  color: #fff ;
  border-color: #2ecc71 
}

/* ===== SHOP PAGINATION ===== */
.o_pager .page-link{
  color: #d1fae5 ;
  background: rgba(255,255,255,.05) ;
  border: 1px solid rgba(46,204,113,.12) ;
  font-family: Inter, sans-serif 
}
.o_pager .page-item.active .page-link{
  background: #2ecc71 ;
  color: #fff ;
  border-color: #2ecc71 
}

/* ===== SHOP MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
  .oe_product{
    border-radius: 10px !important
  }
  .o_wsale_product_information{
    padding: 12px 
  }
}

/* ===== SHOP: Price display ===== */
.oe_product .oe_price,
.oe_product .text-muted,
.o_wsale_product_information_text .text-muted{
  color: #94a3b8 !important;
  font-family: Inter, sans-serif !important
}
.oe_product .badge{
  font-family: Inter, sans-serif !important;
  border-radius: 20px !important;
  padding: 4px 0.625rem !important
}

/* ---- ALL CARD BODIES: white bg, dark text ---- */
.card-body,
[class*="card-body"],
.panel-body,
[class*="panel-body"],
.tab-pane.active,
.tab-pane.fade.show,
.tab-pane.fade.in,
.tab-content > .active{
  background: #ffffff ;
  color: #0f172a ;
  padding: 1.500rem ;
  font-family: Inter, sans-serif ;
}

/* ---- ALL CARDS/PANELS: white rounded with shadow ---- */
.card,
.panel,
[class*="o_card"]{
  background: #ffffff ;
  border-radius: 12px ;
  border: 2px solid #e2e8f0 ;
  box-shadow: 0 4px 20px rgba(255,255,255,.12) ;
  overflow: hidden ;
  margin-bottom: 1.250rem ;
}

/* ---- ALL casino form containers: translucent card on dark bg ---- */
[id$="_form"].tab-pane,
[id$="_form"].active,
div[id$="_form"]{
  background: rgba(8,28,18,.72) ;
  border-radius: 14px ;
  padding: 1.750rem ;
  border: 1px solid rgba(46,204,113,.18) ;
  box-shadow: 0 8px 32px rgba(255,255,255,.3) ;
}

/* ---- FORM-SPECIFIC ID selectors for each section ---- */

/* Depositar */
#depositar_form,
#depositar_form *{
  font-family: Inter, sans-serif ;
}
#depositar_form .card-header,
#depositar_form [class*="card-header"],
#depositar_form [class*="bg-primary"]{
  background: linear-gradient(135deg, #2ecc71, #1e8449) !important;
  color: #fff !important;
  font-weight: 700 !important;
}
#depositar_form .card-body,
#depositar_form [class*="card-body"]{
  background: #ffffff ;
  color: #0f172a ;
}
#depositar_form input,
#depositar_form .form-control{
  border: 2px solid #64748b !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  padding: 0.625rem 0.875rem !important;
}
#depositar_form input:focus,
#depositar_form .form-control:focus{
  border-color: #2ecc71 !important;
  box-shadow: 0 0 0 4px rgba(46,204,113,.2) !important;
}
#depositar_form button,
#depositar_form .btn-success,
#depositar_form .btn-primary{
  background: linear-gradient(135deg, #2ecc71, #1e8449) ;
  color: #fff ;
  border: none ;
  border-radius: 8px ;
  font-weight: 700 ;
  padding: 0.750rem 1.750rem ;
  box-shadow: 0 4px 14px rgba(46,204,113,.35) ;
}
#depositar_form table th{
  background: #1e293b ;
  color: #fff ;
  text-transform: uppercase ;
  font-size: .78rem ;
  letter-spacing: .05em ;
  padding: 0.625rem 0.875rem ;
}
#depositar_form table td{
  color: #0f172a ;
  background: #fff ;
  border-bottom: 1px solid #e2e8f0 ;
  padding: 0.500rem 0.875rem ;
}

/* Retirar */
#retirar_form,
#retirar_form *{
  font-family: Inter, sans-serif ;
}
#retirar_form .card-header,
#retirar_form [class*="card-header"]{
  background: linear-gradient(135deg, #2ecc71, #1e8449) ;
  color: #fff ;
  font-weight: 700 ;
}
#retirar_form .card-body,
#retirar_form [class*="card-body"]{
  background: #ffffff ;
  color: #0f172a ;
}
#retirar_form .card,
#retirar_form [class*="method"]{
  background: #fff ;
  border: 2px solid #e2e8f0 ;
  border-radius: 12px ;
  padding: 1rem ;
  text-align: center ;
  cursor: pointer ;
  transition: border-color .2s, transform .15s ;
}
#retirar_form .card:hover,
#retirar_form [class*="method"]:hover{
  border-color: #2ecc71 ;
  transform: translateY(-2px) ;
}
#retirar_form table th{
  background: #1e293b ;
  color: #fff ;
  text-transform: uppercase ;
  font-size: .78rem ;
  letter-spacing: .05em ;
  padding: 0.625rem 0.875rem ;
}
#retirar_form table td{
  color: #0f172a ;
  background: #fff ;
  border-bottom: 1px solid #e2e8f0 ;
}

/* Registrar Bonus */
#registrar_bonus_form,
#registrar_bonus_form *{
  font-family: Inter, sans-serif ;
}
#registrar_bonus_form .card-header,
#registrar_bonus_form [class*="card-header"]{
  background: linear-gradient(135deg, #2ecc71, #1e8449) ;
  color: #fff ;
  font-weight: 700 ;
}
#registrar_bonus_form .card-body,
#registrar_bonus_form [class*="card-body"]{
  background: #ffffff ;
  color: #0f172a ;
}
#registrar_bonus_form input,
#registrar_bonus_form .form-control{
  border: 2px solid #64748b !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #0f172a !important;
  padding: 0.625rem 0.875rem !important;
}
#registrar_bonus_form input:focus{
  border-color: #2ecc71 ;
  box-shadow: 0 0 0 4px rgba(46,204,113,.2) ;
}
#registrar_bonus_form button{
  background: linear-gradient(135deg, #2ecc71, #1e8449) ;
  color: #fff ;
  border: none ;
  border-radius: 8px ;
  font-weight: 700 ;
  padding: 0.750rem 1.750rem ;
  box-shadow: 0 4px 14px rgba(46,204,113,.35) ;
}

/* Movimientos */
#movimientos_form,
#movimientos_form *{
  font-family: Inter, sans-serif ;
}
#movimientos_form .card-header{
  background: linear-gradient(135deg, #2ecc71, #1e8449) ;
  color: #fff ;
}
#movimientos_form .card-body{
  background: #ffffff ;
  color: #0f172a ;
}
#movimientos_form table th{
  background: #1e293b ;
  color: #fff ;
  text-transform: uppercase ;
  font-size: .78rem ;
  letter-spacing: .05em ;
  padding: 0.625rem 0.875rem ;
}
#movimientos_form table td{
  color: #0f172a ;
  background: #fff ;
  border-bottom: 1px solid #e2e8f0 ;
  padding: 0.500rem 0.875rem ;
}
#movimientos_form tbody tr:hover td{
  background: #f0fdf4 ;
}

/* Medios de Pago */
#medios_pagos_form,
#medios_pagos_form *{
  font-family: Inter, sans-serif ;
}
#medios_pagos_form .card-header{
  background: linear-gradient(135deg, #2ecc71, #1e8449) ;
  color: #fff ;
}
#medios_pagos_form .card-body{
  background: #ffffff ;
  color: #0f172a ;
}
#medios_pagos_form table th{
  background: #1e293b ;
  color: #fff ;
  text-transform: uppercase ;
  font-size: .78rem ;
  letter-spacing: .05em ;
  padding: 0.625rem 0.875rem ;
}
#medios_pagos_form table td{
  color: #0f172a ;
  background: #fff ;
  border-bottom: 1px solid #e2e8f0 ;
}
#medios_pagos_form input[type="checkbox"]{
  width: 1.250rem ;
  height: 1.250rem ;
  accent-color: #2ecc71 ;
}
#medios_pagos_form button{
  background: linear-gradient(135deg, #2ecc71, #1e8449) ;
  color: #fff ;
  border: none ;
  border-radius: 8px ;
  font-weight: 700 ;
  padding: 0.750rem 1.750rem ;
}

/* Mis Límites */
#mis_limites_form,
#mis_limites_form *{
  font-family: Inter, sans-serif ;
}
#mis_limites_form .card-header{
  background: linear-gradient(135deg, #2ecc71, #1e8449) ;
  color: #fff ;
}
#mis_limites_form .card-body{
  background: #ffffff ;
  color: #0f172a ;
}
#mis_limites_form input,
#mis_limites_form .form-control{
  border: 2px solid #64748b !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #0f172a !important;
}
#mis_limites_form table th{
  background: #1e293b ;
  color: #fff ;
  text-transform: uppercase ;
  font-size: .78rem ;
  letter-spacing: .05em ;
}
#mis_limites_form table td{
  color: #0f172a ;
  background: #fff ;
  border-bottom: 1px solid #e2e8f0 ;
}

/* Datos Bancarios */
#datos_bancarios_form,
#datos_bancarios_form *{
  font-family: Inter, sans-serif ;
}
#datos_bancarios_form .card-header{
  background: linear-gradient(135deg, #2ecc71, #1e8449) ;
  color: #fff ;
}
#datos_bancarios_form .card-body{
  background: #ffffff ;
  color: #0f172a ;
}
#datos_bancarios_form input,
#datos_bancarios_form .form-control{
  border: 2px solid #64748b !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #0f172a !important;
  padding: 0.625rem 0.875rem !important;
}
#datos_bancarios_form input:focus{
  border-color: #2ecc71 ;
  box-shadow: 0 0 0 4px rgba(46,204,113,.2) ;
}
#datos_bancarios_form button,
#datos_bancarios_form .btn-success{
  background: linear-gradient(135deg, #2ecc71, #1e8449) ;
  color: #fff ;
  border: none ;
  border-radius: 8px ;
  font-weight: 700 ;
  padding: 0.750rem 1.750rem ;
  box-shadow: 0 4px 14px rgba(46,204,113,.35) ;
}

/* ---- GLOBAL INPUT FIX: any input anywhere in a card body ---- */
.card-body input,
.card-body select,
.card-body textarea,
.card-body .form-control{
  border: 2px solid #94a3b8 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  font-family: Inter, sans-serif !important;
}
.card-body input:focus,
.card-body select:focus,
.card-body textarea:focus,
.card-body .form-control:focus{
  border-color: #2ecc71 !important;
  box-shadow: 0 0 0 4px rgba(46,204,113,.2) !important;
}

/* ---- BADGES global ---- */
.badge-success,
.badge[class*="Aprobado"],
.badge[class*="approved"]{
  background: #22c55e !important;
  color: #fff !important;
  border-radius: 20px !important;
  padding: 4px 0.750rem !important;
  font-weight: 600 !important;
}
.badge-warning,
.badge[class*="Pendiente"],
.badge[class*="pending"]{
  background: #f59e0b !important;
  color: #0f172a !important;
  border-radius: 20px !important;
  padding: 4px 0.750rem !important;
  font-weight: 600 !important;
}
.badge-danger,
.badge[class*="Rechazado"],
.badge[class*="rejected"]{
  background: #ef4444 !important;
  color: #fff !important;
  border-radius: 20px !important;
  padding: 4px 0.750rem !important;
  font-weight: 600 !important;
}

/* === CASINO BADGES — v=62 === */
.jj-casino-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    padding: 4px 12px;
    border-radius: 4px;
    pointer-events: none;
    line-height: 1.4;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    animation: badgeSlideIn .4s cubic-bezier(.25,.46,.45,.94) both;
}
@keyframes badgeSlideIn {
    from { opacity: 0; transform: translateX(-12px); }
    to { opacity: 1; transform: translateX(0); }
}

/* NUEVO — cyan/electric blue */
.jj-casino-badge--nuevo {
    background: linear-gradient(135deg, #00B4D8, #0077B6);
    color: #FFF;
}

/* POPULAR — gold/amber */
.jj-casino-badge--popular {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: #FFF;
}

/* LIVE — red with pulsing indicator dot */
.jj-casino-badge--live {
    background: linear-gradient(135deg, #DC2626, #B91C1C);
    color: #FFF;
    padding-left: 24px;
}
.jj-casino-badge--live::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    background: #FFF;
    border-radius: 50%;
    animation: livePulse 1.4s ease-in-out infinite;
}
@keyframes livePulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 4px 2px rgba(255,255,255,.6); }
    50% { opacity: .4; box-shadow: 0 0 2px 1px rgba(255,255,255,.2); }
}

/* OFFER / discount badge — green */
.jj-casino-badge--oferta {
    background: linear-gradient(135deg, #10B981, #059669);
    color: #FFF;
}


/* ============================================
   CASINO PROMO CAROUSEL — v=62
   Injected between hero and games section
   ============================================ */

.jj-promo-carousel {
    max-width: 1140px;
    margin: 48px auto 0;
    padding: 0 1rem;
    position: relative;
}

.jj-promo-carousel__viewport {
    overflow: hidden;
    border-radius: 18px;
    position: relative;
    box-shadow: 0 4px 24px rgba(0,0,0,.3);
    border: 1px solid rgba(32,185,103,.15);
}

.jj-promo-carousel__track {
    display: flex;
    transition: transform .55s cubic-bezier(.25,.46,.45,.94);
    will-change: transform;
}

.jj-promo-carousel__slide {
    flex: 0 0 100%;
    min-height: 260px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* Slide backgrounds */
.jj-promo-carousel__slide--tournament {
    background: linear-gradient(135deg, #0A1F14 0%, #0D2B1A 30%, #0B1F16 60%, #061410 100%);
}
.jj-promo-carousel__slide--bonus {
    background: linear-gradient(135deg, #0D1F16 0%, #142819 30%, #0A1A10 60%, #081610 100%);
}
.jj-promo-carousel__slide--newgame {
    background: linear-gradient(135deg, #081610 0%, #0D2B1A 30%, #0A1F14 60%, #061410 100%);
}
.jj-promo-carousel__slide--flash {
    background: linear-gradient(135deg, #0B1A12 0%, #122418 30%, #09180F 60%, #051210 100%);
}

/* Slide inner layout */
.jj-promo-carousel__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 40px 48px;
    position: relative;
    z-index: 1;
}

.jj-promo-carousel__text {
    flex: 1;
    max-width: 60%;
}

.jj-promo-carousel__tag {
    display: inline-block;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    padding: 4px 14px;
    border-radius: 4px;
    margin-bottom: 12px;
}
.jj-promo-carousel__tag--gold {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: #0A1F14;
}
.jj-promo-carousel__tag--green {
    background: linear-gradient(135deg, #10B981, #059669);
    color: #FFF;
}
.jj-promo-carousel__tag--cyan {
    background: linear-gradient(135deg, #06B6D4, #0891B2);
    color: #FFF;
}
.jj-promo-carousel__tag--red {
    background: linear-gradient(135deg, #EF4444, #DC2626);
    color: #FFF;
}

.jj-promo-carousel__title {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 2rem;
    color: #FFFFFF;
    line-height: 1.15;
    margin: 0 0 8px;
    letter-spacing: -.02em;
}
.jj-promo-carousel__title span {
    background: linear-gradient(135deg, #20B967, #34D87A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.jj-promo-carousel__subtitle {
    font-family: 'Inter', sans-serif;
    font-size: .9rem;
    color: rgba(255,255,255,.65);
    margin: 0 0 20px;
    line-height: 1.4;
}

.jj-promo-carousel__cta {
    display: inline-block;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 12px 28px;
    border-radius: 10px;
    background: linear-gradient(135deg, #1A8A4E, #20B967);
    color: #FFF;
    text-decoration: none;
    transition: all .25s ease;
    box-shadow: 0 4px 16px rgba(32,185,103,.25);
}
.jj-promo-carousel__cta:hover {
    background: linear-gradient(135deg, #20B967, #28C972);
    box-shadow: 0 6px 24px rgba(32,185,103,.4);
    transform: translateY(-2px);
}

/* Decorative element on the right */
.jj-promo-carousel__visual {
    flex: 0 0 auto;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.jj-promo-carousel__visual-icon {
    font-size: 4rem;
    filter: drop-shadow(0 4px 12px rgba(32,185,103,.4));
    position: relative;
    z-index: 1;
}
/* Glow ring */
.jj-promo-carousel__visual::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent, rgba(32,185,103,.3), transparent, rgba(242,182,20,.3), transparent);
    animation: ringSpin 8s linear infinite;
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
}
@keyframes ringSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.jj-promo-carousel__visual::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(32,185,103,.12) 0%, transparent 70%);
}

/* Dots */
.jj-promo-carousel__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}
.jj-promo-carousel__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all .3s ease;
}
.jj-promo-carousel__dot--active {
    background: #20B967;
    box-shadow: 0 0 8px rgba(32,185,103,.5);
    transform: scale(1.2);
}
.jj-promo-carousel__dot:hover {
    background: rgba(32,185,103,.5);
}

/* Glow accent lines */
.jj-promo-carousel__slide::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(32,185,103,.4), transparent);
    z-index: 2;
}
.jj-promo-carousel__slide::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(32,185,103,.2), transparent);
    z-index: 2;
}

/* Responsive */
@media (max-width: 768px) {
    .jj-promo-carousel { margin-top: 32px; }
    .jj-promo-carousel__viewport { border-radius: 14px; }
    .jj-promo-carousel__slide { min-height: 220px; }
    .jj-promo-carousel__inner { padding: 28px 24px; flex-direction: column; text-align: center; }
    .jj-promo-carousel__text { max-width: 100%; }
    .jj-promo-carousel__title { font-size: 1.4rem; }
    .jj-promo-carousel__visual { width: 100px; height: 100px; margin-top: 16px; }
    .jj-promo-carousel__visual-icon { font-size: 2.5rem; }
}


/* ============================================
   AUTH PAGES THEME — v=62
   /web/login · /club-support/register
   White card · Dark green bg · Casino luxury
   ============================================ */

/* === PAGE BACKGROUND — both auth pages === */
body:has(.oe_website_login_container),
body:has(.jj-form-panel),
body:has(#jj_register_form) {
    background: #08120D !important;
    min-height: 100vh;
}

/* === LOGIN PAGE =============================== */

.oe_website_login_container {
    max-width: 420px !important;
    margin: 60px auto !important;
    padding: 40px 36px !important;
    background: #FFFFFF !important;
    border: 1px solid #C8E6D8 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 32px rgba(0,0,0,.25) !important;
}

/* Title above form */
.oe_website_login_container h1,
.oe_website_login_container h3,
.oe_website_login_form h1 {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.5rem !important;
    color: #1D3326 !important;
    text-align: center !important;
    margin-bottom: 24px !important;
}

/* Show the form (Odoo hides it with d-none initially) */
.oe_login_form.d-none {
    display: block !important;
}

/* Labels */
.oe_login_form .form-label {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: .82rem !important;
    color: #1D3326 !important;
    margin-bottom: 6px !important;
}

/* Inputs */
.oe_login_form .form-control {
    font-family: 'Inter', sans-serif !important;
    font-size: .9rem !important;
    background: #F8FAF9 !important;
    border: 1.5px solid #C8E6D8 !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    color: #1A1A1A !important;
    transition: all .2s ease !important;
    box-shadow: none !important;
}
.oe_login_form .form-control:focus {
    border-color: #20B967 !important;
    box-shadow: 0 0 0 3px rgba(32,185,103,.15) !important;
    background: #FFFFFF !important;
    outline: none !important;
}
.oe_login_form .form-control::placeholder {
    color: #B0B8B2 !important;
}

/* Submit button */
.oe_login_buttons .btn-primary {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: .92rem !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    padding: 14px 28px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #1A8A4E, #20B967) !important;
    border: none !important;
    color: #FFF !important;
    width: 100% !important;
    transition: all .25s ease !important;
    box-shadow: 0 4px 16px rgba(32,185,103,.25) !important;
}
.oe_login_buttons .btn-primary:hover {
    background: linear-gradient(135deg, #20B967, #28C972) !important;
    box-shadow: 0 6px 24px rgba(32,185,103,.4) !important;
    transform: translateY(-2px) !important;
}

/* Forgot password link */
.oe_login_form .btn-link {
    font-family: 'Inter', sans-serif !important;
    color: #20B967 !important;
    text-decoration: none !important;
    font-size: .8rem !important;
    padding: 0 !important;
}
.oe_login_form .btn-link:hover {
    color: #28C972 !important;
    text-decoration: underline !important;
}

/* Register link */
.oe_login_form + p a,
.oe_login_form ~ p a {
    font-family: 'Inter', sans-serif !important;
    color: #20B967 !important;
    font-weight: 600 !important;
}