/* ==========================================================================
   IWorld — Invitation render engine (scoped `.inv-*`)
   One renderer, four consumers: gallery cards, preview modal, editor canvas,
   dashboard thumbnails.

   Scaling: `.inv-frame` is a container-query container. Every size inside is
   expressed in `cqw` (1 design px = 0.16667cqw on a 600-unit-wide stage), so a
   single markup tree renders identically at 200px or 900px wide — no JS resize
   maths required.
   ========================================================================== */

.inv-frame {
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: var(--inv-ar, 600 / 840);
  background: #fff;
  overflow: hidden;
  isolation: isolate;
}

.inv-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Fallback if container queries are unavailable: keep it legible rather than
   pixel-perfect (sizes then resolve against the fallback font-size below). */
@supports not (container-type: inline-size) {
  .inv-frame { container-type: normal; font-size: 14px; }
}

/* ---------------------------------------------------------- text layer ---- */
.inv-el {
  position: absolute;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  text-align: center;
  transform: translateX(-50%);
  transform-origin: center;
}

/* Alignment also changes the anchor point (see anchorTransform in JS). */
.inv-el--left { text-align: left; transform: translateX(0); }
.inv-el--right { text-align: right; transform: translateX(-100%); }

/* ------------------------------------------------------------ ornaments --- */
.inv-decor {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

/* Simple inset border frames -------------------------------------------- */
.inv-decor--frame {
  inset: 4.5cqw;
  border: .5cqw solid var(--d-color);
}

.inv-decor--frame-double {
  inset: 4cqw;
  border: .95cqw double var(--d-color);
}

.inv-decor--frame-thin {
  inset: 6cqw;
  border: .22cqw solid var(--d-color);
}

.inv-decor--frame-inner {
  inset: 7.5cqw;
  border: .12cqw solid var(--d-color);
  opacity: .75;
}

/* Rounded arch (Nikah / Walima / elegant) ------------------------------- */
.inv-decor--arch {
  left: 8cqw; right: 8cqw;
  top: 5cqw; bottom: 5cqw;
  border: .45cqw solid var(--d-color);
  border-radius: 46cqw 46cqw 1.5cqw 1.5cqw;
}

.inv-decor--arch-inner {
  left: 10.5cqw; right: 10.5cqw;
  top: 7.5cqw; bottom: 7.5cqw;
  border: .14cqw solid var(--d-color);
  border-radius: 44cqw 44cqw 1cqw 1cqw;
  opacity: .8;
}

/* Corner flourishes ----------------------------------------------------- */
.inv-decor--corners { inset: 0; }

.inv-corner {
  position: absolute;
  width: 13cqw; height: 13cqw;
  border: .4cqw solid var(--d-color);
}

.inv-corner--tl { top: 5cqw; left: 5cqw; border-right: 0; border-bottom: 0; }
.inv-corner--tr { top: 5cqw; right: 5cqw; border-left: 0; border-bottom: 0; }
.inv-corner--bl { bottom: 5cqw; left: 5cqw; border-right: 0; border-top: 0; }
.inv-corner--br { bottom: 5cqw; right: 5cqw; border-left: 0; border-top: 0; }

.inv-decor--corners.is-round .inv-corner--tl { border-top-left-radius: 5cqw; }
.inv-decor--corners.is-round .inv-corner--tr { border-top-right-radius: 5cqw; }
.inv-decor--corners.is-round .inv-corner--bl { border-bottom-left-radius: 5cqw; }
.inv-decor--corners.is-round .inv-corner--br { border-bottom-right-radius: 5cqw; }

/* Corner leaf sprays ---------------------------------------------------- */
.inv-corner-icon {
  position: absolute;
  color: var(--d-color);
  font-size: 9cqw;
  line-height: 1;
  opacity: var(--d-op, .85);
}

/* Divider rule with centre ornament ------------------------------------ */
.inv-decor--rule {
  left: 50%;
  transform: translateX(-50%);
  width: var(--d-w, 40cqw);
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  color: var(--d-color);
}

.inv-decor--rule::before,
.inv-decor--rule::after {
  content: '';
  flex: 1;
  height: .14cqw;
  background: currentColor;
  opacity: .85;
}

.inv-rule-glyph { font-size: 2.4cqw; line-height: 1; }

.inv-decor--rule.is-plain::before,
.inv-decor--rule.is-plain::after { opacity: 1; }

/* Solid / gradient bands ----------------------------------------------- */
.inv-decor--band {
  left: 0; right: 0;
  height: var(--d-h, 8cqw);
  background: var(--d-bg, var(--d-color));
}

/* Monogram medallion --------------------------------------------------- */
.inv-decor--monogram {
  left: 50%;
  transform: translateX(-50%);
  width: var(--d-size, 17cqw);
  height: var(--d-size, 17cqw);
  border: .3cqw solid var(--d-color);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--d-color);
  font-size: calc(var(--d-size, 17cqw) * .42);
  letter-spacing: .04em;
  z-index: 1;
}

.inv-decor--monogram.is-filled {
  background: var(--d-color);
  color: var(--d-bg, #fff);
}

.inv-decor--monogram.is-square { border-radius: 1.2cqw; }

/* Concentric mandala (Mehndi) ----------------------------------------- */
.inv-decor--mandala {
  width: var(--d-size, 40cqw);
  height: var(--d-size, 40cqw);
  border-radius: 50%;
  border: .9cqw dashed var(--d-color);
  opacity: var(--d-op, .3);
}

.inv-decor--mandala::before,
.inv-decor--mandala::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: .35cqw solid currentColor;
  color: var(--d-color);
}

.inv-decor--mandala::before { inset: 12%; border-style: dotted; border-width: .6cqw; }
.inv-decor--mandala::after { inset: 30%; }

/* Soft glow blobs (floral / romantic washes) -------------------------- */
.inv-decor--blob {
  width: var(--d-size, 34cqw);
  height: var(--d-size, 34cqw);
  border-radius: 50%;
  background: var(--d-bg, var(--d-color));
  filter: blur(var(--d-blur, 6cqw));
  opacity: var(--d-op, .55);
}

/* Scattered icon clusters (florals, sparkles, confetti, balloons) ----- */
.inv-decor--scatter { inset: 0; }

.inv-scatter-item {
  position: absolute;
  line-height: 1;
  transform-origin: center;
}

/* Geometric accents --------------------------------------------------- */
.inv-decor--shape {
  width: var(--d-size, 12cqw);
  height: var(--d-size, 12cqw);
  border: .35cqw solid var(--d-color);
}

.inv-decor--shape.is-filled { background: var(--d-color); border-color: transparent; }
.inv-decor--shape.is-circle { border-radius: 50%; }
.inv-decor--shape.is-diamond { transform: rotate(45deg); }

/* Dotted / striped textures ------------------------------------------ */
.inv-decor--texture-dots {
  inset: 0;
  background-image: radial-gradient(var(--d-color) .55cqw, transparent .55cqw);
  background-size: 5cqw 5cqw;
  opacity: var(--d-op, .18);
}

.inv-decor--texture-stripes {
  inset: 0;
  background-image: repeating-linear-gradient(45deg, var(--d-color) 0 .6cqw, transparent .6cqw 4cqw);
  opacity: var(--d-op, .12);
}

.inv-decor--texture-grid {
  inset: 0;
  background-image:
    linear-gradient(var(--d-color) .1cqw, transparent .1cqw),
    linear-gradient(90deg, var(--d-color) .1cqw, transparent .1cqw);
  background-size: 7cqw 7cqw;
  opacity: var(--d-op, .16);
}

/* Ribbon tag ---------------------------------------------------------- */
.inv-decor--ribbon {
  left: 50%;
  transform: translateX(-50%);
  padding: 1cqw 4cqw;
  background: var(--d-color);
  color: var(--d-bg, #fff);
  font-size: 2.2cqw;
  letter-spacing: .3em;
  text-transform: uppercase;
  z-index: 1;
}

/* Photo / image element ----------------------------------------------- */
.inv-img {
  position: absolute;
  transform: translateX(-50%);
  overflow: hidden;
  background: rgba(0, 0, 0, .06);
  background-size: cover;
  background-position: center;
}

.inv-img.is-circle { border-radius: 50%; }
.inv-img.is-round { border-radius: 2cqw; }

.inv-img__ph {
  width: 100%; height: 100%;
  display: grid;
  place-items: center;
  color: rgba(0, 0, 0, .3);
  font-size: 6cqw;
}

/* ------------------------------------------------------- premium ribbon --- */
.inv-lock {
  position: absolute;
  z-index: 5;
  right: 0; bottom: 0;
  padding: 1.4cqw 2.6cqw;
  background: rgba(20, 16, 18, .72);
  color: #f3e6bd;
  font-family: var(--iw-font-body);
  font-size: 2.4cqw;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-top-left-radius: 2cqw;
}