/* ======================
   GLOBAL PIXEL THEME CSS
   ====================== */

/* Consolidated imports to preserve existing styles during migration */
@import url('pixel-landing.css');
@import url('pixel-gallery.css');
@import url('style.css');
@import url('styles2.css');

/* SweetAlert2 z-index fix - must be above modal */
.swal2-container {
    z-index: 99999 !important;
}

.swal2-popup {
    z-index: 99999 !important;
}

/* ======================
   RESPONSIVE NAVBAR RULES
   ====================== */

/* Mobile: bottom navbar icons only (hide labels) */
@media (max-width: 768px) {
        .mobile-navbar span { display: none; }
        .pixel-header {
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            padding: 0.5rem 0.8rem !important;
            align-items: center;
            justify-content: space-between;
        }
        .pixel-header .pixel-logo {
            flex: 1 1 auto;
            display: flex;
            align-items: center;
            gap: 0.3rem;
            min-width: 0;
        }
        .pixel-header .pixel-logo span {
            font-size: 0.7rem !important;
            white-space: nowrap;
            overflow: visible;
        }
        .pixel-header .pixel-logo img {
            width: 32px !important;
            height: 32px !important;
            flex-shrink: 0;
        }
        .pixel-header .pixel-nav {
            flex: 0 0 auto;
            display: flex !important;
            align-items: center;
            gap: 0.4rem;
            flex-wrap: nowrap !important;
        }
        .pixel-header .pixel-nav > a { display: none; }
        .pixel-header .nav-dropdown { display: inline-flex !important; }
        .pixel-header .nav-dropdown-btn {
            padding: 0.4rem 0.5rem;
            font-size: 1.1rem;
            min-width: 36px;
            min-height: 36px;
        }
        /* Scrollable dropdown menu */
        .nav-dropdown-content {
            max-height: 65vh !important;
            overflow-y: auto !important;
        }
        
        /* Auth forms - add class-based approach */
        .auth-card,
        .pixel-form-card {
            max-width: 100% !important;
            margin: 0.5rem !important;
            padding: 1.5rem !important;
            width: calc(100% - 1rem) !important;
        }
}

/* Desktop: show full top navbar, hide mobile bottom bar if desired */
@media (min-width: 769px) {
        .mobile-navbar { position: fixed; left: 0; right: 0; bottom: 0; display: none; }
}

/* Ensure dropdown visibility class */
.nav-dropdown-content.show { display: block; }

/* ======================
   ADMIN PAGES (PIXEL THEME)
   ====================== */
.admin-page h1, .admin-page h2, .admin-page h3, .admin-page h4, .admin-page h5 {
        font-family: 'Press Start 2P', cursive;
        letter-spacing: 0.5px;
        color: var(--pixel-white);
}

.admin-page .card {
        background: rgba(26, 26, 31, 0.85);
        border: 2px solid var(--pixel-purple);
        border-radius: 12px;
        box-shadow: 0 0 12px rgba(157, 78, 221, 0.15);
}

.admin-page .card.bg-primary,
.admin-page .card.bg-success,
.admin-page .card.bg-info {
        background: linear-gradient(135deg, rgba(157,78,221,0.25), rgba(0,255,255,0.15));
        border-color: var(--pixel-cyan);
}

.admin-page .table {
        color: var(--pixel-white);
        border-color: var(--pixel-purple);
}

.admin-page .table thead th {
        background: rgba(11, 11, 16, 0.9);
        border-bottom: 2px solid var(--pixel-purple);
}

.admin-page .table tbody tr {
        background: rgba(26, 26, 31, 0.6);
}

.admin-page .table tbody tr:hover {
        background: rgba(26, 26, 31, 0.85);
}

.admin-page .btn,
.admin-page .page-link {
        font-family: 'VT323', monospace;
        font-size: 1.1rem;
        border: 2px solid var(--pixel-purple);
        background: rgba(11, 11, 16, 0.6);
        color: var(--pixel-white);
}

.admin-page .btn.btn-primary {
        background: var(--pixel-purple);
        border-color: var(--pixel-cyan);
}

.admin-page .btn.btn-outline-secondary,
.admin-page .btn.btn-outline-danger,
.admin-page .btn.btn-outline-primary {
        background: transparent;
}

.admin-page .badge.bg-success {
        background: rgba(0, 255, 0, 0.15) !important;
        border: 1px solid #00FF00;
        color: #00FF00;
}

.admin-page .badge.bg-secondary {
        background: rgba(157, 78, 221, 0.15) !important;
        border: 1px solid var(--pixel-purple);
        color: var(--pixel-white);
}

.admin-page .pagination .page-item.active .page-link {
        background: var(--pixel-purple);
        border-color: var(--pixel-cyan);
}

.admin-page .form-control, .admin-page .form-select {
        background: rgba(11, 11, 16, 0.6);
        border: 2px solid var(--pixel-purple);
        color: var(--pixel-white);
}

.admin-page .form-control:focus, .admin-page .form-select:focus {
        border-color: var(--pixel-cyan);
        box-shadow: 0 0 10px rgba(0,255,255,0.3);
}

.admin-page .empty-state i { color: var(--pixel-purple); opacity: 0.7; }

/* ======================
   GLOBAL PIXEL BUTTONS
   Match landing page style across all pages
   ====================== */
.pixel-btn {
        font-family: 'VT323', monospace;
        font-size: 1.1rem;
        padding: 0.8rem 1.4rem;
        border: 2px solid var(--pixel-purple);
        border-radius: 8px;
        background: rgba(11, 11, 16, 0.6);
        color: var(--pixel-white);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        transition: all 0.2s ease-in-out;
}

.pixel-btn:hover {
        border-color: var(--pixel-cyan);
        box-shadow: 0 0 14px rgba(0, 255, 255, 0.25);
        transform: translateY(-1px);
}

.pixel-btn-primary {
        background: linear-gradient(135deg, var(--pixel-purple), #7B2CBF);
        border-color: var(--pixel-cyan);
}

.pixel-btn-primary:hover {
        filter: brightness(1.05);
        box-shadow: 0 0 18px rgba(0, 255, 255, 0.35);
}

.pixel-btn-secondary {
        background: transparent;
        border-color: var(--pixel-purple);
        color: var(--pixel-purple);
}

.pixel-btn-secondary:hover {
        border-color: var(--pixel-cyan);
        color: var(--pixel-white);
}

/* Override to match landing hero buttons exactly */
.pixel-btn {
        padding: 1rem 2.5rem;
        font-family: 'Press Start 2P', cursive;
        font-size: 0.9rem;
        border-width: 3px;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px));
}

.pixel-btn-primary {
        background: var(--pixel-purple);
        border-color: var(--pixel-purple);
        color: var(--pixel-white);
        box-shadow: 0 0 20px rgba(157, 78, 221, 0.5);
}

.pixel-btn-primary:hover {
        background: transparent;
        box-shadow: 0 0 30px var(--pixel-purple), inset 0 0 30px rgba(157, 78, 221, 0.3);
        transform: translateY(-3px);
}

.pixel-btn-secondary {
        background: transparent;
        border-color: var(--pixel-cyan);
        color: var(--pixel-cyan);
        box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
}

.pixel-btn-secondary:hover {
        background: var(--pixel-cyan);
        color: var(--pixel-bg);
        box-shadow: 0 0 30px var(--pixel-cyan);
        transform: translateY(-3px);
}

/* ======================
   FORMS (Inputs/Selects/Textareas)
   ====================== */
.pixel-theme input[type="text"],
.pixel-theme input[type="email"],
.pixel-theme input[type="password"],
.pixel-theme input[type="url"],
.pixel-theme input[type="number"],
.pixel-theme textarea,
.pixel-theme select,
.pixel-input {
        width: 100%;
        box-sizing: border-box;
        padding: 0.8rem;
        font-family: 'VT323', monospace;
        font-size: 1.1rem;
        background: rgba(11, 11, 16, 0.8);
        border: 2px solid var(--pixel-purple);
        border-radius: 8px;
        color: var(--pixel-white);
        transition: all 0.3s ease;
}

.pixel-theme input:focus,
.pixel-theme textarea:focus,
.pixel-theme select:focus,
.pixel-input:focus {
        border-color: var(--pixel-cyan);
        box-shadow: 0 0 10px var(--pixel-cyan);
}

/* Top loader active state */
.top-loader-active #top-loader { transform: scaleX(1); }

/* Compact button variant */
.pixel-btn-sm {
        padding: 0.55rem 1rem;
        font-size: 0.7rem;
        border-width: 2px;
        clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

/* Danger variant for destructive actions */
.pixel-btn-danger {
        background: var(--pixel-red);
        border-color: var(--pixel-orange);
        color: var(--pixel-white);
        box-shadow: 0 0 18px rgba(255, 69, 0, 0.35);
}

.pixel-btn-danger:hover {
        filter: brightness(1.05);
        box-shadow: 0 0 26px rgba(255, 140, 0, 0.45);
        transform: translateY(-2px);
}

/* ======================
   MODAL-SIZED BUTTONS
   Make buttons smaller inside prompt modals
   ====================== */
#promptModal .pixel-btn,
#promptModal .pixel-btn-primary,
#promptModal .pixel-btn-secondary {
        padding: 0.6rem 1rem;
        font-size: 0.75rem;
        border-width: 2px;
        clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

#promptModal .pixel-btn:hover,
#promptModal .pixel-btn-primary:hover,
#promptModal .pixel-btn-secondary:hover {
        transform: translateY(-2px);
}

/* Creator box styling inside modal */
#promptModal .creator-box {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.35rem 0.6rem;
        border: 2px solid var(--pixel-purple);
        border-radius: 10px;
        background: rgba(26, 26, 31, 0.7);
}

#promptModal .creator-box .creator-link {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        color: var(--pixel-cyan);
        text-decoration: none;
}

#promptModal .creator-box .creator-name {
        font-family: 'VT323', monospace;
        font-size: 1rem;
}

#promptModal .creator-box img {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid rgba(255,255,255,0.08);
}

/* Copy button style in modal */
#promptModal .modal-copy-btn {
        border-color: var(--pixel-purple);
        background: transparent;
        color: var(--pixel-white);
}

#promptModal .modal-copy-btn:hover {
        border-color: var(--pixel-cyan);
}

/* ======================
   MOBILE RESPONSIVE STYLES
   Comprehensive mobile-first responsive design
   ====================== */

/* Mobile Header - Title + Bell + Menu on one row */
@media (max-width: 768px) {
    /* Force header to be single row flex container */
    .pixel-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
    }
    
    /* Logo section - takes available space */
    .pixel-header .pixel-logo {
        display: flex !important;
        align-items: center !important;
        gap: 0.4rem;
        flex: 1 1 auto;
        min-width: 0;
    }
    
    .pixel-header .pixel-logo img {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
    }
    
    .pixel-header .pixel-logo span {
        font-size: 0.55rem !important;
        white-space: nowrap;
    }
    
    /* Nav section - compact, no wrap */
    .pixel-header .pixel-nav {
        display: flex !important;
        align-items: center !important;
        gap: 0.3rem;
        flex: 0 0 auto;
        flex-wrap: nowrap !important;
    }
    
    /* Hide text links on mobile, show only icons */
    .pixel-header .pixel-nav > a {
        display: none !important;
    }
    
    /* Show only dropdown buttons (bell and 3-dots) */
    .pixel-header .pixel-nav .nav-dropdown {
        display: flex !important;
        align-items: center;
    }
    
    .pixel-header .pixel-nav .nav-dropdown-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 0.4rem;
        font-size: 1.1rem;
    }
    
    /* Dropdown content positioning */
    .pixel-header .pixel-nav .nav-dropdown-content {
        position: fixed;
        top: 55px;
        right: 10px;
        left: auto;
        width: 280px;
        max-width: calc(100vw - 20px);
    }
    
    /* Mobile buttons */
    .pixel-btn {
        padding: 0.6rem 1rem;
        font-size: 0.7rem;
        clip-path: none;
    }
    
    /* Hero section mobile */
    .hero-section {
        padding: 2rem 1rem;
        min-height: auto;
    }
    
    .hero-title {
        font-size: 1.2rem !important;
        line-height: 1.4;
    }
    
    .hero-subtitle {
        font-size: 1rem !important;
    }
    
    .hero-description {
        font-size: 0.9rem !important;
    }
    
    .hero-buttons {
        flex-direction: column;
        gap: 1rem;
    }
    
    .hero-buttons .pixel-btn {
        width: 100%;
        text-align: center;
    }
    
    /* Section titles mobile */
    .section-title {
        font-size: 1rem !important;
        margin-bottom: 1.5rem;
    }
    
    /* Cards grid mobile */
    .categories-grid,
    .coins-grid,
    .earn-grid,
    .steps-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    /* Cards mobile */
    .category-card,
    .coin-card,
    .earn-card,
    .step-card {
        padding: 1.5rem;
    }
    
    /* Leaderboard ranks mobile */
    .leaderboard-ranks {
        flex-wrap: wrap;
        gap: 1rem;
    }
    
    .rank-badge {
        flex: 1 1 40%;
        min-width: 120px;
    }
    
    /* Profile page mobile */
    .profile-container {
        padding: 1rem;
    }
    
    .profile-header {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .profile-pic-container {
        margin: 0 auto;
    }
    
    /* Gallery grid mobile */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .prompt-card {
        padding: 0.75rem;
    }
    
    .prompt-card img {
        border-radius: 8px;
    }
    
    /* Forms mobile */
    .pixel-container {
        padding: 1rem;
    }
    
    .pixel-container form {
        max-width: 100%;
    }
    
    /* Modal mobile */
    #promptModal .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    
    #promptModal .modal-content {
        padding: 1rem;
    }
    
    #promptModal .modal-title {
        font-size: 0.9rem;
    }
    
    /* Footer mobile */
    .pixel-footer {
        padding: 2rem 1rem;
    }
    
    .footer-content {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }
    
    /* Buy coins mobile */
    .coins-selection {
        flex-direction: column;
    }
    
    /* Add prompt page mobile */
    .add-prompt-container {
        padding: 1rem;
    }
    
    /* Circle members display mobile */
    .circle-members-preview {
        flex-wrap: wrap;
    }
    
    .circle-members-preview img {
        width: 28px;
        height: 28px;
    }
}

/* Extra small screens (375px and below) */
@media (max-width: 480px) {
    .pixel-header .pixel-logo span {
        font-size: 0.6rem !important;
        white-space: nowrap;
    }
    
    .pixel-header .pixel-logo img {
        width: 28px !important;
        height: 28px !important;
    }
    
    .pixel-header .nav-dropdown-btn {
        padding: 0.3rem 0.4rem !important;
        font-size: 1rem !important;
        min-width: 32px !important;
        min-height: 32px !important;
    }
    
    .hero-title {
        font-size: 1rem !important;
    }
    
    .gallery-grid {
        grid-template-columns: 1fr;
    }
    
    .pixel-btn {
        padding: 0.5rem 0.8rem;
        font-size: 0.65rem;
    }
    
    .section-title {
        font-size: 0.9rem !important;
    }
    
    /* Auth forms on extra small screens */
    .auth-card {
        padding: 1rem !important;
        margin: 0.3rem !important;
    }
    
    .auth-title {
        font-size: 1.1rem !important;
    }
    
    /* All inputs - prevent iOS zoom */
    input, select, textarea {
        font-size: 16px !important;
    }
    
    /* Coin cards on extra small */
    .coin-card {
        padding: 1rem !important;
    }
    
    .coin-price {
        font-size: 1.5rem !important;
    }
    
    /* Category cards */
    .category-card {
        padding: 1rem !important;
    }
    
    .category-title {
        font-size: 0.8rem !important;
    }
}

/* ======================
   MOBILE FORM STYLING
   ====================== */
@media (max-width: 768px) {
    /* Form containers with inline styles - use high specificity */
    .pixel-container > div[style*="max-width: 450px"] {
        max-width: 100% !important;
        margin: 0.5rem !important;
        padding: 1.5rem !important;
        width: calc(100% - 1rem) !important;
    }
    
    /* Form inputs with inline styles */
    input[style*="width: 100%"],
    textarea[style*="width: 100%"],
    select[style*="width: 100%"] {
        font-size: 16px !important; /* Prevents iOS zoom */
        padding: 0.7rem !important;
    }
    
    /* Form titles */
    h1[style*="Press Start 2P"] {
        font-size: 1.1rem !important;
    }
    
    /* OTP input fields */
    .otp-input {
        width: 40px !important;
        height: 45px !important;
        font-size: 1.2rem !important;
    }
    
    /* Admin tables scrollable */
    .admin-page .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Buy coins page */
    .coins-selection {
        flex-direction: column !important;
        gap: 1rem;
    }
    
    .coin-option {
        width: 100% !important;
    }
    
    /* Profile edit page */
    .profile-form-container {
        padding: 1rem !important;
    }
    
    /* Prompt detail modal */
    .prompt-modal-content {
        padding: 1rem !important;
    }
    
    /* Add prompt page */
    .add-prompt-form {
        padding: 1rem !important;
    }
    
    /* Public profile page */
    .public-profile-header {
        flex-direction: column !important;
        text-align: center;
    }
    
    .profile-stats {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .stat-item {
        min-width: 80px;
    }
    
    /* Profile edit page - 2 column grid to single column */
    div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Referral section mobile */
    .referral-section {
        padding: 1rem !important;
    }
    
    .referral-code-display {
        font-size: 1rem !important;
        letter-spacing: 2px !important;
        padding: 0.8rem !important;
    }
}