/* ==========================================================================
   Mzelle Immo - Child theme styles
   ========================================================================== */

/* ==========================================================================
   1. MASQUAGE DE L'ICÔNE PANIER
   On vend pas — on libère cet emplacement pour le switcher devise/langue.
   ========================================================================== */

.wgl-mini-cart_wrapper > .mini-cart,
.wgl-mini-cart_wrapper > a.wgl-cart,
.elementor-widget-wgl-header-cart .mini-cart,
.elementor-widget-wgl-header-cart a.wgl-cart {
	display: none !important;
}

/* On garde le wrapper pour y injecter le nouveau switcher */
.wgl-mini-cart_wrapper {
	display: inline-flex !important;
	align-items: center;
	min-height: 28px;
}

/* ==========================================================================
   2. HEADER TOOLS (currency + language)
   ========================================================================== */

.mzelle-header-tools {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--quere-menu-font-family, 'Poppins'), sans-serif;
}

/* Chaque outil (devise / langue) */
.mzelle-tool {
	position: relative;
}

.mzelle-tool__btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: transparent;
	border: 0;
	padding: 6px 8px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: inherit; /* hérite la couleur du header */
	cursor: pointer;
	border-radius: 999px;
	transition: background-color 0.15s ease, color 0.15s ease;
	letter-spacing: 0.02em;
	white-space: nowrap;
	min-height: 28px;
}

.mzelle-tool__btn:hover,
.mzelle-tool__btn:focus-visible {
	background: rgba(0, 0, 0, 0.05);
	outline: none;
}

/* Caret */
.mzelle-tool__caret {
	display: inline-block;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid currentColor;
	opacity: 0.6;
	transition: transform 0.15s ease;
}

.mzelle-tool.is-open .mzelle-tool__btn {
	background: rgba(0, 0, 0, 0.08);
}
.mzelle-tool.is-open .mzelle-tool__caret {
	transform: rotate(180deg);
}

/* Drapeau France (cercle CSS pur) */
.mzelle-tool__flag {
	display: inline-block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.12);
	background-clip: padding-box;
	box-sizing: border-box;
	vertical-align: middle;
}
.mzelle-flag--fr {
	background-image: linear-gradient(
		to right,
		#002654 0%,
		#002654 33.33%,
		#ffffff 33.33%,
		#ffffff 66.66%,
		#ED2939 66.66%,
		#ED2939 100%
	);
}
/* Drapeau prévu pour plus tard (Royaume-Uni / Angleterre / US — au choix) */
.mzelle-flag--en {
	background: #ccc; /* placeholder */
}

/* === Dropdown panel === */
.mzelle-tool__menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 160px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 10px;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
	z-index: 9999;
}

.mzelle-tool.is-open .mzelle-tool__menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mzelle-tool__menu li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 6px;
	cursor: pointer;
	color: #232323;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	transition: background-color 0.12s ease;
}
.mzelle-tool__menu li:hover {
	background: #f5f5f5;
}
.mzelle-tool__menu li.is-active {
	background: #111;
	color: #fff;
}
.mzelle-tool__menu li.is-active:hover {
	background: #111;
}
.mzelle-tool__sub {
	color: #888;
	font-weight: 400;
	font-size: 12px;
	margin-left: auto;
}
.mzelle-tool__menu li.is-active .mzelle-tool__sub {
	color: rgba(255, 255, 255, 0.6);
}

/* === Mobile : header noir → texte blanc === */
.wgl-mobile-header .mzelle-tool__btn {
	color: #fff;
}
.wgl-mobile-header .mzelle-tool__btn:hover,
.wgl-mobile-header .mzelle-tool__btn:focus-visible {
	background: rgba(255, 255, 255, 0.15);
}
.wgl-mobile-header .mzelle-tool.is-open .mzelle-tool__btn {
	background: rgba(255, 255, 255, 0.2);
}

/* Compact sur très petits écrans */
@media (max-width: 480px) {
	.mzelle-tool__btn {
		padding: 6px 6px;
		font-size: 12px;
	}
	.mzelle-tool__flag {
		width: 16px;
		height: 16px;
	}
	.mzelle-header-tools {
		gap: 2px;
	}
}

/* ==========================================================================
   3. SWAP DES PRIX MAD ↔ EUR
   Pris en charge en JS via attributs data-mad / data-eur.
   ========================================================================== */

.mzelle-price-wrap,
.mzelle-price {
	display: inline-block;
}

body.mzelle-eur .mzelle-price-mad {
	display: none !important;
}

body.mzelle-eur .mzelle-price-eur {
	display: inline !important;
}

body.mzelle-mad .mzelle-price-eur {
	display: none !important;
}

/* ==========================================================================
   4. BADGES "État du bien" + "Prix négociable"
   ========================================================================== */

.mzelle-condition-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.mzelle-condition-badge--neuf,
.mzelle-condition-badge--excellent {
	background: #e8f6ee;
	color: #1f7a3b;
}
.mzelle-condition-badge--bon {
	background: #f0f6ff;
	color: #1e54b7;
}
.mzelle-condition-badge--rafraichir {
	background: #fff5e5;
	color: #b06b00;
}
.mzelle-condition-badge--renover {
	background: #fde8e8;
	color: #b00020;
}

.mzelle-negotiable {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 500;
	border: 1px dashed #888;
	border-radius: 4px;
	color: #555;
}