/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding-inline: 24px; border: 0; border-radius: var(--r-pill);
  font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none;
  transition: background-color .15s, color .15s, box-shadow .15s, transform .05s;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn-primary { background: var(--c-primary); color: #fff; box-shadow: var(--shadow-primary); }
.btn-primary:hover { background: var(--c-primary-hover); color: #fff; }
.btn-primary:disabled { background: #A9B3FD; box-shadow: none; }
.btn-dark { background: var(--c-ink); color: #fff; }
.btn-dark:hover { background: #18264A; color: #fff; }
.btn-light { background: #fff; color: var(--c-ink); border: 1px solid var(--c-line); }
.btn-light:hover { border-color: var(--c-line-2); color: var(--c-ink); background: var(--c-bg-soft); }
.btn-white { background: #fff; color: var(--c-ink); }
.btn-white:hover { color: var(--c-primary); }
.btn-ghost { background: transparent; color: var(--c-primary); padding-inline: 8px; height: auto; }
.btn-danger { background: #fff; color: var(--c-danger); border: 1px solid #F3C7C7; }
.btn-danger:hover { background: var(--c-danger-soft); color: var(--c-danger); }
.btn-lg { height: 56px; font-size: 16px; font-weight: 700; padding-inline: 28px; }
.btn-sm { height: 36px; font-size: 13px; padding-inline: 16px; }
.btn-block { width: 100%; }
.link { color: var(--c-primary); font-weight: 600; font-size: 14px; background: none; border: 0; padding: 0; display: inline-flex; align-items: center; gap: 6px; }
.link:hover { color: var(--c-primary-hover); }

/* app store buttons */
.store-btn { display: inline-flex; align-items: center; gap: 12px; height: 56px; padding-inline: 20px; border-radius: 14px; background: var(--c-ink); color: #fff; }
.store-btn:hover { color: #fff; background: #18264A; }
.store-btn small { display: block; font-size: 10px; opacity: .8; line-height: 1.1; }
.store-btn strong { display: block; font-size: 17px; line-height: 1.1; }

/* ---------------------------------------------------------------- pills, chips, tags */
.pill {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding-inline: 16px;
  border-radius: var(--r-pill); border: 1px solid var(--c-line); background: #fff;
  color: var(--c-ink-2); font-size: 13px; font-weight: 600; white-space: nowrap;
}
a.pill:hover, button.pill:hover { border-color: var(--c-line-2); color: var(--c-ink); }
.pill.is-active { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.pill .count { color: var(--c-muted-2); font-weight: 600; }
.pill.is-active .count { color: rgba(255,255,255,.7); }
.pill:disabled, .pill.is-disabled { opacity: .45; pointer-events: none; }

.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding-inline: 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; white-space: nowrap; }
.chip-soft { background: var(--c-primary-soft); color: var(--c-primary); }
.chip-best { background: var(--c-primary); color: #fff; }
.chip-good { background: var(--c-success-soft); color: var(--c-success); }
.chip-neutral { background: var(--c-bg-muted); color: var(--c-ink-2); }
.chip-warn { background: var(--c-warning-soft); color: var(--c-warning); }
.chip-danger { background: var(--c-danger-soft); color: var(--c-danger); }
.chip-dark { background: var(--c-ink); color: #fff; }
.chip-outline { border: 1px solid var(--c-line); background: #fff; color: var(--c-ink-2); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }

/* ---------------------------------------------------------------- cards */
.card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); }
.card-pad { padding: 24px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--c-line); }
.card-title { font-size: 17px; font-weight: 700; }
.icon-tile { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--c-primary-soft); color: var(--c-primary); }
.icon-tile.is-green { background: var(--c-success-soft); color: var(--c-success-2); }
.icon-tile.is-pink { background: var(--c-pink-soft); color: var(--c-pink); }
.icon-tile.is-lilac { background: var(--c-lilac-soft); color: var(--c-violet); }
.icon-tile.is-red { background: var(--c-danger-soft); color: var(--c-danger); }
.icon-tile.sm { width: 36px; height: 36px; border-radius: 10px; }

/* ---------------------------------------------------------------- alerts */
.alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-md); font-size: 14px; line-height: 1.45; }
.alert .icon { margin-top: 1px; }
.alert-info { background: var(--c-primary-tint); color: var(--c-ink); border: 1px solid var(--c-primary-soft); }
.alert-success { background: var(--c-success-soft); color: #0B5A33; }
.alert-warn { background: var(--c-warning-soft); color: #6E4100; }
.alert-error { background: var(--c-danger-soft); color: #8E1C1C; }

/* ---------------------------------------------------------------- forms */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .label { font-size: 13px; font-weight: 600; color: var(--c-ink-2); }
.input, .select {
  width: 100%; height: 48px; padding-inline: 14px; border-radius: var(--r-sm);
  border: 1px solid var(--c-line-2); background: #fff; font-size: 15px; color: var(--c-ink);
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: var(--c-muted-2); }
.input:focus, .select:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 4px rgba(47, 69, 252, .12); }
.select { appearance: none; padding-inline-end: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2307132D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
[dir="rtl"] .select { background-position: left 12px center; }
.field.has-error .input, .field.has-error .select { border-color: var(--c-danger); }
.field-error { font-size: 12px; color: var(--c-danger); font-weight: 600; }
.field-hint { font-size: 12px; color: var(--c-muted); }
.input-group { display: flex; gap: 8px; }
.input-group > .select { width: 110px; flex-shrink: 0; }

.radio-card {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-md);
  border: 1px solid var(--c-line); background: #fff; cursor: pointer; transition: border-color .15s, background-color .15s;
}
.radio-card:hover { border-color: var(--c-line-2); }
.radio-card:has(input:checked) { border-color: var(--c-primary); background: var(--c-primary-tint); box-shadow: inset 0 0 0 1px var(--c-primary); }
.radio-card:has(input:disabled) { opacity: .6; cursor: not-allowed; }
.radio-card input { accent-color: var(--c-primary); width: 18px; height: 18px; margin: 0; }
.radio-card .rc-body { flex: 1; min-width: 0; }
.radio-card .rc-title { display: block; font-weight: 700; font-size: 15px; }
.radio-card .rc-sub { display: block; font-size: 12px; color: var(--c-muted); }

/* ---------------------------------------------------------------- steps */
.steps { display: flex; align-items: center; gap: 12px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.steps li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--c-muted); }
.steps li + li::before { content: ""; width: 48px; height: 2px; background: var(--c-line); border-radius: 2px; }
.steps .step-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--c-line-2); background: #fff; font-size: 13px; color: var(--c-muted); }
.steps li.is-current { color: var(--c-ink); }
.steps li.is-current .step-n { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.steps li.is-done { color: var(--c-ink); }
.steps li.is-done .step-n { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.steps li.is-done + li::before { background: var(--c-primary); }

/* ---------------------------------------------------------------- modal */
.modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 24px; }
.modal.is-open { display: flex; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(7, 19, 45, .45); backdrop-filter: blur(2px); }
.modal-panel { position: relative; background: #fff; border-radius: 24px; box-shadow: var(--shadow-pop); max-width: 560px; width: 100%; max-height: calc(100vh - 48px); overflow: auto; }
.modal-close { position: absolute; inset-inline-end: 16px; top: 16px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--c-line); background: #fff; color: var(--c-ink); z-index: 2; }
.modal-close:hover { background: var(--c-bg-soft); }
.modal-body { padding: 32px; }
body.modal-open { overflow: hidden; }

/* ---------------------------------------------------------------- toast */
.toasts { position: fixed; inset-inline-end: 24px; bottom: 24px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast { display: flex; align-items: center; gap: 10px; min-width: 260px; max-width: 420px; padding: 14px 18px; border-radius: 14px; background: var(--c-ink); color: #fff; font-size: 14px; font-weight: 600; box-shadow: var(--shadow-pop); animation: toast-in .25s ease-out; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- popover */
.popover { position: absolute; z-index: 60; top: calc(100% + 8px); inset-inline-start: 0; min-width: 100%; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); padding: 8px; display: none; }
.popover.is-open { display: block; }

/* ---------------------------------------------------------------- segmented */
.segmented { display: inline-flex; padding: 4px; gap: 4px; border-radius: var(--r-pill); background: var(--c-bg-muted); }
.segmented > * { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding-inline: 14px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; color: var(--c-ink-2); background: transparent; border: 0; }
.segmented > .is-active { background: #fff; color: var(--c-ink); box-shadow: 0 1px 3px rgba(7,19,45,.12); }

/* ---------------------------------------------------------------- stepper (+ / −) */
.stepper { display: inline-flex; align-items: center; gap: 12px; }
.stepper button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--c-line-2); background: #fff; display: grid; place-items: center; color: var(--c-ink); }
.stepper button:hover:not(:disabled) { border-color: var(--c-primary); color: var(--c-primary); }
.stepper button:disabled { opacity: .35; }
.stepper output { min-width: 18px; text-align: center; font-weight: 700; }

/* ---------------------------------------------------------------- misc */
.divider { height: 1px; background: var(--c-line); border: 0; margin: 0; }
.price { font-weight: 800; letter-spacing: -.02em; }
.price small { font-size: .55em; font-weight: 600; color: var(--c-muted); letter-spacing: 0; }
.price sup { font-size: .5em; font-weight: 700; vertical-align: .55em; }
.badge-count { position: absolute; top: -4px; inset-inline-end: -4px; min-width: 18px; height: 18px; padding-inline: 5px; border-radius: 9px; background: var(--c-primary); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.is-loading .btn-label { opacity: .0; }

/* ---------------------------------------------------------------- key / value table (developer pages) */
.kv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.kv-table th, .kv-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--c-line); vertical-align: top; word-break: break-all; }
.kv-table th { width: 38%; color: var(--c-ink-2); font-weight: 600; }