/* ============================================================
   Project: Carpyx Lab Reload
   File: ui-mobile-controls.css
   Scope: Mobile-only overrides for cartographic controls
   ============================================================ */

@media (max-width: 768px) {

    /* ---------- Variables MOBILE uniquement ---------- */
    :root {
        --carpyx-map-control-gap: 8px;
        --carpyx-map-text-size: 16px;
    }

    /* ---------- Toggle button ---------- */
    .baselayers-toggle {
        padding: 14px;
    }

    .baselayers-toggle i {
        font-size: 20px;
    }

    /* ---------- Panel ---------- */
    .baselayers-content {
        font-size: var(--carpyx-map-text-size);
    }

    /* ---------- Items ---------- */
    .baselayer-item {
        min-height: 52px;
        padding: 8px 14px;
        gap: 10px;
        margin: 0;
    }

    .baselayer-item+.baselayer-item {
        margin-top: 6px;
    }

    .baselayer-item .label {
        font-size: var(--carpyx-map-text-size);
    }

    .baselayer-item .info {
        font-size: 18px;
    }

}

/* ============================================================
   Mobile tooltip behaviour (tap)
   ============================================================ */

@media (max-width: 768px) {

    .baselayer-item .info {
        cursor: pointer;
    }

    /* Tooltip hidden by default on mobile */
    .baselayer-item::after {
        display: none;
    }

    /* Show tooltip only when explicitly opened */
    .baselayer-item.is-tooltip-open::after {
        display: block;
    }
}

/* ============================================================
   Carpyx carto controls — mobile fix
   ============================================================ */
@media (max-width: 768px) {

    .carto-controls {
        top: 64px;
        /* un peu plus compact */
        right: 10px;
        gap: 4px;
        /* cohérent avec desktop */
    }

    .carto-control-btn {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

}