/* Pay4All Pro - "Mon compte" front-end (login + dashboard + popup) */

/* ---- Layout : login / dashboard container ------------------------ */
.p4all-account { max-width: 720px; margin: 0 auto; }
.p4all-account-dashboard { max-width: 1080px; }
.p4all-account-card {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	padding: 28px 32px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* ---- Dashboard shell : sidebar + main panel --------------------- */
/* Every color below defaults to the merchant's order-form palette,
   propagated as --p4a-* variables inline on the .p4all-account root.
   Borders + subtle backgrounds use rgba(0,0,0,.x) so they stay
   readable on both light and dark form palettes without needing
   more custom vars. */
.p4all-account-shell {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 24px;
	background: var(--p4a-bg, #fff);
	color: var(--p4a-text, #333);
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	min-height: 480px;
}
.p4all-account-sidebar {
	background: var(--p4a-field-bg, #f6f7f7);
	color: var(--p4a-field-text, var(--p4a-text, #333));
	border-right: 1px solid rgba(0, 0, 0, .08);
	padding: 24px 0;
	display: flex; flex-direction: column;
}
.p4all-account-sidebar-header { padding: 0 20px 20px; border-bottom: 1px solid rgba(0, 0, 0, .08); margin-bottom: 12px; }
.p4all-account-sidebar-name  { font-weight: 600; font-size: 15px; color: inherit; margin-bottom: 2px; }
.p4all-account-sidebar-email { font-size: 13px; color: inherit; opacity: .7; word-break: break-all; }
.p4all-account-tabs { display: flex; flex-direction: column; flex: 1; }
/* Tabs (active + inactive) reuse the merchant's « upcoming step » text
   colour from the order form so the sidebar navigation feels part of
   the same design system as the checkout step bar. !important to
   fight theme .button/.wp-block-button typography presets that push
   their own colour with higher specificity. */
.p4all-account-tab {
	display: flex; align-items: center; justify-content: flex-start !important; gap: 12px;
	/* !important on padding : theme .button / .wp-block-button /
	   .menu-item presets frequently set their own padding with
	   higher specificity, which was flattening our left inset. */
	padding: 12px 20px 12px 20px !important;
	width: 100%;
	background: transparent; border: 0; text-align: left !important;
	color: var(--p4a-step-upcoming-text, #665665) !important;
	font-size: 14px; font-weight: 500;
	cursor: pointer; border-left: 3px solid transparent;
	transition: background .15s, color .15s;
}
/* Old rgba hover replaced by the unified step-colour hover below. */
.p4all-account-tab.is-active {
	background: var(--p4a-bg, #fff) !important;
	color: var(--p4a-step-upcoming-text, #665665) !important;
	border-left-color: var(--p4a-btn-bg, #2271b1);
}
.p4all-account-tab-icon { flex: 0 0 20px; color: currentColor; }

.p4all-account-signout {
	display: flex; align-items: center; justify-content: flex-start !important; gap: 10px;
	margin: 20px 16px 0;
	padding: 10px 12px;
	background: transparent; border: 1px solid rgba(0, 0, 0, .12); border-radius: 4px;
	color: var(--p4a-step-upcoming-text, #665665) !important;
	font-size: 13px; text-align: left !important;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}

.p4all-account-main {
	padding: 28px 32px;
	background: var(--p4a-bg, #fff);
	color: var(--p4a-text, #333);
}
.p4all-account-panel { display: none; }
.p4all-account-panel.is-active { display: block; }
.p4all-account-panel[hidden]   { display: none; }
.p4all-account-panel-head {
	display: flex; justify-content: space-between; align-items: center;
	gap: 16px; margin-bottom: 20px; padding-bottom: 12px;
	border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.p4all-account-h2 { margin: 0; font-size: 20px; font-weight: 600; color: inherit; }

/* ---- Profile view mode ----------------------------------------- */
.p4all-account-profile-view {
	display: grid; grid-template-columns: 140px 1fr;
	gap: 10px 20px; margin: 0;
}
.p4all-account-profile-view dt {
	color: inherit; opacity: .6;
	font-size: 13px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .03em;
	margin: 0; padding: 2px 0;
}
.p4all-account-profile-view dd {
	margin: 0; padding: 2px 0;
	color: inherit; font-size: 15px; word-break: break-word;
}
.p4all-account-empty { color: inherit; opacity: .4; }

/* ---- Profile edit form ----------------------------------------- */
.p4all-account-form-grid {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 16px;
}
.p4all-account-field-wide { grid-column: 1 / -1; }
/* Save button sits BELOW the field grid on its own row (not aligned
   right). block + width:100% so the button spans the whole form,
   matching the visual weight of the checkout « Suivant / Confirmer »
   flow. */
.p4all-account-form-actions {
	margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(0, 0, 0, .08);
	display: block;
}
.p4all-account-form-actions .p4all-account-btn-primary {
	display: block !important;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}
/* !important on color too : themes with strong H2 typography presets
   (Elementor kits, Astra Global Colors, Divi header styles) push
   their own `color:` with higher specificity than `inherit`, which
   was leaving the title unstyled. Forcing var(--p4a-text) means the
   title always picks up the merchant's form-text colour. */
h2.p4all-account-title { margin: 0 0 8px !important; font-size: 24px !important; font-weight: 600 !important; line-height: 1.3 !important; color: var(--p4a-text, #333) !important; }
.p4all-account-email { margin: 0 0 20px; color: inherit; opacity: .7; font-size: 14px; }
.p4all-account-intro { margin: 0 0 20px; color: inherit; opacity: .85; }
.p4all-account-hint  { margin: 8px 0 0; color: inherit; opacity: .6; font-size: 13px; }

/* ---- Form controls ---------------------------------------------- */
.p4all-account-form  { display: flex; flex-direction: column; gap: 12px; }
.p4all-account-label { display: block; font-size: 13px; font-weight: 600; color: inherit; margin: 0 0 4px; }
.p4all-account-form input[type="email"],
.p4all-account-form input[type="text"] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 4px;
	font-size: 15px;
	box-sizing: border-box;
	/* Uses the merchant's field palette when set (via inline vars on
	   the .p4all-account root), else falls back to a neutral grey. */
	background: var(--p4a-field-bg, #fff);
	color: var(--p4a-field-text, inherit);
}
.p4all-account-form input[type="text"][name="code"] {
	letter-spacing: 6px;
	font-size: 22px;
	font-weight: 600;
	text-align: center;
}
.p4all-account-remember {
	display: flex; align-items: center; gap: 8px;
	margin-top: 5px;
	font-size: 14px; color: inherit; opacity: .85; cursor: pointer;
}
.p4all-account-btn {
	display: inline-block;
	padding: 10px 16px;
	border: 0;
	border-radius: 4px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	line-height: 1.3;
	/* Secondary buttons (« Modifier », « Télécharger la facture PDF »...)
	   share the tab / upcoming-step text colour so the whole surface
	   speaks the same visual language. Primary CTAs override this
	   below via .p4all-account-btn-primary. */
	color: var(--p4a-step-upcoming-text, #665665) !important;
	background: transparent;
}
/* Force the HTML `hidden` attribute to actually hide the element
   even when a theme injects `display: inline-block !important` on
   every <button>. Used by the JS to toggle « Modifier » off while
   the profile edit form is open. */
.p4all-account [hidden],
.p4all-account-popup [hidden] {
	display: none !important;
}
/* Kill the default <a> underline on button-styled links (« Télécharger
   la facture PDF »...) — themes push underlines on <a> globally via
   .entry-content a or similar high-specificity rules. */
a.p4all-account-btn,
a.p4all-account-btn:hover,
a.p4all-account-btn:focus,
a.p4all-account-btn:active {
	text-decoration: none !important;
}
/* Primary CTAs (« Se connecter », « M'envoyer un code », « Enregistrer
   le profil »...) reuse the merchant's own « Suivant / Confirmer »
   button skin from the order form (Schema `color_btn_next_bg` /
   `color_btn_next_text`, injected as --p4a-btn-bg / --p4a-btn-text
   inline on the account root). !important on the whole triplet
   (background, color, border) so a theme's global .button preset
   can't override the merchant's chosen skin. */
.p4all-account-btn-primary {
	background: var(--p4a-btn-bg, #2271b1) !important;
	color:      var(--p4a-btn-text, #fff)  !important;
	border:     0 !important;
}
/* Kill every border on every button of the account area (secondary CTA,
   primary CTA, tabs, sign-out, icon buttons, popup close). Beats theme
   presets that push a border on every <button> globally. */
.p4all-account-btn,
.p4all-account-btn-primary,
.p4all-account-signout,
.p4all-account-tab,
.p4all-account-icon-btn,
.p4all-account-popup-x {
	border: 0 !important;
}
/* Unified hover skin for EVERY button of the account area (primary
   CTA, secondary buttons, tabs, sign-out, icon buttons). Background
   picks up the merchant's « current step » bg and text picks up the
   « current step » text - so hover mimics the active-step highlight
   of the order form. !important to beat theme .button:hover presets. */
.p4all-account-btn:hover,
.p4all-account-btn-primary:hover,
.p4all-account-signout:hover,
.p4all-account-tab:hover,
.p4all-account-tab.is-active:hover,
.p4all-account-icon-btn:hover {
	background: var(--p4a-step-bg, #2271b1) !important;
	color:      var(--p4a-step-text, #fff)  !important;
	border-color: var(--p4a-step-bg, #2271b1) !important;
	opacity: 1 !important;
}
/* SVG icons inside a hovered button should follow the same tint via
   currentColor, which they already do - no extra rule needed. */

/* Breathing room above the primary CTA in every login step (email
   + code). The label/input pair right above always hugs the button
   otherwise ; 15px matches the merchant's usual field spacing. */
.p4all-account-form .p4all-account-btn-primary { margin-top: 15px !important; }
.p4all-account-btn[disabled], .p4all-account-btn.is-loading {
	opacity: .7; cursor: wait; pointer-events: none;
}

/* Inline spinner used on the login submit buttons while an AJAX
   request is in flight. Rendered as a rotating <span>, small enough
   to fit inline with the button label. */
.p4all-account-spinner {
	display: inline-block; width: 14px; height: 14px;
	border: 2px solid rgba(255, 255, 255, .5);
	border-top-color: #fff;
	border-radius: 50%;
	animation: p4all-account-spin 0.7s linear infinite;
	vertical-align: -3px; margin-right: 6px;
}
@keyframes p4all-account-spin { to { transform: rotate(360deg); } }
.p4all-account-btn-link {
	background: transparent; border: 0; color: var(--p4a-btn-bg, #2271b1);
	cursor: pointer; padding: 4px 0; text-decoration: underline;
	font-size: 14px;
}

/* "Utiliser une autre adresse" line under the Sign-in button. Rendered
   as a plain text link (not a button) - centered, discreet, always on
   its own line below the primary CTA. */
.p4all-account-reset-line {
	margin: 12px 0 0; text-align: center; font-size: 13px;
}
.p4all-account-reset-link {
	color: #646970; text-decoration: underline;
}
.p4all-account-reset-link:hover { color: #1d2327; }

/* ---- Status message (info / error / success) -------------------- */
.p4all-account-msg {
	padding: 10px 14px;
	border-radius: 4px;
	font-size: 14px;
	margin-top: 8px;
}
.p4all-account-msg.is-info    { background: #f0f6fc; color: #0a3b5c; }
.p4all-account-msg.is-success { background: #e6f4ea; color: #0f5132; }
.p4all-account-msg.is-error   { background: #fde8e8; color: #7a1d1d; }

/* ---- Dashboard : profile / orders / newsletter ------------------ */
.p4all-account-topbar {
	display: flex; justify-content: space-between; align-items: flex-start;
	gap: 16px; margin-bottom: 24px;
}
.p4all-account-section {
	padding: 20px 0; border-top: 1px solid rgba(0, 0, 0, .08);
}
.p4all-account-section:first-of-type { border-top: 0; padding-top: 0; }
.p4all-account-h3 { margin: 0 0 12px; font-size: 16px; font-weight: 600; color: inherit; }
.p4all-account-profile { margin: 0; }
.p4all-account-profile dt {
	font-size: 12px; font-weight: 600; color: inherit; opacity: .6;
	text-transform: uppercase; letter-spacing: .04em; margin-top: 8px;
}
.p4all-account-profile dd { margin: 2px 0 0; font-size: 15px; color: inherit; }
.p4all-account-orders {
	width: 100%; border-collapse: collapse; margin-top: 8px;
}
.p4all-account-orders th, .p4all-account-orders td {
	text-align: left; padding: 10px 8px; border-bottom: 1px solid rgba(0, 0, 0, .08);
	font-size: 14px;
}
.p4all-account-orders th { background: var(--p4a-field-bg, #f6f7f7); color: inherit; opacity: .85; font-weight: 600; }

/* Editable profile form. The form itself is a single-column stack :
   the fields live inside a nested `.p4all-account-form-grid` (2-col
   responsive grid) and the save button sits BELOW that grid on its
   own full-width row. */
.p4all-account-profile-form {
	display: block; margin: 0 0 8px;
}
.p4all-account-field { display: flex; flex-direction: column; }
.p4all-account-field label {
	font-size: 12px; font-weight: 600; color: inherit; opacity: .6;
	text-transform: uppercase; letter-spacing: .04em; margin: 0 0 4px;
}
.p4all-account-field input,
.p4all-account-field select {
	padding: 8px 10px; border: 1px solid rgba(0, 0, 0, .12); border-radius: 4px;
	font-size: 15px;
	background: var(--p4a-field-bg, #fff);
	color: var(--p4a-field-text, inherit);
}
.p4all-account-field-actions { grid-column: 1 / -1; margin-top: 4px; }
@media (max-width: 620px) {
	/* Nothing to override here : the outer form is already block,
	   the inner form-grid is switched to 1fr in the responsive
	   media query further down. */
}

/* Order list : one <details> accordion per order */
.p4all-account-orders-list { list-style: none; margin: 0; padding: 0; }
.p4all-account-order {
	border: 1px solid rgba(0, 0, 0, .08); border-radius: 6px;
	margin-bottom: 8px; background: var(--p4a-bg, #fff); overflow: hidden;
}
.p4all-account-order-details { }
.p4all-account-order-summary {
	list-style: none; cursor: pointer;
	display: grid; grid-template-columns: 20px 1.5fr 2fr 1fr 1.5fr;
	gap: 12px; align-items: center;
	padding: 12px 14px;
	font-size: 14px; color: inherit;
	background: var(--p4a-field-bg, #fafafa);
	transition: background .15s;
}
.p4all-account-order-summary::-webkit-details-marker { display: none; }
.p4all-account-order-summary:hover { background: rgba(0, 0, 0, .04); }
.p4all-account-order-arrow {
	display: inline-block; transition: transform .15s;
	color: inherit; opacity: .6; font-size: 18px; line-height: 1;
}
.p4all-account-order-details[open] .p4all-account-order-arrow {
	transform: rotate(90deg);
}
.p4all-account-order-num    { font-weight: 600; }
.p4all-account-order-date   { color: inherit; opacity: .7; }
.p4all-account-order-total  { font-weight: 600; }
.p4all-account-order-status { color: inherit; opacity: .7; text-align: right; }

.p4all-account-order-body { padding: 14px; border-top: 1px solid rgba(0, 0, 0, .08); }
.p4all-account-order-items {
	width: 100%; border-collapse: collapse; margin: 0 0 12px;
}
.p4all-account-order-items th,
.p4all-account-order-items td {
	text-align: left; padding: 6px 8px; border-bottom: 1px solid rgba(0, 0, 0, .08);
	font-size: 14px;
}
.p4all-account-order-items th {
	background: var(--p4a-field-bg, #f6f7f7); color: inherit; opacity: .85;
	font-weight: 600; font-size: 12px;
	text-transform: uppercase; letter-spacing: .03em;
}
.p4all-account-order-items .p4all-account-num { text-align: right; }
.p4all-account-order-totals {
	display: grid; grid-template-columns: 1fr auto; gap: 4px 16px;
	margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid rgba(0, 0, 0, .08);
}
.p4all-account-order-totals dt { color: #4d5157; font-size: 14px; margin: 0; }
.p4all-account-order-totals dd { color: inherit; font-size: 14px; margin: 0; text-align: right; }
.p4all-account-order-totals .p4all-account-total {
	font-size: 16px; font-weight: 700; padding-top: 6px;
	border-top: 1px solid rgba(0, 0, 0, .08); margin-top: 4px;
}
.p4all-account-order-meta {
	display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;
	margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid rgba(0, 0, 0, .08);
	font-size: 14px; color: inherit; opacity: .9;
}
.p4all-account-order-actions {
	display: flex; justify-content: space-between; align-items: center;
	gap: 12px; padding: 12px 14px; background: var(--p4a-field-bg, #fafafa);
	border-top: 1px solid rgba(0, 0, 0, .08);
}
.p4all-account-btn-danger { color: #b32d2e; }
.p4all-account-btn-danger:hover { color: #7a1d1d; }

/* Icon-only action buttons (trash bin, etc.) share the same tint
   as the secondary link buttons (« Télécharger la facture PDF »...)
   — merchant's `color_step_text` (upcoming step text). !important
   fights theme <button> presets that push their own colour. */
.p4all-account-icon-btn {
	background: transparent; border: 0; padding: 6px;
	color: var(--p4a-step-upcoming-text, #665665) !important;
	cursor: pointer; border-radius: 4px;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background .15s, color .15s;
}
/* Icon buttons (including the danger variant / trash) share the same
   unified hover skin as every other button - step-bg background +
   step-text foreground - so the whole surface behaves consistently
   when the visitor moves the mouse around. */
.p4all-account-icon-btn.p4all-account-icon-danger:hover {
	background: var(--p4a-step-bg, #2271b1) !important;
	color:      var(--p4a-step-text, #fff)  !important;
	opacity: 1 !important;
}

/* Responsive : collapse the sidebar into a horizontal strip. */
@media (max-width: 780px) {
	.p4all-account-shell { grid-template-columns: 1fr; }
	.p4all-account-sidebar { border-right: 0; border-bottom: 1px solid rgba(0, 0, 0, .08); padding: 16px 0 12px; }
	.p4all-account-sidebar-header { display: none; }
	.p4all-account-tabs { flex-direction: row; overflow-x: auto; }
	.p4all-account-tab {
		flex-direction: column; gap: 4px; padding: 10px 14px;
		font-size: 12px; border-left: 0; border-bottom: 3px solid transparent;
	}
	.p4all-account-tab.is-active { border-bottom-color: var(--p4a-btn-bg, #2271b1); border-left-color: transparent; }
	.p4all-account-signout { margin: 8px 16px; }
	.p4all-account-main { padding: 20px 16px; }
	.p4all-account-profile-view { grid-template-columns: 1fr; gap: 4px 0; }
	.p4all-account-profile-view dt { margin-top: 8px; }
	.p4all-account-form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
	.p4all-account-order-summary {
		grid-template-columns: 18px 1fr 1fr;
		grid-template-areas:
			"arrow num total"
			"arrow date status";
		row-gap: 2px;
	}
	.p4all-account-order-arrow  { grid-area: arrow; }
	.p4all-account-order-num    { grid-area: num; }
	.p4all-account-order-total  { grid-area: total; text-align: right; }
	.p4all-account-order-date   { grid-area: date; font-size: 12px; }
	.p4all-account-order-status { grid-area: status; font-size: 12px; text-align: right; }
	.p4all-account-order-meta { grid-template-columns: 1fr; }
	.p4all-account-order-actions { flex-direction: column; align-items: stretch; }
}

/* Newsletter toggle */
.p4all-account-toggle {
	display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
	user-select: none;
}
.p4all-account-toggle input[type="checkbox"] {
	position: absolute; opacity: 0; pointer-events: none;
}
.p4all-account-toggle-slider {
	display: inline-block; width: 44px; height: 24px;
	background: #c3c4c7; border-radius: 999px; position: relative;
	transition: background .15s;
}
.p4all-account-toggle-slider::after {
	content: ''; position: absolute; top: 2px; left: 2px;
	width: 20px; height: 20px; background: #fff; border-radius: 50%;
	transition: transform .15s; box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.p4all-account-toggle input:checked + .p4all-account-toggle-slider { background: var(--p4a-btn-bg, #00a32a); }
.p4all-account-toggle input:checked + .p4all-account-toggle-slider::after { transform: translateX(20px); }
.p4all-account-toggle-label { font-size: 14px; color: inherit; }

/* ---- Quick-login link inside the contact-details step + popup ---- */
.p4all-account-cta {
	margin: -4px 0 12px; font-size: 14px;
}
.p4all-account-cta-link {
	color: inherit; text-decoration: underline; cursor: pointer;
	font-weight: inherit; opacity: .85;
}
.p4all-account-cta-link:hover { opacity: 1; }

.p4all-account-popup {
	position: fixed; inset: 0; z-index: 100000;
	display: flex; align-items: center; justify-content: center;
}
.p4all-account-popup[hidden] { display: none; }
.p4all-account-popup-backdrop {
	position: absolute; inset: 0; background: rgba(0, 0, 0, .45);
}
.p4all-account-popup-card {
	position: relative;
	border-radius: 8px;
	max-width: 440px; width: calc(100% - 32px);
	padding: 28px 28px 24px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
	/* Background + text color are applied as inline style by
	   PopupInjector, pulled from the merchant's order-form palette
	   (Schema `color_form_bg` / `color_form_text`) so the popup
	   matches the form the visitor was about to fill. Fallbacks
	   below via CSS variables if the inline style is missing. */
	background: var(--p4a-bg, #fff);
	color: var(--p4a-text, #333);
}
/* Every text element inherits from the card. The single !important on
   headings + labels is only there to beat the aggressive theme
   typography presets (Elementor kits, Astra Global Colors, etc.) that
   push their own `color: X` on h2/h3/label. Structure preserved so
   the popup keeps the same coherent look as the order form. */
.p4all-account-popup-card h1,
.p4all-account-popup-card h2,
.p4all-account-popup-card h3,
.p4all-account-popup-card h4,
.p4all-account-popup-card p,
.p4all-account-popup-card label,
.p4all-account-popup-card span,
.p4all-account-popup-card small,
.p4all-account-popup-card strong,
.p4all-account-popup-card em,
.p4all-account-popup-card li {
	color: inherit !important;
}
/* Inputs : re-use the form's field palette. Same custom properties
   the free plugin's form.css consumes, so a dark form theme
   renders dark inputs here too. */
.p4all-account-popup-card input,
.p4all-account-popup-card select,
.p4all-account-popup-card textarea {
	background: var(--p4a-field-bg, #f5f5f5) !important;
	color: var(--p4a-field-text, #333) !important;
	border: 1px solid rgba(0, 0, 0, .12) !important;
}
/* Primary button keeps the merchant's chosen skin - explicit re-override
   since the inherit rule above would otherwise flatten the button text. */
.p4all-account-popup-card .p4all-account-btn-primary,
.p4all-account-popup-card .p4all-account-btn-primary span {
	color: var(--p4a-btn-text, #fff) !important;
	background: var(--p4a-btn-bg, #2271b1) !important;
}
.p4all-account-popup-x {
	position: absolute; top: 8px; right: 8px;
	background: transparent !important; border: 0 !important; font-size: 24px;
	cursor: pointer;
	/* Same tint as the merchant's « current step » tab background so
	   the X visually rhymes with the checkout's active state. */
	color: var(--p4a-step-bg, #2271b1) !important;
	width: 32px; height: 32px; line-height: 32px;
	box-shadow: none !important;
	transition: opacity .15s;
}
/* Force-kill the hover / focus background that themes (Astra, Kadence,
   OceanWP...) apply to any <button>. Hover only nudges opacity so the
   X keeps its step-tab tint. */
.p4all-account-popup-x:hover,
.p4all-account-popup-x:focus,
.p4all-account-popup-x:active {
	background: transparent !important;
	color: var(--p4a-step-bg, #2271b1) !important;
	opacity: .75;
	outline: none !important;
	box-shadow: none !important;
}
/* !important on color too : the same theme H2 presets that leak into
   the Mon compte page also leak into the popup. Forcing var(--p4a-text)
   guarantees the title matches the merchant's form-text colour. */
h2.p4all-account-popup-title { margin: 0 0 8px !important; font-size: 24px !important; font-weight: 600 !important; line-height: 1.3 !important; color: var(--p4a-text, #333) !important; }
.p4all-account-popup-intro { margin: 0 0 16px; color: #4d5157; }

body.p4all-account-lock { overflow: hidden; }

/* ---- Small screens ---------------------------------------------- */
@media (max-width: 620px) {
	.p4all-account-card { padding: 20px 16px; }
	.p4all-account-orders thead { display: none; }
	.p4all-account-orders, .p4all-account-orders tbody, .p4all-account-orders tr, .p4all-account-orders td { display: block; width: 100%; }
	.p4all-account-orders tr { padding: 8px 0; border-bottom: 1px solid #f0f0f1; }
	.p4all-account-orders td { padding: 4px 0; border-bottom: 0; }
	.p4all-account-orders td::before {
		content: attr(data-th) ' : ';
		font-weight: 600; color: #4d5157; margin-right: 6px;
	}
	.p4all-account-topbar { flex-direction: column; align-items: stretch; }
}