/* Cache-revised Home booking-state ticket component.
   Preserves the shared 366×225 Players-card artboard while restoring the
   original ticket silhouette, perforation, state icons, and accent footer. */

body[data-page="home"] .home > .index-logic {
  --nc-home-logic-height: 225px;
  height: var(--nc-home-logic-height) !important;
}

body[data-page="home"] .home > .index-logic .logic-card {
  --logic-accent: #1F80FF;
  width: var(--nc-ratio-card-width, 366px) !important;
  height: var(--nc-ratio-card-height, 225px) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  text-align: left !important;
  isolation: isolate !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: filter 160ms ease !important;
  /* True boolean subtraction: the mask clips the complete interactive card,
     including all backgrounds, content layers, and effects. */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 366 225' preserveAspectRatio='none'%3E%3Cmask id='ticket' maskUnits='userSpaceOnUse' x='0' y='0' width='366' height='225' style='mask-type:luminance'%3E%3Crect width='366' height='225' rx='16' fill='white'/%3E%3Ccircle cx='0' cy='147' r='11' fill='black'/%3E%3Ccircle cx='366' cy='147' r='11' fill='black'/%3E%3Cpath d='M3 147H363' fill='none' stroke='black' stroke-width='2' stroke-dasharray='10 8' stroke-linecap='round'/%3E%3C/mask%3E%3Crect width='366' height='225' fill='white' mask='url(%23ticket)'/%3E%3C/svg%3E") !important;
  -webkit-mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-size: 100% 100% !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 366 225' preserveAspectRatio='none'%3E%3Cmask id='ticket' maskUnits='userSpaceOnUse' x='0' y='0' width='366' height='225' style='mask-type:luminance'%3E%3Crect width='366' height='225' rx='16' fill='white'/%3E%3Ccircle cx='0' cy='147' r='11' fill='black'/%3E%3Ccircle cx='366' cy='147' r='11' fill='black'/%3E%3Cpath d='M3 147H363' fill='none' stroke='black' stroke-width='2' stroke-dasharray='10 8' stroke-linecap='round'/%3E%3C/mask%3E%3Crect width='366' height='225' fill='white' mask='url(%23ticket)'/%3E%3C/svg%3E") !important;
  mask-position: center !important;
  mask-repeat: no-repeat !important;
  mask-size: 100% 100% !important;
}

body[data-page="home"] .home > .index-logic .logic-card > .nc-ratio-card__inner {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body[data-page="home"] .home > .index-logic .logic-card > :where(.background, .background_04, .background_06, .background_08, .background_10, .background_12),
body[data-page="home"] .home > .index-logic .logic-card > .nc-ratio-card__inner > :where(.background, .background_04, .background_06, .background_08, .background_10, .background_12) {
  inset: 0 !important;
  width: 366px !important;
  height: 225px !important;
  z-index: 0 !important;
  background: linear-gradient(
    180deg,
    #1D1F22 0%,
    #17191C 64%,
    color-mix(in srgb, var(--logic-accent) 9%, #17191C) 100%
  ) !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

body[data-page="home"] .home > .index-logic .logic-card .logic-card__cutout {
  position: absolute !important;
  inset: 0 !important;
  width: 366px !important;
  height: 225px !important;
  z-index: 1 !important;
  display: block !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

body[data-page="home"] .home > .index-logic .logic-card .logic-card__cutout svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

body[data-page="home"] .home > .index-logic .logic-card .logic-card__cutout path {
  fill: none !important;
  stroke: color-mix(in srgb, var(--logic-accent) 34%, #34363B) !important;
  stroke-width: 1.5px !important;
  vector-effect: non-scaling-stroke !important;
}

body[data-page="home"] .home > .index-logic .logic-card :where(.image, .image_01, .image_02, .image_03, .image_04, .image_05) {
  left: 16px !important;
  top: 18px !important;
  width: 112px !important;
  height: 112px !important;
  z-index: 2 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  object-fit: cover !important;
}

body[data-page="home"] .home > .index-logic .logic-card :where(.event-name, .event-name_01, .event-name_02, .event-name_03, .event-name_04, .event-name_05) {
  left: 140px !important;
  top: 22px !important;
  width: 210px !important;
  height: 28px !important;
  z-index: 2 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

body[data-page="home"] .home > .index-logic .logic-card :where(.eventname_span, .eventname_01_span, .eventname_02_span, .eventname_03_span, .eventname_04_span, .eventname_05_span) {
  color: var(--nc-text, #F5F5F7) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
}

body[data-page="home"] .home > .index-logic .logic-card :where(.session-label, .session-label_01, .session-label_02, .session-label_03, .session-label_04, .session-label_05) {
  left: 140px !important;
  top: 61px !important;
  width: 210px !important;
  z-index: 2 !important;
}

body[data-page="home"] .home > .index-logic .logic-card :where(.sessionlabel_span, .sessionlabel_01_span, .sessionlabel_02_span, .sessionlabel_03_span, .sessionlabel_04_span, .sessionlabel_05_span) {
  color: var(--nc-text-muted, #9B9CA3) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
}

body[data-page="home"] .home > .index-logic .logic-card :where(.text-8-hours-59-minutes, .session-time, .session-time_01, .session-time_02, .session-time_03, .session-time_04) {
  left: 140px !important;
  top: 80px !important;
  width: 210px !important;
  z-index: 2 !important;
  white-space: nowrap !important;
}

body[data-page="home"] .home > .index-logic .logic-card :where(.fhours59minutes_span, .sessiontime_span, .sessiontime_01_span, .sessiontime_02_span, .sessiontime_03_span, .sessiontime_04_span) {
  color: var(--nc-text, #F5F5F7) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.15 !important;
}

body[data-page="home"] .home > .index-logic .logic-card :where(.booking-details, .booking-details_01, .booking-details_02, .booking-details_03, .booking-details_04, .booking-details_05) {
  left: 140px !important;
  top: 109px !important;
  width: 194px !important;
  height: 22px !important;
  z-index: 2 !important;
}

body[data-page="home"] .home > .index-logic .logic-card :where(.booking-details, .booking-details_01, .booking-details_02, .booking-details_03, .booking-details_04, .booking-details_05)
  > :where(.background_01, .background_05, .background_07, .background_09, .background_11, .background_13) {
  inset: 0 !important;
  width: 194px !important;
  height: 22px !important;
  background: rgba(245, 245, 247, 0.24) !important;
  border: 0 !important;
  border-radius: 4px !important;
}

body[data-page="home"] .home > .index-logic .logic-card :where(.booking-info, .booking-info_01, .booking-info_02, .booking-info_03, .booking-info_04, .booking-info_05) {
  inset: 0 !important;
  width: 194px !important;
  height: 22px !important;
  padding: 0 8px !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
}

body[data-page="home"] .home > .index-logic .logic-card :where(.bookinginfo_span, .bookinginfo_01_span, .bookinginfo_02_span, .bookinginfo_03_span, .bookinginfo_04_span, .bookinginfo_05_span) {
  color: #F5F5F7 !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}


body[data-page="home"] .home > .index-logic .logic-card :where(
  .end-note,
  .end-note_01,
  .invite-your-friends_01,
  .complete-remaining-payment_01,
  .resume-your-booking_01,
  .continue-playing
) {
  left: 16px !important;
  top: 159px !important;
  width: 270px !important;
  height: 58px !important;
  z-index: 2 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

body[data-page="home"] .home > .index-logic .logic-card :where(
  .endnote_span,
  .endnote_01_span,
  .inviteyourfriends_01_span,
  .completeremainingpayment_01_span,
  .resumeyourbooking_01_span,
  .continueplaying_span
) {
  color: var(--nc-text, #F5F5F7) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-shadow: none !important;
}

body[data-page="home"] .home > .index-logic .logic-card :where(.tickets, .tickets_01, .tickets_02) {
  display: block !important;
  left: 280px !important;
  top: 126px !important;
  width: 69px !important;
  height: 69px !important;
  z-index: 5 !important;
}

body[data-page="home"] .home > .index-logic .logic-card :where(.tickets, .tickets_01, .tickets_02) img {
  display: block !important;
  width: 69px !important;
  height: 69px !important;
}

body[data-page="home"] .home > .index-logic .logic-card .fi_9897273 {
  display: block !important;
  left: 307px !important;
  top: 126px !important;
  width: 42px !important;
  height: 42px !important;
  z-index: 5 !important;
}

body[data-page="home"] .home > .index-logic .logic-card .fi_9897273 img {
  display: block !important;
  width: 42px !important;
  height: 42px !important;
}

body[data-page="home"] .home > .index-logic .logic-card .controller-icon {
  display: block !important;
  left: 319px !important;
  top: 132px !important;
  width: 30px !important;
  height: 30px !important;
  z-index: 5 !important;
}

body[data-page="home"] .home > .index-logic .logic-card .controller-icon img {
  display: block !important;
  width: 30px !important;
  height: 30px !important;
}

body[data-page="home"] .home > .index-logic .logic-card[data-logic-variant="invite"] {
  --logic-accent: #CDA641;
}

body[data-page="home"] .home > .index-logic .logic-card[data-logic-variant="complete"] {
  --logic-accent: #FF453A;
}

body[data-page="home"] .home > .index-logic .logic-card[data-logic-variant="resume"] {
  --logic-accent: #FF8F3A;
}

body[data-page="home"] .home > .index-logic .logic-card[data-logic-variant="continue"] {
  --logic-accent: #E83AFF;
}

body[data-page="home"] .home > .index-logic .logic-card[data-logic-variant="confirmedSoon"],
body[data-page="home"] .home > .index-logic .logic-card[data-logic-variant="confirmedLater"] {
  --logic-accent: #1F80FF;
}

body[data-page="home"] .home > .index-logic .logic-card:focus-visible {
  outline: 3px solid var(--logic-accent) !important;
  outline-offset: 3px !important;
}

@media (hover: hover) and (pointer: fine) {
  body[data-page="home"] .home > .index-logic .logic-card:hover {
    filter: brightness(1.07) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .home > .index-logic .logic-card {
    transition: none !important;
  }
}

/* Shared logic-card finishing details. These preserve the 366×225 ticket
   artboard and apply equally to invite, payment, resume and ticket states. */
body[data-page="home"] .home > .index-logic .logic-card :where(
  .booking-details,
  .booking-details_01,
  .booking-details_02,
  .booking-details_03,
  .booking-details_04,
  .booking-details_05
) {
  width: fit-content !important;
  min-width: 0 !important;
  max-width: 194px !important;
  padding-inline: 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background: rgba(245, 245, 247, 0.24) !important;
  border-radius: 4px !important;
}

body[data-page="home"] .home > .index-logic .logic-card :where(
  .booking-details,
  .booking-details_01,
  .booking-details_02,
  .booking-details_03,
  .booking-details_04,
  .booking-details_05
) > :where(
  .background_01,
  .background_05,
  .background_07,
  .background_09,
  .background_11,
  .background_13
) {
  display: none !important;
}

body[data-page="home"] .home > .index-logic .logic-card :where(
  .booking-info,
  .booking-info_01,
  .booking-info_02,
  .booking-info_03,
  .booking-info_04,
  .booking-info_05
) {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  height: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
}

body[data-page="home"] .home > .index-logic .logic-card :where(
  .bookinginfo_span,
  .bookinginfo_01_span,
  .bookinginfo_02_span,
  .bookinginfo_03_span,
  .bookinginfo_04_span,
  .bookinginfo_05_span
) {
  display: block !important;
  max-width: 100% !important;
}

body[data-page="home"] .home > .index-logic .logic-card .fi_9897273 {
  left: auto !important;
  right: 16px !important;
  top: 124px !important;
  width: 46px !important;
  height: 46px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

body[data-page="home"] .home > .index-logic .logic-card .fi_9897273 img {
  width: 36px !important;
  height: 36px !important;
  object-fit: contain !important;
}

/* Shared state-icon surface: accent-aware without changing the ticket
   skeleton or the semantic artwork used by each logic-card variant. */
body[data-page="home"] .home > .index-logic .logic-card .logic-card__state-icon {
  left: auto !important;
  right: 16px !important;
  top: 123px !important;
  width: 48px !important;
  height: 48px !important;
  padding: 2px !important;
  display: grid !important;
  place-items: center !important;
  z-index: 5 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease !important;
}

body[data-page="home"] .home > .index-logic .logic-card .logic-card__state-icon > img {
  display: block !important;
  width: 34px !important;
  height: 34px !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

body[data-page="home"] .home > .index-logic .logic-card .logic-card__state-icon--ticket {
  padding: 2px !important;
}

body[data-page="home"] .home > .index-logic .logic-card .logic-card__state-icon--ticket > img {
  width: 44px !important;
  height: 44px !important;
}

body[data-page="home"] .home > .index-logic .logic-card .logic-card__state-icon--payment > img {
  width: 27px !important;
  height: 27px !important;
}

/* The live-session controller is an action cue, not a ticket punch. Keep it
   in the footer so it never collides with the perforation line. */
body[data-page="home"] .home > .index-logic .logic-card .logic-card__state-icon--controller {
  right: 18px !important;
  top: 171px !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
}

body[data-page="home"] .home > .index-logic .logic-card .logic-card__state-icon--controller > img {
  width: 26px !important;
  height: 26px !important;
}

@media (hover: hover) and (pointer: fine) {
  body[data-page="home"] .home > .index-logic .logic-card:hover .logic-card__state-icon {
    transform: translateY(-2px) scale(1.025) !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .home > .index-logic .logic-card .logic-card__state-icon {
    transition: none !important;
  }
}