/* JomKad editor UI — 2026-10-12. Scoped to the editor only. */
#orderForm *, #editorToolbar *, #imageToolbar * { box-sizing: border-box; }
#orderForm .content-wrapper { flex: 1 1 0; min-height: 0; min-width: 0; overflow-x: hidden; overflow-y: auto; }
#orderForm .bar { position: relative; flex: 0 0 auto; }
#orderForm input, #orderForm select, #orderForm textarea { min-width: 0; max-width: 100%; }
.jk-sheet-header { display: none; }
.jk-progress-wrap { min-width: 0; text-align: center; }
.jk-step-dots { display: flex; gap: 4px; justify-content: center; margin-top: 7px; }
.jk-step-dots i { width: 18px; height: 5px; border-radius: 5px; background: #334155; }
.jk-step-dots i.reached { background: #facc15; }
.jk-step-dots i.current { box-shadow: 0 0 0 2px #eab30833; }
#tab-pengantin .jk-field-card { position: relative; display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 8px 12px; align-items: center; padding: 14px 12px; border: 1px solid #253349; border-radius: 14px; background: #101b2b; margin-bottom: 12px !important; }
.jk-field-icon { grid-column: 1; grid-row: 1 / span 3; color: #a8b6cd; display: grid; place-items: center; }
.jk-field-icon svg { width: 24px; height: 24px; }
#tab-pengantin .jk-field-card > label { grid-column: 2; font-size: 13px; color: #adbad0; }
#tab-pengantin .jk-field-card > input { grid-column: 2; grid-row: 2; padding-right: 42px; margin: 0; width: 100%; }
#tab-pengantin .jk-field-card > .lock-msg { grid-column: 2; }
.jk-field-clear { grid-column: 2; grid-row: 2; justify-self: end; align-self: stretch; z-index: 1; width: 38px; min-height: 40px; border: 0; color: #a9b8cd; background: transparent; border-radius: 8px; cursor: pointer; font-size: 20px; }
.jk-field-clear:disabled { opacity: .25; cursor: default; }
#jkSaveStatus { opacity: 1; transition: opacity .2s; max-width: min(420px,calc(100vw - 32px)); text-align: center; line-height: 1.4; box-shadow: 0 8px 24px #0004; }
#jkSaveStatus.is-hiding { opacity: 0; }
#editorToolbar.jk-text-panel { padding: 0; overflow: visible; width: 400px; max-width: calc(100vw - 24px); gap: 0; flex-direction: column; align-items: stretch; background: #142034; border-radius: 18px; box-shadow: 0 12px 40px #0006; color: #f1f5f9; }
.jk-text-head { padding: 10px 14px 6px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.jk-text-head strong { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.jk-text-close { width: 38px; height: 38px; border: 0; border-radius: 50%; background: #223148; color: #f1f5f9; cursor: pointer; font-size: 22px; }
.jk-text-body { width: 100%; min-width: 0; padding: 8px 14px 14px; overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
.jk-text-main { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) 104px 102px; gap: 6px; align-items: center; }
#editorToolbar .tool-font { width: 100%; min-width: 0; height: 42px; max-width: none; padding: 6px; font-size: 13px; border-radius: 9px; }
.jk-size-control, .jk-text-styles { display: flex; align-items: center; border: 1px solid #334155; border-radius: 9px; height: 42px; overflow: hidden; }
#editorToolbar .jk-size-control .tool-btn { width: 30px; min-width: 30px; padding: 0; height: 40px; border: 0; border-radius: 0; background: transparent; font-size: 20px; justify-content: center; }
#editorToolbar #jkTextSize { width: 42px; min-width: 0; padding: 0; height: 40px; text-align: center; border: 0; border-radius: 0; appearance: textfield; font-size: 14px; background: transparent; }
#jkTextSize::-webkit-inner-spin-button, #jkTextSize::-webkit-outer-spin-button { appearance: none; margin: 0; }
.jk-text-styles button { width: 34px; height: 40px; padding: 0; border: 0; border-radius: 0; background: transparent; color: #e2e8f0; font-size: 19px; cursor: pointer; }
.jk-text-styles button[aria-pressed="true"] { color: #facc15; background: #eab30822; }
.jk-text-options { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 54px; padding-top: 10px; }
.jk-text-options[hidden] { display: none !important; }
#editorToolbar .jk-text-options button { min-height: 38px; padding: 7px 10px; background: #223148; border: 1px solid #3a4a64; border-radius: 9px; color: #e2e8f0; cursor: pointer; font-size: 12px; display: inline-flex; align-items: center; gap: 5px; }
#editorToolbar .jk-text-options .jk-color-swatch { padding: 0; min-height: 30px; width: 30px; height: 30px; border: 2px solid #ffffff55; border-radius: 50%; background: var(--swatch); }
#editorToolbar .jk-text-options .jk-color-swatch[aria-pressed="true"] { outline: 2px solid #facc15; outline-offset: 2px; }
#editorToolbar .tool-color { width: 34px; min-width: 34px; height: 34px; padding: 0; border: 1px solid #64748b; border-radius: 50%; overflow: hidden; cursor: pointer; }
.jk-text-options label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #cbd5e1; }
#editorToolbar #jkLineHeight { width: 84px; padding: 7px; font-size: 14px; }
.jk-text-tabs { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 3px; border-top: 1px solid #2c3a50; margin-top: 10px; padding-top: 8px; }
.jk-text-tabs button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 55px; border: 0; border-radius: 9px; background: transparent; color: #aebcd1; cursor: pointer; padding: 5px 1px; font-size: 9px; }
.jk-text-tabs svg { width: 21px; height: 21px; }
.jk-text-tabs button[aria-selected="true"] { color: #f472b6; background: #db277714; }
.jk-text-quick { display: flex; justify-content: center; gap: 4px; padding: 8px 12px; border-top: 1px solid #334155; }
#editorToolbar .jk-text-quick .tool-btn { min-width: 42px; min-height: 36px; justify-content: center; border-radius: 8px; border: 0; background: #223148 !important; color: #e2e8f0; font-size: 18px; }
#editorToolbar .jk-text-quick #txtDelete { color: #fb7185; }
#editorToolbar svg { flex-shrink: 0; }
#orderForm button:focus-visible, #editorToolbar button:focus-visible { outline: 2px solid #facc15; outline-offset: 2px; }
@media(max-width:999px) {
  #orderForm.panel { display: flex !important; flex-direction: column !important; height: min(74dvh,calc(var(--jk-viewport-height,100dvh) - 86px)) !important; max-height: calc(var(--jk-viewport-height,100dvh) - 86px) !important; min-height: 150px; bottom: var(--jk-keyboard-offset,0px) !important; z-index: 10040 !important; overflow: hidden !important; isolation: isolate; }
  #orderForm.panel::before { display: none; }
  #orderForm .jk-sheet-header { position: relative; display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-start; gap: 5px; padding: 30px 66px 14px 20px; background: #0b1422; border-bottom: 1px solid #243146; touch-action: none; }
  .jk-sheet-grip { position: absolute; top: 9px; left: calc(50% - 24px); width: 48px; height: 5px; border-radius: 8px; background: #64748b; }
  .jk-sheet-title { margin: 0; font-size: 19px; line-height: 1.3; color: #f8fafc; }
  .jk-sheet-subtitle { margin: 0; font-size: 12px; line-height: 1.45; color: #9aabc3; }
  #orderForm .mobile-sheet-close, body.setup-guided #orderForm .mobile-sheet-close { display: flex !important; position: absolute !important; top: 23px !important; right: 14px !important; width: 42px !important; height: 42px !important; border-radius: 50% !important; background: #1d2a3e !important; color: #fb7185 !important; font-size: 23px !important; box-shadow: none !important; z-index: 2 !important; }
  #orderForm .content-wrapper { height: auto !important; flex: 1 1 0 !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #52627b transparent; scroll-padding-bottom: 24px; }
  #orderForm .content-wrapper::-webkit-scrollbar { width: 5px; }
  #orderForm .content-wrapper::-webkit-scrollbar-thumb { background: #52627b; border-radius: 8px; }
  #orderForm .content { padding: 16px 18px 28px !important; }
  #orderForm .content > b:first-child { display: none !important; }
  #orderForm .bar { position: relative !important; inset: auto !important; flex: 0 0 auto !important; width: 100%; min-height: 78px; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)) !important; z-index: 2; gap: 0; }
  #orderForm .setup-nav { grid-template-columns: minmax(76px,1fr) minmax(108px,1.1fr) minmax(90px,1fr); gap: 7px; }
  #orderForm .setup-nav .btn { min-height: 46px; font-size: 12px; padding: 9px 10px; border-radius: 12px; width: 100%; }
  #orderForm .setup-progress { display: block; white-space: normal; font-size: 10px; line-height: 1.3; }
  #orderForm input, #orderForm select, #orderForm textarea { font-size: 16px; }
  #orderForm .row.cols-2 { grid-template-columns: 1fr; }
  #orderForm .repeater .item { grid-template-columns: 95px minmax(0,1fr) auto; gap: 5px; }
  #tabs.sidebar { left: 6px !important; right: 6px !important; top: max(6px,env(safe-area-inset-top)) !important; gap: 2px !important; padding: 5px 3px !important; }
  #tabs .tab { flex: 1 0 0 !important; min-width: 0 !important; width: auto !important; }
  #tabs .tab span { font-size: clamp(8px,2.35vw,11px) !important; }
  #tabs .tab svg { width: 21px !important; height: 21px !important; }
  #tabs .tab.step-complete::after { width: 7px; height: 7px; content: ''; right: 5px; top: 3px; }
  /* Keep a generous touch target, with the visible track inset from the edge. */
  #scrollRail { z-index: 900 !important; right: max(2px,env(safe-area-inset-right)) !important; width: 44px !important; background: transparent; backdrop-filter: none; }
  #scrollRail::before { content: ''; position: absolute; inset: 0 16px; border-radius: 999px; background: #0002; pointer-events: none; }
  #scrollThumb { width: 44px; background: transparent; box-shadow: none; touch-action: none; }
  #scrollThumb::after { content: ''; position: absolute; inset: 0 16px; border-radius: 999px; background: var(--accent,#eab308); opacity: .58; box-shadow: 0 3px 8px #0002; pointer-events: none; }
  body.jk-form-open #scrollRail, body.jk-text-open #scrollRail { visibility: hidden !important; pointer-events: none !important; }
  body.jk-form-open #masterToolbar, body.jk-text-open #masterToolbar { visibility: hidden !important; pointer-events: none !important; }
  #masterToolbar { max-height: calc(100dvh - 135px); overflow-y: auto; scrollbar-width: none; }
  #masterToolbar::-webkit-scrollbar { display: none; }
  .jk-editor-tools { display: flex; flex-wrap: nowrap; position: fixed !important; left: 10px !important; top: 80px !important; width: auto !important; max-width: calc(100vw - 178px) !important; padding: 4px; gap: 3px; z-index: 1000; border-radius: 12px; transform: none !important; background: #0b1220bd; }
  .jk-editor-tools button { padding: 5px; font-size: 0; min-width: 32px; min-height: 32px; }
  .jk-editor-tools button svg { width: 18px; height: 18px; }
  .jk-editor-tools > [data-jk="align"], .jk-editor-tools > [data-jk="lock"], .jk-editor-tools > select { display: none; }
  .jk-layer-list button { font-size: 12px; }
  .jk-layer-list { left: 0; right: auto; max-height: min(50dvh,320px); max-width: calc(100vw - 24px); }
  .jk-editor-tools ~ #preview { margin-top: 0; }
  #jkSaveStatus { bottom: auto !important; top: calc(max(6px,env(safe-area-inset-top)) + 74px); padding: 8px 12px; font-size: 11px; }
  #editorToolbar.jk-text-panel { position: fixed !important; inset: auto 0 var(--jk-keyboard-offset,0px) !important; transform: none !important; width: 100% !important; max-width: 100% !important; max-height: min(55dvh,calc(var(--jk-viewport-height,100dvh) - 88px)); z-index: 10045 !important; border-radius: 22px 22px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
  #editorToolbar.jk-text-panel::after { display: none; }
  #editorToolbar .jk-text-head { position: relative; padding-top: 17px; flex: 0 0 auto; touch-action: none; }
  #editorToolbar .jk-text-head::before { content: ''; position: absolute; left: calc(50% - 21px); width: 42px; height: 4px; border-radius: 8px; top: 7px; background: #64748b; }
  #editorToolbar .jk-text-body { padding: 4px 12px 10px; }
  #editorToolbar .jk-text-quick { position: fixed; top: var(--jk-quick-top,120px); left: var(--jk-quick-left,50%); transform: translateX(-50%); background: #fff; color: #111827; border: 1px solid #e2e8f0; border-radius: 999px; padding: 5px 8px; box-shadow: 0 6px 20px #0004; gap: 2px; }
  #editorToolbar .jk-text-quick .tool-btn { background: transparent !important; color: #111827; min-width: 36px; min-height: 32px; }
  #editorToolbar .jk-text-quick[data-visible="false"] { visibility: hidden; }
  #imageToolbar, #bgToolbar { z-index: 10044; }
  body.jk-form-open #imageToolbar, body.jk-form-open #bgToolbar { display: none !important; }
  @media(max-height:560px) { #orderForm .jk-sheet-header { padding-top: 20px; padding-bottom: 8px; } .jk-sheet-subtitle { display: none; } #orderForm .bar { min-height: 60px; padding-top: 6px !important; padding-bottom: 6px !important; } }
}
@media(prefers-reduced-motion:reduce) { #orderForm.panel, #jkSaveStatus { transition: none !important; } }

#editorToolbar .jk-text-options button[aria-pressed="true"]:not(.jk-color-swatch) { color: #facc15; border-color: #eab308; background: #eab30822; }
#editorToolbar .jk-control-note { margin: 0; flex-basis: 100%; color: #aebcd1; font-size: 11px; line-height: 1.4; }

/* Compact text controls: keep the card and the selected text clear. */
#editorToolbar.jk-text-panel { position: fixed !important; top: var(--jk-panel-top,100px) !important; left: var(--jk-panel-left,12px) !important; right: auto !important; bottom: auto !important; transform: none !important; width: 344px; border-radius: 14px; max-height: calc(var(--jk-viewport-height,100dvh) - 100px); z-index: 10045; flex-wrap: nowrap; }
#editorToolbar.jk-text-panel::after { display: none; }
#editorToolbar .jk-text-head { padding: 6px 8px 4px; gap: 6px; flex: 0 0 auto; }
#editorToolbar .jk-text-head strong { margin-right: auto; font-size: 12px; gap: 5px; }
#editorToolbar .jk-text-head strong svg { width: 16px; height: 16px; }
#editorToolbar .jk-text-close { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; }
#editorToolbar .jk-text-body { padding: 4px 10px 8px; flex: 1 1 auto; }
#editorToolbar .jk-text-main { grid-template-columns: minmax(0,1fr) 94px 90px; gap: 5px; }
#editorToolbar .tool-font { height: 36px; font-size: 12px; padding: 4px; }
#editorToolbar .jk-size-control, #editorToolbar .jk-text-styles { height: 36px; }
#editorToolbar .jk-size-control .tool-btn { width: 28px; min-width: 28px; height: 34px; font-size: 18px; }
#editorToolbar #jkTextSize { width: 36px; height: 34px; font-size: 13px; }
#editorToolbar .jk-text-styles button { width: 30px; height: 34px; font-size: 17px; }
#editorToolbar .jk-text-options { min-height: 40px; padding-top: 7px; gap: 6px; }
#editorToolbar .jk-text-options button { min-height: 32px; padding: 5px 8px; }
#editorToolbar .jk-text-options .jk-color-swatch { min-height: 28px; width: 28px; height: 28px; padding: 0; }
#editorToolbar .tool-color { width: 30px; min-width: 30px; height: 30px; }
#editorToolbar .jk-text-tabs { margin-top: 7px; padding-top: 5px; gap: 2px; }
#editorToolbar .jk-text-tabs button { min-height: 43px; padding: 3px 0; gap: 3px; font-size: 9px; }
#editorToolbar .jk-text-tabs svg { width: 18px; height: 18px; }
#editorToolbar .jk-text-quick { position: static; transform: none; background: transparent; border: 0; border-radius: 0; padding: 0; gap: 2px; box-shadow: none; visibility: visible; }
#editorToolbar .jk-text-quick .tool-btn { min-width: 32px; width: 32px; min-height: 32px; height: 32px; padding: 0; background: #223148 !important; color: #e2e8f0; }
#editorToolbar .jk-text-quick svg { width: 17px; height: 17px; }
@media(max-width:999px) {
  #editorToolbar.jk-text-panel { inset: auto 0 var(--jk-keyboard-offset,0px) !important; width: 100% !important; max-width: 100% !important; max-height: min(45dvh,calc(var(--jk-viewport-height,100dvh) - 110px)); border-radius: 16px 16px 0 0; }
  #editorToolbar .jk-text-head { padding-top: 13px; }
  #editorToolbar .jk-text-head::before { top: 5px; height: 3px; }
  #editorToolbar .jk-text-close { width: 38px; height: 38px; flex-basis: 38px; }
  #editorToolbar .jk-text-quick .tool-btn { min-width: 38px; width: 38px; min-height: 38px; height: 38px; }
  #editorToolbar .tool-font, #editorToolbar .jk-size-control, #editorToolbar .jk-text-styles { height: 40px; }
  #editorToolbar .jk-size-control .tool-btn, #editorToolbar #jkTextSize, #editorToolbar .jk-text-styles button { height: 38px; }
  #editorToolbar .jk-text-options button { min-height: 36px; }
  #editorToolbar .jk-text-options .jk-color-swatch { min-height: 30px; width: 30px; height: 30px; }
}

/* Original mobile commands: editing tools left, preview/history right. */
@media(max-width:999px) {
  body.jk-ui-ready #masterToolbar {
    top: calc(max(6px,env(safe-area-inset-top)) + 74px) !important;
    left: 8px !important; right: auto !important; bottom: auto !important;
    transform: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
    max-height: calc(var(--jk-viewport-height,100dvh) - 174px);
    overflow-y: auto; overscroll-behavior: contain;
  }
  body.jk-ui-ready #masterToolbar .tool-btn { white-space: normal !important; overflow-wrap: anywhere; }
  body.jk-ui-ready #previewFab {
    top: calc(max(6px,env(safe-area-inset-top)) + 74px) !important;
    right: 12px !important; left: auto !important;
  }
  body.jk-ui-ready .jk-editor-tools {
    top: calc(max(6px,env(safe-area-inset-top)) + 116px) !important;
    right: 12px !important; left: auto !important;
    max-width: calc(100vw - 100px) !important; z-index: 1002;
  }
  body.jk-ui-ready .jk-editor-tools > button { min-width: 36px; min-height: 36px; }
  body.jk-ui-ready .jk-editor-tools > .jk-history-in-text { display: none; }
  body.jk-ui-ready .jk-layer-list {
    left: auto; right: 0; width: 220px;
    max-width: calc(100vw - 24px); max-height: min(45dvh,320px);
  }
  body.jk-form-open #masterToolbar,body.jk-text-open #masterToolbar,
  body.jk-form-open .jk-editor-tools,body.jk-text-open .jk-editor-tools,
  body.jk-form-open #previewFab,body.jk-text-open #previewFab,
  body.jk-ui-ready:has(.modal.show) #masterToolbar,
  body.jk-ui-ready:has(.modal.show) .jk-editor-tools,
  body.jk-ui-ready:has(.modal.show) #previewFab {
    visibility: hidden !important; pointer-events: none !important;
  }
}

/* Mobile tools collapse independently from the form navigation. */
#masterToolActions { display: contents; }
#mobileToolsToggle .jk-menu-up, #mobileReplayVideo { display: none; }
@media(max-width:999px) {
  body.jk-ui-ready #masterToolbar { gap: 0 !important; }
  #masterToolbar #btnReplayVideo { display: none !important; }
  #masterToolbar #masterToolActions {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    max-height: 0; opacity: 0; visibility: hidden; overflow: hidden;
    transform: translateY(-8px); transition: max-height .22s ease, opacity .18s ease, transform .22s ease;
  }
  #masterToolbar.is-tools-open #masterToolActions { max-height: 320px; opacity: 1; visibility: visible; transform: translateY(0); padding-top: 4px; }
  #masterToolbar.is-tools-open .jk-menu-icon { display: none; }
  #masterToolbar.is-tools-open .jk-menu-up { display: block; }
  #mobileToolsToggle { touch-action: manipulation; }
  #mobileReplayVideo:not([hidden]) {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    position: fixed; top: calc(max(6px,env(safe-area-inset-top)) + 116px); right: 12px;
    min-height: 44px; padding: 8px 12px; z-index: 1002;
    border: 1px solid #fbbf24; border-radius: 999px; background: #fbbf24; color: #111827;
    font-size: 12px; font-weight: 800; cursor: pointer; animation: jk-replay-pulse 1.6s ease-in-out infinite;
  }
  #mobileReplayVideo[hidden] { display: none !important; }
  body.jk-ui-ready.jk-replay-pending .jk-editor-tools { top: calc(max(6px,env(safe-area-inset-top)) + 162px) !important; }
  body.jk-text-open #mobileReplayVideo { top: calc(max(6px,env(safe-area-inset-top)) + 74px); }
  body.jk-form-open #mobileReplayVideo,
  body.jk-ui-ready:has(.modal.show) #mobileReplayVideo { visibility: hidden !important; pointer-events: none !important; }
}
@keyframes jk-replay-pulse {
  0%,100% { opacity: 1; box-shadow: 0 0 0 0 #fbbf2455; }
  50% { opacity: .78; box-shadow: 0 0 0 5px #fbbf2400; }
}
@media(prefers-reduced-motion:reduce) {
  #masterToolbar #masterToolActions { transition: none !important; }
  #mobileReplayVideo { animation: none !important; }
}


/* Form navigation starts expanded. Collapse left; reopen from the hamburger. */
#mobileNavHide, #mobileNavToggle { display: none; }
@media(max-width:999px) {
  #tabs.sidebar { transition: transform .24s ease, visibility .24s; touch-action: pan-y; }
  #tabs.sidebar.is-collapsed { transform: translateX(calc(-100% - 16px)) !important; visibility: hidden; pointer-events: none; }
  #tabs #mobileNavHide { display: flex; flex: 0 0 44px; width: 44px; min-height: 44px; align-self: center; align-items: center; justify-content: center; padding: 0; margin: 0; color: #fff; background: #ffffff12; border: 1px solid #ffffff22; border-radius: 10px; cursor: pointer; touch-action: manipulation; }
  #mobileNavToggle.toggle-menu-btn { top: max(6px,env(safe-area-inset-top)) !important; left: max(8px,env(safe-area-inset-left)) !important; width: 54px !important; height: 54px !important; padding: 5px !important; flex-direction: column; justify-content: center; align-items: center; gap: 3px; background: #0b1220db !important; color: #fff; border: 1px solid #ffffff22; border-radius: 13px; z-index: 1003 !important; touch-action: manipulation; }
  #mobileNavToggle span { font-size: 10px; font-weight: 700; }
  #mobileNavToggle[hidden] { display: none !important; }
  #mobileNavToggle:not([hidden]) { display: flex !important; }
  #mobileNavHide:focus-visible, #mobileNavToggle:focus-visible, #mobileReplayVideo:focus-visible { outline: 2px solid #facc15; outline-offset: 2px; }
}
@media(prefers-reduced-motion:reduce) { #tabs.sidebar { transition: none !important; } }