/*
 * Marker – Highlight & Share | Frontend CSS v1.4.2
 * Namespaced. Targeted resets only. No !important on JS-controlled properties.
 */

/* ── Highlight mark ──────────────────────────────────────────────────────── */
mark.mkr-hl {
  display:                inline        !important;
  border-radius:          2px           !important;
  padding:                1px 2px       !important;
  margin:                 0             !important;
  cursor:                 pointer       !important;
  color:                  inherit       !important;
  font-size:              inherit       !important;
  font-family:            inherit       !important;
  font-weight:            inherit       !important;
  font-style:             inherit       !important;
  line-height:            inherit       !important;
  letter-spacing:         inherit       !important;
  text-decoration:        inherit       !important;
  vertical-align:         baseline      !important;
  box-shadow:             none          !important;
  border:                 none          !important;
  outline:                none          !important;
  text-shadow:            none          !important;
  box-sizing:             content-box   !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break:   clone;
  transition:             filter .1s    !important;
}
mark.mkr-hl:hover { filter: brightness(.82) !important; }

/* ── CSS custom properties — defaults overridden by PHP inline style ─────── */
#mkr-toolbar {
  --mkr-bg:        #1c1c1e;
  --mkr-text:      #ffffff;
  --mkr-accent:    #FFEB3B;
  --mkr-accent-fg: #1c1c1e;
  --mkr-hover:     rgba(255,255,255,.10);
  --mkr-sep:       rgba(255,255,255,.12);
  --mkr-muted:     rgba(255,255,255,.38);
  --mkr-shadow:    0 4px 24px rgba(0,0,0,.24), 0 1px 4px rgba(0,0,0,.16);
  --mkr-del:       #fca5a5;
  --mkr-del-hover: rgba(239,68,68,.14);
}

/* ── Toolbar wrapper ─────────────────────────────────────────────────────── */
/*
 * IMPORTANT NOTES:
 * - position, z-index, display, pointer-events use !important (themes override these)
 * - top, left do NOT use !important — JavaScript sets them via inline style
 * - transform, animation do NOT use !important — CSS animations need these
 */
#mkr-toolbar {
  position:       fixed         !important;
  z-index:        2147483646    !important;
  top:            0;            /* JS overrides this — do NOT add !important */
  left:           0;            /* JS overrides this — do NOT add !important */
  display:        none          !important;
  flex-direction: column        !important;
  align-items:    center        !important;
  gap:            6px           !important;
  pointer-events: none          !important;
  width:          auto          !important;
  height:         auto          !important;
  max-width:      none          !important;
  max-height:     none          !important;
  margin:         0             !important;
  padding:        0             !important;
  border:         none          !important;
  background:     none          !important;
  box-shadow:     none          !important;
  box-sizing:     border-box    !important;
}
#mkr-toolbar.mkr-visible {
  display:        flex          !important;
  pointer-events: all           !important;
  animation:      mkr-pop .17s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes mkr-pop {
  from { opacity: 0; transform: scale(.88) translateY(4px); }
  to   { opacity: 1; transform: scale(1)   translateY(0);   }
}

/* Reset font/box properties on all toolbar children to prevent theme bleed */
#mkr-toolbar * {
  box-sizing:      border-box   !important;
  font-family:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  line-height:     1            !important;
  letter-spacing:  normal       !important;
  text-decoration: none         !important;
  text-shadow:     none         !important;
  text-transform:  none         !important;
  float:           none         !important;
  clear:           none         !important;
  vertical-align:  middle       !important;
}

/* ── Pill ────────────────────────────────────────────────────────────────── */
.mkr-pill {
  display:        flex          !important;
  align-items:    center        !important;
  gap:            2px           !important;
  padding:        5px 7px       !important;
  background:     var(--mkr-bg) !important;
  border-radius:  10px          !important;
  box-shadow:     var(--mkr-shadow) !important;
  user-select:    none          !important;
  white-space:    nowrap        !important;
  flex-wrap:      nowrap        !important;
  border:         none          !important;
  margin:         0             !important;
}

/* ── Swatches ────────────────────────────────────────────────────────────── */
.mkr-swatches {
  display:        flex          !important;
  align-items:    center        !important;
  gap:            4px           !important;
  padding-right:  5px           !important;
  padding-left:   2px           !important;
  margin:         0             !important;
  background:     none          !important;
  border:         none          !important;
}
.mkr-swatch {
  width:          20px          !important;
  height:         20px          !important;
  min-width:      20px          !important;
  min-height:     20px          !important;
  border-radius:  50%           !important;
  border:         2px solid transparent !important;
  outline:        none          !important;
  cursor:         pointer       !important;
  padding:        0             !important;
  margin:         0             !important;
  flex-shrink:    0             !important;
  display:        block         !important;
  background-clip: padding-box  !important;
  transition:     transform .13s ease, border-color .1s ease !important;
}
.mkr-swatch:hover   { transform: scale(1.22) !important; }
.mkr-swatch.mkr-on  { border-color: var(--mkr-text) !important; transform: scale(1.15) !important; }

/* ── Separator ───────────────────────────────────────────────────────────── */
.mkr-sep {
  display:        block         !important;
  width:          1px           !important;
  height:         18px          !important;
  min-height:     18px          !important;
  background:     var(--mkr-sep) !important;
  margin:         0 3px         !important;
  padding:        0             !important;
  flex-shrink:    0             !important;
  border:         none          !important;
  border-radius:  0             !important;
}

/* ── Toolbar buttons ─────────────────────────────────────────────────────── */
.mkr-btn {
  display:        inline-flex   !important;
  align-items:    center        !important;
  justify-content: center       !important;
  gap:            4px           !important;
  padding:        5px 9px       !important;
  border-radius:  7px           !important;
  border:         none          !important;
  outline:        none          !important;
  background:     transparent   !important;
  color:          var(--mkr-text) !important;
  font-size:      12px          !important;
  font-weight:    500           !important;
  cursor:         pointer       !important;
  white-space:    nowrap        !important;
  opacity:        .88           !important;
  margin:         0             !important;
  flex-shrink:    0             !important;
  transition:     background .1s, opacity .1s !important;
  text-align:     center        !important;
}
.mkr-btn:hover       { background: var(--mkr-hover) !important; opacity: 1 !important; }
.mkr-btn span        { font-size: 12px !important; font-weight: 500 !important; color: inherit !important; }
.mkr-btn svg         { flex-shrink: 0 !important; display: inline-block !important; }

.mkr-hl-btn {
  background:     var(--mkr-accent)    !important;
  color:          var(--mkr-accent-fg) !important;
  font-weight:    700                  !important;
  padding:        5px 11px             !important;
  opacity:        1                    !important;
}
.mkr-hl-btn:hover    { filter: brightness(1.08) !important; background: var(--mkr-accent) !important; }
.mkr-hl-btn span     { font-weight: 700 !important; color: var(--mkr-accent-fg) !important; }

.mkr-img-btn {
  background:     rgba(255,255,255,.12) !important;
  opacity:        1                     !important;
}
.mkr-img-btn:hover   { background: rgba(255,255,255,.22) !important; }

.mkr-del-btn         { color: var(--mkr-del) !important; opacity: 1 !important; }
.mkr-del-btn:hover   { background: var(--mkr-del-hover) !important; }
.mkr-del-btn span    { color: var(--mkr-del) !important; }

/* ── Share panel ─────────────────────────────────────────────────────────── */
.mkr-panel {
  background:     var(--mkr-bg)            !important;
  border-radius:  10px                     !important;
  box-shadow:     var(--mkr-shadow)        !important;
  padding:        11px 12px                !important;
  width:          280px                    !important;
  max-width:      calc(100vw - 24px)       !important;
  border:         none                     !important;
  margin:         0                        !important;
  box-sizing:     border-box               !important;
}
.mkr-panel-title {
  display:        block                    !important;
  margin:         0 0 9px                  !important;
  padding:        0                        !important;
  font-size:      10px                     !important;
  font-weight:    700                      !important;
  color:          var(--mkr-muted)         !important;
  text-transform: uppercase                !important;
  letter-spacing: .09em                    !important;
  background:     none                     !important;
  border:         none                     !important;
}
.mkr-share-grid {
  display:        flex                     !important;
  flex-wrap:      wrap                     !important;
  gap:            6px                      !important;
  margin:         0                        !important;
  padding:        0                        !important;
  background:     none                     !important;
  border:         none                     !important;
}
.mkr-share-btn {
  display:        inline-flex              !important;
  align-items:    center                   !important;
  gap:            6px                      !important;
  padding:        6px 10px                 !important;
  border-radius:  7px                      !important;
  border:         none                     !important;
  outline:        none                     !important;
  color:          #fff                     !important;
  font-size:      12px                     !important;
  font-weight:    600                      !important;
  cursor:         pointer                  !important;
  white-space:    nowrap                   !important;
  margin:         0                        !important;
  transition:     opacity .1s              !important;
}
.mkr-share-btn:hover  { opacity: .82 !important; }
.mkr-share-btn span   { font-size: 12px !important; font-weight: 600 !important; color: #fff !important; }

/* ── Context menu (mkr-ctx) — same CSS vars as toolbar ──────────────────── */
.mkr-ctx {
  --mkr-bg:        #1c1c1e;
  --mkr-text:      #ffffff;
  --mkr-accent:    #FFEB3B;
  --mkr-accent-fg: #1c1c1e;
  --mkr-hover:     rgba(255,255,255,.10);
  --mkr-sep:       rgba(255,255,255,.12);
  --mkr-muted:     rgba(255,255,255,.38);
  --mkr-shadow:    0 4px 24px rgba(0,0,0,.24), 0 1px 4px rgba(0,0,0,.16);
  --mkr-del:       #fca5a5;
  --mkr-del-hover: rgba(239,68,68,.14);
  box-sizing:      border-box !important;
  animation:       mkr-pop .15s cubic-bezier(.34,1.56,.64,1) both;
}
.mkr-ctx * {
  box-sizing:      border-box !important;
  font-family:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  line-height:     1 !important;
  letter-spacing:  normal !important;
  text-decoration: none !important;
  text-shadow:     none !important;
  text-transform:  none !important;
  float:           none !important;
  vertical-align:  middle !important;
}

/* ── Toast ───────────────────────────────────────────────────────────────── */
.mkr-toast {
  position:       fixed        !important;
  bottom:         22px         !important;
  left:           50%          !important;
  transform:      translateX(-50%) translateY(12px) !important;
  background:     #1c1c1e      !important;
  color:          rgba(255,255,255,.9) !important;
  font-family:    -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size:      13px         !important;
  font-weight:    500          !important;
  line-height:    1.4          !important;
  padding:        8px 18px     !important;
  border-radius:  100px        !important;
  box-shadow:     0 4px 20px rgba(0,0,0,.22) !important;
  z-index:        2147483647   !important;
  opacity:        0            !important;
  pointer-events: none         !important;
  white-space:    nowrap       !important;
  display:        block        !important;
  text-align:     center       !important;
  border:         none         !important;
  margin:         0            !important;
  transition:     opacity .16s, transform .16s cubic-bezier(.34,1.56,.64,1) !important;
}
.mkr-toast.mkr-show {
  opacity:        1            !important;
  transform:      translateX(-50%) translateY(0) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   IMAGE MODAL — z-index 2147483647, always above toolbar
   ══════════════════════════════════════════════════════════════════════════ */
.mkr-modal-overlay {
  position:       fixed   !important;
  inset:          0       !important;
  background:     rgba(0,0,0,.76) !important;
  z-index:        2147483647 !important;
  display:        flex    !important;
  align-items:    center  !important;
  justify-content: center !important;
  padding:        16px    !important;
  box-sizing:     border-box !important;
  margin:         0       !important;
  border:         none    !important;
  animation:      mkr-fade .18s ease both;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
@keyframes mkr-fade { from { opacity: 0; } to { opacity: 1; } }

.mkr-modal-box {
  background:     #1c1c1e !important;
  border-radius:  18px    !important;
  width:          100%    !important;
  max-width:      740px   !important;
  max-height:     93vh    !important;
  overflow-y:     auto    !important;
  box-shadow:     0 28px 90px rgba(0,0,0,.55), 0 4px 18px rgba(0,0,0,.3) !important;
  box-sizing:     border-box !important;
  position:       relative !important;
  margin:         0       !important;
  border:         none    !important;
  animation:      mkr-su .2s cubic-bezier(.34,1.1,.64,1) both;
}
@keyframes mkr-su {
  from { transform: translateY(20px) scale(.97); opacity: 0; }
  to   { transform: translateY(0)    scale(1);   opacity: 1; }
}

.mkr-modal-hd {
  display:        flex    !important;
  align-items:    center  !important;
  justify-content: space-between !important;
  padding:        18px 20px 14px !important;
  border-bottom:  1px solid rgba(255,255,255,.08) !important;
  box-sizing:     border-box !important;
  margin:         0       !important;
  background:     none    !important;
}
.mkr-modal-title {
  margin:         0       !important;
  padding:        0       !important;
  font-family:    -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size:      15px    !important;
  font-weight:    700     !important;
  line-height:    1       !important;
  color:          rgba(255,255,255,.92) !important;
  background:     none    !important;
  border:         none    !important;
  text-shadow:    none    !important;
}
.mkr-modal-x {
  width:          28px    !important;
  height:         28px    !important;
  min-width:      28px    !important;
  flex-shrink:    0       !important;
  border-radius:  50%     !important;
  border:         none    !important;
  outline:        none    !important;
  background:     rgba(255,255,255,.08) !important;
  color:          rgba(255,255,255,.6)  !important;
  font-size:      18px    !important;
  font-family:    -apple-system, sans-serif !important;
  line-height:    1       !important;
  cursor:         pointer !important;
  display:        flex    !important;
  align-items:    center  !important;
  justify-content: center !important;
  padding:        0       !important;
  margin:         0       !important;
  transition:     background .1s, color .1s !important;
}
.mkr-modal-x:hover { background: rgba(255,255,255,.16) !important; color: #fff !important; }

.mkr-canvas-wrap {
  padding:        14px 20px !important;
  display:        flex    !important;
  justify-content: center !important;
  box-sizing:     border-box !important;
  margin:         0       !important;
  background:     none    !important;
  border:         none    !important;
}
.mkr-canvas {
  width:          100%    !important;
  max-width:      700px   !important;
  height:         auto    !important;
  border-radius:  10px    !important;
  display:        block   !important;
  box-shadow:     0 4px 28px rgba(0,0,0,.45) !important;
  border:         none    !important;
  margin:         0 auto  !important;
  padding:        0       !important;
}

.mkr-modal-opts {
  display:        flex    !important;
  gap:            8px     !important;
  flex-wrap:      wrap    !important;
  padding:        0 20px 16px !important;
  box-sizing:     border-box !important;
  margin:         0       !important;
  background:     none    !important;
  border:         none    !important;
}
.mkr-modal-check {
  display:        flex    !important;
  align-items:    center  !important;
  gap:            8px     !important;
  padding:        8px 14px !important;
  border-radius:  9px     !important;
  border:         1.5px solid rgba(255,255,255,.10) !important;
  background:     rgba(255,255,255,.05) !important;
  cursor:         pointer !important;
  font-family:    -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size:      13px    !important;
  font-weight:    400     !important;
  line-height:    1       !important;
  color:          rgba(255,255,255,.80) !important;
  user-select:    none    !important;
  margin:         0       !important;
  box-sizing:     border-box !important;
  transition:     background .12s, border-color .12s !important;
}
.mkr-modal-check:hover {
  background:     rgba(255,255,255,.10) !important;
  border-color:   rgba(255,255,255,.22) !important;
}
.mkr-modal-check input[type="checkbox"] {
  width:          15px    !important;
  height:         15px    !important;
  min-width:      15px    !important;
  accent-color:   #FFEB3B !important;
  cursor:         pointer !important;
  flex-shrink:    0       !important;
  margin:         0       !important;
  padding:        0       !important;
  vertical-align: middle  !important;
}
.mkr-modal-check span {
  font-size:      13px    !important;
  font-weight:    400     !important;
  color:          rgba(255,255,255,.80) !important;
  line-height:    1       !important;
}

.mkr-modal-actions {
  display:        flex    !important;
  gap:            10px    !important;
  padding:        0 20px 20px !important;
  justify-content: flex-end !important;
  flex-wrap:      wrap    !important;
  box-sizing:     border-box !important;
  margin:         0       !important;
  background:     none    !important;
  border:         none    !important;
}
.mkr-modal-btn {
  display:        inline-flex !important;
  align-items:    center  !important;
  justify-content: center !important;
  gap:            7px     !important;
  padding:        9px 20px !important;
  border-radius:  9px     !important;
  border:         none    !important;
  outline:        none    !important;
  font-family:    -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size:      13px    !important;
  font-weight:    700     !important;
  line-height:    1       !important;
  cursor:         pointer !important;
  white-space:    nowrap  !important;
  margin:         0       !important;
  box-sizing:     border-box !important;
  transition:     opacity .12s, transform .1s !important;
}
.mkr-modal-btn:active { transform: scale(.97) !important; }
.mkr-btn-primary      { background: #FFEB3B  !important; color: #1c1c1e !important; }
.mkr-btn-primary:hover  { opacity: .88 !important; }
.mkr-btn-secondary    { background: rgba(255,255,255,.10) !important; color: rgba(255,255,255,.88) !important; }
.mkr-btn-secondary:hover { background: rgba(255,255,255,.18) !important; }
.mkr-modal-btn span   { font-size: 13px !important; font-weight: 700 !important; color: inherit !important; }

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  .mkr-btn span         { display: none !important; }
  .mkr-btn              { padding: 5px 7px !important; }
  .mkr-share-btn span   { display: none !important; }
  .mkr-share-btn        { padding: 7px 8px !important; }
  .mkr-panel            { width: calc(100vw - 24px) !important; }
  .mkr-modal-actions    { justify-content: stretch !important; }
  .mkr-modal-btn        { flex: 1 !important; }
}

/* ── Modal size selector (shown when admin enables user size choice) ──────── */
.mkr-size-sel {
  display:        flex          !important;
  gap:            6px           !important;
  flex-wrap:      wrap          !important;
  align-items:    center        !important;
  padding:        4px 0         !important;
  margin:         0             !important;
  border:         none          !important;
  background:     none          !important;
}
.mkr-size-radio {
  display:        inline-flex   !important;
  align-items:    center        !important;
  gap:            5px           !important;
  padding:        6px 13px      !important;
  border-radius:  100px         !important;
  border:         1.5px solid rgba(255,255,255,.14) !important;
  background:     rgba(255,255,255,.06) !important;
  cursor:         pointer       !important;
  font-family:    -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size:      12px          !important;
  font-weight:    500           !important;
  line-height:    1             !important;
  color:          rgba(255,255,255,.70) !important;
  user-select:    none          !important;
  transition:     background .12s, border-color .12s, color .12s !important;
  margin:         0             !important;
  box-sizing:     border-box    !important;
}
.mkr-size-radio input[type="radio"] {
  display:        none          !important;
}
.mkr-size-radio:hover        { border-color: rgba(255,255,255,.28) !important; color: rgba(255,255,255,.90) !important; }
.mkr-size-radio.mkr-size-radio-on {
  border-color:   #FFEB3B       !important;
  background:     rgba(255,235,59,.12) !important;
  color:          #FFEB3B       !important;
  font-weight:    700           !important;
}