/* ---- pasek główny ---- */
.fts-ab {
    position: fixed;
	bottom:0.5em;
	left:5vw;
	border-radius:0.6em;
	right:5vw;
    background: #0955e0;
    z-index: 9999;
    min-height: 44px;
    animation: fts-ab-slidein 0.35s ease both;
}

.fts-ab.fts-ab--hidden {
    display: none;
}
/* ---- kontener wewnętrzny ---- */
.fts-ab__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 1rem;
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}


/* ---- badge "-10%" ---- */
.fts-ab__badge {
    display: inline-block;
    background: #ffd633;
    color: #1a2540;
    font-weight: 700;
    font-size: 1em;
    letter-spacing: 0.07em;
    padding: 2px 9px;
    border-radius: 3px;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.6;
}

/* ---- tekst ---- */
.fts-ab__text {
    font-size: 1em;
    color: #ddd;
    letter-spacing: 0.01em;
    line-height: 1.45;
    margin: 0;
}

.fts-ab__text strong {
    color: #eee;
    font-weight: 400;
}

/* ---- separator pionowy ---- */
.fts-ab__sep {
    display: inline-block;
    width: 1px;
	margin:0 1rem;
    height: 16px;
    background: #84aaf0;
    flex-shrink: 0;
    align-self: center;
}

/* ---- przycisk CTA ---- */
.fts-ab__cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    font-size: 1em;
    letter-spacing: 0.04em;
    padding: 5px 14px;
    border-radius: 3px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
    line-height: 1.4;
}

.fts-ab__cta:hover,
.fts-ab__cta:focus-visible {
    background: #84aaf0;
    color: #0955e0;
    outline: none;
}

.fts-ab__cta:focus-visible {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #84aaf0;
}

/* ---- przycisk zamknij ---- */
.fts-ab__close {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #fff;
	font-weight:bold;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 6px 8px;
    border-radius: 3px;
    transition: color 0.15s ease;
}

.fts-ab__close:hover {
    color: #e8e4d8;
}

.fts-ab__close:focus-visible {
    outline: 2px solid #84aaf0;
    outline-offset: 2px;
}

/* ---- animacja ---- */
@keyframes fts-ab-slidein {
    from {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
    }
    to {
        max-height: 200px;
        opacity: 1;
        overflow: visible;
    }
}

/* ---- ukrycie przy JS-cookie (klasa dodawana przed renderem) ---- */
.fts-ab--cookie-hidden {
    display: none !important;
}

/* ---- responsywność ---- */
@media ( max-width: 640px ) {

    .fts-ab__sep {
        display: none;
    }

    .fts-ab__text {
		padding:1rem;
        font-size: 1rem;
        text-align: center;
    }
    .fts-ab__cta {
        width: 80%;
        justify-content: center;
    }
	/* ---- kontener wewnętrzny ---- */
	.fts-ab__inner {
		margin: 0 auto;
		padding: 1em;
		display: block;
		gap: 14px;
		text-align:center;
	}
	.fts-ab__close {
		top:30px;
	}
}