/* /domains/qcod.us/public_html/assets/css/qcod.css
   Ajustes próprios do QCOD por cima do tema (assets/css/style.css, copiado da locabytes).
   Mantido separado para o tema poder ser atualizado sem perder estes ajustes. */

/* iOS Safari amplia a página ao focar um campo com fonte menor que 16px, o que empurra
   botões (ex.: "Salvar" do modal) para fora da tela. Com 16px nos campos o zoom não
   acontece, sem bloquear o zoom manual do usuário (acessibilidade).
   Vale para telas pequenas e para qualquer dispositivo de toque. */
@media (max-width: 767.98px), (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
    select,
    textarea,
    .form-control,
    .form-select {
        font-size: 16px !important;
    }
}

/* ---------------------------------------------------------------------
   Editor de QR Code em 3 passos (/painel/qrcodes.php)
   --------------------------------------------------------------------- */

/* indicador dos passos (1 Tipo > 2 Informações > 3 Desenho) */
.qr-steps {
    display: flex;
    gap: 0.25rem;
    margin: 0 auto 0 1rem;
    padding: 0;
    list-style: none;
}
.qr-steps button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.8rem 0.35rem 0.4rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 2rem;
    background: transparent;
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.85rem;
}
.qr-steps button span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 1px solid currentColor;
    font-size: 0.75rem;
    font-weight: 600;
}
.qr-steps button.done { color: var(--bs-primary, #6571ff); }
.qr-steps button.active {
    color: var(--bs-primary, #6571ff);
    border-color: var(--bs-primary, #6571ff);
    font-weight: 600;
}
.qr-steps button.active span { background: var(--bs-primary, #6571ff); border-color: var(--bs-primary, #6571ff); color: #fff; }

/* passo 1: cartões de tipo */
.qr-type-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    height: 100%;
    padding: 0.9rem 1rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.6rem;
    background: transparent;
    color: inherit;
    text-align: left;
}
.qr-type-card:hover,
.qr-type-card.active { border-color: var(--bs-primary, #6571ff); background: rgba(101, 113, 255, 0.07); }
.qr-type-card > i,
.qr-type-card > svg { flex: 0 0 auto; width: 1.6rem; height: 1.6rem; color: var(--bs-primary, #6571ff); }
.qr-type-text { display: flex; flex-direction: column; min-width: 0; }
.qr-type-text small { color: var(--bs-secondary-color, #6c757d); line-height: 1.25; }

/* passo 3: botões com a miniatura do formato */
.qr-picks { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.qr-pick {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.25rem;
    width: 5.2rem;
    padding: 0.5rem 0.3rem 0.35rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    background: transparent;
    color: var(--bs-body-color, #212529);
}
.qr-pick:hover { border-color: var(--bs-primary, #6571ff); }
.qr-pick.active { border-color: var(--bs-primary, #6571ff); background: rgba(101, 113, 255, 0.1); box-shadow: 0 0 0 1px var(--bs-primary, #6571ff); }
.qr-pick svg,
.qr-pick img { width: 3rem; height: 3rem; }
.qr-pick > i[data-lucide],
.qr-pick > svg.lucide { width: 2rem; height: 2rem; margin: 0.5rem 0; opacity: 0.6; }
.qr-pick span { font-size: 0.68rem; line-height: 1.15; text-align: center; color: var(--bs-secondary-color, #6c757d); }
.qr-picks-frames .qr-pick { width: 6rem; }
.qr-picks-frames .qr-pick img { width: 4.2rem; height: 4.2rem; background: #fff; border-radius: 0.25rem; }

/* amostras de gradiente */
.qr-grad { display: block; width: 3rem; height: 3rem; border-radius: 0.35rem; border: 1px solid var(--bs-border-color, #dee2e6); }
.qr-grad-linear_h { background: linear-gradient(to right, #0b3d91, #7b1fa2); }
.qr-grad-linear_v { background: linear-gradient(to bottom, #0b3d91, #7b1fa2); }
.qr-grad-diagonal { background: linear-gradient(135deg, #0b3d91, #7b1fa2); }
.qr-grad-radial { background: radial-gradient(circle, #0b3d91, #7b1fa2); }

/* o QR sempre sobre fundo claro na pré-visualização, mesmo no tema escuro (o QR é impresso em papel) */
.qr-preview-box { background: #fff; }

@media (max-width: 575.98px) {
    .qr-steps { margin-left: 0; order: 3; width: 100%; }
    .qr-steps button { padding-right: 0.55rem; }
}