/**
 * KNA Distribution — Habillage de la modale de demande de devis (WholesaleX RAQ).
 *
 * LOT L1 — révision 2. PROPOSITION LOCALE, NON DEPLOYEE.
 *
 * POURQUOI CHAQUE BLOC EXISTE — tout vient d'une MESURE dans un vrai navigateur
 * (snapshot du `/cart/` réel, styles calculés par `getComputedStyle`) :
 *
 *   .wsx-label            color rgb(255,255,255) sur un fond rgb(255,255,255)
 *                         → BLANC SUR BLANC. Rendu (335 × 22 px) mais INVISIBLE.
 *                         Cause : le thème met son texte courant en blanc
 *                         (--kna-color-text) car son corps de page est sombre ;
 *                         la modale du plugin a un fond blanc. Rien ne corrige,
 *                         les règles du thème étant scopées `body.page-id-37`.
 *   .wsx-input            police Arial (défaut navigateur) — le plugin n'en
 *                         définit aucune.
 *   .wsx-textarea         police monospace, hauteur 40 px exactement.
 *   #wholesalex-quote-submit  fond rgb(108,108,255) = #6c6cff (violet).
 *   .close-modal-icon     `elementFromPoint` renvoie autre chose → HORS CADRE,
 *                         donc non cliquable dans sa zone visible.
 *   .modal_content        aucun fond assombri derrière (le plugin n'en fournit pas).
 *
 * PÉRIMÈTRE : strictement `body.woocommerce-cart`, strictement la modale.
 * Chaque sélecteur commence par `body.woocommerce-cart`.
 *
 * AUCUN TEXTE ESSENTIEL EN `content:` — le titre et la consigne sont des nœuds de
 * texte réels, insérés en PHP (voir inc/quote-modal.php §3). Les deux contrôles
 * du vérificateur le verrouillent.
 */

/* =========================================================================
 * 1. FOND ASSOMBRI
 * Le plugin n'en fournit aucun : la modale flottait sans séparation visuelle.
 * Pseudo-élément, aucun nœud ajouté au balisage, aucun clic intercepté.
 * ========================================================================= */

body.woocommerce-cart .wholesalex_add_to_quote_modal::before {
	content: "";
	position: fixed;
	inset: 0;
	background-color: var(--kna-color-overlay);
	z-index: -1;
	pointer-events: none;
}

/* =========================================================================
 * 2. BOÎTE DE LA MODALE
 * Le plugin impose `width: 50%` sans largeur maximale ni gestion du débordement.
 * ========================================================================= */

body.woocommerce-cart .wholesalex_add_to_quote_modal .modal_content {
	width: min(560px, calc(100vw - 2 * var(--kna-space-md)));
	max-width: 100%;
	max-height: calc(100vh - 2 * var(--kna-space-lg));
	overflow-y: auto;
	padding: var(--kna-space-lg);
	border: 1px solid var(--kna-color-card-border);
	border-radius: var(--kna-radius-2xl);
	background-color: var(--kna-color-card);
	box-shadow: var(--kna-shadow-lg);
	font-family: var(--kna-font-body);
	color: var(--kna-color-text-strong);
	text-align: left;
}

/* =========================================================================
 * 3. TITRE ET CONSIGNE — nœuds de texte réels, insérés en PHP.
 * Ils sont ici mis en forme ; leur CONTENU n'est pas en CSS.
 * ========================================================================= */

body.woocommerce-cart .wholesalex_add_to_quote_modal .kna-quote-title {
	margin: 0 0 var(--kna-space-2xs);
	color: var(--kna-color-text-strong);
	font-family: var(--kna-font-display);
	font-size: var(--kna-font-size-xl);
	font-weight: var(--kna-weight-bold);
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

body.woocommerce-cart .wholesalex_add_to_quote_modal .kna-quote-intro {
	margin: 0 0 var(--kna-space-md);
	color: var(--kna-color-text-muted);
	font-family: var(--kna-font-body);
	font-size: var(--kna-font-size-md);
	font-weight: var(--kna-weight-regular);
	line-height: 1.5;
}

/* La croix est en position absolue dans la boîte : ces deux blocs doivent rester
   lisibles sans passer dessous. */
body.woocommerce-cart .wholesalex_add_to_quote_modal .kna-quote-title,
body.woocommerce-cart .wholesalex_add_to_quote_modal .kna-quote-intro {
	padding-right: var(--kna-space-xl);
}

/* =========================================================================
 * 4. LIBELLÉS — LA CORRECTION CENTRALE
 * Blanc sur blanc mesuré. On impose une couleur sombre et la police du thème.
 * ========================================================================= */

body.woocommerce-cart .wholesalex_add_to_quote_modal .wholesalex-field {
	display: flex;
	flex-direction: column;
	margin-top: var(--kna-space-md);
}

body.woocommerce-cart .wholesalex_add_to_quote_modal .wsx-label {
	display: block;
	margin-bottom: var(--kna-space-3xs);
	color: var(--kna-color-text-strong); /* ← corrige le blanc sur blanc */
	font-family: var(--kna-font-body);
	font-size: var(--kna-font-size-xs);
	font-weight: var(--kna-weight-bold);
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* =========================================================================
 * 5. CHAMPS — police du thème (le plugin n'en définit aucune : Arial et
 * monospace mesurés), hauteur confortable, zone de message utilisable.
 * ========================================================================= */

body.woocommerce-cart .wholesalex_add_to_quote_modal .wsx-input,
body.woocommerce-cart .wholesalex_add_to_quote_modal .wsx-textarea {
	width: 100%;
	min-height: 48px;
	padding: var(--kna-space-sm);
	border: 1px solid var(--kna-color-card-border);
	border-radius: var(--kna-radius-lg);
	background-color: var(--kna-color-card);
	color: var(--kna-color-text-strong);
	font-family: var(--kna-font-body); /* ← corrige Arial / monospace */
	font-size: var(--kna-font-size-md);
	font-weight: var(--kna-weight-regular);
	line-height: 1.4;
}

/* Zone de message : 40 px mesurés, insuffisant pour un message. */
body.woocommerce-cart .wholesalex_add_to_quote_modal .wsx-textarea {
	min-height: 140px;
	resize: vertical;
}

body.woocommerce-cart .wholesalex_add_to_quote_modal .wsx-input::placeholder,
body.woocommerce-cart .wholesalex_add_to_quote_modal .wsx-textarea::placeholder {
	color: var(--kna-color-text-subtle);
}

body.woocommerce-cart .wholesalex_add_to_quote_modal .wsx-input:hover,
body.woocommerce-cart .wholesalex_add_to_quote_modal .wsx-textarea:hover {
	border-color: var(--kna-color-brand);
}

/* Le plugin neutralise `outline` et `box-shadow` au focus : sans indication
   visuelle, la navigation au clavier est impossible à suivre. */
body.woocommerce-cart .wholesalex_add_to_quote_modal .wsx-input:focus,
body.woocommerce-cart .wholesalex_add_to_quote_modal .wsx-input:focus-visible,
body.woocommerce-cart .wholesalex_add_to_quote_modal .wsx-textarea:focus,
body.woocommerce-cart .wholesalex_add_to_quote_modal .wsx-textarea:focus-visible {
	outline: 2px solid var(--kna-color-brand);
	outline-offset: 1px;
	border-color: var(--kna-color-brand);
	box-shadow: none;
}

/* Champ signalé en erreur par le plugin. */
body.woocommerce-cart .wholesalex_add_to_quote_modal .wsx-field-warning .wsx-input,
body.woocommerce-cart .wholesalex_add_to_quote_modal .wsx-field-warning .wsx-textarea,
body.woocommerce-cart .wholesalex_add_to_quote_modal .wsx-input:invalid:not(:placeholder-shown),
body.woocommerce-cart .wholesalex_add_to_quote_modal .wsx-textarea:invalid:not(:placeholder-shown) {
	border-color: var(--kna-color-error);
}

/* Message d'erreur du plugin, s'il est rendu. */
body.woocommerce-cart .wholesalex_add_to_quote_modal .wsx-field-warning,
body.woocommerce-cart .wholesalex_add_to_quote_modal .wsx-input-warning {
	color: var(--kna-color-error);
	font-size: var(--kna-font-size-xs);
	font-weight: var(--kna-weight-semibold);
}

/* =========================================================================
 * 6. BOUTON — vert de marque #0e5b32, texte blanc.
 * Le plugin applique `var(--color-primary)` = #6c6cff (violet), mesuré.
 * ========================================================================= */

body.woocommerce-cart .wholesalex_add_to_quote_modal #wholesalex-quote-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	margin-top: var(--kna-space-lg);
	padding: 0 var(--kna-space-lg);
	border: 0;
	border-radius: var(--kna-radius-pill);
	background-color: var(--kna-color-brand); /* #0e5b32 */
	color: #ffffff;
	font-family: var(--kna-font-body);
	font-size: var(--kna-font-size-xs);
	font-weight: var(--kna-weight-black);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
}

body.woocommerce-cart .wholesalex_add_to_quote_modal #wholesalex-quote-submit:hover,
body.woocommerce-cart .wholesalex_add_to_quote_modal #wholesalex-quote-submit:focus {
	background-color: var(--kna-color-brand-hover);
	color: #ffffff;
}

body.woocommerce-cart .wholesalex_add_to_quote_modal #wholesalex-quote-submit:focus-visible {
	outline: 2px solid var(--kna-color-focus);
	outline-offset: 2px;
}

/* =========================================================================
 * 7. CROIX DE FERMETURE — RAMENÉE DANS LE CADRE
 * Mesure : `elementFromPoint` au centre de la croix renvoie autre chose qu'elle.
 * Le plugin la place à `translate: 50% -50%` : hors de la boîte, partiellement
 * hors écran sur mobile, donc non cliquable.
 * Son icône est un masque SVG blanc : invisible sur fond clair, d'où les deux
 * états de contraste ci-dessous.
 * ========================================================================= */

body.woocommerce-cart .wholesalex_add_to_quote_modal .close-modal-icon {
	top: var(--kna-space-sm);
	right: var(--kna-space-sm);
	translate: none; /* ← ramène la croix dans le cadre */
	background-color: var(--kna-color-muted-surface);
	z-index: 2;
}

body.woocommerce-cart .wholesalex_add_to_quote_modal .wsx-raq-close-icon {
	background-color: var(--kna-color-text-strong); /* repos : fond clair, icône sombre */
}

body.woocommerce-cart .wholesalex_add_to_quote_modal .close-modal-icon:hover,
body.woocommerce-cart .wholesalex_add_to_quote_modal .close-modal-icon:focus {
	background-color: var(--kna-color-error);
}

body.woocommerce-cart .wholesalex_add_to_quote_modal .close-modal-icon:hover .wsx-raq-close-icon,
body.woocommerce-cart .wholesalex_add_to_quote_modal .close-modal-icon:focus .wsx-raq-close-icon {
	background-color: #ffffff;
}

body.woocommerce-cart .wholesalex_add_to_quote_modal .close-modal-icon:focus-visible {
	outline: 2px solid var(--kna-color-focus);
	outline-offset: 2px;
}

/* =========================================================================
 * 8. REPLI SANS JAVASCRIPT
 * Si la modale est ouverte au clavier sans que le script ait posé
 * `display: block`, on la rend visible. Aucun effet tant qu'elle est fermée.
 * ========================================================================= */

body.woocommerce-cart .wholesalex_add_to_quote_modal:focus-within {
	display: block;
}