/* Configurator page for the 3D cutlery pouch, Merkmaten style. Used by index.html and the WP theme. */
  /* Merkmaten-huisstijl: Apfel Grotezk, geel #FAC100, zwart op wit */
  @font-face { font-family: "Apfel Grotezk"; src: url("../assets/fonts/apfel-grotezk-regular.woff") format("woff"); font-weight: 400; font-display: swap; }
  @font-face { font-family: "Apfel Grotezk"; src: url("../assets/fonts/apfel-grotezk-mittel.woff") format("woff"); font-weight: 500; font-display: swap; }
  @font-face { font-family: "Apfel Grotezk"; src: url("../assets/fonts/apfel-grotezk-fett.woff") format("woff"); font-weight: 700; font-display: swap; }
  :root {
    --yellow: #fac100;
    --yellow-dark: #e6b100;
    --black: #000;
    --muted: rgba(0, 0, 0, 0.55);
    --rule: rgba(0, 0, 0, 0.1);
    --cream: #f9f6f2;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; background: #fff; color: var(--black); font: 16px/1.5 "Apfel Grotezk", system-ui, sans-serif; }
  #stage { position: fixed; inset: 0; }
  canvas { display: block; touch-action: none; cursor: grab; }
  canvas:active { cursor: grabbing; }

  /* frosted card: blurs whatever sits behind it, thin white edge, no shadow */
  .panel {
    position: fixed; left: 24px; bottom: 24px; width: 320px;
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    backdrop-filter: blur(18px) saturate(1.2);
    border: 1.5px solid #fff; border-radius: 10px; padding: 20px 20px 18px;
    transition: transform .3s ease, opacity .3s ease;
  }
  .panel h1 { font-size: 24px; line-height: 1.1; font-weight: 700; margin: 0 0 4px; }
  .panel p { margin: 0 0 16px; color: var(--muted); font-size: 15px; }
  .label { font-size: 14px; font-weight: 500; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; color: var(--black) !important; }
  .label::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); }

  .segmented { display: grid; grid-template-columns: 1fr 1fr; background: rgba(0, 0, 0, 0.06); border-radius: 100px; padding: 4px; margin-bottom: 18px; }
  .segmented button {
    border: 0; border-radius: 100px; padding: 10px 12px; background: transparent; color: var(--black);
    font: 500 15px "Apfel Grotezk", sans-serif; cursor: pointer;
  }
  .segmented button[aria-pressed="true"] { background: var(--yellow); }

  .switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rule); padding-bottom: 0; cursor: pointer; font-weight: 500; }
  .switch input { appearance: none; width: 44px; height: 26px; border-radius: 100px; background: rgba(0, 0, 0, 0.15); position: relative; cursor: pointer; transition: background .2s; margin: 0; flex: none; }
  .switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; }
  .switch input:checked { background: rgba(0, 0, 0, 0.15); }
  .switch input:checked::after { transform: translateX(18px); background: var(--black); }
  .switch input:focus-visible, button:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }

  .hint { position: fixed; right: 24px; bottom: 24px; font-size: 14px; color: var(--muted); pointer-events: none; }

  .close, .open { display: none; }
  .close {
    position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border: 0; border-radius: 50%;
    background: rgba(0, 0, 0, 0.06); color: var(--black); font-size: 20px; line-height: 1; cursor: pointer;
  }
  .open {
    position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%);
    border: 0; border-radius: 100px; padding: 14px 24px; background: var(--yellow); color: var(--black);
    font: 500 16px "Apfel Grotezk", sans-serif; cursor: pointer;
  }
  .open:hover { background: var(--yellow-dark); }

  /* mobiel: het paneel wordt een uitklapbaar blad onderaan */
  @media (max-width: 720px) {
    .panel { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: auto; }
    .close { display: block; }
    .hint { display: none; }
    body.collapsed .panel { transform: translateY(calc(100% + 40px)); opacity: 0; pointer-events: none; }
    body.collapsed .open { display: block; }
  }

  /* "Bekijk op je tafel": opens the pouch in AR on a phone, or shows a QR code on a computer */
  .ar {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 16px;
    border: 0; border-radius: 100px; padding: 13px 20px; background: var(--black); color: #fff;
    font: 500 15px "Apfel Grotezk", sans-serif; cursor: pointer;
  }
  .ar[hidden] { display: none; }
  .ar svg { width: 20px; height: 20px; flex: none; }
  .ar:hover { background: #222; }
  .ar:focus-visible { outline-color: var(--yellow); }

  .ar-qr {
    width: min(340px, calc(100vw - 32px)); padding: 24px; text-align: center; color: var(--black);
    background: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    backdrop-filter: blur(18px) saturate(1.2);
    border: 1.5px solid #fff; border-radius: 10px;
  }
  .ar-qr::backdrop { background: rgba(255, 255, 255, 0.4); }
  .ar-qr h2 { font-size: 22px; line-height: 1.1; font-weight: 700; margin: 0 0 6px; }
  .ar-qr p { margin: 0 0 16px; color: var(--muted); font-size: 15px; }
  .ar-qr .code { width: min(220px, 38vh); height: min(220px, 38vh); margin: 0 auto 18px; padding: 12px; background: #fff; border-radius: 10px; }
  .ar-qr .code svg { display: block; width: 100%; height: 100%; }
  .ar-qr button {
    border: 0; border-radius: 100px; padding: 12px 24px; background: var(--yellow); color: var(--black);
    font: 500 15px "Apfel Grotezk", sans-serif; cursor: pointer;
  }
  .ar-qr button:hover { background: var(--yellow-dark); }