/*
 * LC Médical : buttons. ONE scale for the whole site (tokens in tokens.css, table in FOUNDATION.md).
 *
 *   size   height   label                      padding (block / inline)   used for
 *   sm     44px     14px, tracking 0.05em      0.45em / 1.1em             filters, toolbar and table actions, narrow cards
 *   md     48px     15px, tracking 0.06em      0.60em / 1.5em             DEFAULT: card CTA, coupon, forms, secondary rows
 *   lg     56px     16px, tracking 0.06em      0.70em / 2.0em             page-level primary: hero, strips, PDP / cart / checkout CTA
 *   Every size: radius 4px (--lc-ctl-r), Barlow Semi Condensed 700 uppercase, flat (no shadow), label never below 14px.
 *
 *   variant     class                  look
 *   primary     .lc-btn                medical-blue fill, white label (4.82:1); hover blue-700, active blue-800
 *   secondary   .lc-btn--secondary     paper, 1.5px medical-blue outline, blue-700 label (5.54:1)
 *   on-dark     .lc-btn--on-dark       white fill, navy label, for navy bands
 *   ok          .lc-btn--ok            confirmation-green fill (white 5.3:1): WhatsApp as the main action
 *   wa          .lc-btn--wa            paper, green outline, green-deep label (6.9:1): WhatsApp as a side action
 *   navy        .lc-btn--navy          navy solid, dark bands only
 *   label       .lc-btn--label         paper, ink hairline
 *   ghost/link  .lc-btn--ghost|--link  text only, underlined, blue-700
 *   modifiers   .lc-btn--block (full width), .is-loading, :disabled / .disabled / [aria-disabled]
 *
 *   <a class="lc-btn lc-btn--lg">Commander</a>
 *   <a class="lc-btn lc-btn--secondary">Voir les rayons</a>
 *
 * WooCommerce / Blocksy native buttons (.button, .button.alt, button[type=submit], input[type=submit] inside #main)
 * join the same rule: they are md, and lg for the add-to-cart, place-order and proceed-to-checkout buttons.
 * Red is never a button. Green is for good news only.
 */

/* ---------- Base: .lc-btn and the native buttons share one rule ----------
   The native list is scoped to #main through :where() (no specificity), excludes anything that is already an .lc-btn,
   the header search button and the tabs (they own their markup).
   Two rules on purpose. The first only DEFINES the scale variables, at low specificity, so sizes and variants
   (.lc-btn--sm, .lc-btn--secondary...) and page CSS can still change them. The second APPLIES them; its third selector
   lifts an .lc-btn that is also a Woo / Blocksy button (button.lc-btn.button, #place_order) to the specificity of
   Blocksy's own `.woocommerce button.button` rule, which would otherwise win and flatten it to 48px. */
.lc-btn,
body :where(#main) :is(a.button, a.added_to_cart, button.button, input.button, input[type='submit'], button[type='submit'], .wp-element-button):not(.lc-btn, .lc-search__go, .lc-tabs__tab) {
	--_bg: var(--lc-action);
	--_bg-hover: var(--lc-action-hover);
	--_bg-active: var(--lc-action-active);
	--_fg: var(--lc-on-action);
	--_ring: 0 0 0 0 transparent;
	--_h: var(--lc-ctl-md);
	--_fs: var(--lc-btn-md-fs);
	--_ls: var(--lc-btn-md-ls);
	--_px: var(--lc-btn-md-px);
	--_py: var(--lc-btn-md-py);
}

.lc-btn,
body :where(#main) :is(a.button, a.added_to_cart, button.button, input.button, input[type='submit'], button[type='submit'], .wp-element-button):not(.lc-btn, .lc-search__go, .lc-tabs__tab),
:is(a, button, input).lc-btn:is(.button, [type='submit'], .wp-element-button) {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--lc-btn-gap);
	box-sizing: border-box;
	min-block-size: var(--_h);
	min-inline-size: var(--_h);
	margin: 0;
	padding: var(--_py) var(--_px);
	border: 0;
	border-radius: var(--lc-ctl-r);
	background-color: var(--_bg);
	background-image: none;
	box-shadow: var(--_ring);
	color: var(--_fg);
	font-family: var(--lc-font-label);
	font-size: var(--_fs);
	font-weight: var(--lc-btn-fw);
	line-height: var(--lc-btn-lh);
	letter-spacing: var(--_ls);
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	white-space: normal;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color var(--lc-dur-fast) linear, box-shadow var(--lc-dur-med) var(--lc-ease-out), color var(--lc-dur-fast) linear;
}

/* Native buttons that carry a page-level action are lg. (The same buttons usually also carry .lc-btn--lg in our templates.) */
body :where(#main) :is(.single_add_to_cart_button, #place_order, a.checkout-button, .checkout-button, .wc-proceed-to-checkout .button):not(.lc-btn) {
	--_h: var(--lc-ctl-lg);
	--_fs: var(--lc-btn-lg-fs);
	--_ls: var(--lc-btn-lg-ls);
	--_px: var(--lc-btn-lg-px);
	--_py: var(--lc-btn-lg-py);
}

/* Native buttons inside notices (Woo "Voir le panier") are sm. */
body :where(#main) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notices-wrapper) .button:not(.lc-btn) {
	--_h: var(--lc-ctl-sm);
	--_fs: var(--lc-btn-sm-fs);
	--_ls: var(--lc-btn-sm-ls);
	--_px: var(--lc-btn-sm-px);
	--_py: var(--lc-btn-sm-py);
}

.lc-btn:hover,
body :where(#main) :is(a.button, a.added_to_cart, button.button, input.button, input[type='submit'], button[type='submit'], .wp-element-button):not(.lc-btn, .lc-search__go, .lc-tabs__tab):hover,
:is(a, button, input).lc-btn:is(.button, [type='submit'], .wp-element-button):hover {
	background-color: var(--_bg-hover);
	color: var(--_fg);
}

.lc-btn:active,
body :where(#main) :is(a.button, a.added_to_cart, button.button, input.button, input[type='submit'], button[type='submit'], .wp-element-button):not(.lc-btn, .lc-search__go, .lc-tabs__tab):active,
:is(a, button, input).lc-btn:is(.button, [type='submit'], .wp-element-button):active {
	background-color: var(--_bg-active);
}

.lc-btn .lc-icon {
	inline-size: 1.3em;
	block-size: 1.3em;
}

/* ---------- Sizes ---------- */
.lc-btn--sm {
	--_h: var(--lc-ctl-sm);
	--_fs: var(--lc-btn-sm-fs);
	--_ls: var(--lc-btn-sm-ls);
	--_px: var(--lc-btn-sm-px);
	--_py: var(--lc-btn-sm-py);
}

.lc-btn--md {
	--_h: var(--lc-ctl-md);
	--_fs: var(--lc-btn-md-fs);
	--_ls: var(--lc-btn-md-ls);
	--_px: var(--lc-btn-md-px);
	--_py: var(--lc-btn-md-py);
}

.lc-btn--lg {
	--_h: var(--lc-ctl-lg);
	--_fs: var(--lc-btn-lg-fs);
	--_ls: var(--lc-btn-lg-ls);
	--_px: var(--lc-btn-lg-px);
	--_py: var(--lc-btn-lg-py);
}

.lc-btn--block {
	display: flex;
	inline-size: 100%;
}

/* ---------- Variants ---------- */
/* Alias used by lc-core markup. */
.lc-btn--primary {
	--_bg: var(--lc-action);
}

/* Filled navy: only on dark bands where a blue fill would vanish. */
.lc-btn--navy {
	--_bg: var(--lc-action-2);
	--_bg-hover: var(--lc-action-2-hover);
	--_bg-active: var(--lc-action-2-active);
	--_fg: #ffffff;
}

/* Confirmation green fill (WhatsApp as the main way to act). White on #0e7c55 is 5.2:1. */
.lc-btn--ok {
	--_bg: var(--lc-ok);
	--_bg-hover: var(--lc-ok-hover);
	--_bg-active: var(--lc-ok-hover);
	--_fg: #ffffff;
}

/* WooCommerce's "Voir le panier" link (after an ajax add to cart) is a secondary button; Blocksy paints it as a filled
   one, and our blue label then vanished on its blue fill. Same specificity as the native rule above, later = wins. */
body :where(#main) a.added_to_cart:not(.lc-btn) {
	--_bg: var(--lc-paper);
	--_bg-hover: var(--lc-blue-50);
	--_bg-active: var(--lc-blue-100);
	--_fg: var(--lc-link);
	--_ring: inset 0 0 0 var(--lc-ctl-bw) var(--lc-action);
}

/* Secondary: paper with a medical-blue outline (text 5.54:1 on white). */
.lc-btn--secondary {
	--_bg: var(--lc-paper);
	--_bg-hover: var(--lc-blue-50);
	--_bg-active: var(--lc-blue-100);
	--_fg: var(--lc-link);
	--_ring: inset 0 0 0 var(--lc-ctl-bw) var(--lc-action);
}

.lc-btn--secondary:hover {
	color: var(--lc-link-hover);
}

/* Label: white paper with an ink hairline, for advice and secondary calls (flat). */
.lc-btn--label {
	--_bg: var(--lc-paper);
	--_bg-hover: var(--lc-paper-2);
	--_bg-active: var(--lc-shelf-2);
	--_fg: var(--lc-ink);
	--_ring: inset 0 0 0 var(--lc-ctl-bw) var(--lc-ink);
}

/* On navy: white button, navy text. */
.lc-btn--on-dark {
	--_bg: var(--lc-paper);
	--_bg-hover: var(--lc-navy-100);
	--_bg-active: var(--lc-navy-200);
	--_fg: var(--lc-navy-900);
}

/* Ghost / link: text only. Keeps the size's height as its target. */
.lc-btn--ghost,
.lc-btn--link {
	--_bg: transparent;
	--_bg-hover: var(--lc-blue-50);
	--_bg-active: var(--lc-blue-100);
	--_fg: var(--lc-link);
	--_px: 0.9em;
	--_ring: 0 0 0 0 transparent;
	text-decoration: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.3em;
}

.lc-btn--ghost:hover,
.lc-btn--ghost:active,
.lc-btn--link:hover,
.lc-btn--link:active {
	color: var(--lc-link-hover);
}

/* ---------- Disabled and loading ---------- */
.lc-btn:disabled,
.lc-btn.disabled,
.lc-btn[aria-disabled='true'],
body :where(#main) :is(.button, button[type='submit'], input[type='submit']):not(.lc-btn):is(:disabled, .disabled, .wc-variation-selection-needed, [aria-disabled='true']) {
	--_bg: var(--lc-shelf-3);
	--_bg-hover: var(--lc-shelf-3);
	--_bg-active: var(--lc-shelf-3);
	--_fg: var(--lc-ink-muted);
	--_ring: 0 0 0 0 transparent;
	cursor: not-allowed;
}

.lc-btn.is-loading,
body :where(#main) .button.loading:not(.lc-btn) {
	color: transparent;
	pointer-events: none;
}

.lc-btn.is-loading::after,
body :where(#main) .button.loading:not(.lc-btn)::after {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	inline-size: 1.25em;
	block-size: 1.25em;
	border: 2px solid rgb(255 255 255 / 0.35);
	border-block-start-color: #fff;
	border-radius: 50%;
	animation: lc-spin 0.8s linear infinite;
}

.lc-btn--secondary.is-loading::after,
.lc-btn--label.is-loading::after,
.lc-btn--on-dark.is-loading::after {
	border-color: rgb(20 36 107 / 0.25);
	border-block-start-color: var(--lc-action);
}

@keyframes lc-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.lc-btn.is-loading::after {
		animation-duration: 3s;
	}
}

/* ---------- WhatsApp side action (lc-core's rental form and ours): paper, green outline and label (6.9:1) ----------
   `body` lifts it over the plugin's own .lc-btn--wa rule, so every property reads the scale again here. */
body .lc-btn--wa {
	--_bg: var(--lc-paper);
	--_bg-hover: var(--lc-ok-bg);
	--_bg-active: var(--lc-ok-line);
	--_fg: var(--lc-ok-deep);
	background: var(--_bg);
	color: var(--_fg);
	border: 0;
	border-radius: var(--lc-ctl-r);
	min-block-size: var(--_h);
	padding: var(--_py) var(--_px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--lc-font-label);
	font-size: var(--_fs);
	font-weight: var(--lc-btn-fw);
	letter-spacing: var(--_ls);
	text-transform: uppercase;
	text-decoration: none;
	--_ring: inset 0 0 0 var(--lc-ctl-bw) var(--lc-ok);
	box-shadow: var(--_ring);
}

body .lc-btn--wa:hover {
	background: var(--_bg-hover);
	color: var(--_fg);
}

body .lc-btn--wa:active {
	background: var(--_bg-active);
}

body .lc-btn--wa.lc-btn--block {
	display: flex;
	inline-size: 100%;
}