/* ============================================
   Oneclickzaveri — Complete Dark Theme Design System
   Matching React prototype index.css exactly
   ============================================ */

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

/* --- CSS Variables --- */
:root {
    --background: 270 30% 7%;
    --foreground: 210 40% 98%;
    --card: 270 30% 10%;
    --card-foreground: 210 40% 98%;
    --popover: 270 30% 5%;
    --popover-foreground: 210 40% 98%;
    --primary: 30 90% 55%;
    --primary-foreground: 0 0% 100%;
    --secondary: 45 100% 50%;
    --secondary-foreground: 0 0% 0%;
    --muted: 270 20% 15%;
    --muted-foreground: 240 5% 65%;
    --accent: 15 85% 60%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 270 20% 20%;
    --input: 270 20% 12%;
    --ring: 30 90% 55%;
    --radius: 0.75rem;

    /* Button Colors */
    --btn-primary-bg: linear-gradient(135deg, #fbbf24, #f97316);
    --btn-primary-text: #000000;
    --btn-secondary-bg: rgba(255, 255, 255, 0.1);
    --btn-secondary-text: #ffffff;
}

/* --- Reset & Base --- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body, html {
    font-family: 'Inter', sans-serif !important;
    scroll-behavior: smooth;
}

body {
    background-color: #0f172a !important;
    color: hsl(var(--foreground)) !important;
    overflow-x: hidden;
    background: radial-gradient(circle at 0% 0%, rgba(30, 27, 75, 0.4) 0%, transparent 50%),
                radial-gradient(circle at 100% 100%, rgba(15, 23, 42, 0.6) 0%, transparent 50%),
                linear-gradient(160deg, #0f172a 0%, #1e1b4b 100%) !important;
    background-attachment: fixed !important;
    min-height: 100vh;
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: hsl(270, 30%, 10%); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)));
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, hsl(30, 90%, 60%), hsl(45, 100%, 55%));
}

/* --- Utility Classes --- */
.text-primary { color: hsl(var(--primary)) !important; }
.text-warning { color: #f59e0b !important; }
.text-success { color: #10b981 !important; }
.text-danger { color: #ef4444 !important; }
.text-info { color: #0ea5e9 !important; }
.text-secondary { color: #a855f7 !important; }

.text-gradient {

    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-rose {
    background: linear-gradient(to right, #fb7185, #f472b6, #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bg-dark-card {
    background-color: hsl(var(--card)) !important;
    border: 1px solid hsl(var(--border)) !important;
}

.glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.glass-card:hover {
    border-color: rgba(251, 191, 36, 0.3);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* --- Buttons --- */
.btn-gradient {
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)));
    color: #000 !important;
    font-weight: 700;
    border: none;
    border-radius: 9999px;
    padding: 0.75rem 2rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    cursor: pointer;
}

.btn-gradient:hover {
    background: linear-gradient(135deg, hsl(30, 90%, 60%), hsl(45, 100%, 55%));
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 10px 25px hsla(30, 90%, 55%, 0.4);
    color: #000 !important;
    text-decoration: none;
}

.btn-outline-gold {
    border: 2px solid hsl(var(--primary));
    color: hsl(var(--primary)) !important;
    background: transparent;
    border-radius: 9999px;
    padding: 0.75rem 2rem;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.btn-outline-gold:hover {
    background: hsla(30, 90%, 55%, 0.1);
    transform: translateY(-2px);
    text-decoration: none;
}

/* --- Animations --- */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes shimmer {
    from { transform: translateX(-100%) rotate(-45deg); }
    to { transform: translateX(100%) rotate(-45deg); }
}

@keyframes glow {
    from { box-shadow: 0 0 20px hsla(var(--primary), 0.5); }
    to { box-shadow: 0 0 30px hsla(var(--primary), 0.8); }
}

@keyframes pulse-slow {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.8; }
}

@keyframes ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.animate-ticker {
    animation: ticker-scroll 30s linear infinite;
}


@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-float { animation: float 6s ease-in-out infinite; }
.animate-shimmer { animation: shimmer 2.5s infinite; }
.animate-glow { animation: glow 2s ease-in-out infinite alternate; }
.animate-pulse-slow { animation: pulse-slow 4s ease-in-out infinite; }
.animate-fade-in-up { animation: fade-in-up 0.8s ease-out forwards; }

/* Staggered children animation */
.stagger-children > * {
    opacity: 0;
    animation: fade-in-up 0.5s ease-out forwards;
}
.stagger-children > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.15s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.25s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(7) { animation-delay: 0.35s; }
.stagger-children > *:nth-child(8) { animation-delay: 0.4s; }

/* --- Action Button Cards (Hero) --- */
.action-btn-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-radius: 1rem;
    padding: 1rem;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, rgba(31,28,44,0.8), rgba(88,28,100,0.5), rgba(31,28,44,0.8));
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
}

.action-btn-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(244,63,94,0.2), rgba(168,85,247,0.2));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.action-btn-card:hover {
    border-color: #f43f5e;
    box-shadow: 0 8px 25px rgba(244,63,94,0.2);
    transform: translateY(-3px);
    text-decoration: none;
    color: #fff;
}

.action-btn-card:hover::before { opacity: 1; }

.action-btn-icon {
    background: rgba(255,255,255,0.1);
    padding: 0.75rem;
    border-radius: 50%;
    margin-right: 1rem;
    transition: background 0.3s ease;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-btn-card:hover .action-btn-icon {
    background: rgba(244,63,94,0.5);
}

/* --- Section Styles --- */
.section-heading {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.section-subtext {
    font-size: 1.25rem;
    color: #d1d5db;
    max-width: 48rem;
    margin: 0 auto;
}

/* --- Floating Blobs (Hero background) --- */
.blob-rose {
    position: absolute;
    width: 18rem; height: 18rem;
    background: rgba(244, 63, 94, 0.2);
    border-radius: 50%;
    filter: blur(48px);
    animation: float 6s ease-in-out infinite;
}

.blob-purple {
    position: absolute;
    width: 24rem; height: 24rem;
    background: rgba(168, 85, 247, 0.2);
    border-radius: 50%;
    filter: blur(48px);
    animation: float 6s ease-in-out infinite;
    animation-delay: 1.5s;
}

/* --- Featured Categories Carousel --- */
.category-scroll {
    display: flex;
    overflow-x: auto;
    gap: 2rem;
    padding-bottom: 1rem;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.category-scroll::-webkit-scrollbar { display: none; }
.category-scroll > * { scroll-snap-align: start; flex-shrink: 0; width: 18rem; }

/* --- Binary Cards --- */
.binary-card {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
}
.binary-card:hover {
    transform: translateY(-10px) scale(1.02);
}
.binary-card.gold-hue:hover {
    box-shadow: 0 15px 30px rgba(251, 191, 36, 0.4), inset 0 0 15px rgba(251, 191, 36, 0.2);
}
.binary-card.silver-hue:hover {
    box-shadow: 0 15px 30px rgba(148, 163, 184, 0.4), inset 0 0 15px rgba(148, 163, 184, 0.2);
}


/* --- Jackpot Meter --- */
.jackpot-amount {
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(to right, #fbbf24, #f59e0b, #d97706);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(251, 191, 36, 0.3);
}

/* --- Form Inputs (Dark) --- */
.form-dark {
    background: rgba(31, 28, 44, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    border-radius: 0.5rem;
    padding: 0.75rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-dark:focus {
    outline: none;
    border-color: hsl(var(--ring)) !important;
    box-shadow: 0 0 0 3px hsla(var(--ring), 0.2) !important;
}

.form-dark::placeholder { color: #9ca3af; }

select.form-dark option { background: hsl(var(--card)); color: #fff; }

/* --- Tables (Dark) --- */
.table-dark-custom {
    width: 100%;
    border-collapse: collapse;
}

.table-dark-custom thead th {
    background: rgba(255,255,255,0.05);
    color: #d1d5db;
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.875rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.table-dark-custom tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 0.875rem;
}

.table-dark-custom tbody tr:hover {
    background: rgba(255,255,255,0.03);
}

/* --- Odoo Chrome Overrides --- */
header, .o_header_standard, nav.navbar {
    background-color: hsl(var(--card)) !important;
    border-bottom: 1px solid hsl(var(--border)) !important;
}

footer, .o_footer, #footer {
    background-color: rgba(0,0,0,0.2) !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
    color: #fff !important;
}

header a, footer a,
header .nav-link, footer .nav-link,
.navbar-light .navbar-nav .nav-link {
    color: hsl(var(--foreground)) !important;
    transition: color 0.3s ease;
}

header a:hover, footer a:hover,
header .nav-link:hover, footer .nav-link:hover {
    color: hsl(var(--primary)) !important;
}

/* Hide default Odoo elements we replace */
.o_we_bg_filter, .oe_structure.oe_empty > .oe_drop_zone {
    display: none !important;
}

/* --- Global Text & Color Overrides for Dark Mode --- */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: hsl(var(--foreground)) !important;
}

p, span, label, li, small, th, td {
    color: hsl(240, 5%, 85%) !important;
}

.text-muted, .text-muted-foreground {
    color: hsl(var(--muted-foreground)) !important;
}

.text-dark, .text-black, .text-body {
    color: hsl(var(--foreground)) !important;
}

/* Force primary colors to match custom dark theme */
/* Allow context-sensitive primary and icon colors */
.text-primary {
    color: hsl(var(--primary)) !important;
}

.text-secondary {
    color: hsl(var(--secondary)) !important;
}

.text-warning {
    color: hsl(var(--secondary)) !important;
}


/* Specific elements shouldn't get forced icons */
.text-white .fa, .text-white .fas {
    color: #ffffff !important;
}

.text-success .fa {
    color: #198754 !important;
}


a {
    color: hsl(var(--primary));
    transition: color 0.2s ease;
}

a:hover {
    color: hsl(var(--secondary));
    text-decoration: none;
}

/* Form Overrides */
input, textarea, select {
    background-color: hsl(var(--input)) !important;
    color: hsl(var(--foreground)) !important;
    border: 1px solid hsl(var(--border)) !important;
}

input:focus, textarea:focus, select:focus {
    border-color: hsl(var(--ring)) !important;
    box-shadow: 0 0 0 2px hsla(var(--ring), 0.2) !important;
}

/* Odoo default buttons override */
.btn-primary, .btn-checkout, .o_save_address, #save_address, .a-submit {
    background: var(--btn-primary-bg) !important;
    border: none !important;
    color: var(--btn-primary-text) !important;
    font-weight: 700 !important;
    border-radius: 50rem !important;
}

.btn-secondary, .btn-discard, .o_discard_address, .o_wizard_step_link, .btn-link {
    background: var(--btn-secondary-bg) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    color: var(--btn-secondary-text) !important;
    font-weight: 600 !important;
    border-radius: 50rem !important;
}

/* Override Odoo's white background on main content */
main, #wrapwrap, #wrap, .oe_structure, .container, .row, .col-12, .col-md-6, .col-lg-4 {
    background-color: transparent !important;
}

.card {
    background-color: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.list-group-item {
    background-color: transparent !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .section-heading { font-size: 1.75rem; }
    .section-subtext { font-size: 1rem; }
    .jackpot-amount { font-size: 1.75rem; }
    .action-btn-card { padding: 0.75rem; }
}

@media print {
    body { background: white !important; color: black !important; }
}

/* --- Premium Binary Cards (Vault) --- */
.binary-card {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, border-color 0.4s ease;
    cursor: pointer;
}

.binary-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: #ffffff !important;
}

.gold-hue:hover {
    box-shadow: 0 15px 30px rgba(251, 191, 36, 0.3);
}

.silver-hue:hover {
    box-shadow: 0 15px 30px rgba(148, 163, 184, 0.3);
}

.glow-layer {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.binary-card:hover .glow-layer {
    opacity: 1;
}