/* ==========================================================================
   CSS Variables
   ========================================================================== */
:root {
    /* Colors */
    --colorBg: #111827; /* gray-900 */
    --colorBgTransparent: #111827e6;
    --colorTextMain: #e5e7eb; /* gray-200 */
    --colorTextMuted: #9ca3af; /* gray-400 */
    --colorWhite: #ffffff;
    --colorBlack: #000000;
    
    --colorCardBg: #1e293bb2; /* gray-800 with opacity */
    --colorCardBorder: #ffffff1a;
    --colorCardFooter: #1f293780; /* gray-800 opacity 50% */
    --colorFooterBorder: #374151; /* gray-700 */

    --colorPrimary: #3b82f6;
    --colorPrimaryHover: #2563eb;
    --colorSuccess: #22c55e;
    
    --colorCurseforge: #F15A24;
    --colorCurseforgeHover: #d94f1e;
    
    --colorWarningText: #facc15; /* yellow-400 */
    --colorWarningBg: #eab3081a;
    --colorWarningBorder: #eab30833;
    --colorWarningBorderStrong: #eab30880;
    
    /* Spacing */
    --spacingXs: 0.25rem;
    --spacingSm: 0.5rem;
    --spacingMd: 1rem;
    --spacingLg: 1.5rem;
    --spacingXl: 2rem;
    --spacing2xl: 3rem;
    --spacing3xl: 4rem;
    --spacing4xl: 6rem;
    
    /* Layout */
    --containerMaxWidth: 64rem; /* max-w-5xl */
    --navHeight: 4rem;
    
    /* Transitions */
    --transitionFast: 0.2s ease;
    --transitionMedium: 0.3s ease;
}

/* ==========================================================================
   CSS Reset (Tailwind-like)
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border-width: 0;
    border-style: solid;
    border-color: currentColor;
}
html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}
body {
    background-color: var(--colorBg);
    color: var(--colorTextMain);
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a {
    color: inherit;
    text-decoration: inherit;
}
button, input {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
    background: transparent;
}
button {
    cursor: pointer;
}
img, svg {
    display: block;
    vertical-align: middle;
    max-width: 100%;
}


/* ==========================================================================
   Shared Components
   ========================================================================== */
.icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

/* ==========================================================================
   Base Layout
   ========================================================================== */
.container {
    max-width: var(--containerMaxWidth);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacingMd);
    padding-right: var(--spacingMd);
}

/* ==========================================================================
   Navigation
   ========================================================================== */
.navbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background-color: var(--colorBgTransparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--colorFooterBorder);
}
.navbarContent {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--spacingMd);
    padding-bottom: var(--spacingMd);
}
.navbarBrand {
    font-weight: bold;
    color: var(--colorWhite);
    font-size: 1.125rem;
}
.navbarLinks {
    display: flex;
    gap: var(--spacingLg);
}
.navLink {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--colorTextMuted);
    transition: color var(--transitionFast);
}
.navLink:hover {
    color: var(--colorWhite);
}

/* ==========================================================================
   Header / Hero
   ========================================================================== */
.hero {
    margin-top: var(--spacing2xl);
    margin-bottom: var(--spacing4xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacingXl);
    justify-content: center;
}
@media (min-width: 768px) {
    .hero {
        flex-direction: row;
    }
}
.heroLogo {
    width: 14rem;
    height: auto;
    filter: drop-shadow(0 0 15px #ffffff33);
}
.heroContent {
    max-width: 42rem;
    text-align: left;
    padding: var(--spacingXl);
}
.heroTitle {
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-weight: bold;
    color: var(--colorWhite);
    margin-bottom: var(--spacingMd);
}
@media (min-width: 768px) {
    .heroTitle {
        font-size: 3rem;
        line-height: 1;
    }
}
.heroDescription {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--colorTextMain);
}

/* ==========================================================================
   Sections
   ========================================================================== */
.section {
    margin-bottom: var(--spacing4xl);
    padding-top: var(--spacing4xl);
    margin-top: calc(var(--spacing4xl) * -1); /* Offset for anchor links */
}
.sectionTitle {
    font-size: 3rem;
    font-weight: bold;
    color: var(--colorWhite);
    text-align: center;
    margin-bottom: var(--spacing2xl);
}
.sectionSubtitle {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--colorWhite);
    text-align: center;
    margin-bottom: var(--spacingSm);
}
.sectionDescription {
    font-size: 1rem;
    font-weight: 500;
    color: var(--colorTextMain);
    text-align: center;
    margin-bottom: var(--spacingMd);
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   Security Warning
   ========================================================================== */
.securityWarning {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacingSm);
    margin-bottom: var(--spacing2xl);
    color: var(--colorWarningText);
    background-color: var(--colorWarningBg);
    border: 1px solid var(--colorWarningBorder);
    padding: var(--spacingSm) var(--spacingMd);
    border-radius: 0.5rem;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}

.securityWarning p {
    font-size: 0.875rem;
    font-weight: 600;
}

/* ==========================================================================
   Carousel
   ========================================================================== */
.carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--spacingLg);
    padding-bottom: var(--spacingLg);
    align-items: stretch;
}
.carousel::-webkit-scrollbar {
    height: 8px;
}
.carousel::-webkit-scrollbar-track {
    background: #1e293b80;
    border-radius: 4px;
}
.carousel::-webkit-scrollbar-thumb {
    background: #ffffff33;
    border-radius: 4px;
}
.carousel::-webkit-scrollbar-thumb:hover {
    background: #ffffff66;
}

/* ==========================================================================
   Cards
   ========================================================================== */
.glassCard {
    background-color: var(--colorCardBg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--colorCardBorder);
    border-radius: 1rem;
    transition: transform var(--transitionFast), box-shadow var(--transitionFast);
}
.glassCard:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px #00000080;
}

/* Project Card Specifics */

.cardTitle {
    font-size: 1.25rem;
    line-height: 1.25;
    font-weight: bold;
    color: var(--colorWhite);
}

.projectCard {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 0 0 85vw;
    width: 85vw;
    scroll-snap-align: center;
    }
@media (min-width: 768px) {
    .projectCard {
        flex: 0 0 350px;
        width: 350px;
    }
}
.projectCardImageWrapper {
    width: 100%;
    height: 16rem;
    overflow: hidden;
    border-bottom: 1px solid var(--colorFooterBorder);
    flex-shrink: 0;
    padding: var(--spacingXs);
}
.projectCardImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.2);
}
.projectCardContent {
    padding: var(--spacingSm);
    display: flex;
    flex-direction: column;
    flex: 1;
}
.projectCardTitle {
    margin-top: auto;
    margin-bottom: auto;
    text-align: center;
    word-wrap: break-word;
    white-space: normal;
}

/* Donation Card Specifics */
.donationCard {
    padding: var(--spacingMd);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacingMd);
    flex: 0 0 90vw;
    width: 90vw;
    scroll-snap-align: center;
    }
@media (min-width: 640px) {
    .donationCard {
        flex-direction: row;
        align-items: flex-start;
    }
}
@media (min-width: 768px) {
    .donationCard {
        flex: 0 0 550px;
        width: 550px;
    }
}
@media (min-width: 1024px) {
    .donationCard {
        flex: 0 0 600px;
        width: 600px;
    }
}
.donationCardHighlighted {
    border-color: var(--colorWarningBorderStrong);
    box-shadow: 0 0 20px #eab30826;
}

.qrImage {
    width: 220px;
    height: 220px;
    border-radius: 0.5rem;
    background-color: var(--colorWhite);
    padding: var(--spacingXs);
    object-fit: contain;
    flex-shrink: 0;
}

.donationCardContent {
    flex: 1;
    width: 100%;
    text-align: center;
}
@media (min-width: 640px) {
    .donationCardContent {
        text-align: left;
    }
}

.badge {
    display: inline-block;
    background-color: #eab30833;
    color: var(--colorWarningText);
    font-size: 0.75rem;
    font-weight: bold;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    margin-bottom: var(--spacingSm);
    border: 1px solid #eab3084c;
}

.donationCardTitle {
    /* Inherits from .cardTitle */
}
.titleOrange { color: #fb923c; } /* orange-400 */
.titleBlue { color: #60a5fa; } /* blue-400 */
.titleLightblue { color: #93c5fd; } /* blue-300 */
.titleGreen { color: #4ade80; } /* green-400 */
.titleYellow { color: #facc15; } /* yellow-400 */

.donationDetail {
    font-size: 1rem;
    font-weight: 500;
    color: var(--colorTextMain);
}
.donationDetail strong {
    font-weight: bold;
}
.donationDetailMt {
    margin-top: var(--spacingXs);
}

.inputGroup {
    margin-top: 0.75rem;
    display: flex;
    gap: var(--spacingSm);
    width: 100%;
}

/* ==========================================================================
   Forms & Buttons
   ========================================================================== */
.inputAddress {
    background-color: #1f2937; /* gray-800 */
    font-size: 0.875rem;
    font-weight: 500;
    width: 100%;
    padding: var(--spacingSm);
    border-radius: 0.25rem;
    border: 1px solid var(--colorFooterBorder);
    color: var(--colorWhite);
    outline: none;
}




.btnCurseforge:hover {
    background-color: var(--colorCurseforgeHover);
}



.btnCopy:hover {
    background-color: var(--colorPrimaryHover);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
    background-color: var(--colorCardFooter);
    padding: var(--spacingLg);
    border-radius: 1rem;
    border: 1px solid var(--colorFooterBorder);
    font-size: 1rem;
    font-weight: 500;
    color: var(--colorTextMain);
    box-shadow: inset 0 2px 4px 0 #0000000f;
}
.footerTitle {
    font-size: 1.125rem;
    font-weight: bold;
    color: var(--colorWhite);
    margin-bottom: var(--spacingSm);
}
.footerText {
    margin-bottom: var(--spacingMd);
}
.footerGratitude {
    text-align: center;
    color: var(--colorWhite);
    margin-top: var(--spacingMd);
    font-weight: 600;
}

/* ==========================================================================
   Toast Notification
   ========================================================================== */
.toast {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    background-color: var(--colorSuccess);
    color: var(--colorWhite);
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px #0000001a;
    z-index: 50;
    transition: all 0.3s ease;
    transform: translateY(2.5rem);
    opacity: 0;
    pointer-events: none;
}
.toast.isVisible {
    transform: translateY(0);
    opacity: 1;
}
.hidden {
    display: none !important;
}


/* SVG Base Styles */
svg {
    fill: none;
    stroke: currentColor;
}

svg path {
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.btn {
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacingSm);
    transition: background-color var(--transitionFast);
    border: none;
    cursor: pointer;
    text-align: center;
}

.btnCurseforge {
    background-color: var(--colorCurseforge);
    color: var(--colorWhite);
    margin-top: var(--spacingSm);
}
.btnCurseforge:hover {
    background-color: var(--colorCurseforgeHover);
}

.btnCopy {
    background-color: var(--colorPrimary);
    color: var(--colorWhite);
    flex-shrink: 0;
}
.btnCopy:hover {
    background-color: var(--colorPrimaryHover);
}