/* 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}
/* 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}

/* 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. */
.p4all-field input[type=text],.p4all-field input[type=email],.p4all-field input[type=tel],
.p4all-field input[type=date],.p4all-field select,
.p4all-field textarea{width:100%;padding:8px 10px;border:1px solid transparent;border-radius:4px;font-size:14px;background:var(--p4all-field-bg,#f5f5f5);color:var(--p4all-field-text,#333)}
.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);color:var(--p4all-field-text,#333)}
.p4all-field textarea{font-family:inherit}
/* Placeholders pick up the field text color too, just dimmed so they
   stay distinguishable from real values. */
.p4all-field input::placeholder,.p4all-field textarea::placeholder{color:var(--p4all-field-text,#333);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. */
.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-field-bg,#f5f5f5);color:var(--p4all-field-text,#333);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)}
.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}
.p4all-cat-errors ul,.p4all-alert ul{margin:6px 0 0 20px;color:#900}
.p4all-alert{padding:10px 12px;background:#fff4f4;border:1px solid #f5a7a7;color:#900;border-radius:6px}

/* 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}
}