/* -----------------------------------------------------------------------------
 * QR Code generator — responsive layout.
 * Mobile-first considerations:
 *   - Controls first, preview second (natural read/edit/see flow).
 *   - Buttons full-width on small screens for proper 44px tap targets.
 *   - Color pickers stack on very narrow screens.
 *   - Preview scales fluidly via aspect-ratio + max-width.
 * ----------------------------------------------------------------------------- */

.qr-tool {
    padding: clamp(14px, 3vw, 24px);
}

.qr-tool__layout {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    align-items: start;
}

@media (max-width: 860px) {
    .qr-tool__layout {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
}

/* ------- Color pickers row ------- */
.form-group--inline {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr 1fr;
}
.form-group--inline > div { min-width: 0; }
.form-group--inline input[type=color] {
    width: 100%;
    height: 44px;
    padding: 4px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border);
    background: var(--c-surface);
}
@media (max-width: 400px) {
    .form-group--inline { grid-template-columns: 1fr; }
}

/* ------- File input behaves nicely on iOS/Android ------- */
#qr-logo {
    max-width: 100%;
    font-size: .95rem;
}
#qr-logo-options {
    margin-top: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: stretch;
}
#qr-logo-size { width: 100%; }
#qr-logo-remove { min-height: 44px; }

/* ------- Action buttons: wrap, take full width on narrow screens ------- */
.qr-tool__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}
.qr-tool__buttons .btn {
    flex: 1 1 140px;
    min-height: 44px;
    justify-content: center;
}
@media (max-width: 480px) {
    .qr-tool__buttons .btn { flex: 1 1 100%; }
}

/* ------- Preview panel ------- */
.qr-tool__preview {
    background: var(--c-surface-2);
    border: 1px dashed var(--c-border);
    border-radius: var(--radius);
    padding: clamp(12px, 3vw, var(--space-4));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}
.qr-preview {
    width: min(360px, 100%);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
/* qr-code-styling renders <canvas> or <svg> at fixed pixel dimensions —
   force them to fill the responsive wrapper. */
.qr-preview canvas,
.qr-preview svg {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
}
@media (max-width: 480px) {
    .qr-preview { width: min(280px, 100%); }
}

.qr-tool__caption {
    text-align: center;
    font-size: .9rem;
    margin: 0;
    line-height: 1.4;
}

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}