/* stylelint-disable no-descending-specificity -- responsive overrides intentionally redefine broader selectors */

/* Center profile content on all viewports (injected fragment has no body so theme body max-width/margin do not apply) */
.profile-html-root {
  text-align: center;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

.profile-html-root > main {
  max-width: 30rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  box-sizing: border-box;
}

/* At narrow viewports (e.g. 325px), constrain main to viewport so no horizontal scroll and card text stays visually centered */
@media (width <= 22rem) {
  .profile-html-root > main {
    max-width: 100%;
    width: 100%;
  }
}

/* Ensure media/product cards and their text are centered on all viewports */
.profile-html-root .media {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.profile-html-root .media .controls,
.profile-html-root .media .prod-info,
.profile-html-root .controls,
.profile-html-root .prod-info {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

.profile-html-root .image-display-name,
.profile-html-root .media .title,
.profile-html-root .media p,
.profile-html-root .controls p {
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#action-buttons-row {
  display: flex !important;
  flex-wrap: wrap !important;
}

#cta,
#share,
#show-qr {
  flex: 1 1 calc(33.33% - 0.34rem) !important;
  min-width: 8rem !important;
  max-width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 5rem !important;
  padding: 1rem 1.5rem !important;
  cursor: pointer !important;
  line-height: 0 !important;
  box-sizing: border-box !important;
}

#cta .icon,
#share .icon,
#show-qr .icon {
  margin-right: 0.5rem !important;
  width: 1.5rem !important;
  height: 1.5rem !important;
}

#cta p,
#share p,
#show-qr p {
  margin: 0 !important;
}

@media (width <= 22rem) {
  #cta,
  #share,
  #show-qr {
    flex: 1 1 100% !important;
    min-width: 100% !important;
  }
}

.actions {
  width: 100% !important;
  margin-top: 2rem !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}

.actions-c {
  width: 33.33% !important;
}

.action-btn {
  padding: 0.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.action-btn a {
  border-radius: 100% !important;
  padding: 1rem !important;
  line-height: 0 !important;
}

.action-btn p {
  margin: 0.5rem 0 0 !important;
  font-size: 0.9rem !important;
}

.sec-btn {
  padding: 1rem !important;
}

.p-ctrl {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}

.p-ctrl .seek-bar {
  width: 100% !important;
  height: 0.5rem !important;
  margin: 1.5rem 0 0.5rem !important;
  border-radius: 5rem !important;
  appearance: none !important;
  cursor: pointer !important;
}

.p-ctrl .play-pause {
  margin: 1rem 0 0.5rem !important;
  padding: 1rem !important;
  border-radius: 5rem !important;
  line-height: 0 !important;
  cursor: pointer !important;
}

.p-ctrl .current-time {
  margin: 0.5rem 0 !important;
  font-size: 0.9rem !important;
}

.p-ctrl .pause {
  display: none !important;
}

.p-ctrl .play {
  display: block !important;
}

/* Media controls for audio/video players - use .p-ctrl specifically */
.media-c .p-ctrl {
  padding: 1rem !important;
  font-size: 0.9rem !important;
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Document downloader controls - different structure */
.media-c .controls {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 1rem !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.media-c .controls .doc-dl {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  width: 100% !important;
  justify-content: center !important;
}

.media-c .controls .doc-dl--button-mode {
  flex-direction: column !important;
  gap: 0 !important;
}

/* Icon-only PDF download control (preview mode with cover) */
.media-c .controls .dl-btn:not(.document-download-btn) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.75rem !important;
  border-radius: 100% !important;
  cursor: pointer !important;
  line-height: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Download-button-only mode — match Save / Share / QR engagement pills */
.media-c .controls .doc-dl--button-mode .document-download-btn {
  display: inline-flex !important;
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 8rem !important;
  max-width: 100% !important;
  min-height: auto !important;
  height: auto !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 5rem !important;
  padding: 1rem 1.5rem !important;
  cursor: pointer !important;
  line-height: 0 !important;
  box-sizing: border-box !important;
  visibility: visible !important;
  opacity: 1 !important;
  text-decoration: none !important;
}

.media-c .controls .doc-dl--button-mode .document-download-btn__icon {
  margin-right: 0.5rem !important;
  width: 1.5rem !important;
  height: 1.5rem !important;
  font-size: 1.5rem !important;
  line-height: 1.5rem !important;
  flex-shrink: 0 !important;
}

.media-c .controls .doc-dl--button-mode .document-download-btn__label {
  margin: 0 !important;
  font-size: 1rem !important;
  line-height: 1.25 !important;
  white-space: pre-line !important;
  text-align: center !important;
}

body[data-button-style='filled'] .doc-dl--button-mode .document-download-btn,
.profile-html-document[data-button-style='filled'] .doc-dl--button-mode .document-download-btn {
  background-color: var(--profile-button-bg) !important;
  color: var(--profile-button-fg) !important;
}

body[data-button-style='outline'] .doc-dl--button-mode .document-download-btn,
.profile-html-document[data-button-style='outline'] .doc-dl--button-mode .document-download-btn {
  background-color: transparent !important;
  border: 2px solid var(--profile-button-bg) !important;
  color: var(--profile-button-fg) !important;
  box-sizing: border-box !important;
}

body[data-button-style='flat'] .doc-dl--button-mode .document-download-btn,
.profile-html-document[data-button-style='flat'] .doc-dl--button-mode .document-download-btn {
  background-color: transparent !important;
  border-color: transparent !important;
  color: var(--profile-button-fg) !important;
}

body[data-button-style='soft'] .doc-dl--button-mode .document-download-btn,
.profile-html-document[data-button-style='soft'] .doc-dl--button-mode .document-download-btn {
  border: 1px solid
    var(
      --profile-button-soft-border,
      color-mix(in srgb, var(--profile-button-bg) 35%, transparent)
    ) !important;
  background-color: var(
    --profile-button-soft-bg,
    color-mix(in srgb, var(--profile-button-bg) 15%, transparent)
  ) !important;
  color: var(--profile-button-fg) !important;
  box-sizing: border-box !important;
}

/* SafeImageOrSvgIframe scoped CSS is in async chunks that don't load on the
   deployed profile page (which uses v-html, not the Vue component). Duplicate
   the critical rules here so the grid layout works without the scoped chunk. */
.safe-image-root {
  display: contents !important;
}

.profile-html-root .safe-svg-wrapper {
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  max-width: 100% !important;
  min-width: 0 !important;
  background: transparent !important;
}

/* PreviewFeatured.vue scoped CSS for embedded video/audio (YouTube, Vimeo, etc.)
   is not loaded on deployed profiles. The theme covers positioning but not overflow. */
.profile-html-root .embedded {
  overflow: hidden !important;
}

.profile-html-root .embedded iframe {
  border: none !important;
}

/* CLS: reserve stable geometry for embeds that ship without explicit dimensions */
.profile-html-root iframe.profile-embed-frame {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 12rem !important;
  border: 0 !important;
}

/* CLS: reserve stable geometry for videos without intrinsic width/height hints */
.profile-html-root video.profile-embed-video {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
}

.profile-html-root .safe-svg-wrapper iframe {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  display: block !important;
  vertical-align: top !important;
  background: transparent !important;
  overflow: hidden !important;
}

.media-c {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-evenly !important;
  align-items: center !important;
}

/* Fix header/image layout when header is converted to div */
div[style*="display: flex"][style*="flex-direction: column"] {
  display: flex !important;
  justify-content: flex-start !important;
  flex-direction: column !important;
  position: relative !important;
  z-index: 0 !important;
}

/* Ensure main stacks above header/cover - theme CSS may load late when HTML is injected via v-html */
main {
  position: relative !important;
  z-index: 1 !important;
}

.header-img-c {
  display: grid !important;
  grid-template-columns: auto !important;
  grid-template-rows: auto !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 0 !important;
}

/* CLS: stable logo margins (bundled HTML varied margin by photo/cover presence) */
.profile-html-root .header-img-c img#logo {
  margin: 3rem 0 6rem !important;
}

.profile-html-root .header-img-c div#logo.safe-svg-wrapper {
  margin: 3rem 0 6rem !important;
}

/* Keep footer wordmark consistent with preview sizing. */
.profile-html-root footer img[src*='brand-wordmark-social-footer'] {
  height: 36px !important;
  width: auto !important;
  max-width: 216px !important;
  object-fit: contain !important;
}

#cover {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  height: 20rem !important;
  object-position: top center !important;
  object-fit: cover !important;
  position: relative !important;
  z-index: 0 !important;
}

#logo {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 6rem !important;
  object-fit: contain !important;
  pointer-events: none !important;
  user-select: none !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  place-self: center center !important;
  position: relative !important;
  z-index: 2 !important;
}

.header-img-c div#logo {
  width: 6rem !important;
  height: 6rem !important;
  overflow: hidden !important;
  background: transparent !important;
}

#logo.logo-shape-circle {
  border-radius: 50% !important;
  overflow: hidden !important;
  object-fit: cover !important;
}

#logo.logo-shape-square {
  border-radius: 0 !important;
  overflow: hidden !important;
  object-fit: cover !important;
}

#logo.logo-shape-rectangle {
  border-radius: 0 !important;
  overflow: hidden !important;
  object-fit: cover !important;
  height: 4rem !important;
  width: 6rem !important;
  aspect-ratio: 3 / 2 !important;
}

#top-actions {
  flex-direction: row-reverse !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  position: relative !important;
  z-index: 3 !important;
}

#top-actions > div {
  display: flex !important;
}

#top-actions a {
  padding: 1rem !important;
  cursor: pointer !important;
  line-height: 0 !important;
}

#profile-photo {
  width: 10rem !important;
  height: 10rem !important;
  border-radius: 100% !important;
  box-sizing: content-box !important;
  pointer-events: none !important;
  user-select: none !important;
  margin-top: -6rem !important;
  position: relative !important;
  z-index: 10 !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* Respect photo crop shape classes */
#profile-photo.photo-shape-circle {
  border-radius: 50% !important;
}

#profile-photo.photo-shape-square {
  border-radius: 0 !important;
}

#profile-photo.photo-shape-rectangle {
  border-radius: 0 !important;
  height: 6.67rem !important;
  aspect-ratio: 3 / 2 !important;
}