@charset "utf-8";

:root {
	/* Tikecik default theme colors */
	--events-primary: #F5A623;
	--ark-header-bg: #1F2937;
	--ark-header-text: #FFFFFF;
	--ark-navbar-user-text: rgba(255, 255, 255, 0.85);
    --ark-accent: #e91e63;

	/* Two-tone focus ring. The storefront ships both light skins (mini, green,
	   white-content) and dark ones (beer #1D1C19, livents #0A0A0F,
	   muzeum-swiatla #141428), so a single ring colour would vanish on one of
	   them. The halo carries the indicator on dark grounds (#FFFFFF on #1D1C19
	   = 17.2:1), the ring carries it on light ones (#1A1A1A on #FFFFFF =
	   17.4:1); on a mid-tone both clear 3:1. Every use site repeats these as
	   var() fallbacks — this file also loads with no skin at all on the events
	   aggregator. */
	--ark-focus-halo: #FFFFFF;
	--ark-focus-ring: #1A1A1A;
}


html,
body {
	min-height: 100%;
}


h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Roboto Slab', serif;
	color: #333333;
}




*+p {
	margin-top: 6px;
	margin-bottom: 6px;
}

.uk-accordion {
	max-width: 100% !important;
}



.uk-button-large {
	font-family: 'Roboto Slab', serif;
}


/* Form field errors — the one piece of text that tells a customer why their input
   was rejected, so it is held to WCAG AA. #FFFFFF on #C0392B computes 5.44:1; the
   old #F3E7D2 on #EC705E computed 2.44:1. The error is never carried by colour
   alone: the #FF0000 border stays. Declared exactly once repo-wide (no skin
   overrides it) and also reached by the tenant-less events aggregator via
   jtemplates/events/base.html:57, so it carries its own colours. */
.ark-field-error {
	background-color: #C0392B;
	color: #FFFFFF;
	border-color: #FF0000;
}

#header {
	z-index: 1;
	position: relative;
}

#content {
	padding-bottom: 30px;
}

.ark-event-thumb h1 {
	margin-top: 0px;
	margin-bottom: 4px;
	font-weight: normal;
}


.uk-panel-title {
	font-size: 22px;
	font-weight: normal;
}

.uk-grid>* {
	margin: 5px 0px;
}

.uk-form-width-large {
	width: 534px;
}

.uk-tab>li>a {
	text-transform: uppercase;

}

.uk-nav-side>li>a {
	margin-bottom: 1px;
	font-weight: bold !important;
	padding-top: 8px;
	padding-bottom: 8px;
}



.uk-comment-body {
	padding-left: 0px;
	padding-top: 10px;
}


.ark-navbar {
	border: none;
}

.ark-navbar .uk-navbar-brand {
	visibility: hidden;
}

.ark-navbar-show-title {
	z-index: 100;
}

.ark-navbar-show-title .uk-navbar-brand {
	visibility: visible;
}

/* Navbar container layout */
.ark-navbar-container {
	display: flex;
	align-items: stretch; /* Stretch items to full height */
	justify-content: space-between;
	flex-wrap: nowrap;
    margin: 0 auto; /* Ensure centering */
}

/* Prevent menu from wrapping */
.ark-navbar .uk-navbar-nav {
	display: flex;
	flex-wrap: nowrap;
}

/* Menu items - truncate long text */
.ark-navbar .uk-navbar-nav>li>a {
    display: flex;
    align-items: center; /* Center text vertically */
    max-width: 180px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	height: 48px;
}

/* Right side of navbar */
.ark-navbar-right {
	display: flex;
	align-items: center; /* Icons center vertically */
	margin-left: auto;
}

/* Home icon (mobile only) */
.ark-home-icon {
	display: inline-block;
	padding: 10px 15px;
	font-size: 24px;
	color: #FFFFFF;
	text-decoration: none;
}

.ark-home-icon:hover {
	color: #FFFFFF;
	text-decoration: none;
}

/* Hamburger icon (mobile only) */
.ark-hamburger-icon {
	display: inline-block;
	padding: 10px 15px;
	font-size: 24px;
	color: #FFFFFF;
	text-decoration: none;
}

.ark-hamburger-icon:hover {
	color: #FFFFFF;
	text-decoration: none;
}

/* Logo in navbar (desktop) */
.ark-navbar-logo {
	display: flex;
    align-items: center;
	margin-right: 10px;
	vertical-align: middle;
}

.ark-navbar-logo img {
	max-height: 40px;
	width: auto;
	vertical-align: middle;
}

/* Slideshow in header */
.ark-slideshow {
	margin-bottom: 20px;
}

.ark-slideshow img {
	width: 100%;
	height: auto;
}

/* Flags container in navbar */
.ark-navbar-right .ark-flags {
	display: flex;
	align-items: center;
}

.ark-navbar-right .ark-flags ul {
	margin: 0;
	padding: 0;
}

/* Mobile layout adjustments */
@media (max-width: 767px) {
	.ark-navbar-container {
		padding: 5px 0;
	}

	.ark-navbar-right {
		gap: 5px;
	}

	.ark-basket-icon {
		padding: 10px 10px;
		font-size: 24px;
	}
}

/* Medium desktop - compact menu to fit one row */
@media (min-width: 960px) and (max-width: 1300px) {
	.ark-navbar-container {
		flex-wrap: nowrap;
	}

	.ark-navbar .uk-navbar-nav>li>a {
		padding: 10px 8px !important;
		font-size: 13px !important;
		max-width: 150px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.ark-navbar-right .ark-flags ul {
		margin-right: 5px;
	}

	.ark-navbar-right .uk-navbar-content {
		padding: 0 5px;
	}

	.ark-basket-icon {
		padding: 10px 10px;
		font-size: 24px;
	}
}

.ark-plain-panel .uk-form-row+.uk-form-row {
	margin-top: 10px;
}


.ark-hidden {
	display: none;
}

.ark-hidden-phones {
	display: inline-block;
}

.ark-visible-phones {
	display: none;
}


.ark-plain-panel h3 {
	font-size: 20px;
	display: inline-block;
	padding: 4px 6px;
}



.ark-logo span {
	display: none;
}

.ark-social {
	clear: both;
	float: none;
}

.ark-social a {
	margin-left: 10px;
}


.ark-nav-card-panel {
	display: block;
	padding: 10px 20px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	height: 70px;
	margin-bottom: -50px;
	position: relative;
}



.ark-nav-card-top {
	font-family: 'Roboto Slab', sans-serif;
	font-weight: bold;
	font-size: 16px;
	display: block;
	margin-top: 10px;
	margin-bottom: 12px;
}

.ark-nav-card-top span {
	font-weight: bold;
	font-size: 21px;
}

.ark-nav-card-panel_info {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 13px;
	display: inline-block;

}

.ark-nav-card-panel_info span {
	display: inline;
}

@media (max-width: 480px) {
	.ark-nav-card-panel_info span {
		display: none;
	}
}

.ark-nav-card-panel_timer {
	font-family: 'Ubuntu Mono';
	font-size: 24px;
	display: inline-block;
	color: #BE987E;
	position: absolute;
	right: 20px;
}

.ark-basket-icon {
	display: inline-block;
	position: relative;
	padding: 10px 15px;
	font-size: 28px;
	color: #FFFFFF;
	text-decoration: none;
	transition: all 0.2s ease;
}

.ark-basket-icon:hover {
	color: #FFFFFF;
	text-decoration: none;
	transform: scale(1.1);
}

.ark-basket-badge {
	position: absolute;
	top: 2px;
	right: 2px;
	background-color: #e74c3c;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
	min-width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	border-radius: 50%;
	padding: 0 4px;
}

.ark-basket {
	position: absolute;
	right: 10px;
	top: 0px;
}

.ark-card-panel {
	width: 330px;
	height: 80px;
	margin: 0;
}

.ark-card-panel_title {
	display: block;
	font-family: 'Roboto Slab', sans-serif;
	font-weight: bold;
	font-size: 28px;
	position: absolute;
	padding: 4px 4px;
}

.ark-card-panel_total {
	font-size: 18px;
	position: absolute;
	right: 8px;
	top: 8px;
	font-family: 'Roboto Slab', sans-serif;
}

.ark-card-panel_info {
	position: absolute;
	left: 0px;
	bottom: 6px;
}

.ark-card-panel_timer {
	font-family: 'Ubuntu Mono';
	font-size: 44px;
	position: absolute;
	right: 8px;
	bottom: 3px;
}

.ark-sidebar {
	margin-top: 10px;
}

.ark-plain-panel {
	font-size: 12px;
}

.ark-news-item {
	margin-bottom: 15px;
	padding: 5px;
}

.ark-news-item .ark-news-item_title {
	font-family: 'Roboto Slab', sans-serif;
	font-size: 18px;
	font-weight: bold;

}

.ark-news-item>p {
	margin-top: 5px;
}





.ark-event-thumb {
	padding: 2px 10px;
	position: relative;
}


.ark-event-thumb_img {
	float: left;
	width: 120px;
	margin-top: -16px;
	margin-right: 10px;
	margin-left: -2px;
	margin-bottom: 8px;
}

.ark-event-thumb_category {
	position: absolute;
	top: 0px;
	right: 8px;
	text-align: right;
	font-size: 14px;
	line-height: 30px;
}

.ark-event-thumb_schedules {
	padding-top: 8px;
	margin-left: 0px;
	overflow: auto;
	margin-top: 0px;

}

.ark-event-thumb_schedules a:hover {
	text-decoration: none;
}



.ark-event-term {
	cursor: pointer;
	margin-bottom: 5px;
	padding: 0px 12px;
}

/*.ark-event-term p {
	display: inline-block;
}
.ark-event-term:hover p {

    text-decoration:none !important;
}*/

.ark-event-term_data p {
	font-weight: normal;
	font-size: 17px;
	line-height: 22px;
	margin: 0px;
}

.ark-event-term_data p.tik-karnet-nazwa {
	font-family: 'Roboto Slab', sans-serif;
	font-size: 20px;

}

.ark-event-term_data p span {
	font-size: 12px;
	line-height: 14px;
}

.ark-event-img {
	float: left;
	width: 140px;
	margin-top: 0px;
	border: 2px solid #FFFFFF;
	margin-right: 10px;
	margin-left: -2px;
}

.ark-event-desc-short {
	font-size: 18px;
}

.ark-event_sectors-header {
	padding: 14px;
	font-family: 'Roboto Slab', sans-serif;
	font-size: 20px;
	line-height: 28px;
}

.ark-event_sector-thumb {
	padding: 12px 17px;
	margin-bottom: 12px;
}

.ark-event_sector-thumb p {
	margin-top: 4px;
	margin-bottom: 0px;
	font-size: 12px;
}

.ark-event_sector-type {
	float: right;
	width: 250px;
	text-align: right;
	margin-right: 14px;
}

.ark-event-desc-box {
	padding-bottom: 5px;
	margin-bottom: 10px;
}


.ark-event_sector-name {
	font-size: 22px;
	font-family: 'Roboto Slab', sans-serif;
	line-height: 30px;
}

.ark-event_sector-name p span {
	font-size: 28px;
}

.ark-sector-exit_button {
	float: right;
}

.ark-sector-exit_button button {
	line-height: 50px;
	margin-top: -10px;
}

.ark-sector-seats_event-name {
	display: inline-block;
	margin-right: 20px;
}

@media (max-width: 768px) {
	.ark-sector-exit_button {
		float: none;
		display: block;
		width: 100%;
		margin-bottom: 18px;
	}

	.ark-sector-exit_button button {
		width: 100%;
		line-height: 30px;
	}

	.ark-sector-seats_event-name {
		display: block;
	}
}


.ark-event_tickets-type-item {
	padding: 0px 3px;
	margin-bottom: 8px;
	margin-left: 0px;
	padding-right: 15px;
	border: 1px solid #DDDDDD;

}

.ark-event_tickets-type-item>* {
	padding-left: 0px;
}

.ark-total-txt {
	font-size: 13px;
}

.ark-ticket-name-box {
	margin-top: 12px !important;
	margin-bottom: 12px;
}

.ark-ticket-name-box .uk-form-label {
	display: inline-block;
	color: #333333;
}

.ark-ticket-name-box .uk-form-controls {
	display: inline-block;
}

.ark-ticket-name-box input[type="text"] {
	background: #FFFFFF !important;
	width: 300px;
}

.ark-dodatki-box {
	background: #FFFFFF;
	margin: 10px;

}



.ark-event_tickets-type-name,
.ark-event_tickets-type-price {
	font-family: 'Roboto Slab', sans-serif;
	font-size: 15px;
	line-height: 26px;
}

.ark-event_tickets-type-price span.ukryj-male {
	display: inline;
}

.ark-event_tickets-avail {
	color: #FFFFFF;
	line-height: 30px;
	text-align: center;
	font-size: 13px;
	padding: 0px 4px;
}

#tickets-total-top>div>div {
	font-family: 'Roboto Slab', sans-serif;
	font-size: 18px;
	line-height: 40px;
}

#tickets-total>div>div {
	background-color: #FFFFFF;
	padding-top: 10px;
	padding-bottom: 10px;
	font-family: 'Roboto Slab', sans-serif;
	font-size: 18px;
	line-height: 40px;
}

#tickets-total>div> :first-child,
#tickets-total>div> :last-child {
	background: none;
}

#tickets-total .ark-total-txt {
	text-align: right;
	font-size: 14px;
}

.ark-cart-total {
	background-color: #FFF;
	font-family: 'Roboto Slab', sans-serif;
	font-size: 18px;
	line-height: 50px;
	text-align: center;
}

.ark-tickets-types-box-mobile {
	display: none;
}


.ark-seats-info p {
	font-size: 12px;
	margin-top: 3px;
	margin-bottom: 3px;
	text-align: center;
}

.ark-messages-seats {
	color: #F30;
	font-size: 22px;
	text-align: center;
}

.ark-scena {
	display: block;
	width: 80%;
	margin: 0 auto;
}

.ark-seats-container {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-height: 220px; /* Space for buttons */
	overflow: hidden;
	position: relative;
	text-align: left;
	background: #fdfdfd;
	border: 1px solid #eee;
	border-radius: 8px;
	margin: 0 auto;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.ark-gesture-hint {
	box-sizing: border-box;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	text-align: center;
	font-size: 18px;
	z-index: 150;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;
	border-radius: 8px;
}

#seats {
	display: block;
	margin: 0;
}

.ark-seats-container.has-scroll {
	overflow: scroll;
}

.ark-zoom-controls {
	position: absolute;
	bottom: 20px;
	right: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	z-index: 100;
}

.ark-zoom-btn {
	width: 44px;
	height: 44px;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid #ccc;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	color: #333;
	font-size: 20px;
	transition: all 0.2s;
}

.ark-zoom-btn:hover {
	background: #fff;
	box-shadow: 0 4px 8px rgba(0,0,0,0.3);
	transform: translateY(-1px);
}

.ark-zoom-btn:active {
	transform: translateY(0);
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

@media (max-width: 768px) {
	.ark-zoom-controls {
		bottom: 10px;
		right: 10px;
	}

.ark-gesture-hint {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	text-align: center;
	font-size: 18px;
	z-index: 150;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;
	border-radius: 4px;
}

.ark-gesture-hint.is-visible {
	opacity: 1;
}

.ark-gesture-hint i {
	display: block;
	font-size: 40px;
	margin-bottom: 10px;
}
	.ark-zoom-btn {
		width: 48px;
		height: 48px;
		font-size: 24px;
	}
}



@media (max-width: 768px) {
	#tickets-total>div> :last-child {
		background: none;
	}

	.ark-scena {
		float: none;
		margin-left: auto;
		margin-right: auto;
	}

	.ark-tickets-types-box {
		margin-left: 0%;
		margin-right: 0%;
	}
}




.ark-subnav-categories {
	margin: 0px;
}


.ark-offcanvas-title {
	font-family: 'Roboto Slab', sans-serif;
	display: block;
	font-weight: bold;
	font-size: 20px;
	margin: 30px 14px;
	color: #f7bc88;
}

a.seatsToBasketNumbered {
	font-family: 'Roboto Slab', sans-serif;
	color: #003366;
	font-size: 18px;
	/*padding-left: 60px;
	background: url(../img/basket_big.png) no-repeat left #33CC00;*/
	text-align: center;
	font-weight: bold;
	line-height: 20px;
	padding: 10px;
	margin-right: 4px;
	margin-top: -22px;
	margin-bottom: -22px;

	background-color: #82bb42;
	background-image: -webkit-linear-gradient(top, #9fd256, #6fac34);
	background-image: linear-gradient(to bottom, #9fd256, #6fac34);
	border-color: rgba(0, 0, 0, 0.2);
	border-bottom-color: rgba(0, 0, 0, 0.4);
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);

}



#tickets-total a.seatsToBasketNumbered {}

#tickets-total-top a.seatsToBasketNumbered {
	font-size: 16px;
	text-align: center;
	font-weight: bold;
	line-height: 20px;
	padding: 10px;
	margin-right: 4px;
	margin-top: -22px;
	margin-bottom: -22px;

	background-color: #82bb42;
	background-image: -webkit-linear-gradient(top, #9fd256, #6fac34);
	background-image: linear-gradient(to bottom, #9fd256, #6fac34);
	border-color: rgba(0, 0, 0, 0.2);
	border-bottom-color: rgba(0, 0, 0, 0.4);
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);

}



#tickets-total a.seatsToBasketNumbered:hover,
#tickets-total-top a.seatsToBasketNumbered:hover {
	color: #FFFFFF;
}


.ark-cart-title {
	background-color: #331105;
	font-family: 'Roboto Slab', sans-serif;
	font-weight: bold;
	padding-left: 20px;
	padding-top: 6px;
	padding-bottom: 6px;
	margin-bottom: 12px;
	color: #F2E7D2;
}

.ark-cart-title-text {
	font-size: 26px;
	font-weight: bold;
	width: 25%;
	line-height: 40px;
	float: left;
}

.ark-cart-title-timer-info {
	position: absolute;
	left: 0px;
	bottom: 6px;
}

.ark-cart-title-timer-box {
	display: inline-block;
	position: relative;
	float: right;
	height: 40px;
	width: 270px;
	margin: 2px 0px;
	font-size: 14px;
	line-height: 14px;
}

.ark-card-tickets-timer {
	font-family: 'Ubuntu Mono';
	font-size: 30px;
	position: absolute;
	right: 8px;
	bottom: 14px;
}


/*
 * Blocks
 */

.ark-middle,
.ark-section,
.ark-footer {
	padding: 30px 0 8px 0;
}

.ark-footer-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
}

.ark-footer-tikecik {
	padding-left: 0px;
	text-align: center;
	margin-top: 15px;
}

.ark-tikecik-info {
	font-size: 12px;
	text-align: right;
	margin-top: 0 !important;
}

.ark-tikecik-info p:first-child {
	margin-bottom: 0;
}

.ark-tikecik-info p {
	margin-top: 2px;
	margin-bottom: 2px;
}

.ark-footer ul {
	margin-top: 0px;
	padding-left: 9px;
}

.ark-footer li {
	display: inline-block;
	margin-right: 24px;

}

.ark-footer li a {
	display: block;
	padding: 5px 4px;
}

/* Footer Link Buttons */
.ark-footer p a {
    display: inline-block;
    padding: 6px 12px;
    margin: 4px 2px;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 4px;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

.ark-footer p a:hover {
    background-color: rgba(255,255,255,0.2);
    color: #fff;
    border-color: #fff;
    text-decoration: none;
}

.ark-small_text {
	font-size: 14px;
}




.ark-small_text {
	font-size: 14px;
}

.ark-sale-off {
	padding: 10px;
	border: 1px solid #777777;
	background-color: rgba(150, 150, 150, 0.2);
	border-radius: 5px;
	text-align: center;
	color: #555555;
}



@media (min-width: 930px) {
	.uk-width-medium-1-4 {
		width: 25%;
	}

}

@media (max-width: 929px) {
	.ark-sidebar {
		float: none;
	}

	.ark-footer {
		padding: 20px 0px;
	}

	.ark-footer-tikecik {
		margin-top: 40px;
		text-align: left;
		padding-left: 35px;
	}

	.ark-event_tickets-type-price span.ukryj-male {
		display: none;
	}

	.ark-small_text {
		display: block;
		line-height: 14px;
		padding-bottom: 4px;
	}



}

@media (max-width: 768px) {

	.ark-social {
		clear: none;
		float: right;
		margin-top: 30px;
	}

	.ark-basket {
		float: none;
		clear: both;
		padding: 5px;
		position: relative;
		right: 0;
	}

	.ark-card-panel_info {
		left: 5px;
		bottom: 8px;
	}

	.ark-card-panel_timer {
		right: 8px;
		bottom: 12px;
	}

	/*.ark-event-term_data {
  		width: 70%;
		float: none;
	}*/
	.ark-event-thumb_schedules {
		margin-left: 0px;
	}

	.ark-event-thumb_category {
		float: none;
		text-align: left;
		display: none;
	}

	.ark-event-thumb>div>h1 {
		clear: both;
		float: none;
	}

	.ark-event-thumb_img {
		display: none;
	}

	#tickets-total-top {
		display: none;
	}

	.ark-karnet-cena {
		display: none;
	}

}

@media (max-width: 575px) {
	.ark-hidden-phones {
		display: none;
	}

	.ark-visible-phones {
		display: inline;
	}

	#mobilna-zmiana-2to3 {
		width: 30% !important;

	}

	#mobilna-zmiana-3to4 {
		width: 40% !important;

	}

	.ark-tickets-types-box {
		display: none;
	}

	.ark-tickets-types-box-mobile {
		display: block;
	}

	.ark-event-term .uk-width-small-2-5 {
		width: 50%;
	}

	.ark-event-term .uk-width-small-1-5 {
		width: 100%;
	}

	.ark-event-term .uk-width-small-1-5>button {
		width: 100%;
	}

	.ark-event-term_data p {
		font-size: 18px;
	}

	/* Ticket-type legend: the per-item show/hide utility classes in the markup
	   are inert, so the full-length labels ("NIEDOSTĘPNE", "cena:", currency)
	   always render. Give each item half the row and let the label sit beside
	   the swatch and wrap, so the text stays inside the box on phones. */
	#tickets-types-legend .uk-width-1-4 {
		width: 50%;
	}

	#tickets-types-legend .ark-event_tickets-type-item {
		padding-right: 3px;
	}

	#tickets-types-legend .ark-event_tickets-type-price {
		float: none;
		overflow: hidden;
		padding-left: 6px;
		overflow-wrap: break-word;
	}

}

div.ticket-price-type-a {
	background-color: #ff6600;
	display: block;
	height: 16px;
	width: 16px;
	margin: 7px;
	margin-right: 10px;
}

div.ticket-price-type-b {
	background-color: #0066ff;
	display: block;
	height: 16px;
	width: 16px;
	margin: 7px;
	margin-right: 10px;
}

div.ticket-price-type-c {
	background-color: #33CC00;
	display: block;
	height: 16px;
	width: 16px;
	margin: 7px;
	margin-right: 10px;
}

div.ticket-price-type-d {
	background-color: #CC0000;
	display: block;
	height: 16px;
	width: 16px;
	margin: 7px;
	margin-right: 10px;
}

div.ticket-price-type-e {
	background-color: #990066;
	display: block;
	height: 16px;
	width: 16px;
	margin: 7px;
	margin-right: 10px;
}

.avail-yes {
	background-color: #BCD3B4;
}

.avail-no {
	background-color: #E7BAAF;
}

.avail-maybe {
	background-color: #E9BDA0;
}

.ark-imagemap-info {
	width: 80%;
	display: inline-block;
	font-size: 12px;
	line-height: 15px;
	margin-bottom: 15px;
}

.ark-imagemap-sectortxt {
	width: 18%;
	display: inline-block;
	height: 60px;
	border-right: 1px solid #999999;
	vertical-align: top;
}

.ark-event-desc-sector {
	font-size: 16px;
	line-height: 19px;
	font-weight: normal;
}

.ark-event-desc-sector p {
	margin-bottom: 8px;
}

@media (max-width: 640px) {
	.ark-imagemap-info {
		width: 100%;
	}

	.ark-imagemap-sectortxt {
		display: none;
	}
}

.chair-price-a,
.chair-price-b,
.chair-price-c,
.chair-price-d,
.chair-price-e,
.chair-price-f,
.chair-price-g,
.chair-price-h,
.chair-price-u {
	cursor: pointer;
}

.chair-price-a text,
.chair-price-b text,
.chair-price-c text,
.chair-price-d text,
.chair-price-e text,
.chair-price-f text,
.chair-price-g text,
.chair-price-h text,
.chair-price-ua text,
.chair-price-ua-light text,
.chair-price-u text,
.chair-price-reserved text {
	fill: #ffffff;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
}

.chair-price-reserved-a .chair-back,
.chair-price-a .chair-seat,
.chair-price-a .chair-back {
	fill: #ff6600;
}

.chair-price-a:hover .chair-under {
	fill: #111111;
	/*#ffbe93;*/
}

.chair-price-reserved-b .chair-back,
.chair-price-b .chair-seat,
.chair-price-b .chair-back {
	fill: #0099ff;
}

.chair-price-b:hover .chair-under {
	fill: #111111;
	/*#93d3ff;*/
}

.chair-price-reserved-c .chair-back,
.chair-price-c .chair-seat,
.chair-price-c .chair-back {
	fill: #33CC00;
}

.chair-price-c:hover .chair-under {
	fill: #111111;
	/*#53FF1A;*/
}

.chair-price-reserved-d .chair-back,
.chair-price-d .chair-seat,
.chair-price-d .chair-back {
	fill: #CC0000;
}

.chair-price-d:hover .chair-under {
	fill: #111111;
	/*#FF5E5E;*/
}

.chair-price-reserved-e .chair-back,
.chair-price-e .chair-seat,
.chair-price-e .chair-back {
	fill: #990066;
}

.chair-price-e:hover .chair-under {
	fill: #111111;
	/*#F200A4;*/
}

.chair-price-reserved-f .chair-back,
.chair-price-f .chair-seat,
.chair-price-f .chair-back {
	fill: #f85ea7;
}

.chair-price-f:hover .chair-under {
	fill: #111111;
	/*#F200A4;*/
}

.chair-price-reserved-g .chair-back,
.chair-price-g .chair-seat,
.chair-price-g .chair-back {
	fill: #ded213;
}

.chair-price-g:hover .chair-under {
	fill: #111111;
	/*#F200A4;*/
}

.chair-price-reserved-h .chair-back,
.chair-price-h .chair-seat,
.chair-price-h .chair-back {
	fill: #03dac3;
}

.chair-price-h:hover .chair-under {
	fill: #111111;
	/*#F200A4;*/
}



.chair-selected .chair-seat {
	fill: #003366;
}

.chair-price-ua .chair-seat,
.chair-price-ua .chair-back {
	fill: #b8b8b8;
	opacity: 0.6;
}

.chair-price-reserved .chair-seat {
	fill: #b8b8b8;
	opacity: 0.6;
}

.chair-price-ua-light .chair-seat,
.chair-price-ua-light .chair-back {
	color: #cccccc;
	fill: #b8b8b8;
	opacity: 0.6;
}

.ark-add-comment-block {
	background-color: #EEEAE6;
	border: 1px solid #FFFFFF;
	border-radius: 4px;
	padding: 12px;
}

.tooltip {
	background: #FFFFFF;
	color: #333333;
	border: 1px solid #999999;
	border-radius: 5px;
	padding: 5px;
	font-family: 'Roboto Slab', serif;
	-webkit-box-shadow: 3px 3px 10px 1px rgba(0, 0, 0, 0.75);
	-moz-box-shadow: 3px 3px 10px 1px rgba(0, 0, 0, 0.75);
	box-shadow: 3px 3px 10px 1px rgba(0, 0, 0, 0.75);

}

.ark-gallery .uk-thumbnail div {
	max-height: 165px;
	overflow: hidden;
	max-width: 250px;
}

.ark-gallery .uk-thumbnail {
	margin: 4px 2px;
}

.uk-panel-box .uk-nav {
	padding: 5px 20px;
}

.ark-karnet-cena {
	font-size: 14px;
	font-weight: normal;
	margin-right: 30px;
	margin-top: -5px;
	text-decoration: none;
}

.btnz {
	display: block;
	float: left;
	padding: 6px 15px 3px 15px;
	border: none;
	background-color: #ececec;
	text-decoration: none;
	font-size: 13px;
	color: #FFF;
}

.btnz:hover {
	color: #efefef;
}

.facebook {
	background-color: #3b5998;
}

.gplus {
	background-color: #dd4b39;
}

.twitter {
	background-color: #55acee;
}

.addones_checklink-yes {
	background: url(../img/checkbox_yes.png) no-repeat left;
	display: inline-block;
	padding-left: 34px;
	padding-top: 9px;
	font-size: 16px;
	color: #0f82b9;
	font-weight: bold;

}

.addones_checklink-no {
	background: url(../img/checkbox_no.png) no-repeat left;
	display: inline-block;
	padding-left: 34px;
	padding-top: 9px;
	font-size: 16px;
	color: #0f82b9;
	font-weight: bold;
}

.ptech {
	font-size: 12px;
	text-transform: upercase;
	color: #777777;
	margin: 0;

}

.ark-event_ticket-addones {
	background: #FFFFFF;
	margin: 6px;
	margin-left: 40px;
	padding: 10px;
	border: 2px solid #E3022C;
	border-left: 17px solid #E3022C;
}

.ark-event_ticket-seat {
	font-size: 18px;
	font-weight: bold;
}

.ark-event_ticket-seat span {
	font-size: 15px;
	font-weight: normal;
}

.getpaid\.backends\.paypal {
	background: url(../img/paypal_icons.png) no-repeat right;
	padding-right: 200px;
	padding-top: 5px;
	padding-bottom: 5px;
}

/* Event Calendar Styles */
.ark-event-calendar-container {
	/* Base container - themes can override */
	border-radius: 4px;
	overflow: hidden;
}

.ark-event-calendar-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 1px;
	background: #ddd;
}

.ark-event-calendar-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	background: #f5f5f5;
	margin-bottom: 1px;
}

.ark-event-calendar-header h3 {
	margin: 0;
	font-size: 18px;
}

.ark-event-calendar-nav a {
	color: #333;
	text-decoration: none;
	padding: 5px 10px;
	border: 1px solid #ddd;
	border-radius: 3px;
	background: #fff;
}

.ark-event-calendar-nav a:hover {
	background: #f0f0f0;
}

.ark-event-calendar-day-name {
	padding: 10px;
	text-align: center;
	font-weight: 600;
	background: #f8f9fa;
	font-size: 12px;
}

.ark-event-calendar-day {
	min-height: 80px;
	padding: 0;
	background: #fff;
	position: relative;
    vertical-align: top;
}

.ark-event-calendar-day > a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 8px;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
}

.ark-event-calendar-day > .ark-event-calendar-day-number {
    padding: 8px;
}

/* Adjacent-month days with NO events. Since TASK-015 this class is emitted only
   for genuinely non-actionable cells — an adjacent-month day that HAS events now
   gets `adjacent-month has-events` and keeps its normal styling — so this can be
   read purely as a disabled state. #666666 on #f8f9fa is 5.45:1; #999 was 2.70:1. */
.ark-event-calendar-day.other-month {
	background: #f8f9fa;
	color: #666666;
}

.ark-event-calendar-day.today {
	background: #e8f4fc;
}

.ark-event-calendar-day.selected {
    background-color: #ddd;
    font-weight: bold;
}

/* Event Dot Indicator */
.ark-event-calendar-dot {
    width: 6px;
    height: 6px;
    background: #555;
    border-radius: 50%;
    margin: 4px auto 0;
}

/* The selected cell's ground is #ddd (light), so the white dot it used to get was
   1.35:1 — invisible. #333333 on #ddd is 9.30:1. Not one of the three pairs in the
   task; found while checking the selected state and fixed in the same pass. */
.ark-event-calendar-day.selected .ark-event-calendar-dot {
    background: #333333;
}

.ark-event-calendar-day-number {
	font-weight: 600;
	margin-bottom: 5px;
	font-size: 14px;
}

/* This number is read on three grounds: #fff (plain), #e8f4fc (today) and #ddd
   (today + selected). #ddd is the worst case, where #0077b6 was 3.58:1. #005F92
   gives 5.07:1 on #ddd, 6.15:1 on #e8f4fc and 6.88:1 on #fff. */
.ark-event-calendar-day.today .ark-event-calendar-day-number {
	color: #005F92;
}

/* White on #5cb85c was 2.48:1 and the hover #449d44 was 3.41:1. #2E7D32 gives
   5.13:1 and the darker hover #1B5E20 gives 7.87:1, so the hover stays the darker
   of the pair. */
.ark-event-calendar-event {
	display: block;
	padding: 3px 6px;
	margin-bottom: 3px;
	background: #2E7D32;
	color: #fff;
	border-radius: 3px;
	font-size: 12px;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ark-event-calendar-event:hover {
	background: #1B5E20;
	color: #fff;
	text-decoration: none;
}

.ark-event-calendar-more {
	font-size: 12px;
	color: #666;
}

/* Availability legend (TASK-015 markup).

   This carries its own foreground AND background on purpose. `color: inherit` was
   tried first and measured on the real storefront across 19 skins x 3 surfaces
   (event, home, category) x 2 viewports = 114 cells, and it cannot be made to work:

     - inherit alone failed 2 cells — black-powder 1.49:1 and grawitacja 1.21:1 on
       the event surface, where neither skin sets a colour on `.ark-background` so
       the legend falls through to their own `html { color: #333 }` / `#222` while
       the ground comes from the dark body.
     - Branching on `body.ark-background` (base.html:120) looked like the honest
       structural hook and fixed those 2, but it is not a reliable signal for a dark
       ground: beer is a dark skin (#1D1C19) that the list omits, so the light branch
       painted #333 onto it and regressed 4 cells to 1.35:1.
     - `.ark-event-thumb` is not a reliable signal for a light card either:
       muzeum-swiatla's card is #FFFFFF but black-powder's is #111111.

   No selector available here can tell those grounds apart, so the legend supplies
   its own. #333333 on #F1F3F5 is 11.36:1 on every one of the 114 cells by
   construction, with nothing to inherit and nothing to assume. The ground also
   helps the swatch, which is #555 on 18 of the 19 skins: 6.70:1 here against
   2.29-2.53:1 where it currently sits on a dark skin's own ground. grawitacja is
   the one skin that recolours the dot (#F53CCC) and it reads 2.95:1 on this ground
   rather than 5.89:1 — slightly worse, on an aria-hidden decorative dot whose
   meaning is spelled out in the text beside it.

   Measured result: 112 of the 114 cells read 11.36:1. The two exceptions are beer
   on the event surface, where style.beer.css:~470 declares
   `#event p, #event span, ... { color: white !important }` — 1,0,1 plus
   !important, so it forces white onto this ground (1.11:1) and cannot be reached
   from here without adding both an ID selector and a competing !important, which
   the plan forbids. Left as declared and reported; the one-line fix belongs in
   style.beer.css. For comparison, plain `color: inherit` failed 22 of the same 114
   cells, so this is the better of the two by an order of magnitude.

   Also reached by the tenant-less events aggregator, where no skin is loaded at
   all; both colours are literal, so it renders identically there. */
.ark-event-calendar-legend {
	padding: 8px 12px;
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	background: #F1F3F5;
	color: #333333;
	border-radius: 4px;
}

/* The swatch is <span class="ark-event-calendar-legend-dot ark-event-calendar-dot">
   so it picks up each skin's own dot colour. A <span> is inline, so without
   display:inline-block the width/height are dropped and the swatch renders
   invisible — that is what this rule is for. Deliberately NOT !important:
   style.muzeum-swiatla.css:904 sets .ark-event-calendar-dot { display: none } on
   purpose, and that skin should keep the swatch hidden too. */
.ark-event-calendar-legend-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	vertical-align: middle;
	margin: 0 6px 0 0;
}

/* Tablet/Small Laptop/Mobile adjustments */
@media (max-width: 1100px) {
	.ark-event-calendar-day {
		min-height: 50px;
		padding: 1px;
		border-bottom: 1px solid #ddd;
		border-right: 1px solid #ddd;
		position: relative;
		background: #fff;
	}

	.ark-event-calendar-event {
		font-size: 12px;
		padding: 2px 1px;
		text-align: center;
		background: #2E7D32;
	}

	.ark-event-calendar-day-name {
		font-size: 12px;
		padding: 2px;
		overflow: hidden;
	}

	/* style.grawitacja.css:1305 re-pins this to 11px inside its own
	   @media (max-width: 768px) and loads after this file, so the plain rule above
	   does not reach that skin. Two classes (0,2,0) out-specifies its one (0,1,0)
	   without editing the skin. `display: contents` on the row wrapper does not
	   break the descendant match. */
	.ark-event-calendar-grid .ark-event-calendar-day-name {
		font-size: 12px;
	}

	.ark-event-calendar-wrapper {
		width: 100%;
	}

	.ark-event-calendar-grid {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		border: 1px solid #ddd;
		background: #fff;
		width: 100%;
		min-width: 0;
	}

	.ark-event-calendar-day-number {
		font-size: 12px;
		margin-bottom: 2px;
	}

	/* Hide city on smaller screens to fit grid */
	.ark-event-city {
		display: none;
	}

	/* Scale down navigation links */
	.ark-event-calendar-nav a {
		font-size: 12px;
		padding: 3px 6px;
	}

	.ark-event-calendar-header h3 {
		font-size: 1.2rem;
	}
}

/* ── Quantity stepper:  [ − ]  [ number ]  [ + ] ──────────────────────
   Shape/size defined here for ALL themes. Each theme overrides only the
   color variables below (see style.<theme>.css). */
.quantity {
	--qty-height: 44px;
	--qty-input-width: 56px;
	--qty-btn-width: 42px;
	--qty-radius: 6px;
	--qty-bg: #ffffff;
	--qty-border: #dddddd;
	--qty-color: #333333;
	--qty-btn-bg: #f5f5f5;
	--qty-btn-color: #333333;
	--qty-btn-hover-bg: #e0e0e0;
	--qty-btn-hover-color: #333333;
	display: inline-flex;
	align-items: stretch;
	height: var(--qty-height);
	vertical-align: middle;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type=number] {
	-moz-appearance: textfield;
}

.quantity input {
	width: var(--qty-input-width);
	height: var(--qty-height);
	padding: 0;
	margin: 0;
	border: 1px solid var(--qty-border);
	border-left: 0;
	border-right: 0;
	border-radius: 0;
	background: var(--qty-bg);
	color: var(--qty-color);
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	-moz-appearance: textfield;
	box-sizing: border-box;
}

/* The stepper input is sandwiched between the two buttons with its side borders
   removed, so an outward ring would paint over them. The indicator is inset
   instead: 2px halo at the edge, then a 2px ring inside it. No layout shift, and
   nothing to clip. Both :focus and :focus-visible are declared — a text-entry
   field matches :focus-visible on mouse click anyway, so this costs nothing and
   is the fallback for engines without :focus-visible. */
.quantity input:focus,
.quantity input:focus-visible {
	outline: 2px solid transparent;
	outline-offset: -2px;
	box-shadow:
		inset 0 0 0 2px var(--ark-focus-halo, #FFFFFF),
		inset 0 0 0 4px var(--ark-focus-ring, #1A1A1A);
}

.quantity-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--qty-btn-width);
	height: var(--qty-height);
	cursor: pointer;
	border: 1px solid var(--qty-border);
	background: var(--qty-btn-bg);
	color: var(--qty-btn-color);
	font-size: 22px;
	font-weight: bold;
	line-height: 1;
	box-sizing: border-box;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	transition: background-color 0.2s, color 0.2s;
}

.quantity-button:hover {
	background: var(--qty-btn-hover-bg);
	color: var(--qty-btn-hover-color);
}

.quantity-button.quantity-down {
	border-radius: var(--qty-radius) 0 0 var(--qty-radius);
}

.quantity-button.quantity-up {
	border-radius: 0 var(--qty-radius) var(--qty-radius) 0;
}

/* ── Unnumbered-sector price-option rows ──────────────────────────────
   Each row is `label : price [ − | n | + ]`. The stepper is a fixed 140px
   control; on narrow screens a long discount label (e.g. "Karta
   Nowosądeczanina") must shrink/wrap instead of colliding with it. Flex
   with min-width:0 lets the label cede space to the fixed stepper. Scoped
   to the ticket item so other `.quantity` usages are unaffected. */
.ark-event_tickets-type-item .ark-price-options {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
}

.ark-event_tickets-type-item .ark-price-option-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin-bottom: 10px;
}

.ark-event_tickets-type-item .ark-price-option-row:last-child {
	margin-bottom: 0;
}

/* Default (narrow + medium): the sector's price column isn't reliably wide
   enough to hold a long discount label, the price and the fixed 140px stepper
   on one line, so stack — label on its own full-width line, price + stepper
   right-aligned on the line below. This avoids the stepper wrapping awkwardly
   to a new line on its own at mid widths (~600–960px). */
.ark-event_tickets-type-item .ark-price-option-name {
	flex: 1 1 100%;
	min-width: 0;
	text-align: left;
	word-break: break-word;
}

.ark-event_tickets-type-item .ark-price-option-price {
	flex: 0 0 auto;
	white-space: nowrap;
	margin-left: auto;
}

.ark-event_tickets-type-item .ark-price-option-qty {
	flex: 0 0 auto;
}

/* Large screens: the price column is wide enough to keep the label, price and
   stepper together on a single centered row. */
@media (min-width: 960px) {
	.ark-event_tickets-type-item .ark-price-option-name {
		flex: 1 1 auto;
		text-align: center;
	}

	.ark-event_tickets-type-item .ark-price-option-price {
		margin-left: 0;
	}
}


/* ═══════════════════════════════════════════════════ */
/*  Checkout page (shared across all themes)           */
/* ═══════════════════════════════════════════════════ */

.checkout-page {
	max-width: 1100px;
	margin: 0 auto;
	padding-top: 10px;
}

/* ── Timer bar ── */
.checkout-timer {
	background: #f5f5f5;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 10px 20px;
	margin-bottom: 24px;
	text-align: center;
	color: #555 !important;
	font-size: 14px;
}
.checkout-timer strong {
	color: #d9534f;
	font-size: 16px;
	margin-left: 4px;
}

/* ── Layout ── */
.checkout-layout {
	margin: 0 -15px;
}
.checkout-layout > div {
	padding: 0 15px;
}

/* ── Sections ── */
.checkout-section {
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	margin-bottom: 20px;
	overflow: hidden;
}

.checkout-section-header {
	display: flex;
	align-items: center;
	padding: 14px 20px;
	border-bottom: 1px solid #e0e0e0;
	background: #fafafa;
}
.checkout-section-header h3 {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	color: #333 !important;
}
.checkout-step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--events-primary, #337ab7);
	color: #FFFFFF;
	font-weight: bold;
	font-size: 14px;
	margin-right: 12px;
	flex-shrink: 0;
}
.checkout-optional {
	margin-left: auto;
	font-size: 12px;
	color: #999;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.checkout-section-body {
	padding: 20px;
}

/* ── Form field spacing ── */
.checkout-page .uk-form-row {
	margin-bottom: 12px;
}
.checkout-page .uk-form-label {
	color: #444 !important;
	font-weight: 600;
}

/* ── Invoice toggle ── */
.checkout-invoice-toggle {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: #555;
	font-size: 14px;
	cursor: pointer;
	padding: 8px 0;
}
.checkout-invoice-toggle input[type="checkbox"] {
	margin-top: 3px;
	flex-shrink: 0;
}

/* ── Delivery / Payment cards ── */
.checkout-card {
	background: #fafafa;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 12px;
}
.checkout-card h4 {
	font-size: 15px;
	margin: 0 0 12px 0;
	color: #333 !important;
}
.checkout-card h4 i {
	color: #337ab7;
	margin-right: 8px;
}

.checkout-radio-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.checkout-radio-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 6px;
	cursor: pointer;
	transition: border-color 0.2s;
	font-size: 14px;
}
.checkout-radio-item:hover {
	border-color: #337ab7;
}
.checkout-radio-item input[type="radio"] {
	flex-shrink: 0;
}
.checkout-radio-label {
	flex: 1;
	color: #333 !important;
}
.checkout-radio-price {
	color: #d9534f;
	font-weight: bold;
	white-space: nowrap;
}

.checkout-payment-notice {
	background: #ff6600;
	color: #FFFFFF;
	padding: 8px 12px;
	border-radius: 6px;
	margin-bottom: 12px;
	font-size: 13px;
}

/* Payment radio widget (rendered by Django) */
.checkout-card .payment-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 6px;
	cursor: pointer;
	transition: border-color 0.2s;
	font-size: 14px;
	margin-bottom: 8px;
}
.checkout-card .payment-option:last-child {
	margin-bottom: 0;
}
.checkout-card .payment-option:hover {
	border-color: #337ab7;
}
.checkout-card .payment-option input[type="radio"] {
	flex-shrink: 0;
	width: auto !important;
}
.checkout-card .payment-option label {
	margin: 0;
	cursor: pointer;
	color: #333 !important;
	display: flex;
	align-items: center;
	width: 100%;
	gap: 12px;
}

.payment-visual {
	display: flex;
	align-items: center;
	height: 30px;
	flex-shrink: 0;
}

.payment-logo {
	max-height: 24px;
	width: auto;
}

.stripe-visual {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 20px;
	color: #6772e5;
}

.stripe-inne,
.payment-text-inline {
	font-size: 14px;
	color: #666;
	margin-left: 4px;
}

.payment-icon {
	font-size: 24px;
	color: #555;
	width: 30px;
	text-align: center;
}

.payment-label-content {
	flex-grow: 1;
	font-size: 0;
}

.payment-label-content .js-payment-price {
	font-size: 14px;
	color: #333;
}

/* ── Sidebar ── */
.checkout-sidebar {
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	overflow: hidden;
}

.checkout-sidebar-section {
	padding: 16px 18px;
	border-bottom: 1px solid #e0e0e0;
}
.checkout-sidebar-section:last-child {
	border-bottom: none;
}

/* ── Cart toggle ── */
.checkout-sidebar-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	user-select: none;
}
.checkout-sidebar-toggle h4 {
	margin: 0;
	font-size: 15px;
	color: #333 !important;
}
.checkout-sidebar-toggle h4 i {
	color: #337ab7;
	margin-right: 8px;
}
.checkout-item-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #337ab7;
	color: #FFFFFF;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	font-size: 12px;
	font-weight: bold;
	margin-left: 8px;
}
.checkout-toggle-icon {
	color: #999;
	transition: transform 0.2s;
}

/* ── Cart items ── */
.checkout-cart-items {
	padding-top: 12px;
}
.checkout-cart-event {
	margin-bottom: 12px;
}
.checkout-cart-event-name {
	color: #337ab7;
	font-weight: bold;
	font-size: 14px;
	margin-bottom: 2px;
}
.checkout-cart-event-detail {
	color: #777;
	font-size: 12px;
	margin-bottom: 8px;
}
.checkout-cart-event-detail small {
	color: #999;
}
.checkout-cart-ticket {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 6px 10px;
	margin-bottom: 4px;
	background: #f8f8f8;
	border-radius: 4px;
	font-size: 13px;
	color: #555;
}
.checkout-cart-ticket-price {
	color: #d9534f;
	font-weight: bold;
	white-space: nowrap;
}
.checkout-cart-addon {
	width: 100%;
	color: #999;
	font-size: 12px;
	padding-top: 2px;
}

/* ── Summary ── */
.checkout-summary-row {
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
	color: #666;
	font-size: 13px;
}
.checkout-summary-total {
	display: flex;
	justify-content: space-between;
	padding: 12px 0 4px;
	margin-top: 8px;
	border-top: 2px solid #337ab7;
	color: #333;
	font-size: 18px;
	font-weight: bold;
}
.checkout-summary-total span:last-child {
	color: #d9534f;
}

/* ── Agreements ── */
.checkout-agreements {
	margin-bottom: 14px;
}
.checkout-agreement {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	color: #666;
	font-size: 12px;
	line-height: 1.5;
	margin-bottom: 10px;
	cursor: pointer;
	flex-wrap: wrap;
}
.checkout-agreement input[type="checkbox"] {
	margin-top: 2px;
	flex-shrink: 0;
	width: auto !important;
	min-width: 16px;
}
.checkout-agreement span {
	flex: 1;
}
.checkout-agreement a {
	color: #337ab7;
}
.checkout-agreement a:hover {
	color: #23527c;
}

/* ── Form validation errors on checkout  ── */
.checkout-field-error {
	color: #d9534f;
	font-size: 13px;
	margin-bottom: 5px;
	font-weight: 500;
}
.checkout-agreement .checkout-field-error {
	width: 100%;
	margin-top: 0px;
	margin-bottom: 0px;
}
/* Override UIKit's invasive background for wrappers */
.checkout-page .uk-form-danger,
.checkout-page .uk-form-row.uk-form-danger {
	background: transparent !important;
}
.checkout-page input.uk-form-danger {
	border-color: #d9534f !important;
	background: #fffafa !important;
}

/* ── Invoice toggle checkbox fix ── */
.checkout-invoice-toggle input[type="checkbox"] {
	width: auto !important;
	min-width: 16px;
}
.checkout-invoice-toggle span {
	flex: 1;
}

/* ── Submit button ── */
.checkout-submit-btn {
	display: block;
	width: 100%;
	padding: 14px 16px;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	background: #5cb85c;
	border: none;
	border-radius: 8px;
	color: #FFFFFF;
	cursor: pointer;
	transition: all 0.3s;
	white-space: normal;
	word-wrap: break-word;
	line-height: 1.4;
	text-align: center;
}
.checkout-submit-btn:hover {
	background: #449d44;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	transform: translateY(-1px);
}

/* ── Responsive ── */
@media (max-width: 767px) {
	.checkout-page {
		padding: 0 8px;
	}
	.checkout-layout > div {
		padding: 0;
	}
	.checkout-sidebar {
		margin-top: 20px;
	}
	.checkout-section-body {
		padding: 14px;
	}
}


/* ──────────────────────────────────────────────────────────────────────────
   Shared storefront shell — landmarks, skip link, language switcher, auth links
   (jtemplates/page/base.html). Also loaded unguarded by the events aggregator
   at jtemplates/events/base.html:57, so every rule here carries its own
   colours and none of them assume a skin file is present.
   ────────────────────────────────────────────────────────────────────────── */

/* Landmark: <main id="content"> must behave exactly like the old <div id="content">. */
main#content {
	display: block;
}

main#content:focus {
	outline: none;
}

/* Skip-to-content link: off-screen until focused, then pinned top-left. */
.ark-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10000;
	padding: 10px 16px;
	background: #FFFFFF;
	color: #1A1A1A;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 4px 0;
}

.ark-skip-link:focus,
.ark-skip-link:focus-visible {
	left: 0;
	color: #1A1A1A;
	text-decoration: none;
	outline: 3px solid #1A1A1A;
	outline-offset: 2px;
}

/* Visually hidden but exposed to assistive technology. */
.ark-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Language switcher: a flag names a country, so the code carries the language. */
.ark-navbar .ark-flags .ark-lang-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.ark-navbar .ark-flags .ark-lang-code {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.5px;
	line-height: 1;
}

/* Current language marked by weight + underline, never by colour alone. */
.ark-navbar .ark-flags .ark-lang-link-active .ark-lang-code,
.uk-nav-offcanvas .ark-lang-link-active {
	font-weight: 700;
	text-decoration: underline;
}

/* Header auth links: was three inline style="" blocks; kept overridable and >= 24px tall.
   Scoped through .ark-navbar so skins declaring `.ark-navbar a { color }` no longer win
   where the inline style used to. */
.ark-navbar .ark-navbar-right .ark-auth-links {
	display: flex;
	align-items: center;
	gap: 15px;
}

.ark-navbar .ark-auth-links .ark-auth-link,
.ark-navbar .ark-auth-links .ark-auth-link:hover,
.ark-navbar .ark-auth-links .ark-auth-link:focus {
	color: inherit;
	text-decoration: none;
}

.ark-navbar .ark-auth-links .ark-auth-link {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	font-weight: 600;
	min-width: 24px;
	min-height: 24px;
	padding: 2px 0;
}

/* The navbar is sticky and already compacted between 960px and 1300px (see the block above);
   keep the added language codes from pushing the row to a second line there. */
@media (min-width: 960px) and (max-width: 1300px) {
	.ark-navbar .ark-flags .ark-lang-code {
		font-size: 10px;
	}

	.ark-navbar .ark-flags .ark-lang-link {
		gap: 2px;
	}
}


/* ──────────────────────────────────────────────────────────────────────────
   Focus policy — one visible indicator for every control a customer operates.

   uikit.css and the uikit-theme-*.css files strip the focus outline on 60+
   selectors and reuse the :hover treatment in its place, and nothing in the
   served cascade used :focus-visible at all. Those files load BEFORE this one
   (jtemplates/page/base.html:15-19, jtemplates/events/base.html:57), so the
   rules below win on equal specificity. Four later files still declare
   `outline: 0` on their own selectors and out-specify this one —
   account_menu.css:147, style.grawitacja.css:1539, components/slidenav and
   components/dotnav — but none of them declares a box-shadow there, so the ring
   survives as a box-shadow even where the outline is overruled. That is why the
   indicator is a box-shadow first and an outline second. Two exceptions are left
   alone deliberately: style.livents.css:279 and :921 pin their own pink glow
   with !important, which is already a visible indicator.

   The outline is transparent on purpose: box-shadows are dropped in Windows
   forced-colors mode, where a transparent outline is repainted with a system
   colour and becomes the indicator.

   :focus-visible, not :focus, so a mouse click never paints a ring on a button.
   The @supports block at the end covers engines that do not know the selector.

   .ark-skip-link keeps its own ring (see above): .ark-skip-link:focus-visible is
   0,2,0 and beats a:focus-visible at 0,1,1 whatever the source order.
   main#content:focus { outline: none } also stands — it is a tabindex="-1"
   scroll target for the skip link, not a control, and is excluded here via
   :not([tabindex="-1"]).

   Also loaded unguarded by the events aggregator, so the colours are literal and
   every var() repeats its fallback.
   ────────────────────────────────────────────────────────────────────────── */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
/* uikit form controls: uikit.css:2383 is `.uk-form input[type=text]:focus` at
   0,3,1, so a bare `input:focus-visible` cannot reach it. Match its shape. */
.uk-form input[type]:focus-visible,
.uk-form input:not([type]):focus-visible,
.uk-form select:focus-visible,
.uk-form textarea:focus-visible,
/* Buttons — the buy CTA and both order submits are .uk-button-success. */
.uk-button:focus-visible,
.uk-button-success:focus-visible,
.uk-button-primary:focus-visible,
.uk-icon-button:focus-visible,
.uk-close:focus-visible,
/* Navigation. uikit.css:1636 and :1648 gave the brand and the toggle nothing but
   `text-decoration: none` on focus — no visual change at all. */
.uk-navbar-brand:focus-visible,
.uk-navbar-toggle:focus-visible,
.uk-navbar-nav > li > a:focus-visible,
.uk-nav > li > a:focus-visible,
.uk-nav-side > li > a:focus-visible,
.uk-nav-dropdown > li > a:focus-visible,
.uk-nav-navbar > li > a:focus-visible,
.uk-nav-offcanvas > li > a:focus-visible,
.uk-subnav-pill > * > :focus-visible,
.uk-pagination > li > a:focus-visible,
.uk-tab > li > a:focus-visible,
.uk-slidenav:focus-visible,
.uk-dotnav > * > :focus-visible,
.ark-hamburger-icon:focus-visible,
.ark-basket-icon:focus-visible,
/* Events aggregator: events.css:754 is 0,3,1 and loads after this file, so the
   `body` prefix is what makes the ring reachable there. */
body .events-search-box input[type="text"]:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow:
		0 0 0 2px var(--ark-focus-halo, #FFFFFF),
		0 0 0 4px var(--ark-focus-ring, #1A1A1A);
}

/* Forced-colors hardening. Measured in Chromium with forcedColors: 'active':
   the box-shadow above is dropped and only the outline survives, so on the five
   selectors whose `outline: 0` out-specifies the block above the indicator
   disappeared entirely — the slideshow arrows, the dot nav, the account sidebar
   input, and on livents and grawitacja the checkout text inputs. These selectors
   are one step more specific than each killer, so the outline wins too:
     components/slidenav .uk-slidenav:focus          0,2,0 -> a.uk-slidenav 0,2,1
     components/dotnav   .uk-dotnav>*>:focus         0,2,0 -> > a           0,2,1
     account_menu.css:147 .ark-background .events-sidebar input:focus  0,2,1 -> 0,2,2
     style.grawitacja.css:1539 .checkout-page input[type=text]:focus   0,3,1 -> 0,3,2
     style.livents.css:279 input[type=text]:focus                      0,2,1 -> 0,3,2
   type=number is excluded so these never out-specify the stepper's inset ring
   above (measured: without the :not() they did, at an equal 0,2,2 and later).
   style.livents.css:924 (.ark-ticket-name-box input) uses `outline: none
   !important` and cannot be reached from here without another !important; it is
   left alone deliberately and reported instead. */
a.uk-slidenav:focus-visible,
.uk-dotnav > * > a:focus-visible,
body .ark-background .events-sidebar input:focus-visible,
body .checkout-page input[type]:not([type="number"]):focus-visible,
body input[type]:not([type="number"]):focus-visible,
body select:focus-visible,
body textarea:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow:
		0 0 0 2px var(--ark-focus-halo, #FFFFFF),
		0 0 0 4px var(--ark-focus-ring, #1A1A1A);
}

/* Engines without :focus-visible fall back to :focus on the purchase-funnel
   controls. The whole block is dropped where the selector is supported. */
@supports not selector(:focus-visible) {

	a:focus,
	button:focus,
	input:focus,
	select:focus,
	textarea:focus,
	.uk-button:focus,
	.uk-navbar-brand:focus,
	.uk-navbar-toggle:focus,
	.ark-hamburger-icon:focus,
	.ark-basket-icon:focus {
		outline: 2px solid transparent;
		outline-offset: 2px;
		box-shadow:
			0 0 0 2px var(--ark-focus-halo, #FFFFFF),
			0 0 0 4px var(--ark-focus-ring, #1A1A1A);
	}
}