/*
 * Marra – sustav gumba (učitava se zadnji i nadjačava starije hover boje).
 *
 * Dvije vrste, dvije boje za hover:
 *   1. Crni gumb      → na hover se slijeva "prelije" kakao (#7A5236), tekst ostaje krem.
 *   2. Ne-crni gumb   → (obrub, krem) na hover se slijeva prelije crna, tekst postaje krem.
 *
 * Animacija: pozadinski gradijent koji raste s lijeva na desno (background-size),
 * pa osnovna boja gumba ostaje ista i nema "skoka" boje na početku.
 */

:root {
	--marra-btn-dark: #111111;
	--marra-btn-dark-hover: #7a5236;
	--marra-btn-light-hover: #111111;
	--marra-btn-text-light: #f5efe6;
	--marra-btn-speed: 0.45s;
	--marra-btn-ease: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ------------------------------------------------------------------ */
/* Zajednička animacija                                               */
/* ------------------------------------------------------------------ */

.button,
button.button,
input.button,
input[type="submit"],
.woocommerce #respond input#submit,
.marra-search .marra-search__form .marra-search__submit,
.elementor .mailpoet_form_shortcode .mailpoet_submit,
.elementor .e-button-base {
	--marra-btn-sweep: var(--marra-btn-dark-hover);
	background-image: linear-gradient(var(--marra-btn-sweep), var(--marra-btn-sweep)) !important;
	background-position: left center !important;
	background-repeat: no-repeat !important;
	background-size: 0% 100% !important;
	transition:
		background-size var(--marra-btn-speed) var(--marra-btn-ease),
		color 0.3s ease,
		border-color 0.3s ease !important;
}

.button:is(:hover, :focus-visible),
button.button:is(:hover, :focus-visible),
input.button:is(:hover, :focus-visible),
input[type="submit"]:is(:hover, :focus-visible),
.woocommerce #respond input#submit:is(:hover, :focus-visible),
.marra-search .marra-search__form .marra-search__submit:is(:hover, :focus-visible),
.elementor .mailpoet_form_shortcode .mailpoet_submit:is(:hover, :focus-visible),
.elementor .e-button-base:is(:hover, :focus-visible) {
	background-size: 100% 100% !important;
}

/* Onemogućeni gumbi bez animacije */
.button:disabled,
.button.disabled,
button.button:disabled,
input[type="submit"]:disabled {
	background-size: 0% 100% !important;
}

/* ------------------------------------------------------------------ */
/* 1. Crni gumbi (zadano)                                             */
/* ------------------------------------------------------------------ */

.button:is(:hover, :focus-visible),
.woocommerce a.button:is(:hover, :focus-visible),
.woocommerce button.button:is(:hover, :focus-visible),
.woocommerce input.button:is(:hover, :focus-visible),
.woocommerce a.button.alt:is(:hover, :focus-visible),
.woocommerce button.button.alt:is(:hover, :focus-visible),
.woocommerce-page a.button:is(:hover, :focus-visible),
.woocommerce-page button.button:is(:hover, :focus-visible),
input[type="submit"]:is(:hover, :focus-visible),
.marra-search .marra-search__form .marra-search__submit:is(:hover, :focus-visible),
.elementor .mailpoet_form_shortcode .mailpoet_submit:is(:hover, :focus-visible) {
	background-color: var(--marra-btn-dark) !important;
	border-color: var(--marra-btn-dark-hover) !important;
	color: var(--marra-btn-text-light) !important;
}

/* ------------------------------------------------------------------ */
/* 2. Ne-crni gumbi (obrub / svijetli)                                */
/* ------------------------------------------------------------------ */

.marra-button--outline,
.woocommerce ul.products li.product > .button,
.marra-drawer .marra-drawer__foot .marra-drawer__cart,
.woocommerce-cart table.cart td.actions .coupon .button,
.woocommerce-cart table.cart td.actions > .button[name="update_cart"],
.marra-loyalty-panel .button.marra-select {
	--marra-btn-sweep: var(--marra-btn-light-hover);
}

.button.marra-button--outline:is(:hover, :focus-visible),
.woocommerce a.button.marra-button--outline:is(:hover, :focus-visible),
.woocommerce-page a.button.marra-button--outline:is(:hover, :focus-visible),
.woocommerce ul.products li.product > .button:is(:hover, :focus-visible),
.marra-drawer .marra-drawer__foot .marra-drawer__cart:is(:hover, :focus-visible),
.woocommerce-cart table.cart td.actions .coupon .button:is(:hover, :focus-visible),
.woocommerce-cart table.cart td.actions > .button[name="update_cart"]:is(:hover, :focus-visible),
.marra-loyalty-panel .button.marra-select:not(:disabled):is(:hover, :focus-visible) {
	background-color: transparent !important;
	border-color: var(--marra-btn-light-hover) !important;
	color: var(--marra-btn-text-light) !important;
}

/* ------------------------------------------------------------------ */
/* Elementor gumbi (početna): zadano ne-crni → crna;                  */
/* crni gumbi u Elementoru postavljaju --marra-btn-sweep na kakao.     */
/* ------------------------------------------------------------------ */

.elementor .e-button-base {
	--marra-btn-sweep: var(--marra-btn-light-hover);
}