/**
 * Remote Sensei brand skin for orestbida/cookieconsent v3.1.0.
 *
 * Consent bar = floating centred panel (`cloud inline` + `bottom center`),
 * pure white, 754px max, 4px corners, DS shadow_big, offset from the viewport
 * bottom by the same distance as the LiveChat launcher.
 *
 * Tokens used:
 *   basic/white/pure   #FFFFFE
 *   basic/black/prime  #34383C   body copy
 *   basic/black/second #5D636A   secondary copy
 *   teal/00            #408897   links, toggles
 *   gradient/teal-dark #35717D   hover / AA-safe teal
 *   shadow_big         0 20px 20px -10px rgba(47,47,47,.05),
 *                      0 50px 60px -30px rgba(47,47,47,.10)
 *
 * ACCESSIBILITY / LEGAL — do not "tidy" these away:
 *  - Reject must stay the same size, on the same row, one click, legible.
 *    Secondary in emphasis is fine; secondary in availability is not (EDPB
 *    Guidelines 05/2020). Both actions carry black-prime text.
 *  - The vendor stylesheet resets `#cc-main :before { all: unset }` and sets
 *    several layout properties at 1 id + 3 classes. Selectors here match that
 *    specificity on purpose. Weakening them makes rules silently compute to 0.
 */

#cc-main {
	--cc-font-family: 'Hind Madurai', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--cc-bg: #FFFFFE;
	--cc-primary-color: #34383C;
	--cc-secondary-color: #5D636A;

	/* Accept — primary: light fill + black-prime text + solid black-prime border,
	   so it reads as the emphasised action on white without inverting to a dark
	   fill (brief: "text black btns"). */
	--cc-btn-primary-bg: #F9FAF4;
	--cc-btn-primary-color: #34383C;
	--cc-btn-primary-border-color: #34383C;
	--cc-btn-primary-hover-bg: #34383C;
	--cc-btn-primary-hover-color: #FFFFFE;
	--cc-btn-primary-hover-border-color: #34383C;

	/* NB: equalWeightButtons:true makes BOTH Accept and Reject use the primary
	   variables — these secondary ones only reach the gear. Reject is styled
	   explicitly by [data-role="necessary"] further down. */
	--cc-btn-secondary-bg: #EBF2F2;
	--cc-btn-secondary-color: #34383C;
	--cc-btn-secondary-border-color: #EBF2F2;
	--cc-btn-secondary-hover-bg: #D8E2E3;
	--cc-btn-secondary-hover-color: #34383C;
	--cc-btn-secondary-hover-border-color: #D8E2E3;

	--cc-btn-border-radius: 4px;

	--cc-separator-border-color: #EBF2F2;
	--cc-link-color: #408897;

	--cc-toggle-on-bg: #408897;
	--cc-toggle-off-bg: #9BA3A8;
	--cc-toggle-on-knob-bg: #FFFFFE;
	--cc-toggle-off-knob-bg: #FFFFFE;
	--cc-toggle-readonly-bg: #D8E2E3;
	--cc-toggle-readonly-knob-bg: #FFFFFE;

	--cc-modal-border-radius: 4px;
	--cc-z-index: 2147483000; /* above Elementor popups, below LiveChat */
}

/* --------------------------------------------------------------------------
   Floating panel
   -------------------------------------------------------------------------- */

/* 20px clears the viewport edge by the same amount as the LiveChat launcher
   (84px container at bottom:0, ~64px visible bubble → ~20px visual gap).
   inset-block-end is zeroed first: the vendor insets the panel by
   --cc-modal-margin (1rem), which would otherwise stack to 36px.
   Horizontal centring comes from the vendor's auto margins — do not add
   left/right offsets here or it goes off-centre. */
#cc-main .cm--cloud {
	max-width: 754px;
	width: calc(100% - 2rem);
	border-radius: 4px;
	background: #FFFFFE;
	box-shadow:
		0 20px 20px -10px rgba(47, 47, 47, 0.05),
		0 50px 60px -30px rgba(47, 47, 47, 0.10);
	inset-block-end: 0;
	margin-bottom: 20px;
}

#cc-main .cm--cloud .cm__body {
	align-items: center;
	gap: 20px;
	padding: 20px 24px;
}

#cc-main .cm--cloud .cm__texts {
	padding: 0;
}

#cc-main .cm--cloud .cm__desc {
	padding: 0;
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: #34383C;
	max-height: none;
}

/* Vendor draws its own animated "underline" on every link via a
   background-image gradient (0 1px growing to 100% 1px on :hover) — see
   cookieconsent.css `#cc-main a` / `a:hover`. We want a plain static
   underline instead, so disable the vendor's line here; otherwise it grows
   in underneath ours on hover, rendering as a double underline. */
#cc-main .cm__desc a {
	color: var(--cc-link-color);
	background-image: none;
	text-decoration: underline;
	text-underline-offset: 2px;
}

#cc-main .cm__desc a:hover {
	color: #35717D;
}

/* --------------------------------------------------------------------------
   Buttons — one row, vertically centred, equal height
   -------------------------------------------------------------------------- */

/* Vendor adds a left separator border and caps width at 23em; neither suits a
   compact panel. `min-width:10em` on .cm--cloud.cm--inline .cm__btn is what
   caused the wrapping/misalignment on tablet. */
#cc-main .cm--cloud .cm__btns {
	border-left: none;
	border-top: none;
	max-width: none;
	padding: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	flex-wrap: nowrap;
}

#cc-main .cm--cloud.cm--inline .cm__btn-group {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	margin: 0;
	min-width: 0;
}

/* THE alignment fix. The vendor spaces siblings with margins meant for stacked
   column layouts:
     #cc-main .cm__btn+.cm__btn { margin-top: .375rem }
   and below 640px the same rule again as `margin: .375rem 0 0 !important`.
   In a row that pushes Reject (and the gear group) 6px down — measured as a
   3px centre-line offset against Accept, which is the misalignment reported on
   mobile and tablet. `gap` is the only spacing mechanism we want here. */
#cc-main .cm--cloud.cm--inline .cm__btn + .cm__btn,
#cc-main .cm--cloud.cm--inline .cm__btn-group + .cm__btn-group {
	margin: 0 !important;
}

/* align-items:center on the flex parents plus one shared height is what keeps
   the two actions and the gear on a single baseline at every breakpoint. */
/* 48px + 30px inline padding = DS atom/btns size=L. All three controls share
   the height so they sit on one centre-line. */
#cc-main .cm--cloud.cm--inline .cm__btn {
	min-width: 0;
	height: 48px;
	padding-inline: 30px;
	font-size: 14px;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Visual order: gear, reject, accept.
 *
 * The DOM is [Accept, Reject] in one .cm__btn-group and [gear] in a second, so
 * flexbox `order` does the reordering — no markup surgery, and tab order stays
 * DOM order. Safe here only because the sibling margins are zeroed above; `+`
 * selectors match DOM order, not visual order. */
#cc-main .cm--cloud.cm--inline .cm__btn-group:first-child { order: 2; }
#cc-main .cm--cloud.cm--inline .cm__btn-group:last-child  { order: 1; }
#cc-main .cm--cloud.cm--inline .cm__btn[data-role="necessary"] { order: 1; }
#cc-main .cm--cloud.cm--inline .cm__btn[data-role="all"]       { order: 2; }

/* Accept — DS atom/btns, color=teal size=L type=default, all four states.
 * Values read off the Figma component set (32901:31327/31329/31331/31333).
 * Set explicitly rather than via --cc-btn-primary-*: equalWeightButtons:true
 * routes BOTH actions through the primary variables, which is how Reject
 * previously ended up looking identical to Accept.
 */
/* Colour + shadow only. Typography deliberately NOT taken from the DS
   component (Montserrat 700/16) — Accept matches Reject's font size and weight
   so the two actions differ in emphasis by colour alone, not by type. */
#cc-main .cm--cloud.cm--inline .cm__btn[data-role="all"] {
	background: #408897;
	border-color: #408897;
	color: #FFFFFE;
	box-shadow: 0 20px 40px -10px rgba(38, 50, 56, 0.20);
}

#cc-main .cm--cloud.cm--inline .cm__btn[data-role="all"]:hover {
	background: #35717D;
	border-color: #35717D;
	color: #FFFFFE;
	box-shadow: 0 10px 20px -5px rgba(38, 50, 56, 0.30);
}

#cc-main .cm--cloud.cm--inline .cm__btn[data-role="all"]:active {
	background: #316874;
	border-color: #316874;
	color: #FFFFFE;
	box-shadow: 0 5px 10px -5px rgba(38, 50, 56, 0.40);
}

#cc-main .cm--cloud.cm--inline .cm__btn[data-role="all"]:disabled {
	background: #D8E2E3;
	border-color: #D8E2E3;
	color: #B2C9CB;
	box-shadow: none;
}

/* Reject — #EBF2F2 fill, black-prime text, no shadow. Teal-filled Accept now
 * carries the emphasis, so Reject needs no border to differentiate.
 *
 * Still the same height, same row, one click, 10.42:1 text contrast —
 * secondary in emphasis, never in availability (EDPB Guidelines 05/2020).
 */
#cc-main .cm--cloud.cm--inline .cm__btn[data-role="necessary"] {
	background: #EBF2F2;
	border-color: #EBF2F2;
	color: #34383C;
}

#cc-main .cm--cloud.cm--inline .cm__btn[data-role="necessary"]:hover {
	background: #D8E2E3;
	border-color: #D8E2E3;
	color: #34383C;
}

/* Gear — square icon button, same 44px height as the actions. */
#cc-main .cm--cloud.cm--inline .cm__btn.rs-cc-gear {
	background: transparent;
	border: 1px solid transparent;
	color: #5D636A;
	width: 48px;
	min-width: 48px;
	height: 48px;
	padding: 0;
	font-size: 18px;
}

#cc-main .cm--cloud.cm--inline .cm__btn.rs-cc-gear:hover {
	color: #34383C;
	background: #F9FAF4;
	border-color: transparent;
}

#cc-main .cm--cloud.cm--inline .cm__btn.rs-cc-gear:focus-visible {
	outline: 2px solid #408897;
	outline-offset: 2px;
}

/* FA Classic Regular gear (f013), webfont mode. The vendor resets
   `#cc-main :before { all: unset }`, so the glyph must be re-declared.
   weight 400 = Classic Regular. The kit also auto-subsets, so f013 only ships
   because rs_seed_fontawesome_subset() in functions.php renders one
   server-side. */
#cc-main .cm--cloud.cm--inline .cm__btn.rs-cc-gear i {
	display: inline-block;
	line-height: 1;
}

#cc-main .cm--cloud.cm--inline .cm__btn.rs-cc-gear i::before {
	all: revert;
	content: "\f013";
	font-family: "Font Awesome 7 Pro", "Font Awesome 6 Pro", "Font Awesome 5 Pro";
	font-weight: 400;
	font-style: normal;
	font-size: 18px;
	line-height: 1;
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   Tablet / mobile — stack text over buttons, keep the button row aligned
   -------------------------------------------------------------------------- */

/* Below ~860px the panel is close to full width, so the LiveChat launcher
   (fixed bottom-right, ~80px of occupied space) sits on top of the gear.
   Reserve that space rather than letting the two overlap. Buttons keep their
   natural width here — stretching them full-bleed loses the panel feel. */
@media screen and (max-width: 860px) {
	#cc-main .cm--cloud .cm__body {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		padding-inline-end: 92px;
	}

	#cc-main .cm--cloud .cm__btns {
		justify-content: flex-start;
	}

	#cc-main .cm--cloud.cm--inline .cm__btn-group {
		flex: 0 0 auto;
	}
}

/* Vendor forces flex-direction:column and padding:0 with !important below
   640px, so matching !important is the only way to hold the single row. */
/* Below 640px the DS size-L button (16px Montserrat 700 + 30px padding) cannot
   fit two Polish labels beside a gear — "Odrzucam wszystkie" / "Akceptuję
   wszystkie" overflowed and slid under the LiveChat launcher.
   Two changes reclaim the width:
     1. Raise the panel ABOVE the launcher (96px) instead of dodging it
        sideways, so the full panel width is usable.
     2. Park the gear at the panel's top-right, leaving the whole button row to
        the two actions. */
@media screen and (max-width: 640px) {
	#cc-main .cm--cloud {
		width: calc(100% - 1.5rem);
		margin-bottom: 96px;
	}

	#cc-main .cm--cloud .cm__body {
		flex-direction: column !important;
		padding: 18px !important;
		position: relative;
	}

	/* Room for the parked gear. */
	#cc-main .cm--cloud .cm__texts {
		padding-inline-end: 44px;
	}

	/* right must equal .cm__body's inline padding (18px) so the gear's right edge
	   lines up with the stacked buttons' right edge. */
	#cc-main .cm--cloud.cm--inline .cm__btn-group:last-child {
		position: absolute;
		top: 14px;
		right: 18px;
		margin: 0 !important;
	}

	/* padding:0 !important — the vendor's mobile block sets `padding: 0 1.1em`
	   (17.6px) here, which insets the buttons from the panel's content edge
	   while the absolutely-positioned gear sits at that edge, so their right
	   edges did not line up. */
	#cc-main .cm--cloud .cm__btns {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		max-width: none !important;
		border-top: none !important;
		padding: 0 !important;
		width: 100%;
	}

	#cc-main .cm--cloud.cm--inline .cm__btn-group:first-child {
		display: flex !important;
		flex-direction: row !important;
		width: 100%;
		min-width: 0 !important;
	}

	/* 12px inline padding, not 30: with the gear parked out of the row the two
	   labels need ~128px each, and 12px keeps a row fitting down to ~420px. */
	#cc-main .cm--cloud.cm--inline .cm__btn[data-role="all"],
	#cc-main .cm--cloud.cm--inline .cm__btn[data-role="necessary"] {
		flex: 1 1 0 !important;
		min-width: 0 !important;
		padding-inline: 12px;
	}

	#cc-main .cm--cloud.cm--inline .cm__btn.rs-cc-gear {
		flex: 0 0 48px !important;
		min-width: 48px !important;
	}
}

/* Narrowest phones only. Below ~420px a split row leaves each button ~128px of
   content box, which clips "Akceptuję wszystkie" / "Odrzucam wszystkie" —
   measured. Reject has to stay fully legible, so stack instead of truncating. */
@media screen and (max-width: 420px) {
	#cc-main .cm--cloud .cm__btns {
		flex-direction: column !important;
		align-items: stretch;
	}

	#cc-main .cm--cloud.cm--inline .cm__btn-group:first-child {
		flex-direction: column !important;
		align-items: stretch;
		gap: 10px;
	}

	#cc-main .cm--cloud.cm--inline .cm__btn[data-role="all"],
	#cc-main .cm--cloud.cm--inline .cm__btn[data-role="necessary"] {
		flex: 0 0 auto !important;
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   Preferences modal
   -------------------------------------------------------------------------- */

/* `all: unset` makes the vendor's h2/h3 inherit their colour from an ancestor,
   and #cc-main still carries the panel's --cc-primary-color. Re-declaring the
   variable on .pm does not recompute that inherited value, so `color` must be
   set explicitly here or the headings vanish. */
#cc-main .pm {
	--cc-bg: #FFFFFE;
	--cc-primary-color: #34383C;
	color: var(--cc-primary-color);
	--cc-secondary-color: #5D636A;
	--cc-btn-primary-bg: #408897;
	--cc-btn-primary-color: #FFFFFE;
	--cc-btn-primary-border-color: #408897;
	--cc-btn-primary-hover-bg: #35717D;
	--cc-btn-primary-hover-border-color: #35717D;
	--cc-btn-secondary-bg: #EBF2F2;
	--cc-btn-secondary-color: #34383C;
	--cc-btn-secondary-border-color: #EBF2F2;
	--cc-btn-secondary-hover-bg: #D8E2E3;
	--cc-btn-secondary-hover-border-color: #D8E2E3;
	--cc-link-color: #408897;
	--cc-cookie-category-block-bg: #F9FAF4;
	--cc-cookie-category-block-border: #EBF2F2;
	--cc-separator-border-color: #EBF2F2;
	border-radius: 4px;
	box-shadow:
		0 20px 20px -10px rgba(47, 47, 47, 0.05),
		0 50px 60px -30px rgba(47, 47, 47, 0.10);
}

#cc-main .pm .pm__desc,
#cc-main .pm .pm__section-desc {
	color: #5D636A;
}

/* Modal footer order: "Save my choices" left, then reject, then accept right.
 * The DOM is [accept, reject] in one .pm__btn-group and [save] in a second, and
 * .pm__footer is already flex/space-between — so `order` alone does it, leaving
 * DOM and tab order untouched.
 *
 * Groups are forced to flex + gap because the vendor spaces siblings with
 * margins intended for stacked layouts (same trap as the panel: it knocks a row
 * a few px out of vertical alignment). */
#cc-main .pm__btn-group {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
}

#cc-main .pm__btn-group + .pm__btn-group,
#cc-main .pm__btn + .pm__btn {
	margin: 0 !important;
}

#cc-main .pm__footer .pm__btn-group:first-child { order: 2; }
#cc-main .pm__footer .pm__btn-group:last-child  { order: 1; }
#cc-main .pm__footer .pm__btn[data-role="necessary"] { order: 1; }
#cc-main .pm__footer .pm__btn[data-role="all"]       { order: 2; }

/* Modal reject mirrors the panel's: outlined, never a second filled button.
   #35717D (gradient/teal-dark) not #408897 — teal-on-white at #408897 measures
   4.05:1, under WCAG AA's 4.5 for normal text. #35717D gives 5.51:1. */
#cc-main .pm .pm__btn[data-role="necessary"] {
	background: transparent;
	border: 1px solid #35717D;
	color: #35717D;
}

#cc-main .pm .pm__btn[data-role="necessary"]:hover {
	background: rgba(53, 113, 125, 0.10);
	border-color: #2C5F69;
	color: #2C5F69;
}