/*
 * The digital invitation's product page (Undangan Digital Part 5, the produk handoff's invitation.css) — what it
 * adds to the product page: css/page/product.css stays in charge of the head, the columns, the buy box, the
 * tabs and the buy bar. Loaded by `page/product.html` only for an invitation product, together with
 * `css/page/invitation-cover.css` (the theme cards' covers: since decision UD-32 each a picture). Scoped under `.aa`
 * like every storefront rule; colours are the design system's tokens only, premium in the shop's gold
 * (decision 144: premium = gold, basic = silver, as the add-ons).
 *
 * Parts: the live demo (a real invitation in a phone, its themes beside it — or, for a kind with no theme yet,
 * the note that they are coming), the theme cards, the two plans as cards, the comparison table, the four steps,
 * the FAQ, the buy box's upsell note. Nothing here is set inline: the CSP forbids a style attribute.
 */

/* ---------- Icons (one rule set for every icon of this page, so no rule fights another) ---------- */

/* An icon is sized by `--_size` (BeerCSS clips it by its box, not its font size); 20 px by default. */
.aa .iv-ic {
  --_size: 20px;
  font-size: 20px;
  flex: none;
}

/* The toggle's and the upsell note's icons are 18 px, the "Paling lengkap" star 16. */
.aa .iv-ic.sm {
  --_size: 18px;
  font-size: 18px;
}

.aa .iv-ic.xs {
  --_size: 16px;
  font-size: 16px;
}

/* What a plan has: a filled check. */
.aa .iv-ic.yes {
  color: var(--aa-on-success-container);
  font-variation-settings: "FILL" 1;
}

/* What a plan lacks: a quiet outline mark. */
.aa .iv-ic.no {
  color: var(--outline);
  font-variation-settings: "FILL" 0;
}

/* The gold of Premium. */
.aa .iv-ic.gold {
  color: var(--aa-gold-ink);
}

/* In the comparison table an icon sits before its word. */
.aa .iv-compare .iv-ic {
  vertical-align: -4px;
  margin-right: 4px;
}

/* ---------- Live demo: a real invitation in a phone, its themes beside it ---------- */

/* The demo's panel: the phone on the left, the choices on the right (one column on a phone). */
.aa .iv-demo {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 32px;
  padding: 28px;
  border-radius: 28px;
  background: var(--aa-tint);
}

/* A kind with no theme to wear yet (Part 45, decision UD-32): no phone, the notice takes the whole band. */
.aa .iv-demo.is-waiting {
  grid-template-columns: minmax(0, 1fr);
}

/* The demo's first column (decision UD-36): the phone and, under it, the name of the theme it shows. */
.aa .iv-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

/* "Tema dipilih: Unicorn & Pelangi Pastel": a quiet label pill, its icon, the theme's name in the text's colour;
   a long name wraps inside the phone's width. */
.aa .iv-chosen {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin: 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--aa-raised);
  box-shadow: inset 0 0 0 1px var(--outline-variant);
  color: var(--on-surface-variant);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

.aa .iv-chosen > i {
  --_size: 18px;
  flex: none;
  font-size: 18px;
  color: var(--primary);
}

.aa .iv-chosen b {
  color: var(--on-surface);
  font-weight: 650;
}

/* The phone's frame: dark bezel, the notch, the invitation itself in an iframe. Its screen is
   `--iv-screen-w` × `--iv-screen-h` px (unitless, so the scale below can be worked out from them). */
.aa .iv-phone {
  --iv-screen-w: 320;
  --iv-screen-h: 660;
  --iv-scale: calc(var(--iv-screen-w) / 390);
  position: relative;
  width: calc(var(--iv-screen-w) * 1px + 20px);
  height: calc(var(--iv-screen-h) * 1px + 20px);
  padding: 10px;
  border-radius: 46px;
  background: #1b1b1f;
  box-shadow: var(--elevate3);
  overflow: clip;
}

/* The invitation as a real phone draws it (decision UD-37, the owner: "fix the truncated text on product
   preview"): the screen here is 280–320 px, narrower than any phone a guest holds, and there the themes' stickers
   covered their own words (15 of 60 covers). So the theme lays out at 390 px — the width the designs were drawn
   at, where every cover is clear — and is scaled down into the bezel, its corners kept at 36 px on the screen.
   White behind it while it loads. */
.aa .iv-phone iframe {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 390px;
  height: calc(var(--iv-screen-h) * 1px / var(--iv-scale));
  border: 0;
  border-radius: calc(36px / var(--iv-scale));
  background: #fff;
  display: block;
  transform: scale(var(--iv-scale));
  transform-origin: 0 0;
}

/* The notch is a drawing only: it must never catch a tap meant for the invitation. */
.aa .iv-phone .notch {
  position: absolute;
  top: 18px;
  left: 50%;
  width: 88px;
  height: 22px;
  margin-left: -44px;
  border-radius: 12px;
  background: #1b1b1f;
  z-index: 1;
  pointer-events: none;
}

/* The choices beside the phone, stacked; min-width 0 lets the theme row scroll inside it. */
.aa .iv-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* The design's reset zeroes the margins of headings and paragraphs: the column's gap spaces them. */
.aa .iv-side > :is(h2, p) {
  margin: 0;
}

/* Basic / Premium view of the same demo: two links that target the iframe (`data-iv-seg`). */
.aa .iv-seg {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  border-radius: 999px;
  background: var(--aa-raised);
  box-shadow: inset 0 0 0 1px var(--outline-variant);
  align-self: flex-start;
}

/* One half of the toggle: a pill, filled while it is the view shown (server: aria-current, script: aria-pressed). */
.aa .iv-seg a {
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  background: none;
  color: var(--on-surface-variant);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* The view shown now. */
.aa .iv-seg a:is([aria-current="true"], [aria-pressed="true"]) {
  background: var(--primary);
  color: var(--on-primary);
}

/* The one line under the toggle: what the view shown leaves out or adds. */
.aa .iv-segnote {
  font-size: 13px;
  line-height: 18px;
  color: var(--on-surface-variant);
}

/* The themes' heading and, at its end, the counter and (once the script finds the row longer than it shows) the
   two arrows. Where the column is too narrow for both on one line (1280, 1100 and 601 px), the tools go to a line
   of their own instead of squeezing the heading's words onto two or four lines. */
.aa .iv-th-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-top: 4px;
}

/* The counter and the arrows, at the line's end: beside the heading, or on their own line under it. */
.aa .iv-th-tools {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  margin-inline-start: auto;
}

/* "2 / 10": which card the phone shows, its place in the text's colour. */
.aa .iv-th-count {
  font-size: 14px;
  line-height: 20px;
  color: var(--on-surface-variant);
  white-space: nowrap;
}

.aa .iv-th-count b {
  color: var(--on-surface);
  font-weight: 650;
}

/* The arrows: drawn hidden for a page without the script (the row still scrolls), shown by the script. */
.aa .iv-th-nav {
  display: flex;
  flex: none;
  gap: 8px;
}

.aa .iv-th-nav[hidden] {
  display: none;
}

/* One arrow: a round outlined button the size of the toggle's pills; at the row's end it rests (aria-disabled,
   so a keyboard user's focus stays on it). */
.aa .iv-th-btn {
  inline-size: 40px;
  block-size: 40px;
  min-inline-size: 40px;
  padding: 0;
  margin: 0;
  border-radius: 999px;
  background: var(--aa-raised);
  color: var(--on-surface);
  box-shadow: inset 0 0 0 1px var(--outline-variant);
}

.aa .iv-th-btn[aria-disabled="true"] {
  opacity: 0.38;
  cursor: default;
}

/* The themes: one row of real covers that slides sideways at every size (decision UD-36), each card snapping to
   the row's start; the next card shows in part, so the row says there is more. The 4 px of room around the cards
   keep the hover lift and the focus ring inside the scroll box (which clips both ways). */
.aa .iv-themes {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 4px;
  margin: -4px -4px 0;
  padding: 4px 4px 8px;
  scrollbar-width: thin;
}

/* With the script the arrows (or a swipe) move the row: no scrollbar under the covers, as on a phone. */
.aa .iv-demo.is-sliding .iv-themes {
  scrollbar-width: none;
}

.aa .iv-demo.is-sliding .iv-themes::-webkit-scrollbar {
  display: none;
}

/* While more cards wait on the right, the row's right edge fades out (the script marks it), so the card cut there
   reads as "more this way". The left edge never fades: the row snaps to a card's start, so a card stands whole
   there and a fade would dim it. */
.aa .iv-demo.is-sliding .iv-themes.more-after {
  mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}

/* A theme card is a link around a mini cover, its name and its layout; it targets the iframe by name. Its width
   is fixed, measured so the next card shows in part beside the phone at every width from 601 px up (three and a
   part at 1440 and 820 px, two and a part at 1280 and 1100 px, one and a half at 601 px). */
.aa .iv-th {
  flex: 0 0 120px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border-radius: 20px;
  background: var(--aa-raised);
  text-align: left;
  color: var(--on-surface);
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--outline-variant);
  transition:
    box-shadow 0.15s,
    transform 0.15s;
}

/* A little lift under the pointer; not for visitors who asked for less motion. */
.aa .iv-th:hover {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .aa .iv-th {
    transition: none;
  }

  .aa .iv-th:hover {
    transform: none;
  }
}

/* The theme in the phone now. */
.aa .iv-th:is([aria-current="true"], [aria-pressed="true"]) {
  box-shadow: inset 0 0 0 2px var(--primary);
  background: var(--primary-container);
  color: var(--on-primary-container);
}

/* The theme's name and layout under its cover. */
.aa .iv-th .nm {
  font-size: 14px;
  line-height: 20px;
  font-weight: 650;
  padding: 0 4px;
}

/* "Baru" after a theme's name (Part 18): one small pill in the name's line, never broken across lines, in the
   primary colours so it also shows on the card the phone shows now (its container colour is the card's). */
.aa .iv-th .iv-new {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
  vertical-align: 1px;
}

.aa .iv-th-h {
  margin: 0;
}

.aa .iv-th-more {
  margin: 0;
}

/* "Buka demo di tab baru" and the kinds of event: plain rows. */
.aa .iv-demo-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.aa .iv-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.aa .iv-kinds .lbl {
  font-size: 13px;
  color: var(--on-surface-variant);
  margin-right: 2px;
}

/* A kind of event: a small label, not a control (BeerCSS's .chip would be 44 px tall on a phone). */
.aa .iv-kind {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--aa-raised);
  box-shadow: inset 0 0 0 1px var(--outline-variant);
  font-size: 12px;
}

/* ---------- The two plans ---------- */

/* A section of the page (plans, comparison): a head and its content, scrolled to below the sticky header. */
.aa .iv-sec {
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-margin-top: 96px;
}

.aa .iv-sec > .iv-sec-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.aa .iv-sec .iv-sec-head :is(h2, p),
.aa .iv-sec > * {
  margin: 0;
}

/* Two cards side by side; stacked on a tablet. */
.aa .iv-plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* A plan: silver by default, a gold inset line for Premium, the primary line for the plan chosen. */
.aa .iv-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-radius: 28px;
  background: var(--aa-raised);
  box-shadow:
    var(--elevate1),
    inset 0 0 0 1px var(--outline-variant);
}

.aa .iv-plan.is-premium {
  box-shadow:
    var(--elevate2),
    inset 0 0 0 2px var(--aa-gold-line);
}

.aa .iv-plan.is-chosen {
  box-shadow:
    var(--elevate2),
    inset 0 0 0 2px var(--primary);
}

.aa .iv-plan-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.aa .iv-plan-head h3 {
  margin: 0;
}

/* "Paling lengkap": the gold tag on Premium's top edge. */
.aa .iv-plan-tag {
  position: absolute;
  top: -12px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--aa-gold-metal, var(--aa-gold));
  color: #3b2a00;
  font-size: 12px;
  font-weight: 700;
  box-shadow: var(--elevate1);
}

.aa .iv-plan-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 8px;
}

.aa .iv-plan-price b {
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.aa .iv-plan .lead {
  margin: 0;
  color: var(--on-surface-variant);
}

/* The feature lines: a check for what the plan has, a quiet remove mark for what it lacks. */
.aa .iv-plan ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.aa .iv-plan li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 20px;
}

.aa .iv-plan li.no {
  color: var(--on-surface-variant);
}

.aa .iv-plan li b {
  font-weight: 650;
}

/* The card's button (a `?lisensi=` link): full width at the card's foot; filled once the plan is chosen. */
.aa .iv-plan > .button {
  margin: auto 0 0;
  inline-size: 100%;
  box-sizing: border-box;
}

.aa .iv-plan.is-chosen > .button {
  background: var(--primary);
  color: var(--on-primary);
}

/* The tick before "Paket dipilih" is there only for the chosen plan. */
.aa .iv-plan .iv-chk {
  display: none;
}

.aa .iv-plan.is-chosen .iv-chk {
  display: inline-flex;
}

/* ---------- Comparison table ---------- */

/* The table scrolls sideways inside this box on a narrow screen; the page itself never does. */
.aa .iv-compare-wrap {
  overflow-x: auto;
  border-radius: 24px;
  background: var(--aa-raised);
  box-shadow: var(--elevate1);
}

.aa .iv-compare {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
}

/* BeerCSS rounds every element: a cell with a bottom line takes square corners. */
.aa .iv-compare :is(th, td) {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--outline-variant);
  border-radius: 0;
  font-size: 14px;
  line-height: 20px;
  vertical-align: top;
}

.aa .iv-compare tbody th {
  font-weight: 500;
  background: none;
}

.aa .iv-compare thead th {
  font-weight: 700;
  background: var(--surface-container-low);
}

.aa .iv-compare thead th.is-premium {
  color: var(--aa-gold-ink);
}

.aa .iv-compare :is(td, th):not(:first-child) {
  width: 26%;
}

.aa .iv-compare tr:last-child > * {
  border-bottom: 0;
}

.aa .iv-compare .no {
  color: var(--on-surface-variant);
}

/* ---------- How it works: four steps (the support tab's step cards) ---------- */

.aa .iv-steps {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.aa .iv-steps .sup-step b {
  font-size: 15px;
  line-height: 20px;
}

.aa .iv-steps .sup-step span.t-bs {
  color: var(--on-surface-variant);
}

/* ---------- FAQ ---------- */

/* Each question is a <details>: the page works without a script. */
.aa .iv-faq {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aa .iv-faq details {
  border-radius: 20px;
  background: var(--aa-inset);
}

.aa .iv-faq summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  font-weight: 650;
  cursor: pointer;
  border-radius: 20px;
}

.aa .iv-faq summary::-webkit-details-marker {
  display: none;
}

.aa .iv-faq summary i {
  margin-left: auto;
  transition: transform 0.2s;
}

.aa .iv-faq details[open] summary i {
  transform: rotate(180deg);
}

.aa .iv-faq details > div {
  padding: 0 20px 18px;
  color: var(--on-surface-variant);
}

.aa .iv-faq details > div p {
  margin: 0 0 8px;
}

/* ---------- The buy box's upsell note ("Butuh RSVP atau impor tamu dari Excel? Lihat Premium") ---------- */

/* The `hidden` attribute app.js sets must win over this rule's `display`. */
.aa .iv-upnote {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--aa-tint);
  font-size: 13px;
  line-height: 18px;
  color: var(--on-surface-variant);
}

.aa .iv-upnote[hidden] {
  display: none;
}

.aa .iv-upnote a {
  font-weight: 650;
  color: var(--primary);
  text-decoration: underline;
}

/* ---------- Tablets ---------- */

/* The phone gets narrower and the steps pair up. */
@media (max-width: 1200px) {
  .aa .iv-demo {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 24px;
    padding: 20px;
  }

  .aa .iv-phone {
    --iv-screen-w: 280;
    --iv-screen-h: 580;
  }

  .aa .iv-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Plans stack; every control is at least 44 px tall (the storefront's tap target rule). */
@media (max-width: 992px) {
  .aa .iv-plans {
    grid-template-columns: minmax(0, 1fr);
  }

  .aa .iv-seg a {
    height: 44px;
  }

  .aa .iv-th-btn {
    inline-size: 44px;
    block-size: 44px;
    min-inline-size: 44px;
  }

  .aa .iv-faq summary {
    min-height: 44px;
  }
}

/* ---------- Phones: the demo comes first and the phone frame gives way to the demo itself ---------- */

@media (max-width: 600px) {
  .aa .iv-demo {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
    border-radius: 24px;
    gap: 16px;
  }

  /* A phone's own screen holds a 320 px phone from 384 px up; narrower screens get one that still fits beside
     the page's gutters (296 px from 360, 256 below): a fixed size, so the scale is known. */
  .aa .iv-phone {
    --iv-screen-w: 300;
    --iv-screen-h: 540;
    margin: 0 auto;
    border-radius: 40px;
  }

  .aa .iv-phone iframe {
    border-radius: calc(30px / var(--iv-scale));
  }

  /* The row runs to the panel's edges and is swiped: no arrows, no scrollbar. */
  .aa .iv-themes {
    gap: 10px;
    margin-inline: -16px;
    padding-inline: 16px;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
  }

  .aa .iv-themes::-webkit-scrollbar {
    display: none;
  }

  .aa .iv-th-nav {
    display: none;
  }

  .aa .iv-th {
    flex-basis: 132px;
  }

  .aa .iv-plan {
    padding: 20px;
    border-radius: 24px;
  }

  .aa .iv-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .aa .iv-seg {
    align-self: stretch;
  }

  .aa .iv-seg a {
    flex: 1;
    justify-content: center;
  }
}

/* The phone on the narrowest screens (decision UD-37): the sizes that still fit their gutters. */
@media (max-width: 383px) {
  .aa .iv-phone {
    --iv-screen-w: 276;
  }
}

@media (max-width: 359px) {
  .aa .iv-phone {
    --iv-screen-w: 236;
  }
}