/* 
Mobile Pages - Misc (Loading, Results, Footer)
Loading screens, results page fixes, and footer repositioning
*/

/* ===== LOADING SCREEN MOBILE FIXES ===== */
@media (max-width: 768px) {
    .progress-dashboard {
        padding: 16px;
        margin: 12px;
    }
    
    .stage {
        padding: 12px;
    }
    
    .stage-title {
        font-size: 13px;
    }
    
    .stage-message {
        font-size: 12px;
    }
    
    .stage-status {
        font-size: 10px;
        padding: 2px 6px;
    }
}

@media (max-width: 480px) {
    .progress-dashboard {
        padding: 12px;
        margin: 8px;
    }
    
    .progress-header h3 {
        font-size: 1em;
    }
    
    .analysis-id {
        font-size: 10px;
    }
    
    .stage {
        padding: 10px;
    }
    
    .stage-title {
        font-size: 12px;
    }
    
    .stage-message {
        font-size: 11px;
    }
}


/* ===== RESULTS PAGE MOBILE FIXES ===== */
@media (max-width: 768px) {
    /* Property results layout adjustments */
    .results-container {
        padding: 12px;
    }
    
    .property-header {
        padding: 16px 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .property-title {
        font-size: 1.3em;
        line-height: 1.4;
    }
    
    /* Chart containers should be responsive */
    .chart-container {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .chart-container canvas,
    .chart-container svg {
        max-width: 100%;
        height: auto;
    }
    
    /* Parameters table responsive */
    .parameters-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .parameters-table table {
        min-width: 300px;
        font-size: 13px;
    }
    
    .parameters-table th,
    .parameters-table td {
        padding: 8px 6px;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    .results-container {
        padding: 8px;
    }
    
    .property-header {
        padding: 12px 16px;
    }
    
    .property-title {
        font-size: 1.2em;
    }
    
    .parameters-table table {
        font-size: 12px;
    }
    
    .parameters-table th,
    .parameters-table td {
        padding: 6px 4px;
    }
}


/* ===== PHASE 5: FOOTER REPOSITIONING & TOKEN CARD SIZING ===== */
@media (max-width: 768px) {
    /* Footer repositioning - move much lower on page */
    footer,
    .footer,
    .site-footer {
        margin-top: var(--hh-space-3xl) !important; /* Push footer down */
        padding-top: var(--hh-space-2xl) !important;
        padding-bottom: var(--hh-space-xl) !important;
        background: var(--hh-color-base-offWhite) !important;
        border-top: 1px solid var(--hh-color-borders-subtle) !important;
    }
    
    /* 3-line footer layout on mobile */
    .footer-content {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--hh-space-md) !important;
        text-align: center !important;
        max-width: 100% !important;
        padding: 0 var(--hh-space-md) !important;
    }
    
    /* Line 1: LLC information */
    .footer-line-1,
    .footer-copyright {
        font-size: var(--hh-type-small-size) !important;
        color: var(--hh-color-text-secondary) !important;
        margin: 0 !important;
        order: 1 !important;
    }
    
    /* Line 2: Terms and Privacy Policy links */
    .footer-line-2,
    .footer-links {
        display: flex !important;
        justify-content: center !important;
        gap: var(--hh-space-lg) !important;
        order: 2 !important;
        flex-wrap: wrap !important;
    }
    
    .footer-link {
        font-size: var(--hh-type-small-size) !important;
        color: var(--hh-color-brand-primary) !important;
        text-decoration: none !important;
        padding: var(--hh-space-xs) var(--hh-space-sm) !important;
        border-radius: var(--hh-radius-sm) !important;
        transition: all 0.2s ease !important;
        min-height: 44px !important; /* Touch target compliance */
        display: flex !important;
        align-items: center !important;
        touch-action: manipulation !important;
    }
    
    .footer-link:hover,
    .footer-link:focus {
        background: var(--hh-color-brand-primary-300) !important;
        color: var(--hh-color-text-primary) !important;
        text-decoration: none !important;
    }
    
    /* Line 3: Disclaimer text */
    .footer-line-3,
    .footer-disclaimer {
        font-size: var(--hh-type-small-size) !important;
        color: var(--hh-color-text-tertiary) !important;
        margin: 0 !important;
        order: 3 !important;
        line-height: var(--hh-type-small-lh) !important;
    }
    
    /* Token purchasing page - double card width */
    .pricing-grid .pricing-card {
        max-width: 340px !important; /* Double from ~170px */
        width: 100% !important;
        margin: 0 auto var(--hh-space-lg) !important;
    }
    
    /* Enhanced token card sizing */
    .pricing-card {
        padding: var(--hh-space-2xl) var(--hh-space-xl) !important; /* More generous padding */
        border: 2px solid var(--hh-color-borders-default) !important;
        border-radius: var(--hh-radius-lg) !important;
        box-shadow: var(--hh-shadow-md) !important;
        transition: all 0.3s ease !important;
    }
    
    .pricing-card:hover {
        box-shadow: var(--hh-shadow-lg) !important;
        transform: translateY(-2px) !important;
    }
    
    .pricing-card.popular {
        border-color: var(--hh-color-brand-primary) !important;
        box-shadow: var(--hh-shadow-lg) !important;
        transform: scale(1.02) !important;
    }
    
    /* Plan header in enlarged cards */
    .plan-header {
        text-align: center !important;
        margin-bottom: var(--hh-space-xl) !important;
    }
    
    .plan-name {
        font-size: var(--hh-type-h2-size) !important;
        font-weight: var(--hh-type-h2-weight) !important;
        margin-bottom: var(--hh-space-sm) !important;
    }
    
    .plan-description {
        font-size: var(--hh-type-body-size) !important;
        color: var(--hh-color-text-secondary) !important;
        margin-bottom: 0 !important;
    }
    
    /* Plan pricing in enlarged cards */
    .plan-price {
        text-align: center !important;
        margin: var(--hh-space-xl) 0 !important;
        padding: var(--hh-space-lg) 0 !important;
        border-top: 1px solid var(--hh-color-borders-subtle) !important;
        border-bottom: 1px solid var(--hh-color-borders-subtle) !important;
    }
    
    .price-amount {
        font-size: 56px !important; /* Larger price display */
        font-weight: var(--hh-type-h1-weight) !important;
        color: var(--hh-color-brand-primary) !important;
        line-height: 1 !important;
        margin-bottom: var(--hh-space-sm) !important;
    }
    
    .price-period {
        font-size: var(--hh-type-lg-size) !important;
        color: var(--hh-color-text-secondary) !important;
    }
    
    .tokens-included {
        font-size: var(--hh-type-lg-size) !important;
        font-weight: var(--hh-type-h4-weight) !important;
        color: var(--hh-color-text-primary) !important;
        margin-top: var(--hh-space-md) !important;
    }
    
    /* Plan features in enlarged cards */
    .plan-features {
        margin: var(--hh-space-xl) 0 !important;
    }
    
    .plan-features ul {
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }
    
    .plan-features li {
        padding: var(--hh-space-md) 0 !important;
        font-size: var(--hh-type-body-size) !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: var(--hh-space-md) !important;
        border-bottom: 1px solid var(--hh-color-borders-subtle) !important;
    }
    
    .plan-features li:last-child {
        border-bottom: none !important;
    }
    
    .plan-features li::before {
        content: "✓" !important;
        color: var(--hh-color-brand-sage) !important;
        font-weight: bold !important;
        font-size: var(--hh-type-lg-size) !important;
        flex-shrink: 0 !important;
        width: 24px !important;
        height: 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(129, 178, 154, 0.2) !important;
        border-radius: 50% !important;
    }
    
    /* Purchase buttons in enlarged cards */
    .purchase-btn {
        width: 100% !important;
        padding: var(--hh-space-xl) var(--hh-space-2xl) !important; /* More generous button */
        font-size: var(--hh-type-lg-size) !important;
        font-weight: var(--hh-type-h3-weight) !important;
        min-height: 64px !important; /* Larger touch target */
        border-radius: var(--hh-radius-md) !important;
        margin-top: var(--hh-space-xl) !important;
        transition: all 0.2s ease !important;
        touch-action: manipulation !important;
    }
    
    .purchase-btn:not(.current-plan) {
        background: var(--hh-color-brand-primary) !important;
        color: var(--hh-color-text-inverse) !important;
        border: none !important;
        box-shadow: var(--hh-shadow-md) !important;
    }
    
    .purchase-btn:not(.current-plan):hover {
        background: var(--hh-color-brand-primary-600) !important;
        box-shadow: var(--hh-shadow-lg) !important;
        transform: translateY(-2px) !important;
    }
    
    .purchase-btn:not(.current-plan):active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }
    
    /* Popular badge positioning for enlarged cards */
    .popular-badge {
        position: absolute !important;
        top: -16px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        background: var(--hh-color-brand-primary) !important;
        color: var(--hh-color-text-inverse) !important;
        padding: var(--hh-space-sm) var(--hh-space-lg) !important;
        border-radius: var(--hh-radius-full) !important;
        font-size: var(--hh-type-body-size) !important;
        font-weight: var(--hh-type-h4-weight) !important;
        box-shadow: var(--hh-shadow-md) !important;
        white-space: nowrap !important;
    }
}

/* Compact mobile footer and token cards */
@media (max-width: 480px) {
    /* More compact footer for small screens */
    footer,
    .footer,
    .site-footer {
        margin-top: var(--hh-space-2xl) !important;
        padding-top: var(--hh-space-xl) !important;
        padding-bottom: var(--hh-space-lg) !important;
    }
    
    .footer-content {
        gap: var(--hh-space-sm) !important;
        padding: 0 var(--hh-space-sm) !important;
    }
    
    .footer-line-1,
    .footer-copyright,
    .footer-line-3,
    .footer-disclaimer {
        font-size: var(--hh-type-helper-size) !important;
    }
    
    .footer-line-2,
    .footer-links {
        gap: var(--hh-space-md) !important;
    }
    
    .footer-link {
        font-size: var(--hh-type-helper-size) !important;
        min-height: 40px !important;
    }
    
    /* Compact token cards for small screens */
    .pricing-grid .pricing-card {
        max-width: 300px !important;
    }
    
    .pricing-card {
        padding: var(--hh-space-xl) var(--hh-space-lg) !important;
    }
    
    .plan-name {
        font-size: var(--hh-type-h3-size) !important;
    }
    
    .price-amount {
        font-size: 48px !important;
    }
    
    .price-period,
    .tokens-included {
        font-size: var(--hh-type-body-size) !important;
    }
    
    .plan-features li {
        font-size: var(--hh-type-small-size) !important;
        padding: var(--hh-space-sm) 0 !important;
    }
    
    .purchase-btn {
        padding: var(--hh-space-lg) var(--hh-space-xl) !important;
        font-size: var(--hh-type-body-size) !important;
        min-height: 56px !important;
    }
    
    .popular-badge {
        top: -12px !important;
        font-size: var(--hh-type-small-size) !important;
        padding: var(--hh-space-xs) var(--hh-space-md) !important;
    }