/*
 * Universe styling for the Ketch consent banner and Privacy Preference Center.
 * Copied from enterprise src/styles/ketch.css (https://github.com/uniiverse/enterprise/pull/1823),
 * with its colour variables written out and the logo pointed at web's own copy. Keep the copies in sync.
 *
 * The Ketch theme lives in Live Nation's Ketch account, which we can't edit, so
 * we override it from the page instead. Ketch renders every theme setting
 * through a CSS variable named after its config path (theme.modal.header.title.color
 * becomes --k-modal-header-title-color) and declares those variables on :root.
 */
#lanyard_root {
  /* Banner */
  --k-banner-container-cornerRadius: 8px;
  --k-banner-header-title-color: #1C232B;
  --k-banner-description-text-color: #1C232B;
  --k-banner-buttons-primary-background-color: #3A66E5;
  --k-banner-buttons-primary-text-color: white;
  --k-banner-buttons-primary-cornerRadius: 4px;
  --k-banner-buttons-secondary-background-color: #3A66E5;
  --k-banner-buttons-secondary-text-color: white;
  --k-banner-buttons-secondary-cornerRadius: 4px;
  --k-banner-buttons-tertiary-background-color: #3A66E5;
  --k-banner-buttons-tertiary-text-color: white;
  --k-banner-buttons-tertiary-cornerRadius: 4px;
  /* Privacy Preference Center modal */
  --k-modal-container-cornerRadius: 8px;
  --k-modal-header-background-color: white;
  --k-modal-header-title-color: #1C232B;
  --k-modal-header-returnButton-background-color: transparent;
  --k-modal-header-returnButton-icon-color: #1C232B;
  --k-modal-description-title-color: #1C232B;
  --k-modal-description-text-color: #1C232B;
  --k-modal-description-link-color: #1C232B;
  --k-modal-purposeListHeader-title-color: #1C232B;
  --k-modal-purposeListHeader-acceptAllButton-background-color: #3A66E5;
  --k-modal-purposeListHeader-acceptAllButton-text-color: white;
  --k-modal-purposeListHeader-acceptAllButton-cornerRadius: 4px;
  --k-modal-purposeListHeader-rejectAllButton-background-color: #3A66E5;
  --k-modal-purposeListHeader-rejectAllButton-text-color: white;
  --k-modal-purposeListHeader-rejectAllButton-cornerRadius: 4px;
  --k-modal-purposeList-purposeListItems-purposeFill-color: #F5F5F5;
  --k-modal-purposeList-purposeListItems-purposeContent-color: #1C232B;
  --k-modal-purposeList-purposeListItems-purposeLinks-color: #3A66E5;
  --k-modal-purposeList-purposeListItems-arrowIcon-color: #1C232B;
  --k-modal-purposeList-purposeListItems-purposeCornerRadius: 4px;
  --k-modal-purposeList-switchButtons-on-background-color: #3A66E5;
  --k-modal-footer-actionButton-background-color: #3A66E5;
  --k-modal-footer-actionButton-text-color: white;
  --k-modal-footer-actionButton-cornerRadius: 4px;
}

/*
 * Logo. The theme's logo slot is empty and only takes a URL set in the Ketch
 * app, so we draw it above the banner and modal titles. flex: 0 0 100% makes
 * the box full width so the title wraps below it, so the logo itself is sized
 * with background-size: 13px tall, with the width following the SVG's proportions.
 */
#lanyard_root #banner-title,
#lanyard_root #modal-title {
  flex-wrap: wrap;
}

#lanyard_root #banner-title::before,
#lanyard_root #modal-title::before {
  content: "";
  display: block;
  flex: 0 0 100%;
  height: 13px;
  margin-bottom: 8px;
  background: url(/assets/logo/brand-blue-19c27a9412161d6102c1503bde5bea39c99a048003366c78c5834407c85d1639.svg) no-repeat left center/auto 13px;
}

/*
 * Banner
 */
#lanyard_root #banner-title {
  line-height: 24px;
}

/*
 * Ketch sets the standard layout gap with its own
 * `#lanyard_root #ketch-banner-buttons-container-standard { gap: 8px !important }`,
 * injected after our CSS, so the extra #ketch-banner-content id and !important
 * are needed to override it. The compact (mobile) layout is already 12px.
 */
#lanyard_root #ketch-banner-content #ketch-banner-buttons-container-standard {
  gap: 12px !important;
}

/*
 * Privacy Preference Center.
 */
#lanyard_root #modal-title {
  font-size: 22px;
  line-height: 28px;
}

/* Ketch centres the modal header between 480px and 768px wide; this keeps it on the left at every width, including the submenus. */
#lanyard_root #ketch-modal div:has(> div > #modal-title) {
  align-items: flex-start;
}

/* Ketch puts 20px under the header and another 16px above the description; this leaves 16px in total. */
#lanyard_root #ketch-modal div[class*="--k-modal-header-background-color"] {
  padding-bottom: 16px;
}

#lanyard_root #ketch-modal div:has(> #modal-description-title) {
  margin-top: 0;
}

#lanyard_root #ketch-purposes-list-header-bulk-actions button {
  min-height: 40px;
  padding: 0 16px;
}

/*
 * Purpose rows have no id, so they're found by the class Ketch adds to each row
 * for its corner radius setting. The height goes on the row's first child, the
 * clickable header, so expanded rows can still grow below it.
 */
#lanyard_root #ketch-modal div:has(> div[class*="--k-modal-purposeList-purposeListItems-purposeCornerRadius"]) {
  gap: 16px;
}

#lanyard_root #ketch-modal div[class*="--k-modal-purposeList-purposeListItems-purposeCornerRadius"] > div:first-child {
  min-height: 72px;
}

/*
 * Footer. On small screens Ketch stacks "Powered by Ketch" under a full-width
 * Confirm button; these rules keep them on one row at every size. The Confirm
 * button is found by its theme class.
 */
#lanyard_root #ketch-modal div:has(> div > button[class*="--k-modal-footer-actionButton-background-color"]) {
  flex-direction: row;
  justify-content: space-between;
  gap: 16px;
}

#lanyard_root #ketch-modal div:has(> div > button[class*="--k-modal-footer-actionButton-background-color"]) > div {
  width: auto;
}

#lanyard_root #ketch-modal button[class*="--k-modal-footer-actionButton-background-color"] {
  flex: 0 0 auto;
  width: auto;
}