/* =========================
   Booking calendar styles
   ========================= */

.swcal-wrap {
  width: 100%;
  max-width: 980px;
  margin: 20px auto;
  padding: 0 16px;
  overflow: hidden; /* 👈 THIS is the key */
}

/* Top bar: month + nav */
.swcal-top {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.swcal-nav {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Nav buttons: pill, clearly visible */
.swcal-btn {
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 14px;
  /* Make them clearly visible on all backgrounds */
  border: 1px solid rgba(148, 163, 184, 0.8); /* slate-ish */
  background: rgba(15, 23, 42, 0.55); /* dark translucent pill */
  color: #f9fafb; /* near-white text */
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    transform 0.08s ease,
    box-shadow 0.15s ease;
}

.swcal-btn:hover {
  background: rgba(15, 23, 42, 0.85);
  border-color: #dc2626;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* “Today” button variant if you use it */
.swcal-btn--primary {
  border-color: #ea580c;
  background: rgba(234, 88, 12, 0.85);
  color: #fff;
}

.swcal-btn--primary:hover {
  background: #ea580c;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.swcal-month {
  font-weight: 700;
  font-size: 18px;
  color: #f9fafb; /* Month label in white too */
}

/* Grid layout – base */
.swcal-head,
.swcal-body {
  display: grid;
  gap: 6px;
}

.swcal-head > div {
  font-weight: 700;
  text-align: center;
  padding: 4px 0;
  color: #e5e7eb;
  font-size: 12px;
}

/* Day cells: no solid background, just subtle border */
.swcal-cell {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  min-height: 96px;
  padding: 6px;
  padding-top: 1.6rem;
  position: relative;
  background: transparent;
}

/* Empty filler days: very faint outline only */
.swcal-cell.is-empty {
  border-style: dashed;
  opacity: 0.4;
}

/* Optional: “today” highlight if you add .is-today in markup */
.swcal-cell.is-today {
  border-color: #ea580c;
  box-shadow: 0 0 0 1px rgba(234, 88, 12, 0.35);
}

/* Day number (desktop & tablet) */
.swcal-daynum {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 12px;
  color: #ffffff; /* Make date text white */
  z-index: 2;
}

.swcal-slot {
  display: flex; /* block-level flex → stacks vertically */
  align-items: center;
  justify-content: center;
  margin: 4px 0 0 0; /* no horizontal gap needed now */
  padding: 4px 10px;
  border-radius: 999px;
  text-decoration: none;
  color: #ffffff;
  background: var(--swcal-slot-bg, #f97316);
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease,
    transform 0.08s ease;
}

/* Hover state: slightly stronger, but still chip-like */
.swcal-slot:hover {
  filter: brightness(1.05);
  border-color: #ffffff;
  color: #ffffff;
  transform: translateY(-1px);
}

/* TZ label inside chip */
.swcal-slot .swcal-tz {
  font-size: 10px;
  opacity: 0.9;
  margin-left: 4px;
  letter-spacing: 0.02em;
  font-weight: 400;
  color: #ff0000; /* keep TZ white as well */
}

/* Controls under the calendar (filters, view toggles, etc.) */
.swcal-controls {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 12px 0 4px;
}

.swcal-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Legend “chips” – no white boxy borders */
.swcal-chip {
  display: flex;
  gap: 6px;
  align-items: center;
  border: 1px solid transparent; /* remove visible box */
  padding: 4px 8px;
  border-radius: 999px;
  background: transparent;
  font-size: 12px;
  color: #e5e7eb;
}

.swcal-chip input {
  margin: 0;
}

/* Color blocks for legend */
.swcal-color {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Legend list */
.swcal-legend ul {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.swcal-legend .swcal-key {
  width: 12px;
  height: 12px;
  display: inline-block;
  border-radius: 3px;
  margin-right: 6px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Alert bar: no yellow block, just left border + text */
.swcal-alert {
  margin: 10px 0;
  padding: 8px 12px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid #fed7aa;
  border-left-width: 4px;
  color: #fed7aa;
  font-size: 13px;
}

/* Visibility/view toggles (Public / Private etc.) */
.swcal-vis {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.swcal-vis label {
  display: flex;
  gap: 6px;
  align-items: center;
  border: 1px solid transparent; /* kill the white-ish box border */
  padding: 6px 10px;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: #e5e7eb;
}

.swcal-vis input {
  margin: 0;
}

.swcal-grid {
  box-sizing: border-box;
  min-width: 100%; /* at least full container width */
  width: max-content; /* but can grow wider than container */
  max-width: none;
  overflow-x: visible; /* no hiding; the parent does the scrolling */
}

.swcal-head,
.swcal-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

/* Inner scroll container for the calendar grid only */
.swcal-calendar-scroll {
  width: 100%;
  overflow-x: auto; /* 👈 horizontal scroll lives here */
  overflow-y: visible;
  padding-bottom: 6px; /* little breathing room for scrollbar */
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ===== Mobile agenda view ===== */
@media (max-width: 680px) {
  .swcal-wrap,
  .swcal-wrap * {
    box-sizing: border-box;
  }

  .swcal-wrap {
    width: 100%;
    max-width: 100%;
    padding: 0 8px;
    overflow: hidden;
  }

  .swcal-top {
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .swcal-nav {
    width: 100%;
    max-width: 100%;
    justify-content: space-between;
  }

  .swcal-btn {
    flex: 0 0 auto;
  }

  .swcal-calendar-scroll,
  .swcal-grid,
  .swcal-body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .swcal-head {
    display: none;
  }

  .swcal-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .swcal-cell.is-empty,
  .swcal-cell.no-shows {
    display: none !important;
  }

  .swcal-cell {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    min-height: auto;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: transparent;
  }

  .swcal-daynum {
    position: static;
    grid-column: 1;
    margin: 2px 0 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
  }

  .swcal-daynum::before {
    content: "";
    display: block;
    margin-bottom: 2px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
  }

  .swcal-grid[data-month="1"] .swcal-daynum::before {
    content: "JAN";
  }
  .swcal-grid[data-month="2"] .swcal-daynum::before {
    content: "FEB";
  }
  .swcal-grid[data-month="3"] .swcal-daynum::before {
    content: "MAR";
  }
  .swcal-grid[data-month="4"] .swcal-daynum::before {
    content: "APR";
  }
  .swcal-grid[data-month="5"] .swcal-daynum::before {
    content: "MAY";
  }
  .swcal-grid[data-month="6"] .swcal-daynum::before {
    content: "JUN";
  }
  .swcal-grid[data-month="7"] .swcal-daynum::before {
    content: "JUL";
  }
  .swcal-grid[data-month="8"] .swcal-daynum::before {
    content: "AUG";
  }
  .swcal-grid[data-month="9"] .swcal-daynum::before {
    content: "SEPT";
  }
  .swcal-grid[data-month="10"] .swcal-daynum::before {
    content: "OCT";
  }
  .swcal-grid[data-month="11"] .swcal-daynum::before {
    content: "NOV";
  }
  .swcal-grid[data-month="12"] .swcal-daynum::before {
    content: "DEC";
  }

  .swcal-cell > a.swcal-slot.is-hidden-by-pricing,
  .swcal-cell > a.swcal-slot.is-hidden-by-urgency {
    display: none !important;
  }

  .swcal-cell
    > a.swcal-slot:not(.is-hidden-by-pricing):not(.is-hidden-by-urgency) {
    grid-column: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    margin: 0 0 6px;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 14px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .swcal-slot .swcal-tz {
    margin-left: 4px;
    font-size: 11px;
    opacity: 0.9;
  }

  .swcal-controls {
    gap: 12px;
  }

  .swcal-chips {
    gap: 8px;
  }
}

/* =========================
   Contact form styles
   ========================= */

.stxc-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 12px;
  background: transparent;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.stxc-contact-card {
  background: transparent;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 14px;
}

.stxc-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.stxc-contact-list li a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.stxc-alert {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 600;
}

.stxc-alert--ok {
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  color: #065f46;
}

.stxc-alert--err {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.stxc-form .stxc-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.stxc-field {
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stxc-field input[type="text"],
.stxc-field input[type="email"],
.stxc-field textarea {
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
  background: #fff;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.stxc-field input:focus,
.stxc-field textarea:focus {
  border-color: #111;
  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08);
}

.stxc-grid {
  display: grid;
  gap: 10px;
}

@media (min-width: 600px) {
  .stxc-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.stxc-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 8px;
}

/* =========================
   Event Template styles
   ========================= */

.stx-et-wrap {
  --pad: 18px;
  --card: #fff;
  --muted: #6b7280;
  --ink: #0f172a;
  --line: #e5e7eb;
  --chip: #f3f4f6;
  --accent: #111;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--pad);
}

.stx-et-hero {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: transparent;
  color: #fff;
  margin: 6px 0;
}

.stx-et-hero .stx-et-hero-img {
  background: transparent;
}

.stx-et-hero-inner {
  position: relative;
  padding: 32px 20px;
}

@media (max-width: 820px) {
  .stx-et-hero-inner {
    padding-top: 28px; /* keeps title breathing room */
    padding-bottom: 12px; /* pulls grid closer */
  }
}

.stx-et-title {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
  margin: 0 0 15px 0;
}

.stx-et-eyebrow {
  display: inline-block;
  margin: 0 0 15px 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px;
  opacity: 0.9;
}

.stx-et-sub {
  opacity: 0.95;
  font-size: clamp(16px, 2.2vw, 18px);
  margin: 1px 0 0;
}

@media (max-width: 820px) {
  .stx-et-hero {
    margin-bottom: 0px;
  }
}

.stx-et-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 820px) {
  .stx-et-grid {
    grid-template-columns: 1fr;
  }
}

.stx-keyfacts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 680px) {
  .stx-keyfacts {
    grid-template-columns: 1fr;
  }
}

.stx-kf {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 10px;
}

.stx-kf b {
  display: block;
}

.stx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.stx-chip {
  background: var(--chip);
  border: 1px solid var(--line);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
}

.stx-media-card {
  position: relative;
}

.stx-media-card video,
.stx-media-card img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}

.stx-media-toggle {
  position: absolute;
  inset: auto 10px 10px auto;
  background: #fff;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  padding: 8px 10px;
  font-size: 13px;
  cursor: pointer;
}

.stx-section h3 {
  margin: 0 0 8px;
  font-size: 20px;
}

details.stx-faq {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}

details.stx-faq + details.stx-faq {
  margin-top: 8px;
}

details.stx-faq summary {
  cursor: pointer;
  font-weight: 600;
}

.stx-et-error {
  color: #b91c1c;
}

.stx-center {
  text-align: center;
}

/* Card grid for "What's On" etc. */

.stx-list-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.stx-list-wrap h2 {
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.2;
}

.stx-grid-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 1024px) {
  .stx-grid-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .stx-grid-cards {
    grid-template-columns: 1fr;
  }
}

.stx-card-item,
#stx-form-wrap {
  position: relative;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: transparent !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.18s,
    box-shadow 0.18s,
    border-color 0.18s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.stx-card-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  border-color: #e2e8f0;
}

.stx-card-media {
  position: relative;
  aspect-ratio: 1 / 1; /* force square */
  overflow: hidden;
  background: #000; /* optional, just in case */
  margin-bottom: 4px; /* small gap to title */
}

.stx-card-media img {
  display: block;
  width: 100%;
  height: 100%; /* fill the square box */
  object-fit: cover; /* crop overflow, no skew */
}

.stx-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.25),
    rgba(0, 0, 0, 0) 50%
  );
  pointer-events: none;
}

.stx-card-media--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.stx-badge {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.9);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  backdrop-filter: saturate(1.2) blur(2px);
}

.stx-card-body {
  padding: 12px 14px 14px;
}

.stx-card-title {
  font-weight: 800;
  font-size: 17px;
  line-height: 1.25;
  margin: 0 0 6px;
  color: #ffffff !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.stx-card-meta {
  font-size: 12px;
  color: #cccccc !important;
  margin-bottom: 15px;
}

.stx-card-meta--price {
  font-weight: 700;
  color: #cccccc;
  margin-top: -2px;
  margin-bottom: 6px;
}

.stx-card-meta--venue {
  color: #475569;
  margin-bottom: 10px;
}

.stx-card-excerpt {
  font-size: 14px;
  text-align: justify;
  color: #ffffff;
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.stx-card-actions {
  margin-top: auto;
  display: flex;
  gap: 8px;
}

/* Small utility tweaks */

.stx-note--spacing {
  margin-top: 8px;
}

.stx-section--mt {
  margin-top: 12px;
}

.stx-quote {
  border-left: 3px solid #e5e7eb;
  padding-left: 10px;
  margin: 0;
}

.stx-faq-heading {
  margin-bottom: 8px;
}

/* Hide the core title on managed pages (paired with body_class filter) */

.stx-et-public-page .entry-title,
.stx-et-public-page .page-title,
.stx-et-public-page .wp-block-post-title,
.stx-et-public-page .site-main > h1:first-child,
.stx-et-public-page header .page-header h1,
.stx-et-public-page .content-area > h1:first-child {
  display: none !important;
}

/* =========================
   My Orders table
   ========================= */

.sw-orders {
  width: 100%;
  border-collapse: collapse;
}

.sw-orders th,
.sw-orders td {
  border-bottom: 1px solid #eee;
  padding: 8px;
  text-align: left;
}

.sw-right {
  text-align: right;
}

/* =========================
   Account form
   ========================= */

.sw-form {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 14px;
  margin: 18px 0;
  background: transparent !important;
}

.sw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.sw-grid .full {
  grid-column: 1 / -1;
}

.sw-form label {
  display: block;
  font-size: 12px;
  color: #cccccc;
  margin-bottom: 4px;
}

.sw-form input[type="text"],
.sw-form input[type="email"],
.sw-form input[type="tel"],
.sw-form input[type="password"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
}

/* =========================
   Per-event tax breakdown table
   ========================= */

.swc-tax-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #eee;
  margin-top: 10px;
  font-size: 14px;
}

.swc-tax-table th,
.swc-tax-table td {
  padding: 8px;
  border-bottom: 1px solid #f3f3f3;
}

/* Header row */
.swc-tax-table thead th {
  border-bottom-color: #eee;
  text-align: left;
  font-weight: 700;
}

/* Right-align amount column */
.swc-tax-table__th--amount,
.swc-tax-table__td--amount {
  text-align: right;
}

/* =========================
   POS Identify Customer screen
   ========================= */

.sw-pos-ident {
  max-width: 560px;
  margin: 32px auto;
  font:
    16px/1.5 system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.sw-pos-ident__title {
  margin: 0 0 12px 0;
  font-size: 20px;
  font-weight: 700;
}

.sw-pos-ident__form {
  margin: 0;
}

.sw-pos-ident__field {
  margin-bottom: 10px;
}

.sw-pos-ident__row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.sw-pos-ident__label {
  display: block;
  font-size: 14px;
  color: #111827;
}

.sw-pos-ident__label--half {
  flex: 1 1 0;
}

.sw-pos-ident__input {
  width: 100%;
  margin-top: 4px;
  padding: 8px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font: inherit;
  box-sizing: border-box;
}

.sw-pos-ident__input:focus {
  outline: none;
  border-color: #111827;
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.12);
}

.sw-pos-ident__btn {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #111827;
  background: #111827;
  color: #ffffff;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.05s ease,
    box-shadow 0.15s ease;
}

.sw-pos-ident__btn:hover {
  background: #000000;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.25);
}

.sw-pos-ident__btn:active {
  transform: translateY(1px);
  box-shadow: none;
}

/* =========================
   Checkout / POS notices
   ========================= */

.swc-notice {
  margin: 8px 0;
  padding: 4px;
  border-radius: 6px;
  font-size: 14px;
}

/* Keep legacy classes functional if anything else uses them */
.swc-notice.sw-success,
.swc-notice--success {
  background: #eefbe7;
  border: 1px solid #99d68c;
  color: #216e09;
}

.swc-notice.sw-warning,
.swc-notice--warning {
  background: #fff7e6;
  border: 1px solid #f3b366;
  color: #7a4e00;
}

.swc-notice.sw-errors,
.swc-notice--error {
  background: #ffeeee;
  border: 1px solid #f99;
  color: #a00000;
}

.swc-notice__list {
  margin: 0 0 0 18px;
  padding: 0;
}

/* =========================
     Thank You / Order Summary
     ========================= */

.sw-thk-wrap {
  font:
    14px/1.5 system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color: #111827;
}

.sw-thk-summary,
.sw-thk-payment,
.sw-thk-vouchers {
  margin: 0 0 8px 0;
}

.sw-thk-summary strong,
.sw-thk-payment strong {
  font-weight: 700;
}

.sw-thk-vouchers {
  color: #666666;
  margin-bottom: 10px;
}

.sw-thk-voucher-chip {
  display: inline-block;
  border: 1px solid #dddddd;
  border-radius: 999px;
  padding: 2px 8px;
  margin-right: 6px;
  font-size: 12px;
  background: #fafafa;
}

.sw-card {
  background: transparent !important;
}

.sw-summary,
.sw-summary * {
  background: transparent !important;
}

.sw-thk-event-heading {
  margin: 14px 0 8px 0;
  font-weight: 700;
}

.sw-thk-items,
.sw-thk-totals {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #eeeeee;
}

.sw-thk-items {
  margin-top: 0;
}

.sw-thk-totals {
  margin-top: 12px;
}

.sw-thk-items__cell,
.sw-thk-totals__cell {
  padding: 8px;
  border-bottom: 1px solid #f3f3f3;
}

.sw-thk-items__cell--head {
  border-bottom-color: #eeeeee;
  font-weight: 700;
}

.sw-thk-items__cell--ticket {
  width: 50%;
}

.sw-thk-items__cell--num,
.sw-thk-totals__cell--num {
  text-align: right;
}

.sw-thk-totals__row {
  background: #fafafa;
}

.sw-thk-totals__cell {
  padding: 8px;
}

.sw-thk-totals__cell--spacer {
  background: #fafafa;
  width: 20%;
}

.sw-thk-totals__cell--label {
  background: #fafafa;
  text-align: right;
  white-space: nowrap;
}

.sw-thk-totals__cell--label span.sw-thk-totals__note {
  color: #666666;
  font-weight: 400;
}

.sw-thk-totals__cell--value {
  background: #fafafa;
  text-align: right;
}

.sw-thk-totals__cell--value strong {
  font-weight: 700;
}

/* Event metabox layout */
.sw-event-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.sw-event-meta-grid__col {
  margin: 0;
}

.sw-event-meta-grid__row {
  grid-column: 1 / -1;
  margin: 0;
}

/* Labels & descriptions */
.sw-event-meta__label {
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}

.sw-event-meta__description {
  display: block;
  margin-top: 4px;
  color: #666;
  font-size: 12px;
}

.sw-event-meta__description--small {
  margin-top: 6px;
}

/* Audience radios */
.sw-event-meta-audience {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.sw-event-meta-audience__title {
  margin-bottom: 0;
}

.sw-event-meta-audience__option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Image blocks */
.sw-event-meta-image-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sw-event-meta-image-block__title {
  margin-bottom: 2px;
}

.sw-event-meta-image-block__body {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.sw-event-meta__image-preview {
  width: 96px;
  height: 96px;
  border: 1px solid #ccd0d4;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 4px;
}

.sw-event-meta__image-img {
  max-width: 100%;
  height: auto;
  display: block;
}

.sw-event-meta__no-image {
  color: #666;
  font-size: 12px;
  text-align: center;
  line-height: 1.2;
  padding: 6px;
}

.sw-event-meta-image-block__controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sw-event-meta__image-id {
  width: 160px;
}

/* Brand Manager layout */
.stx-wrap.stx-brand-manager {
  max-width: 1000px;
  margin: 20px auto;
  padding: 0 12px;
}

/* Card */
.stx-card {
  background: transparent !important;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  padding: 16px;
  margin-bottom: 14px;
}

/* Titles */
.stx-title {
  margin: 0.1em 0 0.6em;
  font-size: 18px;
}

/* Grid layout */
.stx-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.stx-row {
  grid-column: 1 / -1;
}

/* Labels & inputs */
.stx-label {
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}

.stx-input,
.stx-select {
  display: block;
  width: 100% !important; /* guarantees full width */
  max-width: 100% !important;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  margin-bottom: 10px;
}

.stx-textarea {
  display: block;
  width: 98% !important;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  margin-bottom: 10px;
}

.stx-field {
  /* just to be safe */
  max-width: 100%;
}

.stx-field .stx-input {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box; /* <- this is the magic bit */
}

/* Help / hint text */
.stx-help {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #cccccc !important;
}

.stx-note {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #cccccc !important;
}

/* Actions */
.stx-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* Muted text */
.stx-muted {
  font-size: 12px;
  color: #ffffff;
}

/* Image preview */
.image-preview {
  width: 96px;
  height: 96px;
  border: 1px solid #e5e7eb;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  color: #6b7280;
  font-size: 12px;
}

/* --- Event builder helpers --- */

/* Align actions to the bottom in the finder row */
.stx-actions--bottom {
  align-items: flex-end;
}

/* Wider selects/inputs in the filter row */
.stx-select--wide,
.stx-input--wide {
  min-width: 220px;
}

/* Narrow input (for IDs) */
.stx-input--narrow {
  width: 140px;
}

/* Spacer row to force next stuff onto its own line */
.stx-spacer-row {
  flex: 1 1 100%;
  height: 0;
}

/* Results dropdown column */
.stx-results-col {
  min-width: 360px;
  flex: 1;
}

/* Full-width select */
.stx-select--full {
  width: 100%;
}

/* Fixed-width ID inputs (e.g. attachment IDs) */
.stx-input--id {
  width: 160px;
}

/* Center-aligned action rows (for media pickers) */
.stx-actions--center {
  align-items: center;
}

/* Top margin for bottom action bar */
.stx-actions--mt {
  margin-top: 8px;
}

.sw-event-wrap {
  max-width: 980px;
  margin: 40px auto;
  padding: 0 16px;
}

.sw-crumbs {
  margin-bottom: 10px;
  font-size: 13px;
  opacity: 0.75;
}

.sw-event-header h1 {
  margin: 0.2em 0 0.4em;
  font-weight: 700; /* bold */
}

.sw-event-meta {
  margin: 0.25em 0 1em;
  font-size: 14px;
  color: #555;
}

.sw-badge-orderstatus {
  display: inline-block;
  line-height: 1;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  color: #000000;
  background: #cccccc;
}

.sw-event-hero {
  margin: 10px 0 14px;
}

.sw-event-hero img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* Justify text without breaking words */
.sw-event-template-content {
  margin: 18px 0;
  text-align: justify;
  text-justify: inter-word;

  hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
}

/* Ensure bold text is actually bold inside event templates */
.sw-event-template-content strong,
.sw-event-template-content b {
  font-weight: 700;
}

.stx-marketing-text strong,
.stx-marketing-text b {
  font-weight: 700 !important;
}

.sw-group-picker {
  margin: 16px 0 8px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.sw-group-hint {
  font-size: 12px;
  color: #666;
}

.sw-tt-table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  display: table;
}

.sw-tt-table thead th,
.sw-tt-table td {
  border-bottom: 1px solid #eee;
  padding: 8px;
}

.sw-tt-table thead {
  background: #fafafa;
}

.sw-tt-table[aria-hidden="true"] {
  display: none;
}

.sw-tt-table tfoot td {
  font-weight: bold;
  background: #fafafa;
  vertical-align: top;
}

.sw-qty-wrap {
  display: flex;
  gap: 6px;
  align-items: center;
}

.sw-qty-input {
  width: 80px;
}

.sw-qty-btn {
  line-height: 1;
  border: 1px solid #ddd;
  background: #f7f7f7;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
}

.sw-muted {
  opacity: 0.8;
  color: #cccccc !important;
}

.sw-row-disabled {
  opacity: 0.45;
  filter: grayscale(1);
}

.sw-errors {
  background: #fee;
  border: 1px solid #f99;
  color: #a00;
  padding: 10px;
  border-radius: 6px;
  margin: 14px 0;
}

.sw-success {
  background: #eefbe7;
  border: 1px solid #99d68c;
  color: #216e09;
  padding: 10px;
  border-radius: 6px;
  margin: 14px 0;
}

.sw-mini-tier {
  font-size: 12px;
}

.sw-mini-tier th,
.sw-mini-tier td {
  border: none;
}

.sw-mini-tier td,
.sw-mini-tier th {
  padding: 2px 4px;
}

.is-hidden {
  display: none;
}

.sw-tier-note {
  font-size: 12px;
  margin-top: 4px;
}

/* VAT notice — small and subtle */
#sw-vat-note.sw-note {
  display: block;
  text-align: center;
  font-size: 12px !important;
  line-height: 1.35 !important;
  color: #ffffff !important;
  border: none !important;
}

@media (max-width: 640px) {
  #sw-vat-note.sw-note {
    font-size: 0.55em !important;
  }
}

/* Hero LEFT (30%) + Description RIGHT (70%) */
header.sw-event-header {
  display: grid !important;
  grid-template-columns: 30% 70%;
  grid-template-areas:
    "title   title"
    "excerpt excerpt"
    "hero    desc";
  column-gap: 24px; /* left/right space */
  row-gap: 12px; /* a bit tighter than before */
  align-items: start;
}

/* Place items + tighten vertical rhythm */
header.sw-event-header > h1 {
  grid-area: title;
  margin: 0.1em 0 0.2em !important; /* less gap above excerpt */
}

header.sw-event-header > p {
  grid-area: excerpt;
  margin: 0 0 8px !important; /* less gap before hero/desc row */
}

header.sw-event-header .sw-event-hero {
  grid-area: hero;
  margin: 0 !important; /* remove 10px/14px margins */
  align-self: start;
}

header.sw-event-header .sw-event-template-content {
  grid-area: desc;
  margin: 0 !important; /* remove 18px top margin */
}

/* kill inner top/bottom margins so desc aligns exactly with hero top */
header.sw-event-header .sw-event-template-content > *:first-child {
  margin-top: 0 !important;
}

header.sw-event-header .sw-event-template-content > *:last-child {
  margin-bottom: 0 !important;
}

/* Image sizing */
header.sw-event-header .sw-event-hero img {
  display: block;
  width: 100%;
  height: auto;
}

/* Mobile: stack */
@media (max-width: 900px) {
  header.sw-event-header {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "excerpt"
      "hero"
      "desc";
    row-gap: 12px;
  }
}

/* Event excerpt text under H1 */
.sw-event-header .sw-event-excerpt {
  font-size: 1.05em;
  color: #cccccc;
  margin-top: 0;
  font-style: italic;
}

/* Generic muted text you already have:
   .sw-muted { opacity: .8; }
   We’re extending for the “strong” versions. */
.sw-offsale-msg {
  font-weight: 600;
}

.stx-faq-answer strong,
.stx-faq-answer b {
  font-weight: 700 !important;
}

/* Password gate form for private events */
.sw-event-pw-form {
  max-width: 420px;
  margin: 10px 0;
}

.sw-event-pw-label {
  display: block;
  margin-bottom: 6px;
}

.sw-event-pw-input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin: 6px 0 10px;
}

/* Group picker tweaks */
.sw-group-label {
  margin-right: 6px;
}

.sw-group-select {
  min-width: 220px;
}

/* Cart messages hidden by default via .is-hidden, but we give it some structure */
.sw-cart-messages {
  margin-top: 10px;
}

/* Buy-wrap: buttons side-by-side */
.sw-buy-wrap {
  margin-top: 10px;
}

.sw-add-wrap {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0;
}

/* =========================
   Ticket table layout
   ========================= */

/* Base table */
.sw-tt-table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
}

/* Column widths (desktop) */
.sw-tt-col--ticket {
  width: 30%;
}
.sw-tt-col--pricing {
  width: 26%;
}
.sw-tt-col--minmax {
  width: 14%;
}
.sw-tt-col--qty {
  width: 16%;
}
.sw-tt-col--total {
  width: 14%;
}

.sw-tt-cell--right {
  text-align: right;
}

/* Table cells */
.sw-tt-table th,
.sw-tt-table td {
  padding: 8px;
  border-bottom: 1px solid #eee;
  vertical-align: top;
}

/* Kill backgrounds so everything inherits page background */
.sw-tt-table th,
.sw-tt-table td,
.sw-tt-table thead,
.sw-tt-table thead th,
.sw-tt-table tfoot,
.sw-tt-table tfoot td,
.sw-vat-row,
.sw-mini-tier,
.sw-mini-tier th,
.sw-mini-tier td {
  background: transparent !important;
}

/* Semantic hooks (handy for future tweaks) */
.sw-tt-cell--ticket {
}
.sw-tt-cell--pricing {
}
.sw-tt-cell--minmax {
}
.sw-tt-cell--qty {
}

/* “From: £X” line under ticket title */
.sw-tt-from {
  margin-top: 2px;
}

/* “—” unavailable marker */
.sw-tt-na {
  font-size: 0.9em;
}

/* Summary footer in the table (subtotal / VAT / grand total) */
.sw-tt-summary-label {
  font-weight: 400;
}

/* Tickets section wrapper */
.sw-tickets-section {
  margin-top: 24px;
}

.sw-tickets-title {
  margin: 0 0 8px;
}

/* Mini tier table inside pricing cell */
.sw-mini-tier {
  font-size: 12px;
}

.sw-mini-tier th,
.sw-mini-tier td {
  border: none;
  padding: 2px 4px;
}

/* Availability line – “Max available: 15” */
.sw-availability {
  font-size: 12px;
  margin-top: 4px;
  color: #ff0000 !important; /* vivid orange */
  font-weight: 600;
}

/* Keep SOLD OUT strong and red */
.sw-availability .sold {
  color: #ff0000 !important;
  font-weight: 700;
}

/* Tier note under qty selector */
.sw-tier-note {
  font-size: 12px;
  margin-top: 4px;
}

/* =========================
   Mobile layout tweaks
   ========================= */

@media (max-width: 768px) {
  /* Stack rows as “cards” */
  .sw-tt-table,
  .sw-tt-table tbody,
  .sw-tt-table tr,
  .sw-tt-table td {
    display: block;
    width: 100%;
  }

  .sw-tt-table thead {
    display: none;
  }

  .sw-tt-row {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
  }

  .sw-tt-row td {
    padding: 4px 0;
  }

  /* First cell (ticket title + from + availability) stays as-is, full width */

  /* Pricing label */
  .sw-tt-row td:nth-child(2)::before {
    content: "Pricing";
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b7280;
    margin-bottom: 2px;
  }

  /* Min / Max label */
  .sw-tt-row td:nth-child(3)::before {
    content: "Min / Max";
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b7280;
    margin-bottom: 2px;
  }

  /* Qty label */
  .sw-tt-row td:nth-child(4)::before {
    content: "Qty";
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b7280;
    margin-bottom: 2px;
  }

  /* Total label */
  .sw-tt-row td:nth-child(5)::before {
    content: "Row Total";
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b7280;
    margin-bottom: 2px;
  }

  /* Make total stand out a bit */
  .sw-tt-row td:nth-child(5) {
    text-align: right;
    font-weight: 600;
    margin-top: 4px;
  }

  /* Qty controls: give them breathing room and full-width on mobile */
  .sw-qty-wrap {
    width: 100%;
    max-width: 260px;
    justify-content: flex-start;
  }

  .sw-qty-input {
    flex: 1 1 auto;
    max-width: 120px;
  }
}

/* =========================
   Ticket footer + buttons + VAT note
   ========================= */

/* Totals footer: right-aligned, full width */
.sw-tt-table tfoot {
  border-top: 1px solid #e5e7eb;
  margin-top: 4px;
}

.sw-tt-table tfoot td {
  text-align: right;
  padding-top: 6px;
}

/* Mobile: keep totals full-width + right-aligned */
@media (max-width: 768px) {
  .sw-tt-table tfoot,
  .sw-tt-table tfoot tr,
  .sw-tt-table tfoot td {
    display: block;
    width: 100%;
    text-align: right;
  }
}

/* Buy buttons wrapper */
#sw-buy-wrap {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end; /* right-align on desktop */
  margin-top: 12px;
}

/* Mobile: center buttons so they feel less cramped */
@media (max-width: 768px) {
  #sw-buy-wrap {
    justify-content: center;
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  #sw-vat-note.sw-note {
    text-align: center;
  }
}

/* =========================
   My Tickets layout
   ========================= */

.stx-my-tickets {
  max-width: 980px;
  margin: 32px auto;
  padding: 0 16px;
}

/* Login / empty states */
.stx-my-tickets-login,
.stx-my-tickets-empty {
  max-width: 640px;
  margin: 32px auto;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  font-size: 14px;
}

/* Each order section */
.stx-order {
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 12px;
  padding: 14px 14px 16px;
  margin-bottom: 18px;
  background: transparent; /* no hard white; respects page bg */
}

/* Order header: title + download button */
.stx-order-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.stx-order-title {
  margin: 0;
  font-size: 18px;
}

/* Card grid per order */
.stx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

/* Ticket card */
.stx-card {
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.35); /* semi-dark so QR + text pop */
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 10px;
  padding: 8px 10px;
  align-items: stretch;
}

/* No image: fall back to single-column */
.stx-card:not(:has(.stx-card-media)) {
  grid-template-columns: 1fr;
}

/* Media wrapper should take full content width of the card */
.stx-card-media {
  width: 100%;
  margin: 0; /* kill any weird inherited margins */
  padding: 0;
  overflow: hidden;
  border-radius: 8px;
}

.stx-card-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Card body */
.stx-card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
}

.stx-card-title {
  margin: 0 0 2px;
  font-size: 18px;
  line-height: 1.3;
  text-align: center;
}

/* Meta lines: type, ticket number, checkin */
.stx-card-meta {
  margin: 0 0 14px;
  font-size: 14px;
}

/* QR area */
.stx-card-qr {
  margin-top: 4px;
}

.stx-card-qr-img {
  width: 80px;
  height: 80px;
  display: block;
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, 0.4);
}

/* Status line */
.stx-card-status {
  margin: 4px 0 0;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.stx-card-status-label {
  opacity: 0.8;
}

.stx-card-status-value {
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
}

/* Status colours – cancelled = red, pending = amber, checked-in = green */

.stx-card--ticket.stx-status-pending .stx-card-status-value {
  background: rgba(245, 158, 11, 0.18); /* amber */
  color: #d97706;
}

.stx-card--ticket.stx-status-checked-in .stx-card-status-value {
  background: rgba(34, 197, 94, 0.18); /* green */
  color: #16a34a;
}

.stx-card--ticket.stx-status-cancelled .stx-card-status-value {
  background: rgba(239, 68, 68, 0.2); /* red */
  color: #dc2626;
}

/* =========================
   My Tickets – responsive
   ========================= */

@media (max-width: 640px) {
  .stx-my-tickets {
    padding: 0 12px;
  }

  .stx-order-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .stx-order-download-btn {
    width: 100%;
    justify-content: center;
  }

  .stx-grid {
    grid-template-columns: 1fr;
  }

  .stx-card {
    grid-template-columns: 80px 1fr;
    padding: 8px 9px;
  }

  .stx-card-qr-img {
    width: 70px;
    height: 70px;
  }
}

/* =========================
   My Tickets – visibility tweaks
   ========================= */

/* Make titles + meta lines white on the dark card background */
.stx-card-title,
.stx-card-meta,
.stx-card-status,
.stx-card-status-label {
  color: #f9fafb;
}

/* Make the status pill text a bit brighter */
.stx-card-status-value {
  color: #fefce8;
}

/* Prevent any weird truncation of times like "12:0" or "14:0" */
.stx-my-tickets p,
.stx-card-meta {
  white-space: normal; /* allow wrapping */
  overflow: visible; /* don’t clip text */
  text-overflow: clip; /* kill any inherited ellipsis */
}

/* Flex/grid safety: let text shrink instead of being chopped */
.stx-card-body {
  min-width: 0;
}

/* Venue metabox layout */
.sw-venue-metabox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.sw-venue-metabox-grid label {
  font-weight: 600;
}

/* Full-width row inside the grid */
.sw-venue-metabox-grid-full {
  grid-column: 1 / -1;
}

/* QR block tweaks (optional) */
.sw-venue-metabox-qr {
  /* if you want it full-width as well: */
  /* grid-column: 1 / -1; */
}

/* QR image styling (replaces inline style attr) */
.sw-venue-metabox-qr-img {
  max-width: 200px;
  height: auto;
  border: 1px solid #ddd;
  padding: 4px;
  background: #fff;
  display: inline-block;
}

/* Generic notice cards (error/success) */
.stx-card--notice-error {
  border-color: #fecaca;
  background: transparent; /* previously #fff1f2 */
}

.stx-card--notice-success {
  border-color: #bbf7d0;
  background: transparent; /* previously #f0fdf4 */
}

.sw-venue-delete-form {
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
}

/* Toolbar layout */
.sw-venue-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Search input width */
.sw-venue-search-input {
  min-width: 220px;
}

/* Flexible spacer to push "Create new venue" to the right */
.sw-venue-toolbar-spacer {
  margin-left: auto;
}

/* Pagination bar */
.sw-venue-pagination {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}

/* Venue form header (title + icon) */
.sw-form-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

/* Ensure the form title doesn't pick up random margins */
.sw-form-title {
  margin: 0;
}

/* Location helper row */
.sw-location-helper-row {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.sw-location-helper-input {
  flex: 1;
}

.sw-location-helper-button,
.sw-location-helper-status {
  margin: 0;
}

/* Coords row full width */
.sw-row--fullwidth {
  grid-column: 1 / -1;
}

/* Coords field widths */
.sw-field--lat,
.sw-field--lng {
  max-width: 180px;
}

.sw-field--zoom {
  max-width: 140px;
}

/* Direction map section */
.sw-dir-map-section {
  grid-column: 1 / -1;
}

.sw-dir-map-label {
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}

.sw-dir-map-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.sw-dir-map-img {
  max-width: 220px;
  height: auto;
  border: 1px solid #ddd;
  padding: 4px;
  background: #fff;
}

.sw-dir-map-img--hidden {
  display: none;
}

.sw-dir-map-actions {
  margin-bottom: 4px;
}

.sw-dir-map-remove.sw-is-hidden {
  display: none;
}

.sw-edit-only-inner {
  display: flex;
  flex-direction: column; /* stack left then right */
  gap: 18px;
  align-items: flex-start;
  margin: 10px 0;
}

.sw-edit-only-left,
.sw-edit-only-right {
  /* inherit default, just there if you want to tweak later */
}

.sw-check--inline {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* QR image in edit-only block */
.sw-qr-img {
  max-width: 200px;
  height: auto;
  border: 1px solid #ddd;
  padding: 4px;
  background: #fff;
}

/* Toggle links that are only visible in edit mode */
.sw-toggle-create.sw-is-hidden,
.sw-toggle-view.sw-is-hidden,
.sw-toggle-admin.sw-is-hidden {
  display: none;
}

/* Dirty state label – hidden until JS shows it */
.sw-dirty-state {
  margin-left: auto;
  display: none;
}

/* Inline notice used by AJAX edit */
.sw-inline-notice {
  margin: 8px 0;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
}

.sw-inline-notice--info {
  background: #ecfeff;
  border: 1px solid #bae6fd;
}

/* Invalid field highlight (was injected via <style> before) */
.sw-invalid {
  outline: 2px solid #ef4444;
  background: #fff7f7;
}

/* Edit-only block visibility (matches earlier HTML changes) */
.sw-edit-only {
  display: none;
}

.sw-edit-only--visible {
  display: block;
}

/* Generic “hidden” utility class for toggleable links/buttons */
.sw-is-hidden {
  display: none;
}

/* ======== ScreamTix venues — front-end styles (scoped) ======== */
.stx-venues-frontend {
  width: 100%;
  max-width: 1200px;
}

.stx-venues-frontend .stx-card {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px;
  background: transparent; /* unified */
}

.stx-venues-frontend .stx-toolbar,
.stx-venues-frontend .stx-form-grid,
.stx-controls {
  display: grid;
  gap: 12px;
}

.stx-venues-frontend .stx-toolbar,
.stx-controls {
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.stx-venues-frontend .stx-table {
  width: 100%;
  border-collapse: collapse;
}

.stx-venues-frontend .stx-table th,
.stx-venues-frontend .stx-table td {
  text-align: left;
  padding: 8px 10px;
  vertical-align: middle;
  border-bottom: none; /* moved to the row */
}

/* Single, continuous line per row */
.stx-venues-frontend .stx-table tr {
  border-bottom: 1px solid #f0f2f5;
}

.stx-venues-frontend .stx-table thead th {
  background: transparent; /* or var(--stx-card-bg) if you add one */
  font-weight: 600;
  white-space: nowrap;
}

.stx-venues-frontend .stx-btn--primary {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

.stx-venues-frontend .stx-input,
.stx-venues-frontend input[type="text"],
.stx-venues-frontend input[type="email"],
.stx-venues-frontend input[type="number"],
.stx-venues-frontend input[type="search"],
.stx-venues-frontend select,
.stx-venues-frontend textarea {
  width: 98%;
  padding: 6px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
}

.stx-venues-frontend .stx-sticky {
  position: sticky;
  bottom: 0;
  padding-top: 8px;
  margin-top: 12px;
  border-top: 1px dashed #e5e7eb;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.stx-venues-frontend .stx-muted {
  color: #64748b;
}

@media (min-width: 820px) {
  .stx-venues-frontend .stx-form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.sw-venue-form .sw-row--coords {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr)) auto auto;
  column-gap: 12px;
  row-gap: 8px;
  align-items: end;
}

.sw-venue-form .sw-row--coords p {
  margin: 0;
}

.sw-venue-form .sw-row--coords .button {
  align-self: end;
}

@media (max-width: 800px) {
  .sw-venue-form .sw-row--coords {
    grid-template-columns: 1fr 1fr;
  }
  .sw-venue-form .sw-row--coords .sw-actions {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

.stx-venues-frontend .stx-actions {
  white-space: nowrap;
}

.stx-venues-frontend td.stx-actions {
  white-space: nowrap;
  display: flex;
  align-items: center; /* vertically center buttons in the row */
  gap: 6px; /* space between Edit / Delete */
}

.stx-venues-frontend .stx-btn--danger {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}

.stx-venues-frontend .stx-btn--danger:hover {
  filter: brightness(0.95);
}

.stx-venues-frontend .stx-sticky {
  background: transparent;
}

.stx-sticky {
  background: transparent !important;
}

/* Normalise actions cell layout */
.stx-venues-frontend .stx-actions {
  white-space: nowrap;
  vertical-align: middle;
}

/* Make sure the Actions cell aligns like the rest of the row */
.stx-venues-frontend td.stx-actions 

/* Big, punchy section headings */
.stx-section h2,
.stx-section .stx-section-title {
  font-size: clamp(1.6rem, 2vw + 0.5rem, 2.1rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 0.75em;
  padding-bottom: 0.35em;
  border-bottom: 2px solid var(--stx-accent, #f97316); /* uses your accent if set */
}

/* Secondary headings inside section */
.stx-section h3 {
  font-size: clamp(1.2rem, 1.2vw + 0.5rem, 1.5rem);
  font-weight: 700;
  margin: 1.2em 0 0.5em;
}

/* Optional: subtle glow/contrast so they pop on dark/light */
.stx-section h2,
.stx-section h3 {
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}

#stx-consent .stx-box {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: transparent !important;
  max-width: 720px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  margin-left: 0 !important;
}

.screamtix-card {
  background: transparent !important;
}

.sw-cart-event {
  background: transparent !important;
}

.sw-cart-all {
  background: transparent !important;
}
#stx-consent .stx-switch input:checked + .stx-slider {
  background-color: #ccffcc !important;
}

.sw-my-coupons .sw-tab code {
  background: transparent !important;
  padding: 2px 6px;
  border-radius: 4px;
}

/* Wrapper */
.sw-cart-wrap {
  max-width: 980px;
  margin: 24px auto;
}

/* Flash messages */
.sw-flash {
  margin: 10px 0;
  padding: 10px;
  border-radius: 6px;
  font-size: 14px;
}

.sw-flash-list {
  margin: 8px 0 0 18px;
  padding-left: 0;
}

.sw-flash--error {
  background: #ffeeee;
  border: 1px solid #ff9999;
  color: #aa0000;
}

.sw-flash--warning {
  background: #fff7e6;
  border: 1px solid #f3c371;
  color: #7a4b00;
}

.sw-flash--success {
  background: #eefbe7;
  border: 1px solid #99d68c;
  color: #216e09;
}

/* Multi-currency notice */
.sw-cart-multicurrency {
  margin: 10px 0;
  padding: 10px;
  border-radius: 6px;
  background: #fff7e6;
  border: 1px solid #f3c371;
  color: #7a4b00;
}

/* Per-event box */
.sw-cart-event {
  border: 1px solid #eee;
  background: #fff;
  border-radius: 8px;
  padding: 12px;
  margin: 14px 0;
}

.sw-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: #555;
  font-size: 14px;
}

.sw-back-link span {
  text-decoration: underline;
}

.sw-cart-event-title {
  margin: 0.2em 0 8px;
}

.sw-cart-capacity-note {
  font-size: 12px;
  color: #cccccc;
  margin: 6px 0 10px;
  text-align: right;
}

/* Cart form & table */
.sw-cart-form {
  margin: 0 0 10px 0;
}

.sw-cart-table {
  width: 100%;
  border-collapse: collapse;
}

.sw-cart-table-head-row {
  background: transparent !important;
}

.sw-cart-table th,
.sw-cart-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #eee;
  text-align: left;
  vertical-align: middle;
}

.sw-cart-col-qty,
.sw-cart-col-unit,
.sw-cart-col-line,
.sw-cart-summary-value,
.sw-cart-cell--right {
  text-align: right;
}

.sw-cart-summary-row td {
  border-top: 1px solid #eee;
}

/* Actions column width (replacement for inline <style>) */
.sw-cart-table td.actions,
.sw-cart-table th.actions {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

/* Qty input */
.sw-qty-input {
  width: 90px;
}

/* Per-line notes */
.sw-cart-cell-main div {
  font-size: 12px;
  color: #cccccc;
  margin-top: 4px;
}

/* Button groups */
.sw-cart-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 10px;
}

/* “Clear this event” form */
.sw-cart-clear-form {
  margin: 6px 0 12px 0;
  display: flex;
  justify-content: flex-end;
}

/* Specific button variants */
.sw-cart-remove-line {
  color: #b00;
}

.sw-cart-clear-event-button:hover,
.sw-cart-empty-basket-button:hover,
.sw-cart-remove-line:hover {
  filter: brightness(0.95);
}

/* Overall summary */
.sw-cart-all {
  border: 2px dashed #ddd;
  background: transparent !important;
  border-radius: 8px;
  padding: 12px;
  margin: 18px 0;
}

.sw-cart-all-title {
  margin: 0.2em 0 8px;
}

.sw-cart-all-table {
  border-collapse: collapse;
  margin-left: auto;
}

.sw-cart-all-table td {
  padding: 6px;
}

.sw-cart-all-table td:last-child {
  white-space: nowrap;
  width: 1%;
  text-align: right;
}

.sw-cart-clear-event-button,
.sw-cart-empty-basket-button,
.sw-cart-remove-line,
.sw-cart-update-button,
.stxc-btn,
.stx-btn,
a.stx-btn,
.sw-btn,
.stx-order-download-btn,
#stxc-btn--primary,
#stx-btn--ghost,
#sw_dir_map_pick,
#sw_dir_map_remove,
#sw_create_instead,
#sw_view_link,
#sw_admin_link,
a.stx-btn.js-edit-link,
.stx-venues-frontend.stx-btn,
#wp-submit.stx-btn.stx-btn--primary,
.stx-logout-btn,
#sw-preview,
#sw-delete,
button.button.button-primary[name="sw_action"],
button.button.button-secondary[name="sw_action"],
.stx-rev-actions button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  padding: 6px 14px;
  border-radius: 999px;

  border: 1px solid #dc2626;
  background: rgba(220, 38, 38, 0.06);
  color: #b91c1c;

  font-size: 14px;
  font-weight: 500;
  text-decoration: none;

  cursor: pointer;
  transition:
    background-color 0.12s ease-out,
    color 0.12s ease-out,
    box-shadow 0.12s ease-out,
    transform 0.06s ease-out;
}

/* Default: show logout button (desktop, tablets etc.) */
.stx-logout-btn {
  display: inline-flex; /* or inline-block / flex, whatever matches your header */
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  text-decoration: none;
  /* keep any of your existing styles here */
}

/* Mobile: hide it so it doesn't clash with the burger menu */
@media (max-width: 768px) {
  .stx-logout-btn {
    display: none;
  }
}

/* Hover / focus */
a.stx-btn:hover,
a.stx-btn:focus,
.sw-cart-clear-event-button:hover,
.sw-cart-clear-event-button:focus,
.sw-cart-empty-basket-button:hover,
.sw-cart-empty-basket-button:focus,
.sw-cart-remove-line:hover,
.sw-cart-remove-line:focus,
.sw-cart-update-button:hover,
.sw-cart-update-button:focus,
.stxc-btn:hover,
.stxc-btn:focus,
.stx-order-download-btn:hover,
.stx-order-download-btn:focus,
.sw-btn:hover,
.sw-btn:focus,
#stxc-btn--primary:hover,
#stxc-btn--primary:focus,
.stx-btn:hover,
.stx-btn:focus,
#stx-btn--ghost:hover,
#stx-btn--ghost:focus,
#sw_dir_map_pick:hover,
#sw_dir_map_pick:focus,
#sw_dir_map_remove:hover,
#sw_dir_map_remove:focus {
  background: rgba(220, 38, 38, 0.14);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  outline: none;
}

/* Active press */
.sw-cart-clear-event-button:active,
.sw-cart-empty-basket-button:active,
.sw-cart-remove-line:active,
.sw-cart-update-button:active,
.stxc-btn:active,
.stx-order-download-btn:active,
.sw-btn:active,
#stxc-btn--primary:active,
.stx-btn:active,
#stx-btn--ghost:active,
#sw_dir_map_pick:active,
#sw_dir_map_remove:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

/* Checkout-all = same style as other cart buttons, but green */
.sw-cart-checkout-all-button,
.sw-copy-code,
#sw-add-to-cart,
#sw-buy-now {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  padding: 6px 12px;
  border-radius: 999px;

  /* Muted positive green */
  border: 1px solid #22ac1c;
  background: rgba(34, 172, 28, 0.06);
  color: #22ac1c;

  font-size: 14px; /* same as other buttons */
  font-weight: 500;
  text-decoration: none;

  cursor: pointer;
  transition:
    background-color 0.12s ease-out,
    border-color 0.12s ease-out,
    color 0.12s ease-out,
    box-shadow 0.12s ease-out,
    transform 0.06s ease-out;
}

.sw-cart-checkout-all-button:hover,
.sw-cart-checkout-all-button:focus,
.sw-copy-code:hover,
.sw-copy-code:focus,
#sw-add-to-cart:hover,
#sw-add-to-cart:focus,
#sw-buy-now:hover,
#sw-buy-now:focus {
  background: #e3f8e3; /* faint green wash */
  border-color: #1b8c17; /* a bit darker */
  color: #1b8c17;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  outline: none;
}

.sw-cart-checkout-all-button:active,
.sw-copy-code:active,
#sw-add-to-cart:active,
#sw-buy-now:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
}

#stx-auth .stx-card {
  background: transparent !important;
}

.sw-my-coupons .sw-tab th,
.sw-my-coupons .sw-tab td {
  border-bottom: 1px solid #eee;
  padding: 8px;
  vertical-align: top;
}

.sw-my-coupons .sw-tab code {
  background: #f6f8fa;
  padding: 2px 6px;
  border-radius: 4px;
}

.sw-my-coupons .description {
  color: #666;
  font-size: 12px;
}

.stx-list-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.stx-list-wrap h2 {
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.2;
}

.stx-toolbar,
.stx-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 10px 0 16px;
}

.stx-toolbar label,
.stx-controls label {
  font-weight: 600;
}

.stx-toolbar select,
.stx-controls select {
  padding: 6px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  color: #000000;
  min-width: 160px;
  margin-bottom: 15px;
}

.stx-grid-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 1024px) {
  .stx-grid-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .stx-grid-cards {
    grid-template-columns: 1fr;
  }
}

.stx-card-media--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-weight: 700;
}

.stx-badge--topright {
  left: auto;
  right: 10px;
  top: 10px;
  bottom: auto;
}

.stx-card-body {
  padding: 12px 14px 14px;
}

.sw-wrap {
  max-width: 920px;
  margin: 36px auto;
  padding: 0 16px;
}

.sw-h1 {
  margin: 0.2em 0 0.6em;
}

table.sw-summary {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
}

.sw-summary th,
.sw-summary td {
  border-bottom: 1px solid #eee;
  padding: 8px;
  text-align: left;
}

.sw-summary tfoot td {
  font-weight: 700;
}

.sw-right {
  text-align: right;
}

.sw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.sw-grid .full {
  grid-column: 1 / -1;
}

.sw-vat-lines .row {
  display: flex;
  justify-content: space-between;
}

.sw-ev-h {
  margin-top: 14px;
  font-weight: 700;
}

.sw-chip {
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid #ddd;
  border-radius: 999px;
  background: #fafafa;
  margin: 2px 6px 0 0;
  font-size: 12px;
}

.stx-chip-revbar {
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid #ddd;
  border-radius: 999px;
  background: transparent;
  margin: 8px 8px 8px 0; /* more breathing room */
  font-size: 10px;
}
/* Socials manager (organiser-facing) */
.stx-socials-manager {
  max-width: 720px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
}

.stx-socials-manager .stx-grid {
  display: grid;
  gap: 10px;
}

.stx-socials-manager .stx-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 10px;
  align-items: center;
}

.stx-socials-manager .stx-lbl {
  font-weight: 600;
}

.stx-socials-manager .stx-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

@media (max-width: 600px) {
  .stx-socials-manager .stx-row {
    grid-template-columns: 1fr;
  }
}

/* Footer socials block */
.stx-footer-socials {
  margin: 16px 0 8px;
  text-align: center;
}

.stx-footer-socials .stx-socials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.stx-footer-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px; /* <- softer, modern */
  border: 1px solid transparent; /* <- no big outline by default */
  background: transparent; /* <- removes the “badge” feel */
  text-decoration: none;
  transition:
    transform 0.15s,
    background-color 0.15s,
    border-color 0.15s;
}

.stx-footer-socials a:hover {
  transform: translateY(-1px);
  background-color: #f3f4f6; /* subtle hover */
  border-color: #e5e7eb; /* subtle ring only on hover */
}

.stx-footer-socials .dashicons {
  font-size: 20px;
  width: 20px;
  height: 20px;
  line-height: 20px;
}

/* Reusable visually-hidden helper */
.stx-visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.stx-custom-footer img {
  max-width: 100%;
  height: auto;
}

/* Hide common theme copyright blocks so ours replaces them */
.site-footer .site-info,
.site-footer .copyright,
.footer-copyright {
  display: none !important;
}

.stxb-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 12px;
  background: #111827; /* dark background */
  border: 1px solid #374151;
  border-radius: 12px;
  color: #f9fafb; /* light text inside the box */
}

.stxb-wrap h2,
.stxb-wrap h3,
.stxb-wrap legend,
.stxb-wrap label,
.stxb-wrap .description {
  color: #f9fafb;
}

.stxb-section {
  margin: 18px 0 8px 0;
}

.stxb-field {
  margin: 10px 0;
}

.stxb-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.stxb-alert {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 600;
}

.stxb-alert--ok {
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  color: #065f46;
}

.stxb-alert--err {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.stxb-current-img {
  margin: 6px 0;
}

.stxb-preview img {
  max-width: 100%;
  height: auto;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  padding: 6px;
}

#wp--skip-link--target {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.wp-block-group.alignfull.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained {
  padding-top: 0 !important;
}

.sw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.sw-grid label {
  font-weight: 600;
}
.sw-media-field .preview {
  margin: 0.4rem 0;
}
.sw-media-field .preview img {
  max-width: 140px;
  height: auto;
  display: block;
  border: 1px solid #cccccc;
}
.sw-media-field .filemeta {
  font-size: 12px;
  opacity: 0.8;
}
.sw-multi {
  min-height: 140px;
}

.stx-form-wrap {
  max-width: 1080px;
  margin: 0 auto;
}

.stx-card {
  border: 1px solid #cccccc;
  background: transparent;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  padding: 14px;
  margin: 14px 0;
}

.stx-topbar {
  padding: 10px;
}

.stx-topbar-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
}

.stx-full {
  grid-column: 1/-1;
}

#stx_gc_cpt,
#stx_gc_minutes,
#stx_gc_batch {
  color: #cccccc !important;
}

/* Make all inputs/selects with .stx-in readable */
.stx-in option {
  background: #ffffff;
  color: #111111;
}

/* Specifically help dropdowns */
select.stx-in {
  background: #ffffff;
  color: #111111;
}

.stx-in-fixedw {
  width: 20%;
  padding: 8px 10px;
  border: 1px solid #cccccc;
  border-radius: 8px;
  background: transparent;
  box-sizing: border-box;
  color: #cccccc;
}

.stx-textarea--tall {
  min-height: 92px;
}

.stx-checkbox {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 8px 0;
}

.stx-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 860px) {
  .stx-grid {
    grid-template-columns: 1fr;
  }
}

.stx-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.stx-actions--footer {
  margin-top: 6px;
  justify-content: flex-start;
}

.stx-msg {
  margin-left: 10px;
  color: #cccccc;
}

.stx-multi-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.stx-multi-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.stx-multi {
  grid-column: 1/-1;
  min-height: 260px;
  border: 1px solid #cccccc;
  border-radius: 8px;
  padding: 6px;
  background: transparent;
}

.stx-media {
  border: 1px solid #cccccc;
  border-radius: 10px;
  padding: 10px;
  background: transparent;
}

.stx-media .preview img {
  max-width: 160px;
  height: auto;
  display: block;
  border: 1px solid #cccccc;
  border-radius: 6px;
}

.stx-media .preview video {
  max-width: 280px;
  border-radius: 6px;
  border: 1px solid #cccccc;
}

.stx-media-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.stx-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stx-link {
  background: transparent;
}

.stx-link:hover {
  text-decoration: underline;
}
/* Text color inside inputs / textareas */
.stx-multi,
.sw-multi,
.stx-media input,
.stx-media textarea,
.sw-media-field input,
.sw-media-field textarea {
  color: #f9fafb; /* or whatever light color you prefer */
  background-color: transparent;
}

/* Optional: placeholder text color too */
.stx-in::placeholder,
.stx-multi::placeholder,
.sw-multi::placeholder,
.stx-media input::placeholder,
.stx-media textarea::placeholder,
.sw-media-field input::placeholder,
.sw-media-field textarea::placeholder {
  color: rgba(249, 250, 251, 0.6);
}

/* Keep #sw_name nicely inside its .stx-card parent */
.stx-card #sw_name.stx-input,
.stx-card #sw_slug.stx-input,
.stx-card #sw_desc.stx-textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-left: 0;
  margin-right: 0;
}

.sw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.sw-row {
  grid-column: 1/3;
}

.sw-inline {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.sw-muted {
  opacity: 0.8;
}

.sw-box {
  border: 1px solid #e2e2e2;
  background: transparent !important;
  padding: 12px;
  border-radius: 8px;
  margin: 12px 0;
}

.sw-table {
  width: 100%;
  border-collapse: collapse;
}

.sw-table th,
.sw-table td {
  border-bottom: 1px solid #eee;
  padding: 8px;
  vertical-align: top;
}

.sw-table thead th {
  background: transparent !important;
}

.sw-badgelite {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 999px;
  background: transparent !important;
  font-size: 12px;
}

.sw-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.sw-pager {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 8px;
}

.sw-recur-wrap {
  max-width: 960px;
  margin: 24px 0;
  padding: 16px;
  background: transparent;
  border: 1px solid #ddd;
  border-radius: 12px;
}

.sw-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 12px;
}

.sw-row {
  margin: 10px 0;
}

.sw-pills button {
  margin: 4px 6px 0 0;
  border-radius: 999px;
  padding: 6px 12px;
  border: 1px solid #ccc;
  background: transparent;
  cursor: pointer;
}

/* active pill keeps blue text + border, transparent background */
.sw-pills button.active {
  background: transparent;
  color: #fff;
  border-color: #2271b1;
}

.sw-times {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: transparent !important;
}

.sw-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 999px;
  padding: 4px 10px;
  background: transparent !important;
}

.sw-chip b {
  margin-right: 6px;
}

.sw-chip a {
  margin-left: 8px;
  text-decoration: none;
  color: #a00;
}

.sw-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

/* danger + success keep colour but no solid background */
.sw-danger {
  background: transparent !important;
  color: #b32d2e;
  border-color: #b32d2e !important;
}
.sw-danger-del {
  background: transparent !important;
  color: #b32d2e;
  border-color: #ff0000 !important;
}

.sw-success {
  color: #0a7a0a;
}

.sw-table {
  border-collapse: collapse;
  width: 100%;
}

.sw-table th,
.sw-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.sw-inline {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* note box: transparent background, keep blue border/text feel */
.sw-note {
  background: transparent !important;
  border: 1px solid #c8defa;
  padding: 8px;
  border-radius: 8px;
  margin-top: 8px;
}

@media (max-width: 700px) {
  .sw-grid {
    grid-template-columns: 1fr;
  }
}

/* Make ALL text inside the weekday pills white */
#sw-wd,
#sw-wd * {
  color: #ffffff !important;
  opacity: 1; /* override sw-muted etc */
}

.sw-del-wrap,
.sw-del-wrap * {
  background: transparent !important;
}

.sw-table thead th,
.sw-table thead th * {
  color: #cccccc !important;
}

/* Wrapper + form width */
#swc-mgr .swc-mgr-form {
  max-width: 1100px;
  margin: 0 auto;
}

/* Header row */
.swc-mgr-head {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.swc-mgr-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stx-h3 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0.2px;
}

.stx-sub {
  font-size: 12px;
}

.stx-hr {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 10px 0;
}

.swc-mgr-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Search input, no background */
.swc-mgr-actions input[type="search"] {
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: transparent;
  transition: box-shadow 0.15s;
}

.swc-mgr-actions input[type="search"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(123, 58, 237, 0.15);
}

/* Grid rows */
.swc-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px 18px; /* row / column gaps */
  align-items: end;
  margin: 12px 0;
}

.swc-row.wrap {
  align-items: flex-start;
}

.swc-row.mini {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  align-items: end;
  margin-top: 8px;
}

/* Labels & inputs */
.swc-row label {
  display: flex;
  flex-direction: column;
  font-weight: 600;
  gap: 6px;
  min-width: 0;
}

.swc-row input[type="text"],
.swc-row input[type="number"],
.swc-row input[type="datetime-local"],
.swc-row input[type="date"],
.swc-row select {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: transparent;
  min-width: 0;
}

/* Columns inside grid */
.swc-col {
  min-width: 0;
}

/* Section blocks – no background */
.swc-section {
  border: 1px solid #eef0f4;
  padding: 16px 18px;
  border-radius: 12px;
  margin: 14px 0;
}

.swc-h {
  margin: 0 0 6px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Lists & chips */
.swc-list {
  max-height: 180px;
  overflow: auto;
  border: 1px solid #e5e7eb;
  padding: 6px;
  border-radius: 10px;
  background: transparent;
  grid-column: 1 / -1;
}

.swc-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 6px 0;
  grid-column: 1 / -1;
}

.swc-chip {
  border: 1px solid #e1e5ea;
  border-radius: 999px;
  padding: 4px 9px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  background: transparent;
}

/* Chip remove button – layout only */
.swc-chip button {
  border: none;
  background: transparent;
  cursor: pointer;
  line-height: 1;
}

/* Checkboxes + day-of-week layout */
.swc-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 14px 6px 0;
}

.swc-dow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Table layout */
.swc-table {
  width: 100%;
  border-collapse: collapse;
}

.swc-table th,
.swc-table td {
  border-bottom: 1px solid #f3f4f6;
  padding: 10px;
  text-align: left;
}

.swc-table thead th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Badges – keep borders/text, no fill */
.swc-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid #e5e7eb;
  background: transparent;
}

.swc-badge.on {
  color: #1af709;
  border-color: #1af709;
  background: transparent;
}

.swc-badge.off {
  color: #ff0000;
  border-color: #ff0000;
  background: transparent;
}

/* Pager row */
.swc-mgr-pager {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Actions row as flex */
.swc-row.actions,
.swc-mgr-form > .swc-row:last-child {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Helper text */
.swc-help {
  font-size: 12px;
}

/* Stack label text above its checkbox */
#swc-mgr .swc-row label:has(> input[type="checkbox"]) {
  flex-direction: column;
  align-items: flex-start;
}

#swc-mgr .swc-row label:has(> input[type="checkbox"]) input[type="checkbox"] {
  margin-top: 6px;
}

/* Make ALL text inside .swc-row labels and inputs light grey */
.swc-row,
.swc-row *,
.swc-row label,
.swc-row input,
.swc-row input::placeholder {
  color: #cccccc !important;
}

/* Search field inside the manager should use light grey text */
#swc-mgr-search {
  color: #cccccc !important;
}

/* Placeholder too */
#swc-mgr-search::placeholder {
  color: #cccccc !important;
  opacity: 1; /* prevent browsers from dimming it */
}

/* Text inside the batch input */
#sw-batch {
  color: #cccccc !important;
}

/* Placeholder inside the batch input */
#sw-batch::placeholder {
  color: #cccccc !important;
  opacity: 1; /* stop browsers making it extra faint */
}

.stx-rev-title,
.stx-rev-title * {
  color: #ffffff !important;
}

.stx-chip {
  background: transparent !important;
}

/* Optional: if you want to reserve space for 2 lines even if help is missing */
.sw-field {
  --sw-help-lines: 2;
  --sw-help-line-height: 1.4;
}

/* Make sw-field behave nicely in rows */
.sw-field {
  display: inline-flex; /* sit next to each other, but still block-y */
  flex-direction: column;
  flex: 1 1 220px; /* can shrink/grow, base width ~220px */
  min-width: 0; /* allow shrink in tight spaces */
}

/* Any inline wrapper should allow wrapping, not cramming */
.sw-inline,
.sw-fields-inline {
  display: flex;
  flex-wrap: wrap; /* this is the key: wrap instead of overlap */
  gap: 8px;
}

/* Inputs inside a field must never overflow their box */
.sw-field input,
.sw-field select,
.sw-field textarea {
  width: 100%;
  box-sizing: border-box;
}

/* Make sure stx-input fields always align left and fill their row */
.stx-input,
.stx-input--wide,
#sw_flt_search {
  display: block;
  width: 100% !important; /* guarantees full width */
  max-width: 100% !important; /* overrides theme max-widths */
  margin-left: 0 !important; /* eliminates stray margins */
  box-sizing: border-box;
}

/* If the parent container is a flexbox, force left alignment */
#sw_flt_search:not([type="checkbox"]) {
  align-self: flex-start !important;
}

/* If the wrapper uses flex, make it behave */
#sw_flt_search,
#sw_flt_search:focus {
  flex: 1 1 auto !important;
}

/* Ensure the parent row doesn't center it */
.sw-field,
.swc-row,
.stx-row,
.stx-topbar,
.stx-topbar-grid {
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

/* Make "actions" rows align to the left, not center/right */
.stx-actions.stx-actions--center,
.stx-actions.stx-actions--bottom {
  justify-content: flex-start !important;
  align-items: flex-start;
  text-align: left;
}

/* Just in case anything inside was nudged with auto-margins */
.stx-actions.stx-actions--center > *,
.stx-actions.stx-actions--bottom > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Nudge the "Load" button down a bit */
.stx-actions.stx-actions--bottom button[name="sw_load_event"] {
  margin-top: 28px !important;
}

.stx-mini-tab td {
  background-color: transparent !important;
}

.stx-mini-tab th {
  background-color: #333333 !important;
}

.stx-total {
  background: #333333 !important;
}

/* Basic mini table layout */
.stx-mini-tab {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* Cell spacing / typography */
.stx-mini-tab th,
.stx-mini-tab td {
  padding: 0.45rem 0.55rem;
  text-align: left;
}

/* Numeric alignment */
.stx-num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Column widths */
.col-cur {
  width: 72px;
}
.col-venue {
  width: auto;
}
.col-n {
  width: 110px;
}

/* Filter + inputs layout */
.stx-filter {
  margin: 0 0 12px 0;
}

.stx-filter__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}

.stx-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stx-tag,
.stx-um-badge {
  display: inline-block;
  border: 1px solid #cccccc;
  border-radius: 999px;
  font-size: 8px;
  padding: 8px 8px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #cccccc;
}

.stx-input,
.stx-select {
  padding: 0.5rem 0.6rem;
  min-width: 140px;
  box-sizing: border-box;
}

/* Table container + table layout */
.stx-table-wrap {
  width: 100%;
  overflow: auto;
  border-radius: 10px;
}

.stx-table {
  width: 100%;
  table-layout: auto;
  min-width: 820px;
  border-collapse: collapse;
}

.stx-table th,
.stx-table td {
  padding: 0.7rem 0.9rem;
  vertical-align: middle;
}

/* Column widths */
.col-id {
  width: 110px;
  white-space: nowrap;
}
.col-status {
  width: 140px;
}
.col-created {
  width: 180px;
}
.col-total {
  width: 150px;
  white-space: nowrap;
}
.col-discount {
  width: 160px;
  white-space: nowrap;
}
.col-actions {
  width: 120px;
}
.col-pay {
  width: 220px;
}

/* Cell helpers */
.stx-cell-scope {
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}

.stx-t-right {
  text-align: right;
}

/* Generic box/grid layout (no colours) */
.stx-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.stx-box {
  border-radius: 10px;
  overflow: hidden;
}

.stx-box__title {
  padding: 0.75rem 1rem;
  font-weight: 700;
}

.stx-box__body {
  padding: 0.8rem 1rem;
}

/* Simple table variant used in boxes */
.sw-tab {
  width: 100%;
  border-collapse: collapse;
}

.sw-tab th,
.sw-tab td {
  padding: 0.55rem 0.7rem;
  text-align: left;
  vertical-align: top;
}

.sw-right {
  text-align: right;
}

/* Key-value grid for consent/info panels */
.stx-kv {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}

.stx-kv .stx-kv-wide {
  grid-column: 1 / -1;
}

.stx-checks {
  margin: 0.35rem 0 0.1rem 1.1rem;
  padding: 0;
  list-style: disc;
}

.stx-checks li {
  margin: 0.25rem 0;
}

.stx-ok,
.stx-no {
  display: inline-block;
  width: 1.2em;
  text-align: center;
}

/* Desktop two-column layout helper */
@media (min-width: 1100px) {
  .stx-grid {
    grid-template-columns: 1fr;
  }
  .stx-grid.stx-two-cols {
    grid-template-columns: 1.3fr 0.7fr;
  }
  .stx-grid .stx-col-1 {
    grid-column: 1;
  }
  .stx-grid .stx-col-2 {
    grid-column: 2;
  }
  .stx-grid .stx-span-2 {
    grid-column: 1 / -1;
  }
}

/* Responsive table width */
@media (max-width: 980px) {
  .stx-table {
    min-width: 100%;
  }
}

.stx-toolbar-revenue {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
  margin-bottom: 10px;
  background: transparent !important;
}

.stx-table-wrap {
  width: 100%;
  overflow: auto;
  border: 1px solid;
  border-radius: 10px;
}

.stx-rev {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
  line-height: 1.25;
}

.stx-rev th,
.stx-rev td {
  border-bottom: 1px solid;
  padding: 0.5rem 0.6rem;
  text-align: left;
  vertical-align: middle;
}

.stx-rev thead th {
  font-weight: 700;
  font-size: 12.5px;
}

.stx-rev .stx-num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.stx-rev .clip {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Section / subtotal / grand rows – emphasis only, no colours */
.stx-rev .stx-section td {
  font-weight: 800;
}

.stx-rev .stx-subtotal td {
  font-weight: 700;
}

.stx-rev .stx-grand td {
  font-weight: 800;
}

/* Column widths */
.col-cur {
  width: 90px;
}
.col-cc {
  width: 120px;
}
.col-venue {
  width: auto;
}
.col-n {
  width: 120px;
}

@media (max-width: 700px) {
  .stx-rev {
    font-size: 12px;
  }
  .stx-rev thead th {
    font-size: 12px;
  }
}

.sw-notice {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0;
  box-shadow: none !important;
  color: #cccccc !important;
}

/* Card + header layout */
.sw-card {
  border-radius: 12px;
  padding: 16px;
}

.sw-card-head {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}

.sw-icon {
  font-size: 24px;
  width: 24px;
  height: 24px;
}

.sw-title {
  margin: 0;
  font-size: 18px;
}

.sw-sub {
  margin: 0.5em 0 0 0; /* or match sw-title's margin-bottom spacing */
  padding: 0;
}

/* Container + responsive layout */
.stx-scan {
  max-width: 980px;
  margin: 12px auto;
  padding: 12px;
  border-radius: 10px;
}

.stx-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 900px) and (orientation: landscape) {
  .stx-row {
    grid-template-columns: 1fr 360px;
  }
}

.stx-left {
  min-width: 0;
}

.stx-right {
  min-width: 0;
}

.stx-success {
  padding: 10px;
  border-radius: 8px;
  margin-top: 8px;
}

/* Toast (success/error) */
.stx-toast {
  margin-bottom: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  font-weight: 600;
}

.stx-toast.ok,
.stx-toast.err {
  border: 1px solid;
}

/* Camera stage */
.stx-cam-shell {
  position: relative;
  width: 100%;
}

.scan-stage {
  position: relative;
  width: 100%;
  height: min(70vh, 560px);
  min-height: 340px;
  border-radius: 10px;
  overflow: hidden;
}

.scan-view {
  position: absolute;
  inset: 0;
}

.scan-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.scan-overlay .guide {
  width: 60vmin;
  height: 60vmin;
  max-width: 440px;
  max-height: 440px;
  min-width: 220px;
  min-height: 220px;
  border: 2px solid rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35);
}

#stx-qr video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Controls */
.scan-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.stx-select {
  min-width: 180px;
  max-width: 100%;
}

/* Manual entry */
.stx-manual {
  margin-top: 10px;
}

.stx-manual label {
  display: block;
  font-size: 12px;
  margin: 0 0 0.25em;
}

.stx-manual-row {
  display: flex;
  gap: 8px;
}

.stx-manual-row input {
  flex: 1;
}

/* Result/form area */
#stx-result {
  font-size: 13px;
  line-height: 1.45;
}

.stx-badge {
  display: inline-block;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 6px;
  margin-left: 6px;
}

.stx-um-badge {
  display: inline-block;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 6px;
  margin-left: 6px;
}

.stx-badge.ok,
.stx-badge.err {
  font-weight: 600;
}

.stx-form label {
  font-size: 12px;
  display: block;
  margin: 0.5em 0 0.15em;
}

.stx-form input[type="text"],
.stx-form input[type="email"],
.stx-form input[type="tel"] {
  width: 100%;
}

.stx-checks label {
  display: block;
  margin: 0.25em 0;
}

.stx-actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
}

/* Hide our decorative guide so only html5-qrcode's overlay is visible */
.scan-overlay {
  display: none !important;
}

/* Door view */
.stx-door {
  --line: #e5e7eb;
  --soft: #f8fafc;
  --ink: #111827;
  --muted: #6b7280;
}

.stx-door .card {
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  padding: 14px;
}

.stx-door .row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.stx-door label {
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stx-door table {
  width: 100%;
  border-collapse: collapse;
}

.stx-door thead th {
  position: sticky;
  top: 0;
  background: transparent;
  z-index: 1;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 10px;
}

.stx-door tbody td {
  border-bottom: 1px solid var(--line);
  padding: 10px;
  vertical-align: top;
}

.stx-door .muted {
  color: var(--muted);
}

.stx-door .small {
  font-size: 12px;
}

.stx-door .pill {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  background: transparent;
}

.stx-door td .pill {
  display: inline-block;
  text-align: center;
}

.stx-door td {
  text-align: center;
}

.stx-note {
  background: transparent;
  color: #1e3a8a;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 10px;
}

/* Modal shell */
.stx-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.stx-modal.is-open {
  display: block;
}

/* keep overlay dim so modal is readable on dark themes */
.stx-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.stx-modal__dialog {
  position: relative;
  max-width: 720px;
  margin: 8vh auto;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  background: #111827; /* dark slate panel */
  color: #f9fafb; /* light text inside */
}

.stx-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: #111827;
  border-bottom: 1px solid #4b5563;
}

.stx-modal__title {
  font-weight: 700;
  font-size: 16px;
}

.stx-modal__sub {
  color: #6b7280;
  font-size: 12px;
  margin-top: 2px;
}

.stx-modal__x {
  border: 0;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
}

.stx-modal__x:hover {
  background: transparent;
}

.stx-modal__form {
  padding: 14px 16px;
}

/* Shared field styles (also used in modal form) */
.stx-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0;
}

.stx-label {
  font-weight: 600;
  font-size: 13px;
}

.stx-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: transparent !important;
  color: #f9fafb;
}

.stx-chipbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 2px;
}

.stx-chip {
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: transparent;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 12px;
}

.stx-chip:hover {
  background: transparent;
}

.stx-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

/* Ensure modal text inherits light theme */
.stx-modal__form,
.stx-modal__form label,
.stx-modal__title,
.stx-modal__sub {
  color: #f9fafb;
}

/* Base nav styling used by our custom navs */
.stx-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 8px;
}

.stx-nav__item {
  margin: 0;
}

.stx-nav__link {
  text-decoration: none;
  font-size: 0.9rem;
}

.stx-nav__link:hover {
  text-decoration: underline;
}

/* Footer bar container */
.stx-nav--footer-autobar {
  padding: 12px 20px;
  border-top: 1px solid rgba(148, 163, 184, 0.4);
}

/* Mobile-first:
   - vertical list
   - left margin: 100px
*/
.stx-nav--footer-autobar .stx-nav__list {
  flex-direction: column;
  align-items: flex-start;
  margin-left: 100px;
}

/* Desktop (>= 768px):
   - horizontal
   - centred
   - no left margin
*/
@media (min-width: 768px) {
  .stx-nav--footer-autobar .stx-nav__list {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-left: 0;
  }
}

.stx-media-blocked {
  padding: 10px 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #991b1b;
  font-size: 0.95em;
}

/* event container (the one you asked for) */
.stx-media-event {
  margin: 18px 0;
  padding: 16px;
  border-radius: 16px;

  /* “transparent background” glass */
  background: rgba(17, 24, 39, 0.35); /* slate/ink tint */
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.stx-media-event h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
  letter-spacing: 0.2px;
}

/* blocked notice */
.stx-media-blocked {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.25);
  color: #fde68a;
}

/* grid + cards */
.stx-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.stx-media-card {
  border-radius: 14px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.stx-media-card strong {
  color: #f9fafb;
}

/* video */
.stx-media-card video {
  width: 100%;
  max-width: 520px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.35);
}

/* Producer media badge */
.stx-badge-media {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(249, 250, 251, 0.85);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* “Downloaded” variant */
.stx-badge-media.stx-badge--ok {
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.12);
  color: #bbf7d0;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.08) inset;
}

/* Producer media muted metadata */
.stx-muted-media {
  color: rgba(249, 250, 251, 0.62);
  font-size: 12px; /* you can remove inline font-size now */
  margin-top: 6px;
}

/* Event consent UI */
.stx-evcons {
  max-width: 1100px;
}

/* Form row */
.stx-evcons__form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin: 0 0 12px;
}

/* Inputs */
.stx-evcons__input {
  min-width: 180px;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

/* Button */
.stx-evcons__btn {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #111;
  color: #fff;
  cursor: pointer;
}

/* Table wrapper */
.stx-evcons__tablewrap {
  overflow: auto;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
}

/* Table */
.stx-evcons__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.stx-evcons__table thead th {
  padding: 10px 12px;
  text-align: left;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
}

.stx-evcons__table tbody td {
  padding: 10px 12px;
  vertical-align: top;
  border-bottom: 1px solid #f1f5f9;
}

/* Helpers */
.stx-evcons__muted {
  margin-top: 2px;
  font-size: 12px;
  color: #64748b;
}

/* Badges */
.stx-b {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e5e7eb;
  font-size: 12px;
}

.stx-b--yes {
  background: #d1fae5;
  color: #065f46;
}

.stx-b--no {
  background: #fee2e2;
  color: #991b1b;
}

.stx-attendee-filter-wrap {
  background: rgba(255, 255, 255, 0.03);
  padding: 18px;
  border-radius: 10px;
  margin-bottom: 25px;
}

.stx-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
  justify-content: center;
}

.stx-filter-col label {
  display: block;
  margin-bottom: 4px;
  color: #ddd;
}

.stx-filter-col input,
.stx-filter-col select {
  background: #111;
  color: #fff;
  border: 1px solid #333;
  padding: 6px 10px;
  border-radius: 6px;
  min-width: 180px;
}

.stx-filter-btn {
  margin-top: 4px;
  padding: 8px 14px;
  background: #0af;
  color: #000;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
}

/* Center CSV button */
.stx-export-button-wrap {
  text-align: center;
  margin-top: 25px;
}

.stx-export-btn {
  display: inline-block;
  padding: 10px 20px;
  background: #0af;
  color: #000;
  font-weight: bold;
  border-radius: 8px;
  text-decoration: none;
}

/* ----------------------------------------------
   DARK BACKGROUNDS FOR NON-BUTTON ELEMENTS
   ---------------------------------------------- */

#stx-consent .stx-box {
  background: rgba(0, 0, 0, 0.25) !important;
  border-color: #4b5563 !important;
}

/* Consent notes */
#stx-consent .stx-help,
#stx-consent .stx-note {
  color: #9ca3af !important;
}

/* Switch styling */
#stx-consent .stx-slider {
  background: #374151 !important;
}

/* ScreamTix Consent Box + Sliders (Scoped to #stx-consent) */
#stx-consent * {
  box-sizing: border-box;
}

#stx-consent .stx-box {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  padding: 14px;
  max-width: 720px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

#stx-consent .stx-box__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

#stx-consent .stx-title {
  margin: 0;
  font-size: 18px;
}

#stx-consent .stx-status {
  font-size: 12px;
  color: #64748b;
  min-height: 18px;
}

#stx-consent .stx-item {
  padding: 10px 0;
  border-top: 1px dashed #e5e7eb;
}

#stx-consent .stx-item:first-of-type {
  border-top: 0;
}

#stx-consent .stx-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#stx-consent .stx-label {
  font-weight: 600;
}

#stx-consent .stx-help {
  margin: 6px 0 0;
  font-size: 13px;
  color: #64748b;
}

#stx-consent .stx-note {
  margin: 12px 0 0;
  font-size: 12px;
  color: #64748b;
  border: 1px solid #dbeafe;
}

/* Switch (Toggle Slider) */
#stx-consent .stx-switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
}

#stx-consent .stx-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

#stx-consent .stx-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #e5e7eb;
  border-radius: 999px;
  transition: 0.18s;
}

#stx-consent .stx-slider::before {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: 0.18s;
}

#stx-consent .stx-switch input:checked + .stx-slider::before {
  transform: translateX(20px);
}

/* Consent save status feedback */
#stx-consent .saving .stx-status {
  color: #6b7280;
}

#stx-consent .saved .stx-status {
  color: #065f46;
}

#stx-consent .error .stx-status {
  color: #991b1b;
}

/* Remove bounding box background and reset borders/padding */
.stx-socials-manager {
  background: transparent !important;
  border: 1px solid #ccc;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 auto;
  max-width: 720px;
}

.stx-socials-manager form {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.stx-socials-manager input.stx-input {
  background: transparent !important;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 8px 10px;
  width: 100%;
}

/* Optional: tweak layout spacing if needed */
.stx-socials-manager .stx-row {
  margin-left: 12px;
}

.stx-socials-manager h2 {
  font-size: 26px;
  margin-left: 12px;
  padding-bottom: 20px;
}

/* Optional: tweak layout spacing if needed */
.stx-socials-manager p.description,
.stx-socials-manager .stx-btn {
  margin-left: 12px;
}

#stx-tax-table {
  min-width: 1400px;
}
#stx-tax-table th,
#stx-tax-table td {
  vertical-align: middle;
}

.stx-embed-wrap {
  max-width: 1100px;
  margin: 0 auto;
}
.stx-embed-card {
  border: 1px solid #e5e7eb;
  background: transparent;
  border-radius: 10px;
  padding: 14px;
  margin: 14px 0;
}

.stx-embed-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.stx-embed-note {
  margin: 10px 0;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f8fafc;
}

.stx-embed-note--ok {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #333333;
}

.stx-embed-note--err {
  border-color: #fecaca;
  background: #fff1f2;
  color: #000000;
}

#stx-tax-fe .stx-in {
  color: #cccccc;
}

#stx-tax-fe select.stx-in.stx-cc {
  color: #374151;
}

.sw-pill {
  display: inline-block;
  background: transparent !important;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 2px 8px;
}

/* Uniform styling and spacing for help text */
.sw-help {
  font-size: 12px;
  line-height: 1.4;
  color: #6b7280; /* Tailwind slate-500 */
  margin-top: 6px;
  min-height: 1.4em; /* reserve space for 1 line of help text */
}

.sw-help {
  min-height: calc(var(--sw-help-lines) * 1em * var(--sw-help-line-height));
  max-height: calc(var(--sw-help-lines) * 1em * var(--sw-help-line-height));
  overflow: hidden; /* prevent layout shift if help is long */
}

form.stxms-form .stx-input {
  color: #000000 !important;
}

/* Also ensure dropdown options are readable in light theme */
form select.stx-input option,
form select.stx-in option,
form select.stx-select option {
  background: #ffffff;
  color: #111827;
}

#stx-move-up-btn {
  margin-top: 0 !important; /* remove any top margin */
  transform: translateY(-10px); /* shift it up visually */
}

/* ===== Screamtix Dashboard ===== */

.screamtix-dashboard {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family:
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    sans-serif;
}

.screamtix-dashboard__subtitle {
  color: #9ca3af;
  font-size: 14px;
  margin-bottom: 22px;
}

/* Grid */
.screamtix-dashboard__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}

/* ===== Cards ===== */
.screamtix-dashboard__card {
  position: relative;
  padding: 18px 16px 20px;
  border-radius: 14px;

  /* Gradient background */
  background: linear-gradient(135deg, #111827 0%, #1f2937 100%);

  color: #e5e7eb;
  text-decoration: none;

  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.screamtix-dashboard__card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Optional subtle sheen */
.screamtix-dashboard__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.04),
    rgba(255, 255, 255, 0)
  );
  pointer-events: none;
}

/* ===== Icon ===== */
.screamtix-dashboard__icon {
  font-size: 34px;
  margin-bottom: 14px;

  color: #38bdf8; /* soft cyan accent */
  text-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
}

/* ===== Text ===== */
.screamtix-dashboard__title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #f9fafb;
}

.screamtix-dashboard__desc {
  font-size: 13px;
  line-height: 1.45;
  color: #cbd5f5;
}

/* ===== Mobile ===== */
@media (max-width: 600px) {
  .screamtix-dashboard__grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
  }

  .screamtix-dashboard__icon {
    font-size: 28px;
  }
}

/* Policy versions table (manager UI) */
.stx-polver {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: auto;
  background: #fff;
  color: #111827; /* force readable text even under dark themes */
}

.stx-polver__table {
  width: 100%;
  border-collapse: collapse;
  color: inherit;
}

.stx-polver__table thead th {
  text-align: left;
  background: #f8fafc;
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}

.stx-polver__table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: top;
}

.stx-polver__actions {
  white-space: nowrap;
}

.stx-polver__sep {
  color: #94a3b8;
  padding: 0 6px;
}

/* Links used inside STX policy manager */
.stx-link {
  color: #2563eb;
  text-decoration: none;
  font-weight: 600;
}
.stx-link:hover {
  text-decoration: underline;
}

.stx-link--danger {
  color: #dc2626;
}

/* Ensure cards use true vertical centering */
.screamtix-dashboard__card {
  display: flex;
  flex-direction: column;
  align-items: center; /* horizontal centering */
  text-align: center; /* text alignment */
}

/* Icon already centred, just make it intentional */
.screamtix-dashboard__icon {
  margin-bottom: 12px;
  align-self: center;
}

/* Title centred */
.screamtix-dashboard__title {
  text-align: center;
}

/* Description centred and visually balanced */
.screamtix-dashboard__desc {
  text-align: center;
  max-width: 90%;
}

/* Hide the small "Net Today" revenue summary on mobile */
@media (max-width: 767px) {
  .stx-rev-today-mini[data-stx-rev] {
    display: none !important;
  }
}

/* Mobile menu panel (WP block navigation) */
.wp-block-navigation__responsive-container.is-menu-open {
  background: #000 !important;
  color: #fff !important;
}

/* Links inside the open mobile menu */
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__label {
  color: #fff !important;
}

/* Close button + icon */
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-close svg,
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-open svg {
  color: #fff !important;
  fill: #fff !important;
}

/* Optional: remove any borders/dividers that look “light mode” */
.wp-block-navigation__responsive-container.is-menu-open * {
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* ===== ScreamTix Media Upload API (shortcode UI) ===== */

/* critical: stop width/padding from blowing out containers */
.stxmu-card,
.stxmu-card * {
  box-sizing: border-box;
}

.stxmu-card {
  max-width: 860px;
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.18);
  border-radius: 16px;
  padding: 16px;
  color: #f8fafc;
  overflow: hidden; /* safety net for any long content */
}

.stxmu-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.stxmu-title {
  margin: 0 0 6px 0;
  font-size: 18px;
  line-height: 1.2;
}
.stxmu-subtitle {
  opacity: 0.75;
  font-size: 13px;
}

.stxmu-chip {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  opacity: 0.9;
  white-space: nowrap;
}

.stxmu-form {
  margin-top: 10px;
}

.stxmu-section {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 14px;
  padding: 14px; /* a bit more breathing room */
  margin-top: 12px;
}

.stxmu-section__title {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 10px;
}

.stxmu-row {
  display: flex;
  gap: 14px; /* slightly bigger gap = no “border collision” look */
  flex-wrap: wrap;
}

/* grid that never overflows */
.stxmu-grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
}
@media (max-width: 780px) {
  .stxmu-grid2 {
    grid-template-columns: 1fr;
  }
}

/* critical: allow grid children to shrink instead of overflow */
.stxmu-grid2 > .stxmu-field {
  min-width: 0;
}

.stxmu-field {
  display: block;
  min-width: 0;
}
.stxmu-field--full {
  flex: 1 1 100%;
}
.stxmu-label {
  display: block;
  font-size: 12px;
  opacity: 0.85;
  margin: 0 0 6px 0;
}

.stxmu-input {
  width: 100%;
  max-width: 100%;
  display: block;
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  color: #f8fafc;
  outline: none;
}
.stxmu-input::placeholder {
  color: rgba(248, 250, 252, 0.5);
}
.stxmu-input:focus {
  border-color: rgba(255, 255, 255, 0.35);
}

.stxmu-help {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.7;
}

.stxmu-actions {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.stxmu-btn {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: #f8fafc;
  cursor: pointer;
}
.stxmu-btn--primary {
  background: rgba(59, 130, 246, 0.25);
  border-color: rgba(59, 130, 246, 0.45);
}

.stxmu-alert {
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  margin: 12px 0;
}
.stxmu-alert--ok {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
}
.stxmu-alert--error {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.35);
}
.stxmu-alert__title {
  font-weight: 700;
  margin-bottom: 6px;
}

.stxmu-code {
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 6px;
  border-radius: 8px;
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  max-width: 100%;
  overflow: auto; /* long tokens/paths won’t break layout */
}
.stxmu-code--selectall {
  user-select: all;
}

.stxmu-keyrow {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.stxmu-muted {
  opacity: 0.75;
  font-size: 12px;
}
.stxmu-note {
  margin-top: 10px;
  opacity: 0.8;
  font-size: 12px;
}

.stx-in {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #cccccc;
  border-radius: 8px;
  background: transparent !important;
  color: #cccccc !important;
  box-sizing: border-box;
}

.stx-var-card {
  background: #1f2937; /* slate-800 */
  border: 1px solid #374151; /* slate-700 */
  border-radius: 8px;
  padding: 12px;
  margin: 12px 0;
  color: #f3f4f6; /* slate-100 */
}

.stx-var-header {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  padding: 8px 4px;
  color: #f9fafb; /* slate-50 */
}

.stx-var-header:hover {
  color: #ffffff;
}

.stx-var-body {
  display: none;
  margin-top: 10px;
  color: #e5e7eb; /* slate-200 */
}

.stx-var-card.open .stx-var-body {
  display: block;
}

.stx-var-body strong {
  color: #ffffff;
}

.stx-var-card.open {
  border-color: #4b5563; /* slate-600 */
}

/* ===== Event Template Gallery ===== */
.stx-et-gallery {
  position: relative;
  margin: 24px 0;
  overflow: hidden;
}

.stx-et-gallery-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
}

.stx-et-gallery-item {
  flex: 0 0 calc(20% - 10px);
}

.stx-et-gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

/* Mobile */
@media (max-width: 768px) {
  .stx-et-gallery-item {
    flex: 0 0 100%;
  }
  .stx-gal-nav {
    display: block;
  }
}

/* Arrows */
.stx-gal-nav {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
}
.stx-gal-prev {
  left: 8px;
}
.stx-gal-next {
  right: 8px;
}

/* ===== Mobile layout adjustments ===== */
@media (max-width: 768px) {
  /* Hide hero background image */
  .stx-et-hero-img {
    display: none;
  }

  /* Gallery: single image per view */
  .stx-et-gallery-item {
    flex: 0 0 100%;
  }
  /* Reflow grid vertically on mobile */
  .stx-et-grid {
    display: flex;
    flex-direction: column;
  }

  /* Media (image / video) first */
  .stx-media-card {
    order: 1;
    margin-bottom: 16px;
  }

  /* Key details after media */
  .stx-et-grid > .stx-card:not(.stx-media-card) {
    order: 2;
  }
}

/* Admin + shortcode gallery containers */
.sw-gallery-admin,
.sw-gallery-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  overflow: visible !important;
  align-items: flex-start;
}

/* Individual items */
.sw-gallery-admin .sw-gallery-item,
.sw-gallery-preview .sw-gallery-item {
  flex: 0 0 auto; /* do not stretch */
  width: 100px; /* your square size */
  position: relative;
  cursor: move;
}

/* Thumbnails */
.sw-gallery-admin .sw-gallery-item img,
.sw-gallery-preview .sw-gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  pointer-events: none;
  user-select: none;
}

/* Sortable placeholder – same size as items */
.sw-gallery-placeholder {
  flex: 0 0 auto;
  width: 100px;
  height: 100px;
  background: rgba(0, 0, 0, 0.05);
  border: 2px dashed #aaa;
  border-radius: 6px;
  box-sizing: border-box;
}

#stx_faq_list {
  display: block;
}

.stx-faq-row {
  position: relative;
  padding-left: 32px; /* space for handle */
  margin-bottom: 8px;
}

.stx-faq-handle {
  position: absolute;
  top: 10px;
  left: 8px;
  cursor: move;
  font-size: 16px;
  opacity: 0.6;
  user-select: none;
}

.stx-var-faq-handle {
  cursor: move;
  user-select: none;
}

#stx_faq_list {
  position: relative; /* make it a clear reference box */
}

/* Keep the dragged helper the same width as the list */
#stx_faq_list .ui-sortable-helper {
  box-sizing: border-box;
  width: 100% !important;
}

.bgny-left {
  float: left;
  margin-top: 0;
  margin-right: 18px;
  margin-bottom: 12px;
  margin-left: 0;
  max-width: 35%;
  height: auto;
}

.mvnh-right {
  float: right;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 12px;
  margin-left: 18px;
  max-width: 35%;
  height: auto;
}

/* Progress: transparent so underlying UI stays readable */
.sw-progress {
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
  color: inherit; /* keep text readable in whatever theme you're in */
}

/* If you have an inner bar element, keep that visible */
.sw-progress .sw-progress-bar,
.sw-progress progress::-webkit-progress-value,
.sw-progress progress::-moz-progress-bar {
  /* leave your bar color as-is, or set one if needed */
}

/* If it's a native <progress> element inside */
.sw-progress progress {
  background: transparent !important;
}
.sw-progress progress::-webkit-progress-bar {
  background: transparent !important;
}

.stx-visible-variants {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: 0.95em;
  color: #666;
}

.stx-visible-variants li {
  margin: 4px 0;
}

.stx-exp-badge {
  margin-left: 6px;
  font-style: italic;
  color: #b45309;
}

.stx-exp-table {
  width: 100%;
  border-collapse: collapse;
  color: #ddd; /* light text */
}

.stx-exp-table th,
.stx-exp-table td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-align: right;
  font-size: 14px;
}

/* Left column (metric names) */
.stx-exp-table th:first-child,
.stx-exp-table td:first-child {
  text-align: left;
  width: 200px;
  color: #eee;
}

/* Header row */
.stx-exp-table thead tr {
  background: rgba(
    255,
    255,
    255,
    0.05
  ); /* low-contrast overlay, still visible */
}

.stx-exp-table th {
  font-weight: 600;
  color: #fff; /* visible on dark bg */
}

/* Muted text for 'No data' */
.stx-exp-table .stx-muted {
  opacity: 0.6;
}

/* Optional: hover highlight */
.stx-exp-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.04);
}

.stx-quote.stx-muted {
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.55;
  opacity: 0.95;
  letter-spacing: 0.2px;
}

/* Make variant description textareas behave */
.stx-var-desc {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  box-sizing: border-box;
  resize: vertical !important; /* optional: stops shrinking horizontally */
  display: block;
}

/* Variant gallery: horizontal scroll row */

.stx-variant-gallery-track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
}

/* Each image item */
.stx-variant-gallery-item img {
  height: 100px;
  width: auto;
  display: block;
}

.stx-card,
.stx-section {
  min-width: 0;
}

/* === FAQ editor width fix (normal + variant) === */

/* Normal FAQ blocks */
.stx-faqs,
.stx-faq-row {
  width: 100%;
}

/* Variant FAQ blocks */
.stx-var-faqs,
.stx-var-faq-row {
  width: 100%;
}

/* Force WP editor + textarea to fill container (both modes) */
.stx-faq-row .wp-editor-wrap,
.stx-faq-row .wp-editor-container,
.stx-faq-row textarea,
.stx-var-faq-row .wp-editor-wrap,
.stx-var-faq-row .wp-editor-container,
.stx-var-faq-row textarea {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Quicktags toolbar (Text tab) */
.stx-faq-row .quicktags-toolbar,
.stx-var-faq-row .quicktags-toolbar {
  width: 100%;
}

.stx-card,
.stx-faq-row,
.wp-editor-wrap {
  min-width: 0 !important;
}

/* Allow FAQ rows to respect parent width */
#stx_faq_list,
#stx_faq_list * {
  min-width: 0;
}

/* Specifically the row */
.stx-faq-row {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

/* TinyMCE must be allowed to shrink */
.stx-faq-row .wp-editor-wrap,
.stx-faq-row .wp-editor-container,
.stx-faq-row .mce-tinymce {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Base modal container */
.stx-et-trailer-modal {
  position: fixed;
  inset: 0; /* top:0 right:0 bottom:0 left:0 */
  display: none;
  z-index: 99999;
}

/* Visible state */
.stx-et-trailer-modal.is-open {
  display: block;
}

/* Dark backdrop */
.stx-et-trailer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

/* Dialog box */
.stx-et-trailer-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #000;
  max-width: 90vw;
  max-height: 80vh;
  width: 800px;
  border-radius: 8px;
  overflow: hidden;
}

/* Video */
.stx-et-trailer-video {
  width: 100%;
  height: auto;
  display: block;
}

/* Close button */
.stx-et-trailer-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: 0;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.stx-trailer-toggle {
  background: #fff;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  padding: 8px 10px;
  font-size: 14px;
  cursor: pointer;
}

.stx-media-video {
  width: 100%;
  height: auto;
  display: block;
}

/* Title + trailer button row */
.stx-et-title-row {
  display: flex;
  align-items: center;
  gap: 10px; /* slightly tighter than 12px */
}

/* Button should NOT auto-push right */
.stx-et-title-row .stx-et-trailer-btn {
  white-space: nowrap;
}

@media (max-width: 640px) {
  .stx-et-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px; /* ↓ tighter than 4px */
    margin-bottom: 8px;
  }

  .stx-et-title-row .stx-et-trailer-btn {
    margin-top: 0; /* remove extra vertical air */
    margin-bottom: 2px;
  }
}

/* ================= YouTube gallery bar ================= */

.stx-yt-gallery {
  margin: 14px 0 6px;
  overflow-x: auto;
  overflow-y: hidden;
}

.stx-yt-gallery-track {
  display: flex;
  gap: 10px;
  padding-bottom: 4px;
}

/* ================= YouTube previews ================= */

.stx-yt-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 320px;
  height: 180px;
  border: none;
  padding: 0;
  background: #000;
  border-radius: 8px;
  cursor: pointer;
}

.stx-yt-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.stx-yt-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* ================= YouTube modal ================= */

.stx-yt-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stx-yt-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
}

.stx-yt-dialog {
  position: relative;
  width: min(90vw, 960px);
  aspect-ratio: 16 / 9;
  background: #000;
  z-index: 1;
  border-radius: 10px;
  overflow: hidden;
}

.stx-yt-frame-wrap,
.stx-yt-frame-wrap iframe {
  width: 100%;
  height: 100%;
}

.stx-yt-close {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 2;
  font-size: 26px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
}

.stx-et-trailer-btn {
  transform: translateY(-4px);
}

.stx-otp-row {
  display: flex;
  gap: 8px;
  align-items: stretch; /* 🔑 NOT center */
}

/* Let the input actually take space */
.stx-otp-input {
  flex: 1 1 auto;
  min-width: 0; /* 🔑 Safari flex fix */
  width: 100%;
  box-sizing: border-box;
}

/* Button should stay natural width */
.stx-otp-btn {
  white-space: nowrap;
}

.stx-select option:checked {
  background-color: #2271b1 !important; /* WP blue */
  color: #fff !important;
}

/* Cookie consent settings form only */
form.stx-in .colorselect {
  display: block;
  width: 50px;
  margin-bottom: 12px;
}

form.stx-in label {
  display: block;
  margin-bottom: 4px;
}

/* ============================================================
   ScreamTix – Telemetry Analytics Table
   ============================================================ */

.stx-telemetry__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 16px;
  background: #020617; /* very dark slate */
  border-radius: 10px;
  overflow: hidden;
  font-size: 14px;
}

/* Header */
.stx-telemetry__table thead th {
  text-align: left;
  padding: 12px 14px;
  background: #020617;
  color: #e5e7eb;
  font-weight: 600;
  border-bottom: 1px solid #1e293b;
  white-space: nowrap;
}

/* Body rows */
.stx-telemetry__table tbody tr {
  background: #020617;
  transition: background 0.15s ease;
}

.stx-telemetry__table tbody tr:hover {
  background: #020617;
}

/* Cells */
.stx-telemetry__table td {
  padding: 10px 14px;
  border-bottom: 1px solid #020617;
  color: #e5e7eb;
  vertical-align: middle;
}

/* First column (page path) */
.stx-telemetry__table td:first-child {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  color: #cbd5f5;
  max-width: 420px;
  word-break: break-all;
}

/* Numeric columns */
.stx-telemetry__table td:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Intent % emphasis */
.stx-telemetry__table td:nth-child(3) {
  font-weight: 600;
}

/* Drop-off column (subtle warning tone) */
.stx-telemetry__table td:nth-child(4) {
  color: #fca5a5; /* muted red */
}

/* CTA + Contact columns */
.stx-telemetry__table td:nth-child(5),
.stx-telemetry__table td:nth-child(6) {
  color: #86efac; /* muted green */
}

/* Remove border from last row */
.stx-telemetry__table tbody tr:last-child td {
  border-bottom: none;
}

/* ============================================================
   ScreamTix – Telemetry Summary Cards
   ============================================================ */

.stx-telemetry__summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin: 16px 0 20px;
}

.stx-telemetry__summary > div {
  background: #020617;
  border: 1px solid #020617;
  border-radius: 10px;
  padding: 14px 16px;
  text-align: left;
}

/* Big number */
.stx-telemetry__summary strong {
  display: block;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  color: #e5e7eb;
  margin-bottom: 6px;
}

/* Label */
.stx-telemetry__summary span {
  display: block;
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.3;
}

/* ============================================================
   STX Consent Report
   ============================================================ */

.stx-consent-report__grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 28px;
  margin-top: 20px;
}

/* ------------------------------------------------------------
   Legend
------------------------------------------------------------ */

.stx-consent-report__legend ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.stx-consent-report__legend li {
  display: grid;
  grid-template-columns: 14px auto 1fr;
  align-items: center;
  gap: 12px;

  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

  font-size: 14px;
}

/* colour swatch */
.stx-consent-report__legend li .swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* label */
.stx-consent-report__legend li strong {
  font-weight: 600;
  color: #e5e7eb;
}

/* value (count + %) */
.stx-consent-report__legend li .value {
  text-align: right;
  color: #9ca3af;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   Totals
------------------------------------------------------------ */

.stx-consent-report__total {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);

  font-size: 13px;
  color: #9ca3af;
}

/* ------------------------------------------------------------
   Mobile
------------------------------------------------------------ */

@media (max-width: 640px) {
  .stx-consent-report__grid {
    grid-template-columns: 1fr;
  }
}

/* ===========================
   User Management – table layout
   =========================== */

/* Baseline table settings specific to UM */
#stx-um .stx-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto; /* let content decide column widths */
}

/* Name / Email / Consent columns: shrink to fit content */
#stx-um .stx-table th.stx-col-name,
#stx-um .stx-table td.stx-col-name,
#stx-um .stx-table th.stx-col-email,
#stx-um .stx-table td.stx-col-email,
#stx-um .stx-table th.stx-col-consent,
#stx-um .stx-table td.stx-col-consent {
  white-space: nowrap;
  width: 1%; /* shrink-to-fit trick */
}

/* Actions column gets whatever space is left */
#stx-um .stx-table th.stx-col-actions,
#stx-um .stx-table td.stx-col-actions {
  width: auto;
}

/* Action cell layout – ONLY for User Management module */
#stx-um .stx-table td.stx-actions-um {
  display: flex;
  flex-wrap: nowrap; /* try to keep all buttons on one line */
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  white-space: nowrap; /* keep buttons from wrapping */
  padding-top: 4px;
  padding-bottom: 4px;
  overflow-x: auto; /* fallback: horizontal scroll if too many */
}

/* Make each mini-form behave like an inline chip */
#stx-um .stx-table td.stx-actions-um form.stx-inline {
  display: inline-flex;
  margin: 0;
}

/* Compact buttons so rows stay short */
#stx-um .stx-table td.stx-actions-um .stx-btn {
  font-size: 11px;
  line-height: 1.2;
}

/* Slightly tighter row height just for this table */
#stx-um .stx-table td,
#stx-um .stx-table th {
  padding-top: 6px;
  padding-bottom: 6px;
}

/* ===========================
   User Management – group tabs
   =========================== */

#stx-um .stx-um-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 4px;
}

#stx-um .stx-tab {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.3;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: inherit;
  opacity: 0.8;
}

#stx-um .stx-tab.stx-tab--active {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  opacity: 1;
  font-weight: 600;
}

/* ===========================
   Consent log modal
   =========================== */

#stx-um .stx-log-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#stx-um .stx-log-modal {
  max-width: 640px;
  width: 100%;
  max-height: 80vh;
  background: #111827;
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
}

#stx-um .stx-log-modal__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

#stx-um .stx-log-modal__head strong {
  font-size: 14px;
}

#stx-um .stx-log-modal__close {
  margin-left: auto;
}

#stx-um .stx-loglist {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  font-size: 12px;
}

#stx-um .stx-loglist li {
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#stx-um .stx-loglist li:last-child {
  border-bottom: 0;
}

/* ================================
   User Management – toolbar layout
   ================================ */

/* Toolbar as a single row: search on the left, sort on the right */
#stx-um .stx-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* <— was flex-end */
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
}

/* Left + right halves use flex so controls sit side by side */
#stx-um .stx-toolbar__left,
#stx-um .stx-toolbar__right {
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* <— was flex-end */
  gap: 8px;
}

/* Search: input + button in one tight row */
#stx-um .stx-search {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Make inputs readable on dark background */
#stx-um .stx-input {
  background: #111827;
  border: 1px solid #374151;
  color: #e5e7eb;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.3;
  min-height: 32px;
}

#stx-um .stx-input::placeholder {
  color: #6b7280;
}

/* Sort controls: label above select, compact */
#stx-um .stx-sort {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: #9ca3af;
}

#stx-um .stx-sort span {
  line-height: 1.2;
}

/* Keep sort selects a sensible width */
#stx-um .stx-sort .stx-input {
  min-width: 150px;
  padding-right: 28px; /* room for native arrow */
}

/* Make the toolbar buttons use compact typography (roundness comes from global .stx-btn) */
#stx-um .stx-toolbar .stx-btn {
  font-size: 12px;
  line-height: 1.2;
}

/* 🔧 Hard override: make search input + buttons the same (shorter) height */
#stx-um .stx-search .stx-input,
#stx-um .stx-search button.stx-btn,
#stx-um .stx-search a.stx-btn {
  height: 30px !important;
  line-height: 30px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Keep pills, just reduce the padding horizontally */
#stx-um .stx-search button.stx-btn,
#stx-um .stx-search a.stx-btn {
  padding-left: 10px !important;
  padding-right: 10px !important;
  border-radius: 999px; /* keep them round */
}

/* Apply button: align with dropdowns and trim padding */
#stx-um .stx-btn--um-apply {
  height: 32px; /* match .stx-input min-height */
  line-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  position: relative;
  top: -4px; /* nudge up; adjust -2 / -4 / -6 if you want */
}

/* Mobile: stack toolbar sections nicely */
@media (max-width: 782px) {
  #stx-um .stx-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  #stx-um .stx-toolbar__left,
  #stx-um .stx-toolbar__right {
    width: 100%;
    justify-content: flex-start;
  }

  #stx-um .stx-search {
    width: 100%;
  }

  #stx-um .stx-search .stx-input {
    flex: 1 1 auto;
  }

  /* Don’t nudge on mobile */
  #stx-um .stx-btn--um-apply {
    top: 0;
  }
}

/* The button itself – fixed in the corner */
#stx-cookie-btn,
#stx-cookie-btn.stx-cookie-btn {
  position: fixed;
  bottom: 18px;
  left: 18px;
  z-index: 99997;

  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

/* The PNG controls size: 40px wide, natural height */
#stx-cookie-btn img {
  display: block;
  width: 40px; /* ← your “width at 40px” */
  height: auto; /* ← keeps the PNG’s aspect ratio */
  border-radius: 999px; /* make it round if the PNG is square-ish */
}

#stx-table-au th {
  text-align: left !important;
}

/* =========================================================
   ScreamTix – Credits Activity
   Scoped, neutral, admin-safe
   ========================================================= */

.screamtix-credits-activity {
  margin-top: 24px;
  max-width: 980px;
}

/* Section headers */
.screamtix-credits-activity h3 {
  margin: 24px 0 10px;
  font-size: 16px;
  font-weight: 600;
  color: #f9fafb;
}

/* Tables */
.screamtix-credits-activity table {
  border-collapse: collapse;
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  overflow: hidden;
}

/* Header row */
.screamtix-credits-activity thead th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9ca3af;
  background: rgba(255, 255, 255, 0.05);
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Body cells */
.screamtix-credits-activity tbody td {
  padding: 10px 12px;
  font-size: 13px;
  color: #e5e7eb;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Zebra striping */
.screamtix-credits-activity tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

/* Hover */
.screamtix-credits-activity tbody tr:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Numeric columns */
.screamtix-credits-activity td:last-child,
.screamtix-credits-activity th:last-child,
.screamtix-credits-activity td:nth-last-child(2),
.screamtix-credits-activity th:nth-last-child(2) {
  text-align: right;
  white-space: nowrap;
}

/* Small helper text */
.screamtix-credits-activity p {
  margin-top: 10px;
  font-size: 12px;
  color: #9ca3af;
}

/* Empty state */
.screamtix-credits-activity .stx-empty {
  padding: 14px;
  font-size: 13px;
  color: #9ca3af;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
}

/* Responsive */
@media (max-width: 640px) {
  .screamtix-credits-activity table {
    font-size: 12px;
  }
  .screamtix-credits-activity thead {
    display: none;
  }
  .screamtix-credits-activity tbody tr {
    display: block;
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .screamtix-credits-activity tbody td {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border: none;
  }
  .screamtix-credits-activity tbody td::before {
    content: attr(data-label);
    color: #9ca3af;
    font-size: 11px;
    margin-right: 10px;
  }
}

/* ============================================================
 * Event Waivers Manager Layout
 * ============================================================ */

.stx-waivers-manager {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Title */
.stx-waivers-manager .stx-waivers-title {
  margin: 0;
}

/* Filter form */
.stx-waivers-manager .stx-waivers-filter {
  margin: 0;
}

/* Generic form row */
.stx-waivers-manager .stx-form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.stx-waivers-manager .stx-form-row label {
  font-weight: 600;
}

.stx-waivers-manager .stx-form-row .stx-in,
.stx-waivers-manager .stx-form-row .stx-select {
  max-width: 420px;
}

/* Section headings */
.stx-waivers-manager h3 {
  margin: 12px 0 4px;
}

/* ============================================================
 * Tables (use widefat styles but not full-width)
 * ============================================================ */

.stx-waivers-manager table.widefat {
  width: auto; /* override widefat 100% */
  max-width: 100%; /* don’t overflow container */
  margin: 8px 0 16px;
}

.stx-waivers-manager table.widefat th,
.stx-waivers-manager table.widefat td {
  padding: 6px 10px;
  vertical-align: top;
  white-space: nowrap;
}

.stx-waivers-manager table.widefat th {
  text-align: left; /* align headers with body cells */
}

/* Let the first column be a bit wider for labels */
.stx-waivers-manager table.widefat th:first-child,
.stx-waivers-manager table.widefat td:first-child {
  min-width: 220px;
  white-space: normal;
}

/* HR separation */
.stx-waivers-manager hr {
  margin: 20px 0 12px;
}

/* ============================================================
 * Editor + actions
 * ============================================================ */

.stx-waivers-manager .wp-editor-wrap {
  margin-top: 6px;
}

.stx-waivers-manager .stx-waivers-actions {
  margin-top: 14px;
}

.stx-waivers-manager .stx-waivers-actions .stx-btn,
.stx-waivers-manager .stx-waivers-actions .button-primary {
  min-width: 160px;
}

/* Wrap for the form, if you have one */
.stx-online-checkin__form {
  max-width: 420px;
}

/* Each row (label + input) */
.stx-oc-field {
  margin-bottom: 12px;
}

/* Make labels sit above */
.stx-oc-field label {
  display: block;
  margin: 0 0 4px;
  font-weight: 500;
}

/* Stack all the inputs neatly, full-width */
#stx-first,
#stx-last,
#stx-email,
#stx-phone {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 4px;
  border: 1px solid #d1d5db;
  font-size: 14px;
}

.stx-my-pretickets__table-wrap {
  overflow-x: auto;
  margin-top: 1rem;
}

.stx-pretickets-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.stx-pretickets-table th,
.stx-pretickets-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
  text-align: left;
  vertical-align: top;
}

.stx-preticket-row--shared .stx-preticket__shared {
  color: #22c55e;
  font-weight: 600;
}

.stx-preticket__input {
  width: 100%;
  max-width: 100%;
  font-size: 0.8rem;
}

.stx-preticket__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  margin-right: 4px;
  font-size: 0.8rem;
  border-radius: 999px;
  cursor: pointer;
}

.stx-preticket__copy {
  /* hook into your existing button styles if you like */
}

.stx-preticket__share {
  /* primary style */
}

.stx-online-checkin__success {
  padding: 16px;
  margin-bottom: 16px;
  border-radius: 8px;
  background: rgba(34, 197, 94, 0.08); /* soft green glow */
}

.stx-online-checkin__qr img {
  width: 160px;
  height: 160px;
  display: block;
  margin-top: 8px;
}

.stx-online-checkin__btn-password {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 999px;
  text-decoration: none;
}

/* === Base table layout (desktop + general) ========================= */

.stx-my-pretickets__table-wrap {
  overflow-x: auto;
  margin-top: 1rem;
}

.stx-pretickets-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.stx-pretickets-table th,
.stx-pretickets-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
  text-align: left;
  vertical-align: top;
}

.stx-pretickets-table th {
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #e5e7eb;
}

/* Shared row indicator */
.stx-preticket-row--shared .stx-preticket__shared {
  color: #22c55e;
  font-weight: 600;
}

/* Link + share column */
.stx-preticket__link-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.stx-preticket__input {
  width: 100%;
  max-width: 100%;
  font-size: 0.8rem;
  padding: 4px 8px;
  border-radius: 0.4rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.9);
  color: #e5e7eb;
}

.stx-preticket__hint {
  margin-top: 0.35rem;
  font-size: 0.75rem;
  color: #9ca3af;
}

/* Status */
.stx-preticket__status-cell {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8rem;
}

.stx-preticket__status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
}

.stx-preticket__status--no-show {
  background: rgba(248, 113, 113, 0.15);
  color: #fecaca;
}

/* === Share controls (common) ====================================== */

.stx-preticket__share {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

/* Pill button on top of your .stx-btn */
.stx-preticket__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 4px 10px;
  font-size: 0.8rem;
  border-radius: 999px;
  cursor: pointer;
}

/* Icon bubble */
.stx-preticket__icon {
  width: 1.6em;
  height: 1.6em;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85em;
  background: rgba(148, 163, 184, 0.25);
}

/* Pseudo-icons */
.stx-preticket__icon--share::before {
  content: "⇪";
  transform: translateY(-1px);
}

.stx-preticket__icon--whatsapp::before {
  content: "💬";
}

.stx-preticket__icon--sms::before {
  content: "📱";
}

.stx-preticket__icon--email::before {
  content: "✉";
}

.stx-preticket__icon--copy::before {
  content: "⧉";
}

/* Inline buttons container */
.stx-preticket__share-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/* === Mobile: cards + single Share button ========================== */
/* Bump breakpoint a bit so Edge / weird DPRs are caught */

@media (max-width: 900px) {
  /* Table → cards */
  .stx-pretickets-table,
  .stx-pretickets-table tbody,
  .stx-pretickets-table tr,
  .stx-pretickets-table td {
    display: block;
    width: 100%;
  }

  .stx-pretickets-table thead {
    display: none;
  }

  .stx-pretickets-table tr {
    margin-bottom: 1rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(15, 23, 42, 0.9);
    padding: 0.75rem 0.75rem 0.5rem;
  }

  .stx-pretickets-table td {
    border-bottom: none;
    padding: 4px 2px;
  }

  .stx-pretickets-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9ca3af;
    margin-bottom: 2px;
  }

  .stx-preticket__link-wrap {
    margin-top: 0.25rem;
  }

  /* Hide the long explanatory line on mobile */
  .stx-preticket__hint {
    display: none;
  }

  /* Mobile: only show the Share… button by default */
  .stx-preticket__share-toggle {
    display: inline-flex;
  }

  .stx-preticket__share-menu {
    display: none;
  }

  .stx-preticket__share.is-open .stx-preticket__share-menu {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0.35rem;
  }

  /* Keep copy available in the mobile panel */
  .stx-preticket__share-option--copy {
    display: inline-flex;
  }
}

/* === Desktop: inline WhatsApp / SMS / Email only ================== */

@media (min-width: 901px) {
  /* Desktop: always show the inline icon buttons */
  .stx-preticket__share-menu {
    display: flex !important;
  }

  /* Hide the big Share… button on desktop */
  .stx-preticket__share-toggle {
    display: none;
  }

  /* Hide Copy on desktop if you just want 3 buttons */
  .stx-preticket__share-option--copy {
    display: none;
  }
}

/* Make cards a bit tighter on mobile */
@media (max-width: 700px) {
  .stx-pretickets-table tr {
    margin-bottom: 0.75rem;
    padding: 0.6rem 0.6rem 0.4rem;
  }

  .stx-preticket__input {
    font-size: 0.7rem;
    padding: 3px 6px;
  }

  /* Prevent page-wide horizontal scroll due to long URLs */
  .stx-my-pretickets {
    max-width: 100%;
    overflow-x: hidden;
  }

  .stx-my-pretickets__table-wrap {
    overflow-x: visible; /* cards handle their own width */
  }
}

/* Shared badge + undo button */
.stx-preticket__shared {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

.stx-preticket__shared-label {
  color: #22c55e;
  font-weight: 600;
}

.stx-preticket__shared-undo {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.7rem;
  color: #9ca3af;
  text-decoration: underline;
  cursor: pointer;
}

/* Check-in button */
.stx-preticket__checkin-btn {
  margin-top: 0.25rem;
}

.stx-nav-warning {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.4em;
  width: 1.1em;
  height: 1.1em;
  border-radius: 999px;
  font-size: 0.75em;
  font-weight: 700;
  background: #f97316; /* amber-ish */
  color: #111827; /* dark text */
  vertical-align: middle;
}

/* Wrapper next to "My Tickets" */
.stx-nav-warning-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin-left: 0.5em;
}

/* Red dot with subtle pulse */
.stx-nav-warning-dot {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #ef4444; /* Tailwind-style red-500 vibe */
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.6);
}

.stx-nav-warning-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid rgba(239, 68, 68, 0.75);
  opacity: 0;
  animation: stx-nav-pulse 1.5s ease-out infinite;
}

/* "Action needed" pill (desktop only) */
.stx-nav-warning-text {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Pulse animation */
@keyframes stx-nav-pulse {
  0% {
    transform: scale(0.6);
    opacity: 1;
  }
  80% {
    transform: scale(1.4);
    opacity: 0;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

/* On very small screens, hide the text to keep the menu compact */
@media (max-width: 768px) {
  .stx-nav-warning-text {
    display: none;
  }
}

/* Smart Pricing: force left alignment on table headers */
.stx-smart-pricing table.widefat.stx-smart-table thead th {
  text-align: left !important;
  /* In case some theme/admin CSS made them flex/center */
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

.stx-smart-pricing table.widefat.stx-smart-table thead th {
  display: table-cell !important;
  text-align: left !important;
}
/* Bank holiday manager layout */
.stx-bank-holiday-manager .stx-bh-dates-wrapper {
  max-width: 360px;
}

.stx-bank-holiday-manager .stx-bh-dates {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* One row = date input + Remove button side by side */
.stx-bank-holiday-manager .stx-bh-date-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Override the usual full-width .stx-in just here */
.stx-bank-holiday-manager .stx-bh-date-row .stx-bh-date {
  flex: 1 1 auto;
  max-width: 220px; /* tweak if you want */
}

/* Keep the Remove button tight and on one line */
.stx-bank-holiday-manager .stx-bh-date-row .stx-bh-remove {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 4px 10px;
  font-size: 12px;
}

/* Add date button sits underneath the list */
.stx-bank-holiday-manager .stx-bh-add {
  margin-top: 8px;
}

/* -------------------------------------------------
   Front-end notices (WP-style)
-------------------------------------------------- */

.swc-notices {
  border-left: 4px solid;
  padding: 12px 14px;
  margin: 16px 0 20px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}

.swc-notices p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

/* Info / default (blue-ish) */
.swc-notices--info {
  border-left-color: #72aee6; /* WP blue */
  background: #f0f6fc;
  color: #0a4b78;
}

/* Warning (amber) */
.swc-notices--warning {
  border-left-color: #dba617;
  background: #fff8e5;
  color: #6b4f00;
}

/* Error (red) */
.swc-notices--error {
  border-left-color: #d63638; /* WP error red */
  background: #fcf0f1;
  color: #7a1c1d;
}

/* Multiple messages spacing */
.swc-notices .swc-notice + .swc-notice {
  margin-top: 6px;
}

/* -----------------------------------------
   Frontend success notice (auto-vanish)
------------------------------------------ */

.notice.notice-success {
  background: #e6f6ea;
  border-left: 4px solid #2ecc71;
  color: #1e6b3a;
  padding: 12px 16px;
  margin: 16px 0;
  border-radius: 6px;

  /* animation */
  animation: stxNoticeFadeOut 6s ease forwards;
}

/* Optional: soften the dismiss button */
.notice.notice-success.is-dismissible .notice-dismiss {
  top: 8px;
  right: 8px;
}

/* Fade + collapse */
@keyframes stxNoticeFadeOut {
  0% {
    opacity: 1;
    max-height: 200px;
    margin-top: 16px;
    margin-bottom: 16px;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
  }
}

.sw-event-status-badge {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.1em 0.6em;
  border-radius: 999px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sw-event-status-badge--draft {
  background: #fef3c7;
  color: #92400e;
}

.sw-event-status-badge--publish {
  background: #dcfce7;
  color: #166534;
}

.sw-event-status-badge--other {
  background: #e5e7eb;
  color: #374151;
}

/* Event heading row inside order items table */
.sw-tab .sw-subhead td {
  padding-top: 10px;
  padding-bottom: 4px;
  font-weight: 600;
  font-size: 0.95rem;
  border-top: 1px solid rgba(148, 163, 184, 0.5); /* subtle divider */
  text-decoration: underline;
  text-underline-offset: 2px;
}

.stx-dir-map {
  margin-bottom: 12px;
}

.stx-dir-map img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}

/* Card body padding – keep things tidy */
.stx-card-body {
  padding: 10px 14px 14px; /* tweak as you like */
}

/* Title: left aligned, no vertical padding, tiny bottom gap */
.stx-card-title-vc {
  margin: 0 0 4px; /* no gap above, small below */
  padding: 0; /* kill any padding */
  text-align: left;
  line-height: 1.2;
  font-weight: 600;
}

/* ===== Venue profile (scoped) ===== */
.stx-venue-wrap {
  max-width: 1100px;
  margin: 32px auto;
  padding: 0 16px;
}

.stx-venue-hero {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 16px;
  align-items: stretch;
}

@media (max-width: 900px) {
  .stx-venue-hero {
    grid-template-columns: 1fr;
  }
}

.stx-card-venue {
  background: transparent;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
}

/* inner media wrapper on venue page */
.stx-media-venue {
  min-height: 220px;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stx-media-venue img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.stx-body-venue {
  padding: 16px;
}

.stx-title-venue {
  margin: 0 0 6px 0;
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1.1;
}

.stx-subtle-venue {
  color: #64748b;
}

.stx-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 700px) {
  .stx-grid {
    grid-template-columns: 1fr;
  }
}

.stx-list-venue {
  margin: 0;
  padding: 0;
  list-style: none;
}

.stx-list-venue li {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed #eef2f7;
}

.stx-badge-venue {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 600;
}

.stx-section-venue {
  margin-top: 18px;
}

.stx-actions-venue {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.stx-btn-venue {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #f9fafb;
  text-decoration: none;
}

.stx-btn--primary {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

.stx-map-venue iframe {
  width: 100%;
  height: 320px;
  border: 0;
}

.stx-kv-venue {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 6px;
  margin: 8px 0;
}

.stx-qr-venue {
  text-align: center;
  padding: 12px;
}

/* ===== Venue cards (listing) ===== */

.stx-card-body {
  padding: 10px 14px 14px;
}

.stx-card-title-vc {
  margin: 0 0 4px;
  padding: 0;
  text-align: left;
  line-height: 1.2;
  font-weight: 600;
}

.stx-card-meta {
  margin: 0 0 14px;
  font-size: 0.9rem;
  color: #64748b;
}

/* media in venue cards */
.stx-card-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: transparent;
  overflow: hidden;
  display: block;
  margin: 0;
}

.stx-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stx-card-media--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.stx-btn[disabled],
.stx-btn.stx-btn--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
  filter: grayscale(70%);
}

/* Checkout layout + typography */
.sw-checkout-view .sw-wrap {
  max-width: 920px;
  margin: 36px auto;
  padding: 0 16px;
}

.sw-checkout-view .sw-h1 {
  margin: 0.2em 0 0.6em;
}

/* Order summary table */
.sw-checkout-view table.sw-summary {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
}

.sw-checkout-view .sw-summary th,
.sw-checkout-view .sw-summary td {
  border-bottom: 1px solid #eee;
  padding: 8px;
  text-align: left;
}

.sw-checkout-view .sw-summary tfoot td {
  font-weight: 700;
  background: #fafafa;
}

.sw-checkout-view .sw-right {
  text-align: right;
}

.sw-checkout-view .sw-muted {
  color: #666;
}

/* Buttons + actions */
.sw-checkout-view .sw-actions {
  margin-top: 16px;
}

.sw-checkout-view .sw-btn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid #0a5;
  background: #0b6;
  color: #fff;
  text-decoration: none;
}

.sw-checkout-view .sw-btn.secondary {
  background: #f5f5f5;
  border-color: #ddd;
  color: #222;
}

.sw-checkout-view .sw-note {
  font-size: 12px;
  color: #666;
  margin-top: 6px;
}

/* VAT lines */
.sw-checkout-view .sw-vat-lines .row {
  display: flex;
  justify-content: space-between;
}

/* Checkout form shell */
.sw-checkout-view .sw-form {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 14px;
  margin: 18px 0;
  background: #fafafa;
}

/* Grid in form */
.sw-checkout-view .sw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.sw-checkout-view .sw-grid .full {
  grid-column: 1 / -1;
}

/* Labels/inputs – scoped to checkout form only */
.sw-checkout-view .sw-form label {
  display: block;
  font-size: 12px;
  color: #555;
  margin-bottom: 4px;
}

.sw-checkout-view .sw-form input[type="text"],
.sw-checkout-view .sw-form input[type="email"],
.sw-checkout-view .sw-form input[type="tel"],
.sw-checkout-view .sw-form input[type="password"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
}

.sw-checkout-view .sw-form .req:after {
  content: " *";
  color: #c00;
}

/* Event headings */
.sw-checkout-view .sw-ev-h {
  margin-top: 14px;
  font-weight: 700;
}

/* Coupon chips */
.sw-checkout-view .sw-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 999px;
  background: #fafafa;
  margin: 4px 6px 0 0;
}

.sw-checkout-view .sw-chip code {
  font-family: monospace;
  font-size: 12px;
}

.sw-checkout-view .sw-chip button {
  border: none;
  background: none;
  cursor: pointer;
}

/* Inline forms (coupons, applied codes) */
.sw-checkout-view .sw-inline-form {
  display: inline;
}

/* OTP button UX */
.sw-checkout-view .stx-otp-btn {
  position: relative;
  transition:
    background 0.2s,
    border-color 0.2s,
    opacity 0.2s;
}

.sw-checkout-view .stx-otp-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.sw-checkout-view .stx-otp-btn--loading {
  pointer-events: none;
}

.sw-checkout-view .stx-otp-btn--loading::after {
  content: "";
  position: absolute;
  right: 0.6rem;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-top-color: #fff;
  border-radius: 50%;
  animation: stxspin 0.8s linear infinite;
}

.sw-checkout-view .stx-otp-btn--sent {
  background: #16a34a !important;
  border-color: #16a34a !important; /* green */
}

.sw-checkout-view .stx-otp-status {
  display: inline-block;
  margin-left: 0.6rem;
  color: #374151;
  font-size: 0.9rem;
  min-height: 1.2em;
}

/* Submit button spinner & busy state */
.sw-checkout-view .sw-btn[data-busy="1"] {
  opacity: 0.85;
  pointer-events: none;
  position: relative;
}

.sw-checkout-view .sw-btn[data-busy="1"]::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-top-color: #fff;
  border-radius: 50%;
  animation: stxspin 0.8s linear infinite;
}

/* Spinner keyframes (global, but only used by checkout classes above) */
@keyframes stxspin {
  to {
    transform: rotate(360deg);
  }
}

/* Mobile: stack form fields instead of 2 columns */
@media (max-width: 640px) {
  .sw-checkout-view .sw-form .sw-grid {
    grid-template-columns: 1fr; /* single column on small screens */
  }
}

/* Safety: prevent weird overflow in grid children */
.sw-checkout-view .sw-form .sw-grid > div {
  min-width: 0;
}

/* OTP row layout (checkout only) */
.sw-checkout-view .stx-otp-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}

/* Keep the OTP code field as a proper single-line input */
.sw-checkout-view .stx-otp-row .stx-otp-code {
  box-sizing: border-box;
  flex: 1 1 160px; /* grows, has a sensible base width */
  min-width: 0; /* allows flexbox to shrink within container */
  max-width: 260px; /* avoid it stretching ridiculously wide on desktop */
  width: 100%;
  padding: 8px 10px;
  font-size: 16px; /* avoids iOS zooming in on focus */
}

/* Button sits to the right on larger screens */
.sw-checkout-view .stx-otp-row .stx-otp-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* --- Checkout grid & inputs: keep them inside the box --- */

/* Make sure the checkout grid behaves and items are allowed to shrink */
.sw-checkout-view .sw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Full-width rows (email, phone, etc.) */
.sw-checkout-view .sw-grid .full {
  grid-column: 1 / -1;
}

/* Critical: allow grid items to shrink instead of forcing overflow */
.sw-checkout-view .sw-grid > div {
  min-width: 0;
}

/* Inputs inside the checkout form should never overflow their cell */
.sw-checkout-view .sw-form input[type="text"],
.sw-checkout-view .sw-form input[type="email"],
.sw-checkout-view .sw-form input[type="tel"],
.sw-checkout-view .sw-form input[type="password"] {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
}

/* Labels inside checkout form */
.sw-checkout-view .sw-form label {
  display: block;
  font-size: 12px;
  color: #555;
  margin-bottom: 4px;
}

/* Stack the two-column grid on smaller screens */
@media (max-width: 640px) {
  .sw-checkout-view .sw-grid {
    grid-template-columns: 1fr;
  }
}

/* Basic safety: table should not exceed container */
.sw-cart-wrap,
.sw-cart-event {
  max-width: 100%;
}

/* Horizontal scroll fallback for very narrow screens (desktop) */
.sw-cart-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* --- Base table (desktop) --- */

.sw-cart-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.sw-cart-table th,
.sw-cart-table td {
  padding: 0.6rem 0.4rem;
  border-bottom: 1px solid #e2e2e2;
  vertical-align: top;
}

.sw-cart-table thead th {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: left;
}

.sw-cart-table th.sw-cart-cell--right,
.sw-cart-table td.sw-cart-cell--right {
  text-align: right;
}

/* Make sure ACTIONS header lines up like others */
.sw-cart-table th.actions {
  text-align: left;
}

/* Quantity input: keep it simple so native spinners can appear */
.sw-qty-input {
  width: 3.2rem;
  text-align: center;
}

/* Per-event summary rows (Subtotal / VAT / Grand Total for that event) */
.sw-cart-summary-row td,
.sw-cart-summary-row th {
  border: none; /* no horizontal lines on the summary table */
}

.sw-cart-summary-row .sw-cart-summary-label,
.sw-cart-summary-row .sw-cart-summary-value {
  text-align: right;
}

.sw-cart-summary-row .sw-cart-summary-value {
  white-space: nowrap;
}

/* --- MOBILE LAYOUT --- */
@media (max-width: 768px) {
  /* Hide global header row on mobile; we’ll use data-labels instead */
  .sw-cart-table thead {
    display: none;
  }

  .sw-cart-table,
  .sw-cart-table tbody {
    display: block;
    width: 100%;
  }

  /* Each line item row becomes a "card" */
  .sw-cart-table tbody tr {
    display: block;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e2e2e2;
    margin: 0;
    box-sizing: border-box;
  }

  /* Default cell layout inside cards */
  .sw-cart-table tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.3rem 0;
    border-bottom: none; /* kill internal horizontal lines inside the card */
  }

  /* Labels from data-label so numbers aren’t mysterious */
  .sw-cart-table tbody td::before {
    content: attr(data-label);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #777;
    flex: 0 0 auto;
  }

  /* Main description cell: stack nicely */
  .sw-cart-cell-main {
    flex-direction: column;
    align-items: flex-start;
  }

  .sw-cart-cell-main::before {
    margin-bottom: 0.25rem;
  }

  .sw-cart-cell-main .sw-cart-line-hints {
    margin-top: 0.15rem;
    text-align: right;
  }

  /* Tighter spacing between ticket name and "Remaining: X" */
  .sw-cart-line-hints {
    margin-top: 0.15rem; /* was probably bigger like 0.4–0.5rem */
    font-size: 0.8rem; /* optional: keeps it visually subordinate */
    text-align: right;
  }

  .sw-cart-capacity-note {
    font-size: 12px;
    color: #cccccc;
    margin: 6px 0 10px;
    text-align: left;
  }
  .sw-cart-cell,
  .sw-cart-cell--right {
    text-align: right;
  }

  /* Quantity: keep it right aligned / tidy */
  .sw-qty-control {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    width: 100%;
  }

  .sw-qty-input {
    max-width: 4rem;
  }

  /* Actions cell: full width, right aligned, no extra label text */
  .sw-cart-table td.actions {
    display: block;
    width: 100%;
    text-align: right;
    padding-top: 0.25rem;
    padding-bottom: 0;
    justify-content: flex-end;
  }

  .sw-cart-table td.actions::before {
    content: ""; /* no "Actions" label above the button */
  }

  .sw-cart-table td.actions .sw-cart-remove-line {
    display: inline-block;
    margin: 0;
    padding: 0.35rem 0.8rem; /* more internal padding */
    font-size: 0.85rem; /* slightly smaller so text fits comfortably */
    line-height: 1.2;
    box-sizing: border-box;
  }

  /* --- Per-event summary rows on mobile --- */
  /* Keep them simple, right aligned, and borderless. They live in <tfoot>. */

  .sw-cart-table tfoot {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
  }

  .sw-cart-table tfoot .sw-cart-summary-row {
    display: block;
    padding: 0.15rem 0;
    border: none;
    text-align: right;
  }

  .sw-cart-table tfoot .sw-cart-summary-row td {
    display: inline-block;
    border: none;
    padding: 0.1rem 0;
  }

  .sw-cart-table tfoot .sw-cart-summary-row td::before {
    content: ""; /* no pseudo-labels here */
  }

  .sw-cart-table tfoot .sw-cart-summary-label {
    padding-right: 0.4rem;
  }

  .sw-cart-table tfoot .sw-cart-summary-value {
    text-align: right;
    white-space: nowrap;
  }

  /* The separate "All Items" totals table at the very bottom
       (sw-cart-all-table) is left alone – your existing styling for that
       can remain as-is.
    */
}

/* Remove native up/down arrows on number inputs (Chrome, Edge, Safari, Opera) */
.sw-qty-input::-webkit-outer-spin-button,
.sw-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Remove native arrows in Firefox */
.sw-qty-input[type="number"] {
  -moz-appearance: textfield;
}

/* Global cart container width cap */
.sw-cart-wrap {
  max-width: 1000px; /* or 960px / 1100px if you prefer */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem; /* nice on mobile so it’s not edge-to-edge */
  padding-right: 1rem;
}

.stx-online-checkin__errors {
  border: 2px solid #c62828;
  background: #fdecea;
  color: #7f1d1d;
  padding: 14px 16px;
  margin-bottom: 18px;
  border-radius: 6px;
}

.stx-online-checkin__errors strong {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
}

.stx-online-checkin__errors ul {
  margin: 0;
  padding-left: 18px;
}

/* ============================================
 * OTP Challenge Layout – Scoped to .stx-otp-challenge
 * ============================================ */

/* Ensure the resend button text doesn't wrap */
.stx-otp-button--sent {
  white-space: nowrap;
  padding: 10px 16px;
  flex-shrink: 0;
  flex-grow: 0;
  min-width: 140px;
  max-width: none;
}

/* Main row: keep everything inline and aligned */
.stx-otp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

/* OTP input: fixed height, sensible width limits */
.stx-otp-row input[type="text"],
.stx-otp-row input[type="number"] {
  height: 40px;
  flex: 1 1 auto;
  min-width: 160px;
  max-width: 260px;
}

/* Scoped OTP code input override */
.stx-otp-challenge .stx-otp-row .stx-otp-code {
  max-width: 1000px;
}

.stx-otp-challenge .stx-otp-status {
  display: block !important; /* ✅ needed to allow full-width or wrapping */
  margin-left: 0 !important; /* ✅ prevents side-pushing in narrow view */
  color: #ffffff;
  font-size: 0.9rem;
  min-height: auto !important;
}

/* Align "Verify and Continue" button to left */
.stx-btn.verify-and-cont {
  margin-left: 0;
  margin-right: auto;
  max-width: 200px;
}

/* Add breathing room above "or" actions */
.stx-otp-challenge .stx-actions-or {
  margin-top: 20px;
}

/* Widen OTP form only inside challenge */
.stx-otp-challenge .stx-online-checkin__form {
  max-width: 800px;
}

/* ========================
 * 💡 Mobile / narrow layout
 * ======================== */
@media (max-width: 480px) {
  .stx-otp-challenge .stx-otp-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start; /* stack nicely */
  }

  @media (max-width: 480px) {
    .stx-otp-challenge .stx-otp-status {
      flex: 0 0 100% !important;
      white-space: normal !important;
      margin-top: 6px;
    }
  }

  .stx-otp-challenge .stx-btn.verify-and-cont {
    width: 100%;
    max-width: none;
    margin-top: 10px;
  }
}

/* =========================================
   Pretickets – Responsive Card Layout (Dark-safe)
   ========================================= */

@media (max-width: 900px) {
  /* Hide table header */
  .stx-pretickets-table thead {
    display: none;
  }

  /* Table becomes block layout */
  .stx-pretickets-table,
  .stx-pretickets-table tbody,
  .stx-pretickets-table tr {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  /* Each row = card (theme-respecting) */
  .stx-pretickets-table tr {
    background: transparent; /* ⬅️ inherit dark theme */
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 16px;
    box-sizing: border-box;
  }

  /* Cells stack */
  .stx-pretickets-table td {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    border: none;
    min-width: 0;
  }

  /* Auto label from data-label */
  .stx-pretickets-table td::before {
    content: attr(data-label);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
    opacity: 0.6; /* ⬅️ theme-neutral */
    color: currentColor; /* ⬅️ inherits text colour */
  }

  /* Event title */
  .stx-preticket__event {
    font-weight: 600;
    font-size: 1rem;
  }

  /* Secondary text */
  .stx-preticket__when,
  .stx-preticket__order,
  .stx-preticket__ticket {
    font-size: 0.9rem;
    opacity: 0.85;
  }

  /* Input + buttons stack cleanly */
  .stx-preticket__link-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
  }

  .stx-preticket__input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .stx-preticket__btn {
    width: 100%;
    justify-content: center;
  }

  /* Share menu grid */
  .stx-preticket__share-menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 6px;
  }

  /* Status block */
  .stx-preticket__status-cell {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }

  .stx-preticket__status {
    align-self: flex-start;
  }

  /* Shared marker (no colour assumptions) */
  .stx-preticket__shared {
    font-size: 0.85rem;
    opacity: 0.85;
  }

  .stx-preticket__share-menu {
    display: none !important;
  }

  /* Ensure header is the width reference */
  .stx-order-header {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Constrain the download button */
  .stx-order-download-btn {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }
}

.sw-cart-other-tt-main {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.sw-cart-tt-icon-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.sw-cart-tt-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 11px;
  line-height: 1;
  cursor: help;
  opacity: 0.8;
  margin-right: 6px;
}

.sw-cart-tt-info:hover {
  opacity: 1;
}

.bnb-settings-wrap {
  max-width: 800px;
  margin: 2rem auto;
  padding: 1.5rem 0;
  border-radius: 12px;
  background: transparent; /* ✅ transparent card for dark theme */
  border: 0;
  color: #ffffff; /* light text for dark background */
}

.bnb-settings-wrap h2 {
  margin-top: 0;
  margin-bottom: 1.25rem;
  font-size: 1.4rem;
}

.bnb-field {
  margin-bottom: 1.5rem;
}

.bnb-field label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
}

.bnb-field .description {
  font-size: 0.875rem;
  color: #9ca3af; /* muted gray for dark theme */
  margin-top: 0.3rem;
}

/* Let stx-in do the heavy lifting; this is just layout */
.bnb-input {
  margin-right: 4px;
  min-width: 230px;
}

.bnb-textarea {
  width: 100%;
  min-height: 140px;
}

/* Stack pairs nicely */
#bnb-url-destination-pairs .bnb-pair {
  margin-bottom: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

#bnb-url-destination-pairs .bnb-pair .bnb-input {
  flex: 1 1 230px;
}

/* Buttons use stx-btn; we just tweak spacing + special color for "Remove" */
.bnb-remove-pair,
#bnb-add-pair,
.bnb-save-button {
  margin-top: 0.25rem;
}

/* Make the remove button look destructive but still a stx-btn */
.bnb-remove-pair {
  border-color: #b91c1c !important;
}

.bnb-remove-pair:hover {
  border-color: #991b1b !important;
}

/* Optional: emphasise the save button slightly */
.bnb-save-button {
  font-weight: 600;
}

/* Facet container: flex row that wraps */
.swcal-facets {
  margin: 1rem 0 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem; /* row / column gap */
}

/* Default: 4 columns on big screens */
.swcal-facet-group {
  flex: 0 0 calc(25% - 1.5rem); /* ≈ 4 per row */
  margin-bottom: 0; /* gap handles vertical spacing */
}

/* Keep your existing label + pills styling */
.swcal-facet-label {
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
  color: #e5e7eb;
}

.swcal-facet-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* Medium screens (tablets): 2 per row */
@media (max-width: 1024px) {
  .swcal-facet-group {
    flex: 0 0 calc(50% - 1.5rem);
  }
}

/* Small screens (phones): 1 per row */
@media (max-width: 640px) {
  .swcal-facet-group {
    flex: 0 0 100%;
  }
}

/* Default pill style (dark theme, inactive) */
.swcal-pill {
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.6); /* slate-ish */
  background: rgba(15, 23, 42, 0.7); /* dark translucent */
  color: #e5e7eb;
  padding: 0.25rem 0.75rem;
  font-size: 0.8rem;
  line-height: 1.2;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.1s ease;
  white-space: nowrap;
}

/* Hover state */
.swcal-pill:hover {
  border-color: #f87171; /* light red border on hover */
  transform: translateY(-1px);
}

/* 🔴 ACTIVE pill */
.swcal-pill.is-active {
  background-color: #ef4444; /* your red */
  border-color: #ef4444;
  color: #ffffff;
}

.swcal-template {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  display: inline-block;
  min-width: 190px;

  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.6);
  background-color: rgba(15, 23, 42, 0.9);
  color: #e5e7eb;

  padding: 0.35rem 2.25rem 0.35rem 0.75rem;
  font-size: 0.8rem;
  line-height: 1.2;
  cursor: pointer;

  white-space: nowrap;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.1s ease;

  /* ✅ Clean down arrow using SVG */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23e5e7eb' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 0.9rem center;
  background-repeat: no-repeat;
  background-size: 10px 6px;
}

/* Hover */
.swcal-template:hover {
  border-color: #f87171;
  transform: translateY(-1px);
}

/* Focus */
.swcal-template:focus {
  outline: none;
  border-color: #ef4444;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.8);
}

/* Disabled */
.swcal-template:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Options background (where supported) */
.swcal-template option {
  background-color: #020617;
  color: #e5e7eb;
}

@media (max-width: 640px) {
  .swcal-template {
    width: 100%;
  }
}

/* Collapsible filters panel */
.swcal-filters-panel.is-collapsed {
  display: none;
}

/* Row for the "More filters" button */
.swcal-filters-toggle-row {
  margin: 0.5rem 0 0.75rem;
}

/* "More filters" button styling (dark theme) */
.swcal-filters-toggle {
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.7);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.8rem;
  color: #e5e7eb;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease,
    transform 0.08s ease;
}

.swcal-filters-toggle:hover {
  background: rgba(15, 23, 42, 0.9);
  border-color: #f97316; /* matches your warm accent */
  transform: translateY(-1px);
}

/* Base camera frame */
.stx-scan .scan-stage {
  border: 3px solid #111827; /* default dark */
  border-radius: 12px;
  transition:
    border-color 0.18s ease-out,
    box-shadow 0.18s ease-out;
}

/* ✅ Success – green */
.stx-scan .scan-stage.scan-ok {
  border-color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.45);
}

/* ❌ Error / cancelled / used / too-late – red */
.stx-scan .scan-stage.scan-error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.45);
}

/* 🕒 Too early / check-in not open yet – amber */
.stx-scan .scan-stage.scan-early {
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.45);
}

/* Make sure the UL is allowed to have bullets */
.sw-cart-other-tts-list {
  margin: 0;
  padding-left: 1.25rem; /* so no-icon bullets sit nicely */
}

/* Base spacing */
.sw-cart-other-tts-item {
  margin: 0.25rem 0;
}

/* When there's an icon → no bullet */
.sw-cart-other-tts-item--has-icon {
  list-style-type: none;
}

/* When there's no icon → keep the bullet */
.sw-cart-other-tts-item--no-icon {
  list-style-type: disc;
  list-style-position: outside;
}

.sw-cart-tt-icon-img {
  display: inline-block;
  width: auto; /* about 50% larger than a typical 1em-ish icon */
  height: 3.5em;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 0.4rem;
}

/* Booking calendar filters */

/* 🔸 Urgency legend (unchanged style, just grouped with pricing) */
.swcal-urgency-legend {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.swcal-urgency-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid #4b5563;
  background: #020617;
  cursor: pointer;
  font-size: 0.8rem;
  color: #e5e7eb;
}

.swcal-urgency-legend-item.is-active {
  border-color: #f97316;
  background: #1f2937;
}

.swcal-urgency-icon {
  width: 1em;
  height: 1em;
  object-fit: contain;
}

/* Base price icon when shown inline in slots */
.swcal-price-icon {
  width: 14px;
  height: 14px;
  margin-left: 6px;
  vertical-align: middle;
  opacity: 0.85;
}

/* 🔸 Smart pricing legend — match urgency pill style */
.swcal-pricing-legend {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

/* Individual pricing pills */
.swcal-pricing-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid #4b5563;
  background: #020617;
  cursor: pointer;
  font-size: 0.8rem;
  color: #e5e7eb;
}

/* Active pricing pill – same visual language as urgency */
.swcal-pricing-legend-item.is-active {
  border-color: #f97316;
  background: #1f2937;
}

/* Icon inside pricing pills – slightly larger and locked to the pill */
.swcal-pricing-legend .swcal-price-icon {
  width: 1em;
  height: 1em;
  margin: 0;
  flex-shrink: 0;
  opacity: 0.9;
}

/* Label text inside pricing pills */
.swcal-pricing-legend-label {
  font-size: 0.8rem;
  color: #e5e7eb;
  letter-spacing: 0.02em;
}

/* Mobile: let both legends wrap nicely */
@media (max-width: 640px) {
  .swcal-pricing-legend,
  .swcal-urgency-legend {
    width: 100%;
    justify-content: flex-start;
  }

  .swcal-pricing-legend-item,
  .swcal-urgency-legend-item {
    white-space: normal;
  }
}

/* When filtered by pricing legend, hide non-matching slots */
.swcal-slot.is-hidden-by-pricing {
  display: none;
}

/* Hide slots when filtered out by urgency legend */
.swcal-slot.is-hidden-by-urgency {
  display: none;
}

.sw-qty-control {
  display: inline-flex; /* keep as one inline block */
  flex-wrap: nowrap; /* 🔒 never wrap */
  align-items: center;
  gap: 0.25rem;

  white-space: nowrap; /* extra belt + braces */
}

.sw-qty-control .sw-qty-btn {
  flex: 0 0 auto; /* don’t stretch, don’t shrink to zero */
}

.sw-qty-control .sw-qty-input {
  flex: 0 0 auto; /* fixed-ish width, no wrapping */
  width: 3.2rem; /* tweak to taste */
  min-width: 2.8rem;
  text-align: center;
}

.sw-cart-mini-tier-wrap {
  display: flex;
  justify-content: flex-end; /* 👉 push table to the right edge */
  width: 100%;
  margin-top: 0.25rem; /* nice bit of breathing room under the unit price */
}

.sw-cart-mini-tier-wrap .sw-mini-tier {
  margin: 0; /* no surprise auto margins */
}

@media (max-width: 768px) {
  /* Only hide the main cart header, not any nested tables */
  .sw-cart-table > thead {
    display: none;
  }

  /* Only block-ify the main cells, not nested ones */
  .sw-cart-table > tbody > tr > td,
  .sw-cart-table > tfoot > tr > td,
  .sw-cart-table > thead > tr > th {
    display: block;
    /* keep your existing styles here */
  }
}

@media (max-width: 768px) {
  /* Force the nested mini tier table to behave like a proper table */
  .sw-cart-mini-tier-wrap .sw-mini-tier {
    display: table !important;
    width: auto;
    max-width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
  }

  .sw-cart-mini-tier-wrap .sw-mini-tier thead {
    display: table-header-group !important; /* bring back Min/Max/Unit */
  }

  .sw-cart-mini-tier-wrap .sw-mini-tier tbody {
    display: table-row-group !important;
  }

  .sw-cart-mini-tier-wrap .sw-mini-tier tr {
    display: table-row !important;
  }

  .sw-cart-mini-tier-wrap .sw-mini-tier th,
  .sw-cart-mini-tier-wrap .sw-mini-tier td {
    display: table-cell !important; /* stop block/inline weirdness */
    padding: 2px 4px;
    white-space: nowrap;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }

  .sw-cart-mini-tier-wrap .sw-mini-tier th {
    font-weight: 600;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  }
}

/* Generic disabled look for revenue date fields */
.stx-revenue-filter .stx-in--disabled {
  background-color: #e5e7eb; /* slightly darker grey */
  border-color: #cbd5f5; /* clearer border */
  color: #9ca3af; /* muted text */
  cursor: not-allowed;
  box-shadow: none;
}

/* Make the text inside look a bit softer too */
.stx-revenue-filter .stx-in--disabled::-webkit-calendar-picker-indicator {
  opacity: 0.5;
  cursor: not-allowed;
}

/* TinyMCE dialog fixes (dark site compatibility) */
.mce-container,
.mce-container * {
  color: #111 !important;
}

#wp-link,
#link-modal-title {
  color: #111 !important;
}

/* ===============================
   Producer Manage Events (dark)
   =============================== */

/* Filters */
.swpme-filters {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.swpme-filters label {
  font-weight: 600;
  color: #f9fafb;
}

/* Match existing select styling */
.swpme-filters select,
.swpme-filters input[type="date"] {
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid #374151;
  background: #111827;
  color: #f9fafb;
  min-width: 160px;
}

/* Disabled date inputs */
.swpme-date:disabled {
  background: #0f172a;
  color: #6b7280;
  border-color: #374151;
  cursor: not-allowed;
}

/* ===============================
   Table
   =============================== */

.swpme-table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  color: #f9fafb;
}

.swpme-table th {
  background: #1f2937;
  color: #f9fafb;
  font-weight: 600;
  padding: 8px;
  border-bottom: 1px solid #374151;
}

.swpme-table td {
  padding: 8px;
  border-bottom: 1px solid #374151;
  color: #e5e7eb;
}

/* Row states – muted, dark-mode friendly */
.swpme-row.swpme-empty {
  background: rgba(34, 172, 28, 0.08); /* muted green */
}

.swpme-row.swpme-sold {
  background: rgba(220, 38, 38, 0.1); /* muted red */
}

.swpme-row.swpme-draft {
  background: rgba(251, 191, 36, 0.1); /* muted amber */
}

/* ===============================
   Buttons (reuse your pill style)
   =============================== */

.swpme-filters .button,
.swpme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  padding: 6px 14px;
  border-radius: 999px;

  border: 1px solid #dc2626;
  background: rgba(220, 38, 38, 0.06);
  color: #b91c1c;

  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;

  transition:
    background-color 0.12s ease-out,
    color 0.12s ease-out,
    box-shadow 0.12s ease-out,
    transform 0.06s ease-out;
}

.swpme-toggle:hover,
.swpme-filters .button:hover {
  background: rgba(220, 38, 38, 0.14);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.swpme-toggle:active,
.swpme-filters .button:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

/* ===============================
   Pagination
   =============================== */

.swpme-pagination {
  margin: 18px 0;
  display: flex;
  justify-content: center;
}

.swpme-pagination ul {
  display: flex;
  gap: 6px;
  list-style: none;
  padding: 0;
}

.swpme-pagination a,
.swpme-pagination span {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #374151;
  background: #111827;
  color: #f9fafb;
  text-decoration: none;
}

.swpme-pagination a:hover {
  background: #1f2937;
}

.swpme-pagination .current {
  background: rgba(220, 38, 38, 0.14);
  border-color: #dc2626;
  color: #fca5a5;
}

/* Improve contrast on coloured rows */
.swpme-row.swpme-empty td,
.swpme-row.swpme-sold td,
.swpme-row.swpme-draft td {
  color: #111827; /* deep slate, readable on muted backgrounds */
}

.swpme-modal__dialog {
  width: 100%;
  max-width: none; /* 👈 make sure this isn't capping it */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px; /* optional, for breathing space on small screens */
  box-sizing: border-box;
}

/* Backdrop + flex centering, scoped to producer manage events modal */
.swpme-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

/* Modal card */
.swpme-modal__inner {
  background: #111827;
  border: 1px solid #374151;
  border-radius: 12px;
  padding: 16px;
  width: 100%;
  max-width: 650px;
  color: #f9fafb;
  box-sizing: border-box; /* 👈 important */
}

.swpme-modal__inner label {
  display: block;
  margin-bottom: 12px;
}

/* Inputs inside modal */
.swpme-modal__inner select,
.swpme-modal__inner textarea {
  width: 100%;
  max-width: 100%; /* 👈 never exceed container */
  box-sizing: border-box; /* 👈 padding counted inside width */
  display: block;
  margin-top: 4px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #374151;
  background: #0f172a;
  color: #f9fafb;
}

/* Optional: keep textarea height reasonable */
.swpme-modal__inner textarea {
  min-height: 90px;
  resize: vertical;
}

/* Actions row */
.swpme-modal__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Ensure HTML hidden attribute always wins */
.swpme-modal[hidden] {
  display: none !important;
}
/* Debug misconfigured events – wrapper */
.stx-debug-misconfigured {
  margin-top: 16px;
  font-size: 14px;
  color: #e5e7eb; /* light text for dark page */
}

/* Heading inside wrapper */
.stx-debug-misconfigured h2 {
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 600;
  color: #f9fafb; /* brighter heading */
}

/* Table: keep it light with dark text for readability */
.stx-debug-misconfigured table {
  width: 100%;
  border-collapse: collapse;
  background: #f9fafb; /* light neutral panel */
}

.stx-debug-misconfigured th,
.stx-debug-misconfigured td {
  padding: 8px 10px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  vertical-align: top;
  color: #111827; /* dark text only inside cells */
}

.stx-debug-misconfigured thead th {
  background: #e5e7eb;
  font-weight: 600;
}

.stx-debug-misconfigured tbody tr {
  background: #f3f4f6;
}

/* Links OUTSIDE the table (if any) – keep them light */
.stx-debug-misconfigured > a,
.stx-debug-misconfigured > p a {
  color: #bfdbfe;
  text-decoration: underline;
}

/* Links INSIDE the table – standard link blue on light bg */
.stx-debug-misconfigured table a {
  color: #1d4ed8;
  text-decoration: none;
}

.stx-debug-misconfigured table a:hover {
  text-decoration: underline;
}

/* Card alert dot */
.screamtix-dashboard__card {
  position: relative;
}

/* 🔴 Dot on the dashboard cards (slightly inset from the corner) */
.screamtix-dashboard__card .screamtix-dashboard__alert-dot {
  position: absolute;
  top: 10px; /* down a bit */
  right: 10px; /* left a bit */
  width: 10px;
  height: 10px;
  border-radius: 999px; /* perfect circle */
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.8);
  animation: screamtix-alert-pulse 1.2s infinite;
  z-index: 10;
  pointer-events: none;
}

/* Shared pulse animation */
@keyframes screamtix-alert-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.8);
  }
  70% {
    transform: scale(1.6);
    box-shadow: 0 0 0 12px rgba(239, 68, 68, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

/* Top-of-page alert bar under the title */
.screamtix-dashboard__alert-bar {
  margin: 10px 0 26px; /* keep a nice gap above the grid */
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(127, 29, 29, 0.9); /* dark red, works on dark UI */
  color: #fee2e2; /* light text */
  font-size: 14px;
  display: inline-flex; /* flex for easy centring */
  align-items: center; /* vertical centre */
}

/* Dot when used inside the alert bar (inline, centred via flex) */
.screamtix-dashboard__alert-bar .screamtix-dashboard__alert-dot {
  position: static; /* override absolute from card */
  top: auto;
  left: auto;
  right: auto;
  transform: none;
  width: 10px;
  height: 10px;
  border-radius: 999px; /* circle */
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.8);
  animation: screamtix-alert-pulse 1.2s infinite;
  margin-right: 8px; /* gap before text */
  flex-shrink: 0;
}

/* Link inside alert bar – light and underlined */
.screamtix-dashboard__alert-bar a {
  color: #fee2e2;
  text-decoration: underline;
}
.screamtix-dashboard__alert-bar a:hover {
  text-decoration: none;
}

/* ================================
   ScreamTix Error Log Viewer (dark)
   ================================ */

.stx-error-log {
  margin: 24px auto 0; /* center horizontally */
  padding: 16px 18px;
  width: 100%;
  max-width: 1200px; /* ~60% on a typical desktop width */
  background: #020617; /* near-black */
  border-radius: 8px;
  border: 1px solid #1f2937;
  color: #e5e7eb; /* light text */
}

/* Title */
.stx-error-log h2 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  color: #e5e7eb;
}

/* Path line + inline code */
.stx-error-log-path {
  margin: 0 0 10px;
  font-size: 13px;
  color: #9ca3af;
}

.stx-error-log-path code {
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  font-size: 12px;
  background: #0b1120;
  padding: 2px 4px;
  border-radius: 4px;
  color: #e5e7eb;
}

/* Controls row */
.stx-error-log-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

/* Refresh button */
.stx-error-log-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  font-size: 13px;
  border-radius: 999px;
  border: 1px solid #4b5563;
  background: #0f172a;
  color: #e5e7eb;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.stx-error-log-refresh:hover {
  background: #1f2937;
  border-color: #6b7280;
}

/* Download link */
.stx-error-log-download {
  font-size: 13px;
  color: #93c5fd;
  text-decoration: underline;
}

.stx-error-log-download:hover {
  text-decoration: none;
}

/* Output wrapper */
.stx-error-log-output {
  margin-top: 6px;
}

/* Meta line above log (last updated, size) */
.stx-error-log-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 12px;
  color: #9ca3af;
  margin-bottom: 4px;
}

/* The actual log block */
.stx-error-log-pre {
  margin: 0;
  padding: 10px 12px;
  max-height: 420px; /* scroll after this */
  overflow-y: auto;
  overflow-x: auto; /* just in case of crazy lines */
  background: #020617;
  border-radius: 6px;
  border: 1px solid #1f2937;
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  font-size: 12px;
  line-height: 1.4;
  color: #e5e7eb;
  white-space: pre-wrap; /* wrap lines instead of horizontal scroll forever */
  word-wrap: break-word;
  word-break: break-word; /* break huge JSON blobs if needed */
}

/* Error messages from the AJAX loader */
.stx-error-log-error {
  margin: 8px 0 0;
  font-size: 13px;
  color: #fecaca;
}

/* Toggle row at top of error log */
.stx-error-log-toggle-row {
  margin: 4px 0 12px;
}

.stx-error-log-toggle-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.stx-error-log-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #e5e7eb; /* light text for dark bg */
}

.stx-error-log-toggle-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

.stx-error-log-toggle-button {
  padding: 4px 10px;
  font-size: 13px;
  border-radius: 4px;
  border: 1px solid #4b5563;
  background: #111827;
  color: #e5e7eb;
  cursor: pointer;
}
.stx-error-log-toggle-button:hover {
  background: #1f2937;
}

.stx-error-log-toggle-status {
  font-size: 13px;
  color: #9ca3af;
}

.stx-error-log-status-on {
  color: #bbf7d0;
  font-weight: 600;
}
.stx-error-log-status-off {
  color: #fecaca;
  font-weight: 600;
}

/* Mobile: stack neatly */
@media (max-width: 768px) {
  .stx-error-log-toggle-form {
    flex-direction: column;
    align-items: flex-start;
  }
}

.stx-filter__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem; /* tweak to taste */
  align-items: center; /* 🔑 vertically centre all children */
}

/* Keep the buttons nicely aligned as a group */
.stx-filter__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* remove any random top margin if you had one */
  margin-top: 15px;
}

/* ===============================
   Meta CAPI Settings (dark card)
   =============================== */

.stx-meta-capi-settings {
  max-width: 720px;
  margin: 16px 0 24px;
}

.stx-meta-capi-card {
  background: #020617; /* dark slate */
  border-radius: 10px;
  border: 1px solid #1f2937; /* slate-800 */
  padding: 18px 18px 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  color: #e5e7eb; /* text-slate-200 */
}

.stx-meta-capi-title {
  margin: 0 0 4px;
  font-size: 20px;
  line-height: 1.3;
}

.stx-meta-capi-intro {
  margin: 0 0 14px;
  font-size: 14px;
  color: #9ca3af; /* text-slate-400 */
}

.stx-meta-capi-form {
  margin-top: 8px;
}

.stx-meta-capi-field {
  margin-bottom: 14px;
}

.stx-meta-capi-label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  font-size: 13px;
  color: #e5e7eb;
}

.stx-meta-capi-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

.stx-meta-capi-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
}

.stx-meta-capi-help {
  margin-top: 4px;
  font-size: 12px;
  color: #9ca3af;
}

.stx-meta-capi-optional {
  font-weight: 400;
  font-size: 12px;
  color: #9ca3af;
}

.stx-meta-capi-actions {
  margin-top: 4px;
}

.stx-meta-capi-footnote {
  margin-top: 14px;
  font-size: 12px;
  color: #9ca3af;
}

/* Inputs – reuse your existing .stx-in styles, just ensure they look ok on dark bg. Example if needed: */
.stx-meta-capi-card .stx-in {
  width: 100%;
  max-width: 360px;
  background: #020617;
  border: 1px solid #374151;
  border-radius: 6px;
  padding: 6px 8px;
  color: #e5e7eb;
  font-size: 13px;
}

.stx-meta-capi-card .stx-in:focus {
  outline: none;
  border-color: #8af58a;
  box-shadow: 0 0 0 1px rgba(138, 245, 138, 0.5);
}

/* Attribution pie – layout */
.stx-attrib {
  margin-top: 24px;
}

.stx-attrib__note {
  font-size: 13px;
  color: #9ca3af; /* muted on dark */
  margin-bottom: 12px;
}

.stx-attrib__layout {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

/* Chart column: fixed-ish width, no full-width madness */
.stx-attrib__chart {
  flex: 0 0 auto;
  max-width: 260px;
}

.stx-attrib__chart canvas {
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* Legend column */
.stx-attrib__legend {
  flex: 1 1 220px;
  font-size: 13px;
}

/* Legend rows + colour swatches */
.stx-attrib__legend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.stx-attrib__label {
  flex: 1 1 auto;
}

.stx-attrib__value {
  flex: 0 0 auto;
  white-space: nowrap;
  color: #cbd5f5;
  font-variant-numeric: tabular-nums;
}

/* Little colour dots matching our dataset palette */
.stx-attrib__swatch {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  margin-right: 4px;
}

/* Keep these in sync with the JS colours array order */
.stx-attrib__swatch--0 {
  background: #22c55e;
} /* green */
.stx-attrib__swatch--1 {
  background: #0ea5e9;
} /* sky */
.stx-attrib__swatch--2 {
  background: #f97316;
} /* orange */
.stx-attrib__swatch--3 {
  background: #a855f7;
} /* purple */
.stx-attrib__swatch--4 {
  background: #e11d48;
} /* rose */
.stx-attrib__swatch--5 {
  background: #14b8a6;
} /* teal */
.stx-attrib__swatch--6 {
  background: #facc15;
} /* amber */
.stx-attrib__swatch--7 {
  background: #64748b;
} /* slate */

/* Mobile: stack chart over legend */
@media (max-width: 768px) {
  .stx-attrib__layout {
    flex-direction: column;
    align-items: flex-start;
  }

  .stx-attrib__chart {
    max-width: 220px;
  }
}

/* Attribution header layout */
.stx-attrib__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

/* Controls row (label + select + button) */
.stx-attrib__controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 13px;
}

/* Small input/select variant */
.stx-in--sm {
  padding: 4px 8px;
  font-size: 13px;
  border-radius: 4px;
  border: 1px solid #334155;
  background: #020617;
  color: #e5e7eb;
}

/* Small button variant */
.stx-btn--sm {
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.2;
}

/* Optional: tighten label spacing */
.stx-attrib__controls label {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #cbd5f5;
}

.stx-orders-archive {
  margin-top: 1rem;
}

.stx-orders-archive .stx-archive-intro {
  margin-bottom: 1rem;
  max-width: 48rem; /* optional if you want it narrower */
}

.stx-archive-filter .stx-field {
  margin-right: 1rem;
}

.stx-archive-pagination {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.stx-archive-pagination .stx-pagination__status {
  font-size: 0.9rem;
  opacity: 0.8;
}

.stx-table .col-select {
  width: 2.5rem;
  text-align: center;
}

/* Archive Orders table – tidy headings and select column */
.stx-orders-archive .stx-table th {
  text-align: left;
}

.stx-orders-archive .stx-table th.col-select,
.stx-orders-archive .stx-table td.col-select {
  width: 3.5rem;
  white-space: nowrap;
}

.stx-archive-select-all-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: normal; /* don’t let the label text shout too much */
}

.stx-archive-select-all-label input[type="checkbox"] {
  margin: 0;
}

.stx-archive-help {
  clear: both; /* gets it below the tablenav floats if needed */
  margin: 0 0 8px;
  font-style: italic; /* or whatever */
  max-width: none; /* important if you reused .description or similar */
}

.swc-mgr .swc-readonly {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

/* Make the Type dropdown and its options readable */
#swc-type {
  color: #000 !important;
  background-color: #fff !important;
}

/* Force dark text on the dropdown options */
#swc-type option {
  color: #000 !important;
  background-color: #fff !important;
}
/* Coupon chips (dark UI) — scoped to chip rows only */
.stx-chip-row .stx-badge-fe-ordertable {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;

  padding: 0.22rem 0.55rem;
  margin: 0 0.35rem 0.35rem 0;
  border-radius: 999px;

  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;

  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);

  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
}

.stx-chip-row .stx-badge-fe-ordertable:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}

.stx-chip-row .stx-badge-fe-ordertable:active {
  transform: translateY(1px);
  box-shadow: none;
}

.stx-chip-row {
  margin-bottom: 0.4rem;
}

/* ===========================
   Wrapper
   =========================== */
.sw-corp-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 24px;
  color: #e5e7eb;
  box-sizing: border-box;
}

/* Normalise text spacing */
.sw-corp-section p {
  margin: 0 0 10px 0;
  line-height: 1.9;
}

/* ===========================
   HERO
   =========================== */
.sw-corp-hero {
  background: linear-gradient(145deg, #0b0f19, #111827);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 60px 40px;
  border-radius: 18px;
  text-align: center;
  margin-bottom: 60px;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sw-corp-hero-title {
  margin: 0;
  font-size: 40px;
  letter-spacing: 1px;
  color: #ffffff;
}

.sw-corp-hero-text {
  margin: 20px auto 0 auto;
  max-width: 820px;
  font-size: 20px;
  line-height: 1.6;
  color: #cbd5e1;
}

.sw-corp-hero-text strong {
  color: #ffffff;
}

.sw-corp-hero-text--blue {
  color: #38bdf8;
}

/* ===========================
   STORY + CORPORATE BOX
   =========================== */

/* Use FLEX instead of grid to avoid theme weirdness */
.sw-corp-story-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 40px;
  margin-bottom: 60px;
  align-items: flex-start;
}

/* STORY column – LEFT */
.sw-corp-story {
  flex: 1.4 1 0;
  min-width: 0;
}

.sw-corp-story-title {
  color: #ffffff;
  margin: 0 0 16px 0;
}

.sw-corp-story-text {
  color: #cbd5e1;
}

/* Corporate “why this works” card – RIGHT */
.sw-corp-card {
  flex: 1 1 0;
  min-width: 0;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 32px 28px;
  border-radius: 16px;
  box-sizing: border-box;
  margin: 0; /* kill any theme margins */
}

.sw-corp-card-title {
  margin: 0 0 10px 0;
  color: #ffffff;
}

.sw-corp-card-list {
  margin: 0;
  padding-left: 18px;
  line-height: 1.9;
  color: #cbd5e1;
}

/* ===========================
   STATS SECTION
   =========================== */
.sw-corp-stats {
  margin-bottom: 60px;
  text-align: center;
}

.sw-corp-stats-title {
  color: #ffffff;
  margin: 0 0 20px 0;
}

.sw-corp-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 24px;
  justify-content: center;
}

.sw-corp-stat-card {
  flex: 1 1 260px;
  max-width: 320px;
  background: #0b0f19;
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 18px;
  padding: 32px 24px;
  box-shadow: 0 0 30px rgba(56, 189, 248, 0.08);
  box-sizing: border-box;
}

.sw-corp-stat-number {
  font-size: 52px;
  font-weight: 700;
  color: #38bdf8;
}

.sw-corp-stat-label {
  margin-top: 8px;
  color: #cbd5e1;
}

/* ===========================
   FORMAT SECTION
   =========================== */
.sw-corp-format {
  margin-bottom: 60px;
}

.sw-corp-format-title {
  color: #ffffff;
  margin: 0 0 16px 0;
}

.sw-corp-format-text {
  color: #cbd5e1;
}

/* ===========================
   LARGE GROUP LOGISTICS
   =========================== */
.sw-corp-logistics {
  background: linear-gradient(145deg, #111827, #0b0f19);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 40px 32px;
  border-radius: 18px;
  margin-bottom: 60px;
  box-sizing: border-box;
}

.sw-corp-logistics-title {
  margin: 0 0 14px 0;
  color: #ffffff;
}

.sw-corp-logistics-text {
  color: #cbd5e1;
  line-height: 1.8;
}

.sw-corp-logistics-list {
  margin: 8px 0 0 0;
  padding-left: 20px;
  line-height: 1.9;
  color: #cbd5e1;
}

/* ===========================
   WHY COMPANIES CHOOSE
   =========================== */
.sw-corp-reasons-title {
  color: #ffffff;
  margin: 0 0 16px 0;
}

.sw-corp-reasons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.sw-corp-reasons-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 14px;
  background: #020617;
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: #e5e7eb;
  box-sizing: border-box;
}

/* Green tick injected before each reason */
.sw-corp-reasons-item::before {
  content: "✔";
  color: #22c55e;
  font-size: 20px;
  line-height: 1;
  margin-top: 2px;
}

.sw-corp-reasons-text {
  line-height: 1.7;
}

/* ===========================
   RESPONSIVE TWEAKS
   =========================== */

/* Tablet-ish: tighten paddings & fonts a bit */
@media (max-width: 900px) {
  .sw-corp-section {
    padding: 60px 16px;
  }

  .sw-corp-hero {
    padding: 40px 24px;
  }

  .sw-corp-hero-title {
    font-size: 32px;
  }

  .sw-corp-hero-text {
    font-size: 18px;
  }

  .sw-corp-stat-number {
    font-size: 42px;
  }
}

/* Mobile: stack columns, shrink cards so nothing spills */
@media (max-width: 640px) {
  .sw-corp-section {
    padding: 48px 16px;
  }

  .sw-corp-hero {
    padding: 32px 20px;
    margin-bottom: 40px;
  }

  .sw-corp-hero-title {
    font-size: 26px;
  }

  .sw-corp-hero-text {
    font-size: 16px;
  }

  /* STORY + CARD stack vertically */
  .sw-corp-story-grid {
    flex-direction: column;
    gap: 24px;
    margin-bottom: 40px;
  }

  .sw-corp-card {
    padding: 24px 20px;
  }

  .sw-corp-stats {
    margin-bottom: 40px;
  }

  .sw-corp-stat-card {
    flex: 1 1 100%;
    max-width: 100%;
    padding: 24px 20px;
  }

  .sw-corp-stat-number {
    font-size: 34px;
  }

  .sw-corp-logistics {
    padding: 28px 20px;
    margin-bottom: 40px;
  }

  .sw-corp-reasons-grid {
    grid-template-columns: 1fr;
  }

  .sw-corp-reasons-item {
    padding: 14px 16px;
  }
}

/* All selects in the contact form – dark, modern */
.stxc-form select {
  width: 100%;
  max-width: 100%;
  padding: 0.55rem 0.8rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.65);
  background-color: #020617; /* dark slate */
  color: #e5e7eb; /* light text */
  font-size: 0.9rem;
  line-height: 1.4;
  outline: none;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.55);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease,
    transform 0.08s ease;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

/* Hover state */
.stxc-form select:hover {
  border-color: rgba(248, 250, 252, 0.7);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.8);
}

/* Focus state */
.stxc-form select:focus {
  border-color: #ff0000; /* red border */
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 1),
    0 0 0 1px rgba(255, 0, 0, 0.85),
    /* red glow */ 0 12px 32px rgba(15, 23, 42, 0.95);
  background-color: #020617;
  transform: translateY(-1px);
}

/* Disabled state */
.stxc-form select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

/* Optional: generic label styling for all select labels */
.stxc-form label {
  font-size: 0.88rem;
  color: #cbd5f5;
}

.stx-contact-admin__status-summary {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.35rem;
  font-size: 0.8rem;
}
.stx-contact-admin__status-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid rgba(148, 163, 184, 0.6);
  background: rgba(15, 23, 42, 0.9);
}
.stx-contact-admin__status-pill--new {
  border-color: rgba(59, 130, 246, 0.7);
  background: rgba(30, 64, 175, 0.7);
}
.stx-contact-admin__status-pill--in_progress {
  border-color: rgba(234, 179, 8, 0.8);
  background: rgba(133, 77, 14, 0.7);
}
.stx-contact-admin__status-pill--closed {
  border-color: rgba(34, 197, 94, 0.8);
  background: rgba(22, 101, 52, 0.7);
}
.stx-contact-admin__status-updated {
  opacity: 0.7;
}
.stx-contact-admin__status-last-note span {
  opacity: 0.85;
}

/* Modal */
.stx-enquiry-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.8);
  z-index: 99999;
}
.stx-enquiry-modal.is-open {
  display: flex;
}
.stx-enquiry-modal__dialog {
  background: #020617;
  border-radius: 0.9rem;
  border: 1px solid rgba(148, 163, 184, 0.5);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.95);
  max-width: 680px;
  width: 100%;
  max-height: 80vh;
  padding: 1.25rem 1.5rem 1.4rem;
  overflow: auto;
  position: relative;
}
.stx-enquiry-modal__close {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  border: 0;
  background: transparent;
  color: #e5e7eb;
  font-size: 1.4rem;
  cursor: pointer;
}
.stx-enquiry-modal__title {
  margin: 0 0 0.6rem;
  font-size: 1.05rem;
}
.stx-enquiry-modal__history {
  margin-bottom: 1rem;
  border-radius: 0.6rem;
  border: 1px solid rgba(148, 163, 184, 0.4);
  padding: 0.6rem 0.7rem;
  background: rgba(15, 23, 42, 0.9);
}
.stx-enquiry-modal__history h5 {
  margin: 0 0 0.4rem;
  font-size: 0.9rem;
  opacity: 0.9;
}
.stx-enquiry-modal__history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.8rem;
}
.stx-enquiry-modal__history-item {
  padding: 0.3rem 0.4rem;
  border-radius: 0.45rem;
  background: rgba(15, 23, 42, 0.9);
}
.stx-enquiry-modal__history-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: baseline;
  margin-bottom: 0.2rem;
  font-size: 0.78rem;
}
.stx-enquiry-modal__history-status {
  font-weight: 600;
}
.stx-enquiry-modal__history-time,
.stx-enquiry-modal__history-actor {
  opacity: 0.8;
}
.stx-enquiry-modal__history-note {
  white-space: pre-wrap;
  line-height: 1.4;
}
.stx-enquiry-modal__field {
  margin-bottom: 0.6rem;
}
.stx-enquiry-modal__field label {
  font-size: 0.85rem;
  display: block;
}
.stx-enquiry-modal__field textarea {
  width: 100%;
  max-width: 100%;
}
.stx-enquiry-modal__actions {
  margin-top: 0.4rem;
  text-align: right;
}

/* Container list */
.stx-articles {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Each article row */
.stx-article {
  padding: 16px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.4); /* slate-ish */
}

/* Row layout: IMAGE LEFT (thumb), TEXT RIGHT (main) */
.stx-article__grid {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

/* Thumbnail – force it to be the LEFT column */
.stx-article__thumb {
  order: 0; /* show BEFORE the main text, even though it’s second in the HTML */
  flex: 0 0 110px; /* fixed width */
  max-width: 110px;
}

.stx-article__thumb img {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 90px; /* cap the height so it can’t blow up */
  height: auto;
  object-fit: cover;
  border-radius: 6px;
}

/* Main text block – RIGHT column */
.stx-article__main {
  order: 1;
  flex: 1 1 auto;
}

/* Title bigger and less “micro” */
.stx-article__title {
  margin: 0 0 6px;
  font-size: 1.3rem;
  line-height: 1.3;
}

.stx-article__title a {
  text-decoration: none;
}

.stx-article__title a:hover {
  text-decoration: underline;
}

/* Date line */
.stx-article__meta {
  font-size: 1rem;
  opacity: 0.8;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Excerpt */
.stx-article__excerpt {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}

/* Mobile tweaks */
@media (max-width: 640px) {
  .stx-article__grid {
    gap: 12px;
  }

  .stx-article__thumb {
    flex: 0 0 80px;
    max-width: 80px;
  }

  .stx-article__thumb img {
    max-height: 70px;
  }
}

/* basic full-screen modal layout */
.stx-img-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  justify-content: center;
  align-items: center;
}

.stx-img-modal.is-open {
  display: flex;
}

.stx-img-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
}

.stx-img-dialog {
  position: relative;
  max-width: 70vw;
  max-height: 70vh;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 10px;
  box-sizing: border-box;
}

.stx-img-frame {
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stx-img-frame img {
  display: block;
  max-width: 80%;
  max-height: 80%;
  height: auto;
  width: auto;
  object-fit: contain;
  border-radius: 4px;
}

/* Close button as before */
.stx-img-close {
  position: absolute;
  top: 8px;
  right: 8px;
  border: none;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
}

/* Thumbnails should feel clickable */
.stx-et-gallery-item img.stx-lightbox-img,
.stx-variant-gallery-item img.stx-lightbox-img {
  cursor: zoom-in;
}

/* In the lightbox, show zoom-out / pointer to hint you can close */
.stx-img-frame img {
  cursor: zoom-out;
}

/* Scoped layout for the OpenAI credentials shortcode */
#stx-openai-credentials {
  width: 100%;
  max-width: 100%;
}

/* Keep form elements aligned */
#stx-openai-credentials #stx-openai-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Status message beside button */
#stx-openai-credentials #stx-openai-status {
  margin-left: 10px;
  font-size: 0.9rem;
}

/* Hide status element if empty (removes mystery circle) */
#stx-openai-credentials #stx-openai-status:empty {
  display: none;
}

/* Ensure ordered list markers stay inside the card */
#stx-openai-credentials ol {
  margin: 0;
  padding-left: 1.4em;
  list-style-position: inside;
}

/* Slight spacing between steps */
#stx-openai-credentials li {
  margin: 4px 0;
}

/* Ensure inputs stretch nicely inside container */
#stx-openai-credentials input.stx-in {
  width: 100%;
  box-sizing: border-box;
}

/* Button alignment */
#stx-openai-credentials .stx-btn {
  align-self: flex-start;
}

/* Scoped layout for the OpenAI credentials block */

#stx-openai-credentials {
  width: 100%;
  display: flex;
  justify-content: center; /* center horizontally */
}

#stx-openai-credentials .stx-card {
  width: 100%;
  max-width: 700px;
}

.stx-et-trailer-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.stx-et-trailer-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.7);
}

.swcal2-wrap {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .stx-cal-v1-wrap {
    display: none;
  }
}

@media (min-width: 769px) {
  .stx-mobile-swiper {
    display: none;
  }
}
@media (max-width: 768px) {
  .stx-mobile-hide {
    display: none !important;
  }
}

/* ===== Mobile content swiper ===== */

@media (min-width: 769px) {
  .stx-mobile-swiper {
    display: none;
  }
}

@media (max-width: 768px) {
  .stx-mobile-hide {
    display: none !important;
  }

  .stx-mobile-swiper {
    position: relative;
    overflow: hidden;
    padding-bottom: 2rem;
    margin: 0 -16px;
  }

  .stx-swiper-track {
    display: flex;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
  }

  .stx-swiper-card {
    min-width: calc(100% - 48px);
    margin: 0 8px;
    background: #111827;
    border: 1px solid rgba(220, 38, 38, 0.25);
    border-radius: 14px;
    padding: 1.25rem;
    box-sizing: border-box;
    max-height: 420px;
    overflow-y: auto;
  }

  .stx-swiper-label {
    display: block;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: #dc2626;
    margin: 0 0 10px;
    text-transform: uppercase;
  }

  .stx-swiper-card p,
  .stx-swiper-card .stx-marketing-text,
  .stx-swiper-card .stx-marketing-text * {
    font-size: 15px;
    line-height: 1.65;
    color: #e5e7eb;
    margin: 0 0 8px;
  }

  .stx-swiper-card blockquote.stx-quote {
    font-size: 15px;
    line-height: 1.65;
    color: #e5e7eb;
    margin: 0;
    font-style: italic;
    border-left: 2px solid #dc2626;
    padding-left: 14px;
  }

  .stx-swiper-card details {
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 10px;
  }

  .stx-swiper-card details:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .stx-swiper-card details summary {
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    color: #f9fafb;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 4px;
  }

  .stx-swiper-card details summary::-webkit-details-marker {
    display: none;
  }

  .stx-swiper-card details summary::after {
    content: "+";
    color: #dc2626;
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    margin-left: 8px;
  }

  .stx-swiper-card details[open] summary::after {
    content: "−";
  }

  .stx-swiper-card details p {
    font-size: 14px;
    line-height: 1.55;
    color: #9ca3af;
    margin: 8px 0 0;
  }

  .stx-swiper-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 1.25rem;
  }

  .stx-swiper-dot {
    height: 3px;
    width: 6px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    padding: 0;
  }

  .stx-swiper-dot.is-active {
    width: 20px;
    background: #dc2626;
  }
}

@media (max-width: 768px) {
  .has-global-padding {
    padding-right: 20px !important;
    padding-left: 20px !important;
  }
}

@media (max-width: 768px) {
  .stx-floating-btn--hide-mobile {
    display: none !important;
  }
}

.stx-card-video-link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #000;
}

.stx-card-square-video,
.stx-card-video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stx-card-square-video {
  z-index: 1;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.stx-card-video-poster {
  z-index: 2;
  opacity: 1;
  transition: opacity 0.25s ease;
}

.stx-card-video-link.is-playing .stx-card-video-poster {
  opacity: 0;
  pointer-events: none;
}

.stx-card-video-link.is-playing .stx-card-square-video {
  opacity: 1;
}

/* ===== Mobile ticket table on event page ===== */

@media (max-width: 768px) {
  .sw-tt-table,
  .sw-tt-table tbody,
  .sw-tt-table tfoot,
  .sw-tt-table tr,
  .sw-tt-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .sw-tt-table thead {
    display: none;
  }

  .sw-tt-row:not([style*="display: none"]) {
    display: grid !important;
    grid-template-columns: 1fr auto;
    gap: 18px;
    padding: 16px;
    margin: 20px 0;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 14px;
  }

  .sw-tt-cell {
    padding: 0 !important;
    border: 0 !important;
  }

  .sw-tt-cell--ticket {
    grid-column: 1;
  }

  .sw-tt-cell--qty {
    grid-column: 2;
    grid-row: 1;
  }

  .sw-tt-cell--pricing {
    grid-column: 1 / -1;
  }

  .sw-tt-cell--minmax {
    grid-column: 1;
  }

  .sw-tt-row > .sw-tt-cell--right {
    grid-column: 2;
    text-align: right !important;
  }

  .sw-tt-cell--pricing::before,
  .sw-tt-cell--qty::before,
  .sw-tt-cell--minmax::before,
  .sw-tt-row > .sw-tt-cell--right::before {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8290aa;
  }

  .sw-tt-cell--pricing::before {
    content: "Pricing";
  }
  .sw-tt-cell--qty::before {
    content: "Qty";
  }
  .sw-tt-cell--minmax::before {
    content: "Min / Max";
  }
  .sw-tt-row > .sw-tt-cell--right::before {
    content: "Row Total";
  }

  .sw-mini-tier {
    display: table !important;
    width: 100% !important;
    table-layout: fixed;
    border-collapse: collapse;
  }

  .sw-mini-tier thead {
    display: table-header-group !important;
  }

  .sw-mini-tier tbody {
    display: table-row-group !important;
  }

  .sw-mini-tier tr {
    display: table-row !important;
  }

  .sw-mini-tier th,
  .sw-mini-tier td {
    display: table-cell !important;
    padding: 9px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 14px;
  }

  .sw-mini-tier th {
    color: #8290aa;
    font-weight: 500;
    text-align: left;
  }

  .sw-mini-tier th:nth-child(2),
  .sw-mini-tier td:nth-child(2) {
    text-align: center;
  }

  .sw-mini-tier th:nth-child(3),
  .sw-mini-tier td:nth-child(3) {
    text-align: right;
    font-weight: 700;
  }

  .sw-mini-tier td::before,
  .sw-mini-tier td::after {
    content: none !important;
  }

  .sw-qty-wrap {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
  }

  .sw-qty-input {
    width: 56px;
    text-align: center;
  }

  .sw-row-total {
    font-size: 18px;
    font-weight: 700;
  }

  .sw-tt-summary tr {
    display: grid !important;
    grid-template-columns: 1fr auto;
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
  }

  .sw-tt-summary td {
    padding: 0 !important;
    border: 0 !important;
  }

  .sw-tt-summary-label {
    text-align: left !important;
    font-weight: 700;
  }

  .sw-tt-summary .sw-tt-cell--right {
    text-align: right !important;
    font-weight: 700;
  }
}

/* Dark styled ticket group selector */
.sw-group-select {
  width: 100%;
  margin-top: 8px;
  padding: 11px 38px 11px 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 10px;
  background-color: #0b0b10;
  color: #fff;
  font-size: 15px;
  line-height: 1.2;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #00c853 50%),
    linear-gradient(135deg, #00c853 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

.sw-group-select:focus {
  outline: none;
  border-color: #00c853;
  box-shadow: 0 0 0 2px rgba(0, 200, 83, 0.2);
}

label[for="sw_tg_sel"],
.sw-group-select {
  display: block;
}

label[for="sw_tg_sel"] {
  margin-bottom: 6px;
  font-size: 15px;
}

@media (max-width: 768px) {
  /* Cleaner summary rows */
  .sw-tt-summary tr {
    display: grid !important;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: start;
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.45);
  }

  .sw-tt-summary-label {
    text-align: left !important;
  }

  .sw-tt-summary .sw-tt-cell--right {
    text-align: right !important;
    white-space: nowrap;
  }

  .sw-vat-lines {
    margin-top: 6px;
    text-align: left;
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.72);
    font-weight: 400;
  }

  #sw-vat-row .sw-tt-summary-label {
    display: block;
  }

  #sw-vat-row .sw-vat-lines {
    display: block;
  }
}

.sw-vat-lines {
  display: none !important;
}

.stx-review-slider {
  max-width: 1100px;
  width: 100%;
  margin: 18px auto 24px;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.stx-review-slider::-webkit-scrollbar {
  display: none;
}
.stx-review-track {
  display: flex;
  width: max-content;
  gap: 14px;
  padding-right: 14px;
  /* NO animation */
}
.stx-review-slide {
  flex: 0 0 360px;
  max-width: 360px;
  max-height: 210px;
  overflow-y: auto;
  background: #111;
  color: #fff;
  border-radius: 14px;
  padding: 16px 18px;
  margin: 0;
}
.stx-review-stars {
  color: #ffd166;
  font-size: 14px;
  margin-bottom: 6px;
}
.stx-review-slide p {
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
}
.stx-review-slide cite {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  opacity: 0.75;
}
@media (max-width: 800px) {
  .stx-review-slide {
    flex: 0 0 82vw;
    max-width: 82vw;
  }
}