@session-services/web-elements 0.1.20 → 0.1.22

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

@@ -41,33 +41,35 @@
    * @prop --shadow-md: Medium shadow.
    * @prop --shadow-lg: Large shadow.
    * @prop --shadow-xl: Extra large shadow.
+   * @prop --shadow-edge-light: Subtle lower edge shadow.
+   * @prop --shadow-edge-dark: Subtle upper edge shadow.
    * @prop --transition-fast: Fast transition.
    * @prop --transition-base: Base transition.
    * @prop --transition-slow: Slow transition.
    */
   --background: transparent;
-  --foreground: oklch(0.145 0 0);
+  --foreground: oklch(0.21 0.006 285.885);
   --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
+  --card-foreground: oklch(0.21 0.006 285.885);
   --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.21 0.006 285.885);
+  --primary: oklch(0.537 0.1554 255);
   --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);
+  --secondary: oklch(0 0 0 / 4%);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0 0 0 / 4%);
+  --muted-foreground: oklch(0.442 0.017 285.786);
+  --accent: oklch(0 0 0 / 4%);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.637 0.237 25.331);
+  --destructive-foreground: oklch(0.505 0.213 27.518);
+  --border: oklch(0 0 0 / 12%);
+  --input: oklch(0 0 0 / 12%);
+  --ring: oklch(0.705 0.015 286.067);
 
   /* Additional colors for component */
-  --success: oklch(0.66 0.154 149.48);
-  --warning: oklch(0.72 0.153 66.34);
+  --success: oklch(0.696 0.17 162.48);
+  --warning: oklch(0.769 0.188 70.08);
   --info: oklch(0.623 0.214 259.815);
   --info-foreground: oklch(0.488 0.243 264.376);
   --backdrop: oklch(0 0 0 / 0.32);
@@ -108,6 +110,8 @@
     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);
+  --shadow-edge-light: 0 1px oklch(0 0 0 / 4%);
+  --shadow-edge-dark: 0 -1px oklch(1 0 0 / 8%);
 
   /* Transitions */
   --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -116,27 +120,24 @@
 
   /* Internal tokens with external override fallbacks */
   --internal-background: var(--background, transparent);
-  --internal-foreground: var(--foreground, oklch(0.145 0 0));
+  --internal-foreground: var(--foreground, oklch(0.21 0.006 285.885));
   --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-popover-foreground: var(--popover-foreground, oklch(0.21 0.006 285.885));
+  --internal-primary: var(--primary, oklch(0.537 0.1554 255));
   --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-secondary: var(--secondary, oklch(0 0 0 / 4%));
+  --internal-muted: var(--muted, oklch(0 0 0 / 4%));
+  --internal-muted-foreground: var(--muted-foreground, oklch(0.442 0.017 285.786));
+  --internal-accent: var(--accent, oklch(0 0 0 / 4%));
+  --internal-accent-foreground: var(--accent-foreground, oklch(0.21 0.006 285.885));
+  --internal-destructive: var(--destructive, oklch(0.637 0.237 25.331));
+  --internal-border: var(--border, oklch(0 0 0 / 12%));
+  --internal-input: var(--input, oklch(0 0 0 / 12%));
+  --internal-ring: var(--ring, oklch(0.705 0.015 286.067));
+
+  --internal-success: var(--success, oklch(0.696 0.17 162.48));
+  --internal-warning: var(--warning, oklch(0.769 0.188 70.08));
   --internal-info: var(--info, oklch(0.623 0.214 259.815));
   --internal-info-foreground: var(--info-foreground, oklch(0.488 0.243 264.376));
   --internal-backdrop: var(--backdrop, oklch(0 0 0 / 0.32));
@@ -156,22 +157,16 @@
   --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-shadow-edge-light:
+    var(--shadow-edge-light, 0 1px oklch(0 0 0 / 4%));
 
   --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));
@@ -189,7 +184,13 @@
   padding: 0;
 }
 
-/* Remove default focus outline and add focus-visible styles */
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
 *:focus {
   outline: none;
 }
@@ -209,24 +210,30 @@
 :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);
+  --foreground: oklch(0.967 0.001 286.375);
+  --card: color-mix(
+    in srgb,
+    oklch(0.21 0.006 285.885) 80%,
+    oklch(0.141 0.005 285.823)
+  );
+  --card-foreground: oklch(0.967 0.001 286.375);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.967 0.001 286.375);
+  --primary: oklch(0.537 0.1554 255);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(1 0 0 / 6%);
+  --secondary-foreground: oklch(0.967 0.001 286.375);
+  --muted: oklch(1 0 0 / 6%);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(1 0 0 / 6%);
+  --accent-foreground: oklch(0.967 0.001 286.375);
+  --destructive: oklch(0.637 0.237 25.331);
+  --destructive-foreground: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 12%);
+  --input: oklch(1 0 0 / 12%);
+  --ring: oklch(0.552 0.016 285.938);
+  --success: oklch(0.696 0.17 162.48);
+  --warning: oklch(0.769 0.188 70.08);
   --info: oklch(0.623 0.214 259.815);
   --info-foreground: oklch(0.707 0.165 254.624);
 }
@@ -237,77 +244,126 @@
   width: 100%;
 }
 
-.unsectioned-admissions {
-  width: 100%;
+.tickets-heading {
+  color: var(--internal-foreground);
+  font-size: var(--internal-font-size-lg);
+  font-weight: var(--internal-font-weight-semibold);
+  margin: 0 0 var(--internal-spacing-md);
 }
 
-.unsectioned-admissions .ticket-section {
-  background: var(--card);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  margin: 0 0 var(--spacing-md) 0;
-  overflow: hidden;
-  width: 100%;
-  box-shadow: var(--shadow-sm);
-  transition: box-shadow var(--transition-base);
+.door-alert,
+.empty-ticketing-state,
+.passcode-form,
+.passcode-form input,
+.ticket-section,
+.more-info-badge,
+.quantity-controls,
+.sold-out-controls,
+.coupon-row,
+.coupon-apply,
+.coupon-remove {
+  border: 1px solid var(--internal-input);
+  box-shadow: var(--internal-shadow-edge-light);
 }
 
-.unsectioned-admissions .ticket-section:hover {
-  box-shadow: var(--shadow-sm);
+.external-ticket-button,
+.checkout-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--internal-primary);
+  color: var(--internal-primary-foreground);
+  border: 1px solid oklch(from var(--internal-primary) calc(l - 0.08) c h);
+  border-radius: calc(var(--internal-radius) - 2px);
+  cursor: pointer;
+  box-shadow: var(--internal-shadow-edge-light);
+  transition: all var(--internal-transition-fast);
 }
 
-/* Make unsectioned admission cards have rounded corners */
-.unsectioned-admissions .admission-card {
-  border-radius: var(--radius);
-  border: none;
+.external-ticket-button:hover,
+.checkout-btn:hover:not(:disabled) {
+  background: oklch(from var(--internal-primary) calc(l - 0.08) c h);
+  transform: translateY(-1px);
 }
 
-.unsectioned-admissions .admission-card:first-child {
-  border-top-left-radius: var(--radius);
-  border-top-right-radius: var(--radius);
+.door-alert,
+.empty-ticketing-state,
+.passcode-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--internal-spacing-sm);
+  padding: var(--internal-spacing-lg);
+  margin-bottom: var(--internal-spacing-md);
+  background: var(--internal-card);
+  border-radius: var(--internal-radius);
 }
 
-.unsectioned-admissions .admission-card:last-child {
-  border-bottom-left-radius: var(--radius);
-  border-bottom-right-radius: var(--radius);
+.door-alert {
+  background: oklch(from var(--internal-success) l c h / 0.1);
+  border-color: oklch(from var(--internal-success) l c h / 0.48);
+}
+
+.door-alert strong,
+.empty-ticketing-state strong,
+.passcode-form h2 {
+  color: var(--internal-foreground);
+  font-size: var(--internal-font-size-base);
+  font-weight: var(--internal-font-weight-semibold);
+  line-height: 1.3;
+}
+
+.door-alert span,
+.empty-ticketing-state span,
+.passcode-form p {
+  color: var(--internal-muted-foreground);
+  font-size: var(--internal-font-size-sm);
+  line-height: 1.5;
+}
+
+.external-ticket-button {
+  width: 100%;
+  padding: calc(var(--internal-spacing-sm) + var(--internal-spacing-xs))
+    var(--internal-spacing-lg);
+  font-size: var(--internal-font-size-base);
+  font-weight: var(--internal-font-weight-bold);
+  text-decoration: none;
+}
+
+.passcode-form input {
+  width: 100%;
+  min-width: 0;
+  padding: calc(var(--internal-spacing-sm) + 0.125rem)
+    var(--internal-spacing-sm);
+  background: var(--internal-card);
+  color: var(--internal-foreground);
+  border-radius: calc(var(--internal-radius) - 2px);
+  font: inherit;
+}
+
+.passcode-form input:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
 }
 
 .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);
 }
 
-.tickets-wrapper > .ticket-section:last-child,
-.tickets-wrapper > .unsectioned-admissions:last-child .ticket-section:last-child {
+.tickets-wrapper > .ticket-section:last-child {
   margin-bottom: 0;
 }
 
-.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);
+  padding-bottom: var(--internal-spacing-md);
 }
 
 .ticket-section.section-sold-out .section-name,
@@ -323,7 +379,7 @@
 }
 
 .ticket-section.section-sold-out .admission-card {
-  background: var(--card);
+  background: var(--internal-card);
 }
 
 .ticket-section.section-sold-out .quantity-controls,
@@ -348,33 +404,26 @@
   gap: var(--internal-spacing-sm);
 }
 
-.section-time {
+.section-time,
+.section-venue {
   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-time,
+.admission-time {
+  margin-bottom: var(--internal-spacing-xs);
 }
 
-.section-venue svg {
-  width: calc(var(--spacing-sm) + var(--spacing-xs));
-  height: calc(var(--spacing-sm) + var(--spacing-xs));
+.section-time svg,
+.section-venue svg,
+.admission-time svg,
+.admission-venue svg {
+  width: calc(var(--internal-spacing-sm) + var(--internal-spacing-xs));
+  height: calc(var(--internal-spacing-sm) + var(--internal-spacing-xs));
   flex-shrink: 0;
   opacity: 0.8;
 }
@@ -398,18 +447,15 @@
   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 {
+  background: var(--internal-card);
 }
 
-.admission-card.sold-out {
-  opacity: 1;
-  background: var(--card);
-  position: relative;
+.admission-card.unavailable {
+  opacity: 0.72;
 }
 
-.admission-card.sold-out .admission-price,
-.admission-card.sold-out .admission-fee {
+.admission-card.sold-out .admission-price {
   opacity: 0.5;
 }
 
@@ -465,7 +511,6 @@
   padding: calc(var(--internal-spacing-xs) * 1.5) var(--internal-spacing-sm);
   background: oklch(from var(--internal-info) l c h / 0.08);
   color: var(--internal-info-foreground);
-  border: none;
   border-radius: calc(var(--internal-radius) - 2px);
   font-size: var(--internal-font-size-xs);
   font-weight: var(--internal-font-weight-medium);
@@ -488,36 +533,17 @@
   flex-shrink: 0;
 }
 
-.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-time,
 .admission-venue {
-  color: var(--muted-foreground);
-  font-size: var(--font-size-sm);
-  margin-bottom: var(--spacing-sm);
+  color: var(--internal-muted-foreground);
+  font-size: var(--internal-font-size-sm);
   display: flex;
   align-items: center;
-  gap: var(--spacing-xs);
+  gap: var(--internal-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;
+.admission-venue {
+  margin-bottom: var(--internal-spacing-sm);
 }
 
 /* Solo admission layout adjustments */
@@ -531,10 +557,10 @@
 }
 
 .solo-admission .admission-price-info {
-  margin-top: var(--spacing-md);
+  margin-top: var(--internal-spacing-md);
   display: flex;
   justify-content: space-between;
-  align-items: flex-start;
+  align-items: center;
   width: 100%;
 }
 
@@ -549,10 +575,10 @@
   justify-content: center;
   padding: 0;
   background: transparent;
-  color: var(--muted-foreground);
+  color: var(--internal-destructive);
   border: none;
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
+  font-size: var(--internal-font-size-sm);
+  font-weight: var(--internal-font-weight-medium);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   margin-left: auto;
@@ -563,51 +589,71 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--spacing-sm);
-  margin-bottom: var(--spacing-sm);
+  gap: var(--internal-spacing-sm);
+  margin-bottom: var(--internal-spacing-sm);
   width: 100%;
 }
 
 .admission-price-wrapper {
   display: flex;
   flex-direction: column;
+  row-gap: calc(var(--internal-spacing-xs) * 0.5);
 }
 
 .admission-price {
-  color: var(--internal-primary);
+  color: var(--internal-foreground);
   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-price-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--internal-spacing-sm);
+}
+
+.admission-price-original {
+  color: var(--internal-muted-foreground);
+  font-size: var(--internal-font-size-base);
+  text-decoration: line-through;
+}
+
+.admission-booking-fee {
+  color: var(--internal-muted-foreground);
+  font-size: var(--internal-font-size-xs);
+  font-weight: var(--internal-font-weight-medium);
+  line-height: 1.2;
+}
+
+.admission-savings,
+.admission-availability {
+  font-size: var(--internal-font-size-xs);
+  font-weight: var(--internal-font-weight-medium);
+  line-height: 1.2;
 }
 
 .admission-savings {
-  color: var(--success);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
+  color: var(--internal-success);
 }
 
 .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);
+  color: var(--internal-warning);
+}
+
+.admission-sale-label {
+  display: block;
+  margin-top: var(--internal-spacing-xs);
+  color: var(--internal-muted-foreground);
+  font-size: var(--internal-font-size-sm);
+  font-weight: var(--internal-font-weight-medium);
+  line-height: 1.35;
+}
+
+.admission-sale-label.success {
+  color: var(--internal-success);
 }
 
 /* Quantity Controls - Modern, minimal design */
@@ -616,13 +662,15 @@
   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-controls:has(.quantity-value:focus-visible) {
+  box-shadow: 0 0 0 2px var(--internal-ring);
+}
+
 .quantity-btn {
   width: calc(var(--internal-spacing-lg) * 1.5);
   height: calc(var(--internal-spacing-lg) * 1.5);
@@ -660,18 +708,22 @@
   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);
+  border-right: 1px solid var(--internal-input);
 }
 
 .quantity-btn.increase {
-  border-left: 1px solid var(--internal-border);
+  border-left: 1px solid var(--internal-input);
 }
 
 .quantity-value {
+  appearance: textfield;
+  width: 2.75rem;
+  height: calc(var(--internal-spacing-lg) * 1.5);
+  border: none;
+  background: transparent;
   min-width: 2.5rem;
   text-align: center;
   font-size: var(--internal-font-size-sm);
@@ -680,148 +732,147 @@
   padding: 0 var(--internal-spacing-xs);
 }
 
+.quantity-value:focus-visible {
+  outline: none;
+}
+
+.quantity-value::-webkit-inner-spin-button,
+.quantity-value::-webkit-outer-spin-button {
+  appearance: none;
+  margin: 0;
+}
+
+.quantity-value:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
 /* 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;
+  min-width: calc(var(--internal-spacing-lg) * 1.5 * 2 + 2.5rem);
+  height: calc(var(--internal-spacing-lg) * 1.5);
+  padding: 0;
+  background: transparent;
+  border: none;
+  box-shadow: none;
 }
 
+.sold-out-controls,
 .sold-out-text {
-  color: var(--muted-foreground);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
+  color: var(--internal-destructive);
+  font-size: var(--internal-font-size-xs);
+  font-weight: var(--internal-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);
+.sold-out-controls.success,
+.sold-out-controls.success .sold-out-text {
+  color: var(--internal-success);
+}
+
+.checkout-actions {
   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);
+.coupon-panel {
   margin-bottom: var(--internal-spacing-md);
-  color: var(--internal-foreground);
-  letter-spacing: -0.025em;
 }
 
-.order-item {
+.coupon-row {
+  position: relative;
   display: flex;
-  justify-content: space-between;
-  margin-bottom: var(--internal-spacing-sm);
-  font-size: var(--internal-font-size-base);
-  color: var(--internal-foreground);
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  background: var(--internal-background);
+  background-clip: padding-box;
+  border-radius: var(--internal-radius);
+  transition: border-color var(--internal-transition-fast);
 }
 
-.order-item-with-section {
-  margin-bottom: var(--internal-spacing-sm);
+.coupon-row:focus-within {
+  border-color: var(--internal-ring);
 }
 
-.item-section-line {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  font-size: var(--internal-font-size-base);
-  color: var(--internal-foreground);
+.coupon-row:has(input[aria-invalid="true"]) {
+  border-color: var(--internal-destructive);
 }
 
-.item-section-name {
-  flex: 1;
-  font-weight: var(--font-weight-medium);
+.coupon-row:has(input:disabled) {
+  opacity: 0.64;
 }
 
-.item-admission-name {
+.coupon-row input {
+  width: 100%;
+  min-width: 0;
+  padding: calc(var(--internal-spacing-sm) - 1px)
+    calc(var(--internal-spacing-xl) * 2.75)
+    calc(var(--internal-spacing-sm) - 1px)
+    calc(var(--internal-spacing-md) - 1px);
+  background: var(--internal-card);
+  color: var(--internal-foreground);
+  border: none;
+  border-radius: inherit;
+  font: inherit;
   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);
+  line-height: 1.25rem;
+  outline: none;
 }
 
-.item-price {
-  font-weight: var(--internal-font-weight-bold);
-  white-space: nowrap;
+.coupon-row input::placeholder {
+  color: oklch(from var(--internal-muted-foreground) l c h / 0.64);
 }
 
-.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;
+.coupon-row input:disabled {
+  cursor: not-allowed;
 }
 
-.empty-cart-text {
-  flex: 1;
+.coupon-apply,
+.coupon-remove {
+  position: absolute;
+  right: calc((var(--internal-spacing-xs) * 1.5) - 3px);
+  top: 50%;
+  transform: translateY(-50%);
+  padding: calc(var(--internal-spacing-xs) * 1.25) var(--internal-spacing-sm);
+  background: var(--internal-secondary);
+  color: var(--internal-foreground);
+  border-radius: calc(var(--internal-radius) - 2px);
+  font-size: var(--internal-font-size-xs);
+  font-weight: var(--internal-font-weight-medium);
+  cursor: pointer;
+  transition: all var(--internal-transition-fast);
 }
 
-.empty-cart-price {
-  font-weight: var(--font-weight-medium);
+.coupon-apply:hover:not(:disabled),
+.coupon-remove:hover:not(:disabled) {
+  background: oklch(from var(--internal-accent) l c h / 0.8);
 }
 
-.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);
+.coupon-apply:focus-visible,
+.coupon-remove:focus-visible {
+  outline: 2px solid var(--internal-ring);
+  outline-offset: -1px;
 }
 
-.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);
+.coupon-apply:disabled,
+.coupon-remove:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
 }
 
 .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);
+  padding: calc(var(--internal-spacing-sm) + var(--internal-spacing-xs))
+    var(--internal-spacing-lg);
   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);
+  line-height: 1.25;
   position: relative;
   overflow: hidden;
 }
@@ -831,115 +882,153 @@
   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;
+  opacity: 0.5;
   cursor: not-allowed;
-  background: var(--internal-secondary);
-  color: var(--internal-muted-foreground);
-  box-shadow: none;
-  border: 1px solid var(--internal-border);
+}
+
+.checkout-spinner-wrapper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 1.25em;
+  vertical-align: middle;
+}
+
+.checkout-spinner {
+  width: 1.125em;
+  height: 1.125em;
+  animation: checkout-spinner 0.8s linear infinite;
+}
+
+@keyframes checkout-spinner {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.sticky-checkout-bar {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 40;
+  display: none;
+  padding: var(--internal-spacing-md);
+  background: var(--internal-card);
+  border-top: 1px solid var(--internal-border);
+  box-shadow: var(--internal-shadow-lg);
+}
+
+.sticky-checkout-btn.selection-prompt {
+  animation: selection-prompt-shake 400ms ease-in-out;
+}
+
+@keyframes selection-prompt-shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-4px);
+  }
+  75% {
+    transform: translateX(4px);
+  }
 }
 
 /* Loading & Error States */
-.loading-state,
-.error-state {
+.loading-state {
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: var(--spacing-xl);
+  padding: var(--internal-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
+    from var(--internal-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);
+  border: 1px solid oklch(from var(--internal-destructive) l c h / 0.2);
+  border-radius: var(--internal-radius);
+  padding: var(--internal-spacing-lg);
+  margin: var(--internal-spacing-lg);
   text-align: center;
 }
 
 .error-banner strong {
   display: block;
-  color: var(--destructive);
-  font-size: var(--font-size-lg);
-  margin-bottom: var(--spacing-sm);
+  color: var(--internal-destructive);
+  font-size: var(--internal-font-size-lg);
+  margin-bottom: var(--internal-spacing-sm);
 }
 
 .error-banner p {
-  color: var(--muted-foreground);
-  margin-bottom: var(--spacing-md);
+  color: var(--internal-muted-foreground);
+  margin-bottom: var(--internal-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);
+  background: var(--internal-primary);
+  color: var(--internal-primary-foreground);
+  border: 1px solid oklch(from var(--internal-primary) calc(l - 0.08) c h);
+  padding: calc(var(--internal-spacing-sm) + var(--internal-spacing-xs))
+    var(--internal-spacing-lg);
+  border-radius: calc(var(--internal-radius) - 2px);
+  font-size: var(--internal-font-size-sm);
+  font-weight: var(--internal-font-weight-medium);
   cursor: pointer;
-  transition: all var(--transition-fast);
-  box-shadow: var(--shadow-sm);
+  transition: all var(--internal-transition-fast);
+  box-shadow: var(--internal-shadow-edge-light);
 }
 
 .retry-button:focus-visible {
-  outline: 2px solid var(--ring);
+  outline: 2px solid var(--internal-ring);
   outline-offset: 2px;
 }
 
 .retry-button:hover {
-  background: oklch(from var(--primary) calc(l - 0.08) c h);
-  box-shadow: var(--shadow-md);
+  background: oklch(from var(--internal-primary) calc(l - 0.08) c h);
   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
+    from var(--internal-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);
+  border: 1px solid oklch(from var(--internal-destructive) l c h / 0.2);
+  color: var(--internal-destructive);
+  padding: var(--internal-spacing-sm) var(--internal-spacing-md);
+  border-radius: var(--internal-radius);
+  margin-bottom: var(--internal-spacing-md);
+  font-size: var(--internal-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;
+    border-radius: var(--internal-radius);
+    margin: 0 0 var(--internal-spacing-md) 0;
+  }
+}
+
+@media (max-width: 767px) {
+  :host([data-sticky-checkout="true"]) .session-services-ticketing-container {
+    padding-bottom: calc(var(--internal-spacing-xl) * 3);
   }
 
-  .order-summary {
-    border-radius: var(--radius);
-    margin: var(--spacing-md) 0;
+  .sticky-checkout-bar {
+    display: block;
   }
 }