/*
Theme Name: GamSPA
Description: Single Page Application Theme for GoAidMe
Version: 1.0
*/

/* === GLOBAL VARIABLES & THEME === */
:root {
    --gam-primary: #9500ff;
    --gam-primary-dark: #4e008a;
    --gam-secondary: #FFB400;
    --gam-secondary-hover: #ffca28;
    --gam-text-main: #323232;
    --gam-text-light: #646464;
    --gam-nav-link: #0f172a;
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-bg-nav: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(255, 255, 255, 0.6);
    --glass-blur: 10px;
    --gam-shadow: 0 8px 32px 0 rgba(149, 0, 255, 0.15);
    --bg-editor: #f8f5fc;
    --bg-editor-panel: #ffffff;
    --bg-editor-rgb: 243, 232, 255;
    --text-editor: #0f172a;
    --text-editor-muted: #64748b;
    --input-bg: rgba(255, 255, 255, 0.5);
    --header-line: rgba(0, 0, 0, 0.1);
    --accent-color: var(--gam-primary);
    --accent-hover: var(--gam-primary-dark);
    --drawer-transition-duration: 0.5s;
    --drawer-transition-easing: cubic-bezier(0.4, 0.0, 0.2, 1);
    /* Blob Colors - Light Mode */
    --blob-color-1: #d8b4fe;
    --blob-color-2: #fef3c7;
    /* Toned down Gold */

    /* Footer Colors - Light Mode */
    --footer-top-bg: rgba(26, 11, 46, 0.05);
    --footer-bottom-bg: #f3e8ff;
    --footer-text: #0a0410;
    /* Richer deep purple-black */
    --footer-text-muted: #334155;
    /* Richer slate for better readability */
    --footer-card-shadow: 0 10px 40px rgba(149, 0, 255, 0.1);
}

/* DARK THEME */
body.gam-dark-mode {
    --bg-editor: #0f0518;
    --bg-editor-rgb: 26, 11, 46;
    --bg-editor-panel: #2d1b4d;
    --text-editor: #ffffff;
    --text-editor-muted: #cbd5e1;
    --gam-text-main: #f1f5f9;
    --gam-text-light: #cbd5e1;
    --gam-nav-link: #ffffff;
    --gam-bg-light: #1e293b;
    --gam-border-light: #334155;
    --glass-bg: rgba(20, 0, 36, 0.6);
    --glass-border: rgba(255, 255, 255, 0.1);
    --gam-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
    --input-bg: rgba(0, 0, 0, 0.2);
    --header-line: rgba(255, 255, 255, 0.1);
    --accent-color: var(--gam-secondary);
    --accent-hover: var(--gam-secondary-hover);
    /* Blob Colors - Dark Mode */
    --blob-color-1: #6b21a8;
    --blob-color-2: #92400e;

    /* Footer Colors - Dark Mode */
    --footer-top-bg: rgba(26, 11, 46, 0.85);
    --footer-bottom-bg: rgba(149, 0, 255, 0.2);
    --footer-text: #ffffff;
    --footer-text-muted: #cbd5e1;
    --footer-card-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

body.gam-modal-open,
body.gam-menu-drawer-open,
body.gam-drawer-open {
    overflow: hidden !important;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: var(--bg-editor);
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;
    color: var(--text-editor);
    margin: 0;
    display: flex;
    flex-direction: column;
    transition: background-color 0.5s ease, color 0.5s ease;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(149, 0, 255, 0.3);
    border-radius: 100vh;
}

/* === APP CONTAINER STRUCTURE === */
#app-preview-container {
    width: 100%;
    min-height: 100vh;
    margin: 0 auto;
    position: relative;
    background: transparent;
    z-index: 10;
    overflow: hidden;
}

/* Desktop Layout Overrides - Full Height Centered Strip */
@media (min-width: 1440px) {
    body {
        background-color: #d1d5db;
        /* Contrast backdrop for Light Mode */
    }

    body.gam-dark-mode {
        background-color: #05010a;
        /* Contrast backdrop for Dark Mode */
    }

    #app-preview-container {
        max-width: 1440px;
        width: 100%;
        background: transparent !important;
        /* Ensure app has no bg to show blobs */
        /* Shadow ONLY on sides to avoid a demarcating line at footer */
        box-shadow: -30px 0 60px rgba(0, 0, 0, 0.08), 30px 0 60px rgba(0, 0, 0, 0.08);
        margin: 0 auto;
    }
}

#gam-spa-body {
    min-height: 100vh;
    /* Ensure content fills viewport */
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 5;
    scroll-behavior: smooth;
    background: transparent !important;
    transition: transform var(--drawer-transition-duration) var(--drawer-transition-easing), border-radius 0.5s ease, filter 0.5s ease;
    transform-origin: left center;
    will-change: transform;
}

/* Fix: On desktop, scaling from the top prevents the "slide down" effect */
@media (min-width: 1024px) {
    #gam-spa-body {
        transform-origin: top center;
    }
}

.gam-header-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to bottom,
            rgba(var(--bg-editor-rgb), 0.7) 0%,
            rgba(var(--bg-editor-rgb), 0) 100%);
    backdrop-filter: blur(8px);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 100%);
    z-index: 1250;
    /* Mask is below header (2000) */
    pointer-events: none;
    transition: background 0.5s ease;
}

/* === MAIN HEADER CONTAINER === */
#gam-main-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    pointer-events: none;
    transition: transform var(--drawer-transition-duration) var(--drawer-transition-easing);
}

#gam-main-header>* {
    pointer-events: auto;
}

@media (min-width: 1024px) {
    #gam-main-header {
        position: fixed;
        width: 100%;
        left: 0;
        right: 0;
        transform: none;
    }

    body.gam-menu-drawer-open #gam-main-header {
        transform: translate3d(280px, 0, 0);
    }
}

/* === DRAWER OVERLAY === */
.gam-drawer-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 99998;
    /* Overlay above everything but drawers */
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
    backdrop-filter: blur(2px);
}

body.gam-menu-drawer-open .gam-drawer-overlay,
body.gam-drawer-open .gam-drawer-overlay {
    opacity: 1;
    pointer-events: auto;
}

/* === DRAWERS === */
.gam-menu-drawer-wrapper {
    position: fixed;
    top: 0;
    width: 280px;
    height: 100%;
    z-index: 99999;
    /* Drawers above everything */
    display: flex;
    flex-direction: column;
    background: #ffffff;
    transform: translate3d(-280px, 0, 0);
    transition: transform var(--drawer-transition-duration) var(--drawer-transition-easing);
    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.gam-menu-content,
.gam-menu-drawer-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 50px 24px;
    display: flex;
    flex-direction: column;
}

body.gam-menu-drawer-open .gam-menu-drawer-wrapper {
    transform: translate3d(0, 0, 0);
}

.gam-drawer-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    height: 100%;
    background: #ffffff;
    border-left: 1px solid var(--glass-border);
    z-index: 99999;
    /* Drawers above everything */
    transform: translate3d(100%, 0, 0);
    transition: transform var(--drawer-transition-duration) var(--drawer-transition-easing);
    box-shadow: -20px 0 30px rgba(0, 0, 0, 0.08);
    padding: 50px 24px;
    overflow-y: auto;
    overflow-x: hidden;
}

body.gam-drawer-open .gam-drawer-panel {
    transform: translate3d(0, 0, 0);
}

body.gam-dark-mode .gam-menu-drawer-wrapper,
body.gam-dark-mode .gam-drawer-panel,
.gam-distraction-free.gam-dark-mode .gam-menu-drawer-wrapper {
    background: var(--bg-editor-panel) !important;
}

body.gam-dark-mode .gam-menu-drawer-wrapper {
    background: #560b97 !important;
}

/* TRENDING SLIDER STYLES */
.gam-trending-slider-wrapper {
    /* Full-bleed slider: break out to viewport edges */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: -20px;
    margin-bottom: -20px;
    width: 100vw;
    padding: 0 20px;
    /* preserve inner padding for hover space */
    box-sizing: border-box;
}

/* When the slider is inside the right drawer, prevent page overflow
   and keep the slider constrained to the drawer width so only the cards scroll */
.gam-drawer-panel .gam-trending-slider-wrapper {
    left: -24px !important;
    right: -24px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: -20px !important;
    /* compact spacing */
    margin-bottom: -20px !important;
    /* compact spacing */
    width: calc(100% + 48px) !important;
    /* expand to fill drawer + padding */
    padding: 0 24px !important;
    /* restore padding inside slider */
    box-sizing: border-box;
    overflow: visible;
    /* allow card shadows to show */
}

.gam-trending-slider {
    display: flex;
    gap: 50px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* center the active card by adding side padding equal to half the visible area minus card width
       account for card margin (30px each side) so visual card size is 360px (300 + 60) */
    padding-left: calc((100% - 360px) / 2);
    padding-right: calc((100% - 360px) / 2);
    scroll-snap-type: x mandatory;
}

.gam-trending-slider::-webkit-scrollbar {
    display: none;
}

.gam-trending-card {
    flex: 0 0 300px;
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--glass-bg-card);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    overflow: hidden;
    transition: box-shadow 0.25s ease;
    backdrop-filter: blur(8px);
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    /* light mode shadow */
    margin: 30px;
    /* 30px space around each card so shadow isn't cropped */
}

body.gam-dark-mode .gam-trending-card {
    background: rgba(107, 23, 181, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.gam-trending-card:hover {
    /* no transform on hover; small shadow change only */
    transform: none;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.04);
    z-index: 2;
}

body.gam-dark-mode .gam-trending-card:hover {
    background: rgba(255, 255, 255, 0.05);
}

.gam-trending-card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    clip-path: polygon(0 0, 100% 0, 100% 92%, 50% 100%, 0 92%);
    margin-bottom: -10px;
    display: block;
    position: relative;
}

/* Dark overlay with feather fade effect */
.gam-trending-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.5) 100%);
    pointer-events: none;
    clip-path: polygon(0 0, 100% 0, 100% 92%, 50% 100%, 0 92%);
}

.gam-trending-card-content {
    padding: 24px 20px 20px;
}

/* Progress Bar (ensure visible in drawer and slider) */
.gam-progress-bg {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 9999px;
    overflow: hidden;
    margin-bottom: 12px;
}

.gam-progress-fill {
    height: 100%;
    background: var(--gam-primary);
    border-radius: 9999px;
    transition: width 0.6s ease-out;
}

body.gam-dark-mode .gam-progress-bg {
    background: rgba(255, 255, 255, 0.06);
}

body.gam-dark-mode .gam-progress-fill {
    background: var(--gam-secondary);
}

.gam-trending-card-title {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 8px;
    line-height: 1.3;
    color: var(--text-editor);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gam-trending-card-excerpt {
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-editor-muted);
    margin: 0 0 12px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gam-trending-card-meta {
    display: none;
}

.gam-trending-card-meta .gam-card-author {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-editor-muted);
    margin-bottom: 0;
}

.gam-trending-card-meta .gam-card-author span {
    display: inline;
}

/* Donation badge overlay */
.gam-trending-donation-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    left: auto;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 10;
}

.gam-trending-card {
    scroll-snap-align: center;
}

.gam-trending-card-stats {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.gam-trending-card-stats .gam-raised-amount {
    font-weight: 800;
    font-size: 16px;
    color: var(--text-editor);
}

.gam-trending-card-stats .gam-goal-amount {
    font-size: 12px;
    color: var(--text-editor-muted);
    font-weight: 500;
}

.gam-trending-card-stats .gam-last-donation {
    font-size: 11px;
    color: var(--text-editor-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

.gam-card-tag {
    position: absolute;
    top: 16px;
    left: 16px;
    right: auto;
    background: rgba(255, 255, 255, 0.95);
    color: #222;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(6px);
}

.gam-percent-funded {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-editor-muted);
}

.gam-stats-left {
    text-align: left;
}

.gam-stats-right {
    text-align: right;
}

.gam-trending-nav {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.gam-trending-nav-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-editor);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

body.gam-dark-mode .gam-trending-nav-btn {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.1);
}

.gam-trending-nav-btn:hover {
    background: var(--gam-primary);
    color: white;
    border-color: var(--gam-primary);
}

body.gam-dark-mode .gam-trending-nav-btn:hover {
    background: var(--gam-secondary);
    color: black;
    border-color: var(--gam-secondary);
}

/* PUSH LOGIC */
body.gam-drawer-open #gam-spa-body {
    transform: scale(0.92) translateX(-20px);
    border-radius: 32px;
    pointer-events: none;
    filter: grayscale(0.5) blur(2px);
}

body.gam-menu-drawer-open #gam-spa-body {
    transform: translate3d(280px, 0, 0);
    pointer-events: none;
}

/* User overrides: hide impact section inside spa body */
#gam-spa-body .gam-impact-section {
    display: none;
}

/* Adjust drawer panel padding inside app preview container */
#app-preview-container .gam-drawer-panel {
    padding-left: 3px;
    padding-right: 0px;
}

/* Remove extra horizontal padding on slider wrapper when wrapped by .px-4 inside drawer */
.gam-drawer-panel .px-4 .gam-trending-slider-wrapper {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

/* Drawer action buttons */
.gam-drawer-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
    padding: 0 12px;
    align-items: center;
    /* center buttons instead of stretch */
}

.gam-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border-radius: 10px;
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    min-width: 160px;
    max-width: 320px;
}

.gam-action-start {
    background: var(--gam-primary);
    color: #fff;
    box-shadow: 0 6px 18px rgba(149, 0, 255, 0.16);
    padding: 12px 22px;
    /* increase horizontal padding by ~3pt (≈4px) */
    font-size: 16px;
    /* increase font-size by ~2pt */
}

/* Make Start button golden in dark mode */
body.gam-dark-mode .gam-action-start {
    background: #F6C343;
    /* golden */
    color: #1a1a1a;
    box-shadow: 0 8px 22px rgba(246, 195, 67, 0.18);
}

.gam-action-start:hover {
    transform: translateY(-2px);
}

.gam-action-donate {
    background: transparent;
    color: var(--text-editor);
    border: none;
    box-shadow: none;
    padding: 10px 18px;
}

.gam-action-donate:hover {
    background: transparent;
    text-decoration: underline;
}

/* Adjust spacing around the slider navigation buttons */
.gam-trending-nav {
    margin-top: -30px;
    /* pull nav up */
    margin-bottom: 30px;
    /* add space below nav */
}

/* TOP CONTROLS */
.gam-top-left-group,
.gam-top-controls {
    position: absolute;
    top: 18px;
    transition: transform var(--drawer-transition-duration) var(--drawer-transition-easing),
        opacity 0.4s ease,
        visibility 0.4s ease;
}

.gam-top-left-group {
    left: 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 1300;
}

/* Push logic now handled by parent header on desktop, but keep for mobile */
@media (max-width: 1023px) {
    body.gam-menu-drawer-open .gam-top-left-group {
        transform: translateX(280px);
    }
}

.gam-top-controls {
    right: 18px;
    display: flex;
    gap: 16px;
    align-items: center;
    z-index: 1600;
}

/* Ensure controls stay on top of drawers when open */
body.gam-menu-drawer-open .gam-top-left-group,
body.gam-drawer-open .gam-top-controls {
    z-index: 100000;
}

body.gam-drawer-open .gam-top-controls {
    transform: none;
}

/* Distraction-Free Header Override */
.gam-distraction-free .gam-brand-logo-container,
.gam-distraction-free .gam-top-controls nav,
.gam-distraction-free .gam-create-btn,
.gam-distraction-free .gam-trending-toggle {
    display: none !important;
}

/* Dark Overlay for Distraction-Free Pages */
.gam-distraction-free .gam-drawer-overlay {
    background: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(8px) !important;
    pointer-events: none !important;
    /* Ensure it doesn't block interactions when 'invisible' */
    z-index: 1800 !important;
    /* Above page content but below lifted drawer/cards */
}

/* Ensure the Left Drawer section is above the overlay and SOLID WHITE in light mode */
.gam-distraction-free .gam-menu-drawer-wrapper {
    z-index: 2500 !important;
    background: #ffffff !important;
}

/* Ensure Campaign Cards in the slider are above the overlay */
.gam-distraction-free .slider-stage {
    z-index: 2000 !important;
    position: relative;
}

/* Ensure Hamburger remains clearly visible and on top of everything */
.gam-distraction-free .gam-top-left-group {
    z-index: 3000 !important;
}

@media (max-width: 1024px) {
    body.gam-menu-drawer-open .gam-top-controls {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-10px);
    }
}

/* Desktop Menu Links */
.gam-top-controls nav {
    transition: opacity 0.4s ease, transform 0.4s ease;
}

body.gam-drawer-open .gam-top-controls nav,
body.gam-menu-drawer-open .gam-top-controls nav {
    opacity: 0;
    pointer-events: none;
    transform: translateX(15px);
}

/* Menu Link Hover Effect */
.gam-top-controls nav a {
    position: relative;
    padding-bottom: 2px;
    transition: color 0.3s ease;
    color: var(--gam-nav-link);
}

.gam-top-controls nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--gam-primary);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease-out;
    border-radius: 2px;
}

.gam-top-controls nav a:hover {
    color: var(--gam-primary);
}

.gam-top-controls nav a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

body.gam-dark-mode .gam-top-controls nav a::after {
    background-color: var(--gam-secondary);
}

body.gam-dark-mode .gam-top-controls nav a:hover {
    color: var(--gam-secondary);
}

.gam-control-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--gam-shadow);
    color: var(--gam-text-main);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.gam-control-btn:hover {
    transform: translateY(-2px);
    background: var(--gam-primary);
    color: white;
    box-shadow: 0 10px 20px rgba(149, 0, 255, 0.2);
}

/* HAMBURGER SPECIFIC STYLE OVERRIDE */
.gam-top-left-group .gam-control-btn {
    background: transparent;
    box-shadow: none;
    border-color: transparent;
    backdrop-filter: none;
}

.gam-top-left-group .gam-control-btn:hover {
    transform: scale(1.1);
    color: var(--gam-primary);
    box-shadow: none;
    background: rgba(var(--bg-editor-rgb), 0.5);
}

body.gam-dark-mode .gam-top-left-group .gam-control-btn:hover {
    color: var(--gam-secondary);
}

.gam-trending-toggle svg {
    transition: transform 0.5s var(--drawer-transition-easing);
}

body.gam-drawer-open .gam-trending-toggle svg {
    transform: rotate(180deg);
}

.gam-create-btn {
    background: var(--gam-primary);
    color: white;
    padding: 10px 24px;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(149, 0, 255, 0.3);
    transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    position: relative;
    overflow: hidden;
}

.gam-create-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(149, 0, 255, 0.45);
    filter: brightness(1.1);
}

body.gam-dark-mode .gam-create-btn {
    background: var(--gam-secondary);
    color: black;
    box-shadow: 0 4px 12px rgba(255, 180, 0, 0.3);
}

/* Fade out the start button when the right drawer is open */
body.gam-drawer-open .gam-create-btn {
    opacity: 0;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
}

/* When drawer is open, nudge the title and slider up for a compact look */
.gam-drawer-panel>h3,
.gam-drawer-panel .gam-trending-slider-wrapper {
    transition: transform 0.35s ease;
}

body.gam-drawer-open .gam-drawer-panel>h3,
body.gam-drawer-open .gam-drawer-panel .gam-trending-slider-wrapper {
    transform: translateY(-30px);
}

/* === LEFT MENU STYLING === */
.gam-menu-content {
    flex: 1;
    padding: 80px 12px 24px 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.gam-menu-user-profile {
    padding-bottom: 25px;
    border-bottom: 1px solid var(--header-line);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.gam-menu-user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 16px;
    background: var(--gam-primary);
    color: white;
    box-shadow: var(--gam-shadow);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.gam-menu-user-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-editor);
    margin: 0;
}

.gam-menu-user-subtitle {
    font-size: 12px;
    color: var(--text-editor-muted);
    margin: 0;
}

.gam-menu-drawer-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 4px;
    color: var(--text-editor);
    border: 1px solid transparent;
}

.gam-menu-drawer-item.active {
    background: rgba(149, 0, 255, 0.1);
    color: var(--gam-primary);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(149, 0, 255, 0.2);
}

body.gam-dark-mode .gam-menu-drawer-item.active {
    background: rgba(255, 180, 0, 0.1);
    color: var(--gam-secondary);
    border: 1px solid rgba(255, 180, 0, 0.3);
}

/* TOP MENU LIST: Subtle Glass Hover */
#gam-primary-menu .gam-menu-drawer-item:hover {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--gam-primary);
    transform: translateX(5px);
}

/* BOTTOM MENU LIST & SIGN OUT */
.gam-menu-section-divider .gam-menu-drawer-item,
.gam-menu-signout-btn {
    font-size: 13px;
    color: var(--text-editor);
    opacity: 1;
    margin-bottom: 3px;
}

.gam-menu-section-divider .gam-menu-drawer-item:hover,
.gam-menu-signout-btn:hover {
    background: transparent;
    backdrop-filter: none;
    border-color: transparent;
    color: var(--gam-primary);
    transform: translateX(3px);
}

/* Slightly smaller icons for bottom drawer items to match label size */
.gam-menu-section-divider .gam-menu-drawer-item i,
.gam-menu-signout-btn i {
    width: 18px !important;
    height: 18px !important;
}

/* Top drawer icons: slightly larger */
#gam-primary-menu .gam-menu-drawer-item i {
    width: 22px !important;
    height: 22px !important;
}

/* Tighter gap for bottom section links */
.gam-menu-section-divider .gam-menu-drawer-item a {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
    text-decoration: none;
    color: inherit;
}

.gam-menu-drawer-item a {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 16px;
    text-decoration: none;
    color: inherit;
}

.gam-menu-section-divider {
    margin-top: 16px;
    padding-top: 16px;
    padding-bottom: 5px;
    border-top: 1px solid var(--header-line);
}

body.gam-dark-mode #gam-primary-menu .gam-menu-drawer-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--gam-secondary);
}

body.gam-dark-mode #gam-primary-menu .gam-menu-drawer-item.active {
    background: rgba(255, 180, 0, 0.1);
    color: var(--gam-secondary);
    border: 1px solid rgba(255, 180, 0, 0.3);
}

body.gam-dark-mode .gam-menu-section-divider .gam-menu-drawer-item:hover,
body.gam-dark-mode .gam-menu-signout-btn:hover {
    color: var(--gam-secondary);
}

.gam-menu-drawer-footer {
    padding: 20px 24px 32px;
    border-top: 1px solid var(--header-line);
    margin-top: auto;
    flex-shrink: 0;
}

.gam-menu-footer-links {
    margin-bottom: 8px;
    display: flex;
    gap: 16px;
}

.gam-menu-footer-links a {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-editor-muted);
    text-decoration: none;
    opacity: 0.5;
    transition: all 0.2s;
}

.gam-menu-footer-links a:hover {
    opacity: 1;
    color: var(--gam-primary);
}

body.gam-dark-mode .gam-menu-footer-links a:hover {
    color: var(--gam-secondary);
}

.gam-menu-footer-text {
    font-size: 11px;
    color: var(--text-editor-muted);
    margin: 0;
    opacity: 0.4;
}

.gam-menu-theme-toggle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    color: var(--gam-primary);
}

.gam-menu-theme-toggle:hover {
    transform: rotate(15deg) scale(1.1);
}

body.gam-dark-mode .gam-menu-theme-toggle {
    color: var(--gam-secondary);
}

body.gam-dark-mode .gam-menu-user-avatar {
    background: var(--gam-secondary);
    color: black;
}

/* PLACEHOLDER STYLING */
.view-placeholder {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
}

.placeholder-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 1.5rem;
    color: var(--gam-primary);
    opacity: 0.2;
}

body.gam-dark-mode .placeholder-icon {
    color: var(--gam-secondary);
}

.gam-brand-logo-container {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.gam-brand-logo-container:hover {
    opacity: 0.8;
}

/* Ensure logo image and text stay on one line */
.gam-brand-logo-container>a {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gam-brand-logo-img {
    display: inline-block;
    vertical-align: middle;
}

.gam-brand-text {
    white-space: nowrap;
}

.view-section {
    display: none;
}

.view-section.active {
    display: block;
}

.gam-page-loader {
    position: absolute;
    inset: 0;
    background: var(--bg-editor);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s;
}

.gam-page-loader.loaded {
    opacity: 0;
    pointer-events: none;
}

/* === AMBIENT BACKGROUND === */
.gam-ambient-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.gam-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    /* Re-adding blur but with a safer, higher value for modern Chrome */
    opacity: 0.5;
    animation: gam-float 25s infinite ease-in-out;
    transform: translateZ(0);
}

.gam-blob-1 {
    top: -10%;
    left: -10%;
    width: 80vw;
    height: 80vw;
    background: radial-gradient(circle at center, var(--blob-color-1) 0%, transparent 70%);
    animation-delay: 0s;
}

.gam-blob-2 {
    bottom: -10%;
    right: -10%;
    width: 90vw;
    height: 90vw;
    background: radial-gradient(circle at center, var(--blob-color-2) 0%, transparent 70%);
    animation-delay: -7s;
}

@keyframes gam-float {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }

    33% {
        transform: translate(40px, -60px) scale(1.1) rotate(5deg);
    }

    66% {
        transform: translate(-30px, 30px) scale(0.9) rotate(-5deg);
    }

    100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
}

/* === UNIFIED PAGE TITLE STYLING === */
.gam-page-title {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 15px;
    background: linear-gradient(135deg, var(--gam-primary) 0%, #ff0080 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
}

body.gam-dark-mode .gam-page-title {
    background: linear-gradient(135deg, #fff 0%, var(--gam-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* === FOOTER STYLES === */
#gam-site-footer {
    position: relative;
    color: var(--footer-text);
    padding-top: 60px;
    padding-bottom: 60px;
    margin-top: 80px;
    /* Margin to allow the background to bleed up */
    width: 100%;
    transition: color 0.5s ease;
    z-index: 1;
}

/* BREAKOUT SEAMLESS BACKGROUND */
#gam-site-footer::before {
    content: '';
    position: absolute;
    top: -80px;
    /* Bleed UP into the page */
    left: 50%;
    width: 100vw;
    height: calc(100% + 80px);
    transform: translateX(-50%);
    background: var(--footer-top-bg);
    z-index: -1;
    pointer-events: none;

    /* Feather that goes both ways */
    mask-image: linear-gradient(to bottom, transparent 0, black 160px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 160px);
    transition: background 0.5s ease;
}

#gam-site-footer .footer-column-title {
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 24px;
    color: #0f172a !important;
    /* Rich Navy Black */
}

body.gam-dark-mode #gam-site-footer .footer-column-title {
    color: #f8fafc !important;
    /* Rich Sky White */
}

.footer-text-about {
    font-size: 15px;
    line-height: 1.6;
    color: var(--footer-text-muted);
    margin-bottom: 24px;
}

.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--footer-text-muted);
}

.footer-contact-item i {
    width: 14px;
    font-size: 14px;
    color: var(--gam-primary);
}

body.gam-dark-mode .footer-contact-item i {
    color: var(--gam-secondary);
}

.footer-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav-list li {
    margin-bottom: 10px;
}

.footer-nav-list a {
    color: var(--footer-text-muted);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease, transform 0.2s ease;
    display: inline-block;
}

.footer-nav-list a:hover {
    color: var(--gam-primary);
    transform: translateY(-2px);
}

body.gam-dark-mode .footer-nav-list a:hover {
    color: var(--gam-secondary);
}

/* Floating Footer Card */
.footer-floating-card {
    background: var(--footer-bottom-bg);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 40px;
    padding: 30px 40px;
    margin-top: 60px;
    margin-bottom: 0;
    /* Space from the bottom base */
    box-shadow: var(--footer-card-shadow);
    color: var(--footer-text);
    transition: all 0.5s ease;
}

.footer-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

body.gam-dark-mode .footer-card-top {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.footer-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
}

.footer-bottom-nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 24px;
}

.footer-bottom-nav a {
    color: var(--footer-text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    opacity: 0.8;
}

.footer-bottom-nav a:hover {
    opacity: 1;
}

.copyright-text {
    font-size: 13px;
    opacity: 0.7;
}

.social-links {
    display: flex;
    gap: 16px;
}

.social-link {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.05);
    color: var(--footer-text);
    font-size: 16px;
    transition: all 0.3s ease;
}

body.gam-dark-mode .social-link {
    background: rgba(255, 255, 255, 0.1);
}

.social-link:hover {
    background: var(--gam-primary);
    color: #fff;
    transform: translateY(-3px);
}

body.gam-dark-mode .social-link:hover {
    background: var(--gam-secondary);
    color: #000;
}

@media (max-width: 1024px) {
    .footer-floating-card {
        padding: 24px;
        border-radius: 24px;
    }
}

@media (max-width: 768px) {

    .footer-card-top,
    .footer-card-bottom {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .footer-bottom-nav {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* --- DESKTOP CAMPAIGN TEMPLATE OVERRIDES --- */
@media (min-width: 1024px) {

    /* Target strict campaign IDs on Body */
    body.single-campaign #gam-spa-body,
    body.single-goaidme_campaign #gam-spa-body {
        padding-top: 80px !important;
        min-height: auto !important;
        /* Allow shrink */
    }

    /* Remove footer purely for campaign single */
    body.single-campaign #gam-site-footer,
    body.single-goaidme_campaign #gam-site-footer {
        display: none !important;
        margin-top: 0 !important;
    }

    /* Adjust the internal wrapper to avoid double padding */
    body.single-campaign .goaidme-page-wrapper,
    body.single-goaidme_campaign .goaidme-page-wrapper {
        padding-top: 0 !important;
        /* Rely on body padding */
        padding-bottom: 0 !important;
        align-items: flex-start !important;
        /* Force top alignment */
        min-height: calc(100vh - 80px) !important;
    }

    /* Ensure content card hits the bottom */
    body.single-campaign .goaidme-content-card,
    body.single-goaidme_campaign .goaidme-content-card {
        bottom: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* === HAND-SHUFFLE STACK SLIDER (Original Logic) === */
.slider-stage {
    perspective: 2000px;
    width: 100%;
    height: 650px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transform-style: preserve-3d;
}

.slider-item {
    position: absolute;
    width: 100%;
    max-width: 440px;
    pointer-events: none;
    opacity: 0;
    transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1), filter 1s ease, opacity 0.8s ease;
}

/* Original Hand-Shuffle Positions */
.slider-item.pos-hidden-left {
    transform: translate3d(-150%, 0, -600px) rotateY(-45deg);
    opacity: 0;
    filter: blur(20px);
}

.slider-item.pos-peek {
    z-index: 10;
    opacity: 0.3;
    filter: blur(15px);
    transform: translate3d(-95%, 0, -500px) rotateY(45deg) scale(0.8);
}

.slider-item.pos-active {
    z-index: 20;
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) rotateY(0deg) scale(1);
    pointer-events: auto;
}

.slider-item.pos-exit {
    z-index: 30;
    opacity: 0;
    filter: blur(5px);
    transform: translate3d(150%, -200px, 800px) rotate(25deg) scale(1.5);
    transition: transform 0.9s cubic-bezier(0.45, 0, 0.55, 1), opacity 0.7s ease;
}

.no-transition {
    transition: none !important;
}

/* === NEW REFINED CAMPAIGN CARD (Centered Title, Shimmer Progress) === */
.goaidme-sidebar-card {
    background: #ffffff;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.goaidme-profile-image {
    height: 220px;
    overflow: hidden;
    position: relative;
}

.goaidme-profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.goaidme-profile-content {
    padding: 32px 32px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.goaidme-profile-title {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    margin-bottom: 8px;
    margin-top: 0 !important;
}

.goaidme-org-text {
    font-size: 14px;
    font-weight: 700;
    color: var(--gam-primary);
    margin-bottom: 12px;
}

.goaidme-statement {
    font-size: 15px;
    color: #64748b;
    line-height: 1.5;
    font-style: italic;
    opacity: 0.9;
}

.progress-section {
    margin-top: auto;
    width: 100%;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 12px;
    text-align: left;
}

.raised-info {
    display: flex;
    flex-direction: column;
}

.raised-amount {
    display: block;
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
}

.raised-label {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.progress-percent {
    font-size: 18px;
    font-weight: 800;
    color: var(--gam-primary);
}

.progress-bar-track {
    height: 10px;
    background: #f1f5f9;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    margin-bottom: 8px;
}

.progress-bar-fill {
    height: 100%;
    background: var(--gam-primary);
    border-radius: 10px;
    position: relative;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-shimmer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.4) 50%,
            rgba(255, 255, 255, 0) 100%);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.goal-text {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    text-align: center;
}

.goal-value {
    color: #0f172a;
    font-weight: 700;
}

.goaidme-profile-actions {
    display: flex;
    padding: 0;
    border-top: 1px solid #f1f5f9;
    background: #ffffff;
}

.action-btn-half {
    flex: 1;
    padding: 20px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: background 0.2s ease;
    color: #0f172a;
}

.action-btn-half:first-child {
    border-right: 1px solid #f1f5f9;
    background: #fdf2f2;
    color: #ef4444;
}

.action-btn-half:hover {
    background: #f8fafc;
}

.action-btn-half:first-child:hover {
    background: #fee2e2;
}

.action-btn-half.share {
    background: #fff;
}

.action-btn-half:hover {
    background: #f8fafc;
}

.action-btn-half:first-child:hover {
    background: #fee2e2;
}

/* Save Progress Floating Button */
.btn-save-progress {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 200;
    background: white;
    padding: 10px 20px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-save-progress:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

@media (max-width: 900px) {
    .gam-section-title {
        font-size: 23px !important;
        line-height: 1.1 !important;
    }
}

/* Unified Page Titles */
.gam-page-title {
    font-size: clamp(3rem, 8vw, 5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 24px;
    background: linear-gradient(135deg, var(--gam-primary) 0%, #ff0080 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    word-break: break-word;
    hyphens: auto;
}

body.gam-dark-mode .gam-page-title {
    background: linear-gradient(135deg, #fff 0%, var(--gam-secondary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Global Page Container */
.gam-page-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem 100px;
    animation: fadeIn 0.6s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 900px) {
    .gam-page-title {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }
}

/* =========================================
   CAMPAIGN GALLERY & UPDATES STYLES
   ========================================= */

/* Gallery Upload Dropzone */
.gallery-upload-zone {
    border: 2px dashed rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.gallery-upload-zone:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--gam-primary);
}

body.gam-dark-mode .gallery-upload-zone:hover {
    border-color: var(--gam-secondary);
}

/* Updates Modal Scrollbar & Layout adjustments */
#gam-updates-modal .update-form textarea {
    resize: none;
}

#gam-updates-modal .update-row, #gam-gallery-modal .gallery-tile {
    animation: fadeIn 0.4s ease-out forwards;
}