/* ============ Unplugged «Ζωγραφίζω με αριθμούς» (js/drawunplugged.js) ============ */
/* Χρησιμοποιεί τις σελίδες εκτύπωσης (.pr-page, #print-root) από το cards.css */

.px-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; }
.px-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; background: rgba(255,255,255,.9); border-radius: 14px; padding: 6px 10px; box-shadow: 0 3px 10px rgba(72,96,150,.12), inset 0 0 0 2px #fff; }
.px-cats, .px-sizes { display: flex; flex-wrap: wrap; gap: 5px; }
.px-cat, .px-size {
  font-family: inherit; font-size: 14px; font-weight: 700; color: #4527a0; background: #fff; border: 2px solid #d1c4e9; border-radius: 999px;
  height: 32px; padding: 0 13px; cursor: pointer; line-height: 1; transition: background .15s, border-color .15s, transform .1s;
}
.px-size { color: #546e7a; border-color: #cfd8dc; font-size: 13px; height: 30px; padding: 0 11px; }
.px-cat:hover, .px-size:hover { border-color: #7e57c2; transform: translateY(-1px); }
.px-cat.on { background: #5e35b1; border-color: #5e35b1; color: #fff; }
.px-size.on { background: #d1c4e9; border-color: #9575cd; color: #311b92; }
.px-bar2 { gap: 6px 8px; }
.px-lbl { font-size: 12px; font-weight: 700; color: #607d8b; display: inline-flex; align-items: center; gap: 5px; }
.px-title { font-family: inherit; font-size: 15px; font-weight: 700; color: #37474f; height: 32px; width: 210px; border: 2px solid #cfd8dc; border-radius: 9px; padding: 0 8px; user-select: text; -webkit-user-select: text; }
.px-title:focus { outline: none; border-color: #5e35b1; }
.px-btn {
  font-family: inherit; font-size: 14px; font-weight: 700; color: #37474f; background: #fff; border: 2px solid #cfd8dc; border-radius: 9px;
  height: 32px; padding: 0 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; line-height: 1; transition: background .15s, border-color .15s, transform .1s;
}
.px-btn:hover { border-color: #5e35b1; transform: translateY(-1px); }
.px-btn.go { background: #5e35b1; border-color: #4527a0; color: #fff; font-size: 15px; padding: 0 14px; height: 34px; margin-left: auto; }
.px-btn.go:hover { background: #4527a0; }
.px-btn.go:disabled { background: #eceff1; border-color: #cfd8dc; color: #b0bec5; cursor: default; transform: none; }
.px-check { font-size: 13px; font-weight: 700; color: #607d8b; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.px-check input { width: 16px; height: 16px; accent-color: #5e35b1; cursor: pointer; }
.px-count { font-size: 13px; font-weight: 800; color: #90a4ae; }
.px-count.on { color: #2e7d32; }
.px-desc { font-size: 13px; font-weight: 600; color: #546e7a; padding: 0 4px; }
.px-desc b { color: #4527a0; }

/* ---- κάρτες σχεδίων ---- */
.px-list { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 10px; padding: 2px 4px 8px; align-content: start; }
.px-card { position: relative; background: #fff; border: 3px solid #ede7f6; border-radius: 14px; padding: 6px; cursor: pointer; box-shadow: 0 2px 8px rgba(72,96,150,.1); transition: border-color .15s, transform .1s; }
.px-card:hover { border-color: #9575cd; transform: translateY(-2px); }
.px-card.on { border-color: #5e35b1; background: #f3e5f5; }
.px-card-img { height: 110px; display: flex; align-items: center; justify-content: center; background: repeating-conic-gradient(#f5f5f5 0 25%, #fff 0 50%) 0 0/10px 10px; border-radius: 8px; overflow: hidden; }
.px-card-img img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.px-card-h { font-size: 13px; font-weight: 800; color: #311b92; padding: 4px 24px 0 2px; line-height: 1.2; }
.px-card-i { font-size: 11px; font-weight: 600; color: #78909c; padding: 1px 2px 0; }
.px-card-i b { color: #5e35b1; }
.px-mode { float: right; font-size: 13px; }
.px-card-pick { position: absolute; top: 6px; right: 6px; z-index: 2; cursor: pointer; }
.px-card-pick input { width: 20px; height: 20px; accent-color: #5e35b1; cursor: pointer; }

/* ---- προεπισκόπηση ---- */
.modal.modal-px { max-width: 940px; padding: 20px 26px 24px; }
.px-prev { display: flex; gap: 18px; align-items: center; text-align: left; margin-bottom: 10px; }
.px-prev-img { width: 260px; max-height: 300px; object-fit: contain; image-rendering: pixelated; background: #fff; border-radius: 10px; box-shadow: 0 3px 14px rgba(0,0,0,.18); flex: none; }
.px-prev-info { font-size: 15px; color: #37474f; line-height: 1.6; }
.px-prev-info b { color: #4527a0; }
.px-prev-page { overflow: hidden; display: flex; justify-content: center; }
.px-prev-page .pr-page { transform-origin: top center; }
.px-prev-pages { max-height: 56vh; overflow: auto; align-items: flex-start; }
.px-pg-box { overflow: hidden; flex: none; }
.px-pg-box .pr-page { transform-origin: top left; }

/* ---- το χαρτί ---- */
.px-page { position: relative; color: #000; font-family: inherit; box-sizing: border-box; text-align: left; }
.px-head { display: flex; align-items: center; gap: 4mm; border-bottom: .6mm solid #37474f; padding-bottom: 1.5mm; }
.px-head-t { font-size: 5mm; font-weight: 800; color: #263238; }
.px-head-s { font-size: 3.2mm; font-weight: 700; color: #7e57c2; }
.px-map { display: grid; gap: .5mm; margin-left: auto; }
.px-map i { width: 3.5mm; height: 3.5mm; border: .3mm solid #90a4ae; background: #fff; }
.px-map i.on { background: #7e57c2; border-color: #4527a0; }
.px-head-f { display: flex; gap: 6mm; font-size: 3.2mm; font-weight: 700; color: #546e7a; margin: 1.5mm 0 2mm; }
.px-head-f span { display: flex; align-items: flex-end; gap: 1mm; flex: 1; }
.px-head-f u { flex: 1; border-bottom: .4mm dotted #90a4ae; text-decoration: none; height: 3.5mm; }
.px-head-f u.s { max-width: 20mm; }

.px-sheet { display: block; }
.px-line { display: flex; align-items: center; }
.px-nums { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 0 .9em; font-weight: 800; color: #37474f; padding-right: 1.8mm; box-sizing: border-box; flex: none; line-height: 1.1; overflow: hidden; white-space: nowrap; }
.px-nums b i { font-style: normal; font-size: .72em; font-weight: 800; color: #5e35b1; vertical-align: super; margin-left: .05em; }
.px-row { display: grid; }
.px-row span { border: .3mm solid #78909c; box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #546e7a; }
.px-row span.ink { background: #212121; }
.px-sheet.small .px-row span { border-width: .25mm; }
.px-sheet.small .px-nums { font-size: 3mm; gap: 1.2mm; }

/* σελίδα οδηγιών */
.px-intro { font-size: 3.6mm; line-height: 1.4; }
.px-i-title { font-size: 8mm; font-weight: 800; color: #4527a0; text-align: center; }
.px-i-sub { font-size: 4mm; font-weight: 700; color: #7e57c2; text-align: center; margin-bottom: 4mm; }
.px-i-h { font-size: 4.6mm; font-weight: 800; color: #4527a0; margin: 4mm 0 1.5mm; border-bottom: .4mm solid #d1c4e9; }
.px-i-p { text-align: justify; }
.px-i-list { margin: 0; padding-left: 6mm; }
.px-i-list li { margin-bottom: 2mm; }
.px-ex { display: flex; align-items: center; justify-content: center; gap: 6mm; margin: 2mm 0; }
.px-ex-t { font-size: 3.2mm; font-weight: 700; color: #78909c; text-align: center; margin-bottom: 1mm; }
.px-ex-ar { font-size: 8mm; color: #7e57c2; }
.px-i-pal { display: flex; flex-wrap: wrap; gap: 1.5mm 5mm; font-size: 3.4mm; font-weight: 700; color: #37474f; }
.px-i-pal span { display: inline-flex; align-items: center; gap: 1.2mm; }
.px-i-pal i { width: 5mm; height: 5mm; border-radius: 1mm; display: inline-block; }
.px-i-tip { margin-top: 4mm; border: .4mm dashed #7e57c2; border-radius: 2mm; background: #f3e5f5; padding: 2mm 2.5mm; font-size: 3.3mm; }
.px-sol { display: flex; flex-wrap: wrap; gap: 5mm; justify-content: center; margin-top: 4mm; }
.px-sol > div { text-align: center; font-size: 3.2mm; font-weight: 700; color: #37474f; width: 38mm; }
.px-sol img { width: 34mm; height: 34mm; object-fit: contain; image-rendering: pixelated; border: .3mm solid #cfd8dc; background: #fff; }
.px-pgno { position: absolute; right: 12mm; bottom: 4mm; font-size: 3.4mm; font-weight: 700; color: #78909c; }

@media print {
  .px-page { font-family: Arial, Helvetica, sans-serif; }
  .px-row span { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* κινητό */
html.mobile .px-list { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
html.mobile .px-title { width: 140px; }