/* ============================================================
   Shop Web — profile, categories and subscription.
   ============================================================ */

.edit-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

.edit-head__title { font-size: var(--fs-lg); text-align: center; }
/* "3 / 20" is latin: without its own direction the slash flips it to
   "20 / 3" inside the RTL page. */
.edit-head__count {
  color: var(--muted);
  font-size: var(--fs-sm);
  min-width: 44px;
  direction: ltr;
  text-align: start;
}

.edit-head__save {
  color: var(--accent);
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  min-height: 44px;
  padding-inline: var(--s-2);
}

/* ---------- banner + logo ---------- */

.edit-banner {
  position: relative;
  aspect-ratio: 8 / 3;
  border-radius: var(--r-card);
  background: var(--surface-2);
  margin-bottom: 44px;
}

.edit-banner__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-card);
  display: block;
}

.edit-banner__img--empty { background: var(--surface-2); }

.camera-btn {
  position: absolute;
  border-radius: var(--r-pill);
  background: rgba(22, 21, 15, 0.55);
  color: #FFFFFF;
  display: grid;
  place-items: center;
}

.camera-btn--banner { inset-block-start: var(--s-3); inset-inline-start: var(--s-3); width: 40px; height: 40px; }

.edit-logo {
  position: absolute;
  bottom: -34px;
  right: var(--s-4);
  width: 104px;
  height: 104px;
}

.edit-logo__img {
  width: 100%;
  height: 100%;
  border-radius: var(--r-pill);
  object-fit: cover;
  background: var(--surface-2);
  box-shadow: 0 0 0 4px var(--bg);
}

.edit-logo__img--empty {
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--muted);
}

.camera-btn--logo {
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 34px;
  height: 34px;
  box-shadow: 0 0 0 3px var(--bg);
}


/* ---------- the shop link ---------- */

/* One row: what it is, and a button that copies it. The URL itself is
   carried on the button and never printed — the workers.dev host means
   nothing to a seller and made the screen read like a developer tool. */
.link-row-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}

.link-row-compact__label { color: var(--muted); font-size: var(--fs-sm); }
.link-row-compact__copy { width: auto; flex: none; padding: 8px 14px; min-height: 44px; font-size: 12px; background: var(--surface-2); color: var(--accent); }

/* ---------- counted textarea ---------- */

.counted { position: relative; }

.counted__count {
  position: absolute;
  inset-block-end: var(--s-2);
  inset-inline-start: var(--s-3);
  font-size: var(--fs-xs);
  color: var(--muted);
  direction: ltr;
}

/* ---------- icon fields ---------- */

.icon-field { position: relative; }

.icon-field .field__input { padding-inline-start: 46px; }

.icon-field::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--s-3);
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: var(--r-pill);
  background: var(--surface);
}

.icon-field--whatsapp::before { background: var(--whatsapp); }
.icon-field--phone::before { background: var(--text); }

/* ---------- social rows ---------- */

.social-row {
  display: grid;
  grid-template-columns: 30px 78px 1fr;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
}

.social-row__icon { display: grid; place-items: center; }
.social-row__icon--instagram { color: #C13584; }
.social-row__icon--tiktok { color: #010101; }
.social-row__icon--facebook { color: #1877F2; }

.social-row__label { color: var(--muted); font-size: var(--fs-sm); direction: ltr; text-align: start; }

.social-row__field {
  display: flex;
  align-items: center;
  background: var(--surface-2);
  border-radius: var(--r-field);
  direction: ltr;
  overflow: hidden;
}

.social-row__at { padding-inline: var(--s-3); color: var(--muted); flex: none; }
.social-row__field .field__input { background: none; padding-inline: 0 var(--s-3); height: 48px; }

/* ---------- categories ---------- */

.cat-intro { margin: 0 0 var(--s-4); }

.cat-add { display: flex; gap: var(--s-2); margin-bottom: var(--s-4); }
.cat-add .field__input { flex: 1; }
.cat-add__btn { width: 54px; flex: none; padding: 0; }

.cat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }

.cat-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--surface);
  border-radius: var(--r-card);
  padding: var(--s-2);
}

.cat-row__rename { flex: 1; min-width: 0; }
.cat-row__rename .field__input { height: 48px; background: transparent; }
.cat-row__tools { display: flex; gap: 2px; flex: none; }

.cat-row__btn {
  width: 40px;
  height: 44px;
  border-radius: var(--r-field);
  color: var(--muted);
  display: grid;
  place-items: center;
}

.cat-row__btn[disabled] { opacity: 0.3; pointer-events: none; }
.cat-row__btn--danger { color: #A2402F; }

/* ---------- subscription ---------- */

/* PASS 3: profile editing, with categories in the same compact form. */
.profile-final { padding-bottom: calc(var(--nav-h) + 24px + env(safe-area-inset-bottom)); }
.profile-final .edit-head { margin-bottom: 4px; }
.edit-head__spacer { width: 44px; }
.profile-intro { margin: 0 0 18px; color: var(--muted); font-size: 13px; text-align: center; }
.profile-final .edit-banner { margin-bottom: 14px; border-radius: 14px; }
.profile-final .edit-banner__img { border-radius: 14px; }
.profile-final .edit-logo { right: auto; left: 12px; bottom: -58px; width: 96px; height: 96px; }
.profile-final .camera-btn--logo { width: 44px; height: 44px; background: var(--surface); color: var(--text); }
.profile-final .camera-btn--banner { width: auto; height: 40px; display: flex; gap: 6px; padding: 8px 10px; border-radius: 10px; top: auto; bottom: 10px; font-size: 12px; }
.profile-name { padding-left: 120px; min-height: 82px; }
.profile-final .field { margin-bottom: 16px; min-width: 0; }
.profile-final .field__label { font-size: 13px; margin-bottom: 6px; }
.profile-final .field__input { background: var(--surface); border: 1px solid var(--surface-2); border-radius: 10px; min-width: 0; font-family: var(--font-body); font-size: 16px; }
.profile-final .icon-field::before { display: none; }
.profile-final .icon-field > svg { position: absolute; inset-inline-start: 12px; top: 12px; color: var(--accent); pointer-events: none; }
.profile-final .icon-field .field__input { padding-right: 46px; padding-left: 12px; }
.profile-final input.field__input, .profile-final select.field__input { height: 46px; }
.profile-final .field__input[readonly] { color: var(--muted); }
.profile-final .field__input:disabled { color: var(--muted); background: var(--surface-2); opacity: 1; }
.profile-final .field__input--area { min-height: 100px; padding-bottom: 28px; }
.profile-final .field__hint { font-size: 12px; line-height: 1.8; margin-top: 6px; }
.profile-image-status:empty { display: none; }
.profile-image-status:not(:empty) { margin: 66px 0 10px; }
.profile-image-status:not(:empty) + .profile-name { padding-left: 0; min-height: 0; }
.profile-final .link-row-compact { margin: -8px 0 18px; }
.profile-final .social-row { grid-template-columns: 24px 68px minmax(0, 1fr); gap: 8px; }
.profile-final .social-row__field { background: var(--surface); border: 1px solid var(--surface-2); }
.profile-final .social-row__field .field__input { border: 0; }
.profile-final .social-row__at { padding-inline: 8px; }
.profile-final .social-row__label { font-size: 12px; }
.profile-save { margin-top: 22px; }
.profile-save .btn { min-height: 50px; border-radius: 12px; }
.profile-final :is(button, input):disabled { cursor: not-allowed; }

.shell--sub { padding-bottom: calc(var(--nav-h) + 150px + env(safe-area-inset-bottom)); }

.trial { margin-bottom: var(--s-5); }

.trial__track {
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  overflow: hidden;
}

.trial__fill { display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill); }
.trial__line { margin: var(--s-3) 0 0; color: var(--muted); font-size: var(--fs-sm); }

.plans { display: flex; flex-direction: column; gap: var(--s-3); }

.plan {
  position: relative;
  display: grid;
  gap: var(--s-1);
  justify-items: start;
  text-align: start;
  width: 100%;
  padding: var(--s-5) var(--s-4);
  border-radius: var(--r-card);
  background: var(--surface);
  transition: background var(--t-fast);
}

.plan--best { background: #E8F1EC; }
.plan[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: -2px; }

.plan__badge {
  position: absolute;
  inset-block-start: var(--s-4);
  inset-inline-start: var(--s-4);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.plan__name { font-family: var(--font-head); font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.plan--best .plan__name { color: var(--accent); }

.plan__price { display: flex; direction: ltr; align-items: baseline; gap: 6px; }
.plan__amount { font-family: var(--font-head); font-size: 30px; font-weight: var(--fw-bold); }
.plan__currency { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.plan--best .plan__amount, .plan--best .plan__currency { color: var(--accent); }

.plan__monthly { color: var(--muted); font-size: var(--fs-md); }
.plan__savings { color: var(--accent); font-size: var(--fs-sm); margin-top: var(--s-2); }

.sub-heading { font-size: var(--fs-md); margin: var(--s-6) 0 var(--s-3); }

.benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }

.benefit {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  background: var(--surface);
  border-radius: var(--r-field);
  padding: var(--s-3) var(--s-4);
}

.benefit__tick {
  width: 24px;
  height: 24px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  flex: none;
}

.offer {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-card);
  background: #E8F1EC;
  color: var(--accent);
  font-size: var(--fs-sm);
}

.offer__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  background: var(--bg);
  display: grid;
  place-items: center;
  flex: none;
}

.save-bar--dark { display: grid; gap: var(--s-2); justify-items: center; }
.btn--dark { background: #16150F; color: #FFFFFF; }
.pay-note { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.pay-link { color: var(--accent); font-size: var(--fs-sm); font-weight: var(--fw-bold); }

/* ---------- account menu ---------- */

/* Account is the existing fragment of the protected owner page. */
body:has(.account-settings:target, .billing--plans, .billing--gate) {
  --bg: #F7F8F6;
  --text: #14171A;
  --muted: #6B7280;
  --accent: #126B55;
  --surface-2: #ECEEF0;
}
.account-settings {
  --settings-muted: var(--muted);
  display: none;
  padding: 16px 16px calc(var(--nav-h) + 24px + env(safe-area-inset-bottom));
}
.account-settings:target { display: block; }
body:has(.account-settings:target) .page--owner { display: none; }
.account-settings :is(h1, h2, button, a) { font-family: var(--font-body); }
.settings-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; margin-bottom: 16px; }
.settings-head h1 { text-align: center; font-size: 24px; line-height: 1.5; font-weight: 700; }
.settings-head .icon-btn { width: 44px; height: 44px; background: transparent; }
.settings-identity { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 0 12px; padding: 14px; background: var(--surface); border: 1px solid #ECEEF0; border-radius: 16px; }
.settings-avatar { position: relative; display: grid; place-items: center; grid-row: span 2; width: 64px; height: 64px; border-radius: 50%; background: #E8F2EB; color: var(--accent); overflow: hidden; }
.settings-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--surface-2); }
.settings-identity__body { min-width: 0; }
.settings-identity h2 { font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; }
.settings-identity p { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--settings-muted); font-size: 13px; line-height: 1.6; }
.settings-identity p svg { flex: none; }
.settings-identity :is(bdi, p span) { min-width: 0; overflow-wrap: anywhere; }
.settings-edit { display: inline-flex; justify-self: start; align-items: center; gap: 4px; min-height: 44px; color: var(--accent); font-size: 13px; font-weight: 500; }
.settings-arrow { display: grid; place-items: center; flex: none; color: var(--settings-muted); }
.settings-arrow svg { transform: rotate(180deg); }
.settings-heading { margin: 22px 2px 10px; font-size: 17px; line-height: 1.5; font-weight: 700; }
.settings-group { background: var(--surface); border: 1px solid #ECEEF0; border-radius: 16px; overflow: hidden; }
.settings-row { display: flex; align-items: center; gap: 12px; min-height: 56px; width: 100%; padding: 12px 14px; text-align: start; }
.settings-group .settings-row + .settings-row { position: relative; }
.settings-group .settings-row + .settings-row::before { content: ""; position: absolute; top: 0; inset-inline: 50px 14px; height: 1px; background: #EFEEEA; }
.settings-icon { display: grid; place-items: center; flex: 0 0 24px; color: inherit; }
.settings-row__body { flex: 1; min-width: 0; }
.settings-row__label { display: block; font-size: 16px; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }
.settings-row small { display: block; color: var(--settings-muted); font-size: 13px; line-height: 1.5; margin-top: 2px; }
.settings-row--unavailable .settings-icon { color: var(--settings-muted); }
.settings-plan { margin-top: 14px; padding: 16px; background: #EDF6F2; border: 1px solid #E0ECE6; border-radius: 16px; }
.settings-plan__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.settings-plan__identity { flex: 1; min-width: 0; }
.settings-plan__eyebrow { margin: 0 0 5px; font-size: 14px; color: var(--text); }
.settings-plan h2 { font-size: 20px; line-height: 1.6; font-weight: 600; color: var(--accent); overflow-wrap: anywhere; }
.settings-badge { padding: 3px 9px; border-radius: 8px; color: var(--accent); background: #DFEEE6; font-size: 13px; font-weight: 500; }
.settings-plan__remaining { margin: 7px 0 0; font-size: 14px; line-height: 1.8; color: var(--text); }
.settings-plan__remaining[data-level="urgent"], .settings-plan__remaining[data-level="blocked"] { color: #754B32; }
.settings-plan__date { margin: 4px 0 0; font-size: 13px; color: var(--settings-muted); }
.settings-plan__date:empty { display: none; }
.settings-plan__action { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin-top: 14px; padding: 10px 16px; background: var(--accent); color: white; border-radius: 14px; font-size: 15px; font-weight: 500; }
.settings-plan__action .settings-arrow { color: inherit; }
.settings-plan:is([data-status="expired"], [data-status="suspended"]) { background: #F4F1EC; border-color: #E9E3D9; }
.settings-plan:is([data-status="expired"], [data-status="suspended"]) :is(h2, .settings-badge) { color: #754B32; }
.settings-plan:is([data-status="expired"], [data-status="suspended"]) .settings-badge { background: #EDE2D5; }
.settings-plan:is([data-status="pending"], [data-status="grace"]) .settings-badge { color: #6B4B12; background: #F4E8CC; }
.settings-logout { margin-top: 24px; background: #FCF4F3; border: 1px solid #F0DCD9; border-radius: 14px; }
.settings-logout .settings-row { min-height: 54px; color: #AD352D; }
.settings-logout :is(.settings-icon, .settings-arrow) { color: inherit; }
.account-settings :is(a, button):focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 10px; }
.account-settings a.settings-row:hover { background: #F6F7F3; }
body:has(.account-settings:target) .nav__tab[aria-current="page"] { font-weight: 700; }
body:has(.account-settings:target) .nav__tab[aria-current="page"] svg { fill: #E2EEE5; }
@media (min-width: 400px) {
  .settings-identity { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .settings-avatar { grid-row: auto; }
  .settings-edit { grid-column: 3; grid-row: 1; font-size: 12px; }
}

.app-menu { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-4); }

.app-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  background: var(--surface);
  border-radius: var(--r-card);
  padding: var(--s-4);
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
}

.app-menu__go { color: var(--muted); }

/* ============================================================
   the manual payment flow
   ============================================================ */

/* The plan banner sits above the shop header on the seller's own page.
   Only the hidden state is loud — the other two are information, and a
   red bar every day for a week stops being read. */
.plan-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 10px 16px;
  background: var(--surface-2);
  font-size: 13px;
  line-height: 1.7;
}

.plan-banner__text { min-width: 0; }
.plan-banner__action { flex: none; color: var(--accent); font-weight: var(--fw-bold); min-height: 44px; display: flex; align-items: center; }
.plan-banner--grace { background: #F6EFE0; }
.plan-banner--hidden { background: #F6E7E4; color: #7C2D1B; }
.plan-banner--hidden .plan-banner__action { color: #7C2D1B; text-decoration: underline; }

/* ---------- instructions ---------- */

.shell--pay { padding-bottom: calc(var(--nav-h) + 32px + env(safe-area-inset-bottom)); }

.pay-card {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4);
  border-radius: var(--r-card);
  background: var(--surface);
  margin-bottom: var(--s-4);
}

.pay-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 48px;
}

.pay-row__label { color: var(--muted); font-size: var(--fs-sm); flex: none; }

/* The two values that get copied into a bank app are the largest thing
   on the screen, and isolated so the digits never reorder. */
.pay-row__value {
  flex: 1;
  min-width: 0;
  text-align: start;
  font-size: 17px;
  font-weight: var(--fw-bold);
  unicode-bidi: isolate;
  overflow-wrap: anywhere;
}

.pay-row__copy { flex: none; width: auto; gap: 5px; min-height: 44px; padding: 8px 12px; font-size: 12px; background: var(--surface-2); color: var(--accent); }

.pay-instruction { margin: 0 0 var(--s-4); line-height: 1.9; font-size: 13px; }
.pay-sent { margin-bottom: var(--s-4); }

/* Waiting, never succeeded. No green, no tick: the owner has not seen
   the money yet, and a seller who reads this as "done" stops chasing. */
.alert--wait { background: #F6EFE0; color: #6B4B12; }

.pay-safety {
  margin: 0 0 var(--s-4);
  padding: var(--s-3);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
}

/* ---------- history ---------- */

.pay-history { margin-top: var(--s-6); }
.pay-history__list { display: grid; gap: var(--s-2); }

.pay-history__row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border-radius: 12px;
  background: var(--surface);
  font-size: 13px;
}

.pay-history__date { color: var(--muted); flex: none; }
.pay-history__amount { flex: 1; min-width: 0; font-weight: var(--fw-bold); }
.pay-history__status { flex: none; color: var(--muted); font-size: 12px; }
.pay-history__status.is-done { color: var(--accent); }

/* ---------- the plan banner, closable ---------- */

.plan-banner--soon, .plan-banner--urgent { background: #F6EFE0; color: #6B4B12; }
.plan-banner--urgent { font-weight: var(--fw-bold); }

/* Amber banners carry a close button; the red ones deliberately do not,
   because by then the shop is about to go dark or already has. */
.plan-banner__close { flex: none; display: flex; }
.plan-banner__close button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  opacity: .7;
}
.plan-banner__close button:hover { opacity: 1; }

/* Inside the settings panel it is a card rather than a full-bleed bar. */
.account-settings .plan-banner { margin: 12px 0 0; border-radius: 12px; flex-wrap: wrap; }

/* ---------- the free month, last and small ---------- */

/* Not a card and not selectable: it is what the seller is already on,
   so it reads as a footnote to the paid plans, never as an option
   competing with them. */
.plan-free {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-3);
  padding: 10px var(--s-4);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
}

.plan-free__name { font-weight: var(--fw-bold); flex: none; }
.plan-free__body { text-align: end; }

/* The year is the one a seller should land on first. */
.plan--lead { outline: 2px solid var(--accent); outline-offset: -2px; }
.plan--lead .plan__amount { font-size: 30px; }

/* Seller plan selection. The existing server decides checkout availability. */
.billing { padding: 16px 16px 28px; }
.billing--plans { padding-bottom: calc(var(--nav-h) + 140px + env(safe-area-inset-bottom)); }
/* Clear of the nav AND of the dock above it, so the last benefit is
   readable rather than sitting under the button. */
.billing--gate { padding-bottom: calc(var(--nav-h) + 140px + env(safe-area-inset-bottom)); }
.billing--gate .billing-options { gap: 10px; }
.billing--gate .billing-features { margin-top: 14px; }
.billing--gate .billing-trust { margin: 12px 0 0; }
.billing h1, .billing h2, .billing legend { font-family: var(--font-body); }
.billing-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 4px; margin-bottom: 20px; }
.billing-head h1 { font-size: 24px; font-weight: 700; line-height: 1.5; text-align: center; }
.billing-head .icon-btn { width: 44px; height: 44px; background: var(--surface-2); border-radius: 50%; }
.billing-intro { margin-bottom: 22px; text-align: center; }
.billing-brand { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; margin-bottom: 14px; color: var(--accent); font-size: 24px; font-weight: 600; }
.billing-brand .icon-btn { width: 44px; height: 44px; color: var(--muted); background: transparent; }
.billing-intro h1 { font-size: 25px; font-weight: 700; line-height: 1.6; }
.billing-intro p { margin: 6px 0 0; font-size: 15px; color: var(--muted); line-height: 1.8; }
.billing-state { padding: 16px; margin-bottom: 16px; background: #EDF6F2; border: 1px solid #E0ECE6; border-radius: 16px; }
.billing-state p { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.billing-state .billing-state__label { margin-top: 0; color: var(--text); font-weight: 500; }
.billing-state h2 { margin-top: 4px; color: var(--accent); font-size: 20px; font-weight: 600; line-height: 1.6; }
.billing-state .billing-renewal-note { padding-top: 12px; margin-top: 12px; border-top: 1px solid #DEE9E3; font-size: 13px; line-height: 1.8; }
.billing-state[data-plan-state="grace"], .billing-state[data-plan-state="pending"] { background: #F6EFE0; color: #6B4B12; }
.billing-state[data-plan-state="expired"], .billing-state[data-plan-state="suspended"], .billing-state:not([data-plan-state]) { background: var(--surface-2); }
.billing-options { display: grid; gap: 12px; border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.billing-choice { position: relative; display: block; min-width: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.billing-choice > input { position: absolute; width: 1px; height: 1px; opacity: 0; inset-inline-start: 20px; top: 50%; margin: 0; }
.billing-choice__surface { display: block; border: 2px solid #ECEEF0; border-radius: 16px; padding: 14px 16px; background: var(--surface); transition: border-color 200ms ease-out, background-color 200ms ease-out; }
.billing-choice > input:checked + .billing-choice__surface { border-color: var(--accent); background: #EDF6F2; }
.billing-choice > input:focus-visible + .billing-choice__surface { outline: 3px solid var(--accent); outline-offset: 3px; }
.billing-plan { transition: transform 100ms ease-out; }
.billing-plan:active { transform: scale(.985); }
.billing-plan__top, .billing-plan__bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.billing-plan .billing-choice__surface { position: relative; padding-inline-end: 54px; }
.billing-plan .billing-radio { position: absolute; inset-inline-end: 16px; top: 50%; transform: translateY(-50%); }
.billing-plan__top { margin-bottom: 8px; min-height: 30px; flex-wrap: wrap; gap: 6px 10px; }
.billing-plan__name { font-size: 23px; font-weight: 600; }
.billing-best { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 8px; background: #E0EFE7; color: var(--accent); font-size: 12px; line-height: 1.7; white-space: nowrap; }
.billing-amount { display: inline-flex; align-items: baseline; gap: 6px; font-size: 30px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.billing-amount > span { font-size: 16px; font-weight: 400; }
.billing-monthly { display: block; margin: 3px 0 0; color: var(--muted); font-size: 13px; font-weight: 400; }
.billing-radio { display: grid; place-items: center; width: 23px; height: 23px; flex: none; border: 2px solid #a4a299; border-radius: 50%; background: var(--surface); transition: border-color 200ms ease-out; }
.billing-radio::after { content: ''; width: 13px; height: 13px; border-radius: 50%; background: var(--accent); opacity: 0; transition: opacity 200ms ease-out; }
.billing-choice > input:checked + .billing-choice__surface .billing-radio { border-color: var(--accent); }
.billing-choice > input:checked + .billing-choice__surface .billing-radio::after { opacity: 1; }
.billing-features { margin: 20px 0; padding: 14px 16px 6px; background: var(--surface); border: 1px solid #ECEEF0; border-radius: 16px; }
.billing-features h2 { font-size: 17px; line-height: 1.6; font-weight: 600; margin-bottom: 6px; }
.billing-features ul { padding: 0; margin: 0; list-style: none; }
.billing-features li { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 0; font-size: 14px; }
.billing-features li + li { border-top: 1px solid #f0eee8; }
.billing-feature-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; color: var(--accent); background: #f0f7f3; border-radius: 10px; }
.billing-primary { display: flex; justify-content: center; align-items: center; gap: 5px; width: 100%; min-height: 52px; padding: 12px 16px; border: 0; border-radius: 14px; color: var(--accent-ink); background: var(--accent); font: 500 17px/1.6 var(--font-body); cursor: pointer; }
.billing-primary:active { opacity: .9; }
.billing-primary svg { flex: none; transform: rotate(180deg); }
/* On its way to Wayl. Still legible, plainly not pressable again. */
.billing-primary.is-busy, .billing-primary:disabled { opacity: .62; cursor: default; }
/* Scrolling this into view must never park it under the fixed bottom
   navigation. The page already clears the nav; this makes sure the one
   button that matters is never the thing hiding behind it. */
.billing-primary { scroll-margin-bottom: calc(var(--nav-h) + 24px + env(safe-area-inset-bottom)); }
.billing--plans #pay-btn { margin-top: 24px; }
/* The dinar figure, said before the seller leaves the site. */
.billing-charge { margin: 14px 0 0; color: var(--ink); font-size: 15px; font-weight: 500; line-height: 1.7; text-align: center; }
.billing-charge + .billing-primary { margin-top: 10px; }
.billing--plans .billing-charge { margin-top: 24px; }
.billing--plans .billing-charge + #pay-btn { margin-top: 10px; }
.billing :is(a, button, summary):focus-visible, .billing-result:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.billing-trust { display: flex; justify-content: center; align-items: center; gap: 7px; margin: 14px 0 10px; color: var(--muted); font-size: 13px; }
.billing-trust svg { flex: none; }
.billing-safety { padding: 12px; margin: 0; border-radius: 12px; background: var(--surface-2); color: #68665d; font-size: 12px; line-height: 1.8; text-align: center; }
.billing-availability { margin: 12px 0; color: var(--muted); font-size: 13px; line-height: 1.8; text-align: center; }
.billing-history { margin-top: 16px; color: #68665d; font-size: 13px; }
.billing-history summary { padding: 10px 0; min-height: 44px; cursor: pointer; }
.billing-history .pay-history { margin-top: 4px; }
.billing-history .sub-heading { display: none; }
.billing-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 16px; border: 1px solid #dde8df; border-radius: 16px; background: #f0f7f3; margin-bottom: 24px; }
.billing-summary p { margin: 0 0 4px; color: #68665d; font-size: 13px; }
.billing-summary h2 { font-size: 26px; line-height: 1.5; font-weight: 600; }
.billing-summary > div:last-child { grid-column: 1 / -1; }
.billing-summary .billing-monthly { margin: 4px 0 0; }

/* One visible action, chosen by native radios even with JavaScript off. */
.gate-free__explanation { display: block; border-top: 1px solid #E0ECE6; margin-top: 12px; padding-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.8; }
.gate-free:has(input:disabled) { cursor: default; }
.gate-free:has(input:disabled) .billing-choice__surface { background: var(--surface-2); }
/* The action dock: fixed directly above the bottom navigation, so the
   one thing a seller came here to do is on screen from the moment the
   page loads. The plan cards and the benefits scroll underneath it. */
.action-dock {
  position: fixed;
  inset-inline: 0;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
  z-index: 30;
  padding: 10px 16px 12px;
  background: var(--surface);
  border-top: 1px solid #ECE7DE;
  box-shadow: 0 -6px 18px rgba(31, 29, 23, .06);
}
.gate-actions > form { display: none; margin: 0; }
/* The dock is no longer a sibling of the options, so the match is made
   on the document. Native radios still decide it; no JavaScript does. */
body:has(#gate-options input[value="free"]:checked) .gate-actions [data-choice="free"],
body:has(#gate-options input[value="months_6"]:checked) .gate-actions [data-choice="months_6"],
body:has(#gate-options input[value="year_1"]:checked) .gate-actions [data-choice="year_1"] { display: block; }
/* Without :has() every action would stack in the dock. Show the first
   and let the rest queue behind it rather than covering the screen. */
@supports not selector(:has(*)) {
  .gate-actions > form { display: block; }
}
/* A card scrolled into view must land above the dock, not behind it.
   Without this the last plan is unreachable on a short phone. */
.gate-plan { scroll-margin-bottom: calc(var(--nav-h) + 130px + env(safe-area-inset-bottom)); }
.action-dock .billing-charge { margin: 0 0 8px; font-size: 14px; }
.action-dock .billing-primary { margin: 0; min-height: 52px; }
/* A card scrolled into view on the renewal screen lands above the dock
   too, and the history below it stays readable rather than covered. */
.billing--plans .billing-plan { scroll-margin-bottom: calc(var(--nav-h) + 130px + env(safe-area-inset-bottom)); }
.billing-methods legend { font-size: 18px; font-weight: 600; line-height: 1.7; padding: 0 0 14px; }
.billing-method .billing-choice__surface { display: flex; align-items: center; gap: 12px; min-height: 88px; padding: 14px; }
.billing-method__brand { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; font: 700 15px/1 system-ui, sans-serif; direction: ltr; }
.billing-method__brand--fib { background: var(--accent); color: white; }
.billing-method__brand--superqi { background: #F6EFE0; color: #6B4B12; }
.billing-method__body { flex: 1; min-width: 0; display: grid; gap: 3px; text-align: start; }
.billing-method__body strong { font: 600 18px/1.4 var(--font-body); text-align: right; }
.billing-method__body > span { font-size: 13px; color: #68665d; }
.billing--method .billing-availability { margin: 20px 0; }
.billing-result { padding: 12px 14px; margin-bottom: 12px; background: var(--surface-2); border-radius: 12px; font-size: 14px; line-height: 1.8; }
@media (max-width: 359px) {
  .billing-intro h1 { font-size: 22px; }
  .billing-intro p { font-size: 14px; }
  .billing-plan__name { font-size: 21px; }
  .billing-primary { font-size: 16px; }
  .billing-head h1 { font-size: 22px; }
  .billing-head { grid-template-columns: 44px minmax(0, 1fr) 20px; }
  .billing-choice__surface { padding: 12px; }
  .billing-amount { font-size: 28px; }
  .billing-method .billing-choice__surface { gap: 9px; padding: 12px; }
  .billing-method__brand { width: 36px; height: 36px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .billing-plan, .billing-choice__surface, .billing-radio, .billing-radio::after { transition: none !important; }
  .billing-plan:active { transform: none; }
}

/* Payment Result: server-rendered states, independent of Account/Plans and nav. */
.payment-result { max-width: var(--page-max); margin-inline: auto; padding: 16px 16px max(24px, env(safe-area-inset-bottom)); font-family: var(--font-body); }
.payment-result__header { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; margin-bottom: 24px; }
.payment-result__header h1 { font: 700 24px/1.5 var(--font-body); text-align: center; }
.payment-result__header a { display: grid; place-items: center; width: 44px; height: 44px; background: var(--surface-2); color: var(--text); border-radius: 50%; }
.payment-result__content { text-align: center; }
.payment-result__symbol { display: grid; place-items: center; width: 88px; height: 88px; margin: 8px auto 24px; border-radius: 50%; color: var(--accent); }
.payment-result[data-result-state="success"] .payment-result__symbol { background: #edf5ef; }
.payment-result[data-result-state="success"] .payment-result__symbol > svg { width: 58px; height: 58px; padding: 12px; background: var(--accent); color: var(--surface); border-radius: 50%; }
.payment-result[data-result-state="failed"] .payment-result__symbol { background: #fbefed; color: #a33128; }
.payment-result[data-result-state="cancelled"] .payment-result__symbol { background: var(--surface-2); color: #68665d; }
.payment-result__stop { font: 400 48px/1 var(--font-body); }
.payment-result__spinner { width: 76px; height: 76px; border: 8px solid var(--surface-2); border-top-color: var(--accent); border-radius: 50%; animation: payment-result-spin 1.4s linear infinite; }
.payment-result h2 { font: 700 24px/1.65 var(--font-body); margin: 0; overflow-wrap: anywhere; }
.payment-result__subtitle { margin: 8px 0 0; font-size: 17px; color: #68665d; line-height: 1.8; }
.payment-result__helper { margin: 20px 0 0; color: #68665d; font-size: 14px; line-height: 1.9; }
/* Shown once a payment has been checking for a while. Calm on purpose:
   slow is not failed, and it must not read like an error. */
.payment-result__slow { margin: 12px 0 0; color: #68665d; font-size: 14px; line-height: 1.9; background: #f6faf7; border: 1px solid #e7e5df; border-radius: 12px; padding: 12px 14px; }
.payment-result__details { background: var(--surface); border: 1px solid #e7e5df; border-radius: 16px; margin: 24px 0; padding: 4px 16px; text-align: start; }
.payment-result__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; min-height: 56px; }
.payment-result__row + .payment-result__row { border-top: 1px solid #f0eee8; }
.payment-result dt { flex: none; color: #68665d; font-size: 14px; }
.payment-result dd { margin: 0; min-width: 0; font-size: 18px; font-weight: 500; overflow-wrap: anywhere; }
.payment-result__amount { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 5px; font-size: 25px; font-weight: 700; }
.payment-result__amount > span { font-size: 16px; font-weight: 400; }
.payment-result__active { display: inline-flex; gap: 5px; align-items: center; background: #edf5ef; color: var(--accent); border-radius: 8px; padding: 4px 8px; font-size: 14px; }
.payment-result[data-result-state="checking"] .payment-result__details { display: grid; grid-template-columns: 1fr 1fr; padding: 16px 0; background: #f6faf7; }
.payment-result[data-result-state="checking"] .payment-result__row { display: grid; text-align: center; gap: 8px; padding: 4px 10px; min-width: 0; }
.payment-result[data-result-state="checking"] .payment-result__row + .payment-result__row { border-top: 0; border-inline-start: 1px solid #e7e5df; }
.payment-result__actions { display: grid; gap: 8px; }
.payment-result__primary, .payment-result__secondary { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px; border-radius: 14px; font-size: 17px; font-weight: 500; }
.payment-result__primary { background: var(--accent); color: var(--surface); }
.payment-result__secondary { color: var(--accent); }
.payment-result a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.payment-result[data-result-state="success"] .payment-result__content { animation: payment-result-reveal 220ms ease-out both; }
@keyframes payment-result-spin { to { transform: rotate(360deg); } }
@keyframes payment-result-reveal { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: scale(1); } }
@media (max-width: 359px) {
  .payment-result h2 { font-size: 22px; }
  .payment-result__amount { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .payment-result__spinner, .payment-result[data-result-state="success"] .payment-result__content { animation: none !important; }
}