/* PORTED 1:1 from assets/mockup.css by wp/generator/port_assets.py - do not edit here, edit the sketch and re-port (or override in sd-wp.css) */
/* ==========================================================================
   ShimonDesign — built-in device mockups (replaces the Photoshop mockups)
   Markup is produced by SDX.mockup(project, opts) in assets/sd.js.
   Every device scales with the width you give it (container query units),
   so a mockup can be 260px in a card or 1100px in a hero and stays sharp.

   Theme it from the sketch with these variables (set on .mk or any parent):
     --mk-frame      device body (laptop lid / phone)       default #1c1d21
     --mk-edge       thin highlight on the body edge        default #3a3c42
     --mk-base-1/2   laptop base gradient                   default silver
     --mk-bar        browser toolbar                        default #eef0f3
     --mk-bar-ink    toolbar text / dots outline            default #5d6370
     --mk-url        URL pill                               default #fff
     --mk-shadow     drop shadow of every device
     --mk-floor      soft ellipse under laptops / duos      default rgba(0,0,0,.28)
   ========================================================================== */

:root {                       /* defaults live on :root so any parent can override them */
  --mk-frame: #1c1d21;
  --mk-edge: #3a3c42;
  --mk-base-1: #e3e5ea;
  --mk-base-2: #a7abb4;
  --mk-bar: #eef0f3;
  --mk-bar-ink: #5d6370;
  --mk-url: #ffffff;
  --mk-shadow: 0 2.4cqw 5cqw -2cqw rgba(0, 0, 0, .35), 0 1cqw 2cqw -1cqw rgba(0, 0, 0, .25);
  --mk-floor: rgba(0, 0, 0, .28);
  --mk-ease: cubic-bezier(.23, 1, .32, 1);
}
.mk {
  position: relative;
  display: block;
  direction: ltr;              /* device geometry is not mirrored in RTL */
  container-type: inline-size;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.mk *, .mk *::before, .mk *::after { box-sizing: border-box; }
.mk[data-open] { cursor: zoom-in; }
.mk-dark  { --mk-bar: #1f2228; --mk-bar-ink: #a3a9b5; --mk-url: #2b2f37; }
.mk-silver { --mk-frame: #d6d9df; --mk-edge: #f4f5f7; }

/* ---------- screen + the page that scrolls inside it ---------- */
.mk-view {
  position: relative;
  overflow: hidden;
  background: var(--mk-page, #fff);
  isolation: isolate;
}
.mk-shot {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  -webkit-user-drag: none;
  pointer-events: none;
}
/* glare: a very soft diagonal light across glass */
.mk-glare::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 100%);
  pointer-events: none;
  z-index: 3;
}
/* little "scroll" hint that sits on the screen until the first hover */
.mk-hint {
  position: absolute; z-index: 4; left: 50%; bottom: 4%;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: .5em;
  padding: .55em 1em; border-radius: 999px;
  font: 600 max(10px, 2.1cqw)/1 var(--font, system-ui);
  color: #fff; background: rgba(15, 17, 22, .55);
  -webkit-backdrop-filter: blur(12px) saturate(1.6); backdrop-filter: blur(12px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
  transition: opacity .3s var(--mk-ease), transform .3s var(--mk-ease);
  pointer-events: none; white-space: nowrap; direction: rtl;
}
.mk-hint svg { width: 1.1em; height: 1.1em; }
.mk.is-on .mk-hint, .mk.was-on .mk-hint { opacity: 0; transform: translateX(-50%) translateY(6px); }

/* ---------- laptop ---------- */
.mk-laptop { width: 100%; }
.mk-laptop .mk-dev { position: relative; padding-bottom: 3.2cqw; }
.mk-laptop .mk-lid {
  position: relative;
  margin: 0 6.2cqw;
  padding: 1.55cqw 1.55cqw 2.1cqw;
  border-radius: 2.6cqw 2.6cqw .5cqw .5cqw;
  background: var(--mk-frame);
  box-shadow: inset 0 0 0 .16cqw var(--mk-edge), inset 0 0 0 .5cqw rgba(0,0,0,.6);
}
.mk-laptop .mk-lid::before {             /* camera */
  content: ""; position: absolute; top: .55cqw; left: 50%;
  width: .55cqw; height: .55cqw; margin-left: -.275cqw; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #3b4a6b, #0b0d12 60%);
}
.mk-laptop .mk-view { aspect-ratio: 1440 / 900; border-radius: .35cqw; }
.mk-laptop .mk-base {
  position: relative; height: 2.1cqw; margin-top: -.15cqw;
  border-radius: .3cqw .3cqw 2.4cqw 2.4cqw / .3cqw .3cqw 1.4cqw 1.4cqw;
  background: linear-gradient(180deg, var(--mk-base-1) 0%, var(--mk-base-1) 38%, var(--mk-base-2) 100%);
  box-shadow: inset 0 .12cqw 0 rgba(255,255,255,.7), 0 1.4cqw 2.2cqw -1.2cqw rgba(0,0,0,.5);
}
.mk-laptop .mk-base::before {            /* thumb notch */
  content: ""; position: absolute; top: 0; left: 50%; width: 15cqw; margin-left: -7.5cqw; height: .8cqw;
  border-radius: 0 0 .9cqw .9cqw;
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.05));
}
.mk-laptop .mk-dev::after, .mk-duo .mk-duo-in::after {      /* floor shadow */
  content: ""; position: absolute; left: 8%; right: 8%; bottom: 0; height: 3.2cqw;
  background: radial-gradient(50% 50% at 50% 50%, var(--mk-floor), transparent 70%);
  z-index: -1; pointer-events: none;
}

/* ---------- browser window ---------- */
.mk-browser { width: 100%; }
.mk-browser .mk-win {
  border-radius: 1.5cqw;
  overflow: hidden;
  background: var(--mk-bar);
  box-shadow: var(--mk-shadow), 0 0 0 1px rgba(0,0,0,.06);
}
.mk-bar {
  position: relative; display: flex; align-items: center; gap: 1.1cqw;
  height: 4.1cqw; padding: 0 1.6cqw;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.mk-dots { display: flex; gap: .75cqw; }
.mk-dots i { width: 1.05cqw; height: 1.05cqw; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .08cqw rgba(0,0,0,.12); }
.mk-dots i:nth-child(2) { background: #febc2e; }
.mk-dots i:nth-child(3) { background: #28c840; }
.mk-url {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center; gap: .6cqw;
  width: 38%; height: 2.5cqw; border-radius: 1.25cqw;
  background: var(--mk-url); color: var(--mk-bar-ink);
  font: 500 1.25cqw/1 var(--font, system-ui); letter-spacing: .01em;
  white-space: nowrap; overflow: hidden;
}
.mk-url svg { width: 1.2cqw; height: 1.2cqw; flex: none; opacity: .8; }
.mk-browser .mk-view { aspect-ratio: 1440 / 860; }

/* ---------- phone ---------- */
.mk-phone { width: 100%; }
.mk-phone .mk-body {
  position: relative;
  padding: 3.9cqw;
  border-radius: 16cqw;
  background: var(--mk-frame);
  box-shadow: inset 0 0 0 .55cqw var(--mk-edge), inset 0 0 0 1.4cqw rgba(0,0,0,.55), var(--mk-shadow);
}
.mk-phone .mk-body::before, .mk-phone .mk-body::after {   /* side buttons */
  content: ""; position: absolute; width: 1.1cqw; border-radius: .6cqw; background: var(--mk-frame);
  box-shadow: inset 0 0 0 .3cqw var(--mk-edge);
}
.mk-phone .mk-body::before { right: -.9cqw; top: 46cqw; height: 24cqw; }
.mk-phone .mk-body::after { left: -.9cqw; top: 40cqw; height: 15cqw; box-shadow: inset 0 0 0 .3cqw var(--mk-edge), 0 20cqw 0 0 var(--mk-frame); }
.mk-phone .mk-screen {
  position: relative; overflow: hidden;
  border-radius: 12.2cqw;
  aspect-ratio: 390 / 844;
  background: var(--mk-status, #fff);
  display: flex; flex-direction: column;
}
.mk-status {
  flex: none; height: 12.4cqw; padding: 0 9cqw 0 10.5cqw;
  display: flex; align-items: center; justify-content: space-between;
  color: var(--mk-status-ink, #000);
  font: 600 3.9cqw/1 -apple-system, "SF Pro Text", var(--font, system-ui);
  position: relative; z-index: 2;
}
.mk-status svg { height: 3.2cqw; width: auto; fill: currentColor; }
.mk-status span:last-child { display: flex; gap: 1.4cqw; align-items: center; }
.mk-island {
  position: absolute; z-index: 5; top: 3.2cqw; left: 50%;
  width: 29cqw; height: 8.4cqw; margin-left: -14.5cqw; border-radius: 6cqw;
  background: #000;
}
.mk-phone .mk-view { flex: 1; min-height: 0; }
.mk-homebar {
  position: absolute; z-index: 5; bottom: 2.2cqw; left: 50%; width: 34cqw; margin-left: -17cqw; height: 1.25cqw;
  border-radius: 1cqw; background: rgba(0,0,0,.55); mix-blend-mode: normal;
}
.mk-phone.mk-ink-light .mk-homebar { background: rgba(255,255,255,.7); }

/* ---------- duo: laptop (or browser) + phone in front ---------- */
.mk-duo { width: 100%; }
.mk-duo .mk-duo-in { position: relative; padding-bottom: 2cqw; }
.mk-duo-in > .mk-main { width: 86%; margin-left: auto; }
.mk-duo-in > .mk-side {
  position: absolute; left: 0; bottom: 0; width: 21.5%;
  filter: drop-shadow(0 2.4cqw 3cqw rgba(0,0,0,.35));
}
.mk-duo.mk-flip .mk-duo-in > .mk-main { margin-left: 0; margin-right: auto; }
.mk-duo.mk-flip .mk-duo-in > .mk-side { left: auto; right: 0; }
.mk-duo-in > .mk-side .mk { --mk-shadow: none; }

/* ---------- trio: three phones (top / middle / bottom of the same page) ---------- */
.mk-trio { width: 100%; }
.mk-trio .mk-trio-in { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5cqw; align-items: end; }
.mk-trio-in > :nth-child(2) { transform: translateY(-6cqw); }

/* ---------- hover lift (only real pointers) ---------- */
@media (hover: hover) and (pointer: fine) {
  .mk[data-open] .mk-lid, .mk[data-open] .mk-win, .mk[data-open] .mk-body { transition: transform .5s var(--mk-ease); }
}

/* ---------- full-screen site viewer (SDX.siteViewer) ---------- */
.mkv {
  position: fixed; inset: 0; z-index: 2000;
  display: grid; grid-template-rows: auto 1fr; justify-items: center;
  background: rgba(6, 8, 12, .86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; transition: opacity .28s var(--mk-ease, ease);
  direction: rtl; font-family: var(--font, system-ui);
}
.mkv.open { opacity: 1; }
.mkv *, .mkv *::before, .mkv *::after { box-sizing: border-box; }
.mkv-seg button svg { width: 16px; height: 16px; flex: none; }
.mkv-top {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  padding: 14px 16px; color: #fff; width: 100%;
}
.mkv-top b { font-size: 16px; font-weight: 600; margin-inline-end: auto; }
.mkv-seg { display: inline-flex; padding: 3px; border-radius: 12px; background: rgba(255,255,255,.1); }
.mkv-seg button, .mkv-btn {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 9px; font-size: 14px; color: rgba(255,255,255,.75);
  transition: background .2s ease, color .2s ease;
}
.mkv-seg button[aria-pressed="true"] { background: #fff; color: #111; font-weight: 600; }
.mkv-btn { border: 1px solid rgba(255,255,255,.22); }
.mkv-btn:hover, .mkv-seg button:hover { color: #fff; }
.mkv-seg button[aria-pressed="true"], .mkv-seg button[aria-pressed="true"]:hover { background: #fff; color: #111; }
.mkv-btn svg { width: 16px; height: 16px; }
.mkv-btn:active, .mkv-seg button:active { transform: scale(.97); }
.mkv-stage { width: 100%; min-height: 0; display: grid; place-items: start center; padding: 0 16px 18px; }
.mkv-win {
  width: min(1240px, 100%); height: 100%; display: flex; flex-direction: column;
  border-radius: 14px; overflow: hidden; background: #eef0f3; box-shadow: 0 40px 100px rgba(0,0,0,.5);
  transform: translateY(14px) scale(.985); transition: transform .4s var(--mk-ease, ease);
}
.mkv.open .mkv-win { transform: none; }
.mkv-win .mk-bar { height: 44px; padding: 0 16px; gap: 12px; direction: ltr; }
.mkv-win .mk-dots i { width: 12px; height: 12px; }
.mkv-win .mk-url { height: 28px; width: min(420px, 50%); font-size: 13px; border-radius: 14px; background: #fff; color: #5d6370; }
.mkv-win .mk-url svg { width: 13px; height: 13px; }
.mkv-scroll { flex: 1; overflow: auto; background: #fff; overscroll-behavior: contain; }
.mkv-scroll img { display: block; width: 100%; height: auto; }
.mkv-phone { height: 100%; aspect-ratio: 410 / 864; max-width: 100%; display: flex; }
.mkv-phone .mk { width: 100%; }
.mkv-phone .mk-view { overflow: auto; overscroll-behavior: contain; scrollbar-width: none; }
.mkv-phone .mk-view::-webkit-scrollbar { display: none; }
.mkv-phone .mk-shot { pointer-events: auto; }
.mkv-note { color: rgba(255,255,255,.6); font-size: 13px; padding-bottom: 10px; text-align: center; }
@media (max-width: 720px) {
  .mkv-top b { width: 100%; text-align: center; margin: 0; }
  .mkv-stage { padding: 0 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .mkv, .mkv-win, .mk-hint { transition: none; }
}