@charset "UTF-8";
/*
Name:    RTMHub Theme Layer
File:    rtmhub-theme.css
Purpose: Design tokens hasil redesign (Figma) + pemetaannya ke variabel
         Bootstrap 5.3 / Mifty. Dimuat SETELAH app.css.

Jangan menaruh style di app.css — file itu keluaran build template Mifty.
Semua override redesign tinggal di file ini.
*/

/* Font dimuat lewat <link> di head-css.blade.php, bukan @import. */

/* =============================================================
   1. DESIGN TOKENS
   Nilai mentah dari Figma. Tidak terikat light/dark.
   ============================================================= */
:root {
    /* ── Brand ──────────────────────────────────────────────── */
    --rtm-accent: #00cea6;
    --rtm-accent-rgb: 0, 206, 166;
    --rtm-on-accent: #040910;

    /* ── Status ─────────────────────────────────────────────── */
    --rtm-danger: #fc3838;
    --rtm-danger-deep: #e22331;
    --rtm-warning: #f4b41a;
    --rtm-info: #5579c5;
    --rtm-avatar: #c1195a;

    /* ── Neutral overlay (dipakai untuk chip, tombol ghost, sel tabel) */
    --rtm-neutral-rgb: 143, 155, 167;
    --rtm-fill-subtle: rgba(var(--rtm-neutral-rgb), 0.05);
    --rtm-fill-muted: rgba(var(--rtm-neutral-rgb), 0.1);
    --rtm-stroke-subtle: rgba(var(--rtm-neutral-rgb), 0.1);
    --rtm-stroke-strong: rgba(var(--rtm-neutral-rgb), 0.4);

    /* ── Accent overlay ─────────────────────────────────────── */
    --rtm-accent-fill: rgba(var(--rtm-accent-rgb), 0.05);
    --rtm-accent-fill-strong: rgba(var(--rtm-accent-rgb), 0.1);
    --rtm-accent-stroke: rgba(var(--rtm-accent-rgb), 0.4);

    /* ── Radius ─────────────────────────────────────────────── */
    --rtm-radius-sm: 8px;
    --rtm-radius-md: 12px;
    --rtm-radius-pill: 333px;

    /* ── Spacing (skala 4px dari Figma) ─────────────────────── */
    --rtm-space-1: 4px;
    --rtm-space-2: 8px;
    --rtm-space-3: 12px;
    --rtm-space-4: 16px;
    --rtm-space-6: 24px;
    --rtm-space-8: 32px;

    /* ── Tipografi ──────────────────────────────────────────── */
    --rtm-font: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
    --rtm-weight-body: 300;
    --rtm-weight-strong: 500;

    --rtm-text-h4: 24px;
    --rtm-text-h5: 18px;
    --rtm-text-h6: 16px;
    --rtm-text-lg: 16px;
    --rtm-text-base: 14px;
    --rtm-text-sm: 12px;

    --rtm-leading-heading: 1.3;
    --rtm-leading-tight: 1.4;
    --rtm-leading-body: 1.5;
}

/* =============================================================
   2. PALET — DARK (acuan utama desain Figma)
   ============================================================= */
html[data-bs-theme="dark"] {
    /* Token semantik */
    --rtm-bg: #040910;
    --rtm-surface: #0d131b;
    --rtm-surface-raised: #111823;
    --rtm-border: #171d26;
    --rtm-text: #ffffff;
    --rtm-text-muted: #8f9ba7;

    /* Jembatan ke Bootstrap */
    --bs-body-bg: var(--rtm-bg);
    --bs-body-color: var(--rtm-text);
    --bs-emphasis-color: var(--rtm-text);
    --bs-heading-color: var(--rtm-text);
    --bs-secondary-bg: var(--rtm-surface);
    --bs-tertiary-bg: var(--rtm-surface-raised);
    --bs-card-bg: var(--rtm-surface);
    --bs-border-color: var(--rtm-border);
    --bs-border-secondary: var(--rtm-border);
    --bs-secondary-color: var(--rtm-text-muted);
    --bs-text-muted: var(--rtm-text-muted);
    --bs-label-color: var(--rtm-text-muted);
    --bs-theme-white-color: var(--rtm-border);
    --bs-box-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);

    /* Shell: topbar + sidebar menyatu dengan background halaman */
    --bs-topbar-bg: var(--rtm-bg);
    --bs-topbar-b-border-color: var(--rtm-border);
    --bs-topbar-nav-icon-bg: var(--rtm-fill-subtle);
    --bs-topbar-nav-icon-color: var(--rtm-text);
    --bs-startbar-bg: var(--rtm-bg);
    --bs-startbar-e-border-color: var(--rtm-border);
    --bs-menu-icon-color: var(--rtm-text-muted);
    --bs-menu-link-color: var(--rtm-text-muted);
    --bs-menu-link-hover-color: var(--rtm-text);
    --bs-menu-label-color: var(--rtm-text-muted);
    --bs-nav-link-disc-color: var(--rtm-text-muted);
}

/* =============================================================
   3. PALET — LIGHT (diturunkan dari token yang sama)
   ============================================================= */
html[data-bs-theme="light"] {
    --rtm-bg: #f4f6f8;
    --rtm-surface: #ffffff;
    --rtm-surface-raised: #ffffff;
    --rtm-border: #e3e8ed;
    --rtm-text: #040910;
    --rtm-text-muted: #64707c;

    --bs-body-bg: var(--rtm-bg);
    --bs-body-color: var(--rtm-text);
    --bs-emphasis-color: var(--rtm-text);
    --bs-heading-color: var(--rtm-text);
    --bs-secondary-bg: var(--rtm-surface);
    --bs-card-bg: var(--rtm-surface);
    --bs-border-color: var(--rtm-border);
    --bs-border-secondary: var(--rtm-border);
    --bs-secondary-color: var(--rtm-text-muted);
    --bs-text-muted: var(--rtm-text-muted);
    --bs-label-color: var(--rtm-text-muted);

    --bs-topbar-bg: var(--rtm-surface);
    --bs-topbar-b-border-color: var(--rtm-border);
    --bs-topbar-nav-icon-bg: var(--rtm-fill-subtle);
    --bs-topbar-nav-icon-color: var(--rtm-text);
    --bs-startbar-bg: var(--rtm-surface);
    --bs-startbar-e-border-color: var(--rtm-border);
    --bs-menu-icon-color: var(--rtm-text-muted);
    --bs-menu-link-color: var(--rtm-text-muted);
    --bs-menu-link-hover-color: var(--rtm-text);
}

/* Aksen berlaku di kedua mode */
:root {
    --bs-primary: var(--rtm-accent);
    --bs-primary-rgb: var(--rtm-accent-rgb);
    --bs-link-color: var(--rtm-accent);
    --bs-link-hover-color: var(--rtm-accent);
    --accent-color: var(--rtm-accent);
    --bs-border-radius: var(--rtm-radius-sm);
    --bs-border-radius-lg: var(--rtm-radius-md);
}

/* =============================================================
   4. TIPOGRAFI

   Diperbaiki di level VARIABEL, bukan per elemen. app.css memakai
   `font-family: var(--bs-font-sans-serif) !important` di ~20 tempat,
   jadi aturan `body { font-family }` saja tidak cukup — begitu
   variabelnya diganti, semua aturan !important itu ikut benar.
   ============================================================= */
:root {
    /* Template: "Montserrat", 0.812rem (13px), weight 500 */
    --bs-font-sans-serif: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-body-font-family: var(--rtm-font);
    --bs-body-font-size: var(--rtm-text-base);
    --bs-body-font-weight: var(--rtm-weight-body);
    --bs-body-line-height: var(--rtm-leading-body);
    --bs-headings-font-weight: var(--rtm-weight-strong);
}

body {
    font-family: var(--rtm-font);
    font-weight: var(--rtm-weight-body);
    font-size: var(--rtm-text-base);
    line-height: var(--rtm-leading-body);
    letter-spacing: 0;
    background-color: var(--rtm-bg);
    color: var(--rtm-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Skala heading (Figma RTMKit/Heading) ───────────────────── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--rtm-font);
    font-weight: var(--rtm-weight-strong);
    color: var(--rtm-text);
    margin-bottom: 0;
}

h1, .h1 { font-size: 40px; line-height: var(--rtm-leading-heading); }
h2, .h2 { font-size: 32px; line-height: var(--rtm-leading-heading); }
h3, .h3 { font-size: 28px; line-height: var(--rtm-leading-heading); }
h4, .h4 { font-size: var(--rtm-text-h4); line-height: var(--rtm-leading-heading); }
h5, .h5 { font-size: var(--rtm-text-h5); line-height: var(--rtm-leading-tight); }
h6, .h6 { font-size: var(--rtm-text-h6); line-height: var(--rtm-leading-tight); }

/* ── Body (Figma RTMKit/Body) ───────────────────────────────── */
p { font-size: var(--rtm-text-base); line-height: var(--rtm-leading-body); }

small, .small { font-size: var(--rtm-text-sm); line-height: var(--rtm-leading-body); }

.rtm-text-lg { font-size: var(--rtm-text-lg); line-height: var(--rtm-leading-body); }
.rtm-text-sm { font-size: var(--rtm-text-sm); line-height: var(--rtm-leading-body); }

/* Utilitas .fs-* template memakai skala 13px — samakan ke skala Figma */
.fs-11 { font-size: var(--rtm-text-sm) !important; }
.fs-12 { font-size: var(--rtm-text-sm) !important; }
.fs-13 { font-size: var(--rtm-text-base) !important; }
.fs-14 { font-size: var(--rtm-text-base) !important; }
.fs-15,
.fs-16 { font-size: var(--rtm-text-lg) !important; }

/* ── Bobot ──────────────────────────────────────────────────── */
/* Figma hanya memakai 300 (body) & 500 (tegas). 600/700 terlalu
   berat untuk Bricolage dan membuat judul terlihat berbeda. */
.fw-normal   { font-weight: var(--rtm-weight-body) !important; }
.fw-medium,
.fw-semibold,
.fw-bold     { font-weight: var(--rtm-weight-strong) !important; }

.text-muted { color: var(--rtm-text-muted) !important; }

/* Tautan mewarisi tipografi induk, tidak digarisbawahi secara default */
a { text-decoration: none; }

/* ── Ikon font sejajar teks ─────────────────────────────────── */
/* Iconoir/Line Awesome punya baseline sendiri sehingga tampak naik saat
   berdampingan dengan teks. Nudge ini menyelaraskannya secara optis.
   Di dalam container flex, vertical-align diabaikan — jadi aman. */
i[class^="iconoir-"],
i[class*=" iconoir-"],
i[class^="las "],
i[class^="la-"] {
    vertical-align: -0.125em;
    line-height: 1;
}

/* =============================================================
   5. KOMPONEN BOOTSTRAP
   ============================================================= */

/* ── Card ───────────────────────────────────────────────────── */
.card {
    background-color: var(--rtm-surface);
    border: 1px solid var(--rtm-border);
    border-radius: var(--rtm-radius-md);
    box-shadow: none;
}

.card-body { padding: var(--rtm-space-6); }

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--rtm-border);
    padding: var(--rtm-space-6);
}

/* ── Button ─────────────────────────────────────────────────── */
/* inline-flex, bukan inline-block bawaan Bootstrap: ikon font punya
   baseline sendiri sehingga tampak naik jika disejajarkan secara inline.
   gap 12px sesuai spec Figma (Button: display flex, gap 12px). */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rtm-space-2);
    font-family: var(--rtm-font);
    font-weight: var(--rtm-weight-strong);
    font-size: var(--rtm-text-lg);
    line-height: 24px;
    padding: var(--rtm-space-4) var(--rtm-space-6);
    border-radius: var(--rtm-radius-sm);
    box-shadow: none;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* Ikon di dalam tombol: kotak pasti, tanpa line-height warisan */
.btn > i,
.btn > svg {
    flex-shrink: 0;
    font-size: 16px;
    line-height: 1;
}

/* Utilitas jarak Bootstrap jadi mubazir begitu tombol memakai gap —
   netralkan agar tombol lama (me-1/me-2 di markup admin) tidak dobel jarak. */
.btn > i[class*="me-"] { margin-right: 0 !important; }
.btn > i[class*="ms-"] { margin-left: 0 !important; }

.btn-sm {
    gap: var(--rtm-space-2);
    font-size: var(--rtm-text-base);
    padding: var(--rtm-space-3) var(--rtm-space-4);
}

.btn-sm > i,
.btn-sm > svg { font-size: 14px; }

.btn-primary {
    --bs-btn-bg: var(--rtm-accent);
    --bs-btn-border-color: var(--rtm-accent);
    --bs-btn-color: var(--rtm-on-accent);
    --bs-btn-hover-bg: #00b894;
    --bs-btn-hover-border-color: #00b894;
    --bs-btn-hover-color: var(--rtm-on-accent);
    --bs-btn-active-bg: #00a383;
    --bs-btn-active-border-color: #00a383;
    --bs-btn-active-color: var(--rtm-on-accent);
    /* Tanpa ini, tombol disabled jatuh ke primary bawaan template (ungu) */
    --bs-btn-disabled-bg: var(--rtm-accent);
    --bs-btn-disabled-border-color: var(--rtm-accent);
    --bs-btn-disabled-color: var(--rtm-on-accent);
    box-shadow: none;
}

/* Tombol sekunder pada mock: fill netral tipis + stroke 40% */
.btn-secondary,
.btn-outline-secondary,
.btn-light {
    --bs-btn-bg: var(--rtm-fill-subtle);
    --bs-btn-border-color: var(--rtm-stroke-strong);
    --bs-btn-color: var(--rtm-text);
    --bs-btn-hover-bg: var(--rtm-fill-muted);
    --bs-btn-hover-border-color: var(--rtm-stroke-strong);
    --bs-btn-hover-color: var(--rtm-text);
    --bs-btn-active-bg: var(--rtm-fill-muted);
    --bs-btn-active-border-color: var(--rtm-stroke-strong);
    --bs-btn-active-color: var(--rtm-text);
    box-shadow: none;
}

.btn-outline-primary {
    --bs-btn-color: var(--rtm-accent);
    --bs-btn-border-color: var(--rtm-accent-stroke);
    --bs-btn-bg: var(--rtm-accent-fill);
    --bs-btn-hover-bg: var(--rtm-accent);
    --bs-btn-hover-border-color: var(--rtm-accent);
    --bs-btn-hover-color: var(--rtm-on-accent);
}

/* ── Badge / chip ───────────────────────────────────────────── */
.badge {
    font-family: var(--rtm-font);
    font-weight: var(--rtm-weight-strong);
    font-size: var(--rtm-text-base);
    padding: var(--rtm-space-2);
    border-radius: var(--rtm-radius-sm);
}

.badge.bg-primary,
.bg-soft-primary {
    background-color: var(--rtm-accent-fill) !important;
    color: var(--rtm-accent) !important;
}

/* Badge angka di sidebar (ticket & notifikasi). Selalu aksen — dulu
   oranye/merah per jenis, sekarang satu warna supaya tidak jadi alarm. */
.rtm-badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--rtm-radius-pill);
    background-color: var(--rtm-accent);
    color: var(--rtm-on-accent);
    font-size: 11px;
    font-weight: var(--rtm-weight-strong);
    line-height: 1;
}

.bg-soft-success { background-color: rgba(var(--rtm-accent-rgb), .1) !important; color: var(--rtm-accent) !important; }
.bg-soft-warning { background-color: rgba(244, 180, 26, .1) !important; color: var(--rtm-warning) !important; }
.bg-soft-danger  { background-color: rgba(252, 56, 56, .1) !important; color: var(--rtm-danger) !important; }
.bg-soft-info    { background-color: rgba(85, 121, 197, .1) !important; color: var(--rtm-info) !important; }
.bg-soft-secondary { background-color: var(--rtm-fill-subtle) !important; color: var(--rtm-text-muted) !important; }

.text-primary { color: var(--rtm-accent) !important; }
.text-success { color: var(--rtm-accent) !important; }
.text-warning { color: var(--rtm-warning) !important; }
.text-danger  { color: var(--rtm-danger) !important; }
.text-info    { color: var(--rtm-info) !important; }

/* ── Tabel ──────────────────────────────────────────────────── */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--rtm-text);
    --bs-table-border-color: var(--rtm-stroke-subtle);
    margin-bottom: 0;
}

.table > thead {
    background-color: var(--rtm-fill-muted);
}

/* Kepala tabel selalu bersudut siku, tidak ikut membulat mengikuti kartu */
.table > thead,
.table > thead > tr,
.table > thead th { border-radius: 0; }

.table > thead th {
    font-weight: var(--rtm-weight-body);
    font-size: var(--rtm-text-base);
    color: var(--rtm-text);
    text-transform: none;
    letter-spacing: 0;
    padding: var(--rtm-space-6);
    border-bottom: 1px solid var(--rtm-stroke-subtle);
}

.table > tbody td {
    padding: var(--rtm-space-3) var(--rtm-space-6);
    border-bottom: 1px solid var(--rtm-stroke-subtle);
    vertical-align: middle;
    color: var(--rtm-text);
}

.table > tbody tr:hover > td { background-color: var(--rtm-fill-subtle); }

/* ── Form ───────────────────────────────────────────────────── */
.form-control,
.form-select {
    background-color: var(--rtm-fill-subtle);
    border: 1px solid var(--rtm-stroke-subtle);
    border-radius: var(--rtm-radius-sm);
    color: var(--rtm-text);
    font-family: var(--rtm-font);
    font-size: var(--rtm-text-base);
    padding: var(--rtm-space-3) var(--rtm-space-4);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--rtm-fill-subtle);
    border-color: var(--rtm-accent-stroke);
    box-shadow: 0 0 0 3px var(--rtm-accent-fill);
    color: var(--rtm-text);
}

.form-control::placeholder { color: var(--rtm-text-muted); }

/* ── Shell: sidebar & area konten ───────────────────────────── */

/* Topbar sudah dilepas dari layout /my — buang offset yang disisakan
   template (margin-top setinggi topbar) supaya konten mulai dari atas. */
.page-wrapper .page-content {
    margin-top: 0;
    min-height: 100vh;
    padding: var(--rtm-space-6) var(--rtm-space-6) 68px;
}

/* ...TAPI layout admin masih memakai .topbar (position:fixed, setinggi
   --bs-topbar-height). File ini ikut dimuat di /admin, jadi aturan di atas
   sempat menghapus clearance-nya dan membuat baris teratas konten (judul
   halaman + breadcrumb) tertimbun di balik topbar. Kembalikan offsetnya
   khusus untuk layout bertanda .rtm-admin. */
body.rtm-admin .page-wrapper .page-content {
    margin-top: var(--bs-topbar-height);
    min-height: calc(100vh - var(--bs-topbar-height));
}

.startbar { border-right: 1px solid var(--rtm-border); }

.startbar .startbar-menu .navbar-nav .nav-item .nav-link {
    font-family: var(--rtm-font);
    font-size: var(--rtm-text-base);
    border-radius: var(--rtm-radius-sm);
}

.startbar .startbar-menu .navbar-nav .nav-item .nav-link.active {
    color: var(--rtm-accent);
    background-color: var(--rtm-accent-fill);
}

.topbar { border-bottom: 1px solid var(--rtm-border); }

/* ── Sidebar dapat diciut jadi rel ikon ─────────────────────────
   Tombol hamburger di page-header melipat startbar. Tiap item nav
   kini punya .rtm-navlink-icon, jadi mode "collapsed" = rel ikon
   70px (mirip dashboard admin), bukan sembunyi penuh. Lebar rel,
   geser konten & brand mengecil ditangani CSS vendor; arahkan kursor
   ke sidebar → melebar penuh (peek) sehingga label muncul sementara.
   Controller ada di layout (my/layouts/app.blade.php), berjalan
   setelah script vendor. */
.rtm-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background-color: var(--rtm-fill-subtle);
    border: 1px solid var(--rtm-stroke-subtle);
    border-radius: var(--rtm-radius-sm);
    color: var(--rtm-text);
    font-size: 20px;
    cursor: pointer;
    transition: background-color .2s ease;
}

.rtm-sidebar-toggle:hover { background-color: var(--rtm-fill-muted); }

/* Desktop: "collapsed" = rel ikon (mirip admin), bukan sembunyi penuh.
   Lebar rel 70px, geser konten & brand mengecil sudah ditangani CSS
   vendor (selektornya .startbar generik). Di sini kita hanya meringkas
   nav custom .rtm-* jadi ikon: sembunyikan teks/caret/label & pusatkan
   ikon per item. Hover di sidebar → vendor melebarkan kembali ke penuh
   (peek) sehingga label muncul sementara. */
@media (min-width: 1200px) {
    /* Header grup (label seksi) & pemisah tak relevan di mode rel */
    body[data-sidebar-size="collapsed"] .startbar:not(:hover) .rtm-navgroup-header,
    body[data-sidebar-size="collapsed"] .startbar:not(:hover) .rtm-sidenav-divider {
        display: none;
    }

    /* Item accordion dipaksa tampil (tak ada tombol lipat di mode rel) */
    body[data-sidebar-size="collapsed"] .startbar:not(:hover) .rtm-navgroup > .collapse {
        display: block !important;
        height: auto !important;
    }

    /* Lepas indent rel-vertikal supaya ikon benar-benar di tengah */
    body[data-sidebar-size="collapsed"] .startbar:not(:hover) .rtm-navgroup-list {
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
        gap: var(--rtm-space-1);
    }

    /* Item → ikon saja, di tengah */
    body[data-sidebar-size="collapsed"] .startbar:not(:hover) .rtm-navlink {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }
    body[data-sidebar-size="collapsed"] .startbar:not(:hover) .rtm-navlink > span {
        display: none;                 /* label + hitungan badge */
    }
    /* Ikon default-nya display:none (lihat .rtm-navlink-icon di bawah) dan
       baru muncul di sini — di rel ikon label ikut hilang, jadi ikon jadi
       satu-satunya penanda tujuan. Saat sidebar di-hover (peek) label
       kembali muncul, dan aturan ini otomatis lepas lewat :not(:hover)
       sehingga ikonnya menghilang lagi. */
    body[data-sidebar-size="collapsed"] .startbar:not(:hover) .rtm-navlink-icon {
        display: inline-block;
        font-size: 20px;
    }

    /* Kartu "Need Help?" → tile ikon saja */
    body[data-sidebar-size="collapsed"] .startbar:not(:hover) .rtm-help-card {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }
    body[data-sidebar-size="collapsed"] .startbar:not(:hover) .rtm-help-card > .min-w-0,
    body[data-sidebar-size="collapsed"] .startbar:not(:hover) .rtm-help-card-arrow {
        display: none;
    }
}

/* Matikan animasi geser saat halaman pertama dimuat — state diselaraskan
   JS setelah script vendor. Kelas dilepas setelah frame pertama. */
.rtm-preload .startbar,
.rtm-preload .page-wrapper .page-content { transition: none !important; }

/* Kartu ringkasan yang berfungsi sebagai anchor (mis. lompat ke tabel di
   bawah halaman). Beri isyarat bisa diklik saat hover. */
.rtm-anchor-card { transition: border-color .15s ease, transform .15s ease; cursor: pointer; }
.rtm-anchor-card:hover { border-color: var(--rtm-accent-stroke); transform: translateY(-2px); }

/* =============================================================
   6. UTILITAS REDESIGN
   Kelas kecil yang berulang di mock — dipakai ulang antar halaman.
   ============================================================= */

/* Alpine.js: sembunyikan elemen ber-x-cloak sampai Alpine boot.
   Tanpa aturan ini semua cabang x-show sempat tampil sekaligus saat load
   (mis. selector site + badge lifetime di halaman Upgrade Plan). */
[x-cloak] {
    display: none !important;
}

/* Kotak ikon bersudut, isian aksen tipis (mis. ikon "Recent Orders") */
.rtm-icon-tile {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--rtm-radius-sm);
    background-color: var(--rtm-accent-fill);
    border: 1px solid var(--rtm-accent-fill-strong);
    color: var(--rtm-accent);
    font-size: 16px;
}

.rtm-icon-tile-lg { width: 48px; height: 48px; border-color: var(--rtm-accent-stroke); }
.rtm-icon-tile-sm { width: 32px; height: 32px; border-color: transparent; font-size: 14px; }

/* Helper kecil */
.min-w-0 { min-width: 0; }

/* Panel kaca di atas banner (mis. "SITE LIMIT" / "BALANCE") */
.rtm-glass-panel {
    background-color: var(--rtm-fill-subtle);
    border: 1px solid var(--rtm-stroke-subtle);
    border-radius: var(--rtm-radius-md);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: var(--rtm-space-4);
}

/* Chip status dengan titik di depan */
.rtm-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--rtm-space-2);
    padding: 6px var(--rtm-space-2);
    border-radius: var(--rtm-radius-sm);
    font-size: var(--rtm-text-base);
    font-weight: var(--rtm-weight-strong);
    line-height: 1.2;
    white-space: nowrap;
    background-color: var(--rtm-accent-fill);
    color: var(--rtm-accent);
}

.rtm-chip::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
}

.rtm-chip-nodot::before { display: none; }

.rtm-chip-accent  { background-color: rgba(var(--rtm-accent-rgb), .1); color: var(--rtm-accent); }
.rtm-chip-warning { background-color: rgba(244, 180, 26, .1);  color: var(--rtm-warning); }
.rtm-chip-danger  { background-color: rgba(252, 56, 56, .1);   color: var(--rtm-danger); }
.rtm-chip-info    { background-color: rgba(85, 121, 197, .12); color: var(--rtm-info); }
.rtm-chip-purple  { background-color: rgba(139, 92, 246, .12); color: #a78bfa; }

.rtm-chip-neutral {
    background-color: var(--rtm-fill-subtle);
    border: 1px solid var(--rtm-stroke-subtle);
    color: var(--rtm-text);
}

.rtm-chip-neutral::before { display: none; }

/* =============================================================
   6b. HEADER HALAMAN  (<x-rtm.page-header>)
   ============================================================= */
/* z-index dinaikkan agar menu akun tidak tertimpa kartu di bawahnya —
   .card bawaan Bootstrap sudah position:relative, jadi kartu yang lebih
   akhir di DOM akan menang tanpa ini. */
.rtm-page-header { position: relative; z-index: 20; }

.rtm-page-header .card-body { padding: var(--rtm-space-6); }

.rtm-page-header-text { min-width: 0; }

.rtm-page-title {
    font-size: var(--rtm-text-h4);
    font-weight: var(--rtm-weight-strong);
    line-height: var(--rtm-leading-heading);
    color: var(--rtm-text);
}

.rtm-page-title-spark { font-size: 20px; }

.rtm-page-subtitle {
    margin-top: 6px;
    font-size: var(--rtm-text-base);
    color: var(--rtm-text-muted);
}

.rtm-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--rtm-space-2);
    margin-top: var(--rtm-space-3);
    font-size: var(--rtm-text-base);
}

.rtm-breadcrumb a {
    color: var(--rtm-text-muted);
    text-decoration: none;
}

.rtm-breadcrumb a:hover { color: var(--rtm-text); }

.rtm-breadcrumb-sep {
    color: var(--rtm-text-muted);
    font-size: 14px;
    opacity: .6;
}

.rtm-breadcrumb-current { color: var(--rtm-accent); }

.rtm-page-header-controls {
    display: flex;
    align-items: center;
    gap: var(--rtm-space-4);
    flex-shrink: 0;
}

.rtm-page-header-actions {
    display: flex;
    align-items: center;
    gap: var(--rtm-space-3);
}

/* Kolom pencarian */
.rtm-search { position: relative; }

.rtm-search .form-control {
    width: 264px;
    max-width: 100%;
    padding-left: 42px;
    height: 48px;
    border-radius: var(--rtm-radius-sm);
}

.rtm-search-icon {
    position: absolute;
    left: var(--rtm-space-4);
    top: 24px;
    transform: translateY(-50%);
    color: var(--rtm-text-muted);
    font-size: 16px;
    pointer-events: none;
}

/* Panel hasil pencarian cepat (quick-nav) */
.rtm-search-results {
    position: absolute;
    top: calc(100% + var(--rtm-space-2));
    left: 0;
    right: 0;
    z-index: 1050;
    max-height: 340px;
    overflow-y: auto;
    padding: var(--rtm-space-2);
    background-color: var(--rtm-surface-raised);
    border: 1px solid var(--rtm-border);
    border-radius: var(--rtm-radius-md);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}

.rtm-search-results[hidden] { display: none; }

.rtm-search-result {
    display: flex;
    align-items: center;
    gap: var(--rtm-space-3);
    padding: var(--rtm-space-3);
    border-radius: var(--rtm-radius-sm);
    color: var(--rtm-text);
    text-decoration: none;
    cursor: pointer;
}

.rtm-search-result > i {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    color: var(--rtm-text);
}

.rtm-search-result:hover,
.rtm-search-result.is-active {
    background-color: var(--rtm-accent-fill);
    color: var(--rtm-accent);
}

.rtm-search-result:hover > i,
.rtm-search-result.is-active > i { color: var(--rtm-accent); }

.rtm-search-result-label { font-size: var(--rtm-text-base); }

.rtm-search-empty {
    padding: var(--rtm-space-3);
    font-size: var(--rtm-text-sm);
    color: var(--rtm-text-muted);
}

/* Pil toggle tema */
.rtm-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--rtm-space-1);
    padding: var(--rtm-space-1);
    background-color: var(--rtm-surface);
    border: 1px solid var(--rtm-border);
    border-radius: var(--rtm-radius-md);
}

.rtm-theme-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: var(--rtm-radius-sm);
    color: var(--rtm-text);
    font-size: 16px;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.rtm-theme-toggle-btn.is-active {
    background-color: var(--rtm-fill-muted);
    color: var(--rtm-accent);
}

/* Tombol ikon persegi (lonceng, keranjang, dsb.) */
.rtm-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background-color: var(--rtm-fill-subtle);
    border: 1px solid var(--rtm-stroke-subtle);
    border-radius: var(--rtm-radius-sm);
    color: var(--rtm-text);
    font-size: 20px;
    text-decoration: none;
    transition: background-color .2s ease;
}

.rtm-icon-btn:hover { background-color: var(--rtm-fill-muted); color: var(--rtm-text); }

.rtm-icon-btn-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--rtm-accent);
    color: var(--rtm-on-accent);
    border-radius: var(--rtm-radius-pill);
    font-size: 10px;
    font-weight: var(--rtm-weight-strong);
    line-height: 1;
}

/* Avatar bulat */
.rtm-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--rtm-radius-pill);
    background-color: var(--rtm-avatar);
    color: #fff;
    font-size: var(--rtm-text-h4);
    font-weight: var(--rtm-weight-strong);
    text-decoration: none;
    overflow: hidden;
}

.rtm-avatar:hover { color: #fff; }

.rtm-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Sebagai <button> pemicu dropdown: buang gaya tombol bawaan */
button.rtm-avatar {
    padding: 0;
    border: none;
    cursor: pointer;
}

button.rtm-avatar::after { display: none; }

.rtm-avatar-sm {
    width: 40px;
    height: 40px;
    font-size: var(--rtm-text-h6);
}

/* =============================================================
   6b-2. MENU AKUN (dropdown avatar)

   Sengaja TIDAK memakai dropdown Bootstrap: Popper menulis posisi
   lewat inline style saat dibuka via JS, yang bentrok dengan
   pembukaan berbasis :hover. Di sini semuanya CSS murni + sedikit
   JS untuk perangkat sentuh.
   ============================================================= */
.rtm-user-menu { position: relative; }

/* Jembatan transparan menutup celah antara avatar dan panel supaya
   kursor tidak "jatuh" saat bergerak turun. */
.rtm-user-menu::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    height: var(--rtm-space-3);
}

.rtm-user-dropdown {
    position: absolute;
    top: calc(100% + var(--rtm-space-3));
    right: 0;
    z-index: 1050;
    min-width: 264px;
    padding-bottom: var(--rtm-space-2);
    background-color: var(--rtm-surface);
    border: 1px solid var(--rtm-border);
    border-radius: var(--rtm-radius-md);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
    overflow: hidden;

    /* Keadaan tertutup */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.rtm-user-menu:hover > .rtm-user-dropdown,
.rtm-user-menu:focus-within > .rtm-user-dropdown,
.rtm-user-menu.is-open > .rtm-user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Kartu identitas di kepala menu */
.rtm-user-card {
    display: flex;
    align-items: center;
    gap: var(--rtm-space-3);
    padding: var(--rtm-space-4);
    border-bottom: 1px solid var(--rtm-stroke-subtle);
}

.rtm-user-name {
    font-size: var(--rtm-text-lg);
    font-weight: var(--rtm-weight-strong);
    color: var(--rtm-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rtm-user-email {
    font-size: var(--rtm-text-sm);
    color: var(--rtm-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Label pemisah bagian */
.rtm-menu-label {
    padding: var(--rtm-space-3) var(--rtm-space-4) var(--rtm-space-1);
    font-size: var(--rtm-text-sm);
    color: var(--rtm-text-muted);
}

.rtm-menu-item {
    display: flex;
    align-items: center;
    gap: var(--rtm-space-3);
    padding: var(--rtm-space-3) var(--rtm-space-4);
    font-size: var(--rtm-text-base);
    color: var(--rtm-text);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.rtm-menu-item > i {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    color: var(--rtm-text-muted);
}

.rtm-menu-item:hover,
.rtm-menu-item:focus-visible {
    background-color: var(--rtm-accent-fill);
    color: var(--rtm-accent);
}

.rtm-menu-item:hover > i,
.rtm-menu-item:focus-visible > i { color: var(--rtm-accent); }

.rtm-menu-divider {
    margin: var(--rtm-space-2) 0;
    border-top: 1px solid var(--rtm-stroke-subtle);
}

.rtm-menu-danger,
.rtm-menu-danger > i { color: var(--rtm-danger); }

.rtm-menu-danger:hover,
.rtm-menu-danger:focus-visible {
    background-color: rgba(252, 56, 56, .1);
    color: var(--rtm-danger);
}

.rtm-menu-danger:hover > i,
.rtm-menu-danger:focus-visible > i { color: var(--rtm-danger); }

/* Perangkat sentuh tidak punya hover — dibuka lewat klik (.is-open) */
@media (hover: none) {
    .rtm-user-menu:hover > .rtm-user-dropdown {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
    }

    .rtm-user-menu.is-open > .rtm-user-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

@media (max-width: 991.98px) {
    .rtm-search { display: none; }
    .rtm-page-header-controls { gap: var(--rtm-space-2); }
}

/* =============================================================
   6c. KEPALA KARTU  (<x-rtm.card>)
   ============================================================= */
.rtm-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rtm-space-4);
    flex-wrap: wrap;
    /* Jarak bawah dipegang kepala kartu, bukan badan — badan kartu `flush`
       memakai .p-0 dari Bootstrap yang !important, jadi padding-top di
       badan akan ditimpa dan tabel menempel ke tombol aksi. */
    padding: var(--rtm-space-6);
}

.rtm-card-head-title {
    display: flex;
    align-items: center;
    gap: var(--rtm-space-3);
    min-width: 0;
}

.rtm-card-head-title h5 {
    font-size: var(--rtm-text-h5);
    font-weight: var(--rtm-weight-strong);
    color: var(--rtm-text);
}

.rtm-card-head + .card-body { padding-top: 0; }

/* Tautan "View All …" dengan panah */
.rtm-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--rtm-space-2);
    color: var(--rtm-info);
    font-size: var(--rtm-text-lg);
    font-weight: var(--rtm-weight-strong);
    text-decoration: none;
    white-space: nowrap;
}

.rtm-link-arrow:hover { color: var(--rtm-info); text-decoration: underline; }

/* =============================================================
   6d. KARTU STATISTIK  (<x-rtm.stat-card>)
   ============================================================= */
.rtm-stat-card .card-body {
    display: flex;
    flex-direction: column;
    gap: var(--rtm-space-3);
}

.rtm-stat-top {
    display: flex;
    align-items: center;
    gap: var(--rtm-space-4);
}

.rtm-stat-body { min-width: 0; flex: 1; }

/* Varian stacked: ikon & label sebaris, angka besar di bawah */
.rtm-stat-stacked .rtm-stat-top { gap: var(--rtm-space-3); }
.rtm-stat-stacked .rtm-stat-label {
    font-size: var(--rtm-text-h6);
    font-weight: var(--rtm-weight-strong);
    text-transform: none;
    letter-spacing: 0;
    color: var(--rtm-text);
}

.rtm-progress {
    height: 4px;
    border-radius: var(--rtm-radius-pill);
    background-color: var(--rtm-fill-muted);
    overflow: hidden;
}

.rtm-progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background-color: var(--rtm-accent);
}

.rtm-stat-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rtm-space-2);
    font-size: var(--rtm-text-sm);
    color: var(--rtm-text-muted);
}

/* Label kecil huruf besar di atas angka statistik */
.rtm-stat-label {
    font-size: var(--rtm-text-sm);
    font-weight: var(--rtm-weight-body);
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--rtm-text-muted);
}

.rtm-stat-value {
    font-size: var(--rtm-text-h4);
    font-weight: var(--rtm-weight-strong);
    line-height: var(--rtm-leading-heading);
    color: var(--rtm-text);
}

.rtm-stat-sub {
    font-size: var(--rtm-text-sm);
    font-weight: var(--rtm-weight-body);
    color: var(--rtm-text-muted);
}

/* =============================================================
   7. DASHBOARD
   Menimpa blok .dashboard-* di app.css (ungu #6c5ce7 → teal).
   ============================================================= */

/* ── Kartu statistik ────────────────────────────────────────── */
.dashboard-stat-card {
    background-color: var(--rtm-surface);
    border: 1px solid var(--rtm-border) !important;
    border-radius: var(--rtm-radius-md) !important;
    box-shadow: none;
    transition: border-color .2s ease;
}

.dashboard-stat-card:hover {
    transform: none;
    border-color: var(--rtm-accent-stroke) !important;
    box-shadow: none;
}

.stat-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--rtm-radius-sm);
    background-color: var(--rtm-accent-fill);
    color: var(--rtm-accent);
}

/* ── Banner membership ──────────────────────────────────────── */
.dashboard-membership-banner {
    position: relative;
    overflow: hidden;
    background: var(--rtm-surface);
    border: 1px solid var(--rtm-accent-stroke) !important;
    border-radius: var(--rtm-radius-md);
}

/* Dua bola cahaya diagonal seperti di mock */
.dashboard-membership-banner::before,
.dashboard-membership-banner::after {
    content: "";
    position: absolute;
    width: 224px;
    height: 182px;
    border-radius: 50%;
    background: var(--rtm-accent);
    opacity: .35;
    filter: blur(100px);
    pointer-events: none;
}

.dashboard-membership-banner::before { top: -128px; left: -152px; }
/* Digeser ke tengah-kiri supaya tidak memburamkan ilustrasi di kanan */
.dashboard-membership-banner::after  { bottom: -120px; right: 55%; }

.dashboard-membership-banner > * { position: relative; z-index: 1; }

.dashboard-noplan-banner {
    background: var(--rtm-surface);
    border: 1px solid var(--rtm-border) !important;
    border-radius: var(--rtm-radius-md);
}

.dashboard-membership-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--rtm-radius-sm);
    background-color: var(--rtm-accent-fill-strong);
    border: 1px solid var(--rtm-accent-stroke);
    color: var(--rtm-accent);
    font-size: 24px;
}

.dashboard-badge-glass {
    background-color: var(--rtm-accent-fill);
    color: var(--rtm-accent);
    border-radius: var(--rtm-radius-sm);
    font-size: var(--rtm-text-base);
    font-weight: var(--rtm-weight-strong);
    padding: var(--rtm-space-2);
}

.dashboard-plan-stat {
    background-color: var(--rtm-fill-subtle);
    border: 1px solid var(--rtm-stroke-subtle);
    border-radius: var(--rtm-radius-md);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: var(--rtm-space-4);
}

.dashboard-plan-stat-label {
    opacity: 1;
    font-size: var(--rtm-text-lg);
    color: var(--rtm-text-muted);
    text-transform: none;
    letter-spacing: 0;
}

.dashboard-plan-stat-number {
    font-size: var(--rtm-text-h4);
    font-weight: var(--rtm-weight-strong);
    line-height: var(--rtm-leading-heading);
    color: var(--rtm-text);
}

.dashboard-plan-stat-sub {
    opacity: 1;
    font-size: var(--rtm-text-base);
    color: var(--rtm-text-muted);
}

.dashboard-btn-upgrade {
    background-color: var(--rtm-accent);
    color: var(--rtm-on-accent);
    font-weight: var(--rtm-weight-strong);
    border: none;
    border-radius: var(--rtm-radius-sm);
}

.dashboard-btn-upgrade:hover { background-color: #00b894; color: var(--rtm-on-accent); }

.dashboard-btn-manage {
    background-color: var(--rtm-fill-subtle);
    color: var(--rtm-text);
    border: 1px solid var(--rtm-stroke-strong);
    border-radius: var(--rtm-radius-sm);
}

.dashboard-btn-manage:hover { background-color: var(--rtm-fill-muted); color: var(--rtm-text); }

/* ── Empty state ────────────────────────────────────────────── */
.dashboard-empty-icon {
    width: 64px;
    height: 64px;
    background-color: var(--rtm-fill-subtle);
    border: 1px solid var(--rtm-stroke-subtle);
    color: var(--rtm-text-muted);
}

/* ── Tabel dashboard ────────────────────────────────────────── */
.dashboard-table { font-size: var(--rtm-text-base); }

.dashboard-table-head {
    font-size: var(--rtm-text-base);
    text-transform: none;
    letter-spacing: 0;
    color: var(--rtm-text);
    background-color: var(--rtm-fill-muted);
}

.dashboard-view-btn {
    font-size: var(--rtm-text-lg);
    font-weight: var(--rtm-weight-strong);
    padding: var(--rtm-space-3) var(--rtm-space-6);
    background-color: var(--rtm-fill-subtle);
    border: 1px solid var(--rtm-stroke-strong);
    border-radius: var(--rtm-radius-sm);
    color: var(--rtm-text);
}

.dashboard-view-btn:hover { background-color: var(--rtm-fill-muted); color: var(--rtm-text); }

/* ── Notifikasi ─────────────────────────────────────────────── */
.dashboard-notif-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--rtm-radius-sm);
    background-color: var(--rtm-accent-fill);
    color: var(--rtm-accent);
    font-size: 16px;
}

.dashboard-notif-dot { background-color: var(--rtm-accent); }

.dashboard-notif-item:hover { background-color: var(--rtm-fill-subtle); }

/* ── Avatar ─────────────────────────────────────────────────── */
.dashboard-avatar-initial {
    width: 48px;
    height: 48px;
    background: var(--rtm-avatar);
    border-radius: var(--rtm-radius-pill);
    font-size: var(--rtm-text-h4);
    font-weight: var(--rtm-weight-strong);
    color: #ffffff;
}

/* ── Plan badge ─────────────────────────────────────────────── */
.dashboard-plan-badge {
    background-color: var(--rtm-accent-fill);
    color: var(--rtm-accent);
    font-size: var(--rtm-text-sm);
    border-radius: var(--rtm-radius-sm);
}

/* Tautan "View All ..." di header kartu */
.dashboard-view-all,
a.dashboard-view-all {
    color: var(--rtm-info);
    font-weight: var(--rtm-weight-strong);
    font-size: var(--rtm-text-lg);
    text-decoration: none;
}

/* =============================================================
   8. POLA ISI HALAMAN
   Kelas generik yang dipakai lintas halaman (tabel, empty state,
   daftar notifikasi, panel info, modal).
   ============================================================= */

/* ── Teks dalam sel / baris daftar ──────────────────────────── */
.rtm-cell-strong {
    font-size: var(--rtm-text-lg);
    font-weight: var(--rtm-weight-strong);
    color: var(--rtm-text);
}

.rtm-cell-sub {
    font-size: var(--rtm-text-sm);
    color: var(--rtm-text-muted);
}

/* ── Banner membership ──────────────────────────────────────── */
.rtm-banner-desc {
    font-size: var(--rtm-text-base);
    color: var(--rtm-text-muted);
}

.rtm-feature-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--rtm-space-3);
}

.rtm-feature-list li {
    display: flex;
    align-items: center;
    gap: var(--rtm-space-2);
    font-size: var(--rtm-text-base);
    color: var(--rtm-text);
}

.rtm-feature-list i { color: var(--rtm-accent); font-size: 16px; flex-shrink: 0; }

/* ── Empty state ────────────────────────────────────────────── */
.rtm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--rtm-space-3);
    padding: 48px var(--rtm-space-6);
    text-align: center;
}

.rtm-empty p {
    margin: 0;
    font-size: var(--rtm-text-base);
    color: var(--rtm-text-muted);
}

/* ── Tabel menempel tepi kartu ──────────────────────────────── */
.rtm-table-wrap { border-top: 1px solid var(--rtm-stroke-subtle); }

.rtm-table-wrap .table > tbody tr:last-child > td { border-bottom: 0; }

/* Sel yang berisi empty-state tidak boleh ikut padding sel biasa */
.rtm-table-wrap .table > tbody td:has(> .rtm-empty) { padding: 0; }

/* ── Tautan teks beraksen (nomor tiket, nomor invoice) ──────── */
.rtm-link {
    color: var(--rtm-accent);
    font-weight: var(--rtm-weight-strong);
    text-decoration: none;
}

.rtm-link:hover { color: var(--rtm-accent); text-decoration: underline; }

/* ── Baris filter di dalam kartu ────────────────────────────── */
.rtm-filter-bar {
    padding: var(--rtm-space-6);
    border-top: 1px solid var(--rtm-stroke-subtle);
}

.rtm-filter-bar .form-select { height: 48px; }

/* ── Pagination ─────────────────────────────────────────────── */
.rtm-pagination {
    display: flex;
    justify-content: flex-end;
    padding: var(--rtm-space-4) var(--rtm-space-6);
    border-top: 1px solid var(--rtm-stroke-subtle);
}

.rtm-pagination .pagination { margin: 0; gap: var(--rtm-space-2); }

.rtm-pagination .page-link {
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--rtm-fill-subtle);
    border: 1px solid var(--rtm-stroke-subtle);
    border-radius: var(--rtm-radius-sm);
    color: var(--rtm-text);
    font-size: var(--rtm-text-base);
}

.rtm-pagination .page-item.active .page-link {
    background-color: var(--rtm-accent-fill);
    border-color: var(--rtm-accent-stroke);
    color: var(--rtm-accent);
}

.rtm-pagination .page-item.disabled .page-link {
    opacity: .4;
    background-color: var(--rtm-fill-subtle);
    color: var(--rtm-text-muted);
}

/* ── Daftar notifikasi ──────────────────────────────────────── */
.rtm-notif-list {
    display: flex;
    flex-direction: column;
}

.rtm-notif-item {
    display: flex;
    align-items: center;
    gap: var(--rtm-space-3);
    padding: var(--rtm-space-3) 0;
    border-bottom: 1px solid var(--rtm-stroke-subtle);
    text-decoration: none;
    transition: background-color .2s ease;
}

.rtm-notif-item:last-child { border-bottom: 0; }

.rtm-notif-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.rtm-notif-title {
    font-size: var(--rtm-text-base);
    font-weight: var(--rtm-weight-strong);
    color: var(--rtm-text);
}

.rtm-notif-text {
    font-size: var(--rtm-text-sm);
    color: var(--rtm-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rtm-notif-time {
    font-size: var(--rtm-text-sm);
    color: var(--rtm-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Titik penanda belum dibaca */
.rtm-notif-item.is-unread .rtm-notif-title::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: var(--rtm-space-2);
    border-radius: 50%;
    background-color: var(--rtm-accent);
    vertical-align: middle;
}

/* ── Baris notifikasi (halaman Notifications) ───────────────── */
.rtm-notif-toolbar { padding-bottom: var(--rtm-space-6); border-bottom: 1px solid var(--rtm-stroke-subtle); }

.rtm-notif-unread-count {
    font-size: var(--rtm-text-base);
    color: var(--rtm-text-muted);
}

.rtm-notif-row {
    display: flex;
    align-items: center;
    gap: var(--rtm-space-3);
    padding: var(--rtm-space-4) var(--rtm-space-6);
    border-bottom: 1px solid var(--rtm-stroke-subtle);
}

.rtm-notif-row:last-child { border-bottom: 0; }

/* Titik penanda belum dibaca — selalu memakan ruang supaya baris tidak bergeser */
.rtm-notif-dot {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: transparent;
}

.rtm-notif-row.is-unread .rtm-notif-dot { background-color: var(--rtm-accent); }

.rtm-notif-row-body { flex: 1; min-width: 0; }

.rtm-notif-row-text {
    margin: 2px 0 0;
    font-size: var(--rtm-text-base);
    color: var(--rtm-text-muted);
}

.rtm-notif-row-actions {
    display: flex;
    align-items: center;
    gap: var(--rtm-space-2);
    flex-shrink: 0;
}

.rtm-notif-row-actions .rtm-icon-btn {
    width: 36px;
    height: 36px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

@media (max-width: 767.98px) {
    .rtm-notif-row { flex-wrap: wrap; }
    .rtm-notif-row .rtm-notif-time { order: 5; }
}

/* ── Quick actions ──────────────────────────────────────────── */
.rtm-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--rtm-space-3);
}

.rtm-quick-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--rtm-space-3);
    padding: var(--rtm-space-6) var(--rtm-space-3);
    background-color: var(--rtm-fill-subtle);
    border: 1px solid var(--rtm-stroke-subtle);
    border-radius: var(--rtm-radius-md);
    text-decoration: none;
    text-align: center;
    transition: border-color .2s ease, background-color .2s ease;
}

.rtm-quick-tile:hover {
    border-color: var(--rtm-accent-stroke);
    background-color: var(--rtm-accent-fill);
}

.rtm-quick-label {
    font-size: var(--rtm-text-base);
    font-weight: var(--rtm-weight-strong);
    color: var(--rtm-text);
}

@media (max-width: 575.98px) {
    .rtm-quick-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Daftar label/nilai (Subscription Status, Plan Details) ─── */
.rtm-detail-list {
    display: flex;
    flex-direction: column;
}

.rtm-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rtm-space-4);
    padding: var(--rtm-space-4) 0;
    border-bottom: 1px solid var(--rtm-stroke-subtle);
    font-size: var(--rtm-text-base);
    color: var(--rtm-text-muted);
}

.rtm-detail-row:last-child { border-bottom: 0; }

.rtm-detail-value {
    font-size: var(--rtm-text-base);
    font-weight: var(--rtm-weight-strong);
    color: var(--rtm-text);
    text-align: right;
}

/* ── Kotak catatan / peringatan di dalam kartu ──────────────── */
.rtm-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--rtm-space-3);
    padding: var(--rtm-space-4);
    background-color: var(--rtm-fill-subtle);
    border: 1px solid var(--rtm-stroke-subtle);
    border-radius: var(--rtm-radius-md);
}

.rtm-notice > i {
    color: var(--rtm-text-muted);
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Varian peringatan (Cancel Subscription) */
.rtm-card-warning .rtm-icon-tile,
.rtm-icon-tile-warning {
    background-color: rgba(244, 180, 26, .1);
    border-color: rgba(244, 180, 26, .4);
    color: var(--rtm-warning);
}

.btn-warning-soft {
    background-color: rgba(244, 180, 26, .1);
    border: 1px solid rgba(244, 180, 26, .4);
    color: var(--rtm-warning);
}

.btn-warning-soft:hover {
    background-color: rgba(244, 180, 26, .18);
    border-color: rgba(244, 180, 26, .5);
    color: var(--rtm-warning);
}

/* ── Label & bantuan form ───────────────────────────────────── */
.form-label {
    display: block;
    margin-bottom: var(--rtm-space-2);
    font-size: var(--rtm-text-base);
    font-weight: var(--rtm-weight-strong);
    color: var(--rtm-text);
}

.form-text {
    margin-top: var(--rtm-space-2);
    font-size: var(--rtm-text-sm);
    color: var(--rtm-text-muted);
}

.rtm-modal .modal-footer {
    padding: var(--rtm-space-6);
    border-top: 1px solid var(--rtm-border);
    gap: var(--rtm-space-3);
}

/* ── Thumbnail produk & kartu diredupkan ────────────────────── */
.rtm-thumb {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: var(--rtm-radius-sm);
    border: 1px solid var(--rtm-stroke-subtle);
}

.rtm-card-dimmed { opacity: .6; }

/* ── Opsi pillar (modal Upgrade Plan) ───────────────────────── */
.pillar-option {
    padding: var(--rtm-space-3);
    background-color: var(--rtm-fill-subtle);
    border: 1px solid var(--rtm-stroke-subtle);
    border-radius: var(--rtm-radius-sm);
    font-size: var(--rtm-text-base);
    color: var(--rtm-text);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.pillar-option:hover { border-color: var(--rtm-accent-stroke); }

.pillar-option.is-selected {
    border-color: var(--rtm-accent-stroke);
    background-color: var(--rtm-accent-fill);
    color: var(--rtm-accent);
}

.pillar-option input:disabled + i,
.pillar-option:has(input:disabled) { opacity: .5; cursor: not-allowed; }

/* ── Kotak licence key ──────────────────────────────────────── */
.rtm-key-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rtm-space-3);
    padding: var(--rtm-space-4);
    background-color: var(--rtm-fill-subtle);
    border: 1px solid var(--rtm-stroke-subtle);
    border-radius: var(--rtm-radius-md);
}

.rtm-key {
    display: block;
    margin-top: var(--rtm-space-2);
    font-size: var(--rtm-text-lg);
    font-weight: var(--rtm-weight-strong);
    letter-spacing: 1px;
    word-break: break-all;
    color: var(--rtm-accent);
}

/* ── Kartu yang seluruhnya berupa tautan (Quick Links) ──────── */
.rtm-link-card { text-decoration: none; transition: border-color .2s ease; }

.rtm-link-card:hover { border-color: var(--rtm-accent-stroke); }

.rtm-link-card .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--rtm-space-3);
    text-align: center;
}

/* ── Accordion (FAQ) ────────────────────────────────────────── */
.rtm-accordion .accordion-item {
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid var(--rtm-stroke-subtle);
}

.rtm-accordion .accordion-item:last-child { border-bottom: 0; }

.rtm-accordion .accordion-button {
    padding: var(--rtm-space-4) var(--rtm-space-6);
    background-color: transparent;
    box-shadow: none;
    font-size: var(--rtm-text-lg);
    font-weight: var(--rtm-weight-strong);
    color: var(--rtm-text);
}

.rtm-accordion .accordion-button:not(.collapsed) {
    background-color: var(--rtm-accent-fill);
    color: var(--rtm-accent);
}

.rtm-accordion .accordion-button::after {
    width: 16px;
    height: 16px;
    background-size: 16px;
    filter: invert(65%) sepia(6%) saturate(560%) hue-rotate(169deg) brightness(94%) contrast(88%);
}

.rtm-accordion .accordion-body {
    padding: 0 var(--rtm-space-6) var(--rtm-space-4);
    font-size: var(--rtm-text-base);
    color: var(--rtm-text-muted);
}

/* ── Panel info (Account Overview, dsb.) ────────────────────── */
.rtm-info-panel {
    display: flex;
    flex-direction: column;
    gap: var(--rtm-space-2);
    height: 100%;
    padding: var(--rtm-space-4);
    background-color: var(--rtm-fill-subtle);
    border: 1px solid var(--rtm-stroke-subtle);
    border-radius: var(--rtm-radius-md);
}

.rtm-info-value {
    font-size: var(--rtm-text-lg);
    font-weight: var(--rtm-weight-strong);
    color: var(--rtm-text);
}

/* ── Modal ──────────────────────────────────────────────────── */
.rtm-modal .modal-content {
    background-color: var(--rtm-surface);
    border: 1px solid var(--rtm-border);
    border-radius: var(--rtm-radius-md);
    overflow: hidden;
}

.rtm-modal .modal-header {
    padding: var(--rtm-space-6);
    border-bottom: 1px solid var(--rtm-border);
}

.rtm-modal .modal-header h5 {
    font-size: var(--rtm-text-h5);
    font-weight: var(--rtm-weight-strong);
    color: var(--rtm-text);
}

.rtm-modal-section {
    padding: var(--rtm-space-6);
    border-bottom: 1px solid var(--rtm-stroke-subtle);
}

.rtm-modal-section:last-child { border-bottom: 0; }

.rtm-summary {
    display: flex;
    flex-direction: column;
    gap: var(--rtm-space-2);
}

.rtm-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--rtm-text-base);
    color: var(--rtm-text-muted);
}

.rtm-summary-row > span:last-child { color: var(--rtm-text); }

.rtm-summary-total {
    margin-top: var(--rtm-space-2);
    padding-top: var(--rtm-space-3);
    border-top: 1px solid var(--rtm-stroke-subtle);
    font-size: var(--rtm-text-lg);
    font-weight: var(--rtm-weight-strong);
    color: var(--rtm-text);
}

.rtm-summary-total > span:last-child { color: var(--rtm-accent); }

/* Baris item & pembayaran di dalam modal
   (dipindah dari blok <style> inline dashboard yang memakai warna terang) */
.order-item-row,
.order-payment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rtm-space-4);
    padding: var(--rtm-space-3) var(--rtm-space-4);
    background-color: var(--rtm-fill-subtle);
    border: 1px solid var(--rtm-stroke-subtle);
    border-radius: var(--rtm-radius-sm);
}

.order-item-name {
    font-size: var(--rtm-text-base);
    font-weight: var(--rtm-weight-strong);
    color: var(--rtm-text);
}

.order-item-meta {
    margin-top: 2px;
    font-size: var(--rtm-text-sm);
    color: var(--rtm-text-muted);
}

.order-item-price {
    font-size: var(--rtm-text-base);
    font-weight: var(--rtm-weight-strong);
    color: var(--rtm-text);
    white-space: nowrap;
}

.order-modal-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--rtm-fill-muted);
    border-top-color: var(--rtm-accent);
    border-radius: 50%;
    animation: spin-order .7s linear infinite;
}

@keyframes spin-order { to { transform: rotate(360deg); } }

/* Badge status pembayaran (dirender oleh JS di halaman Orders) */
.payment-status-badge {
    display: inline-block;
    padding: 2px var(--rtm-space-2);
    border-radius: var(--rtm-radius-sm);
    background-color: var(--rtm-fill-muted);
    color: var(--rtm-text-muted);
    font-size: var(--rtm-text-sm);
    font-weight: var(--rtm-weight-strong);
}

/* Baris tabel order dapat diklik */
tr.order-row { cursor: pointer; }
tr.order-row:hover > td { background-color: var(--rtm-accent-fill); }

/* =============================================================
   9. MEMBERSHIP — HERO PLAN AKTIF
   Satu warna untuk semua tier. Sebelumnya hero memakai
   bg-info / bg-primary / bg-warning per tier (starter/plus/
   ultimate) sehingga tiap membership tampil beda warna; desain
   memakai satu kartu gelap beraksen teal untuk semua plan.
   ============================================================= */
.rtm-plan-hero {
    position: relative;
    overflow: hidden;
    background: var(--rtm-surface);
    border: 1px solid var(--rtm-accent-stroke) !important;
    border-radius: var(--rtm-radius-md);
}

/* Dua bola cahaya diagonal, sama seperti banner dashboard */
.rtm-plan-hero::before,
.rtm-plan-hero::after {
    content: "";
    position: absolute;
    width: 224px;
    height: 182px;
    border-radius: 50%;
    background: var(--rtm-accent);
    opacity: .28;
    filter: blur(100px);
    pointer-events: none;
}

.rtm-plan-hero::before { top: -128px; left: -152px; }
/* Digeser ke tengah-kiri supaya tidak memburamkan ilustrasi di kanan */
.rtm-plan-hero::after  { bottom: -120px; right: 55%; }

.rtm-plan-hero > * { position: relative; z-index: 1; }

.rtm-plan-hero-title {
    margin: 0;
    font-size: var(--rtm-text-h5);
    font-weight: var(--rtm-weight-strong);
    color: var(--rtm-text);
}

.rtm-plan-hero-meta {
    font-size: var(--rtm-text-base);
    color: var(--rtm-text-muted);
}

/* Pemisah titik antar potongan meta (kategori · jumlah site · tier) */
.rtm-plan-hero-meta > span + span::before {
    content: "\2022";
    margin: 0 var(--rtm-space-2);
    color: var(--rtm-stroke-strong);
}

/* ── Tombol aksi ────────────────────────────────────────────── */
.rtm-btn-accent {
    background-color: var(--rtm-accent);
    border: 1px solid var(--rtm-accent);
    color: var(--rtm-on-accent);
    font-weight: var(--rtm-weight-strong);
    border-radius: var(--rtm-radius-sm);
}

.rtm-btn-accent:hover,
.rtm-btn-accent:focus { background-color: #00b894; border-color: #00b894; color: var(--rtm-on-accent); }

.rtm-btn-ghost {
    background-color: var(--rtm-fill-subtle);
    border: 1px solid var(--rtm-stroke-strong);
    color: var(--rtm-text);
    font-weight: var(--rtm-weight-strong);
    border-radius: var(--rtm-radius-sm);
}

.rtm-btn-ghost:hover,
.rtm-btn-ghost:focus { background-color: var(--rtm-fill-muted); color: var(--rtm-text); }

/* CTA kartu plan ("Get Started" / "Switch to This Plan").
   Hover selalu hijau aksen — baik varian accent maupun ghost — supaya
   tombol pilih plan terasa satu perilaku. Warnanya sama dengan hover
   .rtm-btn-accent di atas. :not(:disabled) menjaga tombol "Current Plan"
   (disabled) tetap netral. */
.rtm-plan-cta:not(:disabled):hover,
.rtm-plan-cta:not(:disabled):focus {
    background-color: #00b894;
    border-color: #00b894;
    color: var(--rtm-on-accent);
}

/* =============================================================
   10. UPGRADE PLAN
   Kartu tier tidak lagi memakai warna per-tier (info/primary/
   warning); semua memakai aksen teal, pembeda hanya border +
   pita "Most Popular" / "Current Plan".
   ============================================================= */

/* ── Segmented control (kategori & siklus tagihan) ──────────── */
.rtm-segmented {
    display: inline-flex;
    align-items: center;
    gap: var(--rtm-space-1);
    padding: var(--rtm-space-1);
    background-color: var(--rtm-surface);
    border: 1px solid var(--rtm-border);
    border-radius: var(--rtm-radius-md);
}

.rtm-segmented-item {
    display: inline-flex;
    align-items: center;
    gap: var(--rtm-space-2);
    padding: var(--rtm-space-2) var(--rtm-space-6);
    border: 0;
    border-radius: var(--rtm-radius-sm);
    background: transparent;
    color: var(--rtm-text-muted);
    font-size: var(--rtm-text-base);
    font-weight: var(--rtm-weight-strong);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.rtm-segmented-item:hover { color: var(--rtm-text); }

/* Aktif = pil kontras (putih di dark mode, gelap di light mode) */
.rtm-segmented-item.is-active {
    background-color: var(--rtm-text);
    color: var(--rtm-bg);
}

/* Varian lembut: aktif memakai isian aksen, bukan pil kontras */
.rtm-segmented-soft .rtm-segmented-item.is-active {
    background-color: var(--rtm-accent-fill);
    color: var(--rtm-accent);
}

/* Input radio Bootstrap disembunyikan, label yang jadi tombol */
.rtm-segmented .btn-check { position: absolute; clip: rect(0,0,0,0); pointer-events: none; }

/* ── Strip fitur dasar ──────────────────────────────────────── */
.rtm-feature-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--rtm-space-2) 0;
    padding: var(--rtm-space-4) var(--rtm-space-6);
    background-color: var(--rtm-surface);
    border: 1px solid var(--rtm-border);
    border-radius: var(--rtm-radius-md);
}

.rtm-feature-strip > span {
    display: inline-flex;
    align-items: center;
    gap: var(--rtm-space-2);
    padding: 0 var(--rtm-space-6);
    font-size: var(--rtm-text-base);
    color: var(--rtm-text);
}

.rtm-feature-strip > span + span { border-left: 1px solid var(--rtm-border); }

/* Titik aksen menggantikan ikon centang */
.rtm-feature-strip > span::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--rtm-accent);
    flex-shrink: 0;
}

/* ── Kartu tier ─────────────────────────────────────────────── */
.rtm-plan-card {
    position: relative;
    height: 100%;
    background-color: var(--rtm-surface);
    border: 1px solid var(--rtm-border);
    border-radius: var(--rtm-radius-md);
    transition: border-color .2s ease;
}

.rtm-plan-card:hover { border-color: var(--rtm-accent-stroke); }

/* Tier populer & plan aktif sama-sama diberi border aksen penuh */
.rtm-plan-card.is-popular,
.rtm-plan-card.is-current { border-color: var(--rtm-accent); }

/* Pita mengambang di sisi atas kartu */
.rtm-plan-ribbon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: var(--rtm-space-2);
    padding: var(--rtm-space-2) var(--rtm-space-4);
    border-radius: var(--rtm-radius-pill);
    background-color: var(--rtm-accent);
    color: var(--rtm-on-accent);
    font-size: var(--rtm-text-base);
    font-weight: var(--rtm-weight-strong);
    white-space: nowrap;
    z-index: 2;
}

.rtm-plan-name {
    margin: 0;
    font-size: var(--rtm-text-h5);
    font-weight: var(--rtm-weight-strong);
    color: var(--rtm-text);
    text-transform: capitalize;
}

.rtm-plan-sub {
    font-size: var(--rtm-text-base);
    color: var(--rtm-text-muted);
}

.rtm-plan-price {
    display: flex;
    align-items: baseline;
    gap: var(--rtm-space-2);
    font-size: var(--rtm-text-h4);
    font-weight: var(--rtm-weight-strong);
    color: var(--rtm-text);
    line-height: var(--rtm-leading-heading);
}

.rtm-plan-price-suffix {
    font-size: var(--rtm-text-base);
    font-weight: var(--rtm-weight-body);
    color: var(--rtm-text-muted);
}

.rtm-plan-divider {
    height: 1px;
    background-color: var(--rtm-border);
    margin: var(--rtm-space-4) 0;
}

.rtm-plan-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--rtm-space-3);
}

.rtm-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: var(--rtm-space-3);
    font-size: var(--rtm-text-base);
    color: var(--rtm-text);
}

.rtm-plan-features li > i {
    color: var(--rtm-accent);
    font-size: 18px;
    flex-shrink: 0;
    line-height: 1.35;
}

/* ── Kotak pillar (daftar referensi di bawah kartu) ─────────── */
.rtm-pillar-tile {
    display: flex;
    align-items: center;
    gap: var(--rtm-space-3);
    height: 100%;
    padding: var(--rtm-space-3);
    background-color: var(--rtm-fill-subtle);
    border: 1px solid var(--rtm-stroke-subtle);
    border-radius: var(--rtm-radius-sm);
}

.rtm-pillar-tile-name {
    font-size: var(--rtm-text-base);
    font-weight: var(--rtm-weight-strong);
    color: var(--rtm-text);
    line-height: var(--rtm-leading-tight);
}

.rtm-pillar-tile-meta {
    font-size: var(--rtm-text-sm);
    color: var(--rtm-text-muted);
}

/* ── Strip jaminan (money back / updates / support) ─────────── */
.rtm-trust-strip > [class*="col-"] + [class*="col-"] {
    border-left: 1px solid var(--rtm-border);
}

@media (max-width: 767.98px) {
    .rtm-trust-strip > [class*="col-"] + [class*="col-"] {
        border-left: 0;
        border-top: 1px solid var(--rtm-border);
        padding-top: var(--rtm-space-4);
    }
}

/* =============================================================
   11. PROFILE
   ============================================================= */

/* Avatar besar di kartu profil + tombol ganti foto di sudutnya */
.rtm-avatar-xl {
    width: 80px;
    height: 80px;
    font-size: 32px;
}

.rtm-avatar-edit {
    position: absolute;
    right: 0;
    bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 2px solid var(--rtm-surface);
    border-radius: var(--rtm-radius-pill);
    background-color: var(--rtm-accent);
    color: var(--rtm-on-accent);
    font-size: 13px;
    cursor: pointer;
}

.rtm-avatar-edit:hover { background-color: #00b894; color: var(--rtm-on-accent); }

/* Baris kontak (ikon + teks) di bawah nama */
.rtm-contact-row {
    display: flex;
    align-items: center;
    gap: var(--rtm-space-3);
    font-size: var(--rtm-text-base);
    color: var(--rtm-text-muted);
}

.rtm-contact-row > i:first-child { font-size: 16px; flex-shrink: 0; }

/* Pasangan label/nilai (Personal Information, Billing, dll) */
.rtm-field-label {
    display: block;
    margin-bottom: var(--rtm-space-1);
    font-size: var(--rtm-text-base);
    color: var(--rtm-text-muted);
}

.rtm-field-value {
    margin: 0;
    font-size: var(--rtm-text-lg);
    color: var(--rtm-text);
}

/* Baris detail berpemisah (Security Info) */
.rtm-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rtm-space-4);
    padding: var(--rtm-space-3) 0;
    border-bottom: 1px solid var(--rtm-border);
    font-size: var(--rtm-text-base);
}

.rtm-detail-row:last-of-type { border-bottom: 0; }

.rtm-detail-row > :first-child { color: var(--rtm-text-muted); }
.rtm-detail-row > :last-child { color: var(--rtm-text); text-align: right; }

/* Sub-judul di dalam kartu (mis. "Notification Preferences") */
.rtm-subhead {
    display: flex;
    align-items: center;
    gap: var(--rtm-space-3);
    margin: 0;
    font-size: var(--rtm-text-h6);
    font-weight: var(--rtm-weight-strong);
    color: var(--rtm-text);
}

.rtm-subhead > i { color: var(--rtm-accent); font-size: 18px; }

/* Kartu alamat tersimpan */
.rtm-address-card {
    position: relative;
    padding: var(--rtm-space-4);
    background-color: var(--rtm-fill-subtle);
    border: 1px solid var(--rtm-stroke-subtle);
    border-radius: var(--rtm-radius-sm);
}

/* =============================================================
   12. ILUSTRASI KARTU MEMBERSHIP
   Dipakai di banner dashboard & hero overview.
   ============================================================= */

/* Spesifisitas sengaja dinaikkan: kedua kartu punya aturan
   `> * { position: relative; z-index: 1 }` yang kalau tidak dikalahkan
   akan membuat ilustrasi ikut mengalir sebagai konten, bukan latar. */
.dashboard-membership-banner > .rtm-card-art,
.rtm-plan-hero > .rtm-card-art {
    position: absolute;
    top: 40%;
    z-index: 0;
    width: auto;
    height: 120%;
    /* Sumbernya 536x299 — jangan pernah dibesarkan melebihi itu, kalau
       dipaksa melar gambarnya pecah. */
    max-height: 299px;
    max-width: none;
    transform: translate(-50%, -50%);
    opacity: .9;
    pointer-events: none;
    user-select: none;
}

/* Titik tengah ilustrasi: pas di sela antara blok teks dan panel kanan */
.dashboard-membership-banner > .rtm-card-art { left: 55%; }
.rtm-plan-hero > .rtm-card-art { left: 76%; }

/* Di layar sempit ilustrasi menutupi teks — sembunyikan saja */
@media (max-width: 991.98px) {
    .dashboard-membership-banner > .rtm-card-art,
    .rtm-plan-hero > .rtm-card-art { display: none; }
}

/* =============================================================
   13. PANEL NOTIFIKASI (dropdown lonceng)
   Menumpang kerangka .rtm-user-dropdown (hover + klik) lalu
   melebarkan panel dan membuat daftarnya bisa digulir.
   ============================================================= */
.rtm-notif-menu { position: relative; }

.rtm-notif-dropdown {
    width: 360px;
    max-width: calc(100vw - var(--rtm-space-8));
    padding-bottom: 0;
}

.rtm-notif-dropdown-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rtm-space-3);
    padding: var(--rtm-space-4);
    border-bottom: 1px solid var(--rtm-border);
}

.rtm-notif-dropdown-head h6 {
    margin: 0;
    font-size: var(--rtm-text-h6);
    font-weight: var(--rtm-weight-strong);
    color: var(--rtm-text);
}

/* Daftar digulir supaya panel tidak memanjang melewati layar */
.rtm-notif-dropdown-list {
    display: flex;
    flex-direction: column;
    max-height: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.rtm-notif-dropdown-list .rtm-notif-item {
    padding: var(--rtm-space-3) var(--rtm-space-4);
    border-bottom: 1px solid var(--rtm-border);
    color: inherit;
}

.rtm-notif-dropdown-list .rtm-notif-item:hover { background-color: var(--rtm-fill-subtle); }

/* Baris belum dibaca diberi pita aksen tipis di tepi kiri */
.rtm-notif-dropdown-list .rtm-notif-item.is-unread {
    background-color: var(--rtm-accent-fill);
    box-shadow: inset 2px 0 0 var(--rtm-accent);
}

.rtm-notif-dropdown-empty {
    padding: var(--rtm-space-6) var(--rtm-space-4);
    text-align: center;
    font-size: var(--rtm-text-base);
    color: var(--rtm-text-muted);
}

.rtm-notif-dropdown-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--rtm-space-2);
    padding: var(--rtm-space-3) var(--rtm-space-4);
    border-top: 1px solid var(--rtm-border);
    font-size: var(--rtm-text-base);
    font-weight: var(--rtm-weight-strong);
    color: var(--rtm-accent);
    text-decoration: none;
}

.rtm-notif-dropdown-foot:hover {
    background-color: var(--rtm-fill-subtle);
    color: var(--rtm-accent);
}

/* Kotak ikon bisa diisi logo (bukan font ikon) — mis. mark RTM di kartu
   membership. Gambar dibatasi agar tetap punya padding di dalam kotak. */
.rtm-icon-tile > img {
    width: 60%;
    height: 60%;
    object-fit: contain;
}

/* =============================================================
   13. SIDEBAR NAVIGASI  (startbar /my)
   Grup bisa dilipat (header + caret), item menempel pada rel
   vertikal, item aktif jadi pil beraksen. Memakai kelas rtm-nav*
   sendiri supaya tidak beradu dengan .nav-link bawaan vendor.
   ============================================================= */
.rtm-sidenav {
    display: flex;
    flex-direction: column;
    gap: var(--rtm-space-2);
    padding: var(--rtm-space-2) 0;
    list-style: none;
    margin: 0;
}

.rtm-navgroup { list-style: none; }

/* Header grup (NAVIGATION / ACCOUNT / …) — juga tombol lipat */
.rtm-navgroup-header {
    display: flex;
    align-items: center;
    gap: var(--rtm-space-3);
    width: 100%;
    padding: var(--rtm-space-3) var(--rtm-space-2);
    border: 0;
    background: transparent;
    color: var(--rtm-text-muted);
    font-family: var(--rtm-font);
    font-size: var(--rtm-text-sm);
    font-weight: var(--rtm-weight-strong);
    text-transform: uppercase;
    letter-spacing: .5px;
    cursor: pointer;
}

.rtm-navgroup-header:hover { color: var(--rtm-text); }
.rtm-navgroup-icon { font-size: 16px; flex-shrink: 0; }

.rtm-navgroup-caret {
    margin-left: auto;
    font-size: 16px;
    transition: transform .2s ease;
}

/* Bootstrap menambahkan .collapsed saat target tertutup */
.rtm-navgroup-header.collapsed .rtm-navgroup-caret { transform: rotate(-90deg); }

/* Daftar item + rel vertikal di kirinya */
.rtm-navgroup-list {
    list-style: none;
    margin: 0 0 0 16px;
    /* Rel vertikal sejajar dengan tengah ikon header; padding kecil supaya
       teks item lurus dengan teks label header (bukan menjorok ke kanan). */
    padding: 0 0 0 var(--rtm-space-2);
    border-left: 1px solid var(--rtm-border);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rtm-navgroup-list li { list-style: none; }

.rtm-navlink {
    display: flex;
    align-items: center;
    gap: var(--rtm-space-2);
    padding: var(--rtm-space-2) var(--rtm-space-3);
    /* Border transparan agar lebar item tidak bergeser saat aktif */
    border: 1px solid transparent;
    border-radius: var(--rtm-radius-sm);
    color: var(--rtm-text-muted);
    font-family: var(--rtm-font);
    font-size: var(--rtm-text-base);
    text-decoration: none;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.rtm-navlink > span:not(.badge) { flex: 1; min-width: 0; }

/* Ikon per item HANYA dipakai saat sidebar diciut jadi rel ikon — di situ
   ikonnya satu-satunya penanda tujuan karena label disembunyikan.

   Saat sidebar terbuka, label sudah menjelaskan tujuannya, jadi ikon justru
   menggandakan informasi dan mendorong teks item menjorok ke kanan. Dengan
   ikon disembunyikan, teks item mendarat di 36px — persis sejajar dengan
   label grup di atasnya (8px padding + 16px ikon + 12px gap), sesuai maksud
   penataan rel vertikal di .rtm-navgroup-list. Ditampilkan lagi oleh blok
   "collapsed" di bagian atas berkas ini. */
.rtm-navlink-icon {
    display: none;
    font-size: 18px;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

.rtm-navlink:hover { color: var(--rtm-text); background-color: var(--rtm-fill-subtle); }

.rtm-navlink.active {
    color: var(--rtm-accent);
    background-color: var(--rtm-accent-fill);
    border-color: var(--rtm-accent-stroke);
    font-weight: var(--rtm-weight-strong);
}

/* Pemisah tipis di atas kartu bantuan */
.rtm-sidenav-divider {
    margin: var(--rtm-space-6) 0 var(--rtm-space-1) 0;
    border: 0;
    border-top: 1px solid var(--rtm-border);
    opacity: 1;
}

/* Kartu "Need Help?" di dasar sidebar */
.rtm-help-card {
    display: flex;
    align-items: center;
    gap: var(--rtm-space-3);
    margin: var(--rtm-space-4) 0 var(--rtm-space-3) 0;
    padding: var(--rtm-space-4);
    background-color: var(--rtm-fill-subtle);
    border: 1px solid var(--rtm-stroke-subtle);
    border-radius: var(--rtm-radius-md);
    text-decoration: none;
}

.rtm-help-card:hover { border-color: var(--rtm-accent-stroke); }

.rtm-help-card-title {
    font-size: var(--rtm-text-base);
    font-weight: var(--rtm-weight-strong);
    color: var(--rtm-text);
}

.rtm-help-card-sub {
    font-size: var(--rtm-text-sm);
    color: var(--rtm-text-muted);
    line-height: var(--rtm-leading-tight);
}

.rtm-help-card-arrow { margin-left: auto; color: var(--rtm-text-muted); flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   WEBSTORE  —  Go to Store, Product Detail, Cart, Checkout
   Memakai token & bahasa desain yang sama dengan dashboard /my.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Feature strip (Premium Quality / Regular Updates / Dedicated Support) ── */
.store-features .card-body { padding: var(--rtm-space-6); }

.store-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--rtm-space-6);
}

.store-feature {
    display: flex;
    align-items: center;
    gap: var(--rtm-space-3);
    position: relative;
}

.store-feature + .store-feature::before {
    content: "";
    position: absolute;
    left: calc(var(--rtm-space-6) * -0.5);
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 40px;
    background-color: var(--rtm-border);
}

.store-feature-title {
    font-size: var(--rtm-text-h6);
    font-weight: var(--rtm-weight-strong);
    color: var(--rtm-text);
    line-height: var(--rtm-leading-tight);
    margin: 0;
}

.store-feature-sub {
    font-size: var(--rtm-text-base);
    color: var(--rtm-text-muted);
    line-height: var(--rtm-leading-tight);
    margin: 0;
}

@media (max-width: 991.98px) {
    .store-feature-grid { grid-template-columns: 1fr; gap: var(--rtm-space-4); }
    .store-feature + .store-feature::before { display: none; }
}

/* ── Product grid ─────────────────────────────────────────────────────── */
.store-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--rtm-space-6);
}

@media (max-width: 1399.98px) { .store-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 991.98px)  { .store-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px)  { .store-grid { grid-template-columns: 1fr; } }

.store-card {
    display: flex;
    flex-direction: column;
    background-color: var(--rtm-surface);
    border: 1px solid var(--rtm-border);
    border-radius: var(--rtm-radius-md);
    overflow: hidden;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.store-card:hover {
    border-color: var(--rtm-accent-stroke);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .35);
}

.store-card-media {
    position: relative;
    display: block;
    aspect-ratio: 3 / 2;
    background-color: var(--rtm-surface-raised);
    overflow: hidden;
}

.store-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}

.store-card:hover .store-card-media img { transform: scale(1.04); }

.store-card-badge {
    position: absolute;
    top: var(--rtm-space-3);
    left: var(--rtm-space-3);
    padding: 4px var(--rtm-space-2);
    border-radius: var(--rtm-radius-sm);
    font-size: var(--rtm-text-sm);
    font-weight: var(--rtm-weight-strong);
    background-color: var(--rtm-danger);
    color: #fff;
    line-height: 1;
}

.store-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--rtm-space-2);
    padding: var(--rtm-space-4);
    flex: 1 1 auto;
}

.store-card-cats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rtm-space-1);
}

.store-card-title {
    font-size: var(--rtm-text-h6);
    font-weight: var(--rtm-weight-strong);
    color: var(--rtm-text);
    line-height: var(--rtm-leading-tight);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.store-card-title a { color: inherit; text-decoration: none; }
.store-card-title a:hover { color: var(--rtm-accent); }

.store-card-price {
    display: flex;
    align-items: baseline;
    gap: var(--rtm-space-2);
    font-size: var(--rtm-text-lg);
    font-weight: var(--rtm-weight-strong);
    color: var(--rtm-accent);
    margin-top: auto;
}

.store-card-price del {
    font-size: var(--rtm-text-base);
    font-weight: var(--rtm-weight-body);
    color: var(--rtm-text-muted);
}

.store-card-actions {
    display: flex;
    gap: var(--rtm-space-2);
    padding: 0 var(--rtm-space-4) var(--rtm-space-4);
}

.store-card-actions .btn { flex: 1 1 auto; }

.store-icon-btn {
    flex: 0 0 auto;
    width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--rtm-radius-sm);
    background-color: var(--rtm-fill-subtle);
    border: 1px solid var(--rtm-stroke-strong);
    color: var(--rtm-text);
    font-size: 18px;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.store-icon-btn:hover {
    background-color: var(--rtm-accent-fill);
    border-color: var(--rtm-accent-stroke);
    color: var(--rtm-accent);
}

/* State kosong */
.store-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--rtm-space-8);
    color: var(--rtm-text-muted);
}

/* ── Product detail ───────────────────────────────────────────────────── */
.store-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--rtm-space-8);
    align-items: start;
}

@media (max-width: 991.98px) { .store-detail-grid { grid-template-columns: 1fr; gap: var(--rtm-space-6); } }

.store-gallery-main {
    border-radius: var(--rtm-radius-md);
    overflow: hidden;
    background-color: var(--rtm-surface-raised);
    border: 1px solid var(--rtm-border);
    aspect-ratio: 16 / 11;
}

.store-gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }

.store-gallery-dots {
    display: flex;
    justify-content: center;
    gap: var(--rtm-space-2);
    margin-top: var(--rtm-space-4);
}

.store-gallery-dot {
    width: 26px;
    height: 4px;
    border-radius: var(--rtm-radius-pill);
    background-color: var(--rtm-stroke-strong);
    border: 0;
    padding: 0;
    cursor: pointer;
}

.store-gallery-dot.is-active { background-color: var(--rtm-accent); }

.store-detail-sku {
    font-size: var(--rtm-text-sm);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--rtm-accent);
    font-weight: var(--rtm-weight-strong);
    margin-bottom: var(--rtm-space-2);
}

.store-detail-title {
    font-size: var(--rtm-text-h4);
    font-weight: var(--rtm-weight-strong);
    color: var(--rtm-text);
    line-height: var(--rtm-leading-heading);
    margin: 0 0 var(--rtm-space-2);
}

.store-detail-price {
    display: flex;
    align-items: baseline;
    gap: var(--rtm-space-3);
    font-size: 28px;
    font-weight: var(--rtm-weight-strong);
    color: var(--rtm-accent);
    margin: var(--rtm-space-4) 0;
}

.store-detail-price del {
    font-size: var(--rtm-text-lg);
    font-weight: var(--rtm-weight-body);
    color: var(--rtm-text-muted);
}

.store-feature-list {
    list-style: none;
    padding: 0;
    margin: var(--rtm-space-4) 0;
    display: grid;
    gap: var(--rtm-space-3);
}

.store-feature-list li {
    display: flex;
    align-items: center;
    gap: var(--rtm-space-2);
    font-size: var(--rtm-text-base);
    color: var(--rtm-text);
}

.store-feature-list i { color: var(--rtm-accent); font-size: 18px; flex-shrink: 0; }

.store-detail-desc {
    color: var(--rtm-text-muted);
    line-height: var(--rtm-leading-body);
    max-height: 220px;
    overflow-y: auto;
    margin: var(--rtm-space-4) 0;
}

.store-detail-desc p { margin-bottom: var(--rtm-space-2); }

.store-variants {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rtm-space-2);
    margin: var(--rtm-space-4) 0;
}

.store-variant-btn {
    padding: var(--rtm-space-2) var(--rtm-space-4);
    border-radius: var(--rtm-radius-pill);
    border: 1px solid var(--rtm-stroke-strong);
    background-color: var(--rtm-fill-subtle);
    color: var(--rtm-text);
    font-size: var(--rtm-text-base);
    transition: all .15s ease;
}

.store-variant-btn.is-active,
.store-variant-btn:hover {
    border-color: var(--rtm-accent);
    background-color: var(--rtm-accent-fill);
    color: var(--rtm-accent);
}

/* ── Cart offcanvas ───────────────────────────────────────────────────── */
#offcanvasExample.offcanvas {
    --bs-offcanvas-bg: var(--rtm-surface);
    --bs-offcanvas-width: 420px;
    --bs-offcanvas-border-color: var(--rtm-border);
    color: var(--rtm-text);
}

.store-cart-header {
    display: flex;
    align-items: center;
    gap: var(--rtm-space-3);
    padding: var(--rtm-space-4) var(--rtm-space-6);
    border-bottom: 1px solid var(--rtm-border);
}

.store-cart-header h5 { margin: 0; font-size: var(--rtm-text-h5); font-weight: var(--rtm-weight-strong); }
.store-cart-header .btn-close { margin-left: auto; }

.store-cart-meta {
    padding: var(--rtm-space-4) var(--rtm-space-6) 0;
    font-size: var(--rtm-text-sm);
    color: var(--rtm-text-muted);
    line-height: 1.7;
}

.store-cart-meta .store-cart-entry { color: var(--rtm-text); font-weight: var(--rtm-weight-strong); font-size: var(--rtm-text-base); }

.store-cart-body { padding: var(--rtm-space-6); }

.store-cart-item {
    display: flex;
    gap: var(--rtm-space-3);
    padding: var(--rtm-space-4);
    border: 1px solid var(--rtm-border);
    border-radius: var(--rtm-radius-md);
    background-color: var(--rtm-surface-raised);
}

.store-cart-item + .store-cart-item { margin-top: var(--rtm-space-3); }

.store-cart-thumb {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: var(--rtm-radius-sm);
    object-fit: cover;
    border: 1px solid var(--rtm-border);
}

.store-cart-item-name { font-size: var(--rtm-text-base); font-weight: var(--rtm-weight-strong); color: var(--rtm-text); margin: 0; }
.store-cart-item-type { font-size: var(--rtm-text-sm); color: var(--rtm-text-muted); }
.store-cart-item-price { font-size: var(--rtm-text-base); font-weight: var(--rtm-weight-strong); color: var(--rtm-accent); }

/* Qty stepper */
.store-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--rtm-stroke-strong);
    border-radius: var(--rtm-radius-sm);
    overflow: hidden;
    background-color: var(--rtm-fill-subtle);
}

.store-stepper button {
    width: 30px;
    height: 30px;
    border: 0;
    background: transparent;
    color: var(--rtm-text);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.store-stepper button:disabled { opacity: .4; cursor: not-allowed; }

.store-stepper input {
    width: 40px;
    height: 30px;
    border: 0;
    background: transparent;
    color: var(--rtm-text);
    text-align: center;
    font-size: var(--rtm-text-base);
    -moz-appearance: textfield;
}

.store-stepper input::-webkit-outer-spin-button,
.store-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.store-cart-remove {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--rtm-radius-sm);
    border: 1px solid var(--rtm-stroke-subtle);
    background: transparent;
    color: var(--rtm-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .15s ease;
}

.store-cart-remove:hover { border-color: var(--rtm-danger); color: var(--rtm-danger); background-color: rgba(252, 56, 56, .08); }

.store-cart-foot { border-top: 1px solid var(--rtm-border); padding-top: var(--rtm-space-4); margin-top: var(--rtm-space-4); }

.store-coupon .form-control {
    background-color: var(--rtm-fill-subtle);
    border-color: var(--rtm-stroke-strong);
    color: var(--rtm-text);
}

.store-cart-totals { display: grid; gap: var(--rtm-space-2); margin: var(--rtm-space-4) 0; }
.store-cart-total-row { display: flex; justify-content: space-between; font-size: var(--rtm-text-base); }
.store-cart-total-row span:first-child { color: var(--rtm-text-muted); }
.store-cart-total-row.is-grand { padding-top: var(--rtm-space-3); border-top: 1px solid var(--rtm-border); font-weight: var(--rtm-weight-strong); }
.store-cart-total-row.is-grand span:first-child { color: var(--rtm-text); }
.store-cart-total-row.is-grand span:last-child { color: var(--rtm-accent); font-size: var(--rtm-text-lg); }

/* ── Checkout ─────────────────────────────────────────────────────────── */
.store-checkout-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--rtm-space-6);
    align-items: start;
}

@media (max-width: 991.98px) { .store-checkout-grid { grid-template-columns: 1fr; } }

.store-summary-row { display: flex; justify-content: space-between; padding: var(--rtm-space-2) 0; font-size: var(--rtm-text-base); }
.store-summary-row span:first-child { color: var(--rtm-text-muted); }
.store-summary-row.is-total { border-top: 1px solid var(--rtm-border); margin-top: var(--rtm-space-2); padding-top: var(--rtm-space-4); font-weight: var(--rtm-weight-strong); }
.store-summary-row.is-total span:first-child { color: var(--rtm-text); }
.store-summary-row.is-total span:last-child { color: var(--rtm-accent); font-size: var(--rtm-text-h5); }

.store-pay-btn { width: 100%; padding: var(--rtm-space-4); font-weight: var(--rtm-weight-strong); }
.store-pay-note { text-align: center; font-size: var(--rtm-text-sm); color: var(--rtm-text-muted); margin-top: var(--rtm-space-3); }

/* ── Checkout: tombol PayPal dibungkus "kartu pembayaran" ──────────────────
   Tombol PayPal digambar di iframe lintas-domain berlatar putih yang tak bisa
   kita warnai. Jadi kita rangkul: bungkus jadi panel putih membulat +
   berpadding supaya area putihnya tampak disengaja & menyatu dengan desain
   (bukan bercak bleed edge-to-edge di kartu gelap). */
#paypal-button-container {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--rtm-radius-md);
    padding: var(--rtm-space-4);
    margin-bottom: var(--rtm-space-4);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

/* Placeholder loading ikut ditata seperti panel yang sama biar mulus. */
#paypal-loading {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--rtm-radius-md);
    padding: var(--rtm-space-4);
    margin-bottom: var(--rtm-space-4);
    color: #6b7280;
}
#paypal-loading .text-body,
#paypal-loading .text-muted { color: #6b7280 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   DARK-MODE UTILITY REMAP
   Bootstrap 5.3 sengaja TIDAK membalik utilitas "fixed" seperti .text-dark,
   .bg-light, .bg-white saat tema gelap — makanya di area admin muncul teks
   gelap-di-atas-gelap (tak terbaca) dan bercak putih. Di sini kita petakan
   ulang supaya konsisten dengan token gelap /my.
   ════════════════════════════════════════════════════════════════════════ */
html[data-bs-theme="dark"] .text-dark {
    color: var(--rtm-text) !important;
}

html[data-bs-theme="dark"] .bg-white {
    background-color: var(--rtm-surface) !important;
}

html[data-bs-theme="dark"] .bg-light,
html[data-bs-theme="dark"] .bg-body-tertiary {
    background-color: var(--rtm-surface-raised) !important;
}

/* Header admin (topbar) — samakan dengan bahasa desain /my */
html[data-bs-theme="dark"] .topbar {
    background-color: var(--rtm-surface);
}

.topbar .app-search .form-control.top-search {
    background-color: var(--rtm-fill-subtle);
    border: 1px solid var(--rtm-stroke-strong);
    color: var(--rtm-text);
    border-radius: var(--rtm-radius-pill);
}

.topbar .app-search .form-control.top-search::placeholder { color: var(--rtm-text-muted); }

.topbar .nav-icon {
    color: var(--rtm-text-muted);
    border-radius: var(--rtm-radius-sm);
}

.topbar .nav-icon:hover { color: var(--rtm-text); background-color: var(--rtm-fill-muted); }

.topbar .welcome-text h5 { font-family: var(--rtm-font); }

/* Dropdown notifikasi & akun di topbar */
.topbar .dropdown-menu {
    background-color: var(--rtm-surface-raised);
    border: 1px solid var(--rtm-border);
    border-radius: var(--rtm-radius-md);
}

.topbar .dropdown-item { color: var(--rtm-text); }
.topbar .dropdown-item:hover,
.topbar .dropdown-item:focus { background-color: var(--rtm-fill-muted); color: var(--rtm-text); }
.topbar .dropdown-item.notif-item { border-color: var(--rtm-border) !important; }

/* =============================================================
   AFFILIATE
   Halaman /my/affiliate — join landing + dashboard + modal produk.
   ============================================================= */

/* ── Hero & banner (menumpang pola ilustrasi kartu membership) ── */
.rtm-affiliate-join-hero,
.rtm-affiliate-promo {
    position: relative;
    overflow: hidden;
}

.rtm-affiliate-join-hero > .card-body,
.rtm-affiliate-promo > .card-body {
    position: relative;
    z-index: 1;
}

.rtm-affiliate-join-hero > .rtm-card-art,
.rtm-affiliate-promo > .rtm-card-art {
    position: absolute;
    top: 50%;
    left: 82%;
    z-index: 0;
    width: auto;
    height: 130%;
    max-height: 299px;
    max-width: none;
    transform: translate(-50%, -50%);
    opacity: .85;
    pointer-events: none;
    user-select: none;
}

@media (max-width: 991.98px) {
    .rtm-affiliate-join-hero > .rtm-card-art,
    .rtm-affiliate-promo > .rtm-card-art { display: none; }
}

.rtm-affiliate-join-title {
    font-family: var(--rtm-font);
    font-weight: var(--rtm-weight-strong);
    color: var(--rtm-text);
    line-height: var(--rtm-leading-heading);
}

.rtm-affiliate-join-lead {
    color: var(--rtm-text-muted);
    font-size: var(--rtm-text-lg);
    max-width: 46ch;
}

.rtm-affiliate-join-highlight {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rtm-affiliate-join-rate {
    font-family: var(--rtm-font);
    font-weight: var(--rtm-weight-strong);
    font-size: 56px;
    line-height: 1;
    color: var(--rtm-accent);
}

/* ── Langkah "How it works" ── */
.rtm-affiliate-step-num {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--rtm-weight-strong);
    color: var(--rtm-accent);
    background-color: var(--rtm-accent-fill-strong);
    border: 1px solid var(--rtm-accent-stroke);
}

/* ── Grafik: dot legenda ── */
.rtm-affiliate-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

/* ── Kartu "Your Affiliate Link" ── */
.rtm-affiliate-link-group .form-control {
    background-color: var(--rtm-fill-subtle);
    border: 1px solid var(--rtm-stroke-subtle);
    color: var(--rtm-text);
    font-size: var(--rtm-text-sm);
}

.rtm-affiliate-share:hover {
    color: var(--rtm-accent);
    background-color: var(--rtm-accent-fill);
}

.rtm-affiliate-muted-link {
    color: var(--rtm-text-muted);
    cursor: default;
}

/* ── Payout summary ── */
.rtm-affiliate-payout-list {
    display: flex;
    flex-direction: column;
    gap: var(--rtm-space-3);
}

.rtm-affiliate-payout-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rtm-space-3);
}

/* ── Modal "Choose Product" ── */
.rtm-affiliate-product-card {
    display: flex;
    flex-direction: column;
    background-color: var(--rtm-surface-raised);
    border: 1px solid var(--rtm-border);
    border-radius: var(--rtm-radius-md);
    overflow: hidden;
    transition: border-color .15s ease, transform .15s ease;
}

.rtm-affiliate-product-card:hover {
    border-color: var(--rtm-accent-stroke);
    transform: translateY(-2px);
}

.rtm-affiliate-product-thumb {
    aspect-ratio: 16 / 10;
    background-color: var(--rtm-fill-subtle);
    overflow: hidden;
}

.rtm-affiliate-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rtm-affiliate-product-noimg {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rtm-text-muted);
    font-size: 32px;
}

.rtm-affiliate-product-body {
    display: flex;
    flex-direction: column;
    gap: var(--rtm-space-2);
    padding: var(--rtm-space-3);
}

.rtm-affiliate-product-name {
    margin: 0;
    font-size: var(--rtm-text-base);
    font-weight: var(--rtm-weight-strong);
    color: var(--rtm-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rtm-affiliate-product-price {
    display: flex;
    align-items: baseline;
    gap: var(--rtm-space-2);
}

.rtm-affiliate-product-now {
    font-weight: var(--rtm-weight-strong);
    color: var(--rtm-accent);
}

.rtm-affiliate-product-was {
    font-size: var(--rtm-text-sm);
    color: var(--rtm-text-muted);
    text-decoration: line-through;
}

/* ── Backdrop pop-up ────────────────────────────────────────── */
/* Setiap pop-up (modal & offcanvas Bootstrap) mengaburkan isi halaman di
   belakangnya supaya perhatian jatuh ke dialog.

   Catatan penting: Bootstrap menggelapkan backdrop lewat `opacity` pada
   elemen backdrop itu sendiri (#000 + opacity .5). Browser MENGABAIKAN
   backdrop-filter pada elemen yang opacity-nya < 1 — elemen itu dilukis ke
   layer sendiri, jadi tak ada backdrop untuk difilter. Karena itu opasitas
   dikembalikan ke 1 dan warna gelapnya dipindah ke background-color rgba;
   tanpa ini blur-nya diam-diam tidak muncul sama sekali.

   Efek sampingnya: selama transisi fade (opacity 0 → 1) blur baru terlihat
   di ujung animasi. 150ms, dan dialognya ikut fade, jadi tidak terasa. */
.modal-backdrop,
.offcanvas-backdrop {
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    backdrop-filter: blur(8px) saturate(120%);
}

.modal-backdrop {
    --bs-backdrop-bg: rgba(0, 0, 0, 0.35);
    --bs-backdrop-opacity: 1;
}

/* .offcanvas-backdrop tidak punya custom property padanan di Bootstrap 5;
   nilainya ditulis langsung di .show, jadi ditimpa lewat selector sama. */
.offcanvas-backdrop.show {
    background-color: rgba(0, 0, 0, 0.35);
    opacity: 1;
}

/* Modal yang dikendalikan Alpine (upgrade plan, payments, payout,
   subscriptions) tidak memakai JS Bootstrap, jadi elemen .modal-backdrop
   TIDAK PERNAH dibuat — tirainya dilukis sebagai background inline pada
   .modal itu sendiri. Aturan di atas tak menyentuhnya, karena itu blur-nya
   dipasang langsung di sini.

   Pembedanya: Alpine menambah kelas `d-block` (:class="{ 'show d-block': ... }"),
   sedangkan Bootstrap menyalakan modal lewat style display inline tanpa kelas
   itu. Jadi .show.d-block mengenai persis modal Alpine saja — modal Bootstrap
   tidak ikut terkena dan tidak ter-blur dua kali.

   !important diperlukan karena warna tirainya ditulis sebagai style inline
   di masing-masing blade, yang kalau tidak akan menang atas stylesheet. */
.modal.show.d-block {
    background-color: rgba(0, 0, 0, 0.35) !important;
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    backdrop-filter: blur(8px) saturate(120%);
}

/* Tanpa dukungan backdrop-filter (Safari lama, atau saat pengguna meminta
   efek minimal) tidak ada blur yang memisahkan dialog dari halaman, jadi
   tirainya digelapkan kembali seperti bawaan Bootstrap. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .modal-backdrop { --bs-backdrop-bg: rgba(0, 0, 0, 0.6); }
    .offcanvas-backdrop.show { background-color: rgba(0, 0, 0, 0.6); }
    .modal.show.d-block { background-color: rgba(0, 0, 0, 0.6) !important; }
}

@media (prefers-reduced-motion: reduce) {
    .modal-backdrop,
    .offcanvas-backdrop,
    .modal.show.d-block {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .modal-backdrop { --bs-backdrop-bg: rgba(0, 0, 0, 0.6); }
    .offcanvas-backdrop.show { background-color: rgba(0, 0, 0, 0.6); }
    .modal.show.d-block { background-color: rgba(0, 0, 0, 0.6) !important; }
}

/* ── Search: sorotan di halaman & hasil berkelompok ─────────── */
/* Kata yang cocok dibungkus <mark class="rtm-search-hl"> oleh JS di
   x-rtm.page-header. Warna aksen dipakai transparan supaya teks aslinya
   tetap terbaca di tema terang maupun gelap. */
mark.rtm-search-hl {
    padding: 0 2px;
    border-radius: 3px;
    background-color: rgba(var(--rtm-accent-rgb), 0.22);
    color: inherit;
}

/* Kecocokan yang sedang dituju Enter — dibuat jelas berbeda dari
   kecocokan lain supaya posisi kursor pencarian tak hilang. */
mark.rtm-search-hl.is-current {
    background-color: var(--rtm-accent);
    color: var(--rtm-on-accent);
    box-shadow: 0 0 0 2px rgba(var(--rtm-accent-rgb), 0.35);
}

/* Panel hasil lebih lebar dari kotak input: baris produk membawa thumbnail,
   nama, dan harga sekaligus, yang tak muat di lebar input (264px). */
.rtm-search-results {
    left: auto;
    right: 0;
    width: 340px;
    max-width: calc(100vw - 2rem);
}

/* Baris status: jumlah kecocokan di halaman + petunjuk tombol. */
.rtm-search-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rtm-space-2);
    padding: var(--rtm-space-2) var(--rtm-space-3);
    font-size: var(--rtm-text-sm);
    line-height: 1.3;
    white-space: nowrap;
    color: var(--rtm-text-muted);
}

.rtm-search-status kbd {
    padding: 1px 5px;
    margin-right: 4px;
    font-size: 11px;
    background-color: var(--rtm-fill-subtle);
    border: 1px solid var(--rtm-border);
    border-radius: 4px;
    color: var(--rtm-text-muted);
}

.rtm-search-group {
    padding: var(--rtm-space-2) var(--rtm-space-3) 4px;
    font-size: var(--rtm-text-sm);
    font-weight: var(--rtm-weight-strong);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--rtm-text-muted);
}

.rtm-search-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    overflow: hidden;
    background-color: var(--rtm-fill-subtle);
    border: 1px solid var(--rtm-stroke-subtle);
    border-radius: var(--rtm-radius-sm);
    color: var(--rtm-text-muted);
}

.rtm-search-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Nama produk mengambil sisa ruang; harga menempel di kanan. */
.rtm-search-product .rtm-search-result-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rtm-search-result-meta {
    flex-shrink: 0;
    font-size: var(--rtm-text-sm);
    color: var(--rtm-text-muted);
}

.rtm-search-result:hover .rtm-search-result-meta,
.rtm-search-result.is-active .rtm-search-result-meta { color: inherit; }

/* ══════════════════════════════════════════════════════════════════════
   Flash message admin — jangan tertutup topbar
   ══════════════════════════════════════════════════════════════════════
   .topbar itu position:fixed dengan z-index 1000, sementara .page-content
   cuma punya margin-top setinggi topbar. Akibatnya alert flash yang berada
   di paling atas page-content langsung tergelincir ke balik topbar begitu
   halaman di-scroll sedikit saja — padahal alert-nya auto-hide 5 detik,
   jadi konfirmasi aksi admin gampang terlewat sama sekali.

   Sticky tepat di bawah topbar bikin flash tetap terbaca di posisi scroll
   mana pun sampai dia hilang sendiri. */
.rtm-flash-stack {
    position: sticky;
    top: calc(var(--bs-topbar-height) + 0.5rem);
    /* Di bawah topbar (1000) supaya tetap menyelip rapi di baliknya,
       tapi di atas kartu konten biasa. */
    z-index: 999;
}

.rtm-flash-stack .alert {
    margin-top: 0.5rem;
    margin-bottom: 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}

/* Jarak ke konten di bawahnya hanya saat flash benar-benar tampil. */
.rtm-flash-stack + * {
    margin-top: 0.75rem;
}

/* Filter bar tabel ticket admin — <select class="form-select-sm"> render
   sedikit lebih tinggi daripada <input class="input-group-sm"> di build
   Bootstrap ini (native chrome dropdown), padahal padding CSS-nya sama.
   Dikunci ke tinggi yang sama biar search box & dropdown sejajar rapi. */
.rtm-ticket-filterbar .form-select-sm,
.rtm-ticket-filterbar .input-group-sm > .form-control,
.rtm-ticket-filterbar .input-group-sm > .input-group-text,
.rtm-ticket-filterbar .btn-sm {
    height: 31px;
}

/* Checkbox/radio (.form-check-input) di tema gelap nyaris tak terlihat —
   border default Bootstrap (#333547) kontrasnya terlalu rendah dengan
   background kartu gelap. Naikkan kontras border-nya di tema gelap saja;
   tema terang tidak disentuh karena sudah cukup jelas. */
[data-bs-theme="dark"] .form-check-input {
    border-color: rgba(255, 255, 255, 0.4);
}
[data-bs-theme="dark"] .form-check-input:hover {
    border-color: rgba(255, 255, 255, 0.6);
}
[data-bs-theme="dark"] .form-check-input:focus {
    border-color: var(--bs-primary);
}

/* Footer bar (.footer .card.rounded-bottom-0) — sudut bawah masih ikut
   membulat karena .card { border-radius: var(--rtm-radius-md) } di atas.
   Kunci lewat selector lebih spesifik supaya footer nempel rata ke bawah;
   sudut atas tetap ikut radius kartu biasa. */
footer.footer .card {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}