:root {
	--bg: #0b1220;
	--bg-elevated: #111a2f;
	--bg-highlight: #1a2845;
	--surface: #16213a;
	--surface-soft: rgba(255, 255, 255, 0.04);
	--primary: #ff4d67;
	--primary-soft: rgba(255, 77, 103, 0.15);
	--secondary: #38d4ff;
	--text: #f7f9ff;
	--muted: rgba(247, 249, 255, 0.7);
	--border: rgba(255, 255, 255, 0.08);
	--radius-lg: 24px;
	--radius-md: 16px;
	--radius-sm: 12px;
	--shadow: 0 16px 40px rgba(3, 8, 24, 0.45);
}

* {
	box-sizing: border-box;
}

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

body {
	font-family: "Segoe UI", sans-serif;
	color: var(--text);
	background:
		radial-gradient(circle at top left, rgba(56, 212, 255, 0.14), transparent 30%),
		radial-gradient(circle at top right, rgba(255, 77, 103, 0.18), transparent 34%),
		linear-gradient(135deg, #060b15 0%, #0f1728 48%, #181c32 100%);
}

button,
input,
a {
	font: inherit;
}

a {
	text-decoration: none;
}

.eyebrow {
	margin: 0 0 4px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.78rem;
}

.pos-app {
	min-height: 100vh;
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 18px;
}

.sidebar,
.hero,
.catalog,
.cart,
.modal__panel {
	border: 1px solid var(--border);
	background: linear-gradient(180deg, rgba(22, 33, 58, 0.92), rgba(17, 26, 47, 0.9));
	box-shadow: var(--shadow);
	backdrop-filter: blur(20px);
}

.sidebar {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: 300px;
}

.sidebar__brand,
.hero,
.catalog__toolbar,
.cart__header,
.modal__header,
.modal__footer,
.summary-row,
.cart-item__top,
.cart-item__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

.sidebar__logo,
.auth-brand__logo {
	width: 54px;
	height: 54px;
	border-radius: 18px;
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, var(--primary), #ff7a6d);
	color: #fff;
	font-weight: 700;
}

.sidebar h1,
.hero h2,
.catalog h3,
.cart h3,
.modal h3 {
	margin: 0;
}

.category-list {
	display: grid;
	gap: 10px;
}

.category-item,
.ghost-button,
.secondary-button {
	border: 1px solid transparent;
	background: rgba(255, 255, 255, 0.04);
	color: var(--text);
	border-radius: var(--radius-md);
	transition: 0.2s ease;
}

.category-item {
	min-height: 62px;
	padding: 14px 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	text-align: left;
	cursor: pointer;
}

.category-item.category_green {
	background: #4caf5042;
}

.category-item__icon {
	width: 34px;
	height: 34px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, 0.08);
}

.category-item:hover,
.ghost-button:hover,
.secondary-button:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.1);
}

.category-item.is-active {
	background: linear-gradient(135deg, rgba(255, 77, 103, 0.18), rgba(56, 212, 255, 0.12));
	border-color: rgba(255, 255, 255, 0.1);
}

.sidebar__footer {
	margin-top: auto;
	display: grid;
	gap: 12px;
}

.profile-card {
	padding: 18px;
	border-radius: var(--radius-lg);
	background: rgba(255, 255, 255, 0.04);
}

.profile-card strong,
.profile-card span {
	display: block;
}

.profile-card span {
	color: var(--muted);
}

.secondary-button,
.ghost-button,
.primary-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 16px;
	border-radius: var(--radius-md);
}

.ghost-button--small {
	min-height: 40px;
	padding: 10px 14px;
}

.primary-button {
	border: 0;
	color: #fff;
	background: linear-gradient(135deg, var(--primary), #ff7e68);
	box-shadow: 0 18px 30px rgba(255, 77, 103, 0.22);
}

.workspace {
	/* display: grid; */
	grid-template-rows: auto minmax(0, 1fr);
	gap: 18px;
	min-width: 0;
}

.hero {
	border-radius: 28px;
	padding: 18px;
	margin: 30px 20px 0px 20px;
	width: calc(100% - 60px);
}

.hero__date {
	width: 92px;
	min-width: 92px;
	border-radius: 20px;
	padding: 14px 12px;
	text-align: center;
	background: rgba(255, 255, 255, 0.05);
}

.hero__date strong {
	display: block;
	font-size: 2rem;
	line-height: 1;
	margin: 4px 0;
}

.hero__content {
	flex: 1;
	min-width: 0;
}

.hero__chips {
	margin-top: 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.hero__chips span,
.product-card__badge,
.option-chip {
	padding: 8px 12px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.04);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.layout {
	min-height: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 18px;
}

.catalog,
.cart {
	border-radius: 28px;
	overflow: hidden;
	min-height: 0;
}

.catalog {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
}

.catalog__toolbar,
.cart__header {
	padding: 20px 22px;
	border-bottom: 1px solid var(--border);
}

.search-field {
	min-width: 290px;
	display: grid;
	gap: 8px;
	color: var(--muted);
}

.search-field input {
	width: 100%;
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 14px 16px;
	color: var(--text);
	background: rgba(255, 255, 255, 0.05);
	outline: none;
}

.product-grid {
	min-height: 0;
	overflow: auto;
	padding: 22px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.product-card {
	display: grid;
	gap: 16px;
	border-radius: 22px;
	padding: 16px;
	border: 1px solid var(--border);
	background:
		radial-gradient(circle at top right, rgba(56, 212, 255, 0.1), transparent 34%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
}

.product-card__media {
	min-height: 164px;
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	background: linear-gradient(135deg, rgba(8, 12, 24, 0.95), rgba(40, 62, 96, 0.65));
}

.product-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 20% 20%, var(--accent, rgba(255, 77, 103, 0.28)), transparent 30%),
		linear-gradient(180deg, transparent 0%, rgba(11, 18, 32, 0.4) 100%);
}

.product-card__emoji {
	position: absolute;
	left: 16px;
	bottom: 16px;
	z-index: 1;
	font-size: 2rem;
}

.product-card h4,
.cart-item strong {
	margin: 0;
}

.product-card p,
.cart-item p,
.empty-state p,
.modal__description {
	margin: 0;
	color: var(--muted);
	line-height: 1.45;
}

.product-card__row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
}

.product-card__price {
	font-size: 1.8rem;
	font-weight: 700;
}

.product-card__footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.count-pill,
.count-button {
	min-width: 46px;
	height: 46px;
	display: inline-grid;
	place-items: center;
	border-radius: 14px;
	border: 1px solid var(--border);
	background: rgba(255, 255, 255, 0.05);
}

.count-button {
	color: var(--text);
	cursor: pointer;
}

.count-button:hover {
	background: rgba(255, 255, 255, 0.1);
}

.cart {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
}

.cart__items {
	min-height: 0;
	overflow: auto;
	padding: 16px 18px;
	display: grid;
	align-content: start;
	gap: 12px;
}

.empty-state,
.cart-item {
	padding: 18px;
	border-radius: 20px;
	border: 1px solid var(--border);
	background: rgba(255, 255, 255, 0.04);
}

.cart-item {
	display: grid;
	gap: 12px;
}

.cart__summary {
	padding: 18px;
	border-top: 1px solid var(--border);
	background: rgba(255, 255, 255, 0.03);
}

.summary-row {
	margin-bottom: 12px;
}

.summary-row--total {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--border);
	font-size: 1.1rem;
}

.modal {
	position: fixed;
	inset: 0;
	padding: 24px;
	display: grid;
	place-items: center;
	background: rgba(3, 8, 24, 0.7);
}

.modal.is-hidden {
	display: none;
}

.modal__panel {
	width: min(820px, 100%);
	max-height: 90vh;
	overflow: auto;
	border-radius: 28px;
	padding: 22px;
}

.modal__groups {
	display: grid;
	gap: 18px;
	margin-top: 18px;
}

.option-group {
	padding: 18px;
	border-radius: 20px;
	border: 1px solid var(--border);
	background: rgba(255, 255, 255, 0.04);
}

.option-group h4 {
	margin: 0 0 6px;
}

.option-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}

.option-chip {
	color: var(--muted);
	cursor: pointer;
}

.option-chip.is-selected {
	color: var(--text);
	background: linear-gradient(135deg, rgba(255, 77, 103, 0.2), rgba(56, 212, 255, 0.14));
}

@media (max-width: 1380px) {
	.product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 1120px) {

	.pos-app,
	.layout {
		grid-template-columns: 1fr;
	}

	.category-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.hero {
		flex-direction: column;
		align-items: stretch;
	}
}

@media (max-width: 760px) {
	.pos-app {
		padding: 12px;
	}

	.category-list,
	.product-grid {
		grid-template-columns: 1fr;
	}

	.catalog__toolbar,
	.cart__header,
	.hero,
	.product-card__row,
	.product-card__footer,
	.cart-item__top,
	.cart-item__controls,
	.modal__header,
	.modal__footer {
		flex-direction: column;
		align-items: stretch;
	}

	.search-field {
		min-width: 0;
	}
}

.homepage_container {
	width: 100%;
	padding: 40px 20px;
}

.homepage_container>.row {
	margin-bottom: 20px;
}

.row {
	display: flex;
	gap: 20px;
}

.card {
	border: 1px solid var(--border);
	background: linear-gradient(180deg, rgba(22, 33, 58, 0.92), rgba(17, 26, 47, 0.9));
	box-shadow: var(--shadow);
	backdrop-filter: blur(20px);
	border-radius: 28px;
	overflow: hidden;
	min-height: 0;
	padding: 20px 22px;
}

.operator>.row {
	margin-bottom: 10px;
}

.col-1 {
	width: calc(100%);
}

.col-2 {
	width: calc(50% - 20px);
}

.col-3 {
	width: calc(33.333% - 20px);
}

.col-4 {
	width: calc(25% - 20px);
}

.homepage_card_button {
	cursor: pointer;
	height: 275px;
	display: flex;
	align-items: center;
	text-align: center;
	justify-content: center;
	transition: .3s ease;
}

.homepage_card_button>div>.icon {
	padding: 20px;
	border-radius: 8px;
	width: fit-content;
	margin: 0px auto;
}

.homepage_card_button>div>.icon>svg {
	width: 32px;
}

.homepage_card_button.hcb--green>div>.icon>svg {
	fill: #4CAF50
}

.homepage_card_button.hcb--green>div>.icon {
	background: #4caf5042;
}

.homepage_card_button>div>.text {
	text-align: center;
	margin-top: 15px;
	font-size: 18px;
	font-weight: 800;
}

.homepage_card_button.hcb--blue>div>.icon>svg {
	fill: #2196F3
}

.homepage_card_button.hcb--blue>div>.icon {
	background: #2196f342;
}

.homepage_card_button.hcb--red>div>.icon>svg {
	fill: #f44336
}

.homepage_card_button.hcb--red>div>.icon {
	background: #f4433642;
}

/* orange */
.homepage_card_button.hcb--orange>div>.icon>svg {
	fill: #ff9800
}

.homepage_card_button.hcb--orange>div>.icon {
	background: #ff980042;
}

.homepage_card_button>div>.description {
	color: #b2b3be;
	font-size: 13px;
	line-height: 1.3;
	margin: 20px 0px 0px;
}

/* color background of whole card by hcb-color */
.homepage_card_button.hcb--blue:hover {
	background: #2195f318;
}

.homepage_card_button.hcb--green:hover {
	background: #4caf5018;
}

.homepage_card_button.hcb--red:hover {
	background: #f4433618;
}

.homepage_card_button.hcb--orange:hover {
	background: #ff980018;
}

span.muted {
	color: #b2b3be;
	line-height: 1.3;
	/* font-size: 13px; */
}

.btn.censore {
	position: relative;
	width: 200px;
}

.btn.censore>button>svg {
	width: 32px;
	fill: #2096f3;
}

.btn.censore>button {
	background: #1b3c66;
	border: none;
	border-radius: 8px;
	padding: 10px 20px 10px 10px;
	display: flex;
	align-items: center;
	gap: 10px;
	color: #2096f3;
	position: relative;
	z-index: 2;
	cursor: pointer;
	margin-top: 11px;
}

span {}

.btn.censore>span {
	position: absolute;
	width: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	font-size: 20px;
}

.nav_links {
	display: flex;
	gap: 20px;
}

.nav_container {
	padding: 0px 15px;
}

.nav_links>a {
	color: #b2b3be;
	font-weight: 600;
	font-size: 15px;
	transition: .3s;
}

.nav_links>a:hover {
	color: #fff;
}

span.category-item__icon>svg {
	width: 20px;
	fill: #ff706b;
}

.pos_item_category {
	min-height: 10px;
}

.row_ticket_item {
    display: flex;
    gap: 25px;
    width: 100%;
    border-bottom: 1px solid var(--border);
    padding: 0px 0px 20px 0px;
    margin-bottom: 20px;
}

.movie_poster > img {
    height: 135px;
    border-radius: 8px;
}

.info_row.screenings_container {
    display: flex;
    gap: 20px;
}

button.buy_ticket_btn {
    display: flex;
    gap: 10px;
    width: fit-content;
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), #ff7e68);
    box-shadow: 0 18px 30px rgba(255, 77, 103, 0.22);
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
}

span.buy_icon > svg {
    width: 24px;
    fill: #fff;
}

div.tickets_grid {
    display: block;
}

button.product-card__badge.date_btn {
    color: var(--muted);
    cursor: pointer;
    font-size: 14px;
}

.dates {
    padding-bottom: 20px;
    display: flex;
    gap: 15px;
}

.date_btn.active {
    color: var(--text)!important;
	background-color: rgba(255, 77, 103, 0.18);
}