/* FreeBrainrots V2 - Custom Styles */

/* Step Indicator Styles */
/* Step Indicator Styles */
.step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.step-number {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    border: 2px solid #d1d5db;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: #9ca3af;
    transition: all 0.3s;
    flex-shrink: 0; /* Prevent circle from shrinking */
}

.step-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #9ca3af;
    transition: color 0.3s;
    position: absolute;
    top: 100%;
    margin-top: 0.5rem;
    white-space: nowrap;
}

.step-indicator.active .step-number {
    border-color: #2563eb;
    background: #2563eb;
    color: white;
}

.step-indicator.active .step-label {
    color: #2563eb;
}

.step-indicator.completed .step-number {
    border-color: #16a34a;
    background: #16a34a;
    color: white;
}

.step-indicator.completed .step-label {
    color: #16a34a;
}

/* Mobile Optimizations */
@media (max-width: 640px) {
    .step-indicator { gap: 0.25rem; }
    .step-number { width: 2rem; height: 2rem; font-size: 0.75rem; }
    .step-label { font-size: 0.75rem; }
}

/* Search Results */
.search-result-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-bottom: 1px solid #f3f4f6; /* gray-100 */
    cursor: pointer;
    transition: background-color 0.2s;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background: #eff6ff; /* blue-50 */
}

.search-result-item img {
    width: 3rem;
    height: 3rem;
    border-radius: 0.5rem;
    object-fit: cover;
}

/* Toast Notifications */
.toast {
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px rgba(0,0,0,0.1);
    max-width: 20rem;
    transition: all 0.3s ease-out;
    transform: translateX(100%);
    opacity: 0;
}

.toast.success { background: #16a34a; color: white; }
.toast.error { background: #dc2626; color: white; }
.toast.warning { background: #ca8a04; color: white; }
.toast.info { background: #2563eb; color: white; }

.toast.enter { transform: translateX(0); opacity: 1; }
.toast.exit { transform: translateX(100%); opacity: 0; }

/* Loading Animation */
@keyframes pulse-glow {
    0% { box-shadow: 0 0 0 0 rgba(59,130,246,0.7); }
    70% { box-shadow: 0 0 0 10px rgba(59,130,246,0); }
    100% { box-shadow: 0 0 0 0 rgba(59,130,246,0); }
}

.pulse-glow { animation: pulse-glow 2s infinite; }

/* Brainrot Card Hover Effects */
.brainrot-card {
    transition: all 0.2s;
}
.brainrot-card:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Slider Styles */
#brainrot-slider {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    background: white;
    box-shadow: 0 20px 25px rgba(0,0,0,0.1);
}

.slider-track { display: flex; transition: transform 0.5s ease-in-out; }
.slider-slide { flex-shrink: 0; padding: 0 1rem; }

.slider-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.8);
    color: #1f2937; /* gray-800 */
    border-radius: 9999px;
    padding: 0.75rem;
    box-shadow: 0 10px 15px rgba(0,0,0,0.1);
    transition: background 0.2s;
}
.slider-nav-btn:hover { background: white; }
.slider-nav-btn.prev { left: 1rem; }
.slider-nav-btn.next { right: 1rem; }

.slider-dots {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
    gap: 0.5rem;
}
.slider-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 9999px;
    background: #d1d5db;
    transition: background 0.2s;
}
.slider-dot.active { background: #2563eb; }

/* Gradient Text */
.gradient-text {
    background: linear-gradient(to right, #60a5fa, #2563eb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Button Hover Effects */
.btn-primary {
    background: linear-gradient(to right, #60a5fa, #2563eb);
    color: white;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px rgba(0,0,0,0.1);
    transition: all 0.2s;
}
.btn-primary:hover {
    box-shadow: 0 15px 20px rgba(0,0,0,0.15);
    transform: translateY(-0.25rem);
}
.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Mobile Optimizations */
@media (max-width: 640px) {
    .step-connector { width: 2rem; }
    .step-indicator { gap: 0.25rem; }
    .step-number { width: 2rem; height: 2rem; font-size: 0.75rem; }
    .step-label { font-size: 0.75rem; }
}

/* Line Clamp Utility */
.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* Backdrop Blur */
.backdrop-blur-md {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Smooth Scroll */
html { scroll-behavior: smooth; }

/* Floating Icons Background */
.hero-background {
    position: absolute; top:0; left:0; width:100%; height:100%;
    overflow: hidden; z-index:-1; opacity:0.3;
}
.moving-icon {
    position: absolute; width:60px; height:60px; opacity:0.3;
    animation: fadeInOut 4s ease-in-out infinite;
}
.moving-icon img { width:100%; height:100%; object-fit:contain; }
@keyframes fadeInOut {
    0% { opacity:0; transform:translateY(20px); }
    10%,90% { opacity:1; }
    100% { opacity:0; transform:translateY(-20px); }
}

/* Floating Animations */
@keyframes float1 {
    0% { transform: translateY(0) translateX(0) rotate(0); }
    25% { transform: translateY(-25px) translateX(20px) rotate(8deg); }
    50% { transform: translateY(-10px) translateX(10px) rotate(4deg); }
    75% { transform: translateY(-30px) translateX(-10px) rotate(-4deg); }
    100% { transform: translateY(0) translateX(0) rotate(0); }
}
@keyframes float2 {
    0% { transform: translateY(0) translateX(0) rotate(0); }
    25% { transform: translateY(-20px) translateX(-25px) rotate(-10deg); }
    50% { transform: translateY(-5px) translateX(-15px) rotate(-5deg); }
    75% { transform: translateY(-35px) translateX(15px) rotate(5deg); }
    100% { transform: translateY(0) translateX(0) rotate(0); }
}
@keyframes float3 {
    0% { transform: translateY(0) translateX(0) rotate(0); }
    25% { transform: translateY(-30px) translateX(15px) rotate(12deg); }
    50% { transform: translateY(-15px) translateX(25px) rotate(6deg); }
    75% { transform: translateY(-20px) translateX(-20px) rotate(-6deg); }
    100% { transform: translateY(0) translateX(0) rotate(0); }
}

/* Floating Items Container */
#floating-items-container {
    position: absolute; top:0; left:0; width:100%; height:100%;
    z-index:-2; overflow:hidden; pointer-events:none;
}
.floating-item { position:absolute; opacity:0.7; will-change:transform; }

/* Focus Ring */
.focus-ring:focus {
    outline:none;
    box-shadow: 0 0 0 2px #2563eb, 0 0 0 4px white;
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar { width:6px; }
.custom-scrollbar::-webkit-scrollbar-track { background:#f3f4f6; border-radius:9999px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:9999px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background:#9ca3af; }

/* Offerwall */
#ogads-container { min-height:400px; width:100%; }

/* Error + Success States */
.error-message { color:#dc2626; font-size:0.875rem; margin-top:0.5rem; display:flex; gap:0.25rem; align-items:center; }
.success-message { color:#16a34a; font-size:0.875rem; margin-top:0.5rem; display:flex; gap:0.25rem; align-items:center; }

/* Loading Overlay */
.loading-overlay {
    position:absolute; inset:0; background:rgba(255,255,255,0.8);
    display:flex; align-items:center; justify-content:center; z-index:10;
}

/* Responsive Typography */
@media (max-width:640px) {
    h1 { font-size:1.875rem; } /* text-3xl */
    h2 { font-size:1.5rem; }   /* text-2xl */
}

/* TikTok Popup */
#tiktok-popup {
    position:fixed; inset:0; background:rgba(0,0,0,0.8);
    z-index:9999; display:flex; align-items:center; justify-content:center;
    backdrop-filter:blur(4px);
}
#tiktok-popup .bg-white {
    position:relative; max-width:400px; width:90%; margin:20px;
    box-shadow:0 20px 40px rgba(0,0,0,0.3);
    background:white; border-radius:20px; padding:30px;
    font-size:18px; line-height:1.4; color:#333;
}
.tiktok-icon {
    display:inline-block; width:25px; height:25px; background:url(/assets/images/tiktokicon.webp) center/80% no-repeat;
    border-radius:50%; margin:0 5px;
}
.three-dots {
    display:inline-block; width:25px; height:25px; border-radius:50%;
    background:#666; margin:0 5px; position:relative;
}
.three-dots::after {
    content:"⋯"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    color:white; font-size:14px; font-weight:bold;
}
.highlight { color:#007aff; font-weight:bold; }

/* Hide for TikTok */
body.tiktok-hidden main,
body.tiktok-hidden nav,
body.tiktok-hidden footer { display:none !important; }

/* Print Styles */
@media print { .no-print { display:none !important; } }