/* ============================================================
   MONEYVILLE — style.css
   Prefix: mv-  (Bootstrap-safe, zero conflicts)
   ============================================================ */


/* ============================================================
   5. LAYOUT
   ============================================================ */
.mv-container {
    width: min(80%, 1500px);
    padding: var(--mv-space-sm);
    margin: 0 auto;
}

/* default hover (dark ya baaki cases) */
html[data-theme="dark"] .mv-card:hover .mv-card__inner h2 {
    color: white;
}

/* ============================================================
   6. TYPOGRAPHY
   ============================================================ */
.mv-heading {
    text-align: center;
    font-size: var(--mv-fs-h1);
    font-family: var(--mv-font-heading);
    font-weight: 400;
    margin: var(--mv-space-sm) 0;
    -webkit-text-stroke: var(--mv-btn-color);
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 2px;
    font-size: 100px;
}

@media (max-width:768px) {
    .mv-heading {
        font-size: 4rem;
    }
}

h2 {
    font-family: var(--mv-font-card);
    font-size: var(--mv-fs-h2);
    font-weight: 400;
    font-variation-settings: "wdth" 100;
    text-align: center;
}

/* ============================================================
   7. BADGE
   ============================================================ */
.mv-badge {
    display: inline-block;
    background: var(--mv-color-badge-bg);
    color: var(--mv-color-badge-text);
    padding: var(--mv-space-xs) clamp(14px, 3vw, 30px);
    border-radius: 50px;
    font-size: var(--mv-fs-badge);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.12rem;
    margin-bottom: 10px;
}

/* ============================================================
   8. BEAR CHARACTER
   ============================================================ */
.mv-character {
    text-align: center;
    margin: 0;
    z-index: 2;
}

.mv-bear-wrapper {
    position: relative;
    z-index: 2;
}

.mv-bear-svg {
    width: 200px;
    height: 200px;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.25));
    animation: mv-bearFloat 3s ease-in-out infinite;
    cursor: pointer;
}

@keyframes mv-bearFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Eyelid blink */
.mv-eye .mv-eyelid {
    fill: #fff;
    transform-origin: center;
    animation: mv-blink 5s infinite;
}

@keyframes mv-blink {

    0%,
    95%,
    100% {
        transform: scaleY(0);
    }

    96%,
    99% {
        transform: scaleY(1);
    }
}

/* Mouth smile on hover */
.mv-bear-svg:hover #mv-mouth {
    d: path("M250 335 Q292 365 334 335");
}

/* ============================================================
   9. CARDS GRID
   ============================================================ */
.mv-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: var(--mv-space-gap);
    justify-content: center;
}

@media (max-width: 768px) {
    .mv-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 460px) {
    .mv-cards {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   10. CARD STRUCTURE
   ============================================================ */
.mv-card {
    cursor: pointer;
}

.mv-card__outer {
    border-radius: var(--mv-card-radius);
    min-height: var(--mv-card-min-h);
    padding: var(--mv-space-sm);
    position: relative;
    display: flex;
    align-items: flex-end;
    transition: background var(--mv-transition), box-shadow var(--mv-transition);
}

.mv-card__inner {
    background: #ffffff29;
    position: absolute;
    bottom: var(--mv-card-bottom);
    right: 0;
    width: 100%;
    height: 80%;
    border-radius: var(--mv-card-radius);
    padding: var(--mv-space-md);
    display: flex;
    flex-direction: column;
}

/* SVG icon wrapper inside card */
.mv-svg-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 200px;
    padding: 10px;
}

/* ============================================================
   11. CARD COLOR THEMES
   ============================================================ */

/* PURPLE */
.mv-card--purple h2,
.mv-card--purple a,
.mv-card--purple svg {
    color: white;
}

.mv-card--purple:hover .mv-card__outer {
    background: var(--mv-purple);
    box-shadow: var(--mv-shadow-purple);
}

.mv-card--purple:hover a {
    color: #fff;
}

/* RED */
.mv-card--red h2,
.mv-card--red a,
.mv-card--red svg {
    color: white;
}

.mv-card--red:hover .mv-card__outer {
    background: var(--mv-red);
    box-shadow: var(--mv-shadow-red);
}

.mv-card--red:hover a {
    color: #fff;
}

/* GREEN */
.mv-card--green h2,
.mv-card--green a,
.mv-card--green svg {
    color: white;
}

.mv-card--green:hover .mv-card__outer {
    background: var(--mv-green);
    box-shadow: var(--mv-shadow-green);
}

.mv-card--green:hover a {
    color: #fff;
}

/* ORANGE */
.mv-card--orange h2,
.mv-card--orange a,
.mv-card--orange svg {
    color: var(--mv-orange);
}

.mv-card--orange:hover .mv-card__outer {
    background: var(--mv-orange);
    box-shadow: var(--mv-shadow-orange);
}

.mv-card--orange:hover a {
    color: #fff;
}

/* PINK */
.mv-card--pink h2,
.mv-card--pink a,
.mv-card--pink svg {
    color: var(--mv-pink);
}

.mv-card--pink:hover .mv-card__outer {
    background: var(--mv-pink);
    box-shadow: var(--mv-shadow-pink);
}

.mv-card--pink:hover a {
    color: #fff;
}

/* ============================================================
   12. THEME TOGGLE BUTTON
   ============================================================ */
.mv-theme-btn {
    position: fixed;
    right: 30px;
    bottom: 90px;
    height: 52px;
    width: 52px;
    border-radius: 30px;
    border: none;
    background-color: var(--mv-btn-bg);
    color: var(--mv-btn-color);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    cursor: pointer;
    overflow: hidden;
    transition: width var(--mv-transition), background 0.3s;
    z-index: 999;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

.mv-theme-text {
    display: none;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}

.mv-theme-btn:hover {
    width: 110px;
}

.mv-theme-btn:hover .mv-theme-text {
    display: block;
}

/* ============================================================
   13. DARK THEME OVERRIDES
   ============================================================
   Sirf yeh variables badlo — baaki sab CSS automatically
   var() se updated values use karega. Koi aur jagah nahi
   chhuunga dark ke liye.
   ============================================================ */
body.mv-theme-dark {
    --mv-bg-image: url("../../assets/indiBannerLight.png");
    --mv-color-text: #e8e8e8;
    --mv-color-heading: #ffffff;
    --mv-card-bg: #2a2a2a;
    --mv-card-inner-bg: #1a1a1a;
    --mv-btn-bg: #333333;
    --mv-btn-color: #ffffff;
}

/* ============================================================
   14. HEADING COLOR — variable se, data-attribute nahi chahiye
   ============================================================
   data-heading attribute hatao HTML se bhi —
   ab .mv-heading seedha --mv-color-heading variable use karta hai
   jo theme ke saath automatically switch hota hai.
   ============================================================ */
.mv-heading {
    position: relative;
}

/* ============================================================
   15. FOOTER / WAVE (unchanged from original)
   ============================================================ */
.mv-footer-bar {
    position: absolute;
    width: 100%;
    height: 120px;
    overflow: hidden;
    background: linear-gradient(326deg,
            #a4508b 0%, #FFD700 15%, #6824d6 30%,
            #FFA500 45%, #fe3258 60%, #FF69B4 75%,
            #87CEEB 85%, #98FB98 100%);
    filter: opacity(0.6);
    bottom: 0;
}

.mv-footer-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 180px;
    background: url(https://1.bp.blogspot.com/-NYl6L8pz8B4/XoIVXwfhlNI/AAAAAAAAU3k/nxJKiLT706Mb7jUFiM5vdCsOSNnFAh0yQCLcBGAsYHQ/s1600/hero-wave.png) repeat-x;
    animation: mv-wave 10s linear infinite;
    transform: scaleY(-1);
    z-index: 1;
}

@keyframes mv-wave {
    0% {
        transform: translateX(0) scaleY(-1);
    }

    100% {
        transform: translateX(-50%) scaleY(-1);
    }
}

/* ============================================================
   16. COINS BACKGROUND
   ============================================================ */
.mv-coins-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}


/* ============================================================
   17. WALLPAPER / FIXED BACKGROUND LAYER
   ============================================================ */
.fixed_bg__layer {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: -2;
    transition: background-image 0.6s ease-in-out;
}


/* ============================================================
   18. REDESIGN — 2 CARD LAYOUT OVERRIDES
   ============================================================ */

/* Center container vertically & horizontally */
.mv-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem 1rem;
}

/* Larger bear for better balance with 2 cards */
.mv-bear-svg {
    width: 220px;
    height: 220px;
}

/* Heading spacing */
.mv-heading {
    margin: 1.5rem 0 2.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* 2-card grid: side by side, centered, max width */
.mv-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 420px));
    gap: 3rem;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Larger cards since only 2 exist */
.mv-card__outer {
    min-height: 460px;
    padding: 1.25rem;
    border-radius: 28px;
    border: 1px solid #ffffff8a;
    box-shadow: 2px 2px 10px #ffffff29;
    background-color: #00000063;
}

.mv-card__inner {
    height: 85%;
    border-radius: 24px;
    padding: 2rem 1.5rem;
    box-shadow: 2px 2px 10px #020216;
    border: 2px solid white;
}

/* Bigger SVG area */
.mv-svg-wrapper {
    height: 260px;
    padding: 1rem;
}

/* Card titles slightly larger for balance */
.mv-card h2 {
    font-size: clamp(1.3rem, 2.5vw, 1.6rem);
    margin-top: auto;
    padding-top: 0.5rem;
    font-weight: 800;
}

/* "get started" link styling enhancement */
.mv-card a {
    display: block;
    width: 100%;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 1rem;
    margin-top: 0.75rem;
    text-decoration: none;
    transition: transform 0.2s ease;
    /* border: 1px solid white; */
}

.mv-card a:hover {
    transform: translateX(4px);
}

/* Hover lift effect on cards */
.mv-card {
    transition: transform 0.3s ease;
}

.mv-card:hover {
    transform: translateY(-8px);
}



/* Card is now an <a> tag */
a.mv-card {
    display: block;
    cursor: pointer;
    transition: transform 0.3s ease;
    text-decoration: none;
}

a.mv-card:hover {
    transform: translateY(-8px);
}

/* "get started" span */
.mv-card-link {
    display: block;
    width: 100%;
    font-weight: 600;
    font-size: 1rem;
    margin-top: 0.75rem;
    color: white;
    transition: transform 0.2s ease;
}

a.mv-card:hover .mv-card-link {
    transform: translateX(4px);
}

/* ============================================================
   19. RESPONSIVE — 2 CARD LAYOUT
   ============================================================ */
@media (max-width: 768px) {
    .mv-cards {
        grid-template-columns: 1fr;
        max-width: 420px;
        gap: 2rem;
    }

    .mv-card__outer {
        min-height: 400px;
    }

    .mv-bear-svg {
        width: 180px;
        height: 180px;
    }

    .mv-heading.mv-heading {
        font-size: 4rem;
    }
}

@media (max-width: 460px) {
    .mv-cards {
        padding: 0;
        gap: 1.5rem;
    }

    .mv-card__outer {
        min-height: 380px;
        padding: 1rem;
    }

    .mv-svg-wrapper {
        height: 200px;
    }
}


.mv-svg-wrapper svg {
    height: 150px;
}