/*
Theme Name: WPResidence Child
Description: Child theme for WPResidence
Author: Your Name
Template: wpresidence
Version: 1.58.29
*/

/* Add any custom CSS here */
/* Intentionally empty: using theme defaults only */

/* Home only: reset advanced search tabs positioning to avoid overflow */
.home .adv_search_tab .nav.nav-tabs,
.home #adv-search-1 .nav.nav-tabs,
.home #adv-search-6 .nav.nav-tabs,
.home .adv6-holder .nav.nav-tabs {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin-top: 0 !important;
}

.home .adv_search_tab .nav.nav-tabs .nav-item .nav-link {
    position: static !important;
}

.adv_search_tab .nav-tabs .adv_search_tab_item.active:before{
	display:none !important;
}

/* Remove focus outline from SVG map elements */
.bgsvg svg path:focus,
.bgsvg svg circle:focus,
.bgsvg svg *:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Remove focus outline from all SVG elements */
svg path:focus,
svg circle:focus,
svg *:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Override Bulgaria map plugin hover styles */
.bgsvg .st1:hover,
.bgsvg .st2:hover,
.bgsvg .st3:hover,
.bgsvg .st4:hover,
.bgsvg .st5:hover,
.bgsvg .st6:hover,
.bgsvg .st7:hover,
.bgsvg .st8:hover,
.bgsvg .st9:hover,
.bgsvg .st10:hover,
.bgsvg .st11:hover,
.bgsvg .st12:hover,
.bgsvg .st13:hover,
.bgsvg .st14:hover,
.bgsvg .st15:hover,
.bgsvg .st16:hover,
.bgsvg .st17:hover,
.bgsvg .st18:hover,
.bgsvg .st19:hover,
.bgsvg .st20:hover,
.bgsvg .st21:hover,
.bgsvg .st22:hover,
.bgsvg .st23:hover,
.bgsvg .st24:hover,
.bgsvg .st25:hover,
.bgsvg .st26:hover,
.bgsvg .st27:hover,
.bgsvg .st28:hover,
.bgsvg .st29:hover,
.bgsvg .st30:hover,
.bgsvg .st31:hover,
.bgsvg .st32:hover,
.bgsvg .st33:hover,
.bgsvg .st34:hover,
.bgsvg .st35:hover,
.bgsvg .st36:hover,
.bgsvg .st37:hover,
.bgsvg .st38:hover,
.bgsvg .st39:hover,
.bgsvg .st40:hover,
.bgsvg .st41:hover,
.bgsvg .st42:hover,
.bgsvg .st43:hover,
.bgsvg .st44:hover,
.bgsvg .st45:hover,
.bgsvg .st46:hover,
.bgsvg .st47:hover,
.bgsvg .st48:hover,
.bgsvg .st49:hover,
.bgsvg .st50:hover {
    fill: inherit !important;
    stroke: inherit !important;
    stroke-width: inherit !important;
}

/* Ensure selected elements maintain their color on hover */
.bgsvg [selected]:hover {
    fill: #990000 !important;
}

/* Parent container - #bulgaria-map-container */
#bulgaria-map-container {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    padding: 0 !important;
}

/* Child container - .bulgaria-map-container (inside #bulgaria-map-container) */
.bulgaria-map-container,
.varna-city-map-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 15px !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 10px !important;
    justify-content: center !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Map Toggle Buttons */
.map-toggle-buttons {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 1000 !important;
    display: flex !important;
    gap: 10px !important;
}

.toggle-map-btn {
    background: #333 !important;
    color: white !important;
    border: none !important;
    padding: 8px 12px !important;
    cursor: pointer !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    transition: background 0.3s !important;
}

.toggle-map-btn:hover {
    background: #555 !important;
}

.toggle-map-btn.map-hidden {
    background: #666 !important;
    opacity: 0.7 !important;
}

/* Bulgaria Main Map Container */
.bulgaria-main-map {
    width: 100% !important;
    max-width: 460px !important;
    margin: 0 auto !important;
}

.bulgaria-main-map.hidden {
    display: none !important;
}

/* All paths - dark gray by default, no hover effects */
.bulgaria-main-map .bgsvg svg path {
    fill: #666666 !important;
    stroke: #ffffff !important;
    cursor: default !important;
}

/* All circles - dark gray by default, no hover effects */
.bulgaria-main-map .bgsvg svg circle {
    fill: #666666 !important;
    stroke: #ffffff !important;
    cursor: default !important;
}

/* Disable hover effects on all paths and circles except BG-03 and city_3 */
.bulgaria-main-map .bgsvg svg path:not(#BG-03):hover,
.bulgaria-main-map .bgsvg svg circle:not(#city_3):hover {
    fill: #666666 !important;
    stroke: #ffffff !important;
    opacity: 1 !important;
    cursor: default !important;
}

/* Varna oblast (BG-03) - light gray to indicate it has properties */
.bulgaria-main-map .bgsvg svg path#BG-03 {
    fill: #d9cdc0 !important;
    stroke: #ffffff !important;
    cursor: pointer !important;
}

/* Varna city circle (city_3) - keep original white */
.bulgaria-main-map .bgsvg svg circle#city_3 {
    fill: #ffffff !important;
    stroke: #CBB398 !important;
    cursor: pointer !important;
}

/* Hover effects - only for BG-03 and city_3 */
.bulgaria-main-map .bgsvg svg path#BG-03:hover,
.bulgaria-main-map .bgsvg svg circle#city_3:hover {
    opacity: 0.8 !important;
    cursor: pointer !important;
}

/* Clicked/Active state - maximum specificity to override default */
.bulgaria-main-map .bgsvg svg path#BG-03.clicked,
.bulgaria-main-map .bgsvg svg path#BG-03.active,
.bulgaria-main-map .bgsvg svg path#BG-03.clicked.active,
.bulgaria-map-container .bulgaria-main-map .bgsvg svg path#BG-03.clicked,
.bulgaria-map-container .bulgaria-main-map .bgsvg svg path#BG-03.active,
.bulgaria-map-container .bulgaria-main-map .bgsvg svg path#BG-03.clicked.active,
#bulgaria-map-container .bulgaria-map-container .bulgaria-main-map .bgsvg svg path#BG-03.clicked,
#bulgaria-map-container .bulgaria-map-container .bulgaria-main-map .bgsvg svg path#BG-03.active,
#bulgaria-map-container .bulgaria-map-container .bulgaria-main-map .bgsvg svg path#BG-03.clicked.active,
svg path#BG-03.clicked,
svg path#BG-03.active,
svg path#BG-03.clicked.active {
    fill: rgb(153, 0, 0) !important;
    stroke: #ffffff !important;
    stroke-width: 3px !important;
    opacity: 1 !important;
}

.bulgaria-main-map .bgsvg svg circle#city_3.clicked,
.bulgaria-main-map .bgsvg svg circle#city_3.active,
.bulgaria-main-map .bgsvg svg circle#city_3.clicked.active,
.bulgaria-map-container .bulgaria-main-map .bgsvg svg circle#city_3.clicked,
.bulgaria-map-container .bulgaria-main-map .bgsvg svg circle#city_3.active,
.bulgaria-map-container .bulgaria-main-map .bgsvg svg circle#city_3.clicked.active,
#bulgaria-map-container .bulgaria-map-container .bulgaria-main-map .bgsvg svg circle#city_3.clicked,
#bulgaria-map-container .bulgaria-map-container .bulgaria-main-map .bgsvg svg circle#city_3.active,
#bulgaria-map-container .bulgaria-map-container .bulgaria-main-map .bgsvg svg circle#city_3.clicked.active,
svg circle#city_3.clicked,
svg circle#city_3.active,
svg circle#city_3.clicked.active {
    fill: rgb(153, 0, 0) !important;
    stroke: #ffffff !important;
    stroke-width: 3px !important;
    opacity: 1 !important;
}

/* Varna Oblast and City map containers (detailed maps, hidden initially) */
.varna-oblast-map {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    margin-top: 15px !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.varna-oblast-map.hidden {
    display: none !important;
}

.varna-oblast-map img {
    height: auto !important;
    max-width: 100% !important;
    max-height: 500px !important;
    display: block !important;
    object-fit: contain !important;
}

.varna-city-map {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    margin-top: 15px !important;
    max-height: 500px !important;
    height: 500px !important;
    position: relative !important;
}

.varna-city-map.hidden {
    display: none !important;
}

/* Back button styling */
.back-to-main-map {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 1000 !important;
    background: #333 !important;
    color: white !important;
    border: none !important;
    padding: 8px 12px !important;
    cursor: pointer !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    transition: background 0.3s !important;
}

.back-to-main-map:hover {
    background: #555 !important;
}

/* Mobile styles */
@media (max-width: 768px) {
    .bulgaria-main-map {
        max-width: 100% !important;
    }
    
    .varna-oblast-map img,
    .varna-city-map {
        max-height: 400px !important;
    }
}

/* Center the Bulgaria map SVG */
#bulgaria-map-container .bgsvg,
#bulgaria-map-container svg {
    display: block !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Additional centering for Bulgaria map plugin */
.bgsvg {
    text-align: center !important;
    display: block !important;
    margin: 0 auto !important;
}

.bgsvg svg {
    display: block !important;
    margin: 0 auto !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
}

/* Override for varna-city-map SVG specifically */
.bulgaria-map-container .bgsvg svg#varna-city-map,
.varna-city-map .bgsvg svg#varna-city-map {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    margin: 0 auto !important;
    object-fit: contain !important;
}

/* Hide only elements explicitly marked as hidden by JavaScript */
.bgsvg svg path.hidden-map-element,
.bgsvg svg circle.hidden-map-element {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* CRITICAL: Ensure ALL Varna city SVG paths are visible - NO restrictions */
.varna-city-map-container .bgsvg svg,
.varna-city-map-svg svg,
.bulgaria-map-container .bgsvg svg {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

.varna-city-map-container .bgsvg svg path,
.varna-city-map-container .bgsvg svg circle,
.varna-city-map-svg svg path,
.varna-city-map-svg svg circle,
.bulgaria-map-container .bgsvg svg path,
.bulgaria-map-container .bgsvg svg circle {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Ensure BG-03 and city_3 are visible */
.bgsvg svg path#BG-03,
.bgsvg svg path[id*="BG-03"]:not(.hidden-map-element),
.bgsvg svg circle#city_3,
.bgsvg svg circle[id*="city_3"]:not(.hidden-map-element) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Ensure Varna city map SVG is properly sized */
.varna-city-map-container .bgsvg,
.varna-city-map-svg,
.varna-city-map .bgsvg {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

/* Ensure the SVG itself fits within bulgaria-map-container - show full map, can be larger for dragging */
.bulgaria-map-container #varna-city-map,
.varna-city-map #varna-city-map,
.bulgaria-map-container .bgsvg svg#varna-city-map,
.varna-city-map .bgsvg svg#varna-city-map {
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    display: block !important;
    margin: 0 !important;
    object-fit: contain !important;
    overflow: visible !important;
    transform-origin: top left !important;
}

/* When full-width, ensure SVG scales to fit within container */
.varna-city-map.full-width #varna-city-map,
.varna-city-map.full-width .bgsvg svg#varna-city-map,
.varna-city-map.full-width svg {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    display: block !important;
    margin: 0 auto !important;
    object-fit: contain !important;
}

/* Ensure SVG container also respects height - clip content but allow dragging */
.varna-city-map .bgsvg,
.varna-city-map .varna-city-map-svg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Make SVG draggable - allow it to be larger than container */
.varna-city-map .bgsvg svg#varna-city-map,
.varna-city-map .varna-city-map-svg svg#varna-city-map {
    cursor: default !important; /* remove drag cursor; arrows handle navigation */
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

/* Area dropdown: show default cursor on disabled items (mapped-off) */
.bootstrap-select .dropdown-menu li.disabled,
.bootstrap-select .dropdown-menu li.disabled > a,
.bootstrap-select .dropdown-menu li.disabled > a:hover,
.bootstrap-select .dropdown-menu li.disabled > a:focus,
.bootstrap-select .dropdown-menu li.disabled > a:active,
.bootstrap-select .dropdown-menu li.disabled > a * {
    cursor: default !important;
    pointer-events: unset !important;
    color: #b3b3b3 !important;
    background-color: transparent !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

/* When city map is full-width, ensure SVG container fits within the smaller container - clip for dragging */
.varna-city-map.full-width .bgsvg,
.varna-city-map.full-width .varna-city-map-svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.varna-city-map-container .bgsvg svg,
.varna-city-map-svg svg,
.varna-city-map .bgsvg svg {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    display: block !important;
    object-fit: contain !important;
}

/* Specific rules for varna-city-map SVG to fit container - ensure full viewBox is shown */
.bulgaria-map-container #varna-city-map,
.varna-city-map #varna-city-map {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    overflow: visible !important;
}

/* Ensure transform on BG-03 path is preserved */
.bgsvg svg path#BG-03,
.bgsvg svg path[id*="BG-03"]:not(.hidden-map-element) {
    transform-origin: center !important;
}

/* Mobile-specific: Ensure proper SVG sizing and prevent overflow */
@media (max-width: 767px) {
    /* Override plugin's max-width that might be causing issues */
    .bgsvg {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        transform: none !important;
    }
    
    .bgsvg svg {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 400px !important;
        object-fit: contain !important;
        transform: none !important;
        /* Lock viewBox using CSS (can't set viewBox via CSS, but this helps) */
    }
    
    /* Prevent any transforms on the path element on mobile */
    .bgsvg svg path#BG-03,
    .bgsvg svg path[id*="BG-03"] {
        transform: none !important;
        /* Prevent any scaling */
        transform-origin: center !important;
    }
    
    /* Ensure map container doesn't overflow on mobile */
    #bulgaria-map-container {
        overflow: hidden !important;
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
    }
    
    .bulgaria-map-container,
    .varna-city-map-container {
        max-width: 100% !important;
        padding: 10px !important;
    }
}
/* ---------------------------------------------------------------------------
 * Agent photo (.agentpict) — show the FULL image instead of cropping it.
 * The theme renders these as background-image divs with `background-size: cover`
 * in a WIDE (landscape) box, which crops tall/portrait agent photos.
 * Fix: switch to `contain` (never crops) AND give the large agent photos a
 * portrait-shaped box so the whole photo fills nicely instead of a narrow strip.
 * ------------------------------------------------------------------------- */
.agentpict {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #f5f5f5;
}

/* Large agent photos (single-agent page + property agent box): portrait box. */
.agentpic-wrapper .agent-listing-img-wrapper .agentpict,
.wpestate_single_agent_details_wrapper_type2 .agentpict {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 5;
}
/* Let the wrapper grow with the taller photo (avoid clipping). */
.agentpic-wrapper .agent-listing-img-wrapper {
    height: auto !important;
    width: 260px !important;      /* smaller (~half) photo */
    max-width: 100% !important;
}
/* Shrink the photo column to the photo so the name sits right beside it. */
.wpestate_single_agent_details_wrapper .agentpic-wrapper {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 50% !important;
}
.wpestate_single_agent_details_wrapper .agent_details {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
}

/* Sidebar agent avatar — same logic as .agentpict: full image, no crop, portrait box. */
.agent_unit_widget_sidebar_wrapper .agent_unit_widget_sidebar_wrapper_unit .agent_unit_widget_sidebar {
    width: 120px !important;
    height: auto !important;
    aspect-ratio: 4 / 5;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #f5f5f5;
}

/* Agent grid/slider cards (Elementor "agents" widgets) — same logic: full image,
   no crop, uniform portrait box. The card image is an <img>, so use object-fit. */
.wpresidence_agent_unit_wrapper .agent_unit .agent-unit-img-wrapper {
    aspect-ratio: 4 / 5;
    background-color: #f5f5f5;
}
.wpresidence_agent_unit_wrapper .agent_unit .agent-unit-img-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* ---------------------------------------------------------------------------
 * HOMEPAGE advanced search only (scoped to .home) — match the shortcode forms
 * (Продай своя имот / Кандидати): fully-rounded pill fields, white fill, soft
 * shadow, red pill button, and a taller, centered box with a 3D drop-shadow.
 * ------------------------------------------------------------------------- */
.home .adv-search-1 .form-control,
.home .adv-search-1 .advanced_select,
.home .adv-search-1 .dropdown-toggle,
.home .adv-search-1 .btn.dropdown-toggle,
.home .adv-search-1 .filter_menu_trigger,
.home .adv-search-1 .bootstrap-select > .btn,
.home .adv-search-1 .wpestate-form-control-sh,
.home .adv-search-1 .wpestatemultiselectselectpicker,
.home .adv-search-1 .property-id-search-field,
.home .adv-search-mobile .form-control,
.home .adv-search-mobile .dropdown-toggle,
.home .adv-search-mobile .filter_menu_trigger {
    background-color: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 999px !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05) !important;
    color: #222 !important;
}

/* Red focus glow like the shortcode form. */
.home .adv-search-1 .form-control:focus,
.home .adv-search-1 .property-id-search-field:focus,
.home .adv-search-1 .dropdown-toggle:focus {
    border-color: #CF1409 !important;
    box-shadow: 0 6px 22px rgba(207, 20, 9, 0.15) !important;
}

/* "Търси имоти" submit — red pill with soft red shadow, like "Обяви Имот". */
.home .adv-search-1 .advanced_submit_4,
.home .adv-search-1 input[type="submit"].wpresidence_button,
.home .adv-search-mobile .advanced_submit_4 {
    border-radius: 999px !important;
    box-shadow: 0 10px 24px rgba(207, 20, 9, 0.28) !important;
}

/* Bigger rounded corners on the whole search box. */
.home #search_wrapper .search_wrapper_color,
.home .search_wrapper .search_wrapper_color {
    border-radius: 24px !important;
}
.home .adv-search-1 {
    border-radius: 24px !important;
}

/* Taller, centered, with a soft 3D drop-shadow like the shortcode form cards. */
.home .search_wrapper .search_wrapper_color {
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.22) !important;
}
.home .search_wr_6 .adv-search-1 {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
    margin: 0 auto !important;   /* keep the form centered */
}

/* ---------------------------------------------------------------------------
 * Homepage main menu — white links, red hover; subtle scale on hover once the
 * header becomes sticky. Uses [id^="menu-main-menu"] so it works whether the
 * menu id is "menu-main-menu" or "menu-main-menu-1" (WP only adds the -1 suffix
 * when it needs to de-duplicate). Scoped to .master_header (desktop menu).
 * ------------------------------------------------------------------------- */
.home .master_header [id^="menu-main-menu"] > li > a {
    color: #fff !important;
    display: inline-block !important; /* needed so transform:scale works on the link */
    transition: color 0.2s ease, transform 0.3s ease-in-out !important;
}
/* Hover: scale up a bit in both states. Normal header also turns red. */
.home .master_header [id^="menu-main-menu"] > li:hover > a {
    color: #CF1409 !important;
    transform: scale(1.1) !important;
}
/* Sticky header: keep the links WHITE on hover (scale only, no red). */
.home .master_header.master_header_sticky [id^="menu-main-menu"] > li:hover > a {
    color: #fff !important;
}