/* 
 * REFINED MOBILE FIX - Keep inputs working while restoring design
 * Cards can collapse/expand, sidebar shows at bottom
 */

@media (max-width: 992px) {
    
    /* Hide the sticky header donate button on mobile - it blocks content */
    .calculator-header {
        position: relative !important;
        margin-bottom: 1rem !important;
    }
    
    /* Hide progress bar on mobile to save space */
    .progress-container {
        display: none !important;
    }
    
    /* Allow cards to collapse properly, but expand fully when active */
    .calc-card-body {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
    }
    
    .calc-card.active .calc-card-body {
        max-height: 3000px !important; /* Increased from 1000px */
        overflow: visible !important;
    }
    
    /* Remove any transforms or transitions that might block */
    .calc-card-body,
    .calc-card-content,
    .input-group,
    input {
        transform: none !important;
        will-change: auto !important;
    }
    
    /* FORCE inputs to be interactive */
    input[type="number"],
    input[type="text"] {
        pointer-events: auto !important;
        touch-action: manipulation !important;
        -webkit-user-select: auto !important;
        user-select: auto !important;
        z-index: 10 !important;
        position: relative !important;
    }
    
    /* Make input areas larger and more tappable */
    .input-group {
        min-height: 60px !important;
        padding: 1rem !important;
        margin-bottom: 0.75rem !important;
        display: flex !important;
        align-items: center !important;
        background: white !important;
        border: 2px solid #E2E8F0 !important;
        border-radius: 8px !important;
    }
    
    .input-group input {
        min-height: 48px !important;
        font-size: 16px !important;
        padding: 12px 16px !important;
        width: 150px !important;
        border: 2px solid #CBD5E0 !important;
        border-radius: 6px !important;
        background: white !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }
    
    /* Hide the desktop sidebar on mobile - we have bottom section instead */
    .calculator-sidebar {
        display: none !important;
    }
    
    /* Style the new bottom summary section */
    .summary-section-bottom {
        background: linear-gradient(135deg, #F7FAFC 0%, #EDF2F7 100%);
        padding: 1rem 1rem 2rem 1rem;
        margin-top: 0.5rem; /* Reduced from 2rem */
    }
    
    .summary-card-bottom {
        background: linear-gradient(135deg, #6B46C1 0%, #553C9A 100%);
        border-radius: 16px;
        padding: 2rem 1.5rem;
        color: white;
        box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    }
    
    .summary-card-bottom h3 {
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: white;
    }
    
    .summary-section-bottom .summary-item {
        display: flex;
        justify-content: space-between;
        padding: 0.75rem 0;
        border-bottom: 1px solid rgba(255,255,255,0.15);
        color: white;
    }
    
    .summary-section-bottom .summary-item:last-of-type {
        border-bottom: none;
    }
    
    .summary-section-bottom .summary-divider {
        height: 1px;
        background: rgba(255,255,255,0.3);
        margin: 1rem 0;
    }
    
    .summary-section-bottom .summary-total {
        background: rgba(255,255,255,0.2);
        border-radius: 12px;
        padding: 1.5rem;
        margin-top: 1.5rem;
        text-align: center;
    }
    
    .summary-section-bottom .summary-total .label {
        font-size: 0.9rem;
        opacity: 0.9;
        margin-bottom: 0.5rem;
    }
    
    .summary-section-bottom .summary-total .amount {
        font-size: 1.8rem; /* Reduced from 2.2rem to prevent wrapping */
        font-weight: 700;
        color: #F6E05E;
        margin: 0.5rem 0;
        white-space: nowrap; /* Keep amount on one line */
        letter-spacing: -0.5px; /* Tighter spacing for longer numbers */
        display: inline-block; /* Ensure it stays inline */
    }
    
    .summary-section-bottom .summary-total .rate {
        font-size: 0.85rem;
        opacity: 0.8;
    }
    
    .summary-section-bottom .donate-btn {
        display: block;
        width: 100%;
        padding: 1.25rem;
        background: linear-gradient(135deg, #D4AF37 0%, #B8860B 100%);
        color: #1A202C;
        font-size: 1.1rem;
        font-weight: 700;
        text-align: center;
        text-decoration: none;
        border-radius: 12px;
        margin-top: 1.5rem;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    }
    
    /* Remove any fixed positioning */
    .calculator-wrapper,
    .calculator-container,
    .calculator-main,
    .calc-card,
    .calc-card-body,
    .calc-card-content {
        position: static !important;
    }
    
    /* Make cards always visible */
    .calc-card {
        margin-bottom: 1.5rem !important;
        border: 2px solid #E2E8F0 !important;
        border-radius: 12px !important;
    }
    
    /* Keep toggle icon visible */
    .calc-card-header .toggle-icon {
        display: flex !important;
    }
    
    /* Add padding to bottom for sidebar space */
    .calculator-main {
        padding-bottom: 200px !important; /* Space for fixed sidebar */
    }
    
    /* Make card headers clearly tappable */
    .calc-card-header {
        cursor: pointer !important;
        -webkit-tap-highlight-color: rgba(107, 70, 193, 0.2) !important;
    }
    
    /* Fix card header subtotal wrapping on mobile */
    .calc-card-header .subtotal {
        font-size: 0.9rem !important; /* Smaller to prevent wrapping */
        min-width: 80px; /* Ensure enough space */
        white-space: nowrap !important;
        padding: 0.4rem 0.75rem !important; /* Tighter padding */
    }
    
    .calc-card-header .header-text h3 {
        font-size: 1rem !important; /* Slightly smaller on mobile */
    }
    
    .calc-card-header .header-text span {
        font-size: 0.8rem !important;
    }
    
    
    /* ===== MOBILE NAVBAR FIX ===== */
    
    /* Make toggler icon WHITE (visible on purple background) */
    .navbar-toggler {
        border-color: rgba(255,255,255,0.3) !important;
    }
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }
    
    /* Show the collapsed menu when .show class is present */
    .navbar-collapse.show {
        display: block !important;
    }
    
    /* Style the mobile menu dropdown */
    .navbar-collapse.show .navbar-nav {
        flex-direction: column;
        padding: 1rem 0;
    }
    
    .navbar-collapse.show .nav-link {
        padding: 0.75rem 1rem !important;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    
    /* Fix dropdown menus inside mobile nav - override position: absolute from inline styles */
    .navbar-collapse.show .dropdown-menu {
        position: static !important;
        float: none !important;
        background: rgba(0,0,0,0.2) !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
    }
    
    .navbar-collapse.show .dropdown-menu.show {
        display: block !important;
    }
    
    .navbar-collapse.show .dropdown-item {
        padding: 0.5rem 1.5rem !important;
        color: rgba(255,255,255,0.85) !important;
        font-size: 0.9rem !important;
    }
    
    .navbar-collapse.show .dropdown-item:hover {
        background: rgba(255,255,255,0.1) !important;
        color: #fff !important;
    }
    
    .navbar-collapse.show .dropdown-header {
        color: #ffc107 !important;
        padding: 0.5rem 1.5rem !important;
    }
    /* Ensure no overlays */
    * {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
    }
}