@session-services/web-elements 0.1.3

package/dist/collection/components/session-services-ticketing/session-services-ticketing.css

@@ -0,0 +1,879 @@
+:host {
+  /**
+   * @prop --radius: Global corner radius used across cards, buttons, and controls.
+   * @prop --background: Host/page background behind the component.
+   * @prop --foreground: Primary text color.
+   * @prop --card: Surface color for cards and panels.
+   * @prop --card-foreground: Text color on card surfaces.
+   * @prop --popover: Overlay surface color (reserved).
+   * @prop --popover-foreground: Text color on overlays (reserved).
+   * @prop --primary: Primary action color (e.g., Checkout).
+   * @prop --primary-foreground: Text color on primary background.
+   * @prop --secondary: Secondary surface (e.g., quantity group, disabled buttons).
+   * @prop --secondary-foreground: Text color on secondary surfaces.
+   * @prop --muted: Muted/neutral surface color.
+   * @prop --muted-foreground: Muted/secondary text color.
+   * @prop --accent: Accent/hover color for interactive controls.
+   * @prop --accent-foreground: Text color on accent background.
+   * @prop --destructive: Destructive state color (errors).
+   * @prop --border: Border color for cards/controls.
+   * @prop --input: Input border color (reserved).
+   * @prop --ring: Focus ring color.
+   * @prop --spacing-xs: Spacing scale (xs).
+   * @prop --spacing-sm: Spacing scale (sm).
+   * @prop --spacing-md: Spacing scale (md).
+   * @prop --spacing-lg: Spacing scale (lg).
+   * @prop --spacing-xl: Spacing scale (xl).
+   * @prop --font-family: Base UI font family.
+   * @prop --font-size-xs: Font size xs.
+   * @prop --font-size-sm: Font size sm.
+   * @prop --font-size-base: Font size base.
+   * @prop --font-size-lg: Font size lg.
+   * @prop --font-size-xl: Font size xl.
+   * @prop --font-size-2xl: Font size 2xl.
+   * @prop --font-weight-normal: Font weight normal.
+   * @prop --font-weight-medium: Font weight medium.
+   * @prop --font-weight-semibold: Font weight semi-bold.
+   * @prop --font-weight-bold: Font weight bold.
+   * @prop --shadow-sm: Small shadow.
+   * @prop --shadow-base: Base shadow.
+   * @prop --shadow-md: Medium shadow.
+   * @prop --shadow-lg: Large shadow.
+   * @prop --shadow-xl: Extra large shadow.
+   * @prop --transition-fast: Fast transition.
+   * @prop --transition-base: Base transition.
+   * @prop --transition-slow: Slow transition.
+   */
+  --background: transparent;
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(1 0 0);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+
+  /* Additional colors for component */
+  --success: oklch(0.66 0.154 149.48);
+  --warning: oklch(0.72 0.153 66.34);
+
+  /* Radius */
+  --radius: 0.625rem;
+
+  /* Layout spacing - matching Tailwind conventions */
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+
+  /* Typography - matching Tailwind font scale */
+  --font-family:
+    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* Shadows - Default theme */
+  --shadow-sm:
+    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow-base:
+    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow-md:
+    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
+  --shadow-lg:
+    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
+  --shadow-xl:
+    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
+
+  /* Transitions */
+  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Internal tokens with external override fallbacks */
+  --internal-background: var(--background, transparent);
+  --internal-foreground: var(--foreground, oklch(0.145 0 0));
+  --internal-card: var(--card, oklch(1 0 0));
+  --internal-card-foreground: var(--card-foreground, oklch(0.145 0 0));
+  --internal-popover: var(--popover, oklch(1 0 0));
+  --internal-popover-foreground: var(--popover-foreground, oklch(0.145 0 0));
+  --internal-primary: var(--primary, oklch(0.205 0 0));
+  --internal-primary-foreground: var(--primary-foreground, oklch(0.985 0 0));
+  --internal-secondary: var(--secondary, oklch(0.97 0 0));
+  --internal-secondary-foreground: var(--secondary-foreground, oklch(0.205 0 0));
+  --internal-muted: var(--muted, oklch(0.97 0 0));
+  --internal-muted-foreground: var(--muted-foreground, oklch(0.556 0 0));
+  --internal-accent: var(--accent, oklch(0.97 0 0));
+  --internal-accent-foreground: var(--accent-foreground, oklch(0.205 0 0));
+  --internal-destructive: var(--destructive, oklch(0.577 0.245 27.325));
+  --internal-destructive-foreground: var(--destructive-foreground, oklch(1 0 0));
+  --internal-border: var(--border, oklch(0.922 0 0));
+  --internal-input: var(--input, oklch(0.922 0 0));
+  --internal-ring: var(--ring, oklch(0.708 0 0));
+
+  --internal-success: var(--success, oklch(0.66 0.154 149.48));
+  --internal-warning: var(--warning, oklch(0.72 0.153 66.34));
+
+  --internal-radius: var(--radius, 0.625rem);
+
+  --internal-spacing-xs: var(--spacing-xs, 0.25rem);
+  --internal-spacing-sm: var(--spacing-sm, 0.5rem);
+  --internal-spacing-md: var(--spacing-md, 1rem);
+  --internal-spacing-lg: var(--spacing-lg, 1.5rem);
+  --internal-spacing-xl: var(--spacing-xl, 2rem);
+
+  --internal-font-family:
+    var(--font-family, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif);
+  --internal-font-size-xs: var(--font-size-xs, 0.75rem);
+  --internal-font-size-sm: var(--font-size-sm, 0.875rem);
+  --internal-font-size-base: var(--font-size-base, 1rem);
+  --internal-font-size-lg: var(--font-size-lg, 1.125rem);
+  --internal-font-size-xl: var(--font-size-xl, 1.25rem);
+  --internal-font-size-2xl: var(--font-size-2xl, 1.5rem);
+  --internal-font-weight-normal: var(--font-weight-normal, 400);
+  --internal-font-weight-medium: var(--font-weight-medium, 500);
+  --internal-font-weight-semibold: var(--font-weight-semibold, 600);
+  --internal-font-weight-bold: var(--font-weight-bold, 700);
+
+  --internal-shadow-sm:
+    var(--shadow-sm, 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1));
+  --internal-shadow-base:
+    var(--shadow-base, 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1));
+  --internal-shadow-md:
+    var(--shadow-md, 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1));
+  --internal-shadow-lg:
+    var(--shadow-lg, 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1));
+  --internal-shadow-xl:
+    var(--shadow-xl, 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1));
+
+  --internal-transition-fast: var(--transition-fast, 150ms cubic-bezier(0.4, 0, 0.2, 1));
+  --internal-transition-base: var(--transition-base, 200ms cubic-bezier(0.4, 0, 0.2, 1));
+  --internal-transition-slow: var(--transition-slow, 300ms cubic-bezier(0.4, 0, 0.2, 1));
+
+  display: block;
+  font-family: var(--internal-font-family);
+  color: var(--internal-foreground);
+  background: var(--internal-background);
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* Remove default focus outline and add focus-visible styles */
+*:focus {
+  outline: none;
+}
+
+*:focus-visible {
+  outline: 2px solid var(--internal-ring);
+  outline-offset: 2px;
+  border-radius: calc(var(--internal-radius) - 4px);
+}
+
+.session-services-ticketing-container {
+  width: 100%;
+  max-width: 100%;
+  margin: 0;
+}
+
+:host([data-theme="dark"]) {
+  /* Dark theme inputs (overridable externally) */
+  --background: transparent;
+  --foreground: oklch(0.96 0 0);
+  --card: oklch(0.17 0 0);
+  --card-foreground: oklch(0.96 0 0);
+  --popover: oklch(0.17 0 0);
+  --popover-foreground: oklch(0.96 0 0);
+  --primary: oklch(0.78 0 0);
+  --primary-foreground: oklch(0.14 0 0);
+  --secondary: oklch(0.22 0 0);
+  --secondary-foreground: oklch(0.96 0 0);
+  --muted: oklch(0.22 0 0);
+  --muted-foreground: oklch(0.78 0 0);
+  --accent: oklch(0.22 0 0);
+  --accent-foreground: oklch(0.96 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(1 0 0);
+  --border: oklch(0.29 0 0);
+  --input: oklch(0.29 0 0);
+  --ring: oklch(0.60 0 0);
+}
+
+/* Tickets Section */
+.tickets-wrapper {
+  padding: 0;
+  width: 100%;
+}
+
+.unsectioned-admissions {
+  width: 100%;
+}
+
+.unsectioned-admissions .ticket-section {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  margin: 0 0 var(--spacing-lg) 0;
+  overflow: hidden;
+  width: 100%;
+  box-shadow: var(--shadow-sm);
+  transition: box-shadow var(--transition-base);
+}
+
+.unsectioned-admissions .ticket-section:hover {
+  box-shadow: var(--shadow-sm);
+}
+
+/* Make unsectioned admission cards have rounded corners */
+.unsectioned-admissions .admission-card {
+  border-radius: var(--radius);
+  border: none;
+}
+
+.unsectioned-admissions .admission-card:first-child {
+  border-top-left-radius: var(--radius);
+  border-top-right-radius: var(--radius);
+}
+
+.unsectioned-admissions .admission-card:last-child {
+  border-bottom-left-radius: var(--radius);
+  border-bottom-right-radius: var(--radius);
+}
+
+.ticket-section {
+  background: var(--internal-card);
+  border: 1px solid var(--internal-border);
+  border-radius: var(--internal-radius);
+  margin: 0 0 var(--internal-spacing-lg) 0;
+  overflow: hidden;
+  width: 100%;
+  box-shadow: var(--internal-shadow-sm);
+  transition: all var(--internal-transition-base);
+}
+
+.ticket-section:focus-within {
+  box-shadow: var(--internal-shadow-md);
+}
+
+.ticket-section:hover:not(.section-sold-out) {
+  box-shadow: var(--internal-shadow-md);
+}
+
+.ticket-section.section-sold-out {
+  opacity: 1;
+  background: var(--card);
+  box-shadow: none;
+  position: relative;
+  border-color: var(--border);
+  overflow: hidden;
+}
+
+.ticket-section.section-sold-out .section-header {
+  background: transparent;
+  padding-bottom: var(--spacing-md);
+}
+
+.ticket-section.section-sold-out .section-name,
+.ticket-section.section-sold-out .section-time,
+.ticket-section.section-sold-out .section-venue {
+  opacity: 0.8;
+}
+
+.ticket-section.section-sold-out .admissions-list {
+  opacity: 0.6;
+  pointer-events: none;
+  filter: grayscale(0.3);
+}
+
+.ticket-section.section-sold-out .admission-card {
+  background: var(--card);
+}
+
+.ticket-section.section-sold-out .quantity-controls,
+.ticket-section.section-sold-out .sold-out-controls {
+  opacity: 0.7;
+}
+
+.section-header {
+  padding: var(--internal-spacing-md) var(--internal-spacing-lg);
+  border-bottom: 1px solid var(--internal-border);
+  background: var(--internal-card);
+}
+
+.section-name {
+  color: var(--internal-foreground);
+  font-size: var(--internal-font-size-lg);
+  font-weight: var(--internal-font-weight-semibold);
+  letter-spacing: -0.025em;
+  margin: 0 0 var(--internal-spacing-xs) 0;
+  display: flex;
+  align-items: center;
+  gap: var(--internal-spacing-sm);
+}
+
+.section-time {
+  color: var(--internal-muted-foreground);
+  font-size: var(--internal-font-size-sm);
+  margin-bottom: var(--internal-spacing-xs);
+  display: flex;
+  align-items: center;
+  gap: var(--internal-spacing-xs);
+}
+
+.section-time svg {
+  width: calc(var(--spacing-sm) + var(--spacing-xs));
+  height: calc(var(--spacing-sm) + var(--spacing-xs));
+  flex-shrink: 0;
+  opacity: 0.8;
+}
+
+.section-venue {
+  color: var(--muted-foreground);
+  font-size: var(--font-size-sm);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.section-venue svg {
+  width: calc(var(--spacing-sm) + var(--spacing-xs));
+  height: calc(var(--spacing-sm) + var(--spacing-xs));
+  flex-shrink: 0;
+  opacity: 0.8;
+}
+
+/* Admission Cards */
+.admissions-list {
+  padding: 0;
+}
+
+.admission-card {
+  border-bottom: 1px solid var(--internal-border);
+  padding: var(--internal-spacing-md) var(--internal-spacing-lg);
+  position: relative;
+  transition: background-color var(--internal-transition-base);
+  cursor: default;
+}
+
+.admission-card:focus-visible {
+  outline: 2px solid var(--internal-ring);
+  outline-offset: -2px;
+  z-index: 1;
+}
+
+.admission-card:hover:not(.sold-out) {
+  background: oklch(from var(--internal-card) calc(l - 0.02) c h);
+}
+
+.admission-card.sold-out {
+  opacity: 1;
+  background: var(--card);
+  position: relative;
+}
+
+.admission-card.sold-out .admission-price,
+.admission-card.sold-out .admission-fee {
+  opacity: 0.5;
+}
+
+.admission-card:last-child {
+  border-bottom: none;
+}
+
+.admission-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.admission-details {
+  flex: 1;
+}
+
+.admission-title {
+  color: var(--internal-foreground);
+  font-size: var(--internal-font-size-lg); /* match Order summary */
+  font-weight: var(--internal-font-weight-semibold);
+  margin-bottom: var(--internal-spacing-sm);
+  display: flex;
+  align-items: center;
+  gap: var(--internal-spacing-sm);
+}
+
+.admission-time {
+  color: var(--muted-foreground);
+  font-size: var(--font-size-sm);
+  margin-bottom: var(--spacing-xs);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.admission-time svg {
+  width: calc(var(--spacing-sm) + var(--spacing-xs));
+  height: calc(var(--spacing-sm) + var(--spacing-xs));
+  flex-shrink: 0;
+  opacity: 0.8;
+}
+
+.admission-venue {
+  color: var(--muted-foreground);
+  font-size: var(--font-size-sm);
+  margin-bottom: var(--spacing-sm);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.admission-venue svg {
+  width: calc(var(--spacing-sm) + var(--spacing-xs));
+  height: calc(var(--spacing-sm) + var(--spacing-xs));
+  flex-shrink: 0;
+  opacity: 0.8;
+}
+
+/* Solo admission layout adjustments */
+.solo-admission .admission-content {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.solo-admission .admission-details {
+  width: 100%;
+}
+
+.solo-admission .admission-price-info {
+  margin-top: var(--spacing-md);
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  width: 100%;
+}
+
+.solo-admission .quantity-controls {
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+.sold-out-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  background: transparent;
+  color: var(--muted-foreground);
+  border: none;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-left: auto;
+  opacity: 0.7;
+}
+
+.admission-price-info {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
+  margin-bottom: var(--spacing-sm);
+  width: 100%;
+}
+
+.admission-price-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.admission-price {
+  color: var(--internal-primary);
+  font-size: var(--internal-font-size-xl);
+  font-weight: var(--internal-font-weight-bold);
+  letter-spacing: -0.025em;
+  line-height: 1.1;
+}
+
+.admission-fee {
+  color: var(--muted-foreground);
+  font-size: var(--font-size-xs);
+  background: transparent;
+  padding: 0;
+  border-radius: 0;
+  font-weight: var(--font-weight-normal);
+  display: block;
+  margin-top: 0.125rem; /* slight separation from price */
+  line-height: 1.12; /* tiny increase for readability */
+}
+
+.admission-savings {
+  color: var(--success);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+.admission-availability {
+  color: var(--warning);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  background: oklch(from var(--warning) l c h / 0.1);
+  padding: calc(var(--spacing-xs) / 2) calc(var(--spacing-xs) * 2);
+  border-radius: calc(var(--radius) - 4px);
+  display: inline-block;
+  margin-top: var(--spacing-xs);
+}
+
+/* Quantity Controls - Modern, minimal design */
+.quantity-controls {
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  background: var(--internal-secondary);
+  border: 1px solid var(--internal-border);
+  border-radius: calc(var(--internal-radius) - 2px);
+  overflow: hidden;
+  box-shadow: none;
+  transition: all var(--internal-transition-fast);
+}
+
+.quantity-btn {
+  width: calc(var(--internal-spacing-lg) * 1.5);
+  height: calc(var(--internal-spacing-lg) * 1.5);
+  border: none;
+  background: transparent;
+  color: var(--internal-muted-foreground);
+  font-size: var(--internal-font-size-base);
+  font-weight: var(--internal-font-weight-medium);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--internal-transition-fast);
+  position: relative;
+}
+
+.quantity-btn:focus-visible {
+  outline: 2px solid var(--internal-ring);
+  outline-offset: -2px;
+  z-index: 1;
+}
+
+.quantity-btn:hover:not(:disabled) {
+  background: var(--internal-accent);
+  color: var(--internal-accent-foreground);
+}
+
+.quantity-btn:active:not(:disabled) {
+  transform: scale(0.95);
+}
+
+.quantity-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background: var(--internal-secondary);
+  color: var(--internal-muted-foreground);
+  border-color: var(--internal-border);
+  box-shadow: none;
+}
+
+.quantity-btn.decrease {
+  border-right: 1px solid var(--internal-border);
+}
+
+.quantity-btn.increase {
+  border-left: 1px solid var(--internal-border);
+}
+
+.quantity-value {
+  min-width: 2.5rem;
+  text-align: center;
+  font-size: var(--internal-font-size-sm);
+  font-weight: var(--internal-font-weight-semibold);
+  color: var(--internal-foreground);
+  padding: 0 var(--internal-spacing-xs);
+}
+
+/* Sold Out Controls */
+.sold-out-controls {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: calc(var(--spacing-lg) * 1.5 * 2 + 2.5rem);
+  height: calc(var(--spacing-lg) * 1.5);
+  padding: 0 var(--spacing-md);
+  background: var(--muted);
+  color: var(--muted-foreground);
+  border: 1px solid var(--border);
+  border-radius: calc(var(--radius) - 2px);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: 0.025em;
+  text-transform: uppercase;
+}
+
+.sold-out-text {
+  color: var(--muted-foreground);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: 0.025em;
+  text-transform: uppercase;
+}
+
+/* Order Summary */
+.order-summary {
+  background: var(--internal-card);
+  border: 1px solid var(--internal-border);
+  border-radius: var(--internal-radius);
+  padding: var(--internal-spacing-lg);
+  margin: var(--internal-spacing-lg) 0 0 0;
+  box-shadow: var(--internal-shadow-lg);
+  width: 100%;
+}
+
+.summary-title {
+  font-size: var(--internal-font-size-lg);
+  font-weight: var(--internal-font-weight-semibold);
+  margin-bottom: var(--internal-spacing-md);
+  color: var(--internal-foreground);
+  letter-spacing: -0.025em;
+}
+
+.order-item {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: var(--internal-spacing-sm);
+  font-size: var(--internal-font-size-base);
+  color: var(--internal-foreground);
+}
+
+.order-item-with-section {
+  margin-bottom: var(--internal-spacing-sm);
+}
+
+.item-section-line {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  font-size: var(--internal-font-size-base);
+  color: var(--internal-foreground);
+}
+
+.item-section-name {
+  flex: 1;
+  font-weight: var(--font-weight-medium);
+}
+
+.item-admission-name {
+  font-size: var(--internal-font-size-sm);
+  color: var(--internal-muted-foreground);
+  margin-top: var(--internal-spacing-xs);
+  padding-left: var(--internal-spacing-md);
+  font-weight: var(--internal-font-weight-normal);
+}
+
+.item-description {
+  flex: 1;
+  font-weight: var(--internal-font-weight-medium);
+}
+
+.item-price {
+  font-weight: var(--internal-font-weight-bold);
+  white-space: nowrap;
+}
+
+.empty-cart-message {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: var(--internal-spacing-sm);
+  color: var(--internal-muted-foreground);
+  font-size: var(--internal-font-size-base);
+  font-style: normal;
+}
+
+.empty-cart-text {
+  flex: 1;
+}
+
+.empty-cart-price {
+  font-weight: var(--font-weight-medium);
+}
+
+.order-fees {
+  padding: var(--internal-spacing-sm) 0;
+  border-top: 1px solid var(--internal-border);
+  border-bottom: 1px solid var(--internal-border);
+  margin-bottom: var(--internal-spacing-sm);
+}
+
+.fee-row {
+  display: flex;
+  justify-content: space-between;
+  font-size: var(--internal-font-size-base);
+  color: var(--internal-foreground);
+  font-weight: var(--internal-font-weight-medium);
+}
+
+.order-total {
+  display: flex;
+  justify-content: space-between;
+  font-size: var(--internal-font-size-base);
+  font-weight: var(--internal-font-weight-bold);
+  color: var(--internal-foreground);
+  margin-bottom: var(--internal-spacing-md);
+}
+
+.checkout-btn {
+  width: 100%;
+  padding: calc(var(--spacing-sm) + var(--spacing-xs)) var(--spacing-lg);
+  background: var(--primary);
+  color: var(--primary-foreground);
+  border: none;
+  border-radius: calc(var(--radius) - 2px);
+  font-size: var(--internal-font-size-base);
+  font-weight: var(--internal-font-weight-bold);
+  cursor: pointer;
+  transition: all var(--internal-transition-fast);
+  box-shadow: var(--internal-shadow-sm);
+  position: relative;
+  overflow: hidden;
+}
+
+.checkout-btn:focus-visible {
+  outline: 2px solid var(--internal-ring);
+  outline-offset: 2px;
+}
+
+.checkout-btn:hover:not(:disabled) {
+  background: oklch(from var(--primary) calc(l - 0.08) c h);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-1px);
+}
+
+.checkout-btn:active:not(:disabled) {
+  transform: translateY(0);
+  box-shadow: var(--shadow-sm);
+}
+
+.checkout-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background: var(--internal-secondary);
+  color: var(--internal-muted-foreground);
+  box-shadow: none;
+  border: 1px solid var(--internal-border);
+}
+
+/* Loading & Error States */
+.loading-state,
+.error-state {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--spacing-xl);
+  text-align: center;
+  min-height: 200px;
+}
+
+.error-state {
+  color: var(--primary);
+}
+
+.error-banner {
+  background: oklch(
+    from var(--destructive) calc(l + 0.4) calc(c * 0.2) h / 0.05
+  );
+  border: 1px solid oklch(from var(--destructive) l c h / 0.2);
+  border-radius: var(--radius);
+  padding: var(--spacing-lg);
+  margin: var(--spacing-lg);
+  text-align: center;
+}
+
+.error-banner strong {
+  display: block;
+  color: var(--destructive);
+  font-size: var(--font-size-lg);
+  margin-bottom: var(--spacing-sm);
+}
+
+.error-banner p {
+  color: var(--muted-foreground);
+  margin-bottom: var(--spacing-md);
+}
+
+.retry-button {
+  background: var(--primary);
+  color: var(--primary-foreground);
+  border: none;
+  padding: calc(var(--spacing-sm) + var(--spacing-xs)) var(--spacing-lg);
+  border-radius: calc(var(--radius) - 2px);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  box-shadow: var(--shadow-sm);
+}
+
+.retry-button:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+
+.retry-button:hover {
+  background: oklch(from var(--primary) calc(l - 0.08) c h);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-1px);
+}
+
+.retry-button:active {
+  transform: translateY(0);
+  box-shadow: var(--shadow-sm);
+}
+
+.error-message {
+  background: oklch(
+    from var(--destructive) calc(l + 0.4) calc(c * 0.2) h / 0.05
+  );
+  border: 1px solid oklch(from var(--destructive) l c h / 0.2);
+  color: var(--destructive);
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-radius: var(--radius);
+  margin-bottom: var(--spacing-md);
+  font-size: var(--font-size-sm);
+}
+
+/* Responsive adjustments for larger screens */
+@media (min-width: 768px) {
+  .ticket-section {
+    border-radius: var(--radius);
+    margin: 0 0 var(--spacing-md) 0;
+  }
+
+  .order-summary {
+    border-radius: var(--radius);
+    margin: var(--spacing-md) 0;
+  }
+}