/* =====================================================
   GLOBAL MOBILANPASSNING FÖR ANNONSLY
   Påverkar främst skärmar <= 768px
   Ingenting tas bort, vi bara staplar om layouten.
===================================================== */

@media (max-width: 768px) {

    /* --- Grundlayout --- */
    body {
    padding: 0 !important;
    margin: 0 auto;
}

    /* Boxar/kort/formulär får lite mindre padding på mobil */
    .box,
    .section-box,
    .card,
    form {
        padding: 12px !important;
        border-radius: 10px;
    }

    /* Behåll helbredd */
    img {
        max-width: 100%;
        height: auto;
    }

    /* --- Grid-layouts → 1 kolumn på mobil --- */

    /* Allmänna gridar med kort/listor */
    .grid {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* Filter-grids t.ex. på index/search/dashboard */
    .filter-grid,
    .form-grid {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* Dashboard-grids, mina annonser/favoriter */
    .container .grid,
    .section-box .grid {
        grid-template-columns: 1fr !important;
    }

    /* Snabbval på startsidan – 2–3 per rad istället för många små */
    .quick-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
    }
    .quick-item {
        width: 48%;
    }
    .quick-item img {
        width: 60px;
        height: 60px;
        padding: 10px;
    }

    /* --- Formulär & inputs --- */

    input,
    select,
    textarea {
        font-size: 15px;
        padding: 10px;
    }

    label {
        display: block;
        margin-top: 4px;
        margin-bottom: 4px;
        font-size: 14px;
    }

    /* Knappar – lättare att träffa på mobil */
    .btn,
    button,
    .card a.button {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
        margin-top: 8px;
    }

    /* --- Galleri på annonsdetalj (listing_detail) --- */

    .gallery-container {
        margin-bottom: 15px;
    }

    .main-img {
        max-height: 260px !important;
    }

    .thumb-container {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 6px;
    }

    .thumb {
        width: 80px;
        height: 80px;
        flex: 0 0 auto;
    }

    /* Pilar – lite större klickyta */
    .arrow {
        padding: 8px 12px;
        font-size: 18px;
    }

    /* Specifikationsruta – 1 kolumn i stället för flera */
    .specs-grid {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 6px;
    }

    /* --- Dashboard (min sida) --- */

    .container {
        padding: 10px !important;
    }

    h1 {
        font-size: 24px;
    }

    .section-box h2 {
        font-size: 20px;
    }

    /* --- Header / navigation (om header.php använder nav/ul/li) --- */

    header,
    .site-header {
        padding: 10px 0;
    }

    header nav ul,
    .site-header nav ul {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding-left: 0;
        margin: 0;
        list-style: none;
    }

    header nav ul li,
    .site-header nav ul li {
        margin: 0;
    }

    header nav a,
    .site-header nav a {
        display: inline-block;
        padding: 6px 10px;
    }
}