/* ==========================================================================
   🇮🇳 INDEPENDENCE DAY THEME - Frontend Website
    FIXX - 79th Independence Day Overlay

   This file is a PURE OVERLAY — it does NOT modify any existing styles.
   To disable: remove the <link> tag or set INDEPENDENCE_DAY_THEME_ENABLED=false in .env
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TRICOLOR VARIABLES
   -------------------------------------------------------------------------- */
:root {
    --id-saffron: #3b82f6;
    --id-white: #FFFFFF;
    --id-green: #0ea5e9;
    --id-navy: #000080;
}

/* --------------------------------------------------------------------------
   2. FESTIVE BANNER (Top of page)
   -------------------------------------------------------------------------- */
.id-banner {
    background: linear-gradient(90deg, var(--id-saffron), var(--id-white) 50%, var(--id-green));
    background-size: 300% 300%;
    animation: idBannerGradient 6s ease infinite;
    color: #1a1a1a;
    text-align: center;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 600;
    position: relative;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4);
    overflow: hidden;
}

.id-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0,0,128,0.08), transparent);
    animation: idBannerShine 3s ease-in-out infinite;
}

.id-banner-close {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 128, 0.15);
    border: none;
    color: #1a1a1a;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.id-banner-close:hover {
    background: rgba(0, 0, 128, 0.28);
    transform: translateY(-50%) scale(1.1);
}

@keyframes idBannerGradient {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes idBannerShine {
    0%   { left: -100%; }
    100% { left: 100%; }
}

/* --------------------------------------------------------------------------
   3. FLOATING TRICOLOR BLOBS
   -------------------------------------------------------------------------- */
.id-blob {
    position: fixed;
    border-radius: 50%;
    opacity: 0.12;
    pointer-events: none;
    z-index: 0;
    filter: blur(40px);
    will-change: transform;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.id-blob-1 {
    width: 200px; height: 200px;
    background: var(--id-saffron);
    top: 10%; left: -5%;
    animation: idFloat1 12s infinite alternate;
}

.id-blob-2 {
    width: 180px; height: 180px;
    background: var(--id-green);
    top: 60%; right: -5%;
    animation: idFloat2 14s infinite alternate;
}

.id-blob-3 {
    width: 150px; height: 150px;
    background: var(--id-navy);
    top: 30%; left: 40%;
    opacity: 0.08;
    animation: idFloat3 10s infinite alternate;
}

.id-blob-4 {
    width: 220px; height: 220px;
    background: var(--id-saffron);
    bottom: 5%; left: 15%;
    animation: idFloat4 16s infinite alternate;
}

.id-blob-5 {
    width: 170px; height: 170px;
    background: var(--id-green);
    top: 5%; right: 20%;
    animation: idFloat5 11s infinite alternate;
}

.id-blob-6 {
    width: 140px; height: 140px;
    background: var(--id-navy);
    bottom: 25%; right: 35%;
    opacity: 0.07;
    animation: idFloat6 13s infinite alternate;
}

@keyframes idFloat1 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(80px, 60px) scale(1.2); }
}
@keyframes idFloat2 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-60px, -80px) scale(1.15); }
}
@keyframes idFloat3 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(50px, -50px) scale(1.1); }
}
@keyframes idFloat4 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(70px, 40px) scale(1.25); }
}
@keyframes idFloat5 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-40px, 70px) scale(1.1); }
}
@keyframes idFloat6 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(60px, -40px) scale(1.2); }
}

/* --------------------------------------------------------------------------
   4. NAVBAR FESTIVE BORDER
   -------------------------------------------------------------------------- */
.rbt-header-wrapper {
    border-bottom: 3px solid transparent !important;
    border-image: linear-gradient(90deg, var(--id-saffron), var(--id-white), var(--id-green)) 1 !important;
}

/* --------------------------------------------------------------------------
   5. THEME GRADIENT - INDEPENDENCE DAY OVERRIDE
   -------------------------------------------------------------------------- */
.theme-gradient {
    background: linear-gradient(90deg, var(--id-saffron), var(--id-navy), var(--id-green)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* --------------------------------------------------------------------------
   6. CTA BUTTONS — FESTIVE GRADIENT
   -------------------------------------------------------------------------- */
.rbt-btn.btn-gradient {
    background: linear-gradient(135deg, var(--id-saffron), var(--id-navy), var(--id-green)) !important;
    background-size: 200% 200% !important;
    animation: idButtonGlow 4s ease infinite !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(59,130,246,0.3) !important;
    transition: all 0.3s ease !important;
}

.rbt-btn.btn-gradient:hover {
    box-shadow: 0 6px 25px rgba(14,165,233,0.4) !important;
    transform: translateY(-2px) !important;
}

@keyframes idButtonGlow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --------------------------------------------------------------------------
   7. SECTION TITLE DECORATIONS
   -------------------------------------------------------------------------- */
.section-title .title::after {
    content: '🇮🇳';
    display: inline-block;
    margin-left: 8px;
    font-size: 0.6em;
    transform-origin: left center;
    animation: idFlagWave 2s ease-in-out infinite;
}

@keyframes idFlagWave {
    0%, 100% { transform: rotateY(0deg); }
    25%      { transform: rotateY(30deg); }
    50%      { transform: rotateY(0deg); }
    75%      { transform: rotateY(-30deg); }
}

/* --------------------------------------------------------------------------
   8. SERVICE CARDS — HOVER ACCENT
   -------------------------------------------------------------------------- */
.service__style--1:hover {
    box-shadow: 0 8px 30px rgba(14,165,233,0.15) !important;
    border-color: var(--id-saffron) !important;
}

/* --------------------------------------------------------------------------
   9. PLAN CARDS — TRICOLOR BORDER ON HOVER
   -------------------------------------------------------------------------- */
.top-features-box:hover {
    box-shadow: 0 0 0 3px var(--id-saffron),
                0 0 0 6px var(--id-white),
                0 0 0 9px var(--id-green),
                0 8px 30px rgba(0, 0, 0, 0.1) !important;
}

/* --------------------------------------------------------------------------
   10. FOOTER — FESTIVE TOP BORDER
   -------------------------------------------------------------------------- */
.rbt-footer {
    border-top: 4px solid transparent !important;
    border-image: linear-gradient(90deg, var(--id-saffron), var(--id-white), var(--id-green)) 1 !important;
}

/* --------------------------------------------------------------------------
   11. COUNTER CARDS — TRICOLOR RING
   -------------------------------------------------------------------------- */
.rbt-counterup.rbt-hover-03:hover {
    box-shadow: 0 0 0 2px var(--id-saffron), 0 10px 30px rgba(14,165,233,0.12) !important;
}

/* --------------------------------------------------------------------------
   12. SPLATTER DECORATION ON HERO
   -------------------------------------------------------------------------- */
.rbt-splash-slider::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--id-saffron) 0%, transparent 70%);
    opacity: 0.08;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.rbt-splash-slider::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -30px;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, var(--id-green) 0%, transparent 70%);
    opacity: 0.08;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* --------------------------------------------------------------------------
   13. SCROLLBAR — TRICOLOR
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--id-saffron), var(--id-white), var(--id-green));
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--id-saffron), var(--id-navy), var(--id-green));
}

/* --------------------------------------------------------------------------
   14. CONFETTI CANVAS
   -------------------------------------------------------------------------- */
#id-confetti-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10000;
}

/* --------------------------------------------------------------------------
   15. MOBILE RESPONSIVE — Reduce blobs on small screens
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .id-blob-3,
    .id-blob-4,
    .id-blob-5,
    .id-blob-6 {
        display: none;
    }

    .id-blob-1,
    .id-blob-2 {
        width: 120px;
        height: 120px;
        opacity: 0.08;
    }

    .id-banner {
        font-size: 13px;
        padding: 8px 40px 8px 15px;
    }

    .section-title .title::after {
        margin-left: 6px;
    }
}

@media (max-width: 480px) {
    .id-blob-1,
    .id-blob-2 {
        width: 80px;
        height: 80px;
    }

    .id-banner {
        font-size: 12px;
    }
}

/* --------------------------------------------------------------------------
   16. ANIMATION PERFORMANCE
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .id-blob,
    .id-banner::before,
    .section-title .title::after {
        animation: none !important;
        opacity: 1;
        transform: none;
    }

    .id-banner {
        background-size: 100% 100%;
    }
}

/* --------------------------------------------------------------------------
   18. HOME HERO — RIBBON BADGE
   -------------------------------------------------------------------------- */
.rbt-splash-slider {
    position: relative;
}

.id-hero-ribbon {
    position: absolute;
    top: 140px;
    right: 20px;
    z-index: 5;
    background: linear-gradient(90deg, var(--id-saffron), var(--id-white) 50%, var(--id-green));
    color: #1a1a1a;
    font-weight: 700;
    font-size: 13px;
    padding: 8px 16px;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 128, 0.18);
    border: 1px solid rgba(0, 0, 128, 0.15);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   19. HOME HERO — ASHOKA CHAKRA WATERMARK
   -------------------------------------------------------------------------- */
.id-hero-chakra {
    position: absolute;
    top: 50%;
    right: 4%;
    width: 380px;
    height: 380px;
    transform: translateY(-50%);
    opacity: 0.06;
    z-index: 0;
    pointer-events: none;
    animation: idChakraSpin 40s linear infinite;
}

@keyframes idChakraSpin {
    0%   { transform: translateY(-50%) rotate(0deg); }
    100% { transform: translateY(-50%) rotate(360deg); }
}

/* --------------------------------------------------------------------------
   20. HOME HERO — DRIFTING KITES
   -------------------------------------------------------------------------- */
.id-hero-kite {
    position: absolute;
    width: 46px;
    height: auto;
    z-index: 1;
    opacity: 0.85;
    pointer-events: none;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.12));
}

.id-hero-kite-1 {
    top: 6%;
    left: 6%;
    animation: idKiteDrift1 9s ease-in-out infinite;
}

.id-hero-kite-2 {
    top: 14%;
    left: 46%;
    width: 34px;
    animation: idKiteDrift2 11s ease-in-out infinite;
}

.id-hero-kite-3 {
    top: 8%;
    right: 8%;
    width: 38px;
    animation: idKiteDrift3 8s ease-in-out infinite;
}

.id-hero-kite-4 {
    top: 30%;
    left: 20%;
    width: 28px;
    opacity: 0.6;
    animation: idKiteDrift4 13s ease-in-out infinite;
}

@keyframes idKiteDrift1 {
    0%, 100% { transform: translate(0, 0) rotate(-6deg); }
    50%      { transform: translate(14px, 10px) rotate(4deg); }
}

@keyframes idKiteDrift2 {
    0%, 100% { transform: translate(0, 0) rotate(5deg); }
    50%      { transform: translate(-12px, 14px) rotate(-5deg); }
}

@keyframes idKiteDrift3 {
    0%, 100% { transform: translate(0, 0) rotate(-4deg); }
    50%      { transform: translate(-16px, 8px) rotate(6deg); }
}

@keyframes idKiteDrift4 {
    0%, 100% { transform: translate(0, 0) rotate(8deg); }
    50%      { transform: translate(10px, -10px) rotate(-6deg); }
}

@media (max-width: 992px) {
    .id-hero-chakra {
        width: 240px;
        height: 240px;
        right: -2%;
    }

    .id-hero-kite-2,
    .id-hero-kite-4 {
        display: none;
    }
}

/* Below this width the hero column stacks (image on top, text below),
   so the absolute desktop positions no longer line up with anything —
   drop the chakra/ribbon and keep just one small kite in the safe top corner. */
@media (max-width: 768px) {
    .id-hero-chakra,
    .id-hero-ribbon,
    .id-hero-kite-3 {
        display: none;
    }

    .id-hero-kite-1 {
        top: 2px;
        left: 10px;
        width: 32px;
        opacity: 0.9;
    }
}

/* --------------------------------------------------------------------------
   17. PRINT STYLES — Hide all Independence Day elements
   -------------------------------------------------------------------------- */
@media print {
    .id-banner,
    .id-blob,
    #id-confetti-canvas,
    .id-dashboard-greeting,
    .id-hero-ribbon,
    .id-hero-chakra,
    .id-hero-kite {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .id-hero-chakra,
    .id-hero-kite {
        animation: none !important;
    }
}

/* ==========================================================================
   🔧 FIX v3: Hero Section Pink Background
   
   ROOT CAUSE:
   • rocket.png has a BAKED-IN pink background (CSS cannot remove this 100%)
   • .rbt-splash-slider had NO explicit background-color
   • iPhone: image is full-width (order-1 stacked) → pink fills entire hero
   
   PREVIOUS BUG (v2): mix-blend-mode without isolation:isolate on the section
   caused iOS Safari to apply compositing across the ENTIRE page rendering tree
   → Result: pink spread from header to packages section
   
   v3 FIX:
   1. isolation:isolate on .rbt-splash-slider → contains all blending inside section
   2. Explicit blue background on section → blue shows in all non-image areas
   3. mix-blend-mode REMOVED (was the culprit for page-wide pink on iOS)
   4. rocket.png pink is still visible inside the image — fix = use remove.bg
   ========================================================================== */

/* ── Section: WHITE bg + stacking context containment ───────────────────── */
.rbt-splash-slider {
    isolation: isolate;
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
}

/* ── Image wrapper: clean, no blend tricks ───────────────────────────────── */
.rbt-splash-slider .video-popup-wrapper {
    background: transparent;
    display: block;
}

.rbt-splash-slider .video-popup-wrapper img {
    display: block; /* removes inline bottom gap only */
    /* mix-blend-mode INTENTIONALLY REMOVED — was bleeding pink across entire page on iOS */
}

/* ── iOS Safari explicit override ───────────────────────────────────────── */
@supports (-webkit-touch-callout: none) {
    .rbt-splash-slider {
        isolation: isolate !important;
        background: #ffffff !important;
        background-color: #ffffff !important;
        background-image: none !important;
    }
}

/* ── Mobile: image position ──────────────────────────────────────────────── */
@media (max-width: 767px) {
    .rbt-splash-slider {
        background-color: #ffffff !important;
        background-image: none !important;
    }

    .rbt-splash-slider .video-popup-wrapper {
        margin: 40px auto 0 auto;
        max-width: 92%;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .rbt-splash-slider .video-popup-wrapper {
        margin-top: 30px;
    }
}

/* ── ⚠ rocket.png PERMANENT FIX (image editing required) ─────────────────
   CSS cannot remove a baked-in background color from a PNG image.
   To permanently fix the pink inside rocket.png:
   
   → Go to https://remove.bg
   → Upload rocket.png
   → Download the transparent PNG
   → Replace rocket.png on server
   
   After doing this, all pink will be permanently gone with zero CSS tricks.
   ========================================================================== */

/* ==========================================================================
   🔧 NUCLEAR FIX: Kill ALL pink backgrounds — iOS Safari specific
   
   🎯 ROOT CAUSE FOUND: <body class="gradient-bg"> in index.php
   .gradient-bg applies radial-gradient with #fb64b661 (PINK) at top-left
   and #c27aff40 (PURPLE) at bottom-right on the BODY itself.
   
   On iOS Safari, background-attachment:fixed renders differently — the pink
   gradient fills the entire viewport instead of being a subtle corner glow.
   
   FIX: Override .gradient-bg to white + override all pink utility classes.
   ========================================================================== */

/* ── THE MAIN FIX: Kill body gradient-bg pink/purple radial glow ────────── */
.gradient-bg {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    background-attachment: scroll !important;
}

/* ── Page-level white ───────────────────────────────────────────────────── */
html,
body {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* ── Force white on all sections that use bg-color-extra2 ────────────── */
.bg-color-extra2 {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* ── Kill all pink utility classes across the page ───────────────────── */
.bg-color-pink-opacity,
.bg-pink-opacity,
.bg-color-card-2,
.bg-color-card-3,
.bg-gradient-6 {
    background: #ffffff !important;
}

/* ── Keep the hero subtitle badge light-blue instead of pink ─────────── */
.rbt-splash-slider .subtitle.bg-pink-opacity {
    background: #DBEAFE !important;
    color: #1E3A8A !important;
}

/* ── Override CSS variable at root so any future use also stays clean ── */
:root {
    --color-extra2: #ffffff !important;
    --pink-opacity: transparent !important;
    --color-card-2: #EFF6FF !important;
    --color-card-3: #EFF6FF !important;
}

/* ── iOS Safari double-tap (belt + suspenders) ──────────────────────── */
@supports (-webkit-touch-callout: none) {
    .gradient-bg {
        background: #ffffff !important;
        background-image: none !important;
        background-attachment: scroll !important;
    }
    
    html, body {
        background-color: #ffffff !important;
        background-image: none !important;
    }
    
    .bg-color-extra2 {
        background: #ffffff !important;
        background-color: #ffffff !important;
        background-image: none !important;
    }
    
    .bg-color-pink-opacity,
    .bg-pink-opacity,
    .bg-color-card-2,
    .bg-color-card-3 {
        background: #ffffff !important;
    }
}