/* ==========================================================================
   Cucudo — baner cookies WPConsent (RODO) — redesign pod styl sklepu + konwersję
   --------------------------------------------------------------------------
   Grilling z właścicielem (2026-07-23). Rama: PERSWAZJA W ZGODZIE z RODO —
   Accept dominuje wizualnie, ale Reject zostaje 1 klik na pierwszej warstwie.
   Cel #1 (dopasuj do sklepu) + cel #2 (max Accept, legalnie).

   Ustalenia:
     • karta = ink sklepu #12131A (nie przypadkowy granat #04194e),
     • Accept = brandowy zielony pill #21FA90 / tekst #12131A, radius 14,
       Ubuntu, hover #0A7D45, + subtelna statyczna zielona poświata,
     • hierarchia: Accept (primary) > Reject (jeden ghost jak hero) >
       Preferences (link tekstowy, nie przycisk),
     • desktop: wyśrodkowany modal + miękkie przyciemnienie (BEZ blokady klików),
     • mobile: bottom-sheet.

   Host shadow roota to #wpconsent-container (NIE #wpconsent-root — ::part
   przebija tylko przez element z shadow rootem). Custom properties
   --wpconsent-* (na #wpconsent-root, inline) dziedziczą przez granicę shadow,
   więc nadpisujemy je !important. Reguły wtyczki nie są !important.
   ========================================================================== */

/* --- Kolory: tokeny sklepu zamiast granatu wtyczki ------------------------- */
#wpconsent-root {
	--wpconsent-background: #12131A !important;   /* karta + modal Preferences jak ciemne sekcje sklepu */
	--wpconsent-accept-color: #12131A !important; /* tekst na zielonym = brandowy ink */
}
/* bezpośrednio na karcie — pewność niezależnie od inline-var wtyczki */
#wpconsent-container::part(wpconsent-banner) {
	background: #12131A !important;
}

/* --- Font: Ubuntu w shadow (jak cały sklep) ------------------------------- */
#wpconsent-container::part(wpconsent-banner),
#wpconsent-container::part(wpconsent-banner-body),
#wpconsent-container::part(wpconsent-banner-footer),
#wpconsent-container::part(wpconsent-button-accept),
#wpconsent-container::part(wpconsent-button-cancel),
#wpconsent-container::part(wpconsent-button-preferences) {
	font-family: 'Ubuntu', sans-serif !important;
}

/* --- Stopka: kolumna, oddech od tekstu i od loga „Powered by" -------------- */
#wpconsent-container::part(wpconsent-banner-footer) {
	flex-direction: column !important;
	min-width: 0 !important;
	gap: 10px !important;
	margin-top: 18px !important;
	margin-bottom: 14px !important;
}
/* treść niosła szerokość gridu (span 3) — musi zwężić się do karty */
#wpconsent-container::part(wpconsent-banner-body) {
	width: auto !important;
	min-width: 0 !important;
	max-width: 100% !important;
}

/* --- Accept: brandowy zielony primary, na górze, z subtelną poświatą ------
   Kolejność w DOM jest sztywna (Ustawienia→Odrzucam→Akceptuję); 'order' na
   ::part ustawia od nowa: Akceptuję → Odrzucam → Ustawienia. */
#wpconsent-container::part(wpconsent-button-accept) {
	order: -2 !important;
	height: auto !important;
	min-height: 54px !important;
	padding: 15px 22px !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	color: #12131A !important;
	border-radius: 14px !important;
	box-shadow: 0 6px 22px rgba(33, 250, 144, .35) !important; /* statyczny glow */
}
#wpconsent-container::part(wpconsent-button-accept):hover {
	background: #0A7D45 !important;  /* ciemniejsza zieleń sklepu na hover */
	color: #ffffff !important;
}

/* --- Reject: ghost jak w hero sklepu — wyciszony, ale wciąż 1 klik (RODO) -- */
#wpconsent-container::part(wpconsent-button-cancel) {
	order: -1 !important;
	height: auto !important;
	min-height: 46px !important;
	padding: 12px 20px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	border-radius: 14px !important;
	background: transparent !important;
	border: 1.5px solid rgba(255, 255, 255, .4) !important;
	color: #ffffff !important;
}
#wpconsent-container::part(wpconsent-button-cancel):hover {
	border-color: #ffffff !important;
	background: rgba(255, 255, 255, .08) !important;
}

/* --- Preferences: link tekstowy (tercjarne), nie przycisk ------------------
   Granularna zgoda dalej 1 klik dostępna (RODO), ale nie konkuruje wizualnie
   z Accept ani z Reject. */
#wpconsent-container::part(wpconsent-button-preferences) {
	order: 0 !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 2px 8px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: rgba(255, 255, 255, .6) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
}
#wpconsent-container::part(wpconsent-button-preferences):hover {
	color: #ffffff !important;
}

/* --- Desktop: wyśrodkowany modal + miękkie przyciemnienie (bez cookie-walla)
   Wtyczka układa kartę jako grid 3-kolumnowy (pod przyciski w rzędzie) →
   wymusza min-width i wyjeżdżanie. display:block + min-width:0 kasuje grid,
   więc nasza szerokość działa. Przyciemnienie: box-shadow spread 100vmax w
   odcieniu ink (#12131A); samo gaśnie, gdy holder dostaje display:none. */
@media (min-width: 783px) {
	#wpconsent-container::part(wpconsent-banner) {
		display: block !important;
		min-width: 0 !important;
		top: 50% !important;
		left: 50% !important;
		right: auto !important;
		bottom: auto !important;
		transform: translate(-50%, -50%) !important;
		width: min(460px, calc(100vw - 48px)) !important;
		max-width: 460px !important;
		box-shadow: 0 0 0 100vmax rgba(18, 19, 26, .6),
		            0 24px 60px rgba(0, 0, 0, .5) !important;
	}
}

/* --- Mobile: bottom-sheet na całą szerokość -------------------------------- */
@media (max-width: 782px) {
	#wpconsent-container::part(wpconsent-banner) {
		top: auto !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		border-radius: 16px 16px 0 0 !important;
		box-shadow: 0 0 0 100vmax rgba(18, 19, 26, .5) !important;
	}
}