/* ===========================================================================
   Additions to the landing stylesheet.
   ---------------------------------------------------------------------------
   style.css is the landing page's own sheet and is left untouched, so the
   marketing page keeps rendering exactly as it did as a static file. Anything
   the application needs on top — flash messages, forms, the skip link — lives
   here, where it cannot cause a visual diff on a page that was already signed
   off.
   ======================================================================== */

/* ---------------------------------------------------------------------------
   Skip link
   Visible only once focused. A keyboard user should not have to tab through
   the whole navigation on every page to reach the content.
   ------------------------------------------------------------------------ */
.pix-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 20px;
  font: 600 14px/1 'Inter', system-ui, sans-serif;
  color: #fff;
  background: #6d28d9;
  border-radius: 0 0 8px 0;
}
.pix-skip:focus {
  left: 0;
}

/* ---------------------------------------------------------------------------
   Flash messages
   ------------------------------------------------------------------------ */
.pix-flash-wrap {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(560px, calc(100vw - 32px));
}

.pix-flash {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  font: 500 14.5px/1.5 'Inter', system-ui, sans-serif;
  color: #1f2937;
  background: #fff;
  border-left: 4px solid #6b7280;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(17, 24, 39, .16);
  animation: pix-flash-in .3s cubic-bezier(.4, 0, .2, 1);
}

@keyframes pix-flash-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

.pix-flash--success { border-left-color: #16a34a; }
.pix-flash--error   { border-left-color: #dc2626; }
.pix-flash--info    { border-left-color: #2563eb; }

.pix-flash__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: #6b7280;
  border-radius: 999px;
}
.pix-flash--success .pix-flash__icon { background: #16a34a; }
.pix-flash--error   .pix-flash__icon { background: #dc2626; }
.pix-flash--info    .pix-flash__icon { background: #2563eb; }

.pix-flash__text { flex: 1; }

.pix-flash__close {
  flex: none;
  padding: 0 2px;
  font-size: 20px;
  line-height: 1;
  /* #9ca3af sat at 2.5:1 on the white card — too pale for a control you have to hit. */
  color: #6b7280;
  background: none;
  border: 0;
  cursor: pointer;
}
.pix-flash__close:hover { color: #374151; }

@media (prefers-reduced-motion: reduce) {
  .pix-flash { animation: none; }
}

/* ===========================================================================
   Account pages — sign up, sign in, welcome
   ======================================================================== */
.io-auth {
  --io-brand: #8e09d8;
  --io-brand-dark: #7307b0;
  --io-ink: #1b2a4e;
  --io-body: #5b6478;
  --io-line: #e3e0ec;
  --io-error: #c2272d;
  display: flex;
  justify-content: center;
  padding: 56px 16px 80px;
  background: linear-gradient(180deg, #faf7ff 0%, #ffffff 60%);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.io-auth__card {
  width: 100%;
  max-width: 440px;
  padding: 36px 32px;
  background: #fff;
  border: 1px solid var(--io-line);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(27, 42, 78, .08);
}
.io-auth__card--wide { max-width: 540px; }

.io-auth__step {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--io-brand);
}
.io-auth__title {
  margin: 0 0 8px;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 28px;
  line-height: 1.2;
  color: var(--io-ink);
}
.io-auth__subtitle { margin: 26px 0 10px; font-size: 16px; color: var(--io-ink); }
.io-auth__lead { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: var(--io-body); }
.io-auth__plan {
  margin: -8px 0 20px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--io-ink);
  background: #f5edfd;
  border-radius: 10px;
}
.io-auth__verified {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px; margin-right: 4px;
  font-size: 11px; color: #fff; background: #16a34a; border-radius: 999px;
  vertical-align: 1px;
}
.io-auth__note { margin: 6px 0 0; padding: 14px; font-size: 14px; color: var(--io-body); background: #f7f7fa; border-radius: 10px; }
.io-auth__switch { margin: 22px 0 0; font-size: 14px; text-align: center; color: var(--io-body); }
.io-auth__switch a, .io-link { color: var(--io-brand); font-weight: 600; text-decoration: none; }
.io-auth__switch a:hover, .io-link:hover { text-decoration: underline; }
.io-link { padding: 0; font: inherit; background: none; border: 0; cursor: pointer; }
.io-auth__resend { margin: 16px 0 0; font-size: 13.5px; color: var(--io-body); text-align: center; }
.io-auth__signout { margin-top: 26px; }

.io-auth__or {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0;
  font-size: 12.5px; color: #6a7387;   /* 4.8:1 on the white card; the old #9aa1b2 was 2.6:1 */
}
.io-auth__or::before, .io-auth__or::after { content: ''; flex: 1; height: 1px; background: var(--io-line); }

.io-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 48px; padding: 10px 16px;
  font-size: 15px; font-weight: 600; color: #1f1f1f; text-decoration: none;
  background: #fff; border: 1px solid #dadce0; border-radius: 12px;
  transition: background .15s, box-shadow .15s;
}
.io-google:hover { background: #f8f9fb; box-shadow: 0 2px 8px rgba(0, 0, 0, .06); }
.io-google:focus-visible { outline: 2px solid var(--io-brand); outline-offset: 2px; }

.io-form { display: grid; gap: 16px; }
.io-form__hint { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: #636c80; }  /* 5.3:1; the old #8a93a6 was 3.1:1 and this text carries the password rule */

.io-field { display: grid; gap: 6px; }
.io-field__label { font-size: 14px; font-weight: 600; color: var(--io-ink); }
.io-field__input {
  width: 100%; min-height: 48px; padding: 11px 14px;
  font: inherit; font-size: 16px; /* 16px stops iOS zooming into the field */
  color: var(--io-ink);
  background: #fff; border: 1px solid var(--io-line); border-radius: 12px;
  transition: border-color .15s, box-shadow .15s;
}
.io-field__input:focus { outline: none; border-color: var(--io-brand); box-shadow: 0 0 0 3px rgba(142, 9, 216, .14); }
.io-field__input.is-invalid { border-color: var(--io-error); }
.io-field__input--code { font-size: 24px; letter-spacing: .4em; text-align: center; }
.io-field__error { margin: 0; font-size: 13px; color: var(--io-error); }
.io-field__prefixed { display: flex; }
.io-field__prefix {
  display: grid; place-items: center; padding: 0 12px;
  font-size: 15px; color: var(--io-body);
  background: #f7f7fa; border: 1px solid var(--io-line); border-right: 0; border-radius: 12px 0 0 12px;
}
.io-field__prefixed .io-field__input { border-radius: 0 12px 12px 0; min-width: 0; }  /* a flex item will not shrink past its own content width without this */
.io-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--io-body); line-height: 1.5; }
.io-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--io-brand); }

.io-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 48px; padding: 12px 18px;
  font: inherit; font-size: 15px; font-weight: 600;
  border-radius: 12px; border: 1px solid transparent; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.io-btn--primary { color: #fff; background: var(--io-brand); }
.io-btn--primary:hover { background: var(--io-brand-dark); }
.io-btn--ghost { color: var(--io-ink); background: #fff; border-color: var(--io-line); }
.io-btn--ghost:hover { border-color: var(--io-ink); }

.io-alert { margin: 0 0 16px; padding: 12px 14px; font-size: 14px; line-height: 1.5; border-radius: 10px; }
.io-alert--error { color: #8f1d22; background: #fdeeee; border: 1px solid #f6caca; }

.io-summary { display: grid; gap: 8px; margin: 0; padding: 14px 16px; background: #f7f7fa; border-radius: 12px; }
.io-summary div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.io-summary dt { color: var(--io-body); }
.io-summary dd { margin: 0; font-weight: 600; color: var(--io-ink); text-align: right; word-break: break-all; }

.io-steps { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-size: 14.5px; color: var(--io-ink); line-height: 1.5; }
.io-steps span { display: block; color: var(--io-body); font-size: 13.5px; }

@media (max-width: 480px) {
  .io-auth { padding: 28px 12px 56px; }
  .io-auth__card { padding: 26px 20px; border-radius: 16px; }
  .io-auth__title { font-size: 24px; }
}

/* ---------------------------------------------------------------------------
 * Setting up a shop
 * ------------------------------------------------------------------------ */

.io-wizard {
  display: flex; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none;
  font-size: 12.5px; color: #636c80;
}
.io-wizard__step { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; }
.io-wizard__n {
  display: grid; place-items: center; flex: none; width: 22px; height: 22px;
  font-size: 12px; font-weight: 700; color: #636c80;
  background: #f0f0f5; border-radius: 50%;
}
.io-wizard__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.io-wizard__step.is-current { color: var(--io-ink); font-weight: 600; }
.io-wizard__step.is-current .io-wizard__n { color: #fff; background: var(--io-brand); }
.io-wizard__step.is-done .io-wizard__n { color: #fff; background: #3f8f57; }

/* Two fields on one line where they belong together - city and pincode - and
   one per line on a phone, where side by side leaves neither of them usable. */
.io-row { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }

.io-field__optional { font-weight: 400; color: #636c80; }

/* The suffix form of the prefixed field: the domain sits after what is typed,
   so the whole address reads as one line. */
.io-field__prefixed--suffix .io-field__input { border-radius: 12px 0 0 12px; }
.io-field__prefix--suffix {
  border-right: 1px solid var(--io-line); border-left: 0;
  border-radius: 0 12px 12px 0; white-space: nowrap;
}
.io-form__hint.is-free { color: #2f7a46; }
.io-form__hint.is-taken { color: #8f1d22; }

.io-themes { display: grid; gap: 12px; margin: 0; padding: 0; border: 0; }
.io-themes legend { padding: 0; margin-bottom: 4px; }

.io-theme {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border: 1px solid var(--io-line); border-radius: 14px; cursor: pointer;
}
.io-theme:hover { border-color: var(--io-brand); }
.io-theme:has(.io-theme__radio:checked) {
  border-color: var(--io-brand); box-shadow: 0 0 0 1px var(--io-brand) inset;
}
.io-theme:has(.io-theme__radio:focus-visible) { outline: 2px solid var(--io-brand); outline-offset: 2px; }
.io-theme__radio { flex: none; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--io-brand); }
.io-theme__body { display: grid; gap: 4px; }
.io-theme__name { font-weight: 600; color: var(--io-ink); }
.io-theme__text { font-size: 13.5px; line-height: 1.5; color: var(--io-body); }
.io-theme__preview { font-size: 13.5px; color: var(--io-brand); }

.io-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.io-btn--block { display: block; width: 100%; text-align: center; text-decoration: none; }

/* Visible to a screen reader, and to nothing else. */
.io-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 480px) {
  .io-row { grid-template-columns: 1fr; }
  .io-wizard__label { display: none; }
  .io-wizard { gap: 6px; }
  .io-wizard__step { flex: none; }
}