/* ═══════════════════════════════════════════════════════════
   Cykloshop TestDays – Frontend CSS
   Dark theme, responsive, modern
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
	--color-primary: #c3161a;
	--color-bg: #1a1a1a;
	--color-bg-light: #222;
	--color-text: #ffffff;
	--color-text-secondary: rgba(255,255,255,0.6);
	--color-border: rgba(255,255,255,0.1);
	--radius: 12px;
	--radius-sm: 8px;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
	font-family: 'Inter', -apple-system, sans-serif;
	color: var(--color-text);
	background: var(--color-bg) url('../assets/BG_cykloshop.jpg') no-repeat center top;
	background-size: cover;
	background-attachment: fixed;
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
}

.site-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ─── HEADER ────────────────────────────────────────── */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: rgba(26,26,26,0);
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);
	border-bottom: 1px solid transparent;
	transition: background 0.4s, backdrop-filter 0.4s, border-color 0.4s;
}

.site-header.scrolled {
	background: rgba(26,26,26,0.9);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom-color: var(--color-border);
}

.site-header .site-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 64px;
}

.site-logo img { height: 35px; }

.site-nav-link svg { margin-right: 6px; }

.site-nav {
	display: flex;
	gap: 8px;
}

.site-nav-link {
	color: var(--color-text-secondary);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	padding: 8px 16px;
	border-radius: var(--radius-sm);
	transition: color 0.2s;
	position: relative;
}

.site-nav-link::after {
	content: '';
	position: absolute;
	bottom: 4px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--color-primary);
	transition: width 0.3s ease;
}

.site-nav-link:hover {
	color: var(--color-text);
}

.site-nav-link:hover::after {
	width: 100%;
}

/* E-shop highlight */
.site-nav-link--shop {
	background: var(--color-primary);
	color: #fff !important;
	border-radius: 34px;
	padding: 8px 24px 8px 18px;
	gap: 6px;
}

.site-nav-link--home {
	padding: 8px 10px;
}

.site-nav-link--home::after {
	display: none;
}

.site-nav-link--shop::after {
	display: none;
}

.site-nav-link--shop:hover {
	background: #a01216;
}

.site-nav-link--shop svg {
	stroke: #fff;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.site-nav-link svg {
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: -2px;
}

.site-burger {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
}

.site-burger span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--color-text);
	border-radius: 2px;
	transition: all 0.2s;
}

/* ─── MAIN ──────────────────────────────────────────── */

.site-main {
	padding-top: 64px;
}

/* ─── CAROUSEL ──────────────────────────────────────── */

.carousel {
	position: relative;
	overflow: hidden;
}

.carousel-track {
	display: flex;
	transition: transform 0.6s ease;
}

.carousel-slide {
	min-width: 100%;
	min-height: 85vh;
	position: relative;
	display: flex;
	align-items: center;
}

.carousel-dots {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	z-index: 10;
}

.carousel-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,0.4);
	background: transparent;
	cursor: pointer;
	transition: all 0.2s;
}

.carousel-dot.active {
	background: var(--color-primary);
	border-color: var(--color-primary);
	width: 28px;
	border-radius: 5px;
}

/* ─── HERO BANNER (HTML carousel slide) ─────────────── */

.hero-banner {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
	min-height: 85vh;
}

.hero-scott-logo {
	height: 80px;
	filter: brightness(0) invert(1);
	margin-bottom: -4px;
}

.hero-title {
	font-size: clamp(56px, 8vw, 96px);
	font-weight: 900;
	color: var(--color-primary);
	line-height: 0.95;
	margin-bottom: 16px;
	letter-spacing: -2px;
}

.hero-slogan {
	font-size: clamp(24px, 3.5vw, 40px);
	font-weight: 800;
	color: var(--color-text);
	line-height: 1.15;
	margin-bottom: 32px;
}

.hero-desc {
	font-size: 15px;
	color: var(--color-text-secondary);
	line-height: 1.7;
	max-width: 520px;
}

.hero-desc a {
	color: var(--color-primary);
	text-decoration: none;
}

.hero-desc a:hover {
	text-decoration: underline;
}

/* Hero right — focus box */
.hero-right {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}

.hero-focus {
	position: relative;
	padding: 48px 56px;
	text-align: left;
}

.hero-focus-corner {
	position: absolute;
	width: 24px;
	height: 24px;
	border-color: var(--color-primary);
	border-style: solid;
}

.hero-focus-corner.tl { top:0; left:0; border-width:3px 0 0 3px; }
.hero-focus-corner.tr { top:0; right:0; border-width:3px 3px 0 0; }
.hero-focus-corner.bl { bottom:0; left:0; border-width:0 0 3px 3px; }
.hero-focus-corner.br { bottom:0; right:0; border-width:0 3px 3px 0; }

.hero-label {
	font-size: 14px;
	color: var(--color-primary);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.hero-city {
	font-size: clamp(32px, 4vw, 32px);
	font-weight: 900;
	color: var(--color-text);
	letter-spacing: 2px;
	margin: 4px 0;
	text-align: left;
}

.hero-date {
	font-size: clamp(56px, 7vw, 96px);
	font-weight: 900;
	color: var(--color-text);
	line-height: 1;
	letter-spacing: -2px;
}

.hero-time {
	font-size: clamp(18px, 2.5vw, 28px);
	font-weight: 700;
	color: var(--color-text);
	margin-top: 8px;
	text-align: right;
}

.hero-time .hero-label {
	margin-right: 8px;
}

.hero-buttons {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
}

.hero-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.hero-cta-subtitle {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: inherit;
	opacity: 0.85;
}

.hero-btn {
	display: inline-flex;
	align-items: center;
	padding: 16px 36px;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	text-decoration: none;
	border-radius: 34px;
	transition: all 0.2s;
}

.hero-btn--dark {
	background: #000;
	color: #fff;
}

.hero-btn--dark:hover {
	background: #c3181a;
	color: #fff;
}

.hero-btn--outline {
	background: #fff;
	color: #c3181a;
	border: 2px solid #fff;
}

.hero-btn--outline:hover {
	background: #c3181a;
	color: #fff;
	border-color: #c3181a;
}

/* Image slide */
.carousel-image-slide {
	position: relative;
	width: 100%;
	min-height: 85vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.carousel-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.carousel-image-content {
	position: relative;
	z-index: 2;
	text-align: center;
	padding: 40px;
}

.carousel-image-content h2 {
	font-size: 48px;
	font-weight: 900;
	margin-bottom: 16px;
}

.carousel-image-content p {
	font-size: 18px;
	color: var(--color-text-secondary);
	margin-bottom: 24px;
}

/* ─── EVENT DETAIL HERO ─────────────────────────────── */

.event-hero {
	min-height: 50vh;
	display: flex;
	align-items: center;
	padding: 80px 0 60px;
}

.event-hero-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}

.event-hero-title {
	font-size: clamp(32px, 5vw, 48px);
	font-weight: 900;
	line-height: 1.1;
	margin-bottom: 20px;
	letter-spacing: -1px;
}

.event-hero-desc {
	font-size: 15px;
	color: var(--color-text-secondary);
	line-height: 1.7;
}

.event-hero-desc a {
	color: var(--color-primary);
}

.event-hero-right {
	max-width: 430px;
	justify-self: end;
}

.event-hero-focus {
	position: relative;
	padding: 36px 44px;
}

.hero-focus-corner {
	width: 18px;
	height: 18px;
}

.event-hero-focus-content {
	text-align: left;
}

.event-hero-label {
	font-size: 12px;
	color: var(--color-primary);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.event-hero-date {
	font-size: clamp(40px, 5vw, 60px);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -2px;
	white-space: nowrap;
	margin: 4px 0 12px;
}

.event-focus-split {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 8px;
}

.event-focus-split-value {
	font-size: 20px;
	font-weight: 700;
}

.event-focus-line {
	height: 2px;
	background: var(--color-primary);
	margin: 12px 0;
}

.event-focus-split-value strong {
	color: var(--color-text);
	display: block;
}

.event-focus-split-value div {
	font-size: 14px;
	font-weight: 400;
	color: #fff;
}

.event-hero-shop-link {
	display: inline-block;
	margin-top: 6px;
	font-size: 13px;
	color: #fff;
	text-decoration: underline;
}

.event-hero-shop-link:hover {
	color: var(--color-primary);
}

/* ─── BICYKLE NA AKCI (biela sekcia) ────────────────── */

.event-bikes-section {
	background: #fff;
	color: #1d1d1f;
	padding: 60px 0 80px;
}

.event-bikes-layout {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 48px;
	align-items: start;
}

.event-bikes-heading .event-bikes-heading-text > span,
.event-bikes-heading > span:not(.event-bikes-heading-text):not(.event-bikes-heading-line) {
	color: var(--color-primary);
}

/* Toolbar */
.event-bikes-toolbar {
	margin-bottom: 32px;
}

.event-bikes-heading {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 16px;
}

.event-bikes-heading-line {
	flex: 1;
	height: 2px;
	background: var(--color-primary);
}

.event-bikes-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.event-bikes-filters {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.ebf-tag {
	padding: 6px 16px;
	border: 1.5px solid #d1d1d6;
	border-radius: 20px;
	background: transparent;
	color: #86868b;
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: all 0.15s;
}

.ebf-tag.active {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

.ebf-tag:hover:not(.active) {
	border-color: #86868b;
	color: #1d1d1f;
}

.event-bikes-view-toggle {
	display: flex;
	border: 1px solid #d1d1d6;
	border-radius: 8px;
	overflow: hidden;
}

.ebv-btn {
	width: 36px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	cursor: pointer;
	color: #86868b;
	transition: all 0.15s;
}

.ebv-btn:first-child {
	border-right: 1px solid #d1d1d6;
}

.ebv-btn.active {
	background: #f0f0f2;
	color: var(--color-primary);
}

.ebv-btn svg {
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Bike card — list view */
.event-bike-card {
	display: grid;
	grid-template-columns: 60px 200px 1fr;
	gap: 20px;
	align-items: start;
	padding: 32px 0;
	border-bottom: 1px solid #e5e5ea;
}

.event-bike-card:last-child {
	border-bottom: none;
}

.event-bike-number {
	font-size: 40px;
	font-weight: 900;
	color: var(--color-primary);
	line-height: 1;
}

/* Grid view */
.event-bikes-items--grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
}

.event-bikes-items--grid .event-bike-card {
	grid-template-columns: 1fr;
	gap: 12px;
	border: 1px solid #e5e5ea;
	border-radius: 12px;
	padding: 20px;
	border-bottom: 1px solid #e5e5ea;
}

.event-bikes-items--grid .event-bike-number {
	font-size: 28px;
}

.event-bikes-items--grid .event-bike-photo {
	width: 100%;
	height: 180px;
}

.event-bike-photo {
	width: 200px;
	height: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.event-bike-photo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.event-bike-photo-empty {
	font-size: 64px;
	opacity: 0.2;
}

.event-bike-name {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 8px;
	color: #1d1d1f;
}

.event-bike-desc {
	font-size: 13px;
	color: #86868b;
	line-height: 1.6;
	margin-bottom: 12px;
}

.event-bike-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.event-bike-type {
	font-size: 14px;
	font-weight: 700;
	color: var(--color-primary);
	display: flex;
	align-items: center;
	gap: 5px;
}

.event-bike-type svg {
	stroke-linecap: round;
	stroke-linejoin: round;
}

.event-bike-actions {
	display: flex;
	gap: 8px;
}

.event-bike-btn {
	display: inline-flex;
	align-items: center;
	padding: 8px 22px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-decoration: none;
	border-radius: 34px;
	transition: all 0.2s;
}

.event-bike-btn--dark {
	background: #1d1d1f;
	color: #fff;
}

.event-bike-btn--dark:hover {
	background: var(--color-primary);
}

.event-bike-btn--reserve {
	background: #fff;
	color: var(--color-primary);
	border: 2px solid var(--color-primary);
}

.event-bike-btn--reserve:hover {
	background: var(--color-primary);
	color: #fff;
}

.event-bike-btn--disabled {
	background: #e5e5ea;
	color: #86868b;
	border: 2px solid #e5e5ea;
	cursor: not-allowed;
}

/* Availability dot */
.event-bike-availability {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: #86868b;
}

.event-bike-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
	animation: dotPulse 1.5s ease-in-out infinite;
}

.dot--green { background: #16a34a; }
.dot--orange { background: #f59e0b; }
.dot--red { background: #ef4444; }

@keyframes dotPulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.4; transform: scale(0.8); }
}

/* Sidebar */
.event-bikes-sidebar {
	position: sticky;
	top: 100px;
	background: #fff4f4;
	border-radius: var(--radius);
	padding: 20px;
}

.event-sidebar-card {
	padding: 32px 0;
	border-bottom: 1px solid #e5e5ea;
	text-align: center;
}

.event-sidebar-card:last-child {
	border-bottom: none;
}

.event-sidebar-label {
	font-size: 14px;
	color: var(--color-primary);
	font-weight: 600;
	margin-bottom: 8px;
}

.event-sidebar-big {
	font-size: 20px;
	font-weight: 800;
	color: #1d1d1f;
}

.event-sidebar-big span {
	font-size: 64px;
	color: var(--color-primary);
	display: block;
	line-height: 1;
	letter-spacing: -2px;
}

.event-sidebar-sub {
	font-size: 18px;
	font-weight: 700;
	color: #1d1d1f;
}

.event-sidebar-needs {
	font-size: 16px;
	font-weight: 600;
	color: #1d1d1f;
	line-height: 2;
}

/* ─── BIKE DETAIL PAGE (redesign) ───────────────────── */

.bd-topbar {
	background: #fff;
	border-bottom: 1px solid #e5e5ea;
	padding: 14px 0;
}

.bd-topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.bd-topbar-left {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: #1d1d1f;
}

.bd-topbar-accent {
	width: 4px;
	height: 24px;
	background: var(--color-primary);
	border-radius: 2px;
	flex-shrink: 0;
}

.bd-topbar-date {
	color: var(--color-primary);
	font-weight: 700;
}

.bd-topbar-sep {
	color: #d1d1d6;
}

.bd-topbar-btn {
	padding: 8px 20px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-decoration: none;
	border: 1.5px solid #1d1d1f;
	border-radius: 4px;
	color: #1d1d1f;
	transition: all 0.2s;
	white-space: nowrap;
}

.bd-topbar-btn:hover {
	background: #1d1d1f;
	color: #fff;
}

.bd-section {
	background: #fff;
	color: #1d1d1f;
	padding: 32px 0 80px;
}

.bd-layout {
	display: grid;
	grid-template-columns: 120px 1fr 400px;
	gap: 32px;
	align-items: start;
}

/* Sidebar */
.bd-sidebar {
	position: sticky;
	top: 100px;
}

.bd-sidebar-title {
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 12px;
	color: #1d1d1f;
}

.bd-sidebar-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 8px;
	border: 1px solid #e5e5ea;
	border-radius: 8px;
	margin-bottom: 8px;
	text-decoration: none;
	color: #86868b;
	font-size: 9px;
	font-weight: 600;
	text-align: center;
	transition: all 0.15s;
}

.bd-sidebar-item img {
	width: 80px;
	height: 60px;
	object-fit: contain;
}

.bd-sidebar-item.active {
	border-color: var(--color-primary);
	color: #1d1d1f;
}

.bd-sidebar-item:hover {
	border-color: #86868b;
}

.bd-mobile-bikes-btn {
	display: none;
	margin-bottom: 20px;
}

/* Photo */
.bd-photo-main img {
	width: 100%;
	border-radius: 12px;
}

.bd-photo-thumbs {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	overflow-x: auto;
	padding-bottom: 4px;
}

.bd-thumb {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: 8px;
	border: 2px solid #e5e7eb;
	overflow: hidden;
	cursor: pointer;
	padding: 0;
	background: #f9fafb;
	transition: border-color 0.15s;
}

.bd-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bd-thumb:hover {
	border-color: #86868b;
}

.bd-thumb--active {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 1px var(--color-primary);
}

/* Info panel */
.bd-info-heading {
	font-size: 28px;
	font-weight: 800;
	margin-bottom: 4px;
}

.bd-info-heading span {
	color: var(--color-primary);
}

.bd-info-line {
	height: 3px;
	background: var(--color-primary);
	width: 60px;
	margin-bottom: 16px;
}

.bd-info-type-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	margin-bottom: 16px;
	color: #86868b;
}

.bd-bike-name {
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 8px;
}

.bd-bike-desc {
	font-size: 13px;
	color: #86868b;
	line-height: 1.6;
	margin-bottom: 20px;
}

/* Slots */
.bd-slots-title {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 16px;
}

/* Day picker */
.bd-days-picker {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	gap: 8px;
	margin-bottom: 16px;
}

.bd-day-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 14px 8px;
	border: 2px solid #e5e5ea;
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	transition: all 0.15s;
	font-family: inherit;
}

.bd-day-card:hover:not(:disabled) {
	border-color: var(--color-primary);
}

.bd-day-card--full {
	opacity: 0.35;
	cursor: not-allowed;
}

.bd-day-card-name {
	font-size: 11px;
	font-weight: 600;
	color: #86868b;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.bd-day-card-date {
	font-size: 22px;
	font-weight: 800;
	color: #1d1d1f;
	margin: 2px 0;
}

.bd-day-card-free {
	font-size: 11px;
	font-weight: 600;
	color: #16a34a;
}

.bd-day-card-free--none {
	color: #86868b;
}

/* Slot day header with back */
.bd-slot-day-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--color-primary);
}

.bd-slot-back {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #f5f5f7;
	border: none;
	color: #1d1d1f;
	cursor: pointer;
	transition: all 0.15s;
	flex-shrink: 0;
}

.bd-slot-back:hover {
	background: var(--color-primary);
	color: #fff;
}

.bd-slot-back svg {
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bd-slot-day-label {
	font-size: 21px;
	font-weight: 700;
	color: #1d1d1f;
	margin-bottom: 0;
}

.bd-slot-day {
	margin-bottom: 14px;
}


.bd-slot-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 6px;
}

.bd-slot-btn {
	padding: 10px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	color: #1d1d1f;
	background: #f5f5f7;
	border: 2px solid transparent;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.15s;
}

.bd-slot-btn:hover {
	border-color: var(--color-primary);
}

.bd-slot-btn.selected {
	border-color: #16a34a;
	background: #f0fdf4;
	color: #16a34a;
}

.bd-slot-btn--taken {
	background: #f5f5f7;
	color: #c5c5c5;
	cursor: default;
	text-decoration: line-through;
}

.bd-slot-btn--taken small {
	display: block;
	font-size: 9px;
	text-decoration: none;
	color: #c5c5c5;
}

.bd-slot-btn--taken:hover {
	border-color: transparent;
}

.bd-reserve-btn {
	display: block;
	width: 100%;
	margin-top: 20px;
	padding: 14px;
	font-size: 14px;
	font-weight: 700;
	font-family: inherit;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	background: #fff;
	color: var(--color-primary);
	border: 2px solid var(--color-primary);
	border-radius: 34px;
	cursor: pointer;
	transition: all 0.2s;
}

.bd-reserve-btn:hover:not(:disabled) {
	background: var(--color-primary);
	color: #fff;
}

.bd-reserve-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Bottom info */
.bd-bottom-info {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid #e5e5ea;
}

.bd-bottom-card {
	background: #fff4f4;
	border-radius: 10px;
	padding: 16px;
}

.bd-bottom-label {
	font-size: 11px;
	color: var(--color-primary);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	margin-bottom: 8px;
}

.bd-bottom-needs {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.8;
	color: #1d1d1f;
}

.bd-bottom-duration {
	line-height: 1;
	margin-bottom: 4px;
}

.bd-bottom-duration span {
	font-size: 40px;
	font-weight: 900;
	color: var(--color-primary);
	display: block;
	line-height: 1;
}

.bd-back-link {
	display: block;
	text-align: center;
	margin-top: 16px;
	font-size: 13px;
	font-weight: 600;
	color: #86868b;
	text-decoration: none;
	transition: color 0.15s;
}

.bd-back-link:hover {
	color: var(--color-primary);
}

/* ─── RESERVE MODAL ─────────────────────────────────── */

.bd-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bd-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.5);
	backdrop-filter: blur(8px);
}

.bd-modal-box {
	position: relative;
	z-index: 1;
	background: #fff;
	border-radius: 16px;
	width: 100%;
	max-width: 560px;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.bd-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 28px;
	border-bottom: 1px solid #e5e5ea;
}

.bd-modal-header h3 {
	font-size: 20px;
	font-weight: 700;
	color: #1d1d1f;
}

.bd-modal-close {
	background: none;
	border: none;
	font-size: 28px;
	color: #86868b;
	cursor: pointer;
	line-height: 1;
}

.bd-modal-summary {
	padding: 14px 28px;
	background: #f5f5f7;
	font-size: 14px;
	color: #1d1d1f;
	display: flex;
	align-items: center;
}

.bd-modal-body {
	padding: 18px 28px;
}

.bd-modal-intro {
	font-size: 12px;
	color: #86868b;
	line-height: 1.5;
	margin-bottom: 14px;
}

.bd-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.bd-address-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 90px;
	gap: 10px;
}

.bd-form-group {
	margin-bottom: 10px;
}

.bd-form-group label {
	display: block;
	font-size: 11.5px;
	font-weight: 600;
	color: #1d1d1f;
	margin-bottom: 3px;
}

.bd-input {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid #e5e5ea;
	border-radius: 8px;
	font-size: 13px;
	font-family: inherit;
	transition: border-color 0.15s;
	color: #1d1d1f;
}

.bd-input:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(195,24,26,0.06);
}

.bd-req {
	color: var(--color-primary);
}

.bd-form-section-label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: #1d1d1f;
	margin-bottom: 8px;
	padding-bottom: 4px;
	border-bottom: 1px solid #e5e5ea;
}

.bd-captcha-row {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}

.bd-captcha-img {
	border-radius: 8px;
	border: 1px solid #e5e5ea;
	height: 44px;
}

.bd-captcha-refresh {
	display: flex;
	align-items: center;
	gap: 4px;
	background: none;
	border: none;
	color: var(--color-primary);
	cursor: pointer;
	font-size: 13px;
	font-family: inherit;
	font-weight: 500;
}

.bd-captcha-refresh svg {
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bd-consents {
	padding: 12px 0;
	border-top: 1px solid #e5e5ea;
	margin-bottom: 10px;
}

.bd-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 12.5px;
	margin-bottom: 8px;
	cursor: pointer;
	color: #1d1d1f;
}

.bd-checkbox input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--color-primary);
	margin-top: 1px;
	flex-shrink: 0;
}

.bd-checkbox a {
	color: var(--color-primary);
}

.bd-submit-btn {
	display: block;
	width: 100%;
	padding: 12px;
	font-size: 15px;
	font-weight: 700;
	font-family: inherit;
	text-transform: uppercase;
	letter-spacing: 1px;
	background: var(--color-primary);
	color: #fff;
	border: none;
	border-radius: 34px;
	cursor: pointer;
	transition: background 0.2s;
	margin-top: 8px;
}

.bd-submit-btn:hover {
	background: #a01216;
}

/* ─── SUCCESS STATE (modal) ─────────────────────────── */

.bd-success {
	padding: 40px 28px;
	text-align: center;
}

.bd-success-icon {
	margin-bottom: 20px;
}

.bd-success-icon svg {
	animation: successPop 0.4s ease;
}

@keyframes successPop {
	0% { transform: scale(0); opacity: 0; }
	60% { transform: scale(1.2); }
	100% { transform: scale(1); opacity: 1; }
}

.bd-success-title {
	font-size: 24px;
	font-weight: 800;
	color: #1d1d1f;
	margin-bottom: 10px;
}

.bd-success-text {
	font-size: 14px;
	color: #86868b;
	line-height: 1.6;
	margin-bottom: 8px;
}

.bd-success-team {
	font-size: 15px;
	color: #1d1d1f;
	margin-bottom: 24px;
}

.bd-success-divider {
	height: 1px;
	background: #e5e5ea;
	margin: 24px 0;
}

.bd-success-label {
	font-size: 14px;
	color: #86868b;
	margin-bottom: 16px;
}

.bd-success-cta {
	display: flex;
	gap: 12px;
	justify-content: center;
	margin-bottom: 24px;
}

.bd-success-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	border-radius: 34px;
	transition: all 0.2s;
	background: #1d1d1f;
	color: #fff;
}

.bd-success-btn:hover {
	background: var(--color-primary);
}

.bd-success-btn svg {
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bd-success-social {
	display: flex;
	gap: 16px;
	justify-content: center;
}

.bd-success-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #f5f5f7;
	color: #86868b;
	text-decoration: none;
	transition: all 0.2s;
}

.bd-success-social a:hover {
	background: var(--color-primary);
	color: #fff;
}

.bd-success-social svg {
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ─── RESPONSIVE (bike detail) ──────────────────────── */

@media (max-width: 1000px) {
	.bd-layout {
		grid-template-columns: 1fr 380px;
	}
	.bd-sidebar { display: none; }
}

@media (max-width: 768px) {
	.bd-layout {
		grid-template-columns: 1fr;
	}
	.bd-topbar-left { font-size: 12px; flex-wrap: wrap; }
	.bd-modal-box { margin: 12px; max-height: 95vh; }
	.bd-form-row { grid-template-columns: 1fr; }
	.bd-address-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
	.bd-success-cta { flex-direction: column; }
	.bd-success-btn { width: 100%; justify-content: center; }
	.bd-bottom-info { grid-template-columns: 1fr; gap: 8px; }
	.bd-bottom-card { padding: 14px; }
	.bd-bottom-duration span { font-size: 32px; }
	.bd-slot-grid { grid-template-columns: repeat(2, 1fr); }
}

.breadcrumb-front {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--color-text-secondary);
}

.breadcrumb-front a {
	color: var(--color-text-secondary);
	text-decoration: none;
}

.breadcrumb-front a:hover {
	color: #fff;
}

.bike-detail-section {
	background: #fff;
	color: #1d1d1f;
	padding: 48px 0 80px;
}

.bike-detail-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: start;
	margin-bottom: 48px;
}

.bike-detail-photo img {
	width: 100%;
	border-radius: 12px;
}

.bike-detail-photo-empty {
	width: 100%;
	aspect-ratio: 4/3;
	background: #f5f5f7;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 80px;
	opacity: 0.2;
}

.bike-detail-brand {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #86868b;
	margin-bottom: 4px;
}

.bike-detail-name {
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -0.5px;
	margin-bottom: 8px;
	color: #1d1d1f;
}

.bike-detail-size {
	font-size: 15px;
	color: var(--color-primary);
	margin-bottom: 20px;
}

.bike-detail-desc {
	font-size: 14px;
	color: #86868b;
	line-height: 1.7;
	margin-bottom: 24px;
	white-space: pre-line;
}

.bike-detail-actions {
	margin-bottom: 24px;
}

.bike-detail-event-info {
	font-size: 13px;
	color: #86868b;
	padding-top: 16px;
	border-top: 1px solid #e5e5ea;
}

/* Slots */
.bike-slots-heading {
	font-size: 24px;
	font-weight: 800;
	margin-bottom: 24px;
	color: #1d1d1f;
}

.bike-slot-day {
	margin-bottom: 20px;
}

.bike-slot-day-title {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 12px;
	color: #1d1d1f;
}

.bike-slot-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 10px;
}

.bike-slot-btn {
	display: block;
	padding: 14px;
	text-align: center;
	font-size: 15px;
	font-weight: 600;
	color: #1d1d1f;
	background: #f5f5f7;
	border: 2px solid transparent;
	border-radius: 8px;
	text-decoration: none;
	transition: all 0.2s;
}

.bike-slot-btn:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
	background: #fef2f2;
}

.bike-service-notice {
	text-align: center;
	padding: 48px;
	background: #fef2f2;
	border-radius: 12px;
	margin-top: 32px;
}

.bike-service-notice h3 {
	color: var(--color-primary);
	margin-bottom: 8px;
}

.bike-service-notice a {
	color: var(--color-primary);
}

/* ─── RESPONSIVE (event + bike detail) ──────────────── */

@media (max-width: 900px) {
	.site-container { padding: 0 16px; }

	/* Hero */
	.event-hero { min-height: auto; padding: 80px 0 32px; }
	.event-hero-grid { grid-template-columns: 1fr; gap: 24px; }
	.event-hero-title { font-size: 28px; margin-bottom: 12px; }
	.event-hero-right { max-width: 100%; justify-self: start; }
	.event-hero-focus { padding: 24px; }
	.event-hero-date { font-size: 36px; }
	.event-hero-focus-content { text-align: left; }

	/* Bikes section */
	.event-bikes-section { padding: 32px 0 48px; }
	.event-bikes-layout { grid-template-columns: 1fr; gap: 24px; }
	.event-bikes-sidebar { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 0; order: 1; background: transparent; padding: 0; }
	.event-bikes-toolbar { margin-bottom: 20px; }

	/* Bike cards — 2 vedle sebe */
	.event-bikes-items {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}
	.event-bike-card {
		grid-template-columns: 1fr;
		gap: 8px;
		border: 1px solid #e5e7eb;
		border-radius: 10px;
		padding: 12px;
		text-align: center;
	}
	.event-bike-number { font-size: 20px; }
	.event-bike-photo { width: 100%; height: 120px; }
	.event-bike-name { font-size: 14px; }
	.event-bike-desc { display: none; }
	.event-bike-actions { justify-content: center; flex-wrap: wrap; gap: 6px; }
	.event-bike-btn { font-size: 11px; padding: 6px 10px; }
	.event-bike-availability { font-size: 11px; justify-content: center; }

	.bike-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
	.site-container { padding: 0 12px; }

	.event-hero { padding: 72px 0 24px; }
	.event-hero-title { font-size: 24px; letter-spacing: -0.5px; }
	.event-hero-date { font-size: 28px; }
	.event-hero-focus { padding: 16px; }

	.event-bikes-items { grid-template-columns: 1fr 1fr; gap: 8px; }
	.event-bike-card { padding: 8px; }
	.event-bike-photo { height: 90px; }
	.event-bike-number { display: none; }
	.event-bike-type { font-size: 11px; }
	.event-bike-actions .event-bike-btn--dark { display: none; }

	.event-bikes-sidebar { grid-template-columns: 1fr; }
	.bike-slot-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── EVENTS SECTION ────────────────────────────────── */

.section-events {
	padding: 32px 0;
}

.section-title {
	font-size: 28px;
	font-weight: 800;
	margin-bottom: 6px;
	letter-spacing: -0.5px;
}

.section-subtitle {
	font-size: 14px;
	color: var(--color-text-secondary);
	margin-bottom: 24px;
}

.events-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
}

.event-card {
	background: var(--color-bg-light);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 28px;
	text-decoration: none;
	color: var(--color-text);
	transition: transform 0.2s, border-color 0.2s;
}

.event-card:hover {
	transform: translateY(-3px);
	border-color: var(--color-primary);
}

.event-card-date {
	font-size: 13px;
	font-weight: 600;
	color: var(--color-primary);
	margin-bottom: 12px;
}

.event-card-title {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 8px;
}

.event-card-location {
	font-size: 14px;
	color: var(--color-text-secondary);
	margin-bottom: 12px;
}

.event-card-bikes {
	font-size: 13px;
	font-weight: 600;
	color: var(--color-primary);
}

/* ─── Events page (stránka udalostí) ───────────────────── */

.events-section-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: rgba(255,255,255,0.7);
	margin-bottom: 20px;
}

.events-section-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.events-section-dot--green {
	background: #16a34a;
	box-shadow: 0 0 6px rgba(22,163,74,0.5);
}

.events-section-dot--gray {
	background: rgba(255,255,255,0.3);
}

.event-card--upcoming {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	color: #1d1d1f;
	overflow: hidden;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.event-card--upcoming:hover {
	border-color: var(--color-primary);
	box-shadow: 0 12px 40px rgba(0,0,0,0.18);
}

.event-card--upcoming .event-card-date {
	color: var(--color-primary);
}

.event-card--upcoming .event-card-title {
	color: #1d1d1f;
}

.event-card--upcoming .event-card-location {
	color: #6b7280;
}

.event-card-cover {
	width: 100%;
	height: 200px;
	overflow: hidden;
	position: relative;
}

.event-card-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s;
}

.event-card--upcoming:hover .event-card-cover img {
	transform: scale(1.05);
}

.event-card-cover--past {
	height: 120px;
	opacity: 0.5;
}

.event-card-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	background: var(--color-primary);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 6px;
}

.event-card-body {
	padding: 20px 24px 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.event-card--upcoming .event-card-date,
.event-card--past .event-card-date {
	display: flex;
	align-items: center;
	gap: 6px;
}

.event-card--upcoming .event-card-location,
.event-card--past .event-card-location {
	display: flex;
	align-items: center;
	gap: 5px;
}

.event-card-desc {
	font-size: 13px;
	color: #9ca3af;
	line-height: 1.5;
	margin-bottom: 12px;
}

.event-card-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid #f0f0f2;
}

.event-card-bikes-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #16a34a;
	margin-right: 4px;
}

.event-card-cta {
	font-size: 13px;
	font-weight: 600;
	color: var(--color-primary);
}

.event-card--past {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	padding: 0;
	overflow: hidden;
	cursor: default;
	opacity: 0.5;
}

.event-card--past:hover {
	transform: none;
	border-color: #e5e7eb;
}

.event-card--past .event-card-title {
	color: #6b7280;
}

.event-card--past .event-card-date {
	color: #9ca3af;
}

.event-card--past .event-card-location {
	color: #9ca3af;
}

.event-card--past .event-card-footer {
	border-top-color: #f0f0f2;
}

.event-card-past-badge {
	font-size: 11px;
	font-weight: 600;
	color: rgba(255,255,255,0.35);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.events-empty {
	text-align: center;
	padding: 80px 0;
	color: rgba(255,255,255,0.5);
}

.events-empty svg {
	stroke: rgba(255,255,255,0.2);
	margin-bottom: 16px;
}

.events-empty p {
	font-size: 18px;
	margin-bottom: 4px;
}

/* ─── TESTOVACIE BICYKLE (stránka) ──────────────────── */

.tb-section {
	margin-bottom: 20px;
}

.tb-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
	gap: 12px;
}

.tb-section-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 700;
	color: rgba(255,255,255,0.8);
}

.tb-section-label svg {
	stroke: var(--color-primary);
}

.tb-badge-preparing {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 5px 14px;
	border-radius: 20px;
	background: rgba(245,158,11,0.12);
	color: #f59e0b;
	border: 1px solid rgba(245,158,11,0.25);
}

.tb-preparing-card {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: var(--radius);
	padding: 48px 32px;
	text-align: center;
}

.tb-preparing-icon {
	margin-bottom: 20px;
}

.tb-preparing-icon svg {
	stroke: #d1d5db;
}

.tb-preparing-card h3 {
	font-size: 20px;
	font-weight: 700;
	color: #1d1d1f;
	margin-bottom: 12px;
}

.tb-preparing-card p {
	font-size: 14px;
	color: #6b7280;
	line-height: 1.6;
	max-width: 500px;
	margin: 0 auto;
}

.tb-preparing-sub {
	margin-top: 12px !important;
	font-weight: 600;
	color: var(--color-primary) !important;
}

/* Event block */

.tb-event-block {
	margin-bottom: 32px;
}

.tb-event-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(255,255,255,0.1);
}

.tb-event-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 17px;
	font-weight: 700;
	color: var(--color-primary);
	text-decoration: none;
	transition: color 0.2s;
}

.tb-event-link:hover {
	color: #fff;
}

.tb-event-meta {
	display: flex;
	gap: 20px;
	font-size: 13px;
	font-weight: 500;
	color: rgba(255,255,255,0.7);
}

.tb-event-meta span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.tb-event-meta svg {
	stroke: rgba(255,255,255,0.5);
}

/* Bike cards grid */

.tb-bikes-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 14px;
}

.tb-bike-card {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: var(--radius);
	overflow: hidden;
	text-decoration: none;
	color: #1d1d1f;
	display: flex;
	flex-direction: column;
	transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.tb-bike-card:hover {
	transform: translateY(-3px);
	border-color: var(--color-primary);
	box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

.tb-bike-photo {
	width: 100%;
	height: 140px;
	overflow: hidden;
	background: #f9fafb;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
}

.tb-bike-photo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	transition: transform 0.3s;
}

.tb-bike-card:hover .tb-bike-photo img {
	transform: scale(1.05);
}

.tb-bike-photo-empty {
	color: #d1d5db;
}

.tb-bike-info {
	padding: 16px;
	flex: 1;
}

.tb-bike-brand {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #6b7280;
	margin-bottom: 2px;
}

.tb-bike-name {
	font-size: 16px;
	font-weight: 700;
	color: #1d1d1f;
	margin-bottom: 8px;
}

.tb-bike-meta {
	display: flex;
	gap: 12px;
	font-size: 12px;
	color: #9ca3af;
	margin-bottom: 10px;
}

.tb-bike-meta span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.tb-bike-meta svg {
	stroke: #9ca3af;
}

.tb-bike-slots {
	font-size: 12px;
	font-weight: 600;
}

.tb-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	margin-right: 4px;
}

.tb-dot--green {
	background: #16a34a;
}

.tb-dot--red {
	background: #ef4444;
}

.tb-bike-slots--free {
	color: #16a34a;
}

.tb-bike-slots--full {
	color: #9ca3af;
}

.tb-bike-cta {
	padding: 12px 16px;
	border-top: 1px solid #f0f0f2;
	font-size: 13px;
	font-weight: 700;
	color: var(--color-primary);
	text-align: center;
	transition: background 0.2s, color 0.2s;
}

.tb-bike-card:hover .tb-bike-cta {
	background: var(--color-primary);
	color: #fff;
}

.tb-empty {
	text-align: center;
	padding: 48px 0;
	color: rgba(255,255,255,0.5);
	font-size: 15px;
}

@media (max-width: 768px) {
	.tb-section-header { flex-direction: column; align-items: flex-start; }
	.tb-bikes-grid { grid-template-columns: 1fr 1fr; }
	.tb-event-header { flex-direction: column; }
	.tb-preparing-card { padding: 32px 20px; }
}

@media (max-width: 500px) {
	.tb-bikes-grid { grid-template-columns: 1fr; }
}

/* ─── FLASH ─────────────────────────────────────────── */

.flash {
	padding: 14px 20px;
	border-radius: var(--radius-sm);
	margin: 16px 0;
	font-size: 14px;
	font-weight: 500;
}

.flash--success { background: rgba(16,185,129,0.15); color: #6ee7b7; border: 1px solid rgba(16,185,129,0.3); }
.flash--error   { background: rgba(239,68,68,0.15); color: #fca5a5; border: 1px solid rgba(239,68,68,0.3); }
.flash--info    { background: rgba(59,130,246,0.15); color: #93c5fd; border: 1px solid rgba(59,130,246,0.3); }

/* ─── FOOTER ────────────────────────────────────────── */

.site-footer {
	padding: 48px 0 24px;
	border-top: 2px solid var(--color-primary);
	text-align: center;
}

.footer-social {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-bottom: 24px;
}

.footer-social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255,255,255,0.08);
	color: rgba(255,255,255,0.6);
	transition: all 0.2s;
}

.footer-social-link:hover {
	background: var(--color-primary);
	color: #fff;
	transform: translateY(-2px);
}

.footer-contact {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-bottom: 24px;
	font-size: 20px;
	flex-wrap: wrap;
}

.footer-contact-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #ffffff;
	text-decoration: none;
	font-weight: 700;
	letter-spacing: -0.3px;
	transition: color 0.2s;
}

.footer-contact-item svg {
	opacity: 0.5;
}

.footer-contact-item:hover {
	color: var(--color-primary);
}

.footer-contact-item:hover svg {
	opacity: 1;
}

.footer-admin-link {
	display: inline-flex;
	margin-right: 4px;
}

.footer-admin-link:hover img {
	opacity: 0.8 !important;
}

.footer-contact-sep {
	color: rgba(255,255,255,0.2);
}

.footer-stores {
	display: flex;
	justify-content: center;
	gap: 24px;
	margin-bottom: 28px;
}

.footer-store {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: rgba(255,255,255,0.5);
	font-size: 13px;
	text-decoration: none;
	padding: 8px 16px;
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 8px;
	transition: all 0.2s;
}

.footer-store:hover {
	color: #fff;
	border-color: var(--color-primary);
	background: rgba(196,24,28,0.08);
}

.footer-store svg {
	stroke: var(--color-primary);
}

.footer-bottom {
	display: flex;
	justify-content: center;
	gap: 16px;
	font-size: 11px;
	color: rgba(255,255,255,0.3);
	flex-wrap: wrap;
}

.footer-bottom a {
	color: rgba(255,255,255,0.3);
	text-decoration: none;
	transition: color 0.15s;
}

.footer-bottom a:hover {
	color: rgba(255,255,255,0.6);
}

.footer-bienesimo {
	margin-left: auto;
}

@media (max-width: 600px) {
	.footer-social-link { width: 40px; height: 40px; }
	.footer-social-link svg { width: 20px; height: 20px; }
	.footer-stores { flex-direction: column; align-items: center; gap: 8px; }
	.footer-bottom { flex-direction: column; align-items: center; gap: 4px; }
	.footer-bienesimo { margin-left: 0; }
}

/* ─── COOKIE BAR ────────────────────────────────────── */

.cookie-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	background: #111;
	border-top: 1px solid var(--color-border);
	padding: 20px 0;
}

.cookie-bar-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	gap: 24px;
}

.cookie-bar-text {
	flex: 1;
}

.cookie-bar-text strong {
	font-size: 14px;
	display: block;
	margin-bottom: 4px;
}

.cookie-bar-text p {
	font-size: 12.5px;
	color: var(--color-text-secondary);
	line-height: 1.5;
}

.cookie-bar-actions {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}

.cookie-btn {
	padding: 10px 20px;
	border: none;
	border-radius: var(--radius-sm);
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: all 0.15s;
}

.cookie-btn--accept {
	background: var(--color-primary);
	color: #fff;
}

.cookie-btn--accept:hover {
	background: #a01216;
}

.cookie-btn--settings {
	background: rgba(255,255,255,0.1);
	color: #fff;
}

.cookie-btn--settings:hover {
	background: rgba(255,255,255,0.15);
}

.cookie-btn--reject {
	background: transparent;
	color: var(--color-text-secondary);
	border: 1px solid var(--color-border);
}

.cookie-btn--reject:hover {
	color: #fff;
	border-color: rgba(255,255,255,0.3);
}

/* ─── COOKIE MODAL ──────────────────────────────────── */

.cookie-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(0,0,0,0.6);
	backdrop-filter: blur(8px);
	display: flex;
	align-items: center;
	justify-content: center;
}

.cookie-modal-box {
	background: #1a1a1a;
	border: 1px solid var(--color-border);
	border-radius: 16px;
	width: 100%;
	max-width: 520px;
	max-height: 90vh;
	overflow-y: auto;
}

.cookie-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 24px;
	border-bottom: 1px solid var(--color-border);
}

.cookie-modal-header h3 {
	font-size: 18px;
	font-weight: 700;
}

.cookie-modal-close {
	background: none;
	border: none;
	color: var(--color-text-secondary);
	font-size: 24px;
	cursor: pointer;
}

.cookie-modal-body {
	padding: 24px;
}

.cookie-cat {
	padding: 16px 0;
	border-bottom: 1px solid var(--color-border);
}

.cookie-cat:last-child { border-bottom: none; }

.cookie-cat-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 6px;
}

.cookie-cat-header label {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 14px;
}

.cookie-cat-header input[type="checkbox"] {
	accent-color: var(--color-primary);
	width: 16px;
	height: 16px;
}

.cookie-cat-badge {
	font-size: 11px;
	background: rgba(255,255,255,0.08);
	padding: 2px 8px;
	border-radius: 4px;
	color: var(--color-text-secondary);
}

.cookie-cat p {
	font-size: 13px;
	color: var(--color-text-secondary);
	line-height: 1.5;
}

.cookie-modal-footer {
	padding: 16px 24px;
	border-top: 1px solid var(--color-border);
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}

/* ─── RESPONSIVE ────────────────────────────────────── */

@media (max-width: 900px) {
	.hero-banner {
		grid-template-columns: 1fr;
		text-align: center;
		padding: 40px 24px;
		min-height: 70vh;
	}

	.hero-desc { max-width: none; }

	.hero-right { margin-top: 20px; }

	.hero-focus { padding: 32px 40px; }

	.carousel-slide { min-height: 70vh; }
}

@media (max-width: 768px) {
	.site-nav {
		display: none;
		position: fixed;
		top: 64px;
		left: 0;
		right: 0;
		background: rgba(26,26,26,0.98);
		backdrop-filter: blur(16px);
		flex-direction: column;
		padding: 16px;
		border-bottom: 1px solid var(--color-border);
	}

	.site-nav.open { display: flex; }

	.site-burger { display: flex; }

	.cookie-bar-inner { flex-direction: column; text-align: center; }
	.cookie-bar-actions { flex-wrap: wrap; justify-content: center; }

	.site-footer-inner { flex-direction: column; text-align: center; gap: 8px; }
}

@media (max-width: 600px) {
	.hero-title { letter-spacing: -1px; }
	.hero-date { letter-spacing: -1px; }
	.hero-buttons { flex-direction: column; }
	.hero-btn { justify-content: center; padding: 14px 24px; font-size: 13px; }

	.section-title { font-size: 22px; }
	.section-events { padding: 20px 0; }

	.cookie-modal-box { margin: 16px; }
}

/* ═══════════════════════════════════════════════════════════
   SERVIS MODULE — Frontend
   ═══════════════════════════════════════════════════════════ */

/* ─── Hero ──────────────────────────────────────────────── */

.servis-hero {
	padding: 28px 24px 20px;
	text-align: center;
}

.servis-hero-inner {
	max-width: 700px;
	margin: 0 auto;
}

.servis-hero-title {
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -1px;
	margin-bottom: 8px;
}

.servis-hero-desc {
	font-size: 17px;
	color: var(--color-text-secondary);
	line-height: 1.6;
}

/* ─── Stepper ───────────────────────────────────────────── */

.servis-stepper {
	display: flex;
	justify-content: center;
	gap: 0;
	padding: 24px 24px 32px;
	max-width: 700px;
	margin: 0 auto;
}

.servis-step {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: rgba(255,255,255,0.6);
	padding: 0 12px;
	position: relative;
}

.servis-step:not(:last-child)::after {
	content: '';
	position: absolute;
	right: -4px;
	width: 8px;
	height: 1px;
	background: rgba(255,255,255,0.15);
}

.servis-step span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 1.5px solid rgba(255,255,255,0.4);
	font-size: 11px;
	font-weight: 700;
	color: rgba(255,255,255,0.7);
}

.servis-step--active {
	color: var(--color-text);
}

.servis-step--active span {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

.servis-step--done {
	color: rgba(255,255,255,0.5);
	text-decoration: none;
	cursor: pointer;
	transition: color 0.15s;
}

a.servis-step--done:hover {
	color: rgba(255,255,255,0.9);
}

a.servis-step--done:hover span {
	background: rgba(16,185,129,0.4);
	transform: scale(1.1);
}

.servis-step--done span {
	background: rgba(16,185,129,0.2);
	border-color: #10b981;
	color: #10b981;
	transition: all 0.15s;
}

/* ─── Sections ──────────────────────────────────────────── */

.servis-section {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 24px 60px;
}

.servis-section-title {
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -1px;
	margin-bottom: 8px;
}

.servis-section-sub {
	font-size: 14px;
	color: var(--color-text-secondary);
}

.servis-section-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 24px;
	gap: 16px;
}

.servis-back {
	font-size: 13px;
	color: var(--color-text-secondary);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s;
}

.servis-back:hover {
	color: var(--color-text);
}

/* ─── Location cards (step 1) ───────────────────────────── */

.servis-location-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
}

.servis-location-card {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: var(--radius);
	text-decoration: none;
	color: #1d1d1f;
	transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.servis-location-card:hover {
	transform: translateY(-4px);
	border-color: var(--color-primary);
	box-shadow: 0 12px 40px rgba(0,0,0,0.18);
}

.servis-location-photo {
	width: 100%;
	height: 180px;
	overflow: hidden;
}

.servis-location-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s;
}

.servis-location-card:hover .servis-location-photo img {
	transform: scale(1.05);
}

.servis-location-body {
	padding: 24px;
	text-align: center;
}

.servis-location-name {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 6px;
	color: #1d1d1f;
}

.servis-location-address {
	font-size: 14px;
	color: #6b7280;
	margin-bottom: 12px;
}

.servis-location-waiting {
	font-size: 12px;
	color: #16a34a;
	font-weight: 600;
	margin-bottom: 16px;
}

.servis-location-btn {
	display: inline-block;
	padding: 10px 28px;
	background: var(--color-primary);
	color: #fff;
	border-radius: var(--radius-sm);
	font-size: 13px;
	font-weight: 700;
	transition: background 0.2s;
}

.servis-location-card:hover .servis-location-btn {
	background: #a01216;
}

/* ─── Videorádce link ───────────────────────────────────── */

.servis-video-link {
	text-align: center;
	margin-top: 32px;
}

.servis-video-link a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: rgba(255,255,255,0.6);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	padding: 10px 20px;
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: var(--radius-sm);
	transition: all 0.2s;
}

.servis-video-link a:hover {
	color: #fff;
	border-color: #ff0000;
	background: rgba(255,0,0,0.08);
}

.servis-video-link svg {
	color: #ff0000;
}

/* ─── View toggle (step 2) ──────────────────────────────── */

.servis-view-toggle {
	display: flex;
	border: 1px solid var(--color-border);
	border-radius: 8px;
	overflow: hidden;
}

.servis-vt-btn {
	width: 36px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	cursor: pointer;
	color: rgba(255,255,255,0.35);
	transition: all 0.15s;
}

.servis-vt-btn:first-child {
	border-right: 1px solid var(--color-border);
}

.servis-vt-btn.active {
	background: rgba(255,255,255,0.06);
	color: var(--color-primary);
}

.servis-vt-btn svg {
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ─── Package cards — pricing (step 2) ──────────────────── */

.servis-pkg-card {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: var(--radius);
	text-decoration: none;
	color: #1d1d1f;
	transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
}

.servis-pkg-card:hover {
	transform: translateY(-4px);
	border-color: var(--color-primary);
	box-shadow: 0 12px 40px rgba(0,0,0,0.18);
}

.servis-pkg-card--highlight {
	border-color: #d4a017;
	box-shadow: 0 0 0 1px rgba(212,160,23,0.3);
}

/* ─── Tag ribbon ────────────────────────────────────────── */

.servis-pkg-tag {
	position: absolute;
	top: 22px;
	right: -46px;
	transform: rotate(45deg);
	padding: 6px 56px;
	font-size: 9px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #fff;
	z-index: 2;
	line-height: 1.3;
	text-align: center;
	white-space: nowrap;
	box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.servis-pkg-tag--red { background: #c4181c; }
.servis-pkg-tag--green { background: #16a34a; }
.servis-pkg-tag--blue { background: #2563eb; }
.servis-pkg-tag--gold { background: linear-gradient(135deg, #d4a017, #b8860b); }
.servis-pkg-tag--orange { background: #ea580c; }
.servis-pkg-tag--purple { background: #7c3aed; }

/* Inline tag — skrytý v grid, viditeľný v list */
.servis-pkg-tag-inline {
	display: none;
	padding: 2px 10px;
	font-size: 9px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #fff;
	border-radius: 4px;
	margin-left: 8px;
	vertical-align: middle;
	line-height: 1.3;
}

.servis-pkg-header {
	padding: 28px 24px 0;
}

.servis-pkg-name {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 0;
	line-height: 1.3;
	color: #1d1d1f;
}

.servis-pkg-price-block {
	padding: 14px 24px 14px;
	border-bottom: 1px solid #f0f0f2;
}

.servis-pkg-price {
	font-size: 36px;
	font-weight: 800;
	letter-spacing: -1.5px;
	line-height: 1;
	color: #1d1d1f;
}

.servis-pkg-price span {
	font-size: 18px;
	font-weight: 600;
	color: #86868b;
}

.servis-pkg-price--free {
	color: #16a34a;
	font-size: 24px;
	letter-spacing: 0;
}

/* Vernostná zľava */
.servis-pkg-discount-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	flex-wrap: wrap;
}

.servis-pkg-discount-tag {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	background: #c3181a;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	border-radius: 999px;
	letter-spacing: 0.3px;
	flex-shrink: 0;
}

.servis-pkg-discount-price {
	font-size: 14px;
	font-weight: 700;
	color: #c3181a;
}

.servis-pkg-discount-condition {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px dashed #e5e7eb;
	font-size: 11px;
	line-height: 1.4;
	color: #6b7280;
	font-style: italic;
}

.servis-pkg-features {
	padding: 16px 24px;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.servis-pkg-feature {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-size: 13px;
	color: #6b7280;
	line-height: 1.4;
}

.servis-pkg-feature svg {
	flex-shrink: 0;
	margin-top: 1px;
	stroke: #16a34a;
}

.servis-pkg-description {
	padding: 0 24px 12px;
	font-size: 12.5px;
	color: #6b7280;
	line-height: 1.5;
}

.servis-pkg-description p { margin: 0 0 6px; }
.servis-pkg-description p:last-child { margin-bottom: 0; }
.servis-pkg-description ul,
.servis-pkg-description ol { margin: 4px 0; padding-left: 20px; }
.servis-pkg-description a { color: inherit; text-decoration: underline; }

.servis-pkg-cta {
	padding: 16px 24px 24px;
	margin-top: auto;
}

.servis-pkg-btn {
	display: block;
	text-align: center;
	padding: 12px;
	background: var(--color-primary);
	border: none;
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	transition: background 0.2s, transform 0.15s;
}

.servis-pkg-card:hover .servis-pkg-btn {
	background: #a01216;
}

/* ─── Grid view (default) ───────────────────────────────── */

.servis-packages--grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
}

/* ─── List view ─────────────────────────────────────────── */

.servis-packages--list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.servis-packages--list .servis-pkg-card {
	display: grid;
	grid-template-columns: 1fr auto auto;
	grid-template-rows: auto;
	align-items: center;
	padding: 20px 24px;
}

.servis-packages--list .servis-pkg-card:hover {
	transform: translateX(4px);
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.servis-packages--list .servis-pkg-header {
	padding: 0;
	grid-column: 1;
	grid-row: 1;
}

.servis-packages--list .servis-pkg-name {
	font-size: 16px;
	margin-bottom: 0;
}

/* V list view: skryť ribbon, zobrazit inline tag */
.servis-packages--list .servis-pkg-tag {
	display: none;
}

.servis-packages--list .servis-pkg-tag-inline {
	display: inline-block;
}

.servis-packages--list .servis-pkg-price-block {
	padding: 0 0 0 24px;
	border: none;
	border-bottom: none;
	grid-column: 2;
	grid-row: 1;
}

.servis-packages--list .servis-pkg-price {
	font-size: 20px;
}

.servis-packages--list .servis-pkg-price span {
	font-size: 14px;
}

.servis-packages--list .servis-pkg-price--free {
	font-size: 17px;
}

.servis-packages--list .servis-pkg-features {
	padding: 8px 0 0;
	grid-column: 1 / -1;
	grid-row: 2;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 4px 14px;
}

.servis-packages--list .servis-pkg-feature {
	font-size: 12px;
	color: #6b7280;
}

.servis-packages--list .servis-pkg-cta {
	padding: 0 0 0 24px;
	grid-column: 3;
	grid-row: 1;
}

.servis-packages--list .servis-pkg-btn {
	background: none;
	border: none;
	padding: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-primary);
}

.servis-packages--list .servis-pkg-card:hover .servis-pkg-btn {
	background: none;
	color: #a01216;
}

/* ─── Waiting banner ────────────────────────────────────── */

.servis-waiting-banner {
	background: rgba(195,22,26,0.08);
	border: 1px solid rgba(195,22,26,0.2);
	border-radius: var(--radius-sm);
	padding: 12px 20px;
	font-size: 14px;
	color: var(--color-text-secondary);
	margin-bottom: 24px;
	text-align: center;
}

.servis-waiting-banner strong {
	color: var(--color-primary);
}

.servis-waiting-banner--green {
	background: rgba(22,163,74,0.08);
	border-color: rgba(22,163,74,0.25);
	animation: servis-pulse 2.5s ease-in-out infinite;
}

.servis-waiting-banner--green strong {
	color: #16a34a;
}

@keyframes servis-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
	50% { box-shadow: 0 0 12px 2px rgba(22,163,74,0.15); }
}

/* ─── Calendar grid (step 3) ────────────────────────────── */

.servis-calendar-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 10px;
}

.servis-day-card {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: var(--radius-sm);
	padding: 16px 12px;
	text-align: center;
	text-decoration: none;
	color: #1d1d1f;
	transition: transform 0.15s, border-color 0.2s, box-shadow 0.2s;
}

.servis-day-card:hover:not(.servis-day-card--disabled) {
	transform: translateY(-2px);
	border-color: var(--color-primary);
	box-shadow: 0 4px 15px rgba(0,0,0,0.12);
}

.servis-day-card--disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.servis-day-card--closed .servis-day-status {
	color: #ef4444;
	font-size: 9px;
}

.servis-day-num {
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -1px;
	line-height: 1;
	margin-bottom: 4px;
	color: #1d1d1f;
}

.servis-day-name {
	font-size: 12px;
	font-weight: 600;
	color: #6b7280;
}

.servis-day-month {
	font-size: 11px;
	color: #9ca3af;
	margin-bottom: 8px;
}

.servis-day-status {
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #9ca3af;
}

.servis-day-status--free {
	color: #16a34a;
}

/* Hover na dátumové karty ako tlačidlo */
.servis-day-card:not(.servis-day-card--disabled):hover {
	background: var(--color-primary);
	border-color: var(--color-primary);
}

.servis-day-card:not(.servis-day-card--disabled):hover .servis-day-num,
.servis-day-card:not(.servis-day-card--disabled):hover .servis-day-name,
.servis-day-card:not(.servis-day-card--disabled):hover .servis-day-month,
.servis-day-card:not(.servis-day-card--disabled):hover .servis-day-status {
	color: #fff;
}

/* ─── Chosen location (kalendár) ────────────────────────── */

.servis-chosen-location {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 12px;
	font-size: 14px;
	text-align: center;
}

.servis-chosen-location-label {
	color: #ffffff;
	font-weight: 600;
}

.servis-chosen-location-name {
	color: #ffffff;
	font-weight: 800;
	background: var(--color-primary);
	padding: 2px 10px;
	border-radius: 4px;
	font-size: 13px;
}

.servis-chosen-location-hours {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	color: rgba(255,255,255,0.7);
	font-size: 13px;
	width: 100%;
	margin-top: 4px;
}

.servis-chosen-location-hours svg {
	stroke: var(--color-text-secondary);
}

/* ─── Selected package info ─────────────────────────────── */

.servis-selected-pkg {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-left: 4px solid var(--color-primary);
	border-radius: var(--radius-sm);
	padding: 16px 20px;
	margin-bottom: 16px;
}

.servis-selected-pkg-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: rgba(196,24,28,0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.servis-selected-pkg-icon svg {
	stroke: var(--color-primary);
}

.servis-selected-pkg-label {
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #6b7280;
}

.servis-selected-pkg-name {
	font-size: 16px;
	font-weight: 700;
	color: #1d1d1f;
}

.servis-selected-pkg-loc {
	margin-left: auto;
	font-size: 13px;
	color: #6b7280;
	white-space: nowrap;
}

/* ─── Summary bar (step 4) ──────────────────────────────── */

.servis-summary-bar {
	display: flex;
	gap: 0;
	background: var(--color-bg-light);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	margin-bottom: 24px;
	overflow: hidden;
}

.servis-summary-item {
	flex: 1;
	padding: 16px 20px;
	border-right: 1px solid var(--color-border);
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.servis-summary-item:last-child {
	border-right: none;
}

.servis-summary-label {
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--color-text-secondary);
}

.servis-summary-value {
	font-weight: 700;
	color: #ffffff;
	font-size: 15px;
}

.servis-summary-price {
	font-weight: 700;
	color: #ffffff;
	font-size: 16px;
}

.servis-summary-discount {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	flex-wrap: wrap;
}

.servis-summary-discount-tag {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	background: #ff4a4d;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	border-radius: 999px;
	letter-spacing: 0.3px;
	flex-shrink: 0;
}

.servis-summary-discount-price {
	font-size: 13px;
	font-weight: 700;
	color: #ff6b6e;
}

.servis-back-btn {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	color: var(--color-text-secondary);
	text-decoration: none;
	padding: 6px 14px;
	border: 1px solid var(--color-border);
	border-radius: 6px;
	transition: all 0.15s;
}

.servis-back-btn:hover {
	color: var(--color-text);
	border-color: rgba(255,255,255,0.3);
}

/* ─── Form (step 4) ─────────────────────────────────────── */

.servis-form-card {
	background: var(--color-bg-light);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 32px;
}

.servis-form-heading {
	font-size: 15px;
	font-weight: 700;
	margin: 24px 0 16px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--color-border);
}

.servis-form-heading:first-of-type {
	margin-top: 0;
}

.servis-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 16px;
}

.servis-form-grid--3 {
	grid-template-columns: 1fr 1fr 1fr;
}

.servis-form-group {
	margin-bottom: 16px;
}

.servis-form-group label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: rgba(255,255,255,0.7);
	margin-bottom: 6px;
}

.servis-input {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid #d1d5db;
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-family: inherit;
	background: #f9fafb;
	color: #1d1d1f;
	transition: border-color 0.2s, background 0.2s;
}

.servis-input:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(195,22,26,0.12);
	background: #fff;
}

.servis-input:not(:placeholder-shown) {
	background: #ffffff;
	color: #1d1d1f;
}

.servis-input::placeholder {
	color: #9ca3af;
}

select.servis-input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231d1d1f' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 36px;
	cursor: pointer;
}

select.servis-input option {
	color: #1d1d1f;
	background: #fff;
}

textarea.servis-input {
	resize: vertical;
	min-height: 60px;
}

.servis-form-error {
	background: rgba(239,68,68,0.1);
	border: 1px solid rgba(239,68,68,0.3);
	color: #fca5a5;
	padding: 10px 16px;
	border-radius: var(--radius-sm);
	font-size: 13px;
	margin-bottom: 16px;
}

.servis-form-warranty {
	background: rgba(245,158,11,0.08);
	border: 1px solid rgba(245,158,11,0.2);
	border-radius: var(--radius-sm);
	padding: 14px 16px;
	margin-top: 12px;
}

.servis-form-warranty label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	cursor: pointer;
}

.servis-form-warranty input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: #f59e0b;
}

.servis-form-captcha {
	display: flex;
	align-items: flex-end;
	gap: 16px;
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid var(--color-border);
}

.servis-captcha-img {
	border-radius: var(--radius-sm);
	cursor: pointer;
	display: block;
}

.servis-captcha-hint {
	display: block;
	font-size: 10px;
	color: var(--color-text-secondary);
	margin-top: 4px;
}

.servis-form-gdpr {
	margin-top: 16px;
}

.servis-form-gdpr label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	cursor: pointer;
	color: var(--color-text-secondary);
}

.servis-form-gdpr input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--color-primary);
}

/* ─── Bought at CykloShop info ──────────────────────────── */

.servis-form-bought-info {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: rgba(59,130,246,0.08);
	border: 1px solid rgba(59,130,246,0.2);
	border-radius: var(--radius-sm);
	padding: 12px 16px;
	margin-bottom: 16px;
	font-size: 13px;
	color: #93c5fd;
	line-height: 1.5;
}

.servis-form-bought-info svg {
	flex-shrink: 0;
	margin-top: 1px;
	stroke: #60a5fa;
}

/* ─── Discount alert (s konfetami) ─────────────────────── */

.servis-form-discount-alert {
	display: flex;
	align-items: center;
	gap: 16px;
	background: linear-gradient(135deg, rgba(22,163,74,0.15) 0%, rgba(251,191,36,0.15) 100%);
	border: 1px solid rgba(22,163,74,0.4);
	border-radius: var(--radius-sm);
	padding: 16px 20px;
	margin-bottom: 16px;
	position: relative;
	overflow: hidden;
}

.servis-form-discount-alert::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%);
	transform: translateX(-100%);
	transition: transform 0.6s ease;
}

.servis-form-discount-alert.pop::before {
	transform: translateX(100%);
}

.servis-form-discount-alert.pop {
	animation: discountPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes discountPop {
	0%   { transform: scale(0.9); opacity: 0; }
	60%  { transform: scale(1.03); opacity: 1; }
	100% { transform: scale(1); opacity: 1; }
}

.servis-form-discount-emoji {
	font-size: 32px;
	line-height: 1;
	flex-shrink: 0;
	animation: emojiWiggle 0.6s ease-in-out;
}

@keyframes emojiWiggle {
	0%, 100% { transform: rotate(0); }
	25%      { transform: rotate(-15deg) scale(1.2); }
	50%      { transform: rotate(15deg) scale(1.2); }
	75%      { transform: rotate(-10deg) scale(1.1); }
}

.servis-form-discount-body {
	flex: 1;
	min-width: 0;
}

.servis-form-discount-title {
	font-size: 15px;
	font-weight: 700;
	color: #86efac;
	margin-bottom: 6px;
	letter-spacing: 0.2px;
}

.servis-form-discount-prices {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.servis-form-discount-old {
	font-size: 14px;
	color: rgba(255,255,255,0.5);
	text-decoration: line-through;
	text-decoration-thickness: 1.5px;
}

.servis-form-discount-arrow {
	color: rgba(255,255,255,0.4);
	font-size: 14px;
}

.servis-form-discount-new {
	font-size: 20px;
	font-weight: 800;
	color: #fbbf24;
	letter-spacing: -0.3px;
}

.servis-form-discount-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	background: #16a34a;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	border-radius: 999px;
	letter-spacing: 0.3px;
}

.servis-form-discount-note {
	margin-top: 8px;
	font-size: 11px;
	color: rgba(255,255,255,0.6);
	font-style: italic;
	line-height: 1.4;
}

/* ─── Price disclaimer ──────────────────────────────────── */

.servis-form-price-note {
	font-size: 11px;
	color: rgba(255,255,255,0.35);
	margin-top: 16px;
	line-height: 1.5;
}

.servis-price-disclaimer {
	font-size: 11px;
	color: rgba(255,255,255,0.35);
	margin-top: 16px;
	line-height: 1.5;
	text-align: center;
}

.servis-form-submit {
	margin-top: 24px;
	text-align: center;
}

.servis-btn-submit {
	background: var(--color-primary);
	color: #fff;
	border: none;
	padding: 14px 40px;
	border-radius: var(--radius-sm);
	font-size: 15px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.2s, transform 0.15s;
	text-decoration: none;
}

.servis-btn-submit:hover {
	background: #a01216;
	transform: translateY(-1px);
}

.servis-btn-outline {
	background: transparent;
	color: var(--color-text);
	border: 1px solid var(--color-border);
	padding: 14px 40px;
	border-radius: var(--radius-sm);
	font-size: 15px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: border-color 0.2s;
	text-decoration: none;
	display: inline-block;
}

.servis-btn-outline:hover {
	border-color: var(--color-text-secondary);
}

/* ─── Thanks (step 5) ───────────────────────────────────── */

.servis-thanks-icon {
	margin-bottom: 24px;
}

.servis-thanks-title {
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -1px;
	margin-bottom: 16px;
}

.servis-thanks-desc {
	font-size: 16px;
	color: var(--color-text-secondary);
	line-height: 1.6;
	margin-bottom: 8px;
}

.servis-thanks-sub {
	font-size: 14px;
	color: var(--color-primary);
	font-weight: 600;
	margin-bottom: 32px;
}

.servis-thanks-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

/* ─── Servis responsive ─────────────────────────────────── */

@media (max-width: 768px) {
	.servis-hero-title { font-size: 24px; }

	.servis-stepper { gap: 0; padding: 16px 12px 24px; flex-wrap: wrap; justify-content: center; }
	.servis-step { font-size: 10px; padding: 4px 6px; }
	.servis-step:not(:last-child)::after { display: none; }

	.servis-section { padding: 0 12px 32px; }
	.servis-section-title { font-size: 22px; }

	.servis-section-header { flex-direction: column; gap: 12px; }

	.servis-packages--grid { grid-template-columns: 1fr; }
	.servis-packages--list .servis-pkg-card { grid-template-columns: 1fr auto; padding: 16px; }
	.servis-packages--list .servis-pkg-cta { display: none; }
	.servis-packages--list .servis-pkg-features { gap: 2px 10px; }

	.servis-calendar-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
	.servis-day-num { font-size: 22px; }

	.servis-summary-bar { flex-direction: column; }
	.servis-summary-item { border-right: none; border-bottom: 1px solid var(--color-border); }
	.servis-summary-item:last-child { border-bottom: none; }

	.servis-form-card { padding: 20px; }
	.servis-form-grid { grid-template-columns: 1fr; }
	.servis-form-grid--3 { grid-template-columns: 1fr; }

	.servis-form-captcha { flex-direction: column; align-items: stretch; }

	.servis-thanks-title { font-size: 24px; }
}

/* ═══ Balíček bez ceny — "Iný úkon" / hide_price ═══════════════ */
.servis-pkg-card--no-price { cursor: default; }

.servis-pkg-price-block--on-request {
	padding: 20px 24px 20px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
/* Zvýšená špecifickosť (2 classes) aby prebila .servis-pkg-price (1 class). */
.servis-pkg-price.servis-pkg-price--on-request {
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.5px;
	line-height: 1.1;
	color: #1d1d1f;
	white-space: nowrap;
}
.servis-pkg-price-note {
	font-size: 12px;
	color: #6b7280;
	line-height: 1.4;
}
.servis-packages--list .servis-pkg-price-block--on-request { padding: 0; align-self: center; }

.servis-pkg-btn--custom,
.servis-pkg-btn--primary {
	cursor: pointer;
	font-family: inherit;
	width: 100%;
}
.servis-pkg-btn--custom:hover,
.servis-pkg-btn--primary:hover { background: #a01216; }
.servis-pkg-btn--primary:disabled { opacity: 0.6; cursor: wait; }

/* ═══ Info alert v kroku 4 (cena bude upresnená) ═══ */
.servis-form-price-info {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	color: #1e40af;
	padding: 12px 16px;
	border-radius: var(--radius-sm);
	font-size: 14px;
	margin-bottom: 16px;
}
.servis-form-price-info svg { flex-shrink: 0; }

/* ═══ Modal „Iný úkon" — používa bd-modal pattern + malé doplnky ═══ */
.bd-input.is-invalid {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(195,24,26,0.15);
}
.bd-modal-cancel {
	background: transparent;
	color: #86868b;
	border: 1px solid #e5e5ea;
	padding: 11px 26px;
	border-radius: 34px;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	font-family: inherit;
	transition: all 0.15s;
	margin-top: 8px;
}
.bd-modal-cancel:hover {
	background: #f5f5f7;
	color: #1d1d1f;
	border-color: #d2d2d7;
}