/**
 * Payment Integration CSS
 * Styles for premium apps and payment functionality
 */

/* Payment Form Styles */
.payment-form {
    background: #2a2a2a;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    border: 1px solid #404040;
    color: #e0e0e0;
}

.payment-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.payment-method {
    cursor: pointer;
    transition: all 0.3s ease;
}

.payment-method input[type="radio"] {
    display: none;
}

.payment-method > div {
    transition: all 0.3s ease;
    opacity: 0.6;
    transform: scale(0.95);
    position: relative;
    overflow: hidden;
}

.payment-method input[type="radio"]:checked + div {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.payment-method:hover > div {
    transform: scale(1.02);
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

/* Specific Payment Gateway Styles */
.payment-method[data-gateway="paystack"] > div {
    background: linear-gradient(135deg, #00c3f7, #0099cc) !important;
}

/* */

/* Removed unused PayPal and Stripe styles */

.payment-method[data-gateway="crypto"] > div {
    background: linear-gradient(135deg, #f7931a, #d4780f) !important;
}

/* Payment method badges */
.payment-method > div::after {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.payment-method input[type="radio"]:checked + div::after {
    opacity: 1;
    background: rgba(255,255,255,0.9);
}

.payment-method input[type="radio"]:checked + div::before {
    content: '✓';
    position: absolute;
    top: 8px;
    right: 8px;
    color: #333;
    font-weight: bold;
    font-size: 12px;
    z-index: 1;
}

/* Premium Badges */
.premium-badge {
    background: #dc2626;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    animation: shimmer 2s infinite;
}

.owned-badge {
    background: #22c55e;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.free-badge, .featured-badge {
    background: #22c55e;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

@keyframes shimmer {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; transform: scale(1.05); }
}

/* Purchase Button Styles */
.purchase-btn {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    padding: 15px 40px;
    border: none;
    border-radius: 25px;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    max-width: 300px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.purchase-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(40, 167, 69, 0.3);
}

.purchase-btn:active {
    transform: translateY(0);
}

.purchase-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Premium App Cards */
.app-card.premium {
    border: 2px solid transparent;
    background: linear-gradient(#2a2a2a, #2a2a2a) padding-box,
                linear-gradient(135deg, #dc2626, #dc2626) border-box;
}

.premium-btn {
    background: #dc2626;
    color: white;
    transition: all 0.3s ease;
}

.premium-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(220, 38, 38, 0.3);
    background: #b91c1c;
}

.owned-btn {
    background: #22c55e;
    color: white;
    transition: all 0.3s ease;
}

.owned-btn:hover {
    background: #16a34a;
    transform: translateY(-2px);
}

/* Purchase Summary */
.purchase-summary {
    background: #1e1e1e;
    padding: 1.5rem;
    border-radius: 10px;
    border: 1px solid #404040;
    margin: 2rem 0;
    border-left: 4px solid #28a745;
}

.purchase-summary h4 {
    color: #333;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* License Key Display */
.license-key-display {
    background: #e8f5e8;
    padding: 1rem;
    border-radius: 10px;
    margin: 1rem 0;
    border-left: 4px solid #28a745;
}

.license-key-display code {
    background: white;
    padding: 0.5rem;
    border-radius: 5px;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    color: #333;
    word-break: break-all;
}

/* Payment History */
.payment-history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid #eee;
    transition: background-color 0.3s ease;
}

.payment-history-item:hover {
    background-color: #f8f9fa;
}

.payment-history-item:last-child {
    border-bottom: none;
}

/* Account Dashboard styles moved to theme style.css to unify visuals */

/* Purchased App Cards */
.purchased-app-card {
    background: white;
    padding: 1.5rem;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    position: relative;
    transition: transform 0.3s ease;
}

.purchased-app-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.expired-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #f44336;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: bold;
}

.subscription-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #ff9800;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: bold;
}

/* Statistics Display */
.apps-stats {
    text-align: center;
    margin: 2rem 0;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 10px;
}

.apps-stats > div {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.apps-stats > div > div {
    background: white;
    padding: 1rem;
    border-radius: 10px;
    min-width: 120px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.apps-stats > div > div:hover {
    transform: translateY(-2px);
}

/* Filter Buttons */
.filter-btn, .price-filter-btn {
    background: white;
    border: 2px solid #667eea;
    color: #667eea;
    padding: 10px 20px;
    margin: 5px;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.filter-btn:hover,
.filter-btn.active {
    background: #667eea;
    color: white;
    transform: translateY(-2px);
}

.price-filter-btn {
    border-color: #28a745;
    color: #28a745;
}

.price-filter-btn:hover {
    transform: translateY(-2px);
}

.price-filter-btn.active-price {
    background: #28a745;
    color: white;
    transform: translateY(-2px);
}

.price-filter-btn.active-price[onclick*="premium"] {
    background: #ff6b6b;
    border-color: #ff6b6b;
}

.price-filter-btn.active-price[onclick*="owned"] {
    background: #2196f3;
    border-color: #2196f3;
}

/* Loading States */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255,255,255,.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Responsive Design */
@media (max-width: 768px) {
    .payment-methods {
        grid-template-columns: 1fr;
    }
    
    .purchase-btn {
        width: 100%;
        max-width: none;
    }
    
    .account-nav ul {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .purchased-apps-grid {
    grid-template-columns: 1fr;
    gap: 1rem !important;
    }
    
    .apps-stats > div {
        flex-direction: column;
        gap: 1rem;
    }
    
    .category-filter > div {
        margin-bottom: 1rem;
    }
    
    .category-filter strong {
        display: block;
        margin-bottom: 0.5rem;
    }
    
    .filter-btn, .price-filter-btn {
        width: 100%;
        margin: 2px 0;
    }
    /* Purchased apps: list-style on mobile */
    .purchased-app-card {
        padding: 1rem !important;
    }

    .purchased-app-card > div:first-of-type {
        /* header row (icon + title) */
        margin-bottom: 0.75rem !important;
    }

    .purchased-app-card .app-icon-container {
        width: 56px !important;
        height: 56px !important;
        border-radius: 14px !important;
    }

    .purchased-app-card h3 {
        font-size: 1.1rem !important;
        margin: 0 0 0.25rem !important;
    }

    .purchased-app-card .purchase-info,
    .purchased-app-card .license-section {
        display: none !important;
    }

    .purchased-app-card .app-actions {
        justify-content: flex-start !important;
        gap: 0.75rem !important;
    }

    .purchased-app-card .app-actions .download-btn,
    .purchased-app-card .app-actions .view-btn,
    .purchased-app-card .app-actions .cancel-btn {
        padding: 0.7rem 1rem !important;
    }
}

@media (max-width: 480px) {
    .payment-form {
        padding: 1rem;
    }
    
    .purchase-summary {
        padding: 1rem;
    }
    
    .account-header {
        padding: 1.5rem;
    }
    
    .purchased-app-card {
        padding: 1rem;
    }
}

/* Mobile-specific overrides for Single App purchase page */
@media (max-width: 768px) {
    /* Header */
    .app-header { gap: 1rem !important; padding: 1rem !important; margin-bottom: 1.25rem !important; border-radius: 12px !important; }
    .app-header .app-icon { font-size: 2.6rem !important; }
    .app-header .app-title h1 { font-size: 1.35rem !important; margin: 0 0 0.25rem !important; }
    .app-subtitle { font-size: 1rem !important; }

    /* Download summary */
    .download-section { padding: 1rem !important; border-radius: 12px !important; margin-bottom: 1rem !important; text-align: left !important; }
    .download-section h2 { font-size: 1.1rem !important; margin-bottom: 0.75rem !important; }
    .download-section .download-info { display: grid !important; grid-template-columns: 1fr !important; gap: 0.5rem !important; margin-bottom: 1rem !important; }
    .download-section .download-info .info-item { padding: 0.75rem !important; text-align: left !important; }

    /* Payment section */
    .payment-section { padding: 1rem !important; border-radius: 12px !important; }
    .payment-section h3 { font-size: 1.05rem !important; margin-bottom: 0.85rem !important; }
    .payment-methods { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
    .payment-method > div { padding: 0.85rem !important; }
    .payment-method i { font-size: 1.6rem !important; }
    .payment-method small { font-size: 0.82rem !important; }
    #local-extra { padding: 0.85rem !important; border-radius: 10px !important; }
    #local-extra h4 { font-size: 1rem !important; }
    #local-extra label { font-size: 0.9rem !important; }
    #local-extra textarea { min-height: 84px !important; }

    /* Bank transfer details grid: keep in column */
    .apkhub-local-info { max-width: 100% !important; overflow: hidden; }
    .apkhub-local-info, .apkhub-local-info * { overflow-wrap: anywhere; word-break: break-word; }
    .apkhub-local-info > div:first-child { /* the grid wrapper */
        grid-template-columns: minmax(120px, 40%) 1fr !important;
        column-gap: 0.75rem !important;
        row-gap: 0.35rem !important;
        align-items: start !important;
    }
    .apkhub-local-info > div:first-child > div { min-width: 0 !important; }

    /* Purchase summary */
    .purchase-summary { padding: 1rem !important; }
    .purchase-summary h4 { font-size: 1rem !important; margin-bottom: 0.75rem !important; }
    .purchase-summary > div { flex-wrap: wrap !important; row-gap: 0.25rem !important; }
    .purchase-summary > div span { font-size: 0.95rem !important; }

    /* CTA */
    .purchase-btn, #purchase-btn { width: 100% !important; max-width: none !important; padding: 12px 18px !important; font-size: 1rem !important; }
}

@media (max-width: 480px) {
    .app-header { gap: 0.75rem !important; padding: 0.85rem !important; }
    .app-header .app-icon { font-size: 2.2rem !important; }
    .app-header .app-title h1 { font-size: 1.2rem !important; }
    .app-subtitle { font-size: 0.95rem !important; }
    .download-section h2 { font-size: 1rem !important; }
    .payment-methods { gap: 0.6rem !important; }
    .payment-method > div { padding: 0.75rem !important; }
    .payment-method i { font-size: 1.5rem !important; }
    .payment-method small { font-size: 0.78rem !important; }
    .purchase-btn, #purchase-btn { padding: 12px 16px !important; font-size: 0.98rem !important; }

    /* On very small screens, stack labels/values to one column */
    .apkhub-local-info > div:first-child { grid-template-columns: 1fr !important; }
    .apkhub-local-info > div:first-child > div { padding: 0 !important; }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .payment-form,
    .purchase-summary,
    .account-nav,
    .purchased-app-card {
        background: #2d3748;
        color: #fff;
    }
    
    .license-key-display {
        background: #2a4a3a;
    }
    
    .license-key-display code {
        background: #4a5568;
        color: #fff;
    }
    
    .payment-history-item:hover {
        background-color: #374151;
    }
}

/* Accessibility */
.payment-method:focus-within > div {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

.purchase-btn:focus {
    outline: 2px solid #28a745;
    outline-offset: 2px;
}

.nav-link:focus {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* Homepage App Cards Enhanced Styling */
.app-card {
    background: linear-gradient(145deg, #2a2a2a 0%, #1f1f1f 100%) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4), 0 5px 15px rgba(0,0,0,0.3) !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    border: 1px solid rgba(74, 222, 128, 0.1) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Single app header featured image sizing */
.app-header .app-icon {
    position: relative;
    width: 120px;
    height: 120px;
    flex: 0 0 120px;
}
.app-header .app-icon .app-featured-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

.app-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(74, 222, 128, 0.1), transparent);
    transition: left 0.6s ease;
}

.app-card:hover::before {
    left: 100%;
}

.app-card:hover {
    transform: translateY(-10px) rotateX(5deg) !important;
    box-shadow: 0 25px 50px rgba(0,0,0,0.6), 0 10px 25px rgba(74, 222, 128, 0.2) !important;
    border-color: rgba(74, 222, 128, 0.3) !important;
}

.app-card .app-icon {
    text-align: center !important;
    margin-bottom: 1.5rem !important;
    position: relative !important;
    z-index: 1 !important;
}

.app-card .app-icon i {
    font-size: 4.5rem !important;
    color: #4ade80 !important;
    text-shadow: 0 0 20px rgba(74, 222, 128, 0.5) !important;
    transition: all 0.3s ease !important;
}

.app-card:hover .app-icon i {
    transform: scale(1.1) rotate(5deg) !important;
    color: #22c55e !important;
    text-shadow: 0 0 30px rgba(74, 222, 128, 0.8) !important;
}

.app-card .app-info h3 {
    font-size: 1.6rem !important;
    margin-bottom: 0.5rem !important;
    text-align: center !important;
    color: #e0e0e0 !important;
    font-weight: 700 !important;
    position: relative !important;
    z-index: 1 !important;
}

.app-card .app-description {
    text-align: center !important;
    color: #b0b0b0 !important;
    margin-bottom: 2rem !important;
    line-height: 1.6 !important;
    font-size: 0.95rem !important;
    position: relative !important;
    z-index: 1 !important;
}

.app-card .download-btn {
    width: 100% !important;
    padding: 15px 25px !important;
    background: linear-gradient(135deg, #4ade80, #22c55e) !important;
    color: #1a4d3a !important;
    border: none !important;
    border-radius: 30px !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
    box-shadow: 0 4px 15px rgba(74, 222, 128, 0.3) !important;
}

.app-card .download-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.app-card .download-btn:hover::before {
    left: 100%;
}

.app-card .download-btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(74, 222, 128, 0.5) !important;
    color: #1a4d3a !important;
    text-decoration: none !important;
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
}

.app-card .download-btn:active {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 15px rgba(74, 222, 128, 0.4) !important;
}

/* Premium App Card Special Styling */
.app-card.premium {
    background: linear-gradient(145deg, #2a1f1a 0%, #1f1a1a 100%) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

.app-card.premium::before {
    background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.1), transparent) !important;
}

.app-card.premium:hover {
    border-color: rgba(245, 158, 11, 0.5) !important;
    box-shadow: 0 25px 50px rgba(0,0,0,0.6), 0 10px 25px rgba(245, 158, 11, 0.2) !important;
}

.app-card.premium .app-icon i {
    color: #f59e0b !important;
    text-shadow: 0 0 20px rgba(245, 158, 11, 0.5) !important;
}

.app-card.premium:hover .app-icon i {
    color: #d97706 !important;
    text-shadow: 0 0 30px rgba(245, 158, 11, 0.8) !important;
}

/* App Grid Responsive Layout */
.apps-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 2rem !important;
    padding: 1rem 0 !important;
}

@media (max-width: 768px) {
    .app-header .app-icon { width: 90px !important; height: 90px !important; flex-basis: 90px !important; }
    .app-header .app-icon .app-featured-image { border-radius: 12px !important; }
    .apps-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
        gap: 1.5rem !important;
    }
    
    .app-card {
        padding: 0.65rem 0.9rem !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    
    .app-card .app-icon {
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: left !important;
        width: 90px !important;
        height: 90px !important;
        flex: 0 0 90px !important;
    }

    .app-card .app-icon i {
        font-size: 2.1rem !important;
    }
    
    .app-card .app-info {
        text-align: left !important;
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.2rem !important;
        min-width: 0 !important;
    padding-right: 8px !important;
    }

    .app-card .app-icon img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 8px !important;
        display: block !important;
    }

    .app-card .app-info h3 {
    font-size: 0.98rem !important;
        line-height: 1.2 !important;
        text-align: left !important;
        margin: 0 !important;
    }

    .app-card .app-description {
        text-align: left !important;
        margin: 0.1rem 0 0.4rem !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        line-clamp: 1 !important;
        -webkit-line-clamp: 1 !important;
        -webkit-box-orient: vertical !important;
    }

    .app-card .download-btn {
        width: auto !important;
        align-self: flex-start !important;
        padding: 8px 12px !important;
        font-size: 0.9rem !important;
        line-height: 1.05 !important;
        border-radius: 10px !important;
        margin-top: 2px !important;
    }

    /* Soften badge size on mobile */
    .premium-badge,
    .owned-badge,
    .free-badge {
        padding: 0.2rem 0.5rem !important;
        font-size: 0.7rem !important;
    border-radius: 9px !important;
    }
}

@media (max-width: 480px) {
    .app-header .app-icon { width: 80px !important; height: 80px !important; flex-basis: 80px !important; }
    .app-header .app-icon .app-featured-image { border-radius: 10px !important; }
    .apps-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .app-card {
        padding: 0.6rem 0.85rem !important;
        gap: 6px !important;
    }
    
    .app-card .download-btn {
        padding: 12px 20px !important;
        font-size: 1rem !important;
    }

    .app-card .app-icon {
        width: 90px !important;
        height: 90px !important;
        flex-basis: 90px !important;
    }
    .app-card .app-icon i {
        font-size: 2rem !important;
    }
    .app-card .app-info h3 {
        font-size: 0.92rem !important;
    }
}

/* Print Styles */
@media print {
    .payment-form,
    .purchase-btn,
    .nav-link {
        background: none !important;
        color: black !important;
    }
    
    .premium-badge,
    .owned-badge,
    .free-badge {
        border: 1px solid black;
        background: none !important;
        color: black !important;
    }
}