/*
 * Cargo no Discord — painel do cliente.
 *
 * Esta folha é injetada dentro do tema da loja, então ela não pode apenas
 * propor cores: precisa vencê-las. O tema pinta `button` e `a` com a própria
 * paleta, e sem a blindagem abaixo o botão azul do Discord aparecia com texto
 * vermelho. Onde há `!important` é sempre por isso — nunca por preguiça de
 * seletor.
 *
 * A tela responde a uma pergunta por pedido: "e o meu cargo?". Cada compra é
 * um cartão com um estado só, anunciado em duas camadas — a etiqueta e a faixa
 * lateral — para a resposta chegar antes da leitura.
 */

.blz-di-account {
    --di-cyan: var(--blz-cyan, #22d3ee);
    --di-success: #4ade80;
    --di-warning: #fbbf24;
    --di-danger: #f87171;
    --di-info: #93a4bd;
    --di-surface: rgba(255, 255, 255, .022);
    --di-surface-soft: rgba(255, 255, 255, .035);
    --di-text: var(--blz-text, #cbd5e1);
    --di-muted: var(--blz-text-muted, #94a3b8);
    --di-dim: var(--blz-text-dim, #64748b);
    --di-white: var(--blz-text-white, #fff);
    --di-border: rgba(255, 255, 255, .09);
    --di-radius: var(--blz-radius-lg, 12px);

    /* Coluna de leitura: o painel é largo, o texto não deve ser. */
    max-width: 780px;
    color: var(--di-text);
    font-family: var(--blz-font-main, inherit);
    font-size: 15px;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.blz-di-account *,
.blz-di-account *::before,
.blz-di-account *::after { box-sizing: border-box; }

.blz-di-lead {
    margin: 0;
    max-width: 62ch;
    color: var(--di-muted);
    font-size: 15px;
}

/* ---------- Etapas ---------- */

.blz-di-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0;
}

.blz-di-step {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 14px;
    align-items: start;
    padding: 0 0 20px;
    position: relative;
}

.blz-di-step:last-child { padding-bottom: 0; }

/* Fio que costura as etapas: encosta no número e some antes da próxima. */
.blz-di-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 12.5px;
    top: 32px;
    bottom: 6px;
    width: 1px;
    background: var(--di-border);
}

.blz-di-step-num {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin-top: 1px;
    border-radius: 50%;
    background: rgba(34, 211, 238, .1);
    border: 1px solid rgba(34, 211, 238, .3);
    color: var(--di-cyan) !important;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.blz-di-step-body { display: grid; gap: 5px; min-width: 0; }

.blz-di-step-body strong {
    color: var(--di-white);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

.blz-di-step-body span {
    color: var(--di-muted);
    font-size: 14px;
    line-height: 1.6;
    max-width: 60ch;
}

.blz-di-invite {
    justify-self: start;
    margin-top: 10px;
    padding: 10px 18px;
    border: 0;
    border-radius: var(--blz-radius-md, 10px);
    background: var(--blz-discord, #5865f2);
    /* O tema pinta links com a própria cor; aqui o contraste é obrigatório. */
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background-color .2s ease, transform .2s ease;
}

.blz-di-invite:hover,
.blz-di-invite:focus-visible {
    background: #4752c4;
    color: #fff !important;
    transform: translateY(-1px);
}

/* ---------- Cartão do pedido ---------- */

.blz-di-order {
    position: relative;
    padding: 18px 20px 18px 22px;
    border: 1px solid var(--di-border);
    border-radius: var(--di-radius);
    background: var(--di-surface);
    overflow: hidden;
}

.blz-di-order::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--di-info);
}

.blz-di-order.is-action::before { background: var(--di-cyan); }
.blz-di-order.is-success::before { background: var(--di-success); }
.blz-di-order.is-pending::before { background: var(--di-warning); }
.blz-di-order.is-sent::before { background: var(--di-info); }
.blz-di-order.is-review::before { background: var(--di-danger); }

/*
 * Número, data e etiqueta pertencem à mesma frase — "o pedido tal, daquele
 * dia, está assim". Ficavam nas duas pontas de um cartão largo, e o olho
 * precisava atravessar o vazio para ligar uma coisa à outra.
 */
.blz-di-order-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
}

.blz-di-order-id { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }

.blz-di-order-id strong {
    color: var(--di-white);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .01em;
}

.blz-di-order-id time {
    color: var(--di-dim);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.blz-di-badge {
    padding: 3px 10px;
    border-radius: var(--blz-radius-pill, 100px);
    border: 1px solid transparent;
    background: rgba(255, 255, 255, .05);
    color: var(--di-info) !important;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.6;
    white-space: nowrap;
}

.blz-di-badge.is-action { color: var(--di-cyan) !important; border-color: rgba(34, 211, 238, .28); background: rgba(34, 211, 238, .08); }
.blz-di-badge.is-success { color: var(--di-success) !important; border-color: rgba(74, 222, 128, .28); background: rgba(74, 222, 128, .08); }
.blz-di-badge.is-pending { color: var(--di-warning) !important; border-color: rgba(251, 191, 36, .28); background: rgba(251, 191, 36, .08); }
.blz-di-badge.is-sent { color: var(--di-info) !important; border-color: rgba(147, 164, 189, .26); background: rgba(147, 164, 189, .08); }
.blz-di-badge.is-review { color: var(--di-danger) !important; border-color: rgba(248, 113, 113, .28); background: rgba(248, 113, 113, .08); }

.blz-di-items { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }

.blz-di-items li {
    padding-left: 16px;
    position: relative;
    color: var(--di-text);
    font-size: 14px;
    line-height: 1.55;
}

.blz-di-items li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .6em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--di-dim);
}

/* ---------- Ação ---------- */

.blz-di-activate-row {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--di-border);
    display: grid;
    gap: 8px;
}

.blz-di-activate-row label {
    color: var(--di-muted);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Campo e ação na mesma linha, com o botão do tamanho do seu texto. */
.blz-di-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: stretch;
    max-width: 560px;
}

.blz-di-account input[type="text"] {
    width: 100%;
    min-width: 0;
    height: 46px;
    margin: 0;
    padding: 0 14px;
    color: var(--di-white) !important;
    border: 1px solid rgba(148, 163, 184, .22) !important;
    border-radius: var(--blz-radius-md, 10px) !important;
    background: rgba(2, 8, 23, .6) !important;
    box-shadow: none;
    font-family: var(--blz-font-mono, monospace);
    font-size: 15px;
    letter-spacing: .1em;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.blz-di-account input[type="text"]::placeholder {
    color: rgba(148, 163, 184, .38);
    letter-spacing: .1em;
}

.blz-di-account input[type="text"]:focus {
    outline: none;
    border-color: rgba(34, 211, 238, .55) !important;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, .12);
}

.blz-di-account input[type="text"].is-valid { border-color: rgba(74, 222, 128, .45) !important; }
.blz-di-account input[type="text"]:disabled { opacity: .55; }

.blz-di-account .blz-di-submit {
    height: 46px;
    margin: 0;
    padding: 0 22px;
    border: 0 !important;
    border-radius: var(--blz-radius-md, 10px) !important;
    background: var(--blz-discord, #5865f2) !important;
    /* O tema pinta o texto de todo `button`; sem isto o rótulo saía vermelho. */
    color: #fff !important;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease, opacity .2s ease;
}

.blz-di-account .blz-di-submit:hover:not(:disabled),
.blz-di-account .blz-di-submit:focus-visible:not(:disabled) {
    background: #4752c4 !important;
    color: #fff !important;
    transform: translateY(-1px);
}

.blz-di-account .blz-di-submit:disabled {
    background: rgba(88, 101, 242, .3) !important;
    color: rgba(255, 255, 255, .55) !important;
    cursor: not-allowed;
    transform: none;
}

.blz-di-hint { margin: 0; color: var(--di-dim); font-size: 12.5px; }

/*
 * O bloco guarda todas as mensagens possíveis, já traduzidas com a página;
 * só uma fica visível por vez. `[hidden]` precisa vencer o `display` que o
 * tema costuma dar a parágrafos.
 */
.blz-di-feedback { margin: 0; font-size: 13.5px; line-height: 1.5; }
.blz-di-feedback .blz-di-msg { margin: 0; }
.blz-di-feedback .blz-di-msg[hidden] { display: none !important; }
.blz-di-feedback.is-error { color: var(--di-danger); }
.blz-di-feedback.is-busy { color: var(--di-muted); }
.blz-di-feedback.is-success { color: var(--di-success); }

/* ---------- Estados ---------- */

.blz-di-state {
    margin: 14px 0 0;
    padding: 12px 14px;
    border-radius: var(--blz-radius-md, 10px);
    background: var(--di-surface-soft);
    color: var(--di-text);
    font-size: 14px;
    line-height: 1.6;
}

.blz-di-state.is-success { color: #bbf7d0; background: rgba(74, 222, 128, .07); }
.blz-di-state.is-pending { color: #fde68a; background: rgba(251, 191, 36, .07); }
.blz-di-state.is-sent { color: var(--di-text); background: rgba(255, 255, 255, .035); }
.blz-di-state.is-review { color: #fecaca; background: rgba(248, 113, 113, .07); }

/* O ID mascarado é um dado, não parte da frase: ganha respiro e caixa própria. */
.blz-di-mask {
    display: inline-block;
    margin: 0 2px;
    padding: 1px 8px;
    border-radius: 5px;
    background: rgba(0, 0, 0, .3);
    color: var(--di-white);
    font-family: var(--blz-font-mono, monospace);
    font-size: 12.5px;
    letter-spacing: .12em;
    white-space: nowrap;
    vertical-align: baseline;
}

/* ---------- Vazio e paginação ---------- */

.blz-di-empty {
    padding: 30px 22px;
    border: 1px dashed var(--di-border);
    border-radius: var(--di-radius);
    background: var(--di-surface);
    display: grid;
    gap: 6px;
    text-align: center;
}

.blz-di-empty strong { color: var(--di-white); font-size: 15px; font-weight: 600; }
.blz-di-empty span { color: var(--di-muted); font-size: 14px; max-width: 52ch; margin: 0 auto; }

.blz-di-pagination {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

.blz-di-pagination a { color: var(--di-cyan) !important; font-weight: 600; text-decoration: none; }
.blz-di-pagination a:hover { text-decoration: underline; }
.blz-di-pagination span { color: var(--di-dim); font-size: 13px; }

/* ---------- Telas estreitas ---------- */

@media (max-width: 640px) {
    .blz-di-order { padding: 16px 16px 16px 18px; }
    .blz-di-field { grid-template-columns: minmax(0, 1fr); }
    .blz-di-account .blz-di-submit { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .blz-di-account * { transition: none !important; }
    .blz-di-invite:hover,
    .blz-di-account .blz-di-submit:hover:not(:disabled) { transform: none; }
}