/* MOBILE STYLES - Native App UI */
@media (max-width: 600px) {
    .p-modal { background: #fff; align-items: stretch; }
    .p-modal-content { width: 100%; height: 100vh; max-height: 100vh; border-radius: 0; }
    
    .hdr { padding: 15px 12px; border-bottom: 2px solid var(--p-navy); }
    .htitle h2 { font-size: 13px; }
    
    .stepper { padding: 12px 5px; }
    .si { min-width: 40px; }
    .sc { width: 22px; height: 22px; font-size: 10px; }
    .sl { display: none; }
    
    .fc-scrollable { 
        padding: 20px 12px; 
        -webkit-overflow-scrolling: touch;
    }
    
    .card { 
        padding: 20px 15px; 
        margin-bottom: 15px; 
        border-radius: 12px; 
        border: none;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        margin-top: 5px; /* Add margin to prevent cutoff */
    }.stitle { font-size: 13px; }
    
    .fi { padding: 14px; font-size: 16px; } /* Prevents auto-zoom on iOS */
    .ut { padding: 14px 18px; font-size: 14px; }
    
    .aab { padding: 20px; }
    .aav { font-size: 34px; }
    
    .comp-wrap { flex-direction: column; gap: 15px; align-items: center; }
    .compass-svg-container svg { width: 190px; height: 190px; } /* Larger compass */
    .dir-grid { width: 100% !important; grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; margin-top: 10px; }
    .db { padding: 15px 2px !important; font-size: 13px !important; border-radius: 12px !important; font-weight: 800 !important; border: 1.5px solid #eef2f7 !important; }  
    
    .gg { grid-template-columns: 1fr; gap: 10px; }
    .gc { padding: 15px; }
    
    .lg-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .lc { min-height: 85px; }
    
    .nav-fit { padding: 15px; position: sticky; bottom: 0; box-shadow: 0 -4px 15px rgba(0,0,0,0.05); }
    .btn-next, .btn-submit { flex: 1; padding: 15px; font-size: 15px; text-align: center; justify-content: center; }
    .btn-back { padding: 14px 20px; font-size: 14px; }
}