/* ============================================================
   shop.css - Design system Vardana Domain (storefront)
   Dipakai HANYA oleh layouts/shop.php. Tidak memuat style.css,
   jadi file ini harus berdiri sendiri.
   Prefix kelas: .vd-  (menghindari tabrakan dengan .dom- lama)
   ============================================================ */

/* ---------- 1. Token ---------- */
:root {
  /* Palet diambil dari referensi Figma yang kamu kirim */
  --sky:        #03A9F4;
  --sky-soft:   #B3E5FC;
  --deep:       #01579B;
  --amber:      #FF9800;
  --amber-soft: #FFE0B2;
  --ember:      #E65100;

  --ink:        #0B2233;
  --ink-2:      #3D5468;
  --ink-3:      #70889C;
  --line:       #DEE9F2;
  --line-2:     #EDF3F8;
  --mist:       #F4F9FC;
  --paper:      #FFFFFF;

  --ok:         #12A150;
  --ok-bg:      #E7F7EE;
  --no:         #C2410C;
  --no-bg:      #FDF0E8;
  --wait:       #8B5CF6;
  --wait-bg:    #F1ECFE;

  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 22px;

  --sh-1: 0 1px 2px rgba(11,34,51,.06);
  --sh-2: 0 6px 24px -8px rgba(11,34,51,.16);
  --sh-3: 0 24px 60px -18px rgba(11,34,51,.30);

  --nav-h: 66px;
  --ease: cubic-bezier(.22,.61,.36,1);

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --disp: "Outfit", "DM Sans", sans-serif;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* WAJIB di paling atas. .vd-modal{display:grid}, .vd-panel{display:flex}, dan
   .vd-btn{display:inline-flex} semuanya menimpa atribut [hidden] kalau aturan
   ini tidak ada, jadi modal dan panel akan terlihat sejak halaman dimuat.
   Ini bug yang sama persis dengan .co-panel dulu. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.vd {
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.vd.is-locked { overflow: hidden; }
h1,h2,h3,h4 { font-family: var(--disp); color: var(--ink); line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
a { color: inherit; text-decoration: none; }
/* ol WAJIB ikut, dan sampai ke level li. .vd-steps memakai counter sendiri
   lewat ::before. Kalau penomoran bawaan browser tidak dimatikan, angkanya
   muncul dua kali: "1. (1) Pembayaran terkonfirmasi..."
   Pakai !important karena file ini pernah termuat separuh dari cache server,
   dan gejalanya persis seperti reset ini tidak ada. */
ul, ol { list-style: none; }
ul li, ol li { list-style: none !important; }
ol { list-style-type: none !important; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
img, svg { max-width: 100%; display: block; }

:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; border-radius: 4px; }

.vd-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.vd-wrap--tight { max-width: 820px; }

/* .container dipakai view lama (checkout, akun) yang dulu mewarisi definisinya
   dari style.css. layouts/shop tidak memuat style.css, jadi tanpa alias ini
   isi halaman kehilangan margin auto dan menempel ke tepi kiri layar. */
.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* Nama domain dan angka selalu monospace. Ini tanda tangan tipografi halaman ini:
   domain itu sebuah alamat, bukan kalimat. */
.mono, .vd-dname, .vd-price-num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* ---------- 3. Tombol ---------- */
.vd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: var(--r-sm);
  font-family: var(--disp); font-weight: 600; font-size: .93rem; white-space: nowrap;
  transition: transform .14s var(--ease), background .16s, box-shadow .16s, border-color .16s;
}
.vd-btn:active { transform: translateY(1px); }
.vd-btn--go     { background: var(--amber); color: #fff; box-shadow: 0 4px 14px -4px rgba(255,152,0,.6); }
.vd-btn--go:hover { background: var(--ember); }
.vd-btn--sky    { background: var(--sky); color: #fff; }
.vd-btn--sky:hover { background: var(--deep); }
.vd-btn--line   { border: 1.5px solid var(--line); color: var(--ink); background: #fff; }
.vd-btn--line:hover { border-color: var(--sky); color: var(--deep); }
.vd-btn--ghost  { color: var(--deep); padding: 0 10px; }
.vd-btn--ghost:hover { background: var(--mist); }
.vd-btn--sm { height: 36px; padding: 0 14px; font-size: .85rem; border-radius: var(--r-xs); }
.vd-btn--block { width: 100%; }
.vd-btn[disabled] { opacity: .45; pointer-events: none; }

/* ---------- 4. Navbar ---------- */
.vd-nav {
  position: sticky; top: 0; z-index: 60;
  height: var(--nav-h); background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-2);
}
.vd-nav__in { height: 100%; display: flex; align-items: center; gap: 10px; }
.vd-nav__brand { display: flex; align-items: center; gap: 9px; margin-right: 6px; }
.vd-nav__brand img { height: 30px; width: auto; }
.vd-nav__name { font-family: var(--disp); font-weight: 700; font-size: 1.05rem; color: var(--ink); letter-spacing: -.03em; }
.vd-nav__name b { color: var(--sky); font-weight: 700; }
.vd-nav__links { display: flex; align-items: center; gap: 2px; margin-left: 18px; }
.vd-nav__links a {
  padding: 8px 13px; border-radius: var(--r-xs); font-size: .92rem; font-weight: 500; color: var(--ink-2);
  transition: background .15s, color .15s;
}
.vd-nav__links a:hover, .vd-nav__links a.is-on { background: var(--mist); color: var(--deep); }
.vd-nav__right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* Pemisah dua situs: pita tipis di navbar yang menautkan balik ke landing */
.vd-nav__switch {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px; border-radius: 999px;
  background: var(--mist); border: 1px solid var(--line);
  font-size: .82rem; font-weight: 500; color: var(--ink-2);
  transition: border-color .15s, color .15s;
}
.vd-nav__switch:hover { border-color: var(--sky); color: var(--deep); }
.vd-nav__switch svg { width: 14px; height: 14px; }

.vd-nav__burger { display: none; width: 40px; height: 40px; border-radius: var(--r-xs); }
.vd-nav__burger span { display: block; width: 18px; height: 2px; background: var(--ink); margin: 4px auto; border-radius: 2px; transition: transform .2s, opacity .2s; }
.vd-nav.is-open .vd-nav__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.vd-nav.is-open .vd-nav__burger span:nth-child(2) { opacity: 0; }
.vd-nav.is-open .vd-nav__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 5. Hero + pencarian ---------- */
.vd-hero {
  position: relative; padding: 62px 0 46px;
  background:
    radial-gradient(900px 340px at 50% -60px, #E6F6FE 0%, rgba(230,246,254,0) 70%),
    var(--paper);
  overflow: hidden;
}
.vd-hero::after { /* garis horizon tipis, bukan blob gradasi */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line-2);
}
.vd-hero__crumb { display: flex; align-items: center; gap: 7px; font-size: .82rem; color: var(--ink-3); margin-bottom: 18px; }
.vd-hero__crumb a:hover { color: var(--deep); }
.vd-hero__crumb svg { width: 12px; height: 12px; }

.vd-hero h1 {
  font-size: clamp(1.9rem, 4.4vw, 3.05rem); max-width: 15ch; margin-bottom: 12px;
}
.vd-hero h1 em { font-style: normal; color: var(--sky); }
.vd-hero__lead { font-size: 1.02rem; max-width: 52ch; color: var(--ink-2); margin-bottom: 26px; }

/* Kotak cari. Ini inti halaman, bukan ornamen hero. */
.vd-search { max-width: 720px; }
.vd-search__box {
  display: flex; align-items: center; gap: 8px; padding: 7px 7px 7px 16px;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--sh-2); transition: border-color .18s, box-shadow .18s;
}
.vd-search__box:focus-within { border-color: var(--sky); box-shadow: 0 0 0 4px rgba(3,169,244,.14); }
.vd-search__ico { width: 19px; height: 19px; color: var(--ink-3); flex: none; }
.vd-search__in {
  flex: 1; min-width: 0; height: 46px; border: 0; background: none; outline: none;
  font-family: var(--mono); font-size: 1.02rem; color: var(--ink);
}
.vd-search__in::placeholder { color: #A7BACB; font-family: var(--mono); }
.vd-search__clear { display: none; width: 30px; height: 30px; border-radius: 50%; color: var(--ink-3); }
.vd-search__clear:hover { background: var(--mist); color: var(--ink); }
.vd-search__box.has-val .vd-search__clear { display: grid; place-items: center; }

.vd-search__hint { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; font-size: .85rem; color: var(--ink-3); }
.vd-chip-try {
  padding: 3px 10px; border-radius: 999px; background: var(--mist); border: 1px solid var(--line);
  font-family: var(--mono); font-size: .8rem; color: var(--deep); transition: border-color .15s;
}
.vd-chip-try:hover { border-color: var(--sky); }
.vd-live { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-weight: 600; }
.vd-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: vdpulse 1.9s infinite; }
@keyframes vdpulse { 0%,100% { opacity: 1 } 50% { opacity: .3 } }

/* Bar cari yang menempel setelah user scroll melewati hero */
.vd-dock {
  position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 55;
  background: rgba(255,255,255,.95); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line); padding: 10px 0;
  transform: translateY(-120%); transition: transform .28s var(--ease);
}
.vd-dock.is-on { transform: translateY(0); }
.vd-dock__in { display: flex; align-items: center; gap: 10px; }
.vd-dock__in .vd-search__box { flex: 1; box-shadow: none; padding-left: 14px; }
.vd-dock__in .vd-search__in { height: 38px; font-size: .95rem; }

/* ---------- 6. Hasil cek ---------- */
.vd-res { margin-top: 26px; }
.vd-res__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.vd-res__head h2 { font-size: 1.05rem; }
.vd-res__head span { font-size: .84rem; color: var(--ink-3); }

.vd-res__lead { /* kartu besar untuk hasil utama (ekstensi yang diketik user) */
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding: 20px 22px; border-radius: var(--r-md); margin-bottom: 14px;
  border: 1.5px solid var(--line); background: #fff;
}
.vd-res__lead.is-ok { border-color: #9EE5BC; background: linear-gradient(180deg, var(--ok-bg), #fff 70%); }
.vd-res__lead.is-no { border-color: #F3C7AE; background: linear-gradient(180deg, var(--no-bg), #fff 70%); }
.vd-res__lead .vd-dname { font-size: 1.35rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; word-break: normal; }
.vd-res__lead .vd-res__act { margin-left: auto; display: flex; gap: 8px; }

.vd-res__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.vd-row {
  display: flex; align-items: center; gap: 12px; padding: 13px 15px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff;
  opacity: 0; transform: translateY(6px); animation: vdin .34s var(--ease) forwards;
  transition: border-color .15s, box-shadow .15s;
}
.vd-row:hover { border-color: var(--sky-soft); box-shadow: var(--sh-1); }
@keyframes vdin { to { opacity: 1; transform: none } }
.vd-row__main { min-width: 0; flex: 1; }
/* break-all dulu memotong "fragrantica.xyz" jadi "fragrant / ica.xyz".
   overflow-wrap: anywhere hanya memotong kalau memang tidak muat, jadi nama
   pendek tetap utuh dalam satu baris. */
.vd-row__name { display: block; font-family: var(--mono); font-size: .95rem; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; word-break: normal; }
.vd-row__meta { display: block; font-size: .8rem; color: var(--ink-3); margin-top: 2px; }
.vd-row__price { font-family: var(--mono); font-size: .9rem; color: var(--ink); font-weight: 600; }
/* Baris yang tidak bisa dibeli dibikin redup, bukan diberi kalimat penjelas
   tambahan. Satu badge sudah cukup memberi tahu kenapa. */
.vd-row.is-off { background: var(--mist); border-color: var(--line-2); }
.vd-row.is-off .vd-row__name { color: var(--ink-3); text-decoration: line-through; text-decoration-color: #C6D5E0; }

.vd-tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 600; letter-spacing: .01em; }
.vd-tag--ok   { background: var(--ok-bg);   color: var(--ok); }
.vd-tag--no   { background: var(--no-bg);   color: var(--no); }
.vd-tag--wait { background: var(--wait-bg); color: var(--wait); }
.vd-tag--doc  { background: var(--amber-soft); color: var(--ember); }
.vd-tag--pop  { background: #E6F6FE; color: var(--deep); }

.vd-skel { height: 62px; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--line-2) 25%, #F7FBFD 50%, var(--line-2) 75%); background-size: 200% 100%; animation: vdskel 1.1s infinite; }
@keyframes vdskel { to { background-position: -200% 0 } }
.vd-note { font-size: .84rem; color: var(--ink-3); margin-bottom: 12px; }
.vd-err { padding: 14px 16px; border-radius: var(--r-sm); background: var(--no-bg); color: var(--no); font-size: .9rem; }

/* ---------- 7. Bagian & tabel ekstensi ---------- */
.vd-sec { padding: 68px 0; }
.vd-sec--mist { background: var(--mist); border-block: 1px solid var(--line-2); }
.vd-sec__head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin-bottom: 26px; }
.vd-sec__head h2 { font-size: clamp(1.45rem, 3vw, 2rem); }
.vd-sec__head p { font-size: .95rem; color: var(--ink-2); max-width: 46ch; margin-top: 6px; }
.vd-sec__head .vd-sec__aside { margin-left: auto; }
.vd-kicker { display: block; font-family: var(--mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; color: var(--sky); margin-bottom: 8px; }

.vd-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.vd-tab {
  height: 36px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--line); background: #fff;
  font-size: .87rem; font-weight: 500; color: var(--ink-2); transition: all .15s;
}
.vd-tab:hover { border-color: var(--sky-soft); }
.vd-tab.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.vd-tab i { font-style: normal; opacity: .55; margin-left: 5px; font-family: var(--mono); font-size: .8em; }

/* Tabel, bukan grid kartu. 30+ ekstensi lebih mudah dipindai sebagai baris. */
.vd-tbl { width: 100%; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: #fff; }
.vd-tbl__h, .vd-tr {
  display: grid; grid-template-columns: 34px 1.35fr 1fr 1fr .9fr 132px; align-items: center; gap: 12px;
  padding: 0 16px;
}
.vd-tbl__h { height: 44px; background: var(--mist); border-bottom: 1px solid var(--line); font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); font-weight: 600; }
.vd-tbl__h button { display: inline-flex; align-items: center; gap: 4px; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; }
.vd-tbl__h button:hover { color: var(--deep); }
.vd-tbl__h button svg { width: 12px; height: 12px; opacity: .4; }
.vd-tbl__h button.is-sort svg { opacity: 1; color: var(--sky); }

.vd-tr { min-height: 62px; border-bottom: 1px solid var(--line-2); transition: background .13s; }
.vd-tr:last-child { border-bottom: 0; }
.vd-tr:hover { background: #FBFDFF; }
.vd-tr[hidden] { display: none; }
.vd-tr__tld { font-family: var(--mono); font-size: 1.02rem; font-weight: 600; color: var(--ink); }
.vd-tr__cat { font-size: .78rem; color: var(--ink-3); }
.vd-tr__num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .92rem; color: var(--ink); }
.vd-tr__num small { display: block; font-family: var(--sans); font-size: .74rem; color: var(--ink-3); }
.vd-tr__num.is-mute { color: var(--ink-3); font-weight: 400; }
.vd-tr__act { display: flex; justify-content: flex-end; gap: 6px; }
.vd-tr__cmp { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-xs); border: 1px solid var(--line); color: var(--ink-3); transition: all .15s; }
.vd-tr__cmp:hover { border-color: var(--sky); color: var(--sky); }
.vd-tr__cmp.is-on { background: var(--sky); border-color: var(--sky); color: #fff; }
.vd-tbl__empty { padding: 40px 20px; text-align: center; color: var(--ink-3); font-size: .92rem; }

.vd-foot-note { margin-top: 14px; font-size: .83rem; color: var(--ink-3); max-width: 78ch; }

/* ---------- 8. Baki banding (compare tray) ---------- */
.vd-tray {
  position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 150%); z-index: 58;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 12px 10px 18px; border-radius: 999px;
  background: var(--ink); color: #fff; box-shadow: var(--sh-3);
  transition: transform .3s var(--ease);
}
.vd-tray.is-on { transform: translate(-50%, 0); }
.vd-tray__list { display: flex; gap: 7px; }
.vd-tray__pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 11px; border-radius: 999px; background: rgba(255,255,255,.12); font-family: var(--mono); font-size: .85rem; }
.vd-tray__pill button { color: rgba(255,255,255,.6); display: grid; place-items: center; }
.vd-tray__pill button:hover { color: #fff; }
.vd-tray__x { color: rgba(255,255,255,.55); font-size: .84rem; padding: 0 4px; }
.vd-tray__x:hover { color: #fff; }

/* ---------- 9. Panel geser (slide-over) ---------- */
.vd-ovl { position: fixed; inset: 0; z-index: 90; background: rgba(11,34,51,.42); opacity: 0; pointer-events: none; transition: opacity .25s; }
.vd-ovl.is-on { opacity: 1; pointer-events: auto; }

.vd-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 95; width: min(460px, 100%);
  background: #fff; box-shadow: var(--sh-3); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .32s var(--ease);
}
.vd-panel.is-on { transform: none; }
.vd-panel__top { display: flex; align-items: flex-start; gap: 12px; padding: 20px 22px 16px; border-bottom: 1px solid var(--line-2); }
.vd-panel__top h3 { font-family: var(--mono); font-size: 1.5rem; letter-spacing: -.03em; }
.vd-panel__top p { font-size: .84rem; color: var(--ink-3); margin-top: 3px; }
.vd-panel__x { margin-left: auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-xs); color: var(--ink-3); flex: none; }
.vd-panel__x:hover { background: var(--mist); color: var(--ink); }
.vd-panel__body { flex: 1; overflow-y: auto; padding: 20px 22px 24px; }
.vd-panel__foot { padding: 14px 22px; border-top: 1px solid var(--line-2); background: var(--mist); display: flex; gap: 8px; }

.vd-kv { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; padding: 11px 0; border-bottom: 1px dashed var(--line); font-size: .9rem; }
.vd-kv:last-of-type { border-bottom: 0; }
.vd-kv dt { color: var(--ink-2); }
.vd-kv dd { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; text-align: right; }
.vd-kv dd.is-text { font-family: var(--sans); font-weight: 500; }

.vd-block { margin-top: 22px; }
.vd-block > h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); margin-bottom: 10px; font-family: var(--mono); }
.vd-callout { display: flex; gap: 11px; padding: 13px 15px; border-radius: var(--r-sm); font-size: .88rem; line-height: 1.55; }
.vd-callout svg { width: 17px; height: 17px; flex: none; margin-top: 2px; }
.vd-callout--doc  { background: var(--amber-soft); color: #7A3E00; }
.vd-callout--free { background: var(--ok-bg); color: #0B6B36; }
.vd-callout--info { background: #E6F6FE; color: var(--deep); }

.vd-steps { counter-reset: s; list-style: none !important; padding-left: 0; margin-left: 0; }
.vd-steps li { position: relative; padding-left: 34px; padding-block: 8px; font-size: .89rem; list-style: none !important; }
.vd-steps li::marker { content: ""; }
.vd-steps li::before {
  counter-increment: s; content: counter(s);
  position: absolute; left: 0; top: 8px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--mist); border: 1px solid var(--line); color: var(--deep);
  font-family: var(--mono); font-size: .72rem; display: grid; place-items: center;
}

/* ---------- 10. Modal ---------- */
.vd-modal {
  position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity .22s;
}
.vd-modal.is-on { opacity: 1; pointer-events: auto; }
.vd-modal__box {
  width: 100%; max-width: 620px; max-height: 88vh; overflow: hidden;
  background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-3);
  display: flex; flex-direction: column;
  transform: translateY(14px) scale(.98); transition: transform .26s var(--ease);
}
.vd-modal__box--wide { max-width: 900px; }
.vd-modal.is-on .vd-modal__box { transform: none; }
.vd-modal__top { display: flex; align-items: center; gap: 12px; padding: 20px 24px 14px; }
.vd-modal__top h3 { font-size: 1.25rem; }
.vd-modal__top p { font-size: .86rem; color: var(--ink-3); margin-top: 2px; }
.vd-modal__body { padding: 4px 24px 22px; overflow-y: auto; }
.vd-modal__foot { padding: 14px 24px; border-top: 1px solid var(--line-2); background: var(--mist); display: flex; align-items: center; gap: 10px; }
.vd-modal__foot .vd-fill { margin-left: auto; }

/* Bar kemajuan wizard */
.vd-prog { display: flex; gap: 5px; padding: 0 24px 16px; }
.vd-prog i { flex: 1; height: 3px; border-radius: 2px; background: var(--line); transition: background .25s; }
.vd-prog i.is-on { background: var(--sky); }

.vd-q { display: none; }
.vd-q.is-on { display: block; animation: vdin .28s var(--ease) forwards; }
.vd-q > h4 { font-size: 1.08rem; margin-bottom: 4px; }
.vd-q > p { font-size: .87rem; color: var(--ink-3); margin-bottom: 16px; }
.vd-opts { display: grid; gap: 8px; }
.vd-opt {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 14px 16px; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: #fff;
  transition: border-color .15s, background .15s;
}
.vd-opt:hover { border-color: var(--sky); background: #FBFDFF; }
.vd-opt.is-on { border-color: var(--sky); background: #F2FAFE; }
.vd-opt__k { width: 26px; height: 26px; border-radius: var(--r-xs); background: var(--mist); display: grid; place-items: center; font-family: var(--mono); font-size: .75rem; color: var(--deep); flex: none; }
.vd-opt.is-on .vd-opt__k { background: var(--sky); color: #fff; }
.vd-opt__t strong { display: block; font-size: .94rem; color: var(--ink); font-weight: 600; }
.vd-opt__t span { display: block; font-size: .81rem; color: var(--ink-3); }

.vd-pick { display: flex; align-items: center; gap: 13px; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.vd-pick:last-child { border-bottom: 0; }
.vd-pick__tld { font-family: var(--mono); font-size: 1.1rem; font-weight: 600; color: var(--ink); min-width: 84px; }
.vd-pick__why { font-size: .86rem; color: var(--ink-2); flex: 1; }
.vd-pick__act { margin-left: auto; }

/* Tabel banding di dalam modal */
.vd-cmp { width: 100%; border-collapse: collapse; font-size: .89rem; }
.vd-cmp th, .vd-cmp td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.vd-cmp thead th { font-family: var(--mono); font-size: 1.02rem; color: var(--ink); border-bottom: 2px solid var(--line); }
.vd-cmp tbody th { font-weight: 500; color: var(--ink-3); font-size: .84rem; width: 150px; }
.vd-cmp td { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.vd-cmp td.is-text { font-family: var(--sans); }
.vd-cmp__scroll { overflow-x: auto; }

/* ---------- 11. FAQ dua panel ---------- */
.vd-faq { display: grid; grid-template-columns: 300px 1fr; gap: 26px; align-items: start; }
.vd-faq__nav { display: grid; gap: 4px; position: sticky; top: calc(var(--nav-h) + 16px); }
.vd-faq__nav button {
  text-align: left; padding: 12px 14px; border-radius: var(--r-sm); font-size: .9rem; color: var(--ink-2);
  border-left: 2px solid transparent; transition: all .15s;
}
.vd-faq__nav button:hover { background: #fff; }
.vd-faq__nav button.is-on { background: #fff; color: var(--ink); font-weight: 600; border-left-color: var(--sky); box-shadow: var(--sh-1); }
.vd-faq__body { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 28px 30px; min-height: 240px; }
.vd-faq__a { display: none; }
.vd-faq__a.is-on { display: block; animation: vdin .3s var(--ease) forwards; }
.vd-faq__a h3 { font-size: 1.18rem; margin-bottom: 10px; }
.vd-faq__a p { font-size: .95rem; }

/* ---------- 12. Pita silang ke landing page ---------- */
.vd-cross {
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
  padding: 34px 38px; border-radius: var(--r-lg);
  background: linear-gradient(115deg, var(--deep) 0%, #0277BD 55%, var(--sky) 100%);
  color: #fff;
}
.vd-cross h2 { color: #fff; font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin-bottom: 6px; }
.vd-cross p { color: rgba(255,255,255,.86); font-size: .95rem; max-width: 56ch; }
.vd-cross__act { display: flex; gap: 10px; flex-wrap: wrap; }
.vd-cross .vd-btn--line { background: #fff; border-color: #fff; color: var(--deep); }
.vd-cross .vd-btn--clear { border: 1.5px solid rgba(255,255,255,.5); color: #fff; }
.vd-cross .vd-btn--clear:hover { background: rgba(255,255,255,.12); }

/* ---------- 13. Footer ---------- */
.vd-foot { background: var(--ink); color: rgba(255,255,255,.68); padding: 54px 0 26px; font-size: .89rem; }
.vd-foot__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 34px; }
.vd-foot h4 { color: #fff; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 14px; font-family: var(--mono); }
.vd-foot a:hover { color: #fff; }
.vd-foot ul li { padding: 4px 0; }
.vd-foot__brand p { margin-top: 12px; max-width: 38ch; }
.vd-foot__bar { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: .83rem; }
.vd-foot__bar .vd-fill { margin-left: auto; }

/* ---------- 14. Responsif ---------- */
@media (max-width: 980px) {
  .vd-faq { grid-template-columns: 1fr; }
  .vd-faq__nav { position: static; grid-auto-flow: row; }
  .vd-foot__grid { grid-template-columns: 1fr 1fr; gap: 26px; }
}
@media (max-width: 860px) {
  .vd-nav__links { display: none; }
  .vd-nav__burger { display: block; }
  .vd-nav.is-open .vd-nav__links {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; top: var(--nav-h); left: 0; right: 0; margin: 0; padding: 10px 16px 16px;
    background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--sh-2);
  }
  .vd-tbl__h { display: none; }
  .vd-tr {
    grid-template-columns: 1fr auto; grid-template-areas:
      "cmp  act"
      "tld  tld"
      "reg  ren";
    gap: 6px 12px; padding: 14px 16px;
  }
  .vd-tr__cmp   { grid-area: cmp; }
  .vd-tr__act   { grid-area: act; }
  .vd-tr__label { grid-area: tld; }
  .vd-tr__c-reg { grid-area: reg; }
  .vd-tr__c-ren { grid-area: ren; }
  .vd-tr__c-hide { display: none; }
  .vd-cross { grid-template-columns: 1fr; }
  .vd-panel { width: 100%; top: auto; height: 90vh; border-radius: var(--r-lg) var(--r-lg) 0 0; transform: translateY(100%); }
  .vd-panel.is-on { transform: none; }
}
@media (max-width: 620px) {
  .vd-sec { padding: 48px 0; }
  .vd-hero { padding: 40px 0 34px; }
  .vd-res__lead .vd-res__act { margin-left: 0; width: 100%; }
  .vd-res__lead .vd-btn { flex: 1; }
  .vd-foot__grid { grid-template-columns: 1fr; }
  .vd-tray { left: 12px; right: 12px; bottom: 12px; transform: translateY(150%); border-radius: var(--r-md); }
  .vd-tray.is-on { transform: none; }
  .vd-modal { padding: 0; align-items: flex-end; }
  .vd-modal__box { max-width: 100%; max-height: 92vh; border-radius: var(--r-lg) var(--r-lg) 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}

/* =========================================================
   Checkout. Ditulis dalam bahasa desain yang sama dengan
   storefront (shop.css), supaya tampilan tidak berganti gaya
   persis di tengah orang mau bayar.

   Sengaja inline. Server ini beberapa kali menahan CSS lama
   berjam jam, dan halaman bayar adalah tempat paling mahal
   untuk tampil berantakan.
   ========================================================= */

.co { padding: 34px 0 76px; background: var(--mist); min-height: 70vh; }
/* Lebar dan pemusatan ditulis ulang di sini, tidak mengandalkan .container
   dari style.css. Halaman ini pakai layouts/shop yang tidak memuat file itu. */
.co__wrap { width: 100%; max-width: 1080px; margin-inline: auto; padding-inline: 20px; }
.co [hidden] { display: none !important; }

/* --- Kembali --- */
.co__back {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .87rem; font-weight: 500; color: var(--ink-3);
  margin-bottom: 20px; transition: color .15s;
}
.co__back:hover { color: var(--deep); }

/* --- Penunjuk tahap --- */
.co-steps {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0; margin: 0 0 26px; list-style: none !important;
}
.co-steps li {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 15px 8px 9px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line);
  font-size: .84rem; color: var(--ink-3); list-style: none !important;
}
.co-steps li span {
  width: 21px; height: 21px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--line-2); color: var(--ink-3);
  font-family: var(--mono); font-size: .72rem;
}
.co-steps li.is-done { color: var(--ink-2); }
.co-steps li.is-done span { background: var(--ok-bg); color: var(--ok); }
.co-steps li.is-now {
  background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600;
}
.co-steps li.is-now span { background: var(--amber); color: #fff; }

/* --- Kepala --- */
.co__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px;
  padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid var(--line);
}
.co__head h1 { font-size: clamp(1.4rem, 2.6vw, 1.95rem); letter-spacing: -.026em; }
.co__lead { font-size: .93rem; color: var(--ink-2); margin-top: 6px; max-width: 48ch; }
.co__domain {
  margin-left: auto; text-align: right;
  padding: 11px 17px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
}
.co__domain span {
  display: block; font-family: var(--mono); font-size: .69rem;
  text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3);
}
.co__domain strong {
  display: block; font-family: var(--mono); font-size: 1.1rem;
  color: var(--ink); font-weight: 600; letter-spacing: -.02em; word-break: break-all;
}

/* --- Tata letak --- */
.co__grid {
  display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr);
  gap: 18px; align-items: start;
}
.co-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 26px;
}
.co-card--sum { position: sticky; top: calc(var(--nav-h) + 18px); padding: 22px; }
.co-card__top { margin-bottom: 20px; }
.co-card__top h2 { font-size: 1.08rem; letter-spacing: -.02em; }
.co-card__top p { font-size: .87rem; color: var(--ink-3); margin-top: 4px; }

/* --- Pemberitahuan --- */
.co-alert {
  padding: 13px 16px; border-radius: var(--r-sm); font-size: .88rem;
  line-height: 1.55; margin-bottom: 16px;
}
.co-alert--rapat { margin-bottom: 12px; padding: 10px 13px; font-size: .85rem; }
.co-alert--bad  { background: var(--no-bg);   color: var(--no); }
.co-alert--warn { background: var(--amber-soft); color: #7A3E00; }
.co-alert--info { background: #E6F6FE;        color: var(--deep); }
.co-alert p { margin: 0; }

/* --- Ajakan masuk --- */
.co-masuk {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 12px 15px; margin-bottom: 20px;
  border: 1px dashed var(--line); border-radius: var(--r-sm); background: var(--mist);
  font-size: .87rem; color: var(--ink-2); transition: border-color .15s, background .15s;
}
.co-masuk:hover { border-color: var(--sky); background: #F2FAFE; }
.co-masuk strong { color: var(--deep); font-weight: 600; }

/* --- Isian --- */
.co-f2, .co-f3 { display: grid; gap: 14px; margin-bottom: 14px; }
.co-f2 { grid-template-columns: 1fr 1fr; }
.co-f3 { grid-template-columns: 1fr 1fr 1fr; }
.co-f { display: block; margin-bottom: 14px; }
.co-f > span {
  display: block; font-size: .81rem; font-weight: 600; color: var(--ink-2);
  margin-bottom: 6px; letter-spacing: -.005em;
}
.co-f > span em { font-style: normal; color: var(--ink-3); font-weight: 400; }
.co .co-f input,
.co .co-f select,
.co .co-f textarea {
  width: 100%; height: 46px; padding: 0 14px;
  border: 1.5px solid var(--line); border-radius: var(--r-sm); background: #fff;
  font-family: var(--sans); font-size: .94rem; color: var(--ink);
  outline: none; transition: border-color .16s, box-shadow .16s;
}
.co .co-f textarea { height: auto; min-height: 88px; padding: 11px 14px; line-height: 1.5; }
.co .co-f input:focus,
.co .co-f select:focus,
.co .co-f textarea:focus {
  border-color: var(--sky); box-shadow: 0 0 0 3px rgba(3,169,244,.14);
}
.co .co-f input::placeholder { color: #A7BACB; }
.co .co-f input[type="email"] { font-family: var(--mono); font-size: .9rem; }
.co-f--periode select { font-family: var(--mono); }

/* --- Pemilih metode bayar --- */
.cs { position: relative; margin-bottom: 18px; }
.cs__btn {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 10px 13px; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: #fff; transition: border-color .16s, box-shadow .16s;
}
.cs__btn:hover { border-color: var(--sky); }
.cs__btn[aria-expanded="true"] { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(3,169,244,.14); }
.cs__panah { width: 17px; height: 17px; color: var(--ink-3); flex: none; transition: transform .2s var(--ease); }
.cs__btn[aria-expanded="true"] .cs__panah { transform: rotate(180deg); }

.cs__logo {
  width: 34px; height: 34px; flex: none; border-radius: 8px;
  background: var(--mist); border: 1px solid var(--line-2);
  display: grid; place-items: center; overflow: hidden;
}
.cs__logo img { width: 26px; height: 26px; object-fit: contain; }
.cs__logo b {
  font-family: var(--mono); font-size: .68rem; color: var(--ink-3); font-weight: 600;
}
.cs__teks { min-width: 0; flex: 1; }
.cs__nama { display: block; font-size: .92rem; font-weight: 600; color: var(--ink); }
.cs__ket  { display: block; font-size: .78rem; color: var(--ink-3); }
/* Angka biaya SENGAJA disembunyikan dari pemilih metode. Menampilkan
   "+ Rp2.500" di samping tiap kanal membuat kolom itu ramai angka, padahal
   angkanya sudah muncul utuh di ringkasan sebagai "Biaya layanan".
   Konsekuensinya pelanggan tidak bisa membandingkan biaya antar kanal tanpa
   memilih satu per satu. Kalau nanti terasa mengganggu, hapus rule ini. */
.cs__biaya {
  display: none !important;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: .81rem; color: var(--ink-3); white-space: nowrap;
}
/* Kecuali penanda kanal yang belum aktif. Itu bukan angka, itu status,
   dan pelanggan perlu tahu kenapa satu pilihan tidak bisa diklik. */
.cs__biaya--mati { display: inline !important; }

.cs__panel {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px);
  max-height: 340px; overflow-y: auto;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--sh-3); padding: 6px;
}
.cs__cari { position: relative; padding: 4px 4px 8px; }
.cs__cari svg { position: absolute; left: 14px; top: 15px; width: 15px; height: 15px; color: var(--ink-3); }
.cs .cs__cari input {
  width: 100%; height: 38px; padding: 0 12px 0 34px;
  border: 1.5px solid var(--line); border-radius: var(--r-xs); background: var(--mist);
  font-size: .87rem; outline: none;
}
.cs .cs__cari input:focus { border-color: var(--sky); background: #fff; }
.cs__kosong { padding: 18px 12px; text-align: center; font-size: .86rem; color: var(--ink-3); }
.cs__grup {
  display: flex; align-items: baseline; gap: 8px;
  padding: 10px 10px 6px;
  font-family: var(--mono); font-size: .68rem;
  text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3);
}
.cs__grup i { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--ok); }
.cs__grid { display: grid; gap: 3px; }
.cs__opt {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 9px 11px; border-radius: var(--r-xs); cursor: pointer;
  transition: background .13s;
}
.cs__opt:hover, .cs__opt:focus { background: var(--mist); outline: none; }
.cs__opt.is-on { background: #E9F7FE; }
.cs__opt .cs__nama { flex: 1; font-weight: 500; }
.cs__opt .cs__biaya { color: var(--ink-2); }
.cs__biaya--mati { color: var(--ink-3); font-style: italic; }
.cs__opt--mati { opacity: .45; cursor: not-allowed; }
.cs__opt--mati:hover { background: none; }
.cs__tik { width: 17px; height: 17px; flex: none; opacity: 0; color: var(--sky); }
.cs__tik svg { width: 17px; height: 17px; }
.cs__opt.is-on .cs__tik { opacity: 1; }

/* --- Ringkasan biaya --- */
.co-sum {
  padding: 16px 0 4px; margin-top: 4px; border-top: 1px solid var(--line-2);
}
.co-sum__dom {
  font-family: var(--mono); font-size: 1rem; font-weight: 600; color: var(--ink);
  word-break: break-all; padding-bottom: 12px; margin-bottom: 6px;
  border-bottom: 1px dashed var(--line);
}
.co-sum__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 7px 0; font-size: .88rem; color: var(--ink-2);
}
.co-sum__row b {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: .9rem; color: var(--ink); font-weight: 600;
}
.co-sum__row em { font-style: normal; color: var(--ink-3); font-size: .82rem; }
.co-sum__total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 10px; padding-top: 13px; border-top: 2px solid var(--ink);
}
.co-sum__total span { font-family: var(--disp); font-size: .95rem; font-weight: 700; color: var(--ink); }
.co-sum__total b {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 1.4rem; font-weight: 700; color: var(--ink); letter-spacing: -.03em;
}

.co-bayar {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 50px; margin-top: 16px; border-radius: var(--r-sm);
  background: var(--amber); color: #fff;
  font-family: var(--disp); font-weight: 700; font-size: .97rem;
  box-shadow: 0 6px 20px -6px rgba(255,152,0,.6);
  transition: background .16s, transform .14s var(--ease);
}
.co-bayar:hover { background: var(--ember); }
.co-bayar:active { transform: translateY(1px); }
.co-bayar:disabled { opacity: .45; pointer-events: none; box-shadow: none; }

.co-sum__aman {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 11px; font-size: .8rem; color: var(--ok);
}
.co-sum__note {
  margin-top: 9px; font-size: .8rem; line-height: 1.5; color: var(--ink-3); text-align: center;
}

/* --- Modal masuk / daftar --- */
.co-mask {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity .22s;
}
.co-mask[hidden] { display: none !important; }
.co-mask.is-on { opacity: 1; pointer-events: auto; }
.co-mask__bg { position: absolute; inset: 0; background: rgba(11,34,51,.45); }
.co-modal {
  position: relative; width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto;
  background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-3); padding: 28px;
  transform: translateY(14px) scale(.98); transition: transform .26s var(--ease);
}
.co-mask.is-on .co-modal { transform: none; }
.co-modal__x {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px;
  border-radius: var(--r-xs); font-size: 1.4rem; line-height: 1; color: var(--ink-3);
}
.co-modal__x:hover { background: var(--mist); color: var(--ink); }
.co-modal h3 { font-size: 1.22rem; letter-spacing: -.024em; }
.co-modal > p { font-size: .88rem; color: var(--ink-3); margin: 6px 0 20px; }

.co-tabs { display: flex; gap: 4px; padding: 4px; background: var(--mist); border-radius: var(--r-sm); margin-bottom: 18px; }
.co-tabs button {
  flex: 1; height: 38px; border-radius: var(--r-xs);
  font-family: var(--disp); font-weight: 600; font-size: .88rem; color: var(--ink-3);
  transition: background .15s, color .15s;
}
.co-tabs button.is-on { background: #fff; color: var(--ink); box-shadow: var(--sh-1); }

/* .co-pane dipaksa block saat tampil, tapi [hidden] harus tetap menang.
   Tanpa baris kedua, kedua panel muncul bersamaan. */
.co-pane { display: block; }
.co-pane[hidden] { display: none !important; }
.co-pane .co-bayar { margin-top: 6px; }

.co-or {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 14px; font-size: .76rem; color: var(--ink-3); letter-spacing: .1em;
}
.co-or::before, .co-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.co-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 46px; border-radius: var(--r-sm);
  border: 1.5px solid var(--line); background: #fff;
  font-family: var(--disp); font-weight: 600; font-size: .9rem; color: var(--ink);
  transition: border-color .15s, background .15s;
}
.co-google:hover { border-color: var(--sky); background: #FBFDFF; }
.co-google svg { width: 19px; height: 19px; }
.co-nanti {
  display: block; width: 100%; margin-top: 12px; padding: 8px;
  font-size: .85rem; color: var(--ink-3);
}
.co-nanti:hover { color: var(--ink); }

/* --- Responsif --- */
@media (max-width: 900px) {
  .co__grid { grid-template-columns: 1fr; }
  .co-card--sum { position: static; order: 2; }
  .co-f3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .co { padding: 22px 0 46px; }
  .co-card { padding: 20px; border-radius: var(--r-sm); }
  .co-f2, .co-f3 { grid-template-columns: 1fr; }
  .co__head { flex-direction: column; align-items: flex-start; }
  .co__domain { margin-left: 0; text-align: left; width: 100%; }
  .co-steps { gap: 4px; }
  .co-steps li { padding: 6px 11px 6px 7px; font-size: .78rem; }
  .co-steps li:not(.is-now) span { margin: 0; }
  .co-steps li:not(.is-now) { padding-inline: 8px; }
  .co-mask { padding: 0; align-items: flex-end; }
  .co-modal { max-width: 100%; max-height: 92vh; border-radius: var(--r-lg) var(--r-lg) 0 0; }
}