/* ==================================================
   FLIRTYPE – TINDER STYLE CARD STACK
================================================== */

:root {
  --card-radius: 14px;
  --shadow-main: 0 56px 40px -36px rgba(0,0,0,.28);
  --shadow-soft: 0 18px 10px -15px rgba(0,0,0,.28);
  --stack-gap: 18px;
}

/* WRAPPER */
.flirtype-wrapper {
  position: relative;
  width: 100%;
  max-width: 100vw;
  margin: 18px auto;
  user-select: none;
  box-sizing: border-box;
}

.ancestor-lv-2-flirtype-wrapper {
    overflow: hidden;
}

/* STACK */
.flirtype-stack {
  position: relative;
  width: 620px;
  height: 516px;
  perspective: 1400px;
  margin: auto;
}

/* CARD */
.flirtype-card {
  position: absolute;
  inset: 0;
  height: 400px;
  border-radius: var(--card-radius);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  transform-origin: center bottom;
  box-shadow: var(--shadow-main);
  --offset: 0;
  transform:
    translateY(calc(var(--offset) * 24px))
    scale(calc(1 - var(--offset) * 0.05));
  transition:
    transform .45s cubic-bezier(.22,.61,.36,1),
    opacity .35s ease,
    box-shadow .3s ease;
  will-change: transform;
  backdrop-filter: blur(101px) !important;
}

/* hidden after throw */
.flirtype-card.hidden {
  pointer-events: none;
}

/* INNER */
.flirtype-card-inner {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  min-height: 100%;
  height: -webkit-fill-available;
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 2;
  align-items: stretch;
  overflow: hidden;
}

/* OVERLAY */
.flirtype-cover-overlay {
  border-radius: var(--card-radius);
  position: absolute;
  height: 100%;
  inset: 0;
  z-index: 1;
  background: linear-gradient(37deg, #0000003d 3%, #000000b3 100%);
}

/* META TOP */
.bottom-card {
  position: relative;
  color: white;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  font-size: 16px;
  gap: 7px;
  flex-wrap: wrap;
}

/* TAGLINE */
.lov-lang {
  font-size: 14px;
  letter-spacing: 0.51px;
  margin: 0;
}

/* CATEGORIES */
.font-categories {
  display: flex;
  gap: 6px 8px;
  flex-wrap: wrap;
}

.font-category {
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 999px;
  background: #dec4ff;
  color: #6832ae;
  margin: 0;
  text-shadow: 0 0 0 #343434bd !important;
}

/* TITLE */
.card-title {
  z-index: 3;
}

.font-title {
  line-height: 1.1;
  margin: 0;
  font-size: 58px;
  width: 100%;
  letter-spacing: 2px;
  font-weight: normal;
}

.font-foundry {
  opacity: .75;
  margin: 0;
}

.font-meta {
  opacity: .55;
  margin: 0;
}

.flirtype-card-inner p {
    text-shadow: 1px 2px 3px #34343400;
}

/* =====================
   HOVER STATES
===================== */
.flirtype-card {
    --tx: 0px;
    --ty: 0px;
    --rz: 0deg;
    --rx: 24deg;
    --ry: 0deg;
    --scale: 1;

    transform:
        translate3d(var(--tx), var(--ty), 0)
        rotateZ(var(--rz))
        rotateX(var(--rx))
        rotateY(var(--ry))
        scale(var(--scale));

    transition: transform .45s cubic-bezier(.22,.61,.36,1);
}

/* hover preview */
.flirtype-card.is-like {
    --rz: 6deg;
    --ry: -6deg;
    --rx: 0deg;
}

.flirtype-card.is-nope {
    --rz: -6deg;
    --ry: 6deg;
    --rx: 0deg;
}

/* final throw */
.flirtype-card.throw-like {
    --tx: 1440px;
    --rz: 45deg;
    --rx: 17deg;
    --ry: -60deg;
    --scale: 0.3;
}

.flirtype-card.throw-nope {
    --tx: -1440px;
    --rz: -45deg;
    --rx: 17deg;
    --ry: 60deg;
    --scale: 0.3;
}

/* =====================================
   CARD ACTION ICONS (TOP)
===================================== */
.flirtype-card .flirtype-btn {
  position: relative;
  right: -8px;
  top: -10px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #f2eff330;
  backdrop-filter: blur(2px);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  z-index: 5;
  text-decoration: none;
  box-shadow: var(--shadow-soft);
}

.bottom-card.space-between {
    z-index: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: center;
}

.outLink {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.right-side-top {
    border-radius: 25px;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 4px;
    top: -10px;
}

/* =====================================
   ACTION BAR (BOTTOM – TINDER STYLE)
===================================== */
.flirtype-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 26px;
  margin-top: 34px;
}

/* BUTTON BASE */
.flirtype-actions .flirtype-btn {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease;
}

.flirtype-actions .flirtype-btn:hover {
  transform: scale(1.12);
}

/* NOPE */
.flirtype-btn.nope {
  color: #ad74f7;
  background: #f2eff3;
}

/* LOVE */
.flirtype-btn.love {
  background: linear-gradient(135deg, #ad74f7, #dec4ff);
  color: #f2eff3;
}

/* DISABLED */
.flirtype-btn.disabled {
  opacity: .4;
  pointer-events: none;
}

/* =====================================
   END CARD
===================================== */

.flirtype-card {
  --stack-y: calc(var(--stack-index) * var(--stack-gap));
  --stack-scale: 1;

  transform:
    translate3d(
      calc(var(--tx) + 0px),
      calc(var(--stack-y) + var(--ty)),
      0
    )
    rotateZ(var(--rz))
    rotateX(var(--rx))
    rotateY(var(--ry))
    scale(calc(var(--stack-scale) * var(--scale)));
}

.flirtype-end {
  position: absolute;
  inset: 0;
  border-radius: var(--card-radius);
  background: linear-gradient(135deg, #111, #000);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(.92);
  transition: all .4s ease;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 320px;
  width: 472px;
  margin: 0 auto;
}

.flirtype-end.active {
  opacity: 1;
  transform: scale(1) translateY(90px);
}

.flirtype-end h3 {
  font-size: 26px;
  margin-bottom: 6px;
}

.flirtype-end p {
  font-size: 14px;
  opacity: .7;
}

.end-cta {
  display: inline-block;
  margin-top: 16px;
  padding: 12px 22px;
  border-radius: 999px;
  background: #fff;
  color: #000;
  text-decoration: none;
  font-size: 13px;
}

.flirtype-end .flirtype-card-inner > * {
    text-align: center;
}

a.end-cta {
    width: 30%;
    margin: 0 auto;
}


/* =====================================
   MOBILE TUNING
===================================== */
@media (max-width: 480px) {
  .flirtype-wrapper {
    margin: 0px auto;
  }

  :root {
    --stack-gap: 8px;
  }

  .flirtype-card {
    height: 420px;
    --rx: 0deg;
  }

  .flirtype-stack {
    width: 352px;
    height: 450px;
    perspective: 480px;
  }

  .font-title {
    font-size: 18px;
  }

  .flirtype-card-inner {
    padding: 18px;
  }

  .bottom-card {
    gap: 2px;
    font-size: 12px;
  }

  .flirtype-card .flirtype-btn {
    width: 42px;
    height: 42px;
    font-size: 26px;
  }

  .font-category {
    font-size: 10px;
  }

  .guten-element.guten-hTXRkb {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
  }

  .font-title {
    font-size: 58px;
    letter-spacing: 0;
  }

  .flirtype-card-inner {
    padding: 18px;
  }

  .bottom-card {
    gap: 2px;
    font-size: 12px;
  }

  .flirtype-card .flirtype-btn {
    width: 42px;
    height: 42px;
    font-size: 26px;
  }

  .font-category {
    font-size: 10px;
  }
}