/* Responsive layout for gradient controls */
@media (max-width: 1200px) {
    .wpsl-button-colors-section .wpsl-gradient-controls-ul {
        flex-wrap: wrap;
    }
    
    .wpsl-button-colors-section .wpsl-gradient-controls-ul li {
        flex: 0 0 calc(50% - 6px);
        min-width: 0;
    }
    
    #wpsl-general-section ul,
    #wpsl-header-section ul,
    #wpsl-listing-section ul,
    #wpsl-popup-section ul {
        flex-wrap: wrap;
    }
    
    #wpsl-general-section ul li,
    #wpsl-header-section ul li,
    #wpsl-listing-section ul li,
    #wpsl-popup-section ul li {
        flex: 0 0 calc(50% - 6px);
        min-width: 0;
    }
}

@media (max-width: 782px) {
    .wpsl-nav-wrap {
        padding: 1rem 0.88rem;
    }

    .wpsl-nav-wrap .wpsl-tab-full {
        display: none;
    }

    .wpsl-nav-wrap .wpsl-tab-short {
        display: inline;
    }

    .wpsl-nav-wrap a {
        padding: 4px 8px;
        min-height: auto;
        margin-inline-end: 8px;
    }

    .wpsl-nav-wrap a:hover,
    .wpsl-nav-wrap .wpsl-active-tab {
        background: transparent;
    }

    .wpsl-nav-wrap .wpsl-active-tab {
        text-decoration: underline;
    }

    .wpsl-settings #wpsl-appearance-preview .ui-tabs-nav {
        padding: 0;
    }

    #wpsl-content-wrap {
        padding: 0.7rem;
    }

    #wpsl-settings-form section h3 {
        padding: 10px 15px;
    }

    #wpsl-content-wrap section .inside {
        padding: 0 12px 15px;
    }

    .wpsl-button-colors-section .wpsl-gradient-controls-ul li,
    #wpsl-general-section ul li,
    #wpsl-header-section ul li,
    #wpsl-listing-section ul li,
    #wpsl-popup-section ul li {
        flex: 0 0 100%;
    }

    #wpsl-geocode-tabs.ui-tabs .ui-tabs-nav li a,
    #wpsl-theme-customization-tabs.ui-tabs .ui-tabs-nav li a {
        padding: 0.70em 0.44em;
    }

    #wpsl-settings-content form p label:first-child {
        max-width: none;
    }

    .wp-core-ui #wpsl-settings-form select, 
    .wp-admin #wpsl-settings-form.form-table select,
    #wpsl-settings-form textarea, 
    #wpsl-content-wrap input,
    #wpsl-settings-form input {
        font-size: 13px;
        line-height: 2.15384615;
    }

    #wpsl-settings-form .wpsl-verify-keys,
    #wpsl-settings-form .button,
    .wp-core-ui #wpsl-settings-form button {
        font-size: 13px;
        line-height: 2.15384615;
        min-height: 30px;
    }

    #wpsl-markers input[type="radio"] {
        height: 16px;
        width: 16px;
    }

    #wpsl-markers input[type="radio"]::before {
        width: 6px;
        height: 6px;
        margin: 4px 0 0 4px;
    }

    .wpsl-field-item li, 
    #wpsl-groups-header li, 
    #wpsl-fields-header li {
        width:20%;
    }

    .wpsl-fields-manager-options select,
    .wpsl-fields-manager-options .button {
        vertical-align: top;
    }

    .wpsl-fields-manager-options select {
        min-height: 38px;
    }

    .wpsl-marker-cluster-style {
        gap: 10px;
    }

    .wpsl-marker-cluster-style img {
        max-width: 100%;
        height: auto;
    }

    .wpsl-template-details p:first-child {
        margin-bottom: 0;
    }

    .wpsl-import-export-settings .wpsl-grid-wrap {
        display: block;
    }

    .wpsl-import-export-settings .wpsl-grid-item {
        padding: 20px 20px 3px 20px;
        margin-bottom: 20px;
    }

    .wpsl-system-status .submit {
        margin-bottom: 0;
        padding-bottom: 12px;
    }
}

@media (max-width: 600px) {
    #wpsl-mapbox-styles .wpsl-force-flex,
    #wpsl-mapbox-styles .wpsl-force-flex label:first-child {
        display: block;
    }

    #wpsl-mapbox-styles .wpsl-force-flex label:first-child .wpsl-info {
        position: relative;
        margin-inline-start: 5px;
    }
}