/* Webify Discounts – storefront */
:root {
	--wbfd-primary: #6C3BFF; --wbfd-accent: #FF4D8D; --wbfd-badge-bg: #FF4D8D; --wbfd-badge-text: #fff; --wbfd-badge-size: 13px;
	--wbfd-gift-bg: #00B8A9; --wbfd-gift-text: #fff; --wbfd-btn-bg: #6C3BFF; --wbfd-btn-text: #fff;
	--wbfd-box-bg: #F6F3FF; --wbfd-box-border: #E2D9FF; --wbfd-box-text: #1F1A3D; --wbfd-saving-bg: #E8FBF6; --wbfd-saving-text: #0B7A66;
	--wbfd-progress-bg: #ECE8FB; --wbfd-progress-fill: #6C3BFF; --wbfd-progress-fill2: #FF4D8D;
	--wbfd-bar-bg: #1F1A3D; --wbfd-bar-text: #fff; --wbfd-cd-bg: #FF4D8D; --wbfd-cd-text: #fff;
	--wbfd-radius: 14px; --wbfd-font: inherit; --wbfd-shadow: 0 6px 24px rgba(31,26,61,.08);
}

/* Badges */
.wbfd-badge {
	display: inline-flex; align-items: center; gap: 4px;
	background: var(--wbfd-badge-bg); color: var(--wbfd-badge-text);
	font-family: var(--wbfd-font); font-size: var(--wbfd-badge-size); font-weight: 700; line-height: 1.2;
	padding: .38em .85em; border-radius: 99px; white-space: nowrap; letter-spacing: .1px;
	box-shadow: 0 3px 10px rgba(0,0,0,.12);
}
.wbfd-shape-rounded .wbfd-badge { border-radius: 7px; }
.wbfd-shape-square .wbfd-badge { border-radius: 0; }
.wbfd-shape-ribbon .wbfd-badge { border-radius: 0; padding-left: 1.3em; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, .6em 50%); }
.wbfd-badge--gift { background: var(--wbfd-gift-bg); color: var(--wbfd-gift-text); }
.wbfd-badge--offer { background: var(--wbfd-primary); color: #fff; font-size: 11px; box-shadow: none; }

ul.products li.product, .woocommerce div.product { position: relative; }
.wbfd-badges { display: flex; flex-direction: column; gap: 6px; z-index: 9; pointer-events: none; }
.wbfd-badges--loop, .wbfd-badges--single { position: absolute; top: 10px; right: 10px; align-items: flex-end; }
.wbfd-pos-top-left .wbfd-badges--loop, .wbfd-pos-top-left .wbfd-badges--single { right: auto; left: 10px; align-items: flex-start; }
.wbfd-pos-bottom-right .wbfd-badges--loop { top: auto; bottom: 10px; }
.wbfd-pos-bottom-left .wbfd-badges--loop { top: auto; bottom: 10px; right: auto; left: 10px; align-items: flex-start; }
.wbfd-badges--inline { position: static; flex-direction: row; flex-wrap: wrap; }
.wbfd-preview__img .wbfd-badges--loop { position: absolute; }

/* Cart lines */
.wbfd-cart-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.wbfd-badge--cart { font-size: 11px; padding: .3em .75em; box-shadow: none; }
.wbfd-price del { opacity: .55; margin-left: 4px; font-size: .92em; }
.wbfd-price ins { text-decoration: none; font-weight: 700; color: var(--wbfd-primary); }
.wbfd-price ins.wbfd-free { color: var(--wbfd-gift-bg); }
.wbfd-line-saving { display: block; color: var(--wbfd-saving-text); font-weight: 600; font-size: 12px; margin-top: 3px; }
.wbfd-fixed-qty { display: inline-block; min-width: 2.4em; padding: .35em .6em; text-align: center; border-radius: 8px; background: var(--wbfd-box-bg); font-weight: 700; }
.wbfd-saving-row th, .wbfd-saving-row td { color: var(--wbfd-saving-text) !important; font-weight: 700; }

/* Boxes */
.wbfd-progress, .wbfd-savings, .wbfd-offers, .wbfd-wallet, .wbfd-tradein, .wbfd-upgrade, .wbfd-tiers, .wbfd-newsletter, .wbfd-club__card, .wbfd-club__ref {
	font-family: var(--wbfd-font); color: var(--wbfd-box-text); box-sizing: border-box;
}
.wbfd-progress { background: var(--wbfd-box-bg); border: 1px solid var(--wbfd-box-border); border-radius: var(--wbfd-radius); padding: 14px 16px; margin: 0 0 16px; box-shadow: var(--wbfd-shadow); }
.wbfd-progress__text { font-size: 14.5px; margin-bottom: 9px; }
.wbfd-progress__text strong { color: var(--wbfd-primary); }
.wbfd-progress__bar { height: 10px; background: var(--wbfd-progress-bg); border-radius: 99px; overflow: hidden; }
.wbfd-progress__bar span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--wbfd-progress-fill2), var(--wbfd-progress-fill)); transition: width .6s cubic-bezier(.2,.8,.2,1); }
[dir=rtl] .wbfd-progress__bar span, .rtl .wbfd-progress__bar span { margin-right: 0; margin-left: auto; background: linear-gradient(270deg, var(--wbfd-progress-fill2), var(--wbfd-progress-fill)); }
.wbfd-progress__bar--sm { height: 6px; margin-top: 6px; }
.wbfd-progress__steps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.wbfd-step { font-size: 12px; padding: 4px 10px; border-radius: 99px; background: #fff; border: 1px solid var(--wbfd-box-border); }
.wbfd-step.is-done { background: var(--wbfd-saving-bg); color: var(--wbfd-saving-text); border-color: transparent; font-weight: 600; }
.wbfd-progress--compact { padding: 10px 12px; margin: 0 0 10px; box-shadow: none; }
.wbfd-progress--compact .wbfd-progress__text { font-size: 13px; margin-bottom: 6px; }

.wbfd-savings { background: var(--wbfd-saving-bg); color: var(--wbfd-saving-text); border-radius: var(--wbfd-radius); padding: 12px 16px; margin: 0 0 16px; font-weight: 600; text-align: center; }
.wbfd-savings--mini { padding: 8px 10px; margin: 8px 0; font-size: 13px; }

/* Buttons */
.wbfd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; cursor: pointer; padding: .7em 1.4em; border-radius: calc(var(--wbfd-radius) - 4px); background: var(--wbfd-btn-bg); color: var(--wbfd-btn-text); font-family: var(--wbfd-font); font-weight: 700; font-size: 14px; line-height: 1.2; text-decoration: none; transition: transform .15s, filter .15s; }
.wbfd-btn:hover { filter: brightness(1.08); transform: translateY(-1px); color: var(--wbfd-btn-text); }
.wbfd-btn.is-loading { opacity: .6; pointer-events: none; }
.wbfd-link { background: none; border: 0; padding: 0; color: var(--wbfd-primary); cursor: pointer; text-decoration: underline; font-size: 12px; }

/* Offers */
.wbfd-offers { background: var(--wbfd-box-bg); border: 1px solid var(--wbfd-box-border); border-radius: var(--wbfd-radius); padding: 16px; margin: 18px 0; box-shadow: var(--wbfd-shadow); clear: both; }
.wbfd-offers__head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.wbfd-offers__head strong { font-size: 16px; }
.wbfd-offers__head span { font-size: 13px; opacity: .75; }
.wbfd-offers__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.wbfd-offer { display: flex; gap: 12px; background: #fff; border-radius: calc(var(--wbfd-radius) - 4px); padding: 10px; align-items: center; border: 1.5px solid transparent; transition: .2s; }
.wbfd-offer--open:hover { border-color: var(--wbfd-primary); }
.wbfd-offer--added { border-color: var(--wbfd-gift-bg); }
.wbfd-offer--locked { opacity: .78; }
.wbfd-offer--locked .wbfd-offer__img { filter: grayscale(.6); }
.wbfd-offer__img { flex: 0 0 64px; width: 64px; border-radius: 10px; overflow: hidden; }
.wbfd-offer__img img { display: block; width: 100%; height: auto; margin: 0 !important; }
.wbfd-offer__body { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; flex: 1; }
.wbfd-offer__name { font-weight: 700; font-size: 14px; line-height: 1.3; }
.wbfd-offer__price del { opacity: .5; font-size: 12px; margin-left: 4px; }
.wbfd-offer__price ins { text-decoration: none; font-weight: 800; color: var(--wbfd-primary); }
.wbfd-offer__lock { font-size: 12px; opacity: .85; }
.wbfd-offer__lock .woocommerce-Price-amount { font-weight: 700; }
.wbfd-offer__added { font-size: 13px; font-weight: 700; color: var(--wbfd-gift-bg); }
.wbfd-offer .wbfd-btn { padding: .5em 1em; font-size: 13px; }
.wbfd-offer__body .wbfd-progress__bar { width: 100%; }

.wbfd-offers--mini { padding: 10px; margin: 10px 0; box-shadow: none; }
.wbfd-offers--mini .wbfd-offers__list { grid-template-columns: 1fr; gap: 8px; }
.wbfd-offers--mini .wbfd-offer__img { flex-basis: 48px; width: 48px; }
.wbfd-offers--mini .wbfd-offers__head strong { font-size: 14px; }

/* Upgrades, wallet, trade-in */
.wbfd-upgrades { margin: 14px 0; display: grid; gap: 10px; clear: both; }
.wbfd-upgrade { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--wbfd-radius); background: #fff; border: 1.5px dashed var(--wbfd-primary); }
.wbfd-upgrade__img { flex: 0 0 52px; }
.wbfd-upgrade__img img { width: 52px; height: auto; border-radius: 8px; display: block; }
.wbfd-upgrade__text { flex: 1; font-size: 14px; }
.wbfd-wallet { background: #fff; border: 1px solid var(--wbfd-box-border); border-radius: var(--wbfd-radius); padding: 14px 16px; margin: 14px 0; clear: both; }
.wbfd-wallet__title { font-weight: 800; margin-bottom: 8px; }
.wbfd-wallet__row { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 0; }
.wbfd-tradein { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin: 12px 0; border-radius: var(--wbfd-radius); background: var(--wbfd-box-bg); border: 1px solid var(--wbfd-box-border); cursor: pointer; clear: both; }

/* Mini cart */
.wbfd-mini { padding: 10px 0; font-family: var(--wbfd-font); color: var(--wbfd-box-text); }
.wbfd-mini__lines { border-top: 1px dashed var(--wbfd-box-border); padding-top: 8px; margin-top: 4px; }
.wbfd-mini__line { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 3px 0; color: var(--wbfd-saving-text); }
.wbfd-mini__total { color: var(--wbfd-box-text); font-weight: 800; font-size: 14px; border-top: 1px solid var(--wbfd-box-border); margin-top: 6px; padding-top: 8px; }
.elementor-menu-cart__main .wbfd-mini { padding: 10px 0 4px; }

/* Single product */
.wbfd-single-saving { display: inline-block; background: var(--wbfd-saving-bg); color: var(--wbfd-saving-text); font-weight: 700; padding: 6px 12px; border-radius: 99px; font-size: 13px; margin: 0 0 12px; }
.wbfd-tiers { margin: 0 0 16px; }
.wbfd-tiers__title { font-weight: 800; margin-bottom: 8px; }
.wbfd-tiers__list { display: flex; flex-wrap: wrap; gap: 8px; }
.wbfd-tier { display: flex; flex-direction: column; align-items: center; min-width: 80px; padding: 10px 12px; border-radius: calc(var(--wbfd-radius) - 4px); background: var(--wbfd-box-bg); border: 1px solid var(--wbfd-box-border); }
.wbfd-tier span { font-size: 12px; opacity: .8; }
.wbfd-tier strong { color: var(--wbfd-primary); }

/* Countdown */
.wbfd-countdown { display: inline-flex; align-items: center; gap: 8px; background: var(--wbfd-cd-bg); color: var(--wbfd-cd-text); padding: 7px 14px; border-radius: 99px; font-weight: 700; font-size: 13.5px; margin: 0 0 14px; font-family: var(--wbfd-font); }
.wbfd-countdown__time { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; letter-spacing: .5px; }
.wbfd-countdown--bar { margin: 0; padding: 3px 10px; font-size: 12.5px; }
.wbfd-countdown--bar .wbfd-countdown__label { display: none; }

/* Announcement bar */
.wbfd-bar { position: relative; z-index: 9999; background: var(--wbfd-bar-bg); color: var(--wbfd-bar-text); font-family: var(--wbfd-font); font-size: 14px; font-weight: 600; text-align: center; padding: 9px 44px; }
.wbfd-bar--bottom { position: fixed; bottom: 0; left: 0; right: 0; }
.wbfd-bar__item { display: none; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.wbfd-bar__item.is-active { display: flex; animation: wbfdFade .5s; }
.wbfd-bar__close { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); background: none; border: 0; color: inherit; font-size: 22px; line-height: 1; cursor: pointer; opacity: .7; padding: 0 4px; }
.wbfd-bar__close:hover { opacity: 1; }
@keyframes wbfdFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Wheel */
.wbfd-wheel-fab { position: fixed; bottom: 22px; left: 22px; z-index: 99998; width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; font-size: 26px; background: linear-gradient(135deg, var(--wbfd-primary), var(--wbfd-accent)); color: #fff; box-shadow: 0 10px 28px rgba(108,59,255,.4); animation: wbfdPulse 2.4s infinite; }
@keyframes wbfdPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.wbfd-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: rgba(20,16,45,.62); padding: 16px; font-family: var(--wbfd-font); }
.wbfd-modal[hidden] { display: none; }
.wbfd-modal__box { position: relative; background: #fff; border-radius: 22px; width: 100%; max-width: 420px; padding: 26px 22px 22px; text-align: center; color: #1F1A3D; box-shadow: 0 30px 80px rgba(0,0,0,.35); animation: wbfdPop .35s cubic-bezier(.2,.9,.3,1.3); max-height: 96vh; overflow: auto; }
@keyframes wbfdPop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.wbfd-modal__close { position: absolute; top: 10px; left: 14px; background: none; border: 0; font-size: 26px; cursor: pointer; color: #999; }
.wbfd-modal__title { font-size: 24px; font-weight: 800; margin: 0 0 4px; }
.wbfd-modal__sub { opacity: .75; margin: 0 0 14px; }
.wbfd-wheel { position: relative; width: 300px; max-width: 100%; margin: 0 auto 16px; aspect-ratio: 1; }
.wbfd-wheel svg { width: 100%; height: 100%; transition: transform 5s cubic-bezier(.12,.8,.12,1); filter: drop-shadow(0 8px 18px rgba(0,0,0,.18)); }
.wbfd-wheel__pin { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 26px solid #1F1A3D; z-index: 2; }
.wbfd-wheel__form { display: flex; flex-direction: column; gap: 10px; }
.wbfd-wheel__form input { padding: 12px 14px; border-radius: 12px; border: 1.5px solid #E2D9FF; font-size: 15px; text-align: center; }
.wbfd-wheel__result { font-size: 18px; font-weight: 700; }
.wbfd-wheel__code { display: inline-block; margin: 10px 0; padding: 10px 18px; border: 2px dashed var(--wbfd-primary); border-radius: 12px; font-size: 22px; font-weight: 800; letter-spacing: 2px; direction: ltr; }
.wbfd-msg-error { color: #C92A2A; font-size: 13px; min-height: 1em; }

/* Newsletter */
.wbfd-newsletter { background: var(--wbfd-box-bg); border: 1px solid var(--wbfd-box-border); border-radius: var(--wbfd-radius); padding: 22px; text-align: center; }
.wbfd-newsletter__title { font-size: 20px; font-weight: 800; }
.wbfd-newsletter__text { opacity: .8; margin: 4px 0 14px; }
.wbfd-newsletter__row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.wbfd-newsletter__row input { flex: 1 1 180px; padding: 11px 14px; border-radius: calc(var(--wbfd-radius) - 4px); border: 1.5px solid var(--wbfd-box-border); }
.wbfd-newsletter__consent { display: block; font-size: 12.5px; margin-top: 10px; }
.wbfd-newsletter__msg { margin-top: 10px; font-weight: 700; color: var(--wbfd-primary); }

/* Club */
.wbfd-club__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.wbfd-club__card { background: var(--wbfd-box-bg); border: 1px solid var(--wbfd-box-border); border-radius: var(--wbfd-radius); padding: 16px; text-align: center; }
.wbfd-club__card span { display: block; font-size: 13px; opacity: .75; }
.wbfd-club__card strong { font-size: 22px; color: var(--wbfd-primary); }
.wbfd-club__ref { background: #fff; border: 1.5px dashed var(--wbfd-primary); border-radius: var(--wbfd-radius); padding: 16px; margin-bottom: 18px; }
.wbfd-club__ref input { width: 100%; direction: ltr; text-align: left; }

@media (max-width: 600px) {
	.wbfd-club__cards { grid-template-columns: 1fr; }
	.wbfd-offers__list { grid-template-columns: 1fr; }
	.wbfd-bar { padding: 9px 36px; font-size: 13px; }
	.wbfd-upgrade { flex-wrap: wrap; }
}
