:root{--color-primary:#2E7D32;--color-primary-dark:#1B5E20;--color-primary-light:#4CAF50;--color-secondary:#F1F8E9;--color-secondary-dark:#DCEDC8;--color-accent:#FFC107;--color-accent-dark:#FFA000;--color-text-primary:#212121;--color-text-secondary:#616161;--color-text-light:#9E9E9E;--color-white:#FFFFFF;--color-gray-light:#F5F5F5;--color-gray:#E0E0E0;--color-gray-dark:#757575;--color-gray-darker:#424242;--radius-sm:5px;--spacing-xs:4px;--color-valentine-red:#DC143C;--color-valentine-pink:#FF69B4;--color-valentine-rose:#FFB6C1}
        
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;color:var(--color-text-primary)}
.public-raffles-page{position:relative;background:radial-gradient(rgba(46,125,50,0.07) 1.5px,transparent 1.5px) 0 0/24px 24px,linear-gradient(180deg,#f5f9f5 0%,#e8f5e8 15%,#d4edd4 35%,#b8e0b8 60%,var(--color-primary-light) 85%,var(--color-primary) 100%);min-height:100vh;padding:0;overflow-x:hidden;z-index:0}
.public-raffles-page > main{position:relative;z-index:1}
.public-hero{max-width:960px;margin:0 auto;padding:30px 20px 40px}
.public-hero h1{margin:0 0 16px;font-size:3rem;color:var(--color-text-primary)}
.public-hero .lead{font-size:1.15rem;margin:0 0 24px;max-width:640px;color:var(--color-text-secondary)}
.public-hero .badge{display:inline-flex;flex-direction:column;gap:4px;padding:10px 18px;border-radius:14px;background:linear-gradient(120deg,rgba(46,125,50,0.2),rgba(46,125,50,0.05));border:1px solid rgba(46,125,50,0.3);box-shadow:0 12px 24px rgba(15,23,42,0.15);font-size:0.95rem;margin-bottom:18px;color:var(--color-text-primary)}
.public-hero .badge-label{display:inline-flex;align-items:center;gap:8px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase}
.public-hero .badge-label i{color:var(--color-primary)}
.public-hero .badge-subtitle{display:block;min-height:1.2em;font-size:0.85rem;color:var(--color-text-secondary);letter-spacing:0.4px}
.raffles-section{max-width:1200px;margin:0 auto;padding:0 20px 20px;min-height:auto}
.raffles-section header{margin-bottom:20px}
.raffles-section h2{color:var(--color-text-primary);margin:0;font-size:1.8rem;display:flex;align-items:center;gap:10px}
.raffles-section p{color:var(--color-text-secondary);margin:6px 0 0}
.raffle-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;min-height:300px}
.raffle-card{background:var(--color-white);border-radius:16px;padding:0;border:1px solid rgba(15,23,42,0.08);box-shadow:0 12px 30px rgba(15,23,42,0.2);display:flex;flex-direction:column;gap:0;color:var(--color-text-primary);overflow:hidden;position:relative}
.raffle-card-image{width:100%;aspect-ratio:2/1;overflow:hidden;background:var(--color-gray-light);display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:16px 16px 0 0;min-height:0;position:relative}
.raffle-card-image img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;border-radius:16px 16px 0 0;aspect-ratio:2/1}
/* First card image should render immediately (LCP element) - optimize for fastest render */
.raffle-grid > .raffle-card:first-child{will-change:auto;transform:none}
.raffle-grid > .raffle-card:first-child .raffle-card-image{contain:none;content-visibility:visible}
.raffle-grid > .raffle-card:first-child .raffle-card-image img{content-visibility:visible;transform:none;backface-visibility:visible}
/* Other cards can use optimizations */
.raffle-grid > .raffle-card:not(:first-child){will-change:transform;transform:translateZ(0)}
.raffle-grid > .raffle-card:not(:first-child) .raffle-card-image{contain:layout size;content-visibility:auto}
.raffle-grid > .raffle-card:not(:first-child) .raffle-card-image img{content-visibility:auto;transform:translateZ(0);backface-visibility:hidden}
.raffle-card>.raffle-card-header,.raffle-card>h3,.raffle-card>dl,.raffle-card>.raffle-actions{padding:0 20px}
.raffle-card>.raffle-card-header{padding-top:20px;padding-bottom:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.raffle-card>h3{padding-top:0;padding-bottom:12px;margin:0;color:var(--color-text-primary);font-size:1.3rem}
.raffle-card>dl{padding-top:0;padding-bottom:12px;display:flex;gap:16px;margin:0}
.raffle-card dt{font-size:0.8rem;text-transform:uppercase;letter-spacing:0.4px;color:var(--color-text-secondary)}
.raffle-card dd{margin:2px 0 0;font-size:1.4rem;font-weight:800;color:var(--color-text-primary);letter-spacing:-0.5px}
.raffle-actions {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding-bottom: 20px;
    padding-top: 0;
    margin-top: auto;
}

.raffle-buttons-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0; /* Allow flex children to shrink/truncate */
}

.raffle-actions .btn {
    width: 100%; /* Fill group width */
    margin: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* Share Button */
.raffle-actions .btn-share {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    padding: 0;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.raffle-card .emoji{font-size:1.5rem}
.platform-badge,.status-badge{font-size:0.75rem;padding:4px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:0.5px}
.platform-badge{background:rgba(46,125,50,0.12);color:var(--color-primary);display:inline-flex;align-items:center;gap:6px;padding:4px 12px}
.platform-badge i{font-size:0.85rem}
.platform-badge .platform-label{font-weight:700}
.status-badge{background:rgba(239,68,68,0.12);color:#c53030}
.external-hint{font-size:0.85rem;color:var(--color-text-secondary);font-style:italic}
.raffle-card.external{position:relative}
.raffle-card.external:not(.featured)::before{content:"";position:absolute;inset:0;border-radius:16px;opacity:0;transition:opacity 0.2s ease;pointer-events:none;z-index:1;will-change:opacity;transform:translateZ(0)}
.raffle-card.external:not(.featured):hover::before{opacity:0.05;background:rgba(46,125,50,0.1)}
/* Featured card with subtle gold border glow - no background overlay */
/* Use solid colors first for maximum compatibility (Telegram browser) */
.raffle-card.featured,
.raffle-card.external.featured,
.raffle-card.featured.external{
    border:2px solid #DC143C !important;
    position:relative;
    overflow:visible;
    box-shadow:0 4px 15px rgba(220,20,60,0.2),0 2px 8px rgba(255,105,180,0.15) !important;
    background-color:#fff0f5 !important;
    background:#fff0f5 !important;
}
/* Only apply gradient if supported (modern browsers) */
@supports (background:linear-gradient(135deg,#fff0f5,#ffe4e9)){
    .raffle-card.featured:not([style*="background"]),
    .raffle-card.external.featured:not([style*="background"]),
    .raffle-card.featured.external:not([style*="background"]){
        background:linear-gradient(135deg,#fff0f5 0%,#ffe4e9 50%,#fff0f5 100%) !important;
    }
}
/* Simplified ::before for Telegram browser - solid color only */
.raffle-card.featured::before{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:18px;
    background:#DC143C;
    z-index:-1;
    opacity:0.3;
}
/* Only apply gradient animation if supported */
@supports (background:linear-gradient(135deg,#DC143C,#FF69B4)){
    .raffle-card.featured::before{
        background:linear-gradient(135deg,#DC143C 0%,#FF69B4 50%,#DC143C 100%);
        background-size:200% 200%;
        animation:gold-shimmer 4s ease-in-out infinite;
    }
}
.raffle-card.featured::after{
    content:"";
    position:absolute;
    inset:-4px;
    border-radius:20px;
    background:radial-gradient(ellipse at center,rgba(255,215,0,0.15) 0%,transparent 70%);
    filter:blur(8px);
    z-index:-2;
    pointer-events:none;
}
@keyframes gold-shimmer{
    0%,100%{background-position:0% 50%}
    50%{background-position:100% 50%}
}
.raffle-card.featured:hover{
    transform:translateY(-4px) scale(1.01) translateZ(0);
    box-shadow:0 8px 25px rgba(220,20,60,0.3),0 4px 12px rgba(255,105,180,0.2);
}
/* Featured badge - solid red for Telegram browser */
.featured-badge{
    position:absolute !important;
    top:12px !important;
    right:12px !important;
    background-color:#DC143C !important;
    background:#DC143C !important;
    color:#FFFFFF !important;
    padding:8px 16px !important;
    border-radius:24px !important;
    font-size:0.9em !important;
    font-weight:700 !important;
    letter-spacing:0.5px !important;
    box-shadow:0 4px 15px rgba(220,20,60,0.5),inset 0 1px 0 rgba(255,255,255,0.4) !important;
    z-index:10 !important;
    pointer-events:none !important;
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    text-shadow:0 1px 1px rgba(255,255,255,0.3) !important;
}
/* Only apply gradient if supported - but keep solid fallback */
@supports (background:linear-gradient(135deg,#DC143C,#FF69B4)){
    .featured-badge:not([style*="background"]){
        background:linear-gradient(135deg,#DC143C 0%,#FF69B4 50%,#DC143C 100%) !important;
        background-size:200% 200% !important;
        animation:badge-shimmer 3s ease-in-out infinite;
    }
}
@keyframes badge-shimmer{
    0%,100%{background-position:0% 50%;transform:scale(1)}
    50%{background-position:100% 50%;transform:scale(1.02)}
}
.raffle-card:hover{transform:translateY(-2px) translateZ(0);box-shadow:0 16px 40px rgba(15,23,42,0.25)}
.btn{padding:10px 20px;border:none;border-radius:var(--radius-sm);cursor:pointer;font-size:14px;font-weight:600;transition:transform 0.2s ease,filter 0.2s ease;box-shadow:0 2px 4px rgba(0,0,0,0.1);min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs);position:relative;will-change:transform;transform:translateZ(0);text-decoration:none}
.btn i{margin-right:var(--spacing-xs);font-size:0.9em}
.btn-primary{background:var(--color-primary);color:var(--color-white)}
.btn-primary:hover{background:var(--color-primary-dark);transform:translateY(-2px) translateZ(0);filter:drop-shadow(0 6px 12px rgba(46,125,50,0.3))}
.btn-secondary{background:var(--color-gray-dark);color:var(--color-white)}
.btn-secondary:hover{background:var(--color-gray-darker);transform:translateY(-2px) translateZ(0);filter:drop-shadow(0 4px 6px rgba(0,0,0,0.1))}
.public-footer{background:linear-gradient(180deg,var(--color-primary) 0%,rgba(46,125,50,0.95) 100%);color:var(--color-white);padding:40px 20px;margin-top:0;border-top:1px solid rgba(255,255,255,0.1)}
.footer-content{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:24px}
.footer-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.footer-actions .btn{min-width:160px}
.footer-actions .btn-primary{background:var(--color-white);color:var(--color-primary);border:2px solid var(--color-white)}
.footer-actions .btn-primary:hover{background:rgba(255,255,255,0.9);transform:translateY(-2px) translateZ(0);filter:drop-shadow(0 8px 16px rgba(0,0,0,0.2))}
.footer-actions .btn-secondary{background:transparent;color:var(--color-white);border:2px solid var(--color-white)}
.footer-actions .btn-secondary:hover{background:rgba(255,255,255,0.1);transform:translateY(-2px) translateZ(0);filter:drop-shadow(0 8px 16px rgba(0,0,0,0.2))}
.footer-copyright{margin:0;font-size:0.9rem;color:rgba(255,255,255,0.8);text-align:center}
.empty-state{color:var(--color-text-secondary);font-style:italic}

/* ===== VALENTINE'S DAY CARD ENHANCEMENTS ===== */
.raffle-card{background:linear-gradient(135deg,#f5f8f5 0%,#ecf2ec 100%) !important;backdrop-filter:blur(10px);border:1px solid rgba(46,125,50,0.15) !important;transition:all 0.3s ease}
.raffle-card:hover{background:linear-gradient(135deg,#ecf2ec 0%,#e3ede3 100%) !important;box-shadow:0 16px 40px rgba(15,23,42,0.2);border-color:rgba(46,125,50,0.25) !important}

/* ===== VALENTINE'S DAY FOOTER ===== */

/* ===== VALENTINE'S DAY HERO ENHANCEMENTS ===== */
.public-hero .badge{background:linear-gradient(120deg,rgba(220,20,60,0.15),rgba(46,125,50,0.2),rgba(255,105,180,0.1));border:1px solid rgba(220,20,60,0.3)}
.public-hero .badge-label i{color:var(--color-valentine-red)}
.holiday-greeting{display:flex;width:fit-content;align-items:center;gap:8px;background:linear-gradient(135deg,#8B0000 0%,#DC143C 50%,#FF69B4 100%);color:#FFFFFF;padding:10px 20px;border-radius:20px;font-size:0.95rem;font-weight:700;margin-top:20px;margin-bottom:20px;box-shadow:0 4px 15px rgba(220,20,60,0.5),0 0 20px rgba(255,105,180,0.3);animation:pulse-holiday 2s ease-in-out infinite;text-shadow:0 2px 4px rgba(0,0,0,0.3),0 0 10px rgba(255,105,180,0.5);border:2px solid rgba(255,105,180,0.4)}
@keyframes pulse-holiday{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}

/* ===== VALENTINE'S DAY SECTION HEADERS ===== */
.raffles-section h2 .fa-star{color:var(--color-valentine-pink);margin-left:8px;animation:spin-slow 8s linear infinite}
@keyframes spin-slow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* ===== CLOSED CARD OVERLAY ===== */
.raffle-card.closed:not(.featured) .raffle-card-image img{filter:grayscale(40%) brightness(0.95);transition:filter 0.3s ease}
.raffle-card.closed:not(.featured):hover .raffle-card-image img{filter:grayscale(0%) brightness(1)}

/* ===== UTILITY ===== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===== BACK TO TOP ===== */
.back-to-top{position:fixed;bottom:24px;right:24px;width:44px;height:44px;border-radius:50%;background:var(--color-primary);color:white;border:none;cursor:pointer;font-size:1.2rem;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,0.2);opacity:0;visibility:hidden;transition:opacity 0.3s,visibility 0.3s,transform 0.2s;z-index:9999}
.back-to-top.visible{opacity:1;visibility:visible}
.back-to-top:hover{transform:translateY(-3px);background:var(--color-primary-dark)}

/* ===== FOOTER CLASSES ===== */
.footer-holiday-box{text-align:center;margin-bottom:24px;padding:20px;background:linear-gradient(135deg,rgba(255,255,255,0.15) 0%,rgba(255,255,255,0.05) 100%);border-radius:16px;border:1px solid rgba(255,255,255,0.2)}
.footer-holiday-title{font-size:1.4em;margin:0 0 8px 0;color:white}
.footer-holiday-subtitle{font-size:0.95em;margin:0;color:rgba(255,255,255,0.9)}
.footer-section-title{color:white;font-size:1.3em;margin-bottom:20px;display:flex;align-items:center;justify-content:center;gap:10px}
.social-links-grid{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-bottom:10px}
.social-link{display:flex;align-items:center;justify-content:center;width:60px;height:60px;background:rgba(255,255,255,0.15);color:white;border-radius:50%;text-decoration:none;font-size:1.8em;transition:all 0.3s;border:2px solid rgba(255,255,255,0.3)}
.social-link:hover{background:rgba(255,255,255,0.25);transform:scale(1.1);border-color:rgba(255,255,255,0.5)}
.footer-social-caption{color:rgba(255,255,255,0.8);font-size:0.9em;margin-top:10px}
.email-optin-card{text-align:center;padding:24px;background:linear-gradient(135deg,rgba(255,255,255,0.18) 0%,rgba(255,255,255,0.08) 100%);border-radius:16px;border:1px solid rgba(255,255,255,0.25);backdrop-filter:blur(10px)}
.email-optin-card-form{display:flex;flex-direction:column;justify-content:center}
.email-optin-icon{font-size:2.5em;margin-bottom:12px;color:rgba(255,255,255,0.95)}
.email-optin-heading{color:white;font-size:1.2em;margin-bottom:10px;font-weight:600}
.email-optin-desc{color:rgba(255,255,255,0.85);font-size:0.9em;line-height:1.5;margin:0}
.email-optin-input{width:100%;padding:14px 16px;border:2px solid rgba(255,255,255,0.35);border-radius:10px;background:rgba(255,255,255,0.12);color:white;font-size:14px;outline:none;transition:all 0.3s;box-sizing:border-box}
.email-optin-input:focus{border-color:rgba(255,255,255,0.6);background:rgba(255,255,255,0.18)}
.email-optin-input::placeholder{color:rgba(255,255,255,0.65)}
.email-optin-input::-webkit-input-placeholder{color:rgba(255,255,255,0.65)}
.email-optin-input::-moz-placeholder{color:rgba(255,255,255,0.65);opacity:1}
.email-optin-input:-ms-input-placeholder{color:rgba(255,255,255,0.65)}
.email-optin-btn{padding:14px 24px;border:2px solid white;border-radius:10px;background:white;color:var(--color-primary);font-size:15px;font-weight:600;cursor:pointer;transition:all 0.3s;display:flex;align-items:center;justify-content:center;gap:8px;width:100%}
.email-optin-btn:hover{background:rgba(255,255,255,0.95);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.2)}
.email-optin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:24px;max-width:800px;margin-left:auto;margin-right:auto}

@media (max-width:768px){body{overflow-x:hidden;max-width:100vw}.public-hero h1{font-size:2.2rem}.raffle-card-image{aspect-ratio:16/9}.raffle-card dl{flex-direction:column}.email-optin-grid{grid-template-columns:1fr !important;max-width:calc(100% - 20px) !important;padding:0 10px;gap:15px !important;margin-left:10px;margin-right:10px}.email-optin-grid>div{max-width:100%;box-sizing:border-box;padding:20px !important}.email-optin-grid input,.email-optin-grid button{width:100% !important;box-sizing:border-box;max-width:100%}}

/* ===== ENHANCEMENTS ===== */
/* Filter Controls */
.filter-controls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    justify-content: center;
}
.filter-btn {
    padding: 8px 20px;
    border: 1px solid var(--color-primary);
    background: transparent;
    color: var(--color-primary);
    border-radius: 50px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.filter-btn i {
    font-size: 1.1em;
}
.filter-btn:hover, .filter-btn.active {
    background: var(--color-primary);
    color: white;
    box-shadow: 0 4px 12px rgba(46,125,50,0.2);
    transform: translateY(-1px);
}
/* Search box styles removed */

/* Share Button - Handled in .raffle-actions block now */
/*.btn-share { ... } removed to avoid duplication */
.raffle-actions .btn-share:hover {
    background: rgba(46,125,50,0.1);
}

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}
@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Toast Notification */
.toast-notification {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 0.9rem;
    z-index: 10000;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    gap: 8px;
}
.toast-notification.show {
    transform: translateX(-50%) translateY(0);
}