/* ===========================================================================
   Askio Frontoffice — estilos globais mínimos. A moldura, os tokens e o chrome
   Radzen vêm de _content/Askio.Shared.Components/css/shared-form-layout.css;
   os ecrãs usam CSS isolado (Askio.Frontoffice.styles.css).
   =========================================================================== */

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    background: var(--shared-form-background);
    color: var(--shared-form-foreground);
    font-family: var(--shared-form-font);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1:focus,
h1:focus-visible {
    outline: none;
}

/* ---------------------------------------------------------------------------
   Indicador de carregamento de marca: o mesmo no arranque (index.html) e no
   LoadingIndicator, anel na cor primária com o favicon ao centro.
   --------------------------------------------------------------------------- */
.askio-loader {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
    color: var(--shared-form-foreground);
    font-family: var(--shared-form-font);
    background:
        radial-gradient(56rem 28rem at 50% -10rem, color-mix(in srgb, var(--shared-form-primary) 22%, transparent), transparent 68%),
        linear-gradient(165deg, color-mix(in srgb, var(--shared-form-background) 82%, white) 0%, var(--shared-form-background) 50%);
}

.askio-loader-ring {
    position: relative;
    width: 6.5rem;
    height: 6.5rem;
}

.askio-loader-ring svg {
    width: 100%;
    height: 100%;
    animation: askio-loader-spin 1.1s linear infinite;
}

.askio-loader-ring circle {
    fill: none;
    stroke-width: 5;
}

.askio-loader-track {
    stroke: color-mix(in srgb, var(--shared-form-foreground) 10%, transparent);
}

.askio-loader-arc {
    stroke: var(--shared-form-primary);
    stroke-linecap: round;
    stroke-dasharray: 66 264;
}

.askio-loader-logo {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 2.75rem;
    height: 2.75rem;
    object-fit: contain;
    transform: translate(-50%, -50%);
}

.askio-loader-text {
    margin: 0;
    font-size: 0.875rem;
    opacity: 0.65;
}

@keyframes askio-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .askio-loader-ring svg {
        animation-duration: 3s;
    }
}

/* Erro fatal do Blazor (fora dos componentes). */
#blazor-error-ui {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    z-index: 1000;
    display: none;
    align-items: center;
    gap: 1rem;
    max-width: calc(100% - 2rem);
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background: #b42318;
    color: #fff;
    box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.35);
    transform: translateX(-50%);
    font-family: var(--shared-form-font);
    font-size: 0.875rem;
}

#blazor-error-ui a {
    color: #fff;
    font-weight: 600;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    opacity: 0.8;
}

/* ---------------------------------------------------------------------------
   Modo incorporado (/f/{slug}?embed=1, classe posta no <html> por
   js/askio-embed-frame.js): sem cenário decorativo nem margens exteriores, altura
   pelo conteúdo (o iframe acompanha-a) e rodapé compacto. &transparent=1 deixa
   ver o fundo do site anfitrião.
   --------------------------------------------------------------------------- */
/* A altura tem de vir do conteúdo: o Radzen dá ao body height:100% + overflow:auto, o que prendia o documento à
   altura do iframe (o resto fazia scroll lá dentro e o iframe nunca crescia). Também anula o modo "cartão cabe no
   ecrã" (100dvh), que dentro de um iframe alto mediria o próprio iframe. */
html.askio-embed,
html.askio-embed body {
    height: auto;
    min-height: 0;
    overflow: visible;
}

html.askio-embed .shared-form-shell,
html.askio-embed .shared-form-shell--split {
    height: auto;
    min-height: 0;
}

html.askio-embed .shared-form-shell--split .shared-form-card,
html.askio-embed .shared-form-shell--split .shared-form-panel,
html.askio-embed .shared-form-shell--split .shared-form-body {
    overflow: visible;
}

html.askio-embed .shared-form-backdrop {
    display: none;
}

/* Sem painel de marca em nenhum ecrã incorporado (agradecimento, palavra-passe, erros), como nas perguntas. */
html.askio-embed .shared-form-aside {
    display: none;
}

html.askio-embed .shared-form-shell--split .shared-form-card {
    display: block;
}

html.askio-embed .shared-form-content,
html.askio-embed .shared-form-shell--split .shared-form-content {
    width: 100%;
    margin-block: 0;
    padding: 0.5rem;
}

html.askio-embed .shared-form-card {
    box-shadow: none;
}

html.askio-embed .shared-form-brand-footer {
    padding: 0 0.5rem 0.5rem;
    font-size: 0.75rem;
    opacity: 0.85;
}

/* Carregamento dentro do iframe (iframe, popup, widget): fundo liso do cartão, sem o cenário da página, anel mais
   pequeno e a altura do próprio iframe (não encolhe o popup/widget enquanto carrega). */
html.askio-embed body {
    background: var(--shared-form-surface);
}

html.askio-embed .askio-loader {
    position: static;
    min-height: 100vh;
    gap: 0.6rem;
    background: var(--shared-form-surface);
}

html.askio-embed .askio-loader-ring {
    width: 3.75rem;
    height: 3.75rem;
}

html.askio-embed .askio-loader-logo {
    width: 1.6rem;
    height: 1.6rem;
}

html.askio-embed .askio-loader-text {
    font-size: 0.8rem;
}

html.askio-embed--transparent,
html.askio-embed--transparent body,
html.askio-embed--transparent .shared-form-shell,
html.askio-embed--transparent .askio-loader {
    background: transparent;
}

/* ---------------------------------------------------------------------------
   Popup (/f/{slug}?embed=1&mode=popup, classe posta por js/askio-embed-frame.js): o painel do embed.js já é o
   cartão, por isso o formulário fica numa só superfície branca (sem fundo da página nem segundo cartão).
   --------------------------------------------------------------------------- */
html.askio-embed--popup,
html.askio-embed--popup body,
html.askio-embed--popup .shared-form-shell {
    background: var(--shared-form-surface);
}

html.askio-embed--popup .shared-form-content,
html.askio-embed--popup .shared-form-shell--split .shared-form-content {
    padding: 0;
}

html.askio-embed--popup .shared-form-card,
html.askio-embed--popup .shared-form-card--compact {
    width: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding-top: 1.75rem;
}

html.askio-embed--popup .shared-form-brand-footer {
    padding-top: 0;
    border-top: 1px solid color-mix(in srgb, var(--shared-form-foreground) 7%, transparent);
    padding-block: 0.6rem;
}

/* ---------------------------------------------------------------------------
   Widget flutuante (/f/{slug}?embed=1&mode=widget, classe posta por
   js/askio-embed-frame.js): o cartão e o cumprimento são desenhados pelo embed.js
   no site anfitrião; aqui fica só a pergunta, sem cabeçalho, rodapé nem moldura.
   --------------------------------------------------------------------------- */
html.askio-embed--widget,
html.askio-embed--widget body,
html.askio-embed--widget .shared-form-shell {
    background: var(--shared-form-surface);
}

html.askio-embed--widget .shared-form-content,
html.askio-embed--widget .shared-form-shell--split .shared-form-content {
    padding: 0;
}

html.askio-embed--widget .shared-form-card,
html.askio-embed--widget .shared-form-card--compact {
    width: 100%;
    padding: 0.25rem 1rem 0.85rem;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

html.askio-embed--widget .shared-form-header,
html.askio-embed--widget .shared-form-brand-footer {
    display: none;
}

/* Botões sempre à vista no fundo do cartão (perguntas grandes, como a matriz, fazem scroll por trás) e numa só linha:
   empilhados, o "Anterior" ocupava uma linha inteira num cartão tão estreito. */
html.askio-embed--widget .shared-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin: 0.75rem -1rem -0.85rem;
    padding: 0.65rem 1rem 0.85rem;
    background: var(--shared-form-surface);
}

html.askio-embed--widget .askio-runner-actions {
    flex-direction: row;
    align-items: center;
}

html.askio-embed--widget .askio-runner-actions .rz-button {
    width: auto;
    min-width: 0;
    flex: 1 1 0;
}

html.askio-embed--widget .askio-runner-actions .askio-runner-actions-previous {
    flex: 0 0 auto;
}

html.askio-embed--widget .askio-runner-question {
    font-size: 0.95em;
}

/* O ecrã de sucesso tem painel de marca: no widget fica só a mensagem. */
html.askio-embed--widget .shared-form-aside {
    display: none;
}

html.askio-embed--widget .shared-form-shell--split .shared-form-card {
    display: block;
    padding: 0;
}

html.askio-embed--widget .shared-form-shell--split .shared-form-panel {
    padding: 0.75rem 1rem 1rem;
}