/* Free printable business card maker (card-maker.php): qr-card.css layout plus template thumbnails, selects and
   the card preview. */
.cmk-tool .qrc-field-name,.cmk-tool .qrc-field-adr,.cmk-card-link,.cmk-tool .qrc-privacy{grid-column:1/-1}
.cmk-templates{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;padding:0;border:0}
.cmk-templates legend,.cmk-colors legend{margin-bottom:8px;font-size:13px;font-weight:700;color:var(--lp-soft)}
.cmk-templates label{display:grid;gap:6px;cursor:pointer;text-align:center;font-size:12px}
.cmk-templates input{position:absolute;opacity:0;pointer-events:none}
.cmk-thumb{position:relative;display:block;aspect-ratio:85/55;border:2px solid var(--lp-line-strong);border-radius:8px;background:#fff;overflow:hidden}
.cmk-templates input:checked+.cmk-thumb{border-color:var(--lp-text);box-shadow:0 0 0 2px var(--lp-text)}
.cmk-templates input:focus-visible+.cmk-thumb{outline:2px solid var(--lp-text);outline-offset:3px}
.cmk-thumb i{position:absolute;display:block;height:4px;border-radius:2px;background:#141414}
.cmk-thumb i:nth-child(1){left:12%;top:22%;width:45%;height:6px}
.cmk-thumb i:nth-child(2){left:12%;top:38%;width:30%;background:#9aa0aa}
.cmk-thumb i:nth-child(3){right:10%;bottom:12%;width:22%;height:22%;border-radius:2px;background:#141414}
.cmk-thumb-stripe::before{content:"";position:absolute;inset:0 auto 0 0;width:9%;background:#141414}
.cmk-thumb-stripe i:nth-child(1),.cmk-thumb-stripe i:nth-child(2){left:20%}
.cmk-thumb-dark{background:#141414}.cmk-thumb-dark i:nth-child(1){background:#fff}.cmk-thumb-dark i:nth-child(3){background:#fff}
.cmk-thumb-center i:nth-child(1){left:27.5%}.cmk-thumb-center i:nth-child(2){left:35%}.cmk-thumb-center i:nth-child(3){top:10%;bottom:auto;width:16%}
.cmk-colors{grid-column:1/-1}
.cmk-select select{width:100%;min-height:46px;padding:10px 12px;border:1px solid var(--lp-line-strong);border-radius:12px;background:transparent;color:var(--lp-text);font:inherit;font-size:15px}
.cmk-stage{position:relative;display:grid;place-items:center;padding:18px;border-radius:18px;background:repeating-linear-gradient(45deg,#eef1f5 0 10px,#e7eaef 10px 20px)}
.cmk-stage canvas{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 10px 26px rgba(15,23,42,.18)}
.cmk-stage .qrc-empty{position:absolute;inset:auto 0 50% 0;transform:translateY(50%);margin:0 auto}
@media(max-width:480px){.cmk-templates{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Colour swatches (same look as the signature tool). */
.cmk-colors{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;padding:0;border:0}
.cmk-colors legend{float:left;margin:0 6px 0 0}
.cmk-colors label{cursor:pointer}
.cmk-colors input{position:absolute;opacity:0;pointer-events:none}
.cmk-colors span{display:block;width:28px;height:28px;border-radius:999px;box-shadow:0 0 0 2px var(--lp-panel),0 0 0 3px var(--lp-line-strong)}
.cmk-colors input:checked+span{box-shadow:0 0 0 2px var(--lp-panel),0 0 0 4px var(--lp-text)}
.cmk-colors input:focus-visible+span{outline:2px solid var(--lp-text);outline-offset:4px}