/* ==========================================================================
   SNN Reservations — Frontend
   Modern minimalist light theme. No blue anywhere in UI chrome.
   Depth via shadow only, never colored borders.
   ========================================================================== */

/* ── Enforce [hidden] over any display rule ─────────────────────────────── */
[hidden] { display: none !important; }

/* ── Tokens ─────────────────────────────────────────────────────────────── */
.snn-app {
	/* Text */
	--ink:   #111111;
	--ink-2: #444444;
	--ink-3: #777777;
	--ink-4: #aaaaaa;

	/* Surfaces */
	--paper:     #ffffff;
	--surface:   #f8f8f7;
	--surface-2: #f0f0ef;

	/* Borders — always neutral, never colored */
	--rule:    rgba(0,0,0,.06);
	--rule-md: rgba(0,0,0,.1);

	/* Seat status */
	--green:    #16a34a;
	--green-lt: #dcfce7;
	--slate:    #334155;
	--slate-lt: #e2e8f0;
	--amber:    #d97706;
	--amber-lt: #fef3c7;
	--red:      #dc2626;
	--red-lt:   #fee2e2;

	/* Stage */
	--stage-bg: #18181b;
	--stage-fg: #a1a1aa;

	/* Radii */
	--r:    10px;
	--r-sm: 6px;
	--r-xs: 4px;

	/* Shadows */
	--sh-xs: 0 1px 2px rgba(0,0,0,.05);
	--sh-sm: 0 1px 3px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
	--sh:    0 2px 10px rgba(0,0,0,.08), 0 4px 20px rgba(0,0,0,.05);
	--sh-lg: 0 6px 28px rgba(0,0,0,.1), 0 2px 8px rgba(0,0,0,.06);

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size:   15px;
	line-height: 1.5;
	color:       var(--ink);
	background:  var(--paper);
	max-width:   860px;
	margin:      0 auto;
}

/* ── Steps ──────────────────────────────────────────────────────────────── */
.snn-step { animation: snn-in .2s ease; }

@keyframes snn-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.snn-step__heading {
	font-size:      1.35rem;
	font-weight:    700;
	letter-spacing: -.022em;
	color:          var(--ink);
	margin:         0 0 2px;
}

/* ── Spinner / loading ──────────────────────────────────────────────────── */
.snn-loading {
	display:     flex;
	align-items: center;
	gap:         10px;
	padding:     32px 0;
	color:       var(--ink-3);
	font-size:   .9rem;
}

.snn-spinner {
	width:            18px;
	height:           18px;
	border:           2px solid var(--rule-md);
	border-top-color: var(--ink);
	border-radius:    50%;
	animation:        snn-spin .6s linear infinite;
	flex-shrink:      0;
}

@keyframes snn-spin { to { transform: rotate(360deg); } }

/* ── Month strip ─────────────────────────────────────────────────────────── */

.snn-month-strip-wrap {
	position:      relative;
	margin-bottom: 12px;
}

/* Left + right fades scoped to the strip row */
.snn-month-strip-row::before,
.snn-month-strip-row::after {
	content:        '';
	position:       absolute;
	top:            0;
	bottom:         10px;
	width:          60px;
	pointer-events: none;
	z-index:        2;
	transition:     opacity .2s;
}

.snn-month-strip-row::before {
	left:       0;
	background: linear-gradient(to left, transparent, var(--paper) 80%);
	opacity:    0;
}

.snn-month-strip-row::after {
	right:      0;
	background: linear-gradient(to right, transparent, var(--paper) 80%);
}

.snn-month-strip-wrap.snn-scrolled-left .snn-month-strip-row::before { opacity: 1; }
.snn-month-strip-wrap.snn-scrolled-end  .snn-month-strip-row::after  { opacity: 0; }

/* Inner row scopes arrow positioning to the strip only (excludes the label) */
.snn-month-strip-row {
	position: relative;
}

/* Month strip arrows — same pattern as date arrows */
.snn-month-strip-arrow {
	position:        absolute;
	top:             50%;
	transform:       translateY(-67%);
	width:           30px;
	height:          30px;
	border-radius:   50%;
	background:      var(--paper);
	border:          1.5px solid var(--rule-md);
	box-shadow:      var(--sh-sm);
	cursor:          pointer;
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-size:       1rem;
	line-height:     1;
	color:           var(--ink-2);
	z-index:         3;
	opacity:         0;
	pointer-events:  none;
	transition:      opacity .18s, box-shadow .14s, color .14s;
}

.snn-month-strip-wrap:hover .snn-month-strip-arrow:not([hidden]) {
	opacity:        1;
	pointer-events: auto;
}

.snn-month-strip-arrow:hover { box-shadow: var(--sh); color: var(--ink); }
.snn-month-strip-arrow--left  { left:  -12px; }
.snn-month-strip-arrow--right { right: -12px; }

@media (hover: none) {
	.snn-month-strip-arrow { display: none !important; }
}

.snn-month-strip-label {
	font-size:      .65rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color:          var(--ink-4);
	margin-bottom:  8px;
}

.snn-month-strip {
	display:              flex;
	flex-wrap:            nowrap;
	gap:                  6px;
	overflow-x:           auto;
	padding:              2px 80px 10px 2px; /* right padding keeps last pill clear of the fade */
	-webkit-overflow-scrolling: touch;
	scroll-snap-type:     x proximity;
}

.snn-month-strip::-webkit-scrollbar { display: none; }
.snn-month-strip { scrollbar-width: none; }

.snn-month-pill {
	display:          flex;
	align-items:      baseline;
	gap:              4px;
	padding:          8px 16px;
	border:           1.5px solid var(--rule-md);
	border-radius:    100px;
	background:       var(--paper);
	color:            var(--ink-2);
	cursor:           pointer;
	flex-shrink:      0;
	scroll-snap-align: start;
	transition:       background .13s, color .13s, border-color .13s, box-shadow .12s;
	white-space:      nowrap;
}

.snn-month-pill:hover {
	background:   var(--surface);
	border-color: var(--ink-4);
	color:        var(--ink);
	box-shadow:   var(--sh-sm);
}

.snn-month-pill:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.snn-month-pill--active,
.snn-month-pill--active:hover {
	background:   var(--ink);
	color:        #fff;
	border-color: var(--ink);
	box-shadow:   var(--sh-sm);
}

.snn-month-pill--active:hover { background: #222; border-color: #222; }

.snn-month-pill__name {
	font-size:   .88rem;
	font-weight: 700;
}

.snn-month-pill__year {
	font-size: .75rem;
	opacity:   .6;
}

.snn-month-pill--active .snn-month-pill__year { opacity: .7; }


/* ── Date strip wrapper + arrows ────────────────────────────────────────── */
.snn-date-strip-wrap {
	position:      relative;
	margin-bottom: 4px;
}

/* Left + right fades */
.snn-date-strip-wrap::before,
.snn-date-strip-wrap::after {
	content:        '';
	position:       absolute;
	top:            0;
	bottom:         14px; /* clears the scroll padding */
	width:          48px;
	pointer-events: none;
	z-index:        2;
	transition:     opacity .2s;
}

.snn-date-strip-wrap::before {
	left:       0;
	background: linear-gradient(to left, transparent, var(--paper) 80%);
	opacity:    0; /* hidden until scrolled right */
}

.snn-date-strip-wrap::after {
	right:      0;
	background: linear-gradient(to right, transparent, var(--paper) 80%);
}

.snn-date-strip-wrap.snn-scrolled-left::before  { opacity: 1; }
.snn-date-strip-wrap.snn-scrolled-end::after     { opacity: 0; }

/* Arrow buttons — appear on wrapper hover (desktop only) */
.snn-date-strip-arrow {
	position:        absolute;
	top:             50%;
	transform:       translateY(-60%); /* offset for bottom padding */
	width:           30px;
	height:          30px;
	border-radius:   50%;
	background:      var(--paper);
	border:          1.5px solid var(--rule-md);
	box-shadow:      var(--sh-sm);
	cursor:          pointer;
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-size:       1rem;
	line-height:     1;
	color:           var(--ink-2);
	z-index:         3;
	opacity:         0;
	pointer-events:  none;
	transition:      opacity .18s, box-shadow .14s, color .14s;
}

.snn-date-strip-wrap:hover .snn-date-strip-arrow:not([hidden]) {
	opacity:        1;
	pointer-events: auto;
}

.snn-date-strip-arrow:hover { box-shadow: var(--sh); color: var(--ink); }
.snn-date-strip-arrow--left  { left:  -12px; }
.snn-date-strip-arrow--right { right: -12px; }

/* Never show arrows on touch — swipe is the interaction */
@media (hover: none) {
	.snn-date-strip-arrow { display: none !important; }
}

/* ── Date strip ─────────────────────────────────────────────────────────── */
.snn-date-strip {
	display:              flex;
	gap:                  5px;
	overflow-x:           auto;
	padding:              4px 2px 14px;
	scroll-snap-type:     x mandatory;
	-webkit-overflow-scrolling: touch;
}

.snn-date-strip::-webkit-scrollbar { display: none; }
.snn-date-strip { scrollbar-width: none; }

.snn-date-pill {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	flex-shrink:     0;
	width:           54px;
	padding:         9px 4px 8px;
	border:          1.5px solid var(--rule-md);
	border-radius:   var(--r);
	background:      var(--paper);
	color:           var(--ink-2);  /* #444 — clearly readable */
	cursor:          pointer;
	scroll-snap-align: start;
	transition:      background .13s, color .13s, border-color .13s, box-shadow .13s, transform .1s;
}

.snn-date-pill:hover {
	background:   var(--surface);
	border-color: var(--ink-4);
	color:        var(--ink);
	box-shadow:   var(--sh-sm);
	transform:    translateY(-1px);
}

.snn-date-pill:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.snn-date-pill--active,
.snn-date-pill--active:hover {
	background:   var(--ink);
	color:        #fff;
	border-color: var(--ink);
	box-shadow:   var(--sh-sm);
	transform:    translateY(-1px);
}

.snn-date-pill--active:hover { background: #222; border-color: #222; }

.snn-date-pill__day {
	font-size:      .58rem;
	font-weight:    600;
	text-transform: uppercase;
	letter-spacing: .07em;
	opacity:        .65;
}

.snn-date-pill__num {
	font-size:   1.3rem;
	font-weight: 700;
	line-height: 1.1;
}

.snn-date-pill--active .snn-date-pill__day { opacity: .8; }

/* Show-count dots */
.snn-date-pill__dots {
	display:    flex;
	gap:        3px;
	margin-top: 5px;
	height:     5px;
	align-items: center;
}

.snn-date-pill__dot {
	width:         4px;
	height:        4px;
	border-radius: 50%;
	background:    currentColor;
	opacity:       .45;
}

.snn-date-pill--active .snn-date-pill__dot { opacity: .7; }

/* Container that holds the show cards */
.snn-shows-for-date {
	display:        flex;
	flex-direction: column;
	gap:            8px;
	margin-top:     28px;
	animation:      snn-in .15s ease;
}

/* Small date label above show cards — registers the day switch */
.snn-shows-date-label {
	font-size:      .68rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color:          var(--ink-4);
	padding-bottom: 2px;
}

/* ── Show card — full-width row ──────────────────────────────────────────── */
.snn-show-card {
	display:       flex;
	align-items:   center;
	gap:           20px;
	width:         100%;
	background:    var(--paper);
	border:        none;
	border-radius: var(--r);
	padding:       18px 20px;
	cursor:        pointer;
	color:         var(--ink);
	text-align:    left;
	box-shadow:    var(--sh-sm);
	border-left:   3px solid transparent;
	transition:    box-shadow .15s, border-color .15s, transform .12s;
	box-sizing:    border-box;
}

.snn-show-card:hover:not(:disabled) {
	box-shadow:   var(--sh);
	border-color: var(--ink);
	transform:    translateX(2px);
}

.snn-show-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.snn-show-card:active:not(:disabled) { transform: translateX(0); }
.snn-show-card:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }

/* Time column — fixed width, large */
.snn-show-card__time {
	flex-shrink:          0;
	width:                76px;
	font-size:            1.15rem;
	font-weight:          700;
	font-variant-numeric: tabular-nums;
	color:                var(--ink);
	line-height:          1;
}

/* Body — title + artist, grows to fill space */
.snn-show-card__body {
	flex:    1;
	min-width: 0;
}

.snn-show-card__title {
	font-size:     .95rem;
	font-weight:   600;
	color:         var(--ink);
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}

.snn-show-card__artist {
	font-size:     .8rem;
	color:         var(--ink-3);
	margin-top:    2px;
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}

/* Tail — availability + price */
.snn-show-card__tail {
	flex-shrink:    0;
	display:        flex;
	flex-direction: column;
	align-items:    flex-end;
	gap:            4px;
}

.snn-show-card__avail {
	font-size:   .72rem;
	font-weight: 600;
	color:       var(--green);
}

.snn-show-card__price {
	font-size: .72rem;
	color:     var(--ink-4);
}

/* Arrow */
.snn-show-card__arrow {
	flex-shrink: 0;
	font-size:   1rem;
	color:       var(--ink-4);
	transition:  transform .15s, color .15s;
}

.snn-show-card:hover:not(:disabled) .snn-show-card__arrow {
	transform: translateX(4px);
	color:     var(--ink-2);
}

/* ── Keeps .snn-shows-row working if used elsewhere ──────────────────────── */
.snn-shows-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Badges ─────────────────────────────────────────────────────────────── */
.snn-badge {
	display:        inline-block;
	padding:        2px 7px;
	border-radius:  100px;
	font-size:      .65rem;
	font-weight:    600;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.snn-badge--sold_out     { background: var(--red-lt);    color: var(--red); }
.snn-badge--filling_fast { background: var(--amber-lt);  color: var(--amber); }
.snn-badge--cancelled    { background: var(--surface-2); color: var(--ink-3); }

/* ── Back button ────────────────────────────────────────────────────────── */
.snn-back { margin-bottom: 20px; }

/* ── Show header ────────────────────────────────────────────────────────── */
.snn-show-header {
	margin-bottom:  20px;
	padding-bottom: 16px;
	border-bottom:  1px solid var(--rule);
}

.snn-show-meta { font-size: .88rem; color: var(--ink-3); margin: 3px 0 0; }

/* ── Legend ─────────────────────────────────────────────────────────────── */
.snn-legend {
	list-style:    none;
	margin:        0 0 14px;
	padding:       9px 14px;
	display:       flex;
	flex-wrap:     wrap;
	gap:           16px;
	font-size:     .78rem;
	color:         var(--ink-3);
	background:    var(--surface);
	border-radius: var(--r-sm);
}

.snn-legend li { display: flex; align-items: center; gap: 6px; }

.snn-legend__dot {
	width:         11px;
	height:        11px;
	border-radius: 50%;
	flex-shrink:   0;
}

.snn-legend__dot--available { background: var(--green); }
.snn-legend__dot--mine      { background: var(--slate); }
.snn-legend__dot--held      { background: var(--amber); }
.snn-legend__dot--reserved  { background: var(--red); }

/* ── Section pricing pills ──────────────────────────────────────────────── */
.snn-section-info {
	display:       flex;
	flex-wrap:     wrap;
	gap:           6px;
	margin-bottom: 14px;
}

.snn-section-pill {
	font-size:     .78rem;
	color:         var(--ink-3);
	background:    var(--surface);
	border:        1px solid var(--rule);
	border-radius: 100px;
	padding:       5px 13px;
	line-height:   1.4;
}

.snn-section-pill strong       { color: var(--ink-2); font-weight: 600; }
.snn-section-pill__note        { color: var(--ink-4); font-size: .72rem; }

/* ── Seat price tooltip ──────────────────────────────────────────────────── */
.snn-seat-tooltip {
	position:       fixed;
	background:     var(--ink);
	color:          #fff;
	font-size:      .8rem;
	font-weight:    600;
	line-height:    1.4;
	padding:        6px 11px;
	border-radius:  var(--r-sm);
	pointer-events: none;
	z-index:        9999;
	white-space:    nowrap;
	box-shadow:     var(--sh);
	visibility:     hidden;
	opacity:        0;
	transform:      translateY(3px);
	transition:     opacity .15s, transform .15s, visibility 0s .15s;
}

.snn-seat-tooltip--visible {
	visibility: visible;
	opacity:    1;
	transform:  translateY(0);
	transition: opacity .15s, transform .15s;
}

/* ── Chart wrap ─────────────────────────────────────────────────────────── */
.snn-chart-wrap {
	background:    var(--surface);
	border-radius: var(--r);
	padding:       20px 16px 16px;
	overflow-x:    auto;
	margin-bottom: 14px;
	box-shadow:    var(--sh-xs);
}

.snn-chart-svg { display: block; max-width: 100%; height: auto; }

/* ── SVG — Stage ────────────────────────────────────────────────────────── */
.snn-chart__stage rect { fill: var(--stage-bg); }

.snn-chart__stage text {
	fill:           var(--stage-fg);
	font-size:      12px;
	font-weight:    700;
	letter-spacing: .22em;
}

/* ── SVG — Section dividers ─────────────────────────────────────────────── */
.snn-chart__section-label line {
	stroke: var(--rule-md); stroke-width: 1;
}

.snn-chart__section-label text {
	fill:           var(--ink-4);
	font-size:      9px;
	font-weight:    600;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* ── SVG — Table pairing line ───────────────────────────────────────────── */
.snn-chart__table-link {
	stroke:           var(--rule-md);
	stroke-width:     1.5;
	stroke-dasharray: 3 3;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEATS — individual (sections 1 & 3)
   transform-box:fill-box scopes transform-origin to the circle itself,
   preventing the "flying circle" shift when scaling SVG elements.
═══════════════════════════════════════════════════════════════════════════ */
.snn-seat { cursor: pointer; }

.snn-seat circle {
	stroke-width:     1.5;
	transition:       fill .12s, stroke .12s, transform .12s;
	transform-box:    fill-box;
	transform-origin: center;
}

.snn-seat text {
	fill:           var(--paper);
	font-size:      8px;
	font-weight:    700;
	pointer-events: none;
	user-select:    none;
}

/* Available */
.snn-seat--available circle { fill: var(--green); stroke: #15803d; }

.snn-seat--available:hover circle,
.snn-seat--available:focus  circle {
	fill:      #15803d;
	transform: scale(1.13);
}

/* Mine / selected — slate, not blue */
.snn-seat--mine circle {
	fill:      var(--slate);
	stroke:    #1e293b;
	transform: scale(1.08);
}

/* Held by someone else */
.snn-seat--held  { cursor: not-allowed; }
.snn-seat--held circle  { fill: var(--amber); stroke: #b45309; }

/* Reserved */
.snn-seat--reserved { cursor: not-allowed; }
.snn-seat--reserved circle { fill: var(--red); stroke: #b91c1c; }

/* Race-lost flash */
@keyframes snn-flash { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.snn-flash circle, .snn-flash .snn-booth-group__rect { animation: snn-flash .55s ease; }

/* Focus ring */
.snn-seat:focus { outline: none; }
.snn-seat:focus circle { stroke: var(--ink); stroke-width: 2.5; }

/* ═══════════════════════════════════════════════════════════════════════════
   BOOTH GROUPS — section 2
   The entire group (rect + 4 seats) is the interactive unit.
   Status class is on the <g data-booth-table>, colours cascade down.
═══════════════════════════════════════════════════════════════════════════ */
.snn-booth-group {
	cursor:     pointer;
	transition: opacity .12s;
}

.snn-booth-group--pending { opacity: .55; }

/* Table surface rect */
.snn-booth-group__rect {
	transition: fill .15s, stroke .15s;
}

/* Labels on the rect */
.snn-booth-group__label {
	fill:           var(--ink-2);
	font-size:      11px;
	font-weight:    600;
	pointer-events: none;
}

.snn-booth-group__hint {
	fill:           var(--ink-4);
	font-size:      8.5px;
	pointer-events: none;
}

/* ── Available ── */
.snn-booth-group--available .snn-booth-group__rect {
	fill:         var(--surface-2);
	stroke:       var(--rule-md);
	stroke-width: 1.5;
}

.snn-booth-group--available .snn-seat circle {
	fill:   var(--green);
	stroke: #15803d;
}

.snn-booth-group--available:hover .snn-booth-group__rect {
	fill:   var(--green-lt);
	stroke: var(--green);
}

.snn-booth-group--available:hover .snn-seat circle {
	fill:      #15803d;
	transform: scale(1.1);
}

/* ── Mine (selected) — slate ── */
.snn-booth-group--mine .snn-booth-group__rect {
	fill:         var(--slate-lt);
	stroke:       var(--slate);
	stroke-width: 2;
}

.snn-booth-group--mine .snn-booth-group__label { fill: var(--slate); }
.snn-booth-group--mine .snn-booth-group__hint  { fill: var(--ink-3); }

.snn-booth-group--mine .snn-seat circle {
	fill:      var(--slate);
	stroke:    #1e293b;
	transform: scale(1.08);
}

/* ── Held by others ── */
.snn-booth-group--held { cursor: not-allowed; }

.snn-booth-group--held .snn-booth-group__rect {
	fill:         var(--amber-lt);
	stroke:       var(--amber);
	stroke-width: 1.5;
}

.snn-booth-group--held .snn-seat circle { fill: var(--amber); stroke: #b45309; }

/* ── Reserved ── */
.snn-booth-group--reserved { cursor: not-allowed; }

.snn-booth-group--reserved .snn-booth-group__rect {
	fill:         var(--red-lt);
	stroke:       var(--red);
	stroke-width: 1.5;
}

.snn-booth-group--reserved .snn-seat circle { fill: var(--red); stroke: #b91c1c; }

/* Focus ring on booth group */
.snn-booth-group:focus { outline: none; }

.snn-booth-group:focus .snn-booth-group__rect {
	stroke: var(--ink); stroke-width: 2.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACTION BAR
═══════════════════════════════════════════════════════════════════════════ */
.snn-action-bar {
	background:    var(--paper);
	border-radius: var(--r);
	padding:       16px 20px;
	display:       flex;
	flex-wrap:     wrap;
	align-items:   center;
	gap:           12px;
	margin-top:    12px;
	box-shadow:    var(--sh);
}

.snn-selection-summary {
	flex: 1;
}

.snn-selection-summary__label {
	font-size:   .82rem;
	color:       var(--ink-3);
	margin-bottom: 2px;
}

.snn-selection-summary__total {
	font-size:   1.35rem;
	font-weight: 700;
	color:       var(--ink);
	line-height: 1.1;
	letter-spacing: -.02em;
}

.snn-hold-timer {
	display:       flex;
	align-items:   center;
	align-self:    center;
	gap:           5px;
	font-size:     .8rem;
	color:         var(--ink-3);
	background:    var(--amber-lt);
	padding:       10px 14px;
	border-radius: var(--r-sm);
	white-space:   nowrap;
}

.snn-hold-timer strong {
	color:                var(--amber);
	font-weight:          700;
	font-variant-numeric: tabular-nums;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.snn-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             6px;
	border:          none;
	border-radius:   var(--r-sm);
	padding:         10px 20px;
	font-size:       .88rem;
	font-weight:     600;
	cursor:          pointer;
	transition:      box-shadow .14s, transform .1s, background .12s, opacity .12s;
	white-space:     nowrap;
	text-decoration: none;
}

.snn-btn--primary {
	background: var(--ink);
	color:      #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,.18);
}

.snn-btn--primary:hover:not(:disabled) {
	background: #222222;
	box-shadow: 0 4px 12px rgba(0,0,0,.22);
	transform:  translateY(-1px);
}

.snn-btn--primary:active:not(:disabled) { transform: translateY(0); }

.snn-btn--primary:disabled {
	background: var(--surface-2);
	color:      var(--ink-4);
	box-shadow: none;
	cursor:     not-allowed;
}

.snn-btn--ghost {
	background: var(--paper);
	color:      var(--ink-3);
	box-shadow: var(--sh-xs);
	padding:    7px 14px;
	font-size:  .82rem;
}

.snn-btn--ghost:hover {
	box-shadow: var(--sh-sm);
	color:      var(--ink-2);
}

/* ── Notices ────────────────────────────────────────────────────────────── */
.snn-notice {
	width:         100%;
	border-radius: var(--r-xs);
	padding:       10px 14px;
	font-size:     .84rem;
}

.snn-notice--info {
	background: var(--surface);
	color:      var(--ink-2);
}

.snn-notice--error {
	background: var(--red-lt);
	color:      #991b1b;
}

.snn-empty { font-size: .9rem; color: var(--ink-3); padding: 32px 0; }

/* ── Confirmation ───────────────────────────────────────────────────────── */
.snn-confirmation {
	text-align: center;
	padding:    48px 20px;
}

.snn-confirmation__icon  { font-size: 2.8rem; line-height: 1; margin-bottom: 14px; }

.snn-confirmation__title {
	font-size:      1.4rem;
	font-weight:    700;
	letter-spacing: -.022em;
	color:          var(--ink);
	margin:         0 0 6px;
}

.snn-confirmation__sub   { color: var(--ink-3); font-size: .9rem; margin: 0 0 24px; }

.snn-confirmation__details {
	display:       inline-block;
	text-align:    left;
	background:    var(--surface);
	border-radius: var(--r);
	padding:       18px 24px;
	font-size:     .88rem;
	margin-bottom: 28px;
	min-width:     260px;
	box-shadow:    var(--sh-xs);
}

.snn-confirmation__details dt {
	font-size:      .7rem;
	font-weight:    600;
	text-transform: uppercase;
	letter-spacing: .08em;
	color:          var(--ink-3);
	margin-top:     12px;
}

.snn-confirmation__details dt:first-child { margin-top: 0; }

.snn-confirmation__details dd {
	margin:      2px 0 0;
	font-weight: 600;
	color:       var(--ink);
}

/* ── Guest details form ─────────────────────────────────────────────────── */
.snn-guest-fields {
	display:        flex;
	flex-direction: column;
	gap:            20px;
	margin-bottom:  24px;
}

/* Section grouping (e.g. "Dining", "Bar", "Booth Table 1") */
.snn-guest-section {
	display:        flex;
	flex-direction: column;
	gap:            12px;
}

.snn-guest-section__heading {
	font-size:      .68rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color:          var(--ink-3);
	margin:         0;
	padding-bottom: 8px;
	border-bottom:  1px solid var(--rule);
}

/* One card per seat */
.snn-guest-card {
	background:    var(--paper);
	border:        1px solid var(--rule-md);
	border-radius: var(--r);
	padding:       18px 20px 20px;
	box-shadow:    var(--sh-xs);
}

.snn-guest-card__seat-label {
	font-size:      .72rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color:          var(--ink-3);
	margin-bottom:  14px;
	padding-bottom: 10px;
	border-bottom:  1px solid var(--rule);
}

/* 2-column field grid: first name | last name, then full-width for dob + email */
.snn-guest-card__fields {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   14px;
}

.snn-guest-card__field--full {
	grid-column: 1 / -1;
}

.snn-guest-card__label {
	display:       block;
	font-size:     .72rem;
	font-weight:   600;
	color:         var(--ink-3);
	margin-bottom: 6px;
}

.snn-required { color: var(--red); }

.snn-guest-card__input {
	display:       block;
	width:         100%;
	padding:       9px 13px;
	border:        1.5px solid var(--rule-md);
	border-radius: var(--r-sm);
	background:    var(--surface);
	color:         var(--ink);
	font-size:     .93rem;
	font-family:   inherit;
	line-height:   1.5;
	outline:       none;
	box-sizing:    border-box;
	transition:    border-color .14s, background .14s, box-shadow .14s;
	-webkit-appearance: none;
}

.snn-guest-card__input:hover {
	border-color: var(--ink-4);
	background:   var(--paper);
}

.snn-guest-card__input:focus {
	border-color: var(--ink);
	background:   var(--paper);
	box-shadow:   0 0 0 3px rgba(17,17,17,.08);
}

.snn-guest-card__input.snn-input--error {
	border-color: var(--red);
	box-shadow:   0 0 0 3px rgba(220,38,38,.09);
}

.snn-guest-footer {
	display:        flex;
	flex-direction: column;
	gap:            12px;
}

.snn-guest-actions {
	display:     flex;
	justify-content: flex-end;
}

/* ── Custom confirm modal ───────────────────────────────────────────────── */
.snn-modal-backdrop {
	position:        fixed;
	inset:           0;
	background:      rgba(0,0,0,.45);
	display:         flex;
	align-items:     center;
	justify-content: center;
	z-index:         99999;
	padding:         20px;
	opacity:         0;
	transition:      opacity .18s ease;
}

.snn-modal-backdrop--in { opacity: 1; }

.snn-modal {
	background:    var(--paper);
	border-radius: var(--r);
	box-shadow:    var(--sh-lg);
	padding:       28px 28px 24px;
	max-width:     380px;
	width:         100%;
	transform:     translateY(8px);
	transition:    transform .18s ease;
}

.snn-modal-backdrop--in .snn-modal { transform: translateY(0); }

.snn-modal__message {
	font-size:     .95rem;
	color:         var(--ink);
	margin:        0 0 22px;
	line-height:   1.5;
}

.snn-modal__actions {
	display:         flex;
	justify-content: flex-end;
	gap:             10px;
}

.snn-btn--danger {
	background: var(--red);
	color:      #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,.18);
}

.snn-btn--danger:hover {
	background: #b91c1c;
	box-shadow: 0 4px 12px rgba(0,0,0,.22);
	transform:  translateY(-1px);
}

.snn-btn--danger:active { transform: translateY(0); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
	.snn-action-bar   { flex-direction: column; align-items: stretch; }
	.snn-btn--primary { width: 100%; }
	.snn-legend       { gap: 10px; }
	.snn-show-card    { min-width: 108px; }
	.snn-guest-card__fields { grid-template-columns: 1fr; }
	.snn-guest-card__field--full { grid-column: 1; }
	.snn-guest-actions { align-items: stretch; }
}