/* WCP Sticky Banner */

/* -------------------------------------------------------------------------
   Custom properties — defaults match the mockup.
   Actual values are overridden from ACF options via wp_head inline <style>.
   ------------------------------------------------------------------------- */
:root {
	--banner-bg:               #3E3E44;
	--banner-text:             #FFB224;
	--banner-text-muted:       #FFFFFF96;
    --banner-tag-color:         #1A1523;
	--banner-accent:           #F76808;
	--banner-pill-bg:          #FFB224;
	--banner-pill-text:        #1A1523;
    --banner-cta-text:         #FFFFFF;
	--banner-radius:           0;
	--banner-radius-sm:        4px;
	--banner-font-bonus:       18px;
	--banner-font-sub:         12px;
	--banner-transition:       opacity 0.2s ease, visibility 0.2s ease;
	--banner-z:                9999;
}

/* -------------------------------------------------------------------------
   Wrapper
   ------------------------------------------------------------------------- */
.sticky-banner {
	position: relative;
	width: 100%;
	font-family: inherit;
	line-height: 1.3;
	color: var(--banner-text);
}

/* -------------------------------------------------------------------------
   Expanded state
   ------------------------------------------------------------------------- */
.sticky-banner__expanded {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 0;
	background: var(--banner-bg);
	border-radius: var(--banner-radius);
	position: relative;
	min-height: 65px;
}

/* Top-left badge */
.sticky-banner__tag {
	position: absolute;
	top: -10px;
	left: 16px;
	display: inline-block;
	padding: 4px 8px;
	background: var(--banner-accent);
	color: var(--banner-tag-color);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	border-radius:  var(--banner-radius-sm);
}

/* Logo */
.sticky-banner__logo {
	flex-shrink: 0;
	width: 89px;
    padding-left: 16px;

	display: flex;
	align-items: center;
	justify-content: center;
}

.sticky-banner__logo-img {
	display: block;
	max-width: 100%;
	max-height: 56px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Bonus block */
.sticky-banner__bonus {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
    padding-right: 105px;
}

.sticky-banner__bonus-main {
	font-size: var(--banner-font-bonus);
	font-weight: 700;
	color: var(--banner-text);
}

.sticky-banner__bonus-sub {
	font-size: var(--banner-font-sub);
	color: var(--banner-text-muted);
}

/* CTA button */

.sticky-banner .sticky-banner__cta {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--banner-accent);
	color: var(--banner-cta-text);
	font-size: 16px;
	font-weight: 400;
	text-decoration: none !important;
	border-radius: var(--banner-radius);
	white-space: nowrap;
	transition: filter 0.15s ease;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 97px;

}

.sticky-banner__cta:hover {
	filter: brightness(1.1);
    color: var(--banner-cta-text);


}

/* -------------------------------------------------------------------------
   Compact state — hidden by default, shown when .is-sticky is present
   ------------------------------------------------------------------------- */
.sticky-banner__compact {
	display: none;
	align-items: flex-start;
	gap: 8px;
	padding: 17px 22px;
	background: var(--banner-bg);
}

/* Pills */
.sticky-banner__pills {
	display: flex;
	align-items: center;
    justify-content: space-between;
    width: 100%;
	gap: 6px;
	flex-shrink: 0;
}

.sticky-banner__pill {
	display: inline-block;
	padding: 3px 10px;
	background: var(--banner-pill-bg);
	color: var(--banner-pill-text);
	font-size: 9px;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: 4px;
	white-space: nowrap;
}

.sticky-banner__pill--name {
    border-radius: 999px;
}

.sticky-banner__pill--bonus {
	/*background: var(--banner-accent);*/
	/*color: #fff;*/
    margin-left: auto;
}

.sticky-banner__pill--tag{
    background: var(--banner-accent);
    color: var(--banner-tag-color);
}

/* Description */
.sticky-banner__desc {
	flex: 1;
	margin: 0;
	font-size: 12px;
    font-weight: 400;
	color: var(--banner-text-muted);
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
    padding-right: 16px;
}


/* -------------------------------------------------------------------------
   Sticky state — toggled by banner.js adding .is-sticky
   ------------------------------------------------------------------------- */
.sticky-banner.is-sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--banner-z);
	border-radius: 0;
}

.sticky-banner.is-sticky .sticky-banner__expanded {
	display: none;
}

.sticky-banner.is-sticky .sticky-banner__compact {
	display: flex;
    flex-direction: column;
    align-content: flex-start;
}

.sticky-banner.is-sticky .sticky-banner__cta{
    position: absolute;
    left: 0;
    right:0;
    top:0;
    bottom:0;
    opacity: 0;
    width: auto;
}

.sticky-banner__desc-wrap{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sticky-banner__arrow {
    display: block;
    width: 16px;
    height: 16px;
    background-color: var(--banner-pill-bg); /* статический цвет */
    -webkit-mask: url('../img/arrow-right.svg')
    no-repeat center / contain;
    mask: url('../img/arrow-right.svg') no-repeat
    center / contain;
    flex-shrink: 0;
    margin-left: auto;
}