/* Custom minimal styles & visual effects for DealsHeaven Landing Page */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap');

:root {
    --dh-blue: #2494D7;
    --dh-orange: #FF9F00;
    --dh-yellow: #FF9F00;
    --telegram-blue: #0088cc;
    --whatsapp-green: #25D366;
    
    /* Default Dark Mode Theme Variables */
    --bg-main: #07090E;
    --header-bg: rgba(2, 6, 23, 0.85);
    --card-bg: rgba(15, 23, 42, 0.9);
    --card-border: rgba(255, 255, 255, 0.15);
    --text-heading: #FFFFFF;
    --text-body: #F1F5F9;
    --text-muted: #94A3B8;
}

html.light {
    --bg-main: #F8FAFC;
    --header-bg: rgba(255, 255, 255, 0.9);
    --card-bg: rgba(255, 255, 255, 0.95);
    --card-border: rgba(226, 232, 240, 0.9);
    --text-heading: #0F172A;
    --text-body: #334155;
    --text-muted: #64748B;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: var(--bg-main);
    color: var(--text-body);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Light Mode Overrides for Theme Switching */
html.light body,
html.light .bg-darkbg {
    background-color: var(--bg-main) !important;
    color: var(--text-body) !important;
}

html.light header {
    background-color: var(--header-bg) !important;
    border-bottom-color: rgba(226, 232, 240, 0.8) !important;
}

html.light .text-white {
    color: var(--text-heading) !important;
}

html.light .text-slate-100 {
    color: var(--text-body) !important;
}

html.light .text-slate-200,
html.light .text-slate-300 {
    color: var(--text-muted) !important;
}

html.light .text-slate-400 {
    color: #64748B !important;
}

html.light .bg-slate-900\/90,
html.light .bg-slate-900\/95,
html.light .bg-slate-900\/80,
html.light .bg-slate-900,
html.light .bg-slate-950,
html.light .bg-slate-950\/85,
html.light .glass-card {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
    box-shadow: 0 15px 30px -10px rgba(148, 163, 184, 0.15) !important;
}

html.light .bg-slate-800,
html.light .bg-slate-800\/90,
html.light .bg-slate-800\/80,
html.light .bg-slate-800\/60,
html.light .bg-slate-700\/40 {
    background-color: #F1F5F9 !important;
    border-color: #E2E8F0 !important;
}

html.light .bg-white\/20 {
    background-color: rgba(148, 163, 184, 0.4) !important;
}

html.light .hover\:bg-slate-800\/95:hover,
html.light .hover\:bg-slate-800\/80:hover,
html.light .hover\:bg-slate-800\/60:hover,
html.light .hover\:bg-slate-800:hover {
    background-color: #E2E8F0 !important;
}

html.light .border-white\/10,
html.light .border-white\/15,
html.light .border-white\/20,
html.light .border-white\/30,
html.light .border-white\/40 {
    border-color: rgba(203, 213, 225, 0.7) !important;
}

html.light .divide-white\/10 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgba(203, 213, 225, 0.7) !important;
}

html.light .ring-white\/10,
html.light .ring-white\/15,
html.light .ring-white\/20,
html.light .ring-white\/30 {
    --tw-ring-color: rgba(203, 213, 225, 0.5) !important;
}

html.light footer {
    background-color: #F1F5F9 !important;
    border-top-color: #E2E8F0 !important;
}

/* Preserve Transparent Gradient Text Effects in Light Mode */
html.light .text-transparent,
html.light .bg-clip-text,
html.light .text-gradient-logo,
html.light .text-gradient-orange,
html.light .text-gradient-cyan {
    color: transparent !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

/* Preserve White Text on CTA Buttons & Badges with Dark/Gradient Backgrounds */
html.light .bg-gradient-to-r,
html.light .bg-gradient-to-br,
html.light .bg-gradient-to-b,
html.light .bg-red-500,
html.light .bg-rose-600,
html.light .bg-emerald-500,
html.light .bg-emerald-400,
html.light .bg-sky-400,
html.light .bg-cyan-500,
html.light .bg-blue-600,
html.light .bg-orange-500,
html.light .bg-amber-500 {
    color: #FFFFFF !important;
}

html.light .bg-gradient-to-r *,
html.light .bg-gradient-to-br *,
html.light .bg-red-500 *,
html.light .bg-rose-600 *,
html.light .bg-emerald-500 *,
html.light .bg-emerald-400 *,
html.light .bg-sky-400 *,
html.light .bg-cyan-500 *,
html.light .bg-blue-600 *,
html.light .bg-orange-500 *,
html.light .bg-amber-500 * {
    color: #FFFFFF !important;
    fill: currentColor;
}

/* Ensure buttons with text-slate-950 (Join Now button) retain dark font */
html.light .text-slate-950,
html.light .text-slate-950 * {
    color: #020617 !important;
}

/* Light Mode Hero Tagline Badge Fix ("👑 India's Trusted Deals Community") */
html.light .hero-badge {
    background-color: rgba(255, 159, 0, 0.15) !important;
    border-color: rgba(255, 159, 0, 0.5) !important;
    color: #EA580C !important;
    box-shadow: 0 4px 14px 0 rgba(255, 159, 0, 0.15) !important;
}
html.light .hero-badge span {
    color: #EA580C !important;
}

/* Preserve White Text on Telegram, WhatsApp & Sale Gradient CTA Buttons in Light Mode */
html.light .btn-gradient-telegram,
html.light .btn-gradient-whatsapp,
html.light .btn-gradient-sale,
html.light a.btn-gradient-telegram,
html.light a.btn-gradient-whatsapp,
html.light a.btn-gradient-sale {
    color: #FFFFFF !important;
}

html.light .btn-gradient-telegram *,
html.light .btn-gradient-whatsapp *,
html.light .btn-gradient-sale * {
    color: #FFFFFF !important;
    fill: currentColor;
}

/* Preserve Dark Font on Yellow/Amber Join Now Gradient Buttons */
html.light .text-slate-950,
html.light .text-slate-950 span {
    color: #020617 !important;
}

/* Telegram & WhatsApp Feature Cards Light Theme Styling */
html.light .glass-card-telegram {
    background: linear-gradient(180deg, #F0F9FF 0%, #E0F2FE 100%) !important;
    border: 1px solid rgba(0, 154, 226, 0.4) !important;
    box-shadow: 0 15px 35px -10px rgba(0, 154, 226, 0.2) !important;
}

html.light .glass-card-whatsapp {
    background: linear-gradient(180deg, #ECFDF5 0%, #D1FAE5 100%) !important;
    border: 1px solid rgba(52, 211, 153, 0.5) !important;
    box-shadow: 0 15px 35px -10px rgba(37, 211, 102, 0.2) !important;
}

html.light .glass-card-telegram h2,
html.light .glass-card-whatsapp h2 {
    color: #0F172A !important;
}

html.light .glass-card-telegram p,
html.light .glass-card-whatsapp p {
    color: #334155 !important;
}

html.light .glass-card-telegram ul li,
html.light .glass-card-whatsapp ul li {
    color: #0F172A !important;
}
html.light .glass-card-telegram ul li span,
html.light .glass-card-whatsapp ul li span {
    color: #0F172A !important;
}

/* 3D Phone Mockup display screen components retain dark app UI styles in light mode */
html.light .phone-mockup-wrapper .bg-slate-950,
html.light .phone-mockup-wrapper .bg-slate-900,
html.light .phone-mockup-wrapper .bg-slate-900\/95,
html.light .phone-mockup-wrapper .bg-gradient-to-b {
    background-color: #090D16 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}
html.light .phone-mockup-wrapper .text-white {
    color: #FFFFFF !important;
}
html.light .phone-mockup-wrapper .text-slate-100,
html.light .phone-mockup-wrapper .text-slate-200,
html.light .phone-mockup-wrapper .text-slate-400 {
    color: #CBD5E1 !important;
}

/* Featured Stores Marquee Side Vignettes Light Mode Override */
html.light .stores-vignette-left {
    background: linear-gradient(to right, #F8FAFC, transparent) !important;
}
html.light .stores-vignette-right {
    background: linear-gradient(to left, #F8FAFC, transparent) !important;
}

/* Prose Invert Legal Page Light Mode Override */
html.light .prose-invert {
    --tw-prose-body: #334155;
    --tw-prose-headings: #0F172A;
    --tw-prose-lead: #334155;
    --tw-prose-links: #2494D7;
    --tw-prose-bold: #0F172A;
    --tw-prose-counters: #64748B;
    --tw-prose-bullets: #2494D7;
    --tw-prose-hr: #E2E8F0;
    --tw-prose-quotes: #0F172A;
    --tw-prose-quote-borders: #E2E8F0;
    --tw-prose-captions: #64748B;
    --tw-prose-code: #0F172A;
    --tw-prose-pre-code: #334155;
    --tw-prose-pre-bg: #F1F5F9;
    --tw-prose-th-borders: #E2E8F0;
    --tw-prose-td-borders: #E2E8F0;
    color: #334155 !important;
}

html.light .prose-invert h1,
html.light .prose-invert h2,
html.light .prose-invert h3,
html.light .prose-invert h4,
html.light .prose-invert h5,
html.light .prose-invert h6,
html.light .prose-invert strong {
    color: #0F172A !important;
}

html.light .prose-invert p,
html.light .prose-invert li,
html.light .prose-invert span,
html.light .prose-invert div {
    color: #334155 !important;
}

/* QR Code Modal Light Mode Styling */
html.light #qr-modal > div {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
}

html.light #qr-modal .bg-slate-900 {
    background-color: #F1F5F9 !important;
    border-color: #E2E8F0 !important;
}

/* Background Gradients & Glows (Logo Cyan & Orange Aura) */
.bg-glow-top-left {
    position: absolute;
    top: -140px;
    left: -140px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 154, 226, 0.22) 0%, rgba(7, 9, 14, 0) 70%);
    pointer-events: none;
    z-index: 0;
}

.bg-glow-hero-right {
    position: absolute;
    top: 30px;
    right: -120px;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(249, 115, 22, 0.2) 0%, rgba(0, 154, 226, 0.16) 40%, rgba(7, 9, 14, 0) 75%);
    pointer-events: none;
    z-index: 0;
}

/* Hero Right Glow Ring Aura */
.hero-glow-aura {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 154, 226, 0.35) 0%, rgba(249, 115, 22, 0.2) 50%, transparent 70%);
    filter: blur(45px);
    pointer-events: none;
    animation: pulseAura 6s ease-in-out infinite alternate;
}

@keyframes pulseAura {
    0% { transform: scale(0.95); opacity: 0.75; }
    100% { transform: scale(1.12); opacity: 1; }
}

/* Dotted Matrix Background Grid */
.bg-grid-dots {
    background-image: radial-gradient(rgba(0, 154, 226, 0.18) 1px, transparent 1px);
    background-size: 22px 22px;
}

/* Ultra Glass Card Styling */
.glass-card {
    background: linear-gradient(145deg, rgba(20, 28, 44, 0.85), rgba(13, 19, 32, 0.95));
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.glass-card-telegram {
    background: linear-gradient(180deg, rgba(14, 34, 60, 0.85) 0%, rgba(9, 18, 32, 0.98) 100%);
    border: 1px solid rgba(0, 154, 226, 0.45);
    box-shadow: 0 15px 35px -10px rgba(0, 154, 226, 0.35);
}

.glass-card-telegram:hover {
    border-color: rgba(0, 154, 226, 0.85);
    box-shadow: 0 20px 45px -5px rgba(0, 154, 226, 0.5);
}

.glass-card-whatsapp {
    background: linear-gradient(180deg, rgba(16, 56, 36, 0.85) 0%, rgba(10, 32, 21, 0.98) 100%);
    border: 1px solid rgba(52, 211, 153, 0.4);
    box-shadow: 0 15px 35px -10px rgba(37, 211, 102, 0.35);
}

.glass-card-whatsapp:hover {
    border-color: rgba(52, 211, 153, 0.8);
    box-shadow: 0 20px 45px -5px rgba(37, 211, 102, 0.5);
}

/* 3D Phone Mockup Styling */
.phone-mockup-wrapper {
    perspective: 1200px;
}

.phone-mockup-frame {
    transform: rotateY(-7deg) rotateX(3deg);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease;
    box-shadow: 
        0 30px 60px -15px rgba(0, 0, 0, 0.85),
        0 0 45px -5px rgba(0, 154, 226, 0.35);
}

.phone-mockup-wrapper:hover .phone-mockup-frame {
    transform: rotateY(-1deg) rotateX(1deg) translateY(-8px);
    box-shadow: 
        0 35px 70px -15px rgba(0, 0, 0, 0.95),
        0 0 60px 0px rgba(0, 154, 226, 0.55);
}

/* Screen Sheen Reflection */
.phone-screen-glare {
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 100%;
    background: linear-gradient(115deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 40%, transparent 60%);
    pointer-events: none;
    z-index: 25;
}

/* Floating animation */
@keyframes floatAnim {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-12px) rotate(2deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

.animate-float {
    animation: floatAnim 4.5s ease-in-out infinite;
}

.animate-float-delayed {
    animation: floatAnim 4.5s ease-in-out infinite 2.25s;
}

/* Pulsing Online Dot */
@keyframes pulseDot {
    0% { transform: scale(0.95); opacity: 0.8; }
    50% { transform: scale(1.3); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.8; }
}

.animate-pulse-dot {
    animation: pulseDot 2s infinite ease-in-out;
}

/* Logo Color Matched Text Classes */
.text-dh-blue {
    color: #009AE2 !important;
}

.text-dh-orange {
    color: #F97316 !important;
}

/* Logo Gradient Text */
.text-gradient-logo {
    background: linear-gradient(135deg, #009AE2 0%, #38BDF8 50%, #F97316 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-orange {
    background: linear-gradient(135deg, #FF9800 0%, #F97316 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-cyan {
    background: linear-gradient(135deg, #009AE2 0%, #38BDF8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Toast alert styling */
#copy-toast {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Hide scrollbar for slider track */
.scrollbar-none::-webkit-scrollbar {
    display: none;
}
.scrollbar-none {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Sale Cards — Optimised Theme Transition (no backdrop-blur repaint) */
.sale-card {
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    will-change: background-color, border-color;
    contain: paint;
}

/* Override Tailwind's transition-all on sale cards */
.sale-card.transition-all {
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
}

html.light .sale-card {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
    box-shadow: 0 4px 24px -4px rgba(148, 163, 184, 0.18) !important;
}

html.light .sale-card:hover {
    border-color: rgba(36, 148, 215, 0.45) !important;
    box-shadow: 0 8px 32px -4px rgba(36, 148, 215, 0.15) !important;
}

html.light .sale-card .border-white\/10 {
    border-color: rgba(203, 213, 225, 0.6) !important;
}

/* Sale section heading and paragraph theme colours */
html.light #sale-updates h2 {
    color: var(--text-heading) !important;
}

html.light #sale-updates p {
    color: var(--text-body) !important;
}

/* Banner image wrapper inside sale card */
html.light .sale-card .bg-slate-950\/80 {
    background-color: rgba(241, 245, 249, 0.9) !important;
    border-color: rgba(203, 213, 225, 0.6) !important;
}

/* Testimonial Cards — Optimised Theme Transition */
.testimonial-card {
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    will-change: background-color, border-color;
    contain: paint;
}

html.light .testimonial-card {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
    box-shadow: 0 4px 24px -4px rgba(148, 163, 184, 0.18) !important;
}

html.light .testimonial-card:hover {
    border-color: rgba(36, 148, 215, 0.45) !important;
    box-shadow: 0 8px 32px -4px rgba(36, 148, 215, 0.12) !important;
}

html.light .testimonial-card .border-white\/10 {
    border-color: rgba(203, 213, 225, 0.6) !important;
}

html.light .testimonial-card h4 {
    color: var(--text-heading) !important;
}

html.light .testimonial-card p {
    color: var(--text-body) !important;
}

/* Quote icon in light mode */
html.light .testimonial-card .text-slate-800 {
    color: #CBD5E1 !important;
}

/* Testimonial section heading & paragraph */
html.light #testimonials h2 {
    color: var(--text-heading) !important;
}

html.light #testimonials > div > div > p {
    color: var(--text-body) !important;
}

/* Testimonial Nav Buttons — Optimised Transition */
.testimonial-nav-btn {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    will-change: background-color, border-color;
}

html.light .testimonial-nav-btn {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
    color: var(--text-heading) !important;
}