@ticketboothapp/booking 0.1.22 → 1.2.24

package/src/components/booking/BookingProductGrid.module.css

@@ -1,359 +0,0 @@
-/* Filter pills - horizontal scrolling row */
-.filterPillsScroll {
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-  scrollbar-width: none;
-  padding-bottom: 0.25rem;
-  margin-bottom: 1rem;
-}
-
-.filterPillsScroll::-webkit-scrollbar {
-  display: none;
-}
-
-.filterPills {
-  display: flex;
-  flex-wrap: nowrap;
-  gap: 0.5rem;
-}
-
-.filterPill {
-  flex-shrink: 0;
-  padding: 0.5rem 1rem;
-  border-radius: var(--border-radius-pill);
-  font-size: 0.875rem;
-  font-weight: 800;
-  font-family: 'Poppins', sans-serif;
-  text-transform: lowercase;
-  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
-  cursor: pointer;
-  border: 2px solid var(--accent-turquoise);
-  background: transparent;
-  color: var(--accent-turquoise);
-}
-
-.filterPillApplied {
-  background: var(--accent-turquoise);
-  color: white;
-  border-color: var(--accent-turquoise);
-}
-
-/* Only darken on hover for devices with real hover (desktop). On mobile, :hover
-   sticks after tap and makes the applied pill look too dark. */
-@media (hover: hover) {
-  .filterPillApplied:hover {
-    background: #0d9488;
-    border-color: #0d9488;
-  }
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 0.75rem;
-}
-
-.tileCollapsed {
-  cursor: pointer;
-  border-radius: 10px;
-  overflow: hidden;
-  background: var(--light-orange-background);
-  min-height: 200px;
-}
-
-.tileCollapsed:hover .tileImage {
-  transform: scale(1.05);
-}
-
-.tileImageContainer {
-  position: relative;
-  width: 100%;
-  height: 280px;
-  overflow: hidden;
-}
-
-@media (min-width: 768px) {
-  .grid {
-    grid-template-columns: 1fr 1fr 1fr;
-    gap: 1rem;
-  }
-
-  .tileImageContainer {
-    height: 420px;
-  }
-
-  .filterPill:not(.filterPillApplied):hover {
-    background: rgba(45, 212, 191, 0.1);
-  }
-}
-
-.tileImage {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  transition: transform 0.3s ease;
-}
-
-.tileImage::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 30%;
-  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
-  z-index: 1;
-}
-
-.tileOverlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  padding: var(--spacing-medium);
-  z-index: 2;
-}
-
-.tileTags {
-  display: flex;
-  gap: 0.25rem;
-  margin-bottom: 0.25rem;
-}
-
-.tileTitle {
-  margin: 0;
-  color: white;
-  font-size: 1.25rem;
-  font-weight: 700;
-  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-  line-height: 1.2;
-}
-
-@media (min-width: 768px) {
-  .tileTitle {
-    font-size: 1.75rem;
-  }
-}
-
-.tileStartTime {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  color: #FFFFFF;
-  font-family: 'Northlake', sans-serif;
-  font-weight: 400;
-  font-size: 2.5rem;
-  text-align: right;
-  z-index: 2;
-  line-height: 0.8;
-}
-
-@media (min-width: 768px) {
-  .tileStartTime {
-    font-size: 3rem;
-    transform: translateZ(0);
-    backface-visibility: hidden;
-    -webkit-font-smoothing: antialiased;
-    will-change: transform;
-    max-width: 80% !important;
-  }
-}
-
-.tilePills {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 1rem;
-  opacity: 0;
-  transition: opacity 0.25s ease;
-  background: rgba(0, 0, 0, 0.7);
-  z-index: 3;
-}
-
-@media (hover: hover) {
-  .tileCollapsed:hover .tilePills {
-    opacity: 1;
-  }
-}
-
-/* Expanded tile - full row */
-.tileExpanded {
-  grid-column: 1 / -1;
-  background: var(--light-orange-background);
-  border-radius: 12px;
-  overflow: hidden;
-  border: 2px solid var(--accent-turquoise);
-}
-
-.expandedInner {
-  display: flex;
-  flex-direction: row;
-  min-height: 340px;
-}
-
-.expandedImage {
-  position: relative;
-  flex: 0 0 45%;
-  min-height: 340px;
-}
-
-@media (min-width: 768px) {
-  .expandedInner {
-    min-height: 500px;
-  }
-
-  .expandedImage {
-    min-height: 500px;
-  }
-
-  .expandedVideo {
-    min-height: 500px;
-  }
-}
-
-.expandedImageImg {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.expandedVideo {
-  width: 100%;
-  height: 100%;
-  min-height: 340px;
-  position: absolute;
-  inset: 0;
-}
-
-
-.expandedVideo :global(video),
-.expandedVideo :global(.next-video-bg-video),
-.expandedVideo :global(.next-video-bg-poster) {
-  width: 100% !important;
-  height: 100% !important;
-  object-fit: cover !important;
-}
-
-.collapseArrowButton {
-  position: absolute;
-  top: 0.75rem;
-  left: 0.75rem;
-  z-index: 3;
-  width: 2.25rem;
-  height: 2.25rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(255, 255, 255, 0.9);
-  border: none;
-  border-radius: 50%;
-  cursor: pointer;
-  color: var(--primary-text);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-}
-
-.collapseArrowButton:hover {
-  background: white;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
-}
-
-@media (max-width: 767px) {
-  .collapseArrowButton {
-    top: auto;
-    left: auto;
-    bottom: 0.75rem;
-    right: 0.75rem;
-  }
-}
-
-.expandedTags {
-  position: absolute;
-  top: 0.75rem;
-  left: 3.25rem; /* space for collapse button */
-  display: flex;
-  gap: 0.25rem;
-  z-index: 2;
-}
-
-.expandedContent {
-  flex: 1;
-  padding: 1.5rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.expandedTitle {
-  margin: 0;
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: var(--primary-text);
-}
-
-.expandedDescription {
-  margin: 0;
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: var(--grey-text);
-}
-
-.expandedPills {
-  flex: 1;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  align-content: flex-start;
-  gap: 8px;
-  min-height: 0;
-}
-
-.expandedActions {
-  display: flex;
-  gap: 0.75rem;
-  margin-top: auto;
-  margin-left: auto;
-}
-
-.bookButton {
-  padding: 0.75rem 1.5rem;
-}
-
-@media (max-width: 767px) {
-  .tilePills {
-    display: none;
-  }
-
-  .tileImageContainer {
-    height: 280px;
-  }
-
-  .tileStartTime {
-    font-size: 2.5rem;
-  }
-
-  .expandedInner {
-    flex-direction: column;
-  }
-
-  .expandedImage {
-    flex: 0 0 340px;
-    min-height: 340px;
-  }
-
-  .expandedVideo {
-    min-height: 340px;
-  }
-
-  .expandedContent {
-    padding: 1rem;
-  }
-
-  .expandedTags {
-    left: 0.75rem;
-  }
-}