/* ==========================================================================
   Buttons — the single button system for frontend, shop, account and backend.
   Loaded by index.php, backend.php and preview.php, BEFORE style.css, so the
   context rules there (.get-a-quote .btn, .accordion-contact .btn, …) and the
   breakpoint overrides in responsive.css still win.

   The base is the website's tested button, moved here unchanged from
   style.css. `.button` is kept as an alias so existing markup ("button btn")
   keeps working; new markup only needs `.btn`.

   Works on <button>, <a> and <div> alike.

   Optional: wrapping the label in <span><span>…</span></span> adds the
   MoveUp text animation on hover. Without it the button still works — the
   plain `.btn:hover` colour swap covers that case.
   ========================================================================== */

.btn,
.button {
	pointer-events: auto;
	cursor: pointer;
	border: 1px solid #000;
	padding: 1rem 3.5rem;
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: 700;
	position: relative;
	/* Own stacking context: lets ::before sit behind a bare text label
	   (backend/shop buttons have no <span>, so they cannot be positioned). */
	isolation: isolate;
	display: inline-block;
	overflow: hidden;
	color: #fff;
	background: transparent;
	text-align: center;
	outline: none;
	border-radius: 14px;
}

/* Capitalize belongs to the landing-page markup only (`class="button btn"`),
   where the labels are set that way by design. It must NOT reach plain `.btn`:
   backend, shop and account labels are German sentences ("Warenkorb leeren"),
   and capitalize would upper-case every word of them. */
.button {
	text-transform: capitalize;
}

.btn::before,
.btn::after,
.button::before,
.button::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* The fill sits behind the label and retracts to the left on hover */
.btn::before,
.button::before {
	content: '';
	background: #000;
	z-index: -1;
	transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
	transform-origin: 100% 50%;
}

.btn:hover::before,
.button:hover::before {
	transform: scale3d(0, 1, 1);
	transform-origin: 0% 50%;
}

/* Label rides above the fill */
.btn span,
.button span {
	display: block;
	position: relative;
}

.btn > span,
.button > span {
	overflow: hidden;
}

.btn > span > span,
.button > span > span {
	overflow: hidden;
}

/* Fallback for buttons without the <span><span> nesting (backend, shop,
   account): the label alone must still flip to dark when the fill leaves. */
.btn:hover,
.button:hover {
	color: #000;
}

.btn:hover > span > span,
.button:hover > span > span {
	animation: MoveUpInitial 0.2s forwards, MoveUpEnd 0.2s forwards 0.2s;
	color: #000;
}

@keyframes MoveUpInitial {
	to {
		transform: translate3d(0, -105%, 0);
	}
}

@keyframes MoveUpEnd {
	from {
		transform: translate3d(0, 100%, 0);
	}
	to {
		transform: translate3d(0, 0, 0);
	}
}

/* ==========================================================================
   Variants — colour, style and size on top of the base above.
   Colours come from tokens, so the same button reads correctly in both design
   languages: green on the website/shop, indigo in the backend (see backend.css).
   ========================================================================== */

:root {
	--btn-primary: var(--color-green, #ACD96B);
	--btn-primary-ink: #3c6e1f;
	--btn-primary-tint: #e8f5d8;
	--btn-accent: var(--color-purple-main, #7b5cce);
	--btn-danger: #ef4444;
	--btn-warn: #f59e0b;
	--btn-focus: var(--color-green, #ACD96B);
}

/* --- Colour --- */
.btn-primary { border-color: var(--btn-primary); }
.btn-primary::before { background: var(--btn-primary); }

.btn-danger { border-color: var(--btn-danger); }
.btn-danger::before { background: var(--btn-danger); }
.btn-danger:hover { color: var(--btn-danger); }

.btn-accent { border-color: var(--btn-accent); }
.btn-accent::before { background: var(--btn-accent); }
.btn-accent:hover { color: var(--btn-accent); }

.btn-warn { border-color: var(--btn-warn); }
.btn-warn::before { background: var(--btn-warn); }
.btn-warn:hover { color: #92400e; }

/* --- Style --- */

/* Static button without the sliding fill */
.btn-outline {
	color: #000;
}
.btn-outline::before { content: none; }
.btn-outline:hover { background: rgba(0, 0, 0, 0.06); }
.btn-outline.btn-primary { color: var(--btn-primary-ink); }
.btn-outline.btn-primary:hover { background: var(--btn-primary-tint); }
.btn-outline.btn-danger { color: var(--btn-danger); }
.btn-outline.btn-danger:hover { background: rgba(239, 68, 68, 0.08); }

/* Borderless text action (table rows, inline actions) */
.btn-text {
	border-color: transparent;
	color: #000;
	font-weight: 600;
	text-transform: none;
	padding-left: 8px;
	padding-right: 8px;
}
.btn-text::before { content: none; }
.btn-text:hover { text-decoration: underline; background: transparent; }
.btn-text.btn-primary { color: var(--btn-primary-ink); }
.btn-text.btn-danger { color: var(--btn-danger); }
.btn-text.btn-accent { color: var(--btn-accent); }

/* --- Size --- */
.btn-sm {
	font-size: 0.82rem;
	padding: 8px 18px;
	border-radius: 10px;
}
.btn-xs {
	font-size: 0.78rem;
	padding: 4px 10px;
	border-radius: 8px;
}
.btn-full { width: 100%; }

.btn-text.btn-sm,
.btn-text.btn-xs { padding-left: 8px; padding-right: 8px; }

/* An icon *inside* a button (not an icon-only button) */
.btn-glyph {
	width: 18px;
	height: 18px;
	vertical-align: -3px;
}

/* --- States --- */
.btn:disabled,
.btn[disabled],
.btn.is-disabled {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

/* Keyboard focus must stay visible, including in the backend where a global
   `* { outline: none }` used to remove it. */
.btn:focus-visible,
.button:focus-visible {
	outline: 2px solid var(--btn-focus);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.btn::before, .button::before { transition: none; }
	.btn:hover > span > span,
	.button:hover > span > span { animation: none; }
}