/* Pay4All Form — Public styles */
/* color:inherit so the .p4all-form-wrap merchant-configured text color
   cascades down to every label / field text inside the form. */
.p4all-form{max-width:920px;margin:0 auto;font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:inherit}
.p4all-form *{box-sizing:border-box}
.p4all-form-wrap .p4all-field label,
.p4all-form-wrap .p4all-field fieldset legend,
.p4all-form-wrap .p4all-step h3{color:inherit}

/* Override Elementor kit's input padding so fields don't get the theme's
   horizontal padding (which leaves the value way off from the left edge
   and breaks the layout). Scoped to .p4all-form-wrap with !important so
   it outranks `.elementor-kit-NNNN` rules regardless of kit ID.
   Checkboxes / radios are excluded — they have their own dimensions and
   should sit inline with their label text. */
.p4all-form-wrap input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.p4all-form-wrap textarea,
.p4all-form-wrap .elementor-field-textual{padding:20px 2px 20px 2px !important}

/* Keep checkbox / radio inline with their label text. Elementor kits
   often turn every input into `display:block;width:100%`, which makes
   the input render on its own line and the text appear to follow a
   line break. We force inline + native size + zero padding so the
   markup renders as a tight inline group: [☐] My label text. */
.p4all-form-wrap input[type="checkbox"],
.p4all-form-wrap input[type="radio"]{display:inline-block !important;width:auto !important;height:auto !important;margin:0 8px 0 0 !important;padding:0 !important;vertical-align:middle}
.p4all-form-wrap .p4all-field label > input[type="checkbox"],
.p4all-form-wrap .p4all-field label > input[type="radio"]{margin-right:8px}
.p4all-form-wrap .p4all-field-checkbox label,
.p4all-form-wrap .p4all-field fieldset label{display:inline-flex !important;align-items:center;gap:8px;font-weight:400}
.p4all-error{padding:12px;background:#fee;border:1px solid #f99;color:#900;border-radius:4px}

.p4all-steps{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0 0 24px;gap:8px}
.p4all-steps li{flex:1;min-width:120px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;background:var(--p4all-step-bg,#f5f5f5);color:var(--p4all-step-text,#665665);border-radius:6px;font-size:13px;user-select:none;cursor:default;transition:background .15s,color .15s}
.p4all-steps li.is-active{background:var(--p4all-step-active-bg,var(--p4all-primary,#2271b1));color:var(--p4all-step-active-text,#fff);font-weight:600}
.p4all-steps li.is-done{background:var(--p4all-step-done-bg,#dceddc);color:var(--p4all-step-done-text,#0a4b78)}
.p4all-steps li.is-clickable{cursor:pointer}
.p4all-steps li.is-clickable:hover{filter:brightness(.96)}
.p4all-step-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.08);font-weight:600;font-size:12px;flex:0 0 auto;line-height:1}
.p4all-steps li.is-active .p4all-step-num{background:rgba(255,255,255,.25);color:#fff}
.p4all-steps li.is-done .p4all-step-num{background:rgba(10,75,120,.15)}
.p4all-step-label{white-space:nowrap}

.p4all-step{margin-top:8px}
.p4all-step h3{margin:0 0 16px;font-size:18px}

.p4all-products{display:grid;gap:16px}
.p4all-products.p4all-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.p4all-products.p4all-list{grid-template-columns:1fr}
/* Section heading inserted between groups of products — spans the full
   width of the grid so it visually separates the rows below it. */
.p4all-product-section{grid-column:1 / -1;margin:8px 0 0;font-size:18px;line-height:1.3;border-bottom:1px solid currentColor;padding-bottom:6px;opacity:.9}
/* Product card uses the merchant-configured field colors so the entire
   "inside the form" surface (inputs, products, cart, delivery/payment)
   shares a single coherent look. */
.p4all-product{border:0;border-radius:8px;background:var(--p4all-field-bg,#f5f5f5);color:var(--p4all-field-text,#333);overflow:hidden;display:flex;flex-direction:column}
.p4all-products.p4all-list .p4all-product{flex-direction:row;align-items:stretch}
.p4all-product-thumb{background:transparent;display:flex;align-items:center;justify-content:center}
/* Grid: cap the thumbnail at 280x280 so tall photos don't break the card
   layout while preserving aspect ratio (no object-fit cropping). 15px of
   margin around the image so it doesn't touch the card edges. */
/* !important on margin because themes / Elementor kits frequently
   target <img> with higher-specificity selectors (e.g. .elementor-kit-NNNN
   img, .elementor-widget img) that also use !important. To beat those
   we both pin !important AND raise specificity by anchoring to
   .p4all-form-wrap (added once on every product card via the wrapper). */
.p4all-form-wrap .p4all-product-thumb img{display:block;max-width:280px;max-height:280px;width:auto;height:auto;margin:15px !important}
.p4all-form-wrap .p4all-products.p4all-grid .p4all-product-thumb img{margin:15px auto !important}
/* List: smaller fixed slot, image scales to 130px keeping its aspect
   ratio (no object-fit cover, so the full image is always visible). */
.p4all-form-wrap .p4all-products.p4all-list .p4all-product-thumb{flex:0 0 130px}
.p4all-form-wrap .p4all-products.p4all-list .p4all-product-thumb img{max-width:130px;max-height:130px;width:auto;height:auto;margin:15px !important}
.p4all-product-body{padding:12px;display:flex;flex-direction:column;gap:8px;flex:1}
.p4all-product-head{display:flex;flex-direction:column;gap:4px}
.p4all-product-trail{display:flex;flex-direction:column;gap:8px;margin-top:auto}
/* Title / desc / price all inherit the product card color so they share
   the merchant-configured "Couleur du formulaire" text colour. We force
   it with !important because themes and Elementor kits typically style
   headings (h3 / h4) directly with higher specificity, which would
   otherwise override our color:inherit. */
.p4all-product-title{margin:0;font-size:15px;line-height:1.3;color:inherit !important}
.p4all-product-desc{margin:0;color:inherit;opacity:.85;font-size:13px}
.p4all-product-price{font-size:15px;color:inherit}
.p4all-product-price strong{color:inherit}
.p4all-product-price del{color:inherit;opacity:.55;margin-right:6px}

/* Out-of-stock badge + greyed quantity input. */
.p4all-badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-top:6px}
.p4all-badge-oos{background:#fee;color:#a00;border:1px solid #f5a7a7}
.p4all-product.is-out-of-stock{opacity:.65}
.p4all-product.is-out-of-stock .p4all-qty-input,
.p4all-product.is-out-of-stock .p4all-qty button{cursor:not-allowed;pointer-events:none;opacity:.6}

/* Running total row at the bottom of step 1. Reuses .p4all-product so
   it inherits the merchant-configured field colors, but lays itself out
   as a single flat bar (no thumbnail, no quantity column). The total
   value is pulled hard to the right with margin-left:auto so it stays
   right-aligned regardless of list/grid mode or any other flex rule. */
.p4all-product.p4all-product-total{flex-direction:row !important;align-items:center;padding:12px 16px;margin-top:12px;font-weight:600;font-size:16px}
.p4all-product.p4all-product-total .p4all-product-total-label{flex:0 0 auto}
.p4all-product.p4all-product-total .p4all-product-total-value{margin-left:auto;text-align:right;font-size:18px}

/* List layout: body becomes [head | right-aligned price+qty block]. */
.p4all-products.p4all-list .p4all-product-body{flex-direction:row;align-items:center;gap:18px}
.p4all-products.p4all-list .p4all-product-head{flex:1;min-width:0}
.p4all-products.p4all-list .p4all-product-trail{flex:0 0 auto;margin-top:0;align-items:flex-end;text-align:right;gap:6px}
.p4all-products.p4all-list .p4all-product-trail .p4all-qty{justify-content:flex-end}

.p4all-qty{display:flex;align-items:center;gap:6px}
/* +/- buttons and the quantity input sit inside the product card, so
   they inherit the field colors with a slightly darker bg for contrast. */
.p4all-qty button{width:32px;height:32px;border:0;background:rgba(0,0,0,.08);color:inherit;border-radius:4px;cursor:pointer;font-size:18px;line-height:1}
.p4all-qty button:hover{background:rgba(0,0,0,.15)}
.p4all-qty-input{width:80px !important;height:32px;text-align:center;border:0;background:rgba(0,0,0,.08);color:inherit;border-radius:4px;font-size:14px}
.p4all-line-total{margin-left:auto;font-weight:600;font-size:14px;min-width:80px;text-align:right}
.p4all-products.p4all-list .p4all-line-total,
.p4all-products.p4all-grid .p4all-line-total{display:none}

.p4all-field{margin-bottom:14px;display:block}
.p4all-field label{display:block;font-weight:500;margin-bottom:4px}
/* Text fields, selects and textareas share the merchant-configured
   field colors. Border is removed in favour of a flat coloured surface
   for a cleaner look that matches the products + delivery rows. */
/* Background/text colors are forced with !important + the .p4all-form-wrap
   prefix because Elementor kits and many themes ship `input { background:#fff;
   color:#000 }` at a specificity that beats a plain `.p4all-field input` rule,
   making the merchant's chosen colors silently disappear on the Coordonnées
   step. Same defensive pattern as the padding rule at the top of this file. */
.p4all-form-wrap .p4all-field input[type=text],
.p4all-form-wrap .p4all-field input[type=email],
.p4all-form-wrap .p4all-field input[type=tel],
.p4all-form-wrap .p4all-field input[type=date],
.p4all-form-wrap .p4all-field select,
.p4all-form-wrap .p4all-field textarea{width:100%;padding:8px 10px;border:1px solid transparent;border-radius:4px;font-size:14px;background:var(--p4all-field-bg,#f5f5f5) !important;color:var(--p4all-field-text,#333) !important}
.p4all-form-wrap .p4all-field input[type=number]{width:80px;padding:8px 10px;border:1px solid transparent;border-radius:4px;font-size:14px;background:var(--p4all-field-bg,#f5f5f5) !important;color:var(--p4all-field-text,#333) !important}
.p4all-field textarea{font-family:inherit}
/* Placeholders pick up the field text color too, just dimmed so they
   stay distinguishable from real values. */
.p4all-form-wrap .p4all-field input::placeholder,.p4all-form-wrap .p4all-field textarea::placeholder{color:var(--p4all-field-text,#333) !important;opacity:.55}
.p4all-field small{display:block;color:inherit;opacity:.7;margin-top:3px;font-size:12px}
.p4all-req{color:#d63638}
.p4all-field fieldset{border:0;padding:0;margin:0 0 12px}
.p4all-field fieldset label{display:inline-flex;align-items:center;gap:6px;font-weight:400;margin-right:14px}

.p4all-deliveries,.p4all-methods{display:grid;gap:8px}
/* Deliveries / payment methods share the merchant-configured field
   colors so the whole "inside-the-form" surface (inputs + products +
   cart + delivery/payment) stays cohesive. When a radio is checked,
   the row switches to the "Étape en cours" colors so the selected
   option visually pops the same way the active step badge does. */
/* Delivery + payment options use the "Étape à venir" colors when not
 * selected and the "Étape en cours" colors when selected — visually
 * consistent with the step pills at the top of the form.
 * !important on `color` because these blocks are rendered as <label>s
 * and most themes ship a `label { color: ... }` rule that beats this
 * one on specificity. */
.p4all-delivery,.p4all-method{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;border:0;border-radius:6px;padding:10px 12px;background:var(--p4all-step-bg,#f5f5f5);color:var(--p4all-step-text,#665665) !important;cursor:pointer;transition:background .15s,color .15s}
/* Visually hide the radio while keeping it focusable for keyboard / AT
   users. The whole row is the click target via <label>, and the selected
   state is conveyed by the row background change below. */
.p4all-delivery input[type="radio"],.p4all-method input[type="radio"]{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.p4all-delivery:hover,.p4all-method:hover{filter:brightness(.96)}
.p4all-delivery:has(input:checked),.p4all-method:has(input:checked){background:var(--p4all-step-active-bg,var(--p4all-primary,#2271b1));color:var(--p4all-step-active-text,#fff) !important}
.p4all-delivery small,.p4all-method small{grid-column:1 / -1;color:inherit;opacity:.85;margin-top:2px}
.p4all-delivery-title,.p4all-method-title{font-weight:600}
.p4all-delivery-price{font-weight:600;color:inherit}

.p4all-actions{margin-top:24px;display:flex;justify-content:flex-end;gap:8px}
.p4all-actions .p4all-prev{margin-right:auto}
.p4all-actions .button{padding:10px 18px;border-radius:6px;border:1px solid var(--p4all-btn-prev-bg,#ccc);background:var(--p4all-btn-prev-bg,#fff);color:var(--p4all-btn-prev-text,#333);cursor:pointer;font-size:14px}
.p4all-actions .button-primary{background:var(--p4all-btn-next-bg,var(--p4all-primary,#2271b1));color:var(--p4all-btn-next-text,#fff);border-color:var(--p4all-btn-next-bg,var(--p4all-primary,#2271b1))}
.p4all-actions .button-primary[disabled]{opacity:.6;cursor:wait}

/* Cart recap before validation uses the merchant-configured field
   colors to stay consistent with the rest of the form. Internal row
   separators are kept subtle via a semi-transparent black to avoid
   shipping a third configurable colour just for the divider. */
.p4all-summary-table{width:100%;border-collapse:collapse;background:var(--p4all-field-bg,#f5f5f5);color:var(--p4all-field-text,#333);border:0;border-radius:6px;overflow:hidden}
.p4all-summary-table td,.p4all-summary-table th{padding:8px 12px;border-bottom:1px solid rgba(0,0,0,.08);text-align:left;font-weight:400}
.p4all-summary-table tr:last-child td,.p4all-summary-table tr:last-child th{border-bottom:0}

.p4all-cat-errors,.p4all-errors{margin-top:12px}
/* Category-rule + alert blocks: pull the merchant-configured alert colors
 * from Réglages › Couleur › Message d'erreur, drop the default UL bullets
 * (overridden by a triangular DANGER SVG injected via ::before), and bump
 * the size so the message reads at a glance — these errors are the only
 * blocker between the customer and the next step.
 *
 * The SVG is a yellow-and-black warning triangle baked into a data URI so
 * the rule has zero extra HTTP requests. */
/* `:not(:empty)` is critical — the outer .p4all-cat-errors div is in the
 * DOM all the time (form.js writes innerHTML there when categories fail
 * a rule); without the qualifier the styled box would show even when
 * there's no error to report. */
.p4all-cat-errors:not(:empty),.p4all-min-order-error:not([hidden]),.p4all-alert{background:var(--p4all-alert-bg,#fff4f4);color:var(--p4all-alert-text,#990000) !important;border-radius:8px;padding:14px 16px;line-height:1.35;font-size:1.6em;margin-top:12px}
.p4all-cat-errors ul,.p4all-alert ul{list-style:none;margin:6px 0 0;padding:0;color:inherit}
.p4all-cat-errors li,.p4all-alert li{margin:4px 0;color:inherit}

/* Order success / cancelled cards reuse the merchant-configured form
   colors (Réglages › Affichage › Formulaire) so they stay on-brand
   with the rest of the form. !important on the h2 color to beat
   theme/Elementor heading rules that target h2 directly. */
.p4all-thankyou{padding:24px;background:var(--p4all-form-bg,#fff);color:var(--p4all-form-text,#333);border:0;border-radius:8px}
.p4all-thankyou h2{margin-top:0;color:inherit !important}

.p4all-cancelled{padding:24px;background:var(--p4all-form-bg,#fff);color:var(--p4all-form-text,#333);border:0;border-radius:8px}
.p4all-cancelled h2{margin-top:0;color:inherit !important}
.p4all-cancelled .button{display:inline-block;padding:10px 18px;border-radius:6px;border:1px solid var(--p4all-btn-next-bg,var(--p4all-primary,#2271b1));background:var(--p4all-btn-next-bg,var(--p4all-primary,#2271b1));color:var(--p4all-btn-next-text,#fff);text-decoration:none;font-size:14px;margin-top:8px}

@media (max-width:600px){
	/* Step badges on smartphones: keep only the round number, hide the
	   text label so the 5 steps fit a narrow screen without wrapping.
	   The li keeps its full per-state background (todo / active / done)
	   so the colored fill stays visible behind the number. We anchor
	   the selector to .p4all-form-wrap AND use !important because
	   themes / Elementor kits commonly override <li> backgrounds with
	   higher specificity that wins on narrow viewports. */
	.p4all-form-wrap .p4all-steps{gap:6px}
	.p4all-form-wrap .p4all-steps li{font-size:12px !important;padding:10px 4px !important;min-width:0 !important;flex:1 !important;background:var(--p4all-step-bg,#f5f5f5) !important;color:var(--p4all-step-text,#665665) !important}
	.p4all-form-wrap .p4all-steps li.is-active{background:var(--p4all-step-active-bg,var(--p4all-primary,#2271b1)) !important;color:var(--p4all-step-active-text,#fff) !important}
	.p4all-form-wrap .p4all-steps li.is-done{background:var(--p4all-step-done-bg,#dceddc) !important;color:var(--p4all-step-done-text,#0a4b78) !important}
	.p4all-form-wrap .p4all-step-label{display:none !important}
	/* Drop the dark overlay inside the round number so it sits flush on
	   the colored li background. The default / active / done overlays
	   were designed for desktop where the label sits next to the num
	   pill — on mobile (label hidden) they just clash with the li bg. */
	.p4all-form-wrap .p4all-step-num,
	.p4all-form-wrap .p4all-steps li.is-active .p4all-step-num,
	.p4all-form-wrap .p4all-steps li.is-done .p4all-step-num{background:none !important;color:inherit !important}
	.p4all-actions{flex-direction:column-reverse}
	.p4all-actions .button{width:100%}

	/* List mode on smartphones: stack the trail (price + qty) BELOW the
	   head (title + desc) instead of placing them side-by-side, which
	   gives more breathing room on narrow screens. */
	.p4all-products.p4all-list .p4all-product-body{flex-direction:column;align-items:stretch;gap:8px}
	.p4all-products.p4all-list .p4all-product-trail{align-items:flex-start;text-align:left}
	.p4all-products.p4all-list .p4all-product-trail .p4all-qty{justify-content:flex-start}
}

/* --- Filter bar (optional widget below the step bar) ---
 * All colours resolve to the CSS variables injected in :root by
 * Frontend\Assets.php (Réglages › Affichage › Couleur). Zero PHP-inline
 * styles required — deploying just this CSS is enough to see the change. */
.p4all-filters{display:flex;flex-wrap:wrap;gap:12px;margin:10px 0 18px;padding:12px 14px;border:1px solid rgba(0,0,0,.08);border-radius:8px;background:var(--p4all-step-active-bg,#2271b1);color:var(--p4all-step-active-text,#fff)}
/* JS toggles the [hidden] attribute when the customer leaves step 1.
 * `.p4all-filters` (spécificité 0,1,0) écrase la règle UA `[hidden]`
 * (0,0,1) — on rétablit `display:none` avec une spécificité supérieure. */
.p4all-filters[hidden]{display:none}
.p4all-filter{display:flex;flex-direction:column;gap:4px;flex:1 1 160px;min-width:0;position:relative}
.p4all-filter label{font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:inherit;opacity:.9}
/* Tri <select> shares the same footprint as the custom dropdowns : same
 * padding, same 6px radius, same colours as "Couleur du formulaire". */
.p4all-filter select.p4all-filter-sort{padding:4px 10px !important;border:1px solid transparent !important;border-radius:6px !important;font-size:14px;font-family:inherit;line-height:1.4;max-width:100%;height:32px;background:var(--p4all-field-bg,#f5f5f5) !important;color:var(--p4all-field-text,#333) !important;border-color:var(--p4all-field-bg,#f5f5f5) !important;text-transform:none !important}
.p4all-product.is-filter-hidden{display:none !important}

/* Custom dropdown : the visible button/panel replace the native <select>.
 * Colours pull from --p4all-field-bg / --p4all-field-text so the widget
 * follows "Couleur du formulaire". The count tag inverts these colours to
 * stay visible against the picker's own background. */
/* Elementor / Hello theme ship .elementor button rules with !important that
 * would otherwise repaint everything inside the picker (white text on a
 * dark purple button). We override with !important on the wrap AND on the
 * button so the "Couleur du formulaire" palette wins. */
.p4all-cs{position:relative;border:1px solid transparent !important;border-radius:6px;font-size:14px;line-height:1.2;background:var(--p4all-field-bg,#f5f5f5) !important;color:var(--p4all-field-text,#333) !important;border-color:var(--p4all-field-bg,#f5f5f5) !important}
.p4all-cs-btn{display:flex;align-items:center;justify-content:space-between;width:100%;padding:4px 10px !important;border:0 !important;background:transparent !important;color:var(--p4all-field-text,#333) !important;font:inherit !important;cursor:pointer !important;text-align:left !important;gap:8px;min-height:32px;text-transform:none !important;letter-spacing:normal !important}
.p4all-cs-current{color:var(--p4all-field-text,#333) !important;text-transform:none !important}
.p4all-cs-arrow{color:var(--p4all-field-text,#333) !important;font-size:20px !important;line-height:1;opacity:.85;transition:transform .15s}
.p4all-cs-btn:focus{outline:2px solid var(--p4all-primary,#2271b1);outline-offset:1px}
.p4all-cs-current{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5;padding-bottom:2px}
.p4all-cs.is-open .p4all-cs-arrow{transform:rotate(180deg)}
.p4all-cs-list{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:20;margin:0;padding:4px 0;list-style:none;background:var(--p4all-field-bg,#fff);color:var(--p4all-field-text,#333);border:1px solid rgba(0,0,0,.1);border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.15);max-height:280px;overflow:auto}
.p4all-cs-option{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;gap:8px;cursor:pointer;color:inherit}
.p4all-cs-option:hover,.p4all-cs-option.is-selected{background:rgba(0,0,0,.06)}
.p4all-cs-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5;padding-bottom:2px}
/* Count tag inverts the field palette so it stays legible sitting on top
 * of the same field-bg used by the option row. */
.p4all-cs-count{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;line-height:1.35;letter-spacing:.02em;flex:0 0 auto;background:var(--p4all-field-text,#333);color:var(--p4all-field-bg,#f5f5f5)}
.p4all-cs[hidden]{display:none}
.p4all-cs-list[hidden]{display:none}
/* Section titles are shown by default (even when the filter widget is
 * present) so a customer who hasn't touched the picker keeps the merchant's
 * grouping. They only get hidden the moment any filter/sort is applied,
 * because a filtered / re-sorted list crosses the original sections. The
 * `.p4all-filter-active` class is toggled by JS as filters change. */
.p4all-form.p4all-filter-active .p4all-product-section{display:none}
@media (max-width:640px){
	.p4all-filter{flex:1 1 100%}
}