/* ============================================
   XP Components CSS - MangaFire Dark Theme
   Banner, Popup, Check-in, XP Section styles
   ============================================ */

/* ============================================
   XP Feature Announcement Banner
   ============================================ */
/* ============================================
   XP Feature Announcement Banner - Glassmorphism
   ============================================ */
/* ============================================
   XP Feature Announcement Banner - Glassmorphism
   ============================================ */
.xp-feature-banner {
    /* Glassmorphism Base */
    background: rgba(13, 23, 42, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.4),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    animation: bannerSlideIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    /* Margin removed; handled by container class or parent */
}

/* Decoration Glow */
.xp-feature-banner::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 100%;
    background: radial-gradient(circle at center, rgba(249, 115, 22, 0.1), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

@keyframes bannerSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.xp-banner-content {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 1;
}

.xp-banner-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    /* Glass Icon Container */
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(249, 115, 22, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fb923c;
    /* Prismatic Orange */
    font-size: 26px;
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.2);
    position: relative;
}

.xp-banner-icon::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.5), transparent);
    z-index: -1;
    opacity: 0.5;
    animation: rotate-glow 4s linear infinite;
}

@keyframes rotate-glow {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.xp-banner-text {
    flex: 1;
    min-width: 0;
}

.xp-banner-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 0.02em;
}

.xp-banner-title::before {
    content: 'NEW';
    background: linear-gradient(135deg, #f97316 0%, #c2410c 100%);
    color: white;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 10px rgba(249, 115, 22, 0.4);
}

.xp-banner-subtitle {
    font-size: 0.95rem;
    color: #94a3b8;
    margin: 0;
    line-height: 1.5;
    font-weight: 400;
}

.xp-banner-close {
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    color: #64748b;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 15px;
}

.xp-banner-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transform: rotate(90deg);
}

.xp-banner-action {
    display: flex;
    gap: 15px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.xp-banner-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: #e2e8f0;
}

.xp-banner-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}

.xp-banner-btn-checkin {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.2) 0%, rgba(234, 88, 12, 0.2) 100%);
    border-color: rgba(249, 115, 22, 0.3);
    color: #fb923c;
}

.xp-banner-btn-checkin:hover {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.3) 0%, rgba(234, 88, 12, 0.3) 100%);
    border-color: rgba(249, 115, 22, 0.5);
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.15);
    color: #fff;
}

@media (max-width: 600px) {

    /* Styles handled by bootstrap classes mainly, add specific overrides if needed */
    .xp-banner-btn {
        justify-content: center;
    }
}


.xp-banner-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(60, 139, 198, 0.4);
    color: white;
}

.xp-banner-btn.xp-banner-btn-checkin {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3);
}

.xp-banner-btn.xp-banner-btn-checkin:hover {
    box-shadow: 0 8px 25px rgba(249, 115, 22, 0.4);
}

.xp-banner-btn i {
    font-size: 16px;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .xp-feature-banner {
        margin-bottom: 16px;
    }

    .xp-banner-content {
        padding: 16px;
        gap: 12px;
    }

    .xp-banner-icon {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    .xp-banner-title {
        font-size: 16px;
    }

    .xp-banner-subtitle {
        font-size: 13px;
    }

    .xp-banner-action {
        padding: 0 16px 16px 16px;
        padding-left: 16px;
        flex-direction: column;
    }

    .xp-banner-btn {
        padding: 12px 20px;
        font-size: 14px;
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .xp-banner-content {
        flex-wrap: wrap;
    }

    .xp-banner-close {
        position: absolute;
        top: 8px;
        right: 8px;
    }
}

/* ============================================
   XP Feature Popup - First-Time Visitors
   ============================================ */
/* ============================================
   XP Feature Popup - First-Time Visitors
   ============================================ */
.xp-feature-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    /* Full screen container */
}

.xp-feature-popup.active {
    display: block;
}

.xp-popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 0;
    animation: fadeIn 0.3s ease;
}

.xp-popup-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    max-width: 90%;
    /* Mobile friendly */
    background: transparent;
    /* Card logic is inside link/image usually, or wrapper */
    border-radius: 1rem;
    z-index: 1;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    animation: popupSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes popupSlideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.xp-popup-link {
    display: block;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border-radius: 1rem;
    background: #1e2c43;
    /* Fallback */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.xp-popup-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 80vh;
    /* Prevent overflow on vertical */
    object-fit: contain;
    transition: transform 0.3s ease;
}

.xp-popup-link:hover .xp-popup-image {
    transform: scale(1.02);
}

.xp-popup-close-btn {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    border: 2px solid white;
    border-radius: 50%;
    color: white;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.xp-popup-close-btn:hover {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.xp-feature-popup.closing .xp-popup-overlay {
    animation: fadeOut 0.3s ease forwards;
}

.xp-feature-popup.closing .xp-popup-modal {
    animation: popupSlideOut 0.3s ease forwards;
}

@keyframes fadeOut {
    to {
        opacity: 0;
    }
}

@keyframes popupSlideOut {
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
}

@media (max-width: 768px) {
    .xp-popup-modal {
        width: 90%;
        /* Use simplified width */
    }

    .xp-popup-close-btn {
        top: -10px;
        right: -10px;
        width: 30px;
        height: 30px;
        font-size: 14px;
    }
}

/* ============================================
   XP Section - Profile Page
   ============================================ */
.xp-section {
    background: var(--secondary1, #1e2c43);
    border: 1px solid var(--border-color, #2a3a50);
    border-radius: 0.5rem;
    padding: 20px;
    margin-bottom: 20px;
}

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

.xp-level-badge {
    display: flex;
    align-items: center;
    gap: 10px;
}

.xp-rank {
    background: linear-gradient(135deg, var(--primary, #3c8bc6) 0%, #2a5a8a 100%);
    color: white;
    padding: 6px 12px;
    border-radius: 0.5rem;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.xp-level {
    color: var(--white, #ffffff);
    font-size: 16px;
    font-weight: 600;
}

.xp-total {
    color: var(--primary, #3c8bc6);
    font-size: 18px;
    font-weight: 700;
}

.xp-progress-bar {
    height: 8px;
    background: var(--secondary, #182335);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.xp-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary, #3c8bc6) 0%, #4ecdc4 100%);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.xp-progress-text {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #9ca3af;
}

.xp-to-next {
    color: var(--primary, #3c8bc6);
}

/* ============================================
   Daily Check-in Section
   ============================================ */
.daily-checkin-section {
    background: var(--secondary1, #1e2c43);
    border: 1px solid var(--border-color, #2a3a50);
    border-radius: 0.5rem;
    padding: 20px;
    margin-bottom: 20px;
}

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

.checkin-title {
    color: var(--white, #ffffff);
    font-size: 16px;
    font-weight: 600;
}

.checkin-streak {
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.checkin-streak-calendar {
    display: flex;
    gap: 15px;
    /* Increased gap */
    margin-bottom: 24px;
    overflow-x: auto;
    padding: 10px 5px 20px 5px;
    /* More padding for shadows */
    justify-content: center;
    /* Center align */
    scrollbar-width: none;
    /* Hide scrollbar Firefox */
}

.checkin-streak-calendar::-webkit-scrollbar {
    display: none;
    /* Hide scrollbar Chrome/Safari */
}

.checkin-day {
    flex-shrink: 0;
    width: 48px;
    /* Larger circles */
    height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(30, 41, 59, 0.4);
    /* Glass base */
    border: 1px solid rgba(255, 255, 255, 0.05);
    /* Subtle border */
    border-radius: 50%;
    /* Circle */
    font-size: 14px;
    font-weight: 700;
    color: #64748b;
    /* Muted text */
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Connector Line (except for first item) */
.checkin-day::after {
    content: '';
    position: absolute;
    right: -15px;
    /* Half of gap */
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 2px;
    background: rgba(255, 255, 255, 0.05);
    z-index: -1;
}

.checkin-day:last-child::after {
    display: none;
}

/* Completed State */
.checkin-day.completed {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    /* Orange Gradient */
    border-color: rgba(245, 158, 11, 0.5);
    color: white;
    box-shadow:
        0 0 15px rgba(245, 158, 11, 0.4),
        inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.checkin-day.completed::after {
    background: #f59e0b;
    /* Colored connector */
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

/* Today State (Not Completed) */
.checkin-day.today {
    background: rgba(30, 41, 59, 0.8);
    border-color: #f59e0b;
    color: #f59e0b;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.2);
    animation: pulse-border 2s infinite;
}

@keyframes pulse-border {
    0% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
    }
}

.checkin-day .day-num {
    font-size: 14px;
    z-index: 1;
}

.checkin-day .day-icon {
    display: none;
    /* Hide default icon if any */
}

/* Completed Icon Checkmark */
.checkin-day.completed .day-num {
    display: none;
    /* Hide number */
}

.checkin-day.completed::before {
    content: '\f00c';
    /* FontAwesome Check */
    font-family: 'Font Awesome 6 Pro', 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 16px;
}

.checkin-btn {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3);
}

.checkin-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(249, 115, 22, 0.4);
}

.checkin-btn:disabled {
    background: var(--secondary, #182335);
    color: #6b7280;
    cursor: not-allowed;
    box-shadow: none;
}

.checkin-status {
    text-align: center;
    margin-top: 12px;
    font-size: 13px;
    color: #9ca3af;
}

/* ============================================
   Check-in Popup Modal
   ============================================ */
.checkin-popup-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
}

.checkin-popup-modal.active {
    display: block;
}

.checkin-popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
}

.checkin-popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--secondary1, #1e2c43);
    border: 1px solid var(--border-color, #2a3a50);
    border-radius: 1rem;
    padding: 0;
    max-width: 400px;
    width: 90%;
    animation: popupSlideIn 0.3s ease;
}

.checkin-popup-header {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    padding: 24px;
    text-align: center;
    position: relative;
}

.checkin-popup-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.checkin-popup-header h3 {
    margin: 0;
    color: white;
    font-size: 20px;
    font-weight: 700;
}

.checkin-popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.checkin-popup-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.checkin-popup-body {
    padding: 24px;
    text-align: center;
}

.checkin-popup-message {
    color: #9ca3af;
    margin: 0 0 16px 0;
    font-size: 14px;
}

.checkin-popup-reward {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}

.reward-amount {
    font-size: 48px;
    font-weight: 800;
    color: #f97316;
}

.reward-label {
    font-size: 20px;
    font-weight: 600;
    color: #9ca3af;
}

.checkin-popup-streak {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #f97316;
    margin-bottom: 20px;
    font-size: 14px;
}

.checkin-popup-claim-btn {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.checkin-popup-claim-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(249, 115, 22, 0.4);
}

@media (max-width: 480px) {
    .checkin-day {
        width: 36px;
        height: 46px;
    }

    .checkin-day .day-num {
        font-size: 12px;
    }

    .checkin-popup-content {
        width: 95%;
    }

    .xp-banner-btn {
        width: 100%;
        justify-content: center;
    }
}