/* OnWheels Rezerwacje — public-facing styles, v2
 * Brand tokens unchanged from v1 (navy/orange/teal/lime, editorial
 * serif display, small-caps eyebrow). New in v2: a gradient "ice at
 * dusk" background with soft blurred accent shapes, and a frosted-
 * glass treatment on the main content card — the signature move of
 * this pass, kept to ONE place rather than smeared across every
 * element. Inputs stay near-solid for legibility; the primary button
 * stays fully solid, since a glassy CTA loses visual weight.
 */

:root {
	--owr-navy: #071B4D;
	--owr-navy-deep: #04123a;
	--owr-orange: #3485FF;
	--owr-teal: #1fccab;
	--owr-lime: #F9ED00;
	--owr-paper: #F7F9F8;
	--owr-ink-soft: #4A5A66;
	--owr-border: #DCE3E6;
	--owr-font-display: 'Fraunces', Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
	--owr-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* {
	box-sizing: border-box;
}

html {
	min-height: 100%;
}

body {
	margin: 0;
	min-height: 100vh;
	font-family: var(--owr-font-body);
	color: var(--owr-navy);
	position: relative;
	overflow-x: hidden;

	background-color: var(--owr-navy-deep);
	background-image:
		radial-gradient(ellipse 900px 600px at 15% 90%, rgba(175, 252, 65, 0.10), transparent 60%),
		linear-gradient(160deg, var(--owr-navy-deep) 0%, #024a63 45%, #0d6b78 100%);
}

/* Auth pages (login/register/forgot/reset-password) only — their body
 * has .owr-auth as its first child, account.php's has .owr-account
 * instead, so this :has() scopes the flex-centering to just those four
 * without a body class. margin:auto on .owr-auth already centered it
 * horizontally, but only pinned it 4rem from the top vertically, so on
 * tall viewports the card sat near the top with dead space below —
 * flex + justify-content:center centers the (card + footer) group in
 * both directions, on any viewport height. */
body:has(> .owr-auth) {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* Soft blurred accent shapes — brand-colored, not a generic decorative
 * gradient: they exist so the glass card behind them has something to
 * refract, and their placement/colors are the brand's own teal/orange. */
body::before,
body::after {
	content: "";
	position: fixed;
	border-radius: 50%;
	filter: blur(90px);
	z-index: 0;
	pointer-events: none;
}

body::before {
	width: 520px;
	height: 520px;
	background: rgba(31, 204, 171, 0.35);
	top: -160px;
	right: -120px;
}

body::after {
	width: 440px;
	height: 440px;
	background: rgba(252, 134, 0, 0.28);
	bottom: -140px;
	left: -100px;
}

.owr-auth,
.owr-account {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 640px;
	margin: 4rem auto 5rem;
	padding: 3rem 2.25rem 3.25rem;

	background: rgba(255, 255, 255, 0.62);
	-webkit-backdrop-filter: blur(24px) saturate(160%);
	backdrop-filter: blur(24px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 28px;
	box-shadow:
		0 20px 48px rgba(1, 38, 64, 0.28),
		inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.owr-account {
	max-width: 720px;
}

/* .owr-auth's body is now flex-centered (see body:has(> .owr-auth)
 * above), which handles vertical centering on its own — the old fixed
 * 4rem/5rem top/bottom margin from the shared rule above would just
 * stack on top of that and pull the card off-center again, so it's
 * cut down to a small, symmetric breathing margin here. .owr-account
 * isn't flex-centered (account.php is a tall, scrolling dashboard, not
 * a card meant to sit centered in the viewport) so it keeps the
 * original margin from the shared rule untouched. */
.owr-auth {
	margin: 1.5rem auto;
}

@media (max-width: 480px) {
	.owr-auth,
	.owr-account {
		margin: 2rem 1rem 3rem;
		padding: 2.25rem 1.5rem 2.5rem;
		border-radius: 20px;
	}
}

.owr-logo {
	display: block;
	margin: 0 auto 1.25rem;
	width: 180px;
	height: auto;
}

.owr-eyebrow {
	display: block;
	text-align: center;
	font-variant: small-caps;
	letter-spacing: 0.1em;
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
	margin: 0 0 0.75rem;
}

.owr-hero {
	font-family: var(--owr-font-display);
	font-weight: 700;
	font-size: clamp(2.6rem, 9vw, 4.25rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-align: center;
	margin: 0 0 1rem;
	color: var(--owr-navy);
}

.owr-hero--account {
	font-size: clamp(2rem, 6vw, 2.75rem);
}

.owr-hero--small {
	font-size: clamp(2rem, 7vw, 3rem);
}

.owr-tagline {
	text-align: center;
	font-size: 1.05rem;
	line-height: 1.55;
	color: var(--owr-ink-soft);
	max-width: 34em;
	margin: 0 auto 2.5rem;
}

.owr-switch {
	text-align: center;
	margin-bottom: 1.75rem;
}

/* Pure-CSS tab toggle: hidden radios + sibling selectors, no JS. */
.owr-tab-radio {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.owr-tabs-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	border-bottom: 1px solid rgba(0, 52, 89, 0.14);
	margin-bottom: 2.25rem;
}

.owr-tabs {
	display: flex;
	gap: 2rem;
}

.owr-tab {
	font-size: 1.15rem;
	font-weight: 600;
	color: #fff;
	padding: 0.25rem 0.1rem 0.9rem;
	position: relative;
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.15s ease;
}

#owr-tab-login:checked ~ .owr-tabs label[for="owr-tab-login"],
#owr-tab-register:checked ~ .owr-tabs label[for="owr-tab-register"],
#owr-tab-children:checked ~ .owr-tabs label[for="owr-tab-children"],
#owr-tab-adults:checked ~ .owr-tabs label[for="owr-tab-adults"],
#owr-tab-reservations:checked ~ .owr-tabs label[for="owr-tab-reservations"] {
	color: #fff;
}

#owr-tab-login:checked ~ .owr-tabs label[for="owr-tab-login"]::after,
#owr-tab-register:checked ~ .owr-tabs label[for="owr-tab-register"]::after,
#owr-tab-children:checked ~ .owr-tabs label[for="owr-tab-children"]::after,
#owr-tab-adults:checked ~ .owr-tabs label[for="owr-tab-adults"]::after,
#owr-tab-reservations:checked ~ .owr-tabs label[for="owr-tab-reservations"]::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 3px;
	background: var(--owr-lime);
	border-radius: 2px;
	box-shadow: 0 0 10px rgba(175, 252, 65, 0.7);
}

.owr-tab-radio:focus-visible ~ .owr-tabs label {
	outline: 2px solid var(--owr-orange);
	outline-offset: 3px;
}

.owr-panel-login,
.owr-panel-register,
.owr-panel-profile,
.owr-panel-children,
.owr-panel-adults,
.owr-panel-reservations,
.owr-panel-notifications {
	display: none;
}

#owr-tab-notifications:checked ~ .owr-panel-notifications {
	display: block;
}

#owr-tab-login:checked ~ .owr-panel-login,
#owr-tab-register:checked ~ .owr-panel-register,
#owr-tab-profile:checked ~ .owr-panel-profile,
#owr-tab-children:checked ~ .owr-panel-children,
#owr-tab-adults:checked ~ .owr-panel-adults,
#owr-tab-reservations:checked ~ .owr-panel-reservations {
	display: block;
}

.owr-field {
	margin-bottom: 1.25rem;
}

.owr-field label,
.owr-field-label {
	display: block;
	font-size: 0.9rem;
	font-weight: 600;
	margin-bottom: 0.4rem;
	color: var(--owr-navy);
}

.owr-field input[type="text"],
.owr-field input[type="email"],
.owr-field input[type="tel"],
.owr-field input[type="password"],
.owr-field input[type="number"],
.owr-field select {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid rgba(0, 52, 89, 0.16);
	border-radius: 10px;
	font-size: 1rem;
	font-family: var(--owr-font-body);
	color: var(--owr-navy);
	background: rgba(255, 255, 255, 0.72);
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.owr-field input:focus-visible,
.owr-field select:focus-visible {
	outline: 2px solid var(--owr-orange);
	outline-offset: 1px;
	border-color: var(--owr-orange);
	background: rgba(255, 255, 255, 0.95);
}

.owr-row {
	display: flex;
	gap: 1rem;
}

.owr-row .owr-field {
	flex: 1;
}

.owr-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	margin-bottom: 1.1rem;
	font-size: 0.92rem;
	line-height: 1.45;
	color: var(--owr-ink-soft);
	cursor: pointer;
}

.owr-checkbox input {
	margin-top: 0.2rem;
	flex-shrink: 0;
	width: 1.05rem;
	height: 1.05rem;
	accent-color: var(--owr-orange);
}

.owr-checkbox .owr-note {
	display: block;
	font-size: 0.82rem;
	opacity: 0.85;
	margin-top: 0.15rem;
}

.owr-button {
	display: inline-block;
	width: 100%;
	background: var(--owr-orange);
	color: #fff;
	font-family: var(--owr-font-body);
	font-weight: 700;
	font-size: 1rem;
	padding: 0.85rem 1.5rem;
	border: none;
	border-radius: 12px;
	cursor: pointer;
	margin-top: 0.5rem;
	box-shadow: 0 6px 18px rgba(252, 134, 0, 0.32);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.owr-button:hover {
	background: #e07a00;
	box-shadow: 0 8px 24px rgba(252, 134, 0, 0.42);
	transform: translateY(-1px);
}

.owr-button:active {
	transform: translateY(0);
}

.owr-button:focus-visible {
	outline: 2px solid var(--owr-navy);
	outline-offset: 2px;
}

.owr-link {
	color: #fff;
	text-decoration: none;
	font-size: 0.92rem;
}

.owr-link:hover {
	text-decoration: underline;
}

.owr-forgot {
	display: block;
	text-align: right;
	margin: -0.6rem 0 1.5rem;
}

.owr-errors {
	background: rgba(253, 238, 229, 0.85);
	border-left: 3px solid var(--owr-orange);
	padding: 0.9rem 1.1rem;
	margin-bottom: 1.5rem;
	font-size: 0.92rem;
	border-radius: 4px 10px 10px 4px;
}

.owr-errors ul {
	margin: 0;
	padding-left: 1.1rem;
}

.owr-errors li + li {
	margin-top: 0.25rem;
}

.owr-errors--success {
	background: rgba(31, 204, 171, 0.14);
	border-left-color: var(--owr-teal);
}

/* Account panel */

.owr-field-label {
	margin-bottom: 0.5rem;
}

.owr-field-note {
	display: block;
	font-size: 0.8rem;
	color: var(--owr-ink-soft);
	margin-top: 0.4rem;
	line-height: 1.4;
}

.owr-subhead {
	font-family: var(--owr-font-display);
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--owr-navy);
	margin: 2.25rem 0 1rem;
}

.owr-subhead:first-child {
	margin-top: 0;
}

.owr-subhead--small {
	font-family: var(--owr-font-body);
	font-size: 1rem;
	font-weight: 600;
	margin: 1.5rem 0 0.5rem;
}

.owr-empty {
	color: var(--owr-ink-soft);
	font-size: 0.95rem;
}

.owr-child-list {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.owr-child-card {
	border: 1px solid rgba(0, 52, 89, 0.12);
	border-radius: 12px;
	padding: 0.85rem 1rem;
	background: rgba(255, 255, 255, 0.55);
}

.owr-child-card strong {
	display: block;
	font-size: 1rem;
}

.owr-child-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.owr-child-card-head strong {
	flex: 1;
}

.owr-group-badge {
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	padding: 0.22rem 0.65rem;
	border-radius: 999px;
	white-space: nowrap;
}

.owr-group-badge--small {
	margin-left: auto;
}

/* Read-only account summary (profile tab): email, join date, children */

.owr-summary-list {
	margin: 0 0 1.5rem;
	padding: 0;
	display: grid;
	gap: 0.1rem;
}

.owr-summary-list > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid rgba(0, 52, 89, 0.1);
	font-size: 0.9rem;
}

.owr-summary-list dt {
	color: var(--owr-ink-soft);
	font-weight: 600;
}

.owr-summary-list dd {
	margin: 0;
	color: var(--owr-navy);
	text-align: right;
}

.owr-child-summary-list {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.owr-child-summary-list li {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 0.7rem;
	padding: 0.6rem 0.85rem;
	background: rgba(255, 255, 255, 0.5);
	border: 1px solid rgba(0, 52, 89, 0.12);
	border-radius: 10px;
	font-size: 0.9rem;
}

.owr-child-summary-name {
	font-weight: 700;
	color: var(--owr-navy);
}

.owr-child-summary-meta {
	color: var(--owr-ink-soft);
	font-size: 0.85rem;
}

.owr-child-meta {
	font-size: 0.85rem;
	color: var(--owr-ink-soft);
}

.owr-assign-group-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.6rem;
}

.owr-assign-group-form select {
	padding: 0.4rem 0.55rem;
	border-radius: 8px;
	border: 1px solid rgba(0, 52, 89, 0.2);
	background: rgba(255, 255, 255, 0.8);
	font-size: 0.85rem;
	color: var(--owr-navy);
}

.owr-pill-section {
	margin-top: 0.75rem;
	padding-top: 0.65rem;
	border-top: 1px solid rgba(0, 52, 89, 0.1);
}

.owr-pill-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
}

.owr-pill-label {
	display: block;
	font-size: 0.7rem;
	font-weight: 700;
	font-variant: small-caps;
	letter-spacing: 0.04em;
	color: var(--owr-ink-soft);
	margin: 0 0 0.4rem;
}

.owr-pill {
	color: #fff;
	font-size: 0.72rem;
	font-weight: 600;
	padding: 0.3rem 0.6rem;
	border-radius: 999px;
	white-space: nowrap;
}

/* Admin-sent praise notifications on a child's card — lime accent for
 * routine praise, orange for the "special" (level-up-readiness) one,
 * a small dot on unread ones (cleared the next time this page loads). */

.owr-praise-section {
	margin-top: 0.75rem;
	padding-top: 0.65rem;
	border-top: 1px solid rgba(0, 52, 89, 0.1);
}

.owr-praise-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.owr-praise-item {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.3rem 0.75rem;
	padding: 0.5rem 0.7rem 0.5rem 0.85rem;
	background: rgba(255, 255, 255, 0.55);
	border-left: 3px solid transparent;
	border-radius: 4px 8px 8px 4px;
	font-size: 0.85rem;
}

/* The lime bar is an "unread" cue, not a permanent decoration — once
 * seen (server clears read_at on the next visit, see account.php),
 * it fades to a plain card so the eye goes straight to what's still
 * new. "Special" keeps its orange accent regardless of read state
 * though — that one marks a message TYPE (level-up readiness), not
 * an attention flag, so it shouldn't disappear just because it's
 * been seen once. */

.owr-praise-item--new {
	border-left-color: var(--owr-lime);
}

.owr-praise-item--special {
	background: rgba(252, 134, 0, 0.08);
	border-left-color: var(--owr-orange);
}

.owr-praise-item--new::after {
	content: "nowe";
	position: absolute;
	top: -0.5rem;
	left: 0.6rem;
	background: var(--owr-orange);
	color: #fff;
	font-size: 0.62rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 0.1rem 0.4rem;
	border-radius: 999px;
}

.owr-praise-text {
	color: var(--owr-navy);
	font-weight: 600;
}

.owr-praise-date {
	color: var(--owr-ink-soft);
	font-size: 0.76rem;
	white-space: nowrap;
}

/* Collapse praises past the 3rd — same "Pokaż więcej ▾/▴" toggle
 * pattern as the calendar's month list, scoped to this one child's
 * .owr-praise-section since the toggle/list/label are all siblings
 * inside it (repeating the same class names for every child on the
 * page is safe — sibling combinators never cross a parent boundary). */

.owr-praise-item:nth-child(n+4) {
	display: none;
}

.owr-more-praise-toggle:checked ~ .owr-praise-list .owr-praise-item:nth-child(n+4) {
	display: flex;
}

.owr-more-praise-toggle {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.owr-more-praise-label {
	display: inline-block;
	cursor: pointer;
	color: var(--owr-orange);
	font-size: 0.78rem;
	font-weight: 600;
	margin-top: 0.5rem;
}

.owr-more-praise-label:hover {
	text-decoration: underline;
}

.owr-more-praise-label-less {
	display: none;
}

.owr-more-praise-toggle:checked ~ .owr-more-praise-label .owr-more-praise-label-more {
	display: none;
}

.owr-more-praise-toggle:checked ~ .owr-more-praise-label .owr-more-praise-label-less {
	display: inline;
}

.owr-tab-dot {
	position: absolute;
	top: 0.15rem;
	right: -0.55rem;
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background: var(--owr-orange);
	box-shadow: 0 0 6px rgba(252, 134, 0, 0.7);
}

/* Notification bell — top-right of the account card. Only jiggles
 * (reusing the calendar's owr-shake keyframe, briefly, on a timer)
 * while there's something unread; the dot uses the same look as the
 * "Dzieciaki" tab's new-praise dot for a consistent notification
 * language across the app. */

.owr-bell {
	position: absolute;
	top: 1.35rem;
	right: 1.5rem;
	z-index: 2;
	display: inline-block;
	line-height: 1;
	cursor: pointer;
	transform-origin: 50% 0%;
}

.owr-bell-icon {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	fill: #fff;
}

.owr-bell .owr-tab-dot {
	top: -0.1rem;
	right: -0.35rem;
}

.owr-bell--ringing {
	animation: owr-bell-ring 2.5s ease-in-out infinite;
}

@keyframes owr-bell-ring {
	0%, 85%, 100% { transform: rotate(0deg); }
	87% { transform: rotate(-12deg); }
	89% { transform: rotate(10deg); }
	91% { transform: rotate(-8deg); }
	93% { transform: rotate(5deg); }
	95% { transform: rotate(-2deg); }
	97%, 100% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
	.owr-bell--ringing {
		animation: none;
	}
}

/* "Moje konto" — top-left, mirroring the bell's top-right position.
 * A <label for="owr-tab-profile">, not a link — the profile tab's
 * radio input stays exactly where it always was (inside .owr-tabs-wrap,
 * a sibling of .owr-panel-profile, which the panel-visibility CSS
 * still depends on); only the *label* moved out of the tab row. The
 * avatar switches to orange while that tab is active via :has(),
 * since the radio and this label are no longer siblings within reach
 * of a plain ~ selector — same trick already used elsewhere in this
 * app for "reach across the DOM" state (e.g. the group-filter pills). */
.owr-account-user-link {
	position: absolute;
	top: 1.3rem;
	left: 1.5rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
}

.owr-account-avatar {
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%;
	background: var(--owr-navy);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.85rem;
	flex-shrink: 0;
	transition: background-color 0.15s ease;
}

.owr-account:has(#owr-tab-profile:checked) .owr-account-avatar {
	background: var(--owr-orange);
}

.owr-account-user-name {
	font-size: 0.82rem;
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
}

@media (max-width: 480px) {
	.owr-account-user-name {
		display: none;
	}
}

.owr-notif-list {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.owr-notif-item {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.3rem 0.75rem;
	padding: 0.65rem 0.9rem;
	border-radius: 4px 10px 10px 4px;
	font-size: 0.9rem;
}

.owr-notif-item--new {
	background: rgba(252, 134, 0, 0.14);
	border-left: 3px solid var(--owr-orange);
	font-weight: 600;
	color: var(--owr-navy);
}

.owr-notif-item--read {
	background: rgba(255, 255, 255, 0.35);
	border-left: 3px solid rgba(0, 52, 89, 0.14);
	color: var(--owr-ink-soft);
	opacity: 0.65;
}

.owr-notif-text {
	flex: 1;
	min-width: 60%;
}

.owr-notif-mention {
	color: var(--owr-navy);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--owr-orange);
	text-underline-offset: 2px;
}

.owr-notif-date {
	font-size: 0.78rem;
	white-space: nowrap;
}

.owr-notif-actions {
	flex-basis: 100%;
	display: flex;
	gap: 0.5rem;
	margin-top: 0.15rem;
}

.owr-notif-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.9rem;
	margin-top: 0.9rem;
}

.owr-notif-pagination-label {
	font-size: 0.82rem;
	color: var(--owr-ink-soft);
}

.owr-child-book-link {
	display: inline-block;
	margin-top: 0.75rem;
}

/* Collapsible "Dodaj dziecko" — hidden checkbox toggles both the
 * opener label's style and the field group, pure CSS. */

.owr-toggle-checkbox {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.owr-button--toggle {
	display: inline-block;
	width: auto;
	background: rgba(255, 255, 255, 0.55);
	color: var(--owr-navy);
	border: 1.5px solid rgba(0, 52, 89, 0.22);
	font-weight: 700;
	font-size: 0.82rem;
	padding: 0.4rem 0.85rem;
	border-radius: 8px;
	cursor: pointer;
	box-shadow: none;
	margin-top: 0.5rem;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.owr-toggle-checkbox:checked ~ .owr-button--toggle {
	background: var(--owr-navy);
	color: #fff;
	border-color: var(--owr-navy);
}

.owr-add-child-fields {
	display: none;
	margin-top: 1rem;
}

.owr-toggle-checkbox:checked ~ .owr-add-child-fields {
	display: block;
}

/* "Zmień hasło" reuses the exact same collapse mechanism as "Dodaj
 * dziecko" above — same .owr-toggle-checkbox, own field-group class. */

.owr-change-password-fields {
	display: none;
	margin-top: 1rem;
}

.owr-toggle-checkbox:checked ~ .owr-change-password-fields {
	display: block;
}

/* Password field + show/hide "eye" toggle. Unlike the rest of this
 * app's checkbox-driven widgets, swapping an input's type attribute
 * between password/text can't be done in CSS — the one genuinely
 * necessary bit of JS here, same exception as clipboard copy. */

.owr-password-field {
	position: relative;
	display: block;
}

.owr-password-field input {
	width: 100%;
	padding-right: 2.6rem;
}

.owr-password-toggle {
	position: absolute;
	top: 50%;
	right: 0.5rem;
	transform: translateY(-50%);
	background: none;
	border: none;
	padding: 0.2rem;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.15s ease;
}

.owr-password-toggle:hover {
	opacity: 0.9;
}

/* Toggled to "showing" state — a thin diagonal line through the eye
 * reads as "hide" without needing a second emoji glyph (font support
 * for a crossed-eye emoji is inconsistent across platforms). */

.owr-password-toggle--visible {
	position: absolute;
}

.owr-password-toggle--visible::after {
	content: "";
	position: absolute;
	left: 10%;
	right: 10%;
	top: 50%;
	height: 1.5px;
	background: var(--owr-ink-soft);
	transform: rotate(-45deg);
}

/* "+1" companion on adult class booking — the checkbox swaps the "+"
 * trigger for a name field, same reveal mechanism as "Dodaj dziecko"
 * above, just inline instead of block. */

.owr-plus-one-add {
	cursor: pointer;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--owr-navy);
}

.owr-toggle-checkbox:checked ~ .owr-plus-one-add {
	display: none;
}

.owr-plus-one-field {
	display: none;
	align-items: center;
	gap: 0.35rem;
}

.owr-toggle-checkbox:checked ~ .owr-plus-one-field {
	display: inline-flex;
}

.owr-plus-one-field input[type="text"] {
	font-size: 0.85rem;
	padding: 0.35rem 0.55rem;
	border: 1px solid #c3c4c7;
	border-radius: 6px;
	width: 150px;
}

.owr-plus-one-remove {
	cursor: pointer;
	color: var(--owr-ink-soft);
	font-size: 1.05rem;
	line-height: 1;
	padding: 0 0.15rem;
}

/* Simplified month-view booking calendar — same visual language as
 * the admin exclusion calendar (month boxes, 7-col grid), adapted to
 * the glass theme. One shared calendar per section (all kids' groups
 * combined, or the adult group) — clicking a day is a radio input
 * that reveals *that day's own* panel in place, via chained adjacent-
 * sibling selectors (radio + label + panel must sit in exactly that
 * order for each day, so :checked only ever reveals its own panel,
 * never a later day's). No JS, no batch "select many, then Zapisz" —
 * each day is booked/cancelled immediately from its own panel. */

.owr-calendar-hint {
	font-size: 0.85rem;
	color: var(--owr-ink-soft);
	margin: -0.5rem 0 1rem;
}

/* Swipeable one-month-at-a-time carousel — CSS scroll-snap, no JS
 * needed for the swipe/drag itself (that's native browser scrolling).
 * Cards are narrower than the container so the next/previous month
 * peeks in from both edges as a "there's more here" affordance; the
 * dots below (.owr-cal-dots) are the click/tap alternative to
 * swiping, and the only part of this that needs the small JS wired
 * up near the bottom of the page (click-to-jump + active dot follows
 * scroll position via IntersectionObserver). */

.owr-cal-months {
	display: flex;
	gap: 0.9rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 1.25rem;
	padding-inline: 1.25rem;
	margin: 1rem -1.25rem 0.9rem;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.owr-cal-months::-webkit-scrollbar {
	display: none;
}

.owr-cal-months:has(> :only-child) {
	padding-inline: 0;
	margin-inline: 0;
}

.owr-cal-dots {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin: -0.2rem 0 1.25rem;
}

.owr-cal-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(0, 52, 89, 0.2);
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.owr-cal-dot:hover {
	background: rgba(0, 52, 89, 0.35);
}

.owr-cal-dot.is-active {
	background: var(--owr-navy);
	transform: scale(1.25);
}

/* Prev/next arrows flanking the carousel — dots work fine for touch,
 * but a mouse user on desktop/tablet has no swipe gesture at all, so
 * the arrows are the only click target for "next month" there. Bigger
 * and bolder from tablet width up (min-width: 641px) since that's
 * exactly the audience that can't swipe; still present but smaller on
 * phones, where they're a bonus next to the primary swipe gesture. */
.owr-cal-carousel-wrap {
	position: relative;
}

.owr-cal-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 50%;
	border: none;
	background: var(--owr-navy);
	color: #fff;
	font-size: 1.3rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 52, 89, 0.35);
	transition: background-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.owr-cal-arrow:hover {
	background: var(--owr-orange);
}

.owr-cal-arrow:disabled {
	opacity: 0.3;
	cursor: default;
	pointer-events: none;
}

.owr-cal-arrow--prev {
	left: -0.35rem;
}

.owr-cal-arrow--next {
	right: -0.35rem;
}

@media (min-width: 641px) {
	.owr-cal-arrow {
		width: 2.6rem;
		height: 2.6rem;
		font-size: 1.7rem;
		box-shadow: 0 6px 18px rgba(0, 52, 89, 0.42);
	}

	.owr-cal-arrow--prev {
		left: -1.2rem;
	}

	.owr-cal-arrow--next {
		right: -1.2rem;
	}
}

.owr-group-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1rem;
}

.owr-group-filter-toggle {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.owr-group-filter-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--owr-navy);
	background: rgba(255, 255, 255, 0.55);
	border: 1.5px solid var(--owr-pill-color, var(--owr-navy));
	cursor: pointer;
	transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.owr-group-filter-pill::before {
	content: "";
	flex-shrink: 0;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--owr-pill-color, var(--owr-navy));
}

.owr-group-filter-toggle:checked + .owr-group-filter-pill {
	background: var(--owr-pill-color, var(--owr-navy));
	color: #fff;
}

.owr-group-filter-toggle:checked + .owr-group-filter-pill::before {
	background: #fff;
}

.owr-group-filter-toggle:not(:checked) + .owr-group-filter-pill {
	opacity: 0.5;
}

.owr-cal-month {
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid rgba(0, 52, 89, 0.14);
	border-radius: 14px;
	padding: 0.9rem;
	flex: 0 0 auto;
	width: 84%;
	max-width: 300px;
	scroll-snap-align: center;
}

.owr-cal-months:has(> :only-child) .owr-cal-month {
	width: 100%;
	max-width: 320px;
	margin-inline: auto;
}

.owr-cal-month-title {
	margin: 0 0 0.65rem;
	font-size: 0.88rem;
	font-weight: 700;
	text-align: center;
	color: var(--owr-navy);
}

.owr-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.owr-cal-dow {
	font-size: 0.62rem;
	font-weight: 700;
	text-align: center;
	color: var(--owr-ink-soft);
	padding-bottom: 0.3rem;
	text-transform: uppercase;
}

.owr-date-radio {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.owr-cal-cell {
	position: relative;
	aspect-ratio: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	font-size: 0.76rem;
	border-radius: 8px;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	font-family: inherit;
	color: var(--owr-navy);
}

.owr-cal-cell--empty {
	visibility: hidden;
}

.owr-cal-cell--muted {
	color: rgba(0, 52, 89, 0.25);
}

.owr-cal-cell--future {
	color: rgba(0, 52, 89, 0.4);
	font-weight: 600;
}

.owr-cal-cell--bookable {
	cursor: pointer;
	font-weight: 700;
	border: 1.5px solid rgba(0, 52, 89, 0.28);
	transition: background-color 0.12s ease, color 0.12s ease;
}

.owr-cal-cell--bookable:hover {
	background: rgba(252, 134, 0, 0.12);
}

.owr-cal-cell--full {
	cursor: pointer;
	font-weight: 600;
	border: 1.5px solid rgba(0, 52, 89, 0.14);
	color: rgba(0, 52, 89, 0.5);
	background: rgba(0, 52, 89, 0.04);
	transition: background-color 0.12s ease;
}

.owr-cal-cell--full:hover {
	background: rgba(0, 52, 89, 0.08);
}

/* The day number itself carries *your* status as a small circular
 * badge — filled = accepted, striped = pending, hollow ring =
 * waitlisted, plain text = no personal stake. Which groups have
 * anything on that day at all is a separate signal (the dot row
 * below), so a badge never has to "pick" one group's color and hide
 * another's, the way a single whole-cell fill used to. */

.owr-cal-badge {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	line-height: 1;
}

.owr-cal-badge--accepted {
	background: var(--owr-badge-color, var(--owr-navy));
	color: #fff;
}

.owr-cal-badge--pending {
	background: repeating-linear-gradient(
		45deg,
		var(--owr-badge-color, var(--owr-navy)),
		var(--owr-badge-color, var(--owr-navy)) 3px,
		rgba(255, 255, 255, 0.45) 3px,
		rgba(255, 255, 255, 0.45) 6px
	);
	color: #fff;
}

.owr-cal-badge--waitlisted {
	border: 2px solid var(--owr-orange);
	color: var(--owr-navy);
}

.owr-cal-dots {
	display: flex;
	gap: 3px;
}

.owr-cal-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
}

.owr-date-radio:checked + .owr-cal-cell {
	outline: 2px solid var(--owr-orange);
	outline-offset: 1px;
}

.owr-date-radio:checked + .owr-cal-cell + .owr-date-panel {
	display: block;
}

.owr-date-panel {
	display: none;
	grid-column: 1 / -1;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid rgba(0, 52, 89, 0.16);
	border-radius: 10px;
	padding: 0.75rem 0.9rem 0.9rem;
	margin: 2px 0 4px;
	font-size: 0.85rem;
	text-align: left;
	cursor: default;
}

.owr-date-panel-close {
	display: block;
	text-align: right;
	font-size: 0.78rem;
	color: var(--owr-ink-soft);
	cursor: pointer;
	margin-bottom: 0.3rem;
}

.owr-date-panel-close:hover {
	color: var(--owr-navy);
}

.owr-date-session + .owr-date-session {
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(0, 52, 89, 0.12);
}

.owr-date-session h5 {
	margin: 0 0 0.4rem;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--owr-navy);
}

.owr-date-status {
	margin: 0 0 0.4rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.owr-date-picker-prompt {
	margin: 0 0 0.4rem;
	font-weight: 600;
}

.owr-child-check {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0 0.9rem 0.4rem 0;
	cursor: pointer;
	font-size: 0.85rem;
}

.owr-child-check input {
	accent-color: var(--owr-orange);
}

.owr-mismatch {
	display: none;
	background: rgba(252, 134, 0, 0.14);
	border-left: 3px solid var(--owr-orange);
	padding: 0.5rem 0.7rem;
	border-radius: 4px 8px 8px 4px;
	margin: 0.4rem 0;
	font-size: 0.8rem;
}

.owr-date-picker-submit {
	margin-top: 0.3rem;
}

.owr-date-picker:not(:has(input:checked)) .owr-date-picker-submit {
	opacity: 0.5;
	pointer-events: none;
}

.owr-cal-cancel-x {
	display: none;
	position: absolute;
	top: -6px;
	right: -6px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #d63638;
	color: #fff;
	border: 2px solid #fff;
	font-size: 0.72rem;
	line-height: 1;
	align-items: center;
	justify-content: center;
	padding: 0;
	z-index: 2;
	pointer-events: none;
}

/* "Odwołaj kilka" mode toggle — pure CSS: a hidden checkbox reveals
 * the × on every booked cell and sets them jiggling, iOS-edit-mode
 * style, via :has() on the shared wrapper. */

.owr-cal-cancel-toggle {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.owr-cal-cancel-label {
	margin: 0;
}

.owr-cal-cancel-toggle:checked ~ .owr-cal-cancel-label {
	background: var(--owr-navy);
	color: #fff;
	border-color: var(--owr-navy);
}

.owr-cancel-zone:has(.owr-cal-cancel-toggle:checked) .owr-cal-cancel-x {
	display: inline-flex;
}

.owr-cancel-zone:has(.owr-cal-cancel-toggle:checked) .owr-cal-cell:has(.owr-cal-cancel-x) {
	animation: owr-shake 0.32s ease-in-out infinite;
}

@keyframes owr-shake {
	0%, 100% { transform: rotate(-3deg); }
	50% { transform: rotate(3deg); }
}

/* "Moje Rezerwacje" — a flat list (not a calendar), so rows just
 * reuse the date-panel accordion trick (radio + chained adjacent
 * siblings) for click-to-expand, and the "Odwołaj" toggle + × trick
 * for cancel, both already established above — no shake here, a data
 * list should stay calm even in edit mode. */

.owr-res-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 1rem;
}

.owr-reservations-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.owr-res-row-flex {
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid rgba(0, 52, 89, 0.14);
	border-radius: 10px;
	transition: background-color 0.12s ease;
}

.owr-res-row-flex:hover {
	background: rgba(255, 255, 255, 0.75);
}

.owr-date-radio:checked + .owr-res-row-flex {
	background: rgba(255, 255, 255, 0.85);
	border-color: var(--owr-orange);
}

.owr-date-radio:checked + .owr-res-row-flex + .owr-date-panel {
	display: block;
}

.owr-res-row-main {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	padding: 0.75rem 0.6rem 0.75rem 0.9rem;
	cursor: pointer;
	font-size: 0.88rem;
}

.owr-res-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}

/* who+group and when+status are each kept as one unbreakable unit —
 * with all five pieces as individual flex-wrap items, a short "who"
 * like "Ty" left enough room on the first line for "when" to squeeze
 * in next to it while "status" alone got orphaned onto its own line.
 * Grouping means the row can only ever wrap between the two halves,
 * never in the middle of either one. */

.owr-res-row-title {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: nowrap;
	gap: 0.5rem;
}

.owr-res-who {
	font-weight: 700;
	color: var(--owr-navy);
}

.owr-res-group {
	color: var(--owr-ink-soft);
}

.owr-res-row-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	flex: 1 1 auto;
	min-width: 0;
	gap: 0.25rem 0.75rem;
}

.owr-res-when {
	color: var(--owr-navy);
	font-weight: 600;
	white-space: nowrap;
}

.owr-res-status {
	font-size: 0.78rem;
	font-weight: 600;
	white-space: nowrap;
}

.owr-res-status--pending {
	color: var(--owr-orange);
}

.owr-res-status--accepted {
	color: #0f7a5e;
}

.owr-res-cancel-widget {
	display: none;
	flex-shrink: 0;
	margin-right: 0.7rem;
}

.owr-cancel-zone:has(.owr-cal-cancel-toggle:checked) .owr-res-cancel-widget {
	display: inline-flex;
	align-items: center;
}

.owr-res-cancel-x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #d63638;
	color: #fff;
	border: 2px solid #fff;
	font-size: 0.85rem;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.owr-res-panel {
	margin-top: -2px;
}

/* Generic "na pewno?" widget — replaces native confirm(), which
 * turned out to be unreliable (silently suppressed in some browsers/
 * embedded webviews, which is what made every cancel button look
 * broken even though the underlying form/booking_id wiring was
 * correct). One hidden checkbox arms the widget; the trigger and the
 * Tak/Nie box are siblings toggled by it. Scoped to its own
 * .owr-confirm-widget wrapper so unrelated widgets never see each
 * other's checked state. */

.owr-confirm-widget {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.owr-confirm-toggle {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.owr-confirm-box {
	display: none;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.owr-confirm-toggle:checked ~ .owr-confirm-trigger {
	display: none;
}

.owr-confirm-toggle:checked ~ .owr-confirm-box {
	display: inline-flex;
}

.owr-confirm-text {
	font-size: 0.85rem;
	color: var(--owr-navy);
	font-weight: 600;
}

.owr-confirm-yes {
	background: #d63638;
	box-shadow: 0 4px 12px rgba(214, 54, 56, 0.32);
}

.owr-confirm-yes:hover {
	background: #b52d2f;
}

/* "O co chodzi?" info bubble — same hidden-checkbox mechanism as the
 * confirm widget, plus a full-viewport transparent overlay so a click
 * anywhere outside the bubble closes it too (not just its own
 * "Rozumiem"). The overlay sits behind the bubble in the stacking
 * order (lower z-index) so clicks inside the bubble never reach it. */

.owr-info-widget {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
}

.owr-info-toggle {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.owr-info-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 40;
	cursor: default;
}

.owr-info-toggle:checked ~ .owr-info-overlay {
	display: block;
}

.owr-info-trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--owr-ink-soft);
	cursor: pointer;
	white-space: nowrap;
}

.owr-info-trigger:hover {
	color: var(--owr-navy);
}

.owr-info-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.05rem;
	height: 1.05rem;
	border-radius: 50%;
	background: var(--owr-navy);
	color: #fff;
	font-size: 0.68rem;
	font-style: italic;
	font-family: Georgia, serif;
	flex-shrink: 0;
}

.owr-info-bubble {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 0.5rem;
	z-index: 41;
	width: 210px;
	max-width: 70vw;
	background: #fff;
	color: var(--owr-navy);
	border-radius: 10px;
	padding: 0.75rem 0.85rem;
	box-shadow: 0 12px 28px rgba(1, 38, 64, 0.24);
	font-size: 0.82rem;
	line-height: 1.4;
	text-align: left;
}

.owr-info-toggle:checked ~ .owr-info-bubble {
	display: block;
}

.owr-info-bubble-text {
	display: block;
	margin-bottom: 0.5rem;
}

.owr-info-close {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--owr-orange);
	cursor: pointer;
}

.owr-info-close:hover {
	text-decoration: underline;
}

.owr-res-detail-list {
	margin-top: 0.75rem;
}

.owr-inline-form {
	margin: 0;
	display: inline-block;
}

.owr-mini-button {
	background: var(--owr-orange);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 0.85rem;
	font-weight: 600;
	padding: 0.4rem 0.8rem;
	cursor: pointer;
	white-space: nowrap;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.owr-mini-button:hover {
	box-shadow: 0 4px 12px rgba(252, 134, 0, 0.35);
	transform: translateY(-1px);
}

.owr-mini-button--ghost {
	background: rgba(255, 255, 255, 0.5);
	color: var(--owr-ink-soft);
	border: 1px solid rgba(0, 52, 89, 0.18);
}

.owr-mini-button--ghost:hover {
	background: rgba(255, 255, 255, 0.8);
	box-shadow: none;
}

.owr-waitlist-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	background: rgba(251, 239, 224, 0.75);
	border-left: 3px solid var(--owr-orange);
	padding: 0.7rem 1rem;
	margin-bottom: 0.6rem;
	font-size: 0.92rem;
	border-radius: 4px 12px 12px 4px;
}

.owr-hidden-form {
	display: none;
}

.owr-logout-line {
	text-align: center;
	margin-top: 3rem;
}

.owr-danger-warning {
	font-size: 0.85rem;
	color: #b52d2f;
	line-height: 1.5;
	max-width: 46em;
	margin: 0 0 0.85rem;
}

.owr-danger-zone {
	position: relative;
	display: inline-block;
}

.owr-link--danger {
	color: #b52d2f;
}

.owr-delete-confirm-box {
	margin: 0.75rem auto 0;
	max-width: 320px;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid rgba(214, 54, 56, 0.3);
	border-radius: 10px;
	padding: 0.9rem 1rem;
	box-shadow: 0 8px 24px rgba(1, 38, 64, 0.2);
}

.owr-delete-confirm-box .owr-confirm-text {
	text-align: center;
}

/* "Nadchodzące wydarzenia" and "Kontakt" — extra glass cards stacked
 * below the main account card, same family (owr-account) but tighter
 * top margin since the card above already spaces itself. */

.owr-account.owr-account--secondary {
	margin-top: 0;
}

.owr-event-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.owr-event-card {
	display: flex;
	gap: 1rem;
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid rgba(0, 52, 89, 0.14);
	border-radius: 12px;
	padding: 0.9rem 1rem;
}

.owr-event-date {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--owr-navy);
	color: #fff;
	border-radius: 10px;
	line-height: 1.1;
}

.owr-event-day {
	font-size: 1.2rem;
	font-weight: 700;
}

.owr-event-month {
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.owr-event-body strong {
	display: block;
	color: var(--owr-navy);
	font-size: 1rem;
}

.owr-event-desc {
	margin: 0.3rem 0 0;
	font-size: 0.88rem;
	color: var(--owr-ink-soft);
}

.owr-event-meta {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--owr-orange);
}

.owr-event-signup {
	margin-top: 0.6rem;
	padding-top: 0.6rem;
	border-top: 1px dashed rgba(0, 52, 89, 0.14);
}

/* Click the title to expand the full event card — same checkbox-reveal
 * idiom as "Dodaj dziecko"/"Zmień hasło" (.owr-toggle-checkbox), just
 * scoped per event instead of per page section. */

.owr-event-title-toggle {
	display: block;
	cursor: pointer;
}

.owr-event-toggle-hint {
	display: inline-block;
	margin-top: 0.15rem;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--owr-ink-soft);
}

.owr-event-toggle-arrow {
	display: inline-block;
	transition: transform 0.15s ease;
}

.owr-toggle-checkbox:checked ~ .owr-event-title-toggle .owr-event-toggle-arrow {
	transform: rotate(180deg);
}

.owr-event-detail {
	display: none;
	margin-top: 0.5rem;
}

.owr-toggle-checkbox:checked ~ .owr-event-detail {
	display: block;
}

.owr-event-detail-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.5rem;
	margin: 0.5rem 0 0;
}

.owr-event-detail-list dt {
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--owr-ink-soft);
	margin-bottom: 0.1rem;
}

.owr-event-detail-list dd {
	margin: 0;
	font-size: 0.88rem;
	color: var(--owr-navy);
	font-weight: 600;
}

.owr-course-list {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.owr-course-card {
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid rgba(0, 52, 89, 0.14);
	border-radius: 12px;
	padding: 0.9rem 1rem;
}

.owr-course-body strong {
	display: block;
	color: var(--owr-navy);
	font-size: 1rem;
}

.owr-course-meta {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--owr-orange);
}

.owr-course-body .owr-date-status {
	margin-top: 0.6rem;
}

.owr-course-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-top: 0.6rem;
}

.owr-course-actions .owr-inline-form {
	margin: 0;
}

.owr-event-signup .owr-date-picker {
	margin: 0;
}

.owr-event-registered {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
	margin-bottom: 0.5rem;
}

.owr-event-registered-row {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.85rem;
	color: var(--owr-navy);
	font-weight: 600;
}

.owr-contact-panel {
	text-align: center;
}

.owr-logout-button {
	display: inline-block;
	margin-top: 1.25rem;
	padding: 0.6rem 1.6rem;
	background: rgba(255, 255, 255, 0.5);
	color: var(--owr-navy);
	border: 1px solid rgba(0, 52, 89, 0.18);
	border-radius: 12px;
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.owr-logout-button:hover {
	background: rgba(255, 255, 255, 0.85);
}

.owr-contact-logo {
	display: block;
	margin: 0 auto 1rem;
	border-radius: 16px;
}

.owr-contact-text {
	color: var(--owr-ink-soft);
	margin: 0 0 0.5rem;
}

.owr-contact-details {
	font-size: 1.05rem;
	color: var(--owr-navy);
	line-height: 1.8;
}

/* Mobile-only bottom tab bar — a classic native-app layout (icons +
 * labels fixed to the bottom of the screen), on Kermit's request after
 * seeing a reference app. Hidden by default; the media query below
 * turns it on for narrow screens only, where the top tabs row is
 * hidden in trade (same 4 destinations, no point showing both). */
.owr-bottom-nav {
	display: none;
}

@media (max-width: 480px) {
	.owr-row {
		flex-direction: column;
		gap: 0;
	}
	.owr-tabs-bar {
		flex-wrap: nowrap;
		gap: 0.5rem;
	}
	.owr-tabs {
		gap: 0.6rem;
		flex-shrink: 1;
		min-width: 0;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.owr-tab {
		font-size: 0.8rem;
		padding: 0.25rem 0.05rem 0.8rem;
	}
	.owr-tabs-bar .owr-quick-signup-trigger {
		flex-shrink: 0;
		padding: 0.4rem 0.65rem;
		font-size: 0.72rem;
		gap: 0.25rem;
		margin-bottom: 0;
	}
	.owr-tabs-bar .owr-quick-signup-icon {
		width: 0.9em;
		height: 0.9em;
	}
	/* The bottom nav below covers the same 4 destinations, so the text
	   tabs row would just be duplicate navigation on a screen this
	   narrow — scoped to .owr-account specifically, since .owr-tabs is
	   also (in principle) a shared class name, not unique to this page. */
	.owr-account .owr-tabs {
		display: none;
	}
	.owr-account .owr-tabs-bar {
		justify-content: center;
		border-bottom: none;
		margin-bottom: 1.5rem;
	}
	/* Room at the bottom of the page so the fixed nav never overlaps
	   the last real content (the Kontakt card, the footer) — scoped to
	   account.php's body via :has(), the same trick used to flex-center
	   .owr-auth's body, so login/register/admin pages are untouched. */
	body:has(> .owr-account) {
		padding-bottom: calc(4.6rem + env(safe-area-inset-bottom));
	}
	.owr-bottom-nav {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 50;
		justify-content: space-around;
		background: rgba(1, 38, 64, 0.94);
		-webkit-backdrop-filter: blur(16px);
		backdrop-filter: blur(16px);
		border-top: 1px solid rgba(255, 255, 255, 0.14);
		padding: 0.55rem 0.25rem calc(0.5rem + env(safe-area-inset-bottom));
	}
	.owr-bottom-nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.2rem;
		flex: 1;
		color: rgba(255, 255, 255, 0.6);
		font-size: 0.62rem;
		font-weight: 600;
		cursor: pointer;
		transition: color 0.15s ease;
	}
	.owr-bottom-nav-icon {
		width: 1.35rem;
		height: 1.35rem;
	}
	.owr-bottom-nav-avatar {
		width: 1.35rem;
		height: 1.35rem;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(255, 255, 255, 0.16);
		color: #fff;
		font-size: 0.7rem;
		font-weight: 700;
		transition: background-color 0.15s ease;
	}
	body:has(#owr-tab-children:checked) .owr-bottom-nav-item[for="owr-tab-children"],
	body:has(#owr-tab-adults:checked) .owr-bottom-nav-item[for="owr-tab-adults"],
	body:has(#owr-tab-reservations:checked) .owr-bottom-nav-item[for="owr-tab-reservations"],
	body:has(#owr-tab-profile:checked) .owr-bottom-nav-item[for="owr-tab-profile"] {
		color: #fff;
	}
	body:has(#owr-tab-profile:checked) .owr-bottom-nav-item[for="owr-tab-profile"] .owr-bottom-nav-avatar {
		background: var(--owr-orange);
	}
	.owr-waitlist-card {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.4rem;
	}
	.owr-cal-month {
		width: 80%;
	}
	.owr-group-filter-pill {
		font-size: 0.72rem;
		padding: 0.28rem 0.6rem;
		gap: 0.3rem;
	}
	.owr-group-filter-pill::before {
		width: 0.5rem;
		height: 0.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.owr-button,
	.owr-mini-button,
	.owr-tab,
	.owr-button--toggle {
		transition: none;
	}
	.owr-cancel-zone:has(.owr-cal-cancel-toggle:checked) .owr-cal-cell:has(.owr-cal-cancel-x) {
		animation: none;
	}
}

.owr-footer {
	position: relative;
	z-index: 1;
	text-align: center;
	margin: 0.75rem 0 1.5rem;
	font-size: 0.72rem;
	color: rgba(255, 255, 255, 0.55);
}

/* Add-to-home-screen banner (appended to <body> by public/js/pwa.js,
 * sits outside .owr-auth/.owr-account, so literal colors here rather
 * than backdrop-filter which would pick up the whole page behind it. */

.owr-pwa-banner {
	position: fixed;
	left: 1rem;
	right: 1rem;
	bottom: 1rem;
	z-index: 9999;
	background: #071B4D;
	color: #fff;
	border-radius: 14px;
	padding: 0.9rem 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.9rem;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.owr-pwa-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
}

.owr-pwa-install {
	background: #F9ED00;
	color: #071B4D;
	border: none;
	border-radius: 8px;
	padding: 0.4rem 0.8rem;
	font-weight: 600;
	font-size: 0.85rem;
	cursor: pointer;
}

.owr-pwa-close {
	background: transparent;
	border: none;
	color: #fff;
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	padding: 0.2rem 0.4rem;
	opacity: 0.8;
}

.owr-pwa-close:hover {
	opacity: 1;
}

@media (max-width: 480px) {
	.owr-pwa-banner {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---- Szybki zapis (quick-signup wizard) ---- */

.owr-quick-signup-trigger {
	display: block;
	width: 100%;
	background: var(--owr-orange);
	color: #fff;
	font-family: var(--owr-font-body);
	font-weight: 700;
	font-size: 1rem;
	padding: 0.9rem 1.25rem;
	border: none;
	border-radius: 14px;
	cursor: pointer;
	margin-bottom: 1.25rem;
	box-shadow: 0 6px 18px rgba(252, 134, 0, 0.32);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.owr-quick-signup-trigger:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 24px rgba(252, 134, 0, 0.42);
}

/* Living in the tabs bar now (pulled out of the Kalendarz panel so
 * it's reachable from every tab, not just that one) — a compact
 * pill instead of the full-width block it used to be. Two-class
 * selector so this wins over the base rule regardless of where either
 * rule sits in the file. */
.owr-tabs-bar .owr-quick-signup-trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	width: auto;
	padding: 0.55rem 1.1rem;
	margin-bottom: 0.6rem;
	font-size: 0.9rem;
	white-space: nowrap;
}

.owr-quick-signup-icon {
	width: 1.05em;
	height: 1.05em;
	flex-shrink: 0;
	color: #e63946;
}

body.owr-qs-open {
	overflow: hidden;
}

.owr-quick-signup {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.owr-quick-signup[hidden] {
	display: none;
}

.owr-quick-signup-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(1, 38, 64, 0.55);
	backdrop-filter: blur(2px);
}

.owr-quick-signup-panel {
	position: relative;
	background: #fff;
	border-radius: 20px;
	padding: 1.75rem 1.5rem 1.25rem;
	width: 100%;
	max-width: 440px;
	max-height: 85vh;
	display: flex;
	flex-direction: column;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.owr-quick-signup-close {
	position: absolute;
	top: 0.75rem;
	right: 0.9rem;
	background: transparent;
	border: none;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--owr-ink-soft, #5b6b77);
	cursor: pointer;
	padding: 0.25rem;
}

.owr-quick-signup-dots {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.owr-qs-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(0, 52, 89, 0.18);
}

.owr-qs-dot.is-active {
	background: var(--owr-orange);
}

.owr-quick-signup-body {
	overflow-y: auto;
	flex: 1;
	min-height: 0;
	padding-right: 0.25rem;
}

.owr-qs-title {
	font-family: var(--owr-font-display);
	color: var(--owr-navy);
	font-size: 1.25rem;
	margin: 0 0 0.35rem;
}

.owr-qs-hint {
	color: var(--owr-ink-soft, #5b6b77);
	font-size: 0.88rem;
	margin: 0 0 1rem;
}

.owr-quick-signup-nav {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 1.1rem;
	padding-top: 0.9rem;
	border-top: 1px solid #eef2f5;
}

.owr-quick-signup-nav #owr-qs-next {
	margin-left: auto;
	background: var(--owr-orange);
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 0.6rem 1.3rem;
	font-weight: 700;
	cursor: pointer;
}

.owr-quick-signup-nav #owr-qs-back {
	background: transparent;
	border: 1px solid #d7e0e7;
	color: var(--owr-navy);
	border-radius: 10px;
	padding: 0.6rem 1.1rem;
	cursor: pointer;
}

/* Step 1 — who */

.owr-qs-people {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.owr-qs-person {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	background: #f7f9fa;
	border: 2px solid transparent;
	border-radius: 14px;
	padding: 0.85rem 0.5rem;
	cursor: pointer;
	font-family: var(--owr-font-body);
	font-size: 0.85rem;
	color: var(--owr-navy);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.owr-qs-person.is-selected {
	border-color: var(--owr-orange);
	background: rgba(252, 134, 0, 0.08);
}

.owr-qs-person-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--owr-navy);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1.05rem;
}

.owr-qs-person.is-selected .owr-qs-person-avatar {
	background: var(--owr-orange);
}

.owr-qs-person-label {
	font-weight: 600;
	text-align: center;
	word-break: break-word;
}

.owr-link-dark {
	color: var(--owr-orange);
	font-weight: 600;
}

/* Step 2 — what */

.owr-qs-person-block {
	margin-bottom: 1.25rem;
}

.owr-qs-person-block.is-skipped {
	opacity: 0.6;
}

.owr-qs-person-heading {
	font-family: var(--owr-font-display);
	color: var(--owr-navy);
	font-size: 1.05rem;
	margin: 0 0 0.5rem;
}

.owr-qs-link-btn {
	background: none;
	border: none;
	color: var(--owr-orange);
	font-weight: 600;
	cursor: pointer;
	padding: 0;
	font-size: inherit;
	text-decoration: underline;
}

.owr-qs-group-picker {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.owr-qs-group-option {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	background: #f7f9fa;
	border: 2px solid transparent;
	border-radius: 10px;
	padding: 0.6rem 0.8rem;
	cursor: pointer;
	font-size: 0.9rem;
	color: var(--owr-navy);
}

.owr-qs-group-option.is-selected {
	border-color: var(--owr-orange);
	background: rgba(252, 134, 0, 0.08);
	font-weight: 600;
}

.owr-qs-group-option input {
	accent-color: var(--owr-orange);
}

/* Step 3 — when */

.owr-qs-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.owr-qs-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: #f7f9fa;
	border: 2px solid transparent;
	border-radius: 999px;
	padding: 0.5rem 0.9rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--owr-navy);
	cursor: pointer;
}

.owr-qs-pill.is-full {
	border-color: rgba(252, 134, 0, 0.5);
	background: rgba(252, 134, 0, 0.06);
}

.owr-qs-pill.is-selected {
	border-color: var(--owr-orange);
	background: var(--owr-orange);
	color: #fff;
}

.owr-qs-pill-tag {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	opacity: 0.85;
}

/* Review */

.owr-qs-review-person {
	margin-bottom: 1rem;
}

.owr-qs-review-person ul {
	margin: 0.35rem 0 0;
	padding-left: 1.1rem;
	font-size: 0.88rem;
}

/* ---- Short-viewport auth card (login/register/forgot/reset) ----
 * Placed at the end of the stylesheet deliberately: these rules match
 * base selectors like .owr-field input[type="email"] at equal
 * specificity, so with a media query earlier in the file the
 * unconditional base rule would win on source order alone. Living
 * here, after every rule they touch, means they win purely by being
 * last — no specificity fights needed.
 *
 * The problem this solves: on a short-but-wide window (a non-
 * maximized laptop window, or one with several rows of browser
 * chrome — width is fine, height isn't), the full-size auth card
 * plus footer doesn't fit and the page scrolls. .owr-account is
 * deliberately left alone here — that's a long dashboard with a
 * calendar and several sections, scrolling there is normal, not a
 * bug. min-width on both tiers keeps this from also firing on tall
 * phone portraits, which already have their own tuned mobile spacing
 * above and don't need it stacked on top. */
@media (max-height: 800px) and (min-width: 481px) {
	.owr-auth {
		/* margin-top: 0, not a small value — a nonzero top margin on
		   body's first child collapses through body (no padding/border
		   there to block it), silently adding that many px to the
		   document's total scrollable height beyond what's visible. */
		margin: 0 auto 0.5rem;
		padding: 1.1rem 2rem 1.35rem;
	}

	.owr-logo {
		width: 110px;
		margin-bottom: 0.4rem;
	}

	.owr-hero {
		font-size: clamp(1.6rem, 4vw, 2.1rem);
		margin-bottom: 0.3rem;
	}

	.owr-tagline {
		margin-bottom: 0.85rem;
		font-size: 0.95rem;
	}

	.owr-switch {
		margin-bottom: 0.7rem;
	}

	.owr-field {
		margin-bottom: 0.6rem;
	}

	.owr-checkbox {
		margin-bottom: 0.5rem;
	}

	.owr-forgot {
		margin: -0.15rem 0 0.7rem;
	}

	.owr-button {
		margin-top: 0.2rem;
		padding: 0.65rem 1.5rem;
	}
}

@media (max-height: 800px) {
	.owr-footer {
		margin: 0.25rem 0 0.4rem;
	}
}

/* A second, tighter tier for genuinely short windows — the 800px
 * tier above isn't quite enough on its own once you're down around
 * 650-700px. */
@media (max-height: 700px) and (min-width: 481px) {
	.owr-auth {
		margin-bottom: 0.25rem;
		padding: 0.7rem 1.75rem 0.85rem;
	}

	.owr-logo {
		width: 80px;
		margin-bottom: 0.25rem;
	}

	.owr-hero {
		font-size: clamp(1.3rem, 3.5vw, 1.6rem);
		margin-bottom: 0.15rem;
	}

	.owr-tagline {
		margin-bottom: 0.4rem;
		font-size: 0.82rem;
	}

	.owr-switch {
		margin-bottom: 0.4rem;
	}

	.owr-field {
		margin-bottom: 0.4rem;
	}

	.owr-field input[type="text"],
	.owr-field input[type="email"],
	.owr-field input[type="password"] {
		padding: 0.4rem 0.85rem;
	}

	.owr-button {
		padding: 0.5rem 1.5rem;
	}

	.owr-footer {
		margin: 0.15rem 0 0.3rem;
	}
}

/* Tekstowy wordmark klubu w miejscu logo OnWheels (multi-tenant MyClass).
   Klub wgra własne logo w przyszłej konfiguracji; do tego czasu czytelna
   nazwa zamiast cudzego znaku graficznego. */
.owr-logo--text {
	font-family: var(--owr-font-display, Georgia, serif);
	font-size: 1.8rem;
	font-weight: 700;
	color: #fff;
	text-align: center;
	letter-spacing: -0.01em;
	margin: 0 auto 0.4rem;
	line-height: 1.15;
}