/* Free QR tools (/free-tools, /google-review-qr-code, /whatsapp-link-generator, /qr-code-menu). Loaded after site.css. */

:root{--warn-text:#B4410C;--ok-text:#1E6B5C}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--warn-text:#FF9F70;--ok-text:#7FD6BE}}
:root[data-theme="dark"]{--warn-text:#FF9F70;--ok-text:#7FD6BE}

.qt-hero{padding-bottom:clamp(24px,3vw,36px)}
.qt-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.qt-chips li{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:.86rem;font-weight:600;color:var(--ink)}
.qt-chips svg{width:14px;height:14px;color:var(--teal-text)}

.qt{padding-bottom:var(--section)}
.qt-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}

/* ---------- form ---------- */
.qt-form{display:grid;gap:16px;min-width:0}
.qt [hidden]{display:none!important}
.qt-card{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);padding:clamp(18px,2.4vw,26px);min-width:0;container-type:inline-size}
.qt-card legend{float:left;width:100%;display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:1.08rem;color:var(--ink);margin-bottom:16px}
.qt-card legend+*{clear:both}
.step-no{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--brand);color:var(--navy);font-size:.88rem;font-weight:800;flex:none}
.qt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.qt-form .field input,.qt-form .field select,.qt-form .field textarea{min-height:48px;padding:10px 14px;font-size:1rem}
.qt-form .field textarea{min-height:92px}
.qt-form input[type=color]{padding:4px;height:48px;max-width:120px;cursor:pointer}
.qt-form .hint:empty{display:none}
.qt-form .hint.bad{color:var(--warn-text)}
.qt-form .hint.ok{color:var(--ok-text)}
.qt-form [aria-invalid="true"]{border-color:var(--warn-text)}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:500!important;font-size:.94rem!important;color:var(--text)!important;cursor:pointer;padding:4px 0}
.check input{width:20px!important;height:20px;min-height:0!important;margin-top:1px;accent-color:var(--teal-text);flex:none}
.btn-link{background:none;border:0;padding:6px 4px;color:var(--teal-text);font-weight:650;font-size:.92rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px;font-family:inherit}
.btn-link:disabled{color:var(--muted);cursor:not-allowed;text-decoration:none}
.btn-link.danger{color:var(--warn-text)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none}
.help{margin-top:12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-alt);font-size:.92rem}
.help summary{cursor:pointer;padding:12px 16px;font-weight:650;color:var(--ink);list-style:none;display:flex;gap:8px;align-items:center}
.help summary::-webkit-details-marker{display:none}
.help summary svg{width:16px;height:16px;color:var(--teal-text);flex:none}
.help[open] summary{border-bottom:1px solid var(--line)}
.help ol,.help ul{padding:12px 16px 14px 36px;display:grid;gap:8px;color:var(--text)}
.help p{padding:12px 16px 0;color:var(--text)}
.presets{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.presets button{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);border-radius:999px;padding:7px 13px;font-size:.86rem;font-weight:600;cursor:pointer;font-family:inherit}
.presets button:hover,.presets button[aria-pressed="true"]{border-color:var(--ink);background:var(--surface-2)}
.qt-result{display:grid;gap:10px;margin-top:16px;padding:16px;border-radius:var(--radius);background:var(--bg-alt);border:1px solid var(--line)}
.qt-result label{font-weight:650;font-size:.9rem;color:var(--ink)}
.qt-result input{width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);color:var(--text);font-size:.95rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.qt-result .btn-row{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- preview ---------- */
.qt-preview{position:sticky;top:calc(var(--header-h, 72px) + 16px);display:grid;gap:14px;min-width:0}
.qt-canvas-wrap{display:grid;place-items:center;padding:clamp(14px,2vw,22px);border-radius:var(--radius-lg);background:var(--bg-alt);border:1px solid var(--line)}
.qt-canvas-wrap canvas{display:block;width:100%;max-width:400px;height:auto;border-radius:18px;box-shadow:0 1px 2px rgba(20,33,61,.08),0 18px 40px -18px rgba(20,33,61,.35)}
.qt-canvas-wrap canvas[hidden]{display:none}
.qt-empty{min-height:300px;display:grid;place-items:center;text-align:center;color:var(--muted);font-size:.95rem;max-width:30ch}
.qt-empty[hidden]{display:none}
.qt-actions{display:flex;flex-wrap:wrap;gap:10px}
.qt-actions .btn{flex:1 1 auto;min-height:48px;padding:10px 18px}
.qt-more{display:grid;gap:6px;font-size:.9rem;color:var(--muted)}
.qt-more select{min-height:38px;padding:4px 10px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);color:var(--text);font:inherit;margin-left:6px}
.qt-inline{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.qt-status{font-size:.88rem;color:var(--ok-text);min-height:1.3em}
.qt-mobilebar{display:none}

/* ---------- QR menu maker ---------- */
.mm-cats{display:grid;gap:14px}
.mm-cat{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2);padding:14px;display:grid;gap:10px}
.mm-cat-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}
.mm-cat-head .field label{font-size:.8rem;color:var(--muted)}
.mm-cat-tools{display:flex;gap:6px}
.mm-items{display:grid;gap:8px}
.mm-item{display:grid;grid-template-columns:minmax(0,1fr) 92px 112px 44px;gap:8px;align-items:start}
.mm-item input,.mm-item select{width:100%;min-height:44px;padding:8px 10px;border:1px solid var(--line-strong);border-radius:12px;background:var(--bg-alt);color:var(--text);font:inherit;font-size:.95rem}
.mm-item input:focus,.mm-item select:focus{outline:none;border-color:var(--ink);background:var(--surface);box-shadow:0 0 0 4px color-mix(in srgb,var(--ink) 10%,transparent)}
.mm-item .mm-note{grid-column:1/-2}
.mm-head-row{display:grid;grid-template-columns:minmax(0,1fr) 92px 112px 44px;gap:8px;font-size:.76rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.icon-x{width:44px;height:44px;border-radius:12px;border:1px solid var(--line-strong);background:var(--surface);color:var(--muted);font-size:1.3rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.icon-x:hover{color:var(--warn-text);border-color:var(--warn-text)}
.icon-x svg{width:18px;height:18px}
.mm-add-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.mm-size{display:grid;gap:6px;font-size:.88rem;color:var(--muted)}
.mm-meter{height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.mm-meter span{display:block;height:100%;width:0;border-radius:inherit;background:var(--teal-text);transition:width .3s}
.mm-meter.warn span{background:var(--brand)}
.mm-meter.bad span{background:var(--warn-text)}
.mm-paste textarea{width:100%;min-height:160px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);color:var(--text);font:inherit;font-size:.95rem;line-height:1.5}
.mm-paste .btn-row{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px 14px}
.mm-paste>div{padding:12px 16px 0}
@container (max-width:480px){
  .qt-grid{grid-template-columns:minmax(0,1fr)}
  .mm-head-row{display:none}
  .mm-item{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px;padding-bottom:10px;border-bottom:1px dashed var(--line-strong)}
  .mm-item .mm-name{grid-column:1/-1}
  .mm-item .mm-note{grid-column:1/-1}
  .mm-item:last-child{border-bottom:0}
}

/* ---------- hub ---------- */
.tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.tool-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start;padding:clamp(22px,2.6vw,30px);border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-sm);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.tool-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-strong)}
.tool-card h2{font-size:clamp(1.3rem,2vw,1.55rem)}
.tool-card h2 a{color:var(--ink);text-decoration:none}
.tool-card h2 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.tool-card p{margin-top:8px;color:var(--muted);font-size:.96rem}
.tool-card ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.tool-card li{padding:4px 10px;border-radius:999px;background:var(--bg-alt);border:1px solid var(--line);font-size:.8rem;font-weight:600;color:var(--text)}
.tool-card .go{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-weight:650;color:var(--teal-text);font-size:.92rem}
.tool-card .go svg{width:16px;height:16px}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .qt-layout{grid-template-columns:minmax(0,1fr)}
  .qt-preview{position:static}
  .qt-mobilebar{display:flex;gap:10px;position:sticky;bottom:0;z-index:30;padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-top:1px solid var(--line);margin-top:24px}
  .qt-mobilebar .btn{flex:1;min-height:48px}
  body:has(.qt-mobilebar) .fw-left,body:has(.qt-mobilebar) .fw-right{bottom:calc(86px + env(safe-area-inset-bottom,0px))}
  body:has(.qt-mobilebar) .ref-banner{bottom:90px}
}
@media (max-width:720px){.tool-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- print: only the card ---------- */
.qr-print{display:none}
@media print{
  @page{size:A4;margin:10mm}
  html.printing-card,html.printing-card body{background:#fff!important}
  html.printing-card body>*:not(.qr-print){display:none!important}
  html.printing-card .qr-print{display:grid!important;place-items:center;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .qr-print-one img{width:150mm;max-height:265mm;object-fit:contain}
  .qr-print-four{grid-template-columns:repeat(2,1fr);gap:8mm}
  .qr-print-four img{width:88mm;max-height:128mm;object-fit:contain}
}