/* Mobile-Specific Enhancements for Gifting Gifts */
/* Addresses: nested containers, progress visibility, clickability issues */

/* =====================================
   MOBILE CONTAINER OPTIMIZATIONS
   ===================================== */

@media (max-width: 768px) {
    /* Reduce excessive nesting and improve space utilization */
    .container-fluid {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    /* Hero section optimizations */
    .hero-section {
        padding: 40px 0 30px !important; /* Reduced from original */
    }
    
    .hero-section .row {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }
    
    .hero-section .col-lg-6 {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    /* Form card spacing improvements */
    .form-card {
        margin: 0.25rem !important;
        padding: 1.25rem !important;
        border-radius: 12px !important;
    }
    
    /* Results page container improvements */
    .results-page {
        margin-top: 2.5rem !important;
        padding-top: 0.5rem !important;
    }
    
    .category-section {
        margin-left: -0.25rem;
        margin-right: -0.25rem;
        padding: 0.875rem !important;
        margin-bottom: 1.25rem !important;
    }
}

/* =====================================
   PROGRESS BAR ENHANCEMENTS
   ===================================== */

@media (max-width: 768px) {
    /* Make progress more visible and prominent */
    #progress-container {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(249, 250, 251, 0.95)) !important;
        border: 3px solid var(--primary-color) !important;
        border-radius: 15px !important;
        padding: 1.25rem !important;
        margin: 1rem -0.5rem 0 -0.5rem !important; /* Extend to edges */
        box-shadow: 0 8px 25px rgba(0, 171, 228, 0.25) !important;
        backdrop-filter: blur(10px);
    }
    
    /* Enhanced progress bar */
    .progress {
        height: 20px !important;
        border-radius: 15px !important;
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.15) !important;
        border: 2px solid rgba(0, 171, 228, 0.3) !important;
    }
    
    .progress-bar {
        border-radius: 13px !important;
        font-weight: 700 !important;
        font-size: 0.8rem !important;
        line-height: 16px !important;
        background: linear-gradient(45deg, #00ABE4, #008CC3, #0077B3) !important;
        background-size: 300% 100% !important;
        animation: progressShimmer 2s ease-in-out infinite !important;
    }
    
    /* Dynamic progress text */
    #progress-status {
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        text-align: center !important;
        margin-bottom: 1rem !important;
    }
    
    .progress-main {
        font-size: 1.2rem !important;
        color: var(--primary-color) !important;
        margin-bottom: 0.75rem !important;
        font-weight: 700 !important;
    }
    
    .progress-tip {
        font-size: 0.95rem !important;
        color: var(--text-secondary) !important;
        font-weight: 500 !important;
    }
    
    /* Time remaining indicator */
    #time-remaining {
        font-weight: 700 !important;
        color: var(--primary-color) !important;
    }
    
    /* Fun fact box enhancement */
    .p-3.rounded {
        background: linear-gradient(135deg, rgba(0, 171, 228, 0.08), rgba(0, 140, 195, 0.12)) !important;
        border: 2px solid rgba(0, 171, 228, 0.2) !important;
        border-radius: 12px !important;
        padding: 1rem !important;
    }
}

/* =====================================
   BUTTON ENHANCEMENTS
   ===================================== */

@media (max-width: 768px) {
    /* More conspicuous generate button */
    .generate-btn {
        font-size: 1.2rem !important;
        padding: 1rem 2.5rem !important;
        border-radius: 30px !important;
        border: 4px solid var(--primary-hover) !important;
        box-shadow: 0 8px 30px rgba(0, 171, 228, 0.4) !important;
        background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        min-height: 60px !important; /* Better touch target */
        width: 100% !important;
        margin-top: 1.5rem !important;
    }
    
    .generate-btn:hover,
    .generate-btn:focus {
        transform: translateY(-4px) scale(1.02) !important;
        box-shadow: 0 12px 35px rgba(0, 171, 228, 0.5) !important;
    }
    
    .generate-btn:active {
        transform: translateY(-1px) scale(0.99) !important;
    }
    
    /* Dynamic button text for progress feedback */
    .generate-btn .btn-loading {
        font-size: 1rem !important;
        font-weight: 600 !important;
    }
}

/* =====================================
   CLICKABILITY IMPROVEMENTS
   ===================================== */

@media (max-width: 768px) {
    /* Enhanced card clickability */
    .mobile-clickable-card,
    .gift-item,
    .card {
        min-height: 140px !important; /* Larger touch targets */
        cursor: pointer !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        position: relative !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }
    
    /* Visual feedback for taps */
    .mobile-clickable-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 171, 228, 0);
        transition: background-color 0.2s ease;
        pointer-events: none;
        z-index: 1;
    }
    
    .mobile-clickable-card:active::before {
        background: rgba(0, 171, 228, 0.15);
    }
    
    /* Improved link visibility */
    .card-link {
        position: relative !important;
        z-index: 2 !important;
        display: block !important;
        text-decoration: none !important;
    }
    
    .card-link:hover,
    .card-link:focus {
        text-decoration: none !important;
        color: var(--primary-color) !important;
    }
    
    /* External link indicators */
    .fa-external-link-alt {
        font-size: 1.1rem !important;
        color: var(--primary-color) !important;
        opacity: 0.9 !important;
        margin-left: 0.5rem !important;
    }
    
    /* Card content improvements */
    .card-body {
        padding: 1.25rem !important;
        position: relative !important;
        z-index: 2 !important;
    }
    
    .card-title {
        font-size: 1.15rem !important;
        line-height: 1.4 !important;
        margin-bottom: 1rem !important;
        font-weight: 600 !important;
    }
    
    .card-text {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        margin-bottom: 1.25rem !important;
    }
    
    /* Price display improvements */
    .fw-bold.text-primary {
        font-size: 1.4rem !important;
        font-weight: 700 !important;
        color: var(--primary-color) !important;
        background: rgba(0, 171, 228, 0.1) !important;
        padding: 0.75rem !important;
        border-radius: 10px !important;
        text-align: center !important;
        margin-top: 1rem !important;
        border: 2px solid rgba(0, 171, 228, 0.2) !important;
    }
}

/* =====================================
   ARCHETYPE CARDS MOBILE
   ===================================== */

@media (max-width: 768px) {
    .archetype-grid {
        gap: 0.875rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .archetype-card {
        padding: 1.25rem !important;
        border-radius: 15px !important;
        border-width: 3px !important;
        min-height: 120px !important; /* Better touch targets */
        transition: all 0.3s ease !important;
    }
    
    .archetype-card:active {
        transform: scale(0.97) !important;
        background-color: rgba(0, 171, 228, 0.1) !important;
    }
    
    .archetype-icon {
        font-size: 2.75rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .archetype-title {
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        margin-bottom: 0.75rem !important;
    }
    
    .archetype-description {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
    }
}

/* =====================================
   ANIMATIONS AND EFFECTS
   ===================================== */

@keyframes progressShimmer {
    0% { background-position: -300% 0; }
    100% { background-position: 300% 0; }
}

@keyframes mobilePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

@media (max-width: 768px) {
    /* Subtle pulse animation for selected archetype */
    .archetype-card.selected {
        animation: mobilePulse 2s ease-in-out infinite !important;
    }
    
    /* Enhanced progress bar animation */
    .progress-bar-animated {
        animation: progressShimmer 2s ease-in-out infinite, 
                   progress-bar-stripes 1s linear infinite !important;
    }
}

/* =====================================
   ACCESSIBILITY IMPROVEMENTS
   ===================================== */

@media (max-width: 768px) {
    /* Better focus indicators */
    .generate-btn:focus,
    .archetype-card:focus,
    .mobile-clickable-card:focus {
        outline: 3px solid var(--primary-color) !important;
        outline-offset: 2px !important;
        box-shadow: 0 0 0 3px rgba(0, 171, 228, 0.3) !important;
    }
    
    /* Improved screen reader support */
    .sr-only {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
}

/* =====================================
   PERFORMANCE OPTIMIZATIONS
   ===================================== */

@media (max-width: 768px) {
    /* Optimize animations for mobile performance */
    * {
        -webkit-tap-highlight-color: rgba(0, 171, 228, 0.2) !important;
    }
    
    /* Reduce motion for users who prefer it */
    @media (prefers-reduced-motion: reduce) {
        .generate-btn,
        .archetype-card,
        .mobile-clickable-card,
        .progress-bar {
            animation: none !important;
            transition: none !important;
        }
        
        .generate-btn:hover,
        .archetype-card:hover,
        .mobile-clickable-card:hover {
            transform: none !important;
        }
    }
}