/* /public/css/custom.css - FINAL, CLEANED & DEPLOYABLE VERSION */

/* --- Keyframe Animations --- */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes move-one { to { transform: translate(30vw, 40vh); } }
@keyframes move-two { to { transform: translate(-50vw, -30vh); } }
@keyframes move-three { to { transform: translate(40vw, -20vh) rotate(180deg); } }

/* --- Base & Layout Fixes --- */
body {
    font-family: 'Poppins', sans-serif;
    color: #f0f0f0;
    background-color: #0f172a;
    opacity: 0; /* Used for page fade-in transition */
    transition: opacity 0.4s ease-in-out;
}
body.fade-out {
    opacity: 0;
}
.content-fade-in {
    animation: fadeInUp 0.5s ease-out forwards;
}

/* --- THE CRITICAL SITE WRAPPER FIX --- */
/* This wrapper contains all content and definitively prevents the mobile shifting bug. */
.site-wrapper {
    position: relative; /* Establishes a new stacking context */
    width: 100%;
    overflow-x: hidden;
}

/* --- THE AURORA ENGINE --- */
#aurora-background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; }
.aurora-glow { position: absolute; border-radius: 50%; opacity: 0.3; filter: blur(100px); }
.aurora-one { height: 800px; width: 800px; background: #10B981; top: -300px; left: -300px; animation: move-one 45s infinite alternate ease-in-out; }
.aurora-two { height: 700px; width: 700px; background: #4f46e5; bottom: -250px; right: -250px; animation: move-two 60s infinite alternate ease-in-out; }
.aurora-three { height: 600px; width: 600px; background: #be185d; bottom: 100px; left: 100px; animation: move-three 50s infinite alternate ease-in-out; }

/* --- Reusable Components --- */
.btn { display: inline-block; padding: 10px 24px; border-radius: 8px; font-weight: 600; text-align: center; transition: all 0.2s ease-in-out; }
.btn-primary { background-color: #10B981; color: white; }
.btn-primary:hover { background-color: #059669; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3); }
.spinner { display: inline-block; width: 24px; height: 24px; border: 3px solid rgba(255,255,255,.3); border-radius: 50%; border-top-color: #10B981; animation: spin 1s ease-in-out infinite; }
.form-input { background-color: #2a2a2a; border: 1px solid #444; color: #f0f0f0; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.form-input:focus { outline: none; border-color: #10B981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3); }

/* --- Deal & Homepage Styles --- */
.deal-card { background-color: #1E1E1E; border: 1px solid #333; transition: all 0.3s ease; position: relative; overflow: hidden; }
.deal-card:hover { transform: translateY(-5px); border-color: #10B981; box-shadow: 0 10px 30px -10px rgba(16, 185, 129, 0.2); }
.horizontal-scroller { display: flex; overflow-x: auto; padding-bottom: 1rem; gap: 1rem; scrollbar-width: none; -ms-overflow-style: none; }
.horizontal-scroller::-webkit-scrollbar { display: none; }
.trending-card { flex: 0 0 280px; width: 280px; }

/* --- Avatar Picker --- */
.avatar-picker-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.avatar-picker-input { position: absolute; opacity: 0; width: 0; height: 0; }
.avatar-picker-label { cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; border: 2px solid transparent; position: relative; }
.avatar-picker-label:hover { transform: scale(1.05); }
.avatar-picker-input:checked + .avatar-picker-label { border-color: #10B981; box-shadow: 0 0 15px rgba(16, 185, 129, 0.4); }
.avatar-picker-label .checkmark { display: none; position: absolute; bottom: 4px; right: 4px; background-color: #10B981; color: white; border-radius: 50%; width: 24px; height: 24px; padding: 4px; }
.avatar-picker-input:checked + .avatar-picker-label .checkmark { display: block; }

/* The main two-column grid for the Hero section */
.hero-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)); /* Mobile: single column */
    gap: 2rem;
}
@media (min-width: 768px) { /* Desktop: two columns */
    .hero-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Styles for the glowing text boxes in the hero section */
.hero-detail-box {
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 0.75rem;
    padding: 1rem;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.1);
}

/* The dark gradient overlay at the bottom of deal cards */
.card-gradient-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
}

/* --- NEW "SPOTLIGHT" HOMEPAGE STYLES --- */
.spotlight-container {
    display: grid;
    grid-template-columns: 1fr; /* Default to single column for mobile */
    gap: 1.5rem;
}

@media (min-width: 1024px) { /* On large screens, switch to the 3-column grid */
    .spotlight-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

.spotlight-card {
    background-color: #1E1E1E;
    border: 1px solid #333;
    border-radius: 0.75rem;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    position: relative;
}

.spotlight-card:hover {
    transform: translateY(-5px);
    border-color: #10B981;
}

/* Main "Focus" Card (Deal #1) */
.spotlight-focus {
    grid-column: span 1 / span 1; /* Default to full width on mobile */
}
@media (min-width: 1024px) {
    .spotlight-focus {
        grid-column: span 2 / span 2; /* Takes up two columns on desktop */
        grid-row: span 2 / span 2;   /* Takes up two rows on desktop */
    }
}

/* "Preview" Cards (Deals #2 and #3) */
.spotlight-preview {
    /* Styles are mostly inherited from .spotlight-card */
}