/* css/plan.css */

.form-container {
    max-width: 600px;
    margin: 40px auto;
    padding: 40px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.form-group { margin-bottom: 24px; }

.form-label {
    display: block; font-size: 13px; font-weight: 700;
    text-transform: uppercase; color: #64748b;
    margin-bottom: 8px; letter-spacing: 0.05em;
}

.form-input, .form-select {
    width: 100%; padding: 12px 16px;
    border-radius: 12px; border: 1px solid #cbd5e1;
    background: rgba(255, 255, 255, 0.8);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15px; color: #0f172a; outline: none;
    transition: all 0.2s ease;
}

.form-input:focus, .form-select:focus {
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    background: #fff;
}

/* Results Section (Hidden by default) */
#results {
    margin-top: 40px;
    animation: slideUp 0.5s ease;
}
@keyframes slideUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }

.result-card { text-align: center; padding: 30px; }
.big-number { font-size: 48px; font-weight: 800; color: #2563EB; line-height: 1; margin: 10px 0; }
.zone-badge { display: inline-block; padding: 6px 16px; border-radius: 99px; font-weight: 700; font-size: 14px; margin-bottom: 10px; }

/* css/plan.css - Add to the very bottom */

/* FORCE STACKING ON MOBILE & TABLETS */
@media (max-width: 900px) {
    .form-grid {
        grid-template-columns: 1fr !important; /* Forces 1 column */
        gap: 24px;
    }
    
    .result-card {
        margin-bottom: 12px; /* Adds breathing room between stacked cards */
    }
    
    .form-container {
        padding: 20px !important;
        margin-top: 10px;
    }
    
    .big-number {
        font-size: 42px; /* Slightly smaller font for mobile fitting */
    }
}