/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.7.1781765211
Updated: 2026-06-18 09:46:51

*/

@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

:root {
    /* --- brand colors (added for reuse) --- */
    --brand-orange: #FF5600;
    --brand-orange-hover: #FF5600;
    --brand-cyan: #00B9CC;
    --brand-teal-dark: #00536B;
    --brand-teal-alt: #005b73;
    --border-light: #00000014;
    --text-dark: #000;

    /* --- vars referenced elsewhere in this stylesheet but not previously defined --- */
    --text-muted: var(--text-light);
    --danger: var(--red);
    --card: var(--white);

    /* --- typography scale (added for reuse) --- */
    --font-family-base: 'Rubik', sans-serif;
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fs-2xs: 10px;
    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs-sm2: 13px;
    --fs-base: 14px;
    --fs-md: 15px;
    --fs-lg: 16px;
    --fs-xl: 18px;
    --fs-2xl: 20px;
    --fs-3xl: 22px;
    --fs-4xl: 26px;
    --fs-5xl: 28px;
    --fs-6xl: 32px;
    --fs-hero: 44px;

    --orange: #E8622A;
    --teal: #1A7A8A;
    --teal-dark: #145F6D;
    --teal-light: #E8F4F6;
    --orange-light: #FDF0EA;
    --text: #000;
    --text-mid: #555;
    --text-light: #888;
    --border: #E0E0E0;
    --white: #fff;
    --bg: #F7F8FA;
    --green: #059A31;
    --red: #ff5600;
    --shadow: 0 2px 12px rgba(0,0,0,0.08);
    --radius: 10px;
    --nav-h: 60px;
    --filter-h: 112px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-base) !important;
}

body {
    font-family: var(--font-family-base) !important;
}

table caption+thead tr:first-child td, table caption+thead tr:first-child th, table colgroup+thead tr:first-child td, table colgroup+thead tr:first-child th, table thead:first-child tr:first-child td, table thead:first-child tr:first-child th {
    border-block-start: 1px solid var(--border-light) !important;
}

.cstm_workinghr_addrow button.addrow {
    background: var(--brand-orange);
    border: none !important;
    color: #FFF !important;
    width: 40px;
    height: 40px;
    border-radius: 50px;
    padding: 0px !important;
    margin: 0px !important;
}

.cs-waze-icon span.cs-pop-info-badge {
    display: flex !important;
    background: #33CCFF;
}

.heading-btn-main {
    margin-top: 25px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}

.second_row-phone.phonerowshow {
    display: block;
    padding-top: 25px;
}

.phonenoadd tr {
    border-right: 1px solid var(--border-light);
    border-left: 1px solid var(--border-light);
    background: #FBFBFB;
}

.phonenoadd th {
    border: none;
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    color: var(--text-dark);
}

table td {
    border: 1px solid var(--border-light) !important;
    line-height: 1.5;
    padding: 15px;
    vertical-align: middle;
    background: #FFF !important;
}

button:focus {
    background: var(--brand-orange) !important;
}

button.reset-btn:focus {
    border: 1px solid #ff5d0a;
}

.community-text.right {
    padding-bottom: 25px;
}

.custom-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: var(--fs-base);
    color: #444;
    white-space: nowrap;
}
.listing-sticky-section select#location {
    width: 160px;
    padding: 5px 10px !important;
}

.custom-checkbox input {
    display: none;
}

.custom-checkbox .checkmark {
    width: 18px;
    height: 18px;
    border: 1.5px solid #1EB5F0;
    border-radius: 4px;
    background: #fff;
    position: relative;
    transition: .3s;
    flex-shrink: 0;
}

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 10px 10px 10px 10px;
    background-size: 14px;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='6' viewBox='0 0 12 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.00002 6C5.86053 6 5.72089 5.95113 5.61439 5.8535L0.159852 0.853527C-0.053284 0.658153 -0.053284 0.34178 0.159852 0.14653C0.372988 -0.0487185 0.718124 -0.0488435 0.931123 0.14653L6.00002 4.79301L11.0689 0.14653C11.2821 -0.0488435 11.6272 -0.0488435 11.8402 0.14653C12.0532 0.341904 12.0533 0.658278 11.8402 0.853527L6.38566 5.8535C6.27916 5.95113 6.13952 6 6.00002 6Z' fill='black' fill-opacity='0.5'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: left 5px center;
}

.custom-checkbox input:checked + .checkmark {
    background: #1EB5F0;
    border-color: #1EB5F0;
}

.custom-checkbox input:checked + .checkmark::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 3px;
    width: 5px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
span.star-icon {
    color: #ff5600;
}
.error-messagess.text-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    padding: 10px;
    border-radius: 5px;
    margin: 10px 0px;
}

.custom-checkbox .text {
    font-size: var(--fs-sm2);
    color: #555;
}

.popup-content div#cs-pop-descText {
    margin-bottom: 15px;
}
.banner-images img {
    width: 70px;
    height: auto;
}

.popup-content p {
    margin: 0px !important;
}
.popup-content {
    width: 100%;
    margin-bottom: 20px !important;
}
.cs-pop-inline-contact .cs-pop-contact-inner {
    padding: 10px !important;
    margin-bottom: 25px !important;
}
.img-overlay {
    height: 100% !important;
}

.img-overlay img {
    height: 100%;
    object-fit: cover;
}

a {
    font-family: var(--font-family-base) !important;
}

span {
    font-family: var(--font-family-base) !important;
}

p {
    font-family: var(--font-family-base) !important;
}

.counter-btn .elementor-button {
    position: relative;
}

.listings-header .field select#location {
    padding: 15px;
    height: 38px;
}

.community-search button:hover {
    background: unset !important;
}

.new-listing a.elementor-button.elementor-button-link.elementor-size-sm {
    width: 100%;
    max-width: fit-content;
    padding: 18px 25px !important;
}

.counter-btn a.elementor-button.elementor-button-link.elementor-size-sm {
    width: 100%;
    max-width: max-content;
    padding: 15px 25px !important;
}

.elementor-button-text {
    display: block;
    white-space: nowrap !important;
}

.popular-tags-box h2 {
    font-family: var(--font-family-base);
    font-weight: var(--fw-medium);
    font-size: var(--fs-2xl);
    text-align: right;
    color: var(--brand-teal-dark);
}

.popular-tags-box {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 15px 15px;
    margin-top: 40px;
}

.counter-btn .elementor-button:after {
    content: "3";
    position: absolute;
    top: 8px;
    left: 8px;
    width: 15px;
    height: 15px;
    background: var(--brand-cyan);
    color: #fff;
    border-radius: 50%;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-medium);
    display: flex;
    align-items: center;
    justify-content: center;
}

.community-search {
    max-width: 550px;
    position: relative;
    width: 100%;
}

.listings-section {
    padding: 0px 20px;
    flex: 1;
    min-width: 0;
}

.listing-buttons {
    display: flex;
    justify-content: space-between;
    padding-bottom: 16px;
    gap: 10px;
    position: relative;
}

.listing-buttons button#nextBtn, button#prevBtn, .listing-buttons .next-btn, .listing-buttons .prev-btn {
    border: 1px solid var(--brand-cyan);
    color: var(--brand-cyan);
    font-weight: var(--fw-medium);
    font-size: var(--fs-base);
    font-family: var(--font-family-base);
}

.container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

.community-search input::placeholder {
    color: #000000b5;
}

.community-content {
    width: 100%;
    min-height: 400px;
    background-image: url("http://hesed24.co.il/wp-content/uploads/2026/06/main-bg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    display: flex;
    background-color: var(--brand-teal-dark);
}

.left-banner {
    max-width: calc((100vw - 1350px) / 2);
    width: 100%;
    display: block;
    text-align: left;
    min-width: 150px;
    position: sticky;
    top: 10px;
    height: 100%;
}

.right-banner {
    max-width: calc((100vw - 1350px) / 2);
    width: 100%;
    min-width: 150px;
    position: sticky;
    top: 10px;
    height: 100%;
}

.thank-you-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-direction: row-reverse;
}

.thank-left {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.thank-text {
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    color: var(--brand-teal-alt);
    line-height: 1;
    margin-bottom: -10px;
    margin-right: 15px;
}

.listing-buttons button#nextBtn, button#prevBtn:active {
    background-color: unset;
}

.thank-count {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-direction: row-reverse;
}

.listing-buttons button#nextBtn, button#prevBtn:focus {
    background: unset !important;
}

.thank-count span {
    font-size: var(--fs-6xl);
    font-weight: var(--fw-medium);
    color: var(--brand-teal-alt);
    line-height: 1;
}

.heart-box {
    display: flex;
    align-items: center;
    position: relative;
    top: -15px;
}

.hand-icon {
    font-size: var(--fs-4xl);
    color: #222;
    position: absolute;
    left: -5px;
    top: 10px;
    z-index: 2;
}

.heart-box img {
    width: 70px;
    display: block;
}

.thank-right {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-direction: row-reverse;
}

.social-icons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.social-icons a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: .3s;
}

.social-icons a i {
    font-size: var(--fs-lg);
    color: #00b5d8;
}

.share-text {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-semibold);
    color: #111;
}

.community-content::before {
    content: "";
    position: absolute;
    inset: 0;
}

.listing-section-flex {
    display: flex;
}

.community-content .container {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    align-items: flex-end;
    gap: 20px;
}

main.listings-section .popular-tags-box {
    display: none;
}

.right .banner-content {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #FFF;
    padding: 20px;
    border-radius: 10px;
}

.banner-desc p {
    font-size: var(--fs-md) !important;
    line-height: 25px !important;
    font-weight: var(--fw-regular) !important;
}

.banner-images p {
    margin: 0px !important;
    font-size: var(--fs-base) !important;
    line-height: 22px !important;
    font-weight: var(--fw-regular) !important;
}

.mobile-tabs {
    display: none;
}

.community-text {
    width: 100%;
    padding-bottom: 100px;
    padding-top: 30px;
}

.community-text h2 {
    font-size: var(--fs-hero);
    font-weight: var(--fw-medium);
    line-height: 48px;
    color: var(--brand-teal-dark);
    margin: 0 0 15px;
    max-width: 456px;
}

.community-text h2 span {
    color: var(--brand-orange);
    font-weight: var(--fw-medium);
}

.community-text p {
    font-size: var(--fs-3xl);
    line-height: 28px;
    color: var(--text-dark);
    margin-bottom: 25px;
    font-weight: var(--fw-light);
    max-width: 456px;
}

.community-search input {
    width: 100%;
    height: 58px;
    border: 1px solid #0000000F !important;
    border-radius: 10px;
    background: #fff;
    padding: 0 20px 0 20px;
    font-size: var(--fs-base);
    color: var(--text-dark) !important;
    font-family: var(--font-family-base);
    font-weight: var(--fw-regular);
}

.community-search button {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 55px;
    height: 55px;
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.community-search button svg {
    width: 18px;
    height: 18px;
}

.mf-wrapper {
    max-width: 1300px;
    margin: auto;
    background: #FBFBFB;
    border-radius: 12px;
    padding: 15px;
    border: 1px solid #0000000F;
}

.page-id-329 .mf-wrapper {
    max-width: 1300px;
    margin: auto;
    background: #FBFBFB;
    border-radius: 12px;
    padding: 15px;
    border: 1px solid #0000000F;
    margin-top: 45px;
    margin-bottom: 45px;
}

.mf-categories {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    flex-direction: row-reverse;
}

.mf-categories::-webkit-scrollbar {
    display: none;
}

.mf-category {
    min-width: 109px;
    background: #fff;
    padding: 14px 10px;
    text-align: center;
    cursor: pointer;
    transition: .3s;
    flex-shrink: 0;
    border: 1px solid #0000000F;
    border-radius: 10px;
}

span.badge-status.open.grey {
    background: #7D8491;
}

.mf-category:hover {
    border-color: var(--primary);
}

.mf-category.active {
    background: var(--primary-light);
    border-color: var(--primary);
}

.mf-icon {
    width: 34px;
    height: 34px;
    margin: auto;
    margin-bottom: 10px;
}

.mf-icon svg {
    width: 100%;
    height: 100%;
    stroke: var(--primary);
    fill: none;
    stroke-width: 1.8;
}

.mf-category p {
    font-size: var(--fs-base);
    color: var(--text-dark);
    line-height: 1.3;
    width: 100%;
    max-width: 100px;
    font-weight: var(--fw-light);
    margin: 0px;
}

.mf-filter-row {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    flex-direction: row-reverse;
}

.mf-reset-btn {
    height: 50px;
    border: 1px solid #7fd4ff;
    background: #fff;
    color: #4c95b9;
    border-radius: 8px;
    cursor: pointer;
}

.mf-field {
    height: 50px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    cursor: pointer;
    width: 100%;
}

.mf-field svg {
    width: 18px;
    height: 18px;
    stroke: var(--primary);
    fill: none;
    stroke-width: 2;
}

.mf-filter-dropdown {
    position: relative;
    width: 100%;
}

.mf-dropdown-menu {
    position: absolute;
    top: 58px;
    left: 0;
    width: 240px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
    padding: 15px;
    display: none;
    z-index: 100;
}

.mf-dropdown-menu.active {
    display: block;
}

.mf-dropdown-menu label {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    font-size: var(--fs-base);
    cursor: pointer;
}

.mf-content {
    display: grid;
    grid-template-columns: 1fr 450px;
    gap: 25px;
    margin-top: 25px;
}

.mf-sidebar {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.mf-sidebar label {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: var(--fs-base);
}

.mf-ad {
    border-radius: 10px;
    overflow: hidden;
}

.mf-ad img {
    width: 100%;
    display: block;
}

.filter-bar {
    width: 100%;
    border-radius: 12px;
    padding: 10px 0px 0px 0px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    margin-top: 20px;
}

.reset-btn {
    height: 50px;
    padding: 0 40px;
    border: 1px solid var(--brand-cyan);
    background: #fff;
    border-radius: 8px;
    color: #00bcd4;
    font-size: var(--fs-md);
    cursor: pointer;
    transition: .3s;
    font-family: var(--font-family-base);
}

.reset-btn:hover {
    background: var(--brand-cyan);
}

.field {
    position: relative;
    flex: 1;
    min-width: 220px;
}

.field input, .field select {
    width: 100%;
    height: 50px;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    padding: 0 45px 0 15px;
    outline: none;
    font-size: var(--fs-base);
    color: var(--text-dark);
    background: #fff;
}

.field select {
    appearance: none;
    cursor: pointer;
    width: 100%;
    height: 50px;
    padding: 0px 46px 0px 15px;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='6' viewBox='0 0 12 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.00002 6C5.86053 6 5.72089 5.95113 5.61439 5.8535L0.159852 0.853527C-0.053284 0.658153 -0.053284 0.34178 0.159852 0.14653C0.372988 -0.0487185 0.718124 -0.0488435 0.931123 0.14653L6.00002 4.79301L11.0689 0.14653C11.2821 -0.0488435 11.6272 -0.0488435 11.8402 0.14653C12.0532 0.341904 12.0533 0.658278 11.8402 0.853527L6.38566 5.8535C6.27916 5.95113 6.13952 6 6.00002 6Z' fill='black' fill-opacity='0.5'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center left 10px;
    background-size: 12px;
    font-family: var(--font-family-base);
}

.icon {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon svg {
    width: 18px;
    height: 18px;
    stroke: #ff7a45;
}

.category-bar-wrapper {
    position: sticky;
    top: var(--nav-h);
    z-index: 900;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.category-bar {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 10px 16px 6px;
    overflow-x: auto;
    scrollbar-width: none;
}

.category-bar::-webkit-scrollbar {
    display: none;
}

.cat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: var(--radius);
    transition: background 0.15s;
}

.cat-item:hover, .cat-item.active {
    background: var(--orange-light);
}

.cat-item .cat-icon {
    font-size: var(--fs-3xl);
    color: var(--orange);
}

.cat-item .cat-label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--text-mid);
    text-align: center;
    line-height: 1.3;
}

.cat-item.active .cat-label {
    color: var(--orange);
}

.filter-bar-wrapper {
    position: sticky;
    top: calc(var(--nav-h) + 70px);
    z-index: 800;
    background: var(--white);
}

.btn-reset {
    border: 1.5px solid var(--teal);
    color: var(--teal);
    background: var(--white);
    border-radius: 6px;
    padding: 6px 14px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
}

.filter-dropdown {
    display: flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: var(--fs-sm);
    color: var(--text-mid);
    cursor: pointer;
    background: var(--white);
    white-space: nowrap;
}

.filter-dropdown i {
    color: var(--orange);
}

.filter-search {
    flex: 1;
    min-width: 160px;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 7px 12px;
    font-size: var(--fs-sm);
    outline: none;
    color: var(--text);
}

.filter-search::placeholder {
    color: var(--text-light);
}

.filter-search:focus {
    border-color: var(--teal);
}

.adv-filter-panel {
    display: none;
    background: var(--white);
    border: 1px solid var(--border);
    border-top: none;
    padding: 12px 20px;
    gap: 16px;
    flex-wrap: wrap;
    position: sticky;
    top: calc(var(--nav-h) + 110px);
    z-index: 700;
}

.adv-filter-panel.open {
    display: flex;
}

.adv-filter-panel label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--fs-sm);
    color: var(--text-mid);
    cursor: pointer;
}

.adv-filter-panel input[type=checkbox] {
    accent-color: var(--teal);
    width: 15px;
    height: 15px;
}

.ad-banner {
    background: #111;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px 16px;
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
}

.ad-banner-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 24px;
    width: 100%;
}

.ad-car-icon {
    font-size: 36px;
    color: #fff;
    opacity: 0.85;
}

.ad-text {
    color: #fff;
}

.ad-text .brand {
    font-size: var(--fs-xs);
    letter-spacing: 3px;
    opacity: 0.6;
    text-transform: uppercase;
}

.ad-text .headline {
    font-size: var(--fs-2xl);
    font-weight: 800;
    letter-spacing: 1px;
}

.ad-text .sub {
    font-size: var(--fs-xs);
    opacity: 0.7;
}

.content-wrapper {
    display: flex;
    gap: 5px;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    flex-direction: row-reverse;
}

.tag-row a {
    padding: 8px 5px;
    border: 1px solid #ddd;
    border-radius: 6px;
    text-decoration: none;
    color: var(--text-dark);
    background: #fff;
    font-size: var(--fs-base);
    white-space: nowrap;
    font-weight: var(--fw-regular);
}

.tag-row {
    display: flex;
    justify-content: right;
    gap: 5px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    flex-direction: row-reverse;
}

.map-section {
    width: 45%;
    flex-shrink: 0;
    position: sticky;
    top: 50px;
    height: 100%;
    margin-bottom: 50px;
}

.map-container {
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
}

.map-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #d4e8d0 0%, #c8dfe8 50%, #dce8d4 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.map-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,0.3) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.3) 1px, transparent 1px);
    background-size: 40px 40px;
}

.map-road-h {
    position: absolute;
    width: 70%;
    height: 4px;
    background: rgba(255,255,255,0.6);
    border-radius: 2px;
    top: 38%;
    left: 15%;
}

.map-road-h2 {
    position: absolute;
    width: 55%;
    height: 3px;
    background: rgba(255,255,255,0.5);
    border-radius: 2px;
    top: 60%;
    left: 10%;
}

.map-road-v {
    position: absolute;
    height: 65%;
    width: 4px;
    background: rgba(255,255,255,0.55);
    border-radius: 2px;
    left: 45%;
    top: 18%;
}

.map-pin {
    position: absolute;
    width: 32px;
    height: 32px;
    background: var(--orange);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: var(--fs-sm2);
    font-weight: var(--fw-bold);
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    border: 2px solid #fff;
    cursor: pointer;
    transition: transform 0.15s;
}

.map-pin:hover {
    transform: scale(1.15);
}

.map-pin:nth-child(1) {
    left: 22%;
    top: 42%;
}

.map-pin:nth-child(2) {
    left: 38%;
    top: 62%;
}

.map-pin:nth-child(3) {
    left: 65%;
    top: 32%;
}

.map-pin:nth-child(4) {
    left: 52%;
    top: 72%;
}

.map-pin:nth-child(5) {
    left: 58%;
    top: 52%;
}

.map-controls {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.map-ctrl-btn {
    width: 30px;
    height: 30px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    cursor: pointer;
    color: var(--text-mid);
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.map-top-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 6px;
}

.map-top-btn {
    width: 32px;
    height: 32px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-mid);
    font-size: var(--fs-base);
    box-shadow: var(--shadow);
}

.listings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 6px 0;
    flex-direction: row-reverse;
}

.sort-select {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm);
    color: var(--text-mid);
    cursor: pointer;
}

.listing-count {
    background: unset;
    color: var(--brand-orange);
    border-radius: 33px;
    padding: 5px 10px;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    border: 1px solid var(--brand-orange);
}

.listing-view-label {
    font-size: var(--fs-xl);
    font-weight: var(--fw-medium);
    color: var(--brand-teal-dark);
}

.listing-buttons button {
    position: relative;
}

.listing-buttons button#nextBtn::before {
    position: absolute;
    content: "";
    top: 13px;
    left: 5px;
    background-size: 40%;
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.29429 0.000172193C5.43186 -0.00307852 5.56695 0.039766 5.68078 0.122815C5.79462 0.205864 5.88154 0.325013 5.92946 0.46359C5.97739 0.602167 5.98393 0.753323 5.94819 0.896081C5.91245 1.03884 5.83619 1.16603 5.73002 1.26007L1.67913 4.9885L5.73002 8.71562C5.80346 8.77361 5.86497 8.84723 5.91069 8.93194C5.9564 9.01666 5.98535 9.11062 5.99571 9.20791C6.00607 9.3052 5.99762 9.40372 5.97089 9.49733C5.94416 9.59095 5.89973 9.67766 5.84038 9.75197C5.78103 9.82628 5.70803 9.88656 5.62597 9.92917C5.5439 9.97177 5.45453 9.9957 5.36346 9.99947C5.27238 10.0032 5.18156 9.98683 5.09668 9.95115C5.01181 9.91547 4.9347 9.86135 4.87019 9.79217L0.232292 5.52887C0.159459 5.46209 0.100974 5.37921 0.0608706 5.2858C0.0207672 5.19239 0 5.09071 0 4.98784C0 4.88497 0.0207672 4.7833 0.0608706 4.68989C0.100974 4.59648 0.159459 4.51351 0.232292 4.44674L4.87019 0.179338C4.98735 0.0675329 5.13763 0.00413327 5.29429 0.000172193Z' fill='%2300B9CC'/%3E%3C/svg%3E%0A");
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
}

.listing-buttons button:hover {
    background: #00b9cc0f;
    color: var(--brand-cyan) !important;
    box-shadow: 0px 10px 44px #ff560024;
}

.listing-buttons button#prevBtn::before {
    position: absolute;
    content: "";
    top: 13px;
    right: -5px;
    background-size: 40%;
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.705711 0.000172193C0.568144 -0.00307852 0.433053 0.039766 0.319218 0.122815C0.205383 0.205864 0.11846 0.325013 0.070536 0.46359C0.0226117 0.602167 0.0160665 0.753323 0.0518101 0.896081C0.0875538 1.03884 0.16381 1.16603 0.269978 1.26007L4.32087 4.9885L0.269978 8.71562C0.196536 8.77361 0.135031 8.84723 0.0893133 8.93194C0.0435956 9.01666 0.0146507 9.11062 0.00429086 9.20791C-0.00606902 9.3052 0.00237956 9.40372 0.0291074 9.49733C0.0558353 9.59095 0.100266 9.67766 0.159619 9.75197C0.218971 9.82628 0.291966 9.88656 0.374032 9.92917C0.456098 9.97177 0.545468 9.9957 0.636544 9.99947C0.72762 10.0032 0.81844 9.98683 0.903317 9.95115C0.988195 9.91547 1.0653 9.86135 1.12981 9.79217L5.76771 5.52887C5.84054 5.46209 5.89903 5.37921 5.93913 5.2858C5.97923 5.19239 6 5.09071 6 4.98784C6 4.88497 5.97923 4.7833 5.93913 4.68989C5.89903 4.59648 5.84054 4.51351 5.76771 4.44674L1.12981 0.179338C1.01265 0.0675329 0.862371 0.00413327 0.705711 0.000172193Z' fill='%2300B9CC'/%3E%3C/svg%3E%0A");
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
}

.listings-header .field {
    min-width: 100px !important;
    flex: none;
}

.listing-sticky-section {
    position: sticky;
    top: 0px;
    background: #FFF;
    box-shadow: 10px 10px 10px #cccccc00;
    z-index: 999;
    padding: 10px;
}

.listing-card {
    background: #FF560008;
    display: flex;
    gap: 0;
    cursor: pointer;
    flex-direction: row-reverse;
    padding: 10px 10px 10px 10px;
    border-bottom: 1px solid #DCE0E0;
}

.open-tag span.badge-status.open {
    position: absolute;
    top: 10px;
}

.listing-card:hover {
    box-shadow: var(--shadow);
    border-color: var(--teal);
}

.listing-card-body {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.listing-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-direction: row-reverse;
}

.listing-rank {
    font-size: var(--fs-sm2);
    font-weight: var(--fw-medium);
    color: var(--text-mid);
    min-width: 28px;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}

.listing-heart {
    color: var(--orange);
    font-size: var(--fs-sm2);
}

.listing-title {
    font-size: var(--fs-xl);
    font-weight: var(--fw-medium);
    color: var(--text-dark);
    flex: 1;
}

.badge-num {
    background: unset;
    color: var(--brand-orange);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    border: 1px solid #FF560080;
    line-height: 0;
}

.badge-status {
    padding: 6px 20px;
    border-radius: 20px 0px 0px 20px;
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
}

.listing-img {
    position: relative;
    width: 230px;
    height: unset !important;
}

.badge-status.open {
    background: var(--green);
    color: #fff;
}

.badge-status.closed {
    background: var(--red);
    color: #fff;
}

.listing-desc {
    font-size: var(--fs-md);
    color: var(--text-dark);
    line-height: 1.5;
    padding-left: 40px;
    font-family: var(--font-family-base);
}

.listing-category ul {
    display: flex;
    gap: 10px;
    list-style-type: none;
    margin: 0px;
    padding: 5px 0px;
    flex-wrap: wrap;
}

.listing-category li {
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    border: 1px solid #00000029;
    width: 100%;
    max-width: max-content;
    padding: 5px 15px;
    border-radius: 20px;
    color: var(--text-dark);
}

.location-icon {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    align-items: center;
}

.listing-meta span {
    font-size: var(--fs-base);
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-direction: row-reverse;
    font-weight: var(--fw-regular);
}

.filter-toggle-text {
    display: none;
    background: none;
    border: none;
    color: var(--brand-orange);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    padding: 10px 0;
    text-align: left;
    width: 100%;
}

@media (max-width: 768px) {
.community-text {
 padding-top: 30px;
    padding-bottom: 0px;
}
.panel {
    min-height: unset !important;
}

.profile-layout {
    grid-template-columns: 1fr!important;
}
.field {
    min-width: 100%;
    padding: 8px 0px;
}
    .cs-form-filed {
    display: grid !important;
}
        .custom-tooltip {
    min-width: 200px;
}
        .cstm-galley-phtop-add {
    width: 100%;
    height: auto;
}
        .top-btn-row {
    overflow: scroll;
}
        .phonenoadd tr {
    border-right: 1px solid var(--border-light);
    border-left: 1px solid var(--border-light);
    background: #FBFBFB;
    white-space: nowrap;
    overflow: scroll;
}
.phonerowshow .table {
    overflow: scroll;
}
.busingess-info-row-first {
    display: grid !important;
}

.cstm_workinghr_row {
    display: grid !important;
}
.provider-info-first-row {
    display: grid !important;
}
.provider-info-third-row {
    display: grid !important;
}
.listing-form-row {
    display: grid !important;
    gap: 20px;
}
.top-btn-row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between;
    flex-direction: column-reverse !important;
    gap:20px;
}

.cs-listing-page {
    padding: 25px 0px !important;
}
        
 .filter-toggle-text {
        display: block;
    }
    .mf-wrapper .filter-bar {
        display: none;
    }

    .mf-wrapper .filter-bar.filter-open {
        display: flex;            
        animation: filterFadeIn 0.3s ease;
    }
button#filterToggleBtn {
    background: var(--brand-orange);
    margin: 15px 0px 0px 0px;
    padding: 0px;
    font-size: 20px;
    display: block;
    text-align: center;
    padding: 5px;
    color: #FFF;
    font-family: var(--font-family-base);
    font-weight: 400;
}
    @keyframes filterFadeIn {
        from { opacity: 0; transform: translateY(-8px); }
        to   { opacity: 1; transform: translateY(0); }
    }
        
        .thank-you-wrapper {
    display:unset;

}
        .thank-right {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-direction: row-reverse;
    justify-content: center;
}

    .content-wrapper {
        display: block !important;
    }

  
            
.community-search input {
    padding: 0 10px 0 10px;
}
        .listings-section .cat.container {
    padding: 0px;
}
        .right-banner {
display: none;
}

.left-banner {
    display: none;
}
        .community-text p {
    font-size: 18px;
    line-height: 28px;
    max-width: 100%;
}
        .community-text h2 {
    font-size: 28px;
    line-height: 36px;
}
.community-search button {
    width: 50px;
    height: 50px;
    left: 0;
}

.community-search input {
    font-size: 13px;
}

.right .banner-content {
    flex-direction: column;
    text-align: right;
    align-items: unset;
}
        .hamerbfer .hfe-nav-menu.hfe-layout-horizontal.hfe-nav-menu-layout.horizontal.hfe-pointer__none {
    overflow: hidden;
}

.counter-btn span.elementor-button-text {
    font-size: 0px;
}

.counter-btn span.elementor-button-content-wrapper {
    display: unset;
}

.new-listing a.elementor-button.elementor-button-link.elementor-size-sm {
    width: 100%;
    max-width: fit-content;
    padding: 12px 10px !important;
    border-radius: 50px;
}
.counter-btn a.elementor-button.elementor-button-link.elementor-size-sm {
    width: 100%;
    max-width: max-content;
    padding: 8px 7px !important;
    border-radius: 53px;
}
        .counter-btn span.elementor-button-icon svg {
    width: 20px;
}

        
    :root { --nav-h: 54px; }
    .nav-links { display: none; }
    .hamburger { display: block; }
    .btn-new-listing span { display: none; }
    .nav-logo .logo-text { font-size: 16px; }

    .hero-content { padding: 24px 20px; max-width: 100%; text-align: center; margin: 0 auto; }
    .hero-overlay { background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.75) 40%); }
    .hero { min-height: 200px; }

    .content-wrapper { flex-direction: column; }
    .map-section {
      width: 100%;
      position: relative;
      top: 0;
      height: 100%;
      padding: 10px 12px 0;
    }
    .listings-section { padding: 10px 12px; }
    .filter-bar-wrapper { top: calc(var(--nav-h) + 60px); }

    .listing-img { width: 90px; }
    .listing-title { font-size: 18px; }
    .listing-desc { -webkit-line-clamp: 2; }
  
    .community-content {
        min-height: 300px;
    }

    .community-content .container {
        justify-content: center;
              display:unset;
    }

 .cstm-popup-main-img img {
    width: 100%;
    height: 392px !important;
    object-fit: cover;
}
.cs-pop-thumb {
    width: 100px !important;
    height: 100px !important;
    object-fit: cover !important;
}
    nav.hfe-nav-menu__layout-horizontal.hfe-nav-menu__submenu-arrow.hfe-dropdown.menu-is-active {
    width: 100vw !important;
}
    
.counter-btn .elementor-button:after {
    top: -5px;
    left: 30px;
}
}

@media (max-width: 480px) {
    .filter-bar { gap: 6px; }
    .filter-dropdown { padding: 5px 7px; font-size: 11px; }
    .filter-search { min-width: 100px; }
    .listing-img { width: 80px; font-size: 22px; }
    .listing-card-body { padding: 10px; }
    .ad-banner { height: 56px; }
    .ad-text .headline { font-size: 15px; }
  
}

@media (max-width: 1024px) {
.listing-card {
    display: flex;
    flex-direction: column-reverse;
}
    .community-search input {
    padding: 0 20px 0 20px;
}
.listing-img {
    width: 100%;
}
.img-overlay img {
    height: 100%;
    object-fit: cover;
    width:100%;
}
    .img-overlay {
    height: 100%;
}
    main.listings-section .popular-tags-box {
    display: block;
}
     .mobile-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    padding: 0 10px;
    justify-content: space-between;
}
.mobile-tabs .tab-btn {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--brand-cyan);
    background: #fff;
    color: var(--brand-cyan);
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    font-size: 16px;
    font-family: var(--font-family-base);
}

.mobile-tabs .tab-btn.active {
    background: var(--brand-cyan);
    color: #fff;
    border: 1px solid var(--brand-cyan);
}
  #mapPanel,
    #listingPanel {
        display: none !important;
        width: 100% !important;
    }

    #mapPanel.active-panel,
    #listingPanel.active-panel {
        display: block !important;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1330px) {
    .listing-card {
    display: flex;
    flex-direction: column-reverse;
}
.listing-img {
    width: 100%;
}
.img-overlay img {
    width: 100%;
}
    .popular-tags-box {
    display: none;
}
    main.listings-section .popular-tags-box {
    display: block;
}
}

.cstm-form_error p {
    color: red;
}

.top-btn-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
}

.cstm-form_success p {
    color: #21993c;
}

.top-btn-col {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    gap: 15px;
}

button.cs-filled-btncolor {
    background: var(--brand-cyan);
    border: none;
    color: #FFF;
    padding: 11px 25px;
    font-weight: var(--fw-medium);
}

button.cs-without-btncolor {
    background: unset;
    border: 1px solid var(--brand-cyan);
    padding: 10px 25px;
    color: var(--brand-cyan);
    font-weight: var(--fw-medium);
}
button.without-text {
    border: unset;
    padding: 10px 0px;
}
button.without-text:hover {
    background: unset !important;
    color: var(--brand-orange-hover);
    border: unset !important;
}
button.without-text:focus {
    background: unset !important;
    color: #00b9cc;
}

a.cs-border-btn-color {
    background: unset;
    border-radius: 5px;
    border: 1px solid #00000033;
    padding: 10px 25px;
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    color: var(--text-dark);
}

button.cs-filled-btncolor:hover {
    background: var(--brand-orange-hover);
}

button.cs-without-btncolor:hover {
    background: var(--brand-orange-hover);
    border: 1px solid var(--brand-orange-hover);
}

a.cs-border-btn-color:hover {
    border: 1px solid var(--brand-orange-hover);
    background-color: var(--brand-orange-hover);
    color: #FFF;
}

.cs-listing-page {
    background: #F8F9FB;
    padding: 40px;
}

.top-heading-col {
    color: var(--text-dark);
    font-size: var(--fs-xl);
    font-weight: var(--fw-medium);
}

.listing-form-main {
    border: 1px solid #E8EAF0;
    margin-top: 30px;
    padding: 20px;
    background: #FFFF;
    border-radius: 10px;
}

.listing-form-main h1, .listing-form-main h2 {
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
    color: var(--text-dark);
    position: relative;
    margin: 0px;
}

.cs-listing-serials {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: right;
    gap: 10px;
    margin-bottom: 10px;
}
.cstm-form_error p {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
    padding: 10px;
    border-radius: 5px;
}

 
 .cstm-form_success p {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
    padding: 10px;
}

.cs-listing-serials span {
    font-size: var(--fs-lg);
    background: var(--brand-orange);
    color: #FFF;
    padding: 5px;
    border-radius: 50px;
    font-weight: var(--fw-medium);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cs-listing-page input, select {
    border: 1px solid var(--border-light) !important;
    height: 40px;
    border-radius: 5px;
}

.cs-listing-page textarea {
    border: 1px solid var(--border-light);
    height: 200px;
    resize: none;
}

.provider-detail-col textarea#explanation {
    height: 80px;
}

.cs-listing-page ::placeholder {
    color: var(--text-dark);
    font-size: var(--fs-base) !important;
    font-weight: var(--fw-light);
}

.cs-listing-page select {
    color: var(--text-dark);
    font-size: var(--fs-base) !important;
    font-weight: var(--fw-light);
}

.listing-form-row {
    display: flex;
    gap: 20px;
    flex-direction: row-reverse;
    align-items: center;
}

.cs-listing-page .field-title span {
    color: #ff4b4b;
}

.cs-listing-page .radio-group {
    display: flex;
    gap: 25px;
    margin-top: 15px;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.cs-listing-page .radio-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    position: relative;
    font-size: var(--fs-lg);
    color: #222;
}

.cs-listing-page .radio-option input {
    position: absolute;
    opacity: 0;
}

.cs-listing-page .custom-radio {
    width: 18px;
    height: 18px;
    border: 2px solid #d8d8d8;
    border-radius: 50%;
    position: relative;
    display: inline-block;
}

.cs-listing-page .radio-option input:checked + .custom-radio{
    border-color: #16c7e8;
}

.cs-listing-page .radio-option input:checked + .custom-radio::after{
    content: "";
    width: 10px;
    height: 10px;
    background: #16c7e8;
    border-radius: 50%;
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
}

.cs-form-filed {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin-top: 20px;
    flex-direction: row-reverse;
    width: 100%;
    background: #00B9CC0D;
    padding: 20px;
    border-radius: 10px;
}

.cs-form-filed .form-filed {
    width: 100%;
}

.busingess-info-row-first {
    display: flex;
    width: 100%;
    gap: 20px;
    margin-top: 20px;
}

.busingess-info-row-first .business-info-cols {
    width: 100%;
}

.business-info-main .radio-group {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.business-info-main .radio-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    position: relative;
    font-size: var(--fs-base);
    color: #444;
    white-space: nowrap;
}

.business-info-main .custom-radio {
    width: 18px;
    height: 18px;
    border: 2px solid #d9d9d9;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    transition: .3s;
}

.business-info-main .radio-option input:checked + .custom-radio {
    border-color: #12c7e8;
}

.business-info-main .radio-option input:checked + .custom-radio::after {
    content: "";
    width: 10px;
    height: 10px;
    background: #12c7e8;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.working-hours-field {
    margin-top: 20px;
}

.cs-listing-page label {
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    padding: 10px;
    cursor: pointer;
}

.listing-form-col-image {
    width: 100%;
}

.listing-form-col-text {
    width: 100%;
}

.listing-form-col-image textarea {
    height: 70px;
}

.featured-images-colnm input[type="file"] {
    width: 100%;
    height: 130px;
    margin: 8px 0px;
}

div#cstm-hideimggallery {
    left: 65px;
    top: 15px;
}

.cstm-imagegallery {
    position: absolute !important;
    top: 0 !important;
    background: rgba(20,22,28,.55);
    height: 100% !important;
    padding: 12px;
    border-radius: 15px;
}

.cs-slider-btn {
    display: flex;
    gap: 20px;
    margin: 0 auto;
    justify-content: center;
    margin-top: -25px;
}

.cs-slider-btn button {
    background: #fbfbfb;
    border: 1px solid var(--brand-orange);
    border-radius: 5px;
    font-size: var(--fs-md);
}

.cstm-popup-main-img-item {
    height: 400px !important;
    width: 100% !important;
    object-fit: cover;
}

.btn-navigation button {
    background: var(--brand-orange);
    border: none;
}

.cstm-grid-slideMain {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 400px !important;
}

.btn-navigation button:active {
    background: var(--brand-cyan);
}

.btn-navigation button:hover {
    background: var(--brand-cyan);
}

.cstm-grid-slider img {
    border-radius: 15px;
}

.cstm_workinghr_row .cstm_workinghr_open_time, .cstm_workinghr_row .cstm_workinghr_close_time, .cstm_workinghr_row .cstm_workinghr_day {
    width: 100%;
}

.cstm_workinghr_row {
    display: flex;
    width: 100%;
    gap: 20px;
    margin-top: 20px;
}

.cstm_workinghr_close_time select, .cstm_workinghr_open_time select {
    margin: 0px 0px 12px;
}

.provider-info-first-row {
    display: flex;
    gap: 20px;
}

.provider-info-first-row .provider-detail-col {
    width: 100%;
}

.phone-r {
    display: flex;
    align-items: center;
    gap: 12px;
}

.phone-r label {
    font-size: var(--fs-lg);
    color: #222;
    cursor: pointer;
}

.phone-r input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 46px;
    height: 26px;
    background: #d9d9d9;
    border-radius: 30px;
    position: relative;
    cursor: pointer;
    transition: .3s;
}

.phone-r input[type="checkbox"]::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: .3s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.phone-r input[type="checkbox"]:checked {
    background: #16b84e;
}

.phone-r input[type="checkbox"]:checked::before {
    transform: translateX(20px);
}

.first_row-toggle {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    justify-content: right;
    margin-top: 20px;
}

.provider-info-third-row {
    display: flex;
    gap: 20px;
}

.provider-info-third-row .provider-detail-col {
    width: 100%;
}

.second_row-phone {
    display: none;
}

.cstm-galley-phtop-wrap {
    max-width: 1000px;
    margin: 20px auto;
}

.cstm-galley-phtop-featured {
    display: flex;
    height: 105px;
    border: 1px solid var(--border-light);
    position: relative;
    align-items: center;
    justify-content: center;
}

.cstm-galley-phtop-featured input, .cstm-galley-phtop-add input {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.cstm-galley-phtop-featured img {
    display: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cstm-galley-phtop-row {
    display: flex;
    flex-direction: row-reverse;
    gap: 20px;
    margin-top: 20px;
    justify-content: space-between;
}

#cstm-galley-phtop-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    width: 100%;
    max-width: 400px;
}

.cstm-galley-phtop-card {
    width: 100%;
    position: relative;
    max-width: 110px;
}

.cstm-galley-phtop-card img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    max-width: 110px;
}

.cstm-galley-phtop-del {
    position: absolute;
    left: -8px;
    top: -10px;
    width: 16px;
    height: 16px;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='7' cy='7' r='7' fill='%23FF5600'/%3E%3Cpath d='M7 1C8.18669 1 9.34672 1.35189 10.3334 2.01118C11.3201 2.67047 12.0891 3.60754 12.5433 4.7039C12.9974 5.80025 13.1162 7.00665 12.8847 8.17054C12.6532 9.33443 12.0818 10.4035 11.2426 11.2426C10.4035 12.0818 9.33443 12.6532 8.17054 12.8847C7.00665 13.1162 5.80026 12.9974 4.7039 12.5433C3.60754 12.0891 2.67047 11.3201 2.01118 10.3334C1.35189 9.34673 1 8.18669 1 7C1.00188 5.40928 1.63462 3.88424 2.75943 2.75943C3.88424 1.63462 5.40928 1.00188 7 1ZM4.68618 8.54309C4.63408 8.59341 4.59253 8.65359 4.56394 8.72014C4.53536 8.78669 4.52031 8.85826 4.51968 8.93069C4.51905 9.00311 4.53285 9.07494 4.56028 9.14197C4.5877 9.20901 4.62821 9.26991 4.67942 9.32112C4.73064 9.37234 4.79154 9.41284 4.85857 9.44026C4.9256 9.46769 4.99743 9.48149 5.06985 9.48086C5.14228 9.48023 5.21385 9.46519 5.2804 9.4366C5.34695 9.40801 5.40714 9.36646 5.45745 9.31436L7 7.77127L8.54254 9.31436C8.64542 9.41372 8.7832 9.4687 8.92622 9.46746C9.06923 9.46621 9.20604 9.40885 9.30717 9.30772C9.4083 9.20659 9.46567 9.06978 9.46691 8.92676C9.46815 8.78375 9.41318 8.64596 9.31382 8.54309L7.77127 7L9.31382 5.45691C9.36591 5.40659 9.40747 5.3464 9.43605 5.27986C9.46464 5.21331 9.47969 5.14173 9.48032 5.06931C9.48095 4.99688 9.46715 4.92506 9.43972 4.85802C9.41229 4.79099 9.37179 4.73009 9.32058 4.67887C9.26936 4.62766 9.20846 4.58716 9.14143 4.55973C9.07439 4.53231 9.00257 4.51851 8.93014 4.51914C8.85772 4.51976 8.78614 4.53481 8.7196 4.5634C8.65305 4.59199 8.59286 4.63354 8.54254 4.68564L7 6.22873L5.45745 4.68564C5.40714 4.63354 5.34695 4.59199 5.2804 4.5634C5.21385 4.53481 5.14228 4.51976 5.06985 4.51914C4.99743 4.51851 4.9256 4.53231 4.85857 4.55973C4.79154 4.58716 4.73064 4.62766 4.67942 4.67887C4.62821 4.73009 4.5877 4.79099 4.56028 4.85802C4.53285 4.92506 4.51905 4.99688 4.51968 5.06931C4.52031 5.14173 4.53536 5.21331 4.56394 5.27986C4.59253 5.3464 4.63408 5.40659 4.68618 5.45691L6.22873 7L4.68618 8.54309Z' fill='white'/%3E%3C/svg%3E%0A");
    font-size: 0;
}

label.cstm-galley-phtop-add p {
    text-align: center;
    font-size: var(--fs-base) !important;
    padding: 0px;
    line-height: 20px;
}

.cstm-galley-phtop-card input {
    width: 100%;
    border: 0;
    border-bottom: 1px solid #ccc;
    text-align: center;
}

.cstm-galley-phtop-add {
    width: 180px;
    height: 130px;
    border: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.cstm-galley-phtop-plus {
    font-size: 40px;
    color: orange;
}

label.featured-label {
    font-weight: var(--fw-medium);
}

.upload-info {
    position: relative;
    width: 100%;
}

.info-icon svg {
    width: 20px;
    height: 20px;
}

.custom-tooltip {
    position: absolute;
    bottom: 25%;
    right: 35px;
    min-width: 100%;
    color: #333;
    padding: 0px 0px;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    z-index: 99;
    font-size: var(--fs-base);
}

.custom-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 12px;
    border: 7px solid transparent;
    border-top-color: #fff;
}

.upload-info:hover .custom-tooltip {
    opacity: 1;
    visibility: visible;
}

.customer-login-form input {
    border: 1px solid var(--border-light) !important;
    border-radius: 4px !important;
    margin: 15px 0px;
}

.login-btn p {
    margin: 0px;
}

.login-btn {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.customer-login-form a {
    color: var(--brand-orange);
}

.login-box h2 {
    font-weight: var(--fw-medium);
    font-size: var(--fs-4xl);
    text-align: right;
    color: var(--brand-teal-dark);
}

.customer-login-form {
    width: 100%;
    max-width: 600px !important;
    margin: 60px auto;
    padding: 30px 30px;
    box-shadow: 0px 0px 44px #00000017;
    border-radius: 10px;
}

.customer-login-page {
    min-height: 600px;
}

.community-search button:focus {
    background: unset !important;
}

.select2-container {
    width: 100% !important;
}

.select2-container--default .select2-selection--multiple {
    min-height: 48px;
    border: 1px solid var(--border-light) !important;
    border-radius: 6px;
    padding: 5px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: #ff6600;
    border: 1px solid #FFF !important;
    color: #FFF !important;
    padding: 4px 8px;
    border-radius: 4px;
    background-color: var(--brand-teal-dark) !important;
    font-size: var(--fs-base) !important;
    font-family: var(--font-family-base) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #fff;
    margin-right: 5px;
}

.select2-container .select2-search--inline .select2-search__field {
    font-family: unset !important;
}

.select2-container .select2-selection--multiple {
    min-height: 40px !important;
}

.select2-container--default .select2-search--inline .select2-search__field {
    padding: 0px !important;
    margin: 0px !important;
}

.select2-container--default .select2-results__option--selected {
    background-color: var(--brand-orange) !important;
    color: #FFF !important;
}

.cs-pop-info-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.cs-pop-info-badge::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 0px);
    left: 0;
    transform: translateX(-88%);
    width: 200px;
    padding: 10px 12px;
    background: #fff;
    color: var(--text-dark);
    font-size: var(--fs-xs);
    line-height: 1.5;
    text-align: right;
    border-right: 1px solid var(--brand-orange);
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transition: .25s ease;
    z-index: 999;
    font-weight: var(--fw-light);
}

.cs-pop-info-badge:hover::after, .cs-pop-info-badge:hover::before {
    opacity: 1;
    visibility: visible;
}

.listing-buttons a.prev-btn {
    padding: 5px 18px 5px 10px;
    border-radius: 5px;
}

.listing-buttons a.prev-btn::before {
    content: "";
    background: 15px;
    width: 28px;
    height: 28px;
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.705711 0.000172193C0.568144 -0.00307852 0.433053 0.039766 0.319218 0.122815C0.205383 0.205864 0.11846 0.325013 0.070536 0.46359C0.0226117 0.602167 0.0160665 0.753323 0.0518101 0.896081C0.0875538 1.03884 0.16381 1.16603 0.269978 1.26007L4.32087 4.9885L0.269978 8.71562C0.196536 8.77361 0.135031 8.84723 0.0893133 8.93194C0.0435956 9.01666 0.0146507 9.11062 0.00429086 9.20791C-0.00606902 9.3052 0.00237956 9.40372 0.0291074 9.49733C0.0558353 9.59095 0.100266 9.67766 0.159619 9.75197C0.218971 9.82628 0.291966 9.88656 0.374032 9.92917C0.456098 9.97177 0.545468 9.9957 0.636544 9.99947C0.72762 10.0032 0.81844 9.98683 0.903317 9.95115C0.988195 9.91547 1.0653 9.86135 1.12981 9.79217L5.76771 5.52887C5.84054 5.46209 5.89903 5.37921 5.93913 5.2858C5.97923 5.19239 6 5.09071 6 4.98784C6 4.88497 5.97923 4.7833 5.93913 4.68989C5.89903 4.59648 5.84054 4.51351 5.76771 4.44674L1.12981 0.179338C1.01265 0.0675329 0.862371 0.00413327 0.705711 0.000172193Z' fill='%2300B9CC'/%3E%3C/svg%3E%0A");
    position: absolute;
    background-repeat: no-repeat;
    top: 3px;
    right: 0;
}

.listing-buttons a.next-btn::after {
    content: "";
    background: 15px;
    width: 28px;
    height: 28px;
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.29429 0.000172193C5.43186 -0.00307852 5.56695 0.039766 5.68078 0.122815C5.79462 0.205864 5.88154 0.325013 5.92946 0.46359C5.97739 0.602167 5.98393 0.753323 5.94819 0.896081C5.91245 1.03884 5.83619 1.16603 5.73002 1.26007L1.67913 4.9885L5.73002 8.71562C5.80346 8.77361 5.86497 8.84723 5.91069 8.93194C5.9564 9.01666 5.98535 9.11062 5.99571 9.20791C6.00607 9.3052 5.99762 9.40372 5.97089 9.49733C5.94416 9.59095 5.89973 9.67766 5.84038 9.75197C5.78103 9.82628 5.70803 9.88656 5.62597 9.92917C5.5439 9.97177 5.45453 9.9957 5.36346 9.99947C5.27238 10.0032 5.18156 9.98683 5.09668 9.95115C5.01181 9.91547 4.9347 9.86135 4.87019 9.79217L0.232292 5.52887C0.159459 5.46209 0.100974 5.37921 0.0608706 5.2858C0.0207672 5.19239 0 5.09071 0 4.98784C0 4.88497 0.0207672 4.7833 0.0608706 4.68989C0.100974 4.59648 0.159459 4.51351 0.232292 4.44674L4.87019 0.179338C4.98735 0.0675329 5.13763 0.00413327 5.29429 0.000172193Z' fill='%2300B9CC'/%3E%3C/svg%3E%0A");
    position: absolute;
    background-repeat: no-repeat;
    top: 2px;
}

.listing-buttons a.next-btn {
    padding: 5px 10px 5px 18px;
}

.cs-time-box {
    display: flex;
    gap: 10px;
}

.page-id-551 header#masthead {
    display: none;
}

.page-id-551 button:focus {
    background: #145863 !important;
    color: #FFF !important;
}

.page-id-551 footer#colophon {
    display: none;
}

.page-id-551 header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #FFF;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    box-shadow: 10px 0px 44px #0000000D;
}

.page-id-551 .listing-card {
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    background: #FBFBFB !important;
    transition: box-shadow .18s ease, transform .18s ease;
}

header.dasboard {
    display: flex !important;
    flex-direction: row-reverse;
}

.profile-wrap {
    position: relative;
}

/*thankyou-pop*/

 .cs-thankyou-send-btn {
    padding: 10px 20px;
    background: var(--brand-cyan);
    color: var(--white);
    border: none;
    border-radius: 6px;
    font-family: var(--font-family-base);
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    cursor: pointer;
  }

  .cs-thankyou-overlay {
    display: none; /* hidden by default */
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family-base);
  }

  .cs-thankyou-overlay.active {
    display: flex;
  }
.cs-thankyou-box {
    background: var(--card);
    max-width: 520px;
    width: 100%;
    padding: 30px 25px;
    border-radius: var(--radius);
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

  .cs-thankyou-title {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-bold);
    color: var(--text-dark);
    margin-bottom: 18px;
  }
.cs-thankyou-row {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    margin-bottom: 16px;
    flex-direction: row-reverse;
}

.cs-thankyou-text {
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    color: var(--text-mid);
    line-height: 1.6;
    margin: 0;
    flex: 1;
    text-align: right;
}

  .cs-thankyou-icon {
    position: relative;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }


  .cs-thankyou-thumb {
    position: absolute;
    bottom: -4px;
    right: -4px;
    background: var(--white);
    border-radius: 50%;
    padding: 2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  }

  .cs-thankyou-ok-btn {
    margin-top: 10px;
    padding: 10px 30px;
    background: var(--brand-cyan);
    color: var(--white);
    border: none;
    border-radius: 6px;
    font-family: var(--font-family-base);
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    cursor: pointer;
  }

  .cs-thankyou-ok-btn:hover {
    background: var(--brand-teal-dark);
  }
  .error-msg {
    display: block;
    color: red;
    font-size: 13px;
    margin-top: 4px;
    min-height: 16px;
}


main.container-dashboards {
    max-width: 1100px;
    margin: 24px auto;
    padding: 0 16px;
}

.avatar-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #0ec0d2;
    border: none;
    color: #fff;
    font-weight: var(--fw-bold);
    font-size: var(--fs-base);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, box-shadow .15s ease;
}

.avatar-btn:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}

.profile-menu {
    position: absolute;
    top: 46px;
    left: 0;
    width: 200px;
    background: #FFFF;
    border: 1px solid #3d7e84;
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(15,40,40,0.14);
    padding: 8px;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
}

.profile-menu.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.profile-menu .who {
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
}

.toolbar a {
    text-decoration: none;
}

.profile-menu .who .name {
    font-weight: var(--fw-medium);
    font-size: var(--fs-lg);
    color: var(--text-dark);
}

button#avatarBtn:hover {
    background: var(--brand-orange);
}

.user-profile a:hover {
    color: var(--brand-orange);
}

.profile-menu .who .role {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.profile-menu button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    padding: 10px 12px;
    font-size: var(--fs-base);
    text-align: left;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text);
    transition: background .12s ease;
}

.profile-menu button:hover {
    background: #f2f5f5;
}

.profile-menu button.logout-item {
    color: var(--danger);
}

.profile-menu button.logout-item:hover {
    background: #fdeeeb;
}

.menu-toggle {
    background: none;
    border: none;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: background .15s ease;
}

.menu-toggle:hover {
    background: #f0f3f3;
}

.menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
}

.menu-toggle.active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(10,25,25,0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 40;
}

.overlay.show {
    opacity: 1;
    pointer-events: auto;
}

.side-nav {
    position: fixed;
    top: 100px;
    right: 0;
    height: 100%;
    width: 270px;
    background: #FFFF;
    box-shadow: -6px 0 24px rgba(15,40,40,0.12);
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    z-index: 45;
    display: flex;
    flex-direction: column;
    padding: 20px 14px;
}

.side-nav.open {
    transform: translateX(0);
}

.side-nav nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    transition: background .15s ease, color .15s ease;
}

.nav-item .label {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-item .ic {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-item:hover {
    background: #f0f5f4;
}

.nav-item.active {
    background: #fdeee7;
    color: var(--orange);
    font-weight: var(--fw-semibold);
}

.nav-item.active svg {
    stroke: var(--orange);
}

.nav-item.logout {
    color: var(--danger);
    margin-top: auto;
}

.nav-item.logout:hover {
    background: #fdeeeb;
}

.side-nav .divider {
    height: 1px;
    background: var(--border);
    margin: 10px 4px;
}
.cs-mylisting-page .toolbar {
    display: flex;
    flex-direction: row-reverse;
}

.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
}

.new-listing-btn {
    background: var(--brand-cyan) !important;
    color: #fff;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: var(--fw-medium);
    font-size: var(
    --fs-lg);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: var(
    --shadow);
    transition: background .15s ease, transform .12s ease;
    flex-direction: row-reverse;
}
.new-listing-btn:hover {
    transform: translateY(-1px);
    color: #FFF !important;
}

header.dasboard button#menuToggle:focus {
    background: unset !important;
}

.toolbar h1 {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    color: var(--text);
}

.panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    min-height: 50vh;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    box-shadow: var(--shadow);
}

section.panel.profile-security, section.panel.profile-card {
    width: 100%;
}
.empty-state {
    text-align: center;
    max-width: 340px;
}

.user-profile {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.user-profile a {
    color: var(--text-dark);
}

.empty-state .icon-wrap {
    width: 84px;
    height: 84px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #eef4f3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-state h2 {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    margin-bottom: 8px;
    color: var(--text);
}

.empty-state p {
    font-size: var(--fs-sm2);
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 16px;
}

.empty-state .new-link {
    color: var(--teal);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-base);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: none;
    cursor: pointer;
}

.empty-state .new-link:hover {
    text-decoration: underline;
}

.panel.has-listings {
    display: block;
    align-items: unset;
    justify-content: unset;
    padding: 20px;
}

.page-id-551 .listings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(230px,1fr));
    gap: 18px;
}

.page-id-551 .listing-card:hover {
    box-shadow: 0 8px 22px rgba(15,40,40,0.1);
    transform: translateY(-2px);
}

.page-id-551 .listing-card .thumb-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    background: #eef2f2;
    overflow: hidden;
}

.page-id-551 .listing-card .thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.page-id-551 .listing-card .status-tag.pending {
    background: rgba(242,116,61,0.92);
}

.page-id-551 .listing-card .card-body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.page-id-551 .listing-card .title {
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-id-551 .listing-card .meta {
    font-size: 12.5px;
    color: var(--text-muted);
}

.page-id-551 .listing-card .price {
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    color: var(--teal-dark);
    margin-top: 2px;
}

.page-id-551 .listing-card .card-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    justify-content: space-between;
}

.card-actions a.btn-view {
    background: var(--brand-cyan);
    border: none;
    color: #FFF;
    padding: 8px 20px;
    font-weight: var(--fw-medium);
    border-radius: 5px;
}

.card-actions .btn-edit {
    background: unset;
    border: 1px solid var(--brand-cyan);
    padding: 8px 20px;
    color: var(--brand-cyan);
    font-weight: var(--fw-medium);
    border-radius: 5px;
}

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    border-radius: 5px;
}

.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
    border-radius: 5px;
}

.error-message.text-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    padding: 10px;
    border-radius: 5px;
}

.page-id-551 .listing-card .card-actions button {
    flex: 1;
    padding: 8px 0;
    border-radius: 8px;
    font-size: var(--fs-sm2);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background .15s ease, color .15s ease;
}

.page-id-551 .listing-card .btn-view {
    background: #eef4f3;
    border: 1px solid var(--border);
    color: var(--teal-dark);
}

.page-id-551 .listing-card .btn-view:hover {
    background: var(--brand-orange);
}

.page-id-551 .listing-card .btn-edit:hover {
    background: var(--brand-orange);
    border: 1px solid var(--brand-orange);
    color: #FFF;
}

.profile-fields input[type="tel"] {
    text-align: right;
}

.profile-fields input {
    border: 1px solid var(--border-light) !important;
    border-radius: 4px !important;
    margin: 15px 0px;
}

/* ==========================================================================
   Dashboard / Profile / Messages / My Listings
   Fixed to use ONLY the variables defined in the user's :root
   (--muted -> var(--text-mid), --radius-sm -> 8px, since these
   were not present in the provided root)
   ========================================================================== */

/* Common page wrapper */
.cs-dashboard-page, .cs-profile-page, .cs-messages-page, .cs-mylisting-page {
    font-family: var(--font-family-base);
    padding: 40px 0px;
}
/* ---------- Status badge (shows on top of the listing image) ---------- */
.cs-status-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: capitalize;
    color: var(--white);
    background: var(--text-light);
    letter-spacing: 0.2px;
}
.cs-status-badge.cs-status-publish { background: var(--green); }
.cs-status-badge.cs-status-pending { background: var(--brand-orange); }
.cs-status-badge.cs-status-draft   { background: var(--text-light); }

/* Small status pill used inside tables */
.cs-status-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--white);
    background: var(--text-light);
    text-transform: capitalize;
}
.cs-status-pill.cs-status-publish { background: var(--green); }
.cs-status-pill.cs-status-pending { background: var(--brand-orange); }
.cs-status-pill.cs-status-draft   { background: var(--text-light); }

/* ---------- Action icons (view / edit / delete) on top of image ---------- */
.cs-mylisting-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    display: flex;
    gap: 6px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .2s ease, transform .2s ease;
}
.cs-mylisting-image:hover .cs-mylisting-actions {
    opacity: 1;
    transform: translateY(0);
}
.cs-action-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border: none;
    border-radius: 50%;
    box-shadow: var(--shadow);
    color: var(--text-mid);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.cs-action-icon.cs-action-view:hover   { background: var(--brand-cyan); color: var(--white); }
.cs-action-icon.cs-action-edit:hover   { background: var(--brand-orange); color: var(--white); }
.cs-action-icon.cs-action-delete:hover { background: var(--red); color: var(--white); }

/* Always show actions inline inside tables (dashboard "Recent Listings") */
.cs-dash-recent-actions {
    display: flex;
    gap: 6px;
}
.cs-dash-recent-actions .cs-action-icon {
    position: static;
    opacity: 1;
    transform: none;
    width: 28px;
    height: 28px;
}
button.cs-action-icon.cs-action-delete {
    background: var(--brand-orange);
    color: var(--white);
    height: 30px;
    width: 30px;
    padding: 0px;
    line-height: 0;
    border: none;
}

.profile-wrap button#avatarBtn:active {
    background: unset !important;
    border: none !important;
}

.profile-wrap button#avatarBtn:hover {
    background: unset !important;
    border: none !important;
}

.profile-wrap button#avatarBtn:focus {
    background: unset;
    border: none;
}
.profile-wrap button#avatarBtn{
    background: unset !important;
    border: none!important;
}

.profile-wrap span.avatar {
    background: #FF56001A;
    padding: 10px 12px;
    border-radius: 50px;
}
/* ==========================================================================
   DASHBOARD
   ========================================================================== */
.cs-dash-welcome {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 20px;
}
.cs-dash-welcome-avatar img { border-radius: 50%; width: 60px; height: 60px; object-fit: cover; }
.cs-dash-welcome-text h2 { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); color: var(--text-dark); margin: 0 0 4px; }
.cs-dash-welcome-text p { font-size: var(--fs-base); color: var(--text-mid); margin: 0; }

.cs-dash-stats-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}
.cs-dash-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 16px;
}
.cs-dash-stat-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--orange-light);
    color: var(--brand-orange);
}
.cs-dash-icon-active  { background: rgba(39, 174, 96, .12); color: var(--green); }
.cs-dash-icon-pending { background: var(--orange-light); color: var(--brand-orange); }
.cs-dash-icon-draft   { background: rgba(136,136,136,.12); color: var(--text-light); }
.cs-dash-icon-msg     { background: rgba(0,185,204,.12); color: var(--brand-cyan); }
.cs-dash-stat-info h3 { font-size: var(--fs-3xl); font-weight: var(--fw-bold); color: var(--text-dark); margin: 0; }
.cs-dash-stat-info p  { font-size: var(--fs-sm2); color: var(--text-mid); margin: 2px 0 0; }

.cs-dash-quicklinks {
    display: flex;
    gap: 14px;
    margin-bottom: 24px;
}
.cs-dash-quicklink-card {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    color: var(--text-dark);
    font-weight: var(--fw-medium);
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease;
}
.cs-dash-quicklink-card:hover { border-color: var(--brand-orange); color: var(--brand-orange); }

.cs-dash-recent {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 20px;
}
.cs-dash-recent-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cs-dash-recent-head h3 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); color: var(--text-dark); margin: 0; }
.cs-dash-recent-head a { font-size: var(--fs-sm2); color: var(--brand-orange); text-decoration: none; font-weight: var(--fw-medium); }

.cs-dash-recent-table-wrap { overflow-x: auto; }
.cs-dash-recent-table { width: 100%; border-collapse: collapse; }
.cs-dash-recent-table th {
    text-align: left;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--text-light);
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-light);
}
.cs-dash-recent-table td {
    padding: 12px;
    font-size: var(--fs-sm2);
    color: var(--text-mid);
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}
.cs-dash-recent-title { display: flex; align-items: center; gap: 10px; }
.cs-dash-recent-title img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; }
.cs-dash-recent-title span { font-weight: var(--fw-medium); color: var(--text-dark); }

.cs-dash-empty { text-align: center; padding: 30px 0; color: var(--text-mid); }
.cs-dash-empty p { margin-bottom: 14px; }

/* ==========================================================================
   PROFILE
   ========================================================================== */
.profile-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; align-items: start; }

.profile-card-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.p-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--teal); color: var(--white);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: var(--fw-bold); flex-shrink: 0;
}
h2.section-title {
    font-size: var(--fs-xl);
    font-weight: var(--fw-medium);
    color: var(--text-dark);
}
.p-head-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.p-name {
    font-size: var(--fs-xl);
    font-weight: var(--fw-medium);
    margin: 0;
    color: var(--text-dark);
}
.p-subtitle { font-size: var(--fs-sm2); color: var(--text-mid); }

.edit-profile-btn, .btn-secondary {
    border: 1px solid var(--border);
    background: var(--brand-cyan);
    color: var(--white);
    font-weight: var(
    --fw-semibold);
    font-size: var(
    --fs-sm2);
    padding: 9px 16px;
    border-radius: 8px;
    white-space: nowrap;
}
.edit-profile-btn:hover, .btn-secondary:hover {
    background: var( --brand-orange-hover);
}

.profile-fields { display: flex; flex-direction: column; gap: 0; }
.field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
    gap: 16px;
}
.field-row:last-child { border-bottom: none; }
.field-row label { font-size: var(--fs-sm2); color: var(--text-mid); font-weight: var(--fw-medium); min-width: 130px; }
.field-row .value { font-size: var(--fs-base); font-weight: var(--fw-semibold); text-align: right; color: var(--text-dark); }
.field-row .field-input {
    flex: 1;
    max-width: 260px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: var(--fs-base);
    text-align: right;
    font-family: var(--font-family-base);
    color: var(--text-dark);
}

.profile-edit-actions { display: flex; gap: 10px; margin-top: 18px; }
.btn-save {
    color: var(--white);
    border: none;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm2);
    padding: 10px 20px;
    border-radius: 8px;
    background: var(--brand-cyan);
}
.btn-save:hover { background: var(--brand-orange-hover); }
.btn-cancel {
    background: var(--white); border: 1px solid var(--border); color: var(--text-mid);
    font-weight: var(--fw-semibold); font-size: var(--fs-sm2); padding: 10px 20px; border-radius: 8px;
}
.btn-cancel:hover {
    color: #FFF;
    background: var(--brand-orange-hover);
}

.security-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0; border-bottom: 1px solid var(--border); gap: 16px;
}
.security-row:last-child { border-bottom: none; }
.security-row-text { display: flex; flex-direction: column; gap: 2px; }
.security-row-title { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--text-dark); }
.security-row-desc { font-size: var(--fs-sm); color: var(--text-mid); }

/* ==========================================================================
   MESSAGES
   ========================================================================== */
.cs-msg-wrap {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 0;
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    overflow: hidden;
    min-height: 560px;
}

/* Conversation list */
.cs-msg-list { border-right: 1px solid var(--border-light); display: flex; flex-direction: column; }
.cs-msg-list-search { padding: 14px; border-bottom: 1px solid var(--border-light); }
.cs-msg-list-search input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: var(--fs-sm2);
    font-family: var(--font-family-base);
    color: var(--text-dark);
}
.cs-msg-list-items { overflow-y: auto; flex: 1; }
.cs-msg-list-item {
    position: relative;
    display: flex;
    gap: 10px;
    padding: 14px;
    text-decoration: none;
    border-bottom: 1px solid var(--border-light);
    transition: background .15s ease;
}
.cs-msg-list-item:hover, .cs-msg-list-item.active { background: var(--orange-light); }
.cs-msg-list-item img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.cs-msg-list-item-info { flex: 1; min-width: 0; }
.cs-msg-list-item-top { display: flex; justify-content: space-between; align-items: center; }
.cs-msg-list-name { font-size: var(--fs-sm2); font-weight: var(--fw-medium); color: var(--text-dark); }
.cs-msg-list-time { font-size: var(--fs-2xs); color: var(--text-light); }
.cs-msg-list-preview {
    font-size: var(--fs-xs);
    color: var(--text-mid);
    margin: 2px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cs-msg-list-listing { font-size: var(--fs-2xs); color: var(--brand-cyan); }
.cs-msg-list-item.unread .cs-msg-list-name { font-weight: var(--fw-bold); }
.cs-msg-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-orange); align-self: center; }

/* Thread */
.cs-msg-thread { display: flex; flex-direction: column; }
.cs-msg-thread-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-light);
}
.cs-msg-thread-head img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.cs-msg-thread-head h4 { margin: 0; font-size: var(--fs-md); color: var(--text-dark); }
.cs-msg-thread-head span { font-size: var(--fs-xs); color: var(--brand-cyan); }

.cs-msg-thread-body { flex: 1; padding: 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.cs-msg-bubble-row { display: flex; }
.cs-msg-bubble-row.mine { justify-content: flex-end; }
.cs-msg-bubble {
    max-width: 60%;
    padding: 10px 14px;
    border-radius: 14px;
    background: var(--teal-light);
    font-size: var(--fs-sm2);
    color: var(--text-dark);
}
.cs-msg-bubble-row.mine .cs-msg-bubble { background: var(--brand-orange); color: var(--white); }
.cs-msg-bubble p { margin: 0 0 4px; }
.cs-msg-bubble-time { font-size: var(--fs-2xs); opacity: .7; }

.cs-msg-thread-input {
    display: flex;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--border-light);
}
.cs-msg-thread-input textarea {
    flex: 1;
    resize: none;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: var(--font-family-base);
    font-size: var(--fs-sm2);
    color: var(--text-dark);
}

.cs-msg-empty { padding: 40px; text-align: center; color: var(--text-mid); }
.cs-msg-empty-thread { display: flex; align-items: center; justify-content: center; height: 100%; }

/* ==========================================================================
   MY LISTINGS (INVENTORY)
   ========================================================================== */
.cs-mylisting-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}
.cs-mylisting-tab {
    padding: 10px 25px;
    font-size: var(--fs-sm2);
    font-weight: var(--fw-medium);
    color: var(--text-dark);
    text-decoration: none;
    border: 2px solid #00b9cc;
}
.cs-mylisting-tab span {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 10px;
    background: var(--bg);
    font-size: var(--fs-2xs);
    color: var(--text-mid);
}
.cs-mylisting-tab.active {
    background: var(--brand-orange);
    border: 2px solid var(--brand-orange);
    color: var(--white);
}
.cs-mylisting-tab.active span { background: var(--orange-light); color: var(--brand-orange); }

.cs-mylisting-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}
.cs-mylisting-card {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.cs-mylisting-image {
    position: relative;
    width: 100%;
    height: 170px;
    overflow: hidden;
    background: var(--bg);
}
.cs-mylisting-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cs-mylisting-body { padding: 14px 16px; }
.cs-mylisting-body h3 {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--text-dark);
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cs-mylisting-cat { font-size: var(--fs-xs); color: var(--brand-cyan); margin: 0 0 6px; }
.cs-mylisting-date { font-size: var(--fs-2xs); color: var(--text-light); }

.cs-mylisting-empty { text-align: center; padding: 60px 0; color: var(--text-mid); }
.cs-mylisting-empty p { margin-bottom: 16px; }

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
    .cs-dash-stats-row { grid-template-columns: repeat(2, 1fr); }
    .cs-dash-quicklinks { flex-direction: column; }
    .cs-msg-wrap { grid-template-columns: 1fr; }
    .cs-msg-list { display: none; }
}