/* =============================================================
   knoxkpop-amelia.css
   Amelia (v2) shortcode skin — Knox Kpop "ticket" treatment
   -------------------------------------------------------------
   Drop into the active WP theme:
     1. Upload this file to /wp-content/themes/<your-theme>/css/
     2. Enqueue AFTER Amelia's frontend bundle so we win specificity:
          add_action('wp_enqueue_scripts', function () {
            wp_enqueue_style(
              'knoxkpop-amelia',
              get_stylesheet_directory_uri() . '/css/knoxkpop-amelia.css',
              ['amelia-booking-css', 'amelia-elementor-widget-font-css'],
              '1.0'
            );
          }, 100);
     3. Pages using [ameliaeventslistbooking], [ameliabooking],
        [ameliacatalog], [ameliasearch], [ameliastepbooking] all
        inherit the same skin via the .amelia-v2-booking root.

   Scoping note: every rule is scoped under .amelia-v2-booking to
   avoid bleeding into the rest of the WP theme. We use !important
   sparingly — only on properties Amelia inlines via Vue style
   bindings (colors, gradients) where specificity alone won't win.
   ============================================================= */

:root {
  --kk-bg:           #FFE7F0;
  --kk-bg-2:         #FFD9E8;
  --kk-paper:        #FFFFFF;
  --kk-ink:          #2A1530;
  --kk-ink-soft:     #5C3D5E;
  --kk-ink-muted:    #8E6B8E;
  --kk-accent:       #FF3D8B;
  --kk-accent-2:     #7A5AE0;
  --kk-accent-3:     #FFC93C;
  --kk-display-font: 'Bricolage Grotesque', 'Archivo Black', system-ui, sans-serif;
  --kk-body-font:    'Inter Tight', system-ui, sans-serif;
  --kk-shadow:       6px 6px 0 var(--kk-ink);
}

/* =============================================================
   ROOT — typography + base for any Amelia v2 mount
   ============================================================= */
.amelia-v2-booking,
.amelia-v2-booking * {
  font-family: var(--kk-body-font) !important;
  letter-spacing: 0;
}
.amelia-v2-booking {
  background: transparent !important;
  color: var(--kk-ink) !important;
  --color-primary: var(--kk-accent) !important;
  --color-primary-darker: color-mix(in oklab, var(--kk-accent) 80%, black) !important;
}

/* Kill Amelia's default Oswald headings — match the ticket cards */
.amelia-v2-booking h1,
.amelia-v2-booking h2,
.amelia-v2-booking h3,
.amelia-v2-booking h4,
.amelia-v2-booking [class*="-heading"],
.amelia-v2-booking [class*="-title"] {
  font-family: var(--kk-display-font) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--kk-ink) !important;
}

/* =============================================================
   EVENTS LIST — [ameliaeventslistbooking]
   Targets Amelia's event cards and re-skins them as concert
   tickets: perforated stub on the left, dashed tear line, big
   bubblegum "Reserve" CTA on the right.
   ============================================================= */
.amelia-v2-booking .am-fl-events,
.amelia-v2-booking [class*="event-list"],
.amelia-v2-booking [class*="events-list"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  background: transparent !important;
  padding: 0 !important;
}

/* Each event card = one ticket */
.amelia-v2-booking .am-fl-events__event,
.amelia-v2-booking [class*="event-card"],
.amelia-v2-booking [class*="event-item"],
.amelia-v2-booking [class*="event-block"] {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 120px 1fr auto !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
  background: var(--kk-paper) !important;
  border: 2px solid var(--kk-ink) !important;
  border-radius: 22px !important;
  box-shadow: var(--kk-shadow) !important;
  overflow: hidden !important;
  transition: transform 180ms ease, box-shadow 180ms ease !important;
}
.amelia-v2-booking .am-fl-events__event:hover,
.amelia-v2-booking [class*="event-card"]:hover,
.amelia-v2-booking [class*="event-item"]:hover,
.amelia-v2-booking [class*="event-block"]:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 8px 8px 0 var(--kk-ink) !important;
}

/* DATE STUB (left column) — perforated edge */
.amelia-v2-booking [class*="event-date"],
.amelia-v2-booking [class*="event-day"]:not([class*="event-day-block"]),
.amelia-v2-booking .am-fl-events__event-date {
  background: var(--kk-accent) !important;
  color: white !important;
  padding: 24px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-family: var(--kk-display-font) !important;
  position: relative !important;
  border-right: 2px dashed var(--kk-ink) !important;
}
/* Perforation dots above + below the dashed edge */
.amelia-v2-booking [class*="event-date"]::before,
.amelia-v2-booking .am-fl-events__event-date::before,
.amelia-v2-booking [class*="event-date"]::after,
.amelia-v2-booking .am-fl-events__event-date::after {
  content: "";
  position: absolute;
  right: -10px;
  width: 18px;
  height: 18px;
  background: var(--kk-bg);
  border: 2px solid var(--kk-ink);
  border-radius: 50%;
}
.amelia-v2-booking [class*="event-date"]::before,
.amelia-v2-booking .am-fl-events__event-date::before { top: -10px; }
.amelia-v2-booking [class*="event-date"]::after,
.amelia-v2-booking .am-fl-events__event-date::after  { bottom: -10px; }

/* Big day-of-month numeral */
.amelia-v2-booking [class*="event-date"] [class*="day"],
.amelia-v2-booking [class*="event-date"] strong,
.amelia-v2-booking .am-fl-events__event-date span:first-child {
  font-size: 44px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
}
/* Month abbrev */
.amelia-v2-booking [class*="event-date"] [class*="month"],
.amelia-v2-booking .am-fl-events__event-date span:last-child {
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  margin-top: 4px !important;
  opacity: 0.95 !important;
}

/* MIDDLE — title + meta */
.amelia-v2-booking .am-fl-events__event-info,
.amelia-v2-booking [class*="event-info"],
.amelia-v2-booking [class*="event-content"],
.amelia-v2-booking [class*="event-body"] {
  padding: 22px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 6px !important;
  background: transparent !important;
}
.amelia-v2-booking [class*="event-name"],
.amelia-v2-booking [class*="event-title"] {
  font-family: var(--kk-display-font) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--kk-ink) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  margin: 0 0 4px !important;
}
.amelia-v2-booking [class*="event-time"],
.amelia-v2-booking [class*="event-period"],
.amelia-v2-booking [class*="event-location"],
.amelia-v2-booking [class*="event-employee"],
.amelia-v2-booking [class*="event-capacity"] {
  font-size: 13px !important;
  color: var(--kk-ink-soft) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.amelia-v2-booking [class*="event-time"] + [class*="event-location"]::before,
.amelia-v2-booking [class*="event-period"] + [class*="event-location"]::before {
  content: "·";
  margin-right: 6px;
  color: var(--kk-ink-muted);
}

/* RIGHT — price + CTA stack */
.amelia-v2-booking [class*="event-price"],
.amelia-v2-booking [class*="event-cta"],
.amelia-v2-booking [class*="event-book"] {
  align-self: center !important;
}
.amelia-v2-booking [class*="event-price"] {
  font-family: var(--kk-display-font) !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--kk-ink) !important;
  padding-right: 8px !important;
}

/* Reserve button (Vue-bound, uses inline style — !important needed) */
.amelia-v2-booking button,
.amelia-v2-booking [class*="event-book"] button,
.amelia-v2-booking .el-button--primary,
.amelia-v2-booking [class*="-button"][class*="primary"] {
  background: var(--kk-ink) !important;
  background-image: none !important;
  color: white !important;
  border: 2px solid var(--kk-ink) !important;
  border-radius: 999px !important;
  padding: 14px 26px !important;
  font-family: var(--kk-body-font) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  margin: 16px 24px 16px 0 !important;
  cursor: pointer !important;
  transition: background 180ms ease, transform 180ms ease !important;
  box-shadow: none !important;
}
.amelia-v2-booking button:hover,
.amelia-v2-booking [class*="event-book"] button:hover,
.amelia-v2-booking .el-button--primary:hover {
  background: var(--kk-accent) !important;
  border-color: var(--kk-accent) !important;
  transform: translateY(-1px) !important;
}
.amelia-v2-booking button[disabled],
.amelia-v2-booking .el-button.is-disabled {
  background: var(--kk-bg-2) !important;
  color: var(--kk-ink-muted) !important;
  border-color: var(--kk-bg-2) !important;
  cursor: not-allowed !important;
}

/* Sold-out / closed state — strike across the ticket */
.amelia-v2-booking [class*="event-status"][class*="closed"],
.amelia-v2-booking [class*="event-status"][class*="full"],
.amelia-v2-booking [class*="event-status"][class*="canceled"] {
  background: var(--kk-ink) !important;
  color: white !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
}

/* =============================================================
   FILTERS BAR (above the events list)
   ============================================================= */
.amelia-v2-booking [class*="event-filter"],
.amelia-v2-booking [class*="filter-bar"] {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-bottom: 24px !important;
  padding: 0 !important;
  background: transparent !important;
}
.amelia-v2-booking [class*="event-filter"] select,
.amelia-v2-booking [class*="event-filter"] input,
.amelia-v2-booking [class*="event-filter"] .el-input__inner,
.amelia-v2-booking [class*="event-filter"] .el-select {
  background: white !important;
  border: 1.5px solid var(--kk-ink) !important;
  border-radius: 999px !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  color: var(--kk-ink) !important;
  box-shadow: none !important;
}

/* =============================================================
   BOOKING DIALOG (modal that opens after "Reserve")
   The shortcode pops a step-by-step modal — match its chrome to
   the rest of the site so the brand carries through.
   ============================================================= */
.amelia-v2-booking .el-dialog,
.amelia-v2-booking [class*="dialog"][class*="container"],
.amelia-v2-booking [class*="modal"][class*="content"] {
  background: var(--kk-paper) !important;
  border: 2px solid var(--kk-ink) !important;
  border-radius: 24px !important;
  box-shadow: var(--kk-shadow) !important;
  overflow: hidden !important;
}
.amelia-v2-booking .el-dialog__header,
.amelia-v2-booking [class*="dialog-header"] {
  background: var(--kk-accent) !important;
  color: white !important;
  padding: 20px 28px !important;
  border-bottom: 2px solid var(--kk-ink) !important;
}
.amelia-v2-booking .el-dialog__title,
.amelia-v2-booking [class*="dialog-header"] [class*="title"] {
  color: white !important;
  font-family: var(--kk-display-font) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

/* Form inputs inside the dialog */
.amelia-v2-booking input[type="text"],
.amelia-v2-booking input[type="email"],
.amelia-v2-booking input[type="tel"],
.amelia-v2-booking .el-input__inner,
.amelia-v2-booking textarea {
  background: var(--kk-bg) !important;
  border: 1.5px solid var(--kk-ink) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  color: var(--kk-ink) !important;
  font-family: var(--kk-body-font) !important;
  box-shadow: none !important;
  transition: border-color 180ms ease, background 180ms ease !important;
}
.amelia-v2-booking input:focus,
.amelia-v2-booking .el-input__inner:focus,
.amelia-v2-booking textarea:focus {
  background: white !important;
  border-color: var(--kk-accent) !important;
  outline: none !important;
}

/* Calendar cells (date/time picker inside the booking flow) */
.amelia-v2-booking [class*="cal-cell"],
.amelia-v2-booking .el-date-table td.available {
  border-radius: 10px !important;
  font-family: var(--kk-body-font) !important;
}
.amelia-v2-booking [class*="cal-cell"][class*="selected"],
.amelia-v2-booking .el-date-table td.current:not(.disabled) span {
  background: var(--kk-accent) !important;
  color: white !important;
}

/* Step indicator dots */
.amelia-v2-booking [class*="step"][class*="active"] {
  color: var(--kk-accent) !important;
}
.amelia-v2-booking [class*="step"][class*="done"] {
  color: var(--kk-ink) !important;
}

/* =============================================================
   CATALOG / SEARCH / STEP-BOOKING — light skin
   These shortcodes share Amelia's category card pattern. We just
   re-color the chrome; the layout stays Amelia's.
   ============================================================= */
.amelia-v2-booking [class*="categ"][class*="card"],
.amelia-v2-booking [class*="service"][class*="card"],
.amelia-v2-booking [class*="package"][class*="card"] {
  background: var(--kk-paper) !important;
  border: 2px solid var(--kk-ink) !important;
  border-radius: 18px !important;
  box-shadow: 4px 4px 0 var(--kk-ink) !important;
  transition: transform 180ms ease, box-shadow 180ms ease !important;
}
.amelia-v2-booking [class*="categ"][class*="card"]:hover,
.amelia-v2-booking [class*="service"][class*="card"]:hover,
.amelia-v2-booking [class*="package"][class*="card"]:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0 var(--kk-ink) !important;
}

/* =============================================================
   RESPONSIVE — stack the ticket on phones
   ============================================================= */
@media (max-width: 720px) {
  .amelia-v2-booking .am-fl-events__event,
  .amelia-v2-booking [class*="event-card"],
  .amelia-v2-booking [class*="event-item"],
  .amelia-v2-booking [class*="event-block"] {
    grid-template-columns: 1fr !important;
  }
  .amelia-v2-booking [class*="event-date"],
  .amelia-v2-booking .am-fl-events__event-date {
    border-right: none !important;
    border-bottom: 2px dashed var(--kk-ink) !important;
    padding: 18px !important;
    flex-direction: row !important;
    gap: 12px !important;
  }
  .amelia-v2-booking [class*="event-date"]::before,
  .amelia-v2-booking .am-fl-events__event-date::before {
    top: auto; bottom: -10px; left: -10px; right: auto;
  }
  .amelia-v2-booking [class*="event-date"]::after,
  .amelia-v2-booking .am-fl-events__event-date::after {
    top: auto; bottom: -10px; right: -10px;
  }
  .amelia-v2-booking [class*="event-date"] [class*="day"] {
    font-size: 36px !important;
  }
  .amelia-v2-booking button,
  .amelia-v2-booking [class*="event-book"] button {
    margin: 0 18px 18px !important;
    width: calc(100% - 36px) !important;
  }
}

/* =============================================================
   IMPLEMENTATION NOTES — for the dev wiring this up
   -------------------------------------------------------------
   • Most selectors use [class*="…"] because Amelia v2 builds
     scoped class names at runtime (e.g. .am-fl-events__event--xxxx).
     Inspect a live page once it's installed and tighten the
     selectors to the exact class names you see — that lets you
     drop most of the !important flags.
   • Amelia's primary color also lives in the plugin's
     Customize > Colors UI. Set primary to #FF3D8B there too so
     server-side rendered states (email links, calendar dots)
     match without CSS overrides.
   • The dashed-tear "perforation" dots on the date stub use the
     page background color (--kk-bg). If the WP page background
     is different, override --kk-bg in the page-template wrapper:
        <div class="kk-amelia-wrap" style="--kk-bg:#fff5f9;">
          [ameliaeventslistbooking]
        </div>
   ============================================================= */

/* =============================================================
   AMELIA v2 — actual rendered classes (.am-ec*)
   The selectors above target documented .am-fl-events__event* but
   the live build emits .am-ec (event card) sub-elements:
     .am-ec, .am-ec__period, .am-ec__period-date,
     .am-ec__period-date__day, .am-ec__period-date__month,
     .am-ec__period-time, .am-ec__info, .am-ec__info-name,
     .am-ec__info-availability, .am-ec__actions,
     .am-ec__actions-price, .am-ec__actions-btn
   ============================================================= */

/* Event-list wrapper — vertical stack with gaps */
.amelia-v2-booking .am-els,
.amelia-v2-booking .am-els__wrapper {
	display: flex !important;
	flex-direction: column !important;
	gap: 18px !important;
	background: transparent !important;
	padding: 0 !important;
}

/* Each event card — concert ticket */
.amelia-v2-booking .am-ec {
	position: relative !important;
	display: grid !important;
	grid-template-columns: 110px 1fr auto !important;
	align-items: stretch !important;
	gap: 0 !important;
	padding: 0 !important;
	background: var(--kk-paper) !important;
	border: 2px solid var(--kk-ink) !important;
	border-radius: 22px !important;
	box-shadow: var(--kk-shadow) !important;
	overflow: hidden !important;
	transition: transform 180ms ease, box-shadow 180ms ease !important;
	margin: 0 !important;
}
.amelia-v2-booking .am-ec:hover {
	transform: translate(-2px, -2px) !important;
	box-shadow: 8px 8px 0 var(--kk-ink) !important;
}

/* DATE STUB (left column) — magenta with perforated edge */
.amelia-v2-booking .am-ec__period {
	background: var(--kk-accent) !important;
	color: white !important;
	padding: 18px 12px !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	font-family: var(--kk-display-font) !important;
	position: relative !important;
	border-right: 2px dashed var(--kk-ink) !important;
	gap: 6px !important;
}
.amelia-v2-booking .am-ec__period::before,
.amelia-v2-booking .am-ec__period::after {
	content: "";
	position: absolute;
	right: -10px;
	width: 18px;
	height: 18px;
	background: var(--kk-bg);
	border: 2px solid var(--kk-ink);
	border-radius: 50%;
}
.amelia-v2-booking .am-ec__period::before { top: -10px; }
.amelia-v2-booking .am-ec__period::after  { bottom: -10px; }

/* Date stub day numeral + month abbrev */
.amelia-v2-booking .am-ec__period-date {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	color: white !important;
	gap: 0 !important;
}
.amelia-v2-booking .am-ec__period-date__day {
	font-family: var(--kk-display-font) !important;
	font-size: 38px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	letter-spacing: -0.04em !important;
	color: white !important;
}
.amelia-v2-booking .am-ec__period-date__month {
	font-size: 12px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.18em !important;
	margin-top: 4px !important;
	font-weight: 700 !important;
	color: white !important;
}
.amelia-v2-booking .am-ec__period-time {
	font-family: var(--kk-body-font) !important;
	font-size: 11px !important;
	letter-spacing: 0.04em !important;
	font-weight: 700 !important;
	margin-top: 6px !important;
	opacity: 0.95 !important;
	color: white !important;
}

/* MIDDLE — title, availability, other meta */
.amelia-v2-booking .am-ec__info {
	padding: 18px 22px !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	gap: 4px !important;
	background: transparent !important;
}
.amelia-v2-booking .am-ec__info-name {
	font-family: var(--kk-display-font) !important;
	font-size: 19px !important;
	font-weight: 800 !important;
	color: var(--kk-ink) !important;
	letter-spacing: -0.01em !important;
	line-height: 1.15 !important;
	margin: 0 0 4px !important;
}
.amelia-v2-booking .am-ec__info-availability {
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	color: var(--kk-ink-soft) !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
}
.amelia-v2-booking .am-ec__info-availability::before {
	content: "" !important;
	width: 6px !important;
	height: 6px !important;
	border-radius: 50% !important;
	background: #22c55e !important;
}
.amelia-v2-booking .am-ec__info-other {
	font-size: 12px !important;
	color: var(--kk-ink-muted) !important;
	font-weight: 500 !important;
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
}

/* RIGHT — price + Reserve button stack */
.amelia-v2-booking .am-ec__actions {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-end !important;
	justify-content: center !important;
	gap: 10px !important;
	padding: 16px 20px !important;
	border-left: 1.5px dashed color-mix(in oklab, var(--kk-ink) 30%, transparent) !important;
}
.amelia-v2-booking .am-ec__actions-price {
	font-family: var(--kk-display-font) !important;
	font-size: 26px !important;
	font-weight: 800 !important;
	color: var(--kk-ink) !important;
	letter-spacing: -0.02em !important;
	line-height: 1 !important;
}
.amelia-v2-booking .am-ec__actions-btn,
.amelia-v2-booking .am-ec__actions .am-button {
	background: var(--kk-ink) !important;
	background-image: none !important;
	color: white !important;
	border: 2px solid var(--kk-ink) !important;
	border-radius: 999px !important;
	padding: 10px 20px !important;
	font-family: var(--kk-body-font) !important;
	font-weight: 700 !important;
	font-size: 12px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.12em !important;
	margin: 0 !important;
	cursor: pointer !important;
	transition: background 180ms ease, transform 180ms ease, border-color 180ms ease !important;
	box-shadow: none !important;
	min-height: 0 !important;
}
.amelia-v2-booking .am-ec__actions-btn:hover,
.amelia-v2-booking .am-ec__actions .am-button:hover {
	background: var(--kk-accent) !important;
	border-color: var(--kk-accent) !important;
	transform: translateY(-1px) !important;
}

/* Mobile — collapse to vertical stack */
@media (max-width: 720px) {
	.amelia-v2-booking .am-ec {
		grid-template-columns: 90px 1fr !important;
	}
	.amelia-v2-booking .am-ec__actions {
		grid-column: 1 / -1 !important;
		flex-direction: row !important;
		justify-content: space-between !important;
		align-items: center !important;
		border-left: 0 !important;
		border-top: 1.5px dashed color-mix(in oklab, var(--kk-ink) 30%, transparent) !important;
	}
	.amelia-v2-booking .am-ec__period-date__day { font-size: 30px !important; }
}

/* Empty state ("0 Events Available") — present as a friendly card, not a system message */
.amelia-v2-booking .am-els__available,
.amelia-v2-booking [class*="no-results"] {
	background: var(--kk-paper) !important;
	border: 2px dashed var(--kk-ink) !important;
	border-radius: 22px !important;
	padding: 36px 28px !important;
	text-align: center !important;
	font-family: var(--kk-body-font) !important;
	color: var(--kk-ink-soft) !important;
}