/* ── WhyWeRent Perfect Mobile CSS ── */

* { -webkit-tap-highlight-color: rgba(102,126,234,0.12); }
html { scroll-behavior: smooth; }
body { -webkit-text-size-adjust: 100%; overflow-x: hidden; }

/* ── Touch targets minimum 44px ── */
button, .btn, .back-btn, .btn-primary, .action-btn,
input[type="submit"], input[type="button"],
.cat-chip, .skill-chip, .filter-chip, .menu-item,
.tab-btn, .listing-btn, .toggle-btn, .quick-btn {
    min-height: 44px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* ── Inputs: 16px prevents iOS zoom ── */
input, select, textarea {
    font-size: 16px !important;
    width: 100%;
    box-sizing: border-box;
}

/* ── Language select compact ── */
#gw-lang-select {
    min-height: 32px !important;
    width: auto !important;
    padding: 5px 8px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
}

/* ── Stats: always 2-col on phones ── */
@media (max-width: 600px) {
    .stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ── Stat cards ── */
@media (max-width: 480px) {
    .stat-card { padding: 12px 8px !important; }
    .stat-number, .stat-num { font-size: 20px !important; }
    .stat-label { font-size: 10px !important; }
    .stat-icon { font-size: 16px !important; margin-bottom: 3px !important; }
}

/* ── Form inputs: good padding ── */
.field input, .field select, .field textarea,
.input-group input, .input-group select, .input-group textarea,
.form-section input, .form-section select, .form-section textarea {
    padding: 12px 14px !important;
    border-radius: 10px !important;
    min-height: 48px;
}

/* ── Cards ── */
.vehicle-card, .property-card, .job-card, .worker-card,
.form-card, .review-card, .form-box, .stat-card {
    border-radius: 14px !important;
}

@media (max-width: 480px) {
    .vehicle-card, .property-card, .job-card, .worker-card {
        padding: 12px !important;
    }
    .form-card { padding: 14px !important; }
}

/* ── Primary buttons ── */
.btn-primary, .submit-btn, .post-cta-btn, .empty-btn, .register-cta-btn {
    min-height: 48px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
}

/* ── Row-2 stacks on very small screens ── */
@media (max-width: 360px) {
    .row2 { grid-template-columns: 1fr !important; }
}

/* ── Action rows: full-width buttons on tiny screens ── */
@media (max-width: 380px) {
    .action-row, .success-btn-row {
        grid-template-columns: 1fr !important;
    }
}

/* ── Salary row: stack on mobile ── */
@media (max-width: 420px) {
    .salary-row { flex-direction: column !important; gap: 4px !important; }
    .salary { font-size: 16px !important; }
}

/* ── Modal: full-width on mobile ── */
@media (max-width: 640px) {
    .modal-content {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        min-height: 100dvh;
    }
    .modal-imgs img { height: 200px !important; }
    .close-btn {
        width: 40px !important;
        height: 40px !important;
        font-size: 20px !important;
    }
}

/* ── Post CTA boxes: stack on mobile ── */
@media (max-width: 480px) {
    .post-cta {
        flex-direction: column !important;
        text-align: center !important;
        gap: 10px !important;
    }
    .post-cta-btn { width: 100% !important; min-height: 44px !important; }
    .register-cta { flex-direction: column !important; text-align: center !important; }
    .register-cta-btn { width: 100% !important; }
}

/* ── Header: wrap gracefully on tiny screens ── */
@media (max-width: 360px) {
    .header-top, .header-row { flex-wrap: wrap !important; gap: 6px !important; }
    .logo, .header-title { font-size: 16px !important; }
}

/* ── Category grid: 2-col on very small screens ── */
@media (max-width: 360px) {
    .cat-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Image upload grid ── */
@media (max-width: 400px) {
    .image-upload-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ── Toggle grid (property types) ── */
@media (max-width: 400px) {
    .toggle-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ── OTP inputs ── */
.otp-input {
    width: 48px !important;
    height: 56px !important;
    font-size: 22px !important;
    border-radius: 12px !important;
}

/* ── Property / listing images ── */
@media (max-width: 480px) {
    .card-imgs { height: 180px !important; }
    .card-imgs img { height: 180px !important; }
}

/* ── Tables: scroll horizontally ── */
@media (max-width: 600px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
}

/* ── Scrollable chip bars ── */
.cat-bar, .skill-bar {
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}
.cat-bar::-webkit-scrollbar,
.skill-bar::-webkit-scrollbar { display: none; }

/* ── Chip sizes on mobile ── */
@media (max-width: 480px) {
    .skill-chip, .filter-chip, .cat-chip, .skill-tag {
        font-size: 12px !important;
        padding: 6px 11px !important;
    }
}

/* ── Chat bubbles ── */
@media (max-width: 480px) {
    .message-bubble { max-width: 88% !important; }
    .input-area { padding: 8px !important; }
}

/* ── Typography scaling ── */
@media (max-width: 400px) {
    h1 { font-size: 1.6rem !important; }
    h2 { font-size: 1.3rem !important; }
    h3 { font-size: 1.05rem !important; }
    .screen-title { font-size: 16px !important; }
}

/* ── Safe area bottom padding (notched phones) ── */
.container, .main-content {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
}

/* ── Prevent content overflow ── */
img, video { max-width: 100%; height: auto; }
.vehicle-images img, .card-imgs img {
    width: 100% !important;
    object-fit: cover !important;
}

/* ── Back button consistent sizing ── */
.back-btn {
    min-height: 36px !important;
    padding: 7px 14px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
}

/* ── Job salary row on mobile ── */
@media (max-width: 500px) {
    .card-top { flex-wrap: wrap !important; }
    .job-title { min-width: 0; }
}

/* ── Filters wrapping ── */
@media (max-width: 500px) {
    .filters-row, .filter-row {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .filter-select, .pincode-input {
        min-width: 0 !important;
        flex: 1 1 calc(50% - 4px) !important;
    }
    .search-btn { width: 100% !important; flex: none !important; }
}

/* ── Tab rows ── */
@media (max-width: 400px) {
    .tab-btn { font-size: 12px !important; padding: 8px 4px !important; }
}