.weather {
    position: absolute !important; /* ✅ stays relative to map container */
    top: 11px !important;          /* ✅ slightly lower (adjust if needed) */
    right: 177px !important;       /* ✅ aligned to right edge */
    z-index: 9999 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    height: 27px !important;
    padding: 0 !important;
    border-radius: 0px !important;
    background: rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(0px) !important;
    -webkit-backdrop-filter: blur(0px) !important;
    box-shadow: 0 0px 0px rgba(0,0,0,0) !important;
    opacity: 1 !important;
    pointer-events: none !important;
    min-width: 0px !important;
    max-width: 0px !important;
    width: 0px !important;
    white-space: nowrap !important;
    isolation: isolate !important;
}

.weather #w_icon {
    background-size: 33px 33px !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    width: 33px !important;
    height: 33px !important;
    flex-shrink: 0 !important;
    opacity: 1 !important;

    /* Drop icon slightly lower */
    position: relative !important;
    top: 3px !important;
}

/* --- TEMPERATURE TEXT --- */
.weather span {
    font-size: 15px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    opacity: 1 !important;
    line-height: 1 !important;
}


/* Hide the measurement ruler button */
#measure-btn {
  display: none !important;
}

/* Hide the scale line / 100m measurement bar */
#scale-line-target,
.ol-scale-line {
  display: none !important;
}

.sheet_detail.sheet_detail_minimized .sheet_detail_image {
    height: 270px;
}
.sheet_detail.sheet_detail_minimized .sheet_detail_video {
    height: 270px;
}

.sheet_detail_image {
    height: 270px;
}
.sheet_detail_video {
    height: 270px;
}


/* Dark mode style for sheet detail sections */
.sheet_detail,
.new_sheet_detail {
    background: #000000 !important;
    color: #FFFFFF !important;
}

/* Optional: adjust link colors for visibility */
.sheet_detail a,
.new_sheet_detail a {
    color: #1E90FF !important; /* Dodger Blue for contrast */
}

/* targets elements with both classes "far" and "fa-comment" / "fa-clock" */
.sheet_detail_container .far.fa-comment-alt,
.sheet_detail_container .far.fa-clock {
    display: none !important;
}







/****************************************************
 * FINAL CLEAN LAYOUT - icons hidden, images visible *
 ****************************************************/

/* Hide ONLY the "report a problem" section */
#report_issue_div {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Hide unwanted icons (comment, clock, warning, etc.) */
.far.fa-comment,
.far.fa-clock,
.far.fa-triangle-exclamation,
.far.fa-images {
    display: none !important;
    visibility: hidden !important;
}

/* Each element should act as a centered image container */
.sheet_detail_features p {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    flex: 0 1 auto !important;
}

/* Ensure images show properly */
.sheet_detail_features img {
    display: block !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    z-index: 1 !important;
}
/* Hide any icons that might remain */
.sheet_detail_features i {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Remove stray empty children */
.sheet_detail_features > *:empty {
    display: none !important;
}

/* Fix bottom spacing under the entire block */
.sheet_detail_container {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Remove all lines visually */
hr {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}
/* Center anchor links inside sheet details */
.sheet_detail a,
.new_sheet_detail a {
    text-align: center;
    display: block;
    margin: 0 auto;
    font-size: 16px; /* Increased font size */
}

/* Center the features value content */
.features_value {
    text-align: center;
    display: block;      /* ensures it's treated like a block for centering */
    margin: 0 auto;
    font-size: 18px;     /* optional adjustment */
}

.category_detail img {
    width: 15px !important;        /* Force fixed width */
    height: auto !important;       /* Maintain aspect ratio */
    max-width: none !important;    /* Remove max limits if any */
    max-height: none !important;
    display: block !important;
    margin: 0 auto !important;     /* Center if needed */
    object-fit: contain !important; /* Ensure image doesnT stretch */
}
.list_rating .category_detail img {
    width: 15px !important;        /* Adjust as needed */
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
    object-fit: contain !important;
    margin: 0 auto !important;
}









.new_marker_btn {
    background: rgba(0, 0, 0, 0.1) !important;
    color: #ffffff !important;
    border-radius: 8px;
    padding: 6px 12px;
    transition: background 0.3s ease;
}

.new_marker_msg {
    background: rgba(0, 0, 0, 0.8) !important;
    color: #ffffff !important;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
}
.drag_marker_msg {
    background: rgba(0, 0, 0, 0.8) !important;
    color: #ffffff !important;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
}
.dialog-alert {
    background: rgba(0, 0, 0, 0.8) !important;
    color: #ffffff !important;
    font-weight: bold !important;
    border-radius: 12px !important;
    padding: 16px !important;
    width: auto !important;
    max-width: 90% !important;
    margin: auto;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
    text-align: center !important;
}












/* Dialog title and message styling */
.dialog-title,
.dialog-message {
    color: #ffffff !important;
    font-weight: bold !important;
    margin-bottom: 12px;
}
/* Confirm ("Yes") button */
.dialog-confirm {
    background: #ffffff !important;
    color: #000000 !important;
    font-weight: bold !important;
    padding: 8px 16px;
    border-radius: 8px;
    display: inline-block;
    margin: 8px 4px;
    cursor: pointer;
}

/* Cancel ("No") button */
.dialog-cancel {
    background: #000000 !important;
    color: #ffffff !important;
    font-weight: bold !important;
    padding: 8px 16px;
    border-radius: 8px;
    display: inline-block;
    margin: 8px 4px;
    cursor: pointer;
}




/* --- LIST AREA --- */
#list_area {
    background: rgba(0, 0, 0, 0.35) !important;
    color: #fff !important;
}

/* --- FEATURED SLIDER --- */
#featured_container,
#featured_slider .list_block_featured {
    background: rgba(0, 0, 0, 0.35) !important;
    color: #fff !important;
    border: 2px solid rgba(0, 0, 0, 0.35) !important;
}
.list_block_featured .list_name,
.list_block_featured .list_address {
    color: #fff !important;
}
#featured_container {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
#featured_container {
  display: none !important;
}























/* ========================================================= */
/* --- CATEGORY BOX STYLING (TRANSPARENT GLASS LOOK) --- */
/* ========================================================= */

.categories_div {
    background: rgba(0, 0, 0, 0.35) !important;   /* translucent black */
    color: #ffffff !important;                    /* white text */
    backdrop-filter: blur(6px) !important;        /* smooth blur */
    -webkit-backdrop-filter: blur(6px) !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4) !important;
    font-size: 15px !important;
    z-index: 9999 !important;
}

/* --- Header ("Filters", buttons, etc.) --- */
#category_header,
.title-filters,
.reset-filters,
.select_all_categories_btn,
.reset_categories_btn {
    color: #ffffff !important;
    background: transparent !important;
    text-transform: capitalize !important;
    font-weight: 500 !important;
}

/* --- Category list items --- */
.category-list-item,
.category,
.category-title,
.category-count {
    color: #ffffff !important;
    background: transparent !important;
    font-size: 15px !important;
}

/* --- Checkbox icons and category icons --- */
.category-icon-check svg path,
.category-icon-image svg path {
    fill: #ffffff !important;   /* white icons */
}

/* --- Hover & active visual feedback --- */
.category-list-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    transition: background 0.2s ease-in-out !important;
    border-radius: 8px !important;
}

/* --- Optional: make "select all / reset" buttons clearer --- */
.select_all_categories_btn,
.reset_categories_btn {
    padding: 4px 8px !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    transition: background 0.2s ease-in-out !important;
}

.select_all_categories_btn:hover,
.reset_categories_btn:hover {
    background: rgba(255, 255, 255, 0.25) !important;
}

/* --- Category icons (colored squares) --- */
.category_icon {
    border-radius: 4px !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    box-shadow: 0 0 4px rgba(0,0,0,0.3) !important;
}






/* ========================================================= */
/* --- CATEGORY BOX: BUTTON ALIGNMENT FIX --- */
/* ========================================================= */

/* Container holding the "Select All" + "Reset" buttons */
.reset-filters {
    display: flex !important;
    justify-content: flex-start !important;   /* ✅ align buttons left */
    align-items: center !important;
    gap: 6px !important;                      /* ✅ spacing between buttons */
    margin-left: 6px !important;              /* ✅ slight left nudge */
    margin-top: 2px !important;
}

/* Each button box inside */
.select_all_categories_btn,
.reset_categories_btn {
    margin: 0 !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border: none !important;
    box-shadow: none !important;
    text-transform: uppercase !important;
    transition: background 0.2s ease-in-out !important;
}

/* Hover/tap feedback */
.select_all_categories_btn:hover,
.reset_categories_btn:hover {
    background: rgba(255, 255, 255, 0.25) !important;
}










/* ========================================================= */
/* --- FIX: Remove background spill behind filter icon --- */
/* ========================================================= */

.search_div {
    overflow: visible !important;
    padding-right: 2px !important;
}

.search_div .filter_icon {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
}

.search_div .filter_icon i {
    position: relative !important;
    top: 1px !important;
}




/* --- LIST ICON --- */
.list_icon,
.list_icon i,
.list_icon svg {
    color: #ffffff !important;           /* ✅ force white */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: 0 0 3px rgba(0,0,0,0.4) !important;
}


















/* ========================================================= */
/* --- FILTER ICON + CATEGORY COUNT ALIGNMENT FIX --- */
/* ========================================================= */

/* Adjust the number (count_categories) positioning & spacing */
#count_categories {
    position: relative !important;
    top: -1px !important;         /* 🔧 vertical alignment (raise/lower number) */
    margin-right: 5px !important; /* 🔧 add gap between number and icon */
    font-size: 13px !important;   /* 🔧 slightly smaller than icon */
    font-weight: 600 !important;  /* optional: make number stand out */
    color: #ffffff !important;    /* keep consistent with theme */
    opacity: 0.9 !important;
}

/* Optional fine-tune for the icon itself */
.filter_icon i {
    position: relative !important;
    top: 1px !important;          /* 🔧 balances vertical alignment visually */
}














/* --- SEARCH / FILTER ICONS --- */
.search_icon,
.filter_icon {
    background: transparent !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    width: 34px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
    z-index: 10000 !important;
}

/* --- Search icon only (2px smaller) --- */
.search_icon i {
    font-size: 13px !important; /* ✅ reduced from 15px to 13px */
    line-height: 1 !important;
    color: #ffffff !important;
    text-shadow: 0 0 3px rgba(0,0,0,0) !important;
}

/* --- Filter icon (unchanged) --- */
.filter_icon i {
    font-size: 15px !important;
    line-height: 1 !important;
    color: #ffffff !important;
    text-shadow: 0 0 3px rgba(0,0,0,0) !important;
}



/* =========================================================
   FIX: Force Dark Translucent Style on Search Input
   ========================================================= */

#searchbox,
#searchbox:hover,
#searchbox:focus,
#searchbox:active,
.search_div input,
.search_div input:hover,
.search_div input:focus,
.search_div input:active,
input:-webkit-autofill,
input:-internal-autofill-selected {
  background: rgba(0, 0, 0, 0.1) !important;
  color: #fff !important;
  box-shadow: 0 0 0px 1000px rgba(0, 0, 0, 0.1) inset !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff !important;
  border: none !important;
  outline: none !important;
  transition: background 0.2s ease-in-out !important;
}

#searchbox::placeholder {
  color: rgba(255, 255, 255, 0.85) !important;
}

.search_div {
  background: rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}


/* =========================================================
   FIX: Remove light-gray background layer under search bar
   ========================================================= */

/* Target Chrome/Edge autofill + base repaint layer */
input:-webkit-autofill,
input:-internal-autofill-selected {
  transition: background-color 9999s ease-in-out 0s !important;
  -webkit-box-shadow: 0 0 0px 1000px rgba(0, 0, 0, 0.1) inset !important;
  box-shadow: 0 0 0px 1000px rgba(0, 0, 0, 0.1) inset !important;
}

/* Enforce color overlay for safety */
#searchbox {
  background-color: rgba(0, 0, 0, 0.1) !important;
  background-image: none !important;
}


/* =========================================================
   FIX: Search Results (list_block) hover + text color
   ========================================================= */

.list_block {
  background: rgba(0, 0, 0, 0.1) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  transition: background 0.2s ease-in-out !important;
}

.list_block:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

.list_address,
.list_name {
  color: #ffffff !important;
}

/* =========================================================
   FINAL FIX – Override injected white background on search bar (runtime safe)
   ========================================================= */

/* Super-specific selector to override inline and runtime styles */
body .search_div input#searchbox,
html body .search_div input[type="search"]#searchbox,
html body .search_div input#searchbox:focus,
html body .search_div input#searchbox:active,
html body .search_div input#searchbox:hover {
  background: rgba(0, 0, 0, 0.1) !important;
  background-color: rgba(0, 0, 0, 0.1) !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  border: none !important;
  outline: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff !important;
  transition: background 0.2s ease-in-out !important;
}

/* Kill any residual inline or theme styles applied after render */
body .search_div input#searchbox[style],
body .search_div input#searchbox[style*="background"],
body .search_div input#searchbox[style*="rgb(255"],
body .search_div input#searchbox[style*="#fff"] {
  background: rgba(0, 0, 0, 0.1) !important;
  background-color: rgba(0, 0, 0, 0.1) !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}


/* =========================================================
   OVERRIDE JQUERY UI GLOBAL WHITE BACKGROUND
   ========================================================= */
.ui-widget-content,
.ui-widget-content input,
.ui-widget-content .ui-input-text,
.ui-widget-content .ui-state-default,
.ui-widget,
.ui-widget input[type="text"],
.ui-widget input[type="search"],
#searchbox.ui-widget-content {
  background: rgba(0, 0, 0, 0.35) !important;
  background-color: rgba(0, 0, 0, 0.35) !important;
  border: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff !important;
  outline: none !important;
  box-shadow: none !important;
}

/* =========================================================
   FIX: Search Radius Background & Appearance
   ========================================================= */

/* Ensure the background of the radius container is dark and translucent */
#search_radius_container {
    background: rgba(0, 0, 0, 0.35) !important;   /* Translucent dark background */
    color: #ffffff !important;                    /* White text */
    border-radius: 8px !important;                /* Rounded corners */
    padding: 10px !important;                     /* Padding around the radius section */
    box-shadow: 0 4px 10px rgba(0,0,0,0.5) !important; /* Soft shadow to highlight */
    z-index: 9999 !important;                     /* Ensure it appears on top */
}

/* Styling for the range input (radius slider) */
#search_radius_slider {
    background: rgba(255, 255, 255, 0.1) !important;   /* Light translucent background */
    border-radius: 5px !important;                    /* Rounded corners */
    width: 100% !important;                            /* Full width of the container */
    height: 6px !important;                           /* Height of the slider */
    -webkit-appearance: none !important;              /* Removes default appearance */
    appearance: none !important;
    outline: none !important;                         /* Remove outline on focus */
}

/* Styling for the slider handle */
#search_radius_slider::-webkit-slider-runnable-track {
    background: rgba(255, 255, 255, 0.1) !important;   /* Light translucent track */
    border-radius: 5px !important;
    height: 6px !important;
}

/* Handle (thumb) appearance */
#search_radius_slider::-webkit-slider-thumb {
    background: #ffffff !important; /* White handle */
    border-radius: 50% !important;   /* Round thumb */
    width: 20px !important;          /* Thumb width */
    height: 20px !important;         /* Thumb height */
    cursor: pointer !important;     /* Pointer cursor on hover */
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* Adjust handle styling for Firefox */
#search_radius_slider::-moz-range-track {
    background: rgba(255, 255, 255, 0.1) !important;   /* Light translucent track */
    border-radius: 5px !important;
    height: 6px !important;
}

/* Handle (thumb) appearance for Firefox */
#search_radius_slider::-moz-range-thumb {
    background: #ffffff !important; /* White handle */
    border-radius: 50% !important;   /* Round thumb */
    width: 20px !important;          /* Thumb width */
    height: 20px !important;         /* Thumb height */
    cursor: pointer !important;     /* Pointer cursor on hover */
}

/* Adjust handle for Internet Explorer */
#search_radius_slider::-ms-track {
    background: rgba(255, 255, 255, 0.1) !important;   /* Light translucent track */
    border-radius: 5px !important;
    height: 6px !important;
    border: none !important;
}

#search_radius_slider::-ms-thumb {
    background: #ffffff !important; /* White handle */
    border-radius: 50% !important;   /* Round thumb */
    width: 20px !important;          /* Thumb width */
    height: 20px !important;         /* Thumb height */
    cursor: pointer !important;     /* Pointer cursor on hover */
}

/* Optional: Hover effect on the handle for better user experience */
#search_radius_slider::-webkit-slider-thumb:hover {
    background: #cccccc !important; /* Slightly darker thumb on hover */
}

#search_radius_slider::-moz-range-thumb:hover {
    background: #cccccc !important; /* Slightly darker thumb on hover */
}

#search_radius_slider::-ms-thumb:hover {
    background: #cccccc !important; /* Slightly darker thumb on hover */
}



/* ===================================== */
/* FIX: #button_actions COLOR & HOVER    */
/* ===================================== */

#button_actions {
  color: #ffffff !important;             /* white text */
  text-align: center !important;
  width: 100% !important;
  margin-bottom: 15px !important;
  font-weight: 500 !important;
  transition: color 0.25s ease-in-out !important;
}

/* Anchor or button inside the element */
#button_actions a,
#button_actions div,
#button_actions span {
  color: #ffffff !important;             /* default white text */
  text-decoration: none !important;
  transition: color 0.25s ease-in-out !important;
}

/* Hover/tap state – brighter white */
#button_actions:hover,
#button_actions a:hover,
#button_actions div:hover,
#button_actions span:hover {
  color: #ffffff !important;
  filter: brightness(1.3) !important;    /* subtle glow on hover */
  cursor: pointer !important;
}

/* Optional: ensure background remains transparent/black overlay */
#button_actions {
  background: transparent !important;
}
/* Increase icon size inside button_actions */
#button_actions i {
  font-size: 27px !important; /* Default icon size */
}

/* On hover, increase icon size */
#button_actions:hover i {
  font-size: 28px !important; /* Hover icon size */
}

/* ========================== */
/* 1. Make Rating Text White   */
/* ========================== */
#list_rating_210 span {
  color: #ffffff !important;   /* White text for the rating number */
}

#list_rating_210 .category_icon img {
  width: 15px !important;  /* Adjust size of the icon */
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;  /* Ensure icon maintains its aspect ratio */
}

/* =========================== */
/* 2. Remove Category Icon Border */
/* =========================== */
.category_detail .category_icon {
  border: none !important;    /* Remove any border around the category icon */
  padding: 0 !important;      /* Ensure no padding around the icon */
  margin: 0 !important;       /* Remove any margin that might cause spacing */
}

.popup_rating span, .list_rating span {
    color: #ffffff;
    font-size: 12px;
}










/*******************************************
 * BASE VARIABLES (USE THESE FOR SIZING)
 *******************************************/
:root {
  --btn-size-mobile: 35px;
  --btn-size-desktop: 33px;
  --btn-radius: 10px;
  --btn-bg: rgba(0, 0, 0, 0.1);
  --btn-border: rgba(255, 255, 255, 0.1);
  --btn-shadow: 0 6px 16px rgba(0,0,0,0.35);
  --btn-blur: 0px;
}


/* Move center-right buttons vertically (STAYS) */
.center_right_controls {
  position: absolute !important;
  right: 9px !important;
  top: 39% !important;
  transform: translateY(-50%) !important;
  z-index: 9 !important;
}

/* =========================================================
   RIGHT CENTER CONTROL BUTTONS — IMPROVED VISUAL WEIGHT
   ========================================================= */
.center_right_controls .icon_button,
.center_right_controls .arrow_up,
.center_right_controls .arrow_down {
  background: rgba(0, 0, 0, 0.15) !important;  /* Slightly darker for contrast */
  border: 1px solid rgba(255, 255, 255, 0.25) !important; /* Clear border */
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* Make the icon symbol inside smaller + balanced */
.center_right_controls i {
  font-size: 17px !important; /* ← Change this number to adjust symbol size */
  line-height: 1 !important;
}

.center_right_controls div,
.center_right_controls button,
.center_right_controls .icon_button,
.center_right_controls .arrow_up,
.center_right_controls .arrow_down {
  width: 27px !important;
  height: 27px !important;
}



/*******************************************
 * SWITCH STYLE BUTTON
 *******************************************/
.switch_style {
  width: var(--btn-size-mobile) !important;
  height: var(--btn-size-mobile) !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: var(--btn-radius) !important;
  background: var(--btn-bg) !important;
  border: 1px solid var(--btn-border) !important;
  backdrop-filter: blur(var(--btn-blur)) !important;
  -webkit-backdrop-filter: blur(var(--btn-blur)) !important;
  box-shadow: var(--btn-shadow) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  position: absolute !important;
  left: 3px !important;
  top: -40px !important;
  z-index: 999999 !important;
}


.switch_style img { opacity: 0 !important; }
.switch_style::before {
  content: "" !important;
  width: 70% !important;
  height: 70% !important;
  position: absolute !important;
  background: center/contain no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 24 24'><path d='M12 2 2 7l10 5 10-5-10-5Zm0 7L2 14l10 5 10-5-10-5Zm0 7-7-3.2L2 17l10 5 10-5-3-1.2L12 16Z'/></svg>") !important;
}

/* ==========================================
   DESKTOP ONLY POSITION OVERRIDE (SWITCH STYLE)
   ========================================== */
@media (min-width: 769px) {
  .switch_style {
    left: 3px !important;   /* ← Change horizontal (Desktop) */
    top: -39px !important;  /* ← Change vertical (Desktop) */
  }
}




/*******************************************
 * GLOBE BUTTON
 *******************************************/
.globe_icon {
  width: var(--btn-size-mobile) !important;
  height: var(--btn-size-mobile) !important;
  border-radius: var(--btn-radius) !important;
  background: var(--btn-bg) !important;
  border: 1px solid var(--btn-border) !important;
  backdrop-filter: blur(var(--btn-blur)) !important;
  -webkit-backdrop-filter: blur(var(--btn-blur)) !important;
  box-shadow: var(--btn-shadow) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  left: 43px !important;
  bottom: 4px !important;
  z-index: 999999 !important;
}
.globe_icon i { font-size: 20px !important; color: #fff !important; }


/*******************************************
 * HOME BUTTON
 *******************************************/
.home_icon {
  width: var(--btn-size-mobile) !important;
  height: var(--btn-size-mobile) !important;
  border-radius: var(--btn-radius) !important;
  background: var(--btn-bg) !important;
  border: 1px solid var(--btn-border) !important;
  backdrop-filter: blur(var(--btn-blur)) !important;
  -webkit-backdrop-filter: blur(var(--btn-blur)) !important;
  box-shadow: var(--btn-shadow) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  bottom: 4px !important;
  left: 83px !important;
  z-index: 999999 !important;
}
.home_icon i { font-size: 20px !important; color: #fff !important; }




/*******************************************
 * CLOSE (X) BUTTON
 *******************************************/
.close_icon,
#close_sheet_btn {
  width: var(--btn-size-mobile) !important;
  height: var(--btn-size-mobile) !important;
  border-radius: var(--btn-radius) !important;
  background: var(--btn-bg) !important;
  border: 1px solid var(--btn-border) !important;
  backdrop-filter: blur(var(--btn-blur)) !important;
  box-shadow: var(--btn-shadow) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  right: 12px !important;
  bottom: 15px !important;
  z-index: 99999999 !important;
}
.close_icon i,
#close_sheet_btn i { font-size: 22px !important; color: #fff !important; }







/*******************************************
 * DESKTOP SIZE OVERRIDE
 *******************************************/
@media (min-width: 769px) {
  .switch_style,
  .globe_icon,
  .home_icon,
  .close_icon,
  #close_sheet_btn {
    width: var(--btn-size-desktop) !important;
    height: var(--btn-size-desktop) !important;
  }
}


/*******************************************
 * CENTER RIGHT BUTTONS (UNCHANGED)
 *******************************************/
.center_right_controls div,
.center_right_controls button,
.center_right_controls .icon_button,
.center_right_controls .arrow_up,
.center_right_controls .arrow_down {
  width: var(--btn-size-mobile) !important;
  height: var(--btn-size-mobile) !important;
  border-radius: var(--btn-radius) !important;
  background: var(--btn-bg) !important;
  border: 1px solid var(--btn-border) !important;
  backdrop-filter: blur(var(--btn-blur)) !important;
  box-shadow: var(--btn-shadow) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 2px 0 !important;
  padding: 0 !important;
  z-index: 9 !important;
}
.center_right_controls i {
  font-size: 17px !important;
  color: #ffffff !important;
}


/*******************************************
 * ✅ SEPARATED — OPENLAYERS ZOOM BUTTONS
 *******************************************/
.ol-zoom {
  position: absolute !important;
  margin: 5px 7 !important;
  right: 34px !important;   /* ← Change horizontal placement independently */
  bottom: -7px !important;  /* ← Adjust vertical placement independently */
  z-index: 999999 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: -2px !important; /* ← EXACT 2PX GAP */
}

.ol-zoom .ol-zoom-in,
.ol-zoom .ol-zoom-out {
  margin: 5px 2px !important;
  width: var(--btn-size-mobile) !important;
  height: var(--btn-size-mobile) !important;
  border-radius: var(--btn-radius) !important;
  background: var(--btn-bg) !important;
  border: 1px solid var(--btn-border) !important;
  backdrop-filter: blur(var(--btn-blur)) !important;
  box-shadow: var(--btn-shadow) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  font-size: 38px !important;
  padding: 0 !important;
}

@media (min-width: 769px) {
  .ol-zoom .ol-zoom-in,
  .ol-zoom .ol-zoom-out {
    width: var(--btn-size-desktop) !important;
    height: var(--btn-size-desktop) !important;
    font-size: 30px !important;
  }
}

/* INDIVIDUAL OL ZOOM BUTTON POSITION ADJUSTMENTS */
.ol-zoom .ol-zoom-in {
  margin-left: -9px !important; /* Move left */
}

.ol-zoom .ol-zoom-out {
  margin-left: 1px !important; /* Move right */
}

/* 🔒 Permanent visible overlay icon (doesn't block click) */
.switch_style::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 70%;
  height: 70%;
  margin: auto;
  pointer-events: none !important; /* <-- allows click-through */
  background: center/contain no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 24 24'><path d='M12 2 2 7l10 5 10-5-10-5Zm0 7L2 14l10 5 10-5-10-5Zm0 7-7-3.2L2 17l10 5 10-5-3-1.2L12 16Z'/></svg>") !important;
  opacity: 0.95;
  z-index: 2;
}