/* =========================================================
 * LOCATION MAP PRO
 * ========================================================= */


/* =========================================================
 * CSS VARIABLES
 * ========================================================= */

:root {

    --lmp-btn-bg: #1a73e8;

    --lmp-btn-color: #ffffff;

}


/* =========================================================
 * MAIN WRAPPER
 * ========================================================= */

.lmp-wrap {

    display: flex;

    flex-direction: column;

    gap: 16px;

    background: #f7f8fa;

    padding: 16px;

    font-family: Arial, sans-serif;

}


/* =========================================================
 * SEARCH BAR
 * ========================================================= */

.lmp-search-bar {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 16px;

    background: #ffffff;

    padding: 12px;

    border-radius: 10px;

    box-shadow:
        0 2px 10px rgba(0,0,0,0.05);

    align-items: flex-end;

}


/* =========================================================
 * SEARCH GROUP
 * ========================================================= */

.lmp-search-group {

    display: flex;

    flex-direction: column;

    flex: 1 1 auto;

    min-width: 140px;

}


.lmp-search-group label {

    font-size: 12px;

    color: #555555;

    margin-bottom: 4px;

    white-space: nowrap;

}


.lmp-search-group input,
.lmp-search-group select {

    padding: 10px 12px;

    border: 1px solid #dddddd;

    border-radius: 6px;

    font-size: 14px;

    width: 100%;

    box-sizing: border-box;

}


/* =========================================================
 * SEARCH BUTTON
 * ========================================================= */

.lmp-search-btn {

    padding: 10px 16px;

    background: var(--lmp-btn-bg);

    color: var(--lmp-btn-color) !important;

    border: none;

    border-radius: 6px;

    cursor: pointer;

    font-weight: 500;

    flex: 0 0 auto;

    white-space: nowrap;

    font-family: inherit;

}


.lmp-search-btn:hover {

    opacity: .9;

    background: var(--lmp-btn-bg);

    transform: translateY(-1px);

}


/* =========================================================
 * BOTTOM LAYOUT
 * ========================================================= */

.lmp-bottom {

    display: flex;

    flex-direction: column;

    gap: 16px;

}


/* =========================================================
 * SIDEBAR
 * ========================================================= */

.lmp-sidebar {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 12px;

    overflow: auto;

    max-height: 500px;

}


/* =========================================================
 * MAP WRAPPER
 * ========================================================= */

.lmp-map-wrapper {

    position: relative;

    width: 100%;

}


/* =========================================================
 * MAP
 * ========================================================= */

.lmp-map {

    width: 100%;

    height: 500px;

    border-radius: 10px;

    box-shadow:
        0 2px 10px rgba(0,0,0,0.08);

}


/* =========================================================
 * RESET MAP BUTTON
 * ========================================================= */

.lmp-reset-map {

    position: absolute;

    top: 15px;

    right: 15px;

    z-index: 20;

    padding: 9px 16px;

    background: var(--lmp-btn-bg);

    color: var(--lmp-btn-color) !important;

    border: none;

    border-radius: 6px;

    cursor: pointer;

    font-family: inherit;

    font-size: 14px;

    font-weight: 500;

    line-height: 1.4;

    box-shadow:
        0 2px 8px rgba(0,0,0,0.18);

    transition:
        opacity .15s ease,
        transform .15s ease;

}


.lmp-reset-map:hover {

    opacity: .9;

    background: var(--lmp-btn-bg);

    color: var(--lmp-btn-color) !important;

    transform: translateY(-1px);

}


/* =========================================================
 * LOCATION ITEM
 * ========================================================= */

.lmp-item {

    background: #ffffff;

    border-radius: 10px;

    padding: 14px;

    box-shadow:
        0 2px 10px rgba(0,0,0,0.06);

    cursor: default;

    transition:
        transform .15s ease,
        box-shadow .15s ease;

}


.lmp-item:hover {

    transform: translateY(-2px);

    box-shadow:
        0 6px 18px rgba(0,0,0,0.08);

}


/* =========================================================
 * LOCATION TITLE
 * ========================================================= */

.lmp-item strong {

    display: block;

    font-size: 16px;

    margin-bottom: 6px;

    color: #111111;

}


/* =========================================================
 * LOCATION LINKS
 * ========================================================= */

.lmp-item a {

    color: #1a73e8;

    text-decoration: none;

    font-size: 14px;

}


.lmp-item a:hover {

    text-decoration: underline;

}


/* =========================================================
 * ADDRESS
 * ========================================================= */

.lmp-address {

    cursor: pointer;

}


/* =========================================================
 * LOCATION LINE
 * ========================================================= */

.lmp-location-line {

    line-height: 1.5;

}


/* =========================================================
 * BUTTON WRAPPER
 * ========================================================= */

.lmp-item-buttons {

    display: flex;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;

    margin-top: 10px;

}


/* =========================================================
 * VISIT WEBSITE BUTTON
 * ========================================================= */

.lmp-item .lmp-btn {

    display: inline-block;

    margin-top: 0;

    padding: 8px 14px;

    background: var(--lmp-btn-bg);

    color: var(--lmp-btn-color) !important;

    border-radius: 6px;

    font-size: 14px;

    font-weight: 500;

    text-decoration: none;

    line-height: 1.4;

    transition:
        opacity .15s ease,
        transform .15s ease;

}


.lmp-item .lmp-btn:hover {

    opacity: .9;

    background: var(--lmp-btn-bg);

    color: var(--lmp-btn-color) !important;

    text-decoration: none;

    transform: translateY(-1px);

}


/* =========================================================
 * VIEW MAP BUTTON
 * ========================================================= */

.lmp-view-map-btn {

    display: inline-block;

    padding: 8px 14px;

    background: var(--lmp-btn-bg);

    color: var(--lmp-btn-color) !important;

    border: none;

    border-radius: 6px;

    cursor: pointer;

    font-family: inherit;

    font-size: 14px;

    font-weight: 500;

    line-height: 1.4;

    transition:
        opacity .15s ease,
        transform .15s ease;

}


.lmp-view-map-btn:hover {

    opacity: .9;

    background: var(--lmp-btn-bg);

    color: var(--lmp-btn-color) !important;

    transform: translateY(-1px);

}


/* =========================================================
 * NO RESULTS
 * ========================================================= */

.lmp-no-result {

    font-size: 14px;

    color: #555555;

    margin-bottom: 10px;

    font-style: italic;

}


/* =========================================================
 * NEAREST LOCATION
 * ========================================================= */

.lmp-item-nearest {

    border: 2px solid #cfeee0 !important;

    box-shadow:
        0 4px 12px rgba(255,87,51,0.2);

    background: #cfeee0 !important;

}


/* =========================================================
 * PAGINATION
 * ========================================================= */

.lmp-pager {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 4px;

    margin-top: 5px;

}


.lmp-pager button {

    padding: 8px 14px;

    background: var(--lmp-btn-bg);

    color: var(--lmp-btn-color) !important;

    border: none;

    border-radius: 6px;

    cursor: pointer;

    font-size: 14px;

    font-weight: 500;

    transition:
        opacity .15s ease,
        transform .15s ease;

}


.lmp-pager button:hover {

    opacity: .9;

    background: var(--lmp-btn-bg);

    transform: translateY(-1px);

}


.lmp-pager button:disabled {

    opacity: .6;

    cursor: default;

    transform: none;

}


/* =========================================================
 * GOOGLE MAP INFO WINDOW
 * ========================================================= */

.lmp-info-window {

    font-family: Arial, sans-serif;

}


.lmp-info-window a {

    color: #1a73e8;

    text-decoration: none;

}


.lmp-info-window a:hover {

    text-decoration: underline;

}


.lmp-info-window .lmp-btn {

    display: inline-block;

    margin-top: 10px;

    padding: 8px 14px;

    background: var(--lmp-btn-bg);

    color: var(--lmp-btn-color) !important;

    border-radius: 6px;

    text-decoration: none;

}


.lmp-info-window .lmp-btn:hover {

    text-decoration: none;

    opacity: .9;

}


/* =========================================================
 * MOBILE
 * ========================================================= */

@media (max-width: 767px) {

    .lmp-wrap {

        padding: 10px;

    }


    .lmp-search-group {

        flex: 1 1 100%;

        min-width: 100%;

    }


    .lmp-search-btn {

        width: 100%;

        flex: 1 1 100%;

    }


    .lmp-bottom {

        flex-direction: column;

    }


    .lmp-sidebar {

        width: 100%;

        max-height: none;

        overflow: visible;

    }


    .lmp-map-wrapper {

        width: 100%;

    }


    .lmp-map {

        width: 100%;

        height: 450px;

    }


    .lmp-reset-map {

        top: 10px;

        right: 10px;

        padding: 8px 12px;

        font-size: 13px;

    }


    .lmp-item-buttons {

        gap: 8px;

    }


    .lmp-item .lmp-btn,
    .lmp-view-map-btn {

        font-size: 13px;

        padding: 8px 12px;

    }

}


/* =========================================================
 * TABLET
 * ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

    .lmp-search-group {

        flex: 1 1 calc(50% - 12px);

        min-width: 200px;

    }


    .lmp-search-btn {

        flex: 1 1 100%;

    }


    .lmp-bottom {

        flex-direction: row;

    }


    .lmp-sidebar {

        width: 40%;

        max-height: 600px;

    }


    .lmp-map-wrapper {

        width: 60%;

    }


    .lmp-map {

        height: 600px;

    }

}


/* =========================================================
 * DESKTOP
 * ========================================================= */

@media (min-width: 1025px) {

    .lmp-bottom {

        flex-direction: row;

        gap: 16px;

    }


    .lmp-sidebar {

        width: 38%;

        max-height: 600px;

    }


    .lmp-map-wrapper {

        width: 62%;

    }


    .lmp-map {

        height: 600px;

    }

}