/* ==========================================================================
   WELLUNEX — Envelope liners (App\Services\EnvelopeLiner)
   The patterned paper inside the envelope. It fills the triangle the flap
   covers, so it stays hidden until the seal is broken and the flap lifts.
   The patterns use the invitation's colours (--inv-primary, --seal-color);
   the editor's swatches set the same variables.
   ========================================================================== */

.envelope-liner {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 50% 55%);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  box-shadow: inset 0 -18px 30px rgba(0, 0, 0, 0.18);
  z-index: 2;
  pointer-events: none;
}

/* The showroom's liner picker opens the preview with the flap already lifted
   (?embed=1&preview=astar, envelope-seal.js); the seal is still there to break. */
.envelope-wrapper.liner-peek .envelope-flap {
  transform: rotateX(180deg);
  z-index: 1;
}

/* --------------------------------------------------------------- patterns */

.liner--altin-varak {
  background-color: #C9A146;
  background-image:
    repeating-linear-gradient(38deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 7px),
    linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 249, 224, 0.6) 45%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(135deg, #A67C2E 0%, #E9CD7E 28%, #C29A45 48%, #F4DE99 70%, #9C7128 100%);
}

.liner--mermer {
  background-color: #F3EFE8;
  background-image:
    linear-gradient(118deg, transparent 38%, rgba(150, 140, 125, 0.3) 39.5%, transparent 41.5%),
    linear-gradient(62deg, transparent 58%, rgba(170, 150, 110, 0.24) 59%, transparent 60.5%),
    linear-gradient(150deg, transparent 20%, rgba(140, 130, 120, 0.18) 21%, transparent 23%),
    radial-gradient(120% 80% at 20% 10%, rgba(255, 255, 255, 0.9), transparent 60%),
    radial-gradient(90% 70% at 90% 90%, rgba(205, 195, 180, 0.45), transparent 70%);
}

.liner--cini {
  background-color: var(--inv-primary, #2D4A3E);
  background-color: color-mix(in srgb, var(--inv-primary, #2D4A3E) 85%, #000);
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.9) 0 2px, transparent 2.5px),
    radial-gradient(circle at 50% 50%, transparent 0 7px, rgba(255, 255, 255, 0.55) 7.5px 8.5px, transparent 9px),
    linear-gradient(45deg, transparent 46%, rgba(255, 255, 255, 0.22) 47% 53%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, rgba(255, 255, 255, 0.22) 47% 53%, transparent 54%);
  background-size: 22px 22px;
}

.liner--botanik {
  background-color: #F4EFE3;
}

.liner--botanik::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--inv-primary, #2D4A3E);
  opacity: 0.55;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg%3E%3Cpath d='M10 34 Q11 22 10 8' stroke='black' stroke-width='1' fill='none'/%3E%3Cpath d='M10 14 C5 13 3 10 3 6 C8 6 10 9 10 14Z'/%3E%3Cpath d='M10 20 C15 19 17 16 17 12 C12 12 10 15 10 20Z'/%3E%3Cpath d='M10 27 C5 26 3 23 3 19 C8 19 10 22 10 27Z'/%3E%3C/g%3E%3Cg transform='translate(20 20)'%3E%3Cpath d='M10 34 Q11 22 10 8' stroke='black' stroke-width='1' fill='none'/%3E%3Cpath d='M10 14 C5 13 3 10 3 6 C8 6 10 9 10 14Z'/%3E%3Cpath d='M10 20 C15 19 17 16 17 12 C12 12 10 15 10 20Z'/%3E%3C/g%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg%3E%3Cpath d='M10 34 Q11 22 10 8' stroke='black' stroke-width='1' fill='none'/%3E%3Cpath d='M10 14 C5 13 3 10 3 6 C8 6 10 9 10 14Z'/%3E%3Cpath d='M10 20 C15 19 17 16 17 12 C12 12 10 15 10 20Z'/%3E%3Cpath d='M10 27 C5 26 3 23 3 19 C8 19 10 22 10 27Z'/%3E%3C/g%3E%3Cg transform='translate(20 20)'%3E%3Cpath d='M10 34 Q11 22 10 8' stroke='black' stroke-width='1' fill='none'/%3E%3Cpath d='M10 14 C5 13 3 10 3 6 C8 6 10 9 10 14Z'/%3E%3Cpath d='M10 20 C15 19 17 16 17 12 C12 12 10 15 10 20Z'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-size: 40px 40px;
          mask-size: 40px 40px;
}

.liner--ince-cizgi {
  background-color: #FBF8F2;
  background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0 1.5px, transparent 1.5px 12px);
  background-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--inv-primary, #2D4A3E) 55%, transparent) 0 1.5px, transparent 1.5px 12px);
}

.liner--kadife {
  background-color: #1B1418;
  background-color: color-mix(in srgb, var(--seal-color, #4A0E17) 55%, #0B0708);
  background-image:
    radial-gradient(rgba(233, 205, 126, 0.55) 0.9px, transparent 1.4px),
    radial-gradient(rgba(233, 205, 126, 0.3) 0.9px, transparent 1.4px),
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.1), transparent 60%);
  background-size: 14px 14px, 14px 14px, 100% 100%;
  background-position: 0 0, 7px 7px, 0 0;
}

/* ----------------------------------------------------- editor picker */

.liner-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.liner-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: #9CA3AF;
  cursor: pointer;
}

.liner-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.liner-swatch {
  position: relative;
  display: block;
  width: 64px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  border: 2.5px solid transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.liner-swatch--none {
  background: repeating-linear-gradient(45deg, #1F2430 0 6px, #262C39 6px 12px);
}

.liner-option:hover .liner-swatch {
  transform: translateY(-2px);
}

.liner-option input:checked + .liner-swatch {
  border-color: #FFFFFF;
}

.liner-option input:checked ~ span:last-child {
  color: #FFFFFF;
}

.liner-option input:focus-visible + .liner-swatch {
  outline: 2px solid #D4AF37;
  outline-offset: 2px;
}