/* Willowy Cennik — frontend. Paleta Willowy Jastków: Jost, pomarańcz #FF9800, ciemny #272727. */

.wcen-cennik {
	--wcen-accent: #ff9800;
	--wcen-accent-2: #ff7426;
	--wcen-dark: #262429;
	--wcen-text: #4a4a4a;
	--wcen-muted: #8a8a8a;
	--wcen-line: #ececec;
	--wcen-row-hover: #fff7ef;
	--wcen-green: #37b24d;
	--wcen-orange: #ff9f1c;
	--wcen-red: #e03131;
	--wcen-radius: 6px;

	font-family: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: var(--wcen-text);
	font-size: 15px;
	line-height: 1.4;
	box-sizing: border-box;
	width: 100%;
	container-type: inline-size; /* responsywność wg szerokości kontenera, nie okna */
}

/* Naprawa: w kolumnach flex Elementora `container-type` zapadał element do szerokości 0
   — wymuszamy pełną szerokość na wrapperach widgetu shortcode. */
.elementor-widget-shortcode:has(.wcen-cennik),
.elementor-widget-container:has(> .wcen-cennik) { width: 100%; }
.wcen-cennik *,
.wcen-cennik *::before,
.wcen-cennik *::after { box-sizing: border-box; }

/* --------------------------------------------------------------- Filtry */
.wcen-filters {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	background: #eceef3;
	border-radius: var(--wcen-radius);
	padding: 24px 28px;
	margin-bottom: 26px;
}
.wcen-filter label {
	display: block;
	font-weight: 500;
	color: #3a3a3a;
	margin-bottom: 8px;
}
.wcen-filter select {
	width: 100%;
	height: 46px;
	padding: 0 14px;
	border: 1px solid #d9dce3;
	border-radius: 4px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M6 8 0 0h12z'/%3E%3C/svg%3E") no-repeat right 14px center;
	-webkit-appearance: none;
	appearance: none;
	font-family: inherit;
	font-size: 15px;
	color: var(--wcen-text);
	cursor: pointer;
}
.wcen-filter select:focus {
	outline: none;
	border-color: var(--wcen-accent);
	box-shadow: 0 0 0 3px rgba(255, 152, 0, .15);
}

/* --------------------------------------------------------------- Tabela */
/* Bez wewnętrznego przewijania — tabela płynie całą wysokością, przewija się cała strona.
   (overflow-x:auto wymuszałby też overflow-y:auto = wewnętrzny pionowy pasek.)
   Dopasowanie szerokości zapewniają container queries; poziomy scroll tylko w fallbacku. */
.wcen-table-wrap { overflow: visible; }
.wcen-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	table-layout: auto;
	border-bottom: 3px solid var(--wcen-accent); /* akcent marki Willowy */
}
.wcen-table thead th {
	background: var(--wcen-dark);
	color: #fff;
	font-weight: 600;
	text-align: left;
	padding: 16px 12px;
	font-size: 12.5px;
	letter-spacing: .04em;
	text-transform: uppercase; /* jak nagłówki sekcji na willowy-jastkow.pl */
	white-space: nowrap;
	position: relative;
}
.wcen-table thead tr { border-bottom: 3px solid var(--wcen-accent); }
.wcen-table thead th:first-child { border-top-left-radius: 6px; }
.wcen-table thead th:last-child { border-top-right-radius: 6px; }

.wcen-sortable { cursor: pointer; user-select: none; }
.wcen-arrow {
	display: inline-block;
	width: 0; height: 0;
	margin-left: 6px;
	vertical-align: middle;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-bottom: 5px solid rgba(255,255,255,.45);
	position: relative;
}
.wcen-arrow::after {
	content: "";
	position: absolute;
	left: -4px; top: 7px;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid rgba(255,255,255,.45);
}
.wcen-sortable.wcen-asc .wcen-arrow { border-bottom-color: var(--wcen-accent); }
.wcen-sortable.wcen-asc .wcen-arrow::after { border-top-color: rgba(255,255,255,.25); }
.wcen-sortable.wcen-desc .wcen-arrow { border-bottom-color: rgba(255,255,255,.25); }
.wcen-sortable.wcen-desc .wcen-arrow::after { border-top-color: var(--wcen-accent); }

.wcen-table tbody td {
	padding: 14px 12px;
	border-bottom: 1px solid var(--wcen-line);
	vertical-align: middle;
	white-space: nowrap;
	font-size: 14px;
}
.wcen-row { transition: background .15s ease; }
.wcen-row:hover { background: var(--wcen-row-hover); }

.wcen-lokal { font-weight: 600; color: #2a2a2a; }

/* Rzut */
.wcen-col-rzut { width: 76px; }
.wcen-rzut {
	display: block;
	width: 62px; height: 46px;
	border-radius: 4px;
	overflow: hidden;
	border: 1px solid var(--wcen-line);
	background: #fafafa;
}
.wcen-rzut img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wcen-rzut-empty { background: repeating-linear-gradient(45deg,#f4f4f4,#f4f4f4 6px,#efefef 6px,#efefef 12px); }

/* Status */
.wcen-status { font-weight: 500; }
.wcen-dot {
	display: inline-block;
	width: 10px; height: 10px;
	border-radius: 50%;
	margin-right: 8px;
	vertical-align: middle;
}
.wcen-dot-wolne { background: var(--wcen-green); }
.wcen-dot-zarezerwowane { background: var(--wcen-orange); }
.wcen-dot-sprzedane { background: var(--wcen-red); }

/* Cena + ikonki */
.wcen-cena-cell { position: relative; }
.wcen-cena { font-weight: 600; color: #2a2a2a; }
.wcen-icons { display: inline-flex; gap: 2px; margin-left: 6px; vertical-align: middle; }
.wcen-ic {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px; height: 24px;
	padding: 0;
	border: none;
	background: transparent;
	color: #9a9a9a;
	cursor: pointer;
	border-radius: 6px;
	transition: color .15s, background .15s;
}
.wcen-ic:hover { color: var(--wcen-accent); background: rgba(255,152,0,.1); }

/* Tooltip „ostatnia aktualizacja" */
.wcen-tip {
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	background: #fff;
	color: #444;
	border: 1px solid var(--wcen-line);
	box-shadow: 0 8px 28px rgba(0,0,0,.12);
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 13px;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: opacity .15s, transform .15s;
	z-index: 30;
	pointer-events: none;
}
.wcen-ic-info:hover .wcen-tip,
.wcen-ic-info:focus .wcen-tip {
	opacity: 1; visibility: visible;
	transform: translateX(-50%) translateY(0);
}

/* Popup historii cen */
.wcen-pop {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	width: 320px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 18px 50px rgba(0,0,0,.16);
	border: 1px solid #f0f0f0;
	padding: 20px 22px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .18s, transform .18s;
	z-index: 40;
	white-space: normal;
	text-align: left;
}
.wcen-ic-hist:hover .wcen-pop,
.wcen-ic-hist:focus .wcen-pop,
.wcen-pop:hover { opacity: 1; visibility: visible; transform: translateY(0); }

/* Otwarcie kliknięciem (urządzenia dotykowe) */
.wcen-ic-hist.wcen-open .wcen-pop { opacity: 1; visibility: visible; transform: translateY(0); }
.wcen-ic-info.wcen-open .wcen-tip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

.wcen-pop-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	padding-bottom: 14px;
}
.wcen-pop-lokal { font-size: 26px; font-weight: 600; color: #1f1f1f; line-height: 1.1; }
.wcen-pop-akt { text-align: right; }
.wcen-pop-akt small { display: block; color: var(--wcen-muted); font-size: 12px; }
.wcen-pop-akt strong { font-size: 22px; color: #1f1f1f; }
.wcen-pop-title { display: block; font-weight: 600; color: #333; margin: 4px 0 8px; }

.wcen-pop-table { display: block; }
.wcen-pop-tr {
	display: grid;
	grid-template-columns: 1.1fr 1fr 1fr;
	gap: 6px;
	padding: 8px 0;
	border-bottom: 1px solid #f2f2f2;
	font-size: 13px;
}
.wcen-pop-tr:last-child { border-bottom: none; }
.wcen-pop-th { color: var(--wcen-muted); font-weight: 500; border-bottom: 1px solid #ececec; }
.wcen-pop-tr span:nth-child(2),
.wcen-pop-tr span:nth-child(3) { text-align: left; }
.wcen-pop-najn {
	display: block;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed #e2e2e2;
	font-size: 12.5px;
	color: var(--wcen-muted);
}
.wcen-pop-najn strong { color: var(--wcen-accent-2); }

/* Zobacz więcej */
.wcen-more-cell { text-align: right; }
.wcen-more {
	font-weight: 600;
	color: #2a2a2a;
	text-decoration: none;
	transition: color .15s;
	white-space: nowrap;
}
.wcen-more:hover { color: var(--wcen-accent); }

/* Pusto */
.wcen-empty { padding: 40px; text-align: center; color: var(--wcen-muted); }
.wcen-error {
	padding: 14px 18px; background: #fff3cd; border: 1px solid #ffe08a;
	border-radius: 8px; color: #7a5b00; font-family: sans-serif;
}

/* Wiersze sprzedane — lekko wyszarzone */
.wcen-row[data-dostepnosc="sprzedane"] .wcen-lokal,
.wcen-row[data-dostepnosc="sprzedane"] td { color: #9a9a9a; }

/* --------------------------------------------------------- Responsywność
   Container queries: mierzą szerokość KONTENERA (miejsca osadzenia), nie okna —
   dzięki temu tabela nie wymusza przewijania w bok, gdziekolwiek ją wstawisz.
   Ukrywamy kolejno mniej istotne kolumny (Budynek → Piętro → Pokoje → Rzut/Pow.). */
@container (max-width: 1180px) {
	.wcen-col-budynek { display: none; }
}
@container (max-width: 1080px) {
	.wcen-col-custom { display: none; } /* kolumny własne chowamy, gdy brak miejsca */
}
@container (max-width: 980px) {
	.wcen-col-pietro { display: none; }
	.wcen-filters { grid-template-columns: 1fr 1fr; gap: 16px; padding: 18px; }
	.wcen-pop { right: 0; left: auto; width: 300px; }
}
@container (max-width: 800px) {
	.wcen-col-pokoje { display: none; }
	.wcen-table tbody td, .wcen-table thead th { padding: 12px 8px; }
}
@container (max-width: 640px) {
	.wcen-col-rzut, .wcen-col-pow { display: none; }
	.wcen-filters { grid-template-columns: 1fr; }
	.wcen-pop { position: fixed; left: 12px; right: 12px; width: auto; top: auto; }
	.wcen-more { font-size: 13px; }
}

/* Fallback dla starszych przeglądarek bez container queries */
@supports not (container-type: inline-size) {
	.wcen-table-wrap { overflow-x: auto; }
}

/* ------------------------------------------------------------- Mobile
   Na telefonie/tablecie NIE chowamy kolumn wg kontenera — zamiast tego
   pokazujemy całą tabelę i pozwalamy przewijać ją palcem w poziomie
   (wcześniej overflow:visible ucinał tabelę bez możliwości scrollowania). */
@media (max-width: 900px) {
	.wcen-cennik { container-type: normal; } /* wyłącz @container → pokaż wszystkie kolumny */
	.wcen-table-wrap {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch; /* płynny scroll na iOS */
		overscroll-behavior-x: contain;
		border: 1px solid var(--wcen-line);
		border-radius: var(--wcen-radius);
		/* cień-podpowiedź, że można przewijać w bok */
		background:
			linear-gradient(90deg, #fff 30%, rgba(255,255,255,0)) left / 24px 100% no-repeat,
			linear-gradient(90deg, rgba(255,255,255,0), #fff 70%) right / 24px 100% no-repeat,
			radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.10), rgba(0,0,0,0)) left / 12px 100% no-repeat,
			radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.10), rgba(0,0,0,0)) right / 12px 100% no-repeat;
		background-attachment: local, local, scroll, scroll;
	}
	.wcen-table { min-width: max-content; } /* naturalna szerokość → realny scroll */
	.wcen-filters { grid-template-columns: 1fr 1fr; gap: 14px; padding: 16px; }
}
@media (max-width: 600px) {
	.wcen-filters { grid-template-columns: 1fr; }
	.wcen-table tbody td, .wcen-table thead th { padding: 12px 10px; }
	/* Popup historii cen wyśrodkowany na ekranie (nie ucinany przez scroll) */
	.wcen-pop {
		position: fixed; left: 12px; right: 12px; width: auto;
		top: 50%; bottom: auto; transform: translateY(-50%) scale(.98);
	}
	.wcen-ic-hist:hover .wcen-pop,
	.wcen-ic-hist:focus .wcen-pop,
	.wcen-ic-hist.wcen-open .wcen-pop,
	.wcen-pop:hover { transform: translateY(-50%) scale(1); }
}