/*
 * The shop's own rules over a theme zip's stylesheets (Undangan Digital Part 37, decision UD-25): the shop adds this
 * file and its <link>, after the theme's own stylesheets, to every zip that draws customers' invitations when it
 * prepares the zip (decision UD-24). The team's css/base.css is one file for every theme of a kind, so these rules
 * mend it for all of them at once, each in its own colours (the theme's variables).
 */

/* "Ucapan & Doa" in the page's own scroll (the owner: "fix double scroll on ucapan & doa section, I want we use
   single scroll"): base.css held the wishes in a box 26 rem tall that scrolled inside the page — two scrolls on a
   phone. The list grows with its wishes: a customer's page shows ten a page with its pager, the demo a handful. */
.wishes {
  max-height: none;
  overflow: visible;
}

/* The reply form's fields line up (the owner: "fix mis-aligned css on contact form"): base.css gave every field
   the same padding but left each select the browser's own look — its own line height (49 px beside the inputs'
   52 on a phone), its own text inset (4 px further in) and an arrow against the border. Every field is drawn
   alike now: the page's line height, the team's padding and border, no browser look (iOS's corners too). */
.field input:not([type="checkbox"], [type="radio"]),
.field select,
.field textarea {
  -webkit-appearance: none;
  appearance: none;
  line-height: inherit;
}

/* A select's arrow, drawn by the shop in the theme's muted colour (a dark theme's too): a thin chevron of two
   strokes 14 px from the end — each stroke a soft-edged diagonal line through a 6 px square —, room kept for it
   so a long choice never runs under it. */
.field select {
  --aa-arrow: var(--muted, currentColor);
  padding-inline-end: 40px;
  background-image:
    linear-gradient(45deg, transparent 40%, var(--aa-arrow) 45% 55%, transparent 60%),
    linear-gradient(-45deg, transparent 40%, var(--aa-arrow) 45% 55%, transparent 60%);
  background-position:
    right 20px center,
    right 14px center;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* The background music's button (decisions UD-20, UD-21): the shop's live renderer draws it when the invitation
   has a song — one round button in the corner, as the shop's own guest page draws it, in the theme's own button
   colours ("Buka Undangan"'s: a dark theme's deep colour is its page's, and the button would vanish into it),
   under the cover (#gate is 50) and over the page and its petals (.fx is 40), clear of an iPhone's home indicator
   and rounded corners (the page is viewport-fit=cover). Its icon says what plays: a note while the song plays,
   the note struck through while it is paused. */
.aa-music {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: 50%;
  background: var(--btn-bg, var(--deep, #333333));
  color: var(--btn-ink, var(--on-deep, #ffffff));
  box-shadow: var(--btn-shadow, 0 10px 24px rgb(0 0 0 / 0.18));
  cursor: pointer;
}

/* A song that cannot be played takes its button away (`hidden` would lose to the button's flex), and each icon
   shows only in its own state. */
.aa-music[hidden],
.aa-music[aria-pressed="true"] .aa-music__off,
.aa-music[aria-pressed="false"] .aa-music__on {
  display: none;
}

/* The icon at the size the shop's own button draws it (24 px in 44). */
.aa-music .ic {
  width: 24px;
  height: 24px;
}

/* The wishes' pager the shop's live renderers draw (ten wishes a page): the page before at the start, the page
   after at the end, under the last wish. Neither team stylesheet has it. */
.wishes__pager {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

/* A birthday's, an aqiqah's, a khitanan's, an open house's and a wisuda's reply form take the wish too (decisions
   UD-28–UD-31, UD-33: the shop takes a wish with its reply; the team's forms of those kinds had none and their wishes
   a form of their own): the field drawn as their stylesheets draw the form's other fields, in the theme's colours —
   scoped to those zips by their codes' letters (a wedding's stylesheet draws its own). */
body[data-theme^="B"] .field textarea,
body[data-theme^="A"] .field textarea,
body[data-theme^="K"] .field textarea,
body[data-theme^="O"] .field textarea,
body[data-theme^="G"] .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--field-line, var(--card-line));
  border-radius: 12px;
  background: var(--field-bg, #ffffff);
  color: var(--field-ink, var(--ink));
  font: inherit;
  line-height: 1.4;
  resize: vertical;
}

/* Its focus, their stylesheets' for the other fields. */
body[data-theme^="B"] .field textarea:focus,
body[data-theme^="A"] .field textarea:focus,
body[data-theme^="K"] .field textarea:focus,
body[data-theme^="O"] .field textarea:focus,
body[data-theme^="G"] .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(0 0 0 / 0.06);
}

/* The shop's events on a khitanan's page (decision UD-30): the team's template has no part for them, so the shop's
   renderer draws each as the theme's details card (a .dts each); stacked, they keep the room of the theme's other
   cards between them. */
.evs {
  display: grid;
  gap: 14px;
}

/* The programme on an open house's and a wisuda's page (decisions UD-31, UD-33): the shop keeps it as one picture,
   and the team's templates have no part for it, so the shop's renderer puts it in the theme's own card — the picture whole, its words never
   cropped, rounded inside the card's corners — and the whole picture is the button that enlarges it. */
.rundown {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.rundown__img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* No sticker over the cover's words on a small phone (decision UD-37, the owner: "fix the truncated text … check the
   other themes"): on the cover the team pins each sticker at a fixed height while the photo above the words narrows
   with the screen, so below 390 px — the width the designs were drawn at — the words rise into the sticker on their
   right. Measured over all sixty themes, three meet it on a real phone (360–389 px): these stickers rise at the rate
   the words do (B02's 0.87 px, B01's and B09's 0.67 px for every px of screen under 390), which keeps the picture
   the designer drew at 390 px. Under 360 px (no common phone) the same rule goes on rising. The product page's phone
   and the editor's side preview lay every theme out at 390 px (invitation.css, invitation-editor.css). */
@media (max-width: 389px) {
  body[data-theme="B01"] .gate__in .o1 {
    top: calc(168px - (390px - 100vw) * 0.67);
  }

  /* B02's two unicorns flank the words level with each other: both rise, so the pair stays as drawn. */
  body[data-theme="B02"] .gate__in .o1 {
    top: calc(236px - (390px - 100vw) * 0.87);
  }

  body[data-theme="B02"] .gate__in .o2 {
    top: calc(260px - (390px - 100vw) * 0.87);
  }

  /* B09's roses and disco ball flank the words: both rise. */
  body[data-theme="B09"] .gate__in .o2 {
    top: calc(210px - (390px - 100vw) * 0.67);
  }

  body[data-theme="B09"] .gate__in .o3 {
    top: calc(236px - (390px - 100vw) * 0.67);
  }
}

/* The same on the invitation's first screen inside (decision UD-37): its stickers too stand over its words, sized by
   the screen but pinned at a fixed height. There the picture is clear from 412 px — at 390 px B02's sleeping
   unicorn and B09's roses already touched the title —, so under 412 px the pair beside the title rises at the
   rate the title does (B01's 0.73 px, B02's 0.6, B09's 0.65 for every px under 412). */
@media (max-width: 411px) {
  body[data-theme="B01"] .sec--hero .o1 {
    top: calc(205px - (412px - 100vw) * 0.73);
  }

  body[data-theme="B02"] .sec--hero .o2 {
    top: calc(250px - (412px - 100vw) * 0.6);
  }

  body[data-theme="B02"] .sec--hero .o3 {
    top: calc(290px - (412px - 100vw) * 0.6);
  }

  body[data-theme="B09"] .sec--hero .o2 {
    top: calc(236px - (412px - 100vw) * 0.65);
  }

  body[data-theme="B09"] .sec--hero .o3 {
    top: calc(262px - (412px - 100vw) * 0.65);
  }
}

/* B09's "Sweet Seventeen" is a gradient painted into its letters (`background-clip: text`), and a background paints
   only inside its box: at the title's line height of 0.9 Great Vibes' capitals reach above it, so the top of the "S"
   was cut off (the owner's screenshot of the cover). Room above and below the words holds the whole swash; the same
   negative margins keep the title block where the team drew it. */
body[data-theme="B09"] .ttl__theme span {
  padding-block: 0.35em 0.2em;
  margin-block: -0.35em -0.2em;
}