/* ==========================================================================
   Online invitation — the buyer's screens.

   .uie-invites / .uie-invite: My account → "Moje pozivnice", and the same
   screens on their own page at /pozivnica/{token}/podesi/ (body.uie-manage).
   The guest's page has its own stylesheet since 1.48: invite-page.css.

   px, not rem: Bricks sets html{font-size:62.5%}.
   ========================================================================== */

/* Read by screen readers only (the guest list's "Ukloni" column). */
.uie-inv__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   2. My account: the buyer's screens — and the same screens on their own page
   at /pozivnica/{token}/podesi/, for a purchase made without an account.
   ========================================================================== */

body.uie-manage {
  margin: 0;
  background: #fdfbf8;
  color: #211e1b;
  font: 400 15px/1.6 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.uie-manage__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 14px max(16px, env(safe-area-inset-left, 0px));
  border-bottom: 1px solid #efe9e1;
  background: #fff;
}

.uie-manage__shop {
  display: inline-flex;
  align-items: center;
  color: #211e1b;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 22px;
  text-decoration: none;
}

.uie-manage__shop img {
  display: block;
  width: auto;
  height: 34px;
  max-width: 220px;
  object-fit: contain;
}

@media (max-width: 600px) {
  .uie-manage__shop img { height: 28px; max-width: 170px; }
}

.uie-manage__who {
  color: #6b6259;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.uie-manage__page {
  max-width: 1040px;
  margin: 0 auto;
  padding-block: 26px 48px;
  padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
}

.uie-manage__note {
  margin: 22px 2px 0;
  color: #6b6259;
  font-size: 12.5px;
  line-height: 1.6;
}

/*
 * A phone: the details form is long, and "Sačuvaj" at its foot is a scroll
 * away from wherever the buyer is typing. On this page — which is nothing but
 * the form — it follows them instead.
 */
@media (max-width: 720px) {
  body.uie-manage .uie-manage__page { padding-bottom: 96px; }

  body.uie-manage .uie-form > .uie-btn--primary {
    position: fixed;
    right: max(14px, env(safe-area-inset-right, 0px));
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    left: max(14px, env(safe-area-inset-left, 0px));
    z-index: 20;
    width: auto;
    /* a halo of page colour, so the field behind it does not run under the
       button's edge */
    box-shadow:
      0 0 0 12px rgba(253, 251, 248, .94),
      0 18px 44px -20px rgba(33, 30, 27, .85);
  }
}

.uie-invites,
.uie-invite {
  --uie-a-ink: #211e1b;
  --uie-a-muted: #6b6259;
  --uie-a-line: #efe9e1;
  --uie-a-line-strong: #e2d9ce;
  --uie-a-surface: #fdfbf8;
  --uie-a-raised: #ffffff;
  --uie-a-sunken: #f4f0ea;
  --uie-a-accent: #7d4a34;
  --uie-a-accent-bg: #f4e7df;
  --uie-a-focus: #9a5f45;
  --uie-a-danger: #a93a34;
  --uie-a-serif: "Cormorant Garamond", Georgia, serif;
  --uie-a-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--uie-a-ink);
  font-family: var(--uie-a-sans);
}

/* Some themes leave inputs on content-box, so width:100% plus padding runs
   past the panel. */
.uie-invites *,
.uie-invite * { box-sizing: border-box; }

/* An author display beats the browser's [hidden]; these screens hide that way. */
.uie-invite [hidden] { display: none !important; }

.uie-invite-order {
  margin-top: 26px;
  padding: 20px;
  border: 1px solid var(--uie-a-line);
  border-radius: 18px;
  background: var(--uie-a-raised);
}

.uie-invite-order .uie-invite-card { border: 0; padding: 0; }
.uie-invite-order .uie-invites__lead { margin-bottom: 14px; }

.uie-invites__lead {
  margin: 0 0 20px;
  color: var(--uie-a-muted);
  font-size: 14px;
  line-height: 1.6;
  max-width: 62ch;
}

.uie-invites__list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.uie-invite-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--uie-a-line);
  border-radius: 18px;
  background: var(--uie-a-raised);
}

.uie-invite-card__art {
  overflow: hidden;
  border: 1px solid var(--uie-a-line);
  border-radius: 10px;
  background: var(--uie-a-sunken);
  aspect-ratio: 4 / 5;
}

.uie-invite-card__art img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

.uie-invite-card__body { min-width: 0; }

.uie-invite-card__body h3 {
  margin: 8px 0 2px;
  font-family: var(--uie-a-serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
}

.uie-invite-card__when { margin: 0; color: var(--uie-a-muted); font-size: 13px; }

.uie-invite-card__todo,
.uie-invite-card__tally { margin: 10px 0 0; font-size: 13px; color: var(--uie-a-muted); }

.uie-invite-card__tally strong {
  font-family: var(--uie-a-serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--uie-a-ink);
  font-variant-numeric: tabular-nums;
}

.uie-invite-card__tally span { margin: 0 6px; color: var(--uie-a-line-strong); }

.uie-invite-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.uie-chip {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--uie-a-sunken);
  color: var(--uie-a-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
}

.uie-chip--live { background: #e6f1eb; color: #2e7256; }
.uie-chip--closed { background: #f1ece6; color: #6b6259; }
.uie-chip--draft { background: var(--uie-a-accent-bg); color: var(--uie-a-accent); }

/* ---------- one invitation ---------- */

.uie-invite__back { margin: 0 0 14px; font-size: 13px; }
.uie-invite__back a { color: var(--uie-a-muted); text-decoration: none; }
.uie-invite__back a:hover { color: var(--uie-a-accent); }

/* ---------- who this is for, and what is left to do ---------- */

.uie-invite__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
}

.uie-invite__thumb {
  flex: 0 0 auto;
  width: 64px;
  overflow: hidden;
  border: 1px solid var(--uie-a-line);
  border-radius: 10px;
  background: var(--uie-a-sunken);
}

.uie-invite__thumb img {
  display: block;
  width: 100%;
  height: auto;
}

.uie-invite__head-body { min-width: 0; }
.uie-invite__chip { margin: 0 0 6px; }

.uie-invite__name {
  margin: 0;
  font-family: var(--uie-a-serif);
  font-size: clamp(26px, 22px + 1vw, 34px);
  font-weight: 500;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.uie-invite__next {
  margin: 4px 0 0;
  color: var(--uie-a-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

/* The form is the job; sharing and the guest list sit beside it where there
   is room, and under it on a phone — which is also the order in the markup. */
.uie-invite__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

@media (min-width: 900px) {
  /* The form leads and takes the wider half; sharing sits beside it. The
     guest list is a table, so it keeps the full width underneath. */
  .uie-invite__grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
}

.uie-panel {
  padding: 20px;
  border: 1px solid var(--uie-a-line);
  border-radius: 18px;
  background: var(--uie-a-raised);
}

.uie-panel__title {
  margin: 0 0 4px;
  font-family: var(--uie-a-serif);
  font-size: 24px;
  font-weight: 500;
}

.uie-panel__lead { margin: 0 0 16px; color: var(--uie-a-muted); font-size: 13px; }

/* Not sticky: the shop header is sticky too, so the panel slid under it and
   rode over the guest list below (reported 2026-09-17). */
.uie-invite__share { align-self: start; }

.uie-invite__label {
  margin: 0 0 4px;
  color: var(--uie-a-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.uie-invite__link { margin: 0 0 12px; overflow-wrap: anywhere; font-size: 13px; }
.uie-invite__link a { color: var(--uie-a-accent); }

.uie-invite__share-actions { display: grid; gap: 8px; }

.uie-invite__label--spaced { margin-top: 16px; }

.uie-invite__channels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.uie-invite__channels .uie-btn {
  flex: 1 1 82px;
  min-height: 40px;
  padding: 0 12px;
  font-size: 13px;
  text-decoration: none;
}

.uie-invite__qr {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--uie-a-line);
}

.uie-invite__qr canvas {
  width: 96px;
  height: 96px;
  max-width: 100%;
  border: 1px solid var(--uie-a-line);
  border-radius: 8px;
  background: #fff;
}

.uie-invite__qr .uie-btn { margin-top: 10px; }

.uie-invite__hint { margin: 0; color: var(--uie-a-muted); font-size: 12.5px; line-height: 1.5; }
.uie-invite__hint--center { padding: 22px 0 6px; text-align: center; }

/* ---------- the details form ---------- */

.uie-form { display: grid; gap: 14px; }

.uie-field { display: grid; min-width: 0; gap: 6px; }

.uie-field > span {
  color: var(--uie-a-muted);
  font-size: 11.5px;
  font-weight: 600;
}

.uie-invite .uie-field input,
.uie-invite .uie-field textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 10px 13px;
  border: 1px solid #ddd0c2;
  border-radius: 11px;
  background: #fff;
  color: var(--uie-a-ink);
  font: 400 15px/1.4 var(--uie-a-sans);
}

.uie-invite .uie-field textarea { min-height: 70px; resize: vertical; }

.uie-invite .uie-field input:focus,
.uie-invite .uie-field textarea:focus {
  border-color: var(--uie-a-focus);
  outline: none;
  box-shadow: 0 0 0 3px rgba(154, 95, 69, .15);
}

/* Date and time inputs carry their own minimum width; without auto-fit they
   push out of the panel on a narrow account column. */
.uie-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }

.uie-states {
  display: grid;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  border: 0;
}

.uie-states legend {
  padding: 0 0 8px;
  color: var(--uie-a-muted);
  font-size: 11.5px;
  font-weight: 600;
}

.uie-state { position: relative; display: block; }

.uie-state input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.uie-state span {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--uie-a-line-strong);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}

.uie-state strong { font-size: 13.5px; font-weight: 650; }
.uie-state small { color: var(--uie-a-muted); font-size: 12px; }

.uie-state input:checked + span {
  border-color: var(--uie-a-ink);
  background: var(--uie-a-sunken);
  box-shadow: inset 0 0 0 1px var(--uie-a-ink);
}

.uie-state input:disabled + span { opacity: .5; cursor: not-allowed; }
.uie-state input:focus-visible + span { outline: 2px solid var(--uie-a-focus); outline-offset: 2px; }

.uie-switch-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--uie-a-ink);
}

.uie-switch-row input { margin-top: 3px; }

/* 1.48 — switches as cards: the extra questions for guests, and the emails.
   The whole card is the label; the checkbox stays a real one (keyboard,
   screen readers, no JavaScript) and the pill on the right shows its state. */
/* My account styles every fieldset as a box (body.uie-account … fieldset,
   specificity 0,3,2); the repeated class outranks it. */
.uie-invite fieldset.uie-asks.uie-asks.uie-asks {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 6px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.uie-invite fieldset.uie-asks.uie-asks.uie-asks legend {
  float: left;
  width: 100%;
  margin: 0 0 4px;
  padding: 0;
  color: var(--uie-a-muted, #6b6259);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* My account sets every label in its content to display:block through a
   selector that holds an ID (:is(#customer_login, …)); no class outranks it. */
.uie-ask {
  position: relative;
  display: flex !important;
  margin: 0 !important;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 12px 14px 12px 16px;
  border: 1px solid var(--uie-a-line-strong, #e2d9ce);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.uie-ask__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.uie-ask__text {
  display: grid;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
}

.uie-ask__text strong {
  color: var(--uie-a-ink, #211e1b);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.3;
}

.uie-ask__text small {
  color: var(--uie-a-muted, #6b6259);
  font-size: 12.5px;
  line-height: 1.45;
}

.uie-ask__switch {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: #d9cfc4;
  transition: background-color 200ms ease;
}

.uie-ask__switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(33, 30, 27, .3);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.uie-ask__input:checked ~ .uie-ask__switch { background: #9a5f45; }
.uie-ask__input:checked ~ .uie-ask__switch::after { transform: translateX(18px); }

.uie-ask:has(.uie-ask__input:checked) {
  border-color: #c99e86;
  background: #fbf5f1;
}

.uie-ask__input:focus-visible ~ .uie-ask__switch {
  outline: 2px solid var(--uie-a-focus, #35648f);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .uie-ask:hover { border-color: #c99e86; }
}

@media (prefers-reduced-motion: reduce) {
  .uie-ask__switch,
  .uie-ask__switch::after { transition: none; }
}

.uie-invite__diets {
  margin: 10px 0 0;
  color: var(--uie-a-muted);
  font-size: 13px;
}

.uie-invite__diets strong { color: var(--uie-a-ink); font-weight: 600; }
.uie-guests .uie-guests__diet { color: #7d4a34; }

/* ---------- 1.49: more for the guest page, folded until opened ---------- */

.uie-more-group {
  display: grid;
  gap: 10px;
  margin-top: 6px;
}

.uie-more-group__title {
  margin: 0;
  color: var(--uie-a-muted);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.uie-more-group__title small {
  font-size: inherit;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: none;
}

.uie-more {
  border: 1px solid var(--uie-a-line-strong);
  border-radius: 14px;
  background: #fff;
}

.uie-more[open] { border-color: #c99e86; }

.uie-more__head {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 12px 16px;
  list-style: none;
  cursor: pointer;
}

.uie-more__head::-webkit-details-marker { display: none; }
.uie-more__head::marker { content: ""; }

.uie-more__head:focus-visible {
  border-radius: 13px;
  outline: 2px solid var(--uie-a-focus);
  outline-offset: 2px;
}

.uie-more__text {
  display: grid;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
}

.uie-more__text strong {
  color: var(--uie-a-ink);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.3;
}

.uie-more__text small {
  overflow: hidden;
  color: var(--uie-a-muted);
  font-size: 12.5px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uie-more__chev {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border-right: 1.6px solid var(--uie-a-muted);
  border-bottom: 1.6px solid var(--uie-a-muted);
  transform: rotate(45deg) translateY(-3px);
  transition: transform 200ms var(--uie-a-ease, ease);
}

.uie-more[open] .uie-more__chev { transform: rotate(225deg) translateY(-3px); }

.uie-more__body {
  display: grid;
  gap: 14px;
  padding: 4px 16px 18px;
}

.uie-more__add { justify-self: start; }

/* the photos */
.uie-photos { display: grid; gap: 10px; }

.uie-photos__label,
.uie-colors__label {
  margin: 0;
  color: var(--uie-a-muted);
  font-size: 11.5px;
  font-weight: 600;
}

.uie-photos__label small,
.uie-colors__label small { font-size: inherit; font-weight: 500; }

.uie-photos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.uie-photo {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: var(--uie-a-sunken);
  aspect-ratio: 1;
}

.uie-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* My account sets every label to display:block with an ID-weight selector;
   these controls need their own display and margin, hence !important. */
.uie-photo__remove {
  position: absolute !important;
  right: 6px;
  bottom: 6px;
  left: 6px;
  display: flex !important;
  margin: 0 !important;
  cursor: pointer;
}

.uie-photo__remove input,
.uie-color input {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  margin: 0;
  opacity: 0;
}

.uie-photo__remove span {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .92);
  color: var(--uie-a-ink);
  font-size: 12px;
  font-weight: 650;
}

.uie-photo:has(input:checked) img { opacity: .35; filter: grayscale(1); }

/* 1.53: a caption with each photo — a row: the photo small, its caption and "Ukloni" beside it */
.uie-photos__grid.has-captions { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }

.uie-photo.has-caption {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 6px 12px;
  overflow: visible;
  border-radius: 0;
  background: none;
  aspect-ratio: auto;
}

.uie-photo.has-caption img {
  grid-row: 1 / span 2;
  width: 76px;
  height: 76px;
  border-radius: 10px;
  background: var(--uie-a-sunken);
}

.uie-photo.has-caption .uie-photo__caption { grid-column: 2; }

.uie-photo.has-caption .uie-photo__remove {
  position: static !important;
  grid-column: 2;
  justify-self: start;
}

.uie-photo.has-caption .uie-photo__remove span {
  min-height: 30px;
  padding: 0 12px;
  background: var(--uie-a-sunken);
}

.uie-photos__grid--new .uie-photo.has-caption { outline: 0; }
.uie-photos__grid--new .uie-photo.has-caption img { outline: 2px solid #c99e86; outline-offset: -2px; }

.uie-photo__caption {
  box-sizing: border-box;
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  border: 1px solid #ddd0c2 !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: var(--uie-a-ink) !important;
  font: 400 13px/1.3 var(--uie-a-sans) !important;
}

.uie-photo__caption:focus {
  border-color: var(--uie-a-focus) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(154, 95, 69, .15);
}

.uie-photos__hint {
  margin: 0;
  color: var(--uie-a-muted);
  font-size: 12.5px;
}

.uie-photo__remove input:checked + span {
  background: var(--uie-a-danger);
  color: #fff;
}

.uie-photo__remove input:checked + span::before { content: "✓ "; white-space: pre; }

.uie-photo__remove input:focus-visible + span {
  outline: 2px solid var(--uie-a-focus);
  outline-offset: 2px;
}

.uie-drop {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 14px;
  margin: 0 !important;
  padding: 14px 16px;
  border: 1.5px dashed #cdb9a8;
  border-radius: 14px;
  background: #fdfaf7;
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .uie-drop:hover { border-color: #9a5f45; background: #fbf5f1; }
}

.uie-drop:focus-within {
  border-color: var(--uie-a-focus);
  box-shadow: 0 0 0 3px rgba(154, 95, 69, .15);
}

/* the real file input stays, over the whole card, so a tap anywhere opens it */
.uie-drop__input {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.uie-drop__icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--uie-a-accent-bg);
  color: var(--uie-a-accent);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}

.uie-drop__text { display: grid; gap: 2px; min-width: 0; }
.uie-drop__text strong { color: var(--uie-a-ink); font-size: 14px; font-weight: 650; }
.uie-drop__text small { color: var(--uie-a-muted); font-size: 12.5px; font-weight: 400; line-height: 1.45; }

.uie-photos__grid--new .uie-photo { outline: 2px solid #c99e86; outline-offset: -2px; }

.uie-photos__status {
  margin: 0;
  color: var(--uie-a-muted);
  font-size: 12.5px;
}

.uie-photos__status:empty { display: none; }

/* the day, hour by hour */
.uie-schedule {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Time and title side by side; on a column too narrow for both the title
   takes a line of its own (flex-basis beats My account's width:100%). */
.uie-schedule__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* stacked on a phone, a line keeps each time with its title */
.uie-schedule__row + .uie-schedule__row {
  padding-top: 10px;
  border-top: 1px solid var(--uie-a-line);
}

.uie-invite .uie-schedule input[type="time"] { flex: 0 0 116px; }
.uie-invite .uie-schedule input[type="text"] { flex: 1 1 150px; }

.uie-invite .uie-schedule input {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #968a7f;
  border-radius: 12px;
  background: #fff;
  color: var(--uie-a-ink);
  font: 400 16px/1.4 var(--uie-a-sans);
}

.uie-invite .uie-schedule input:focus {
  border-color: var(--uie-a-focus);
  outline: none;
  box-shadow: 0 0 0 3px rgba(154, 95, 69, .15);
}

/* the day's colours */
.uie-colors { display: grid; gap: 8px; }

/* A palette, not a list: a swatch with its name under it, four or more to a row. */
.uie-colors__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: 4px;
}

.uie-color {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin: 0 !important;
  padding: 8px 2px 6px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--uie-a-muted) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-align: center;
  cursor: pointer;
}

.uie-color__dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(33, 30, 27, .18);
  transition: box-shadow 160ms ease;
}

.uie-color__name { overflow-wrap: anywhere; }

.uie-color input:checked + .uie-color__dot {
  box-shadow: inset 0 0 0 1px rgba(33, 30, 27, .18), 0 0 0 3px #fff, 0 0 0 5px var(--uie-a-ink);
}

.uie-color:has(input:checked) { color: var(--uie-a-ink) !important; }
.uie-color input:checked ~ .uie-color__name { font-weight: 700; }

.uie-color:has(input:disabled) { opacity: .4; cursor: not-allowed; }

/* 1.53: the page's main colour — groups, and a swatch that opens a colour picker */
.uie-theme__group {
  margin: 6px 0 0;
  color: var(--uie-a-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.uie-color__dot.is-own { background: conic-gradient(#d9534f, #f0ad4e, #e8d44d, #5cb85c, #4fb3c9, #4a6fd1, #9b59b6, #d9534f); }

.uie-color input.uie-color__picker {
  top: 8px;
  left: 50%;
  width: 36px !important;
  height: 36px !important;
  padding: 0;
  border: 0;
  cursor: pointer;
  transform: translateX(-50%);
}

.uie-color:has(input:focus-visible) {
  border-color: var(--uie-a-focus);
}

@media (hover: hover) and (pointer: fine) {
  .uie-color:hover { background: var(--uie-a-sunken); }
}

/* ---------- 1.49: personal links ---------- */

.uie-invite__people { grid-column: 1 / -1; }

.uie-people__score {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
}

.uie-people__score strong {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.uie-people__score span { color: var(--uie-a-muted); font-size: 12px; }

.uie-people__note {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--uie-a-accent-bg);
  color: var(--uie-a-accent);
  font-size: 13px;
}

.uie-seg {
  display: inline-flex;
  gap: 4px;
  margin: 4px 0 10px;
  padding: 4px;
  border-radius: 12px;
  background: var(--uie-a-sunken);
}

.uie-seg button {
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--uie-a-muted);
  font: 600 13px/1 var(--uie-a-sans);
  cursor: pointer;
}

.uie-seg button.is-on {
  background: #fff;
  color: var(--uie-a-ink);
  box-shadow: 0 1px 3px rgba(33, 30, 27, .12);
}

.uie-seg button:focus-visible { outline: 2px solid var(--uie-a-focus); outline-offset: 2px; }

.uie-people {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.uie-person {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--uie-a-line);
}

.uie-person:first-child { padding-top: 6px; }

.uie-person__main { min-width: 0; }

.uie-person__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0;
  font-size: 15px;
  font-weight: 650;
}

.uie-person__name a { color: var(--uie-a-ink); text-decoration: none; overflow-wrap: anywhere; }
.uie-person__name a:hover { color: var(--uie-a-accent); text-decoration: underline; }

.uie-person__seats { color: var(--uie-a-muted); font-size: 12.5px; font-weight: 500; }

.uie-person__greeting {
  margin: 2px 0 0;
  color: var(--uie-a-accent);
  font-family: var(--uie-a-serif);
  font-size: 17px;
  font-style: italic;
}

.uie-person__status { margin: 0; }

.uie-chip--wait { background: #fbf0dc; color: #7a5310; }

.uie-person__actions {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  align-items: flex-start;
  gap: 6px;
}

.uie-btn.uie-btn--small {
  min-height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 13px;
}

.uie-btn--quiet {
  border-color: transparent;
  background: transparent;
  color: var(--uie-a-danger);
}

.uie-person__edit { flex: 1 1 100%; }
.uie-person__edit > summary { list-style: none; }
.uie-person__edit > summary::-webkit-details-marker { display: none; }
.uie-person__edit > summary::marker { content: ""; }

/* closed: only "Izmeni" in the row of buttons; open: the form under them */
.uie-person__edit:not([open]) { flex: 0 0 auto; }

.uie-person__edit[open] > summary {
  border-color: var(--uie-a-ink);
  background: var(--uie-a-sunken);
}

.uie-person__form {
  display: grid;
  gap: 12px;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--uie-a-line);
  border-radius: 14px;
  background: var(--uie-a-surface);
}

.uie-field--narrow { max-width: 140px; }

.uie-person__form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.uie-people__add {
  display: grid;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--uie-a-line);
}

.uie-people:empty + .uie-people__add,
.uie-invite__guests-head + .uie-people__add { padding-top: 0; border-top: 0; }

.uie-people__add .uie-btn { justify-self: start; }

.uie-person[hidden] { display: none; }

/* ---------- guests ---------- */

.uie-invite__guests { grid-column: 1 / -1; }

.uie-invite__guests-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.uie-tally {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 6px;
}

.uie-tally div {
  flex: 1 1 110px;
  padding: 12px 14px;
  border: 1px solid var(--uie-a-line);
  border-radius: 13px;
  background: var(--uie-a-sunken);
}

/* Sans, not the serif: its zero reads as a letter at a glance. */
.uie-tally strong {
  display: block;
  font-family: var(--uie-a-sans);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.uie-tally span { color: var(--uie-a-muted); font-size: 12px; }
.uie-tally .is-yes strong { color: #2e7256; }
.uie-tally .is-no strong { color: var(--uie-a-danger); }
.uie-tally .is-wait strong { color: #7a5310; }

.uie-guests { width: 100%; margin-top: 10px; border-collapse: collapse; }

.uie-guests th {
  padding: 8px 10px;
  border-bottom: 1px solid var(--uie-a-line);
  color: var(--uie-a-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-align: left;
}

.uie-guests td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--uie-a-line);
  font-size: 14px;
  vertical-align: middle;
}

.uie-guests tr:last-child td { border-bottom: 0; }
.uie-guests td small { display: block; color: var(--uie-a-muted); font-size: 12.5px; }
.uie-guests__num { width: 74px; text-align: right; font-variant-numeric: tabular-nums; }
.uie-guests__when { width: 90px; color: var(--uie-a-muted); font-size: 12.5px; white-space: nowrap; }

.uie-guests__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #a39a90;
  font-size: 17px;
  line-height: 1;
  text-decoration: none;
}

.uie-guests__remove:hover { background: #f8e6e4; color: var(--uie-a-danger); }

@media (max-width: 900px) {
  .uie-invite__preview { max-width: 260px; }
}

@media (max-width: 560px) {
  .uie-invite-card { grid-template-columns: 74px minmax(0, 1fr); gap: 12px; }
  .uie-invite__qr { grid-template-columns: 1fr; }
  .uie-guests__when { display: none; }
  .uie-guests thead th:nth-child(4) { display: none; }
}

/* ---------- 1.49.2: the link's address ---------- */

.uie-link-edit {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--uie-a-line);
}

.uie-link-edit__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  color: var(--uie-a-accent);
  font-size: 13.5px;
  font-weight: 650;
  list-style: none;
  cursor: pointer;
}

.uie-link-edit__toggle::-webkit-details-marker { display: none; }
.uie-link-edit__toggle::marker { content: ""; }
.uie-link-edit__toggle::before { content: "✎"; font-weight: 400; }

.uie-link-edit__form { display: grid; gap: 8px; margin-top: 6px; }
.uie-link-edit__form .uie-field { margin: 0 !important; }

.uie-link-edit__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}

.uie-link-edit__base {
  color: var(--uie-a-muted);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

.uie-invite .uie-link-edit__row input {
  flex: 1 1 180px;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid #968a7f;
  border-radius: 11px;
  background: #fff;
  color: var(--uie-a-ink);
  font: 500 15px/1.3 var(--uie-a-sans);
}

.uie-link-edit__form .uie-btn { justify-self: start; }