@gomusdev/web-components 0.0.23 → 1.0.0

package/dist-js/gomus-webcomponents.css

@@ -1,1247 +0,0 @@
-
-  /* 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-error {
-    color: red;
-    font-size: 0.875rem;
-    margin-top: 0.25rem;
-    min-height: 1rem;
-    min-height: 1lh;
-  }
-
-:root .go-error {
-    color: red;
-    font-size: 0.875rem;
-    margin-top: 0.25rem;
-    min-height: 1rem;
-    min-height: 1lh;
-  }
-
-: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-item-title] {
-      flex: 2;
-    }
-[data-go-cart-header] > ul [data-go-cart-item-price] {
-      flex: 1;
-      text-align: right;
-    }
-[data-go-cart-header] > ul [data-go-cart-item-count] {
-      flex: 1;
-      text-align: right;
-    }
-[data-go-cart-header] > ul [data-go-cart-item-remove] {
-      flex: 1;
-      text-align: right;
-    }
-[data-go-cart-header] > ul [data-go-cart-item-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-item-title] {
-      flex: 2;
-    }
-[data-go-cart-footer] > ul [data-go-cart-item-price] {
-      flex: 1;
-      text-align: right;
-    }
-[data-go-cart-footer] > ul [data-go-cart-item-count] {
-      flex: 1;
-      text-align: right;
-    }
-[data-go-cart-footer] > ul [data-go-cart-item-remove] {
-      flex: 1;
-      text-align: right;
-    }
-[data-go-cart-footer] > ul [data-go-cart-item-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;
-}