/* ==========================================================================
   One hover animation for every button on the site (reference: product-page "Add to cart").

   Rest:  solid pill in the main color, light label, thin inner border in the main color.
   Hover: 1) a circle centered below the button grows and fills it with the light color (0.36s ease-in-out)
          2) the label rolls up and an identical copy rolls in from below (0.32s)
          3) the label takes the main color (0.26s) — the border keeps it an outlined pill.

   Buttons get the .yn-btn class + a .yn-btn__label wrapper from assets/buttons.js. Colors per button:
     --yn-btn-main       solid color at rest, border + label color on hover
     --yn-btn-fill       color that fills in on hover
     --yn-btn-label      label color at rest
     --yn-btn-label-hover label color on hover
   ========================================================================== */

@property --yn-btn-r {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 0%;
}

html body .yn-btn.yn-btn.yn-btn {
	--yn-btn-main: var(--yn-primary, #0258A2);
	--yn-btn-fill: #fffffc;
	--yn-btn-label: #fffffc;
	--yn-btn-label-hover: var(--yn-btn-main);
	--yn-btn-border: 1.6px;
	--yn-btn-roll: 3em;

	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	isolation: isolate;
	border: 0 !important;
	border-radius: 100px;
	background-color: var(--yn-btn-main) !important;
	background-image: radial-gradient(circle at 50% 165%, var(--yn-btn-fill) var(--yn-btn-r), transparent calc(var(--yn-btn-r) + .6%)) !important;
	box-shadow: inset 0 0 0 var(--yn-btn-border) var(--yn-btn-main) !important;
	color: var(--yn-btn-label) !important;
	font-family: inherit;
	font-weight: 700;
	text-decoration: none !important;
	text-shadow: none;
	cursor: pointer;
	transition: --yn-btn-r .36s ease-in-out, color .26s, box-shadow .34s, transform .15s;
	-webkit-tap-highlight-color: transparent;
}

/* Label wrapper: the copy for the roll sits one "roll" below and is clipped by the button. */
html body .yn-btn.yn-btn.yn-btn .yn-btn__label {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .3em;
	text-shadow: 0 var(--yn-btn-roll) currentColor;
	transition: transform .32s cubic-bezier(.33, 1, .68, 1);
	will-change: transform;
	pointer-events: none;
}
/* Icons don't duplicate via text-shadow; keep them out of the roll's way. */
html body .yn-btn.yn-btn.yn-btn .yn-btn__label svg { flex: none; }

@media (hover: hover) {
	html body .yn-btn.yn-btn.yn-btn:hover:not(.yn-btn--static),
	html body .yn-btn.yn-btn.yn-btn:focus-visible:not(.yn-btn--static) {
		--yn-btn-r: 100%;
		color: var(--yn-btn-label-hover) !important;
		transition: --yn-btn-r .36s ease-in-out, color .26s, box-shadow .1s, transform .15s;
	}
	html body .yn-btn.yn-btn.yn-btn:hover:not(.yn-btn--static) .yn-btn__label,
	html body .yn-btn.yn-btn.yn-btn:focus-visible:not(.yn-btn--static) .yn-btn__label {
		transform: translateY(calc(var(--yn-btn-roll) * -1));
	}
}
/* No press-shrink: a button keeps exactly the same size at rest, on hover and when pressed. */
html body .yn-btn.yn-btn.yn-btn:focus-visible { outline: 3px solid var(--yn-yellow, #FDDC00); outline-offset: 2px; }

/* Theme/plugin decorations that would fight the effect (Divi hover arrow + padding shift). WooCommerce's
   loading spinner (::after on .loading) is kept. */
html body .yn-btn.yn-btn.yn-btn:not(.loading)::after,
html body .yn-btn.yn-btn.yn-btn::before { display: none !important; content: none !important; }
html body .et_pb_button.yn-btn,
html body .et_pb_button.yn-btn:hover { padding: .5em 1.8em !important; }
/* Divi's WooCommerce buttons widen their right padding and square the corners on hover (customizer CSS). */
html body .yn-btn.yn-btn.yn-btn,
html body .yn-btn.yn-btn.yn-btn:hover { border-radius: 100px !important; }
html body .yn-btn.yn-btn.yn-btn.button:not(.yn-card__btn),
html body .yn-btn.yn-btn.yn-btn.button:not(.yn-card__btn):hover { padding-inline: 1.4em !important; }

/* Disabled / unavailable: no animation. */
html body .yn-btn.yn-btn.yn-btn:disabled,
html body .yn-btn.yn-btn.yn-btn.disabled,
html body .yn-btn.yn-btn.yn-btn.is-disabled,
html body .yn-btn.yn-btn.yn-btn[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }
html body .yn-btn.yn-btn.yn-btn:disabled .yn-btn__label,
html body .yn-btn.yn-btn.yn-btn.disabled .yn-btn__label,
html body .yn-btn.yn-btn.yn-btn.is-disabled .yn-btn__label { transform: none !important; }
html body .yn-btn.yn-btn.yn-btn:disabled, html body .yn-btn.yn-btn.yn-btn.disabled, html body .yn-btn.yn-btn.yn-btn.is-disabled { --yn-btn-r: 0% !important; }

/* ---------- Color variants ---------- */
/* Yellow «اشترى الان»: dark label in both states, white fill. */
html body .yn-btn.yn-btn.yn-btn.yn-card__buy {
	--yn-btn-main: var(--yn-yellow, #FDDC00);
	--yn-btn-label: var(--yn-heading, #1E293B);
	--yn-btn-label-hover: var(--yn-heading, #1E293B);
}
/* Orange accent pills (filter, back). */
html body .yn-btn.yn-btn.yn-btn.yn-filter-open,
html body .yn-btn.yn-btn.yn-btn.yn-back { --yn-btn-main: var(--yn-orange, #FF7515); }
/* The back pill sits in the listing bar's top corner (product-cards.css); keep that placement. */
html body .yn-btn.yn-btn.yn-btn.yn-back { position: absolute; }
@media (max-width: 767px) { html body .yn-btn.yn-btn.yn-btn.yn-back { position: static; } }
/* Buttons on the blue hovered card: white pill → fills blue, label turns white (the reference's "inversed"). */
html body li.yn-card.is-active:not(.yn-card--photo) .yn-btn.yn-card__btn,
html body li.yn-card--photo.is-active .yn-btn.yn-card__btn {
	--yn-btn-main: #fffffc;
	--yn-btn-fill: var(--yn-primary, #0258A2);
	--yn-btn-label: var(--yn-primary, #0258A2);
	--yn-btn-label-hover: #fffffc;
}
/* Secondary (outline-looking) WooCommerce buttons keep the same motion in brand blue. */
html body .yn-btn.yn-btn.yn-btn.yn-btn--light {
	--yn-btn-main: var(--yn-bg-soft, #F6F6F6);
	--yn-btn-fill: var(--yn-primary, #0258A2);
	--yn-btn-label: var(--yn-heading, #1E293B);
	--yn-btn-label-hover: #fffffc;
}

/* Divi Button modules: pick a colour with a CSS class in the module (Advanced › Attributes › CSS Class).
   yn-btn--yellow: yellow pill, dark label · yn-btn--white: light pill for photos/video · yn-btn--outline: soft grey pill · yn-btn--primary: default blue. */
html body .yn-btn.yn-btn.yn-btn.yn-btn--yellow,
html body .yn-btn--yellow .yn-btn.yn-btn.yn-btn {
	--yn-btn-main: var(--yn-yellow, #FDDC00);
	--yn-btn-fill: #fffffc;
	--yn-btn-label: var(--yn-heading, #1E293B);
	--yn-btn-label-hover: var(--yn-heading, #1E293B);
}
html body .yn-btn.yn-btn.yn-btn.yn-btn--white,
html body .yn-btn--white .yn-btn.yn-btn.yn-btn {
	--yn-btn-main: #fffffc;
	--yn-btn-fill: var(--yn-yellow, #FDDC00);
	--yn-btn-label: var(--yn-heading, #1E293B);
	--yn-btn-label-hover: var(--yn-heading, #1E293B);
}
html body .yn-btn.yn-btn.yn-btn.yn-btn--outline,
html body .yn-btn--outline .yn-btn.yn-btn.yn-btn {
	--yn-btn-main: #fffffc;
	--yn-btn-fill: var(--yn-primary, #0258A2);
	--yn-btn-label: var(--yn-heading, #1E293B);
	--yn-btn-label-hover: #fffffc;
	--yn-btn-border: 1.5px;
	box-shadow: inset 0 0 0 1.5px var(--yn-border, #D1D5DB) !important;
}
html body .yn-btn.yn-btn.yn-btn.yn-btn--outline:hover,
html body .yn-btn--outline .yn-btn.yn-btn.yn-btn:hover { box-shadow: inset 0 0 0 1.5px var(--yn-primary, #0258A2) !important; }

/* yn-btn--block: full-width Divi button (cards) — one line, slimmer side padding. */
html body .et_pb_button.yn-btn.yn-btn--block,
html body .et_pb_button.yn-btn.yn-btn--block:hover { width: 100%; padding-inline: .9em !important; white-space: nowrap; }

/* Divi Button modules print their colour/transition with an ID selector (body #page-container .et_pb_section
   .et_pb_button_N {color:…!important; transition-property:background-color}). Re-assert the shared animation
   at that weight so builder buttons behave exactly like the product-card buttons. */
html body #page-container .et_pb_button.yn-btn.yn-btn {
	color: var(--yn-btn-label) !important;
	background-color: var(--yn-btn-main) !important;
	font-size: var(--gvid-yn-fs-body, 1rem) !important;
	line-height: 1.7 !important;
	transition: none !important;
}
/* Same box in every state (Divi prints its own narrower hover padding per button with an ID selector). */
html body #page-container .et_pb_section .et_pb_button.yn-btn.yn-btn,
html body #page-container .et_pb_section .et_pb_button.yn-btn.yn-btn:hover,
html body #page-container .et_pb_section .et_pb_button.yn-btn.yn-btn:focus-visible,
html body #page-container .et_pb_section .et_pb_button.yn-btn.yn-btn:active { padding: .5em 1.8em !important; border-width: 0 !important; letter-spacing: normal !important; }
html body #page-container .et_pb_section .et_pb_button.yn-btn.yn-btn.yn-btn--block,
html body #page-container .et_pb_section .et_pb_button.yn-btn.yn-btn.yn-btn--block:hover,
html body #page-container .et_pb_section .et_pb_button.yn-btn.yn-btn.yn-btn--block:focus-visible,
html body #page-container .et_pb_section .et_pb_button.yn-btn.yn-btn.yn-btn--block:active { padding-inline: .9em !important; }
html.yn-btn-ready body #page-container .et_pb_button.yn-btn.yn-btn { transition: --yn-btn-r .36s ease-in-out, color .26s, box-shadow .34s, transform .15s !important; }
@media (hover: hover) {
	html body #page-container .et_pb_button.yn-btn.yn-btn:hover:not(.yn-btn--static),
	html body #page-container .et_pb_button.yn-btn.yn-btn:focus-visible:not(.yn-btn--static) { color: var(--yn-btn-label-hover) !important; }
	html.yn-btn-ready body #page-container .et_pb_button.yn-btn.yn-btn:hover:not(.yn-btn--static),
	html.yn-btn-ready body #page-container .et_pb_button.yn-btn.yn-btn:focus-visible:not(.yn-btn--static) {
		transition: --yn-btn-r .36s ease-in-out, color .26s, box-shadow .1s, transform .15s !important;
	}
}

/* No transitions until the page has settled (buttons join the effect right after load; without this they'd
   visibly fade from the theme's colors into these). buttons.js adds .yn-btn-ready to <html>. */
html:not(.yn-btn-ready) body .yn-btn.yn-btn.yn-btn,
html:not(.yn-btn-ready) body .yn-btn.yn-btn.yn-btn .yn-btn__label { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
	html body .yn-btn.yn-btn.yn-btn, html body .yn-btn.yn-btn.yn-btn .yn-btn__label { transition: none !important; }
}
@media (prefers-reduced-motion: reduce) { html.yn-btn-ready body #page-container .et_pb_button.yn-btn.yn-btn, html.yn-btn-ready body #page-container .et_pb_button.yn-btn.yn-btn:hover { transition: none !important; } }