:root {
    --icon-url-green: url(https://mawagaza.com/wp-content/uploads/2025/01/location_GREEN.png);
    --icon-url-yellow: url(https://mawagaza.com/wp-content/uploads/2025/01/location_YELLOW.png);
    --icon-url-red: url(https://mawagaza.com/wp-content/uploads/2025/01/location_RED.png);
    --icon-url-gray: url(https://mawagaza.com/wp-content/uploads/2025/01/location_GRAY.png);
    --icon-url-orange: url(https://mawagaza.com/wp-content/uploads/2025/01/location_ORANGE.png);
}

.property-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.property-filters .filter-group {
    flex: 1 1 100px;
}

@media (min-width: 768px) {
    .property-filters .filter-group {
        flex: 0 0 auto;
    }
}

#property-map,
#property-map-single {
    width: 100%;
    height: 500px; /* Change this value to your desired height */
}

.property-single {
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.property-header {
    text-align: center;
    margin-bottom: 20px;
}

.property-title {
    font-size: 2em;
    margin-bottom: 10px;
}

.property-image-full img,
.property-single .property-image img {
    width: 100%;
    height: auto;
    max-height: 250px;
    object-fit: cover;
    margin-bottom: 20px;
    border-radius: 8px;
}

.property-single .property-details {
    margin-bottom: 20px;
}

.property-details h2,
.property-description h2,
.property-map h2 {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.property-details ul {
    list-style: none;
    padding: 0;
}

.property-details li,
.property-single .property-details p {
    margin-bottom: 5px;
}

.property-description,
.property-map {
    margin-bottom: 20px;
}

#property-edit-form {
    margin-top: 20px;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#property-edit-form h3 {
    grid-column: span 2;
    margin-bottom: 20px;
    font-size: 1.8em;
    color: #333;
}

#property-edit-form label {
    align-self: center;
    font-weight: bold;
    color: #555;
}

#property-edit-form select,
#property-edit-form input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
    color: #333;
}

#property-edit-message {
    grid-column: span 2;
    margin-top: 10px;
    color: green;
    font-size: 1em;
}

@media (min-width: 768px) {
    .property-single {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    .property-header,
    .property-details,
    .property-description,
    .property-map,
    .property-edit-form {
        flex: 1 1 100%;
    }

    .property-single .property-image {
        flex: 1 1 40%;
    }

    .property-single .property-details,
    .property-single .property-description {
        flex: 1 1 55%;
    }

    #property-edit-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    #property-edit-form label {
        grid-column: span 1;
    }

    #property-edit-form select,
    #property-edit-form input {
        grid-column: span 1;
    }

    #property-edit-form button {
        grid-column: span 2;
        justify-self: end;
    }
}

/* RTL Support */
html[lang="ar"] .property-filters,
html[lang="ar"] .property-single,
html[lang="ar"] .property-header,
html[lang="ar"] .property-details,
html[lang="ar"] .property-description,
html[lang="ar"] .property-map,
html[lang="ar"] .property-edit-form {
    direction: rtl;
    text-align: right;
}

/* Professional, unified button style for all plugin buttons */
.pmp-btn,
#filter-apply,
#property-edit-form button,
.view-property-button,
.property-map a.pmp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    background: #198454;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1.08em;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 8px rgba(25, 132, 84, 0.10), 0 1.5px 4px rgba(25, 132, 84, 0.13);
    cursor: pointer;
    transition: background 0.18s, box-shadow 0.18s, transform 0.12s;
    margin-top: 10px;
    outline: none;
    min-width: 120px;
    min-height: 44px;
    text-decoration: none;
    text-align: center;
    user-select: none;
    height: 44px; /* Ensure all buttons have the same height */
    line-height: 1.2;
}

.pmp-btn:active,
#filter-apply:active,
#property-edit-form button:active,
.view-property-button:active,
.property-map a.pmp-btn:active {
    background: #156b44;
    transform: scale(0.98);
}

.pmp-btn:hover,
#filter-apply:hover,
#property-edit-form button:hover,
.view-property-button:hover,
.pmp-btn:focus,
#filter-apply:focus,
#property-edit-form button:focus,
.view-property-button:focus,
.property-map a.pmp-btn:hover,
.property-map a.pmp-btn:focus {
    background: #156b44;
    box-shadow: 0 4px 16px rgba(25, 132, 84, 0.13), 0 2px 8px rgba(25, 132, 84, 0.13);
    color: #fff;
    outline: none;
}

/* Center buttons on property page (all screens) */
.property-single .pmp-btn,
.property-single #filter-apply,
.property-single #property-edit-form button,
.property-single .view-property-button,
.property-single .property-map a.pmp-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 600px) {
    .property-single .pmp-btn,
    .property-single #filter-apply,
    .property-single #property-edit-form button,
    .property-single .view-property-button,
    .property-single .property-map a.pmp-btn {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: center !important;
    }
}

.leaflet-container a {
    color: #fff;
}

.comment-image img {
    display: block;
    margin-top: 10px;
    max-width: 200px;
    max-height: 200px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(25,132,84,0.08);
}

#pmp-add-success-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

#pmp-add-success-modal-content {
    background: #fff;
    padding: 30px 20px;
    border-radius: 8px;
    max-width: 90vw;
    width: 350px;
    text-align: center;
    box-shadow: 0 2px 16px rgba(0,0,0,0.2);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

@media (max-width: 480px) {
    #pmp-add-success-modal-content {
        width: 95vw;
        padding: 18px 6vw;
        font-size: 1em;
    }
    #pmp-add-success-modal .pmp-btn,
    #pmp-view-property-btn {
        min-width: 90px;
        font-size: 1em;
        padding: 10px 0;
    }
}