/* Theme colors — overrides apps.css :root defaults (#3C6EBD/etc.) */
:root {
    --primary-rgb: 51, 122, 183;   /* #337ab7 */
    --warning-rgb: 240, 173, 78;   /* #f0ad4e */
    --success-rgb: 92, 184, 92;    /* #5cb85c */
    --danger-rgb: 217, 83, 79;     /* #d9534f */
}

/* Header icon badge (see project-context.md 📐 Header icon badge) — flex-shrink:0 stops the fixed
   44x44 circle from being squeezed narrower than it is tall by flexbox's default shrink-to-fit,
   which otherwise kicks in whenever the sibling title+description (e.g. a long wrapped
   description on a narrow screen) doesn't leave enough row width for both — turning the circle
   into an oval since only the width (main axis) shrinks, not the height. Scoped to the
   .d-inline-flex badge specifically (not every .rounded-circle, e.g. avatar <img>s). */
.rounded-circle.d-inline-flex {
    flex-shrink: 0;
}

/* Pengaturan's collapsible card-header (icon-badge + title/subtitle + a[data-bs-toggle=
   "card-collapse"] toggle) — apps.css' .card-header has flex-wrap:wrap, and flex-wrap's line-
   breaking decision is made using each item's *hypothetical* (max-content, i.e. as if the
   subtitle text never wrapped at all) size, before flex-shrink ever gets a chance to run — so
   even a shrinkable, min-width:0 item still gets bumped onto its own line if its unwrapped text
   alone would already overflow. flex-basis:0 (instead of auto) sidesteps that: the item's
   hypothetical size starts at 0, so it never causes an early wrap; it then grows to fill the
   remaining row width (after the pinned toggle) via flex-grow, and only *then* does its text wrap
   inside that resolved width. flex-wrap:nowrap on the row is a second, direct guarantee the
   toggle itself can never be pushed to a new line, no matter how the math above plays out. */
.card-header:has(> [data-bs-toggle="card-collapse"]) {
    flex-wrap: nowrap;
}

.card-header > .d-flex.align-items-center.gap-3 {
    min-width: 0;
    flex: 1 1 0%;
}

/* The title/subtitle <div> is itself a flex item of the row above — same min-width:auto default,
   so it also needs min-width:0 before its own text (the subtitle) will actually wrap instead of
   forcing that row (and the card-header) to stay as wide as the unwrapped text. */
.card-header > .d-flex.align-items-center.gap-3 > div {
    min-width: 0;
}

.card-header > [data-bs-toggle="card-collapse"] {
    flex-shrink: 0;
}

.form-section {
    margin-bottom: 2rem;
    padding: 1.5rem;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    background-color: #f8f9fa;
    height: 100%;
}

.form-section h5 {
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #dee2e6;
    color: #0d6efd;
}
.img-lazy-wrap img {
    cursor: pointer;
}

.store-switcher-avatar img {
    cursor: default;
}

/* Cart qty <input type="number"> on Pembelian — hide the native up/down spinner so the value
   isn't cramped/clipped next to it (still just a normal editable text field otherwise). */
.cart-qty-input {
    width: 32px;
    height: 1.75rem;
    min-height: 1.75rem;
    padding: 0 0.125rem;
    font-size: 0.75rem;
    line-height: 1.75rem;
}

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

.cart-qty-input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Global image viewer overlay — see _Layout.cshtml for why this isn't a Bootstrap modal */
.global-image-viewer {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.global-image-viewer img {
    max-height: 85vh;
    max-width: 90vw;
    object-fit: contain;
    border-radius: 0.25rem;
}

.global-image-viewer-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 2.5rem;
    line-height: 1;
    cursor: pointer;
}

/* Success toast header: darker green than the theme's --success-rgb (#5cb85c) — that shade
   reads as too bright/light specifically on the toast's solid header bar. */
#success-alert-Toast .toast-header.bg-success {
    background-color: #198754 !important;
}

/* apps.js positions the search box's icon with position:absolute but never gives .form-custom
   (its wrapping div) a position:relative to anchor to — the icon was escaping the input box. */
.form-custom {
    position: relative;
}

/* Phone-width compact mode — apps.css/bootstrap.min.css size nearly everything (buttons, headings,
   form controls, badges, spacing utilities, card/modal padding) in rem relative to the <html>
   root, which is otherwise left at the browser default (16px) — so shrinking the root here scales
   the whole UI down proportionally for phones without needing per-component overrides. */
@media (max-width: 575.98px) {
    html {
        font-size: 13px;
    }
}

/* DataTables toolbar on phone-width screens — the length select + injected Impor/Tambah buttons
   share the header row's right-hand column (apps.js's own col-sm-12 col-md-6 split, full-width
   below 576px), stacked as a 2-col grid instead of overflowing sideways. */
@media (max-width: 575.98px) {
    .dataTables_length {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        text-align: center !important;
    }

    .dataTables_length .btn {
        margin: 0 !important;
        width: 100%;
    }

    .dataTables_length .select2-container {
        grid-column: 1 / -1;
        margin-inline-start: 0 !important;
    }

    .datatable-footer {
        row-gap: 0.5rem;
    }
}

/* apps.css centers .dataTables_filter below 767.98px, which just leaves the search box's
   default fixed (small) width floating in the middle of the row — looks like a stray pill rather
   than a usable field. Stretch it full-width and left-align instead, matching every other
   full-width field on the page (e.g. the advance-search date inputs above it). */
@media (max-width: 767.98px) {
    .dataTables_filter {
        text-align: start !important;
    }

    .dataTables_filter label {
        display: block;
        width: 100%;
    }

    .dataTables_filter input {
        width: 100% !important;
    }

    /* Gap from the search box above, and stretch the length <select> full-width too — it stays a
       small intrinsic-width box otherwise (apps.css hardcodes width:auto on it), whether or not
       apps.js's drawCallback got around to select2-izing it yet. */
    .dataTables_length {
        margin-block-start: 0.75rem;
        text-align: start !important;
    }

    .dataTables_length select {
        width: 100% !important;
        margin: 0 !important;
    }

    .dataTables_length .select2-container {
        width: 100% !important;
    }
}

.table th {
    background-color: rgb(var(--primary-rgb));
    color: #fff;
}

.two-column-layout {
    display: flex;
    gap: 2rem;
}

.two-column-layout>div {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.description-textarea {
    resize: vertical;
    min-height: 38px;
    height: 38px;
}

.form-control,
.form-select,
.input-group-text {
    min-height: 38px;
}

textarea.form-control {
    min-height: calc(1.5em + 0.75rem + 2px);
}

.sticky-col-left {
    position: sticky;
    left: 0;
    z-index: 10;
    background-color: #7987a1 !important;
}

.sticky-col-right {
    position: sticky;
    right: 0;
    z-index: 10;
    background-color: #7987a1 !important;
}
/* Suppress native browser password toggle */
input[type='password']::-ms-reveal,
input[type='password']::-ms-clear { display: none; }
input[type='password']::-webkit-credentials-auto-fill-button { display: none !important; }

/* Toast body: solid white, no bleed-through from the colored-toast's translucent background */
.toast.colored-toast .toast-body {
    background-color: #fff;
    opacity: 1;
}

/* Read-only value display (used by _FormLabel) — same look as ".form-description .form-control",
   but self-contained so it doesn't depend on (or bleed into) a "form-description"-classed ancestor row. */
.form-control-underline {
    border: 0;
    height: auto;
    border-radius: 0;
    padding-left: 0;
    margin-bottom: 10px;
    background-color: transparent;
    border-bottom: thin solid hsl(273, 15%, 80%);
}

/* Sidebar: solid black — overrides the theme's menu-color switcher (dark/color/gradient/etc.),
   stays black regardless of which Menu Colors option is picked in the theme customizer */
.app-sidebar,
.app-sidebar .main-sidebar-header,
.store-switcher-bar {
    background: #212922 !important;
}

/* Sidebar: whiter/clearer menu text over the black background above */
.app-sidebar {
    --menu-prime-color: rgba(255, 255, 255, 0.87) !important;
}

/* Sidebar: main menu scrolls independently, footer menu (Panduan Penggunaan/Masukan) stays pinned below it */
.main-menu-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.main-menu-container .main-menu-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.main-menu-container .main-menu-separator {
    flex: 0 0 auto;
    margin: 0.5rem 1rem;
    opacity: 1;
    border-top: 1px solid var(--menu-border-color, rgba(255, 255, 255, 0.1));
}

.main-menu-container .main-menu-footer {
    flex: 0 0 auto;
}

.side-menu__item > .nav-submenu-caret {
    margin-inline-start: auto;
    padding-right: 0;
    font-size: 0.7rem;
    transition: transform 0.15s ease;
}

.slide.has-sub.open > a > .nav-submenu-caret {
    transform: rotate(180deg);
}

/* Icon-only collapsed sidebar modes: hide the submenu caret — no room for
   it, and the label/list next to it is hidden already in these modes. */
[data-toggled="icon-click-closed"] .nav-submenu-caret,
[data-toggled="icon-hover-closed"] .nav-submenu-caret,
[data-toggled="icon-overlay-close"]:not([data-icon-overlay="open"]) .nav-submenu-caret,
[data-toggled="icon-text-close"]:not([data-icon-text="open"]) .nav-submenu-caret,
[data-toggled="menu-click-closed"] .nav-submenu-caret,
[data-toggled="menu-hover-closed"] .nav-submenu-caret,
[data-toggled="double-menu-close"] .nav-submenu-caret,
[data-toggled="close-menu-close"] .nav-submenu-caret {
    display: none !important;
}

.store-switcher-bar {
    margin-block-start: 3.75rem;
    background: var(--menu-bg);
    border-inline-end: 1px solid var(--menu-border-color, rgba(255, 255, 255, 0.1));
}

.app-sidebar.has-store-switcher .main-sidebar {
    margin-block-start: 0;
}

/* Icon-only collapsed sidebar modes: keep the store photo/icon visible
   (like the other nav icons) but drop the name text and caret — there's
   no room for them, and nothing to switch to without expanding first. */
[data-toggled="icon-click-closed"] .store-switcher-name,
[data-toggled="icon-click-closed"] .store-switcher-caret,
[data-toggled="icon-hover-closed"] .store-switcher-name,
[data-toggled="icon-hover-closed"] .store-switcher-caret,
[data-toggled="icon-overlay-close"]:not([data-icon-overlay="open"]) .store-switcher-name,
[data-toggled="icon-overlay-close"]:not([data-icon-overlay="open"]) .store-switcher-caret,
[data-toggled="icon-text-close"]:not([data-icon-text="open"]) .store-switcher-name,
[data-toggled="icon-text-close"]:not([data-icon-text="open"]) .store-switcher-caret,
[data-toggled="menu-click-closed"] .store-switcher-name,
[data-toggled="menu-click-closed"] .store-switcher-caret,
[data-toggled="menu-hover-closed"] .store-switcher-name,
[data-toggled="menu-hover-closed"] .store-switcher-caret,
[data-toggled="double-menu-close"] .store-switcher-name,
[data-toggled="double-menu-close"] .store-switcher-caret,
[data-toggled="close-menu-close"] .store-switcher-name,
[data-toggled="close-menu-close"] .store-switcher-caret {
    display: none !important;
}

.no-sidebar .app-content {
    margin-inline-start: 0 !important;
}

.no-sidebar .sidemenu-toggle {
    display: none !important;
}

.store-switcher-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 1.25rem;
    text-decoration: none;
    cursor: pointer;
    color: var(--menu-prime-color, rgba(255, 255, 255, 0.6));
    border-block-end: 1px solid var(--menu-border-color, rgba(255, 255, 255, 0.1));
}

.store-switcher-toggle:hover,
.store-switcher-toggle:focus {
    color: var(--menu-prime-color, rgba(255, 255, 255, 0.6));
}

.store-switcher-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(13, 202, 240, 0.15);
    color: #0dcaf0;
    border: 2px solid #fff;
}

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

.store-switcher-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 600;
}

.store-switcher-caret {
    flex: 0 0 auto;
    font-size: 0.7rem;
    opacity: 0.7;
    transition: transform 0.15s ease;
}

.store-switcher-toggle[aria-expanded="true"] .store-switcher-caret {
    transform: rotate(180deg);
}

.store-switcher-list {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
    background: rgba(0, 0, 0, 0.15);
    border-block-end: 1px solid var(--menu-border-color, rgba(255, 255, 255, 0.1));
}

.store-switcher-list a,
.store-switcher-list-empty {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem 0.5rem 2.5rem;
    font-size: 0.8125rem;
    color: var(--menu-prime-color, rgba(255, 255, 255, 0.6));
    text-decoration: none;
}

.store-switcher-list a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.store-switcher-list-empty {
    opacity: 0.7;
    padding-inline-start: 1.25rem;
}

.store-card-add {
    border: 1px dashed var(--default-border, rgba(0, 0, 0, 0.15));
    cursor: pointer;
    background: transparent;
    transition: border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.store-card-add:hover {
    border-color: #0dcaf0;
    color: #0dcaf0 !important;
}

/* Settings-page section divider — same primary->secondary gradient the theme already uses
   elsewhere (apps.css' [data-menu-styles=gradient] sidebar header), reused here as a colored
   underline below a settings section's icon+title instead of a plain <hr>. */
.settings-section-divider {
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(to right, var(--primary-color) 0, rgb(var(--secondary-rgb)) 100%);
}

/* Live receipt preview on the Pengaturan (Struk) page — styled to look like a printed receipt
   (fixed narrow width, monospace, dashed section separators), not a themed card. */
.receipt-preview {
    width: 280px;
    max-width: 100%;
    background-color: #fff;
    color: #212529;
    border: 1px solid var(--default-border, #dee2e6);
    border-radius: 4px;
    padding: 1rem;
    font-family: 'Courier New', Courier, monospace;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.receipt-preview-divider {
    border-top: 1px dashed #adb5bd;
    margin: 0.5rem 0;
}

/* Kasir item grid (see project-context.md 📐 Kasir display mode) — layout is picked per-store via
   the "Tampilan" dropdown (StoreSetting.KasirDisplayId) and applied once on page load by
   OrderPembelian.js's applyKasirDisplayClass(). CSS grid (not Bootstrap's row-cols-*, which only
   goes up to 6) so an exact 10-per-row "small" size is possible. List modes reuse the same
   .kasir-item-card markup but laid out horizontally by OrderPembelian.js's renderKasirItems(). */
.kasir-items {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(6, 1fr);
}

.kasir-items.kasir-grid-small { grid-template-columns: repeat(8, 1fr); }
.kasir-items.kasir-grid-medium { grid-template-columns: repeat(6, 1fr); }
.kasir-items.kasir-grid-large { grid-template-columns: repeat(4, 1fr); }

/* 8-per-row cards are narrow — shrink the name/price/stock text so it doesn't wrap/overflow. */
.kasir-items.kasir-grid-small .kasir-item-card .card-body { padding: .4rem; }
.kasir-items.kasir-grid-small .kasir-item-card .fs-13 { font-size: .7rem !important; }
.kasir-items.kasir-grid-small .kasir-item-card .fs-11 { font-size: .625rem !important; }

/* List modes — a flat row list with a hairline divider (like <hr>) between rows instead of
   separate bordered/shadowed cards with a big gap, see renderKasirItems()'s .kasir-list-row. */
.kasir-items.kasir-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.kasir-list-row {
    position: relative;
    border-bottom: 1px solid var(--default-border, #dee2e6);
}

.kasir-list-row:last-child {
    border-bottom: none;
}

/* Toko Online QR preview — hinted as clickable (opens the enlarge/print modal). */
#toko-online-qr-wrap {
    cursor: pointer;
    transition: box-shadow .15s ease;
}

#toko-online-qr-wrap:hover {
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .35);
}

@media (max-width: 992px) {
    .kasir-items.kasir-grid-small { grid-template-columns: repeat(4, 1fr); }
    .kasir-items.kasir-grid-medium { grid-template-columns: repeat(3, 1fr); }
    .kasir-items.kasir-grid-large { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 576px) {
    .kasir-items.kasir-grid-small,
    .kasir-items.kasir-grid-medium {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* apps.css' tab-style-4 only styles .nav-tabs (the diamond-notch active indicator); this project
   also reuses the class on .nav-pills (Kasir's Item/Cart toggle, Pesanan's status filter) where
   Bootstrap otherwise renders the active pill filled but leaves inactive tabs as bare text with
   no visible boundary. Give inactive tabs a border so they read as selectable pills too. */
.tab-style-4.nav-pills .nav-link:not(.active) {
    border: 1px solid var(--default-border, rgba(0, 0, 0, 0.15));
}

/* Public Toko Online storefront (catalog + cart/checkout, see project-context.md 📐 Toko Online)
   — mobile-first: full width edge-to-edge on a phone. On a wider (desktop/web) viewport it becomes
   a centered, fixed-width card on a plain gray page background, Google-Forms style (see the
   @media rule on .public-store-shell below). Uses its own _LayoutPublicStore.cshtml, not the
   authenticated sidebar _Layout.cshtml. */
.public-store-body {
    background: var(--body-bg, #f4f6f9);
    min-height: 100vh;
}

.public-store-shell {
    width: 100%;
    min-height: 100vh;
    background: var(--custom-white, #fff);
    display: flex;
    flex-direction: column;
    /* Deliberately NOT overflow:hidden — that would put the shell between .public-hero-actions'
       sticky anchor and the viewport, and browsers then stick it relative to this (non-scrolling)
       box instead of the real page scroll, breaking it. Corner-clipping the banner on desktop is
       done on the banner itself instead (its own border-radius, below). */
}

@media (min-width: 576px) {
    .public-store-shell {
        max-width: 600px;
        margin: 2rem auto;
        min-height: calc(100vh - 4rem);
        border-radius: .75rem;
        box-shadow: 0 2px 16px rgba(0, 0, 0, .1);
    }

    .public-hero-banner {
        border-top-left-radius: .75rem;
        border-top-right-radius: .75rem;
    }
}

/* Sits at the very top of the shell (0-height, position:sticky) so .public-hero-actions — an
   absolutely-positioned child anchored to *this* box, not the viewport — stays pinned to this
   card's own top-right corner while scrolling, instead of drifting to the browser window's corner
   once the shell is centered/narrower than the viewport on desktop. */
.public-sticky-actions-anchor {
    position: sticky;
    top: 0;
    height: 0;
    z-index: 50;
}

/* Hero banner — StoreSetting.BannerFileId, uploaded from Pengaturan's Toko Online card. Brown
   background-color is the deliberate fallback when no banner has been uploaded yet, not a loading
   state. */
.public-hero-banner {
    position: relative;
    width: 100%;
    aspect-ratio: 2.2 / 1;
    flex: 0 0 auto;
    background-color: #6f4e37;
    background-size: cover;
    background-position: center;
}

.public-hero-actions {
    position: absolute;
    top: .75rem;
    right: .75rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.public-icon-btn {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid var(--default-border, #dee2e6);
    background: var(--custom-white, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    font-size: 1rem;
    cursor: pointer;
}

/* Overlaid on top of the banner image — needs to stay legible against any photo. */
.public-icon-btn-overlay {
    border-color: transparent;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

.public-icon-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--bs-danger, #dc3545);
    color: #fff;
    font-size: .65rem;
    line-height: 18px;
    text-align: center;
}

/* Pulled up over the banner's bottom edge, like a typical food-delivery-app storefront header. */
.public-store-card {
    position: relative;
    z-index: 2;
    margin: -1.5rem 1rem 0;
    background: var(--custom-white, #fff);
    border-radius: .75rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
    padding: .85rem 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
}

.public-store-content {
    flex: 1 1 auto;
    padding: 1rem;
}

/* Plain header for public pages that don't have a hero banner (e.g. Keranjang) — back button +
   title/subtitle, same visual language (.public-icon-btn) as the catalog page's overlay icons. */
.public-page-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem;
    border-bottom: 1px solid var(--default-border, #dee2e6);
}

.public-store-search {
    margin: .75rem 1rem 0;
}

.public-category-chips {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding-bottom: .25rem;
}

.public-category-chip {
    border: 1px solid var(--default-border, #dee2e6);
    border-radius: 999px;
    padding: .3rem .9rem;
    font-size: .8rem;
    white-space: nowrap;
    cursor: pointer;
    background: var(--custom-white, #fff);
}

.public-category-chip.active {
    background: rgb(var(--primary-rgb));
    border-color: rgb(var(--primary-rgb));
    color: #fff;
}

/* Item list — one row per item (photo left, name/description/price middle, add/qty control
   right), replacing the earlier grid-of-cards layout. */
.public-item-list {
    display: flex;
    flex-direction: column;
}

.public-item-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--default-border, #dee2e6);
}

.public-item-row:last-child {
    border-bottom: none;
}

.public-item-row-photo {
    width: 72px;
    height: 72px;
    flex: 0 0 auto;
    border-radius: .5rem;
    overflow: hidden;
    background: var(--light, #f4f6f9);
}

.public-item-row-body {
    flex: 1 1 auto;
    min-width: 0;
}

.public-item-row-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.public-item-row-add {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: none;
    background: var(--bs-success, #198754);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.public-item-row-add:disabled {
    background: var(--default-border, #dee2e6);
    color: var(--text-muted, #8c9097);
    cursor: not-allowed;
}

.public-item-row-qty {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.public-item-row-qty button {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid var(--default-border, #dee2e6);
    background: var(--custom-white, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.public-payment-option {
    flex: 1;
    border: 1px solid var(--default-border, #dee2e6);
    border-radius: .5rem;
    padding: .75rem;
    text-align: center;
    cursor: pointer;
    position: relative;
}

.public-payment-option.active {
    border-color: rgb(var(--primary-rgb));
    background: rgba(var(--primary-rgb), .06);
}

.public-payment-option.disabled {
    cursor: not-allowed;
    opacity: .55;
}

.public-payment-option .badge-soon {
    position: absolute;
    top: -.5rem;
    right: -.5rem;
}

/* Akses "Menu yang Bisa Diakses" — icon+label tiles instead of plain checkbox rows, so the granted
   menus read at a glance. Checkbox itself stays hidden via Bootstrap's own .btn-check (keeps native
   keyboard/focus/label-click behavior); .akses-menu-tile is the visible clickable surface, styled
   off the sibling :checked state — same active/hover pattern as .public-payment-option above. */
.akses-menu-tile {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    margin: 0;
    padding: .65rem .85rem;
    border: 1.5px solid var(--default-border, #dee2e6);
    border-radius: .5rem;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.akses-menu-tile i {
    font-size: 1.05rem;
    color: #7b8191;
    flex-shrink: 0;
    transition: color .15s ease;
}

.akses-menu-tile span {
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.3;
}

.akses-menu-tile:hover {
    border-color: rgb(var(--primary-rgb));
    background: rgba(var(--primary-rgb), .04);
}

.akses-menu-checkbox:checked + .akses-menu-tile {
    border-color: rgb(var(--primary-rgb));
    background: rgba(var(--primary-rgb), .08);
    color: rgb(var(--primary-rgb));
}

.akses-menu-checkbox:checked + .akses-menu-tile i {
    color: rgb(var(--primary-rgb));
}

.akses-menu-checkbox:focus-visible + .akses-menu-tile {
    outline: 2px solid rgb(var(--primary-rgb));
    outline-offset: 2px;
}