/* Coxy Events V5.110 - readable 85% glass surfaces + calm media loading. */
:root {
  --coxy-white-40: rgba(255, 255, 255, 0.40);
  --coxy-white-52: rgba(255, 255, 255, 0.52);
  --coxy-white-62: rgba(255, 255, 255, 0.62);
  --card-bg: var(--coxy-white-40);
  --button-bg: var(--coxy-white-40);
  --button-bg-hover: var(--coxy-white-62);
}

/* Top role navigation: Organizer / Participant / Gallery. */
.main-tab,
.main-tab:hover,
.main-tab.active,
.nav-tab-group.is-open > .main-tab {
  background: var(--coxy-white-40) !important;
  border-color: rgba(255,255,255,.48) !important;
}
.main-tab:hover,
.main-tab.active,
.nav-tab-group.is-open > .main-tab {
  background: var(--coxy-white-52) !important;
}

/* Back / Home / Universities / Tutorials and normal Coxy buttons. */
.nav-history-button,
.btn,
.btn.secondary,
.btn.ghost,
.btn.danger {
  background: var(--coxy-white-40) !important;
}
.nav-history-button:hover,
.nav-history-button:focus-visible,
.btn:hover,
.btn.secondary:hover,
.btn.ghost:hover,
.btn.danger:hover {
  background: var(--coxy-white-62) !important;
}

/* Shared white cards, dropdowns, dialogs, tables and application panels. */
.site-header,
.card,
.card.soft,
.stat,
.submenu,
.category-card,
.table-wrap,
.table,
.app-message-dialog,
.coxy-security-option,
.coxy-welcome-copy,
.coxy-legal-footer,
.legal-shell,
.commerce-notify-panel,
.commerce-card,
.commerce-market-card,
.commerce-search-result,
.commerce-guide-card,
.commerce-guide-step,
.commerce-step-block,
.commerce-offer span,
.commerce-modal,
.coxy-direct-wallet-dialog,
.shop-toolbar,
.shop-category-button,
.shop-product-card,
.shop-cart-qty button,
.shop-payment-choice,
.shop-payment-instructions code,
.dashboard-market-section,
.shop-payout-settings,
.shop-payment-hint,
.shop-order-card,
.provider-status-card,
.shop-cart-button strong,
dialog:not(.commerce-ad-card) {
  background: var(--coxy-white-40) !important;
}

/* Common generic shells from role/gallery/add-on pages. */
.panel,
.toolbar,
.menu-panel,
.dropdown-panel,
.modal-body,
.form-card,
.info-card,
.feature-card,
.event-card,
.participant-card,
.organizer-card,
.gallery-card {
  background: var(--coxy-white-40) !important;
}

/* Hover/selected state remains translucent instead of jumping to opaque white. */
.submenu a:hover,
.submenu a.active,
.sidebar a:hover,
.sidebar a.active,
.shop-category-button.is-active,
.shop-payment-choice:has(input:checked) {
  background: var(--coxy-white-62) !important;
}

/* Neutral input surfaces that would otherwise paint opaque white in browser defaults. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select,
textarea {
  background-color: rgba(255,255,255,.24) !important;
}

/* Image/media wrappers must not flash solid white while media arrives. */
.event-browser-media,
.shop-product-image,
.shop-no-image,
.shop-seller-product-image,
figure,
picture {
  background-color: transparent !important;
}

/* Every site image uses the same compact radius. */
img {
  border-radius: 4px !important;
  background-color: transparent !important;
  vertical-align: middle;
}

/* Global image reveal. V5.69 advert images keep their dedicated cross-fade. */
html.coxy-image-reveal-enabled img:not(.commerce-ad-image) {
  opacity: 0;
  transition: opacity .38s ease;
}
html.coxy-image-reveal-enabled img:not(.commerce-ad-image)[data-coxy-image-ready="1"] {
  opacity: 1;
}
html.coxy-image-reveal-enabled img:not(.commerce-ad-image)[data-coxy-image-error="1"] {
  opacity: 0;
}

/* Avoid opaque fallback in the public event image itself. */
.event-browser-card img {
  background: transparent !important;
  border-radius: 4px !important;
}

@media (prefers-reduced-motion: reduce) {
  html.coxy-image-reveal-enabled img:not(.commerce-ad-image) {
    transition: none !important;
  }
}

/* V5.72 - keep public event names compact. Scoped to /event pages via
   the existing html[data-event] marker so other site H1 headings are untouched. */
html[data-event] .event-hero h1 {
  font-size: 16px !important;
  line-height: 1.25 !important;
}

/* V5.75 - smooth the left/right header gutters.
   The stats bar used full-width top/bottom borders, which left visible line
   segments in the empty gradient space outside the centered stats content.
   Remove those outer borders while retaining separators between statistics. */
.site-header .global-stats-bar {
  border-top: 0 !important;
  border-bottom: 0 !important;
}
.site-header .global-stats-list {
  border-left: 0 !important;
  border-right: 0 !important;
}

/* V5.110 - use readable 85% glass on buttons and the common application surfaces. */
.nav-history-button,
.btn,
.btn.secondary,
.btn.ghost,
.btn.danger {
  background: rgba(250, 251, 249, 0.85) !important;
  margin-bottom: 5px;
}

.panel,
.toolbar,
.menu-panel,
.dropdown-panel,
.modal-body,
.form-card,
.info-card,
.feature-card,
.event-card,
.participant-card,
.organizer-card,
.gallery-card {
  background: rgba(250, 251, 249, 0.85) !important;
}

.site-header,
.card,
.card.soft,
.stat,
.submenu,
.category-card,
.table-wrap,
.table,
.app-message-dialog,
.coxy-security-option,
.coxy-welcome-copy,
.coxy-legal-footer,
.legal-shell,
.commerce-notify-panel,
.commerce-card,
.commerce-market-card,
.commerce-search-result,
.commerce-guide-card,
.commerce-guide-step,
.commerce-step-block,
.commerce-offer span,
.commerce-modal,
.coxy-direct-wallet-dialog,
.shop-toolbar,
.shop-category-button,
.shop-product-card,
.shop-cart-qty button,
.shop-payment-choice,
.shop-payment-instructions code,
.dashboard-market-section,
.shop-payout-settings,
.shop-payment-hint,
.shop-order-card,
.provider-status-card,
.shop-cart-button strong,
dialog:not(.commerce-ad-card) {
  background: rgba(250, 251, 249, 0.85) !important;
}

/* ========================================================================
   Coxy Events V5.111 - compact professional Organizer dialogs.
   Final Organizer-page overrides live in glass-ui.css so the globally
   versioned stylesheet wins over older organizer/add-on dialog CSS caches.
   The V5.110 85% glass background is intentionally retained.
   ======================================================================== */

/* Keep every normal Organizer dialog content-sized instead of viewport-sized. */
html body[data-admin-theme] dialog:not(.commerce-ad-card),
html body[data-admin-theme] dialog.modal {
  width: min(900px, calc(100% - 20px)) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 84vh !important;
  margin: auto !important;
  padding: 0 !important;
  overflow: auto !important;
  border-radius: 12px !important;
  background: rgba(250, 251, 249, 0.85) !important;
}

html body[data-admin-theme] dialog.modal.small-modal,
html body[data-admin-theme] #gateDialog {
  width: min(520px, calc(100% - 20px)) !important;
}

html body[data-admin-theme] #enquiryDialog {
  width: min(740px, calc(100% - 20px)) !important;
}

html body[data-admin-theme] #paymentDialog {
  width: min(1040px, calc(100% - 20px)) !important;
}

html body[data-admin-theme] dialog.organizer-added-attendees-dialog {
  width: min(820px, calc(100% - 20px)) !important;
}

/* The body is compact and keeps exactly the V5.110 readable glass surface. */
html body[data-admin-theme] dialog .modal-body,
html body[data-admin-theme] dialog:not(.commerce-ad-card) .modal-body {
  min-height: 0 !important;
  height: auto !important;
  padding: 10px 12px 12px !important;
  background: rgba(250, 251, 249, 0.85) !important;
}

/* Dialog titles are deliberately small so event names do not dominate the UI. */
html body[data-admin-theme] dialog:not(.commerce-ad-card) h1,
html body[data-admin-theme] dialog:not(.commerce-ad-card) h2,
html body[data-admin-theme] dialog:not(.commerce-ad-card) h3,
html body[data-admin-theme] dialog.modal h1,
html body[data-admin-theme] dialog.modal h2,
html body[data-admin-theme] dialog.modal h3 {
  margin: 0 0 5px !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
}

html body[data-admin-theme] dialog:not(.commerce-ad-card) .eyebrow,
html body[data-admin-theme] dialog.modal .eyebrow {
  margin: 0 0 2px !important;
  font-size: 10px !important;
  line-height: 1.15 !important;
}

html body[data-admin-theme] dialog:not(.commerce-ad-card) p,
html body[data-admin-theme] dialog:not(.commerce-ad-card) .muted,
html body[data-admin-theme] dialog:not(.commerce-ad-card) .help {
  margin-top: 2px !important;
  margin-bottom: 5px !important;
  font-size: 12px !important;
  line-height: 1.28 !important;
}

/* Remove the large generic form/grid spacing inside modal forms only. */
html body[data-admin-theme] dialog:not(.commerce-ad-card) form.stack,
html body[data-admin-theme] dialog:not(.commerce-ad-card) form.grid,
html body[data-admin-theme] dialog:not(.commerce-ad-card) .stack,
html body[data-admin-theme] dialog:not(.commerce-ad-card) .grid,
html body[data-admin-theme] dialog:not(.commerce-ad-card) .grid-2 {
  gap: 6px 8px !important;
}

html body[data-admin-theme] dialog:not(.commerce-ad-card) .label {
  gap: 2px !important;
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

html body[data-admin-theme] dialog:not(.commerce-ad-card) .input,
html body[data-admin-theme] dialog:not(.commerce-ad-card) .select,
html body[data-admin-theme] dialog:not(.commerce-ad-card) input.input,
html body[data-admin-theme] dialog:not(.commerce-ad-card) select.select,
html body[data-admin-theme] dialog:not(.commerce-ad-card) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html body[data-admin-theme] dialog:not(.commerce-ad-card) select {
  min-height: 36px !important;
  height: auto !important;
  padding: 6px 8px !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
}

html body[data-admin-theme] dialog:not(.commerce-ad-card) input[type="file"] {
  min-height: 36px !important;
  padding: 5px 7px !important;
}

html body[data-admin-theme] dialog:not(.commerce-ad-card) textarea,
html body[data-admin-theme] dialog:not(.commerce-ad-card) textarea.input,
html body[data-admin-theme] dialog:not(.commerce-ad-card) .textarea {
  min-height: 68px !important;
  height: auto !important;
  padding: 6px 8px !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
}

html body[data-admin-theme] dialog:not(.commerce-ad-card) .notice {
  margin: 5px 0 !important;
  padding: 7px 9px !important;
  border-radius: 9px !important;
  line-height: 1.25 !important;
}

html body[data-admin-theme] dialog:not(.commerce-ad-card) .modal-body > section {
  margin-top: 6px !important;
  margin-bottom: 0 !important;
}

html body[data-admin-theme] dialog:not(.commerce-ad-card) .modal-body > section + section {
  margin-top: 7px !important;
}

/* Empty states must never create a large blank modal canvas. */
html body[data-admin-theme] dialog:not(.commerce-ad-card) .empty,
html body[data-admin-theme] dialog:not(.commerce-ad-card) [class*="empty"] {
  min-height: 0 !important;
  margin: 5px 0 !important;
  padding: 12px !important;
}

/* Center the heading action (Back/Close) under injected addon titles. */
html body[data-admin-theme] dialog:not(.commerce-ad-card) .modal-body > .spread:first-child {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  margin: 0 0 6px !important;
  text-align: center !important;
}

html body[data-admin-theme] dialog:not(.commerce-ad-card) .modal-body > .spread:first-child > div {
  width: 100% !important;
  min-width: 0 !important;
}

/* Center all ordinary action rows without moving the dedicated corner X. */
html body[data-admin-theme] dialog:not(.commerce-ad-card) .row:has(.btn),
html body[data-admin-theme] dialog:not(.commerce-ad-card) .spread:has(.btn),
html body[data-admin-theme] dialog:not(.commerce-ad-card) .modal-actions,
html body[data-admin-theme] dialog:not(.commerce-ad-card) .dialog-actions,
html body[data-admin-theme] dialog:not(.commerce-ad-card) .form-actions,
html body[data-admin-theme] dialog:not(.commerce-ad-card) .commerce-actions {
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
}

html body[data-admin-theme] dialog:not(.commerce-ad-card) .btn:not(.modal-close) {
  min-height: 32px !important;
  height: auto !important;
  padding: 6px 10px !important;
  margin-bottom: 3px !important;
  font-size: 12px !important;
}

html body[data-admin-theme] dialog:not(.commerce-ad-card) form > .btn,
html body[data-admin-theme] dialog:not(.commerce-ad-card) form.stack > .btn,
html body[data-admin-theme] dialog:not(.commerce-ad-card) form.grid > .btn {
  align-self: center !important;
  justify-self: center !important;
  width: auto !important;
  min-width: 132px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html body[data-admin-theme] dialog:not(.commerce-ad-card) .modal-close {
  right: 8px !important;
  top: 7px !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 18px !important;
  line-height: 28px !important;
}

/* Event Attendees addon. */
html body[data-admin-theme] dialog.organizer-added-attendees-dialog .oga-editor {
  margin: 5px 0 7px !important;
  padding: 7px 8px !important;
  border-radius: 9px !important;
}

html body[data-admin-theme] dialog.organizer-added-attendees-dialog .oga-list-section {
  margin-top: 5px !important;
}

html body[data-admin-theme] dialog.organizer-added-attendees-dialog .oga-list-section > .spread {
  margin-bottom: 4px !important;
}

html body[data-admin-theme] dialog.organizer-added-attendees-dialog .oga-row {
  gap: 7px !important;
  padding: 6px 0 !important;
}

html body[data-admin-theme] dialog.organizer-added-attendees-dialog .oga-current-photo {
  gap: 6px !important;
  padding: 6px !important;
}

/* Gatekeeper dialog. */
html body[data-admin-theme] #gateDialog .modal-body {
  padding: 10px 12px !important;
}

html body[data-admin-theme] #gateDialog #gateForm {
  gap: 6px !important;
}

html body[data-admin-theme] #gateDialog h2 {
  text-align: center !important;
}

/* Enquiries: keep a no-enquiry result short instead of filling the screen. */
html body[data-admin-theme] #enquiryDialog #enquiryList,
html body[data-admin-theme] #enquiryDialog #enquiryList .empty {
  min-height: 0 !important;
  height: auto !important;
}

html body[data-admin-theme] #enquiryDialog #enquiryList .empty {
  padding: 14px 10px !important;
}

/* RSVP/check-in list: compact the shell but preserve table readability. */
html body[data-admin-theme] #paymentDialog .participant-list-summary {
  margin: 5px 0 7px !important;
}

html body[data-admin-theme] #paymentDialog .participant-roster-section {
  margin-top: 7px !important;
}

html body[data-admin-theme] #paymentDialog .participant-roster-section + .participant-roster-section {
  margin-top: 7px !important;
  padding-top: 7px !important;
}

/* Event Photos and Participant public-post moderation may use addon-specific
   dialog classes. These generic rules remove their fixed/large blank area. */
html body[data-admin-theme] dialog:not(.commerce-ad-card) > .panel,
html body[data-admin-theme] dialog:not(.commerce-ad-card) > .card,
html body[data-admin-theme] dialog:not(.commerce-ad-card) > .form-card,
html body[data-admin-theme] dialog:not(.commerce-ad-card) > .info-card {
  min-height: 0 !important;
  height: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

html body[data-admin-theme] dialog:not(.commerce-ad-card) .toolbar,
html body[data-admin-theme] dialog:not(.commerce-ad-card) [class*="toolbar"] {
  gap: 6px !important;
  margin-top: 5px !important;
  margin-bottom: 5px !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

@media (max-width: 700px) {
  html body[data-admin-theme] dialog:not(.commerce-ad-card),
  html body[data-admin-theme] dialog.modal,
  html body[data-admin-theme] #gateDialog,
  html body[data-admin-theme] #enquiryDialog,
  html body[data-admin-theme] #paymentDialog,
  html body[data-admin-theme] dialog.organizer-added-attendees-dialog {
    width: calc(100% - 12px) !important;
    max-height: 90vh !important;
    border-radius: 10px !important;
  }

  html body[data-admin-theme] dialog:not(.commerce-ad-card) .modal-body {
    padding: 8px 9px 10px !important;
  }

  html body[data-admin-theme] dialog:not(.commerce-ad-card) .grid-2 {
    grid-template-columns: 1fr !important;
  }
}