/* Additional Mobile Fixes for IfOnly.ai */

/* ========================================
   GLOBAL MOBILE FIXES
   ======================================== */

@media (max-width: 768px) {
    /* Prevent all horizontal overflow */
    * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Fix container widths */
    .container,
    .container-fluid,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl {
        width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Fix Bootstrap row gutters */
    .row {
        margin-left: -7.5px !important;
        margin-right: -7.5px !important;
    }
    
    .col, [class*="col-"] {
        padding-left: 7.5px !important;
        padding-right: 7.5px !important;
    }
    
    /* No negative margins */
    .no-gutters {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .no-gutters > .col,
    .no-gutters > [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ========================================
   FALLBACK SLIDER STYLES
   ======================================== */

@media (max-width: 768px) {
    /* Fallback for range sliders when SatsSlider unavailable */
    input[type="range"] {
        width: 100% !important;
        height: 48px !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        background: transparent !important;
        cursor: pointer !important;
        margin: 10px 0 !important;
    }
    
    /* Track styles */
    input[type="range"]::-webkit-slider-track {
        width: 100% !important;
        height: 8px !important;
        background: #333 !important;
        border-radius: 4px !important;
        border: 1px solid #555 !important;
    }
    
    input[type="range"]::-moz-range-track {
        width: 100% !important;
        height: 8px !important;
        background: #333 !important;
        border-radius: 4px !important;
        border: 1px solid #555 !important;
    }
    
    /* Thumb styles */
    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none !important;
        appearance: none !important;
        width: 32px !important;
        height: 32px !important;
        background: #F7931A !important;
        border: 2px solid #fff !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        margin-top: -12px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    }
    
    input[type="range"]::-moz-range-thumb {
        width: 32px !important;
        height: 32px !important;
        background: #F7931A !important;
        border: 2px solid #fff !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
        border: none !important;
    }
    
    /* Active/focus states */
    input[type="range"]:focus {
        outline: none !important;
    }
    
    input[type="range"]:focus::-webkit-slider-thumb {
        box-shadow: 0 0 0 4px rgba(247, 147, 26, 0.2) !important;
    }
    
    input[type="range"]:active::-webkit-slider-thumb {
        transform: scale(1.1) !important;
    }
    
    /* Value display above slider */
    .slider-container {
        position: relative !important;
        padding: 20px 0 !important;
    }
    
    .slider-value {
        position: absolute !important;
        top: -10px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        background: #F7931A !important;
        color: white !important;
        padding: 4px 12px !important;
        border-radius: 20px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
    }
}

/* ========================================
   HERO SECTION MOBILE FIXES
   ======================================== */

@media (max-width: 768px) {
    /* Main hero section */
    .hero-section {
        padding: 30px 15px !important;
        text-align: center !important;
    }
    
    .hero-section h1 {
        font-size: 24px !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
        padding: 0 10px !important;
    }
    
    .hero-section .lead {
        font-size: 16px !important;
        line-height: 1.5 !important;
        margin-bottom: 20px !important;
        padding: 0 10px !important;
    }
    
    /* Fix the button container grid on mobile */
    .d-grid.gap-2.col-md-8.col-lg-6.mx-auto {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 10px !important;
        display: block !important;
        gap: 0 !important;
    }
    
    /* No sign-up badge */
    .badge {
        display: inline-block !important;
        margin: 0 auto 15px !important;
        font-size: 0.85rem !important;
    }
    
    /* Calculate button */
    .calculate-story-btn {
        width: 100% !important;
        max-width: 340px !important;
        margin: 0 auto !important;
        padding: 16px 20px !important;
        min-height: 60px !important;
        font-size: 1.1rem !important;
        display: block !important;
    }
    
    .calculate-story-btn .btn-text {
        font-size: 1.1rem !important;
        white-space: normal !important;
    }
    
    /* 3-Step Guide */
    .three-step-guide {
        margin-top: 25px !important;
        padding: 0 5px !important;
        width: 100% !important;
    }
    
    .three-step-guide .row {
        margin: 0 !important;
    }
    
    .three-step-guide .col-4 {
        padding: 0 5px !important;
    }
    
    .step-item {
        min-height: 100px !important;
        padding: 5px !important;
    }
    
    .step-icon {
        font-size: 1.2rem !important;
        height: 32px !important;
        margin-bottom: 5px !important;
    }
    
    .step-item small {
        font-size: 0.7rem !important;
        line-height: 1.1 !important;
    }
    
    .step-item .fw-semibold {
        font-size: 0.75rem !important;
    }
}

/* ========================================
   EXAMPLE STORIES GRID
   ======================================== */

@media (max-width: 768px) {
    /* Example stories container */
    #examples-section {
        padding: 20px 10px !important;
    }
    
    /* Story cards responsive grid */
    .story-cards-container {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 0 5px !important;
    }
    
    /* Individual story card */
    .story-card {
        width: 100% !important;
        margin: 0 !important;
        padding: 15px !important;
        border-radius: 12px !important;
    }
    
    .story-card .emoji {
        font-size: 32px !important;
    }
    
    .story-card .amount {
        font-size: 18px !important;
        font-weight: 600 !important;
    }
    
    .story-card .value {
        font-size: 22px !important;
        font-weight: 700 !important;
        color: #10b981 !important;
    }
    
    .story-card .date {
        font-size: 14px !important;
        color: #6b7280 !important;
    }
}

/* Two columns on slightly larger phones */
@media (min-width: 400px) and (max-width: 768px) {
    .story-cards-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ========================================
   FORM ELEMENTS MOBILE
   ======================================== */

@media (max-width: 768px) {
    /* Form groups */
    .form-group {
        margin-bottom: 20px !important;
    }
    
    /* Labels */
    .form-label {
        font-size: 16px !important;
        margin-bottom: 8px !important;
        font-weight: 600 !important;
    }
    
    /* All form inputs */
    .form-control,
    .form-select,
    input[type="text"],
    input[type="email"],
    input[type="number"],
    input[type="date"],
    input[type="tel"],
    textarea,
    select {
        width: 100% !important;
        min-height: 48px !important;
        padding: 12px 15px !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
        border-radius: 8px !important;
        border: 1px solid #374151 !important;
        background: #1f2937 !important;
        color: white !important;
    }
    
    /* Date input specific fix */
    input[type="date"] {
        display: block !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
    }
    
    /* Textarea */
    textarea {
        min-height: 100px !important;
        resize: vertical !important;
    }
}

/* ========================================
   IPHONE SE (320px) SPECIFIC FIXES
   ======================================== */

@media (max-width: 375px) {
    /* Calculate button smaller on tiny screens */
    .calculate-story-btn {
        max-width: 280px !important;
        padding: 14px 16px !important;
        min-height: 56px !important;
        font-size: 1rem !important;
    }
    
    .calculate-story-btn .btn-text {
        font-size: 0.95rem !important;
    }
    
    /* Smaller step items */
    .step-item {
        min-height: 90px !important;
    }
    
    .step-icon {
        font-size: 1rem !important;
        height: 28px !important;
    }
    
    .step-item small {
        font-size: 0.65rem !important;
    }
    
    .step-item .fw-semibold {
        font-size: 0.7rem !important;
    }
}

@media (max-width: 320px) {
    /* Ultra-compact container padding */
    .container,
    .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Even smaller button container */
    .d-grid.gap-2.col-md-8.col-lg-6.mx-auto {
        padding: 0 5px !important;
    }
    
    /* Smaller text sizes */
    h1 {
        font-size: 22px !important;
    }
    
    h2 {
        font-size: 18px !important;
    }
    
    h3 {
        font-size: 16px !important;
    }
    
    p, .lead {
        font-size: 14px !important;
    }
    
    /* More compact calculate button */
    .calculate-story-btn {
        max-width: 260px !important;
        padding: 12px 14px !important;
        min-height: 52px !important;
        font-size: 0.95rem !important;
    }
    
    .calculate-story-btn .btn-text {
        font-size: 0.9rem !important;
    }
    
    /* No sign-up badge smaller */
    .badge {
        font-size: 0.75rem !important;
        padding: 6px 12px !important;
    }
    
    /* More compact 3-step guide */
    .three-step-guide {
        margin-top: 20px !important;
        padding: 0 !important;
    }
    
    .three-step-guide .col-4 {
        padding: 0 3px !important;
    }
    
    .step-item {
        min-height: 85px !important;
        padding: 3px !important;
    }
    
    .step-icon {
        font-size: 0.9rem !important;
        height: 24px !important;
        margin-bottom: 3px !important;
    }
    
    .step-item small {
        font-size: 0.6rem !important;
    }
    
    .step-item .fw-semibold {
        font-size: 0.65rem !important;
    }
    
    /* Compact buttons */
    .btn {
        padding: 10px 15px !important;
        font-size: 14px !important;
    }
    
    .btn-lg {
        padding: 12px 20px !important;
        font-size: 15px !important;
    }
    
    /* Compact form inputs */
    .form-control,
    input,
    select {
        min-height: 44px !important;
        padding: 10px 12px !important;
        font-size: 16px !important; /* Keep 16px to prevent zoom */
    }
    
    /* Expense grid 2 columns max */
    .expense-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }
    
    /* Story cards single column */
    .story-cards-container {
        grid-template-columns: 1fr !important;
    }
}

/* ========================================
   BITCOIN PRICE TICKER MOBILE
   ======================================== */

@media (max-width: 768px) {
    .bitcoin-ticker,
    .btc-price-container {
        width: calc(100% - 20px) !important;
        margin: 10px auto !important;
        padding: 10px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
    }
    
    .btc-price {
        font-size: 16px !important;
        font-weight: 700 !important;
    }
    
    .btc-change {
        font-size: 13px !important;
    }
    
    .market-cap {
        font-size: 12px !important;
        width: 100% !important;
        text-align: center !important;
        margin-top: 5px !important;
    }
}

/* ========================================
   NAVIGATION BAR MOBILE
   ======================================== */

@media (max-width: 768px) {
    /* Navbar adjustments */
    .navbar {
        padding: 10px 15px !important;
    }
    
    .navbar-brand {
        font-size: 18px !important;
    }
    
    .navbar-toggler {
        padding: 4px 8px !important;
        font-size: 18px !important;
    }
    
    /* Mobile menu */
    .navbar-collapse {
        background: #111827 !important;
        margin: 10px -15px 0 !important;
        padding: 15px !important;
    }
    
    .navbar-nav .nav-link {
        padding: 10px 15px !important;
        font-size: 16px !important;
    }
}

/* ========================================
   FOOTER MOBILE
   ======================================== */

@media (max-width: 768px) {
    footer {
        padding: 30px 15px !important;
        text-align: center !important;
    }
    
    footer .row {
        margin: 0 !important;
    }
    
    footer .col-md-4 {
        margin-bottom: 20px !important;
    }
    
    footer h5 {
        font-size: 16px !important;
        margin-bottom: 10px !important;
    }
    
    footer p,
    footer a {
        font-size: 14px !important;
    }
    
    footer .social-links {
        justify-content: center !important;
        margin-top: 15px !important;
    }
}

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

@media (max-width: 768px) {
    /* Hide on mobile */
    .mobile-hide {
        display: none !important;
    }
    
    /* Show on mobile only */
    .mobile-only {
        display: block !important;
    }
    
    /* Text alignment */
    .mobile-text-center {
        text-align: center !important;
    }
    
    /* Spacing utilities */
    .mobile-mt-3 {
        margin-top: 1rem !important;
    }
    
    .mobile-mb-3 {
        margin-bottom: 1rem !important;
    }
    
    .mobile-p-2 {
        padding: 0.5rem !important;
    }
}