@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500&display=swap');

.sp-store-locator-container {
    max-width: 100%;
    margin: 20px auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.sp-store-locator-search {
    margin-bottom: 20px;
    position: relative;
    max-width: 400px;
    margin-right: auto;
    margin-left: auto;
}

.sp-store-locator-search::after {
    content: '';
    position: absolute;
    right: 27px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23333333"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>') center no-repeat;
    background-size: contain;
}

.sp-store-locator-search::before {
    content: '';
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 25px;
    background: #333333;
}

.sp-store-search-input {
    width: 100%;
    padding: 12px 60px 12px 20px;
    border: 2px solid #333333!important;
    border-radius: 50px !important;
    -webkit-border-radius: 50px !important;
    -moz-border-radius: 50px !important;
    font-size: 16px;
    text-align: right;
    outline: none;
    
    background: #fff;
    direction: rtl;
    text-indent: 120px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.sp-store-search-input:focus {
    border-color: #333333;
    border-radius: 50px !important;
    -webkit-border-radius: 50px !important;
    -moz-border-radius: 50px !important;
}

.sp-store-search-input::placeholder {
    color: #999;
    text-align: right;
    text-indent: 120px;
}

.sp-store-locator-table-container {
    overflow-x: auto;
}

.sp-store-locator-table thead {
    border-bottom: 3px solid #333333;
    margin-bottom: 5px;
}

.sp-store-locator-table thead tr {
    margin-bottom: 5px;
}

.sp-store-locator-table tbody {
    margin-top: 5px;
}

.sp-store-locator-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 5px;
    background: #fff;
    direction: rtl;
}

.sp-store-locator-table th {
    background: #B5A642;
    color: white;
    padding: 12px;
    text-align: right;
    font-weight: bold;
    border-right: 3px solid white;
    font-size: 20px;
    font-family: 'Heebo', sans-serif;
}

.sp-store-locator-table th:first-child {
    border-right: none;
}

#sp-store-locator-results td {
    font-family: 'Heebo', sans-serif;
    font-size: 16px;
    padding: 12px;
    border-bottom: 1px solid #ddd;
    text-align: right;
}

#sp-store-locator-results a {
    font-family: 'Heebo', sans-serif;
    font-size: 16px;
    color: inherit;
    text-decoration: none;
}

.sp-store-locator-table tr:hover {
    background-color: #f5f5f5;
}

.sp-store-locator-table a {
    color: inherit;
    text-decoration: none;
}

.sp-store-locator-table a:hover {
    text-decoration: underline;
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .sp-store-locator-table {
        display: block;
        width: 100%;
    }

    .sp-store-locator-table thead {
        display: none; /* Hide original headers on mobile */
    }

    .sp-store-locator-table tbody,
    .sp-store-locator-table tr,
    .sp-store-locator-table td {
        display: block;
        width: 100%;
    }

    .sp-store-locator-table tr {
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 10px;
        background: #fff;
    }

    .sp-store-locator-table td {
        text-align: right;
        padding: 8px 10px;
        position: relative;
        border-bottom: 1px solid #eee;
    }

    .sp-store-locator-table td:last-child {
        border-bottom: none;
    }

    /* Remove labels before content */
    .sp-store-locator-table td::before {
        display: none;
    }

    /* Adjust search input for mobile */
    .sp-store-locator-search {
        padding: 0 15px;
    }

    .sp-store-search-input {
        font-size: 14px;
        padding: 10px 45px 10px 15px;
    }

    .sp-store-locator-search::before {
        height: 20px;
    }
}

/* Remove data labels */
.sp-store-locator-table td[data-label="עיר"]::before,
.sp-store-locator-table td[data-label="שם החנות"]::before,
.sp-store-locator-table td[data-label="כתובת"]::before,
.sp-store-locator-table td[data-label="טלפון"]::before {
    content: none;
}

.store-address-link {
    color: #333333;
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-block;
    position: relative;
}

.store-address-link:hover {
    color: #B5A642;
}

.store-address-link::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    vertical-align: middle;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23333333"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>') center no-repeat;
    background-size: contain;
    opacity: 0.7;
}

.store-address-link:hover::after {
    opacity: 1;
}

@media screen and (max-width: 768px) {
    .store-address-link::after {
        width: 14px;
        height: 14px;
    }
}