/* Classiera Map UI — loaded after css/classiera-map.css and the Leaflet 1.9 / MarkerCluster styles */

/* Touch behaviour: page scrolls with one finger when dragging is off, map gets everything when on. */
.classiera-map.leaflet-container.leaflet-touch-zoom { -ms-touch-action: pan-x pan-y; touch-action: pan-x pan-y; }
.classiera-map.leaflet-container.leaflet-touch-drag { -ms-touch-action: pinch-zoom; touch-action: pinch-zoom; }
.classiera-map.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom { -ms-touch-action: none; touch-action: none; }
.classiera-map.leaflet-container.is-drawing,
.classiera-map.leaflet-container.is-drawing * { -ms-touch-action: none !important; touch-action: none !important; cursor: crosshair !important; }
.classiera-map.leaflet-container { -webkit-tap-highlight-color: transparent; }

/* Gesture hint (two fingers / Ctrl + scroll) */
.classiera-map-hint {
	position: absolute; inset: 0; z-index: 1100;
	display: flex; align-items: center; justify-content: center;
	background: rgba(0, 0, 0, .45); color: #fff;
	font-size: 18px; line-height: 1.4; text-align: center; padding: 20px;
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity .25s ease, visibility 0s linear .25s;
}
.classiera-map-hint.is-visible { opacity: 1; visibility: visible; transition: opacity .2s ease; }
@media (max-width: 767px) { .classiera-map-hint { font-size: 16px; } }

/* Tool buttons (fullscreen, my location, draw, clear) */
.classiera-map-tools .classiera-map-btn {
	display: flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; line-height: 34px; color: #333; background: #fff; font-size: 15px;
	text-decoration: none;
}
.classiera-map-tools .classiera-map-btn:hover,
.classiera-map-tools .classiera-map-btn:focus { background: #f4f4f4; color: #000; }
.classiera-map-tools .classiera-map-btn.is-active { background: #3eb0ff; color: #fff; }
.classiera-map-tools .classiera-map-btn.is-hidden { display: none; }
.leaflet-touch .classiera-map-tools .classiera-map-btn { width: 40px; height: 40px; line-height: 40px; font-size: 17px; }

/* Pins */
.classiera-map-pin { transition: transform .15s ease; transform-origin: 50% 100%; }
.leaflet-marker-icon.is-active { filter: drop-shadow(0 0 6px rgba(0, 0, 0, .55)); z-index: 10000 !important; }
.marker-cluster.is-active div { box-shadow: 0 0 0 4px rgba(62, 176, 255, .55); }

/* =====================================================================
   Map ad card — same design as the author page ad box (css/author-page.css .cap-card).
   Colours/fonts: --cap-* variables printed for .classiera-map-ad from Theme Options
   (classiera_map_card_css_vars() → classiera_author_page_css()). Defaults below.
   ===================================================================== */
.classiera-map-ad {
	--cap-primary: #b6d91a; --cap-ink: #232323; --cap-text: #6c6c6c; --cap-mut: #8b939c; --cap-line: #e9ecef;
	--cap-bg: #f5f7f4; --cap-card: #ffffff; --cap-on-primary: #ffffff; --cap-badge-bg: rgba(30, 34, 38, .78);
	--cap-badge-text: #ffffff; --cap-featured: #017fb1; --cap-h3-color: var(--cap-ink);
	--cap-body: inherit; --cap-head: inherit; --cap-h3-font: var(--cap-head); --cap-r: 14px;
}
.classiera-map-ad {
	--cap-primary-d: color-mix(in srgb, var(--cap-primary), #000 18%);
	display: block; margin: 0; background: var(--cap-card); border-radius: var(--cap-r); overflow: hidden; position: relative;
	color: var(--cap-text); font-family: var(--cap-body); font-size: 13px; line-height: 1.45; text-align: left;
}
.classiera-map-ad * { box-sizing: border-box; }
.classiera-map-ad a { text-decoration: none !important; }
.classiera-map-ad__img {
	display: block; position: relative; height: 150px; overflow: hidden;
	border-radius: var(--cap-r) var(--cap-r) 0 0; background: var(--cap-line);
}
.classiera-map-ad__img img { width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; margin: 0; padding: 0; border: 0; transition: transform .35s ease; }
.classiera-map-ad:hover .classiera-map-ad__img img { transform: scale(1.04); }
.classiera-map-ad__img.is-placeholder {
	background: repeating-linear-gradient(45deg, var(--cap-line) 0 10px, var(--cap-bg) 10px 20px);
	display: flex; align-items: center; justify-content: center; color: var(--cap-mut); font-size: 28px;
}
.classiera-map-ad__flag {
	position: absolute; left: 10px; top: 10px; background: var(--cap-badge-bg); color: var(--cap-badge-text);
	-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
	font-size: 10.5px; font-weight: 600; padding: 4px 10px; border-radius: 20px; letter-spacing: .3px; line-height: normal;
}
.classiera-map-ad__feat {
	position: absolute; left: 10px; bottom: 10px; background: var(--cap-card); color: var(--cap-featured);
	font-size: 10.5px; font-weight: 700; padding: 4px 10px; border-radius: 20px; line-height: normal;
	box-shadow: 0 3px 8px color-mix(in srgb, var(--cap-ink) 12%, transparent);
}
.classiera-map-ad__feat i { margin-right: 5px; }
.classiera-map-ad__flag, .classiera-map-ad__feat, .classiera-map-ad__desc, .classiera-map-ad__cat, .classiera-map-ad__cat a, .classiera-map-ad__cat small, .classiera-map-ad__loc { font-family: var(--cap-body) !important; }
.classiera-map-ad__price, .classiera-map-ad__btn, .classiera-map-ad__title, .classiera-map-ad__title a { font-family: var(--cap-head) !important; }
.classiera-map-ad__price {
	position: absolute; right: 10px; bottom: 10px; max-width: calc(100% - 20px);
	background: var(--cap-primary); color: var(--cap-on-primary) !important;
	font-family: var(--cap-head); font-weight: 800; font-size: 13px; line-height: normal; padding: 5px 12px; border-radius: 9px;
	box-shadow: 0 3px 8px color-mix(in srgb, var(--cap-ink) 18%, transparent);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.classiera-map-ad__body { padding: 13px 15px 15px; }
.classiera-map-ad__title {
	margin: 0 !important; padding: 0; font-family: var(--cap-h3-font); font-size: 14px !important; font-weight: 700; line-height: 1.4 !important;
	letter-spacing: -.1px; text-transform: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.classiera-map-ad__title a { color: var(--cap-h3-color) !important; font-family: inherit; }
.classiera-map-ad__title a:hover { color: var(--cap-primary-d) !important; }
.classiera-map-ad__desc {
	margin: 6px 0 0 !important; font-size: 12px; line-height: 1.5; color: var(--cap-mut);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word;
}
.classiera-map-ad__meta { margin-top: 10px; display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; min-width: 0; }
.classiera-map-ad__cat, .classiera-map-ad__loc { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; font-size: 12px; color: var(--cap-mut); line-height: normal; }
.classiera-map-ad__cat a, .classiera-map-ad__cat small { color: var(--cap-mut) !important; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.classiera-map-ad__cat a:hover { color: var(--cap-primary-d) !important; }
.classiera-map-ad__dot {
	flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-right: 7px;
	border-radius: 7px; background: var(--cap-primary); color: var(--cap-on-primary); font-size: 11px; overflow: hidden;
}
.classiera-map-ad__dot img { width: 15px; height: 15px; object-fit: contain; margin: 0; }
.classiera-map-ad__loc i { margin-right: 5px; color: var(--cap-mut); font-size: 11px; }
.classiera-map-ad__loc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.classiera-map-ad__btn {
	display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; width: 100%;
	padding: 9px 12px; border-radius: 10px; font-family: var(--cap-head); font-size: 12.5px; font-weight: 700; line-height: normal;
	background: color-mix(in srgb, var(--cap-primary) 14%, var(--cap-card)); color: var(--cap-primary-d) !important;
	transition: background-color .15s ease, color .15s ease;
}
.classiera-map-ad__btn:hover { background: var(--cap-primary); color: var(--cap-on-primary) !important; }
.classiera-map-ad__btn i { font-size: 11px; transition: transform .15s ease; }
.classiera-map-ad__btn:hover i { transform: translateX(3px); }
.rtl .classiera-map-ad { text-align: right; }
.rtl .classiera-map-ad__price { right: auto; left: 10px; }
.rtl .classiera-map-ad__flag, .rtl .classiera-map-ad__feat { left: auto; right: 10px; }
.rtl .classiera-map-ad__feat i, .rtl .classiera-map-ad__loc i { margin-right: 0; margin-left: 5px; }
.rtl .classiera-map-ad__dot { margin-right: 0; margin-left: 7px; }
.rtl .classiera-map-ad__btn i { transform: scaleX(-1); }
@media (prefers-reduced-motion: reduce) { .classiera-map-ad *, .classiera-map-ad { transition: none !important; } }

/* Popup chrome: the card is the whole popup (no inner padding), white round close button over the image */
.classiera-map-popup-close {
	position: absolute; top: 8px; right: 8px; z-index: 3; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .92); color: #232323; font-size: 18px; line-height: 28px; text-align: center; cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.classiera-map-popup-close:hover { background: #fff; }
.rtl .classiera-map-popup-close { right: auto; left: 8px; }
.classiera-map-gpopup { position: relative; }
.gm-style .gm-style-iw-c { padding: 0 !important; border-radius: 14px !important; box-shadow: 0 12px 30px rgba(0, 0, 0, .22) !important; }
.gm-style .gm-style-iw-d { overflow: hidden !important; padding: 0 !important; max-height: none !important; }
.gm-style .gm-style-iw-chr { display: none; }
.classiera-map-popup .leaflet-popup-content-wrapper { padding: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 12px 30px rgba(0, 0, 0, .22); }
.classiera-map-popup .leaflet-popup-content { margin: 0 !important; line-height: 1.45; }
.classiera-map-popup a.leaflet-popup-close-button {
	top: 8px; right: 8px; width: 28px; height: 28px; font: 18px/28px Arial, sans-serif; color: #232323; text-align: center;
	background: rgba(255, 255, 255, .92); border-radius: 50%; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); z-index: 3;
}
.classiera-map-popup a.leaflet-popup-close-button:hover { background: #fff; color: #000; }

/* Area search bar */
.classiera-map-areabar {
	position: absolute; z-index: 1000; left: 50%; bottom: 18px; transform: translateX(-50%);
	display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
	background: #fff; border-radius: 22px; padding: 6px 14px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .22); font-size: 13px; color: #333; white-space: nowrap;
	max-width: calc(100% - 24px);
}
.classiera-map-areabar__auto { display: flex; align-items: center; }
.classiera-map-areabar__auto label { margin: 0; font-weight: normal; cursor: pointer; display: flex; align-items: center; line-height: 1.3; user-select: none; }
.classiera-map-areabar__auto label::before { width: auto !important; padding-right: 7px !important; font-size: 15px; }
/* Theme button: btn btn-primary round btn-sm btn-style-one (colours from Theme Options via inc/colors.php). */
.classiera-map-areabar__btn { display: none; margin: 0; white-space: nowrap; line-height: 1.4; }
.classiera-map-areabar.show-btn .classiera-map-areabar__btn { display: inline-block; }
.classiera-map-areabar.show-btn .classiera-map-areabar__auto label span { display: none; }
.classiera-map-areabar__loading {
	display: none; width: 16px; height: 16px; border-radius: 50%;
	border: 2px solid #ddd; border-top-color: #3eb0ff; animation: classieraMapSpin .8s linear infinite;
}
.classiera-map-areabar.is-loading .classiera-map-areabar__loading { display: inline-block; }
@keyframes classieraMapSpin { to { transform: rotate(360deg); } }
@media (max-width: 480px) { .classiera-map-areabar { font-size: 12px; padding: 5px 10px; bottom: 12px; } }

/* Page listing card matched to the marker that was tapped */
.classiera-map-listing-active { outline: 2px solid #3eb0ff; outline-offset: 2px; }

/* Fullscreen */
html.classiera-map-fs-open, html.classiera-map-fs-open body { overflow: hidden !important; }
.classiera-map-fs-target {
	position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
	width: 100% !important; height: 100% !important; margin: 0 !important; z-index: 100000 !important;
	background: #fff; display: flex; flex-direction: column;
}
.classiera-map-fs-target .classiera-map,
.classiera-map.classiera-map-fs-target { flex: 1 1 auto; width: 100% !important; height: auto !important; min-height: 0; }
.classiera-map.classiera-map-fs-target { height: 100% !important; }
#classiera_single_map.classiera-map-fs-target, .classiera-map-fs-target#classiera_single_map { padding: 0; border: 0; }

/* ---------- Google engine ---------- */
.classiera-map--google { position: relative; }
.classiera-map--google .classiera-map-tools {
	margin: 10px; background: #fff; border-radius: 4px; overflow: hidden;
	box-shadow: 0 1px 4px -1px rgba(0, 0, 0, .3);
}
.classiera-map--google .classiera-map-tools .classiera-map-btn { width: 40px; height: 40px; font-size: 16px; color: #666; border-bottom: 1px solid #e6e6e6; }
.classiera-map--google .classiera-map-tools .classiera-map-btn:last-child { border-bottom: 0; }
.classiera-map--google .classiera-map-tools .classiera-map-btn:hover { color: #000; }
.classiera-map--google .classiera-map-tools .classiera-map-btn.is-active { color: #fff; }
.classiera-map-drawlayer { position: absolute; inset: 0; z-index: 5; cursor: crosshair; touch-action: none; -ms-touch-action: none; background: rgba(0, 0, 0, 0); }
.classiera-map--google .classiera-map-hint { z-index: 6; }
.classiera-map--google .classiera-map-areabar { z-index: 6; }
.classiera-map-fs-target .classiera_map_search { z-index: 1001; }

/* ---------- Leaflet engine ---------- */
/* OpenStreetMap requires visible attribution (the theme hides attribution links elsewhere). */
.classiera-map--leaflet .leaflet-control-attribution { font-size: 10px; background: rgba(255, 255, 255, .8); }
.classiera-map--leaflet .leaflet-control-attribution a { display: inline !important; color: #0078a8; }

/* ---------- Google engine: HTML markers (OverlayView) ---------- */
.classiera-gm-layer { position: absolute; left: 0; top: 0; }
.classiera-gm-pin {
	position: absolute; transform: translate(-50%, -100%); transform-origin: 50% 100%;
	cursor: pointer; transition: transform .15s ease, filter .15s ease; outline: none;
	-webkit-tap-highlight-color: transparent;
}
.classiera-gm-pin img { display: block; width: 100%; height: 100%; max-width: none !important; margin: 0; padding: 0; border: 0; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.classiera-gm-pin:hover, .classiera-gm-pin:focus-visible, .classiera-gm-pin.is-active {
	transform: translate(-50%, -100%) scale(1.2); z-index: 10; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .45));
}
.classiera-gm-pin--default::before {
	content: ''; position: absolute; left: 50%; top: 0; width: 26px; height: 26px; margin-left: -13px;
	background: #e53935; border: 3px solid #fff; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
	box-shadow: 0 2px 4px rgba(0, 0, 0, .35); box-sizing: border-box;
}
.classiera-gm-cluster {
	position: absolute; transform: translate(-50%, -50%); border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	color: #fff; font: 700 13px/1 Arial, sans-serif; cursor: pointer; outline: none;
	box-shadow: 0 0 0 5px rgba(255, 255, 255, .75), 0 2px 8px rgba(0, 0, 0, .3);
	transition: transform .15s ease; -webkit-tap-highlight-color: transparent; user-select: none;
}
.classiera-gm-cluster:hover, .classiera-gm-cluster:focus-visible, .classiera-gm-cluster.is-active { transform: translate(-50%, -50%) scale(1.12); z-index: 10; }
.classiera-gm-dot {
	position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
	background: #3eb0ff; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .35); box-sizing: border-box;
}

/* ---------- Map ad box designs: theme loop styles (Version 1–9, List) and Classic ---------- */
.classiera-map-legacy { width: 100%; text-align: left; }
.classiera-map-legacy section,
.classiera-map-legacy .tab-divs,
.classiera-map-legacy .tab-content,
.classiera-map-legacy .tab-pane { display: block !important; opacity: 1 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; min-height: 0 !important; }
.classiera-map-legacy .row { display: block !important; margin: 0 !important; }
.classiera-map-legacy .row::before, .classiera-map-legacy .row::after { display: none !important; }
.classiera-map-legacy .item,
.classiera-map-legacy .row > [class*="col-"] {
	position: relative !important; left: auto !important; top: auto !important;
	float: none !important; width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important;
	margin: 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important;
}
.classiera-map-legacy .item > *, .classiera-map-legacy figure { margin-bottom: 0 !important; }
.classiera-map-legacy img { max-width: 100%; }
.classiera-map-legacy .row.cl-list, .classiera-map-legacy-list .row > div > .row { display: block !important; }
.classiera-map-legacy-list [class*="col-"] { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; float: none !important; }
.classiera-map-legacy-list .p-4 { padding: 12px !important; }
/* Full height, no inner scrollbars: Google/Leaflet pan the map so the whole box is visible. */
.classiera-map-legacy { overflow: hidden; }
.classiera-map-legacy section, .classiera-map-legacy .item, .classiera-map-legacy figure, .classiera-map-legacy figcaption { max-width: 100% !important; overflow-x: hidden; }
.classiera-map-legacy :where(h1, h2, h3, h4, h5, h6, p, a, span) { overflow-wrap: break-word; word-break: normal; }

.classiera-map-classic { padding: 12px; background: #fff; }
.classiera-map-classic .classiera_map_div { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.classiera-map-classic .classiera_map_div__img { flex: 0 0 auto; width: 100px; height: 90px; margin: 0; padding: 4px; border: 1px solid #e1e1e1; object-fit: cover; }
.classiera-map-classic .classiera_map_div__body { min-width: 0; }
.classiera-map-classic .classiera_map_div__price, .classiera-map-classic .classiera_map_div__cat { margin: 0; }
.classiera-map-classic .classiera_map_div__heading { margin: 2px 0; font-size: 14px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.classiera-map-gpopup .classiera-map-classic, .classiera-map-popup .classiera-map-classic { padding-right: 40px; }

/* Theme ad box designs have their own badges in the corners: the popup close button gets a slim top bar instead. */
.classiera-map-gpopup.has-legacy { padding-top: 34px; background: #fff; }
.classiera-map-gpopup.has-legacy .classiera-map-popup-close { top: 3px; right: 5px; width: 28px; height: 28px; box-shadow: none; background: #f1f2f4; }
.classiera-map-popup.has-legacy .leaflet-popup-content { padding-top: 34px; background: #fff; }
.classiera-map-popup.has-legacy a.leaflet-popup-close-button { top: 3px; right: 5px; box-shadow: none; background: #f1f2f4; }
.rtl .classiera-map-gpopup.has-legacy .classiera-map-popup-close, .rtl .classiera-map-popup.has-legacy a.leaflet-popup-close-button { right: auto; left: 5px; }