@gomusdev/web-components 1.5.0 → 1.6.1

package/dist-js/gomus-webcomponents.css

@@ -0,0 +1,1255 @@
+
+  /* General reset for list items */
+
+:global .innerZoomElementWrapper h3 {
+    margin-top: 4rem;
+    margin-bottom: 1rem;
+  }
+
+:global .innerZoomElementWrapper go-tickets {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+:global .innerZoomElementWrapper go-tickets label {
+      display: inline-block;
+      padding: 10px 20px;
+      border: 2px solid #ccc;
+      border-radius: 5px;
+      cursor: pointer;
+      transition:
+        background-color 0.3s, border-color 0.3s;
+    }
+
+/* Available timeslot */
+
+:global .innerZoomElementWrapper go-tickets .available {
+      background-color: #fff;
+      color: #333;
+    }
+
+:global .innerZoomElementWrapper go-tickets input[type='checkbox'] {
+      display: none; /* Hide the radio button */
+    }
+
+/* When a timeslot is selected (checked radio button) */
+
+:global .innerZoomElementWrapper go-tickets label:has(input[type='checkbox']:checked) {
+      background-color: #12826a;
+      background-color: var(--primary); /* blue-green color */
+      border-color: #12826a;
+      border-color: var(--primary);
+      color: white;
+    }
+
+/* Finished (unavailable) timeslot */
+
+:global .innerZoomElementWrapper go-tickets .finished {
+      background-color: #f0f0f0;
+      color: #999;
+    }
+
+:global .innerZoomElementWrapper go-tickets .finished input {
+      display: none;
+    }
+
+:global .innerZoomElementWrapper go-tickets .finished {
+      pointer-events: none;
+    }
+
+/* Disabled radio button appearance */
+
+:global .innerZoomElementWrapper go-tickets input:disabled + label {
+      background-color: #e0e0e0;
+      color: #bbb;
+      cursor: not-allowed;
+      border-color: #ddd;
+    }
+
+:global .innerZoomElementWrapper go-tickets label:hover {
+      background-color: #f0f0f0;
+      border-color: #aaa;
+    }
+
+/* Focus state for better accessibility */
+
+:global .innerZoomElementWrapper go-tickets input:focus + label {
+      outline: 2px solid #0052cc;
+    }
+
+:global .innerZoomElementWrapper .events ul {
+      list-style: none;
+      display: grid;
+      grid-template-columns: repeat(auto-fit, 10rem);
+      grid-gap: 1rem;
+      gap: 1rem;
+      grid-template-rows: auto auto auto;
+    }
+
+:global .innerZoomElementWrapper .events li {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      height: 100%;
+    }
+
+:global .innerZoomElementWrapper .events go-event {
+      background: #fff0dd; /* Soft light gray for a modern look */
+      padding: 1.5rem;
+      display: flex;
+      flex-direction: column;
+      border-radius: 1rem; /* Larger radius for a smoother, rounded appearance */
+      height: 100%; /* Ensures cells stretch to fill the row height */
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
+      transition: box-shadow 0.3s ease; /* Smooth shadow transition on hover */
+    }
+
+:global .innerZoomElementWrapper .events go-event:hover {
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); /* Slightly stronger shadow on hover */
+    }
+
+:global .innerZoomElementWrapper .events go-event-title {
+      font-weight: bold;
+    }
+
+:global .innerZoomElementWrapper .events go-event-kind {
+      font-size: 0.8rem;
+      flex: 100;
+      margin-bottom: 1rem;
+    }
+
+:global .innerZoomElementWrapper .events go-event-date {
+    }
+
+:host,
+:root {
+  --black: #111;
+  --red: red;
+  --light-red: #fff0f0;
+  --primary: #12826a;
+  --invalid-border: 4px solid var(--red);
+  --color-contrast: #111;
+}
+
+:host,
+:root {
+  --color-contrast: #111;
+  --black: #111;
+  --red: red;
+  --light-red: #fff0f0;
+  --primary: #12826a;
+}
+
+:host .is-invalid {
+    --color-contrast: #ff0000;
+    background-color: #fff0f0;
+    background-color: var(--light-red);
+    border-left: 4px solid red;
+    border-left: var(--invalid-border);
+  }
+
+:root .is-invalid {
+    --color-contrast: #ff0000;
+    background-color: #fff0f0;
+    background-color: var(--light-red);
+    border-left: 4px solid red;
+    border-left: var(--invalid-border);
+  }
+
+:host .form-group {
+    margin-bottom: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    --invalid-border: 4px solid var(--red);
+
+    padding: 0.5rem;
+  }
+
+:root .form-group {
+    margin-bottom: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    --invalid-border: 4px solid var(--red);
+
+    padding: 0.5rem;
+  }
+
+:host .go-field {
+    margin-bottom: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    --invalid-border: 4px solid var(--red);
+
+    padding: 0.5rem;
+  }
+
+:root .go-field {
+    margin-bottom: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    --invalid-border: 4px solid var(--red);
+
+    padding: 0.5rem;
+  }
+
+:host .form-group label {
+      font-weight: bold;
+      margin-bottom: 0.25rem;
+      color: #111;
+      color: var(--color-contrast);
+    }
+
+:root .form-group label {
+      font-weight: bold;
+      margin-bottom: 0.25rem;
+      color: #111;
+      color: var(--color-contrast);
+    }
+
+:host .go-field label {
+      font-weight: bold;
+      margin-bottom: 0.25rem;
+      color: #111;
+      color: var(--color-contrast);
+    }
+
+:root .go-field label {
+      font-weight: bold;
+      margin-bottom: 0.25rem;
+      color: #111;
+      color: var(--color-contrast);
+    }
+
+:host .form-group input {
+      padding: 0.5rem;
+      font-size: 1rem;
+      border: 1px solid #111;
+      border: 1px solid var(--color-contrast);
+      border-radius: 0.25rem;
+      background-color: #fff;
+      color: #111;
+      color: var(--color-contrast);
+      transition: border-color 0.3s ease;
+    }
+
+:root .form-group input {
+      padding: 0.5rem;
+      font-size: 1rem;
+      border: 1px solid #111;
+      border: 1px solid var(--color-contrast);
+      border-radius: 0.25rem;
+      background-color: #fff;
+      color: #111;
+      color: var(--color-contrast);
+      transition: border-color 0.3s ease;
+    }
+
+:host .go-field input {
+      padding: 0.5rem;
+      font-size: 1rem;
+      border: 1px solid #111;
+      border: 1px solid var(--color-contrast);
+      border-radius: 0.25rem;
+      background-color: #fff;
+      color: #111;
+      color: var(--color-contrast);
+      transition: border-color 0.3s ease;
+    }
+
+:root .go-field input {
+      padding: 0.5rem;
+      font-size: 1rem;
+      border: 1px solid #111;
+      border: 1px solid var(--color-contrast);
+      border-radius: 0.25rem;
+      background-color: #fff;
+      color: #111;
+      color: var(--color-contrast);
+      transition: border-color 0.3s ease;
+    }
+
+:host .form-group select {
+      padding: 0.5rem;
+      font-size: 1rem;
+      border: 1px solid #111;
+      border: 1px solid var(--color-contrast);
+      border-radius: 0.25rem;
+      background-color: #fff;
+      color: #111;
+      color: var(--color-contrast);
+      transition: border-color 0.3s ease;
+    }
+
+:root .form-group select {
+      padding: 0.5rem;
+      font-size: 1rem;
+      border: 1px solid #111;
+      border: 1px solid var(--color-contrast);
+      border-radius: 0.25rem;
+      background-color: #fff;
+      color: #111;
+      color: var(--color-contrast);
+      transition: border-color 0.3s ease;
+    }
+
+:host .go-field select {
+      padding: 0.5rem;
+      font-size: 1rem;
+      border: 1px solid #111;
+      border: 1px solid var(--color-contrast);
+      border-radius: 0.25rem;
+      background-color: #fff;
+      color: #111;
+      color: var(--color-contrast);
+      transition: border-color 0.3s ease;
+    }
+
+:root .go-field select {
+      padding: 0.5rem;
+      font-size: 1rem;
+      border: 1px solid #111;
+      border: 1px solid var(--color-contrast);
+      border-radius: 0.25rem;
+      background-color: #fff;
+      color: #111;
+      color: var(--color-contrast);
+      transition: border-color 0.3s ease;
+    }
+
+:host .form-group textarea {
+      padding: 0.5rem;
+      font-size: 1rem;
+      border: 1px solid #111;
+      border: 1px solid var(--color-contrast);
+      border-radius: 0.25rem;
+      background-color: #fff;
+      color: #111;
+      color: var(--color-contrast);
+      transition: border-color 0.3s ease;
+    }
+
+:root .form-group textarea {
+      padding: 0.5rem;
+      font-size: 1rem;
+      border: 1px solid #111;
+      border: 1px solid var(--color-contrast);
+      border-radius: 0.25rem;
+      background-color: #fff;
+      color: #111;
+      color: var(--color-contrast);
+      transition: border-color 0.3s ease;
+    }
+
+:host .go-field textarea {
+      padding: 0.5rem;
+      font-size: 1rem;
+      border: 1px solid #111;
+      border: 1px solid var(--color-contrast);
+      border-radius: 0.25rem;
+      background-color: #fff;
+      color: #111;
+      color: var(--color-contrast);
+      transition: border-color 0.3s ease;
+    }
+
+:root .go-field textarea {
+      padding: 0.5rem;
+      font-size: 1rem;
+      border: 1px solid #111;
+      border: 1px solid var(--color-contrast);
+      border-radius: 0.25rem;
+      background-color: #fff;
+      color: #111;
+      color: var(--color-contrast);
+      transition: border-color 0.3s ease;
+    }
+
+:host .form-group input:focus {
+        outline: none;
+        border-color: #111;
+        border-color: var(--color-contrast);
+      }
+
+:root .form-group input:focus {
+        outline: none;
+        border-color: #111;
+        border-color: var(--color-contrast);
+      }
+
+:host .go-field input:focus {
+        outline: none;
+        border-color: #111;
+        border-color: var(--color-contrast);
+      }
+
+:root .go-field input:focus {
+        outline: none;
+        border-color: #111;
+        border-color: var(--color-contrast);
+      }
+
+:host .form-group select:focus {
+        outline: none;
+        border-color: #111;
+        border-color: var(--color-contrast);
+      }
+
+:root .form-group select:focus {
+        outline: none;
+        border-color: #111;
+        border-color: var(--color-contrast);
+      }
+
+:host .go-field select:focus {
+        outline: none;
+        border-color: #111;
+        border-color: var(--color-contrast);
+      }
+
+:root .go-field select:focus {
+        outline: none;
+        border-color: #111;
+        border-color: var(--color-contrast);
+      }
+
+:host .form-group textarea:focus {
+        outline: none;
+        border-color: #111;
+        border-color: var(--color-contrast);
+      }
+
+:root .form-group textarea:focus {
+        outline: none;
+        border-color: #111;
+        border-color: var(--color-contrast);
+      }
+
+:host .go-field textarea:focus {
+        outline: none;
+        border-color: #111;
+        border-color: var(--color-contrast);
+      }
+
+:root .go-field textarea:focus {
+        outline: none;
+        border-color: #111;
+        border-color: var(--color-contrast);
+      }
+
+:host .form-group .error {
+      color: red;
+      font-size: 0.875rem;
+      margin-top: 0.25rem;
+    }
+
+:root .form-group .error {
+      color: red;
+      font-size: 0.875rem;
+      margin-top: 0.25rem;
+    }
+
+:host .go-field .error {
+      color: red;
+      font-size: 0.875rem;
+      margin-top: 0.25rem;
+    }
+
+:root .go-field .error {
+      color: red;
+      font-size: 0.875rem;
+      margin-top: 0.25rem;
+    }
+
+:host .form-group .success {
+      margin-top: 1rem;
+      color: green;
+      font-weight: bold;
+    }
+
+:root .form-group .success {
+      margin-top: 1rem;
+      color: green;
+      font-weight: bold;
+    }
+
+:host .go-field .success {
+      margin-top: 1rem;
+      color: green;
+      font-weight: bold;
+    }
+
+:root .go-field .success {
+      margin-top: 1rem;
+      color: green;
+      font-weight: bold;
+    }
+
+:host ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+:root ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+:host .go-field-errors {
+    color: red;
+    font-size: 0.875rem;
+    margin-top: 0.25rem;
+    min-height: 1rem;
+    min-height: 1lh;
+  }
+
+:root .go-field-errors {
+    color: red;
+    font-size: 0.875rem;
+    margin-top: 0.25rem;
+    min-height: 1rem;
+    min-height: 1lh;
+  }
+
+:host .go-field-errors  > li {
+      margin-top: 0.25rem;
+    }
+
+:root .go-field-errors  > li {
+      margin-top: 0.25rem;
+    }
+
+:host .go-field-star {
+    color: red;
+    font-size: 0.875rem;
+    margin-left: 0.25rem;
+  }
+
+:root .go-field-star {
+    color: red;
+    font-size: 0.875rem;
+    margin-left: 0.25rem;
+  }
+
+:host .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+:root .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+:host .go-feedback {
+    margin-bottom: 1rem;
+    margin-top: 2rem;
+    padding: 0.5rem;
+  }
+
+:root .go-feedback {
+    margin-bottom: 1rem;
+    margin-top: 2rem;
+    padding: 0.5rem;
+  }
+
+:host .go-feedback p {
+      margin: 0;
+    }
+
+:root .go-feedback p {
+      margin: 0;
+    }
+
+:host .go-feedback.is-invalid {
+      background-color: #fff0f0;
+      background-color: var(--light-red);
+      border-left: 4px solid red;
+      border-left: var(--invalid-border);
+    }
+
+:root .go-feedback.is-invalid {
+      background-color: #fff0f0;
+      background-color: var(--light-red);
+      border-left: 4px solid red;
+      border-left: var(--invalid-border);
+    }
+
+:host .go-feedback.is-successful {
+      background-color: #f0fff0;
+      border-left: 4px solid #3c763d;
+    }
+
+:root .go-feedback.is-successful {
+      background-color: #f0fff0;
+      border-left: 4px solid #3c763d;
+    }
+
+:host a {
+    color: #12826a;
+    color: var(--primary);
+  }
+
+:root a {
+    color: #12826a;
+    color: var(--primary);
+  }
+
+:host button {
+    margin-top: 2rem;
+    background-color: #12826a;
+    background-color: var(--primary);
+    color: white;
+    font-size: 1.2rem;
+    padding: 20px 60px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
+
+:root button {
+    margin-top: 2rem;
+    background-color: #12826a;
+    background-color: var(--primary);
+    color: white;
+    font-size: 1.2rem;
+    padding: 20px 60px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
+
+:host button:hover {
+    background-color: #125948;
+  }
+
+:root button:hover {
+    background-color: #125948;
+  }
+
+:host go-events {
+    /* Ensure CSS variables are defined */
+    --primary: #12826a;
+  }
+
+:root go-events {
+    /* Ensure CSS variables are defined */
+    --primary: #12826a;
+  }
+
+:host go-events ul {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+      grid-gap: 1rem;
+      gap: 1rem;
+      padding: 0;
+      list-style: none;
+    }
+
+:root go-events ul {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+      grid-gap: 1rem;
+      gap: 1rem;
+      padding: 0;
+      list-style: none;
+    }
+
+:host go-events ul li {
+        background-color: #fff;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+        transition:
+          transform 0.2s ease, box-shadow 0.2s ease, border 0.2s ease;
+        display: flex;
+        flex-direction: column;
+        cursor: pointer;
+        border: 1px solid transparent;
+      }
+
+:root go-events ul li {
+        background-color: #fff;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+        transition:
+          transform 0.2s ease, box-shadow 0.2s ease, border 0.2s ease;
+        display: flex;
+        flex-direction: column;
+        cursor: pointer;
+        border: 1px solid transparent;
+      }
+
+:host go-events ul li:hover {
+          transform: translateY(-4px);
+          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
+          border: 1px solid #12826a;
+          border: 1px solid var(--primary);
+        }
+
+:root go-events ul li:hover {
+          transform: translateY(-4px);
+          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
+          border: 1px solid #12826a;
+          border: 1px solid var(--primary);
+        }
+
+:host go-events ul li go-event {
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+
+          /* Image container */
+        }
+
+:root go-events ul li go-event {
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+
+          /* Image container */
+        }
+
+:host go-events ul li go-event go-event-image {
+            display: block;
+            width: 100%;
+            aspect-ratio: 3 / 2;
+            -o-object-fit: cover;
+               object-fit: cover;
+            height: 200px;
+            overflow: hidden;
+          }
+
+:root go-events ul li go-event go-event-image {
+            display: block;
+            width: 100%;
+            aspect-ratio: 3 / 2;
+            -o-object-fit: cover;
+               object-fit: cover;
+            height: 200px;
+            overflow: hidden;
+          }
+
+:host go-events ul li go-event img {
+            max-width: 100%;
+            max-height: 100%;
+          }
+
+:root go-events ul li go-event img {
+            max-width: 100%;
+            max-height: 100%;
+          }
+
+/* Title container */
+
+:host go-events ul li go-event go-event-title {
+            padding: 0.75rem 1rem;
+            font-size: 1rem;
+            font-weight: 600;
+            color: #12826a;
+            color: var(--primary);
+          }
+
+:root go-events ul li go-event go-event-title {
+            padding: 0.75rem 1rem;
+            font-size: 1rem;
+            font-weight: 600;
+            color: #12826a;
+            color: var(--primary);
+          }
+
+:host go-events ul li go-event go-event-title * {
+              margin: 0;
+            }
+
+:root go-events ul li go-event go-event-title * {
+              margin: 0;
+            }
+
+:host img {
+    max-width: 100%;
+    max-height: 100%;
+  }
+
+:global go-ticket-selection go-cal {
+      display: none;
+    }
+
+:global go-ticket-selection.is-date-selected go-cal {
+        display: block;
+      }
+
+:global .azin {
+    outline: 20px solid green;
+  }
+
+.azin {
+  border: 20px solid green !important;
+}
+
+/*CALENDARUI CSS*/
+
+[data-calendar-wrapper] {
+  max-width: 650px;
+}
+
+[data-calendar-wrapper] [data-calendar-prev-button],[data-calendar-wrapper] [data-calendar-next-button] {
+    padding: 5px !important;
+    background-color: transparent !important;
+    border: none !important;
+    font-size: 1rem !important;
+    color: black !important;
+    margin-top: 0px !important;
+  }
+
+[data-calendar-wrapper] [data-calendar-cell] {
+    text-align: -webkit-center;
+    text-align: -moz-center;
+  }
+
+[data-calendar-wrapper] [data-bits-day] {
+    display: flex;
+    height: 1.5rem;
+    width: 1.5rem;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.5rem;
+    padding: 1rem;
+  }
+
+[data-calendar-wrapper] [data-calendar-header] {
+    display: flex;
+    padding: 20px 10px;
+  }
+
+[data-calendar-wrapper] [data-calendar-heading] {
+    font-weight: 700;
+    font-size: 1.125rem;
+    line-height: 1.5;
+    flex-grow: 1;
+    padding: 0 5px;
+    text-align: center;
+  }
+
+[data-calendar-wrapper] [data-calendar-grid] {
+    width: 100%;
+    padding: 5px 6px 7px 6px;
+  }
+
+[data-calendar-wrapper] [data-calendar-grid-row] {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    grid-gap: 8px;
+    gap: 8px;
+    padding: 10px 5px;
+  }
+
+[data-calendar-wrapper] [data-calendar-cell] {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 0.875rem;
+    font-weight: 500;
+    border-radius: 100%;
+    width: 28px;
+    height: 28px;
+  }
+
+[data-calendar-wrapper] [data-calendar-root] {
+    padding: 1.25rem;
+    border: 1px solid #274779;
+    border-radius: 0.25rem;
+  }
+
+[data-calendar-wrapper] [data-calendar-cell][data-unavailable] {
+    color: #757575;
+    pointer-events: none;
+  }
+
+[data-calendar-wrapper] [data-calendar-cell][data-disabled] {
+    color: #757575;
+    pointer-events: none;
+  }
+
+[data-calendar-wrapper] [data-calendar-cell][data-selected] {
+    color: #ffffff;
+    background-color: #274779;
+  }
+
+[data-calendar-wrapper] [data-calendar-cell][data-today] {
+    border: 1px solid #274779;
+    border-width: 1px;
+  }
+/*END CALENDARUI CSS*/
+
+ul[data-go-timeslots] {
+  max-width: 650px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+ul[data-go-timeslots] li {
+    margin: 5px;
+  }
+
+ul[data-go-timeslots] label {
+    display: inline-block;
+    padding: 10px 20px;
+    border: 2px solid #ccc;
+    border-radius: 5px;
+    cursor: pointer;
+    transition:
+      background-color 0.3s, border-color 0.3s;
+  }
+
+/* Available timeslot */
+
+ul[data-go-timeslots] .available {
+    background-color: #fff;
+    color: #333;
+  }
+
+ul[data-go-timeslots] input[type='radio'] {
+    display: none; /* Hide the radio button */
+  }
+
+/* When a timeslot is selected (checked radio button) */
+
+ul[data-go-timeslots] label:has(input[type='radio']:checked) {
+    background-color: #12826a;
+    background-color: var(--primary); /* blue-green color */
+    border-color: #12826a;
+    border-color: var(--primary);
+    color: white;
+  }
+
+/* Finished (unavailable) timeslot */
+
+ul[data-go-timeslots] .finished {
+    background-color: #f0f0f0;
+    color: #999;
+  }
+
+ul[data-go-timeslots] .finished input {
+    display: none;
+  }
+
+ul[data-go-timeslots] .finished {
+    pointer-events: none;
+  }
+
+/* Disabled radio button appearance */
+
+ul[data-go-timeslots] input:disabled + label {
+    background-color: #e0e0e0;
+    color: #bbb;
+    cursor: not-allowed;
+    border-color: #ddd;
+  }
+
+ul[data-go-timeslots] label:hover {
+    background-color: #f0f0f0;
+    border-color: #aaa;
+  }
+
+/* Focus state for better accessibility */
+
+ul[data-go-timeslots] input:focus + label {
+    outline: 2px solid #0052cc;
+  }
+
+go-tickets {
+  /*// Tweak these numbers to change column ratios (must match header + rows)*/
+  --col-title: 2;
+  --col-desc: 4;
+  --col-price: 1;
+  --col-qty: 1;
+}
+
+go-tickets [data-testid='tickets'] {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    /*// Header row*/
+  }
+
+go-tickets [data-testid='tickets']  > li[data-go-tickets-header] {
+      top: 0;
+      background: inherit;
+    }
+
+go-tickets [data-testid='tickets'] > li[data-go-tickets-header]  > ul {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        padding: 0.5rem 0;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        font-weight: 600;
+      }
+
+go-tickets [data-testid='tickets'] > li[data-go-tickets-header] > ul  > li {
+          list-style: none;
+          /*// allow truncation*/
+          min-width: 0;
+        }
+
+go-tickets [data-testid='tickets'] > li[data-go-tickets-header] > ul > li:first-child {
+            padding-left: 0;
+          }
+
+go-tickets [data-testid='tickets'] > li[data-go-tickets-header] > ul [data-go-tickets-title] {
+          flex: var(--col-title) 0 0;
+        }
+
+go-tickets [data-testid='tickets'] > li[data-go-tickets-header] > ul [data-go-tickets-description] {
+          flex: var(--col-desc) 0 0;
+        }
+
+go-tickets [data-testid='tickets'] > li[data-go-tickets-header] > ul [data-go-tickets-price] {
+          flex: var(--col-price) 0 0;
+          text-align: right;
+        }
+
+go-tickets [data-testid='tickets'] > li[data-go-tickets-header] > ul [data-go-tickets-quality] {
+          flex: var(--col-qty) 0 0;
+          text-align: right;
+        }
+
+/*// Data rows*/
+
+go-tickets [data-testid='tickets']  > li {
+      list-style: none;
+    }
+
+go-tickets [data-testid='tickets'] > li > article[data-go-ticket]  > ul {
+          display: flex;
+          align-items: center;
+          gap: 1rem;
+          padding: 0.75rem 0;
+          border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+        }
+
+go-tickets [data-testid='tickets'] > li > article[data-go-ticket] > ul  > li {
+            list-style: none;
+            /*// enable text truncation*/
+            min-width: 0;
+            /*// Optional: single-line truncation (comment out if you want wrapping)*/
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+
+go-tickets [data-testid='tickets'] > li > article[data-go-ticket] > ul [data-go-tickets-title] {
+            flex: var(--col-title) 0 0;
+          }
+
+go-tickets [data-testid='tickets'] > li > article[data-go-ticket] > ul [data-go-tickets-description] {
+            flex: var(--col-desc) 0 0;
+          }
+
+go-tickets [data-testid='tickets'] > li > article[data-go-ticket] > ul [data-go-tickets-price] {
+            flex: var(--col-price) 0 0;
+            text-align: right;
+          }
+
+go-tickets [data-testid='tickets'] > li > article[data-go-ticket] > ul [data-go-tickets-quality] {
+            flex: var(--col-qty) 0 0;
+            text-align: right;
+          }
+
+go-tickets [data-testid='tickets'] > li > article[data-go-ticket] > ul [data-go-tickets-quality] select {
+              /*// keeps the quantity control aligned but not stretched*/
+              margin-left: auto;
+              /*// adjust as needed*/
+              max-width: 8rem;
+
+              min-width: 4rem;
+              min-height: 2rem;
+              width: auto;
+            }
+
+/*=== CART ===*/
+go-cart {
+  display: block;
+}
+
+[data-testid='cart'] {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* Header row */
+[data-go-cart-header] {
+  background: inherit;
+  padding: 0.5rem 0;
+}
+[data-go-cart-header]  > ul {
+    display: flex;
+    gap: 1rem;
+    font-weight: 600;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    padding: 0.5rem 0;
+  }
+[data-go-cart-header] > ul  > li {
+      list-style: none;
+      min-width: 0;
+    }
+[data-go-cart-header] > ul [data-go-cart-header-title] {
+      flex: 2;
+    }
+[data-go-cart-header] > ul [data-go-cart-header-price] {
+      flex: 1;
+      text-align: right;
+    }
+[data-go-cart-header] > ul [data-go-cart-header-count] {
+      flex: 1;
+      text-align: right;
+    }
+[data-go-cart-header] > ul [data-go-cart-header-remove] {
+      flex: 1;
+      text-align: right;
+    }
+[data-go-cart-header] > ul [data-go-cart-header-sum] {
+      flex: 1;
+      text-align: right;
+    }
+
+/* Data rows */
+[data-go-cart-item] article  > ul {
+      display: flex;
+      gap: 1rem;
+      padding: 0.75rem 0;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+      align-items: center;
+    }
+[data-go-cart-item] article > ul  > li {
+        list-style: none;
+        min-width: 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+[data-go-cart-item] article > ul [data-go-cart-item-title] {
+        flex: 2;
+      }
+[data-go-cart-item] article > ul [data-go-cart-item-price] {
+        flex: 1;
+        text-align: right;
+      }
+[data-go-cart-item] article > ul [data-go-cart-item-count] {
+        flex: 1;
+        text-align: right;
+      }
+[data-go-cart-item] article > ul [data-go-cart-item-remove] {
+        flex: 1;
+        text-align: right;
+      }
+[data-go-cart-item] article > ul [data-go-cart-item-remove] button {
+          padding: 0.25rem 0.5rem;
+          margin: 0;
+          background-color: white;
+          color: black;
+          border: none;
+          border-radius: 4px;
+          cursor: pointer;
+        }
+[data-go-cart-item] article > ul [data-go-cart-item-sum] {
+        flex: 1;
+        text-align: right;
+      }
+
+/* Footer row */
+[data-go-cart-footer] {
+  background: inherit;
+}
+[data-go-cart-footer]  > ul {
+    display: flex;
+    gap: 1rem;
+    padding: 0.5rem 0;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    font-weight: 600;
+  }
+[data-go-cart-footer] > ul  > li {
+      list-style: none;
+      min-width: 0;
+    }
+[data-go-cart-footer] > ul [data-go-cart-footer-title] {
+      flex: 2;
+    }
+[data-go-cart-footer] > ul [data-go-cart-footer-price] {
+      flex: 1;
+      text-align: right;
+    }
+[data-go-cart-footer] > ul [data-go-cart-footer-count] {
+      flex: 1;
+      text-align: right;
+    }
+[data-go-cart-footer] > ul [data-go-cart-footer-remove] {
+      flex: 1;
+      text-align: right;
+    }
+[data-go-cart-footer] > ul [data-go-cart-footer-sum] {
+      flex: 1;
+      text-align: right;
+    }
+
+[data-add-to-cart-button]:disabled {
+  background-color: #d3d3d3; /* Gray color for disabled state */
+  color: #a1a1a1; /* Lighter text color */
+  cursor: not-allowed; /* Show that the button is disabled */
+}
+
+h2 {
+  margin-top: 3rlh;
+}
+.sum-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.component-container {
+  max-width: 650px;
+  margin: 0 auto;
+  box-shadow:
+    0 4px 12px rgba(12, 12, 12, 0.15),
+    0 0 0 1px rgba(0, 0, 0, 0.05);
+  border-radius: 3px;
+  padding: 32px 32px 48px;
+
+  margin: 2rem auto;
+}
+go-cart,
+go-ticket-selection,
+go-if {
+  width: 100%;
+  display: block;
+}