/* GIFTME — custom theme on top of Bootstrap 5.3 */
:root {
  --gm-primary: #6d28d9;
  --gm-primary-dark: #5b21b6;
  --gm-accent: #ec4899;
  --gm-ink: #1e1b2e;
  --gm-soft: #f5f3ff;
  --gm-grad: linear-gradient(135deg, #6d28d9 0%, #ec4899 100%);
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--gm-ink);
  background: #fafafb;
  /* Sticky footer: page fills viewport, footer stays at the bottom. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }
.footer { flex-shrink: 0; }

a { text-decoration: none; }

/* Toast alerts (site-wide messages) — stacked, top-right, gradient by type */
.gm-alerts { position: fixed; top: 20px; right: 20px; z-index: 1300; width: 100%;
  max-width: 380px; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.gm-alert { pointer-events: auto; display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-radius: 14px; color: #fff; font-weight: 600; font-size: .9rem;
  box-shadow: 0 14px 30px rgba(30,27,46,.22); animation: gmAlertIn .32s cubic-bezier(.2,.9,.3,1.1) both; }
.gm-alert i { font-size: 1.15rem; flex: 0 0 auto; }
.gm-alert .btn-close { opacity: .85; }
.gm-alert.is-out { animation: gmAlertOut .3s ease forwards; }
.gm-alert.is-success { background: linear-gradient(135deg, #157347 0%, #34d399 100%); }
.gm-alert.is-danger  { background: linear-gradient(135deg, #b3123a 0%, #ec4899 100%); }
.gm-alert.is-warning { background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%); }
.gm-alert.is-info    { background: var(--gm-grad); }
@keyframes gmAlertIn  { from { opacity: 0; transform: translateX(24px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes gmAlertOut { to { opacity: 0; transform: translateX(24px) scale(.96); } }
@media (max-width: 576px) {
  .gm-alerts { left: 12px; right: 12px; top: 12px; max-width: none; }
}

/* Recipient-phone confirm dialog — shown before payment when buying for
   someone else ("Boshqasiga sotib olayapman" flow). */
.gm-confirm-backdrop { position: fixed; inset: 0; background: rgba(20,16,32,.55);
  z-index: 900; display: none; align-items: center; justify-content: center; padding: 20px; }
.gm-confirm-backdrop.open { display: flex; }
.gm-confirm { background: #fff; border-radius: 20px; padding: 28px 24px; max-width: 360px;
  width: 100%; text-align: center; box-shadow: 0 24px 60px rgba(20,16,32,.35);
  animation: gmConfirmIn .25s cubic-bezier(.2,.9,.3,1.1) both; }
.gm-confirm .ic { width: 56px; height: 56px; border-radius: 50%; background: var(--gm-soft);
  color: var(--gm-primary); display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; margin: 0 auto 14px; }
.gm-confirm h3 { font-size: .95rem; font-weight: 600; color: #6b6480; margin: 0 0 8px; }
.gm-confirm .num { font-family: 'Fraunces', Georgia, serif; font-size: 1.6rem; font-weight: 700;
  color: var(--gm-ink); letter-spacing: .02em; margin-bottom: 22px; word-break: break-word; }
.gm-confirm .actions { display: flex; gap: 10px; }
.gm-confirm .actions button { flex: 1; min-height: 48px; border-radius: 12px; border: none;
  font-weight: 700; font-size: .95rem; cursor: pointer; }
.gm-confirm .btn-no { background: #f3f1f8; color: #4b4563; }
.gm-confirm .btn-yes { background: var(--gm-grad); color: #fff; }
@keyframes gmConfirmIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }

/* Per-page "Info" button (ARM + merchant kabinet) — explains the current
   page; auto-shows once per browser (localStorage), always re-openable. */
.gm-info-btn { display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid #e3def3;
  background: #fff; color: var(--gm-primary); cursor: pointer; flex: 0 0 auto;
  font-size: .85rem; padding: 0; }
.gm-info-btn:hover { background: var(--gm-soft); }

/* ARM autocomplete widget (AutocompleteSelect form field) */
.gm-ac { position: relative; }
.gm-ac-menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 1000;
  background: #fff; border: 1px solid #dee2e6; border-radius: .5rem;
  box-shadow: 0 8px 24px rgba(20,16,32,.14); max-height: 260px; overflow-y: auto;
  margin-top: 4px; display: none; }
.gm-ac-menu.open { display: block; }
.gm-ac-item { padding: .5rem .75rem; cursor: pointer; font-size: .9rem; }
.gm-ac-item:hover, .gm-ac-item.active { background: var(--gm-soft); color: var(--gm-primary); }
.gm-ac-empty { padding: .5rem .75rem; font-size: .85rem; color: #9ca3af; }

/* "Hoziroq / Keyinroq jo'natish" segmented choice (gift reveal timing) */
.gm-seg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.gm-seg-opt { position: relative; display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 10px 12px; border: 1.5px solid #e7e3f5; border-radius: 12px;
  cursor: pointer; font-weight: 600; font-size: .88rem; color: #6b6480;
  transition: border-color .15s, background .15s, color .15s; }
.gm-seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.gm-seg-opt:has(input:checked) { border-color: transparent; background: var(--gm-grad); color: #fff; }

/* Brand / buttons */
.text-gm { color: var(--gm-primary) !important; }
.bg-gm { background: var(--gm-primary) !important; }
.bg-gm-subtle { background: var(--gm-soft) !important; }
.text-bg-gm { background: var(--gm-primary) !important; color: #fff !important; }

/* Pagination — GM tema (bootstrap default ko'k o'rniga) */
.pagination { --bs-pagination-color: var(--gm-primary);
  --bs-pagination-hover-color: var(--gm-primary-dark);
  --bs-pagination-focus-color: var(--gm-primary-dark);
  --bs-pagination-hover-bg: var(--gm-soft);
  --bs-pagination-focus-bg: var(--gm-soft);
  --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(109,40,217,.25);
  --bs-pagination-active-bg: var(--gm-primary);
  --bs-pagination-active-border-color: var(--gm-primary);
  gap: 4px; }
.pagination .page-link { border-radius: 10px; border-color: #e3def3; font-weight: 600; }
.pagination .page-item.active .page-link { background: var(--gm-grad);
  border-color: transparent; box-shadow: 0 6px 16px rgba(109,40,217,.28); }
.pagination .page-link:focus { box-shadow: 0 0 0 .2rem rgba(109,40,217,.25); }
.bg-gm-grad { background: var(--gm-grad) !important; }
.btn-gm {
  background: var(--gm-grad); border: none; color: #fff; font-weight: 600;
}
.btn-gm:hover { color: #fff; opacity: .92; }
.btn-outline-gm {
  border: 1.5px solid var(--gm-primary); color: var(--gm-primary); font-weight: 600;
}
.btn-outline-gm:hover { background: var(--gm-primary); color: #fff; }

.navbar-brand { font-weight: 800; letter-spacing: -.5px; }
.brand-dot { color: var(--gm-accent); }

/* Hero */
.hero {
  background: var(--gm-grad); color: #fff; border-radius: 1.5rem;
  padding: 3.5rem 2rem; position: relative; overflow: hidden;
}
.hero h1 { font-weight: 800; font-size: clamp(1.8rem, 4vw, 3rem); }
.hero .hero-emoji { font-size: 6rem; opacity: .25; position: absolute; right: 2rem; top: 1rem; }

/* Cards */
.card { border: 1px solid #ececf2; border-radius: 1rem; }
.cert-card { transition: transform .15s ease, box-shadow .15s ease; height: 100%; }
.cert-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(109,40,217,.12); }
.cert-card .card-body { display: flex; flex-direction: column; height: 100%; }
.cert-thumb {
  aspect-ratio: 16/9; background: var(--gm-soft); border-radius: .85rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem; color: var(--gm-primary); overflow: hidden;
}
.cert-thumb img { width: 100%; height: 100%; object-fit: cover; }

.amount-tag { font-weight: 800; color: var(--gm-primary); font-size: 1.15rem; }

/* Category chips */
.cat-chip {
  display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem;
  border-radius: 999px; background: #fff; border: 1px solid #ececf2;
  color: var(--gm-ink); font-weight: 500;
}
.cat-chip:hover, .cat-chip.active { background: var(--gm-soft); border-color: var(--gm-primary); color: var(--gm-primary); }

/* Trusted-by logo strip */
.trust-logo {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 78px; padding: .8rem 1.5rem; border-radius: .9rem; background: #fff;
  border: 1px solid #ececf2; text-decoration: none; filter: grayscale(1);
  opacity: .75; transition: .15s;
}
.trust-logo:hover { filter: none; opacity: 1; border-color: var(--gm-primary); }
.trust-name { font-weight: 800; font-size: 1.15rem; color: var(--gm-ink); white-space: nowrap; }

/* Category cards (with count) */
.cat-card {
  display: block; height: 100%; padding: 1.25rem 1rem; border-radius: 1rem;
  text-decoration: none; text-align: center; color: var(--gm-ink);
  background: linear-gradient(135deg, var(--gm-soft), #fff);
  border: 1px solid #ececf2; transition: .15s;
}
.cat-card:hover { transform: translateY(-3px); border-color: var(--gm-primary);
  box-shadow: 0 .6rem 1.4rem rgba(124,58,237,.12); }
.cat-card-icon {
  width: 54px; height: 54px; margin: 0 auto .6rem; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--gm-primary); font-size: 1.5rem;
  box-shadow: 0 .25rem .6rem rgba(124,58,237,.15);
}
.cat-card-name { font-weight: 700; }
.cat-card-count { font-size: .8rem; color: var(--gm-primary); font-weight: 600; }

/* Merchant logo placeholder (popular merchants) */
.merchant-logo-ph {
  width: 68px; height: 68px; border-radius: 16px; display: flex;
  align-items: center; justify-content: center; font-size: 1.8rem;
  background: var(--gm-soft); color: var(--gm-primary);
}

/* Stat cards (dashboards) */
.stat-card { border-radius: 1rem; padding: 1.25rem; background: #fff; border: 1px solid #ececf2; height: 100%; }
.stat-card .stat-value { font-size: 1.6rem; font-weight: 800; }
.stat-card .stat-label { color: #6b7280; font-size: .85rem; }
.stat-icon { width: 44px; height: 44px; border-radius: .75rem; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }

/* Portal shell */
.portal-sidebar {
  background: var(--gm-ink); color: #cbd5e1; min-height: 100vh; padding: 1rem;
}
.portal-sidebar .nav-link { color: #cbd5e1; border-radius: .6rem; margin-bottom: .15rem; font-weight: 500; }
.portal-sidebar .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.portal-sidebar .nav-link.active { background: var(--gm-grad); color: #fff; }
.portal-brand { color: #fff; font-weight: 800; font-size: 1.25rem; padding: .5rem .75rem 1rem; }

/* QR redeem */
.qr-token-box {
  font-family: 'SF Mono', ui-monospace, monospace; word-break: break-all;
  background: var(--gm-soft); padding: 1rem; border-radius: .75rem; font-size: .8rem;
}
.balance-big { font-size: 2.5rem; font-weight: 800; color: var(--gm-primary); }

/* Cabinet */
.cabinet-tab { border-radius: .75rem; padding: .65rem 1rem; font-weight: 600; color: #6b7280; }
.cabinet-tab.active { background: var(--gm-soft); color: var(--gm-primary); }

.footer { background: var(--gm-ink); color: #cbd5e1; padding: 3rem 0 2rem; margin-top: 4rem; }
.footer a { color: #cbd5e1; }
.footer a:hover { color: #fff; }
.footer h6 { font-weight: 700; margin-bottom: .8rem; }
.footer ul li { margin-bottom: .4rem; }
.footer-soc { width: 38px; height: 38px; border-radius: 11px; display: inline-flex;
  align-items: center; justify-content: center; background: rgba(255,255,255,.08);
  color: #fff; font-size: 1.1rem; transition: .15s; }
.footer-soc:hover { background: var(--gm-grad); color: #fff; transform: translateY(-2px); }

.empty-state { text-align: center; padding: 3rem 1rem; color: #9ca3af; }
.empty-state i { font-size: 3rem; }


/* ===========================================================================
   MINIAPP — Click WebView mobile shell (/m/).
   Skeleton adapted from the togora Click mini-app (structure/UX only);
   colours/typography are GIFTME's own (GM gradient + Fraunces).
   Design system: 480px shell, px-4, 64px bottom nav, 44px tap targets,
   card radius 16px, pill radius 999px, CTA radius 12px.
   =========================================================================== */
.ma-body { background: #f4f2fb; }
.ma-main { padding-top: 14px; padding-bottom: 84px; }   /* no header (Click native nav); clear bottom nav */
.ma-display { font-family: 'Fraunces', Georgia, serif; letter-spacing: -.4px; }
.ma-shell { max-width: 480px; margin: 0 auto; padding: 0 16px; }

/* ── Hero banner ──────────────────────────────────────────────────────────── */
.ma-hero {
  background: var(--gm-grad); color: #fff; border-radius: 18px; padding: 20px 18px;
  position: relative; overflow: hidden; box-shadow: 0 14px 32px rgba(109,40,217,.26);
}
.ma-hero::after { content: ""; position: absolute; right: -36px; top: -36px;
  width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,.14); }
.ma-hero h1 { font-size: 1.35rem; font-weight: 700; margin: 0; }
.ma-hero p { opacity: .92; font-size: .85rem; margin: 6px 0 0; max-width: 90%; }
/* photo hero — full bleed image, scrim, text at bottom */
.ma-hero.photo { background: #111; padding: 0; min-height: 220px; display: flex; flex-direction: column; box-shadow: none; }
.ma-hero.photo::after { display: none; }
.ma-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 18px; }
.ma-hero-scrim { position: absolute; inset: 0; border-radius: 18px;
  background: linear-gradient(to top, rgba(109,40,217,.72) 0%, rgba(160,45,210,.28) 45%, rgba(236,72,153,.06) 72%, transparent 88%); }
.ma-hero-body { position: relative; z-index: 1; margin-top: auto; padding: 18px 18px 20px; }
.ma-hero.photo h1 { font-size: 1.35rem; font-weight: 700; margin: 0; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 3px 10px rgba(0,0,0,.55); }
.ma-hero.photo p { font-size: .85rem; color: rgba(255,255,255,.92); margin: 5px 0 0; opacity: 1; max-width: 90%;
  text-shadow: 0 1px 3px rgba(0,0,0,.72); }
.ma-hero.photo .ma-hero-bal { background: rgba(0,0,0,.28); color: #fff;
  border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* ── Section header (title + circular "see all" arrow) ────────────────────── */
.ma-section { margin-top: 22px; }
.ma-sechead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ma-sechead h2 { font-size: 1.2rem; font-weight: 700; margin: 0; letter-spacing: -.3px; }
.ma-seeall { width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1px solid #ece9f6;
  display: flex; align-items: center; justify-content: center; color: var(--gm-primary); font-size: 1rem; }

/* ── Horizontal scroller ──────────────────────────────────────────────────── */
.ma-hscroll { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none;
  margin: 0 -16px; padding: 2px 16px 4px; -webkit-overflow-scrolling: touch; }
.ma-hscroll::-webkit-scrollbar { display: none; }

/* ── Circular category scroller (home) ────────────────────────────────────── */
.ma-cat { flex: 0 0 auto; width: 72px; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.ma-cat .ring { width: 64px; height: 64px; border-radius: 50%; background: var(--gm-grad);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.6rem;
  box-shadow: 0 8px 18px rgba(109,40,217,.22); }
.ma-cat span { font-size: .72rem; text-align: center; line-height: 1.15; color: #4b4563;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Category grid cards (catalog, 2-col) ─────────────────────────────────── */
.ma-catgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ma-catcard {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: #fff; border: 1px solid #ece9f6; border-radius: 14px; padding: 12px 12px 12px 14px;
  min-height: 64px;
}
.ma-catcard b { font-size: .82rem; font-weight: 600; color: var(--gm-ink); line-height: 1.2; }
.ma-catcard small { color: #9b95ad; font-size: .68rem; display: block; }
.ma-catcard small.more { color: var(--gm-primary); font-weight: 600; margin-top: 2px; }
.ma-catcard .tile { width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto;
  background: var(--gm-soft); color: var(--gm-primary); display: flex; align-items: center;
  justify-content: center; font-size: 1.15rem; }

/* ── Product card (surface) — price → title → merchant ────────────────────── */
.ma-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.ma-pcard { display: flex; flex-direction: column; background: #fff; border: 1px solid #ece9f6;
  border-radius: 16px; padding: 8px 8px 10px; transition: transform .12s ease, box-shadow .12s ease; }
.ma-pcard:active { transform: scale(.985); box-shadow: 0 10px 24px rgba(109,40,217,.12); }
.ma-pcard.scroll { flex: 0 0 220px; width: 220px; }
.ma-pcard .thumb { aspect-ratio: 16/9; width: 100%; border-radius: 12px; overflow: hidden;
  background: var(--gm-soft); display: flex; align-items: center; justify-content: center;
  color: var(--gm-primary); font-size: 2.2rem; }
.ma-pcard .thumb img { width: 100%; height: 100%; object-fit: cover; }
.ma-pcard .price { margin-top: 9px; font-weight: 700; color: var(--gm-primary); font-size: .92rem; }
.ma-pcard .name { font-size: .85rem; font-weight: 600; color: var(--gm-ink); line-height: 1.25; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ma-pcard .merch { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.ma-pcard .merch .lg { width: 22px; height: 18px; border-radius: 4px; background: var(--gm-soft);
  display: flex; align-items: center; justify-content: center; color: var(--gm-primary); font-size: .7rem; flex: 0 0 auto; }
.ma-pcard .merch span { font-size: .72rem; color: #6b6480; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-pcard .valid { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; align-self: flex-start;
  font-size: .68rem; color: var(--gm-primary); background: var(--gm-soft); border-radius: 999px; padding: 3px 8px; }
.ma-pcard .valid i { font-size: .7rem; }

/* ── Wallet certificate cards ─────────────────────────────────────────────── */
.ma-cert { border-radius: 18px; padding: 18px; color: #fff; position: relative; overflow: hidden;
  background: var(--gm-grad); box-shadow: 0 12px 28px rgba(109,40,217,.22); }
.ma-cert.scroll { flex: 0 0 270px; width: 270px; }
.ma-cert::after { content: ""; position: absolute; right: -28px; bottom: -50px; width: 150px; height: 150px;
  border-radius: 50%; background: rgba(255,255,255,.12); }
.ma-cert .row { display: flex; align-items: center; justify-content: space-between; }
.ma-cert .merch { font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; opacity: .85; }
.ma-cert .ttl { font-weight: 700; font-size: 1.02rem; margin: 6px 0 14px; }
.ma-cert .bal-label { font-size: .7rem; opacity: .82; }
.ma-cert .bal { font-family: 'Fraunces', serif; font-size: 1.55rem; font-weight: 700; line-height: 1.1; }
.ma-chip-soft { background: rgba(255,255,255,.22); border-radius: 999px; padding: 5px 10px; font-size: .7rem; font-weight: 600; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.ma-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  min-height: 48px; padding: 12px 16px; border-radius: 12px; font-weight: 700; border: none; font-size: .95rem;
  box-sizing: border-box; }
.ma-btn-primary { background: var(--gm-grad); color: #fff; box-shadow: 0 10px 22px rgba(109,40,217,.28); }
.ma-btn-primary:active { transform: translateY(1px); color: #fff; }
.ma-btn-ghost { background: #fff; border: 1.5px solid #e3def3; color: var(--gm-primary); }
.ma-map-toggle { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  background: #fff; border: 1.5px solid #e3def3; color: var(--gm-primary);
  border-radius: 999px; padding: 7px 14px; font-size: .8rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ma-map-toggle:active { transform: translateY(1px); }
.ma-map-wrap { margin-top: 12px; }
#ma-map { height: 280px; border-radius: 16px; overflow: hidden; border: 1px solid #ece9f6;
  box-shadow: 0 8px 22px rgba(33,27,46,.08); }
/* To'liq xarita: balandlik JS da dynamic hisoblanadi (header + nav o'lchanadi).
   CSS height — JS o'chgan holatdagi fallback. Eniga shell paddingni qisman qoplaydi. */
#ma-fullmap { height: calc(100vh - 160px); margin: 0 -8px;
  border-radius: 18px; overflow: hidden; border: 1px solid #ece9f6;
  box-shadow: 0 8px 22px rgba(33,27,46,.08); }

/* ── Search ───────────────────────────────────────────────────────────────── */
.ma-search { position: sticky; top: 0; z-index: 25; background: #f4f2fb; padding: 10px 0; }
.ma-search .box { position: relative; }
.ma-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #9b95ad; }
.ma-search input { width: 100%; border: 1px solid #e7e3f5; border-radius: 12px; background: #fff;
  padding: 12px 14px 12px 40px; font-size: .9rem; }
.ma-search input:focus { outline: none; border-color: var(--gm-primary); }

/* ── Breadcrumb / filter chips ────────────────────────────────────────────── */
.ma-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.ma-chips::-webkit-scrollbar { display: none; }
.ma-bc { flex: 0 0 auto; padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid #e7e3f5;
  color: #4b4563; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.ma-bc.is-active { background: var(--gm-grad); color: #fff; border-color: transparent; }

/* ── Rows (cabinet meta, branches) ────────────────────────────────────────── */
.ma-row { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #ece9f6;
  border-radius: 14px; padding: 12px; }
.ma-row .ic { width: 42px; height: 42px; border-radius: 12px; background: var(--gm-soft);
  display: flex; align-items: center; justify-content: center; color: var(--gm-primary); font-size: 1.2rem; flex: 0 0 auto; }

/* ── Sticky buy bar (product) ─────────────────────────────────────────────── */
.ma-buybar { position: fixed; left: 0; right: 0; bottom: 64px; z-index: 25;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.95); backdrop-filter: blur(10px); border-top: 1px solid #ece9f6; }
.ma-buybar .inner { max-width: 480px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }

/* ── QR ───────────────────────────────────────────────────────────────────── */
.ma-qr-wrap { background: #fff; border-radius: 18px; padding: 22px; text-align: center; box-shadow: 0 12px 30px rgba(30,27,46,.08); }
.ma-qr { display: flex; justify-content: center; margin: 14px 0; }
.ma-code { font-family: 'Fraunces', serif; font-size: 1.85rem; font-weight: 700; letter-spacing: 4px; color: var(--gm-ink); }

/* ── Bottom tab bar (filled active icon) ──────────────────────────────────── */
.ma-tabbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 40;
  width: 100%; max-width: 480px; display: flex; background: rgba(255,255,255,.97); backdrop-filter: blur(14px);
  border-top: 1px solid #ece9f6; height: 64px; padding-bottom: env(safe-area-inset-bottom); }
.ma-tab { flex: 1; min-height: 44px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; color: #9b95ad; font-size: .68rem; font-weight: 600; }
.ma-tab i { font-size: 1.35rem; }
.ma-tab.is-active { color: var(--gm-primary); }

/* ── Empty state ──────────────────────────────────────────────────────────── */
.ma-empty { text-align: center; padding: 2.5rem 1rem; color: #9b95ad; }
.ma-empty i { font-size: 2.6rem; display: block; margin-bottom: .5rem; opacity: .6; }

/* ── Cert QR shortcut pinned to the corner (home wallet) ──────────────────── */
.ma-cert .qr-corner { position: absolute; top: 14px; right: 14px; z-index: 1;
  width: 34px; height: 34px; border-radius: 11px; background: rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem; }

/* ── Cert corner group: status chip + QR (cabinet wallet) ─────────────────── */
.ma-cert .corner { position: absolute; top: 14px; right: 14px; z-index: 1;
  display: flex; align-items: center; gap: 6px; }
.ma-cert .corner .status-chip { background: rgba(255,255,255,.22); border-radius: 999px;
  padding: 5px 10px; font-size: .66rem; font-weight: 600; white-space: nowrap; }
.ma-cert .corner .qr-badge { width: 32px; height: 32px; border-radius: 10px; flex: 0 0 auto;
  background: rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.ma-cert .corner ~ .merch { padding-right: 150px; }
.ma-cert .corner ~ .ttl { padding-right: 96px; }

/* ── Inner-page back link ─────────────────────────────────────────────────── */
.ma-back { display: inline-flex; align-items: center; gap: 4px; margin: 10px 0 14px;
  color: #6b6480; font-size: .85rem; font-weight: 600; text-decoration: none; }
.ma-back:active { color: var(--gm-primary); }

/* ── Cabinet profile header ───────────────────────────────────────────────── */
.ma-profile { background: #fff; border: 1px solid #ece9f6; border-radius: 18px;
  padding: 22px 16px; text-align: center; margin-bottom: 16px; }
.ma-pavatar { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 12px;
  background: var(--gm-grad); color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 1.8rem;
  box-shadow: 0 10px 24px rgba(109,40,217,.28); }
.ma-pname { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.25rem; color: var(--gm-ink); }
.ma-pphone { color: #6b6480; font-size: .88rem; margin-top: 4px; }
.ma-pverified { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px;
  background: var(--gm-soft); color: var(--gm-primary); border-radius: 999px;
  padding: 4px 12px; font-size: .74rem; font-weight: 600; }

/* ── Cabinet menu buttons (column) ────────────────────────────────────────── */
.ma-menu { display: flex; flex-direction: column; gap: 10px; }
.ma-menubtn { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #ece9f6;
  border-radius: 16px; padding: 14px; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease; }
.ma-menubtn:active { transform: scale(.99); box-shadow: 0 8px 20px rgba(109,40,217,.1); }
.ma-menubtn .ic { width: 46px; height: 46px; border-radius: 13px; flex: 0 0 auto; background: var(--gm-soft);
  color: var(--gm-primary); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; }
.ma-menubtn .lb { flex: 1; min-width: 0; line-height: 1.25; }
.ma-menubtn .lb b { display: block; font-size: .92rem; color: var(--gm-ink); }
.ma-menubtn .lb small { color: #9b95ad; font-size: .74rem; }
.ma-menubtn .ct { flex: 0 0 auto; min-width: 26px; height: 24px; padding: 0 7px; border-radius: 999px;
  background: var(--gm-grad); color: #fff; font-size: .76rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.ma-menubtn .ch { color: #c3bdd6; font-size: 1.05rem; }

/* ── Sent-gift row card (bergan) ──────────────────────────────────────────── */
.ma-gift { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid #ece9f6;
  border-radius: 16px; padding: 12px; }
.ma-gift .thumb { width: 52px; height: 52px; border-radius: 12px; flex: 0 0 auto; background: var(--gm-soft);
  display: flex; align-items: center; justify-content: center; color: var(--gm-primary); font-size: 1.3rem; overflow: hidden; }
.ma-gift .thumb img { width: 100%; height: 100%; object-fit: cover; }
.ma-gift .info { flex: 1; min-width: 0; }
.ma-gift .info b { display: block; font-size: .88rem; color: var(--gm-ink); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-gift .info small { color: #9b95ad; font-size: .74rem; }
.ma-gift .amt { text-align: right; flex: 0 0 auto; }
.ma-gift .amt .v { font-weight: 700; color: var(--gm-primary); font-size: .86rem; white-space: nowrap; }

/* ── Sent-gift inline pay pill (To'lov kutilmoqda → Click) ────────────────── */
.ma-paybtn { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px;
  padding: 5px 10px; border-radius: 999px; background: var(--gm-grad); color: #fff;
  font-size: .7rem; font-weight: 700; white-space: nowrap; text-decoration: none; }
.ma-paybtn:active { transform: translateY(1px); color: #fff; }

/* ── Compact map links (Yandex/Google) at branch row end ──────────────────── */
.ma-maplinks { display: flex; gap: 6px; flex: 0 0 auto; }
.ma-maplink { width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto;
  border: 1px solid #e3def3; background: #fff; color: var(--gm-primary);
  display: flex; align-items: center; justify-content: center; font-size: 1rem; text-decoration: none; }
.ma-maplink:active { background: var(--gm-soft); }

/* ── Product meta chips (category · validity · QR) ────────────────────────── */
.ma-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ma-mchip { display: inline-flex; align-items: center; gap: 5px; background: #fff; border: 1px solid #ece9f6;
  border-radius: 999px; padding: 6px 12px; font-size: .74rem; font-weight: 600; color: #4b4563; }
.ma-mchip i { color: var(--gm-primary); }

/* ── Certificate usage progress bar ───────────────────────────────────────── */
.ma-usage-head { display: flex; justify-content: space-between; font-size: .74rem; color: #6b6480;
  margin-bottom: 6px; font-weight: 600; }
.ma-bar { height: 8px; border-radius: 999px; background: #ece9f6; overflow: hidden; }
.ma-bar-fill { height: 100%; border-radius: 999px; background: var(--gm-grad);
  transition: width .4s ease; min-width: 4px; }

/* ── Cabinet profile member-since ─────────────────────────────────────────── */
.ma-pmeta { color: #9b95ad; font-size: .76rem; margin-top: 4px; }

/* ── Home hero wallet-balance pill ────────────────────────────────────────── */
.ma-hero-bal { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 14px; background: rgba(255,255,255,.16); border-radius: 13px; padding: 10px 14px;
  color: #fff; text-decoration: none; backdrop-filter: blur(2px); }
.ma-hero-bal span { font-size: .76rem; opacity: .9; }
.ma-hero-bal b { font-family: 'Fraunces', serif; font-size: 1.15rem; }

/* ── Bottom sheet (gift purchase form) ────────────────────────────────────── */
.ma-sheet-backdrop { position: fixed; inset: 0; background: rgba(20,16,40,.45); z-index: 50;
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; }
.ma-sheet-backdrop.open { opacity: 1; visibility: visible; }
.ma-sheet { position: fixed; left: 50%; bottom: 0; width: 100%; max-width: 480px; z-index: 51;
  transform: translateX(-50%) translateY(100%); transition: transform .28s ease;
  background: #fff; border-radius: 22px 22px 0 0; padding: 8px 16px calc(20px + env(safe-area-inset-bottom));
  max-height: 90vh; overflow-y: auto; box-shadow: 0 -10px 40px rgba(20,16,40,.18); }
.ma-sheet.open { transform: translateX(-50%) translateY(0); }
.ma-sheet .grip { width: 42px; height: 5px; border-radius: 999px; background: #e3def3; margin: 8px auto 14px; }

.ma-seg { display: flex; gap: 6px; background: #ece9f6; border-radius: 12px; padding: 4px; margin: 14px 0; }
.ma-seg button { flex: 1; border: none; background: transparent; padding: 10px; border-radius: 9px;
  font-weight: 600; font-size: .85rem; color: #6b6480; }
.ma-seg button.active { background: #fff; color: var(--gm-primary); box-shadow: 0 2px 8px rgba(30,27,46,.06); }

.ma-field { margin-bottom: 12px; }
.ma-field label { font-size: .78rem; font-weight: 600; color: #4b4563; display: block; margin-bottom: 6px; }
.ma-field input, .ma-field textarea { width: 100%; border: 1px solid #e7e3f5; border-radius: 12px;
  padding: 12px 14px; font-size: .92rem; background: #fff; font-family: inherit; }
.ma-field input:focus, .ma-field textarea:focus { outline: none; border-color: var(--gm-primary); }

/* ── Gift claim card (SMS short link landing, inside /m/) ─────────────────── */
.ma-claim { background: #fff; border: 1px solid #ece9f6; border-radius: 20px; padding: 18px;
  margin-top: -18px; position: relative; z-index: 2; text-align: center;
  box-shadow: 0 14px 34px rgba(33,27,46,.1); }
.ma-claim-img { width: 100%; max-height: 200px; object-fit: cover; border-radius: 14px; margin-bottom: 14px; }
.ma-claim-amount { font-size: 2.4rem; font-weight: 700; color: var(--gm-primary); line-height: 1; }
.ma-claim-msg { background: var(--gm-soft); border-radius: 14px; padding: 12px 14px;
  font-style: italic; color: #4b4563; font-size: .9rem; text-align: left; }

/* ── Gift claim intro: 3D box reveal (/m/g/<token>/) ─────────────────────────
   Faux-3D gift box opens -> lid pops -> flash + confetti -> content reveal.
   All classes prefixed .gc-* to avoid clashing with bootstrap (.card/.row) and
   the GM theme. Audio gestures handled in the template script. */
.gc-intro {
  position: fixed; inset: 0; z-index: 1200; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 50% 40%, #faf8ff 0%, #efeaff 52%, #e2d9fb 100%);
  opacity: 1; transition: opacity .85s cubic-bezier(.4,0,.4,1);   /* sekin fade-out */
}
.gc-intro.is-fade { opacity: 0; }
.gc-intro.is-done { display: none; }
.gc-skip-btn {
  position: absolute; top: 1rem; right: 1rem;
  display: flex; align-items: center; gap: .38rem;
  padding: .38rem .9rem; border-radius: 999px;
  background: rgba(255,255,255,.55); backdrop-filter: blur(8px);
  border: 1px solid rgba(109,40,217,.2); color: #6d28d9;
  font-size: .78rem; font-weight: 600; cursor: pointer; z-index: 10;
  transition: background .18s, transform .1s;
}
.gc-skip-btn:hover { background: rgba(255,255,255,.82); transform: scale(1.04); }

/* markazdan tarqaladigan flash */
.gc-beam {
  position: absolute; left: 50%; top: 44%; width: 8px; height: 8px;
  border-radius: 50%; transform: translate(-50%,-50%) scale(0);
  background: radial-gradient(circle, rgba(255,255,255,.98) 0%, rgba(245,209,66,.85) 26%, rgba(236,72,153,.5) 48%, rgba(109,40,217,0) 74%);
  opacity: 0; pointer-events: none; will-change: transform, opacity;
}
.gc-beam.go { animation: gcBeamFlash 1s cubic-bezier(.15,.7,.2,1) forwards; }
@keyframes gcBeamFlash {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(0); }
  16%  { opacity: 1; transform: translate(-50%,-50%) scale(34); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(96); }
}

/* aylanma yorug'lik shu'lalari */
.gc-rays {
  position: absolute; left: 50%; top: 44%; width: 360px; height: 360px;
  transform: translate(-50%,-50%) scale(.3) rotate(0deg);
  opacity: 0; pointer-events: none; will-change: transform, opacity;
  background: conic-gradient(from 0deg,
    transparent 0 9deg, rgba(245,209,66,.5) 9deg 12deg,
    transparent 12deg 39deg, rgba(245,209,66,.5) 39deg 42deg,
    transparent 42deg 69deg, rgba(245,209,66,.5) 69deg 72deg,
    transparent 72deg 99deg, rgba(245,209,66,.5) 99deg 102deg,
    transparent 102deg 129deg, rgba(245,209,66,.5) 129deg 132deg,
    transparent 132deg 159deg, rgba(245,209,66,.5) 159deg 162deg,
    transparent 162deg 189deg, rgba(245,209,66,.5) 189deg 192deg,
    transparent 192deg 219deg, rgba(245,209,66,.5) 219deg 222deg,
    transparent 222deg 249deg, rgba(245,209,66,.5) 249deg 252deg,
    transparent 252deg 279deg, rgba(245,209,66,.5) 279deg 282deg,
    transparent 282deg 309deg, rgba(245,209,66,.5) 309deg 312deg,
    transparent 312deg 339deg, rgba(245,209,66,.5) 339deg 342deg,
    transparent 342deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 26%, #000 32%, #000 64%, transparent 70%);
          mask: radial-gradient(circle, transparent 26%, #000 32%, #000 64%, transparent 70%);
}
.gc-rays.go { animation: gcRaysSpin 1.7s ease-out forwards; }
@keyframes gcRaysSpin {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.3) rotate(0deg); }
  20%  { opacity: .85; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.3) rotate(150deg); }
}

/* sahna + yer soyasi */
.gc-scene { position: relative; width: 200px; height: 210px;
  display: flex; align-items: flex-end; justify-content: center; }
.gc-shadow {
  position: absolute; left: 50%; bottom: 10px; width: 150px; height: 26px;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(91,33,182,.32), rgba(91,33,182,0));
  filter: blur(1px); z-index: 1;
}

/* quti (faux-3D) */
.gc-box { position: relative; width: 150px; height: 150px; z-index: 2; transform-origin: 50% 100%; }
.gc-box.is-idle { animation: gcIdleWiggle 1.15s ease-in-out infinite; }
@keyframes gcIdleWiggle {
  0%,100% { transform: rotate(-2.4deg) translateY(0); }
  25%     { transform: rotate(2.4deg) translateY(-3px); }
  50%     { transform: rotate(-1.6deg) translateY(0); }
  75%     { transform: rotate(1.8deg) translateY(-2px); }
}
.gc-box.is-open { animation: gcBoxOpen .75s cubic-bezier(.34,1.4,.5,1) forwards; }
@keyframes gcBoxOpen {           /* anticipation: squash -> stretch -> settle */
  0%   { transform: scale(1); }
  22%  { transform: scaleX(1.12) scaleY(.82); }
  48%  { transform: scaleX(.93)  scaleY(1.1); }
  72%  { transform: scaleX(1.04) scaleY(.97); }
  100% { transform: scale(1); }
}

/* tag (front face) */
.gc-base {
  position: absolute; left: 10px; right: 10px; bottom: 0; height: 104px;
  border-radius: 8px 8px 10px 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.12) 70%),
    linear-gradient(105deg,#8b5cf6 0%,#7c3aed 42%,#6d28d9 70%,#5b21b6 100%);
  box-shadow: 0 14px 26px rgba(91,33,182,.34),
              inset 0 -10px 18px rgba(46,16,101,.45),
              inset 0 2px 0 rgba(255,255,255,.15);
}
.gc-base::before {   /* top edge highlight */
  content: ""; position: absolute; left: -1px; right: -1px; top: 0; height: 9px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0));
}
.gc-base::after {    /* tik lenta */
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 24px;
  transform: translateX(-50%);
  background: linear-gradient(90deg,#e0b400 0%,#f5d142 30%,#fff3b0 50%,#f5d142 70%,#e0b400 100%);
  box-shadow: 0 0 10px rgba(245,209,66,.45), inset 0 0 6px rgba(160,110,0,.3);
}

/* qopqoq — tagdan kengroq (overhang) */
.gc-lid {
  position: absolute; left: 0; right: 0; top: 22px; height: 46px;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(0,0,0,.08) 80%),
    linear-gradient(105deg,#a78bfa 0%,#8b5cf6 45%,#7c3aed 100%);
  box-shadow: 0 9px 14px rgba(91,33,182,.3),
              inset 0 2px 0 rgba(255,255,255,.3),
              inset 0 -6px 10px rgba(46,16,101,.28);
  transform-origin: 50% 100%; z-index: 3;
}
.gc-lid::after {     /* qopqoqdagi tik lenta */
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 26px;
  transform: translateX(-50%);
  background: linear-gradient(90deg,#e0b400 0%,#f5d142 30%,#fff3b0 50%,#f5d142 70%,#e0b400 100%);
}
.gc-lid.is-open { animation: gcLidPop 1s cubic-bezier(.25,.9,.3,1) forwards; }
@keyframes gcLidPop {
  0%   { transform: translateY(0) rotate(0); }
  20%  { transform: translateY(-92px) rotate(-7deg); }
  55%  { transform: translate(46px,-180px) rotate(34deg); }
  100% { transform: translate(104px,-300px) rotate(76deg); opacity: 0; }
}

/* bant */
.gc-bow {
  position: absolute; left: 50%; top: 14px; width: 64px; height: 36px;
  transform: translateX(-50%); z-index: 4; font-size: 38px; line-height: 1;
  text-align: center; filter: drop-shadow(0 3px 5px rgba(91,33,182,.35));
}
.gc-bow.is-idle { animation: gcBowBob 1.15s ease-in-out infinite; }
@keyframes gcBowBob {
  0%,100% { transform: translateX(-50%) translateY(0) rotate(-2deg); }
  50%     { transform: translateX(-50%) translateY(-3px) rotate(2deg); }
}
.gc-bow.is-open { animation: gcLidPop 1s cubic-bezier(.25,.9,.3,1) forwards; }

/* qutidan otilib chiqadigan ichki nur */
.gc-pop {
  position: absolute; left: 50%; top: 54px; width: 70px; height: 70px;
  transform: translate(-50%,-50%) scale(0); opacity: 0; z-index: 2;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #f5d142 32%, rgba(236,72,153,0) 72%);
}
.gc-pop.go { animation: gcPopOut .65s ease-out forwards; }
@keyframes gcPopOut {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(0); }
  35%  { opacity: 1; transform: translate(-50%,-160%) scale(1.7); }
  100% { opacity: 0; transform: translate(-50%,-280%) scale(2.6); }
}

/* yuklanish / tap maslahati */
.gc-waiting {
  position: absolute; left: 0; right: 0; bottom: 22%; text-align: center;
  color: var(--gm-primary); font-size: .8rem; font-weight: 600;
  display: flex; gap: 6px; align-items: center; justify-content: center;
}
.gc-waiting.is-hide { opacity: 0; pointer-events: none; transition: opacity .3s; }
.gc-waiting.is-tap { animation: gcTapPulse 1.4s ease-in-out infinite; }
@keyframes gcTapPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.gc-waiting i { width: 7px; height: 7px; border-radius: 50%; background: var(--gm-primary);
  display: inline-block; animation: gcDot 1s ease-in-out infinite; }
.gc-waiting i:nth-child(2) { animation-delay: .16s; }
.gc-waiting i:nth-child(3) { animation-delay: .32s; }
@keyframes gcDot { 0%,100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }

/* content stagger reveal */
.gc-reveal { opacity: 0; transform: translateY(18px); }
.gc-reveal.show { animation: gcRise .6s cubic-bezier(.2,.7,.25,1) forwards; }
@keyframes gcRise { to { opacity: 1; transform: none; } }
.gc-d1 { animation-delay: .05s; } .gc-d2 { animation-delay: .18s; }
.gc-d3 { animation-delay: .31s; } .gc-d4 { animation-delay: .44s; }
.gc-reveal.gc-amount.show { animation: gcAmountPop .7s cubic-bezier(.2,.8,.3,1.15) forwards; }
@keyframes gcAmountPop {
  0%   { opacity: 0; transform: translateY(14px) scale(.92); }
  60%  { opacity: 1; transform: translateY(0) scale(1.05); }
  100% { opacity: 1; transform: none; }
}
#gc-content .ma-claim { transform: scale(.985); transition: transform .6s cubic-bezier(.2,.7,.25,1); }
#gc-content.is-lit .ma-claim { transform: none; }

.gc-replay {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--gm-primary); border: 1px solid #ece9f6;
  font-size: 1.1rem; cursor: pointer;
  box-shadow: 0 4px 12px rgba(33,27,46,.08); transition: transform .2s, color .2s;
}
.gc-replay:hover { color: var(--gm-accent); transform: rotate(-90deg); }

@media (prefers-reduced-motion: reduce) {
  .gc-intro { display: none; }
  .gc-reveal { opacity: 1; transform: none; }
  .gc-reveal.show, .gc-reveal.gc-amount.show { animation: none; }
  #gc-content .ma-claim { transform: none; transition: none; }
}

/* ===========================================================================
   GIFT PERSONALIZATION — occasion picker, scheduled-reveal lock, thank-you.
   (design spec 2026-06-17). Themed claim colours come from inline --gc-* vars
   set per occasion; these are the static structural styles.
   =========================================================================== */
/* Occasion chip grid (miniapp buy sheet) */
.ma-occ { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ma-occ-chip { position: relative; display: flex; flex-direction: row; align-items: center;
  justify-content: center; padding: 10px 8px; border: 1.5px solid #e7e3f5; border-radius: 13px;
  cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.ma-occ-chip input { position: absolute; opacity: 0; pointer-events: none; }
.ma-occ-chip .emo { font-size: 1.1rem; line-height: 1; }
/* margin-left (not flex gap) — older Click WebViews lack flex-gap support */
.ma-occ-chip .lbl { font-size: .64rem; font-weight: 600; color: #6b6480; margin-left: 6px; }
.ma-occ-chip:has(input:checked) { border-color: var(--gm-primary); background: var(--gm-soft); }
.ma-occ-chip:has(input:checked) .lbl { color: var(--gm-primary); }
/* Pretty miniapp toasts (override bootstrap .alert in the WebView shell) */
.ma-alerts { position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 1300; width: 100%; max-width: 460px; padding: 0 14px;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.ma-alert { pointer-events: auto; cursor: pointer; display: flex; align-items: center;
  gap: 10px; padding: 12px 14px; border-radius: 14px; background: #fff;
  font-size: .86rem; font-weight: 600; color: #2c2740; border: 1px solid #ece9f6;
  box-shadow: 0 12px 30px rgba(33,27,46,.16); border-left: 4px solid #9b95ad;
  animation: maAlertIn .32s cubic-bezier(.2,.9,.3,1.1) both; }
.ma-alert i { font-size: 1.2rem; flex: 0 0 auto; }
.ma-alert.is-out { animation: maAlertOut .34s ease forwards; }
.ma-alert.is-success { border-left-color: #1f9d57; } .ma-alert.is-success i { color: #1f9d57; }
.ma-alert.is-danger  { border-left-color: #e0395b; } .ma-alert.is-danger i  { color: #e0395b; }
.ma-alert.is-warning { border-left-color: #e0a100; } .ma-alert.is-warning i { color: #e0a100; }
.ma-alert.is-info    { border-left-color: var(--gm-primary); } .ma-alert.is-info i { color: var(--gm-primary); }
@keyframes maAlertIn  { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes maAlertOut { to { opacity: 0; transform: translateY(-14px) scale(.96); } }

/* Scheduled-reveal toggle row — icon + text inline; selected = filled bg */
.ma-toggle { display: flex; align-items: center; gap: 9px; cursor: pointer; margin: 0;
  border: 1.5px solid #e7e3f5; border-radius: 12px; padding: 10px 13px;
  font-size: .86rem; font-weight: 600; color: #4b4563;
  transition: border-color .15s, background .15s, color .15s; }
.ma-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.ma-toggle .tg-ico { font-size: 1.1rem; line-height: 1; color: var(--gm-primary); }
.ma-toggle:has(input:checked) { border-color: transparent; background: var(--gm-grad); color: #fff; }
.ma-toggle:has(input:checked) .tg-ico { color: #fff; }

/* Scheduled-reveal locked claim */
.gc-lock-ico { width: 64px; height: 64px; margin: 18px auto 6px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
  background: var(--gm-soft); color: var(--gc-accent, var(--gm-primary)); }
.gc-lock-date { font-size: 1.3rem; color: var(--gm-ink); }
.gc-countdown { font-family: 'Fraunces', serif; font-weight: 700; font-size: 1.9rem;
  letter-spacing: 1px; color: var(--gc-accent, var(--gm-primary)); margin-top: 8px; }

/* Thank-you flow */
.gc-thank-btn { color: #fff; box-shadow: 0 10px 22px rgba(109, 40, 217, .22); }
.gc-thanked { display: flex; flex-direction: column; gap: 2px; margin-top: 16px;
  background: #e9f9ef; color: #157347; border-radius: 13px; padding: 12px 14px;
  font-weight: 600; font-size: .9rem; }
.gc-thanked i { margin-right: 4px; }

/* ── Home: help button (hero corner) ──────────────────────────────────────── */
.ma-help-btn { position: absolute; top: 14px; right: 14px; z-index: 2; width: 34px; height: 34px;
  border-radius: 50%; background: rgba(255,255,255,.22); color: #fff; display: flex;
  align-items: center; justify-content: center; font-size: 1.1rem; text-decoration: none;
  backdrop-filter: blur(4px); }
.ma-help-btn:active { transform: scale(.92); }

/* ── Home: recipient persona chip ("Yaqinlaringizga tanlang") ─────────────── */
.ma-rcp { flex: 0 0 auto; width: 112px; display: flex; flex-direction: column; align-items: center;
  gap: 6px; text-align: center; text-decoration: none; }
.ma-rcp .av { width: 72px; height: 72px; border-radius: 50%; background: var(--gm-soft);
  color: var(--gm-primary); display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; overflow: hidden; border: 2px solid #fff; box-shadow: 0 8px 18px rgba(109,40,217,.18); }
.ma-rcp .av img { width: 100%; height: 100%; object-fit: cover; }
.ma-rcp b { font-size: .8rem; font-weight: 700; color: var(--gm-ink); line-height: 1.15; }
.ma-rcp small { font-size: .68rem; color: var(--gm-accent); font-weight: 600; }

/* ── Home: trusted brand chip ("Yetakchi brendlar") ───────────────────────── */
.ma-brandscroll { align-items: stretch; }
.ma-brand { flex: 0 0 auto; min-width: 280px; height: 168px; padding: 8px 12px; border-radius: 20px;
  background: #fff; border: 1px solid #ece9f6; display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 1.3rem; color: var(--gm-ink);
  text-decoration: none; white-space: nowrap; }
.ma-brand img { max-height: 148px; max-width: 320px; object-fit: contain; }

/* ── Catalog: persona banner ──────────────────────────────────────────────── */
.ma-persona { display: flex; align-items: center; gap: 12px; background: var(--gm-soft);
  border-radius: 16px; padding: 12px 14px; margin-top: 8px; }
.ma-persona .ic { width: 48px; height: 48px; border-radius: 50%; background: #fff; overflow: hidden;
  color: var(--gm-primary); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex: 0 0 auto; }
.ma-persona .ic img { width: 100%; height: 100%; object-fit: cover; }
.ma-persona small { display: block; font-size: .68rem; color: var(--gm-accent); font-weight: 600; }
.ma-persona b { font-size: 1.05rem; color: var(--gm-ink); }

/* ── Help page: steps + partner ───────────────────────────────────────────── */
.ma-steps { display: flex; flex-direction: column; gap: 14px; }
.ma-step { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #ece9f6;
  border-radius: 18px; padding: 12px; position: relative; }
.ma-step .num { position: absolute; top: 10px; left: 10px; width: 26px; height: 26px; border-radius: 9px;
  background: var(--gm-soft); color: var(--gm-primary); font-weight: 800; font-size: .85rem;
  display: flex; align-items: center; justify-content: center; }
.ma-step .art { width: 104px; height: 104px; flex: 0 0 auto; border-radius: 14px; overflow: hidden;
  background: var(--gm-grad); }
.ma-step .art img { width: 100%; height: 100%; object-fit: cover; }
.ma-step .bd b { font-size: .98rem; font-weight: 700; color: var(--gm-ink); }
.ma-step .bd p { margin: 4px 0 0; font-size: .8rem; color: #6b6480; line-height: 1.45; }
.ma-btn-grad { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px;
  background: var(--gm-grad); color: #fff; border-radius: 14px; padding: 14px; font-weight: 700;
  text-decoration: none; box-shadow: 0 12px 26px rgba(109,40,217,.24); }
.ma-btn-grad:active { transform: scale(.99); }
.ma-partner { background: var(--gm-grad); color: #fff; border-radius: 18px; padding: 22px 18px;
  text-align: center; box-shadow: 0 14px 32px rgba(109,40,217,.26); overflow: hidden; }
.ma-partner-img { width: 100%; max-height: 180px; object-fit: cover; border-radius: 12px; margin-bottom: 14px; display: block; }
.ma-partner .emoji { font-size: 2.4rem; }
.ma-partner b { display: block; font-family: 'Fraunces', serif; font-size: 1.25rem; margin: 8px 0 6px; }
.ma-partner p { font-size: .85rem; opacity: .92; margin: 0 0 16px; }
.ma-btn-light { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--gm-primary);
  border-radius: 999px; padding: 11px 22px; font-weight: 700; text-decoration: none; }

/* ── /g/<token>/ gift claim — premium WOW experience ────────────────────────
   Hero: full-width dramatic gradient with shimmer + radial highlight.
   Content: white card overlapping hero with rounded corners.
   Desktop: floating island card, max-width 640px, margin:auto.
   Mobile: full-width card.
   CSS vars --gc-from / --gc-to / --gc-accent set inline on .gc-wrap.        */

.ma-main:has(.gc-wrap) { padding: 0; }
body:has(.gc-wrap) { background: #e8e2f5; }

.gc-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.gc-panel-l {
  position: relative;
  background: linear-gradient(148deg, var(--gc-from, #6d28d9) 0%, var(--gc-to, #ec4899) 100%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 290px;
  padding: 24px 24px 52px;
}

/* Radial top-center depth highlight */
.gc-panel-l::before {
  content: "";
  position: absolute;
  left: 15%;
  top: -30%;
  width: 65%;
  height: 75%;
  background: radial-gradient(ellipse, rgba(255,255,255,.22) 0%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}

/* Diagonal shimmer sweep — fires once then loops */
.gc-panel-l::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    108deg,
    transparent 28%,
    rgba(255,255,255,.12) 50%,
    transparent 72%
  );
  transform: translateX(-200%);
  animation: gcHeroShimmer 5.5s ease-in-out 0.6s infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes gcHeroShimmer {
  0%,  45% { transform: translateX(-200%); }
  100%      { transform: translateX(340%); }
}

.gc-panel-l-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}

.gc-panel-l-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(0,0,0,.78) 0%,
    rgba(0,0,0,.22) 50%,
    rgba(0,0,0,.04) 100%);
}

.gc-panel-l-body {
  position: relative;
  z-index: 1;
  color: #fff;
  padding-right: 84px;
}

/* Emoji: large decorative watermark, right corner */
.gc-panel-l-emoji {
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-52%) rotate(14deg);
  font-size: 5.2rem;
  line-height: 1;
  opacity: 0.17;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.4));
  pointer-events: none;
  user-select: none;
}

/* Eyebrow: glass badge pill */
.gc-panel-l-eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: .6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .26em;
  margin: 0 0 12px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  padding: 4px 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 1;
}

.gc-panel-l-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.35rem, 5.5vw, 1.85rem);
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 20px rgba(0,0,0,.32);
}

.gc-panel-l-sub {
  font-size: .84rem;
  opacity: .78;
  margin: 7px 0 0;
}

/* Merchant pill — dark glass */
.gc-merchant-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(0,0,0,.24);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  padding: 5px 14px 5px 5px;
  margin-top: 18px;
  max-width: 100%;
}

.gc-merchant-pill-logo {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .88rem;
  color: #fff;
  overflow: hidden;
}

.gc-merchant-pill-logo img { width: 100%; height: 100%; object-fit: cover; }

.gc-merchant-pill-name {
  font-weight: 700;
  font-size: .8rem;
  color: rgba(255,255,255,.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.gc-merchant-pill-link {
  color: rgba(255,255,255,.75);
  margin-left: 6px;
}

.gc-merchant-pill-link:hover { color: #fff; }

/* ── Content card: overlaps hero, rounded top ── */
.gc-panel-r {
  background: #fff;
  padding: 32px 22px 52px;
  flex: 1;
  margin-top: -28px;
  border-radius: 28px 28px 0 0;
  position: relative;
  z-index: 2;
  box-shadow: 0 -8px 28px rgba(13,1,24,.14);
}

/* Amount — the WOW moment */
.gc-amount-hero {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.8rem, 8vw, 5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -1px;
  overflow-wrap: break-word;
  color: var(--gc-accent, var(--gm-primary));
  margin: 0 0 6px;
}

.gc-cert-title {
  font-size: .88rem;
  color: #9ca3af;
  font-weight: 500;
  margin: 0 0 28px;
}

/* Sender row */
.gc-sender-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

/* Avatar with accent ring */
.gc-sender-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gm-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--gm-primary);
  flex-shrink: 0;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--gc-accent, var(--gm-primary));
}

.gc-sender-label {
  font-size: .61rem;
  font-weight: 800;
  color: #c4c8d6;
  text-transform: uppercase;
  letter-spacing: .15em;
  margin-bottom: 3px;
}

.gc-sender-name {
  font-weight: 700;
  font-size: .96rem;
  color: var(--gm-ink);
}

/* Message: elegant blockquote with decorative quotation mark */
.gc-message-quote {
  position: relative;
  border-left: none;
  background: #f9f6ff;
  border-radius: 20px;
  padding: 18px 18px 18px 52px;
  margin-bottom: 24px;
  font-style: italic;
  color: #374151;
  font-size: .94rem;
  line-height: 1.7;
}

.gc-message-quote::before {
  content: "\201C";
  position: absolute;
  left: 15px;
  top: 8px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 3.4rem;
  line-height: 1;
  color: var(--gc-accent, var(--gm-primary));
  opacity: 0.3;
  font-style: normal;
}

/* Gradient separator */
.gc-hr {
  height: 1px;
  border: none;
  background: linear-gradient(to right, transparent, #e5e7eb 25%, #e5e7eb 75%, transparent);
  margin: 24px 0;
}

/* Thank form */
.gc-thank-wrap { margin-top: 2px; }

.gc-thank-prompt {
  font-size: .78rem;
  font-weight: 500;
  color: #9ca3af;
  margin: 0 0 10px;
}

.gc-thank-wrap textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid #e5e7eb;
  border-radius: 16px;
  padding: 13px 16px;
  font-size: .92rem;
  resize: none;
  color: var(--gm-ink);
  background: #fafafa;
  transition: border-color .22s, background .22s, box-shadow .22s;
  min-height: 80px;
  font-family: inherit;
  line-height: 1.6;
}

.gc-thank-wrap textarea:focus {
  outline: none;
  border-color: var(--gc-accent, var(--gm-primary));
  background: #fff;
  box-shadow: 0 0 0 3px rgba(109,40,217,.07);
}

/* Thank done */
.gc-thank-done {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 20px;
  padding: 18px;
}

.gc-thank-done-ico {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #dcfce7;
  color: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.gc-replay-row { text-align: center; margin-top: 28px; }

/* Replay button */
.gc-replay {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f5f3ff;
  color: var(--gc-accent, var(--gm-primary));
  border: none;
  font-size: 1.15rem;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.34,1.6,.64,1), background .2s;
  box-shadow: 0 4px 14px rgba(109,40,217,.1);
}
.gc-replay:hover { background: var(--gm-soft); transform: rotate(-150deg); }

/* ── Status panels (locked / unpaid) ── */
.gc-status-panel {
  background: #fff;
  padding: 56px 24px 64px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: -28px;
  border-radius: 28px 28px 0 0;
  position: relative;
  z-index: 2;
  box-shadow: 0 -8px 28px rgba(13,1,24,.14);
}

.gc-status-icon {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gm-soft), #f0ebff);
  color: var(--gc-accent, var(--gm-primary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  margin: 0 auto 20px;
  animation: gcStatusPulse 2.8s ease-in-out infinite;
}
@keyframes gcStatusPulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(109,40,217,.14); }
  50% { box-shadow: 0 8px 32px rgba(109,40,217,.3), 0 0 0 10px rgba(109,40,217,.06); }
}

.gc-countdown-display {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(2.6rem, 13vw, 3.8rem);
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1;
  color: var(--gc-accent, var(--gm-primary));
  margin: 14px 0 6px;
}

.gc-reveal-date {
  font-size: .88rem;
  font-weight: 500;
  color: #9ca3af;
  margin-bottom: 6px;
}

/* Card scale-up reveal animation */
#gc-content .gc-panel-r {
  transform: scale(.988) translateY(10px);
  transition: transform .65s cubic-bezier(.2,.7,.25,1);
}
#gc-content.is-lit .gc-panel-r { transform: none; }

/* ── Desktop: floating island card ── */
@media (min-width: 768px) {
  body:has(.gc-wrap) { background: #ddd6f0; }

  .gc-panel-l {
    min-height: 320px;
    padding: 44px 0 64px;
  }

  .gc-panel-l-body {
    max-width: 640px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    padding: 0 40px 0 44px;
    padding-right: 130px;
  }

  .gc-panel-l-emoji {
    font-size: 7.5rem;
    right: -16px;
    opacity: 0.14;
  }

  .gc-panel-l-title { font-size: 1.95rem; }

  /* Floating island: all corners rounded on desktop */
  .gc-panel-r {
    max-width: 640px;
    width: 100%;
    margin: -36px auto 56px;
    flex: none;
    padding: 44px 48px 68px;
    border-radius: 28px;
    box-shadow: 0 28px 70px rgba(13,1,24,.2), 0 4px 16px rgba(0,0,0,.06);
    box-sizing: border-box;
  }

  .gc-status-panel {
    max-width: 640px;
    width: 100%;
    margin: -36px auto 56px;
    flex: none;
    padding: 72px 48px;
    border-radius: 28px;
    min-height: 380px;
    box-shadow: 0 28px 70px rgba(13,1,24,.2), 0 4px 16px rgba(0,0,0,.06);
    box-sizing: border-box;
  }

  .gc-amount-hero {
    font-size: clamp(3rem, 5vw, 5.2rem);
    letter-spacing: -3px;
    overflow-wrap: normal;
  }

  #gc-content .gc-panel-r {
    transform: scale(.992) translateY(8px);
  }
}

/* ── Nominal chip (miniapp product page) ─────────────────────────────────── */
.ma-nominal-chip {
  border: 1.5px solid #e7e3f3; border-radius: 12px; background: #fff;
  padding: 8px 14px; font-weight: 700; font-size: .9rem; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.ma-nominal-chip.active {
  border-color: var(--gm-primary); background: var(--gm-soft); color: var(--gm-primary);
}