/*
 * Habillage des écrans de Directorist aux couleurs et aux formes de Kmerboutik : formulaire d'annonce, compte du commerçant,
 * connexion, fiches. Chargé seulement sur les pages de Directorist, après ses propres feuilles de style.
 * Directorist lit ses couleurs dans des variables --directorist-… : on les renvoie vers nos jetons --kmb-…, ce qui habille
 * la plupart des éléments d'un coup ; le reste (champs, sections, étapes, listes déroulantes) est repris ci-dessous.
 */

body {
	--directorist-color-primary: var(--kmb-brand-600);
	--directorist-color-primary-rgb: 206, 17, 38;
	--directorist-color-btn-primary-bg: var(--kmb-brand-600);
	--directorist-color-btn-primary-rgb: 206, 17, 38;
	--directorist-color-body: var(--kmb-ink-600);
	--directorist-color-dark: var(--kmb-ink-900);
	--directorist-color-dark-rgb: 15, 23, 42;
	--directorist-color-border: var(--kmb-line-200);
	--directorist-color-border-light: var(--kmb-line-200);
	--directorist-color-border-gray: var(--kmb-field-border);
	--directorist-color-light: var(--kmb-surface-50);
	--directorist-color-bg-light: var(--kmb-surface-50);
	--directorist-color-bg-gray: var(--kmb-surface-100);
	--directorist-color-danger: var(--kmb-danger-700);
	--directorist-color-success: var(--kmb-success-600);
	--directorist-color-warning: var(--kmb-warning-700);
	--directorist-color-featured-badge: var(--kmb-accent-400);
	--directorist-box-shadow: var(--kmb-shadow-sm);
	--directorist-border-radius-lg: var(--kmb-radius-md);
}

/* ---------- Sections du formulaire : cartes douces avec un titre à icône ---------- */

body .directorist-content-module {
	margin-block-end: var(--kmb-space-5);
	overflow: hidden;
	border: 1px solid var(--kmb-line-200);
	border-radius: var(--kmb-radius-lg);
	background: var(--kmb-surface-0);
	box-shadow: var(--kmb-shadow-sm);
}

body .directorist-content-module__title {
	padding: var(--kmb-space-4) var(--kmb-space-5);
	border-block-end: 1px solid var(--kmb-line-200);
	background: var(--kmb-surface-50);
	color: var(--kmb-ink-900);
	font-family: var(--kmb-font-heading);
	font-weight: var(--kmb-fw-bold);
	letter-spacing: -0.01em;
}

body .directorist-content-module__contents {
	gap: var(--kmb-space-5);
	padding: var(--kmb-space-5);
}

@media (max-width: 639px) {
	body .directorist-content-module__contents {
		padding: var(--kmb-space-4);
	}

	body .directorist-content-module__title {
		padding: var(--kmb-space-3) var(--kmb-space-4);
	}
}

/* Divi donne à la ligne du formulaire 80 % de l'écran (36 px perdus de chaque côté sur un téléphone) : mêmes marges que le reste du site. */
body .et_pb_row:has(.directorist-add-listing-wrapper) {
	width: calc(100% - 2 * var(--kmb-space-4));
	max-width: 62rem;
}

body .directorist-add-listing-wrapper .directorist-container-fluid {
	padding-inline: 0;
}

/* ---------- Étiquettes et champs : cadre complet, coins arrondis, anneau de focus ---------- */

body .directorist-form-label {
	margin-block-end: var(--kmb-space-2);
	color: var(--kmb-ink-900);
	font-weight: var(--kmb-fw-semibold);
}

body .directorist-form-required {
	color: var(--kmb-danger-700);
}

body .directorist-form-group.directorist-form-group .directorist-form-element,
body .directorist-form-group.directorist-form-group input[type="text"],
body .directorist-form-group.directorist-form-group input[type="email"],
body .directorist-form-group.directorist-form-group input[type="tel"],
body .directorist-form-group.directorist-form-group input[type="url"],
body .directorist-form-group.directorist-form-group input[type="number"],
body .directorist-form-group.directorist-form-group input[type="password"],
body .directorist-form-group.directorist-form-group input[type="search"],
body .directorist-form-group.directorist-form-group textarea,
body .directorist-form-group.directorist-form-group select {
	box-sizing: border-box;
	inline-size: 100%;
	min-block-size: 3rem;
	padding: var(--kmb-space-2) var(--kmb-space-4);
	border: 1px solid var(--kmb-field-border);
	border-radius: var(--kmb-radius-sm);
	background: var(--kmb-surface-0);
	color: var(--kmb-ink-900);
	font: var(--kmb-fw-regular) var(--kmb-fs-body) / var(--kmb-lh-body) var(--kmb-font-body);
	box-shadow: none;
	transition: border-color var(--kmb-dur) var(--kmb-ease), box-shadow var(--kmb-dur) var(--kmb-ease);
}

body .directorist-form-group.directorist-form-group textarea {
	min-block-size: 8rem;
	padding-block: var(--kmb-space-3);
}

body .directorist-form-group.directorist-form-group .directorist-form-element:hover,
body .directorist-form-group.directorist-form-group textarea:hover {
	border-color: var(--kmb-ink-600);
}

body .directorist-form-group.directorist-form-group .directorist-form-element:focus,
body .directorist-form-group.directorist-form-group textarea:focus,
body .directorist-form-group.directorist-form-group select:focus {
	border-color: var(--kmb-brand-600);
	outline: none;
	box-shadow: 0 0 0 4px var(--kmb-brand-50);
}

body .directorist-form-group.directorist-form-group .directorist-form-element::placeholder,
body .directorist-form-group.directorist-form-group textarea::placeholder {
	color: var(--kmb-ink-600);
	opacity: 1;
}

/* ---------- Listes déroulantes (Select2) : même cadre que les champs, texte jamais coupé ---------- */

body .directorist-form-group .select2.select2-container.select2-container--default .select2-selection--single,
body .directorist-form-group .select2.select2-container.select2-container--default .select2-selection--multiple {
	min-block-size: 3rem;
	padding: var(--kmb-space-1) var(--kmb-space-3);
	border: 1px solid var(--kmb-field-border);
	border-radius: var(--kmb-radius-sm);
	background: var(--kmb-surface-0);
}

body .directorist-form-group .select2.select2-container.select2-container--default.select2-container--focus .select2-selection--multiple,
body .directorist-form-group .select2.select2-container.select2-container--default.select2-container--open .select2-selection--multiple,
body .directorist-form-group .select2.select2-container.select2-container--default.select2-container--focus .select2-selection--single,
body .directorist-form-group .select2.select2-container.select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--kmb-brand-600);
	box-shadow: 0 0 0 4px var(--kmb-brand-50);
}

body .directorist-form-group .select2.select2-container.select2-container--default .select2-selection--multiple {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kmb-space-1);
}

body .directorist-form-group .select2.select2-container.select2-container--default .select2-search--inline {
	flex: 1 1 14rem;
	float: none;
	margin: 0;
}

/* Select2 écrit la largeur du champ de recherche en ligne : seul !important permet de la corriger. */
/* stylelint-disable declaration-no-important */
body .directorist-form-group .select2.select2-container.select2-container--default .select2-search--inline .select2-search__field {
	inline-size: 100% !important;
	min-inline-size: 12rem;
	min-block-size: 2rem;
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	resize: none;
	font: var(--kmb-fw-regular) var(--kmb-fs-body) / 1.4 var(--kmb-font-body);
}
/* stylelint-enable declaration-no-important */

/* Le champ de saisie interne d'une liste à choix multiples ne porte ni cadre ni anneau de focus : le cadre est celui de la liste (un
   second cadre rose se dessinait à l'intérieur du premier). */
body .directorist-form-group .select2.select2-container.select2-container--default .select2-search--inline .select2-search__field,
body .directorist-form-group .select2.select2-container.select2-container--default .select2-search--inline .select2-search__field:focus {
	padding: 0 var(--kmb-space-1);
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	outline: none;
}

body .directorist-form-group .select2.select2-container.select2-container--default .select2-selection--multiple .select2-selection__choice {
	display: flex;
	align-items: center;
	margin: 0;
	padding: var(--kmb-space-1) var(--kmb-space-3);
	border: 0;
	border-radius: var(--kmb-radius-pill);
	background: var(--kmb-brand-50);
	color: var(--kmb-brand-700);
	font-weight: var(--kmb-fw-medium);
}

/* La croix d'un jeton : centrée dans sa pastille et à la taille du texte (Select2 la rendait à 0 px, en haut à gauche). */
body .directorist-form-group .select2.select2-container.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 var(--kmb-space-2) 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--kmb-brand-700);
	font-size: var(--kmb-fs-body);
	line-height: 1;
}

body .select2-dropdown {
	overflow: hidden;
	border: 1px solid var(--kmb-line-200);
	border-radius: var(--kmb-radius-sm);
	box-shadow: var(--kmb-shadow-lg);
}

body .select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--kmb-brand-50);
	color: var(--kmb-brand-700);
}

/* Menu ouvert : mêmes police, hauteur tactile et couleurs que les autres listes du site ; champ de recherche au cadre des champs. */
body .select2-container--default .select2-results__option {
	min-block-size: var(--kmb-tap);
	padding: var(--kmb-space-3) var(--kmb-space-4);
	color: var(--kmb-ink-900);
	font: var(--kmb-fw-regular) var(--kmb-fs-body) / 1.4 var(--kmb-font-body);
}

body .select2-container--default .select2-results__option[aria-selected="true"] {
	background: var(--kmb-surface-100);
	color: var(--kmb-brand-700);
	font-weight: var(--kmb-fw-semibold);
}

body .select2-container--default .select2-results__option--group {
	color: var(--kmb-ink-600);
	font-size: var(--kmb-fs-small);
	font-weight: var(--kmb-fw-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

body .select2-container--default .select2-search--dropdown {
	padding: var(--kmb-space-3);
}

body .select2-container--default .select2-search--dropdown .select2-search__field {
	min-block-size: 2.75rem;
	padding: var(--kmb-space-2) var(--kmb-space-3);
	border: 1px solid var(--kmb-field-border);
	border-radius: var(--kmb-radius-sm);
	background: var(--kmb-surface-0);
	color: var(--kmb-ink-900);
	font: var(--kmb-fw-regular) var(--kmb-fs-body) / 1.4 var(--kmb-font-body);
}

body .select2-container--default .select2-search--dropdown .select2-search__field:focus {
	border-color: var(--kmb-brand-600);
	outline: none;
	box-shadow: 0 0 0 4px var(--kmb-brand-50);
}

/* ---------- Cases à cocher et boutons radio ---------- */

body .directorist-checkbox label,
body .directorist-radio label {
	color: var(--kmb-ink-900);
	font-weight: var(--kmb-fw-regular);
}

body .directorist-custom-field-btn-more {
	color: var(--kmb-brand-600);
	font-weight: var(--kmb-fw-semibold);
	text-decoration: none;
}

/* ---------- Boutons ---------- */

body .directorist-btn {
	min-block-size: 3rem;
	text-transform: none;
	border-radius: var(--kmb-radius-pill);
	font-family: var(--kmb-font-body);
	font-weight: var(--kmb-fw-semibold);
	transition: background-color var(--kmb-dur) var(--kmb-ease), box-shadow var(--kmb-dur) var(--kmb-ease), transform var(--kmb-dur) var(--kmb-ease);
}

body .directorist-btn-primary {
	border-color: transparent;
	background: var(--kmb-gradient-brand);
	color: var(--kmb-surface-0);
	box-shadow: var(--kmb-shadow-sm);
}

body .directorist-btn-primary:hover {
	background: var(--kmb-gradient-brand);
	color: var(--kmb-surface-0);
	box-shadow: var(--kmb-shadow-brand);
	transform: translateY(-1px);
}

/* ---------- Étapes du formulaire : pastilles claires, étape active en couleur ---------- */

body .multistep-wizard__nav__btn {
	border-radius: var(--kmb-radius-md);
	color: var(--kmb-ink-600);
	font-weight: var(--kmb-fw-medium);
	transition: background-color var(--kmb-dur) var(--kmb-ease), color var(--kmb-dur) var(--kmb-ease);
}

body .multistep-wizard__nav__btn:hover {
	background: var(--kmb-surface-100);
	color: var(--kmb-ink-900);
}

body .multistep-wizard__nav__btn.active {
	background: var(--kmb-brand-50);
	color: var(--kmb-brand-600);
	font-weight: var(--kmb-fw-semibold);
}

body .multistep-wizard__nav__btn.active .directorist-icon-mask {
	background-color: var(--kmb-brand-600);
}

/* ---------- Recherche en haut de l'annuaire : la nôtre remplace le formulaire de Directorist ---------- */

.listing-with-sidebar__searchform {
	display: none;
}

.kmb-page .kmb-directory-search {
	padding-block: var(--kmb-space-4) var(--kmb-space-2);
}

.kmb-directory-search .kmb-search--directory {
	padding: var(--kmb-space-3);
	border: 1px solid var(--kmb-line-200);
	border-radius: var(--kmb-radius-xl);
	background: var(--kmb-surface-0);
	box-shadow: var(--kmb-shadow-md);
}

@media (min-width: 768px) {
	.kmb-directory-search .kmb-search--directory {
		padding: var(--kmb-space-2);
		border-radius: var(--kmb-radius-pill);
	}

	.kmb-directory-search .kmb-search--directory .kmb-input {
		border: 0;
		background: transparent;
	}
}

/* ---------- Compte du commerçant : menu latéral en pastilles, contenu en carte ---------- */

body .directorist-user-dashboard {
	padding-block: var(--kmb-space-5) var(--kmb-space-8);
	font-family: var(--kmb-font-body);
}

body .directorist-user-dashboard .directorist-container-fluid {
	max-inline-size: var(--kmb-width-content);
	margin-inline: auto;
	padding-inline: var(--kmb-space-4);
}

body .directorist-user-dashboard__nav {
	padding: var(--kmb-space-4);
	border: 1px solid var(--kmb-line-200);
	border-radius: var(--kmb-radius-lg);
	background: var(--kmb-surface-0);
	box-shadow: var(--kmb-shadow-sm);
}

body .directorist-tab__nav__items,
body .directorist-tab__nav__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

body .directorist-tab__nav__items {
	display: grid;
	gap: var(--kmb-space-1);
	margin-block-end: var(--kmb-space-4);
}

body .directorist-tab__nav__item::marker {
	content: none;
}

body .directorist-tab__nav__link {
	display: flex;
	align-items: center;
	min-block-size: var(--kmb-tap);
	padding: var(--kmb-space-2) var(--kmb-space-4);
	border-radius: var(--kmb-radius-pill);
	color: var(--kmb-ink-900);
	font-weight: var(--kmb-fw-medium);
	text-decoration: none;
	transition: background-color var(--kmb-dur) var(--kmb-ease), color var(--kmb-dur) var(--kmb-ease), transform 300ms var(--kmb-ease);
}

body .directorist-tab__nav__link:hover {
	background: var(--kmb-surface-100);
	transform: translateX(4px);
}

body .directorist-tab__nav__link.directorist-tab__nav__active {
	background: var(--kmb-brand-50);
	color: var(--kmb-brand-600);
	font-weight: var(--kmb-fw-semibold);
}

body .directorist-user-dashboard__tab-content {
	inline-size: 100%;
	min-inline-size: 0;
	max-inline-size: none;
}

body .directorist-user-dashboard__toggle {
	display: none;
}

body .directorist-tab__nav__action {
	display: grid;
	gap: var(--kmb-space-2);
}

@media (min-width: 992px) {
	body .directorist-user-dashboard__contents {
		display: grid;
		grid-template-columns: 17rem minmax(0, 1fr);
		gap: var(--kmb-space-5);
		align-items: start;
	}

	body .directorist-user-dashboard__nav {
		position: sticky;
		inset-block-start: calc(var(--kmb-header-h) + var(--kmb-space-4));
	}
}

@media (max-width: 991px) {
	body .directorist-user-dashboard__toggle {
		display: block;
		margin-block-end: var(--kmb-space-3);
	}
}

/* ---------- Connexion : carte centrée, un seul bloc lisible ---------- */

body .directorist-authentication {
	padding: var(--kmb-space-6);
	border: 1px solid var(--kmb-line-200);
	border-radius: var(--kmb-radius-xl);
	background: var(--kmb-surface-0);
	box-shadow: var(--kmb-shadow-lg);
	animation: kmb-rise 600ms var(--kmb-ease) backwards;
}

/* Directorist met une seconde carte dans la nôtre : on garde une seule. */
body .directorist-authentication .directorist-authentication__form {
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

body .directorist-authentication__form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--kmb-space-3);
	margin-block-end: var(--kmb-space-4);
}

body .directorist-authentication__form__toggle-area {
	margin-block-start: var(--kmb-space-4);
	color: var(--kmb-ink-600);
	text-align: center;
}

body .directorist-authentication__btn {
	text-transform: none;
	border: 0;
	background: none;
	color: var(--kmb-brand-600);
	font-weight: var(--kmb-fw-semibold);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

body .atbdp_recovery_pass {
	color: var(--kmb-brand-600);
}

@media (prefers-reduced-motion: reduce) {
	body .directorist-authentication {
		animation: none;
	}

	body .directorist-tab__nav__link:hover {
		transform: none;
	}
}

/* ---------- Éditeur d'horaires (hours-editor.js) : trois choix, puis une ligne par jour ---------- */

body .kmb-hours-editor {
	display: grid;
	gap: var(--kmb-space-3);
	margin: 0;
	padding: 0;
	border: 0;
}

body .kmb-hours-editor__legend {
	margin-block-end: var(--kmb-space-2);
	padding: 0;
	color: var(--kmb-ink-900);
	font-weight: var(--kmb-fw-semibold);
}

.kmb-hours-editor__modes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kmb-space-2) var(--kmb-space-5);
}

.kmb-hours-editor__days {
	display: grid;
	gap: var(--kmb-space-2);
	padding: var(--kmb-space-3);
	border: 1px solid var(--kmb-line-200);
	border-radius: var(--kmb-radius-md);
	background: var(--kmb-surface-50);
}

.kmb-hours-editor__days[hidden] {
	display: none;
}

.kmb-hours-editor__row {
	display: grid;
	align-items: center;
	gap: var(--kmb-space-2) var(--kmb-space-4);
	padding-block: var(--kmb-space-2);
	border-block-end: 1px solid var(--kmb-line-200);
}

/* Directorist met « display: block » sur les labels et des marges sur les cases : case et texte restent alignés. */
body .kmb-hours-editor .kmb-check {
	display: flex;
	align-items: center;
	gap: var(--kmb-space-3);
}

body .kmb-hours-editor .kmb-check input {
	flex: none;
	margin: 0;
}

.kmb-hours-editor__day {
	min-inline-size: 8rem;
	font-weight: var(--kmb-fw-semibold);
}

.kmb-hours-editor__times {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kmb-space-2);
}

.kmb-hours-editor__range {
	display: inline-flex;
	align-items: center;
	gap: var(--kmb-space-2);
}

body .kmb-hours-editor__range input[type="time"] {
	inline-size: 7.5rem;
	min-block-size: 2.75rem;
	padding-inline: var(--kmb-space-3);
}

.kmb-hours-editor__closed {
	color: var(--kmb-ink-600);
}

.kmb-hours-editor__add,
.kmb-hours-editor__remove {
	min-block-size: 2.75rem;
	padding: 0 var(--kmb-space-3);
	border: 1px dashed var(--kmb-field-border);
	border-radius: var(--kmb-radius-pill);
	background: none;
	color: var(--kmb-brand-600);
	font: var(--kmb-fw-semibold) var(--kmb-fs-small) / 1 var(--kmb-font-body);
	cursor: pointer;
}

.kmb-hours-editor__remove {
	min-inline-size: 2.75rem;
	padding: 0;
	border-style: solid;
	font-size: 1.25rem;
}

.kmb-hours-editor__add:hover,
.kmb-hours-editor__remove:hover {
	background: var(--kmb-brand-50);
}

.kmb-hours-editor__copy {
	justify-self: start;
	margin-block-start: var(--kmb-space-2);
}

.kmb-hours-editor__message {
	margin: 0;
	color: var(--kmb-danger-700);
	font-size: var(--kmb-fs-small);
}

.kmb-hours-editor__message:empty {
	display: none;
}

@media (min-width: 640px) {
	.kmb-hours-editor__row {
		grid-template-columns: 9rem minmax(0, 1fr);
	}
}

/* Gris des textes d'aide, du champ de recherche des listes et des textes d'envoi de photos : Directorist les écrit avec sa variable
   « deep-gray » (#808080, contraste 3,9 sur blanc). On la redéfinit avec le gris foncé du site (contraste AA) là où il la lit (T-23). */
body,
body .directorist-content-active,
body .directorist-form-group,
body .select2-container {
	--directorist-color-deep-gray: var(--kmb-ink-600);
}

body .maxFileSize,
body .maxTotalFileSize,
body .maxFileItems {
	color: var(--kmb-ink-600);
}