/*
* LiveVibe theme tokens and semantic UI utilities.
* Palette aligned with brandboard (navy + cyan / violet / teal aurora).
* Light tokens on :root; dark overrides on .dark (class on ).
*/
:root {
color-scheme: light;
--lv-font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol";
--lv-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace;
--lv-bg: #eef4fc;
--lv-surface-1: rgba(255, 255, 255, 0.78);
--lv-surface-2: rgba(248, 250, 252, 0.88);
--lv-surface-3: rgba(14, 116, 144, 0.08);
--lv-border: rgba(8, 145, 178, 0.28);
--lv-border-muted: rgba(100, 116, 139, 0.32);
--lv-text: #0c1526;
--lv-text-muted: #3d4f66;
--lv-text-subtle: #5a6b82;
--lv-heading: #060d1a;
--lv-link: #2563eb;
--lv-link-hover: #1d4ed8;
--lv-primary: #0891b2;
--lv-primary-hover: #06b6d4;
--lv-secondary: #7c3aed;
--lv-secondary-hover: #6d28d9;
--lv-highlight: #0d9488;
--lv-accent: #2563eb;
--lv-accent-hover: #1d4ed8;
--lv-cta: #3a86ff;
--lv-cta-hover: #2563eb;
--lv-on-primary: #f8fafc;
--lv-on-secondary: #f8fafc;
--lv-btn-primary-bg: var(--lv-primary);
--lv-btn-primary-bg-hover: var(--lv-primary-hover);
--lv-btn-primary-text: var(--lv-on-primary);
--lv-btn-primary-border: transparent;
--lv-btn-primary-shadow: 0 10px 24px color-mix(in srgb, var(--lv-primary) 38%, transparent);
--lv-input-bg: rgba(255, 255, 255, 0.88);
--lv-nav-bg: rgba(255, 255, 255, 0.72);
--lv-nav-sticky-offset: 6rem;
--lv-menu-bg: #f8fafc;
--lv-overlay: rgba(15, 23, 42, 0.4);
--lv-shadow: rgba(15, 23, 42, 0.1);
--lv-input-autofill: rgba(255, 255, 255, 0.95);
--lv-icon-stroke: %230f172a;
--lv-cruise-tier-selected-border: rgba(124, 58, 237, 0.5);
--lv-cruise-tier-selected-bg: rgba(224, 242, 254, 0.85);
--lv-cruise-tier-selected-shadow-1: rgba(34, 211, 238, 0.35);
--lv-cruise-tier-selected-shadow-2: rgba(124, 58, 237, 0.18);
--lv-signup-card-bg: rgba(255, 255, 255, 0.72);
--lv-signup-card-checked-bg: rgba(8, 145, 178, 0.1);
--lv-producer-record-bg: rgba(241, 245, 249, 0.85);
--lv-producer-record-border: rgba(148, 163, 184, 0.4);
--lv-producer-record-divider: rgba(203, 213, 225, 0.85);
--lv-trix-toolbar-bg: rgba(255, 255, 255, 0.92);
--lv-trix-group-bg: rgba(241, 245, 249, 0.95);
--lv-trix-editor-bg: rgba(255, 255, 255, 0.96);
--lv-trix-icon-filter: none;
--lv-theme-color: #eef4fc;
--lv-booking-banner-bg: rgba(13, 148, 136, 0.12);
--lv-booking-banner-border: rgba(13, 148, 136, 0.38);
--lv-booking-banner-text: var(--lv-text);
--lv-booking-banner-muted: var(--lv-text-muted);
--lv-booking-banner-accent: #0f766e;
--lv-flash-notice-bg: color-mix(in srgb, #0d9488 12%, var(--lv-surface-2));
--lv-flash-notice-border: color-mix(in srgb, #0d9488 38%, var(--lv-border-muted));
--lv-flash-notice-text: #0f766e;
--lv-flash-alert-bg: color-mix(in srgb, #ef4444 8%, var(--lv-surface-2));
--lv-flash-alert-border: color-mix(in srgb, #ef4444 35%, var(--lv-border-muted));
--lv-flash-alert-text: #b91c1c;
--lv-callout-warning-bg: color-mix(in srgb, #d97706 14%, var(--lv-surface-2));
--lv-callout-warning-border: color-mix(in srgb, #d97706 42%, var(--lv-border-muted));
--lv-callout-warning-text: #78350f;
--lv-field-error-text: #b91c1c;
--lv-mesh-blur: 100px;
--lv-mesh-a-opacity: 0.34;
--lv-mesh-b-opacity: 0.28;
--lv-mesh-b-blend: normal;
--lv-mesh-layer-a: radial-gradient(circle at 28% 38%, rgba(56, 189, 248, 0.42) 0%, transparent 48%),
radial-gradient(circle at 72% 62%, rgba(129, 140, 248, 0.3) 0%, transparent 44%);
--lv-mesh-layer-b: radial-gradient(circle at 68% 28%, rgba(45, 212, 191, 0.34) 0%, transparent 42%),
radial-gradient(circle at 32% 78%, rgba(99, 102, 241, 0.22) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(236, 72, 153, 0.07) 0%, transparent 55%);
}
.dark {
color-scheme: dark;
--lv-bg: #0a1628;
--lv-surface-1: rgba(15, 23, 42, 0.62);
--lv-surface-2: rgba(30, 41, 59, 0.72);
--lv-surface-3: rgba(255, 255, 255, 0.07);
--lv-border: rgba(34, 211, 238, 0.22);
--lv-border-muted: rgba(148, 163, 184, 0.32);
--lv-text: #e8eef6;
--lv-text-muted: #9aabc4;
--lv-text-subtle: #7b8da8;
--lv-heading: #f8fafc;
--lv-link: #7dd3fc;
--lv-link-hover: #bae6fd;
--lv-primary: #22d3ee;
--lv-primary-hover: #38bdf8;
--lv-secondary: #a855f7;
--lv-secondary-hover: #c084fc;
--lv-highlight: #2dd4bf;
--lv-accent: #60a5fa;
--lv-accent-hover: #93c5fd;
--lv-cta: #60a5fa;
--lv-cta-hover: #93c5fd;
--lv-on-primary: #0f172a;
--lv-on-secondary: #f8fafc;
--lv-btn-primary-bg: #0891b2;
--lv-btn-primary-bg-hover: #06b6d4;
--lv-btn-primary-text: #f8fafc;
--lv-btn-primary-border: color-mix(in srgb, var(--lv-primary) 45%, transparent);
--lv-btn-primary-shadow: 0 10px 28px rgba(8, 145, 178, 0.45), 0 0 0 1px rgba(34, 211, 238, 0.22);
--lv-input-bg: rgba(15, 23, 42, 0.72);
--lv-nav-bg: rgba(10, 22, 40, 0.78);
--lv-menu-bg: #0e1a30;
--lv-overlay: rgba(2, 6, 23, 0.68);
--lv-shadow: rgba(2, 6, 23, 0.45);
--lv-input-autofill: rgba(15, 23, 42, 0.85);
--lv-icon-stroke: %23f1f5f9;
--lv-cruise-tier-selected-border: rgba(167, 139, 250, 0.65);
--lv-cruise-tier-selected-bg: rgba(49, 46, 129, 0.38);
--lv-cruise-tier-selected-shadow-1: rgba(34, 211, 238, 0.35);
--lv-cruise-tier-selected-shadow-2: rgba(168, 85, 247, 0.28);
--lv-signup-card-bg: rgba(15, 23, 42, 0.5);
--lv-signup-card-checked-bg: rgba(34, 211, 238, 0.1);
--lv-producer-record-bg: rgba(15, 23, 42, 0.42);
--lv-producer-record-border: rgba(51, 65, 85, 0.55);
--lv-producer-record-divider: rgba(30, 41, 59, 0.88);
--lv-trix-toolbar-bg: rgba(15, 23, 42, 0.88);
--lv-trix-group-bg: rgba(15, 23, 42, 0.75);
--lv-trix-editor-bg: rgba(15, 23, 42, 0.82);
--lv-trix-icon-filter: invert(1) brightness(1.1);
--lv-theme-color: #0a1628;
--lv-booking-banner-bg: rgba(20, 83, 45, 0.25);
--lv-booking-banner-border: rgba(21, 128, 61, 0.5);
--lv-booking-banner-text: #dcfce7;
--lv-booking-banner-muted: rgba(187, 247, 208, 0.85);
--lv-booking-banner-accent: #bbf7d0;
--lv-flash-notice-bg: color-mix(in srgb, #2dd4bf 12%, var(--lv-surface-2));
--lv-flash-notice-border: color-mix(in srgb, #2dd4bf 35%, var(--lv-border-muted));
--lv-flash-notice-text: #5eead4;
--lv-flash-alert-bg: color-mix(in srgb, #ef4444 10%, var(--lv-surface-2));
--lv-flash-alert-border: color-mix(in srgb, #ef4444 35%, var(--lv-border-muted));
--lv-flash-alert-text: #fecaca;
--lv-callout-warning-bg: color-mix(in srgb, #f59e0b 16%, var(--lv-surface-2));
--lv-callout-warning-border: color-mix(in srgb, #f59e0b 40%, var(--lv-border-muted));
--lv-callout-warning-text: #fde68a;
--lv-field-error-text: #fca5a5;
--lv-mesh-a-opacity: 0.46;
--lv-mesh-b-opacity: 0.38;
--lv-mesh-b-blend: screen;
--lv-mesh-layer-a: radial-gradient(circle at 28% 38%, rgba(34, 211, 238, 0.48) 0%, transparent 46%),
radial-gradient(circle at 72% 62%, rgba(168, 85, 247, 0.36) 0%, transparent 44%);
--lv-mesh-layer-b: radial-gradient(circle at 68% 28%, rgba(20, 184, 166, 0.44) 0%, transparent 42%),
radial-gradient(circle at 32% 78%, rgba(99, 102, 241, 0.3) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(236, 72, 153, 0.1) 0%, transparent 55%);
}
/* Subtle aurora mesh (brandboard-style), theme-aware */
html.lv-ambient {
position: relative;
min-height: 100%;
background-color: var(--lv-bg);
isolation: isolate;
}
html.lv-ambient {
font-family: var(--lv-font-sans);
font-size: 16px;
line-height: 1.6;
letter-spacing: -0.011em;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
html.lv-ambient body {
position: relative;
z-index: 1;
background-color: transparent !important;
color: var(--lv-text);
font: inherit;
}
html.lv-ambient h1,
html.lv-ambient h2,
html.lv-ambient h3,
html.lv-ambient h4,
html.lv-ambient h5,
html.lv-ambient h6 {
color: var(--lv-heading);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.2;
}
html.lv-ambient h1 {
font-weight: 800;
letter-spacing: -0.03em;
}
html.lv-ambient strong,
html.lv-ambient b {
font-weight: 600;
color: var(--lv-heading);
}
html.lv-ambient code,
html.lv-ambient kbd,
html.lv-ambient samp {
font-family: var(--lv-font-mono);
font-size: 0.92em;
font-weight: 500;
}
html.lv-ambient ::selection {
background: color-mix(in srgb, var(--lv-primary) 28%, transparent);
color: var(--lv-heading);
}
html.lv-ambient::before,
html.lv-ambient::after {
content: "";
position: fixed;
inset: -28%;
z-index: 0;
pointer-events: none;
filter: blur(var(--lv-mesh-blur));
will-change: transform;
}
html.lv-ambient::before {
opacity: var(--lv-mesh-a-opacity);
background: var(--lv-mesh-layer-a);
animation: lv-mesh-a 28s ease-in-out infinite alternate;
}
html.lv-ambient::after {
opacity: var(--lv-mesh-b-opacity);
mix-blend-mode: var(--lv-mesh-b-blend);
background: var(--lv-mesh-layer-b);
animation: lv-mesh-b 34s ease-in-out infinite alternate;
}
@keyframes lv-mesh-a {
from {
transform: translate(-4%, -3%) rotate(0deg) scale(1);
}
to {
transform: translate(7%, 6%) rotate(12deg) scale(1.08);
}
}
@keyframes lv-mesh-b {
from {
transform: translate(5%, 4%) rotate(0deg) scale(1.04);
}
to {
transform: translate(-8%, -5%) rotate(-10deg) scale(0.96);
}
}
@media (prefers-reduced-motion: reduce) {
html.lv-ambient::before,
html.lv-ambient::after {
animation: none;
}
}
.lv-nav {
border-bottom: 1px solid var(--lv-border);
background: var(--lv-menu-bg);
}
.lv-nav-dropdown {
border-radius: 0.625rem;
border: 1px solid var(--lv-border);
background: var(--lv-menu-bg);
box-shadow: 0 14px 40px color-mix(in srgb, var(--lv-shadow) 85%, transparent);
}
.lv-dropdown-link {
color: var(--lv-text);
font-weight: 500;
}
.lv-dropdown-link:hover,
.lv-dropdown-link:focus-visible {
background: var(--lv-surface-3);
color: var(--lv-heading);
}
.lv-shell {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.lv-container {
width: min(1120px, 100% - 2rem);
margin-inline: auto;
}
.lv-display {
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.1;
color: var(--lv-heading);
}
.lv-lead {
font-size: 1.125rem;
line-height: 1.65;
color: var(--lv-text-muted);
}
.lv-caption {
font-size: 0.8125rem;
line-height: 1.45;
color: var(--lv-text-subtle);
}
.lv-kicker {
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--lv-text-subtle);
}
.lv-nav-link {
color: var(--lv-text-muted);
font-weight: 500;
transition: color 0.2s ease;
}
.lv-nav-link:hover,
.lv-nav-link:focus-visible {
color: var(--lv-primary);
}
.lv-brand-link {
color: var(--lv-primary);
font-weight: 800;
letter-spacing: -0.02em;
}
.lv-card {
background: var(--lv-surface-1);
border: 1px solid var(--lv-border);
border-radius: 1rem;
box-shadow: 0 10px 32px var(--lv-shadow);
backdrop-filter: blur(10px);
}
.lv-auth-dialog {
margin: auto;
max-height: calc(100vh - 2rem);
overflow: hidden;
background: var(--lv-menu-bg);
}
.lv-auth-dialog--inline {
position: static;
margin: 0;
max-height: none;
width: 100%;
}
.lv-auth-dialog::backdrop {
background: var(--lv-bg);
}
.lv-auth-dialog__panels {
padding-inline: 0.25rem;
scroll-padding-inline: 0.25rem;
}
.lv-cruise-tier-card.lv-cruise-tier--selected {
border-color: var(--lv-cruise-tier-selected-border);
background: var(--lv-cruise-tier-selected-bg);
box-shadow:
0 0 0 1px var(--lv-cruise-tier-selected-shadow-1),
0 10px 28px -10px var(--lv-cruise-tier-selected-shadow-2);
}
.lv-cruise-tier-card {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 0.875rem 1rem;
min-width: 0;
max-width: 100%;
overflow: hidden;
overflow-wrap: anywhere;
}
.lv-cruise-tier-card__body {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
min-width: 0;
}
.lv-cruise-tier-card__primary {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
flex: 1 1 auto;
}
.lv-cruise-tier-card__guests {
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.2;
color: var(--lv-text);
}
.lv-cruise-tier-card__per-person {
margin: 0;
font-size: 0.8125rem;
line-height: 1.25;
color: var(--lv-text-muted);
}
.lv-cruise-tier-card__per-person-amount {
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--lv-text);
}
.lv-cruise-tier-card__per-person-label {
font-weight: 500;
}
.lv-cruise-tier-card__total {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
gap: 0.125rem;
flex: 0 1 auto;
min-width: 0;
max-width: 48%;
padding-left: 0.5rem;
border-left: 1px solid color-mix(in srgb, var(--lv-border-muted) 70%, transparent);
}
.lv-cruise-tier-card__total-label {
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1.2;
color: var(--lv-text-muted);
white-space: nowrap;
}
.lv-cruise-tier-card__total-amount {
min-width: 0;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: right;
font-size: clamp(1.125rem, 2.8vw, 1.5rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.05;
font-variant-numeric: tabular-nums;
color: var(--lv-cta);
}
.lv-cruise-tier-card.lv-cruise-tier--selected .lv-cruise-tier-card__total-amount {
color: var(--lv-cta-hover);
}
.lv-cruise-tier-card:hover .lv-cruise-tier-card__total-amount {
color: var(--lv-cta-hover);
}
.lv-cruise-tier-card.lv-cruise-tier--selected .lv-cruise-tier-card__total {
border-left-color: color-mix(in srgb, var(--lv-secondary) 35%, var(--lv-border-muted));
}
.lv-cruise-tier-card__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
margin: 0;
padding-top: 0.4rem;
border-top: 1px solid color-mix(in srgb, var(--lv-border-muted) 55%, transparent);
font-size: 0.75rem;
color: var(--lv-text-muted);
}
.lv-cruise-checkout {
display: flex;
flex-direction: column;
gap: 2rem;
}
.lv-cruise-checkout__tiers {
display: flex;
flex-direction: column;
gap: 2rem;
}
.lv-cruise-checkout__tier-group {
margin-bottom: 0;
}
.lv-cruise-checkout__tier-group + .lv-cruise-checkout__tier-group {
margin-top: 1.75rem;
padding-top: 1.75rem;
border-top: 1px solid color-mix(in srgb, var(--lv-border-muted) 55%, transparent);
}
.lv-cruise-checkout__tier-options {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 0.75rem;
margin-top: 0.75rem;
}
@media (min-width: 640px) {
.lv-cruise-checkout__tier-options {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.lv-cruise-checkout__tier-options {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1280px) {
.lv-cruise-checkout__tier-options {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.lv-cruise-checkout__section {
padding-top: 1.75rem;
border-top: 1px solid color-mix(in srgb, var(--lv-border-muted) 65%, transparent);
}
.lv-cruise-checkout__actions {
display: flex;
flex-direction: column;
gap: 1.25rem;
padding-top: 1.75rem;
border-top: 1px solid color-mix(in srgb, var(--lv-border-muted) 65%, transparent);
}
.lv-cruise-checkout__actions-row {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Event listings grid card */
.lv-event-card {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease,
transform 0.2s ease;
}
.lv-event-card:hover {
border-color: color-mix(in srgb, var(--lv-accent) 45%, var(--lv-border));
box-shadow: 0 12px 32px color-mix(in srgb, var(--lv-shadow) 80%, transparent);
transform: translateY(-2px);
}
.lv-event-card__overlay {
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
text-decoration: none;
}
.lv-event-card__overlay:focus-visible {
outline: 2px solid var(--lv-primary);
outline-offset: 3px;
}
.lv-event-card__media {
position: relative;
z-index: 0;
flex-shrink: 0;
}
.lv-event-card__media img {
display: block;
width: 100%;
height: 11rem;
object-fit: cover;
border-radius: 0.75rem 0.75rem 0 0;
}
.lv-event-card__body {
position: relative;
z-index: 2;
display: flex;
flex: 1;
flex-direction: column;
gap: 0.65rem;
padding: 1rem 1.1rem 1.15rem;
pointer-events: none;
}
.lv-event-card__title {
margin: 0;
font-size: 1.125rem;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.02em;
color: var(--lv-heading);
}
.lv-event-card__draft {
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #f87171;
}
.lv-event-card__chips {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.lv-event-card__chip {
display: inline-flex;
align-items: center;
padding: 0.2rem 0.55rem;
border-radius: 9999px;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.lv-event-card__chip--date {
color: var(--lv-text);
background: color-mix(in srgb, var(--lv-surface-3) 90%, transparent);
border: 1px solid var(--lv-border-muted);
}
.lv-event-card__chip--tickets {
color: #0e7490;
background: color-mix(in srgb, var(--lv-primary) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--lv-primary) 30%, transparent);
}
.lv-event-card__chip--vod {
color: #be123c;
background: color-mix(in srgb, #f43f5e 12%, transparent);
border: 1px solid color-mix(in srgb, #f43f5e 28%, transparent);
}
.dark .lv-event-card__chip--tickets {
color: #a5f3fc;
}
.dark .lv-event-card__chip--vod {
color: #fecdd3;
}
.lv-event-card__venue {
margin: 0;
font-size: 0.8125rem;
color: var(--lv-text-muted);
}
.lv-event-card__tags {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
pointer-events: auto;
}
.lv-event-card__tag {
display: inline-flex;
align-items: center;
padding: 0.18rem 0.5rem;
border-radius: 0.35rem;
font-size: 0.75rem;
font-weight: 500;
color: var(--lv-text);
background: var(--lv-surface-2);
border: 1px solid var(--lv-border-muted);
text-decoration: none;
transition:
background 0.15s ease,
border-color 0.15s ease,
color 0.15s ease;
}
.lv-event-card__tag:hover,
.lv-event-card__tag:focus-visible {
background: color-mix(in srgb, var(--lv-primary) 14%, var(--lv-surface-2));
border-color: color-mix(in srgb, var(--lv-primary) 40%, transparent);
color: var(--lv-primary);
}
.lv-event-card__tag-more {
font-size: 0.75rem;
font-weight: 500;
color: var(--lv-text-subtle);
}
.lv-event-card__price {
margin-top: auto;
padding-top: 0.35rem;
}
.lv-event-card__price-amount {
font-size: 1.0625rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--lv-cta);
}
.lv-event-card__price-hint {
display: block;
font-size: 0.75rem;
color: var(--lv-text-subtle);
}
.lv-event-card__excerpt {
margin: 0;
font-size: 0.875rem;
line-height: 1.55;
color: var(--lv-text-muted);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.lv-event-card__cta {
align-self: flex-start;
margin-top: 0.5rem;
pointer-events: auto;
text-decoration: none;
}
@media (min-width: 640px) {
.lv-cruise-checkout__actions-row {
flex-direction: row;
align-items: flex-end;
gap: 1.25rem;
}
}
.lv-cruise-checkout__terms-note {
margin-top: 0.5rem;
padding-top: 1rem;
border-top: 1px solid color-mix(in srgb, var(--lv-border-muted) 45%, transparent);
font-size: 0.75rem;
line-height: 1.5;
color: var(--lv-text-muted);
}
.lv-booking-wizard__layout {
align-items: start;
}
.lv-booking-wizard__layout--review {
width: 100%;
}
.lv-booking-wizard__dock {
align-self: start;
min-width: 0;
}
@media (max-width: 1023px) {
main.lv-container:has(.lv-booking-wizard) {
overflow-x: clip;
}
.lv-booking-wizard {
width: 100%;
max-width: 100%;
min-width: 0;
overflow-x: clip;
padding-left: env(safe-area-inset-left, 0px);
padding-right: env(safe-area-inset-right, 0px);
box-sizing: border-box;
}
.lv-booking-wizard__layout,
.lv-booking-wizard__main,
.lv-booking-wizard__stepper-mobile {
min-width: 0;
max-width: 100%;
}
.lv-booking-wizard__stepper-mobile {
overflow-x: clip;
}
.lv-booking-stepper--compact {
max-width: 100%;
min-width: 0;
overflow: hidden;
}
.lv-booking-wizard .lv-cruise-checkout,
.lv-booking-wizard .lv-cruise-checkout__tiers,
.lv-booking-wizard .lv-cruise-checkout__tier-options {
min-width: 0;
max-width: 100%;
}
.lv-booking-wizard .lv-cruise-tier-card {
max-width: 100%;
}
.lv-booking-wizard__step-panel.lv-card {
border: none;
box-shadow: none;
background: transparent;
border-radius: 0;
padding: 0;
}
.lv-booking-room-group {
border: none;
background: transparent;
padding: 0;
gap: 0.75rem;
}
.lv-booking-room-group > legend {
width: 100%;
padding: 0 0 0.5rem;
margin: 0 0 0.75rem;
border-bottom: 1px solid color-mix(in srgb, var(--lv-border-muted) 55%, transparent);
}
.lv-booking-room-group__children {
border-top: none;
padding-top: 1rem;
margin-top: 0.25rem;
}
.lv-booking-passenger-card {
border: none;
background: transparent;
border-radius: 0;
padding: 0 0 1rem;
margin-bottom: 0.25rem;
border-bottom: 1px solid color-mix(in srgb, var(--lv-border-muted) 45%, transparent);
}
.lv-booking-passenger-card:last-child,
.lv-booking-room-group__children .lv-booking-passenger-card:last-of-type {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
.lv-booking-wizard__dock {
position: fixed;
left: 0;
right: 0;
bottom: 0;
width: 100%;
max-width: 100%;
z-index: 40;
top: auto;
align-self: auto;
border-top: 1px solid var(--lv-border);
background: color-mix(in srgb, var(--lv-surface) 98%, transparent);
backdrop-filter: blur(12px);
box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
padding:
0.5rem
max(1rem, env(safe-area-inset-right, 0px))
max(0.5rem, env(safe-area-inset-bottom, 0px))
max(1rem, env(safe-area-inset-left, 0px));
overflow: visible;
box-sizing: border-box;
}
.lv-booking-wizard__dock-inner {
gap: 0.5rem;
}
.lv-booking-wizard__dock-bar-toggle {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: 0.5rem 0.75rem;
padding: 0.35rem 0;
border: none;
background: transparent;
color: inherit;
text-align: left;
cursor: pointer;
min-height: 2.75rem;
}
.lv-booking-wizard__dock-bar-toggle:focus-visible {
outline: 2px solid var(--lv-secondary);
outline-offset: 2px;
border-radius: 0.375rem;
}
.lv-booking-wizard__dock-drawer {
display: none;
}
.lv-booking-wizard__dock--expanded .lv-booking-wizard__dock-drawer {
display: block;
max-height: min(45vh, 16rem);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-top: 0.25rem;
border-top: 1px solid var(--lv-border-muted);
}
@media (prefers-reduced-motion: no-preference) {
.lv-booking-wizard__dock--expanded .lv-booking-wizard__dock-drawer {
animation: lv-booking-dock-drawer-in 0.2s ease-out;
}
}
@keyframes lv-booking-dock-drawer-in {
from {
opacity: 0;
transform: translateY(0.35rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.lv-booking-wizard__dock .lv-booking-summary--dock.lv-card {
border: none;
background: transparent;
box-shadow: none;
padding: 0;
gap: 0.5rem;
}
.lv-booking-wizard__dock .lv-booking-summary--dock .lv-booking-summary__lines {
gap: 0.35rem;
font-size: 0.8125rem;
}
.lv-booking-stepper--compact .lv-booking-stepper__list {
flex-wrap: nowrap;
max-width: 100%;
overflow-x: auto;
padding-bottom: 0.15rem;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.lv-booking-stepper--compact .lv-booking-step {
white-space: nowrap;
font-size: 0.75rem;
padding: 0.3rem 0.5rem;
min-height: 2rem;
}
.lv-booking-stepper--compact .lv-booking-step__number {
width: 1.1rem;
height: 1.1rem;
font-size: 0.6rem;
}
}
@media (min-width: 1024px) {
.lv-booking-wizard__dock {
position: sticky;
top: calc(var(--lv-nav-sticky-offset) + 0.75rem);
}
.lv-booking-wizard__dock-drawer {
display: block;
max-height: none;
overflow: visible;
border-top: none;
padding-top: 0;
}
}
.lv-booking-summary__lines {
margin: 0;
}
.lv-booking-summary__row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
margin: 0;
}
.lv-booking-summary__row dt {
margin: 0;
font-weight: 500;
}
.lv-booking-summary__row dd {
margin: 0;
}
.lv-booking-wizard__step-panel {
min-width: 0;
}
@media (prefers-reduced-motion: no-preference) {
.lv-booking-wizard__step-panel.lv-booking-step-enter--forward,
.lv-booking-wizard__step-panel.lv-booking-step-enter--back {
opacity: 0;
transition:
opacity 0.28s ease,
transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.lv-booking-wizard__step-panel.lv-booking-step-enter--forward {
transform: translateX(1.25rem);
}
.lv-booking-wizard__step-panel.lv-booking-step-enter--back {
transform: translateX(-1.25rem);
}
.lv-booking-wizard__step-panel.lv-booking-step-enter--active {
opacity: 1;
transform: translateX(0);
}
}
.lv-cruise-event-booking__intro {
padding-bottom: 0.25rem;
}
.lv-booking-wizard .lv-cruise-checkout__tier-options,
.lv-cruise-event-booking .lv-cruise-checkout__tier-options {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 640px) {
.lv-booking-wizard .lv-cruise-checkout__tier-options,
.lv-cruise-event-booking .lv-cruise-checkout__tier-options {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1280px) {
.lv-booking-wizard .lv-cruise-checkout__tier-options,
.lv-cruise-event-booking .lv-cruise-checkout__tier-options {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.lv-booking-stepper__list {
list-style: none;
padding: 0;
margin: 0;
}
.lv-booking-step {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0.6rem;
border-radius: 9999px;
border: 1px solid var(--lv-border-muted);
color: var(--lv-text-muted);
text-decoration: none;
min-height: 2.25rem;
}
.lv-booking-step--active {
border-color: var(--lv-secondary);
background: color-mix(in srgb, var(--lv-secondary) 12%, transparent);
color: var(--lv-text);
}
.lv-booking-step--complete {
border-color: var(--lv-border);
color: var(--lv-text);
}
.lv-booking-step--complete:hover {
border-color: var(--lv-secondary);
}
.lv-booking-step--upcoming {
opacity: 0.65;
}
.lv-booking-step__number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.25rem;
height: 1.25rem;
border-radius: 9999px;
font-size: 0.65rem;
font-weight: 700;
background: var(--lv-surface-3);
}
.lv-booking-step--active .lv-booking-step__number {
background: var(--lv-secondary);
color: var(--lv-on-primary, #fff);
}
.lv-card-muted {
background: var(--lv-surface-2);
border: 1px solid var(--lv-border-muted);
border-radius: 1rem;
backdrop-filter: blur(10px);
}
.lv-booking-banner {
margin-bottom: 1.5rem;
border-radius: 0.5rem;
border: 1px solid var(--lv-booking-banner-border);
background: var(--lv-booking-banner-bg);
padding: 0.75rem 1rem;
color: var(--lv-booking-banner-text);
}
.lv-booking-banner__title {
font-weight: 600;
}
.lv-booking-banner__hint {
margin-top: 0.5rem;
font-size: 0.75rem;
color: var(--lv-booking-banner-muted);
}
.lv-booking-banner__item {
font-size: 0.875rem;
line-height: 1.5;
color: var(--lv-booking-banner-text);
}
.lv-booking-banner__code {
font-family: var(--lv-font-mono);
letter-spacing: 0.08em;
color: var(--lv-booking-banner-accent);
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--lv-booking-banner-accent) 45%, transparent);
}
.lv-booking-banner__code:hover,
.lv-booking-banner__code:focus-visible {
color: var(--lv-booking-banner-text);
text-decoration-color: currentColor;
}
.lv-booking-banner__meta {
color: var(--lv-booking-banner-muted);
}
.lv-flash {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 1rem;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
border: 1px solid var(--lv-flash-border, var(--lv-border-muted));
background: var(--lv-flash-bg, var(--lv-surface-2));
color: var(--lv-flash-text, var(--lv-text));
font-size: 0.875rem;
line-height: 1.45;
box-shadow: 0 8px 20px color-mix(in srgb, var(--lv-shadow) 65%, transparent);
transition: opacity 0.5s ease;
}
.lv-flash--notice {
--lv-flash-bg: var(--lv-flash-notice-bg);
--lv-flash-border: var(--lv-flash-notice-border);
--lv-flash-text: var(--lv-flash-notice-text);
}
.lv-flash--alert {
--lv-flash-bg: var(--lv-flash-alert-bg);
--lv-flash-border: var(--lv-flash-alert-border);
--lv-flash-text: var(--lv-flash-alert-text);
}
.lv-flash--inline {
margin-bottom: 0;
margin-top: 0.5rem;
box-shadow: none;
}
.lv-callout-warning {
border-radius: 0.375rem;
border: 1px solid var(--lv-callout-warning-border);
background: var(--lv-callout-warning-bg);
color: var(--lv-callout-warning-text);
font-size: 0.75rem;
line-height: 1.625;
padding: 0.5rem 0.75rem;
}
.lv-flash__message {
flex: 1;
font-weight: 600;
}
.lv-flash__dismiss {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.75rem;
height: 1.75rem;
margin: 0;
padding: 0;
border: 0;
border-radius: 0.375rem;
background: transparent;
color: inherit;
opacity: 0.75;
cursor: pointer;
transition: opacity 0.15s ease;
}
.lv-flash__dismiss-icon {
width: 1rem;
height: 1rem;
display: block;
}
.lv-flash__dismiss:hover,
.lv-flash__dismiss:focus-visible {
opacity: 1;
outline: 2px solid color-mix(in srgb, currentColor 35%, transparent);
outline-offset: 2px;
}
.lv-field-error {
margin-top: 0.25rem;
font-size: 0.75rem;
line-height: 1.4;
color: var(--lv-field-error-text);
}
.lv-button-primary,
.lv-btn-primary,
.lv-button-secondary,
.lv-button-pay,
.lv-button-danger {
font-weight: 700;
border-radius: 0.75rem;
transition: all 0.2s ease;
cursor: pointer;
}
.lv-button-primary,
.lv-btn-primary {
background: var(--lv-btn-primary-bg, var(--lv-primary));
color: var(--lv-btn-primary-text, var(--lv-on-primary));
box-shadow: var(--lv-btn-primary-shadow, 0 10px 24px color-mix(in srgb, var(--lv-primary) 38%, transparent));
}
.lv-button-primary:hover,
.lv-btn-primary:hover,
.lv-button-primary:focus-visible,
.lv-btn-primary:focus-visible {
background: var(--lv-btn-primary-bg-hover, var(--lv-primary-hover));
}
.lv-btn-primary {
display: inline-block;
padding: 0.5rem 1.25rem;
border: none;
}
.lv-button-primary.lv-button--busy,
.lv-btn-primary.lv-button--busy,
.lv-button-primary[aria-busy="true"],
.lv-btn-primary[aria-busy="true"] {
opacity: 0.72;
cursor: wait;
}
.lv-button-primary .lv-cta-price-original,
.lv-button-pay .lv-cta-price-original {
opacity: 0.72;
text-decoration: line-through;
margin-right: 0.5rem;
}
.lv-button-primary .lv-cta-price-sale,
.lv-button-pay .lv-cta-price-sale {
font-weight: 800;
}
.lv-addon-chip__price {
color: var(--lv-heading);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.lv-button-pay {
background: var(--lv-btn-primary-bg, var(--lv-primary));
color: var(--lv-btn-primary-text, var(--lv-on-primary));
border: 1px solid var(--lv-btn-primary-border, color-mix(in srgb, var(--lv-primary) 75%, white));
box-shadow: var(--lv-btn-primary-shadow, 0 10px 24px rgba(58, 134, 255, 0.42));
}
.lv-button-pay:hover,
.lv-button-pay:focus-visible {
background: var(--lv-btn-primary-bg-hover, var(--lv-primary-hover));
}
.lv-button-secondary {
background: var(--lv-secondary);
color: var(--lv-on-secondary);
border: 1px solid color-mix(in srgb, var(--lv-secondary) 70%, white);
box-shadow: 0 10px 24px rgba(168, 85, 247, 0.3);
cursor: pointer;
}
.lv-button-secondary:hover,
.lv-button-secondary:focus-visible {
background: var(--lv-secondary-hover);
}
.lv-button-danger {
background: #dc2626;
color: #ffffff;
border: 1px solid color-mix(in srgb, #dc2626 80%, black);
box-shadow: 0 10px 24px color-mix(in srgb, #dc2626 35%, transparent);
}
.lv-button-danger:hover,
.lv-button-danger:focus-visible {
background: #b91c1c;
}
.lv-input {
width: 100%;
border-radius: 0.75rem;
border: 1px solid var(--lv-border);
background: var(--lv-input-bg);
color: var(--lv-text);
padding: 0.7rem 0.9rem;
}
.lv-input:focus-visible {
outline: none;
border-color: color-mix(in srgb, var(--lv-primary) 80%, white);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lv-primary) 65%, white);
}
.lv-input:-webkit-autofill,
.lv-input:-webkit-autofill:hover,
.lv-input:-webkit-autofill:focus,
.lv-input:-webkit-autofill:active {
-webkit-text-fill-color: var(--lv-text);
caret-color: var(--lv-text);
border: 1px solid var(--lv-border);
box-shadow: 0 0 0 1000px var(--lv-input-autofill) inset;
transition: background-color 99999s ease-out 0s;
}
.lv-input:autofill,
.lv-input:autofill:hover,
.lv-input:autofill:focus {
border: 1px solid var(--lv-border);
box-shadow: 0 0 0 1000px var(--lv-input-autofill) inset;
-webkit-text-fill-color: var(--lv-text);
caret-color: var(--lv-text);
}
.lv-input--comfortable {
font-size: 1rem;
min-height: 3rem;
padding: 0.85rem 1rem;
}
.lv-file-input {
color: var(--lv-text-muted);
cursor: pointer;
font-size: 0.875rem;
line-height: 1.4;
}
.lv-file-input::file-selector-button {
margin-right: 0.75rem;
border: 0;
border-radius: 0.375rem;
background: var(--lv-secondary);
color: var(--lv-on-secondary);
padding: 0.375rem 0.75rem;
font-family: inherit;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease;
}
.lv-file-input::file-selector-button:hover {
background: var(--lv-secondary-hover);
}
.lv-file-input::-webkit-file-upload-button {
margin-right: 0.75rem;
border: 0;
border-radius: 0.375rem;
background: var(--lv-secondary);
color: var(--lv-on-secondary);
padding: 0.375rem 0.75rem;
font-family: inherit;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease;
}
.lv-file-input::-webkit-file-upload-button:hover {
background: var(--lv-secondary-hover);
}
.lv-password-field {
position: relative;
}
.lv-password-field__toggle {
position: absolute;
right: 0.35rem;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
min-width: 2.75rem;
min-height: 2.75rem;
border-radius: 0.5rem;
color: var(--lv-text-muted);
background: transparent;
border: none;
cursor: pointer;
}
.lv-password-field__toggle:hover,
.lv-password-field__toggle:focus-visible {
color: var(--lv-primary);
outline: 2px solid color-mix(in srgb, var(--lv-primary) 75%, white);
outline-offset: 1px;
}
.lv-password-field__icon {
width: 1.35rem;
height: 1.35rem;
}
.lv-signup-access-card {
display: block;
cursor: pointer;
border-radius: 1rem;
border: 2px solid var(--lv-border-muted);
background: var(--lv-signup-card-bg);
padding: 1.25rem 1.35rem;
transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.lv-signup-access-card:has(.lv-signup-access-card__input:checked) {
border-color: var(--lv-primary);
background: var(--lv-signup-card-checked-bg);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--lv-primary) 45%, transparent);
}
.lv-signup-access-card:has(.lv-signup-access-card__input:focus-visible) {
outline: 2px solid color-mix(in srgb, var(--lv-primary) 75%, white);
outline-offset: 2px;
}
.lv-signup-access-card--producer:has(.lv-signup-access-card__input:checked) {
border-color: color-mix(in srgb, var(--lv-secondary) 75%, transparent);
background: color-mix(in srgb, var(--lv-secondary) 12%, transparent);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--lv-secondary) 40%, transparent);
}
.lv-signup-access-card--promoter:has(.lv-signup-access-card__input:checked) {
border-color: color-mix(in srgb, var(--lv-highlight) 75%, transparent);
background: color-mix(in srgb, var(--lv-highlight) 14%, transparent);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--lv-highlight) 38%, transparent);
}
.lv-signup-access-card__input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
select.lv-input {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 12px 8px;
padding-right: 2.75rem;
}
:root select.lv-input {
background-image: url("data:image/svg+xml;utf8,");
}
.dark select.lv-input {
background-image: url("data:image/svg+xml;utf8,");
}
.lv-producer-sellables select.lv-input {
padding-right: 3rem;
background-position: right 1.15rem center;
}
.cruise-dob-select {
align-items: center;
min-height: calc(0.7rem * 2 + 1.25rem + 2px);
}
.cruise-dob-select.cruise-dob-select--touch {
min-height: 2.75rem;
}
.cruise-dob-select.cruise-dob-select--touch select.lv-input.cruise-dob-select__field {
min-height: 2.75rem;
}
.cruise-dob-select select.lv-input.cruise-dob-select__field {
width: auto;
flex: 1 1 auto;
min-height: 0;
margin: 0;
padding: 0.7rem 2rem 0.7rem 0.75rem;
font-size: 0.875rem;
line-height: 1.25rem;
background-position: right 0.65rem center;
background-size: 10px 7px;
}
/* Rails 8: [year]/[month]/[day]; legacy AR forms may use (1i)/(2i)/(3i) */
.cruise-dob-select select.lv-input[name$="[year]"],
.cruise-dob-select select.lv-input[name$="(1i)"] {
flex: 1 1 5.5rem;
min-width: 5.5rem;
}
.cruise-dob-select select.lv-input[name$="[month]"],
.cruise-dob-select select.lv-input[name$="(2i)"] {
flex: 1.5 1 calc(7rem - 20px);
min-width: calc(7rem - 20px);
}
.cruise-dob-select select.lv-input[name$="[day]"],
.cruise-dob-select select.lv-input[name$="(3i)"] {
flex: 0.75 1 calc(3.5rem + 20px);
min-width: calc(3.5rem + 20px);
}
:root input.lv-input[type="date"]::-webkit-calendar-picker-indicator,
:root input.lv-input[type="datetime-local"]::-webkit-calendar-picker-indicator,
:root input.lv-input[type="time"]::-webkit-calendar-picker-indicator,
:root input.lv-input[type="month"]::-webkit-calendar-picker-indicator,
:root input.lv-input[type="week"]::-webkit-calendar-picker-indicator {
background-image: url("data:image/svg+xml;utf8,");
}
.dark input.lv-input[type="date"]::-webkit-calendar-picker-indicator,
.dark input.lv-input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.dark input.lv-input[type="time"]::-webkit-calendar-picker-indicator,
.dark input.lv-input[type="month"]::-webkit-calendar-picker-indicator,
.dark input.lv-input[type="week"]::-webkit-calendar-picker-indicator {
background-image: url("data:image/svg+xml;utf8,");
}
input.lv-input[type="date"]::-webkit-calendar-picker-indicator,
input.lv-input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input.lv-input[type="time"]::-webkit-calendar-picker-indicator,
input.lv-input[type="month"]::-webkit-calendar-picker-indicator,
input.lv-input[type="week"]::-webkit-calendar-picker-indicator {
background-repeat: no-repeat;
background-position: center;
background-size: 18px 18px;
width: 18px;
height: 18px;
color: transparent;
opacity: 1;
cursor: pointer;
}
input.lv-input[type="date"]::-webkit-calendar-picker-indicator:hover,
input.lv-input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input.lv-input[type="time"]::-webkit-calendar-picker-indicator:hover,
input.lv-input[type="month"]::-webkit-calendar-picker-indicator:hover,
input.lv-input[type="week"]::-webkit-calendar-picker-indicator:hover {
opacity: 0.85;
}
@keyframes lv-producer-tier-saved-ring {
0% {
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
}
35% {
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.4);
}
100% {
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
}
}
.lv-producer-tier-row--saved {
animation: lv-producer-tier-saved-ring 1.1s ease-out;
}
.lv-producer-tier-row--error {
box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.55);
}
.lv-producer-share-link-row--saved {
animation: lv-producer-tier-saved-ring 1.1s ease-out;
}
.lv-producer-share-link-row--error {
box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.55);
}
.lv-producer-addon-row--saved {
animation: lv-producer-tier-saved-ring 1.1s ease-out;
}
.cruise-child-card--saved {
animation: lv-producer-tier-saved-ring 1.1s ease-out;
}
.lv-producer-addon-row--error {
box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.55);
}
.lv-producer-addon-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0.5rem 0;
align-items: stretch;
}
.lv-producer-addon-grid--head {
display: none;
}
@media (min-width: 768px) {
.lv-producer-addon-grid {
grid-template-columns:
minmax(10rem, 1fr)
minmax(6.5rem, 8rem)
minmax(7rem, 9rem)
minmax(4.25rem, auto);
gap: 0.35rem 0.65rem;
align-items: center;
}
.lv-producer-addon-grid--head {
display: grid;
}
.lv-producer-addon-grid__label {
display: none;
}
}
.lv-producer-addon-grid__label {
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--lv-text-muted);
}
.lv-producer-addon-grid__field {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
}
.lv-producer-addon-grid__field--actions {
align-items: flex-start;
}
@media (min-width: 768px) {
.lv-producer-addon-grid__field--actions {
align-items: flex-end;
justify-content: center;
}
}
.lv-producer-addon-row {
padding: 0.65rem 0;
}
@media (min-width: 768px) {
.lv-producer-addon-row {
padding: 0.5rem 0;
}
}
/* Producer cruise sellables: responsive tier layout (CSS owns breakpoints; matches Tailwind md = 768px). */
.lv-producer-cruise-tiers {
width: 100%;
}
.lv-producer-cruise-tiers__tiergrid,
.lv-producer-cruise-tiers__header {
display: grid;
grid-template-columns: 1fr;
gap: 0.5rem 0;
align-items: stretch;
}
.lv-producer-cruise-tiers__header {
display: none;
}
@media (min-width: 768px) {
.lv-producer-cruise-tiers__tiergrid,
.lv-producer-cruise-tiers__header {
grid-template-columns:
minmax(4.5rem, 6.5rem)
minmax(7.5rem, 11rem)
4rem
minmax(7rem, 8.5rem)
minmax(6rem, 7.5rem)
minmax(4.25rem, auto);
gap: 0.35rem 0.65rem;
align-items: center;
}
.lv-producer-cruise-tiers__header {
display: grid;
}
}
.lv-producer-cruise-tiers__list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
@media (min-width: 768px) {
.lv-producer-cruise-tiers__list {
gap: 0;
}
}
.lv-producer-cruise-tiers__record {
border-radius: 0.5rem;
border: 1px solid var(--lv-producer-record-border);
background: var(--lv-producer-record-bg);
padding: 0.75rem 0.85rem;
}
@media (min-width: 768px) {
.lv-producer-cruise-tiers__record {
border: none;
background: transparent;
padding: 0.5rem 0;
border-radius: 0;
}
.lv-producer-cruise-tiers__record + .lv-producer-cruise-tiers__record {
border-top: 1px solid var(--lv-producer-record-divider);
margin-top: 0.15rem;
padding-top: 0.5rem;
}
}
.lv-producer-cruise-tiers__field {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
}
.lv-producer-sellables__action {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding: 0.375rem 0.75rem;
border-radius: 0.375rem;
font-size: 0.75rem;
font-weight: 600;
line-height: 1.25;
cursor: pointer;
border: 1px solid var(--lv-border-muted);
background: var(--lv-surface-2);
color: var(--lv-text);
text-decoration: none;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.lv-producer-sellables__action:hover,
.lv-producer-sellables__action:focus-visible {
background: var(--lv-surface-3);
color: var(--lv-text);
}
.lv-producer-sellables__action--danger {
border-color: color-mix(in srgb, #ef4444 42%, var(--lv-border-muted));
color: color-mix(in srgb, #f87171 88%, var(--lv-text));
background: color-mix(in srgb, #ef4444 7%, var(--lv-surface-2));
}
.lv-producer-sellables__action--danger:hover,
.lv-producer-sellables__action--danger:focus-visible {
background: color-mix(in srgb, #ef4444 14%, var(--lv-surface-2));
border-color: color-mix(in srgb, #ef4444 55%, var(--lv-border-muted));
}
.lv-producer-sellables__action--prominent {
border-color: color-mix(in srgb, var(--lv-primary) 55%, var(--lv-border-muted));
background: color-mix(in srgb, var(--lv-primary) 12%, var(--lv-surface-2));
color: var(--lv-primary);
}
.lv-producer-sellables__action--prominent:hover,
.lv-producer-sellables__action--prominent:focus-visible {
background: color-mix(in srgb, var(--lv-primary) 20%, var(--lv-surface-2));
border-color: color-mix(in srgb, var(--lv-primary) 70%, var(--lv-border-muted));
color: var(--lv-primary-hover);
}
.lv-producer-section-matrix-prompt {
border: 1px solid color-mix(in srgb, var(--lv-primary) 42%, var(--lv-border-muted));
background: color-mix(in srgb, var(--lv-primary) 7%, var(--lv-surface-2));
border-radius: 0.5rem;
padding: 1.25rem;
}
.lv-producer-section-matrix-prompt--compact {
padding: 0.875rem 1rem;
}
.lv-producer-sellables__remove {
display: inline-flex;
width: 100%;
justify-content: center;
align-items: center;
flex-shrink: 0;
padding: 0.5rem 0.5rem;
border-radius: 0.375rem;
font-size: 0.75rem;
font-weight: 600;
line-height: 1.25;
cursor: pointer;
border: 1px solid transparent;
background: transparent;
color: color-mix(in srgb, #f87171 90%, var(--lv-text));
text-decoration: none;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
@media (min-width: 768px) {
.lv-producer-sellables__remove {
width: auto;
}
}
.lv-producer-sellables__remove:hover,
.lv-producer-sellables__remove:focus-visible {
color: #fca5a5;
border-color: color-mix(in srgb, #ef4444 35%, transparent);
background: color-mix(in srgb, #ef4444 8%, transparent);
}
.lv-producer-section-tiers {
width: 100%;
}
.lv-producer-section-tiers__tiergrid,
.lv-producer-section-tiers__header {
display: grid;
grid-template-columns: 1fr;
gap: 0.5rem 0;
align-items: stretch;
}
.lv-producer-section-tiers__header {
display: none;
}
@media (min-width: 768px) {
.lv-producer-section-tiers__tiergrid,
.lv-producer-section-tiers__header {
grid-template-columns:
minmax(8rem, 1.35fr)
minmax(7rem, 8.5rem)
minmax(6rem, 7.5rem)
minmax(4.25rem, auto);
gap: 0.35rem 0.65rem;
align-items: center;
}
.lv-producer-section-tiers__header {
display: grid;
}
}
.lv-producer-section-tiers__list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
@media (min-width: 768px) {
.lv-producer-section-tiers__list {
gap: 0;
}
}
.lv-producer-section-tiers__record {
border-radius: 0.5rem;
border: 1px solid var(--lv-producer-record-border);
background: var(--lv-producer-record-bg);
padding: 0.75rem 0.85rem;
}
@media (min-width: 768px) {
.lv-producer-section-tiers__record {
border: none;
background: transparent;
padding: 0.5rem 0;
border-radius: 0;
}
.lv-producer-section-tiers__record + .lv-producer-section-tiers__record {
border-top: 1px solid var(--lv-producer-record-divider);
margin-top: 0.15rem;
padding-top: 0.5rem;
}
}
.lv-producer-section-tiers__field {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
}
.lv-producer-events-index {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.lv-producer-events-index__header {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.lv-producer-events-index__new-btn {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding: 0.5rem 1.25rem;
border-radius: 0.5rem;
font-size: 0.875rem;
font-weight: 700;
text-decoration: none;
background: var(--lv-secondary);
color: var(--lv-on-secondary);
border: 1px solid color-mix(in srgb, var(--lv-secondary) 70%, white);
box-shadow: 0 10px 24px rgba(168, 85, 247, 0.3);
transition: background 0.15s ease;
}
.lv-producer-events-index__new-btn:hover,
.lv-producer-events-index__new-btn:focus-visible {
background: var(--lv-secondary-hover);
color: var(--lv-on-secondary);
}
.lv-producer-events-index__toolbar {
display: flex;
flex-direction: column;
gap: 0.85rem;
padding: 1rem 1.1rem;
border-radius: 0.75rem;
border: 1px solid var(--lv-border-muted);
background: color-mix(in srgb, var(--lv-surface-2) 88%, transparent);
}
.lv-producer-events-index__toolbar-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem;
}
@media (min-width: 640px) {
.lv-producer-events-index__toolbar-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.lv-producer-events-index__toolbar-grid {
grid-template-columns: minmax(12rem, 1.6fr) repeat(4, minmax(8rem, 1fr));
}
}
.lv-producer-events-index__label {
display: block;
margin-bottom: 0.25rem;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--lv-muted);
}
.lv-producer-events-index__toolbar-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem 1rem;
}
.lv-producer-events-index__checkbox {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: var(--lv-text);
cursor: pointer;
}
.lv-producer-events-index__toolbar-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
}
.lv-producer-events-index__apply-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem 1.1rem;
border-radius: 0.5rem;
font-size: 0.875rem;
font-weight: 700;
cursor: pointer;
border: none;
background: var(--lv-primary);
color: var(--lv-on-primary);
}
.lv-producer-events-index__clear-link {
font-size: 0.875rem;
font-weight: 600;
color: var(--lv-link, var(--lv-primary));
text-decoration: none;
}
.lv-producer-events-index__clear-link:hover,
.lv-producer-events-index__clear-link:focus-visible {
text-decoration: underline;
}
.lv-producer-events-index__results-meta {
font-size: 0.8125rem;
color: var(--lv-muted);
}
.lv-producer-events-index__list {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.lv-producer-events-index__empty {
padding: 2rem 1.25rem;
text-align: center;
border-radius: 0.75rem;
border: 1px dashed var(--lv-border-muted);
background: color-mix(in srgb, var(--lv-surface-2) 70%, transparent);
color: var(--lv-muted);
}
.lv-producer-events-index__pagination {
display: flex;
justify-content: center;
}
.lv-producer-event-card {
border-radius: 0.75rem;
border: 1px solid var(--lv-border-muted);
background: color-mix(in srgb, var(--lv-surface-2) 90%, transparent);
padding: 1rem 1.1rem;
box-shadow: 0 1px 0 color-mix(in srgb, var(--lv-border-muted) 65%, transparent);
}
@media (min-width: 768px) {
.lv-producer-event-card {
padding: 1.1rem 1.25rem;
}
}
.lv-producer-event-card__main {
display: flex;
flex-direction: column;
gap: 1rem;
}
@media (min-width: 1024px) {
.lv-producer-event-card__main {
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
gap: 1.5rem;
}
}
.lv-producer-event-card__badge {
display: inline-flex;
align-items: center;
padding: 0.15rem 0.5rem;
border-radius: 9999px;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
border: 1px solid transparent;
white-space: nowrap;
}
.lv-producer-event-card__badge--live {
color: #6ee7b7;
background: color-mix(in srgb, #10b981 14%, transparent);
border-color: color-mix(in srgb, #10b981 35%, transparent);
}
.lv-producer-event-card__badge--draft {
color: var(--lv-muted);
background: color-mix(in srgb, var(--lv-surface-3) 80%, transparent);
border-color: var(--lv-border-muted);
}
.lv-producer-event-card__badge--review {
color: #fcd34d;
background: color-mix(in srgb, #f59e0b 12%, transparent);
border-color: color-mix(in srgb, #f59e0b 35%, transparent);
}
.lv-producer-event-card__badge--changes {
color: #fca5a5;
background: color-mix(in srgb, #ef4444 10%, transparent);
border-color: color-mix(in srgb, #ef4444 30%, transparent);
}
.lv-producer-event-card__badge--approved {
color: #93c5fd;
background: color-mix(in srgb, #3b82f6 12%, transparent);
border-color: color-mix(in srgb, #3b82f6 30%, transparent);
}
.lv-producer-event-card__badge--cruise,
.lv-producer-event-card__badge--standard {
color: var(--lv-subtle);
background: transparent;
border-color: var(--lv-border-muted);
}
.lv-producer-event-card__badge--past {
color: var(--lv-muted);
background: color-mix(in srgb, var(--lv-surface-3) 70%, transparent);
border-color: var(--lv-border-muted);
}
.lv-producer-event-card__actions {
display: flex;
flex-direction: column;
gap: 0.65rem;
flex-shrink: 0;
width: 100%;
}
@media (min-width: 1024px) {
.lv-producer-event-card__actions {
width: min(100%, 22rem);
}
}
.lv-producer-event-card__primary-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem;
}
.lv-producer-event-card__btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.5rem;
padding: 0.5rem 0.75rem;
border-radius: 0.5rem;
font-size: 0.8125rem;
font-weight: 700;
text-align: center;
text-decoration: none;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.lv-producer-event-card__btn--primary {
background: var(--lv-primary);
color: var(--lv-on-primary);
border: 1px solid color-mix(in srgb, var(--lv-primary) 75%, white);
}
.lv-producer-event-card__btn--primary:hover,
.lv-producer-event-card__btn--primary:focus-visible {
background: var(--lv-primary-hover, var(--lv-primary));
color: var(--lv-on-primary);
}
.lv-producer-event-card__btn--secondary {
background: var(--lv-surface-3);
color: var(--lv-text);
border: 1px solid var(--lv-border-muted);
}
.lv-producer-event-card__btn--secondary:hover,
.lv-producer-event-card__btn--secondary:focus-visible {
background: var(--lv-surface-2);
color: var(--lv-text);
}
.lv-producer-event-card__more-actions {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.lv-producer-event-card__chip {
display: inline-flex;
align-items: center;
padding: 0.35rem 0.65rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
text-decoration: none;
color: var(--lv-text);
border: 1px solid var(--lv-border-muted);
background: color-mix(in srgb, var(--lv-surface-3) 75%, transparent);
transition: background 0.15s ease, border-color 0.15s ease;
}
.lv-producer-event-card__chip:hover,
.lv-producer-event-card__chip:focus-visible {
background: var(--lv-surface-2);
border-color: color-mix(in srgb, var(--lv-secondary) 45%, var(--lv-border-muted));
color: var(--lv-text);
}
/* Producer layout studio (public theme tokens) */
.lv-layout-studio-tabs__bar {
position: sticky;
top: 0;
z-index: 20;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.3rem;
padding: 0.3rem;
margin-bottom: 1.25rem;
border: 1px solid var(--lv-border-muted);
border-radius: 0.85rem;
background: color-mix(in srgb, var(--lv-surface-2) 88%, var(--lv-border-muted) 12%);
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--lv-surface) 65%, transparent),
0 10px 28px color-mix(in srgb, var(--lv-secondary) 6%, transparent);
backdrop-filter: blur(10px);
}
.lv-layout-studio-tabs__tab {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 2.85rem;
padding: 0.55rem 0.85rem;
border: 1px solid transparent;
border-radius: 0.65rem;
background: transparent;
color: var(--lv-muted);
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.01em;
cursor: pointer;
transition:
background-color 0.18s ease,
border-color 0.18s ease,
color 0.18s ease,
box-shadow 0.18s ease,
transform 0.18s ease;
}
.lv-layout-studio-tabs__tab-inner {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
min-width: 0;
}
.lv-layout-studio-tabs__tab-icon {
display: inline-flex;
flex-shrink: 0;
width: 1.1rem;
height: 1.1rem;
color: color-mix(in srgb, var(--lv-muted) 85%, var(--lv-secondary) 15%);
transition: color 0.18s ease, transform 0.18s ease;
}
.lv-layout-studio-tabs__tab-icon svg {
display: block;
width: 100%;
height: 100%;
}
.lv-layout-studio-tabs__tab-label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lv-layout-studio-tabs__tab:hover:not([aria-selected="true"]):not(:disabled) {
color: var(--lv-heading);
background: color-mix(in srgb, var(--lv-surface) 78%, var(--lv-secondary) 14%);
}
.lv-layout-studio-tabs__tab:hover:not([aria-selected="true"]):not(:disabled) .lv-layout-studio-tabs__tab-icon {
color: var(--lv-secondary);
}
.lv-layout-studio-tabs__tab--active,
.lv-layout-studio-tabs__tab[aria-selected="true"] {
color: var(--lv-heading);
border-color: color-mix(in srgb, var(--lv-secondary) 48%, var(--lv-border-muted));
background: color-mix(in srgb, var(--lv-secondary) 16%, var(--lv-surface));
box-shadow:
0 0 0 1px color-mix(in srgb, var(--lv-secondary) 30%, transparent),
0 8px 20px color-mix(in srgb, var(--lv-secondary) 14%, transparent);
}
.lv-layout-studio-tabs__tab--active .lv-layout-studio-tabs__tab-icon,
.lv-layout-studio-tabs__tab[aria-selected="true"] .lv-layout-studio-tabs__tab-icon {
color: var(--lv-secondary);
}
.lv-layout-studio-tabs__tab--active::after,
.lv-layout-studio-tabs__tab[aria-selected="true"]::after {
content: "";
position: absolute;
left: 1rem;
right: 1rem;
bottom: 0.28rem;
height: 2px;
border-radius: 999px;
background: linear-gradient(
90deg,
color-mix(in srgb, var(--lv-secondary) 20%, transparent),
var(--lv-secondary),
color-mix(in srgb, var(--lv-primary) 55%, var(--lv-secondary) 45%),
color-mix(in srgb, var(--lv-secondary) 20%, transparent)
);
opacity: 0.9;
}
.lv-layout-studio-tabs__tab:focus {
outline: none;
}
.lv-layout-studio-tabs__tab:focus-visible {
outline: 2px solid var(--lv-primary);
outline-offset: 2px;
}
.lv-layout-studio-tabs__tab--disabled,
.lv-layout-studio-tabs__tab:disabled {
opacity: 0.42;
cursor: not-allowed;
box-shadow: none;
}
.lv-layout-studio-tabs__tab--disabled::after,
.lv-layout-studio-tabs__tab:disabled::after {
display: none;
}
@media (max-width: 480px) {
.lv-layout-studio-tabs__bar {
grid-template-columns: 1fr;
}
.lv-layout-studio-tabs__tab {
justify-content: flex-start;
min-height: 2.65rem;
}
.lv-layout-studio-tabs__tab-inner {
justify-content: flex-start;
}
}
.lv-layout-studio-floor-plan__designer {
display: flex;
flex-direction: column;
gap: 1rem;
}
.lv-map-toolbar__actions {
position: sticky;
top: 4.25rem;
z-index: 15;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.65rem;
padding: 0.65rem 0.85rem;
border: 1px solid var(--lv-border-muted);
border-radius: 0.75rem;
background: color-mix(in srgb, var(--lv-surface-2) 94%, transparent);
backdrop-filter: blur(6px);
}
.lv-map-toolbar__actions-left,
.lv-map-toolbar__actions-right {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.45rem;
}
.lv-map-toolbar__modes {
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 0.85rem;
border: 1px solid var(--lv-border-muted);
border-radius: 0.75rem;
background: var(--lv-surface-2);
}
.lv-map-toolbar__modes-section {
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.lv-map-toolbar__inspector {
display: flex;
flex-direction: column;
gap: 0.65rem;
padding: 0.85rem;
border: 1px solid var(--lv-border-muted);
border-radius: 0.75rem;
background: var(--lv-surface-2);
}
.lv-map-inspector__empty.hidden,
.lv-map-inspector__zone.hidden,
.lv-map-inspector__seat.hidden {
display: none !important;
}
.lv-map-designer-workspace {
display: grid;
gap: 1rem;
align-items: start;
}
.lv-map-designer-workspace__main {
display: flex;
flex-direction: column;
gap: 1rem;
min-width: 0;
}
.lv-map-designer-workspace__inspector {
min-width: 0;
}
.lv-map-designer-workspace__inspector .lv-map-toolbar__inspector {
position: sticky;
top: 4.25rem;
max-height: calc(100vh - 5.5rem);
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-gutter: stable;
}
.lv-map-inspector__context-hint {
margin: 0 0 0.55rem;
padding: 0.45rem 0.6rem;
border-radius: 0.55rem;
border: 1px solid color-mix(in srgb, var(--lv-secondary) 28%, var(--lv-border-muted));
background: color-mix(in srgb, var(--lv-secondary) 8%, var(--lv-surface));
font-size: 0.75rem;
line-height: 1.45;
color: var(--lv-muted);
}
.lv-map-inspector__seat-styling + .lv-map-inspector__seat {
margin-top: 0.65rem;
}
.lv-map-inspector__brush-hint {
margin: 0 0 0.55rem;
padding: 0.45rem 0.6rem;
border-radius: 0.55rem;
border: 1px solid color-mix(in srgb, var(--lv-secondary) 28%, var(--lv-border-muted));
background: color-mix(in srgb, var(--lv-secondary) 8%, var(--lv-surface));
font-size: 0.75rem;
line-height: 1.45;
color: var(--lv-muted);
}
.lv-map-inspector__actions {
margin-top: 1rem;
padding-top: 0.85rem;
border-top: 1px solid var(--lv-border-muted);
}
.lv-map-concepts-help {
border: 1px solid var(--lv-border-muted);
border-radius: 0.55rem;
background: color-mix(in srgb, var(--lv-surface) 96%, transparent);
}
.lv-map-concepts-help__summary {
cursor: pointer;
padding: 0.5rem 0.65rem;
font-size: 0.75rem;
font-weight: 600;
color: var(--lv-secondary);
list-style: none;
}
.lv-map-concepts-help__summary::-webkit-details-marker {
display: none;
}
.lv-map-concepts-help__body {
padding: 0 0.65rem 0.65rem;
}
.lv-map-section-picker__hint {
line-height: 1.4;
}
.lv-layout-map__seat-label-section {
display: inline-block;
margin-right: 0.2rem;
padding: 0.02rem 0.28rem;
border-radius: 0.2rem;
font-size: 0.55rem;
font-weight: 800;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--lv-secondary);
background: color-mix(in srgb, var(--lv-secondary) 14%, var(--lv-surface));
border: 1px solid color-mix(in srgb, var(--lv-secondary) 24%, var(--lv-border-muted));
}
.lv-map-designer--fullscreen {
position: fixed;
inset: 0;
z-index: 60;
margin: 0 !important;
border-radius: 0 !important;
max-width: none !important;
width: 100vw;
height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 0.65rem;
padding: 0.75rem !important;
background: var(--lv-surface);
}
.lv-map-designer--fullscreen > div:first-child,
.lv-map-designer--fullscreen .lv-floor-plan-upload,
.lv-map-designer--fullscreen .lv-layout-studio__advanced {
display: none !important;
}
.lv-map-designer--fullscreen .lv-map-toolbar__actions {
flex-shrink: 0;
}
.lv-map-designer--fullscreen .lv-map-designer-workspace {
flex: 1;
min-height: 0;
grid-template-columns: minmax(0, 1fr);
align-items: stretch;
}
.lv-map-designer--fullscreen .lv-map-designer-workspace__main {
min-height: 0;
overflow: hidden;
}
.lv-map-designer--fullscreen .lv-map-designer-workspace__main .lv-layout-map__canvas {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
height: 100%;
}
.lv-map-designer--fullscreen .lv-layout-map__viewport {
flex: 1;
min-height: 0;
}
.lv-map-designer--fullscreen .lv-map-designer-workspace__inspector {
position: fixed;
width: min(24rem, calc(100vw - 1.7rem));
z-index: 70;
pointer-events: none;
}
.lv-map-designer--fullscreen .lv-map-designer-workspace__inspector .lv-map-toolbar__inspector {
position: static;
max-height: min(88vh, calc(100vh - 4.5rem));
height: auto;
overflow-y: auto;
pointer-events: auto;
box-shadow:
0 0 0 1px var(--lv-border-muted),
0 12px 40px color-mix(in srgb, var(--lv-shadow, #000) 28%, transparent);
backdrop-filter: blur(10px);
}
.lv-map-inspector__aux {
display: flex;
flex-direction: column;
gap: 0.45rem;
margin-bottom: 0.55rem;
}
.lv-map-inspector__section {
border: 1px solid var(--lv-border-muted);
border-radius: 0.6rem;
background: color-mix(in srgb, var(--lv-surface) 96%, transparent);
}
.lv-map-inspector__section-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.5rem 0.65rem;
font-size: 0.75rem;
font-weight: 700;
color: var(--lv-heading);
cursor: pointer;
list-style: none;
user-select: none;
}
.lv-map-inspector__section-summary::-webkit-details-marker {
display: none;
}
.lv-map-inspector__section-summary::after {
content: "";
width: 0.45rem;
height: 0.45rem;
border-right: 2px solid var(--lv-muted);
border-bottom: 2px solid var(--lv-muted);
transform: rotate(45deg);
transition: transform 0.15s ease;
flex-shrink: 0;
}
.lv-map-inspector__section[open] > .lv-map-inspector__section-summary::after {
transform: rotate(-135deg);
margin-top: 0.15rem;
}
.lv-map-inspector__section-body {
padding: 0 0.65rem 0.65rem;
}
.lv-map-inspector__section--appearance .lv-map-inspector__section-summary {
display: none;
}
.lv-map-designer--fullscreen .lv-map-inspector__section--appearance .lv-map-inspector__section-summary {
display: flex;
}
.lv-map-toolbar__modes--in-panel {
padding: 0;
border: 0;
background: transparent;
gap: 0.55rem;
}
.lv-map-toolbar__modes--in-panel .lv-map-concepts-help {
font-size: 0.72rem;
}
.lv-map-toolbar__modes--in-panel .lv-map-segmented--triple {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lv-map-toolbar__modes--in-panel .lv-map-segmented__option {
padding: 0.4rem 0.25rem;
font-size: 0.68rem;
}
.lv-map-toolbar__modes--in-panel .lv-map-segmented__icon svg {
width: 0.95rem;
height: 0.95rem;
}
.lv-layout-map__section-legend--in-panel {
margin: 0;
padding: 0;
border: 0;
background: transparent;
}
.lv-map-designer-workspace__inspector--dragging .lv-map-toolbar__inspector {
cursor: grabbing;
}
.lv-map-inspector__drag-handle {
display: none;
align-items: center;
gap: 0.45rem;
margin: -0.15rem -0.15rem 0.55rem;
padding: 0.35rem 0.45rem;
border-radius: 0.5rem;
cursor: grab;
user-select: none;
touch-action: none;
}
.lv-map-designer--fullscreen .lv-map-inspector__drag-handle {
display: flex;
}
.lv-map-inspector__drag-handle:active {
cursor: grabbing;
}
.lv-map-inspector__drag-grip {
width: 0.45rem;
height: 0.9rem;
border-radius: 999px;
background:
radial-gradient(circle, var(--lv-muted) 38%, transparent 40%) 0 0 / 100% 33.33%,
radial-gradient(circle, var(--lv-muted) 38%, transparent 40%) 0 50% / 100% 33.33%,
radial-gradient(circle, var(--lv-muted) 38%, transparent 40%) 0 100% / 100% 33.33%;
opacity: 0.85;
flex-shrink: 0;
}
.lv-map-inspector__drag-title {
margin: 0;
flex: 1;
}
.lv-layout-map__viewport {
position: relative;
overflow: hidden;
width: 100%;
touch-action: none;
}
.lv-layout-map__stage {
position: relative;
width: 100%;
transform-origin: 0 0;
will-change: transform;
}
.lv-layout-map__viewport--panning,
.lv-layout-map__viewport--zoomed {
cursor: grab;
}
.lv-layout-map__viewport--panning {
cursor: grabbing;
}
.lv-map-zoom-controls {
position: absolute;
left: 0.65rem;
bottom: 0.65rem;
z-index: 8;
display: inline-flex;
align-items: center;
gap: 0.2rem;
padding: 0.25rem;
border-radius: 0.6rem;
border: 1px solid var(--lv-border-muted);
background: color-mix(in srgb, var(--lv-surface-2) 94%, transparent);
backdrop-filter: blur(8px);
box-shadow: 0 4px 18px color-mix(in srgb, var(--lv-shadow, #000) 18%, transparent);
}
.lv-map-zoom-controls__btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.75rem;
height: 1.75rem;
padding: 0;
border: 1px solid var(--lv-border-muted);
border-radius: 0.45rem;
background: var(--lv-surface);
color: var(--lv-heading);
font-size: 1rem;
font-weight: 700;
line-height: 1;
cursor: pointer;
}
.lv-map-zoom-controls__btn:hover {
border-color: color-mix(in srgb, var(--lv-secondary) 40%, var(--lv-border-muted));
color: var(--lv-secondary);
}
.lv-map-zoom-controls__btn--text {
min-width: auto;
padding: 0 0.55rem;
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.lv-map-zoom-controls__level {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 3.1rem;
height: 1.75rem;
padding: 0 0.35rem;
border: 1px solid transparent;
border-radius: 0.45rem;
background: transparent;
color: var(--lv-heading);
font-size: 0.72rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1;
cursor: pointer;
}
.lv-map-zoom-controls__level:hover {
background: color-mix(in srgb, var(--lv-secondary) 10%, var(--lv-surface));
color: var(--lv-secondary);
}
.lv-map-designer--fullscreen .lv-map-zoom-controls {
left: 0.85rem;
bottom: 0.85rem;
}
html.lv-map-designer-fullscreen-active {
overflow: hidden;
}
@media (min-width: 1024px) {
.lv-map-designer-workspace {
grid-template-columns: minmax(0, 1fr) minmax(16.5rem, 22rem);
}
}
@media (max-width: 1023px) {
.lv-map-designer-workspace__inspector .lv-map-toolbar__inspector {
position: static;
max-height: none;
overflow: visible;
}
}
.lv-layout-studio__panel {
border: 1px solid var(--lv-border-muted);
border-radius: 0.5rem;
background: color-mix(in srgb, var(--lv-surface-2) 88%, transparent);
padding: 1rem 1.1rem;
}
.lv-layout-studio__panel + .lv-layout-studio__panel {
margin-top: 0.75rem;
}
.lv-layout-studio__title {
margin: 0 0 0.35rem;
font-size: 1rem;
font-weight: 700;
color: var(--lv-heading);
}
.lv-layout-studio__hint {
margin: 0 0 0.85rem;
font-size: 0.84rem;
color: var(--lv-muted);
line-height: 1.45;
}
.lv-layout-studio__toolbar {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
align-items: flex-end;
margin-bottom: 0.85rem;
}
.lv-layout-studio__toolbar .lv-input,
.lv-configurations-filter .lv-input {
min-height: 2.625rem;
}
.lv-toolbar-submit {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.625rem;
padding: 0 1rem;
font-size: 0.875rem;
font-weight: 600;
line-height: 1.25;
border-radius: 0.75rem;
box-shadow: none;
}
.lv-configurations-filter {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 0.75rem;
}
.lv-configurations-filter__field {
flex: 1 1 12rem;
min-width: 0;
max-width: 16rem;
}
.lv-configurations-filter__clear {
align-self: center;
margin-bottom: 0.55rem;
}
.lv-layout-studio__toolbar-field {
flex: 1 1 12rem;
min-width: 0;
}
.lv-layout-studio__form {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
gap: 0.65rem;
align-items: end;
padding: 0.85rem;
border: 1px solid var(--lv-border-muted);
border-radius: 0.5rem;
margin-bottom: 0.65rem;
background: var(--lv-producer-record-bg);
}
.lv-layout-studio__field {
display: flex;
flex-direction: column;
gap: 0.25rem;
min-width: 0;
}
.lv-layout-studio__field--wide {
grid-column: 1 / -1;
}
.lv-layout-studio__field--action {
align-self: end;
}
.lv-layout-studio__row-btn {
min-height: 2.5rem;
padding: 0.45rem 0.75rem;
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.2;
}
.lv-layout-studio__label {
font-size: 0.72rem;
font-weight: 600;
color: var(--lv-muted);
}
.lv-layout-studio__remove {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.5rem;
width: 100%;
font-size: 0.8125rem;
font-weight: 600;
color: var(--lv-highlight);
text-decoration: none;
}
.lv-layout-studio__remove:hover {
text-decoration: underline;
}
.lv-layout-studio__advanced summary {
list-style: none;
}
.lv-layout-studio__advanced summary::-webkit-details-marker {
display: none;
}
.lv-layout-studio__starters {
border: 1px solid var(--lv-border-muted);
}
.lv-floor-plan-upload--attached {
border: 1px solid var(--lv-border-muted);
border-radius: 0.75rem;
background: color-mix(in srgb, var(--lv-surface-2) 90%, transparent);
}
.lv-floor-plan-upload__summary {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.65rem 0.85rem;
cursor: pointer;
list-style: none;
user-select: none;
}
.lv-floor-plan-upload__summary::-webkit-details-marker {
display: none;
}
.lv-floor-plan-upload__summary-thumb {
flex-shrink: 0;
width: 2.75rem;
height: 2.75rem;
border-radius: 0.5rem;
overflow: hidden;
border: 1px solid var(--lv-border-muted);
background: var(--lv-surface);
}
.lv-floor-plan-upload__summary-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.lv-floor-plan-upload__summary-copy {
display: flex;
flex-direction: column;
gap: 0.1rem;
min-width: 0;
flex: 1;
}
.lv-floor-plan-upload__summary-label {
font-size: 0.8125rem;
font-weight: 700;
color: var(--lv-heading);
}
.lv-floor-plan-upload__summary-filename {
font-size: 0.75rem;
color: var(--lv-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lv-floor-plan-upload__summary-action {
flex-shrink: 0;
font-size: 0.75rem;
font-weight: 600;
color: var(--lv-secondary);
}
.lv-floor-plan-upload__chevron {
flex-shrink: 0;
width: 1rem;
height: 1rem;
color: var(--lv-muted);
transition: transform 0.18s ease, color 0.18s ease;
}
.lv-floor-plan-upload__chevron svg {
display: block;
width: 100%;
height: 100%;
}
.lv-floor-plan-upload--attached[open] .lv-floor-plan-upload__chevron {
transform: rotate(180deg);
color: var(--lv-secondary);
}
.lv-floor-plan-upload--attached[open] .lv-floor-plan-upload__summary-action {
color: var(--lv-muted);
}
.lv-floor-plan-upload__body {
padding: 0 0.85rem 0.85rem;
border-top: 1px solid var(--lv-border-muted);
}
.lv-floor-plan-upload__form {
padding-top: 0.85rem;
}
.lv-media-dropzone--compact {
padding: 0.75rem;
}
.lv-media-dropzone--compact .lv-media-dropzone__thumb {
max-height: 7rem;
width: auto;
margin-inline: auto;
}
.lv-media-dropzone {
border: 2px dashed color-mix(in srgb, var(--lv-border-muted) 80%, var(--lv-primary) 20%);
border-radius: 0.75rem;
padding: 1rem;
cursor: pointer;
transition: border-color 0.15s ease, background-color 0.15s ease;
background: var(--lv-surface-2);
}
.lv-media-dropzone:hover,
.lv-media-dropzone--active {
border-color: var(--lv-primary);
background: color-mix(in srgb, var(--lv-primary) 8%, var(--lv-surface-2));
}
.lv-media-dropzone__inner {
display: flex;
align-items: center;
justify-content: center;
min-height: 8rem;
}
.lv-media-dropzone__placeholder {
text-align: center;
padding: 0.5rem 1rem;
}
.lv-media-dropzone__icon {
display: block;
font-size: 1.75rem;
margin-bottom: 0.5rem;
}
.lv-media-dropzone__title {
font-weight: 600;
color: var(--lv-heading);
font-size: 0.9375rem;
}
.lv-media-dropzone__hint {
color: var(--lv-muted);
font-size: 0.8125rem;
margin-top: 0.25rem;
}
.lv-media-dropzone__thumb {
max-height: 12rem;
width: auto;
max-width: 100%;
border-radius: 0.5rem;
object-fit: contain;
}
.lv-file-input-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.lv-event-banner-dropzone {
padding: 0.75rem;
display: block;
}
.lv-event-banner-dropzone__frame {
position: relative;
width: 100%;
aspect-ratio: 3 / 1;
min-height: 7rem;
border-radius: 0.5rem;
overflow: hidden;
background: color-mix(in srgb, var(--lv-surface) 70%, var(--lv-surface-2));
display: flex;
align-items: center;
justify-content: center;
}
.lv-event-banner-dropzone__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.lv-event-banner-dropzone__browse {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 0.75rem;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
border: 1px solid var(--lv-border-muted);
background: var(--lv-surface);
color: var(--lv-text);
font-family: inherit;
font-size: 0.875rem;
font-weight: 600;
line-height: 1.25;
}
.lv-event-banner-dropzone__filename {
text-align: center;
}
.lv-layout-map__canvas {
touch-action: none;
user-select: none;
}
.lv-layout-map__canvas--place-mode {
cursor: crosshair;
}
.lv-layout-map__canvas--place-mode .lv-layout-map__overlay {
cursor: crosshair;
}
.lv-layout-map__canvas--place-mode .lv-layout-map__item {
pointer-events: none;
}
.lv-layout-map__canvas--place-mode .lv-layout-map__overlay:active {
cursor: crosshair;
}
.lv-layout-map__row-form {
align-items: flex-end;
}
.lv-map-toolbar {
display: grid;
gap: 0.85rem;
padding: 0.85rem;
border: 1px solid var(--lv-border-muted);
border-radius: 0.75rem;
background: var(--lv-surface-2);
}
@media (min-width: 900px) {
.lv-map-toolbar {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 1.6fr) auto;
align-items: start;
}
.lv-map-toolbar:not(:has(.lv-map-toolbar__cluster--seats)) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
}
}
.lv-map-toolbar__cluster {
display: flex;
flex-direction: column;
gap: 0.55rem;
min-width: 0;
}
.lv-map-toolbar__cluster--save {
align-self: end;
}
.lv-map-toolbar__heading {
margin: 0;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--lv-muted);
}
.lv-map-toolbar__hint {
margin: 0;
font-size: 0.72rem;
line-height: 1.4;
color: var(--lv-muted);
}
.lv-map-toolbar__subgroup {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.lv-map-toolbar__placement {
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.lv-map-placement-slot {
min-height: 0;
}
.lv-map-add-seat.hidden,
.lv-map-remove-feedback.hidden,
.lv-map-selection-help.hidden,
.lv-map-move-tools.hidden,
.lv-map-seat-edit.hidden,
.lv-map-toolbar__subgroup.hidden,
.lv-map-color-picker.hidden {
display: none !important;
}
.lv-map-add-seat {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 0.45rem;
border: 1px solid color-mix(in srgb, #38bdf8 35%, var(--lv-border-muted));
border-radius: 0.65rem;
background: color-mix(in srgb, #38bdf8 8%, var(--lv-surface));
}
.lv-map-remove-feedback {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 0.45rem;
border: 1px solid color-mix(in srgb, #f87171 35%, var(--lv-border-muted));
border-radius: 0.65rem;
background: color-mix(in srgb, #f87171 8%, var(--lv-surface));
}
.lv-map-remove-feedback__value {
margin: 0;
font-size: 0.95rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--lv-heading);
}
.lv-map-selection-help {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 0.45rem;
border: 1px solid color-mix(in srgb, #a855f7 35%, var(--lv-border-muted));
border-radius: 0.65rem;
background: color-mix(in srgb, #a855f7 8%, var(--lv-surface));
}
.lv-map-selection-help__list {
margin: 0;
padding-left: 1rem;
font-size: 0.72rem;
line-height: 1.45;
color: var(--lv-muted);
}
.lv-map-move-tools {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.lv-map-segmented--dual {
grid-template-columns: 1fr 1fr;
}
.lv-map-segmented__option--box.lv-map-segmented__option--selected {
border-color: color-mix(in srgb, #38bdf8 50%, var(--lv-border-muted));
background: color-mix(in srgb, #38bdf8 18%, var(--lv-surface));
box-shadow: 0 0 0 1px color-mix(in srgb, #38bdf8 35%, transparent);
}
.lv-layout-map__canvas--box-select-mode {
cursor: crosshair;
}
.lv-layout-map__canvas--box-select-mode .lv-layout-map__overlay {
cursor: crosshair;
}
.lv-layout-map__canvas--box-select-mode .lv-layout-map__item {
pointer-events: none;
}
.lv-map-add-seat__label-input {
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.lv-map-seat-edit__fields {
display: grid;
grid-template-columns: minmax(2.25rem, 2.75rem) minmax(0, 1fr);
gap: 0.45rem 0.5rem;
align-items: end;
}
.lv-map-seat-edit__field--section {
grid-column: 1 / -1;
}
.lv-map-seat-edit__field--row {
min-width: 0;
}
.lv-map-seat-edit__field--label {
min-width: 0;
}
.lv-map-seat-edit__row-input {
text-align: center;
font-weight: 700;
text-transform: uppercase;
padding-inline: 0.35rem;
min-height: 2.25rem;
}
.lv-map-seat-edit__field--section .lv-input {
min-height: 2.25rem;
}
.lv-map-toolbar__align-tools {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.lv-layout-map__marquee {
border: 2px dashed color-mix(in srgb, #a855f7 70%, white);
background: color-mix(in srgb, #a855f7 12%, transparent);
border-radius: 2px;
box-sizing: border-box;
}
.lv-map-add-seat__button:hover:not(:disabled),
.lv-map-add-seat__button:focus-visible:not(:disabled) {
border-color: #38bdf8;
background: color-mix(in srgb, #38bdf8 24%, var(--lv-surface));
}
.lv-map-add-seat__button .lv-map-tool__label {
font-weight: 800;
letter-spacing: 0.02em;
}
.lv-map-segmented {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.2rem;
padding: 0.2rem;
border-radius: 0.7rem;
border: 1px solid var(--lv-border-muted);
background: color-mix(in srgb, var(--lv-surface) 90%, var(--lv-border-muted) 10%);
}
.lv-map-segmented__option {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
min-height: 2.5rem;
padding: 0.4rem 0.55rem;
border: 1px solid transparent;
border-radius: 0.55rem;
background: transparent;
color: var(--lv-muted);
font-size: 0.74rem;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
transition:
background-color 0.15s ease,
border-color 0.15s ease,
color 0.15s ease,
box-shadow 0.15s ease;
}
.lv-map-segmented__option:hover:not(.lv-map-segmented__option--selected) {
color: var(--lv-heading);
background: color-mix(in srgb, var(--lv-surface) 80%, var(--lv-secondary) 20%);
}
.lv-map-segmented__option--selected {
color: var(--lv-heading);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--lv-secondary) 35%, transparent);
}
.lv-map-segmented__option--move.lv-map-segmented__option--selected {
border-color: color-mix(in srgb, #8b5cf6 50%, var(--lv-border-muted));
background: color-mix(in srgb, #8b5cf6 18%, var(--lv-surface));
box-shadow: 0 0 0 1px color-mix(in srgb, #8b5cf6 35%, transparent);
}
.lv-map-segmented--triple {
grid-template-columns: 1fr 1fr 1fr;
}
.lv-map-segmented__option--add.lv-map-segmented__option--selected {
border-color: color-mix(in srgb, #38bdf8 50%, var(--lv-border-muted));
background: color-mix(in srgb, #38bdf8 20%, var(--lv-surface));
box-shadow: 0 0 0 1px color-mix(in srgb, #38bdf8 35%, transparent);
}
.lv-map-segmented__option--remove.lv-map-segmented__option--selected {
border-color: color-mix(in srgb, #ef4444 50%, var(--lv-border-muted));
background: color-mix(in srgb, #ef4444 16%, var(--lv-surface));
box-shadow: 0 0 0 1px color-mix(in srgb, #ef4444 35%, transparent);
color: #b91c1c;
}
.dark .lv-map-segmented__option--remove.lv-map-segmented__option--selected {
color: #fca5a5;
}
.lv-layout-map__canvas--remove-mode {
cursor: not-allowed;
}
.lv-layout-map__canvas--remove-mode .lv-layout-map__item {
cursor: pointer;
}
.lv-layout-map__canvas--remove-mode .lv-layout-map__overlay {
cursor: not-allowed;
}
.lv-layout-map__canvas--remove-mode .lv-layout-map__item rect[data-map-part="body"],
.lv-layout-map__canvas--remove-mode .lv-layout-map__item circle[data-map-part="body"],
.lv-layout-map__canvas--remove-mode .lv-layout-map__item polygon[data-map-part="body"],
.lv-layout-map__canvas--remove-mode .lv-layout-map__item ellipse[data-map-part="body"] {
cursor: pointer;
}
.lv-map-shape-picker--quad {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lv-map-opacity-control {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.lv-map-opacity-control__value {
margin-left: 0.35rem;
font-variant-numeric: tabular-nums;
color: var(--lv-heading);
}
.lv-map-opacity-control__input {
width: 100%;
accent-color: #8b5cf6;
}
.lv-map-color-picker {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
}
.lv-map-color-swatch {
width: 1.65rem;
height: 1.65rem;
border-radius: 999px;
border: 2px solid var(--lv-border-muted);
background: var(--lv-seat-swatch, transparent);
cursor: pointer;
padding: 0;
}
.lv-map-color-swatch--default {
background:
linear-gradient(135deg, rgba(56, 189, 248, 0.95) 50%, rgba(168, 85, 247, 0.95) 50%);
}
.lv-map-color-swatch--selected {
border-color: var(--lv-highlight);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--lv-highlight) 35%, transparent);
}
.lv-map-color-custom {
display: inline-flex;
width: 1.65rem;
height: 1.65rem;
border-radius: 0.45rem;
border: 1px solid var(--lv-border-muted);
overflow: hidden;
cursor: pointer;
}
.lv-map-color-custom__input {
width: 150%;
height: 150%;
margin: -25%;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}
.lv-map-shape-picker {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.35rem;
}
.lv-map-shape-option {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.2rem;
min-height: 3rem;
padding: 0.35rem 0.25rem;
border: 1px solid var(--lv-border-muted);
border-radius: 0.55rem;
background: var(--lv-surface);
color: var(--lv-muted);
cursor: pointer;
}
.lv-map-shape-option--selected {
border-color: color-mix(in srgb, #8b5cf6 50%, var(--lv-border-muted));
background: color-mix(in srgb, #8b5cf6 12%, var(--lv-surface));
color: var(--lv-heading);
}
.lv-map-shape-option__icon {
display: inline-flex;
width: 1.1rem;
height: 1.1rem;
}
.lv-map-shape-option__icon svg {
width: 100%;
height: 100%;
}
.lv-map-shape-option__label {
font-size: 0.62rem;
font-weight: 600;
line-height: 1.1;
text-align: center;
}
.lv-map-segmented__icon {
display: inline-flex;
width: 0.95rem;
height: 0.95rem;
flex-shrink: 0;
}
.lv-map-segmented__icon svg {
width: 100%;
height: 100%;
}
.lv-map-toolbar__tools {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.lv-map-toolbar__tools--stacked {
flex-direction: column;
align-items: stretch;
}
.lv-map-toolbar__field {
min-width: 0;
}
.lv-map-toolbar__field--compact {
flex: 1 1 4.5rem;
min-width: 4.5rem;
}
.lv-map-toolbar__field-label {
display: block;
margin-bottom: 0.2rem;
font-size: 0.68rem;
font-weight: 600;
color: var(--lv-muted);
}
.lv-map-toolbar__row-tools,
.lv-map-toolbar__size-tools {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
align-items: flex-end;
}
.lv-map-toolbar__size-buttons {
display: flex;
gap: 0.35rem;
}
.lv-map-tool {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
min-height: 2.5rem;
padding: 0.45rem 0.7rem;
border-radius: 0.65rem;
border: 1px solid var(--lv-border-muted);
background: color-mix(in srgb, var(--lv-surface) 88%, var(--lv-secondary) 12%);
color: var(--lv-heading);
font-size: 0.78rem;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.lv-map-tool:not(.lv-map-tool--save):hover:not(:disabled),
.lv-map-tool:not(.lv-map-tool--save):focus-visible:not(:disabled) {
border-color: color-mix(in srgb, var(--lv-secondary) 55%, var(--lv-border-muted));
background: color-mix(in srgb, var(--lv-surface) 75%, var(--lv-secondary) 25%);
}
.lv-map-tool:disabled {
cursor: not-allowed;
}
.lv-map-tool--active {
border-color: var(--lv-secondary);
background: color-mix(in srgb, var(--lv-secondary) 22%, var(--lv-surface));
box-shadow: 0 0 0 1px color-mix(in srgb, var(--lv-secondary) 45%, transparent);
color: var(--lv-heading);
}
.lv-map-tool--section {
border-color: color-mix(in srgb, #8b5cf6 35%, var(--lv-border-muted));
}
.lv-map-tool--row,
.lv-map-tool--seat {
border-color: color-mix(in srgb, #38bdf8 35%, var(--lv-border-muted));
}
.lv-map-tool--place.lv-map-tool--active {
border-color: #38bdf8;
background: color-mix(in srgb, #38bdf8 18%, var(--lv-surface));
box-shadow: 0 0 0 1px color-mix(in srgb, #38bdf8 45%, transparent);
}
.lv-map-tool--danger {
border-color: color-mix(in srgb, #ef4444 35%, var(--lv-border-muted));
color: #b91c1c;
}
.dark .lv-map-tool--danger {
color: #fca5a5;
}
.lv-map-tool--compact {
min-width: 2.5rem;
padding-inline: 0.55rem;
font-size: 1rem;
line-height: 1;
}
.lv-map-tool--save.lv-button-primary {
background: var(--lv-btn-primary-bg, var(--lv-primary));
color: var(--lv-btn-primary-text, var(--lv-on-primary));
}
.lv-map-tool--save {
min-height: 2.75rem;
padding-inline: 1rem;
border: none;
box-shadow: var(--lv-btn-primary-shadow, 0 10px 24px color-mix(in srgb, var(--lv-primary) 38%, transparent));
transition:
background-color 0.15s ease,
box-shadow 0.15s ease,
transform 0.15s ease,
filter 0.15s ease,
opacity 0.15s ease;
}
.lv-map-tool--save.lv-button-primary:hover:not(:disabled):not(.lv-map-tool--save-active):not(.lv-map-tool--save-disabled),
.lv-map-tool--save.lv-button-primary:focus-visible:not(:disabled):not(.lv-map-tool--save-active):not(.lv-map-tool--save-disabled) {
background: var(--lv-btn-primary-bg-hover, var(--lv-primary-hover));
box-shadow: 0 12px 28px color-mix(in srgb, var(--lv-primary) 46%, transparent);
transform: translateY(-1px);
}
.lv-map-tool--save.lv-button-primary:active:not(:disabled):not(.lv-map-tool--save-active):not(.lv-map-tool--save-disabled) {
transform: translateY(0);
box-shadow: 0 8px 18px color-mix(in srgb, var(--lv-primary) 32%, transparent);
}
.lv-map-tool--save.lv-map-tool--save-active {
opacity: 1;
cursor: wait;
transform: none;
animation: lv-map-save-pulse 0.9s ease-in-out infinite;
}
.lv-map-tool--save.lv-map-tool--save-active:hover,
.lv-map-tool--save.lv-map-tool--save-active:focus-visible {
background: var(--lv-btn-primary-bg, var(--lv-primary));
box-shadow: var(--lv-btn-primary-shadow, 0 10px 24px color-mix(in srgb, var(--lv-primary) 38%, transparent));
transform: none;
}
.lv-map-tool--save.lv-map-tool--save-disabled {
opacity: 0.78;
cursor: default;
background: color-mix(in srgb, #22c55e 72%, var(--lv-primary));
box-shadow: 0 8px 18px color-mix(in srgb, #22c55e 28%, transparent);
transform: none;
}
.lv-map-tool--save.lv-map-tool--save-disabled:hover,
.lv-map-tool--save.lv-map-tool--save-disabled:focus-visible {
background: color-mix(in srgb, #22c55e 72%, var(--lv-primary));
box-shadow: 0 8px 18px color-mix(in srgb, #22c55e 28%, transparent);
transform: none;
}
.lv-map-tool--save.lv-map-tool--save-active:disabled {
cursor: wait;
}
.lv-map-tool--save.lv-map-tool--save-disabled:disabled {
cursor: default;
}
@keyframes lv-map-save-pulse {
0%,
100% {
filter: brightness(1);
}
50% {
filter: brightness(1.12);
}
}
.lv-map-tool__icon {
display: inline-flex;
width: 1rem;
height: 1rem;
flex-shrink: 0;
}
.lv-map-tool__icon svg {
width: 100%;
height: 100%;
}
.lv-map-tool__label {
white-space: nowrap;
}
.lv-layout-map__seat-label {
position: absolute;
transform: translate(-50%, -140%);
padding: 0.1rem 0.35rem;
border-radius: 0.25rem;
font-size: 0.625rem;
font-weight: 700;
color: var(--lv-heading);
background: color-mix(in srgb, var(--lv-surface) 92%, transparent);
border: 1px solid var(--lv-border-muted);
pointer-events: none;
white-space: nowrap;
}
.lv-layout-map__overlay {
pointer-events: auto;
cursor: grab;
direction: ltr;
}
.lv-layout-map__overlay:active {
cursor: grabbing;
}
.lv-layout-map__item rect[data-map-part="body"] {
fill: rgba(139, 92, 246, 0.22);
stroke: rgba(167, 139, 250, 0.85);
stroke-width: 0.003;
cursor: move;
}
.lv-layout-map__item circle[data-map-part="body"] {
fill: rgba(56, 189, 248, 0.9);
stroke: rgba(125, 211, 252, 0.95);
stroke-width: 0.002;
cursor: move;
}
.lv-layout-map__item rect[data-map-part="body"],
.lv-layout-map__item polygon[data-map-part="body"],
.lv-layout-map__item ellipse[data-map-part="body"] {
fill: rgba(139, 92, 246, 0.22);
stroke: rgba(167, 139, 250, 0.85);
stroke-width: 0.003;
cursor: move;
}
.lv-layout-map__item--selected rect[data-map-part="body"],
.lv-layout-map__item--selected circle[data-map-part="body"],
.lv-layout-map__item--selected polygon[data-map-part="body"],
.lv-layout-map__item--selected ellipse[data-map-part="body"] {
stroke: var(--lv-highlight) !important;
stroke-width: 0.005 !important;
}
.lv-layout-map__item--conflict rect[data-map-part="body"] {
fill: rgba(239, 68, 68, 0.28);
stroke: rgba(248, 113, 113, 0.95);
stroke-width: 0.004;
}
.lv-layout-map__label-chip--conflict {
color: #b91c1c;
}
.dark .lv-layout-map__label-chip--conflict {
color: #f87171;
}
.lv-layout-map__handle {
fill: var(--lv-highlight);
stroke: var(--lv-surface);
stroke-width: 0.001;
cursor: nwse-resize;
pointer-events: all;
}
.lv-layout-map__status--muted {
color: var(--lv-muted);
}
.lv-layout-map__status--success {
color: #15803d;
}
.lv-layout-map__status--error {
color: #b91c1c;
}
:root[data-theme="dark"] .lv-layout-map__status--success,
.dark .lv-layout-map__status--success {
color: #4ade80;
}
:root[data-theme="dark"] .lv-layout-map__status--error,
.dark .lv-layout-map__status--error {
color: #f87171;
}
.lv-producer-wizard-save__status--muted {
color: var(--lv-muted);
}
.lv-producer-wizard-save__status--success {
color: #15803d;
}
.lv-producer-wizard-save__status--error {
color: #b91c1c;
}
.dark .lv-producer-wizard-save__status--success {
color: #4ade80;
}
.dark .lv-producer-wizard-save__status--error {
color: #f87171;
}
.lv-layout-map__section-legend {
border: 1px solid var(--lv-border-muted);
border-radius: 0.5rem;
background: var(--lv-surface-2);
padding: 0.75rem 0.875rem;
}
.lv-layout-map__section-legend-list {
display: flex;
flex-wrap: wrap;
gap: 0.375rem 0.75rem;
list-style: none;
margin: 0;
padding: 0;
}
.lv-layout-map__section-legend-item {
font-size: 0.75rem;
font-weight: 600;
}
.lv-layout-map__section-legend-item--mapped {
color: #15803d;
}
.lv-layout-map__section-legend-item--unmapped {
color: var(--lv-muted);
}
.lv-layout-map__section-legend-item--duplicate {
color: #b91c1c;
}
.dark .lv-layout-map__section-legend-item--mapped {
color: #4ade80;
}
.dark .lv-layout-map__section-legend-item--duplicate {
color: #f87171;
}
.lv-layout-map__labels {
z-index: 1;
}
.lv-layout-map__label-chip {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 6%;
direction: ltr;
unicode-bidi: isolate;
text-align: center;
font-weight: 700;
color: var(--lv-heading);
line-height: 1.1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
pointer-events: none;
user-select: none;
container-type: size;
font-size: min(44cqmin, 0.85rem);
text-shadow:
0 0 6px color-mix(in srgb, var(--lv-surface) 92%, transparent),
0 1px 2px color-mix(in srgb, var(--lv-surface) 70%, transparent);
}
.lv-layout-map__label-chip--selected {
color: var(--lv-highlight);
}
.lv-link {
color: var(--lv-link);
font-weight: 600;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color 0.15s ease;
cursor: pointer;
}
.lv-venue-picker__option,
.lv-venue-picker__action {
cursor: pointer;
width: 100%;
text-align: left;
border: none;
background: transparent;
font: inherit;
}
.lv-venue-picker__option {
padding: 0.625rem 0.75rem;
color: var(--lv-text);
}
.lv-venue-picker__option:hover,
.lv-venue-picker__option:focus-visible {
background: var(--lv-surface-2);
outline: none;
}
.lv-venue-picker__action {
padding: 0.625rem 0.75rem;
color: var(--lv-link);
font-weight: 600;
}
.lv-venue-picker__action:hover,
.lv-venue-picker__action:focus-visible {
background: var(--lv-surface-2);
color: var(--lv-link-hover);
outline: none;
}
.lv-link:hover,
.lv-link:focus-visible {
color: var(--lv-link-hover);
}
.lv-tour-link {
color: var(--lv-highlight);
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid color-mix(in srgb, var(--lv-highlight) 50%, transparent);
transition: color 0.15s ease, border-color 0.15s ease;
}
.lv-tour-link:hover,
.lv-tour-link:focus-visible {
color: var(--lv-primary);
border-bottom-color: var(--lv-primary);
}
.lv-tour-link:visited {
color: var(--lv-highlight);
}
.lv-prose {
width: 100%;
box-sizing: border-box;
padding: 1.25rem 1.5rem;
border-radius: 0.75rem;
border: none;
background: color-mix(in srgb, var(--lv-surface-1) 58%, transparent);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: var(--lv-text-muted);
font-size: 0.875rem;
line-height: 1.6;
}
.dark .lv-prose {
background: color-mix(in srgb, var(--lv-surface-1) 48%, transparent);
}
.lv-prose > *:first-child {
margin-top: 0;
}
.lv-prose > *:last-child {
margin-bottom: 0;
}
.lv-prose p {
margin: 0 0 0.85em;
font-size: 0.875rem;
color: var(--lv-text-muted);
}
.lv-prose h1,
.lv-prose h2,
.lv-prose h3,
.lv-prose h4 {
margin: 1.15em 0 0.4em;
color: var(--lv-text);
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.3;
}
.lv-prose h2 {
font-size: 1rem;
}
.lv-prose h3 {
font-size: 0.9375rem;
}
.lv-prose ul,
.lv-prose ol {
margin: 0 0 0.85em;
padding-left: 1.25em;
font-size: 0.875rem;
color: var(--lv-text-muted);
}
.lv-prose li {
margin-bottom: 0.3em;
}
.lv-prose li::marker {
color: var(--lv-primary);
}
.lv-prose a {
color: var(--lv-link);
font-weight: 500;
font-size: inherit;
text-underline-offset: 2px;
}
.lv-prose a:visited {
color: var(--lv-link);
}
.lv-prose a:hover {
color: var(--lv-link-hover);
}
.lv-prose strong,
.lv-prose b {
color: var(--lv-text);
font-weight: 600;
}
.lv-prose blockquote {
margin: 0.85em 0;
padding: 0.65em 0.85em;
border: none;
border-radius: 0.5rem;
background: color-mix(in srgb, var(--lv-surface-3) 70%, transparent);
color: var(--lv-text-muted);
font-size: 0.8125rem;
}
.lv-prose hr {
margin: 1em 0;
border: none;
height: 0;
border-top: 1px solid color-mix(in srgb, var(--lv-border-muted) 45%, transparent);
}
.lv-prose .trix-content {
font-size: inherit;
line-height: inherit;
color: inherit;
}
.lv-page-wrap {
max-width: 54rem;
margin-inline: auto;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
.lv-scope-tab {
display: inline-block;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--lv-text-muted);
background: color-mix(in srgb, var(--lv-surface-2) 88%, transparent);
border: 1px solid var(--lv-border-muted);
transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.lv-scope-tab:hover,
.lv-scope-tab:focus-visible {
color: var(--lv-heading);
border-color: var(--lv-border);
}
.lv-scope-tab--active {
background: var(--lv-accent);
border-color: transparent;
color: #f8fafc;
box-shadow: 0 6px 18px color-mix(in srgb, var(--lv-accent) 32%, transparent);
}
.dark .lv-scope-tab--active {
color: #0f172a;
}
/* Homepage hero — aurora panel with light typography */
.lv-home-hero {
position: relative;
overflow: hidden;
margin-bottom: 2.5rem;
padding: clamp(2.75rem, 7vw, 4.25rem) clamp(1.25rem, 4vw, 2rem);
border-radius: 1.25rem;
border: 1px solid color-mix(in srgb, var(--lv-primary) 38%, transparent);
text-align: center;
isolation: isolate;
box-shadow:
0 22px 56px color-mix(in srgb, var(--lv-shadow) 88%, transparent),
inset 0 1px 0 color-mix(in srgb, var(--lv-primary) 18%, transparent);
}
.lv-home-hero__backdrop {
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(
145deg,
#060d1a 0%,
#0a1628 32%,
#0f3d56 62%,
#1e1b4b 100%
);
}
.dark .lv-home-hero__backdrop {
background: linear-gradient(
145deg,
#020617 0%,
#0a1628 30%,
#134e4a 58%,
#312e81 100%
);
}
.lv-home-hero__mesh {
position: absolute;
inset: -25%;
z-index: 1;
pointer-events: none;
opacity: 0.58;
filter: blur(52px);
background:
radial-gradient(circle at 22% 38%, rgba(34, 211, 238, 0.58) 0%, transparent 44%),
radial-gradient(circle at 78% 58%, rgba(167, 139, 250, 0.48) 0%, transparent 46%),
radial-gradient(circle at 48% 88%, rgba(45, 212, 191, 0.38) 0%, transparent 42%);
}
.lv-home-hero__grid {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
opacity: 0.12;
background-image:
linear-gradient(rgba(148, 163, 184, 0.4) 1px, transparent 1px),
linear-gradient(90deg, rgba(148, 163, 184, 0.4) 1px, transparent 1px);
background-size: 44px 44px;
mask-image: linear-gradient(to bottom, black 0%, transparent 82%);
}
.lv-home-hero__content {
position: relative;
z-index: 10;
max-width: 42rem;
margin-inline: auto;
}
.lv-home-hero__kicker {
display: inline-block;
margin: 0 0 1rem;
padding: 0.35rem 0.9rem;
border-radius: 9999px;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #bae6fd;
background: rgba(8, 145, 178, 0.24);
border: 1px solid rgba(34, 211, 238, 0.38);
}
.lv-home-hero h1.lv-home-hero__title {
margin: 0 0 1rem;
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 800;
letter-spacing: -0.035em;
line-height: 1.08;
color: #f8fafc;
text-shadow: 0 2px 28px rgba(2, 6, 23, 0.55);
}
.lv-home-hero__brand {
display: inline-block;
background: linear-gradient(108deg, #67e8f9 0%, #c4b5fd 48%, #5eead4 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.lv-home-hero__lead {
margin: 0 auto 1.5rem;
max-width: 34rem;
font-size: clamp(1.0625rem, 2.5vw, 1.25rem);
line-height: 1.65;
color: #cbd5e1;
}
.lv-home-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: center;
}
a.lv-home-hero__action {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.55rem 1.1rem;
border-radius: 9999px;
font-size: 0.875rem;
font-weight: 600;
color: #f1f5f9;
background: rgba(15, 23, 42, 0.45);
border: 1px solid rgba(148, 163, 184, 0.45);
transition:
background 0.2s ease,
border-color 0.2s ease,
color 0.2s ease,
transform 0.2s ease;
}
a.lv-home-hero__action:hover,
a.lv-home-hero__action:focus-visible {
color: #ffffff;
background: color-mix(in srgb, var(--lv-primary) 22%, rgba(15, 23, 42, 0.55));
border-color: color-mix(in srgb, var(--lv-primary) 55%, transparent);
transform: translateY(-1px);
}
/* Event show — unified header card: info, banner, purchase */
.lv-event-show {
--lv-event-title: color-mix(in srgb, var(--lv-primary) 55%, var(--lv-secondary) 45%);
}
.dark .lv-event-show {
--lv-event-title: color-mix(in srgb, var(--lv-primary) 65%, #f8fafc 35%);
}
.lv-event-show__info {
width: 100%;
}
.lv-event-show__info .lv-event-hero__title {
margin: 0 0 0.5rem;
font-size: clamp(1.875rem, 4.5vw, 3rem);
font-weight: 700;
letter-spacing: -0.028em;
line-height: 1.12;
color: var(--lv-event-title);
text-shadow: none;
}
.lv-event-show__your-tickets {
margin: 0;
}
.lv-event-show__info,
.lv-event-show__your-tickets,
.lv-event-show__below {
width: 100%;
max-width: 100%;
}
.lv-event-show__below {
display: flex;
flex-direction: column;
gap: 1rem;
}
@media (min-width: 768px) {
.lv-event-show:not(.lv-event-show--cruise):not(.lv-event-show--sectioned) .lv-event-show__below {
display: grid;
grid-template-columns: minmax(0, 1fr) min(26rem, 42%);
gap: 1.25rem;
align-items: start;
}
}
.lv-event-show--sectioned .lv-event-show__below {
gap: 1.25rem;
}
.lv-event-show--sectioned.lv-card {
backdrop-filter: none;
}
.lv-event-show__section-checkout {
display: flex;
flex-direction: column;
gap: 1.25rem;
width: 100%;
padding: 1.25rem;
border-radius: 0.875rem;
border: 1px solid var(--lv-border-muted);
background: color-mix(in srgb, var(--lv-surface-2) 72%, var(--lv-bg));
box-shadow: 0 12px 32px color-mix(in srgb, var(--lv-secondary) 8%, transparent);
}
.lv-event-show__section-checkout-intro {
text-align: center;
max-width: 42rem;
margin-inline: auto;
}
.lv-event-show__section-checkout-title {
margin: 0;
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.15;
color: var(--lv-heading);
}
.lv-event-show__section-checkout-subtitle {
margin: 0.625rem 0 0;
font-size: 0.9375rem;
line-height: 1.55;
color: var(--lv-text-muted);
}
.lv-event-show__section-checkout-trust {
padding: 0.875rem 1rem;
border-radius: 0.625rem;
border: 1px solid var(--lv-border-muted);
background: color-mix(in srgb, var(--lv-surface) 82%, var(--lv-bg));
font-size: 0.875rem;
text-align: center;
}
.lv-event-show--sectioned .lv-event-show__banner-img {
max-height: 12rem;
}
@media (min-width: 640px) {
.lv-event-show--sectioned .lv-event-show__banner-img {
max-height: 16rem;
}
}
@media (min-width: 768px) {
.lv-event-show--sectioned .lv-event-show__banner-img {
max-height: 20rem;
}
}
@media (min-width: 1024px) {
.lv-event-show--sectioned .lv-event-show__banner-img {
max-height: 24rem;
}
}
.lv-event-show--sectioned .lv-section-checkout__tier-list {
display: grid;
gap: 0.625rem;
}
@media (min-width: 640px) {
.lv-event-show--sectioned .lv-section-checkout__tier-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.lv-event-show--sectioned .lv-section-checkout__footer {
gap: 1.125rem;
}
}
.lv-event-show__purchase {
padding: 1.25rem;
border-radius: 0.75rem;
border: 1px solid var(--lv-border-muted);
background: color-mix(in srgb, var(--lv-surface-2) 70%, var(--lv-bg));
}
.lv-ticket-checkout__form {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.lv-ticket-checkout__section {
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.lv-ticket-checkout__section--addons {
padding-top: 1.125rem;
border-top: 1px solid var(--lv-border-muted);
}
.lv-ticket-checkout__section-title {
margin: 0;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--lv-text-muted);
}
.lv-ticket-checkout__label {
display: block;
font-size: 0.9375rem;
font-weight: 600;
color: var(--lv-text);
}
.lv-ticket-checkout__hint {
margin: 0.25rem 0 0;
font-size: 0.8125rem;
color: var(--lv-text-muted);
}
.lv-ticket-checkout__quantity-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.75rem 1rem;
align-items: center;
}
.lv-ticket-checkout__quantity-select {
min-width: 5.5rem;
text-align: center;
}
.lv-ticket-checkout__addon-list {
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.lv-ticket-checkout__section--coupon {
padding: 0.875rem 1rem;
border-radius: 0.75rem;
border: 1px solid var(--lv-border-muted);
background: color-mix(in srgb, var(--lv-surface) 88%, var(--lv-bg));
}
.lv-ticket-checkout__coupon-toggle {
align-self: flex-start;
}
.lv-ticket-checkout__coupon-panel {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.lv-ticket-checkout__coupon-panel.hidden {
display: none;
}
.lv-ticket-checkout__coupon-row {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
@media (min-width: 480px) {
.lv-ticket-checkout__coupon-row {
flex-direction: row;
align-items: stretch;
}
.lv-ticket-checkout__coupon-row .lv-input {
flex: 1;
min-width: 0;
}
}
.lv-ticket-checkout__coupon-status {
display: block;
min-height: 1.25rem;
font-size: 0.8125rem;
}
.lv-ticket-checkout__terms {
padding: 0.75rem 0.875rem;
border-radius: 0.625rem;
background: color-mix(in srgb, var(--lv-surface-2) 55%, transparent);
}
.lv-ticket-checkout__cta {
padding-top: 0.25rem;
}
.lv-ticket-checkout__submit {
padding: 0.875rem 1.5rem;
font-size: 1.0625rem;
font-weight: 700;
border-radius: 0.625rem;
box-shadow: 0 10px 24px color-mix(in srgb, var(--lv-secondary) 22%, transparent);
}
.lv-section-checkout {
display: flex;
flex-direction: column;
gap: 1.25rem;
width: 100%;
}
.lv-section-checkout__form {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.lv-section-checkout__map {
width: 100%;
}
.lv-section-checkout__tiers {
display: flex;
flex-direction: column;
gap: 1rem;
}
.lv-section-checkout__group {
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.lv-section-checkout__group-title {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin: 0;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--lv-section-accent-text, var(--lv-text-muted));
}
.lv-section-checkout__group-title--spaced {
margin-top: 0.25rem;
}
.lv-section-checkout__group-swatch {
flex-shrink: 0;
width: 0.625rem;
height: 0.625rem;
border-radius: 9999px;
background: var(--lv-section-accent, var(--lv-secondary));
box-shadow: 0 0 0 2px color-mix(in srgb, var(--lv-section-accent-soft, transparent) 80%, transparent);
}
.lv-section-color--0 {
--lv-section-accent: var(--lv-primary);
--lv-section-accent-text: var(--lv-primary);
--lv-section-accent-soft: color-mix(in srgb, var(--lv-primary) 20%, transparent);
--lv-section-accent-border: color-mix(in srgb, var(--lv-primary) 52%, transparent);
}
.lv-section-color--1 {
--lv-section-accent: var(--lv-secondary);
--lv-section-accent-text: var(--lv-secondary);
--lv-section-accent-soft: color-mix(in srgb, var(--lv-secondary) 20%, transparent);
--lv-section-accent-border: color-mix(in srgb, var(--lv-secondary) 52%, transparent);
}
.lv-section-color--2 {
--lv-section-accent: var(--lv-highlight);
--lv-section-accent-text: var(--lv-highlight);
--lv-section-accent-soft: color-mix(in srgb, var(--lv-highlight) 22%, transparent);
--lv-section-accent-border: color-mix(in srgb, var(--lv-highlight) 52%, transparent);
}
.lv-section-color--3 {
--lv-section-accent: var(--lv-link);
--lv-section-accent-text: var(--lv-link);
--lv-section-accent-soft: color-mix(in srgb, var(--lv-link) 18%, transparent);
--lv-section-accent-border: color-mix(in srgb, var(--lv-link) 50%, transparent);
}
.lv-section-color--4 {
--lv-section-accent: color-mix(in srgb, var(--lv-primary) 45%, var(--lv-secondary));
--lv-section-accent-text: color-mix(in srgb, var(--lv-primary) 45%, var(--lv-secondary));
--lv-section-accent-soft: color-mix(in srgb, var(--lv-primary) 14%, var(--lv-secondary) 10%, transparent);
--lv-section-accent-border: color-mix(in srgb, var(--lv-primary) 38%, var(--lv-secondary) 22%, transparent);
}
.lv-section-color--5 {
--lv-section-accent: color-mix(in srgb, var(--lv-highlight) 50%, var(--lv-primary));
--lv-section-accent-text: color-mix(in srgb, var(--lv-highlight) 50%, var(--lv-primary));
--lv-section-accent-soft: color-mix(in srgb, var(--lv-highlight) 16%, var(--lv-primary) 10%, transparent);
--lv-section-accent-border: color-mix(in srgb, var(--lv-highlight) 42%, var(--lv-primary) 18%, transparent);
}
.lv-section-color--6 {
--lv-section-accent: color-mix(in srgb, var(--lv-link) 55%, var(--lv-highlight));
--lv-section-accent-text: color-mix(in srgb, var(--lv-link) 55%, var(--lv-highlight));
--lv-section-accent-soft: color-mix(in srgb, var(--lv-link) 14%, var(--lv-highlight) 12%, transparent);
--lv-section-accent-border: color-mix(in srgb, var(--lv-link) 40%, var(--lv-highlight) 22%, transparent);
}
.lv-section-color--7 {
--lv-section-accent: color-mix(in srgb, var(--lv-secondary) 55%, var(--lv-highlight));
--lv-section-accent-text: color-mix(in srgb, var(--lv-secondary) 55%, var(--lv-highlight));
--lv-section-accent-soft: color-mix(in srgb, var(--lv-secondary) 16%, var(--lv-highlight) 10%, transparent);
--lv-section-accent-border: color-mix(in srgb, var(--lv-secondary) 42%, var(--lv-highlight) 20%, transparent);
}
.lv-section-checkout__tier-list {
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.lv-section-tier-card {
display: block;
cursor: pointer;
border-radius: 0.75rem;
border: 1px solid color-mix(in srgb, var(--lv-border-muted) 85%, transparent);
border-left-width: 0.25rem;
border-left-color: var(--lv-section-accent-border, color-mix(in srgb, var(--lv-border-muted) 85%, transparent));
background: color-mix(in srgb, var(--lv-surface-2) 65%, var(--lv-bg));
transition:
border-color 0.15s ease,
background 0.15s ease,
box-shadow 0.15s ease;
}
.lv-section-tier-card.lv-section-color {
background: color-mix(in srgb, var(--lv-section-accent-soft) 38%, var(--lv-surface-2));
}
.lv-section-tier-card:hover {
border-color: color-mix(in srgb, var(--lv-secondary) 35%, var(--lv-border-muted));
background: color-mix(in srgb, var(--lv-surface-2) 78%, var(--lv-bg));
}
.lv-section-tier-card.lv-section-color:hover {
border-color: var(--lv-section-accent-border);
border-left-color: var(--lv-section-accent);
background: color-mix(in srgb, var(--lv-section-accent-soft) 58%, var(--lv-surface-2));
}
.lv-section-tier-card:focus-within {
outline: none;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--lv-section-accent-border, var(--lv-secondary)) 55%, transparent);
}
.lv-section-tier-card--selected {
border-width: 2px;
border-left-width: 0.3125rem;
border-color: var(--lv-section-accent, var(--lv-secondary));
border-left-color: var(--lv-section-accent, var(--lv-secondary));
background: color-mix(in srgb, var(--lv-section-accent-soft, var(--lv-cruise-tier-selected-bg)) 82%, var(--lv-bg));
box-shadow:
0 0 0 2px color-mix(in srgb, var(--lv-section-accent, var(--lv-secondary)) 42%, transparent),
0 0 0 1px var(--lv-section-accent-border, var(--lv-cruise-tier-selected-shadow-1)),
0 14px 34px -12px color-mix(in srgb, var(--lv-section-accent, var(--lv-secondary)) 38%, transparent);
transform: translateY(-1px);
}
.lv-section-tier-card.lv-section-color.lv-section-tier-card--selected .lv-section-tier-card__code {
color: var(--lv-surface);
background: var(--lv-section-accent, var(--lv-secondary));
border-color: var(--lv-section-accent, var(--lv-secondary));
}
.lv-section-tier-card__body {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.875rem 1rem;
min-width: 0;
}
.lv-section-tier-card__primary {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
flex: 1 1 auto;
}
.lv-section-tier-card__heading {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.375rem 0.5rem;
}
.lv-section-tier-card__code {
display: inline-flex;
align-items: center;
padding: 0.125rem 0.4375rem;
border-radius: 9999px;
font-family: var(--lv-font-mono, ui-monospace, monospace);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.04em;
line-height: 1.2;
color: var(--lv-section-accent-text, var(--lv-text));
background: color-mix(in srgb, var(--lv-section-accent-soft) 72%, var(--lv-surface));
border: 1px solid var(--lv-section-accent-border);
}
.lv-section-tier-card__name {
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.2;
color: var(--lv-text);
}
.lv-section-tier-card__meta {
font-size: 0.8125rem;
color: var(--lv-text-muted);
}
.lv-section-tier-card__price {
flex-shrink: 0;
font-size: 1rem;
font-weight: 700;
color: var(--lv-section-accent-text, var(--lv-secondary));
}
.lv-section-checkout__footer {
display: flex;
flex-direction: column;
gap: 1rem;
padding-top: 0.5rem;
border-top: 1px solid var(--lv-border-muted);
}
.lv-section-checkout__summary {
display: flex;
flex-direction: column;
gap: 0.875rem;
padding: 1rem 1.125rem;
border-radius: 0.75rem;
border: 1px solid var(--lv-border-muted);
background: color-mix(in srgb, var(--lv-surface) 88%, var(--lv-bg));
}
.lv-section-checkout__summary-title {
margin: 0;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--lv-text-muted);
}
.lv-section-checkout__summary-row {
padding-bottom: 0.875rem;
border-bottom: 1px solid color-mix(in srgb, var(--lv-border-muted) 80%, transparent);
}
.lv-section-checkout__field-label {
display: block;
font-size: 0.9375rem;
font-weight: 600;
color: var(--lv-text);
}
.lv-section-checkout__field-hint {
margin: 0.25rem 0 0;
font-size: 0.8125rem;
color: var(--lv-text-muted);
}
.lv-section-checkout__promo {
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.lv-section-checkout__promo-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
width: 100%;
margin: 0;
padding: 0.6875rem 0.875rem;
border-radius: 0.625rem;
border: 1px dashed color-mix(in srgb, var(--lv-secondary) 28%, var(--lv-border-muted));
background: color-mix(in srgb, var(--lv-surface-2) 55%, transparent);
color: var(--lv-text);
font: inherit;
font-size: 0.875rem;
font-weight: 600;
text-align: left;
cursor: pointer;
transition:
border-color 0.15s ease,
background 0.15s ease,
color 0.15s ease;
}
.lv-section-checkout__promo-toggle:hover,
.lv-section-checkout__promo-toggle:focus-visible {
border-color: color-mix(in srgb, var(--lv-secondary) 45%, var(--lv-border-muted));
background: color-mix(in srgb, var(--lv-surface-2) 78%, transparent);
color: var(--lv-secondary);
outline: none;
}
.lv-section-checkout__promo-toggle.hidden {
display: none;
}
.lv-section-checkout__promo-toggle-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
border-radius: 9999px;
background: color-mix(in srgb, var(--lv-secondary) 14%, transparent);
color: var(--lv-secondary);
font-size: 1.125rem;
font-weight: 700;
line-height: 1;
}
.lv-section-checkout__promo--open .lv-section-checkout__promo-toggle {
display: none;
}
.lv-section-checkout__promo-panel {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.lv-section-checkout__promo-panel.hidden {
display: none;
}
.lv-section-checkout__promo-input-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.5rem;
align-items: stretch;
}
.lv-section-checkout__promo-input {
min-width: 0;
font-family: var(--lv-font-mono, ui-monospace, monospace);
font-size: 0.9375rem;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.lv-section-checkout__promo-apply {
min-width: 5.75rem;
padding: 0.625rem 1rem;
font-size: 0.875rem;
font-weight: 700;
white-space: nowrap;
}
.lv-section-checkout__promo-status {
min-height: 1.125rem;
margin: 0;
font-size: 0.8125rem;
line-height: 1.4;
color: var(--lv-text-muted);
}
.lv-section-checkout__promo-status--success {
color: var(--lv-highlight);
font-weight: 600;
}
.lv-section-checkout__promo-status--error {
color: #b91c1c;
font-weight: 600;
}
.dark .lv-section-checkout__promo-status--error {
color: #f87171;
}
.lv-section-checkout__cta {
width: 100%;
}
.lv-section-checkout__quantity-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.75rem 1rem;
align-items: center;
}
.lv-section-checkout__quantity-select {
min-width: 5.5rem;
text-align: center;
}
.lv-section-checkout__submit {
padding: 0.875rem 1.5rem;
font-size: 1.0625rem;
font-weight: 700;
border-radius: 0.625rem;
box-shadow: 0 10px 24px color-mix(in srgb, var(--lv-secondary) 22%, transparent);
}
.lv-venue-layout-map--interactive .lv-layout-map__overlay {
pointer-events: auto;
}
.lv-section-map__zone--interactive {
outline: none;
}
.lv-section-map__zone--interactive rect[data-map-part="body"] {
fill: var(--lv-section-accent, var(--lv-secondary));
fill-opacity: 0.14;
stroke: var(--lv-section-accent, var(--lv-secondary));
stroke-opacity: 0.7;
stroke-width: 0.003;
cursor: pointer;
transition:
fill-opacity 0.15s ease,
stroke-opacity 0.15s ease,
stroke-width 0.15s ease;
}
.lv-section-map__zone--interactive:hover:not(.lv-section-map__zone--unavailable) rect[data-map-part="body"],
.lv-section-map__zone--interactive:focus-visible:not(.lv-section-map__zone--unavailable) rect[data-map-part="body"] {
fill-opacity: 0.24;
stroke-opacity: 0.95;
stroke-width: 0.004;
}
.lv-section-map__zone--selected rect[data-map-part="body"] {
fill-opacity: 0.42;
stroke-opacity: 1;
stroke-width: 0.006;
filter: drop-shadow(0 0 0.004rem var(--lv-section-accent, var(--lv-highlight)));
}
.lv-layout-map__label-chip.lv-layout-map__label-chip--selected {
font-weight: 800;
}
.lv-layout-map__label-chip.lv-section-color {
color: var(--lv-section-accent-text, var(--lv-heading));
}
.lv-layout-map__label-chip.lv-section-color.lv-layout-map__label-chip--selected {
color: var(--lv-section-accent, var(--lv-highlight));
text-shadow:
0 0 8px color-mix(in srgb, var(--lv-surface) 88%, transparent),
0 1px 2px color-mix(in srgb, var(--lv-surface) 70%, transparent);
}
.lv-section-map__zone--unavailable rect[data-map-part="body"] {
fill: var(--lv-muted);
fill-opacity: 0.08;
stroke: var(--lv-muted);
stroke-opacity: 0.35;
cursor: not-allowed;
}
.lv-venue-layout-map--interactive .lv-layout-map__labels {
pointer-events: none;
}
.lv-venue-layout-map--seat-interactive .lv-layout-map__overlay {
pointer-events: auto;
}
.lv-seat-map__zone-bg {
fill: var(--lv-section-accent, var(--lv-secondary));
fill-opacity: 0.08;
stroke: var(--lv-section-accent, var(--lv-secondary));
stroke-opacity: 0.35;
stroke-width: 0.002;
pointer-events: none;
}
.lv-seat-map__seat circle[data-map-part="body"],
.lv-seat-map__seat rect[data-map-part="body"],
.lv-seat-map__seat polygon[data-map-part="body"] {
fill: var(--lv-section-accent, var(--lv-secondary));
fill-opacity: 0.75;
stroke: var(--lv-section-accent, var(--lv-secondary));
stroke-opacity: 0.9;
stroke-width: 0.0015;
cursor: pointer;
transition: fill-opacity 0.15s ease, transform 0.15s ease;
}
.lv-seat-map__seat--selected [data-map-part="body"],
.lv-seat-map__seat--selected-alt [data-map-part="body"] {
cursor: pointer;
}
.lv-seat-map__seat--selected [data-map-part="body"] {
fill: var(--lv-secondary) !important;
stroke: #fff !important;
fill-opacity: 1 !important;
stroke-opacity: 1 !important;
stroke-width: 0.004 !important;
filter: drop-shadow(0 0 0.006rem var(--lv-secondary));
}
.lv-seat-map__seat--selected-alt [data-map-part="body"] {
fill: var(--lv-highlight) !important;
stroke: #fff !important;
fill-opacity: 1 !important;
stroke-opacity: 1 !important;
stroke-width: 0.004 !important;
filter: drop-shadow(0 0 0.006rem var(--lv-highlight));
}
.lv-layout-map__seat-label--interactive {
pointer-events: none;
transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.lv-layout-map__seat-label--selected {
color: var(--lv-heading) !important;
background: color-mix(in srgb, var(--lv-secondary) 88%, #fff) !important;
box-shadow: 0 0 0 2px var(--lv-secondary);
font-weight: 700;
}
.lv-layout-map__seat-label--selected-alt {
color: var(--lv-heading) !important;
background: color-mix(in srgb, var(--lv-highlight) 88%, #fff) !important;
box-shadow: 0 0 0 2px var(--lv-highlight);
font-weight: 700;
}
.lv-seat-checkout__hold-error {
margin: 0.75rem 0 0;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
border: 1px solid color-mix(in srgb, var(--lv-highlight) 45%, transparent);
background: color-mix(in srgb, var(--lv-highlight) 12%, var(--lv-surface));
color: var(--lv-heading);
font-size: 0.8125rem;
text-align: center;
}
.lv-seat-checkout__hold-timer {
margin-bottom: 0.25rem;
}
.lv-seat-map__seat--sold circle[data-map-part="body"] {
fill: var(--lv-muted);
fill-opacity: 0.35;
stroke: var(--lv-muted);
stroke-opacity: 0.5;
cursor: not-allowed;
}
.lv-seat-map__seat--held circle[data-map-part="body"] {
fill: color-mix(in srgb, var(--lv-highlight) 55%, var(--lv-surface)) !important;
fill-opacity: 0.55 !important;
stroke: color-mix(in srgb, var(--lv-highlight) 70%, var(--lv-border)) !important;
stroke-opacity: 0.85 !important;
stroke-dasharray: 2 2 !important;
cursor: not-allowed;
}
.lv-layout-map__seat-label--sold {
color: var(--lv-muted) !important;
background: color-mix(in srgb, var(--lv-muted) 20%, var(--lv-surface)) !important;
opacity: 0.65;
text-decoration: line-through;
}
.lv-layout-map__seat-label--held {
color: var(--lv-heading) !important;
background: color-mix(in srgb, var(--lv-highlight) 22%, var(--lv-surface)) !important;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lv-highlight) 45%, transparent);
opacity: 0.8;
}
.lv-seat-map__seat--other-section circle[data-map-part="body"] {
fill-opacity: 0.2;
stroke-opacity: 0.35;
cursor: pointer;
}
.lv-seat-checkout__main {
min-width: 0;
}
.lv-seat-checkout__empty-hint {
margin: 1rem 0 0;
font-size: 0.875rem;
color: var(--lv-text-muted);
text-align: center;
}
.lv-seat-checkout__dock {
display: none;
min-width: 0;
}
body.lv-seat-checkout-dock-open {
padding-bottom: calc(var(--lv-seat-checkout-dock-height, 0px) + env(safe-area-inset-bottom, 0px));
}
.lv-seat-checkout--has-selection .lv-seat-checkout__dock,
.lv-seat-checkout__dock--visible {
display: block;
position: fixed;
left: 0;
right: 0;
bottom: 0;
width: 100%;
max-width: 100%;
z-index: 50;
border-top: 1px solid var(--lv-border);
background: color-mix(in srgb, var(--lv-surface) 98%, transparent);
backdrop-filter: blur(12px);
box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
padding:
0.625rem
max(1rem, env(safe-area-inset-right, 0px))
max(0.625rem, env(safe-area-inset-bottom, 0px))
max(1rem, env(safe-area-inset-left, 0px));
box-sizing: border-box;
max-height: min(52vh, 22rem);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.lv-seat-checkout__dock-form {
margin: 0;
}
.lv-seat-checkout__dock-inner {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.lv-seat-checkout__dock-promo {
margin-top: 0.25rem;
}
.lv-seat-checkout__dock-cta {
margin-top: 0.25rem;
}
.lv-seat-checkout__summary-title {
margin: 0 0 0.5rem;
font-size: 0.9375rem;
font-weight: 700;
color: var(--lv-heading);
}
.lv-seat-checkout__chips {
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
margin-bottom: 0.75rem;
}
.lv-seat-checkout__chip {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.2rem 0.35rem 0.2rem 0.625rem;
border-radius: 9999px;
font-size: 0.8125rem;
font-weight: 600;
color: var(--lv-heading);
background: color-mix(in srgb, var(--lv-secondary) 14%, var(--lv-surface));
border: 1px solid color-mix(in srgb, var(--lv-secondary) 28%, transparent);
}
.lv-seat-checkout__chip--alt {
color: var(--lv-heading);
background: color-mix(in srgb, var(--lv-highlight) 16%, var(--lv-surface));
border-color: color-mix(in srgb, var(--lv-highlight) 32%, transparent);
}
.lv-seat-checkout__chip--readonly {
padding: 0.25rem 0.625rem;
}
.lv-seat-checkout__chip-label {
line-height: 1.2;
}
.lv-seat-checkout__chip-remove {
display: inline-grid;
place-items: center;
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
padding: 0;
border: none;
border-radius: 9999px;
color: var(--lv-muted);
background: transparent;
cursor: pointer;
}
.lv-seat-checkout__chip-remove-icon {
display: block;
width: 0.6875rem;
height: 0.6875rem;
}
.lv-seat-checkout__chip-remove:hover {
color: var(--lv-heading);
background: color-mix(in srgb, var(--lv-surface-3) 70%, transparent);
}
.lv-seat-checkout__chip-remove:focus-visible {
outline: 2px solid var(--lv-secondary);
outline-offset: 1px;
}
@media (max-width: 1023px) {
.lv-seat-checkout__dock-inner {
gap: 0.5rem;
}
.lv-seat-checkout__summary-title {
font-size: 0.875rem;
}
.lv-seat-checkout__chips {
margin-bottom: 0.5rem;
}
.lv-seat-checkout__empty-hint {
margin-bottom: 0.5rem;
}
}
@media (min-width: 1024px) {
.lv-seat-checkout--has-selection .lv-seat-checkout__dock,
.lv-seat-checkout__dock--visible {
left: 50%;
right: auto;
width: min(100%, 52rem);
max-width: 52rem;
transform: translateX(-50%);
border-radius: 0.75rem 0.75rem 0 0;
max-height: none;
overflow: visible;
padding: 0.75rem 1.25rem max(0.75rem, env(safe-area-inset-bottom, 0px));
}
.lv-seat-checkout__dock-inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(12rem, 16rem);
grid-template-rows: auto auto auto;
gap: 0.5rem 1.5rem;
align-items: center;
}
.lv-seat-checkout__hold-timer {
grid-column: 1 / -1;
grid-row: 1;
margin-bottom: 0;
}
.lv-seat-checkout__summary {
grid-column: 1;
grid-row: 2 / 4;
align-self: center;
min-width: 0;
}
.lv-seat-checkout__summary-title {
margin-bottom: 0.375rem;
}
.lv-seat-checkout__chips {
margin-bottom: 0.5rem;
}
.lv-seat-checkout__dock-promo {
grid-column: 2;
grid-row: 2;
margin-top: 0;
justify-self: stretch;
}
.lv-seat-checkout__dock-cta {
grid-column: 2;
grid-row: 3;
margin-top: 0;
justify-self: stretch;
}
}
.lv-seat-checkout__price-lines {
display: grid;
gap: 0.375rem;
margin: 0;
}
.lv-seat-checkout__price-line {
display: flex;
justify-content: space-between;
gap: 1rem;
font-size: 0.875rem;
}
.lv-seat-checkout__price-line dt {
margin: 0;
color: var(--lv-text-muted);
}
.lv-seat-checkout__price-line dd {
margin: 0;
font-weight: 700;
color: var(--lv-heading);
}
.lv-event-show--cruise .lv-event-show__purchase {
padding: 0;
border: none;
background: transparent;
}
.lv-event-show__info .lv-event-hero__chip {
color: var(--lv-text);
background: color-mix(in srgb, var(--lv-surface-2) 88%, var(--lv-bg));
border-color: var(--lv-border-muted);
backdrop-filter: none;
}
.lv-event-show__info a.lv-event-hero__chip:hover,
.lv-event-show__info a.lv-event-hero__chip:focus-visible {
color: var(--lv-secondary);
background: color-mix(in srgb, var(--lv-secondary) 10%, var(--lv-surface));
border-color: color-mix(in srgb, var(--lv-secondary) 35%, transparent);
}
.lv-event-show__info .lv-event-hero__chip--format {
color: var(--lv-secondary);
background: color-mix(in srgb, var(--lv-secondary) 12%, var(--lv-surface));
border-color: color-mix(in srgb, var(--lv-secondary) 28%, transparent);
}
.lv-event-show__info .lv-event-hero__dates {
color: var(--lv-text);
background: color-mix(in srgb, var(--lv-surface-2) 92%, var(--lv-bg));
border-color: var(--lv-border-muted);
box-shadow: none;
backdrop-filter: none;
}
.lv-event-show__info .lv-event-hero__dates--muted {
color: var(--lv-text-muted);
}
.lv-event-show__info .lv-event-hero__venue {
color: var(--lv-link);
border-bottom-color: color-mix(in srgb, var(--lv-link) 35%, transparent);
text-shadow: none;
}
.lv-event-show__info .lv-event-hero__venue:hover,
.lv-event-show__info .lv-event-hero__venue:focus-visible {
color: var(--lv-secondary);
}
.lv-event-show__info .lv-event-hero__venue-link {
text-shadow: none;
}
.lv-event-show__banner {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin: 0;
padding: 0;
border-radius: 1rem;
overflow: hidden;
background: var(--lv-surface-2);
box-shadow: 0 4px 24px color-mix(in srgb, var(--lv-bg) 40%, transparent);
}
.lv-event-show__banner-img {
display: block;
width: 100%;
height: auto;
max-height: 10rem;
object-fit: contain;
object-position: center;
border-radius: 0;
}
@media (min-width: 640px) {
.lv-event-show__banner-img {
max-height: 14rem;
}
}
@media (min-width: 768px) {
.lv-event-show__banner-img {
max-height: 18rem;
}
}
@media (min-width: 1024px) {
.lv-event-show__banner-img {
max-height: 22rem;
}
}
.lv-event-show__banner-fallback {
width: 100%;
min-height: 8rem;
border-radius: 0;
opacity: 0.9;
}
@media (min-width: 640px) {
.lv-event-show__banner-fallback {
min-height: 10rem;
}
}
@media (min-width: 768px) {
.lv-event-show__banner-fallback {
min-height: 12rem;
}
}
/* Event show hero (legacy overlay) — light text over bottom navy scrim */
.lv-event-hero {
--lv-hero-title: #ffffff;
--lv-hero-meta: #e2e8f0;
--lv-hero-meta-muted: #cbd5e1;
--lv-hero-venue: #7dd3fc;
--lv-hero-venue-hover: #bae6fd;
--lv-hero-byline: #cbd5e1;
--lv-hero-brand: #f8fafc;
--lv-hero-chip-bg: rgba(15, 23, 42, 0.5);
--lv-hero-chip-text: #f1f5f9;
--lv-hero-chip-border: rgba(148, 163, 184, 0.4);
}
.dark .lv-event-hero {
--lv-hero-title: #f8fafc;
--lv-hero-title-shadow: none;
--lv-hero-meta: #e2e8f0;
--lv-hero-meta-muted: #cbd5e1;
--lv-hero-venue: #67e8f9;
--lv-hero-venue-hover: #a5f3fc;
--lv-hero-byline: #cbd5e1;
--lv-hero-brand: #f1f5f9;
--lv-hero-chip-bg: rgba(15, 23, 42, 0.65);
--lv-hero-chip-text: #e2e8f0;
--lv-hero-chip-border: rgba(148, 163, 184, 0.4);
}
/* Bottom half only: navy fade for legibility; top 50% fully visible */
.lv-event-hero__scrim {
background: linear-gradient(
to top,
rgba(10, 22, 40, 0.96) 0%,
rgba(10, 22, 40, 0.78) 16%,
rgba(10, 22, 40, 0.48) 30%,
rgba(10, 22, 40, 0.16) 44%,
transparent 52%,
transparent 100%
);
}
.dark .lv-event-hero__scrim {
background: linear-gradient(
to top,
rgba(2, 6, 23, 0.96) 0%,
rgba(2, 6, 23, 0.75) 16%,
rgba(2, 6, 23, 0.45) 30%,
rgba(2, 6, 23, 0.14) 44%,
transparent 52%,
transparent 100%
);
}
.lv-event-hero__fallback {
background: linear-gradient(
125deg,
color-mix(in srgb, var(--lv-primary) 22%, var(--lv-bg)) 0%,
color-mix(in srgb, var(--lv-secondary) 18%, var(--lv-bg)) 55%,
var(--lv-bg) 100%
);
}
.lv-event-hero__content {
position: relative;
z-index: 10;
padding: 2rem;
width: 100%;
max-width: 72rem;
}
.lv-event-hero h1.lv-event-hero__title {
margin: 0 0 0.5rem;
font-size: clamp(1.875rem, 4.5vw, 3rem);
font-weight: 700;
letter-spacing: -0.028em;
line-height: 1.12;
color: var(--lv-hero-title);
text-shadow:
0 2px 16px rgba(2, 6, 23, 0.65),
0 0 32px rgba(2, 6, 23, 0.35);
}
.lv-event-hero__byline,
.lv-event-hero__brand {
text-shadow:
0 1px 10px rgba(2, 6, 23, 0.55),
0 0 20px rgba(2, 6, 23, 0.25);
}
.lv-event-hero__chips {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-bottom: 0.5rem;
}
/* Tag links crowd the info header on small screens; format chip stays visible from sm up */
@media (max-width: 639px) {
.lv-event-show__info .lv-event-hero__chips a.lv-event-hero__chip {
display: none;
}
.lv-event-show__info .lv-event-hero__chips:not(:has(.lv-event-hero__chip--format)) {
display: none;
margin-bottom: 0;
}
}
.lv-event-hero__chip {
display: inline-flex;
align-items: center;
padding: 0.2rem 0.65rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.01em;
color: var(--lv-hero-chip-text);
background: var(--lv-hero-chip-bg);
border: 1px solid var(--lv-hero-chip-border);
backdrop-filter: blur(6px);
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
a.lv-event-hero__chip:hover,
a.lv-event-hero__chip:focus-visible {
background: color-mix(in srgb, var(--lv-primary) 14%, var(--lv-hero-chip-bg));
border-color: color-mix(in srgb, var(--lv-primary) 40%, transparent);
color: var(--lv-hero-venue-hover);
}
.lv-event-hero__chip--format {
font-weight: 600;
color: var(--lv-secondary);
background: color-mix(in srgb, var(--lv-secondary) 12%, var(--lv-hero-chip-bg));
border-color: color-mix(in srgb, var(--lv-secondary) 28%, transparent);
}
.lv-event-hero__meta {
margin: 0 0 0.5rem;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.lv-event-hero__dates {
display: inline-flex;
align-items: center;
max-width: 100%;
padding: 0.4rem 0.9rem;
border-radius: 0.5rem;
font-size: clamp(1rem, 2.2vw, 1.1875rem);
font-weight: 600;
line-height: 1.35;
letter-spacing: 0.01em;
color: #f8fafc;
background: rgba(15, 23, 42, 0.78);
border: 1px solid rgba(248, 250, 252, 0.2);
box-shadow:
0 2px 14px rgba(2, 6, 23, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
text-shadow: none;
}
.lv-event-hero__dates--muted {
color: #e2e8f0;
font-weight: 500;
}
.lv-event-hero__meta-sep {
color: var(--lv-hero-meta-muted);
opacity: 0.65;
user-select: none;
}
.lv-event-hero__venue-row {
margin: 0.75rem 0 0;
}
.lv-event-hero__venue-link {
display: inline-block;
font-size: 0.8125rem;
line-height: 1.3;
text-shadow: 0 1px 8px rgba(2, 6, 23, 0.55);
}
.lv-event-hero__venue {
color: var(--lv-hero-venue);
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid color-mix(in srgb, var(--lv-hero-venue) 35%, transparent);
transition: color 0.15s ease, border-color 0.15s ease;
}
.lv-event-hero__venue:hover,
.lv-event-hero__venue:focus-visible {
color: var(--lv-hero-venue-hover);
border-bottom-color: currentColor;
}
.lv-event-hero__meta-muted {
color: var(--lv-hero-meta-muted);
font-weight: 500;
}
.lv-event-hero__byline {
margin: 0.35rem 0 0;
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.4;
color: var(--lv-hero-byline);
}
.lv-event-hero .lv-event-hero__brand {
color: var(--lv-hero-brand);
font-weight: 600;
}
.lv-learn-more__block + .lv-learn-more__block {
margin-top: 0;
}
.lv-prose--compact p {
margin-top: 0;
margin-bottom: 0.5rem;
}
.lv-booking-hold-banner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem 1rem;
margin-bottom: 0;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
border: 1px solid color-mix(in srgb, var(--lv-secondary) 45%, var(--lv-border-muted));
background: color-mix(in srgb, var(--lv-secondary) 12%, var(--lv-surface));
color: var(--lv-text);
font-size: 0.875rem;
font-weight: 600;
}
.lv-booking-wizard__hold-desktop .lv-booking-hold-banner {
margin-bottom: 0;
}
.lv-booking-hold-banner--compact {
padding: 0.5rem 0.75rem;
font-size: 0.8125rem;
border-radius: 0.375rem;
}
.lv-booking-hold-banner--compact .lv-booking-hold-banner__time {
font-size: 1rem;
}
.lv-booking-hold-banner__time {
font-variant-numeric: tabular-nums;
font-size: 1.125rem;
color: var(--lv-secondary);
}
.lv-booking-hold-banner--urgent {
border-color: color-mix(in srgb, #f59e0b 55%, var(--lv-border-muted));
background: color-mix(in srgb, #f59e0b 14%, var(--lv-surface));
}
.lv-booking-hold-banner--expired {
border-color: color-mix(in srgb, #ef4444 50%, var(--lv-border-muted));
background: color-mix(in srgb, #ef4444 12%, var(--lv-surface));
}
.lv-booking-hold-banner--expired .lv-booking-hold-banner__time {
color: #f87171;
}
.lv-booking-hold-banner--renewed {
border-color: color-mix(in srgb, var(--lv-secondary) 55%, var(--lv-border-muted));
background: color-mix(in srgb, var(--lv-secondary) 18%, var(--lv-surface));
}
.lv-booking-hold-banner--renewed .lv-booking-hold-banner__time {
color: var(--lv-accent);
}
.lv-event-hero__badges {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-top: 0.65rem;
}
.lv-event-hero__badge {
display: inline-flex;
align-items: center;
padding: 0.28rem 0.65rem;
border-radius: 0.375rem;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
line-height: 1.35;
border: 1px solid transparent;
}
.lv-event-hero__badge--upcoming {
color: #b45309;
background: color-mix(in srgb, #f59e0b 16%, transparent);
border-color: color-mix(in srgb, #f59e0b 32%, transparent);
}
.lv-event-hero__badge--tickets {
color: #0e7490;
background: color-mix(in srgb, var(--lv-primary) 14%, transparent);
border-color: color-mix(in srgb, var(--lv-primary) 32%, transparent);
}
.lv-event-hero__badge--vod {
color: #475569;
background: color-mix(in srgb, var(--lv-text-muted) 12%, transparent);
border-color: color-mix(in srgb, var(--lv-text-muted) 28%, transparent);
}
.lv-event-hero__badge--rent {
color: #be123c;
background: color-mix(in srgb, #f43f5e 12%, transparent);
border-color: color-mix(in srgb, #f43f5e 28%, transparent);
}
.lv-event-hero__badge--preview {
color: #5b21b6;
background: color-mix(in srgb, var(--lv-secondary) 14%, transparent);
border-color: color-mix(in srgb, var(--lv-secondary) 30%, transparent);
}
.lv-event-hero__badge--preview-warn {
color: #b45309;
background: color-mix(in srgb, #f59e0b 12%, transparent);
border-color: color-mix(in srgb, #f59e0b 28%, transparent);
}
/* Badges on hero scrim (readable on navy fade in light + dark) */
.lv-event-hero .lv-event-hero__badge--upcoming {
color: #fde68a;
background: color-mix(in srgb, #f59e0b 28%, transparent);
border-color: color-mix(in srgb, #f59e0b 42%, transparent);
}
.lv-event-hero .lv-event-hero__badge--tickets {
color: #a5f3fc;
background: color-mix(in srgb, var(--lv-primary) 24%, transparent);
border-color: color-mix(in srgb, var(--lv-primary) 40%, transparent);
}
.lv-event-hero .lv-event-hero__badge--vod {
color: #e2e8f0;
background: color-mix(in srgb, var(--lv-text-muted) 28%, transparent);
border-color: color-mix(in srgb, var(--lv-text-muted) 40%, transparent);
}
.lv-event-hero .lv-event-hero__badge--rent {
color: #fecdd3;
background: color-mix(in srgb, #f43f5e 26%, transparent);
border-color: color-mix(in srgb, #f43f5e 42%, transparent);
}
.lv-event-hero .lv-event-hero__badge--preview {
color: #e9d5ff;
background: color-mix(in srgb, var(--lv-secondary) 26%, transparent);
border-color: color-mix(in srgb, var(--lv-secondary) 42%, transparent);
}
.lv-event-hero .lv-event-hero__badge--preview-warn {
color: #fde68a;
background: color-mix(in srgb, #f59e0b 22%, transparent);
border-color: color-mix(in srgb, #f59e0b 38%, transparent);
}
.dark .lv-event-hero__badge--upcoming {
color: #fde68a;
background: color-mix(in srgb, #f59e0b 22%, transparent);
border-color: color-mix(in srgb, #f59e0b 38%, transparent);
}
.dark .lv-event-hero__badge--tickets {
color: #a5f3fc;
background: color-mix(in srgb, var(--lv-primary) 20%, transparent);
border-color: color-mix(in srgb, var(--lv-primary) 38%, transparent);
}
.dark .lv-event-hero__badge--vod {
color: #cbd5e1;
background: color-mix(in srgb, var(--lv-text-muted) 22%, transparent);
border-color: color-mix(in srgb, var(--lv-text-muted) 35%, transparent);
}
.dark .lv-event-hero__badge--rent {
color: #fecdd3;
background: color-mix(in srgb, #f43f5e 22%, transparent);
border-color: color-mix(in srgb, #f43f5e 38%, transparent);
}
.dark .lv-event-hero__badge--preview {
color: #e9d5ff;
background: color-mix(in srgb, var(--lv-secondary) 22%, transparent);
border-color: color-mix(in srgb, var(--lv-secondary) 40%, transparent);
}
.dark .lv-event-hero__badge--preview-warn {
color: #fde68a;
background: color-mix(in srgb, #f59e0b 18%, transparent);
border-color: color-mix(in srgb, #f59e0b 34%, transparent);
}
/* VOD watch — cinema player stage */
.lv-vod-watch {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-bottom: 2rem;
}
.lv-vod-watch__skip {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.lv-vod-watch__skip:focus {
position: static;
width: auto;
height: auto;
margin: 0 0 0.5rem;
padding: 0.5rem 1rem;
clip: auto;
overflow: visible;
white-space: normal;
border-radius: 0.375rem;
background: var(--lv-surface-2);
color: var(--lv-text);
border: 1px solid var(--lv-border-muted);
font-size: 0.875rem;
font-weight: 600;
z-index: 30;
}
.lv-vod-watch__header {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.lv-vod-watch__stage {
display: flex;
flex-direction: column;
gap: 1rem;
}
.lv-vod-watch__kicker {
margin: 0;
}
.lv-video-player {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 0.5rem;
background: #000;
border: 1px solid var(--lv-border-muted);
box-shadow:
0 0 0 1px color-mix(in srgb, var(--lv-primary) 12%, transparent),
0 24px 48px -12px color-mix(in srgb, var(--lv-bg) 55%, #000);
}
.lv-video-player--preview {
border-radius: 0.625rem;
}
.lv-video-player__frame {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.lv-video-access-bar {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.625rem;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
border: 1px solid var(--lv-border-muted);
background: color-mix(in srgb, var(--lv-surface-2) 75%, var(--lv-bg));
font-size: 0.875rem;
text-align: center;
}
.lv-video-access-bar__status {
font-weight: 600;
}
.lv-video-access-bar__cast {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.5rem;
color: var(--lv-text-muted);
}
.lv-video-access-bar__cast-icons {
display: inline-flex;
align-items: center;
gap: 0.375rem;
}
.lv-video-access-bar__cast-icon {
width: 1.25rem;
height: 1.25rem;
flex-shrink: 0;
}
.lv-video-access-bar__cast-icon--airplay {
color: var(--lv-accent);
}
.lv-video-access-bar__cast-icon--chromecast {
color: var(--lv-highlight);
}
.lv-video-access-bar--active {
border-color: color-mix(in srgb, var(--lv-highlight) 35%, var(--lv-border-muted));
background: color-mix(in srgb, var(--lv-highlight) 10%, var(--lv-surface-2));
}
.lv-video-access-bar--active .lv-video-access-bar__status {
color: var(--lv-highlight);
}
.lv-video-access-bar--expiring {
border-color: color-mix(in srgb, #f59e0b 35%, var(--lv-border-muted));
background: color-mix(in srgb, #f59e0b 10%, var(--lv-surface-2));
}
.lv-video-access-bar--expiring .lv-video-access-bar__status {
color: color-mix(in srgb, #f59e0b 85%, var(--lv-text));
}
.lv-video-access-bar--expired {
border-color: color-mix(in srgb, #ef4444 35%, var(--lv-border-muted));
background: color-mix(in srgb, #ef4444 8%, var(--lv-surface-2));
}
.lv-video-access-bar--expired .lv-video-access-bar__status {
color: color-mix(in srgb, #ef4444 80%, var(--lv-text));
}
.lv-video-preview__heading {
margin: 0 0 0.75rem;
font-size: 1.125rem;
font-weight: 700;
color: var(--lv-heading);
}
/* Stabilize Administrate form alignment for labels, fields, and hints. */
.field-unit {
display: grid;
grid-template-columns: 9rem minmax(0, 1fr);
column-gap: 0.75rem;
align-items: start;
margin-bottom: 0.55rem;
}
.field-unit__label {
float: none;
width: auto;
margin-left: 0;
text-align: right;
padding-top: 0.35rem;
}
.field-unit__field {
float: none;
margin-left: 0;
min-width: 0;
}
.field-unit__hint {
margin-left: 0;
width: auto;
}
.field-unit__hint--below {
grid-column: 2;
margin-top: 0.05rem;
margin-bottom: 0;
line-height: 1.35;
}
@media (max-width: 900px) {
.field-unit {
grid-template-columns: 1fr;
row-gap: 0.4rem;
}
.field-unit__label {
text-align: left;
padding-top: 0;
}
.field-unit__hint--below {
grid-column: 1;
margin-top: 0.1rem;
}
}
/* Trix / Action Text on producer event wizard (site theme; default trix = black icons on light/transparent chrome) */
.lv-producer-event-wizard .lv-producer-rich-text {
max-width: 100%;
}
.lv-producer-event-wizard .lv-producer-rich-text trix-toolbar,
.lv-producer-event-wizard .lv-producer-rich-text trix-editor {
max-width: 100%;
}
.lv-producer-event-wizard trix-toolbar {
background: var(--lv-trix-toolbar-bg);
border-radius: 0.45rem 0.45rem 0 0;
padding: 0.4rem 0.5rem 0;
border: 1px solid var(--lv-border-muted);
border-bottom: none;
}
.lv-producer-event-wizard trix-toolbar .trix-button-row {
flex-wrap: wrap;
justify-content: flex-start;
gap: 0.35rem 0.45rem;
overflow-x: visible;
}
.lv-producer-event-wizard trix-toolbar .trix-button-group-spacer {
display: none;
}
.lv-producer-event-wizard trix-toolbar .trix-button-group {
margin-bottom: 0.35rem;
margin-left: 0 !important;
background: var(--lv-trix-group-bg);
border: 1px solid var(--lv-border-muted) !important;
border-top-color: var(--lv-border-muted) !important;
border-bottom-color: var(--lv-border-muted) !important;
border-radius: 0.4rem;
}
.lv-producer-event-wizard trix-toolbar .trix-button {
color: var(--lv-text-muted) !important;
border-bottom: none !important;
background: transparent !important;
}
.lv-producer-event-wizard trix-toolbar .trix-button:not(:first-child) {
border-left: 1px solid rgba(148, 163, 184, 0.22) !important;
}
.lv-producer-event-wizard trix-toolbar .trix-button.trix-active {
background: rgba(58, 134, 255, 0.22) !important;
color: var(--lv-text) !important;
}
.lv-producer-event-wizard trix-toolbar .trix-button:not(:disabled):hover {
background: rgba(168, 85, 247, 0.12) !important;
color: var(--lv-text) !important;
}
.lv-producer-event-wizard trix-toolbar .trix-button:disabled {
color: rgba(148, 163, 184, 0.35) !important;
}
.lv-producer-event-wizard trix-toolbar .trix-button--icon::before {
filter: var(--lv-trix-icon-filter);
opacity: 0.82 !important;
}
.lv-producer-event-wizard trix-toolbar .trix-button--icon.trix-active::before {
filter: var(--lv-trix-icon-filter);
opacity: 1 !important;
}
.lv-producer-event-wizard trix-toolbar .trix-button--icon:disabled::before {
filter: var(--lv-trix-icon-filter);
opacity: 0.3 !important;
}
.lv-producer-event-wizard trix-editor {
background: var(--lv-trix-editor-bg) !important;
border: 1px solid var(--lv-border-muted) !important;
border-top: 1px solid rgba(148, 163, 184, 0.18) !important;
border-radius: 0 0 0.45rem 0.45rem !important;
color: var(--lv-text) !important;
margin-top: 0;
min-height: 22rem;
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}
.lv-producer-event-wizard trix-editor.trix-content {
color: var(--lv-text);
}
.lv-producer-event-wizard trix-editor a {
color: var(--lv-primary);
}
.lv-producer-event-wizard trix-editor blockquote {
border-left-color: rgba(168, 85, 247, 0.45) !important;
color: var(--lv-text-muted);
}
.lv-producer-event-wizard trix-editor pre {
white-space: pre-wrap;
overflow-x: auto;
background: rgba(0, 0, 0, 0.35) !important;
color: var(--lv-highlight) !important;
border-radius: 0.35rem;
}
.lv-producer-event-wizard trix-editor .attachment--preview .attachment__caption {
color: var(--lv-text-muted) !important;
}
.lv-producer-event-wizard trix-editor .attachment--file {
color: var(--lv-text) !important;
border-color: var(--lv-border-muted) !important;
background: rgba(2, 6, 23, 0.5) !important;
}
.lv-producer-event-wizard trix-toolbar .trix-dialog {
background: rgba(18, 18, 28, 0.98) !important;
border: 1px solid var(--lv-border-muted) !important;
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
color: var(--lv-text);
}
.lv-producer-event-wizard trix-toolbar .trix-input--dialog {
background: rgba(2, 6, 23, 0.9) !important;
border: 1px solid var(--lv-border-muted) !important;
color: var(--lv-text) !important;
border-radius: 0.35rem;
}
.lv-producer-event-wizard trix-toolbar .trix-button--dialog {
background: var(--lv-primary) !important;
color: var(--lv-on-primary) !important;
border-radius: 0.35rem !important;
}
.lv-producer-event-wizard trix-toolbar .trix-button--dialog:hover {
background: var(--lv-primary-hover) !important;
color: var(--lv-on-primary) !important;
}
.lv-footer-preferences {
flex-shrink: 0;
}
.lv-theme-toggle {
display: inline-flex;
align-items: center;
gap: 0.2rem;
border-radius: 0.5rem;
border: 1px solid var(--lv-border);
background: var(--lv-surface-2);
padding: 0.2rem;
box-shadow: 0 1px 4px var(--lv-shadow);
}
.lv-theme-toggle__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
min-width: 2.25rem;
min-height: 2.25rem;
padding: 0 0.45rem;
border-radius: 0.35rem;
border: none;
background: transparent;
color: var(--lv-text-muted);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.lv-theme-toggle__label {
font-size: 0.7rem;
font-weight: 600;
line-height: 1;
}
.lv-theme-toggle__btn:hover,
.lv-theme-toggle__btn:focus-visible {
color: var(--lv-primary);
outline: none;
}
.lv-theme-toggle__btn[aria-pressed="true"] {
background: var(--lv-primary);
color: var(--lv-on-primary);
}
.lv-theme-toggle__btn svg {
width: 1.1rem;
height: 1.1rem;
}