/* ===================================================================
   Banner Pro – Frontend Banner Styles  (RTL · mobile-first)
=================================================================== */

/* ------------------------------------------------------------------ */
/* Base                                                                 */
/* ------------------------------------------------------------------ */

.bp-top-banner {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	z-index: 0 !important; /* overridden by inline style from JS/PHP but safe fallback */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 44px 0 12px;
	box-sizing: border-box;
	direction: rtl;
	overflow: hidden;
	animation: bp-slide-down .35s cubic-bezier(.22,.68,0,1.2) both;
}

@keyframes bp-slide-down {
	from { transform: translateY(-100%); opacity: 0; }
	to   { transform: translateY(0);     opacity: 1; }
}

.bp-top-banner__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px 14px;
	width: 100%;
	max-width: 1280px;
	padding: 8px 0;
}

/* Alignment */
.bp-banner--align-center .bp-top-banner__inner { justify-content: center; text-align: center; }
.bp-banner--align-right  .bp-top-banner__inner { justify-content: flex-end; text-align: right; }
.bp-banner--align-left   .bp-top-banner__inner { justify-content: flex-start; text-align: left; }

/* Text */
.bp-banner__text {
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
}
.bp-banner__sub {
	font-size: .85em;
	opacity: .85;
	font-weight: 400;
}

/* ------------------------------------------------------------------ */
/* Countdown Timer                                                      */
/* ------------------------------------------------------------------ */

.bp-timer {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	direction: ltr;
	flex-shrink: 0;
	white-space: nowrap;
}

.bp-timer__segment {
	display: inline-flex;
	align-items: center;
	gap: 3px;
}

.bp-timer__val {
	display: inline-block;
	background: rgba(0, 0, 0, .22);
	border-radius: 5px;
	padding: 3px 7px;
	font-weight: 700;
	font-size: 1.05em;
	min-width: 32px;
	text-align: center;
	letter-spacing: 1px;
	line-height: 1.4;
}

.bp-timer__unit {
	font-size: .7em;
	opacity: .85;
	font-weight: 600;
}

.bp-timer__sep {
	font-weight: 800;
	font-size: 1em;
	opacity: .6;
	margin: 0 1px;
}

/* ------------------------------------------------------------------ */
/* CTA Button                                                           */
/* ------------------------------------------------------------------ */

.bp-cta-btn {
	display: inline-flex;
	align-items: center;
	padding: 6px 18px;
	border-radius: 99px;
	font-size: .88em;
	font-weight: 700;
	font-family: inherit;
	text-decoration: none !important;
	white-space: nowrap;
	border: none;
	cursor: pointer;
	transition: opacity .15s, transform .15s;
	box-shadow: 0 2px 8px rgba(0,0,0,.18);
	line-height: 1.5;
	flex-shrink: 0;
}
.bp-cta-btn:hover { opacity: .88; transform: scale(1.03); }

/* ------------------------------------------------------------------ */
/* Discount Code                                                        */
/* ------------------------------------------------------------------ */

/* Base wrap — glass style as default fallback */
.bp-code-wrap {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	gap: 0;
	background: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.28);
	border-radius: 10px;
	padding: 0;
	overflow: hidden;
	backdrop-filter: blur(8px);
}

.bp-code-val {
	font-family: 'Courier New', monospace;
	font-weight: 700;
	letter-spacing: 2px;
	font-size: .95em;
	user-select: all;
	padding: 9px 16px;
	color: #fff;
	border-left: 1px solid rgba(255,255,255,.2);
}

/* Base copy button — ghost style as default fallback */
.bp-copy-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: inherit;
	font-size: .8em;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
	transition: background .2s, transform .15s, box-shadow .2s, filter .2s;
	line-height: 1.4;
	border: none;
	outline: none;
	text-decoration: none;
	padding: 9px 14px;
	background: transparent;
	color: rgba(255,255,255,.92);
	border-radius: 0;
}
.bp-copy-btn:hover { background: rgba(255,255,255,.12); }
.bp-copy-btn:active { transform: scale(.96); }
.bp-copy-btn.copied { background: rgba(34,197,94,.5); color: #fff; }

/* ------------------------------------------------------------------ */
/* Coupon Style Variants                                                */
/* ------------------------------------------------------------------ */

/* ── Style 1: Glass (Glassmorphism) ──────────────────────────────── */
.bp-code-wrap--glass {
	gap: 0;
	background: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.28);
	border-radius: 10px;
	padding: 0;
	overflow: hidden;
	backdrop-filter: blur(8px);
}
.bp-code-wrap--glass .bp-code-val {
	padding: 9px 16px;
	color: #fff;
	font-weight: 700;
	letter-spacing: 2px;
	border-left: 1px solid rgba(255,255,255,.2);
}
.bp-code-wrap--glass .bp-copy-btn {
	padding: 9px 14px;
	background: transparent;
	color: rgba(255,255,255,.92);
	border-radius: 0;
	box-shadow: none;
}
.bp-code-wrap--glass .bp-copy-btn:hover {
	background: rgba(255,255,255,.12);
}
.bp-code-wrap--glass .bp-copy-btn.copied {
	background: rgba(34,197,94,.5);
	color: #fff;
}

/* ── Style 2: Pill (Modern) ─────────────────────────────────────── */
.bp-code-wrap--pill {
	gap: 10px;
	background: rgba(255,255,255,.96);
	border: none;
	border-radius: 100px;
	padding: 6px 6px 6px 16px;
	box-shadow: 0 2px 14px rgba(0,0,0,.18);
}
.bp-code-wrap--pill .bp-code-val {
	color: var(--bp-col1, #0d6b3f);
	font-weight: 800;
	letter-spacing: 1.5px;
}
.bp-code-wrap--pill .bp-copy-btn {
	background: linear-gradient(135deg, var(--bp-col1, #1e9c5e), var(--bp-col2, #0d6b3f));
	color: #fff;
	border-radius: 100px;
	padding: 7px 16px;
	box-shadow: 0 2px 10px rgba(0,0,0,.25);
	font-weight: 700;
}
.bp-code-wrap--pill .bp-copy-btn:hover {
	filter: brightness(1.1);
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
.bp-code-wrap--pill .bp-copy-btn.copied {
	background: #22c55e;
	box-shadow: 0 2px 8px rgba(34,197,94,.4);
}

/* ── Style 3: Minimal ───────────────────────────────────────────── */
.bp-code-wrap--minimal {
	gap: 0;
	background: transparent;
	border: 1.5px dashed rgba(255,255,255,.7);
	border-radius: 8px;
	padding: 0;
	overflow: hidden;
}
.bp-code-wrap--minimal .bp-code-val {
	padding: 8px 14px;
	background: rgba(255,255,255,.1);
	color: #fff;
	font-weight: 700;
	letter-spacing: 2px;
	border-left: 1px solid rgba(255,255,255,.2);
}
.bp-code-wrap--minimal .bp-copy-btn {
	padding: 8px 13px;
	background: rgba(255,255,255,.95);
	color: #222;
	border-radius: 0;
	box-shadow: none;
	font-weight: 800;
}
.bp-code-wrap--minimal .bp-copy-btn:hover {
	background: #fff;
}
.bp-code-wrap--minimal .bp-copy-btn.copied {
	background: #22c55e;
	color: #fff;
}

/* ------------------------------------------------------------------ */
/* Decorative Emojis                                                    */
/* ------------------------------------------------------------------ */

.bp-banner-decoratives {
	position: absolute;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 4px;
	pointer-events: none;
	overflow: hidden;
}
.bp-banner-decoratives--right {
	right: 8px;
	padding-right: 4px;
	flex-direction: row-reverse;
}
.bp-banner-decoratives--left {
	left: 44px; /* clear close button */
	padding-left: 4px;
}
.bp-decorative-emoji {
	font-size: 1.15em;
	line-height: 1;
	display: inline-block;
	opacity: 0.6;
	animation: bp-deco-float 3s ease-in-out infinite;
	will-change: transform;
}
.bp-decorative-emoji:nth-child(2) { animation-delay: .6s; opacity: 0.45; }
.bp-decorative-emoji:nth-child(3) { animation-delay: 1.2s; opacity: 0.3; font-size: .9em; }
@keyframes bp-deco-float {
	0%, 100% { transform: translateY(0); }
	50%       { transform: translateY(-3px); }
}

.bp-theme-emoji {
	font-size: 1.2em;
	line-height: 1;
	flex-shrink: 0;
	display: inline-block;
}

/* ------------------------------------------------------------------ */
/* Close Button                                                         */
/* ------------------------------------------------------------------ */

.banner-pro-close {
	position: absolute;
	top: 50%;
	left: 10px;
	transform: translateY(-50%);
	background: rgba(255,255,255,.2);
	border: 1px solid rgba(255,255,255,.35);
	color: inherit;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	font-size: 14px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .2s, transform .2s;
	flex-shrink: 0;
	padding: 0;
	line-height: 1;
	user-select: none;
	text-decoration: none;
}
.banner-pro-close:hover {
	background: rgba(255,255,255,.38);
	transform: translateY(-50%) scale(1.1);
}

/* ------------------------------------------------------------------ */
/* Sticky vs Inline modes                                               */
/* ------------------------------------------------------------------ */

/* Default (sticky): already handled by position:fixed above */
.bp-top-banner.bp-banner--sticky {
	position: fixed !important;
}

/* Inline (non-sticky): flows with the page, no fixed positioning */
.bp-top-banner.bp-banner--inline {
	position: relative !important;
	top: auto !important;
	animation: none;
}

/* ------------------------------------------------------------------ */
/* Body padding — push page content below the banner                   */
/* ------------------------------------------------------------------ */

/* Only add body padding for sticky banners */
body.bp-has-banner {
	padding-top: var(--bp-banner-height, 52px) !important;
	transition: padding-top .3s ease;
}
/* Inline banners don't need body padding */
body.bp-has-banner--inline {
	padding-top: 0 !important;
}

/* ------------------------------------------------------------------ */
/* Admin Bar compatibility                                              */
/* ------------------------------------------------------------------ */

.admin-bar .bp-top-banner { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .bp-top-banner { top: 46px; }
}

/* ------------------------------------------------------------------ */
/* Tablet  (≤ 768px)                                                   */
/* ------------------------------------------------------------------ */

@media (max-width: 768px) {
	.bp-banner-decoratives { display: none; }
	.bp-top-banner {
		padding: 6px 38px 6px 10px;
	}

	.bp-top-banner__inner {
		gap: 4px 8px;
		padding: 5px 0;
		justify-content: center !important;
		text-align: center !important;
		flex-wrap: nowrap;
	}

	.bp-banner__text  { font-size: .84em; white-space: nowrap; }
	.bp-banner__sub   { font-size: .76em; }

	.bp-timer__val    { padding: 2px 5px; min-width: 26px; font-size: .9em; }
	.bp-timer__unit   { font-size: .62em; }

	.bp-cta-btn              { padding: 4px 12px; font-size: .78em; }
	/* Only scale font on wrap — never override variant padding/gap */
	.bp-code-wrap            { font-size: .82em; }
	.bp-code-wrap--glass     { padding: 0; gap: 0; }
	.bp-code-wrap--pill      { padding: 4px 4px 4px 12px; gap: 8px; }
	.bp-code-wrap--minimal   { padding: 0; gap: 0; }
	.bp-copy-btn             { font-size: .76em; }
	/* Preserve variant-specific button padding */
	.bp-code-wrap--glass   .bp-copy-btn { padding: 7px 10px; }
	.bp-code-wrap--pill    .bp-copy-btn { padding: 5px 12px; }
	.bp-code-wrap--minimal .bp-copy-btn { padding: 7px 10px; }

	.bp-close-btn     { top: 50%; left: 8px; }
}

/* ------------------------------------------------------------------ */
/* Mobile  (≤ 480px)                                                   */
/* ------------------------------------------------------------------ */

@media (max-width: 480px) {
	.bp-top-banner {
		padding: 4px 32px 4px 8px;
	}

	.bp-top-banner__inner {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center !important;
		gap: 4px 6px;
	}

	.bp-banner__text  { font-size: .75em; white-space: nowrap; }
	.bp-banner__sub   { font-size: .7em; }

	.bp-timer         { font-size: .78em; }
	.bp-timer__val    { min-width: 20px; padding: 1px 3px; }
	.bp-timer__unit   { font-size: .58em; }

	.bp-cta-btn              { padding: 3px 9px; font-size: .72em; }
	.bp-code-wrap            { font-size: .75em; }
	.bp-code-wrap--glass     { padding: 0; gap: 0; }
	.bp-code-wrap--pill      { padding: 3px 3px 3px 10px; gap: 6px; }
	.bp-code-wrap--minimal   { padding: 0; gap: 0; }
	.bp-code-val             { letter-spacing: 1px; font-size: .88em; }
	.bp-copy-btn             { font-size: .72em; }
	.bp-code-wrap--glass   .bp-copy-btn { padding: 6px 8px; }
	.bp-code-wrap--pill    .bp-copy-btn { padding: 5px 10px; }
	.bp-code-wrap--minimal .bp-copy-btn { padding: 6px 8px; }

	.bp-close-btn {
		top: 8px;
		transform: none;
		left: 6px;
		width: 20px;
		height: 20px;
		font-size: 10px;
	}
}