/*
 * Falue welcome refinement — 2026-08-24
 * Loaded only by the public welcome template, after concept2.css.
 */

/* One clear account action: the username claim remains the registration path. */
.falue-welcome-c2__login-cta {
  width: min(360px, 100%);
  min-width: 220px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.falue-welcome-c2__login-cta:hover {
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 15px 30px rgba(93, 95, 147, .28);
}

.falue-welcome-c2__login-cta:focus-visible {
  outline: 3px solid rgba(103, 78, 240, .26);
  outline-offset: 3px;
}

/* Welcome demo identity: use the supplied portrait as a true face-focused avatar. */
.falue-welcome-c2__demo-avatar img {
  width: 150% !important;
  height: 150% !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  object-fit: cover !important;
  object-position: 50% 20% !important;
  transform: none !important;
}

/* Live rating smoke follows the same red → blue → purple tiers as the heart. */
.falue-welcome-c2__reveal--right[data-rating-tone="red"] {
  background: linear-gradient(145deg, #E85D70 0%, #B83D55 58%, #602C3B 100%) !important;
}

.falue-welcome-c2__reveal--right[data-rating-tone="blue"] {
  background: linear-gradient(145deg, #5A96F4 0%, #416FBD 58%, #2B416E 100%) !important;
}

.falue-welcome-c2__reveal--right[data-rating-tone="purple"] {
  background: linear-gradient(145deg, #7157D8 0%, #5D5F93 58%, #3F436B 100%) !important;
}

/*
 * Cookie consent: compact floating card, always anchored to the bottom.
 * The source markup is provided by the site's cookie-consent library.
 */
.cc-window.cc-floating.cc-bottom {
  position: fixed !important;
  z-index: 2147483000 !important;
  top: auto !important;
  right: 16px !important;
  bottom: max(16px, env(safe-area-inset-bottom)) !important;
  left: 16px !important;
  width: min(500px, calc(100% - 32px)) !important;
  max-width: 500px !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 13px 13px 13px 16px !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
  overflow: hidden !important;
  border: 1px solid rgba(43, 45, 66, .10) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, .97) !important;
  color: #34364d !important;
  box-shadow: 0 20px 55px rgba(43, 45, 66, .20), 0 3px 12px rgba(43, 45, 66, .08) !important;
  font-family: var(--falue-font-ui, "Plus Jakarta Sans", "Inter", Arial, sans-serif) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

/* Never override the consent library when it dismisses or hides the card. */
.cc-window.cc-floating.cc-bottom.cc-invisible,
.cc-window.cc-floating.cc-bottom[aria-hidden="true"] {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(16px) !important;
}

.cc-window.cc-floating.cc-bottom[hidden],
.cc-window.cc-floating.cc-bottom[style*="display: none"],
.cc-window.cc-floating.cc-bottom[style*="display:none"] {
  display: none !important;
}

.cc-window.cc-floating.cc-bottom::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #5d5f93, #6a54f4 55%, #8a3cf0);
}

.cc-window.cc-floating.cc-bottom .cc-message {
  min-width: 0 !important;
  margin: 0 !important;
  color: #555a70 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.42 !important;
}

.cc-window.cc-floating.cc-bottom .cc-link {
  display: inline !important;
  padding: 0 !important;
  color: #6750e8 !important;
  font-weight: 750 !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

.cc-window.cc-floating.cc-bottom .cc-link:hover {
  text-decoration: underline !important;
}

.cc-window.cc-floating.cc-bottom .cc-compliance {
  min-width: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.cc-window.cc-floating.cc-bottom .cc-btn,
.cc-window.cc-floating.cc-bottom .cc-dismiss {
  min-width: 82px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, #5d5f93, #7b4de9) !important;
  color: #fff !important;
  box-shadow: 0 9px 20px rgba(93, 95, 147, .24) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.cc-window.cc-floating.cc-bottom .cc-btn:hover,
.cc-window.cc-floating.cc-bottom .cc-dismiss:hover {
  color: #fff !important;
  filter: brightness(1.04);
}

/* Mobile welcome is a single, fitted screen. Nothing in this layer affects the feed. */
@media (max-width: 899.98px) {
  html,
  body {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  body {
    position: relative !important;
  }

  .falue-welcome-c2 {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .falue-welcome-c2__topbar {
    width: calc(100% - 28px) !important;
    height: clamp(50px, 7.1dvh, 60px) !important;
    min-height: 0 !important;
    flex: 0 0 auto;
  }

  .falue-welcome-c2__brand img {
    width: clamp(31px, 8.7vw, 38px);
    height: clamp(31px, 8.7vw, 38px);
  }

  .falue-welcome-c2__brand span {
    font-size: clamp(21px, 6vw, 24px);
  }

  .falue-welcome-c2__main {
    width: calc(100% - 28px) !important;
    height: calc(100dvh - clamp(50px, 7.1dvh, 60px)) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: clamp(3px, .7dvh, 7px) 0 max(8px, env(safe-area-inset-bottom)) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: clamp(4px, .75dvh, 8px) !important;
    overflow: visible !important;
  }

  .falue-welcome-c2__intro--face-value {
    flex: 0 0 auto;
  }

  .falue-welcome-c2__intro--face-value h1 {
    gap: clamp(1px, .35dvh, 4px) !important;
  }

  .falue-welcome-c2__intro--face-value h1 > span {
    font-size: clamp(10px, 3vw, 14px) !important;
    line-height: 1 !important;
    letter-spacing: .12em !important;
  }

  .falue-welcome-c2__intro--face-value h1 > strong {
    font-size: clamp(36px, 11.8vw, 51px) !important;
    line-height: .95 !important;
  }

  .falue-welcome-c2__demo {
    position: relative !important;
    isolation: isolate;
    width: 100% !important;
    height: clamp(185px, 34dvh, 315px) !important;
    min-height: 0 !important;
    max-height: 315px !important;
    flex: 0 1 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: center !important;
    overflow: visible !important;
  }

  /* Desktop-style actions become full-card layers behind the draggable post. */
  .falue-welcome-c2__reveal {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 18px 22px !important;
    display: flex !important;
    pointer-events: none !important;
    border-radius: clamp(20px, 5.8vw, 25px) !important;
    opacity: clamp(0, calc(var(--reveal-progress, 0) * 100), 1) !important;
    transform: none !important;
    transition: none !important;
  }

  /* A left swipe exposes the right edge: place Not for me in that opening. */
  .falue-welcome-c2__reveal--left {
    --falue-reveal-center: clamp(12px, calc(var(--reveal-progress, 0) * 23%), 92px);
    padding: 0 !important;
    text-align: center !important;
  }

  /* A right swipe exposes the left edge: place rating feedback in that opening. */
  .falue-welcome-c2__reveal--right {
    --falue-reveal-center: clamp(12px, calc(var(--reveal-progress, 0) * 23%), 92px);
    padding: 0 !important;
    text-align: center !important;
  }

  .falue-welcome-c2__reveal--right .falue-welcome-c2__heart-img {
    position: absolute !important;
    top: 25% !important;
    left: var(--falue-reveal-center) !important;
    width: 34px !important;
    height: 31px !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
  }

  .falue-welcome-c2__reveal--right strong {
    position: absolute !important;
    top: 49% !important;
    left: var(--falue-reveal-center) !important;
    margin: 0 !important;
    font-size: clamp(25px, 7vw, 31px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transform: translate(-50%, -50%) !important;
  }

  .falue-welcome-c2__reveal--right .falue-welcome-c2__reveal-like-label {
    position: absolute !important;
    top: 63% !important;
    left: var(--falue-reveal-center) !important;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transform: translateX(-50%) !important;
  }

  .falue-welcome-c2__reveal--right small {
    position: absolute !important;
    top: 72% !important;
    left: var(--falue-reveal-center) !important;
    width: 76px !important;
    margin: 0 !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
    transform: translateX(-50%) !important;
  }

  .falue-welcome-c2__reveal--left .falue-welcome-c2__reveal-icon {
    position: absolute !important;
    top: 29% !important;
    right: var(--falue-reveal-center) !important;
    margin: 0 !important;
    font-size: 25px !important;
    line-height: 1 !important;
    transform: translateX(50%) !important;
  }

  .falue-welcome-c2__reveal--left strong {
    position: absolute !important;
    top: 52% !important;
    right: var(--falue-reveal-center) !important;
    width: 92px !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    transform: translate(50%, -50%) !important;
  }

  .falue-welcome-c2__reveal--left > span {
    position: absolute !important;
    top: 65% !important;
    right: var(--falue-reveal-center) !important;
    width: 92px !important;
    margin: 0 !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
    transform: translateX(50%) !important;
  }

  .falue-welcome-c2__card-shell {
    position: relative !important;
    z-index: 2 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: visible !important;
  }

  .falue-welcome-c2__post {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    border-radius: clamp(20px, 5.8vw, 25px) !important;
    transform-origin: 50% 50% !important;
  }

  .falue-welcome-c2__card-shell.is-dragging .falue-welcome-c2__post {
    box-shadow: 0 26px 64px rgba(43, 45, 66, .25) !important;
  }

  .falue-welcome-c2__post header {
    height: clamp(44px, 6.5dvh, 56px) !important;
    padding: 7px 13px !important;
  }

  .falue-welcome-c2__media {
    width: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 10px !important;
    border-radius: 17px !important;
  }

  .falue-welcome-c2__post footer {
    height: clamp(40px, 5.7dvh, 49px) !important;
    padding: 6px 9px 7px !important;
    gap: 6px !important;
    grid-template-columns: auto minmax(96px, 1fr) auto !important;
  }

  .falue-welcome-c2__post footer > span {
    min-height: 28px !important;
    padding: 0 8px !important;
    font-size: 9px !important;
  }

  .falue-welcome-c2__drag-hint {
    min-height: 18px !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  .falue-welcome-c2__drag-hint span {
    padding: 0 6px !important;
    font-size: clamp(13px, 3.8vw, 16px) !important;
  }

  .falue-welcome-c2__claim {
    width: calc(100% - 10px) !important;
    flex: 0 0 auto;
    overflow: visible !important;
  }

  .falue-welcome-c2__claim-title {
    margin: 0 0 clamp(3px, .55dvh, 6px) !important;
    font-size: clamp(11px, 3.2vw, 13px) !important;
    line-height: 1.1 !important;
  }

  .falue-welcome-c2__claim-box {
    min-height: 0 !important;
    height: clamp(49px, 6.3dvh, 56px) !important;
    padding: 5px !important;
    border-color: rgba(43, 45, 66, .07) !important;
    box-shadow: 0 9px 22px rgba(43, 45, 66, .075), 0 0 0 1px rgba(43, 45, 66, .025) !important;
  }

  .falue-welcome-c2__claim-prefix,
  .falue-welcome-c2__claim-box input,
  #claim-username-button {
    height: clamp(39px, 5.1dvh, 46px) !important;
  }

  .falue-welcome-c2__claim-prefix {
    width: clamp(39px, 10.7vw, 44px) !important;
    padding: 0 !important;
  }

  .falue-welcome-c2__claim-prefix svg {
    width: 20px;
    height: 20px;
  }

  .falue-welcome-c2__claim-box input {
    padding: 0 9px !important;
    font-size: clamp(12px, 3.45vw, 14px) !important;
  }

  #claim-username-button {
    min-width: clamp(78px, 22vw, 94px) !important;
    padding: 0 13px !important;
    font-size: clamp(12px, 3.45vw, 14px) !important;
  }

  .falue-welcome-c2__claim-status {
    min-height: clamp(15px, 2.2dvh, 18px) !important;
    margin: clamp(3px, .5dvh, 6px) 0 0 !important;
    gap: 6px !important;
    font-size: clamp(10px, 2.9vw, 12px) !important;
    line-height: 1.2 !important;
  }

  .falue-welcome-c2__claim-status-icon {
    width: 15px !important;
    height: 15px !important;
    flex-basis: 15px !important;
    font-size: 10px !important;
  }

  .falue-welcome-c2__minimal-strip {
    min-height: 0 !important;
    margin: clamp(2px, .5dvh, 5px) auto 0 !important;
    gap: 1px !important;
    padding: 0 !important;
    font-size: clamp(9px, 2.65vw, 11px) !important;
    line-height: 1.18 !important;
  }

  .falue-welcome-c2__cta-row {
    width: 100% !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  .falue-welcome-c2__login-cta {
    width: 100% !important;
    min-width: 0 !important;
    height: clamp(42px, 5.8dvh, 50px) !important;
    border-radius: 14px !important;
    font-size: 14px !important;
  }

  .cc-window.cc-floating.cc-bottom {
    right: 10px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    left: 10px !important;
    width: calc(100% - 20px) !important;
    padding: 12px 11px 11px 14px !important;
    gap: 10px !important;
    border-radius: 18px !important;
  }

  .cc-window.cc-floating.cc-bottom .cc-message {
    font-size: 11px !important;
    line-height: 1.36 !important;
  }

  .cc-window.cc-floating.cc-bottom .cc-btn,
  .cc-window.cc-floating.cc-bottom .cc-dismiss {
    min-width: 72px !important;
    height: 38px !important;
    padding: 0 13px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
  }
}

/* Extra-short phones keep every control usable without introducing page scroll. */
@media (max-width: 899.98px) and (max-height: 700px) {
  .falue-welcome-c2__topbar {
    height: 46px !important;
  }

  .falue-welcome-c2__main {
    height: calc(100dvh - 46px) !important;
    gap: 3px !important;
    padding-top: 2px !important;
    padding-bottom: max(5px, env(safe-area-inset-bottom)) !important;
  }

  .falue-welcome-c2__brand img {
    width: 30px;
    height: 30px;
  }

  .falue-welcome-c2__brand span {
    font-size: 20px;
  }

  .falue-welcome-c2__language > button {
    min-height: 34px;
    padding: 0 7px;
  }

  .falue-welcome-c2__intro--face-value h1 > span {
    font-size: 9px !important;
  }

  .falue-welcome-c2__intro--face-value h1 > strong {
    font-size: 33px !important;
  }

  .falue-welcome-c2__post header {
    height: 40px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  .falue-welcome-c2__demo-avatar {
    width: 30px;
    height: 30px;
  }

  .falue-welcome-c2__media {
    min-height: 104px !important;
    max-height: 150px !important;
  }

  .falue-welcome-c2__post footer {
    height: 38px !important;
    padding-top: 4px !important;
    padding-bottom: 5px !important;
  }

  .falue-welcome-c2__drag-hint {
    min-height: 15px !important;
  }

  .falue-welcome-c2__drag-hint span {
    font-size: 12px !important;
  }

  .falue-welcome-c2__claim-title {
    margin-bottom: 2px !important;
    font-size: 10px !important;
  }

  .falue-welcome-c2__claim-box {
    height: 46px !important;
  }

  .falue-welcome-c2__claim-prefix,
  .falue-welcome-c2__claim-box input,
  #claim-username-button {
    height: 36px !important;
  }

  .falue-welcome-c2__claim-status {
    min-height: 13px !important;
    margin-top: 2px !important;
    font-size: 9px !important;
  }

  .falue-welcome-c2__claim-status-icon {
    width: 13px !important;
    height: 13px !important;
    flex-basis: 13px !important;
    font-size: 9px !important;
  }

  .falue-welcome-c2__minimal-strip {
    margin-top: 1px !important;
    font-size: 8.5px !important;
  }

  .falue-welcome-c2__login-cta {
    height: 39px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .falue-welcome-c2__login-cta {
    transition: none !important;
  }
}