/* Scrollbar ringan untuk katalog, admin, dialog, dan halaman mandiri. */
:root{--soft-scroll-thumb:color-mix(in srgb,var(--theme-font,#475569) 26%,transparent);--soft-scroll-hover:color-mix(in srgb,var(--theme-font,#475569) 42%,transparent)}
*{scrollbar-width:thin;scrollbar-color:var(--soft-scroll-thumb) transparent}
::-webkit-scrollbar{width:8px;height:8px;background:transparent}
::-webkit-scrollbar-track{background:transparent;margin:9px;border-radius:20px}
::-webkit-scrollbar-thumb{background:var(--soft-scroll-thumb);border:2px solid transparent;background-clip:padding-box;border-radius:20px;min-height:36px}
::-webkit-scrollbar-thumb:hover{background-color:var(--soft-scroll-hover)}
::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-button{display:none;width:0;height:0}
:where(.table-wrap,.product-picker-results,.store-promo-items){border-radius:10px;clip-path:inset(0 round 10px)}
dialog:not(.image-zoom-dialog):not(.store-promo-dialog){border-radius:18px!important;clip-path:inset(0 round 18px)}
/* Bingkai promo tetap membulat; hanya konten di dalamnya yang digulir. */
.store-promo-dialog{width:min(560px,calc(100vw - 28px))!important;max-height:min(90dvh,760px)!important;overflow:hidden!important;border-radius:20px!important;padding:0!important}
.store-promo-dialog[open]{display:flex;flex-direction:column}
.store-promo-head{flex:none;padding:18px 20px!important;gap:14px!important}
.store-promo-head h2{font-size:clamp(20px,2vw,25px)!important;line-height:1.3;margin:10px 0 0!important}
.store-promo-head p{font-size:12px!important;line-height:1.5;margin-top:8px!important;max-height:72px;overflow:auto}
.store-promo-head p:empty{display:none}
.store-promo-head>button{width:36px!important;height:36px!important;border-radius:10px!important;font-size:24px!important;position:static!important}
.store-promo-items,.store-promo-items:has(.store-main-promotion){flex:1;min-height:0;overflow:auto;padding:16px 20px!important;gap:12px!important;overscroll-behavior:contain;scrollbar-gutter:stable}
.store-main-promotion{gap:12px!important}
.store-main-promotion>img{width:100%;height:auto;max-height:min(36dvh,300px)!important;object-fit:contain;border-radius:12px!important;padding:4px!important;box-shadow:none!important}
.store-main-promo-meta{gap:8px!important}.store-main-promo-meta>small{padding:5px 8px!important;font-size:10px!important}
#mainPromotionCatalogLink{padding:12px 14px!important;border-radius:11px!important;gap:12px!important;box-shadow:none!important}
#mainPromotionCatalogLink strong{font-size:14px!important}#mainPromotionCatalogLink small{font-size:11px!important}
.store-promo-footer{flex:none;padding:12px 20px 16px!important;border-top:1px solid #e7ddc944;background:#fffdf8}
#continueStoreShopping{min-height:40px!important;font-size:12px!important;border-radius:10px!important}
@media(max-width:600px){.store-promo-head{padding:16px!important}.store-promo-items,.store-promo-items:has(.store-main-promotion){padding:14px 16px!important}.store-promo-footer{padding:10px 16px 14px!important}.store-promo-items:not(:has(.store-main-promotion)){grid-template-columns:1fr}.store-promo-product>.product-photo{width:64px;height:74px}}
@media(forced-colors:active){*{scrollbar-color:auto}}
@media print{*{clip-path:none!important}}
/* Icon search fields use one outer surface, never a second input box. */
:is(.search-field,.lookup-search,.mobile-search-field){align-items:center;min-width:0;overflow:hidden}
:is(.search-field,.lookup-search,.mobile-search-field)>input,
:is(#adminView,dialog.detail-dialog,dialog.checkout-pos-dialog) :is(.search-field,.lookup-search,.mobile-search-field)>input{flex:1;min-width:0;width:100%;box-sizing:border-box;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;outline:none!important;outline-offset:0!important;padding:10px 8px!important;align-self:stretch}
:is(.search-field,.lookup-search,.mobile-search-field):focus-within{border-color:var(--theme-button,#315f9f)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--theme-button,#315f9f) 15%,transparent)}
:is(.search-field,.lookup-search)>span{flex:none;line-height:1;text-align:center}
.lookup-search{min-height:44px;grid-template-columns:28px minmax(0,1fr);gap:6px}
.lookup-search>input{height:44px;min-height:44px}
:root :is(#adminView,dialog.detail-dialog,dialog.checkout-pos-dialog) :is(.search-field,.lookup-search,.mobile-search-field)>input{border-radius:0!important;outline:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
/* Transaction and self-attendance feedback share the same messagebox typography. */
:is(#checkoutFeedbackDialog,#selfResultDialog){width:min(430px,calc(100vw - 32px));padding:28px;border:1px solid color-mix(in srgb,var(--theme-font,#26364b) 12%,transparent);border-radius:20px;background:var(--theme-background,#fff);color:var(--theme-font,#26364b);text-align:left;box-shadow:0 24px 80px #18243824,0 3px 12px #1824380a}
:is(#checkoutFeedbackDialog,#selfResultDialog)::backdrop{background:#18243852;backdrop-filter:blur(5px)}
:is(#checkoutFeedbackDialog,#selfResultDialog) :is(h2,h3){font-size:19px;line-height:1.4;font-weight:650;letter-spacing:-.025em;margin:16px 0 10px}
:is(#checkoutFeedbackDialog,#selfResultDialog)>p{font-size:13px;line-height:1.8}
:is(#checkoutFeedbackDialog,#selfResultDialog) :is(.checkout-feedback-symbol,.self-result-icon){width:46px;height:46px;border-radius:14px;margin:0;font-size:24px;font-weight:600}
:is(#checkoutFeedbackDialog,#selfResultDialog) button{min-height:42px;padding:10px 18px;border-radius:10px;font-size:12px;font-weight:600}
@media(max-width:480px){:is(#checkoutFeedbackDialog,#selfResultDialog){padding:24px}}