/* Gate 8C — Event detail + seating presentation (commerce UX only)
   Tokens: --primary-color / --brand-* / --ui-* from styles.blade.php
   Does not alter checkout, seat selection logic, or form contracts.
*/

/* —— Event detail shell —— */
.g8c-event.event-details-section {
  background:
    linear-gradient(180deg, #f8fafc 0%, #fff 28%, #fff 100%);
}

.g8c-event .event-details-hero {
  margin-bottom: 1.5rem;
  gap: 1rem;
}

.g8c-event .event-top-date {
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.g8c-event .event-details-content-inner .inner-title {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ui-text, var(--brand-dark, #0A0A0A));
}

.g8c-event .summernote-content {
  color: var(--ui-text-muted, var(--brand-neutral, #3F3F46));
  line-height: 1.65;
}

/* Meta chips / icons — neutral, never brand-blue icons */
.g8c-event .event-bottom-content .time-info,
.g8c-event .event-details-content .time-info {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.g8c-event .event-bottom-content .time-info li,
.g8c-event .event-details-content .time-info li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: var(--ui-surface, #fff);
  border: 1px solid var(--ui-border, #e2e8f0);
  font-size: 0.8125rem;
  color: var(--ui-text-muted, var(--brand-neutral, #3F3F46));
}

.g8c-event .event-bottom-content .time-info li i,
.g8c-event .event-details-content .time-info li i,
.g8c-event .event-details-meta-icon,
.g8c-event .event-details-meta-icon i,
.g8c-event .event-details-meta-item i,
.g8c-event .event-details-meta-item .fa-map-marker-alt,
.g8c-event .event-details-meta-item .fas {
  color: var(--ui-icon, #3F3F46) !important;
}

.g8c-event .event-details-action-bar .event-top-action-btn,
.g8c-event .event-details-action-bar .event-top-action-btn i {
  color: var(--ui-icon, #3F3F46) !important;
  background: transparent !important;
}

.g8c-event .event-details-action-bar .event-top-action-btn--bookmark.is-active,
.g8c-event .event-details-action-bar .event-top-action-btn--bookmark.is-active i {
  color: var(--ui-icon-active, var(--primary-color)) !important;
}

/* Secondary controls — calendar / venue chips not semantic green/red */
.g8c-commerce-panel .dropdown .theme-btn,
.g8c-commerce-panel a.theme-btn:not(.btn_seat_mapping_slot):not([type='submit']):not(.w-100),
.g8c-commerce-panel .btn-success,
.g8c-commerce-panel .btn-warning,
.g8c-event .event-details-information .btn-success,
.g8c-event .dropdown-toggle.theme-btn {
  background: var(--ui-surface, #fff) !important;
  color: var(--ui-text, #0A0A0A) !important;
  border: 1px solid var(--ui-border, #e2e8f0) !important;
  box-shadow: none !important;
}

.g8c-commerce-panel .dropdown .theme-btn i,
.g8c-event .dropdown-toggle.theme-btn i {
  color: var(--ui-icon, #3F3F46) !important;
}

.g8c-event .event-details-image--no-gallery .event-details-action-bar,
.g8c-event .event-details-image--no-gallery .buttons {
  position: static;
  margin-top: 0.75rem;
  justify-content: flex-end;
}

/* —— Commerce sticky panel —— */
.g8c-commerce-panel.sidebar-sticky {
  position: sticky;
  top: 1.25rem;
}

.g8c-commerce-panel .event-details-information {
  border-radius: 1.25rem;
  border: 1px solid var(--ui-border, #e2e8f0);
  background: var(--ui-surface, #fff);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 12px 32px rgba(15, 23, 42, 0.06);
  padding: 1.25rem 1.35rem 1.4rem;
}

.g8c-commerce-panel .event-details-information .form-group label {
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--ui-text-muted, var(--brand-neutral, #3F3F46));
  letter-spacing: 0.02em;
}

.g8c-commerce-panel .event-details-information .form-control,
.g8c-commerce-panel .event-details-information select.form-control {
  border-radius: 0.75rem;
  border-color: var(--ui-border, #e2e8f0);
  min-height: 44px;
}

.g8c-commerce-panel .event-details-information .form-control:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 22%, transparent);
}

/* Ticket rows / cards */
.g8c-commerce-panel .price-count,
.g8c-commerce-panel .ticket-item,
.g8c-commerce-panel .single-ticket,
.g8c-commerce-panel .variation-ticket,
.g8c-commerce-panel .event-ticket-box,
.g8c-commerce-panel .ticket-box {
  border-radius: 1rem;
  border: 1px solid var(--ui-border, #e8edf3);
  background: #fafbfc;
  padding: 0.9rem 1rem;
  margin-bottom: 0.75rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.g8c-commerce-panel .price-count:hover,
.g8c-commerce-panel .ticket-item:hover,
.g8c-commerce-panel .single-ticket:hover,
.g8c-commerce-panel .variation-ticket:hover,
.g8c-commerce-panel .event-ticket-box:hover,
.g8c-commerce-panel .ticket-box:hover {
  border-color: color-mix(in srgb, var(--brand-neutral, #3F3F46) 28%, #e8edf3);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.g8c-commerce-panel .price-count-current,
.g8c-commerce-panel .price,
.g8c-commerce-panel .price-count-amount,
.g8c-commerce-panel .price-count-currency {
  color: var(--ui-price, #0A0A0A);
  font-weight: 700;
}

.g8c-commerce-panel .total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 0.85rem;
  background: #f8fafc;
  border: 1px solid var(--ui-border, #e2e8f0);
}

.g8c-commerce-panel .total b {
  font-size: 0.85rem;
  color: var(--ui-text-muted, var(--brand-neutral, #3F3F46));
  font-weight: 650;
}

.g8c-commerce-panel .total #total_price,
.g8c-commerce-panel .total .h4 {
  color: var(--ui-price, #0A0A0A);
  font-weight: 750;
  margin: 0;
}

/* Primary CTA only — submit / buy / confirm */
.g8c-commerce-panel .theme-btn[type='submit'] {
  border-radius: 0.85rem;
  min-height: 48px;
  font-weight: 700;
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--primary-color) 32%, transparent);
}

.g8c-commerce-panel .theme-btn[type='submit']:hover {
  filter: brightness(0.96);
}

/* Secondary buttons in commerce — surface + border + dark text */
.g8c-commerce-panel .theme-btn.style-two,
.g8c-commerce-panel .btn:not(.theme-btn):not([type='submit']):not(#buyNowSubmit),
.g8c-commerce-panel .quantity-input .quantity-up,
.g8c-commerce-panel .quantity-input .quantity-down {
  background: var(--ui-surface, #fff);
  color: var(--ui-text, #0A0A0A);
  border-color: var(--ui-border, #e2e8f0);
}

/* Quantity stepper polish */
.g8c-commerce-panel .quantity-input {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--ui-border, #e2e8f0);
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--ui-surface, #fff);
}

.g8c-commerce-panel .quantity-input .quantity-up,
.g8c-commerce-panel .quantity-input .quantity-down {
  min-width: 40px;
  min-height: 40px;
  border: 0;
  background: #f1f5f9;
  color: var(--ui-text, #0A0A0A);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.g8c-commerce-panel .quantity-input .quantity-up:hover,
.g8c-commerce-panel .quantity-input .quantity-down:hover {
  background: #e2e8f0;
  color: var(--ui-text, #0A0A0A);
}

.g8c-commerce-panel .quantity-input .quantity {
  width: 3rem;
  min-height: 40px;
  border: 0;
  text-align: center;
  font-weight: 700;
  color: var(--ui-text, #0A0A0A);
  background: transparent;
  -moz-appearance: textfield;
}

.g8c-commerce-panel .quantity-input .quantity::-webkit-outer-spin-button,
.g8c-commerce-panel .quantity-input .quantity::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Seated CTA — primary brand (buy flow) */
.g8c-commerce-panel .btn_seat_mapping_slot,
.g8c-event .btn_seat_mapping_slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0.45rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--primary-color);
  background: var(--primary-color);
  color: #fff !important;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--primary-color) 28%, transparent);
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

.g8c-commerce-panel .btn_seat_mapping_slot:hover:not(:disabled),
.g8c-event .btn_seat_mapping_slot:hover:not(:disabled) {
  filter: brightness(0.96);
  transform: translateY(-1px);
  color: #fff !important;
  text-decoration: none;
}

.g8c-commerce-panel .btn_seat_mapping_slot:disabled,
.g8c-commerce-panel .btn_seat_mapping_slot.btn-warning {
  opacity: 0.72;
  box-shadow: none;
  transform: none;
}

/* —— Mobile sticky purchase bar —— */
.g8c-mobile-purchase {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--ui-border, #e2e8f0);
  box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.1);
}

.g8c-mobile-purchase__total {
  flex: 1;
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 750;
  color: var(--ui-price, #0A0A0A);
  line-height: 1.25;
}

.g8c-mobile-purchase__total [data-g8c-total-mirror] {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.g8c-mobile-purchase__cta {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0.55rem 1.15rem;
  border-radius: 0.75rem;
  border: 0;
  background: var(--primary-color);
  color: #fff;
  font-weight: 700;
  font-size: 0.875rem;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--primary-color) 30%, transparent);
}

.g8c-mobile-purchase__cta:hover,
.g8c-mobile-purchase__cta:focus {
  color: #fff;
  filter: brightness(0.96);
  outline: none;
}

@media (min-width: 992px) {
  .g8c-mobile-purchase {
    display: none !important;
  }
}

@media (max-width: 991.98px) {
  .g8c-event.event-details-section {
    padding-bottom: 5.5rem;
  }
}

/* —— Refund accordion —— */
.g8c-accordion {
  border-radius: 0.85rem;
  border: 1px solid var(--ui-border, #e2e8f0);
  background: var(--ui-surface, #fff);
  padding: 0.85rem 1rem;
  margin-bottom: 1.25rem;
}

.g8c-accordion > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ui-text, #0A0A0A);
  list-style: none;
}

.g8c-accordion > summary::-webkit-details-marker {
  display: none;
}

.g8c-accordion > summary::after {
  content: '+';
  float: right;
  color: var(--ui-icon, #3F3F46);
  font-weight: 700;
}

.g8c-accordion[open] > summary::after {
  content: '−';
}

.g8c-accordion > p,
.g8c-accordion .g8c-accordion__body {
  margin: 0.75rem 0 0;
  color: var(--ui-text-muted, #3F3F46);
  line-height: 1.6;
}

/* —— Seat modal workspace —— */
#seatMappingModal .g8c-seat-modal.modal-content {
  border: 0;
  border-radius: 1rem;
  overflow: hidden;
  background: #f8fafc;
}

#seatMappingModal .g8c-seat-modal .modal-header {
  position: relative;
  flex-direction: column;
  align-items: stretch;
  gap: 0.65rem;
  padding: 1rem 1.15rem 0.85rem;
  background: var(--ui-surface, #fff);
  border-bottom: 1px solid var(--ui-border, #e2e8f0);
}

#seatMappingModal .g8c-seat-modal .modal-title {
  font-weight: 750;
  color: var(--ui-text, #0A0A0A);
  letter-spacing: -0.01em;
  padding-right: 2.5rem;
}

#seatMappingModal .g8c-seat-modal .close.close_slot_modal {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 1px solid #e4e4e7;
  border-radius: 12px;
  background: #fff;
  opacity: 1;
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1;
  color: #0a0a0a;
  text-shadow: none;
  z-index: 2;
}

#seatMappingModal .g8c-seat-modal .close.close_slot_modal span {
  color: #0a0a0a;
}

#seatMappingModal .g8c-seat-modal .close.close_slot_modal:hover,
#seatMappingModal .g8c-seat-modal .close.close_slot_modal:focus {
  background: #f4f4f5;
  color: #0a0a0a;
  opacity: 1;
}

#seatMappingModal .g8c-seat-modal .g8c-seat-summary,
#seatMappingModal .g8c-seat-modal .selected_sloat_wrap_main {
  margin: 0;
  padding: 0.65rem 0.85rem;
  border-radius: 0.75rem;
  background: #f8fafc;
  border: 1px solid var(--ui-border, #e2e8f0);
}

#seatMappingModal .g8c-seat-modal .selected_sloat_wrap {
  font-size: 0.875rem;
  color: var(--ui-text-muted, #3F3F46);
  flex-wrap: wrap;
  gap: 0.25rem;
}

#seatMappingModal .g8c-seat-modal #selected_sloat {
  font-weight: 700;
  color: var(--ui-text, #0A0A0A);
}

#seatMappingModal .g8c-seat-modal .modal-body {
  padding: 0.75rem;
  background: #eef2f7;
}

#seatMappingModal .g8c-seat-modal .seat-map-wrapper,
#seatMappingModal .g8c-seat-modal #sloat_map_image {
  border-radius: 0.75rem;
  background: var(--ui-surface, #fff);
  min-height: 240px;
}

#seatMappingModal .g8c-seat-modal .zoom-controls {
  display: flex;
  gap: 0.4rem;
  padding: 0.35rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
  border: 1px solid var(--ui-border, #e2e8f0);
}

#seatMappingModal .g8c-seat-modal .zoom-controls .btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 0.65rem;
  border: 1px solid var(--ui-border, #cbd5e1);
  background: var(--ui-surface, #fff);
  color: var(--ui-text, #0A0A0A);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1;
}

#seatMappingModal .g8c-seat-modal .zoom-controls .btn:hover,
#seatMappingModal .g8c-seat-modal .zoom-controls .btn:focus {
  border-color: color-mix(in srgb, var(--brand-neutral, #3F3F46) 40%, #fff);
  color: var(--ui-text, #0A0A0A);
  background: #f1f5f9;
}

#seatMappingModal .g8c-seat-modal .modal-footer,
#seatMappingModal .g8c-seat-modal .g8c-seat-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.85rem 1.1rem;
  background: var(--ui-surface, #fff);
  border-top: 1px solid var(--ui-border, #e2e8f0);
}

#seatMappingModal .g8c-seat-modal .g8c-seat-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  font-size: 0.8125rem;
  color: var(--ui-text-muted, #3F3F46);
}

#seatMappingModal .g8c-seat-modal .g8c-seat-legend .seat {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  margin-right: 0.35rem;
  vertical-align: -2px;
  border: 1px solid transparent;
}

#seatMappingModal .g8c-seat-modal .g8c-seat-legend .seat.available {
  background: var(--free-background, #1abc9c);
  border-color: var(--free-border-color, #4e6a64);
}

#seatMappingModal .g8c-seat-modal .g8c-seat-legend .seat.selected {
  background: var(--selected-background, #e67e22);
  border-color: var(--selected-background, #e67e22);
}

#seatMappingModal .g8c-seat-modal .g8c-seat-legend .seat.unavailable {
  background: var(--unavailable-background, #cccccc);
  border-color: var(--unavailable-border-color, #727272);
}

#seatMappingModal .g8c-seat-modal #buyNowSubmit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 48px;
  padding: 0.65rem 1.25rem;
  border-radius: 0.85rem;
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0;
  box-shadow: none;
}

#seatMappingModal .g8c-seat-modal #buyNowSubmit #buy_now_label {
  font-weight: 500;
  opacity: 0.8;
}

#seatMappingModal .g8c-seat-modal #buyNowSubmit #seat_price {
  font-weight: 650;
  opacity: 1;
  color: inherit;
}

@media (max-width: 767.98px) {
  #seatMappingModal .modal-dialog {
    margin: 0;
    max-width: 100% !important;
    height: 100%;
  }

  #seatMappingModal .g8c-seat-modal.modal-content {
    border-radius: 0;
    min-height: 100%;
  }

  #seatMappingModal .g8c-seat-modal .modal-footer,
  #seatMappingModal .g8c-seat-modal .g8c-seat-footer {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding-bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
  }

  #seatMappingModal .g8c-seat-modal #buyNowSubmit {
    width: 100%;
  }

  #seatMappingModal .g8c-seat-modal .g8c-seat-legend {
    width: 100%;
  }
}

/* Related / classic event cards — dark prices, never brand blue */
.g8c-event .event-item .price,
.related-event-slider .price,
.related-event-slider .event-item .price-remain .price,
.g8c-event .price-remain .price {
  color: var(--ui-price, #0A0A0A);
}

.g8c-event .event-item .event-meta i,
.related-event-slider .event-item .event-meta i {
  color: var(--ui-icon, #3F3F46);
}

/* Event listing / organizer classic cards (when this sheet is present) + shared filter secondary */
.event-page-section .event-item .price,
.event-page-section .price-remain .price,
.author-area .event-item .price,
.author-area .price-remain .price,
.organizer-details-page .event-item .price,
.organizer-details-page .price-remain .price {
  color: var(--ui-price, #0A0A0A);
}

.event-filters-toggle,
.filter-toolbar-btn {
  background: var(--ui-surface, #ffffff) !important;
  color: var(--ui-text, #0A0A0A) !important;
  border: 1px solid var(--ui-border, color-mix(in srgb, #3F3F46 18%, #ffffff)) !important;
}

.event-filters-toggle:hover,
.event-filters-toggle:focus,
.filter-toolbar-btn:hover,
.filter-toolbar-btn:focus {
  background: #f8fafc !important;
  color: var(--ui-text, #0A0A0A) !important;
  border-color: color-mix(in srgb, var(--brand-neutral, #3F3F46) 35%, #fff) !important;
}

/* —— Reduced motion —— */
@media (prefers-reduced-motion: reduce) {
  .g8c-event *,
  .g8c-event *::before,
  .g8c-event *::after,
  .g8c-mobile-purchase,
  .g8c-mobile-purchase *,
  #seatMappingModal .g8c-seat-modal *,
  #seatMappingModal .g8c-seat-modal *::before,
  #seatMappingModal .g8c-seat-modal *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }

  .g8c-commerce-panel .btn_seat_mapping_slot:hover:not(:disabled),
  .g8c-event .btn_seat_mapping_slot:hover:not(:disabled) {
    transform: none;
  }
}