/*
 * Tout est scopé sous #aa-popup (identifiant unique) ET verrouillé avec !important.
 * Un ID bat toujours n'importe quelle combinaison de classes/attributs/types d'un thème
 * (ex: Elementor cible souvent button[type="submit"] avec !important — une simple classe
 * ne peut jamais gagner contre ça, même avec !important des deux côtés ; un ID, si).
 */

.aa-overlay {
	position: fixed !important;
	inset: 0 !important;
	background: rgba(0,0,0,0.5) !important;
	display: none !important;
	align-items: flex-end !important;
	justify-content: center !important;
	z-index: 999999 !important;
}
.aa-overlay.aa-open { display: flex !important; }

#aa-popup {
	background: #fff !important;
	width: 100% !important;
	max-width: 480px !important;
	max-height: 90vh !important;
	overflow-y: auto !important;
	border-radius: 20px 20px 0 0 !important;
	padding: 28px 24px 34px !important;
	position: relative !important;
	box-sizing: border-box !important;
	font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
	animation: aa-slide-up .25s ease-out !important;
	color: #111 !important;
}
#aa-popup * { box-sizing: border-box !important; }
@media (min-width: 560px) {
	.aa-overlay { align-items: center !important; }
	#aa-popup { border-radius: 20px !important; }
}
@keyframes aa-slide-up {
	from { transform: translateY(24px); opacity: 0; }
	to   { transform: translateY(0); opacity: 1; }
}

#aa-popup .aa-close {
	position: absolute !important;
	top: 16px !important; right: 16px !important;
	width: 36px !important; height: 36px !important;
	border-radius: 50% !important;
	border: 1px solid #ddd !important;
	background: #fff !important;
	color: #111 !important;
	font-size: 20px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	z-index: 2 !important;
	padding: 0 !important;
	margin: 0 !important;
}

#aa-popup .aa-icon-btn {
	position: absolute !important;
	top: 16px !important; right: 60px !important;
	width: 36px !important; height: 36px !important;
	border-radius: 50% !important;
	border: 1px solid #ddd !important;
	background: #fff !important;
	color: #111 !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
	cursor: pointer !important;
	z-index: 2 !important;
	padding: 0 !important;
	margin: 0 !important;
}
#aa-popup .aa-icon-btn:hover { background: #f5f5f5 !important; }
#aa-popup .aa-icon-btn:disabled { opacity: .6 !important; cursor: default !important; }

#aa-popup .aa-spinner {
	display: inline-block !important;
	width: 16px !important; height: 16px !important;
	border: 2px solid #ccc !important;
	border-top-color: #000 !important;
	border-radius: 50% !important;
	animation: aa-spin .7s linear infinite !important;
	background: transparent !important;
}
@keyframes aa-spin { to { transform: rotate(360deg); } }

#aa-popup .aa-btn-black .aa-spinner { border-color: rgba(255,255,255,.4) !important; border-top-color: #fff !important; }
#aa-popup #aa-otp-spinner:not(.aa-hide) { display: block !important; margin: 14px auto 0 !important; }

#aa-popup .aa-logo-row { text-align: center !important; margin: 6px 0 18px !important; }
#aa-popup .aa-logo-img { max-height: 56px !important; max-width: 160px !important; object-fit: contain !important; }
#aa-popup .aa-logo-small { max-height: 40px !important; }

#aa-popup .aa-title { font-size: 1.5em !important; font-weight: 800 !important; margin: 0 0 4px !important; color: #111 !important; }
#aa-popup .aa-subtitle { color: #666 !important; margin: 0 0 18px !important; font-size: 0.95em !important; }

#aa-popup button.aa-btn,
#aa-popup a.aa-btn {
	display: block !important; width: 100% !important;
	padding: 16px !important; margin: 0 0 12px !important;
	border-radius: 12px !important; border: none !important;
	font-size: 1em !important; font-weight: 700 !important; line-height: 1.2 !important;
	cursor: pointer !important; text-align: center !important;
	text-decoration: none !important; box-shadow: none !important;
	font-family: inherit !important;
}
#aa-popup button.aa-btn-black,
#aa-popup a.aa-btn-black {
	background: #000 !important; color: #fff !important;
}
#aa-popup button.aa-btn-black:hover,
#aa-popup button.aa-btn-black:focus,
#aa-popup button.aa-btn-black:active,
#aa-popup a.aa-btn-black:hover,
#aa-popup a.aa-btn-black:focus,
#aa-popup a.aa-btn-black:active {
	background: #000 !important; color: #fff !important; opacity: .88 !important;
}
#aa-popup button.aa-btn-outline,
#aa-popup a.aa-btn-outline {
	background: #fff !important; color: #000 !important; border: 2px solid #000 !important;
}
#aa-popup button.aa-btn-outline:hover,
#aa-popup button.aa-btn-outline:focus,
#aa-popup button.aa-btn-outline:active {
	background: #f5f5f5 !important; color: #000 !important;
}

#aa-popup .aa-shortcuts { display: flex !important; gap: 12px !important; margin-top: 20px !important; }
#aa-popup .aa-shortcut-box {
	flex: 1 !important; background: #f4f4f4 !important; border: none !important; border-radius: 12px !important;
	padding: 18px 10px !important; display: flex !important; flex-direction: column !important; align-items: center !important;
	gap: 8px !important; font-weight: 600 !important; cursor: pointer !important; color: #111 !important;
}
#aa-popup .aa-shortcut-icon { font-size: 1.4em !important; }

#aa-popup .aa-divider { display: flex !important; align-items: center !important; gap: 12px !important; margin: 18px 0 !important; color: #999 !important; }
#aa-popup .aa-divider::before, #aa-popup .aa-divider::after { content: "" !important; flex: 1 !important; height: 1px !important; background: #e2e2e2 !important; }

#aa-popup .aa-input-row { position: relative !important; }
#aa-popup input.aa-input,
#aa-popup select.aa-input {
	width: 100% !important; padding: 15px 14px !important; border: 2px solid #ccc !important;
	border-radius: 12px !important; font-size: 1em !important; box-sizing: border-box !important;
	margin: 0 0 10px !important; background: #fff !important; color: #111 !important;
	font-family: inherit !important; box-shadow: none !important; height: auto !important;
	-webkit-appearance: none !important; appearance: none !important;
}
#aa-popup input.aa-input:focus,
#aa-popup select.aa-input:focus { border-color: #000 !important; outline: none !important; box-shadow: none !important; }

#aa-popup button.aa-submit-btn[type="submit"] {
	display: flex !important; align-items: center !important; justify-content: center !important;
	gap: 8px !important; min-height: 52px !important;
}
#aa-popup .aa-submit-btn .aa-btn-arrow { font-size: 1.2em !important; line-height: 1 !important; color: inherit !important; }
#aa-popup button.aa-submit-btn:disabled { opacity: .7 !important; cursor: default !important; }

#aa-popup .aa-error { color: #c0392b !important; font-size: 0.88em !important; min-height: 1.2em !important; margin: 6px 0 0 !important; }

#aa-popup button.aa-link-btn { background: none !important; border: none !important; color: #000 !important; text-decoration: underline !important; cursor: pointer !important; font-size: 0.92em !important; padding: 0 !important; font-family: inherit !important; width: auto !important; }

#aa-popup .aa-otp-row { display: flex !important; gap: 8px !important; justify-content: center !important; margin: 20px 0 6px !important; flex-wrap: wrap !important; }
#aa-popup input.aa-otp-box {
	width: 44px !important; height: 56px !important; text-align: center !important; font-size: 1.4em !important;
	border: 2px solid #ccc !important; border-radius: 10px !important; background: #fff !important; color: #111 !important;
	padding: 0 !important; box-shadow: none !important;
}
#aa-popup input.aa-otp-box:focus { border-color: #000 !important; outline: none !important; }

#aa-popup .aa-account-header { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 18px !important; }

#aa-popup .aa-tabs { display: flex !important; gap: 22px !important; border-bottom: 1px solid #eee !important; margin-bottom: 16px !important; }
#aa-popup button.aa-tab { background: none !important; border: none !important; padding: 8px 2px 12px !important; font-weight: 700 !important; color: #999 !important; cursor: pointer !important; border-bottom: 2px solid transparent !important; font-family: inherit !important; font-size: 1em !important; width: auto !important; }
#aa-popup button.aa-tab.active { color: #000 !important; border-color: #000 !important; }

#aa-popup .aa-empty { color: #888 !important; text-align: center !important; padding: 20px 0 !important; }

#aa-popup .aa-field-label { display: block !important; font-size: 0.85em !important; font-weight: 600 !important; margin: 12px 0 4px !important; color: #111 !important; }

#aa-popup .aa-section { margin-bottom: 26px !important; padding-bottom: 22px !important; border-bottom: 1px solid #eee !important; }
#aa-popup .aa-section:last-of-type { border-bottom: none !important; }
#aa-popup .aa-section h3 { font-size: 1.05em !important; margin: 0 !important; color: #111 !important; }
#aa-popup .aa-section-header { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 12px !important; }
#aa-popup .aa-pill-btn {
	border: 1px solid #ccc !important; border-radius: 20px !important; padding: 7px 16px !important;
	font-size: 0.85em !important; font-weight: 600 !important; background: #fff !important; color: #000 !important;
	cursor: pointer !important; text-decoration: none !important; display: inline-block !important; width: auto !important;
}
#aa-popup .aa-pill-btn:hover { background: #f5f5f5 !important; color: #000 !important; }
#aa-popup .aa-readonly-field { background: #f4f4f4 !important; border-radius: 12px !important; padding: 14px !important; color: #333 !important; font-size: 0.95em !important; }
#aa-popup .aa-edit-fields { margin-top: 12px !important; }
#aa-popup .aa-address-box { background: #f4f4f4 !important; border-radius: 12px !important; padding: 16px !important; color: #888 !important; font-size: 0.95em !important; }

/* Vues "Modifier le profil" / "Ajouter une adresse" (bug n°4) : plein-popup, comme les autres vues. */
#aa-popup .aa-modal-header { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 20px !important; }
#aa-popup .aa-modal-header .aa-title { margin: 0 !important; font-size: 1.3em !important; }
#aa-popup input.aa-input[disabled] { background: #f4f4f4 !important; color: #666 !important; cursor: default !important; }
#aa-popup .aa-field-note { color: #777 !important; font-size: 0.82em !important; margin: 6px 0 0 !important; line-height: 1.4 !important; }
#aa-popup .aa-checkbox-row { display: flex !important; align-items: center !important; gap: 10px !important; margin: 16px 0 4px !important; font-size: 0.92em !important; color: #333 !important; }
#aa-popup .aa-checkbox-row input[type="checkbox"] { width: 18px !important; height: 18px !important; margin: 0 !important; }
#aa-popup .aa-modal-actions { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 22px !important; margin-top: 18px !important; }
#aa-popup .aa-modal-actions .aa-submit-btn { width: auto !important; display: inline-flex !important; padding: 13px 22px !important; margin: 0 !important; }

#aa-popup .aa-block-center { display: block !important; width: 100% !important; text-align: center !important; margin-top: 10px !important; color: #c0392b !important; }

#aa-popup button.aa-order-row-btn {
	width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important;
	background: #f4f4f4 !important; border: none !important; border-radius: 12px !important; padding: 14px 16px !important; margin-bottom: 10px !important;
	cursor: pointer !important; text-align: left !important; font-family: inherit !important;
}
#aa-popup button.aa-order-row-btn:hover { background: #eee !important; }
#aa-popup .aa-order-row-main strong { display: block !important; font-size: 0.95em !important; color: #111 !important; }
#aa-popup .aa-order-row-main .aa-order-date { display: block !important; color: #888 !important; font-size: 0.82em !important; margin-top: 2px !important; }
#aa-popup .aa-order-row-side { text-align: right !important; }
#aa-popup .aa-order-status-pill { display: block !important; color: #555 !important; font-size: 0.78em !important; margin-bottom: 2px !important; }
#aa-popup .aa-order-total { font-weight: 700 !important; font-size: 0.92em !important; color: #111 !important; }
#aa-popup .aa-chevron { color: #aaa !important; font-size: 1.3em !important; }

#aa-popup .aa-empty-orders { text-align: center !important; padding: 30px 10px 10px !important; }
#aa-popup .aa-empty-orders h3 { font-size: 1.3em !important; margin: 0 0 4px !important; color: #111 !important; }
#aa-popup .aa-empty-orders p { color: #777 !important; margin: 0 0 18px !important; }
#aa-popup .aa-empty-orders a.aa-btn { width: auto !important; display: inline-block !important; }

#aa-popup .aa-order-detail-line { display: flex !important; justify-content: space-between !important; padding: 10px 0 !important; border-bottom: 1px solid #f0f0f0 !important; font-size: 0.92em !important; color: #111 !important; }
#aa-popup .aa-order-detail-total { display: flex !important; justify-content: space-between !important; padding: 14px 0 0 !important; font-weight: 800 !important; color: #111 !important; }
#aa-popup .aa-order-detail-meta { color: #777 !important; font-size: 0.88em !important; margin: 4px 0 18px !important; }
#aa-popup .aa-order-detail-address { background: #f4f4f4 !important; border-radius: 12px !important; padding: 14px !important; margin-top: 16px !important; font-size: 0.9em !important; line-height: 1.5 !important; }

/*
 * Sécurité supplémentaire : masque le popup de connexion natif du thème
 * (structure exacte : <a href="#account-modal">, panneau id="account-modal"),
 * au cas où il tenterait quand même de s'afficher via CSS :target.
 * Le JS s'en charge aussi dynamiquement (killNativeLoginPopups + nettoyage du hash au chargement).
 */
#account-modal,
#account-modal:target,
.ct-header-account .ct-panel,
.ct-header-account .ct-dropdown-content,
.ct-header-account-item .ct-panel,
#ct-modal-account,
.ct-modal-account-content {
	display: none !important;
}

/*
 * CORRECTIF : plusieurs règles ci-dessus forcent display:flex/inline-block en !important
 * SANS jamais prévoir le cas où l'élément porte l'attribut "hidden" (ex: .aa-icon-btn,
 * .aa-pill-btn). Résultat : ces éléments restent visibles même quand le JS les cache,
 * puisqu'un !important d'auteur bat toujours la règle par défaut du navigateur pour [hidden].
 * Cette règle générique, placée en dernier, reprend le dessus dans tous les cas.
 */
#aa-popup [hidden] { display: none !important; }

/*
 * CORRECTIF (bug n°1 — spinners/bouton déconnexion visibles avant toute action) :
 * le mécanisme précédent s'appuyait sur l'attribut HTML "hidden" pour démarrer caché.
 * Si un plugin de cache/minification HTML normalise ou retire cet attribut booléen
 * "sans valeur" du HTML mis en cache, l'élément redevient visible par défaut — sans
 * qu'aucun clic n'ait eu lieu. On passe donc à une classe CSS explicite (.aa-hide), que
 * le JS ajoute/retire lui-même : une classe ne peut jamais être perdue de cette façon.
 *
 * Cette règle est placée VOLONTAIREMENT tout en bas du fichier : elle a la même
 * spécificité (#aa-popup + une classe) que .aa-spinner, .aa-icon-btn, etc. plus haut —
 * en cas d'égalité de spécificité entre deux règles !important, c'est la RÈGLE LA PLUS
 * BASSE dans le fichier qui l'emporte. En la mettant tout en bas, elle gagne dans tous
 * les cas, quel que soit l'élément auquel .aa-hide est ajoutée.
 */
#aa-popup .aa-hide { display: none !important; }