/* JobRojgar ID Card Maker (/cyber-cafe/id-card-maker). Builds on cc.css (tokens --cc-*). */
.idc { max-width: 1320px; }
.idc .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.idc h3 { font-size: 15px; margin: 14px 0 6px; }

/* ---- start ---- */
.idc-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.idc-mode { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; padding: 22px; border: 2px solid var(--cc-border); border-radius: 18px; background: var(--cc-card); box-shadow: var(--cc-shadow); cursor: pointer; font: inherit; color: inherit; transition: border-color .15s, transform .15s; }
.idc-mode:hover { border-color: var(--cc-primary); transform: translateY(-2px); }
.idc-mode b { font-size: 19px; }
.idc-mode > span:not(.cc-btn):not(.idc-mode-ico) { color: var(--cc-muted); line-height: 1.5; flex: 1; }
.idc-mode-ico { width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--cc-primary-light); color: var(--cc-primary); font-size: 24px; }
.idc-mode.is-bulk .idc-mode-ico { background: #dcfce7; color: #15803d; }
.idc-mode .cc-btn { pointer-events: none; }
.idc-resume { margin: 12px 0 0; color: var(--cc-muted); font-size: 14px; }
.idc-feats { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px 18px; }
.idc-feats li { display: flex; gap: 10px; align-items: baseline; font-size: 14px; color: var(--cc-text); }
.idc-feats i { color: var(--cc-primary); width: 16px; text-align: center; }

/* ---- stepper + nav ---- */
.idc-top { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.idc-steps { display: flex; gap: 6px; overflow-x: auto; flex: 1; padding-bottom: 2px; scrollbar-width: thin; }
.idc-pill { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 7px 13px 7px 7px; border-radius: 999px; border: 1px solid var(--cc-border); background: var(--cc-card); font: inherit; font-size: 13.5px; font-weight: 600; color: var(--cc-muted); cursor: pointer; }
.idc-pill b { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--cc-soft); font-size: 12px; }
.idc-pill.is-on { background: var(--cc-primary); border-color: var(--cc-primary); color: #fff; }
.idc-pill.is-on b { background: #fff; color: var(--cc-primary); }
.idc-pill.is-done { color: var(--cc-ok); border-color: #bbf7d0; background: #f0fdf4; }
.idc-pill.is-done b { background: var(--cc-ok); color: #fff; }
.idc-pill[disabled] { opacity: .55; cursor: default; }
.idc-nav { display: flex; align-items: center; gap: 12px; margin-top: 16px; position: sticky; bottom: 0; background: linear-gradient(transparent, var(--cc-soft) 30%); padding: 14px 0 10px; z-index: 5; }
.idc-nav .cc-msg { flex: 1; margin: 0; }
.idc-nav #idcNext { margin-left: auto; }
.idc-step h2 small { font-weight: 500; }

/* ---- templates ---- */
.idc-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.idc-tpl { display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 2px solid var(--cc-border); border-radius: 14px; background: var(--cc-card); cursor: pointer; font: inherit; color: inherit; text-align: left; }
.idc-tpl:hover { border-color: #a5b4fc; }
.idc-tpl.is-on { border-color: var(--cc-primary); box-shadow: 0 0 0 3px var(--cc-primary-light); }
.idc-tpl-img { display: flex; align-items: center; justify-content: center; height: 150px; background: var(--cc-soft); border-radius: 10px; padding: 8px; }
.idc-tpl-img canvas { max-width: 100%; max-height: 134px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.idc-tpl small { color: var(--cc-muted); }
.idc-tpl-more { margin-top: 14px; }
.idc-tpl-more label.cc-btn { cursor: pointer; }

/* ---- data / mapping ---- */
.idc-two { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.idc-help { background: var(--cc-soft); border-radius: 14px; padding: 14px 16px; }
.idc-help h3 { margin-top: 0; }
.idc-filebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 8px; font-weight: 600; }
.idc-filebar i { color: var(--cc-ok); }
.idc-tablewrap { overflow: auto; max-height: 460px; border: 1px solid var(--cc-border); border-radius: 12px; }
.idc-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.idc-table th, .idc-table td { padding: 7px 10px; border-bottom: 1px solid var(--cc-border); text-align: left; vertical-align: middle; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.idc-table thead th { position: sticky; top: 0; background: var(--cc-soft); font-weight: 700; z-index: 1; }
.idc-table tr.is-bad td { background: #fff7f7; }
.idc-table tr.is-off td { opacity: .5; }
.idc-map td:first-child b { display: block; }
.idc-map tr.is-used td:first-child { box-shadow: inset 3px 0 0 var(--cc-primary); }
.idc-map tr.is-dup select { border-color: var(--cc-bad); }
.idc-map select { min-width: 180px; }
.idc-map td small { display: block; white-space: normal; }
.idc-sample { color: var(--cc-muted); }
.idc-tag { display: inline-block; margin-top: 2px; padding: 1px 7px; border-radius: 999px; background: var(--cc-primary-light); color: var(--cc-primary); font-size: 11px; font-weight: 700; }
.idc-tag.is-custom { background: #fef3c7; color: #92400e; margin-left: 4px; }
.idc-bad { color: var(--cc-bad); }
.idc-warn { color: #b45309; }
.idc-ok { color: var(--cc-ok); }
.idc-table td .idc-bad, .idc-table td .idc-warn { white-space: normal; }
.idc-unused { margin-top: 14px; padding: 12px 14px; border: 1px dashed var(--cc-border); border-radius: 12px; }
.idc-unused ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.idc-unused li { display: flex; align-items: center; gap: 10px; }
.idc-unused li span { font-weight: 600; }
.idc-unused li small { color: var(--cc-muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idc-sub { display: flex; gap: 10px; align-items: baseline; }
.idc-sub small { color: var(--cc-muted); font-weight: 500; }

/* ---- photos ---- */
.idc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.idc-chip { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--cc-border); background: var(--cc-card); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--cc-text); }
.idc-chip.is-on { background: #1e2432; color: #fff; border-color: #1e2432; }
.idc-chip.is-warn:not(.is-on) { border-color: #fcd34d; background: #fffbeb; }
.idc-chip.is-bad:not(.is-on) { border-color: #fca5a5; background: #fef2f2; color: var(--cc-bad); }
.idc-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.idc-ph { display: flex; flex-direction: column; gap: 3px; padding: 8px; border: 1px solid var(--cc-border); border-radius: 12px; background: var(--cc-card); font-size: 12.5px; min-width: 0; }
.idc-ph img, .idc-ph-none { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; background: var(--cc-soft); display: flex; align-items: center; justify-content: center; color: #b8bec9; font-size: 34px; }
.idc-ph.is-warn { border-color: #fcd34d; }
.idc-ph.is-bad { border-color: #fca5a5; }
.idc-ph b, .idc-ph small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idc-ph small { color: var(--cc-muted); }
.idc-ph-actions { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.idc-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; max-height: 50vh; overflow: auto; margin: 10px 0; }
.idc-pick-item { display: flex; flex-direction: column; gap: 3px; padding: 5px; border: 2px solid var(--cc-border); border-radius: 10px; background: var(--cc-card); cursor: pointer; font: inherit; font-size: 11.5px; }
.idc-pick-item.is-on { border-color: var(--cc-primary); }
.idc-pick-item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; }
.idc-pick-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idc-crop { max-height: 60vh; }
.idc-crop img { max-width: 100%; display: block; }

/* ---- single details ---- */
.idc-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.idc-form textarea, .idc-edit input, .idc textarea { width: 100%; border: 1px solid var(--cc-border); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 14px; resize: vertical; background: #fff; color: var(--cc-text); }
.idc-single-photo { margin-top: 8px; }
.idc-single-photo-row { display: flex; gap: 12px; align-items: flex-start; }
.idc-single-photo-box { width: 90px; height: 112px; border-radius: 10px; background: var(--cc-soft); overflow: hidden; flex: none; border: 1px solid var(--cc-border); }
.idc-single-photo-box img { width: 100%; height: 100%; object-fit: cover; }
.cc-drop.is-small { padding: 12px; }
.cc-drop.is-small i { font-size: 20px; }
.idc-mini-prev { display: grid; gap: 10px; }
.idc-mini-prev canvas, .idc-mini { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, .15); background: #fff; }

/* ---- designer ---- */
.idc-design { padding: 14px; }
.idc-dbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.idc-sep { width: 1px; height: 24px; background: var(--cc-border); margin: 0 4px; }
.idc-recnav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; padding: 8px 10px; border-radius: 12px; background: var(--cc-primary-light); }
.idc-recnav b { min-width: 160px; }
.idc-recnav input { margin-left: auto; max-width: 220px; }
.idc-dgrid { display: grid; grid-template-columns: 224px minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.idc-left, .idc-right { background: var(--cc-soft); border-radius: 12px; padding: 10px; max-height: calc(100vh - 210px); overflow: auto; position: sticky; top: 90px; }
.idc-prop-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--cc-muted); margin: 6px 0 6px; }
.idc-prop-title small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.idc-add { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 8px; }
.idc-add .cc-btn { justify-content: flex-start; padding: 6px 8px; font-size: 12.5px; gap: 6px; white-space: nowrap; overflow: hidden; }
.idc-left select { width: 100%; margin-bottom: 4px; }
.idc-layers { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 3px; }
.idc-layers li { display: flex; align-items: center; gap: 2px; border-radius: 8px; }
.idc-layers li.is-sel { background: var(--cc-primary-light); }
.idc-layers li.is-hidden .idc-layer { opacity: .5; }
.idc-layer { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; padding: 6px 7px; border: 0; background: none; font: inherit; font-size: 13px; text-align: left; cursor: pointer; color: inherit; border-radius: 8px; }
.idc-layer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idc-layer small { color: var(--cc-muted); font-size: 11px; margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70px; }
.idc-layer i { width: 14px; text-align: center; color: var(--cc-muted); }
.idc-ico { width: 28px; height: 28px; border: 0; border-radius: 7px; background: none; color: var(--cc-muted); cursor: pointer; }
.idc-ico:hover { background: #fff; color: var(--cc-text); }
.idc-stagewrap { min-width: 0; display: flex; flex-direction: column; align-items: center; }
.idc-stage { position: relative; margin: 6px auto; background-image: linear-gradient(45deg, #f1f2f6 25%, transparent 25%), linear-gradient(-45deg, #f1f2f6 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f1f2f6 75%), linear-gradient(-45deg, transparent 75%, #f1f2f6 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; padding: 12px; border-radius: 12px; }
.idc-stage canvas { display: block; box-shadow: 0 6px 24px rgba(17, 24, 39, .22); border-radius: 4px; }
.idc-overlay { position: absolute; left: 12px; top: 12px; touch-action: none; }
.idc-box { position: absolute; outline: 1px dashed rgba(79, 70, 229, 0); cursor: move; }
.idc-overlay:hover .idc-box { outline-color: rgba(79, 70, 229, .35); }
.idc-box.is-sel { outline: 2px solid var(--cc-primary); outline-offset: 0; }
.idc-box.is-locked { cursor: default; }
.idc-hd { position: absolute; width: 10px; height: 10px; background: #fff; border: 2px solid var(--cc-primary); border-radius: 3px; margin: -5px 0 0 -5px; }
.idc-hd.is-nw { left: 0; top: 0; cursor: nwse-resize; } .idc-hd.is-n { left: 50%; top: 0; cursor: ns-resize; } .idc-hd.is-ne { left: 100%; top: 0; cursor: nesw-resize; }
.idc-hd.is-e { left: 100%; top: 50%; cursor: ew-resize; } .idc-hd.is-se { left: 100%; top: 100%; cursor: nwse-resize; } .idc-hd.is-s { left: 50%; top: 100%; cursor: ns-resize; }
.idc-hd.is-sw { left: 0; top: 100%; cursor: nesw-resize; } .idc-hd.is-w { left: 0; top: 50%; cursor: ew-resize; }
.idc-right .cc-field { margin-bottom: 8px; }
.idc-right .cc-row { gap: 8px; }
.idc-pos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; }
.idc-const { display: block; width: 100%; margin-top: 4px; font-size: 13px; padding: 5px 8px; border: 1px dashed var(--cc-border); border-radius: 8px; }
.idc-num input { width: 100%; }
.idc-prop-head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.idc-prop-head input { flex: 1; font-weight: 700; }
.idc-bind { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.idc-bind select { width: 100%; font-size: 12.5px; }
.idc-toggles { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
.idc-toggles .cc-btn.is-on { background: var(--cc-primary); color: #fff; border-color: var(--cc-primary); }
.idc-colrow { display: flex; align-items: center; gap: 6px; }
.idc-none { font-size: 12px; margin: 0; }
.idc-prop-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--cc-border); }
.idc-danger { color: var(--cc-bad) !important; }

/* ---- review ---- */
.idc-revbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.idc-revbar input { min-width: 240px; }
.idc-rev td { white-space: normal; }
.idc-rev td b, .idc-rev td small { display: block; }
.idc-rev td small { color: var(--cc-muted); }
.idc-rev-ph { width: 38px; height: 46px; object-fit: cover; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; background: var(--cc-soft); color: #b8bec9; }
.idc-rev-act { display: flex; gap: 4px; }
.idc-pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; }
.idc-preview2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.idc-preview2 figure { margin: 0; text-align: center; }
.idc-preview2 canvas { width: 100%; height: auto; border-radius: 6px; box-shadow: 0 4px 16px rgba(0, 0, 0, .18); }
.idc-preview2 figcaption { color: var(--cc-muted); font-size: 13px; margin-top: 6px; }
.idc-edit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }

/* ---- export ---- */
.idc-xbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.idc-run { margin-top: 14px; }
.idc-progress { height: 10px; }
.idc-progress span { transition: width .2s; }
.idc-outputs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.idc-outputs li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--cc-border); border-radius: 10px; }
.idc-outputs li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.idc-outputs li small { color: var(--cc-muted); }
.idc-a4 { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.idc-a4 canvas { max-width: 100%; height: auto !important; box-shadow: 0 2px 12px rgba(0, 0, 0, .15); }

/* ---- modal ---- */
.idc-modal .cc-modal-box { position: relative; max-width: 560px; }
.idc-modal.is-wide .cc-modal-box { max-width: 900px; }
.idc-modal-x { position: absolute; right: 10px; top: 10px; width: 34px; height: 34px; border: 0; border-radius: 10px; background: var(--cc-soft); cursor: pointer; }
.idc-modal h2 { margin-right: 40px; }
.idc-modal input[type="search"] { width: 100%; }

/* ---- smaller screens ---- */
@media (max-width: 1100px) {
    .idc-dgrid { grid-template-columns: 190px minmax(0, 1fr); }
    .idc-right { grid-column: 1 / -1; position: static; max-height: none; }
}
@media (max-width: 760px) {
    .idc-modes, .idc-two, .idc-form, .idc-edit { grid-template-columns: 1fr; }
    .idc-dgrid { grid-template-columns: 1fr; }
    .idc-left { position: static; max-height: none; }
    .idc-add { grid-template-columns: repeat(3, 1fr); }
    .idc-top { flex-direction: column; align-items: stretch; }
    .idc-recnav input { margin-left: 0; max-width: none; width: 100%; }
    .idc-stagewrap { order: -1; }
    .idc-layers { max-height: 220px; overflow: auto; }
    .idc-left, .idc-right { padding: 8px; }
    .idc-nav { flex-wrap: wrap; }
    .idc-nav .cc-msg { order: 3; flex-basis: 100%; }
    .idc-tpls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .idc-tpl-img { height: 110px; }
}

/* ---- template gallery filters ---- */
.idc-tplbar { margin-bottom: 14px; }
.idc-tplbar .idc-chips { margin: 0 0 10px; }
.idc-chip small { margin-left: 4px; font-size: 11px; opacity: .7; }
.idc-tplbar-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.idc-tplbar-row input[type="search"] { flex: 1; min-width: 220px; max-width: 420px; }
.idc-tpl small { line-height: 1.4; }

/* ---- phones: no app bottom menu over the wizard; room for the home-indicator area ---- */
body.idc-wizard-on .idc-bottom-menu, body.idc-wizard-on .appBottomMenu, body.idc-wizard-on .jr-bottom-menu-space { display: none !important; }
.idc-nav { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
.idc-steps { position: relative; scroll-behavior: smooth; }
@media (max-width: 760px) {
    /* in the wizard the page intro is not needed again - the step itself starts near the top */
    body.idc-wizard-on .idc .cc-head { display: none; }
    body.idc-wizard-on .idc .cc-crumbs { margin-bottom: 8px; }
    .idc { padding-top: 76px; }
    .idc-top { flex-direction: row; align-items: center; gap: 8px; }
    .idc-top #idcHome { flex: none; }
    .idc-top #idcHome span, .idc-top #idcHome { font-size: 0; padding: 0 12px; height: 38px; }
    .idc-top #idcHome i { font-size: 15px; }
    .idc-pill { padding: 6px 11px 6px 6px; font-size: 13px; }
    .idc-design { padding: 10px; }
    .idc-dbar { gap: 6px; }
    .idc-dbar .idc-sep { display: none; }
    .idc-dbar .cc-btn.is-small { padding: 6px 9px; font-size: 12.5px; }
    .idc-recnav { padding: 6px 8px; gap: 6px; }
    .idc-recnav > .cc-label { display: none; }
    .idc-recnav b { min-width: 0; flex: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .idc-step.cc-card { padding: 14px; }
}