/* Mobile Enhancements CSS
   Comprehensive mobile UX improvements for Antara Satsanga
   
   1. Responsive padding and font sizes
   2. Enlarged touch targets (48px minimum)
   3. Improved mobile navigation
   4. Swipeable card layouts
   5. Collapsible accordion sections
*/

/* ============================================
   1. RESPONSIVE PADDING & FONT SIZES
   ============================================ */

/* Small phones (under 360px) */
@media (max-width: 359px) {
    .container,
    .main-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    h1, .h1 {
        font-size: 1.5rem !important;
    }
    
    h2, .h2 {
        font-size: 1.3rem !important;
    }
    
    h3, .h3 {
        font-size: 1.1rem !important;
    }
    
    p, .card-text, .card-description {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
    }
    
    .card-body {
        padding: 12px !important;
    }
}

/* Standard phones (360px - 480px) */
@media (max-width: 480px) {
    .container,
    .main-content {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    h1, .h1 {
        font-size: 1.6rem !important;
    }
    
    h2, .h2 {
        font-size: 1.4rem !important;
    }
    
    p, .card-text, .card-description {
        font-size: 0.95rem !important;
        line-height: 1.7 !important;
    }
    
    .card-body {
        padding: 16px !important;
    }
    
    /* Reduce large container padding */
    .lily-preview .container,
    .about-section,
    .faq-section {
        padding: 16px !important;
    }
}

/* Large phones and small tablets (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .container,
    .main-content {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    h1, .h1 {
        font-size: 1.8rem !important;
    }
    
    .card-body {
        padding: 20px !important;
    }
}

/* ============================================
   2. ENLARGED TOUCH TARGETS (48px minimum)
   ============================================ */

@media (max-width: 768px) {
    /* All buttons get 48px minimum height */
    .btn,
    button,
    .action-button,
    .option-btn,
    .mint-option,
    .nav-link {
        min-height: 48px !important;
        padding: 12px 20px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1rem !important;
    }
    
    /* Larger button text for readability */
    .btn-lg {
        min-height: 54px !important;
        padding: 14px 24px !important;
        font-size: 1.1rem !important;
    }
    
    /* Button groups with proper spacing */
    .btn-group,
    .action-buttons,
    .mint-options-container,
    .button-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 16px !important;
        justify-content: center !important;
    }
    
    /* Stack buttons vertically on very small screens */
    @media (max-width: 400px) {
        .btn-group,
        .action-buttons {
            flex-direction: column !important;
            width: 100% !important;
        }
        
        .btn-group .btn,
        .action-buttons .btn {
            width: 100% !important;
        }
    }
    
    /* Icon buttons */
    .btn-icon,
    .icon-btn,
    .mobile-menu-toggle {
        min-width: 48px !important;
        min-height: 48px !important;
        padding: 12px !important;
    }
    
    /* Form inputs */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    textarea,
    select,
    .form-control,
    .form-select {
        min-height: 48px !important;
        padding: 12px 16px !important;
        font-size: 16px !important; /* Prevents iOS zoom */
    }
    
    /* Checkboxes and radio buttons */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 24px !important;
        min-height: 24px !important;
        margin-right: 12px !important;
    }
    
    /* Links in lists/menus */
    .menu-item,
    .list-group-item,
    .dropdown-item {
        min-height: 48px !important;
        padding: 12px 16px !important;
    }
}

/* ============================================
   3. IMPROVED MOBILE NAVIGATION
   ============================================ */

@media (max-width: 768px) {
    /* Enhanced hamburger menu toggle */
    .mobile-menu-toggle {
        position: fixed !important;
        top: 12px !important;
        left: 12px !important;
        z-index: 1100 !important;
        width: 48px !important;
        height: 48px !important;
        border-radius: 12px !important;
        background: rgba(26, 42, 58, 0.95) !important;
        border: 1px solid rgba(181, 168, 255, 0.3) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #b5a8ff !important;
        font-size: 1.4rem !important;
        transition: all 0.3s ease !important;
    }
    
    .mobile-menu-toggle:hover,
    .mobile-menu-toggle:active {
        background: rgba(47, 67, 89, 0.95) !important;
        transform: scale(1.05) !important;
    }
    
    /* Hamburger icon animation */
    .mobile-menu-toggle.active i::before {
        content: "\f00d" !important; /* X icon when open */
    }
    
    /* Mobile overlay when menu is open */
    .mobile-overlay,
    .menu-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.6) !important;
        z-index: 1050 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.3s ease, visibility 0.3s ease !important;
    }
    
    .mobile-overlay.active,
    .menu-overlay.active {
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Enhanced mobile footer menu */
    .mobile-footer-menu {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 70px !important;
        background: rgba(26, 42, 58, 0.98) !important;
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3) !important;
        display: flex !important;
        justify-content: space-around !important;
        align-items: center !important;
        z-index: 1000 !important;
        padding: 0 10px !important;
        border-top: 1px solid rgba(181, 168, 255, 0.2) !important;
    }
    
    .mobile-menu-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 60px !important;
        min-height: 60px !important;
        padding: 8px !important;
        text-decoration: none !important;
        color: rgba(255, 255, 255, 0.7) !important;
        border-radius: 12px !important;
        transition: all 0.2s ease !important;
    }
    
    .mobile-menu-item i {
        font-size: 1.4rem !important;
        margin-bottom: 4px !important;
        color: #b5a8ff !important;
    }
    
    .mobile-menu-item span {
        font-size: 0.7rem !important;
        font-weight: 500 !important;
    }
    
    .mobile-menu-item.active,
    .mobile-menu-item:active {
        background: rgba(181, 168, 255, 0.15) !important;
        color: #fff !important;
    }
    
    .mobile-menu-item.active i {
        color: #b5a8ff !important;
        transform: scale(1.1) !important;
    }
    
    /* Add safe area padding for notched phones */
    .mobile-footer-menu {
        padding-bottom: env(safe-area-inset-bottom, 0) !important;
        height: calc(70px + env(safe-area-inset-bottom, 0)) !important;
    }
    
    /* Adjust body padding for footer menu */
    body {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0)) !important;
    }
    
    /* Add top padding for hamburger menu */
    .main-content {
        padding-top: 70px !important;
    }
}

/* ============================================
   4. SWIPEABLE CARD LAYOUTS
   ============================================ */

@media (max-width: 768px) {
    /* Three-card reading container - horizontal scroll */
    .cards-container,
    .three-card-container,
    .reading-container {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 16px !important;
        padding: 16px !important;
        margin: 0 -16px !important;
        scrollbar-width: none !important;
    }
    
    .cards-container::-webkit-scrollbar,
    .three-card-container::-webkit-scrollbar,
    .reading-container::-webkit-scrollbar {
        display: none !important;
    }
    
    /* Individual cards in swipeable container */
    .cards-container > *,
    .three-card-container > *,
    .reading-container > .card-wrapper {
        flex: 0 0 calc(100vw - 64px) !important;
        max-width: calc(100vw - 64px) !important;
        scroll-snap-align: center !important;
    }
    
    /* Card swipe indicator dots */
    .swipe-indicator {
        display: flex !important;
        justify-content: center !important;
        gap: 8px !important;
        margin-top: 16px !important;
        padding: 8px 0 !important;
    }
    
    .swipe-dot {
        width: 8px !important;
        height: 8px !important;
        border-radius: 50% !important;
        background: rgba(181, 168, 255, 0.3) !important;
        transition: all 0.3s ease !important;
    }
    
    .swipe-dot.active {
        background: #b5a8ff !important;
        transform: scale(1.2) !important;
    }
    
    /* Responsive grids for card galleries */
    .card-grid,
    .gallery-grid,
    .mint-options-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
        gap: 16px !important;
    }
    
    /* Single column on very small screens */
    @media (max-width: 360px) {
        .card-grid,
        .gallery-grid,
        .mint-options-grid {
            grid-template-columns: 1fr !important;
        }
    }
    
    /* Journal entry cards */
    .journal-cards-display,
    .mint-cards-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 12px !important;
        padding-bottom: 12px !important;
    }
    
    .journal-cards-display > *,
    .mint-cards-container > * {
        flex: 0 0 200px !important;
        scroll-snap-align: start !important;
    }
}

/* ============================================
   5. COLLAPSIBLE ACCORDION SECTIONS
   ============================================ */

/* Accordion styles for long content */
.mobile-accordion {
    border-radius: 12px !important;
    overflow: hidden !important;
    margin-bottom: 12px !important;
}

.mobile-accordion-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px !important;
    background: rgba(47, 67, 89, 0.6) !important;
    border: none !important;
    width: 100% !important;
    text-align: left !important;
    color: #fff !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.3s ease !important;
    min-height: 48px !important;
}

.mobile-accordion-header:hover,
.mobile-accordion-header:active {
    background: rgba(47, 67, 89, 0.8) !important;
}

.mobile-accordion-header .accordion-icon {
    transition: transform 0.3s ease !important;
    font-size: 0.9rem !important;
    color: #b5a8ff !important;
}

.mobile-accordion-header.active .accordion-icon {
    transform: rotate(180deg) !important;
}

.mobile-accordion-content {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease !important;
    background: rgba(26, 42, 58, 0.8) !important;
}

.mobile-accordion-content.active {
    max-height: 2000px !important;
}

.mobile-accordion-content-inner {
    padding: 16px !important;
    line-height: 1.8 !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Auto-collapse long content on mobile */
@media (max-width: 768px) {
    .card-meaning,
    .reflection-text,
    .spiritual-insight,
    .ai-reflection {
        line-height: 1.8 !important;
        letter-spacing: 0.01em !important;
    }
    
    /* Truncate very long paragraphs with expand option */
    .truncatable-text {
        display: -webkit-box !important;
        -webkit-line-clamp: 4 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        transition: all 0.3s ease !important;
    }
    
    .truncatable-text.expanded {
        -webkit-line-clamp: unset !important;
        overflow: visible !important;
    }
    
    .read-more-btn {
        display: inline-block !important;
        margin-top: 8px !important;
        padding: 8px 16px !important;
        background: rgba(181, 168, 255, 0.2) !important;
        border: 1px solid rgba(181, 168, 255, 0.4) !important;
        border-radius: 20px !important;
        color: #b5a8ff !important;
        font-size: 0.85rem !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }
    
    .read-more-btn:hover,
    .read-more-btn:active {
        background: rgba(181, 168, 255, 0.3) !important;
    }
    
    /* FAQ items as accordions */
    .faq-item {
        margin-bottom: 12px !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }
    
    .faq-item h3 {
        padding: 16px !important;
        margin: 0 !important;
        background: rgba(47, 67, 89, 0.6) !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 48px !important;
    }
    
    .faq-item h3::after {
        content: "+" !important;
        font-size: 1.2rem !important;
        color: #b5a8ff !important;
        transition: transform 0.3s ease !important;
    }
    
    .faq-item.open h3::after {
        content: "−" !important;
    }
    
    .faq-item p {
        padding: 0 16px !important;
        max-height: 0 !important;
        overflow: hidden !important;
        transition: all 0.3s ease, max-height 0.3s ease !important;
    }
    
    .faq-item.open p {
        max-height: 1000px !important;
        padding: 16px !important;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Safe area insets for modern phones */
.safe-area-top {
    padding-top: env(safe-area-inset-top, 0) !important;
}

.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
}

/* Prevent horizontal overflow */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* Smooth scrolling for touch devices */
html {
    scroll-behavior: smooth !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Better focus states for accessibility */
@media (max-width: 768px) {
    *:focus {
        outline: 2px solid #b5a8ff !important;
        outline-offset: 2px !important;
    }
    
    button:focus,
    a:focus,
    input:focus,
    select:focus,
    textarea:focus {
        outline: 2px solid #b5a8ff !important;
        outline-offset: 2px !important;
    }
}

/* Loading states for touch feedback */
.touch-active {
    opacity: 0.8 !important;
    transform: scale(0.98) !important;
}

/* Prevent text selection on buttons during touch */
button,
.btn,
.mobile-menu-item {
    -webkit-user-select: none !important;
    user-select: none !important;
}