/* ======================================================================
   LINK NA BIO PRO - FIRST CARD COVER 1.3.0
   Objetivo: capa SOMENTE no primeiro card; fundo da pagina no restante.
   Mobile-first, sem alterar os arquivos do Link na Bio Pro principal.
   ====================================================================== */

html.lbpfcc-ready,
body.lbpfcc-ready {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

body.lbpfcc-ready,
body.lbpfcc-ready * {
  box-sizing: border-box !important;
}

body.lbpfcc-ready img,
body.lbpfcc-ready video,
body.lbpfcc-ready iframe,
body.lbpfcc-ready svg,
body.lbpfcc-ready canvas {
  max-width: 100% !important;
}

/* ----------------------------------------------------------------------
   PRIMEIRO CARD: esta e a unica area que recebe a foto de capa.
   ---------------------------------------------------------------------- */
body.lbpfcc-ready .lbpfcc-profile-card {
  --lbpfcc-radius: 32px;
  --lbpfcc-border: rgba(73, 128, 194, .62);

  position: relative !important;
  isolation: isolate !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;

  width: min(94vw, 1360px) !important;
  max-width: min(94vw, 1360px) !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;

  margin: 14px auto 24px !important;
  padding: clamp(32px, 4vw, 56px) clamp(24px, 4vw, 54px) clamp(30px, 3.5vw, 48px) !important;

  border: 1px solid var(--lbpfcc-border) !important;
  border-radius: var(--lbpfcc-radius) !important;
  overflow: hidden !important;
  background: #090909 !important;
  background-image: none !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .28) !important;
}

/* A imagem e o overlay existem DENTRO do primeiro card. */
body.lbpfcc-ready .lbpfcc-cover-layer,
body.lbpfcc-ready .lbpfcc-overlay-layer {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
}

body.lbpfcc-ready .lbpfcc-cover-layer {
  z-index: -3 !important;
  overflow: hidden !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

body.lbpfcc-ready .lbpfcc-cover-layer img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center 45% !important;
}

body.lbpfcc-ready .lbpfcc-overlay-layer {
  z-index: -2 !important;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.22) 0%,
    rgba(0,0,0,.34) 30%,
    rgba(0,0,0,.56) 58%,
    rgba(0,0,0,.82) 100%
  ) !important;
}

/* Todo conteudo real fica acima da capa. */
body.lbpfcc-ready .lbpfcc-profile-card > :not(.lbpfcc-cover-layer):not(.lbpfcc-overlay-layer) {
  position: relative !important;
  z-index: 2 !important;
}

/* Neutraliza fundos internos que faziam parecer um segundo card preto. */
body.lbpfcc-ready .lbpfcc-content-shell {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.lbpfcc-ready .lbpfcc-content-shell::before,
body.lbpfcc-ready .lbpfcc-content-shell::after {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Avatar sempre 100% dentro do primeiro card. */
body.lbpfcc-ready .lbpfcc-avatar-wrap {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  z-index: 5 !important;

  flex: 0 0 auto !important;
  width: clamp(164px, 22vw, 340px) !important;
  height: clamp(164px, 22vw, 340px) !important;
  max-width: 340px !important;
  max-height: 340px !important;
  margin: 0 auto clamp(18px, 2vw, 28px) !important;
  padding: 0 !important;

  overflow: hidden !important;
  border-radius: 50% !important;
  background: rgba(0,0,0,.28) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.25) !important;
}

body.lbpfcc-ready .lbpfcc-avatar-img {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

body.lbpfcc-ready .lbpfcc-title {
  display: block !important;
  width: 100% !important;
  max-width: 1220px !important;
  min-width: 0 !important;
  margin: 0 auto 12px !important;
  padding: 0 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  text-wrap: balance !important;
  font-size: clamp(36px, 4.2vw, 64px) !important;
  line-height: .98 !important;
  letter-spacing: -.024em !important;
}

body.lbpfcc-ready .lbpfcc-bio {
  width: 100% !important;
  max-width: 1050px !important;
  min-width: 0 !important;
  margin: 0 auto 18px !important;
  padding: 0 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  font-size: clamp(18px, 1.7vw, 28px) !important;
  line-height: 1.28 !important;
}

body.lbpfcc-ready .lbpfcc-pill-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px 10px !important;
  width: 100% !important;
  max-width: 1120px !important;
  min-width: 0 !important;
  margin: 0 auto 20px !important;
  padding: 0 !important;
}

body.lbpfcc-ready .lbpfcc-pill {
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 8px 15px !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  text-align: center !important;
  line-height: 1.15 !important;
  font-size: clamp(13px, 1.05vw, 17px) !important;
}

/* CTA, se ele realmente fizer parte do primeiro card. */
body.lbpfcc-ready .lbpfcc-cta {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 1250px !important;
  min-width: 0 !important;
  min-height: 82px !important;
  margin: 0 auto !important;
  padding: 17px 22px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  white-space: normal !important;
}

body.lbpfcc-ready .lbpfcc-cta * {
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
}

/* ----------------------------------------------------------------------
   DEPOIS DO PRIMEIRO CARD
   A capa NAO pode vazar para esses elementos.
   O background normal existente do site permanece intacto.
   ---------------------------------------------------------------------- */
body.lbpfcc-ready .lbpfcc-page-after-profile,
body.lbpfcc-ready .lbpfcc-page-after-profile::before,
body.lbpfcc-ready .lbpfcc-page-after-profile::after {
  background-image: none !important;
}

/* Nao pintamos o restante de preto. Apenas evitamos herdar a foto de capa. */
body.lbpfcc-ready .lbpfcc-no-cover-bg {
  background-image: none !important;
}

/* Capa original desaparece so depois da copia estar pronta. */
body.lbpfcc-ready .lbpfcc-source-cover.lbpfcc-hide-source {
  display: none !important;
}

/* ----------------------------------------------------------------------
   MOBILE: prioridade absoluta.
   ---------------------------------------------------------------------- */
@media (max-width: 767px) {
  body.lbpfcc-ready .lbpfcc-profile-card {
    --lbpfcc-radius: 25px;
    width: calc(100% - 12px) !important;
    max-width: calc(100% - 12px) !important;
    min-height: 0 !important;
    margin: 6px auto 18px !important;
    padding:
      max(22px, env(safe-area-inset-top))
      max(15px, env(safe-area-inset-right))
      20px
      max(15px, env(safe-area-inset-left)) !important;
    border-radius: var(--lbpfcc-radius) !important;
  }

  body.lbpfcc-ready .lbpfcc-cover-layer img {
    object-position: center 43% !important;
  }

  body.lbpfcc-ready .lbpfcc-overlay-layer {
    background: linear-gradient(
      180deg,
      rgba(0,0,0,.20) 0%,
      rgba(0,0,0,.38) 28%,
      rgba(0,0,0,.68) 60%,
      rgba(0,0,0,.90) 100%
    ) !important;
  }

  body.lbpfcc-ready .lbpfcc-avatar-wrap {
    width: clamp(118px, 38vw, 154px) !important;
    height: clamp(118px, 38vw, 154px) !important;
    max-width: 154px !important;
    max-height: 154px !important;
    margin: 2px auto 17px !important;
  }

  body.lbpfcc-ready .lbpfcc-title,
  body.lbpfcc-ready h1.lbpfcc-title,
  body.lbpfcc-ready h2.lbpfcc-title,
  body.lbpfcc-ready h3.lbpfcc-title {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 11px !important;
    font-size: clamp(27px, 7.5vw, 36px) !important;
    line-height: 1.00 !important;
    letter-spacing: -.018em !important;
  }

  body.lbpfcc-ready .lbpfcc-title.lbpfcc-title-long {
    font-size: clamp(25px, 6.9vw, 33px) !important;
  }

  body.lbpfcc-ready .lbpfcc-bio {
    margin-bottom: 16px !important;
    font-size: clamp(16px, 4.6vw, 20px) !important;
    line-height: 1.34 !important;
  }

  body.lbpfcc-ready .lbpfcc-pill-row {
    gap: 7px !important;
    margin-bottom: 17px !important;
  }

  body.lbpfcc-ready .lbpfcc-pill {
    max-width: 100% !important;
    padding: 7px 11px !important;
    font-size: clamp(12px, 3.45vw, 14px) !important;
    line-height: 1.18 !important;
  }

  body.lbpfcc-ready .lbpfcc-cta {
    min-height: 0 !important;
    padding: 14px 16px !important;
    border-radius: 20px !important;
  }
}

/* Celulares muito estreitos. */
@media (max-width: 390px) {
  body.lbpfcc-ready .lbpfcc-profile-card {
    width: calc(100% - 8px) !important;
    max-width: calc(100% - 8px) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body.lbpfcc-ready .lbpfcc-title,
  body.lbpfcc-ready .lbpfcc-title.lbpfcc-title-long {
    font-size: clamp(24px, 7.1vw, 30px) !important;
  }

  body.lbpfcc-ready .lbpfcc-pill {
    font-size: 12px !important;
  }
}

/* Tablet. */
@media (min-width: 768px) and (max-width: 1100px) {
  body.lbpfcc-ready .lbpfcc-profile-card {
    width: calc(100% - 28px) !important;
    max-width: calc(100% - 28px) !important;
    padding: 34px 30px 32px !important;
  }

  body.lbpfcc-ready .lbpfcc-title {
    font-size: clamp(34px, 5.2vw, 50px) !important;
  }
}

/* ======================================================================
   1.4.0 — AVATAR CROP PRO + PREMIUM RING
   O crop e feito no render, sem alterar o arquivo original da foto.
   Variaveis sao injetadas pelo PHP a partir da tela Ajustes > Avatar Crop Pro.
   ====================================================================== */
body.lbpfcc-ready .lbpfcc-avatar-wrap {
  width: var(--lbpfcc-avatar-desktop-size, 340px) !important;
  height: var(--lbpfcc-avatar-desktop-size, 340px) !important;
  max-width: var(--lbpfcc-avatar-desktop-size, 340px) !important;
  max-height: var(--lbpfcc-avatar-desktop-size, 340px) !important;
  border: 0 !important;
  outline: 0 !important;
  background: #0a0a0a !important;
  overflow: hidden !important;
  isolation: isolate !important;
  box-shadow:
    0 18px 46px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.08) !important;
}

/* Anel externo. Fallback solido + gradiente nos navegadores modernos. */
body.lbpfcc-ready .lbpfcc-avatar-wrap::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 30 !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  border: var(--lbpfcc-avatar-border-width, 4px) solid var(--lbpfcc-avatar-border-fallback, #d7ad55) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.30),
    inset 0 0 0 calc(var(--lbpfcc-avatar-border-width, 4px) + 2px) rgba(0,0,0,.20) !important;
}

@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  body.lbpfcc-ready .lbpfcc-avatar-wrap::after {
    border: 0 !important;
    padding: var(--lbpfcc-avatar-border-width, 4px) !important;
    background: var(--lbpfcc-avatar-border-gradient, linear-gradient(135deg,#f5dc9a,#9c6b1f,#fff1bd,#7b4f12,#e0b964)) border-box !important;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    box-shadow: none !important;
  }
}

/* Crop real: cover + zoom + ponto focal. */
body.lbpfcc-ready .lbpfcc-avatar-img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position:
    var(--lbpfcc-avatar-pos-x, 50%)
    var(--lbpfcc-avatar-pos-y, 28%) !important;
  transform:
    scale(var(--lbpfcc-avatar-zoom, 1.28)) !important;
  transform-origin:
    var(--lbpfcc-avatar-pos-x, 50%)
    var(--lbpfcc-avatar-pos-y, 28%) !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
}

/* Mantem o anel na frente da imagem, inclusive com zoom alto. */
body.lbpfcc-ready .lbpfcc-avatar-wrap > *:not(.lbpfcc-avatar-img) {
  position: relative;
}

@media (max-width: 767px) {
  body.lbpfcc-ready .lbpfcc-avatar-wrap {
    width: min(var(--lbpfcc-avatar-mobile-size, 154px), 46vw) !important;
    height: min(var(--lbpfcc-avatar-mobile-size, 154px), 46vw) !important;
    max-width: min(var(--lbpfcc-avatar-mobile-size, 154px), 46vw) !important;
    max-height: min(var(--lbpfcc-avatar-mobile-size, 154px), 46vw) !important;
    box-shadow:
      0 13px 32px rgba(0,0,0,.46),
      0 0 0 1px rgba(255,255,255,.08) !important;
  }
}

/* ======================================================================
   1.5.0 — LAYOUT TADEU / CORRECAO DE CORTE
   Capa no topo, avatar sobre a divisao e informacoes no painel inferior.
   Estas regras substituem com seguranca os limites excessivos da 1.4.0.
   ====================================================================== */
body.lbpfcc-ready .lbpfcc-profile-card {
  --lbpfcc-cover-height: clamp(340px, 58vw, 600px);
  --lbpfcc-safe-inline: clamp(16px, 4vw, 32px);

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: min(calc(100% - 24px), 820px) !important;
  max-width: 820px !important;
  min-width: 0 !important;
  margin: 12px auto 24px !important;
  padding:
    var(--lbpfcc-cover-height)
    var(--lbpfcc-safe-inline)
    30px !important;
  border-radius: 28px !important;
  background: #080808 !important;
  overflow: hidden !important;
}

body.lbpfcc-ready .lbpfcc-cover-layer,
body.lbpfcc-ready .lbpfcc-overlay-layer {
  inset: 0 0 auto 0 !important;
  width: 100% !important;
  height: var(--lbpfcc-cover-height) !important;
  min-height: 0 !important;
  border-radius: 27px 27px 0 0 !important;
}

body.lbpfcc-ready .lbpfcc-cover-layer img {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

body.lbpfcc-ready .lbpfcc-overlay-layer {
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.04) 0%,
    rgba(0,0,0,.08) 58%,
    rgba(0,0,0,.32) 100%
  ) !important;
}

body.lbpfcc-ready .lbpfcc-content-shell {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

body.lbpfcc-ready .lbpfcc-profile-card *,
body.lbpfcc-ready .lbpfcc-content-shell * {
  min-width: 0 !important;
  max-width: 100% !important;
}

body.lbpfcc-ready .lbpfcc-avatar-wrap {
  width: var(--lbpfcc-avatar-desktop-size, 144px) !important;
  height: var(--lbpfcc-avatar-desktop-size, 144px) !important;
  max-width: 180px !important;
  max-height: 180px !important;
  margin:
    var(--lbpfcc-avatar-desktop-offset, -72px)
    auto
    18px !important;
  flex: 0 0 auto !important;
}

body.lbpfcc-ready .lbpfcc-title,
body.lbpfcc-ready h1.lbpfcc-title,
body.lbpfcc-ready h2.lbpfcc-title,
body.lbpfcc-ready h3.lbpfcc-title,
body.lbpfcc-ready .lbpfcc-title.lbpfcc-title-long {
  width: 100% !important;
  max-width: 720px !important;
  margin: 0 auto 10px !important;
  padding: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  text-align: center !important;
  font-size: clamp(26px, 3.2vw, 36px) !important;
  line-height: 1.12 !important;
  letter-spacing: -.018em !important;
}

body.lbpfcc-ready .lbpfcc-bio {
  width: 100% !important;
  max-width: 680px !important;
  margin: 0 auto 16px !important;
  padding: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  text-align: center !important;
  font-size: clamp(15px, 1.8vw, 18px) !important;
  line-height: 1.42 !important;
}

body.lbpfcc-ready .lbpfcc-pill-row {
  width: 100% !important;
  max-width: 700px !important;
  flex-wrap: wrap !important;
  overflow: visible !important;
}

body.lbpfcc-ready .lbpfcc-pill {
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 767px) {
  body.lbpfcc-ready .lbpfcc-profile-card {
    --lbpfcc-cover-height: clamp(280px, 94vw, 390px);
    --lbpfcc-safe-inline: max(14px, env(safe-area-inset-left));
    width: calc(100% - 12px) !important;
    max-width: calc(100% - 12px) !important;
    margin: 6px auto 18px !important;
    padding:
      var(--lbpfcc-cover-height)
      var(--lbpfcc-safe-inline)
      22px !important;
    border-radius: 24px !important;
  }

  body.lbpfcc-ready .lbpfcc-cover-layer,
  body.lbpfcc-ready .lbpfcc-overlay-layer {
    border-radius: 23px 23px 0 0 !important;
  }

  body.lbpfcc-ready .lbpfcc-avatar-wrap {
    width: var(--lbpfcc-avatar-mobile-size, 126px) !important;
    height: var(--lbpfcc-avatar-mobile-size, 126px) !important;
    max-width: min(160px, 42vw) !important;
    max-height: min(160px, 42vw) !important;
    margin:
      var(--lbpfcc-avatar-mobile-offset, -63px)
      auto
      16px !important;
  }

  body.lbpfcc-ready .lbpfcc-title,
  body.lbpfcc-ready h1.lbpfcc-title,
  body.lbpfcc-ready h2.lbpfcc-title,
  body.lbpfcc-ready h3.lbpfcc-title,
  body.lbpfcc-ready .lbpfcc-title.lbpfcc-title-long {
    font-size: clamp(23px, 6.4vw, 30px) !important;
    line-height: 1.14 !important;
  }

  body.lbpfcc-ready .lbpfcc-bio {
    font-size: clamp(14px, 4vw, 17px) !important;
    line-height: 1.45 !important;
  }
}

@media (max-width: 390px) {
  body.lbpfcc-ready .lbpfcc-profile-card {
    --lbpfcc-cover-height: clamp(260px, 92vw, 355px);
    width: calc(100% - 8px) !important;
    max-width: calc(100% - 8px) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}