/* ============================================
   SAFE AREA INSETS FOR MOBILE DEVICES
   ============================================ */
:root {
    --safe-area-inset-top: env(safe-area-inset-top, 0px);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-inset-left: env(safe-area-inset-left, 0px);
    --safe-area-inset-right: env(safe-area-inset-right, 0px);
}

/* Apply safe area padding to body */
body {
    padding-top: var(--safe-area-inset-top);
    padding-bottom: var(--safe-area-inset-bottom);
    padding-left: var(--safe-area-inset-left);
    padding-right: var(--safe-area-inset-right);
}

/* Apply to html for full coverage */
html {
    height: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #1a1a2e;
}

/* Headers - add safe area top padding */
.login-header,
.login-header.minimal,
.home-header,
.page-header,
.modal-header,
.header-top {
    padding-top: calc(var(--safe-area-inset-top) + 12px) !important;
}

/* Footers - add safe area bottom padding */
.fluus-global-footer,
.bottom-nav,
.tab-bar,
.app-footer,
footer {
    padding-bottom: calc(var(--safe-area-inset-bottom) + 12px) !important;
}

/* Modal content - ensure modals respect safe areas */
.modal-overlay,
.modal-content {
    padding-top: var(--safe-area-inset-top);
    padding-bottom: var(--safe-area-inset-bottom);
}

/* Full page elements should account for safe areas */
.page,
.login-page,
.home-page,
.balance-page {
    min-height: calc(100vh - var(--safe-area-inset-top) - var(--safe-area-inset-bottom));
    padding-top: var(--safe-area-inset-top);
}

/* ============================================
   ORIGINAL STYLES BELOW
   ============================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Global responsive images */
img, video, iframe {
    max-width: 100% !important;
    height: auto;
}

/* Prevent horizontal scroll on all pages */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

.page, .home-page, .login-page, .event-landing-page {
    overflow-x: hidden;
    max-width: 100% !important;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #1a1a2e;
    min-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    height: auto;
    color: #1f2937;
}

.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* ============================================
   LOGIN PAGE
   ============================================ */
.login-page {
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f0f1a 100%);
    min-height: 100vh;
    min-height: 100dvh;  /* Dynamic viewport height for mobile */
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Login page content area - no internal scroll, page scrolls instead */
.login-page .auth-accordion,
.login-page .branded-auth-section {
    flex: 1;
    overflow: visible;
}

/* Login page footer stays fixed at bottom */
.login-page .fluus-global-footer {
    flex-shrink: 0;
}

/* Hide organizers on main landing page - feature cards replace them */
.login-page .organizers-section {
    display: none !important;
}

/* Balanced layout - carousel fills available space */
.login-page .event-carousel-container {
    flex: 0 0 auto;
    height: 40vh;
    max-height: 320px;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    margin: 8px 0 12px 0;  /* Default spacing above/below carousel */
}

.login-page .event-carousel-track {
    height: 100%;
    min-height: 160px;
    max-height: 260px;
}

.login-page .event-carousel-item {
    width: 45vw;
    max-width: 180px;
    height: 28vh;
    max-height: 220px;
    min-height: 140px;
}

.login-page .event-carousel-item.center {
    width: 55vw;
    max-width: 220px;
    height: 32vh;
    max-height: 260px;
    min-height: 160px;
}

/* ============================================
   MOBILE LAYOUT - FLEXBOX WITH CENTERED FEATURES
   ============================================ */
@media (max-width: 768px) {
    .login-page {
        height: 100vh;
        height: 100dvh;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }

    /* Header - stays at top */
    .login-page .login-header.minimal {
        flex: 0 0 auto;
        padding: 8px 56px 8px 16px;
    }

    /* Carousel - UNCHANGED, stays in original position */
    .login-page .event-carousel-container {
        flex: 0 0 auto;
        /* Keep original carousel sizing */
    }

    /* Features - TAKES REMAINING SPACE & CENTERS CONTENT */
    .features-section {
        flex: 1 1 auto;  /* Take all remaining space */
        display: flex;
        flex-direction: column;
        justify-content: center;  /* CENTER content vertically */
        align-items: center;
        padding: 0 12px;
        min-height: 0;
    }
    .features-section > * {
        width: 100% !important;
    }
    .features-title {
        text-align: center;
        font-size: 12px;
        margin: 0 0 8px 0;
    }
    .features-grid {
        gap: 8px;
    }
    .feature-card {
        padding: 8px 6px;
    }

    /* Auth/Actions - stays at bottom */
    .login-page .auth-accordion {
        flex: 0 0 auto;
        padding: 8px 12px;
    }

    /* Footer - stays at very bottom */
    .login-page .fluus-global-footer {
        flex: 0 0 auto;
        padding: 6px 12px;
    }
    .login-page .fluus-global-footer .footer-logo {
        width: 14px;
        height: 14px;
    }
    .login-page .fluus-global-footer .footer-slogan {
        font-size: 10px;
    }
}

/* Regular phones (iPhone 14, etc.) */
@media (max-width: 430px) {
    .login-page .fluus-global-footer {
        padding: 4px 12px;
    }
    .login-page .fluus-global-footer .footer-slogan {
        font-size: 9px;
    }
}

/* Short phones (iPhone SE height ~667px) */
@media (max-height: 700px) {
    .login-page .login-header.minimal {
        padding: 6px 52px 6px 12px;
    }
    .login-page .header-slogan-text {
        font-size: 12px;
    }
    .login-page .auth-accordion {
        padding: 6px 12px;
    }
    .features-title {
        font-size: 11px;
        margin-bottom: 6px;
    }
    .features-grid {
        gap: 6px;
    }
    .feature-card {
        padding: 6px 4px;
        gap: 3px;
    }
    .feature-text {
        font-size: 9px;
    }
    .login-page .fluus-global-footer {
        padding: 4px 12px;
    }
    .login-page .fluus-global-footer .footer-logo {
        width: 12px;
        height: 12px;
    }
    .login-page .fluus-global-footer .footer-slogan {
        font-size: 9px;
    }
}

/* Very short phones (iPhone SE 1st gen ~568px) */
@media (max-height: 600px) {
    .login-page .login-header.minimal {
        padding: 4px 50px 4px 10px;
    }
    .login-page .header-slogan-text {
        font-size: 11px;
    }
    .login-page .auth-accordion {
        padding: 4px 10px;
    }
    .features-title {
        display: none;  /* Hide title on very short phones */
    }
    .features-grid {
        gap: 4px;
    }
    .feature-card {
        padding: 5px 3px;
    }
    .feature-icon svg {
        width: 14px;
        height: 14px;
    }
    .feature-text {
        font-size: 8px;
    }
    .login-page .fluus-global-footer {
        padding: 3px 12px;
    }
    .login-page .fluus-global-footer .footer-slogan {
        display: none;  /* Hide slogan on very short phones */
    }
}

.login-header {
    text-align: center;
    padding: 60px 20px 40px;
    color: white;
}

/* Minimal header - logo top-left with room for hamburger */
.login-header.minimal {
    text-align: left;
    padding: 16px 60px 12px 20px; /* Right padding for hamburger button */
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.logo-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-img-small {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: contain;
}

.logo-text {
    font-size: 22px;
    font-weight: 700;
    color: white;
}

.header-slogan-text {
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    margin: 0;
    padding-left: 46px; /* Align with logo text */
}

.login-header .logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-img {
    height: 60px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 20px rgba(0,0,0,0.3));
}

.login-header .tagline {
    margin-top: 8px;
    opacity: 0.9;
    font-size: 16px;
}

.login-form {
    flex: 1;
    background: transparent;
    border-radius: 0;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

.form-group select,
.form-group input {
    width: 100% !important;
    padding: 16px;
    font-size: 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: white;
}

.form-group select:focus,
.form-group input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(105, 43, 205, 0.1);
}

.form-group input::placeholder {
    color: #9ca3af;
}

.loading-small {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
}

.error-message {
    background: rgba(255, 255, 255, 0.95);
    color: #dc2626;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    text-align: center;
}

.switch-mode {
    text-align: center;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    margin-top: 8px;
}

.link-btn {
    background: none;
    border: none;
    color: var(--brand-primary);
    font-weight: 600;
    cursor: pointer;
    padding: 4px;
}

/* ============================================
   CSS CUSTOM PROPERTIES - FLUUS BRANDING COLORS
   Default Fluus brand: Purple #1a1a2e with white text
   These get overridden for branded event pages
   ============================================ */
:root {
    --brand-primary: #1a1a2e;
    --brand-secondary: #ffffff;
    --brand-primary-dark: #0f0f1a;
    --brand-text-on-primary: #ffffff;
    --brand-text-on-secondary: #1a1a2e;
    --brand-gradient: linear-gradient(135deg, #1a1a2e 0%, #0f0f1a 100%);
}

/* ============================================
   EVENT CAROUSEL
   ============================================ */
.event-carousel-container {
    padding: 4px 0;
    margin-bottom: 0;
    overflow: hidden;
    position: relative;
}

.event-carousel-loading {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

.carousel-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.event-carousel-empty {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255,255,255,0.8);
}

.event-carousel-track {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 280px;
    overflow: hidden;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
}

.event-carousel-item {
    position: absolute;
    width: 160px;
    height: 200px;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    will-change: transform, opacity;
}

.event-carousel-item.side {
    filter: brightness(0.85);
}

.event-carousel-item.center {
    width: 200px;
    height: 250px;
    filter: brightness(1);
}

.event-carousel-image {
    width: 100% !important;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.event-carousel-image img {
    width: 100% !important;
    height: 100%;
    object-fit: cover;
}

.event-carousel-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
    pointer-events: none;
}

.event-carousel-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 14px 12px;
    color: white;
    text-align: left;
    pointer-events: none; /* Allow clicks to pass through to carousel item */
}

.event-carousel-title {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 3px 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    line-height: 1.2;
    /* Limit to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.event-carousel-item.center .event-carousel-title {
    font-size: 16px;
}

.event-carousel-location {
    font-size: 11px;
    margin: 0 0 2px 0;
    opacity: 0.9;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-carousel-datetime {
    font-size: 10px;
    margin: 0;
    opacity: 0.8;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.event-carousel-logo {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    background: white;
    pointer-events: none; /* Allow clicks to pass through to carousel item */
}

.event-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
}

.carousel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.carousel-dot.active {
    background: white;
    transform: scale(1.3);
}

.event-carousel-hint {
    text-align: center;
    color: rgba(255,255,255,0.6);
    font-size: 11px;
    margin-top: 8px;
}

/* ============================================
   ORGANIZERS SECTION
   ============================================ */
.organizers-section {
    padding: 16px 20px 20px;
}

.organizers-title {
    color: white;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Old card grid - keeping for backwards compatibility */
.organizers-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    max-width: 500px;
    margin: 0 auto;
}

/* New logo-only grid - 4 per row */
.organizers-logo-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    max-width: 340px;
    margin: 0 auto;
}

.organizer-logo-item {
    aspect-ratio: 1;
    background: rgba(255,255,255,0.15);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

.organizer-logo-item:hover {
    background: rgba(255,255,255,0.3);
    transform: scale(1.05);
}

.organizer-logo-item:active {
    transform: scale(0.98);
}

.organizer-logo-item img {
    width: 100% !important;
    height: 100%;
    object-fit: contain;
}

.organizer-logo-initial {
    width: 100% !important;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    color: white;
    border-radius: 8px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.organizer-card {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 20px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid rgba(255,255,255,0.1);
}

.organizer-card:hover {
    background: rgba(255,255,255,0.25);
    transform: translateY(-2px);
}

.organizer-card:active {
    transform: translateY(0);
}

.organizer-card-logo {
    width: 70px;
    height: 70px;
    border-radius: 14px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: rgba(255,255,255,0.2);
}

.organizer-card-logo img {
    width: 100% !important;
    height: 100%;
    object-fit: contain;
}

.organizer-card-initial {
    font-size: 32px;
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.organizer-card-name {
    color: white;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.organizer-card-events {
    color: rgba(255,255,255,0.7);
    font-size: 12px;
}

.organizer-card-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 4px;
}

.organizer-card-likes {
    display: flex;
    align-items: center;
    gap: 3px;
    color: rgba(255,255,255,0.7);
    font-size: 12px;
}

.organizer-card-likes .icon {
    width: 12px;
    height: 12px;
}

.organizers-loading {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

/* ============================================
   FEATURE CARDS - 3x2 GRID (compact, SVG icons)
   ============================================ */
.features-section {
    padding: 0 16px 10px;
    margin-top: auto;
    flex-shrink: 0;
}

.features-title {
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 10px 0;
    padding: 0;
}

.features-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px;
    max-width: 360px;
    margin: 0 auto;
}

.feature-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.feature-card:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
}

.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.feature-icon svg {
    width: 18px;
    height: 18px;
    stroke: rgba(255, 255, 255, 0.85);
    fill: none;
}

.feature-text {
    color: rgba(255, 255, 255, 0.85);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Responsive feature cards */
@media (max-width: 360px) {
    .features-grid {
        gap: 6px;
    }
    .feature-card {
        padding: 8px 6px;
        gap: 4px;
    }
    .feature-icon,
    .feature-icon svg {
        width: 16px;
        height: 16px;
    }
    .feature-text {
        font-size: 10px;
    }
}

@media (min-width: 400px) {
    .feature-card {
        padding: 12px 10px;
        gap: 8px;
    }
    .feature-icon,
    .feature-icon svg {
        width: 20px;
        height: 20px;
    }
    .feature-text {
        font-size: 12px;
    }
}

/* ============================================
   ACCORDION AUTH FORMS
   ============================================ */
.auth-accordion {
    flex: 1;
    background: transparent;
    border-radius: 0;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.accordion-section {
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.accordion-section.expanded {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    cursor: pointer;
    transition: background 0.2s ease;
    user-select: none;
}

.accordion-header:hover {
    background: rgba(255, 255, 255, 0.15);
}

.accordion-section.expanded .accordion-header {
    background: transparent;
    border-bottom: 1px solid #e5e7eb;
}

.accordion-header-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.accordion-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-text-on-primary);
    transition: background 0.2s ease;
}

.accordion-section:not(.expanded) .accordion-icon {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.accordion-icon svg {
    width: 22px;
    height: 22px;
}

.accordion-title {
    font-size: 18px;
    font-weight: 600;
    color: white;
}

.accordion-section.expanded .accordion-title {
    color: #1f2937;
}

.accordion-subtitle {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 2px;
}

.accordion-section.expanded .accordion-subtitle {
    color: #6b7280;
}

.accordion-arrow {
    width: 24px;
    height: 24px;
    color: rgba(255, 255, 255, 0.6);
    transition: transform 0.3s ease, color 0.3s ease;
}

.accordion-section.expanded .accordion-arrow {
    transform: rotate(180deg);
    color: var(--brand-primary);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    padding: 0 20px;
}

.accordion-section.expanded .accordion-content {
    max-height: 500px;
    padding: 20px;
}

.accordion-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.accordion-form .form-group {
    margin-bottom: 0;
}

.accordion-form .btn-primary {
    margin-top: 8px;
}

/* Branded accordion styles */
.branded-auth-section {
    padding: 0 20px 20px;
}

.branded-auth-section .auth-accordion {
    background: transparent;
    padding: 0;
}

.branded-login .auth-accordion {
    background: transparent;
    border-radius: 0;
}

.branded-login .accordion-section {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.branded-login .accordion-section.expanded {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.5);
}

.branded-login .accordion-section:not(.expanded) .accordion-header:hover {
    background: rgba(255, 255, 255, 0.15);
}

.branded-login .accordion-section:not(.expanded) .accordion-title {
    color: white;
}

.branded-login .accordion-section:not(.expanded) .accordion-subtitle {
    color: rgba(255, 255, 255, 0.7);
}

.branded-login .accordion-section:not(.expanded) .accordion-arrow {
    color: rgba(255, 255, 255, 0.6);
}

.branded-login .accordion-section:not(.expanded) .accordion-icon {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* ============================================
   BRANDING COLOR APPLICATIONS
   ============================================ */
/* Primary color - main action buttons */
.branded-app .btn-pay,
.branded-app .btn-primary {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%) !important;
    color: var(--brand-text-on-primary) !important;
}

/* Primary color - header/navigation */
.branded-app .home-header,
.branded-app .page-header {
    background: var(--brand-primary) !important;
}

/* Primary color - active tabs */
.branded-app .tab-active,
.branded-app .nav-item.active {
    border-color: var(--brand-primary) !important;
    color: var(--brand-primary) !important;
}

/* Primary color - links and interactive elements */
.branded-app .link-btn,
.branded-app a {
    color: var(--brand-primary) !important;
}

/* Primary color - focus states */
.branded-app input:focus,
.branded-app select:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.1) !important;
}

/* Secondary color - secondary buttons */
.branded-app .btn-secondary,
.branded-app .btn-secondary-action {
    background: var(--brand-secondary) !important;
    color: var(--brand-text-on-secondary) !important;
}

/* Secondary color - icon buttons */
.branded-app .icon-btn {
    background: rgba(255, 255, 255, 0.2) !important;
}

.branded-app .icon-btn:hover {
    background: rgba(255, 255, 255, 0.3) !important;
}

/* Secondary color - badges and tags */
.branded-app .badge,
.branded-app .tag {
    background: var(--brand-secondary) !important;
    color: var(--brand-text-on-secondary) !important;
}

/* Secondary color - card accents */
.branded-app .balance-card {
    border-left: 4px solid var(--brand-secondary) !important;
}

/* Scan receipt button with secondary color */
.branded-app .btn-scan-receipt {
    background: var(--brand-secondary) !important;
    color: var(--brand-text-on-secondary) !important;
}

/* Quick action buttons with branding */
.branded-app .quick-actions .action-btn {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%) !important;
}

/* History tab indicators */
.branded-app .history-tabs .tab.active {
    background: var(--brand-primary) !important;
    color: var(--brand-text-on-primary) !important;
}

/* Top-up and other modal headers */
.branded-app .modal-header {
    background: var(--brand-primary) !important;
    color: var(--brand-text-on-primary) !important;
}

/* ============================================
   HOME PAGE
   ============================================ */
.home-page {
    background: linear-gradient(180deg, #7c3aed 0%, #5b21b6 100%);
    min-height: 100vh;
    overflow-y: auto;
}

/* Page Header - Sticky header for inner pages */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    padding-top: calc(16px + var(--safe-area-inset-top, 0px));
    position: relative;
    top: auto;
    z-index: 10;
    background: transparent;
}

.page-header button {
    background: rgba(255,255,255,0.15);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
}

.home-header {
    padding: 20px 20px 30px;
    color: white;
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.header-top .logo {
    display: flex;
    align-items: center;
}

.header-top .logo-img {
    height: 36px;
    width: auto;
}

.header-actions {
    display: flex;
    gap: 8px;
}

.icon-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.icon-btn:hover {
    background: rgba(255,255,255,0.3);
}

.icon-btn:disabled {
    opacity: 0.5;
}

.icon-btn .icon {
    width: 24px;
    height: 24px;
}

.event-name {
    font-size: 14px;
    opacity: 0.8;
    margin-bottom: 4px;
}

.user-name {
    font-size: 20px;
    font-weight: 600;
}

/* ============================================
   NEW HEADER LAYOUT - Unified for all events
   ============================================ */
.header-actions-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.header-logo-center {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

.header-banner-center {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;
    width: 100% !important;
    padding: 0 16px;
    flex: 1 1 auto;
    min-height: 0;
}

.header-banner-img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    max-height: 200px;
    object-fit: contain;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}

.main-logo {
    max-width: 100px;
    max-height: 80px;
    width: auto;
    height: auto;
    border-radius: 16px;
    object-fit: contain;
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
    background: white;
    padding: 8px;
}

.header-title {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 8px 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.header-slogan {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
    opacity: 0.9;
}

.slogan-logo {
    width: 24px;
    height: 24px;
    border-radius: 6px;
}

.header-slogan span {
    font-size: 14px;
    font-weight: 500;
}

/* User greeting - positioned above balance card */
.user-greeting {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: white;
    padding: 16px 20px 8px;
    margin: 0;
}

/* Page bottom slogan */
.page-bottom-slogan {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    margin-top: 24px;
    color: rgba(255,255,255,0.7);
}

.page-bottom-slogan .slogan-logo {
    width: 28px;
    height: 28px;
}

.page-bottom-slogan span {
    font-size: 15px;
    font-weight: 500;
}

/* Organized by section with organizer logo */
.organized-by-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 12px 0;
    padding: 12px;
}

.organized-by-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

.organizer-info-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.organizer-info-row .organizer-name {
    font-size: 14px;
    font-weight: 600;
}

/* Dashboard event details */
.event-datetime-section,
.event-location-section {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    opacity: 0.9;
    margin: 4px 0;
}

.datetime-icon,
.location-icon {
    font-size: 16px;
}

.datetime-text,
.location-text {
    font-size: 13px;
    font-weight: 500;
    opacity: 0.85;
    color: white;
}

.organizer-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.15);
    padding: 4px;
}

/* Organizer landing page - scrollable */
.organizer-landing {
    min-height: 100vh;
    overflow-y: auto;
}

/* Organizer landing page logo - handles any aspect ratio */
.organizer-landing-logo-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 140px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    padding: 12px;
    backdrop-filter: blur(10px);
}

.organizer-landing-logo {
    max-width: 100% !important;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
}

/* Organizer page event cards */
.organizer-event-card {
    display: flex;
    gap: 14px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
}

.organizer-event-card:hover {
    border-color: #7c3aed;
    background: #f9fafb;
    transform: translateX(4px);
}

.organizer-event-card:active {
    transform: translateX(2px);
}

.organizer-event-image {
    width: 80px;
    height: 80px;
    min-width: 80px;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f0f1a 100%);
}

.organizer-event-image img {
    width: 100% !important;
    height: 100%;
    object-fit: cover;
}

.organizer-event-placeholder {
    width: 100% !important;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.organizer-event-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.organizer-event-name {
    font-weight: 600;
    color: #1f2937;
    font-size: 15px;
    margin: 0;
}

.organizer-event-datetime {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}

.organizer-event-countdown {
    font-size: 12px;
    color: #7c3aed;
    font-weight: 500;
    margin: 0;
}

/* ============================================
   EVENT LANDING PAGE
   ============================================ */
.event-landing-page {
    min-height: 100vh;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
}

/* Header with hamburger menu - add spacing below */
.event-landing-page .hamburger-btn {
    margin-bottom: 16px;
}

/* Banner/Carousel - 75% of viewport height */
.event-landing-banner {
    width: 100% !important;
    height: 75vh;
    min-height: 400px;
    max-height: none;
    overflow: hidden;
    margin-top: 60px; /* Space for header */
    border-radius: 0;
}

.event-landing-banner img {
    width: 100% !important;
    height: 100%;
    object-fit: cover;
}

/* Responsive adjustments for landing banner */
@media (max-height: 800px) and (min-height: 600px) {
    .event-landing-banner {
        height: 70vh;
        min-height: 350px;
        margin-top: 56px;
    }
}

@media (max-height: 600px) {
    .event-landing-banner {
        height: 65vh;
        min-height: 280px;
        margin-top: 50px;
    }
}

@media (min-height: 900px) {
    .event-landing-banner {
        height: 75vh;
        min-height: 500px;
    }
}

.event-landing-card {
    position: relative;
}

.event-landing-title-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
}

.event-landing-detail {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #6b7280;
    font-size: 14px;
    margin-bottom: 10px;
}

.event-landing-detail .detail-icon {
    font-size: 16px;
}

/* Compact date & location row */
.event-landing-details-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: #6b7280;
    font-size: 13px;
    margin-bottom: 12px;
}

.event-detail-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.event-detail-separator {
    color: #d1d5db;
    font-weight: 300;
}

@media (max-width: 380px) {
    .event-landing-details-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .event-detail-separator {
        display: none;
    }
}

.event-landing-organizer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: #f9fafb;
    border-radius: 12px;
    margin-top: 16px;
}

.event-landing-organizer.clickable:hover {
    background: #f3f4f6;
}

.event-landing-organizer .organizer-info-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.event-landing-organizer .organizer-logo-small {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: contain;
    background: white;
    padding: 2px;
}

.event-landing-organizer .organizer-name {
    font-weight: 500;
    color: #374151;
    flex: 1;
}

/* Event landing accordion forms */
.event-landing-forms {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.event-landing-accordion {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}

.event-landing-accordion .accordion-header {
    width: 100% !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: white;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    transition: background 0.2s;
}

.event-landing-accordion .accordion-header:hover {
    background: #f9fafb;
}

.event-landing-accordion .accordion-arrow {
    transition: transform 0.3s ease;
}

.event-landing-accordion .accordion-arrow.expanded {
    transform: rotate(180deg);
}

.event-landing-accordion .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 16px;
}

.event-landing-accordion.expanded .accordion-content {
    max-height: 500px;
    padding: 0 16px 16px;
}

.event-landing-accordion .accordion-subtitle {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 16px;
}

.event-landing-accordion .form-group {
    margin-bottom: 12px;
}

.event-landing-accordion .form-input {
    width: 100% !important;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 15px;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.event-landing-accordion .form-input:focus {
    outline: none;
    border-color: #7c3aed;
}

.event-landing-accordion .form-error {
    color: #ef4444;
    font-size: 13px;
    margin-bottom: 12px;
}

.event-landing-accordion .form-submit-btn {
    width: 100% !important;
    padding: 14px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: opacity 0.2s;
}

.event-landing-accordion .form-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.event-landing-accordion .form-submit-btn:not(:disabled):hover {
    opacity: 0.9;
}

/* ============================================
   BALANCE CARD
   ============================================ */
.balance-card {
    background: white;
    margin: 0 20px 20px;
    border-radius: 24px;
    padding: 28px 24px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

.balance-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.balance-label {
    font-size: 14px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.balance-amount {
    font-size: 48px;
    font-weight: 800;
    color: #1f2937;
    letter-spacing: -2px;
}

.points-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 2px solid #f3f4f6;
}

.points-row .icon {
    width: 24px;
    height: 24px;
    color: #eab308;
}

.points-row span {
    font-size: 18px;
    font-weight: 700;
    color: #ca8a04;
}

/* ============================================
   ACTION BUTTONS
   ============================================ */
.actions-section {
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f0f1a 100%);
    flex: 1;
    border-radius: 32px 32px 0 0;
    padding: 28px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.btn-pay {
    width: 100% !important;
    padding: 20px;
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 8px 30px rgba(124, 58, 237, 0.4);
    transition: transform 0.1s, box-shadow 0.1s;
}

.btn-pay:active {
    transform: scale(0.98);
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.4);
}

.btn-pay .icon {
    width: 28px;
    height: 28px;
}

.btn-secondary-action {
    width: 100% !important;
    padding: 16px;
    background: white;
    color: #7c3aed;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: border-color 0.2s, background 0.2s;
}

.btn-secondary-action:active {
    background: #f9fafb;
    border-color: #7c3aed;
}

.btn-secondary-action .icon {
    width: 22px;
    height: 22px;
}

/* ============================================
   PENDING TRANSACTION STATE
   ============================================ */
.pending-section {
    background: #fef3c7;
    flex: 1;
    border-radius: 32px 32px 0 0;
    padding: 32px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.pending-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.pending-title {
    font-size: 22px;
    font-weight: 700;
    color: #92400e;
    margin-bottom: 8px;
}

.pending-subtitle {
    font-size: 16px;
    color: #a16207;
    margin-bottom: 32px;
    line-height: 1.5;
}

.btn-scan-receipt {
    width: 100% !important;
    max-width: 320px;
    padding: 18px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    border: none;
    border-radius: 16px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 6px 25px rgba(245, 158, 11, 0.4);
    margin-bottom: 16px;
}

.btn-scan-receipt .icon {
    width: 24px;
    height: 24px;
}

.btn-cancel-pending {
    background: none;
    border: none;
    color: #92400e;
    font-size: 14px;
    cursor: pointer;
    padding: 6px 16px;
    opacity: 0.7;
}

/* ============================================
   BOTTOM NAV
   ============================================ */
.bottom-nav {
    background: white;
    display: flex;
    justify-content: space-around;
    padding: 12px 0 20px;
    border-top: 1px solid #e5e7eb;
}

.nav-btn {
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #6b7280;
    font-size: 12px;
    cursor: pointer;
    padding: 6px 16px;
}

.nav-btn .icon {
    width: 24px;
    height: 24px;
}

.nav-btn.active {
    color: #7c3aed;
}

/* ============================================
   QR PAGE
   ============================================ */
.qr-page {
    background: linear-gradient(180deg, #7c3aed 0%, #5b21b6 100%);
    min-height: 100vh;
}

.header {
    padding: 50px 16px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
    position: relative;
    top: auto;
    z-index: 10;
}

.header.purple {
    background: transparent;
}

.header h1 {
    flex: 1;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    margin: 0;
}

.back-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.back-btn .icon {
    width: 24px;
    height: 24px;
}

.qr-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.qr-balance {
    color: white;
    text-align: center;
    margin-bottom: 24px;
}

.qr-balance-amount {
    font-size: 40px;
    font-weight: 800;
}

.qr-points {
    font-size: 18px;
    opacity: 0.9;
}

.qr-container {
    background: white;
    padding: 20px;
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    margin-bottom: 20px;
}

.qr-container img {
    display: block;
    border-radius: 12px;
}

.qr-instruction {
    color: white;
    text-align: center;
    font-size: 16px;
    opacity: 0.9;
    margin-bottom: 12px;
}

.qr-timer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: white;
    font-size: 18px;
    font-weight: 600;
}

.qr-timer .icon {
    width: 20px;
    height: 20px;
}

.qr-expired {
    background: rgba(255,255,255,0.1);
    padding: 40px;
    border-radius: 24px;
    text-align: center;
    color: white;
}

.qr-expired .icon {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    opacity: 0.7;
}

.qr-expired p {
    font-size: 18px;
    margin-bottom: 20px;
}

/* ============================================
   SCAN PAGE
   ============================================ */
.scan-page {
    background: #1f2937;
    min-height: 100vh;
}

.scan-page .header {
    background: transparent;
}

.scan-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: white;
}

.scan-area {
    width: 100% !important;
    max-width: 320px;
    aspect-ratio: 1;
    background: rgba(255,255,255,0.1);
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 24px;
    position: relative;
}

.scan-area video {
    width: 100% !important;
    height: 100%;
    object-fit: cover;
}

.scan-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.scan-placeholder .icon {
    width: 64px;
    height: 64px;
    opacity: 0.5;
}

.scan-placeholder p {
    opacity: 0.7;
    font-size: 14px;
}

.btn-start-scan {
    width: 100% !important;
    max-width: 320px;
    padding: 18px;
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    color: white;
    border: none;
    border-radius: 16px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
}

.manual-section {
    width: 100% !important;
    max-width: 320px;
    margin-top: 24px;
}

.manual-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    color: rgba(255,255,255,0.5);
    font-size: 12px;
    margin-bottom: 16px;
}

.manual-divider::before,
.manual-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.2);
}

.manual-input {
    width: 100% !important;
    padding: 16px;
    font-size: 14px;
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 12px;
    background: rgba(255,255,255,0.1);
    color: white;
    margin-bottom: 12px;
    outline: none;
}

.manual-input:focus {
    border-color: var(--brand-primary);
}

.manual-input::placeholder {
    color: rgba(255,255,255,0.5);
}

.scan-error {
    background: #fef2f2;
    color: #dc2626;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    text-align: center;
    margin-top: 12px;
    max-width: 320px;
}

/* Scan Success */
.scan-success {
    text-align: center;
    color: white;
}

.scan-success .success-icon {
    width: 80px;
    height: 80px;
    background: #22c55e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.scan-success .success-icon .icon {
    width: 40px;
    height: 40px;
    color: white;
}

.scan-success h2 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 24px;
}

.scan-success-details {
    background: rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
}

.scan-success-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.scan-success-row:last-child {
    border-bottom: none;
}

.scan-success-row span:first-child {
    opacity: 0.7;
}

.scan-success-row span:last-child {
    font-weight: 600;
}

.scan-success-row .amount-charged {
    color: #ef4444;
}

.scan-success-row .new-balance {
    color: #22c55e;
    font-size: 20px;
}

/* ============================================
   HISTORY PAGE
   ============================================ */
.history-page {
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f0f1a 100%);
}

.history-page .header {
    background: #7c3aed;
}

.history-content {
    flex: 1;
    padding: 16px;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.history-item {
    background: white;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: transform 0.1s;
    border: none;
    width: 100% !important;
    text-align: left;
}

.history-item:active {
    transform: scale(0.98);
}

.history-item-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tx-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.tx-icon.sale {
    background: #fee2e2;
}

.tx-icon.topup {
    background: #dcfce7;
}

.tx-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tx-label {
    font-weight: 600;
    font-size: 15px;
    color: #1f2937;
}

.tx-date {
    font-size: 13px;
    color: #6b7280;
}

.tx-amount {
    font-weight: 700;
    font-size: 16px;
}

.tx-amount.red {
    color: #ef4444;
}

.tx-amount.green {
    color: #16a34a;
}

.no-history {
    text-align: center;
    color: #9ca3af;
    padding: 48px 16px;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn-primary {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
    color: var(--brand-text-on-primary);
    border: none;
    padding: 16px 32px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s, opacity 0.2s;
}

.btn-primary:active {
    transform: scale(0.98);
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary.full-width {
    width: 100% !important;
}

.btn-secondary {
    background: white;
    color: var(--brand-primary);
    border: 2px solid #e5e7eb;
    padding: 14px 28px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.btn-secondary.full-width {
    width: 100% !important;
}

/* ============================================
   ICONS
   ============================================ */
.icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.icon.spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================
   MODAL
   ============================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    padding: 16px;
}

.modal {
    background: white;
    border-radius: 20px;
    width: 100% !important;
    max-width: 400px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 24px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.modal-header h2 {
    font-size: 20px;
    font-weight: 700;
}

.close-btn {
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f0f1a 100%);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 20px;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================
   EVENT PREVIEW MODAL
   ============================================ */
.event-preview-overlay {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.event-preview-modal {
    background: #fff;
    border-radius: 20px;
    max-width: 380px;
    width: 100% !important;
    max-height: 85vh;
    overflow-y: auto;
    scroll-behavior: smooth;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    animation: slideUp 0.25s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.event-preview-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    font-size: 18px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.event-preview-close:hover {
    background: rgba(0, 0, 0, 0.7);
}

.event-preview-image {
    width: 100% !important;
    height: 200px;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f0f1a 100%);
}

.event-preview-image img {
    width: 100% !important;
    height: 100%;
    object-fit: cover;
}

.event-preview-info {
    padding: 20px;
}

.event-preview-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 14px 0;
    color: #1a1a1a;
    line-height: 1.3;
}

.event-preview-datetime,
.event-preview-location {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: #555;
    margin-bottom: 10px;
}

.event-preview-icon {
    font-size: 16px;
    flex-shrink: 0;
}

/* Compact date & location row for preview modal */
.event-preview-details-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: #555;
    font-size: 13px;
    margin-bottom: 12px;
}

.event-preview-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.event-preview-separator {
    color: #d1d5db;
    font-weight: 300;
}

@media (max-width: 360px) {
    .event-preview-details-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .event-preview-separator {
        display: none;
    }
}

.event-preview-organizer {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.event-preview-organizer .organizer-label {
    font-size: 12px;
    color: #888;
    display: block;
    margin-bottom: 8px;
}

.event-preview-organizer .organizer-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.event-preview-organizer .organizer-logo-small {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 10px;
    background: #f5f5f5;
    padding: 4px;
}

.event-preview-organizer .organizer-name {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.event-preview-actions {
    display: flex;
    gap: 12px;
    padding: 0 20px 20px;
}

.event-preview-btn {
    flex: 1;
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.event-preview-btn.btn-primary {
    background: var(--brand-primary);
    color: var(--brand-text-on-primary);
    border: none;
}

.event-preview-btn.btn-primary:hover {
    opacity: 0.9;
}

.event-preview-btn.btn-secondary {
    background: transparent;
    color: var(--brand-primary);
    border: 2px solid var(--brand-primary);
}

.event-preview-btn.btn-secondary:hover {
    background: rgba(105, 43, 205, 0.05);
}

/* Modal Accordion Forms */
.modal-with-form {
    max-height: 90vh;
    overflow-y: auto;
}

.modal-accordion-section {
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.modal-accordion {
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s;
}

.modal-accordion.expanded {
    border-color: var(--brand-primary);
}

.modal-accordion-header {
    width: 100% !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: #f9fafb;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: #374151;
    transition: background 0.2s;
}

.modal-accordion.expanded .modal-accordion-header {
    background: var(--brand-primary);
    color: white;
}

.modal-accordion-arrow {
    transition: transform 0.2s;
}

.modal-accordion-arrow.expanded {
    transform: rotate(180deg);
}

.modal-accordion-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: white;
}

.modal-form-group input,
.modal-form-group select {
    width: 100% !important;
    padding: 12px 14px;
    font-size: 15px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    outline: none;
    transition: border-color 0.2s;
}

.modal-form-group input:focus,
.modal-form-group select:focus {
    border-color: var(--brand-primary);
}

.modal-phone-input {
    display: flex;
    gap: 8px;
}

.modal-phone-input select {
    width: 90px;
    flex-shrink: 0;
}

.modal-phone-input input {
    flex: 1;
}

.modal-error {
    background: #fef2f2;
    color: #dc2626;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    text-align: center;
}

.modal-submit-btn {
    width: 100% !important;
    padding: 14px;
    background: var(--brand-primary);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.modal-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.modal-submit-btn:not(:disabled):hover {
    opacity: 0.9;
}

/* ============================================
   UTILITIES
   ============================================ */
.logo {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.tagline {
    opacity: 0.9;
}

/* Phone input with country code */
.phone-input-group {
    display: flex;
    gap: 8px;
}

.country-code-select {
    width: 90px;
    padding: 12px 8px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    background: white;
}

.phone-number-input {
    flex: 1;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
}

.country-code-select:disabled,
.phone-number-input:disabled {
    background: #f5f5f5;
    opacity: 0.7;
}

/* Phone Input Group - Inline Layout */
.phone-input-group {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.country-code-select {
    width: 100px !important;
    flex-shrink: 0;
    padding: 16px 8px !important;
    font-size: 14px !important;
    text-align: center;
}

.phone-number-input {
    flex: 1;
    min-width: 0;
}

/* ============================================
   COUNTRY CODE SELECTOR WITH SEARCH
   ============================================ */
.country-selector {
    position: relative;
    min-width: 100px;
    z-index: 10;
}

.country-selector-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 14px 12px;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 15px;
    cursor: pointer;
    min-width: 100px;
    transition: border-color 0.2s;
}

.country-selector-trigger:focus {
    border-color: var(--brand-primary);
    outline: none;
}

.country-selector-trigger:disabled {
    background: #f5f5f5;
    opacity: 0.7;
    cursor: not-allowed;
}

.dropdown-arrow {
    font-size: 10px;
    color: #888;
}

.country-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 280px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    margin-top: 4px;
    overflow: hidden;
}

.country-list {
    max-height: 250px;
    overflow-y: auto;
}

.country-option {
    display: block;
    width: 100% !important;
    padding: 12px 14px;
    text-align: left;
    background: none;
    border: none;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s;
}

.country-option:hover {
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f0f1a 100%);
}

.country-option.selected {
    background: #ede9fe;
    color: var(--brand-primary);
    font-weight: 600;
}

.country-separator {
    padding: 8px 14px;
    font-size: 11px;
    color: #888;
    background: #f9fafb;
    text-align: center;
    font-weight: 500;
}

/* Modal phone input with country selector */
.modal-phone-input .country-selector {
    flex-shrink: 0;
}

.modal-phone-input .country-selector-trigger {
    padding: 12px 10px;
    min-width: 90px;
}

/* QR Canvas styling */
.qr-canvas {
    border-radius: 12px;
    background: white;
}

.qr-box {
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    padding: 16px;
    border-radius: 16px;
}
.qr-box img {
    border-radius: 8px;
}

/* ============================================
   SCAN RECEIPT PAGE - UPDATED UI
   ============================================ */
.scan-page {
    background: linear-gradient(180deg, #7c3aed 0%, #5b21b6 100%);
    min-height: 100vh;
}

.scan-page .header {
    background: transparent;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.scan-page .header h1 {
    color: white;
    font-size: 20px;
    font-weight: 600;
}

.scan-page .back-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 12px;
    padding: 10px;
    color: white;
    cursor: pointer;
}

.scan-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.scan-prompt {
    background: white;
    border-radius: 24px;
    padding: 40px 24px;
    text-align: center;
    width: 100% !important;
    max-width: 360px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.scan-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.scan-icon svg {
    width: 40px;
    height: 40px;
    color: white;
}

.scan-title {
    font-size: 24px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 8px;
}

.scan-subtitle {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 24px;
}

.scan-prompt .btn-primary {
    width: 100% !important;
    padding: 16px;
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
    color: var(--brand-text-on-primary);
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.scan-prompt .btn-primary svg {
    width: 20px;
    height: 20px;
}

.manual-section {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

.manual-label {
    font-size: 13px;
    color: #9ca3af;
    margin-bottom: 12px;
}

.manual-input {
    width: 100% !important;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    margin-bottom: 12px;
    outline: none;
}

.manual-input:focus {
    border-color: var(--brand-primary);
}

.manual-section .btn-secondary {
    width: 100% !important;
    padding: 12px;
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f0f1a 100%);
    color: #374151;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.manual-section .btn-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Camera View */
.camera-container {
    width: 100% !important;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.camera-video {
    width: 100% !important;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 24px;
    background: #000;
}

.camera-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.scan-frame {
    width: 200px;
    height: 200px;
    border: 3px solid rgba(255,255,255,0.8);
    border-radius: 16px;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.3);
}

.camera-instruction {
    color: white;
    font-size: 14px;
    margin: 16px 0;
    opacity: 0.9;
}

.camera-container .btn-secondary {
    padding: 12px 32px;
    background: rgba(255,255,255,0.2);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.scan-error {
    background: white;
    color: #dc2626;
    padding: 16px 20px;
    border-radius: 12px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100% !important;
    max-width: 360px;
}

.scan-error svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.scan-error .btn-link {
    margin-left: auto;
    background: none;
    border: none;
    color: #7c3aed;
    font-weight: 600;
    cursor: pointer;
}


/* ============================================
   SCAN RECEIPT PAGE - UPDATED UI
   ============================================ */
.scan-page {
    background: linear-gradient(180deg, #7c3aed 0%, #5b21b6 100%) !important;
    min-height: 100vh;
}

.scan-page .header {
    background: transparent !important;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.scan-page .header h1 {
    color: white;
    font-size: 20px;
    font-weight: 600;
}

.scan-page .back-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 12px;
    padding: 10px;
    color: white;
    cursor: pointer;
}

.scan-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.scan-prompt {
    background: white;
    border-radius: 24px;
    padding: 40px 24px;
    text-align: center;
    width: 100% !important;
    max-width: 360px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.scan-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.scan-icon svg {
    width: 40px;
    height: 40px;
    color: white;
}

.scan-title {
    font-size: 24px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 8px;
}

.scan-subtitle {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 24px;
}

.scan-prompt .btn-primary {
    width: 100% !important;
    padding: 16px;
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
    color: var(--brand-text-on-primary);
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.scan-prompt .btn-primary svg {
    width: 20px;
    height: 20px;
}

.manual-section {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

.manual-label {
    font-size: 13px;
    color: #9ca3af;
    margin-bottom: 12px;
}

.manual-input {
    width: 100% !important;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    margin-bottom: 12px;
    outline: none;
}

.manual-input:focus {
    border-color: var(--brand-primary);
}

.manual-section .btn-secondary {
    width: 100% !important;
    padding: 12px;
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f0f1a 100%);
    color: #374151;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.manual-section .btn-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.camera-container {
    width: 100% !important;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.camera-video {
    width: 100% !important;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 24px;
    background: #000;
}

.camera-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.scan-frame {
    width: 200px;
    height: 200px;
    border: 3px solid rgba(255,255,255,0.8);
    border-radius: 16px;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.3);
}

.camera-instruction {
    color: white;
    font-size: 14px;
    margin: 16px 0;
    opacity: 0.9;
}

.camera-container .btn-secondary {
    padding: 12px 32px;
    background: rgba(255,255,255,0.2);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.scan-error {
    background: white;
    color: #dc2626;
    padding: 16px 20px;
    border-radius: 12px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100% !important;
    max-width: 360px;
}

.scan-error svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.scan-error .btn-link {
    margin-left: auto;
    background: none;
    border: none;
    color: #7c3aed;
    font-weight: 600;
    cursor: pointer;
}


/* Scan Receipt button on QR page */
.btn-scan-receipt-qr {
    width: 100% !important;
    max-width: 280px;
    margin-top: 24px;
    padding: 16px 24px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-scan-receipt-qr svg {
    width: 22px;
    height: 22px;
}


/* QR Page - Fit to screen without scroll */
.qr-page {
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.qr-page .header {
    padding: 40px 16px 12px;
    flex-shrink: 0;
}

.qr-page .qr-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 20px 20px;
    overflow: hidden;
}

.qr-page .qr-balance {
    margin-bottom: 12px;
}

.qr-page .qr-balance-amount {
    font-size: 32px;
}

.qr-page .qr-container {
    padding: 12px;
    border-radius: 16px;
}

.qr-page .qr-box {
    width: 180px !important;
    height: 180px !important;
}

.qr-page .qr-box canvas,
.qr-page .qr-box img {
    width: 180px !important;
    height: 180px !important;
}

.qr-page .qr-timer {
    margin: 10px 0;
    font-size: 13px;
}

.qr-page .qr-instruction {
    font-size: 13px;
    margin-bottom: 8px;
}

.qr-page .btn-scan-receipt-qr {
    margin-top: 12px;
    padding: 14px 20px;
    font-size: 15px;
    max-width: 240px;
}


/* Top Up button - green */
.btn-topup {
    width: 100% !important;
    max-width: 280px;
    padding: 16px 24px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
    border: none;
    border-radius: 16px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}

.btn-topup svg {
    width: 24px;
    height: 24px;
}

/* History button - subtle */
.btn-history {
    width: 100% !important;
    max-width: 280px;
    padding: 14px 24px;
    background: rgba(255,255,255,0.2);
    color: white;
    border: none;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}

.btn-history svg {
    width: 20px;
    height: 20px;
}

/* Remove old bottom nav since history is now in actions */
.bottom-nav {
    display: none;
}


/* Low balance warning */
.low-balance-warning {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
    width: 100% !important;
    max-width: 280px;
    text-align: center;
}

/* ============================================
   HOME PAGE - SINGLE SCREEN FIT (NO SCROLL)
   ============================================ */
.home-page {
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for mobile */
    /* NO display:flex - causes sticky footer issues on mobile */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Apply gradient directly - NO ::before pseudo-element (blocks mobile touch scroll) */
    background: linear-gradient(180deg, var(--brand-primary, #7c3aed) 0%, var(--brand-secondary, #5b21b6) 100%);
    position: relative;
}

/* DISABLED - ::before blocks mobile touch scrolling */
/* .home-page::before - now handled by background property above */
.home-page::before {
    display: none;
}

/* Branded mode gradient - applied directly */
.home-page.branded-home {
    background: inherit;
}

/* All content flows naturally */
.home-page > * {
    position: relative;
    z-index: 1;
}

/* Compact Header Row - TRANSPARENT, floats over gradient */
.home-header-compact {
    flex: 0 0 50px; /* Fixed 50px, don't grow or shrink */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    gap: 12px;
    background: transparent !important;
    position: relative;
    z-index: 10;
}

.home-header-compact .header-logo-small {
    flex: 0 0 auto;
}

.home-header-compact .logo-small {
    height: 32px;
    width: auto;
    max-width: 60px;
    object-fit: contain;
}

/* Hide event name in header - will show below banner */
.home-header-compact .header-event-name {
    display: none;
}

.home-header-compact .header-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
}

/* Header action buttons - ensure visibility over gradient */
.home-header-compact .icon-btn {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
}

/* LARGE BANNER SECTION - COMPACT */
.home-banner-section {
    flex: 0 0 auto; /* Don't grow, use natural size */
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0 16px 4px;
    overflow: hidden;
}

.banner-container {
    width: 100% !important;
    max-height: 180px;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
}

.banner-image {
    width: 100% !important;
    height: 100%;
    max-height: 180px;
    object-fit: cover; /* Fill and crop to fit */
    border-radius: 16px;
}

.banner-organizer-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 12px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    border-radius: 0 0 16px 16px;
}

.banner-organizer-overlay span {
    font-size: 12px;
    color: white;
    font-weight: 500;
}

/* Non-banner logo container */
.banner-logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    max-height: 140px;
    gap: 8px;
}

.banner-logo {
    max-width: 50%;
    max-height: 100px;
    object-fit: contain;
}

/* Event title below banner */
.event-title-section {
    width: 100% !important;
    text-align: center;
    padding: 8px 16px 2px;
}

.event-title-section .event-title {
    font-size: 22px;
    font-weight: 700;
    color: white;
    margin: 0;
    line-height: 1.2;
}

/* Event details - date and location on same row */
.event-details-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 2px 16px 4px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
}

.event-details-row .event-date,
.event-details-row .event-location {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.event-details-row .detail-separator {
    color: rgba(255, 255, 255, 0.5);
    margin: 0 4px;
}

/* Legacy banner-event-details - kept for compatibility */
.banner-event-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.banner-event-details .event-date,
.banner-event-details .event-location {
    font-size: 13px;
    color: rgba(255,255,255,0.9);
}

/* Compact greeting - MINIMAL HEIGHT */
.home-page .user-greeting {
    flex: 0 0 auto;
    padding: 4px 16px;
    margin: 0;
    font-size: 14px;
    text-align: center;
    color: rgba(255,255,255,0.9);
}

/* Compact balance card - MINIMAL HEIGHT */
.home-page .balance-container {
    flex: 0 0 auto;
    padding: 4px 16px 6px;
    display: flex;
    justify-content: center;
}

.home-page .balance-card {
    margin: 0;
    width: 100% !important;
    max-width: 240px;
}

.home-page .balance-amount {
    font-size: 32px;
}

.home-page .balance-label {
    font-size: 10px;
}

.home-page .points-row {
    font-size: 11px;
}

/* Actions section - FILLS REMAINING SPACE */
.home-page .actions-section {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 16px 16px;
    gap: 8px;
    background: transparent;
    min-height: 0;
}

/* No-cashless mode - centered buttons */
.home-page .actions-section.no-cashless-mode {
    justify-content: center;
    padding-top: 16px;
}

.home-page .btn-pay,
.home-page .btn-topup,
.home-page .btn-history {
    margin: 0;
}

/* Footer - flows naturally at end of content (same as event page) */
.home-page .fluus-global-footer {
    margin-top: 24px;
    padding: 16px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.home-page .points-display {
    color: rgba(255,255,255,0.8);
}

/* Branded mode - transparent background for entire page */
.branded-home .actions-section {
    background: transparent !important;
}

/* Branded login - form background matches page background */
.branded-login .login-form {
    background: transparent !important;
}

/* ============================================
   BRANDED PAGE STYLING
   ============================================ */
.branded-page {
    min-height: 100vh;
}

/* Content areas should have white/light background on branded pages */
.branded-page .qr-content,
.branded-page .scan-content,
.branded-page .settings-content,
.branded-page .menu-content {
    background: white !important;
    border-radius: 24px 24px 0 0 !important;
    min-height: calc(100vh - 80px);
}

.branded-page .summary-section {
    background: white !important;
    border-radius: 24px 24px 0 0 !important;
}

.branded-page .transaction-list {
    background: white !important;
}

/* ============================================
   BUTTON GRID - COMPACT FOR SINGLE SCREEN
   ============================================ */
.button-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 0 auto !important;
}

.grid-btn {
    width: 100% !important;
    height: 65px !important;
    padding: 8px 4px !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    margin: 0 !important;
    max-width: none !important;
    border: none !important;
    cursor: pointer !important;
}

.grid-btn .btn-emoji {
    font-size: 20px !important;
    line-height: 1 !important;
}

.grid-btn svg {
    width: 20px !important;
    height: 20px !important;
}

/* Button colors for grid layout - Enhanced for Mobile UX */
.button-grid .btn-topup {
    background: linear-gradient(145deg, #22c55e 0%, #16a34a 100%) !important;
    color: white !important;
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4), 0 2px 6px rgba(0,0,0,0.1) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
}
.button-grid .btn-topup:active {
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4) !important;
}

.button-grid .btn-pay {
    background: linear-gradient(145deg, #8b5cf6 0%, #6d28d9 100%) !important;
    color: white !important;
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4), 0 2px 6px rgba(0,0,0,0.1) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
}
.button-grid .btn-pay:active {
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4) !important;
}

.button-grid .btn-history {
    background: linear-gradient(145deg, #ffffff 0%, #f3f4f6 100%) !important;
    color: #374151 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0,0,0,0.06) !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
}
.button-grid .btn-history:active {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.button-grid .btn-menu {
    background: linear-gradient(145deg, #fb923c 0%, #ea580c 100%) !important;
    color: white !important;
    box-shadow: 0 6px 20px rgba(251, 146, 60, 0.4), 0 2px 6px rgba(0,0,0,0.1) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
}
.button-grid .btn-menu:active {
    box-shadow: 0 2px 8px rgba(251, 146, 60, 0.4) !important;
}

.button-grid .btn-event-map {
    background: linear-gradient(145deg, #60a5fa 0%, #2563eb 100%) !important;
    color: white !important;
    box-shadow: 0 6px 20px rgba(96, 165, 250, 0.4), 0 2px 6px rgba(0,0,0,0.1) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
}
.button-grid .btn-event-map:active {
    box-shadow: 0 2px 8px rgba(96, 165, 250, 0.4) !important;
}

.button-grid .btn-chat-room {
    background: linear-gradient(145deg, #f472b6 0%, #db2777 100%) !important;
    color: white !important;
    box-shadow: 0 6px 20px rgba(244, 114, 182, 0.4), 0 2px 6px rgba(0,0,0,0.1) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
}
.button-grid .btn-chat-room:active {
    box-shadow: 0 2px 8px rgba(244, 114, 182, 0.4) !important;
}

.button-grid .btn-social-gallery {
    background: linear-gradient(145deg, #a78bfa 0%, #7c3aed 100%) !important;
    color: white !important;
    box-shadow: 0 6px 20px rgba(167, 139, 250, 0.4), 0 2px 6px rgba(0,0,0,0.1) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
}
.button-grid .btn-social-gallery:active {
    box-shadow: 0 2px 8px rgba(167, 139, 250, 0.4) !important;
}

/* Full-width Vendors button */
.btn-vendors-full {
    width: 100% !important;
    max-width: 300px !important;
    height: 48px !important;
    margin: 4px auto !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: none !important;
    cursor: pointer !important;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3) !important;
}

.btn-vendors-full .btn-emoji {
    font-size: 20px !important;
}

/* 2-column grid for secondary buttons */
.button-grid-2col {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 200px !important;
}

/* ============================================
   CASHLESS MODE - IMPROVED MOBILE UX BUTTONS
   ============================================ */
.actions-section.cashless-mode {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px;
}

/* 3-column grid for Row 1 (Top Up, Pay, History) */
.cashless-grid-3 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* 2-column grid for Rows 2 & 3 */
.cashless-grid-2 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Square buttons - Primary Actions (Top Up, Pay, History) */
.square-btn {
    aspect-ratio: 1 !important;
    height: auto !important;
    min-height: 88px !important;
    max-height: 130px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 14px 10px !important;
    border-radius: 18px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    user-select: none !important;
}

.square-btn:active {
    transform: scale(0.92) !important;
    opacity: 0.9 !important;
}

.square-btn .btn-emoji {
    font-size: 36px !important;
    line-height: 1 !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)) !important;
}

.square-btn svg {
    width: 36px !important;
    height: 36px !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15)) !important;
}

/* Inline buttons - Secondary Actions (Vendors, Map, Chat, Social) */
.inline-btn {
    height: 58px !important;
    min-height: 58px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 14px 18px !important;
    border-radius: 16px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    text-transform: none !important;
    letter-spacing: 0.3px !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    user-select: none !important;
}

.inline-btn:active {
    transform: scale(0.96) !important;
    opacity: 0.9 !important;
}

.inline-btn .btn-emoji {
    font-size: 24px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1)) !important;
}

.inline-btn svg {
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15)) !important;
}

/* Responsive adjustments for cashless mode */
@media (max-width: 360px) {
    .actions-section.cashless-mode {
        gap: 10px;
        padding: 12px 16px;
    }
    .cashless-grid-3, .cashless-grid-2 {
        gap: 10px !important;
    }
    .square-btn {
        min-height: 76px !important;
        font-size: 11px !important;
        gap: 6px !important;
        border-radius: 14px !important;
    }
    .square-btn .btn-emoji {
        font-size: 30px !important;
    }
    .square-btn svg {
        width: 30px !important;
        height: 30px !important;
    }
    .inline-btn {
        height: 52px !important;
        min-height: 52px !important;
        font-size: 13px !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        border-radius: 14px !important;
    }
    .inline-btn .btn-emoji {
        font-size: 20px !important;
    }
    .inline-btn svg {
        width: 20px !important;
        height: 20px !important;
    }
}

@media (min-width: 400px) {
    .actions-section.cashless-mode {
        gap: 14px;
        padding: 18px 24px;
    }
    .cashless-grid-3, .cashless-grid-2 {
        gap: 14px !important;
    }
    .square-btn {
        min-height: 100px !important;
        font-size: 14px !important;
        gap: 10px !important;
        border-radius: 20px !important;
    }
    .square-btn .btn-emoji {
        font-size: 42px !important;
    }
    .square-btn svg {
        width: 42px !important;
        height: 42px !important;
    }
    .inline-btn {
        height: 64px !important;
        min-height: 64px !important;
        font-size: 16px !important;
        gap: 14px !important;
        padding: 16px 20px !important;
        border-radius: 18px !important;
    }
    .inline-btn .btn-emoji {
        font-size: 28px !important;
    }
    .inline-btn svg {
        width: 28px !important;
        height: 28px !important;
    }
}

/* ============================================
   RESPONSIVE HEIGHT ADJUSTMENTS
   ============================================ */

/* Small screens (iPhone SE, etc.) - 667px and below */
@media (max-height: 667px) {
    .home-header-compact {
        flex: 0 0 44px;
        padding: 0 12px;
    }

    .home-header-compact .logo-small {
        height: 28px;
    }

    .home-header-compact .header-event-name {
        font-size: 14px;
    }

    .home-banner-section {
        padding: 6px 12px;
    }

    .home-page .user-greeting {
        font-size: 12px;
        padding: 4px 12px;
    }

    .home-page .balance-card {
    padding: 4px 16px !important;
    padding: 6px 16px;
        padding: 6px 12px;
        max-width: 200px;
    }

    .home-page .balance-amount {
        font-size: 28px;
    }

    .home-page .balance-label {
        font-size: 9px;
    }

    .home-page .actions-section {
        padding: 4px 12px 6px;
        gap: 4px;
    }

    .grid-btn {
        height: 52px !important;
        font-size: 8px !important;
    }

    .grid-btn .btn-emoji {
        font-size: 16px !important;
    }

    .btn-vendors-full {
        height: 38px !important;
        font-size: 11px !important;
        margin: 2px auto !important;
    }

    .btn-vendors-full .btn-emoji {
        font-size: 14px !important;
    }

    .home-page .fluus-global-footer {
    margin-top: 24px;
        padding: 6px 12px;
    }

    .fluus-global-footer .footer-logo {
        width: 14px;
        height: 14px;
    }

    .fluus-global-footer .footer-slogan {
        font-size: 10px;
    }
}

/* Very small screens (iPhone 5/SE 1st gen) - 568px and below */
@media (max-height: 568px) {
    .home-header-compact {
        flex: 0 0 40px;
    }

    .home-banner-section {
        padding: 4px 10px;
    }

    .banner-event-details {
        display: none; /* Hide event details on very small screens */
    }

    .home-page .user-greeting {
        font-size: 11px;
        padding: 2px 10px;
    }

    .home-page .balance-card {
    padding: 4px 16px !important;
    padding: 6px 16px;
        padding: 5px 10px;
        max-width: 180px;
    }

    .home-page .balance-amount {
        font-size: 24px;
    }

    .home-page .actions-section {
        padding: 2px 10px 4px;
        gap: 3px;
    }

    .grid-btn {
        height: 45px !important;
        font-size: 7px !important;
    }

    .grid-btn .btn-emoji {
        font-size: 14px !important;
    }

    .btn-vendors-full {
        height: 34px !important;
        font-size: 10px !important;
    }

    .home-page .fluus-global-footer {
    margin-top: 24px;
        padding: 4px 10px;
    }

    .fluus-global-footer .footer-slogan {
        display: none; /* Hide slogan on very small screens */
    }
}

/* Large screens - more breathing room */
@media (min-height: 800px) {
    .home-header-compact {
        flex: 0 0 56px;
        padding: 0 20px;
    }

    .home-header-compact .logo-small {
        height: 36px;
    }

    .home-header-compact .header-event-name {
        font-size: 18px;
    }

    .home-banner-section {
        padding: 12px 20px;
    }

    .home-page .user-greeting {
        font-size: 16px;
        padding: 8px 20px;
    }

    .home-page .balance-card {
    padding: 4px 16px !important;
    padding: 6px 16px;
        padding: 12px 20px;
        max-width: 280px;
    }

    .home-page .balance-amount {
        font-size: 40px;
    }

    .home-page .balance-label {
        font-size: 12px;
    }

    .home-page .actions-section {
        padding: 10px 20px 14px;
        gap: 10px;
    }

    .grid-btn {
        height: 70px !important;
        font-size: 10px !important;
    }

    .grid-btn .btn-emoji {
        font-size: 22px !important;
    }

    .btn-vendors-full {
        height: 52px !important;
        font-size: 14px !important;
    }

    .home-page .fluus-global-footer {
    margin-top: 24px;
        padding: 10px 20px;
    }
}

/* Extra large screens */
@media (min-height: 900px) {
    .home-banner-section {
        padding: 16px 24px;
    }

    .home-page .balance-amount {
        font-size: 48px;
    }

    .grid-btn {
        height: 80px !important;
        font-size: 11px !important;
    }

    .grid-btn .btn-emoji {
        font-size: 26px !important;
    }
}

/* Landscape mode */
@media (orientation: landscape) and (max-height: 450px) {
    .home-header-compact {
        flex: 0 0 38px;
    }

    .home-banner-section {
        padding: 4px 16px;
    }

    .home-page .user-greeting {
        display: none; /* Hide greeting in landscape to save space */
    }

    .home-page .balance-card {
    padding: 4px 16px !important;
    padding: 6px 16px;
        padding: 4px 10px;
        max-width: 160px;
    }

    .home-page .balance-amount {
        font-size: 22px;
    }

    .home-page .actions-section {
        padding: 2px 16px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .home-page .fluus-global-footer {
    margin-top: 24px;
        padding: 4px 16px;
    }

    .fluus-global-footer .footer-slogan {
        display: none;
    }
}

/* Safe area padding for notched phones (iPhone X+) */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .home-page .fluus-global-footer {
    margin-top: 24px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
    }
}

@supports (padding-top: env(safe-area-inset-top)) {
    .home-header-compact {
        padding-top: env(safe-area-inset-top);
    }
}

/* Low balance warning spans full width */
.home-page .low-balance-warning {
    grid-column: 1 / -1 !important;
}

.low-balance-warning {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
    color: #92400e !important;
    padding: 10px 16px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    width: 100% !important;
    max-width: 280px !important;
    text-align: center !important;
}

/* Info Mode Banner - hidden, event title shown above */
.info-mode-banner {
    display: none !important;
}

.no-cashless-mode {
    padding-top: 8px !important;
}

.info-only-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 16px !important;
    max-width: 320px !important;
}

/* Dashboard button style for 2x2 grid */
.info-only-grid .grid-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 16px 12px !important;
    background: var(--bg-card, #1a1a1a) !important;
    border: 1px solid var(--border, #2a2a2a) !important;
    border-radius: 12px !important;
    color: var(--text-primary, #fafafa) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    min-height: 80px !important;
    height: auto !important;
    width: 100% !important;
}

.info-only-grid .grid-btn:hover {
    background: var(--bg-elevated, #242424) !important;
    border-color: var(--border-light, #333) !important;
    transform: translateY(-2px) !important;
}

.info-only-grid .grid-btn:active {
    transform: translateY(0) !important;
}

/* Icon inside dashboard button */
.info-only-grid .grid-btn .btn-emoji {
    font-size: 28px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

/* Label inside dashboard button */
.info-only-grid .grid-btn span:last-child {
    font-size: 13px !important;
    font-weight: 500 !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* Override individual button backgrounds for 2x2 grid */
.info-only-grid .btn-menu {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3) !important;
}

.info-only-grid .btn-event-map {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3) !important;
}

.info-only-grid .btn-chat-room {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.3) !important;
    margin-bottom: 0 !important;
}

.info-only-grid .btn-social-gallery {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3) !important;
    margin-bottom: 0 !important;
}


/* Note: Button sizes now handled by .button-grid and .grid-btn classes */

.btn-emoji {
    font-size: 22px !important;
}


/* Balance card container - centered horizontally with compact spacing */
.home-page .balance-container {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 20px !important;
    margin: 0 !important;
}

/* Balance card with border - same width as buttons (280px max) */
.home-page .balance-card {
    padding: 4px 16px !important;
    padding: 6px 16px;
    background: white !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 14px 20px !important;
    margin: 0 auto !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
    width: 100% !important;
    max-width: 280px !important;
    text-align: center !important;
}

.home-page .balance-label {
    color: #6b7280 !important;
    font-size: 10px !important;
}

.home-page .balance-amount {
    font-size: 29px !important;
    color: #1f2937 !important;
}

.home-page .points-row {
    margin-top: 6px !important;
    padding-top: 6px !important;
    border-top: 1px solid #e5e7eb !important;
}

.home-page .points-row span {
    font-size: 11px !important;
    color: #ca8a04 !important;
}

/* History button - orange/amber */
.home-page .btn-history {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: white !important;
}

/* Menu button */
.home-page .btn-menu {
    width: 100% !important;
    max-width: 280px !important;
    padding: 16px 24px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    color: white !important;
    border: none !important;
    cursor: pointer !important;
}

/* Event Map button */
.home-page .btn-event-map {
    width: 100% !important;
    max-width: 280px !important;
    padding: 16px 24px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    color: white !important;
    border: none !important;
    cursor: pointer !important;
}

/* Event Chat Room button */
.home-page .btn-chat-room {
    width: 100% !important;
    max-width: 280px !important;
    padding: 16px 24px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%) !important;
    color: white !important;
    border: none !important;
    cursor: pointer !important;
    margin-bottom: 20px !important;
}

/* Social Gallery button */
.home-page .btn-social-gallery,
.button-grid .btn-social-gallery {
    width: 100% !important;
    max-width: 280px !important;
    padding: 16px 24px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    color: white !important;
    border: none !important;
    cursor: pointer !important;
    margin-bottom: 20px !important;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3) !important;
}

/* Summary cards on history page */
.summary-cards {
    display: flex;
    gap: 10px;
    padding: 0 15px;
    margin-bottom: 15px;
}

.summary-card {
    flex: 1;
    background: white;
    border-radius: 12px;
    padding: 12px 8px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.summary-card .summary-label {
    display: block;
    font-size: 11px;
    color: #6b7280;
    margin-bottom: 4px;
}

.summary-card .summary-value {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
}

.summary-card .summary-value.green {
    color: #16a34a;
}

.summary-card .summary-value.red {
    color: #dc2626;
}

/* Menu page styles */
.menu-page {
    background: linear-gradient(180deg, #7c3aed 0%, #5b21b6 100%);
    min-height: 100vh;
}

.menu-content {
    padding: 15px;
    overflow-y: auto;
}

.vendors-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vendor-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.vendor-header {
    width: 100% !important;
    padding: 16px 20px;
    background: white;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
}

.vendor-name {
    font-weight: 700;
    color: #1f2937;
}

.vendor-arrow {
    color: #9ca3af;
}

.vendor-categories {
    padding: 0 16px 16px;
    border-top: 1px solid #e5e7eb;
}

.category-section {
    margin-top: 12px;
}

.category-name {
    font-size: 13px;
    color: #7c3aed;
    font-weight: 600;
    margin-bottom: 8px;
}

.products-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.product-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    background: #f9fafb;
    border-radius: 8px;
}

.product-name {
    font-size: 14px;
    color: #374151;
}

.product-price {
    font-size: 14px;
    font-weight: 600;
    color: #16a34a;
}

.no-menu {
    color: white;
    text-align: center;
    padding: 40px;
    opacity: 0.8;
}


/* Menu icons */
.vendor-icon {
    font-size: 20px;
    margin-right: 8px;
}

.vendor-header {
    display: flex;
    align-items: center;
}

.product-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.product-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.product-name {
    flex: 1;
}

/* Polling indicator */
.polling-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: rgba(124, 58, 237, 0.1);
    border-radius: 20px;
    margin: 16px 0;
    color: #7c3aed;
    font-size: 14px;
}

.polling-dot {
    width: 10px;
    height: 10px;
    background: #7c3aed;
    border-radius: 50%;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

.auto-confirm-note {
    color: #10b981;
    font-size: 14px;
    margin-top: 8px;
}

/* ============================================
   RESULT/CONFIRMATION PAGE
   ============================================ */
.result-page {
    background: linear-gradient(180deg, #7c3aed 0%, #5b21b6 50%, #4c1d95 100%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.result-content {
    background: white;
    border-radius: 24px;
    padding: 32px 24px;
    width: 100% !important;
    max-width: 360px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.result-content.success {
    animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.result-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.result-icon.success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
}

.result-icon.success .icon {
    width: 40px;
    height: 40px;
    stroke: white;
    stroke-width: 3;
}

.result-content h2 {
    font-size: 22px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 8px;
}

.result-content .auto-confirm-note {
    color: #10b981;
    font-size: 13px;
    margin-bottom: 20px;
    font-weight: 500;
}

.result-details {
    background: #f9fafb;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 20px;
    text-align: left;
}

.result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    font-size: 15px;
    color: #4b5563;
}

.result-row:not(:last-child) {
    border-bottom: 1px solid #e5e7eb;
}

.result-row.bold {
    font-weight: 700;
    color: #1f2937;
    font-size: 17px;
}

.result-row .amount {
    font-weight: 700;
    font-size: 17px;
}

.result-row .amount.green {
    color: #10b981;
}

.result-row .amount.red {
    color: #ef4444;
}

.result-content .btn-done {
    width: 100% !important;
    padding: 16px;
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.result-content .btn-done:active {
    transform: scale(0.98);
}

/* Larger polling indicator */
.polling-indicator-large {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 24px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    border-radius: 16px;
    margin: 20px 0;
    color: #92400e;
    font-size: 16px;
    font-weight: 600;
    animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
    50% { box-shadow: 0 0 20px 4px rgba(245, 158, 11, 0.6); }
}

.polling-dot-large {
    width: 14px;
    height: 14px;
    background: #f59e0b;
    border-radius: 50%;
    animation: pulse 1s ease-in-out infinite;
}

/* Orange scan receipt button */
.btn-scan-receipt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100% !important;
    padding: 16px 24px;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: white;
    border: none;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 16px;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-scan-receipt:active {
    transform: scale(0.98);
}

.btn-scan-receipt .icon {
    width: 22px;
    height: 22px;
}

/* ============================================
   HAMBURGER BUTTON (for logged-out pages)
   ============================================ */
.hamburger-btn {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 100;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 12px;
    padding: 10px;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: background 0.2s;
}

.hamburger-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.hamburger-btn .icon {
    width: 24px;
    height: 24px;
    stroke: white;
}

/* Non-branded pages - brighter hamburger button */
.login-page:not(.branded-login) .hamburger-btn {
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.login-page:not(.branded-login) .hamburger-btn:hover {
    background: rgba(255, 255, 255, 0.35);
    border-color: rgba(255, 255, 255, 0.5);
}

.login-page:not(.branded-login) .hamburger-btn .icon {
    stroke: white;
}

/* ============================================
   HAMBURGER SLIDE-OUT MENU
   ============================================ */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.menu-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 85%;
    max-width: 320px;
    background: white;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    animation: slideIn 0.25s ease-out;
}

@keyframes slideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px 20px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(180deg, #7c3aed 0%, #5b21b6 100%);
    color: white;
}

.menu-header h2 {
    font-size: 22px;
    font-weight: 700;
}

/* Branded menu header */
.branded-menu-header {
    background: none !important;
    color: white !important;
}

.branded-menu-header h2 {
    color: white !important;
}

.branded-menu-header .menu-close {
    color: white !important;
}

.menu-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.menu-close .icon {
    width: 24px;
    height: 24px;
}

.menu-content {
    flex: 1;
    padding: 24px 20px;
    overflow-y: auto;
}

.menu-section {
    margin-bottom: 24px;
}

.menu-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.language-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lang-btn {
    width: 100% !important;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #d1d5db;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
}

.lang-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.lang-btn.active {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-color: #1a1a2e;
    color: #ffffff;
    font-weight: 600;
}

.menu-footer {
    padding: 20px;
    border-top: 1px solid #e5e7eb;
}

/* Logged-out menu footer */
.logged-out-footer {
    display: flex;
    justify-content: center;
    align-items: center;
}

.powered-by-fluus-menu {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #9ca3af;
    font-size: 13px;
}

.powered-by-fluus-menu .powered-by-logo {
    width: 24px;
    height: 24px;
    border-radius: 6px;
}

/* Logged-out menu items as links */
.logged-out-menu .menu-item {
    text-decoration: none;
    color: inherit;
}

.btn-switch-event {
    width: 100% !important;
    padding: 14px 20px;
    background: #f5f3ff;
    border: 2px solid #ddd6fe;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    color: #7c3aed;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.2s;
    margin-bottom: 12px;
}

.btn-switch-event:hover {
    background: #ede9fe;
}

.btn-switch-event-settings {
    width: 100% !important;
    padding: 16px 20px;
    background: #f5f3ff;
    border: 2px solid #ddd6fe;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #7c3aed;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.2s;
}

.btn-switch-event-settings:hover {
    background: #ede9fe;
}

.switch-event-section {
    margin-top: 20px;
}

.btn-logout {
    width: 100% !important;
    padding: 16px 20px;
    background: #fef2f2;
    border: 2px solid #fecaca;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #dc2626;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.2s;
}

.btn-logout:hover {
    background: #fee2e2;
}

.btn-logout .icon {
    width: 22px;
    height: 22px;
}

/* Icon spin animation for refresh */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.icon.spin {
    animation: spin 1s linear infinite;
}

/* ============================================
   HISTORY PAGE - RUNNING BALANCE
   ============================================ */
.history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100% !important;
}

.tx-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 80px;
}

.tx-balance {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}

/* ============================================
   NEW MODAL STYLES (POS-style)
   ============================================ */
.modal-overlay-new {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 16px;
}

.modal-panel {
    background: white;
    border-radius: 20px;
    width: 100% !important;
    max-width: 380px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 20px;
    animation: modalSlideUp 0.25s ease-out;
}

@keyframes modalSlideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.modal-panel-title {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-title-icon {
    font-size: 20px;
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 28px;
    color: #6b7280;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}

.modal-panel-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Amount box */
.amount-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-radius: 16px;
}

.amount-box.green-bg {
    background: #ecfdf5;
}

.amount-box.gray-bg {
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f0f1a 100%);
}

.amount-label {
    color: #6b7280;
    font-size: 14px;
}

.amount-value {
    font-size: 28px;
    font-weight: 800;
}

.amount-value.green {
    color: #16a34a;
}

.amount-value.red {
    color: #dc2626;
}

/* Detail rows */
.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 8px;
}

.detail-label {
    color: #6b7280;
    font-size: 14px;
}

.detail-label.bold {
    font-weight: 600;
    color: #374151;
}

.detail-value {
    font-size: 15px;
    font-weight: 500;
    color: #1f2937;
}

.detail-value.bold {
    font-weight: 700;
}

.detail-value.green {
    color: #16a34a;
}

.detail-value.red {
    color: #dc2626;
}

.method-value {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Sections */
.detail-section {
    border-top: 1px solid #e5e7eb;
    padding-top: 12px;
    margin-top: 4px;
}

.tip-highlight {
    background: #fef3c7;
    border-radius: 8px;
    margin: 0 -8px;
    padding: 10px 16px !important;
}

.balance-section {
    border-top: 1px solid #e5e7eb;
    padding-top: 12px;
    margin-top: 4px;
}

/* Items section */
.items-section {
    border-top: 1px solid #e5e7eb;
    padding-top: 12px;
    margin-top: 4px;
}

.items-title {
    font-weight: 600;
    color: #374151;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.items-list-new {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.item-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: #ecfdf5;
    border-radius: 12px;
}

.item-info {
    flex: 1;
}

.item-name-new {
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 2px;
}

.item-qty {
    font-size: 12px;
    color: #6b7280;
}

.item-total {
    font-weight: 700;
    color: #16a34a;
}

/* Close button */
.modal-close-button {
    width: 100% !important;
    margin-top: 16px;
    padding: 14px;
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.modal-close-button:active {
    transform: scale(0.98);
}

/* ============================================
   HISTORY PAGE - NEW SUMMARY LAYOUT
   ============================================ */
.summary-section {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.summary-cards-row {
    display: flex;
    gap: 10px;
}

.summary-card-small {
    flex: 1;
    background: white;
    border-radius: 14px;
    padding: 14px 12px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.summary-card-small.orange {
    background: #fffbeb;
}

.summary-card-small .summary-label {
    display: block;
    font-size: 11px;
    color: #6b7280;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.summary-card-small .summary-value {
    display: block;
    font-size: 18px;
    font-weight: 700;
}

.summary-card-small .summary-value.green {
    color: #16a34a;
}

.summary-card-small .summary-value.red {
    color: #dc2626;
}

.balance-card-large {
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    border-radius: 18px;
    padding: 24px 20px;
    text-align: center;
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.35);
}

.balance-card-label {
    display: block;
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.balance-card-value {
    display: block;
    font-size: 40px;
    font-weight: 800;
    color: white;
    letter-spacing: -1px;
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */
.toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.85);
    color: white;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 14px;
    z-index: 2000;
    animation: toastIn 0.3s;
}

@keyframes toastIn {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* ============================================
   COMING SOON STYLING
   ============================================ */
.coming-soon {
    opacity: 0.6;
    cursor: pointer;
}

.coming-soon-label {
    font-size: 10px;
    color: #9ca3af;
    display: block;
    margin-top: 2px;
}

.coming-soon-badge {
    font-size: 10px;
    background: #e5e7eb;
    color: #6b7280;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: auto;
}

/* ============================================
   FEATURE GRID (HOME PAGE)
   ============================================ */
.feature-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100% !important;
    max-width: 280px;
    margin-top: 16px;
}

.feature-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 14px 10px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 14px;
    color: white;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.feature-btn .feature-icon {
    font-size: 22px;
}

/* ============================================
   MENU ITEMS
   ============================================ */
.menu-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

.menu-item {
    width: 100% !important;
    padding: 14px 16px;
    background: #f9fafb;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
}

.menu-item-icon {
    margin-right: 12px;
    font-size: 18px;
}

.menu-item.coming-soon {
    opacity: 0.7;
}

/* ============================================
   SETTINGS PAGE
   ============================================ */
.settings-page {
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f0f1a 100%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.settings-page .header {
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
}

.settings-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    overflow-y: auto;
}

.settings-section {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.settings-section.coming-soon {
    opacity: 0.6;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
}

.section-icon {
    font-size: 20px;
}

.section-title {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    flex: 1;
}

.section-content {
    padding: 0 16px 16px;
}

.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
}

.setting-row:last-child {
    border-bottom: none;
}

.language-toggle {
    display: flex;
    gap: 8px;
}

.lang-toggle-btn {
    padding: 8px 14px;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.95);
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s;
}

.lang-toggle-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.lang-toggle-btn.active {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-color: #1a1a2e;
    color: #ffffff;
    font-weight: 600;
}

.version-number {
    color: #6b7280;
    font-size: 14px;
}

/* Check for Updates Button */
.check-update-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100% !important;
    padding: 14px 16px;
    margin-top: 12px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.check-update-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.check-update-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.check-update-btn.checking {
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
}

.check-update-btn .update-icon {
    font-size: 18px;
}

.check-update-btn .update-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Update Available Modal */
.update-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.update-modal {
    background: white;
    border-radius: 24px;
    padding: 32px 24px;
    max-width: 340px;
    width: 100% !important;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.update-modal-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.update-modal-title {
    font-size: 22px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 12px 0;
}

.update-modal-version {
    font-size: 16px;
    color: #059669;
    margin: 0 0 4px 0;
}

.update-modal-version strong {
    font-weight: 700;
}

.update-modal-current {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 16px 0;
}

.update-modal-notes {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 20px;
    text-align: left;
}

.update-modal-notes strong {
    display: block;
    color: #166534;
    font-size: 13px;
    margin-bottom: 6px;
}

.update-modal-notes p {
    color: #166534;
    font-size: 13px;
    margin: 0;
    line-height: 1.5;
}

.update-modal-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.update-modal-btn {
    width: 100% !important;
    padding: 14px 20px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.update-modal-btn.primary {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.update-modal-btn.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.update-modal-btn.secondary {
    background: #f3f4f6;
    color: #6b7280;
}

.update-modal-btn.secondary:hover {
    background: #e5e7eb;
}

/* ============================================
   MENU PAGE
   ============================================ */
.menu-page {
    background: linear-gradient(180deg, #7c3aed 0%, #5b21b6 100%);
    min-height: 100vh;
}

.menu-page .header .refresh-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-page .header .refresh-btn:disabled {
    opacity: 0.5;
}

.menu-page .menu-content {
    flex: 1;
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f0f1a 100%);
    border-radius: 24px 24px 0 0;
    padding: 16px;
    margin-top: 10px;
    overflow-y: auto;
}

.menu-disclaimer {
    background: #e5e7eb;
    padding: 16px 20px 24px;
    text-align: center;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.5;
    border-top: 1px solid #d1d5db;
}

.category-disclaimer {
    background: #f9fafb;
    padding: 12px 16px;
    text-align: center;
    font-size: 11px;
    color: #9ca3af;
    line-height: 1.4;
    border-top: 1px dashed #e5e7eb;
    margin-top: 8px;
}

.categories-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.category-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.category-header {
    width: 100% !important;
    padding: 16px;
    background: linear-gradient(135deg,
        var(--brand-primary, #6366f1) 0%,
        var(--brand-secondary, #8b5cf6) 100%
    );
    border: none;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    text-align: left;
    border-radius: 12px 12px 0 0;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

.category-header:hover {
    background: linear-gradient(135deg,
        var(--brand-primary, #4f46e5) 0%,
        var(--brand-secondary, #7c3aed) 100%
    );
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.35);
    transform: translateY(-1px);
}

.category-icon {
    font-size: 28px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.category-logo {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
}

.category-header .category-name {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    color: white;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.category-count {
    font-size: 12px;
    color: white;
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 10px;
    border-radius: 12px;
}

.category-arrow {
    color: white;
    font-size: 12px;
    margin-left: 4px;
    opacity: 0.9;
}

.category-products {
    padding: 0 16px 16px;
    border-top: 1px solid #f3f4f6;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
}

.product-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f9fafb;
    border-radius: 12px;
}

.product-icon {
    font-size: 24px;
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

.product-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.product-name {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.product-desc {
    font-size: 12px;
    color: #9ca3af;
}

.product-price {
    font-size: 15px;
    font-weight: 700;
    color: #7c3aed;
}

.product-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: #f9fafb;
    border-radius: 10px;
}

.product-icon {
    font-size: 18px;
}

.product-name {
    flex: 1;
    font-size: 14px;
    color: #374151;
}

.product-price {
    font-size: 14px;
    font-weight: 600;
    color: #7c3aed;
}

.no-menu {
    text-align: center;
    color: #6b7280;
    padding: 40px 20px;
}

.loading {
    text-align: center;
    color: #6b7280;
    padding: 40px 20px;
}

/* Vendor-based menu structure */
.vendors-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vendor-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.vendor-card.expanded {
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.15);
}

.vendor-header {
    width: 100% !important;
    padding: 16px;
    background: linear-gradient(135deg,
        var(--brand-primary, #6366f1) 0%,
        var(--brand-secondary, #8b5cf6) 100%
    );
    border: none;
    display: flex;
    transition: all 0.2s ease;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    text-align: left;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

.vendor-header:hover {
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.35);
    transform: translateY(-1px);
}

.vendor-header .vendor-name,
.vendor-header .vendor-location,
.vendor-header .vendor-arrow {
    color: white;
}

.vendor-card.expanded .vendor-header {
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
}

.vendor-icon {
    font-size: 32px;
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vendor-logo {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    object-fit: cover;
    flex-shrink: 0;
}

.vendor-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.vendor-name {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}

.vendor-location {
    font-size: 12px;
    color: #6b7280;
}

.vendor-arrow {
    color: #9ca3af;
    font-size: 14px;
    margin-left: 4px;
}

.vendor-categories {
    padding: 12px;
    background: #f9fafb;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.category-card.nested {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.category-card.nested .category-header {
    padding: 12px 14px;
}

.category-card.nested .category-icon {
    font-size: 22px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

.category-card.nested .category-logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

.category-card.nested .category-name {
    font-size: 15px;
}

.category-card.nested .category-products {
    padding: 0 12px 12px;
    padding-top: 8px;
}

.no-items {
    text-align: center;
    color: #9ca3af;
    padding: 20px;
    font-size: 14px;
}

/* ============================================
   HISTORY PAGE
   ============================================ */
.history-page {
    background: linear-gradient(180deg, #7c3aed 0%, #5b21b6 100%);
    min-height: 100vh;
}

.history-page .history-content {
    flex: 1;
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f0f1a 100%);
    padding: 0 16px 16px;
    overflow-y: auto;
}

.summary-section {
    padding: 16px;
}

.summary-cards-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.summary-card-small {
    flex: 1;
    background: white;
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.summary-card-small .summary-label {
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-card-small .summary-value {
    font-size: 16px;
    font-weight: 700;
    margin-top: 4px;
}

.summary-value.green { color: #10b981; }
.summary-value.red { color: #ef4444; }

.balance-card-large {
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    color: white;
}

.balance-card-label {
    font-size: 12px;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.balance-card-value {
    font-size: 32px;
    font-weight: 800;
    margin-top: 4px;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.history-item {
    width: 100% !important;
    background: white;
    border: none;
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.tx-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tx-icon {
    font-size: 24px;
}

.tx-info {
    text-align: left;
}

.tx-label {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}

.tx-date {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 2px;
}

.tx-right {
    text-align: right;
}

.tx-amount {
    font-size: 16px;
    font-weight: 700;
}

.tx-amount.green { color: #10b981; }
.tx-amount.red { color: #ef4444; }

.tx-balance {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 2px;
}

.no-history {
    text-align: center;
    color: #6b7280;
    padding: 40px 20px;
}

/* ============================================
   DOWNLOAD BUTTONS
   ============================================ */
.download-btn {
    display: block;
    width: 100% !important;
    padding: 14px 16px;
    margin-bottom: 10px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    color: white;
}

.download-btn.user-app {
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
}

.download-btn.pos-app {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

/* ============================================
   BRANDED MODE STYLES
   ============================================ */

/* Loading page while checking branded mode */
.loading-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #7c3aed 0%, #5b21b6 100%);
    color: white;
    min-height: 100vh;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

/* Branded login page */
.branded-login {
    transition: background 0.3s ease;
    min-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.branded-header {
    padding: 30px 20px 0 !important;
}

.branded-banner {
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
    max-width: none;
    height: auto;
    object-fit: cover;
    border-radius: 0;
    margin-top: 10px;
    margin-bottom: 0;
    box-shadow: none;
}

/* Organized by label - compact spacing */
.organized-by {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 0 8px;
    font-size: 11px;
    color: rgba(255,255,255,0.8);
    font-weight: 500;
}

/* Organized by subtitle on home page */
.organized-by-subtitle {
    font-size: 12px;
    color: rgba(255,255,255,0.85);
    font-weight: 500;
    margin: 4px 0 0 0;
    padding: 0;
}

/* Powered by Fluus section */
.powered-by-fluus {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 0 12px;
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    font-weight: 500;
}

.powered-by-fluus.clickable {
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 8px;
    padding: 10px 16px 12px;
}

.powered-by-fluus.clickable:hover {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.9);
}

.powered-by-fluus .powered-by-logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 4px;
}

.branded-login .powered-by-fluus {
    margin-bottom: 8px;
}

.branded-home .powered-by-fluus {
    padding: 6px 0 10px;
}

/* Global Fluus Footer - appears at bottom of all pages */
.fluus-global-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 16px 10px;
    margin-top: 24px;
    color: rgba(255,255,255,0.7);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.fluus-global-footer:hover {
    color: rgba(255,255,255,0.9);
}

.fluus-global-footer .footer-powered-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fluus-global-footer .footer-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: 4px;
}

.fluus-global-footer .footer-slogan {
    font-size: 11px;
    opacity: 0.8;
}

/* Dark pages - footer color */
.login-page .fluus-global-footer {
    margin-top: 24px;
    color: rgba(255,255,255,0.7);
}

.home-page .fluus-global-footer {
    color: rgba(255,255,255,0.7);
    /* margin-top handled in nuclear scroll fix - NOT auto */
}

/* Light background pages */
.history-page .fluus-global-footer,
.settings-page .fluus-global-footer,
.menu-page .fluus-global-footer {
    color: rgba(0,0,0,0.5);
    padding-bottom: 24px;
}

.history-page .fluus-global-footer:hover,
.settings-page .fluus-global-footer:hover,
.menu-page .fluus-global-footer:hover {
    color: rgba(0,0,0,0.7);
}

.branded-logo {
    height: 80px !important;
    width: auto !important;
    max-width: 200px;
    object-fit: contain;
    filter: drop-shadow(0 4px 20px rgba(0,0,0,0.4)) !important;
}

.branded-event-name {
    font-size: 24px;
    font-weight: 700;
    margin-top: 16px;
    margin-bottom: 8px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* Title row with like button */
.branded-event-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 20px;
}

.branded-event-title-row .branded-event-name {
    margin: 0;
}

.branded-organizer-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.organizer-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 20px 0 8px;
}

/* Like button styles */
.like-button {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    padding: 6px 12px;
    cursor: pointer;
    color: white;
    font-size: 13px;
    transition: all 0.2s ease;
}

.like-button:hover:not(:disabled) {
    background: rgba(255,255,255,0.25);
    transform: scale(1.05);
}

.like-button:active:not(:disabled) {
    transform: scale(0.95);
}

.like-button:disabled {
    cursor: default;
}

.like-button.liked {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.3);
}

.like-button .icon {
    width: 18px;
    height: 18px;
}

/* Like button positioned in image corner */
.like-button.image-corner {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0,0,0,0.5);
    border: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 8px 14px;
    font-size: 14px;
}

.like-button.image-corner:hover:not(:disabled) {
    background: rgba(0,0,0,0.7);
}

.like-button.image-corner.liked {
    background: rgba(239, 68, 68, 0.6);
}

/* Mini like button for menus */
.like-button.mini {
    padding: 4px 8px;
    font-size: 12px;
    background: rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 16px;
    color: #666;
    min-width: auto;
}

.like-button.mini:hover {
    background: rgba(0,0,0,0.1);
}

.like-button.mini.liked {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.like-button.mini .icon {
    width: 14px;
    height: 14px;
}

/* Product actions row */
.product-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.like-button.small {
    padding: 4px 8px;
    font-size: 12px;
}

.like-button.small .icon {
    width: 14px;
    height: 14px;
}

.like-button.white {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.3);
}

.like-count {
    font-weight: 500;
}

/* Hero image container - full width */
.branded-hero-container {
    position: relative;
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: 16px;
    overflow: hidden;
}

.branded-hero-image {
    width: 100% !important;
    height: auto;
    max-height: 220px;
    object-fit: contain;
    display: block;
}

/* Organized by section with small logo */
.branded-organizer-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.branded-organizer-section.clickable:hover {
    background-color: rgba(255,255,255,0.1);
}

.branded-organizer-section.clickable:active {
    background-color: rgba(255,255,255,0.15);
}

.branded-organizer-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 4px;
    background: rgba(255,255,255,0.1);
}

.branded-organizer-text {
    font-weight: 500;
}

/* Event details - date and location */
.branded-event-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 12px 20px;
    margin: 0 auto;
    max-width: fit-content;
    font-size: 13px;
    color: rgba(255,255,255,0.8);
}

.branded-event-date,
.branded-event-location {
    display: flex;
    align-items: center;
    gap: 6px;
    text-align: left;
}

.detail-icon {
    font-size: 14px;
    opacity: 0.9;
}

.branded-login .tagline {
    font-size: 14px;
    opacity: 0.9;
    margin-top: 8px;
}

.branded-login .login-form {
    margin-top: auto;
    border-radius: 0;
    background: transparent !important;
}

/* Branded login - form labels and text should be white */
.branded-login .login-form label {
    color: rgba(255, 255, 255, 0.9) !important;
}

.branded-login .login-form .form-group {
    color: white;
}

/* Keep input fields white for readability */
.branded-login .login-form input,
.branded-login .login-form select {
    background: white !important;
    color: #1f2937 !important;
}

/* Mode toggle (Login/Register tabs) */
.branded-login .mode-toggle {
    background: rgba(255, 255, 255, 0.15) !important;
}

.branded-login .mode-toggle button {
    color: rgba(255, 255, 255, 0.8) !important;
}

.branded-login .mode-toggle button.active {
    background: white !important;
    color: #1f2937 !important;
}

/* Error messages */
.branded-login .error-message {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #dc2626 !important;
}

/* Phone input wrapper */
.branded-login .phone-input-wrapper {
    background: white !important;
    border-radius: 12px;
}

.branded-login .phone-input-wrapper select,
.branded-login .phone-input-wrapper input {
    background: transparent !important;
}

/* Branded home page - header should be transparent to show parent gradient */
.branded-home .home-header {
    background: transparent !important;
    transition: background 0.3s ease;
}

.branded-home .branded-header {
    padding: 25px 20px 0 !important;
}

.branded-home .branded-logo {
    height: 40px !important;
    width: auto !important;
    max-width: 120px;
}

.branded-home .branded-event-name {
    font-size: 18px;
    font-weight: 700;
    margin: 6px 0 2px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.branded-home .branded-banner {
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
    max-width: none;
    margin-top: 8px;
    margin-bottom: 0;
    border-radius: 0;
    max-height: none;
}

/* Branded buttons - keep default purple color, don't use branding colors */
/* Primary color should ONLY apply to header area */

/* Hide event dropdown in branded mode (done via JS) */

/* Branded header adjustments */
.branded-home .event-name {
    font-weight: 600;
    font-size: 15px;
    opacity: 1;
}

/* Balance card in branded mode - white card floating on colored background, centered */
.branded-home .balance-card {
    background: white !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 280px !important;
}

.branded-home .balance-label {
    color: #6b7280 !important;
}

.branded-home .balance-amount {
    color: #1f2937 !important;
}

.branded-home .points-row {
    border-top-color: #e5e7eb !important;
}

.branded-home .points-row span {
    color: #ca8a04 !important;
}

/* Branded mode - ensure no white gaps */
.branded-home .balance-container {
    background: transparent !important;
}

.branded-home .pending-section {
    background: rgba(255,255,255,0.95) !important;
    border-radius: 16px !important;
    margin: 0 20px !important;
    flex: 0 0 auto !important;
}

/* Removed duplicate rules - see above */
.branded-home .points-row span {
    color: #ca8a04 !important;
}

/* ============================================
   MAP VIEW PAGE - Full screen zoomable map
   ============================================ */
.map-page {
    background: #1f2937;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.map-page .header {
    flex-shrink: 0;
}

.map-container {
    flex: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.map-image {
    max-width: 100% !important;
    max-height: 100%;
    object-fit: contain;
    transform-origin: center center;
    transition: transform 0.05s ease-out;
    pointer-events: none;
}

.map-controls {
    position: absolute;
    bottom: 30px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 10;
}

.map-control-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    font-size: 24px;
    font-weight: bold;
    color: #374151;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.map-control-btn:hover {
    background: white;
    transform: scale(1.1);
}

.map-control-btn:active {
    transform: scale(0.95);
}

.map-control-btn.reset {
    font-size: 20px;
}

.map-control-btn.location {
    font-size: 16px;
}

.map-control-btn.location.active {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

/* User location marker (blue pulsing dot) */
.user-location-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #3b82f6;
    border: 3px solid white;
    box-shadow: 0 0 0 rgba(59, 130, 246, 0.4);
    animation: location-pulse 2s infinite;
    z-index: 10;
    pointer-events: none;
}

@keyframes location-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);
    }
    70% {
        box-shadow: 0 0 0 20px rgba(59, 130, 246, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
}

/* Location error message */
.location-error {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(239, 68, 68, 0.9);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    white-space: nowrap;
    z-index: 150;
    animation: fade-in 0.3s ease;
}

@keyframes fade-in {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.map-no-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    text-align: center;
    padding: 40px;
}

.map-no-icon {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.map-no-content p {
    font-size: 16px;
}

/* Map image wrapper for hotspots positioning */
.map-image-wrapper {
    position: relative;
    display: inline-block;
    transition: transform 0.05s ease-out;
}

.map-image-wrapper .map-image {
    display: block;
    max-width: 100% !important;
    height: auto;
}

/* Map Hotspots - simple colored dots */
.map-hotspot {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    z-index: 10;
    transition: transform 0.15s ease;
    font-size: 0; /* Hide emoji text */
    line-height: 0;
    overflow: hidden;
}

/* Larger tap target for mobile */
.map-hotspot::before {
    content: '';
    position: absolute;
    top: -12px;
    left: -12px;
    right: -12px;
    bottom: -12px;
    border-radius: 50%;
}

.map-hotspot:hover,
.map-hotspot:active {
    transform: translate(-50%, -50%) scale(1.4);
    z-index: 20;
}

/* Hotspot Popup Overlay */
.hotspot-popup-overlay {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    padding: 20px;
}

/* Hotspot Popup */
.hotspot-popup {
    background: white;
    border-radius: 16px;
    padding: 24px;
    max-width: 320px;
    width: 100% !important;
    text-align: center;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    animation: popupSlideIn 0.2s ease-out;
}

@keyframes popupSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.hotspot-popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f0f1a 100%);
    border-radius: 50%;
    font-size: 20px;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hotspot-popup-close:hover {
    background: #e5e7eb;
}

.hotspot-popup-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 16px;
    color: white;
}

.hotspot-popup-title {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 8px;
}

.hotspot-popup-desc {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 16px;
    line-height: 1.5;
}

.hotspot-popup-menu-btn {
    width: 100% !important;
    padding: 12px 16px;
    background: #7c3aed;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.hotspot-popup-menu-btn:hover {
    background: #6d28d9;
}

/* ============================================
   SWITCH EVENT MODE
   ============================================ */

.switch-event-header {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-radius: 16px;
    margin: 16px;
}

.switch-event-user {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.switch-event-welcome {
    color: white;
    font-size: 18px;
    font-weight: 600;
}

.switch-event-prompt {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

.btn-cancel-switch {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel-switch:hover {
    background: rgba(255, 255, 255, 0.25);
}

.switch-event-loading {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    z-index: 1000;
    color: white;
    font-size: 16px;
}

/* ==============================================
   CHAT ROOM - POLISHED UI
   ============================================== */

.chat-room {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1a 100%);
    color: white;
    position: relative;
    overflow: hidden;
}

.chat-room-bg {
    position: absolute;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
}

.chat-room > *:not(.chat-room-bg) {
    position: relative;
    z-index: 1;
}

/* Header */
.chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.chat-back-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 10px;
    transition: background 0.2s;
}

.chat-back-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.chat-header-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.chat-header-title {
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-header-brand {
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0.7;
    font-size: 12px;
}

.chat-fluus-logo {
    height: 14px;
    width: auto;
}

/* Settings button */
.chat-settings-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.chat-settings-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.chat-my-avatar {
    font-size: 22px;
}

/* Private chat header */
.chat-private-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-private-avatar {
    font-size: 24px;
}

.chat-private-name {
    font-size: 16px;
    font-weight: 600;
}

.chat-private-label {
    font-size: 11px;
    opacity: 0.6;
}

/* DM button */
.chat-dm-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s;
}

.chat-dm-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Private chats list */
.chat-conversations-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.chat-conversation-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.chat-conversation-item:hover {
    background: rgba(255, 255, 255, 0.15);
}

.chat-conv-avatar {
    font-size: 32px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    flex-shrink: 0;
}

.chat-conv-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chat-conv-name {
    font-weight: 600;
    font-size: 15px;
}

.chat-conv-preview {
    font-size: 13px;
    opacity: 0.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-conv-unread {
    background: var(--brand-primary, #7c3aed);
    color: white;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 12px;
    min-width: 24px;
    text-align: center;
}

.chat-hint {
    font-size: 12px;
    opacity: 0.5;
    margin-top: 8px;
}

/* Center content */
.chat-center-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.chat-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: var(--brand-primary, #7c3aed);
    border-radius: 50%;
    animation: chat-spin 0.8s linear infinite;
}

@keyframes chat-spin {
    to { transform: rotate(360deg); }
}

/* Username setup */
.chat-username-setup {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 24px;
    text-align: center;
    overflow-y: auto;
}

.chat-avatar-selected {
    font-size: 72px;
    margin-bottom: 16px;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

.chat-avatar-grid {
    display: grid !important;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
    margin-bottom: 28px;
    max-width: 340px;
}

.chat-avatar-option {
    width: 38px;
    height: 38px;
    font-size: 22px;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-avatar-option:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.05);
}

.chat-avatar-option.selected {
    border-color: var(--brand-primary, #7c3aed);
    background: rgba(124, 58, 237, 0.25);
    transform: scale(1.1);
}

.chat-username-setup h3 {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 600;
}

.chat-username-hint {
    font-size: 13px;
    opacity: 0.6;
    margin-bottom: 20px;
    max-width: 280px;
    line-height: 1.5;
}

.chat-username-input {
    width: 100% !important;
    max-width: 260px;
    padding: 14px 18px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    color: white;
    font-size: 16px;
    text-align: center;
    margin-bottom: 12px;
    transition: all 0.2s;
}

.chat-username-input:focus {
    border-color: var(--brand-primary, #7c3aed);
    background: rgba(255, 255, 255, 0.1);
    outline: none;
}

.chat-username-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.chat-username-error {
    color: #f87171;
    font-size: 13px;
    margin-bottom: 12px;
}

.chat-username-btn {
    width: 100% !important;
    max-width: 260px;
    padding: 14px;
    border: none;
    border-radius: 14px;
    background: var(--brand-primary, #7c3aed);
    color: white;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s;
}

.chat-username-btn:hover:not(:disabled) {
    filter: brightness(1.1);
}

.chat-username-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Settings */
.chat-settings {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
}

.chat-settings-section {
    margin-bottom: 28px;
}

.chat-settings-section label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.7;
    margin-bottom: 12px;
}

.chat-settings-input {
    width: 100% !important;
    padding: 14px 18px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: white;
    font-size: 16px;
    box-sizing: border-box;
}

.chat-settings-input:focus {
    border-color: var(--brand-primary, #7c3aed);
    outline: none;
}

.chat-settings-error {
    color: #f87171;
    font-size: 13px;
    margin-bottom: 16px;
    text-align: center;
}

.chat-settings-save-btn {
    width: 100% !important;
    padding: 14px;
    border: none;
    border-radius: 12px;
    background: var(--brand-primary, #7c3aed);
    color: white;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
}

.chat-settings-save-btn:disabled {
    opacity: 0.5;
}

/* Messages container */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Empty state */
.chat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
    opacity: 0.5;
}

.chat-empty span {
    font-size: 56px;
    margin-bottom: 12px;
}

.chat-empty p {
    margin: 0;
    font-size: 14px;
}

/* Message layout */
.chat-message {
    display: flex;
    flex-direction: column;
    max-width: 85%;
}

.chat-message.theirs {
    align-self: flex-start;
}

.chat-message.mine {
    align-self: flex-end;
}

.chat-message-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.chat-message.mine .chat-message-row {
    flex-direction: row-reverse;
}

.chat-message-avatar {
    font-size: 32px;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
}

.chat-message-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.chat-message.mine .chat-message-content {
    align-items: flex-end;
}

.chat-message.theirs .chat-message-content {
    align-items: flex-start;
}

/* Username above bubble */
.chat-message-name {
    font-size: 12px;
    font-weight: 700;
    padding-left: 4px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.chat-message-name.clickable {
    cursor: pointer;
    transition: all 0.2s;
}

.chat-message-name.clickable:hover {
    opacity: 1;
    color: var(--brand-primary, #7c3aed);
}

/* Message bubble with subtle styling */
.chat-message-bubble {
    display: flex;
    flex-direction: column;
    padding: 10px 14px;
    border-radius: 16px;
    max-width: 100% !important;
    word-wrap: break-word;
    box-shadow: 0 2px 10px rgba(255, 255, 255, 0.15), 0 0 20px rgba(255, 255, 255, 0.05);
}

.chat-message.theirs .chat-message-bubble {
    background: rgba(45, 45, 65, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom-left-radius: 4px;
}

.chat-message.mine .chat-message-bubble {
    background: var(--brand-primary, #7c3aed);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-bottom-right-radius: 4px;
    box-shadow: 0 2px 10px rgba(255, 255, 255, 0.2), 0 0 20px rgba(255, 255, 255, 0.08);
}

.chat-message-text {
    font-size: 15px;
    line-height: 1.45;
    white-space: pre-wrap;
}

.chat-message-time {
    font-size: 10px;
    opacity: 0.55;
    margin-top: 4px;
    align-self: flex-end;
}

/* Reactions */
.chat-reactions-display {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.chat-reaction-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.chat-reaction-badge:hover {
    background: rgba(255, 255, 255, 0.2);
}

.chat-reaction-badge.active {
    background: rgba(124, 58, 237, 0.3);
    border: 1px solid var(--brand-primary, #7c3aed);
}

.chat-reaction-picker {
    display: flex;
    gap: 2px;
    margin-top: 6px;
    opacity: 0;
    transition: opacity 0.2s;
}

.chat-message:hover .chat-reaction-picker,
.chat-message:focus-within .chat-reaction-picker {
    opacity: 1;
}

.chat-reaction-btn {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s;
}

.chat-reaction-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.15);
}

.chat-reaction-btn.active {
    background: rgba(124, 58, 237, 0.3);
}

/* Error */
.chat-error {
    padding: 10px 16px;
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    text-align: center;
    font-size: 13px;
    flex-shrink: 0;
}

/* Emoji picker */
.chat-emoji-picker {
    display: grid !important;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
    padding: 12px;
    background: rgba(30, 30, 45, 0.98);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    max-height: 200px;
    overflow-y: auto;
    flex-shrink: 0;
}

.chat-emoji-btn {
    background: transparent;
    border: none;
    font-size: 22px;
    padding: 8px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.15s;
}

.chat-emoji-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.2);
}

.chat-emoji-toggle {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    font-size: 22px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s;
}

.chat-emoji-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Input container */
.chat-input-container {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.4);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.chat-input {
    flex: 1;
    padding: 14px 18px;
    border: none;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 15px;
    outline: none;
    transition: background 0.2s;
}

.chat-input:focus {
    background: rgba(255, 255, 255, 0.15);
}

.chat-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.chat-send-btn {
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: var(--brand-primary, #7c3aed);
    color: white;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
}

.chat-send-btn:hover:not(:disabled) {
    filter: brightness(1.1);
    transform: scale(1.05);
}

.chat-send-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Footer */
.chat-footer,
.chat-page-footer {
    padding: 12px 16px;
    text-align: center;
    font-size: 11px;
    background: rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.6);
}

.chat-footer strong,
.chat-page-footer strong {
    color: var(--brand-primary, #7c3aed);
}

/* Feed page footer */
.feed-footer {
    color: rgba(255, 255, 255, 0.6);
}

/* Private Chat Badge */
.private-chat-badge {
    position: relative;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    cursor: pointer;
    border: none;
    font-size: 16px;
}

.private-chat-badge .unread-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ef4444;
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

/* Private Chat List */
.private-chat-list,
.private-chat-conversation {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.private-chat-list .chat-header,
.private-chat-conversation .chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.back-btn {
    background: transparent;
    border: none;
    color: inherit;
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
}

.chat-with {
    flex: 1;
    font-weight: 600;
}

.block-btn {
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
    opacity: 0.6;
    padding: 4px 8px;
}

.block-btn:hover {
    opacity: 1;
}

.private-chat-conversations {
    flex: 1;
    overflow-y: auto;
}

.conversation-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: background 0.2s;
}

.conversation-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.conversation-info {
    flex: 1;
    min-width: 0;
}

.conversation-name {
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.conversation-preview {
    font-size: 13px;
    opacity: 0.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.unread-badge {
    background: #ef4444;
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

/* ========================================
   Social Feed Page Styles (Instagram-style)
   Dark Mode Theme
   ======================================== */

:root {
    /* Dark mode color palette */
    --feed-primary: #8b5cf6;
    --feed-primary-dark: #7c3aed;
    --feed-accent-pink: #ec4899;
    --feed-accent-blue: #3b82f6;
    --feed-heart-red: #ef4444;

    /* Dark backgrounds */
    --feed-bg: #0a0a0a;
    --feed-bg-secondary: #141414;
    --feed-card-bg: #1a1a1a;
    --feed-bg-elevated: #242424;

    /* Dark borders */
    --feed-border: #2a2a2a;
    --feed-border-light: #333333;

    /* Dark mode text */
    --feed-text-primary: #fafafa;
    --feed-text-secondary: #a1a1aa;
    --feed-text-muted: #71717a;

    --feed-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.social-feed-page {
    min-height: 100vh;
    background: linear-gradient(180deg, #0a0a0a 0%, #141414 100%);
    color: var(--feed-text-primary);
}

.social-feed-page.dark-mode {
    background: linear-gradient(180deg, #0a0a0a 0%, #0f0f0f 100%);
}

/* Header - Dark Mode */
.feed-header {
    position: relative;
    top: auto;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: rgba(20, 20, 20, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--feed-border);
}

.feed-back-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--feed-bg-elevated);
    border: 1px solid var(--feed-border-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--feed-text-primary);
    transition: all 0.2s ease;
}

.feed-back-btn:hover {
    background: var(--feed-border-light);
    transform: scale(1.05);
}

.feed-back-btn svg {
    width: 20px;
    height: 20px;
}

.feed-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--feed-text-primary);
    margin: 0;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Floating Action Button for Upload */
.feed-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--feed-accent-pink) 0%, var(--feed-primary) 100%);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 24px rgba(236, 72, 153, 0.5),
                0 2px 8px rgba(0,0,0,0.3);
    z-index: 200;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.feed-fab:hover {
    transform: scale(1.1) rotate(8deg);
    box-shadow: 0 6px 32px rgba(236, 72, 153, 0.6),
                0 4px 12px rgba(0,0,0,0.4);
}

.feed-fab:active {
    transform: scale(0.95);
}

.feed-fab.uploading {
    background: linear-gradient(135deg, var(--feed-border-light) 0%, var(--feed-bg-elevated) 100%);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.feed-fab svg {
    width: 28px;
    height: 28px;
}

.feed-fab-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(255,255,255,0.2);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Old upload button (hidden now, kept for compatibility) */
.feed-upload-btn {
    display: none;
}

/* Upload Progress - Dark Mode */
.feed-upload-progress {
    padding: 12px 16px;
    background: var(--feed-bg-secondary);
    border-bottom: 1px solid var(--feed-border);
}

.feed-progress-bar {
    height: 4px;
    background: var(--feed-bg-elevated);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 8px;
}

.feed-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--feed-accent-pink), var(--feed-primary));
    transition: width 0.3s;
}

.feed-upload-progress span {
    font-size: 13px;
    color: var(--feed-text-secondary);
}

/* Feed Content */
.feed-content {
    padding-bottom: 80px;
}

/* Feed Card - Dark Mode */
.feed-card {
    background: var(--feed-card-bg);
    margin-bottom: 2px;
    border: 1px solid var(--feed-border);
    border-left: none;
    border-right: none;
    transition: border-color 0.2s;
}

.feed-card:hover {
    border-color: var(--feed-border-light);
}

.feed-card-header {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    gap: 12px;
    border-bottom: 1px solid var(--feed-border);
}

.feed-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
    border: 2px solid var(--feed-border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.feed-user-info {
    flex: 1;
    min-width: 0;
}

.feed-username {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--feed-text-primary);
}

.feed-timestamp {
    display: block;
    font-size: 12px;
    color: var(--feed-text-muted);
    margin-top: 2px;
}

/* Post menu button (three dots) - only visible on own posts */
.feed-post-menu-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 20px;
    padding: 8px;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s;
    flex-shrink: 0;
    margin-left: auto;
}

.feed-post-menu-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Delete confirmation overlay */
.feed-delete-overlay {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    padding: 20px;
    animation: fadeIn 0.2s ease;
}

.feed-delete-dialog {
    background: #1a1a1a;
    border-radius: 20px;
    padding: 24px;
    text-align: center;
    max-width: 320px;
    width: 100% !important;
    animation: scaleIn 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.feed-delete-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.feed-delete-title {
    color: white;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 12px;
}

.feed-delete-message {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 24px;
}

.feed-delete-buttons {
    display: flex;
    gap: 12px;
}

.feed-delete-cancel-btn,
.feed-delete-confirm-btn {
    flex: 1;
    padding: 14px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.feed-delete-cancel-btn {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.feed-delete-cancel-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

.feed-delete-cancel-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.feed-delete-confirm-btn {
    background: #ef4444;
    color: white;
}

.feed-delete-confirm-btn:hover {
    background: #dc2626;
}

.feed-delete-confirm-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Delete dialog animations */
@keyframes scaleIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Card Image - Dark Mode */
.feed-card-image {
    position: relative;
    width: calc(100% - 24px);
    margin: 0 12px;
    aspect-ratio: 1;
    background: var(--feed-bg-secondary);
    overflow: hidden;
    border-radius: 16px;
}

.feed-card-image img {
    width: 100% !important;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

.feed-event-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(20, 20, 20, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--feed-text-primary);
    font-size: 11px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 20px;
    border: 1px solid var(--feed-border);
}

/* Heart Animation */
.feed-heart-animation {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 80px;
    animation: heartBurst 0.6s ease forwards;
    pointer-events: none;
    z-index: 10;
}

@keyframes heartBurst {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    15% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    30% { transform: translate(-50%, -50%) scale(0.95); opacity: 1; }
    45% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
    80% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* Card Actions - Dark Mode */
.feed-card-actions {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    gap: 16px;
    border-top: 1px solid var(--feed-border);
}

.feed-action-btn {
    background: none;
    border: none;
    padding: 8px;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--feed-text-secondary);
}

.feed-action-btn:hover {
    transform: scale(1.15);
    color: var(--feed-text-primary);
}

.feed-action-btn:active {
    transform: scale(0.9);
}

.feed-action-btn.liked {
    animation: heartBtnPop 0.4s ease;
    color: var(--feed-heart-red);
}

@keyframes heartBtnPop {
    0% { transform: scale(1); }
    25% { transform: scale(1.3); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

/* Likes Count - Dark Mode */
.feed-likes-count {
    padding: 0 16px 8px;
    font-size: 14px;
    color: var(--feed-text-primary);
}

.feed-likes-count strong {
    font-weight: 600;
}

/* Caption - Dark Mode */
.feed-caption {
    padding: 4px 16px 12px;
    font-size: 14px;
    color: #d4d4d8;
    line-height: 1.5;
}

.feed-caption strong {
    color: var(--feed-text-primary);
    font-weight: 600;
}

.feed-tags {
    color: var(--feed-primary);
}

/* Comments Preview - Dark Mode */
.feed-comments-preview {
    padding: 0 16px 12px;
    border-top: 1px solid var(--feed-border);
    padding-top: 12px;
}

.feed-comment-preview {
    font-size: 14px;
    color: #d4d4d8;
    margin-bottom: 6px;
    line-height: 1.4;
}

.feed-comment-preview strong {
    color: var(--feed-text-primary);
    font-weight: 600;
}

.feed-view-comments {
    background: none;
    border: none;
    padding: 0;
    font-size: 14px;
    color: var(--feed-text-muted);
    cursor: pointer;
    margin-top: 6px;
    transition: color 0.2s;
}

.feed-view-comments:hover {
    color: var(--feed-text-secondary);
}

/* Inline Comment Input - Dark Mode */
.feed-comment-input {
    display: flex;
    padding: 12px 16px;
    border-top: 1px solid var(--feed-border);
    gap: 12px;
}

.feed-comment-input input {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid var(--feed-border-light);
    border-radius: 20px;
    font-size: 14px;
    color: var(--feed-text-primary);
    background: var(--feed-bg-elevated);
    transition: border-color 0.2s;
}

.feed-comment-input input:focus {
    outline: none;
    border-color: var(--feed-primary);
}

.feed-comment-input input::placeholder {
    color: var(--feed-text-muted);
}

/* Empty State - Dark Mode */
.feed-empty {
    text-align: center;
    padding: 100px 20px;
}

.feed-empty-icon {
    font-size: 72px;
    margin-bottom: 20px;
    display: block;
    filter: grayscale(0.3);
}

.feed-empty h4 {
    font-size: 22px;
    font-weight: 600;
    color: var(--feed-text-secondary);
    margin: 0 0 12px;
}

.feed-empty p {
    font-size: 15px;
    color: var(--feed-text-muted);
    margin: 0 0 32px;
}

.feed-upload-first-btn {
    background: linear-gradient(135deg, var(--feed-accent-pink) 0%, var(--feed-primary) 100%);
    color: white;
    border: none;
    padding: 16px 36px;
    border-radius: 28px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(236, 72, 153, 0.4);
    transition: all 0.3s ease;
}

.feed-upload-first-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 28px rgba(236, 72, 153, 0.5);
}

/* Load More - Dark Mode */
.feed-load-more {
    display: block;
    width: calc(100% - 32px);
    margin: 20px auto;
    padding: 16px;
    background: var(--feed-card-bg);
    border: 1px solid var(--feed-border);
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--feed-text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.feed-load-more:hover {
    background: var(--feed-bg-elevated);
    border-color: var(--feed-border-light);
}

.feed-end {
    text-align: center;
    padding: 24px;
    font-size: 13px;
    color: var(--feed-text-muted);
}

/* Loading - Dark Mode */
.feed-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 20px;
}

.feed-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--feed-border);
    border-top-color: var(--feed-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Comments Modal - Dark Mode */
.feed-comments-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.feed-comments-content {
    background: var(--feed-card-bg);
    width: 100% !important;
    max-width: 500px;
    max-height: 80vh;
    border-radius: 20px 20px 0 0;
    border: 1px solid var(--feed-border);
    border-bottom: none;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.feed-comments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--feed-border);
}

.feed-comments-header h4 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--feed-text-primary);
}

.feed-comments-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--feed-bg-elevated);
    border: 1px solid var(--feed-border-light);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--feed-text-secondary);
    transition: all 0.2s;
}

.feed-comments-close:hover {
    background: var(--feed-border-light);
    color: var(--feed-text-primary);
}

.feed-comments-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    min-height: 200px;
    background: var(--feed-bg-secondary);
}

.feed-comments-loading,
.feed-comments-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    color: var(--feed-text-muted);
    font-size: 14px;
}

.feed-comment {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
}

.feed-comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
    border: 2px solid var(--feed-border);
}

.feed-comment-body {
    flex: 1;
    min-width: 0;
}

.feed-comment-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.feed-comment-header strong {
    font-size: 13px;
    color: var(--feed-text-primary);
}

.feed-comment-time {
    font-size: 12px;
    color: var(--feed-text-muted);
}

.feed-comment-body p {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #d4d4d8;
    line-height: 1.5;
}

/* Comment Actions - Likes and Reply */
.feed-comment-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.comment-like-btn {
    background: transparent;
    border: none;
    color: var(--feed-text-muted);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 12px;
    transition: all 0.2s;
}

.comment-like-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--feed-text-secondary);
}

.comment-like-btn.liked {
    color: var(--feed-heart-red);
}

.comment-reply-btn {
    background: transparent;
    border: none;
    color: var(--feed-text-muted);
    font-size: 13px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 12px;
    transition: all 0.2s;
}

.comment-reply-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--feed-text-secondary);
}

/* Comment Threading */
.feed-comment-thread {
    position: relative;
}

.feed-comment-thread + .feed-comment-thread {
    margin-top: 4px;
}

.feed-comment-replies {
    margin-top: 8px;
    padding-left: 12px;
    border-left: 2px solid var(--feed-border);
    margin-left: 18px;
}

.feed-comment-replies .feed-comment {
    margin-bottom: 12px;
}

.feed-comment-replies .feed-comment-avatar {
    width: 28px;
    height: 28px;
    font-size: 10px;
}

/* Reply Context Bar */
.feed-replying-to {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--feed-bg-elevated);
    border-radius: 8px;
    margin-bottom: 10px;
    width: 100% !important;
}

.feed-replying-to span {
    color: var(--feed-primary);
    font-size: 13px;
}

.feed-cancel-reply {
    background: transparent;
    border: none;
    color: var(--feed-text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.feed-cancel-reply:hover {
    color: var(--feed-text-secondary);
}

.feed-comment-input-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100% !important;
}

/* Comment Input - Dark Mode */
.feed-comments-input-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 14px 20px;
    border-top: 1px solid var(--feed-border);
    background: var(--feed-card-bg);
}

.feed-comments-input {
    flex: 1;
    padding: 12px 18px;
    border: 1px solid var(--feed-border-light);
    border-radius: 24px;
    font-size: 14px;
    background: var(--feed-bg-elevated);
    color: var(--feed-text-primary);
    transition: border-color 0.2s;
}

.feed-comments-input:focus {
    outline: none;
    border-color: var(--feed-primary);
}

.feed-comments-input::placeholder {
    color: var(--feed-text-muted);
}

.feed-comments-post-btn {
    background: none;
    border: none;
    color: var(--feed-primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 10px 12px;
    transition: color 0.2s;
}

.feed-comments-post-btn:hover {
    color: var(--feed-accent-pink);
}

.feed-comments-post-btn:disabled {
    color: var(--feed-text-muted);
}

/* Clickable usernames */
.feed-username.clickable,
.feed-avatar.clickable {
    cursor: pointer;
    transition: opacity 0.2s;
}

.feed-username.clickable:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.feed-avatar.clickable:hover {
    transform: scale(1.05);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.3);
}

/* User Profile Modal */
.feed-user-profile-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.feed-user-profile-content {
    background: var(--feed-card-bg);
    width: 100% !important;
    max-width: 400px;
    max-height: 85vh;
    border-radius: 20px;
    border: 1px solid var(--feed-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: fadeScaleIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeScaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.feed-user-profile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 20px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(236, 72, 153, 0.1));
    border-bottom: 1px solid var(--feed-border);
    position: relative;
}

.feed-user-profile-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--feed-bg-elevated);
    border: 1px solid var(--feed-border-light);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--feed-text-secondary);
    transition: all 0.2s;
}

.feed-user-profile-close:hover {
    background: var(--feed-border-light);
    color: var(--feed-text-primary);
}

.feed-user-profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    color: white;
    margin-bottom: 12px;
    border: 3px solid var(--feed-border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.feed-user-profile-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--feed-text-primary);
    margin: 0 0 16px 0;
}

.feed-user-profile-stats {
    display: flex;
    gap: 32px;
}

.feed-user-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.feed-user-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--feed-text-primary);
}

.feed-user-stat-label {
    font-size: 12px;
    color: var(--feed-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.feed-user-profile-grid {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px;
    background: var(--feed-bg-secondary);
}

.feed-user-profile-loading,
.feed-user-profile-empty {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    color: var(--feed-text-muted);
    font-size: 14px;
}

.feed-user-profile-photo {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s;
}

.feed-user-profile-photo:hover {
    transform: scale(1.02);
}

.feed-user-profile-photo img {
    width: 100% !important;
    height: 100%;
    object-fit: cover;
}

.feed-user-profile-photo-stats {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 6px 8px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    display: flex;
    justify-content: center;
    gap: 12px;
    opacity: 0;
    transition: opacity 0.2s;
}

.feed-user-profile-photo:hover .feed-user-profile-photo-stats {
    opacity: 1;
}

.feed-user-profile-photo-stats span {
    font-size: 11px;
    color: white;
    font-weight: 500;
}

/* Balance card clickable - tap to view history */
.balance-card {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.balance-card:active {
    transform: scale(0.98);
    opacity: 0.9;
}

/* Compact balance card */
.home-page .balance-card {
    padding: 6px 14px !important;
}
.home-page .balance-main {
    gap: 1px !important;
}
.home-page .balance-label {
    font-size: 9px !important;
    margin-bottom: 0 !important;
}
.home-page .balance-amount {
    font-size: 28px !important;
    line-height: 1.1 !important;
}
.home-page .points-row {
    margin-top: 2px !important;
    font-size: 10px !important;
}

/* Past Events Gallery Section */
/* Past Events Gallery Section */
.past-events-section {
    margin-top: 32px;
    margin-bottom: 24px;
    padding: 0 16px 24px 16px;
}

.and-more-text {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    text-align: center;
    margin-bottom: 16px;
    font-weight: 400;
    font-style: italic;
}

/* FLEXBOX APPROACH - Force 3 columns on ALL screen sizes */
.past-events-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: flex-start !important;
}

.past-event-card {
    position: relative;
    width: calc(33.333% - 7px) !important;
    flex: 0 0 calc(33.333% - 7px) !important;
    max-width: calc(33.333% - 7px) !important;
    min-width: calc(33.333% - 7px) !important;
    aspect-ratio: 1 !important;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.past-event-card img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* NO RESPONSIVE MEDIA QUERIES - Always 3 columns */


/* Instagram-Style Bottom Navigation for Gallery */
.gallery-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: #ffffff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-bottom: calc(env(safe-area-inset-bottom) + 12px);
    z-index: 1000;
    border-top: 1px solid #e5e7eb;
}

.gallery-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    cursor: pointer;
    transition: 200ms ease-in-out;
    min-width: 44px;
    min-height: 44px;
    background: none;
    border: none;
    color: #8E8E93;
}

.gallery-nav-item.active {
    color: #7902a5;
}

.gallery-nav-item svg,
.gallery-nav-item > div {
    font-size: 28px;
    transition: 200ms ease-in-out;
}

.gallery-nav-item.active svg,
.gallery-nav-item.active > div {
    transform: scale(1.1);
}

.gallery-camera-button {
    position: relative;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #7902a5 0%, #9d4dc4 50%, #d3d3d3 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    border: 3px solid #ffffff;
    transform: translateY(-20px);
    cursor: pointer;
    transition: 200ms ease-in-out;
}

.gallery-camera-button:active {
    transform: translateY(-20px) scale(0.95);
}

.gallery-camera-button svg,
.gallery-camera-button > div {
    font-size: 28px;
    color: white;
}

.gallery-nav-label {
    font-size: 11px;
    font-weight: 500;
    margin-top: 4px;
}