/**
 * Lupus Free Card — front styles.
 * 3D code card ported from the "Code Card 3D" design. Transparent scene so the
 * card sits directly on the page; used both standalone and as the product cover.
 * @license AFL-3.0
 */
.lupusfc-page { padding: 8px 0 30px; }

/* ---- 3D scene (transparent: the card floats on the page) ---- */
.lupusfc-scene {
  position: relative;
  width: 100%;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  -webkit-perspective: 1600px;
  perspective: 1600px;
  background: transparent;
  font-family: 'Barlow', sans-serif;
}
.lupusfc-shadow {
  position: absolute; left: 50%; top: 66%;
  width: 460px; height: 110px; max-width: 80%;
  transform: translate(-50%, -50%) rotateX(72deg);
  background: radial-gradient(closest-side, rgba(40,36,30,0.30), rgba(40,36,30,0) 72%);
  filter: blur(14px); pointer-events: none;
}
.lupusfc-sensor {
  position: relative; width: 100%; max-width: 560px; height: 470px;
  display: flex; align-items: center; justify-content: center;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  touch-action: pan-y;   /* let the page scroll over the card; tilt on x-drag only */
}
@keyframes lupusfc-floaty {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}
.lupusfc-floaty {
  animation: lupusfc-floaty 6s ease-in-out infinite;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.lupusfc-card {
  --lupusfc-half: 6px;
  position: relative; width: 540px; height: 430px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: transform .12s ease-out;
  will-change: transform;
  /* Default tilt in CSS so the very first paint is already angled — otherwise the
     card paints flat (all layers projected onto one rect) for a frame before JS
     applies the tilt, which is exactly when the black-square flash appears. JS
     re-applies the same values, so there is no visible transition. */
  -webkit-transform: rotateX(-14deg) rotateY(22deg);
  transform: rotateX(-14deg) rotateY(22deg);
}

/* extruded body */
.lupusfc-depth { position: absolute; inset: 0; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
.lupusfc-layer { position: absolute; inset: 0; border-radius: 26px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

/* front face: dark frame + white inner card.
   Sits a few px IN FRONT of the frontmost depth layer (which the JS injects at
   translateZ(+half)); coplanar surfaces z-fight on mobile GPUs and flash black
   before the first repaint. */
.lupusfc-face {
  position: absolute; inset: 0; border-radius: 26px;
  background: #1b1b1d; padding: 14px; box-sizing: border-box;
  -webkit-transform: translateZ(calc(var(--lupusfc-half) + 3px));
  transform: translateZ(calc(var(--lupusfc-half) + 3px));
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
.lupusfc-inner {
  position: relative; width: 100%; height: 100%;
  border-radius: 14px; overflow: hidden; background: #fff;
  display: flex; flex-direction: column;
}
.lupusfc-top {
  flex: 0 0 52%; position: relative; box-sizing: border-box;
  background: linear-gradient(170deg,#dadcde 0%,#c4c7cb 40%,#b9bcc0 70%,#cfd1d4 100%);
  padding: 22px 30px 12px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.lupusfc-top__brushed {
  position: absolute; inset: 0; opacity: .5;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.02) 1px 2px);
  pointer-events: none;
}
.lupusfc-top__intro { position: relative; font-size: 16px; font-weight: 500; color: #2a2a2c; }
.lupusfc-top__url {
  position: relative; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 38px; line-height: 1.02; color: #16161a; margin: 4px 0 6px; letter-spacing: .3px;
  word-break: break-word;
}
.lupusfc-top__note { position: relative; font-size: 14.5px; font-weight: 500; color: #2c2c2e; line-height: 1.32; max-width: 400px; }
.lupusfc-top__copy { position: relative; margin-top: auto; padding-top: 8px; font-size: 10px; font-weight: 600; color: #3a3a3c; }

.lupusfc-bottom {
  flex: 1 1 auto; position: relative; box-sizing: border-box; background: #fff;
  padding: 18px 30px 20px;
  display: flex; align-items: center; gap: 26px;
}
.lupusfc-qr { width: 140px; height: 140px; flex: 0 0 auto; image-rendering: pixelated; }
.lupusfc-bottom__info { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 12px; min-width: 0; }
.lupusfc-setcode { align-self: center; font-weight: 700; font-size: 18px; letter-spacing: 1px; color: #1a1a1c; }
.lupusfc-code {
  align-self: center; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 29px; letter-spacing: .4px; color: #101012; white-space: nowrap;
  max-width: 100%;
}
.lupusfc-setname { align-self: flex-start; font-weight: 700; font-size: 15px; color: #1a1a1c; }

/* tap-to-copy code */
.lupusfc-code--copy { position: relative; cursor: pointer; transition: color .12s; }
.lupusfc-code--copy:hover { color: #2d8fa8; }
.lupusfc-code--copy::after {
  content: attr(data-copied);
  position: absolute; left: 50%; top: -6px; transform: translate(-50%, -100%);
  background: #1f9d54; color: #fff; font-family: 'Barlow', sans-serif; font-weight: 600;
  font-size: 12px; letter-spacing: .2px; line-height: 1; padding: 5px 9px; border-radius: 6px;
  white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s;
}
.lupusfc-code--copy.is-copied::after { opacity: 1; }

/* locked placeholder (before redeeming) */
.lupusfc-locked { display: flex; align-items: center; gap: 22px; width: 100%; }
.lupusfc-locked__qr {
  width: 130px; height: 130px; flex: 0 0 auto; border-radius: 8px;
  background: repeating-linear-gradient(45deg,#eef0f2 0 8px,#e6e8ec 8px 16px);
  display: flex; align-items: center; justify-content: center;
}
.lupusfc-locked__qr .material-icons { font-size: 52px; color: #aeb4bd; }
.lupusfc-locked__info { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lupusfc-locked__txt { font-weight: 700; font-size: 18px; color: #4a4a4c; line-height: 1.2; }

.lupusfc-glare {
  position: absolute; inset: 0; border-radius: 26px; pointer-events: none;
  mix-blend-mode: screen; opacity: .7;
  background: radial-gradient(120% 80% at 30% 25%, rgba(255,255,255,0.55), rgba(255,255,255,0) 55%);
}

/* ---- claim ---- */
.lupusfc-claim { text-align: center; margin-top: 10px; }
.lupusfc-claim__hint { color: #8a8a8a; margin-top: 8px; font-size: 13px; }
.lupusfc-claim__done { display: inline-flex; align-items: center; gap: 8px; }
.lupusfc-countdown { font-variant-numeric: tabular-nums; opacity: .8; }

/* ---- product page: full-width top banner + hide e-commerce clutter ---- */
.lupusfc-topbanner {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 0 20px; font-weight: 600;
}
.lupusfc-cover { display: flex; align-items: center; justify-content: center; }
.lupusfc-cover .lupusfc-scene { min-height: 440px; }
.lupusfc-cover .lupusfc-sensor { transform: scale(.84); }
.lupusfc-product-claim { margin-top: 14px; }
/* reviews / comments hidden on the free-card product (body class added by JS) */
.lupusfc-product-body .product-comments-wrapper,
.lupusfc-product-body .product-comments-additional-info,
.lupusfc-product-body .comments-note,
.lupusfc-product-body #product-comments-list,
.lupusfc-product-body .product-comments-list-header { display: none !important; }

/* ---- responsive: scale the SENSOR (JS overwrites the card transform) ---- */
@media (max-width: 1199px) {
  .lupusfc-cover .lupusfc-sensor { transform: scale(.72); }
  .lupusfc-cover .lupusfc-scene { min-height: 380px; }
}
@media (max-width: 820px) {
  .lupusfc-scene { min-height: 430px; }
  .lupusfc-sensor { height: 430px; transform: scale(.82); }
  .lupusfc-cover .lupusfc-sensor { transform: scale(.84); }
  .lupusfc-cover .lupusfc-scene { min-height: 430px; }
}
@media (max-width: 560px) {
  .lupusfc-scene, .lupusfc-cover .lupusfc-scene { min-height: 340px; }
  .lupusfc-sensor, .lupusfc-cover .lupusfc-sensor { height: 340px; transform: scale(.58); }
  .lupusfc-top__url { font-size: 34px; }
}