/**
 * Rentamira Promo Calendar — Bar styles.
 * Designed for luxury vacation rental brands: subtle, refined, generous spacing.
 * Tokenized via CSS custom properties injected from PHP settings.
 */

.rpc-bar {
	--rpc-arrow-size: 26px;
	--rpc-arrow-edge: 28px;
	--rpc-padding-x: 76px;
	--rpc-z: 9999;
	--rpc-ease: cubic-bezier(0.4, 0, 0.2, 1);

	box-sizing: border-box;
	height: var(--rpc-height, 44px);
	background: var(--rpc-bg, #2D4A5E);
	color: var(--rpc-text, #FFFFFF);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100%;
	font-size: var(--rpc-size, 14px);
	font-weight: var(--rpc-weight, 500);
	font-style: var(--rpc-style, normal);
	line-height: 1.3;
	letter-spacing: var(--rpc-letter-spacing, 0em);
	overflow: hidden;
	font-family: var(--rpc-font, inherit);
}

.rpc-bar *,
.rpc-bar *::before,
.rpc-bar *::after {
	box-sizing: border-box;
}

.rpc-bar--sticky {
	position: sticky;
	top: 0;
	z-index: var(--rpc-z);
}

.rpc-bar--top-only {
	position: relative;
	z-index: var(--rpc-z);
}

.rpc-bar[hidden] { display: none; }

/* ============== TEXT ALIGNMENT ============== */
/* justify-content positions the message box; text-align handles the wrapped
   lines inside it (otherwise a centered box still shows left-aligned text). */
.rpc-bar--align-left .rpc-bar__slide { justify-content: flex-start; }
.rpc-bar--align-center .rpc-bar__slide { justify-content: center; }
.rpc-bar--align-right .rpc-bar__slide { justify-content: flex-end; }
.rpc-bar--align-left .rpc-bar__message,
.rpc-bar--align-left .rpc-bar__message-text { text-align: left; }
.rpc-bar--align-center .rpc-bar__message,
.rpc-bar--align-center .rpc-bar__message-text { text-align: center; }
.rpc-bar--align-right .rpc-bar__message,
.rpc-bar--align-right .rpc-bar__message-text { text-align: right; }

/* ============== TEXT TRANSFORM ============== */
.rpc-bar--text-uppercase  { text-transform: uppercase; }
.rpc-bar--text-lowercase  { text-transform: lowercase; }
.rpc-bar--text-capitalize { text-transform: capitalize; }
.rpc-bar--text-none       { text-transform: none; }

/* ============== TRACK + SLIDES ============== */

.rpc-bar__track {
	position: relative;
	flex: 1;
	height: 100%;
	margin: 0 var(--rpc-padding-x);
	overflow: hidden;
}

.rpc-bar__slides {
	position: relative;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rpc-bar__slide {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
}

/* Fade transition (default, luxury-friendly) */
.rpc-bar--transition-fade .rpc-bar__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 400ms var(--rpc-ease);
	pointer-events: none;
}
.rpc-bar--transition-fade .rpc-bar__slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

/* Slide transition (literal carousel motion) */
.rpc-bar--transition-slide .rpc-bar__slides {
	display: flex;
	height: 100%;
	width: 100%;
	transition: transform 500ms var(--rpc-ease);
	will-change: transform;
}
.rpc-bar--transition-slide .rpc-bar__slide {
	position: relative;
	flex: 0 0 100%;
	opacity: 1;
	pointer-events: auto;
}
.rpc-bar--transition-slide.is-jumping .rpc-bar__slides {
	transition: none;
}

/* ============== MESSAGE ============== */

.rpc-bar .rpc-bar__message {
	color: inherit;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	padding: 4px 2px;
	transition: opacity 200ms var(--rpc-ease);
}

.rpc-bar__message-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ============== ICONS ============== */

.rpc-bar__icon {
	width: var(--rpc-icon-size, 16px);
	height: var(--rpc-icon-size, 16px);
	display: inline-block;
	flex: 0 0 auto;
}

/* Mask mode: the file acts as a stencil filled with a solid color */
.rpc-bar__icon--mask {
	background-color: currentColor;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

/* Original mode: render the file with its own colors */
.rpc-bar__icon--img {
	object-fit: contain;
}

.rpc-bar__message--link {
	cursor: pointer;
}

.rpc-bar__message--link:hover,
.rpc-bar__message--link:focus-visible {
	opacity: 0.78;
	color: inherit;
	text-decoration: none;
	outline: none;
}

.rpc-bar__message--link:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 4px;
}

.rpc-bar__message--static {
	cursor: default;
}

/* Inline formatting from markdown */
.rpc-bar__message strong { font-weight: 700; }
.rpc-bar__message em     { font-style: italic; }

/* ============== CTA BUTTON ============== */

.rpc-bar .rpc-bar__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: inherit;
	text-decoration: none;
	font-size: var(--rpc-cta-size, 12.5px);
	font-weight: var(--rpc-cta-weight, 600);
	letter-spacing: var(--rpc-cta-ls, 0.04em);
	text-transform: var(--rpc-cta-transform, none);
	white-space: nowrap;
	transition: all 220ms var(--rpc-ease);
	cursor: pointer;
}

.rpc-bar .rpc-bar__cta:hover,
.rpc-bar .rpc-bar__cta:focus,
.rpc-bar .rpc-bar__cta:visited {
	color: inherit;
}

.rpc-bar__cta svg {
	width: 9px;
	height: 9px;
	fill: currentColor;
	transition: transform 220ms var(--rpc-ease);
}

.rpc-bar__cta:hover svg,
.rpc-bar__cta:focus-visible svg {
	transform: translateX(3px);
}

.rpc-bar__cta:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 4px;
}

/* Pill: fully rounded button */
.rpc-bar__cta--pill {
	padding: 6px 16px;
	border-radius: 999px;
	border: 1px solid currentColor;
}
.rpc-bar__cta--pill:hover,
.rpc-bar__cta--pill:focus-visible {
	background: currentColor;
}
.rpc-bar__cta--pill:hover .rpc-bar__cta-label,
.rpc-bar__cta--pill:focus-visible .rpc-bar__cta-label {
	color: var(--rpc-bg);
}
.rpc-bar__cta--pill:hover svg,
.rpc-bar__cta--pill:focus-visible svg {
	color: var(--rpc-bg);
	transform: none;
}

/* Square: sharp corners */
.rpc-bar__cta--square {
	padding: 6px 18px;
	border-radius: 0;
	border: 1px solid currentColor;
}
.rpc-bar__cta--square:hover,
.rpc-bar__cta--square:focus-visible {
	background: currentColor;
}
.rpc-bar__cta--square:hover .rpc-bar__cta-label,
.rpc-bar__cta--square:focus-visible .rpc-bar__cta-label {
	color: var(--rpc-bg);
}
.rpc-bar__cta--square:hover svg,
.rpc-bar__cta--square:focus-visible svg {
	color: var(--rpc-bg);
	transform: none;
}

/* Text + arrow: no background, just text with an arrow */
.rpc-bar__cta--text-arrow {
	padding: 0;
	border: none;
	background: transparent;
	position: relative;
}
.rpc-bar__cta--text-arrow::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 280ms var(--rpc-ease);
}
.rpc-bar__cta--text-arrow:hover::after,
.rpc-bar__cta--text-arrow:focus-visible::after {
	transform: scaleX(1);
}

/* CTA-link mode = no button. Static message + this case shouldn't render a CTA. */

/* When CTA is enabled site-wide, ensure the message doesn't expand to fill all space */
.rpc-bar--cta-pill .rpc-bar__slide,
.rpc-bar--cta-square .rpc-bar__slide,
.rpc-bar--cta-text-arrow .rpc-bar__slide {
	gap: 16px;
}

/* ============== ARROWS ============== */

.rpc-bar__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: var(--rpc-arrow-size);
	height: var(--rpc-arrow-size);
	color: inherit;
	border: none;
	background: transparent;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background 180ms var(--rpc-ease), border-color 180ms var(--rpc-ease), opacity 180ms var(--rpc-ease);
	z-index: 1;
	opacity: 0.7;
}

.rpc-bar__arrow:hover,
.rpc-bar__arrow:focus-visible {
	opacity: 1;
	outline: none;
}

.rpc-bar__arrow:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 2px;
}

.rpc-bar__arrow svg {
	width: 11px;
	height: 11px;
	display: block;
	fill: currentColor;
}

.rpc-bar__arrow--prev { left: var(--rpc-arrow-edge); }
.rpc-bar__arrow--next { right: var(--rpc-arrow-edge); }

/* Arrow style: none (bare SVG only) */
.rpc-bar--arrows-none .rpc-bar__arrow {
	background: transparent;
	border: none;
}

/* Arrow style: circle */
.rpc-bar--arrows-circle .rpc-bar__arrow {
	background: rgba(255, 255, 255, 0.10);
	border-radius: 50%;
}
.rpc-bar--arrows-circle .rpc-bar__arrow:hover,
.rpc-bar--arrows-circle .rpc-bar__arrow:focus-visible {
	background: rgba(255, 255, 255, 0.22);
}

/* Arrow style: square (sharp corners, architectural) */
.rpc-bar--arrows-square .rpc-bar__arrow {
	background: rgba(255, 255, 255, 0.08);
	border-radius: 0;
	border: 1px solid rgba(255, 255, 255, 0.18);
}
.rpc-bar--arrows-square .rpc-bar__arrow:hover,
.rpc-bar--arrows-square .rpc-bar__arrow:focus-visible {
	background: rgba(255, 255, 255, 0.18);
	border-color: rgba(255, 255, 255, 0.32);
}

/* Light background variants: invert tinting for arrows + cta */
.rpc-bar[data-tone="light"].rpc-bar--arrows-circle .rpc-bar__arrow {
	background: rgba(0, 0, 0, 0.08);
}
.rpc-bar[data-tone="light"].rpc-bar--arrows-circle .rpc-bar__arrow:hover,
.rpc-bar[data-tone="light"].rpc-bar--arrows-circle .rpc-bar__arrow:focus-visible {
	background: rgba(0, 0, 0, 0.18);
}
.rpc-bar[data-tone="light"].rpc-bar--arrows-square .rpc-bar__arrow {
	background: rgba(0, 0, 0, 0.06);
	border-color: rgba(0, 0, 0, 0.18);
}
.rpc-bar[data-tone="light"].rpc-bar--arrows-square .rpc-bar__arrow:hover,
.rpc-bar[data-tone="light"].rpc-bar--arrows-square .rpc-bar__arrow:focus-visible {
	background: rgba(0, 0, 0, 0.14);
	border-color: rgba(0, 0, 0, 0.32);
}

/* Single-promo: arrows present but invisible (space stays reserved) */
.rpc-bar.is-single .rpc-bar__arrow {
	opacity: 0;
	pointer-events: none;
}

/* ============== MOBILE ============== */
@media (max-width: 640px) {
	.rpc-bar {
		--rpc-arrow-size: 22px;
		--rpc-arrow-edge: 16px;
		--rpc-padding-x: 52px;
		font-size: var(--rpc-size, 13px);
	}
	.rpc-bar__arrow svg {
		width: 9px;
		height: 9px;
	}
	.rpc-bar__message { padding: 4px 2px; }
	.rpc-bar__cta { font-size: var(--rpc-cta-size, 11.5px); gap: 5px; }
	.rpc-bar__cta--pill,
	.rpc-bar__cta--square { padding: 5px 12px; }
	.rpc-bar--cta-pill .rpc-bar__slide,
	.rpc-bar--cta-square .rpc-bar__slide,
	.rpc-bar--cta-text-arrow .rpc-bar__slide { gap: 10px; }
}

/* ============== MOBILE OVERFLOW MODES ============== */

@media (max-width: 640px) {
	/* Wrap: the bar grows to fit the whole message (and drops the CTA to a
	   second line when needed) instead of truncating. Crossfade becomes a
	   plain swap here because slides must size the bar. */
	.rpc-bar--mwrap {
		height: auto;
		min-height: var(--rpc-height, 44px);
		padding-top: 9px;
		padding-bottom: 9px;
	}
	.rpc-bar--mwrap .rpc-bar__track { height: auto; }
	.rpc-bar--mwrap .rpc-bar__message {
		white-space: normal;
	}
	.rpc-bar--mwrap .rpc-bar__message-text {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}
	.rpc-bar--mwrap .rpc-bar__slide {
		flex-wrap: wrap;
		row-gap: 7px;
	}
	/* Only the active message is in flow (so the bar's height is always its
	   natural height and the text is always visible). JS animates the height
	   between messages with a FLIP transition, so the bar visibly stretches
	   down / retracts up as one- and two-line messages rotate. If JS never
	   runs, the active slide still shows at its natural height. */
	.rpc-bar--mwrap.rpc-bar--transition-fade .rpc-bar__slides {
		transition: height 380ms var(--rpc-ease);
		overflow: hidden;
	}
	.rpc-bar--mwrap.rpc-bar--transition-fade .rpc-bar__slide {
		position: relative;
		inset: auto;
		display: none;
		opacity: 1;
		pointer-events: auto;
		transition: none;
	}
	.rpc-bar--mwrap.rpc-bar--transition-fade .rpc-bar__slide.is-active {
		display: flex;
		animation: rpc-bar-fadein 380ms var(--rpc-ease);
	}
	@keyframes rpc-bar-fadein {
		from { opacity: 0; }
		to   { opacity: 1; }
	}

	/* Marquee: text gently slides back and forth to reveal the overflow.
	   The .is-marquee class and the shift/duration variables are set by JS
	   only when the text actually overflows. */
	.rpc-bar--mmarquee .rpc-bar__message { overflow: hidden; }
	.rpc-bar--mmarquee .rpc-bar__message-text.is-marquee {
		display: inline-block;
		max-width: none;
		overflow: visible;
		text-overflow: clip;
		animation: rpc-marquee var(--rpc-mq-dur, 9s) linear infinite alternate;
	}
}

@keyframes rpc-marquee {
	0%, 14% { transform: translateX(0); }
	86%, 100% { transform: translateX(var(--rpc-mq-shift, -60px)); }
}

@media (prefers-reduced-motion: reduce) {
	.rpc-bar__message-text.is-marquee { animation: none; }
}

/* ============== ACCESSIBILITY ============== */

@media (prefers-reduced-motion: reduce) {
	.rpc-bar__slide,
	.rpc-bar__slides,
	.rpc-bar__cta,
	.rpc-bar__cta svg,
	.rpc-bar__arrow,
	.rpc-bar__message {
		transition: none;
	}
}

@media print {
	.rpc-bar { display: none !important; }
}

/* ==========================================================================
   Theme-defense overrides. Ensure the bar renders correctly even when the
   active theme styles buttons or links globally (Elementor Pro kits, etc.).
   Chained-class selectors here outspecify `.elementor-kit-N button` and
   `.elementor-kit-N a` rules.
   ========================================================================== */

/* Arrows: reset theme button styling, then re-apply per-variant */
.rpc-bar button.rpc-bar__arrow,
.rpc-bar button.rpc-bar__arrow:hover,
.rpc-bar button.rpc-bar__arrow:focus,
.rpc-bar button.rpc-bar__arrow:focus-visible,
.rpc-bar button.rpc-bar__arrow:active {
	color: inherit;
	font-family: inherit;
	font-size: 0;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	line-height: 1;
	width: var(--rpc-arrow-size);
	height: var(--rpc-arrow-size);
	min-width: var(--rpc-arrow-size);
	min-height: var(--rpc-arrow-size);
	max-width: var(--rpc-arrow-size);
	max-height: var(--rpc-arrow-size);
	flex: 0 0 auto;
	box-shadow: none;
	text-shadow: none;
}

/* Dead-center the chevron regardless of any theme flex/line-height interference */
.rpc-bar button.rpc-bar__arrow svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
}

/* Arrows-none: stay transparent in every state */
.rpc-bar.rpc-bar--arrows-none button.rpc-bar__arrow,
.rpc-bar.rpc-bar--arrows-none button.rpc-bar__arrow:hover,
.rpc-bar.rpc-bar--arrows-none button.rpc-bar__arrow:focus,
.rpc-bar.rpc-bar--arrows-none button.rpc-bar__arrow:focus-visible,
.rpc-bar.rpc-bar--arrows-none button.rpc-bar__arrow:active {
	background: transparent;
	border: none;
	border-radius: 0;
}

/* Arrows-circle */
.rpc-bar.rpc-bar--arrows-circle button.rpc-bar__arrow {
	background: rgba(255, 255, 255, 0.10);
	border: none;
	border-radius: 50%;
}
.rpc-bar.rpc-bar--arrows-circle button.rpc-bar__arrow:hover,
.rpc-bar.rpc-bar--arrows-circle button.rpc-bar__arrow:focus,
.rpc-bar.rpc-bar--arrows-circle button.rpc-bar__arrow:focus-visible {
	background: rgba(255, 255, 255, 0.22);
	border: none;
}

/* Arrows-square */
.rpc-bar.rpc-bar--arrows-square button.rpc-bar__arrow {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 0;
}
.rpc-bar.rpc-bar--arrows-square button.rpc-bar__arrow:hover,
.rpc-bar.rpc-bar--arrows-square button.rpc-bar__arrow:focus,
.rpc-bar.rpc-bar--arrows-square button.rpc-bar__arrow:focus-visible {
	background: rgba(255, 255, 255, 0.18);
	border-color: rgba(255, 255, 255, 0.32);
	border-radius: 0;
}

/* Light tone: invert arrow tinting */
.rpc-bar[data-tone="light"].rpc-bar--arrows-circle button.rpc-bar__arrow {
	background: rgba(0, 0, 0, 0.08);
}
.rpc-bar[data-tone="light"].rpc-bar--arrows-circle button.rpc-bar__arrow:hover,
.rpc-bar[data-tone="light"].rpc-bar--arrows-circle button.rpc-bar__arrow:focus,
.rpc-bar[data-tone="light"].rpc-bar--arrows-circle button.rpc-bar__arrow:focus-visible {
	background: rgba(0, 0, 0, 0.18);
}
.rpc-bar[data-tone="light"].rpc-bar--arrows-square button.rpc-bar__arrow {
	background: rgba(0, 0, 0, 0.06);
	border-color: rgba(0, 0, 0, 0.18);
}
.rpc-bar[data-tone="light"].rpc-bar--arrows-square button.rpc-bar__arrow:hover,
.rpc-bar[data-tone="light"].rpc-bar--arrows-square button.rpc-bar__arrow:focus,
.rpc-bar[data-tone="light"].rpc-bar--arrows-square button.rpc-bar__arrow:focus-visible {
	background: rgba(0, 0, 0, 0.14);
	border-color: rgba(0, 0, 0, 0.32);
}

/* Links: defend color + typography from theme link styles */
.rpc-bar a.rpc-bar__message--link,
.rpc-bar a.rpc-bar__message--link:hover,
.rpc-bar a.rpc-bar__message--link:focus,
.rpc-bar a.rpc-bar__message--link:focus-visible,
.rpc-bar a.rpc-bar__message--link:visited {
	color: inherit;
	font-family: inherit;
	font-weight: inherit;
	text-decoration: none;
	text-transform: none;
}

.rpc-bar a.rpc-bar__cta,
.rpc-bar a.rpc-bar__cta:hover,
.rpc-bar a.rpc-bar__cta:focus,
.rpc-bar a.rpc-bar__cta:focus-visible,
.rpc-bar a.rpc-bar__cta:visited {
	color: inherit;
	font-family: inherit;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: none;
}

/* Hover opacity dip on full-link message */
.rpc-bar a.rpc-bar__message--link:hover,
.rpc-bar a.rpc-bar__message--link:focus-visible {
	opacity: 0.78;
}

/* Pill/Square CTA hover: invert colors */
.rpc-bar a.rpc-bar__cta--pill:hover,
.rpc-bar a.rpc-bar__cta--pill:focus-visible,
.rpc-bar a.rpc-bar__cta--square:hover,
.rpc-bar a.rpc-bar__cta--square:focus-visible {
	background: currentColor;
}
.rpc-bar a.rpc-bar__cta--pill:hover .rpc-bar__cta-label,
.rpc-bar a.rpc-bar__cta--pill:focus-visible .rpc-bar__cta-label,
.rpc-bar a.rpc-bar__cta--square:hover .rpc-bar__cta-label,
.rpc-bar a.rpc-bar__cta--square:focus-visible .rpc-bar__cta-label {
	color: var(--rpc-bg, #2D4A5E);
}
.rpc-bar a.rpc-bar__cta--pill:hover svg,
.rpc-bar a.rpc-bar__cta--pill:focus-visible svg,
.rpc-bar a.rpc-bar__cta--square:hover svg,
.rpc-bar a.rpc-bar__cta--square:focus-visible svg {
	color: var(--rpc-bg, #2D4A5E);
}