/*
 * Malls Shibata — Componente de carregamento (spinner da marca, skeleton e erro)
 * Usado por MallsLoader (js/malls/loader.js). Não copie este HTML nas telas.
 */
.malls-loader-host {
    position: relative;
}

.malls-loader {
    position: absolute;
    inset: 0;
    z-index: 20;
    overflow: hidden;
    background: var(--malls-bg);
    opacity: 0;
    transition: opacity 160ms ease;
}

.malls-loader.is-visible {
    opacity: 1;
}

/* Skeleton ao fundo */
.malls-loader__skeleton {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 1680px;
    margin: 0 auto;
}

.malls-loader__skeleton-card {
    background: var(--malls-surface);
    border: 1px solid var(--malls-border);
    border-radius: var(--malls-radius-lg);
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.malls-loader__skeleton-row {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.malls-loader__skeleton-row .malls-skeleton {
    height: 12px;
}

.malls-loader__skeleton-row--head .malls-skeleton {
    height: 30px;
}

/* Camada branca translúcida sobre o conteúdo */
.malls-loader__veil {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.72);
}

.malls-loader__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 360px;
}

/* Spinner: símbolo central + três arcos concêntricos */
.malls-spinner {
    position: relative;
    width: 104px;
    height: 104px;
    margin-bottom: 1.25rem;
}

.malls-spinner__symbol {
    position: absolute;
    inset: 24px;
    border-radius: 50%;
    background: var(--malls-logo-symbol) center / cover no-repeat;
    box-shadow: 0 10px 24px rgba(226, 29, 46, 0.22), 0 2px 6px rgba(15, 42, 76, 0.12);
}

.malls-spinner__arc {
    position: absolute;
    border-radius: 50%;
    border: 4px solid transparent;
}

.malls-spinner__arc--navy {
    inset: 0;
    border-top-color: var(--malls-navy-800);
    border-left-color: var(--malls-navy-800);
    animation: malls-spin 1.6s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
}

.malls-spinner__arc--red {
    inset: 9px;
    border-width: 3px;
    border-bottom-color: var(--malls-red-600);
    border-right-color: var(--malls-red-600);
    animation: malls-spin 1.15s linear infinite reverse;
}

.malls-spinner__arc--sky {
    inset: 15px;
    border-width: 2px;
    border-top-color: var(--malls-sky-400);
    animation: malls-spin 0.9s linear infinite;
}

.malls-loader__title {
    margin: 0;
    font-size: var(--malls-font-size-lg);
    font-weight: 700;
    color: var(--malls-navy-900);
}

.malls-loader__subtitle {
    margin: 0.25rem 0 0;
    font-size: var(--malls-font-size-sm);
    color: var(--malls-text-secondary);
}

/* Barra de progresso fina: indeterminada ou com valor real */
.malls-progress {
    position: relative;
    width: 260px;
    max-width: 70vw;
    height: 6px;
    margin-bottom: 1rem;
    border-radius: var(--malls-radius-pill);
    background: var(--malls-surface-sunken);
    overflow: hidden;
}

.malls-progress__bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--malls-navy-800), var(--malls-red-600));
}

.malls-progress--indeterminate .malls-progress__bar {
    width: 40%;
    animation: malls-progress-indeterminate 1.3s ease-in-out infinite;
}

.malls-progress--determinate .malls-progress__bar {
    transition: width 200ms ease;
}

.malls-progress__value {
    margin-left: 0.6rem;
    font-size: var(--malls-font-size-sm);
    font-weight: 600;
    color: var(--malls-text-secondary);
}

@keyframes malls-progress-indeterminate {
    0% { left: -40%; }
    100% { left: 100%; }
}

/* Estado de erro */
.malls-loader--error .malls-loader__veil {
    background: rgba(255, 255, 255, 0.9);
}

/* Aba com erro: o iframe fica oculto (não aparece a página de erro do servidor por baixo, nem
   durante "Tentar novamente") e o aviso usa o fundo da área de conteúdo. */
.malls-panel.is-error .malls-panel__frame {
    visibility: hidden;
}

.malls-panel.is-error .malls-loader--error .malls-loader__veil {
    background: var(--malls-bg);
}

.malls-loader__illustration {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.malls-loader__error-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--malls-danger-bg);
    color: var(--malls-danger-text);
    font-size: 1.75rem;
}

.malls-loader__actions {
    margin-top: 1.1rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* Variante compacta para áreas pequenas (cards, modais) */
.malls-loader--compact .malls-spinner {
    width: 64px;
    height: 64px;
    margin-bottom: 0.75rem;
}

.malls-loader--compact .malls-spinner__symbol {
    inset: 15px;
}

.malls-loader--compact .malls-spinner__arc--red {
    inset: 6px;
}

.malls-loader--compact .malls-spinner__arc--sky {
    inset: 10px;
}

.malls-loader--compact .malls-loader__skeleton {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .malls-spinner__arc,
    .malls-progress__bar,
    .malls-tab__spinner {
        animation: none !important;
    }

    .malls-progress--indeterminate .malls-progress__bar {
        left: 0;
        width: 100%;
        opacity: 0.6;
    }

    .malls-loader {
        transition: none;
    }
}