/* Navigasi & header: lihat app-shell.css. File ini = dialog/menu sheet & checkout. */
/* Native top layer prevents header, chat bubble or transformed parents covering dialogs. */
html body dialog.cm-screen-dialog,html body dialog#confirmModal.cm-screen-dialog {
  position:fixed!important;inset:auto 0 auto 0!important;
  top:calc(var(--cm-vtop,0px) + var(--cm-vheight,100dvh) / 2)!important;
  transform:translateY(-50%)!important;margin:0 auto!important;
  width:calc(100% - 32px)!important;max-width:660px!important;height:auto!important;
  max-height:calc(var(--cm-vheight,100dvh) - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))!important;
  padding:0;overflow:hidden!important;overscroll-behavior:contain;
  background:var(--cm-white)!important;color:var(--cm-ink)!important;
  --cm-fg:var(--cm-ink)!important;--cm-edge:var(--cm-ink)!important;
  border:3px solid var(--cm-ink)!important;border-radius:28px!important;
  box-shadow:5px 6px 0 var(--cm-yellow),8px 9px 0 var(--cm-ink)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
html body dialog.cm-screen-dialog:not([open]) {display:none!important;}
html body dialog.cm-screen-dialog[open] {display:flex!important;flex-direction:column;visibility:visible;pointer-events:auto;}
dialog.cm-screen-dialog::backdrop {background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;}
html body .comic-menu-handle {width:42px;height:5px;border-radius:99px;background:var(--cm-ink);margin:10px auto 0;flex-shrink:0;}
html body .comic-menu-header {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 20px;flex-shrink:0;}
html body .comic-menu-header h3 {font-size:28px;margin:0;}
html body .comic-menu-header p {font-size:12px;margin:4px 0 0;}
html body .comic-menu-close,html body .pc-close {display:grid;place-items:center;flex-shrink:0;width:40px;height:40px;border-radius:50%!important;background:var(--cm-white)!important;--cm-fg:var(--cm-ink)!important;}
html body .comic-menu-search {position:relative;padding:0 20px 16px;flex-shrink:0;border-bottom:2px dashed var(--cm-ink);}
html body .comic-menu-search > i {position:absolute;left:35px;top:16px;font-size:14px;}
html body #comicMenuSearch {width:100%;height:46px;padding:10px 14px 10px 38px;border-radius:999px!important;font-size:14px;}
html body .comic-menu-body {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:12px;padding:16px 18px 24px;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
html body .comic-menu-section-title {grid-column:1/-1;font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin:10px 0 0;padding-left:10px;border-left:5px solid var(--cm-yellow);}
html body .comic-menu-item {display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;margin:0;padding:14px;border:2px solid var(--cm-ink);border-radius:22px!important;background:var(--cm-white)!important;--cm-fg:var(--cm-ink)!important;box-shadow:3px 3px 0 var(--cm-ink);text-decoration:none;}
html body .comic-menu-item[aria-current=page] {background:var(--cm-yellow)!important;}
html body .comic-menu-icon {display:grid;place-items:center;width:44px;height:44px;border:2px solid var(--cm-ink);border-radius:50%!important;background:var(--cm-yellow)!important;--cm-fg:var(--cm-ink)!important;flex-shrink:0;box-shadow:2px 2px 0 var(--cm-ink);}
/* Inherit the badge's paired foreground, including SVG paths/lines.
   Legacy inline palettes can paint a dark badge with a light foreground. */
html body .comic-menu-icon * {--cm-fg:inherit!important;}
html body .comic-menu-item:nth-of-type(3n) .comic-menu-icon {background:var(--cm-green)!important;}
html body .comic-menu-icon svg {width:20px;height:20px;}
html body .comic-menu-item-text {display:flex;flex-direction:column;gap:4px;min-width:0;}
html body .comic-menu-item-text strong {font-size:14px;line-height:1.2;overflow-wrap:anywhere;}
html body .comic-menu-item-text small {font-size:11px;line-height:1.35;}
html body .comic-menu-item > .fa-chevron-right {display:none;}
html body .comic-menu-empty {grid-column:1/-1;text-align:center;padding:24px 8px;font-size:14px;}
html body .comic-menu-body [hidden] {display:none!important;}
html body dialog#confirmModal.premium-checkout {max-width:480px!important;}
html body .pc-header {display:flex;align-items:center;gap:11px;padding:18px;border-bottom:3px solid var(--cm-ink);background:var(--cm-yellow)!important;flex-shrink:0;}
html body .pc-header > div {flex:1;min-width:0;}
html body .pc-heading-icon {display:grid;place-items:center;width:44px;height:44px;border:2px solid var(--cm-ink);border-radius:50%;background:var(--cm-white);box-shadow:2px 2px 0 var(--cm-ink);font-size:19px;flex-shrink:0;transform:rotate(-8deg);}
html body .pc-eyebrow {font-size:10px;font-weight:700;letter-spacing:.1em;}
html body .pc-header h2 {font-size:clamp(19px,5.5vw,26px);margin:2px 0 0;line-height:1.1;}
html body .pc-scroll {padding:18px;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scroll-padding:16px;}
html body .pc-description {font-size:13px;margin:0 0 14px;}
html body .pc-summary {border:2px solid var(--cm-ink);border-radius:20px;padding:16px;background:var(--cm-white);}
html body #cfName {font-family:'Comic Neue',Arial,sans-serif!important;font-size:17px;font-weight:700!important;margin:6px 0 12px;overflow-wrap:anywhere;letter-spacing:0;}
html body .pc-row {display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;}
html body .pc-quantity {display:flex;align-items:center;gap:14px;}
html body .pc-quantity button {width:40px;height:40px;border-radius:50%!important;background:var(--cm-white);font-size:20px;}
html body .pc-quantity output {min-width:20px;text-align:center;}
html body .pc-total {padding-top:14px;margin-top:14px;border-top:2px dashed var(--cm-ink);}
html body .pc-total strong {font-size:18px;white-space:nowrap;}
html body .premium-checkout .vc-checkout {margin:16px 0 0;padding:14px;border-radius:20px;--cm-fg:var(--cm-ink)!important;}
html body .premium-checkout .vc-input-row {display:flex;flex-wrap:wrap;}
html body .premium-checkout .vc-input-row input {flex:1;min-width:110px;width:0;font-size:16px;border-radius:14px!important;}
html body .premium-checkout .vc-input-row button {border-radius:14px!important;min-height:44px;}
html body .premium-checkout .vc-recommend {max-height:none;}
html body .pc-footer {padding:12px 18px 18px;margin:0;border-top:2px solid var(--cm-ink);background:var(--cm-white);flex-shrink:0;}
html body .pc-footer p {margin:0 0 10px;font-size:11px;text-align:center;}
html body .pc-actions {display:flex;gap:12px;}
html body .pc-actions button {min-height:46px;border-radius:999px!important;font-size:14px;}
html body .pc-cancel {flex:1;background:var(--cm-white)!important;}
html body .pc-buy {flex:2;background:var(--cm-ink)!important;--cm-fg:var(--cm-white)!important;--cm-edge:var(--cm-ink)!important;}
html body .pc-buy * {--cm-fg:var(--cm-white)!important;}
html body .pc-error {padding:12px;margin-top:14px;border:2px dashed var(--cm-ink);border-radius:12px;font-size:13px;}
@media(min-width:640px){html body .comic-menu-body{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:360px){html body .pc-heading-icon{display:none;}html body .pc-header,html body .pc-scroll{padding:14px;}html body .comic-menu-body{padding:14px;gap:10px;}html body .comic-menu-item{padding:12px;}}
@media(max-height:480px){html body .pc-header{padding:10px 14px;}html body .pc-heading-icon{display:none;}html body .pc-footer{padding:8px 14px 12px;}html body .pc-footer p{display:none;}html body .comic-menu-header{padding:8px 16px;}html body .comic-menu-search{padding-bottom:10px;}}