/* ==========================================================================
   QR codes – editor, list, public generator & landing pages
   ========================================================================== */

/* ------------------------------------------------------------- stepper */
.qr-stepper { display: flex; align-items: center; gap: .5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: .6rem .75rem; box-shadow: var(--shadow-sm); }
.qr-step { display: inline-flex; align-items: center; gap: .55rem; border: 0; background: none; padding: .35rem .5rem; border-radius: .6rem; color: var(--muted); font-weight: 600; font-size: .92rem; white-space: nowrap; }
.qr-step:hover:not(:disabled) { color: var(--heading); background: var(--bs-tertiary-bg); }
.qr-step:disabled { opacity: .55; cursor: not-allowed; }
.qr-step-num { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; background: var(--bs-tertiary-bg); border: 1px solid var(--border); transition: all .15s; }
.qr-step.active { color: var(--brand); }
.qr-step.active .qr-step-num { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 0 0 4px var(--brand-soft); }
.qr-step.done .qr-step-num { background: var(--brand-soft); border-color: transparent; color: var(--brand); }
.qr-step-line { flex: 1; height: 2px; background: var(--border); border-radius: 2px; min-width: 12px; }
@media (max-width: 575.98px) { .qr-step-text { display: none; } }

/* ------------------------------------------------------------- type cards */
.qr-type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: .75rem; }
.qr-type-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; text-align: start; gap: .3rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--bs-body-color); transition: border-color .15s, box-shadow .15s, transform .15s; min-height: 150px; }
.qr-type-card:hover:not(:disabled) { border-color: rgba(var(--brand-rgb), .55); box-shadow: var(--shadow); transform: translateY(-1px); }
.qr-type-card.active { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); background: var(--brand-soft); }
.qr-type-card:disabled { opacity: .45; cursor: not-allowed; }
.qr-type-card.locked .qr-type-icon { filter: grayscale(.6); opacity: .7; }
.qr-type-icon { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; background: var(--brand-soft); color: var(--brand); margin-bottom: .25rem; }
.qr-type-card.active .qr-type-icon { background: var(--brand); color: #fff; }
.qr-type-name { font-weight: 600; color: var(--heading); }
.qr-type-desc { font-size: .8rem; color: var(--muted); line-height: 1.35; flex: 1; }
.qr-type-badge { font-size: .68rem; margin-top: .35rem; }
.qr-type-chip { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-soft); color: var(--brand); flex-shrink: 0; font-size: .85rem; }

/* ------------------------------------------------------------- content */
.qr-dynamic-box { border: 1px dashed rgba(var(--brand-rgb), .45); background: color-mix(in srgb, var(--brand) 5%, transparent); border-radius: var(--radius); padding: 1rem 1.1rem; }
.qr-dynamic-box label { cursor: pointer; }
.qr-file-info { display: flex; align-items: center; gap: .75rem; border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem; }
.dropzone.loading, .qr-logo-upload.loading { opacity: .6; pointer-events: none; position: relative; }
.dropzone.loading::after, .qr-logo-upload.loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 1.4rem; height: 1.4rem; margin: -.7rem; border: .2em solid var(--brand); border-right-color: transparent; border-radius: 50%; animation: qr-spin .7s linear infinite; }
@keyframes qr-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------- design */
.qr-design-card .card-header { font-weight: 600; }
.qr-template-row { display: flex; gap: .6rem; overflow-x: auto; padding: .25rem .1rem .5rem; scrollbar-width: thin; }
.qr-template { flex: 0 0 auto; width: 84px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: .4rem .4rem .3rem; display: flex; flex-direction: column; align-items: center; gap: .25rem; transition: all .15s; }
.qr-template:hover:not(:disabled) { border-color: rgba(var(--brand-rgb), .55); transform: translateY(-1px); }
.qr-template.active { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.qr-template:disabled { opacity: .4; }
.qr-template-img { width: 68px; height: 68px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: .45rem; overflow: hidden; }
.qr-template-img svg { width: 100%; height: 100%; }
.qr-template-name { font-size: .7rem; font-weight: 600; color: var(--muted); white-space: nowrap; }

.qr-segment .btn { font-size: .8rem; }
.qr-color .form-control-color { max-width: 3rem; padding: .2rem; }
.qr-color .font-monospace { text-transform: lowercase; }
.qr-swatches { display: flex; flex-wrap: wrap; gap: .4rem; }
.qr-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border); padding: 0; transition: transform .1s; }
.qr-swatch:hover { transform: scale(1.15); }

.qr-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: .6rem; }
.qr-pick { display: flex; flex-direction: column; align-items: center; gap: .3rem; cursor: pointer; margin: 0; }
.qr-pick-box { width: 100%; aspect-ratio: 1; min-height: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; padding: .7rem; color: var(--heading); background: var(--surface); transition: all .15s; }
.qr-pick-box svg { width: 100%; height: 100%; display: block; }
.qr-pick:hover .qr-pick-box { border-color: rgba(var(--brand-rgb), .55); }
.btn-check:checked + .qr-pick-box { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); background: var(--brand-soft); color: var(--brand); }
.btn-check:focus-visible + .qr-pick-box, .btn-check:focus-visible + .qr-logo-box { outline: 2px solid var(--brand); outline-offset: 2px; }
.qr-pick-label { font-size: .72rem; color: var(--muted); text-align: center; line-height: 1.2; }
.qr-frame-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.qr-frame-grid .qr-pick-box { padding: .45rem; background: #fff; }
[data-bs-theme="dark"] .qr-frame-grid .btn-check:checked + .qr-pick-box { background: #fff; }

.qr-logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: .5rem; }
.qr-logo-pick { margin: 0; cursor: pointer; border: 0; background: none; padding: 0; }
.qr-logo-box { aspect-ratio: 1; border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; padding: .55rem; background: var(--surface); transition: all .15s; color: var(--muted); }
.qr-logo-box img { width: 100%; height: 100%; object-fit: contain; }
.qr-logo-pick:hover .qr-logo-box { border-color: rgba(var(--brand-rgb), .55); }
.btn-check:checked + .qr-logo-box { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); background: var(--brand-soft); }
.qr-logo-upload .qr-logo-box { border-style: dashed; color: var(--brand); }
fieldset:disabled .qr-pick, fieldset:disabled .qr-logo-pick { cursor: not-allowed; }

/* ------------------------------------------------------------- preview sidebar */
.qr-sidebar { position: sticky; top: calc(var(--topbar-h) + 1rem); }
.site-body .qr-sidebar { top: 88px; }
.qr-preview-box { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; min-height: 220px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.qr-preview-box.is-transparent { background-color: #fff; background-image: linear-gradient(45deg, #e5e7eb 25%, transparent 25%), linear-gradient(-45deg, #e5e7eb 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e5e7eb 75%), linear-gradient(-45deg, transparent 75%, #e5e7eb 75%); background-size: 18px 18px; background-position: 0 0, 0 9px, 9px -9px, -9px 0; }
.qr-preview-svg { width: 100%; display: flex; align-items: center; justify-content: center; }
.qr-preview-svg svg { width: 100%; max-width: 340px; height: auto; display: block; filter: drop-shadow(0 6px 18px rgba(16, 24, 40, .08)); }
.qr-preview-empty { width: 100%; max-width: 280px; aspect-ratio: 1; border-radius: var(--radius); background: #f3f4f6; display: flex; align-items: center; justify-content: center; font-size: 4rem; color: #d1d5db; }
.qr-warning { display: flex; gap: .5rem; align-items: flex-start; font-size: .8rem; border-radius: .6rem; padding: .5rem .7rem; margin-bottom: .4rem; line-height: 1.35; }
.qr-warning i { margin-top: .1rem; }
.qr-warning-warning { background: rgba(255, 193, 7, .16); color: #8a6100; }
.qr-warning-danger { background: rgba(220, 53, 69, .12); color: #b02a37; }
.qr-warning-info { background: rgba(13, 202, 240, .12); color: #087990; }
[data-bs-theme="dark"] .qr-warning-warning { color: #ffda6a; }
[data-bs-theme="dark"] .qr-warning-danger { color: #ea868f; }
[data-bs-theme="dark"] .qr-warning-info { color: #6edff6; }
.qr-download .btn { font-size: .85rem; }
@media (max-width: 991.98px) { .qr-sidebar { position: static; } }

.qr-fab { position: fixed; right: 16px; bottom: 16px; z-index: 1030; width: 76px; height: 76px; padding: 6px; border-radius: 16px; border: 1px solid var(--border); background: #fff; box-shadow: var(--shadow-lg); transition: opacity .2s, transform .2s; }
.qr-fab span, .qr-fab svg { display: block; width: 100%; height: 100%; }
.qr-fab.qr-fab-hidden { opacity: 0; transform: translateY(12px); pointer-events: none; }
[dir="rtl"] .qr-fab { right: auto; left: 16px; }

/* ------------------------------------------------------------- list */
.qr-card { position: relative; transition: transform .15s ease, box-shadow .15s ease; }
.qr-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.qr-card-check { position: absolute; top: .85rem; left: .85rem; z-index: 2; width: 1.15rem; height: 1.15rem; }
[dir="rtl"] .qr-card-check { left: auto; right: .85rem; }
.qr-card-menu { position: absolute; top: .6rem; right: .6rem; z-index: 3; }
[dir="rtl"] .qr-card-menu { right: auto; left: .6rem; }
.qr-card-thumb { display: flex; align-items: center; justify-content: center; margin: .75rem .75rem 0; padding: 1rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); aspect-ratio: 1 / .82; }
.qr-card-thumb img { max-width: 100%; max-height: 100%; width: auto; height: 100%; object-fit: contain; }
.qr-card .card-footer { padding: .6rem 1.25rem; }
#qr-download-modal .qr-preview-box { min-height: 200px; }
#qr-download-modal .qr-preview-svg svg { max-width: 240px; }

/* ------------------------------------------------------------- public generator */
.qr-hero { padding: 4rem 0 2rem; }
.qr-hero h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); }
.qr-hero .lead { max-width: 720px; margin-left: auto; margin-right: auto; }
.qr-generator-wrap { padding-bottom: 3rem; }
.qr-compare .card { height: 100%; }
.qr-compare .check-list li { font-size: .95rem; }
.qr-faq .accordion-button { font-weight: 600; }
.qr-faq .accordion-button:not(.collapsed) { color: var(--brand); background: var(--brand-soft); box-shadow: none; }
.qr-faq .accordion-item { border-color: var(--border); }
.qr-steps-howto .step-num { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; background: var(--brand); color: #fff; }

/* ------------------------------------------------------------- landing pages (/qr/v, /qr/app) */
.qr-landing-body { background: radial-gradient(1200px 600px at 50% -10%, rgba(var(--brand-rgb), .22), transparent 70%), var(--app-bg); min-height: 100vh; }
.qr-landing { max-width: 460px; margin: 0 auto; padding: 2.5rem 1rem 2rem; }
.qr-landing-card { border-radius: 1.5rem; overflow: hidden; box-shadow: var(--shadow-lg); border: 0; }
.qr-landing-cover { height: 110px; background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 50%, #ff3d9a)); }
.qr-landing-avatar { width: 104px; height: 104px; border-radius: 50%; margin: -56px auto 0; background: var(--surface); border: 5px solid var(--surface); display: flex; align-items: center; justify-content: center; font-size: 2.1rem; font-weight: 800; color: var(--brand); box-shadow: var(--shadow); position: relative; }
.qr-landing-avatar.icon { font-size: 2.6rem; }
.qr-landing-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.qr-landing-action { display: flex; flex-direction: column; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 600; color: var(--bs-body-color); padding: .6rem .2rem; border-radius: .9rem; background: var(--bs-tertiary-bg); transition: all .15s; }
.qr-landing-action i { font-size: 1.25rem; color: var(--brand); }
.qr-landing-action:hover { background: var(--brand-soft); color: var(--brand); }
.qr-landing-list .item { display: flex; gap: .85rem; align-items: flex-start; padding: .8rem 0; border-bottom: 1px solid var(--border); }
.qr-landing-list .item:last-child { border-bottom: 0; }
.qr-landing-list .item i { color: var(--brand); font-size: 1.1rem; margin-top: .1rem; }
.qr-landing-list .label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.qr-landing-list a { word-break: break-word; }
.qr-landing-text { white-space: pre-wrap; word-break: break-word; font-size: 1.05rem; line-height: 1.65; }
.qr-store-btn { display: flex; align-items: center; gap: .85rem; padding: .85rem 1.1rem; border-radius: 1rem; background: #111827; color: #fff; text-align: start; transition: transform .15s, box-shadow .15s; }
.qr-store-btn:hover { color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.qr-store-btn i { font-size: 1.8rem; }
.qr-store-btn small { display: block; font-size: .7rem; opacity: .75; line-height: 1.1; }
.qr-store-btn strong { display: block; font-size: 1.05rem; line-height: 1.2; }
.qr-store-btn.highlight { background: var(--brand); }
.qr-landing-footer { text-align: center; font-size: .8rem; color: var(--muted); margin-top: 1.5rem; }
.qr-landing-footer a { color: var(--muted); font-weight: 600; }