/*
 * "Skupljajte matice" promos — styles.
 *
 * Covers the two logged-out promos the loyalty module emits:
 *   Woocommerce_Loyalty_Manager::outputStickyPromoSidebar()  -> .matica-promo-sticky
 *   Woocommerce_Loyalty_Manager::outputPromoReminder()       -> .card-wrap.matica-promo
 *
 * Extracted from the "Jasmin Maziva - Child Croator" theme's style.css.
 * Declarations are verbatim except for the icon URL — see the fix note below.
 * Selectors are verbatim too: .matica-promo / .matica-promo-sticky are this
 * module's own class names, so there is nothing to collide with. The one
 * exception is the global .flex utility, scoped here to the promo card only.
 *
 * NOT copied, deliberately:
 *   .card { padding: 20px }        — fully overridden by .card-wrap.matica-promo
 *                                    .card { padding: 10px } below, so moving it
 *                                    would change nothing and would let the
 *                                    plugin restyle every other .card on the site.
 *   .cky-btn-revisit-wrapper       — that z-index:99 belongs to CookieYes, not to
 *                                    loyalty. It shares a stacking context with
 *                                    .matica-promo-sticky (also z-index:99), so
 *                                    it reads as related, but it is a third-party
 *                                    widget the theme owns. Left where it is.
 *
 * The loyalty *account* UI (.loyalty-wrap, .loyalty-card-wrap, .loyalty-coupon,
 * .coupon-price, .loyalty-button …) has no rules in the theme's style.css at all,
 * and the old standalone plugin's public stylesheet is commented out. That UI is
 * unstyled or styled somewhere not seen here — out of scope for this file.
 *
 * There is no companion JS for the promos: both are static markup wrapped in a
 * stretched <a>. (The loyalty *coupon* buttons do have JS, but it lives with the
 * cart card, not here.)
 */

/* Checkout reminder card -------------------------------------------------- */

.card-wrap.matica-promo {
	margin-bottom: 10px;
	background: #72A82C;
	border-radius: 10px;
}

.card-wrap.matica-promo .card {
	padding: 10px;
	position: relative;
}

/* Scoped copy of the theme's global .flex utility — the promo's inner
   <div class="card flex"> needs it, nothing else here does. */
.card-wrap.matica-promo .card.flex {
	display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;     /* OLD - Firefox 19- */
	display: -ms-flexbox;  /* TWEENER - IE 10 */
	display: -webkit-flex; /* NEW - Chrome */
	display: flex;         /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.card-wrap.matica-promo .content {
	padding-left: 15px;
}

.card-wrap.matica-promo .content h2,
.card-wrap.matica-promo .content p {
	margin: 0;
}

/* The stretched link covering the whole card. */
.card-wrap.matica-promo a {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 999;
}

/*
 * FIXED DURING MIGRATION — the theme hard-coded
 *   https://www.jasmin-maziva.hr/wp-content/plugins/woocommerce-loyalty/public/icons/…
 * which is (a) the *old standalone* woocommerce-loyalty plugin's folder, not
 * jm-addons, and (b) an absolute production URL, so dev pulled the image from
 * live. The PHP already serves this icon from jm-addons — see
 * Woocommerce_Loyalty_Manager::$nutIcon. Relative path keeps the two in step and
 * survives the old plugin being removed.
 */
.card-wrap.matica-promo .image-wrap {
	position: absolute;
	right: 0;
	top: 0;
	opacity: .25;
	background-position: 95% 50%;
	background-image: url("../icons/Jasmin-Maziva-Loyalty-Matica.png");
	background-repeat: no-repeat;
	background-blend-mode: unset;
	width: 100%;
	height: 100%;
	background-size: contain;
}

/* Sticky side tab --------------------------------------------------------- */

.matica-promo-sticky {
	position: fixed;
	top: 50%;
	left: -36px;
	background: #72A82C;
	transform: rotate(270deg) translate(0%, -100%);
	padding: 10px 20px;
	color: #fff;
	z-index: 99;
}

.matica-promo-sticky a {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.matica-promo-sticky .content,
.matica-promo-sticky .img-wrap {
	display: inline-block;
}

/* line-height: 0 so the inline <img> inside contributes no descender space —
   on a rotated tab that gap reads as the icon sitting off-centre. */
.matica-promo-sticky .img-wrap {
	height: 100%;
	width: auto;
	display: inline-block;
	vertical-align: middle;
	margin-left: 15px;
	line-height: 0;
}

.matica-promo-sticky img {
	width: 28px;
}

/* Below 768px the card text shrinks and the tab flips to the right edge. --- */

@media (max-width: 768px) {

	.card-wrap.matica-promo .content h2 {
		font-size: 24px;
	}

	.card-wrap.matica-promo .content p {
		font-size: 14px;
	}

	/* !important kept verbatim: it overrides the desktop left:-36px above, and
	   still has to win while the theme's own copy of these rules is also loaded. */
	.matica-promo-sticky {
		right: -52px;
		left: unset !important;
		transform: rotate(270deg) translate(0%, 100%) !important;
		padding: 5px 20px;
		border-radius: 2px;
	}

	.matica-promo-sticky .img-wrap {
		margin-left: 10px;
	}
}