/* Flowly — Modal */

/* =============================================================
   6. FLOWLY-MODAL — modal padrão
   ============================================================= */
.flowly-modal {
    position: fixed;
    inset: 0;
    z-index: var(--flowly-z-modal);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--flowly-space-4);
}

.flowly-modal.is-open {
    display: flex;
}

.flowly-modal.is-open .flowly-modal__backdrop {
    animation: modal-backdrop-in 280ms var(--flowly-ease-out, ease) both;
}

.flowly-modal.is-open .flowly-modal__content {
    animation: modal-content-in 360ms var(--flowly-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
}

@keyframes modal-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modal-content-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.flowly-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(var(--flowly-blur-modal, 12px));
    -webkit-backdrop-filter: blur(var(--flowly-blur-modal, 12px));
}

.flowly-modal__content {
    position: relative;
    z-index: 1;
    background: var(--flowly-bg-overlay, rgba(20, 21, 28, 0.85));
    border: 1px solid var(--flowly-border-strong, rgba(255, 255, 255, 0.08));
    border-radius: var(--flowly-radius-xl);
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    padding: var(--flowly-space-8);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    backdrop-filter: blur(var(--flowly-blur-panel, 16px));
    -webkit-backdrop-filter: blur(var(--flowly-blur-panel, 16px));
}

/* =============================================================
   LOCAL ACCESS — bloqueio de privacidade do dispositivo
   ============================================================= */
html.flowly-access-locked .app-shell,
html.flowly-access-locked .flowly-bottom-nav,
html.flowly-access-locked .skip-link,
html.flowly-auth-required .app-shell,
html.flowly-auth-required .flowly-bottom-nav,
html.flowly-auth-required .skip-link {
    visibility: hidden;
}
/* Login só aparece depois do gate de senha local (mesmo z-index, não empilhar). */
html.flowly-access-locked #flowlyAuthGate { display: none; }

.flowly-access-gate {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: center;
    padding: var(--flowly-space-6, 24px);
    background: var(--flowly-bg-body-gradient), var(--flowly-bg-body);
    color: var(--flowly-text-primary);
}
.flowly-access-gate[hidden] { display: none; }
.flowly-access-card {
    width: min(100%, 390px);
    padding: 28px;
    border: 1px solid var(--flowly-border-strong);
    border-radius: var(--flowly-radius-xl, 24px);
    background: var(--flowly-bg-elevated);
    box-shadow: 0 30px 90px rgb(0 0 0 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.04);
}
.flowly-access-mark {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    margin-bottom: 22px;
    border-radius: var(--flowly-radius-md, 14px);
    overflow: hidden;
    box-shadow: 0 10px 24px rgb(0 0 0 / 0.24);
}
.flowly-access-mark img {
    width: 64px;
    height: 64px;
    display: block;
    object-fit: cover;
}
.flowly-access-kicker {
    margin: 0 0 9px;
    color: var(--flowly-accent-primary);
    font-size: var(--flowly-text-2xs, calc(11px * var(--flowly-text-k)));
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.flowly-access-card h1 {
    margin: 0;
    color: var(--flowly-text-primary);
    font-family: var(--flowly-font-display);
    font-size: var(--flowly-text-2xl, calc(24px * var(--flowly-text-k)));
    line-height: 1.1;
    letter-spacing: -0.04em;
}
.flowly-access-subtitle {
    margin: 12px 0 26px;
    color: var(--flowly-text-secondary);
    font-size: var(--flowly-text-sm, calc(13px * var(--flowly-text-k)));
    line-height: 1.55;
}
.flowly-access-form { display: flex; flex-direction: column; gap: 16px; }
.flowly-access-field { display: flex; flex-direction: column; gap: 8px; }
.flowly-access-field[hidden] { display: none; }
.flowly-access-field span { color: var(--flowly-text-primary); font-size: var(--flowly-text-xs, calc(12px * var(--flowly-text-k))); font-weight: 600; }
.flowly-access-field input {
    width: 100%;
    box-sizing: border-box;
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid var(--flowly-border-muted);
    border-radius: var(--flowly-radius-md, 12px);
    background: var(--flowly-bg-glass);
    color: var(--flowly-text-primary);
    outline: none;
    font: inherit;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.flowly-access-field input:hover { border-color: var(--flowly-border-strong); }
.flowly-access-field input:focus { border-color: var(--flowly-accent-primary); background: rgb(var(--flowly-accent-primary-rgb) / 0.06); box-shadow: 0 0 0 3px rgb(var(--flowly-accent-primary-rgb) / 0.16); }
.flowly-access-message { margin: -2px 0 0; color: var(--flowly-accent-danger-soft, #fca5a5); font-size: var(--flowly-text-xs, calc(12px * var(--flowly-text-k))); line-height: 1.4; }
.flowly-access-message[data-kind="success"] { color: var(--flowly-accent-success-soft, #86efac); }
.flowly-access-submit {
    width: 100%;
    min-height: 46px;
    padding: 11px 16px;
    border: 0;
    border-radius: var(--flowly-radius-md, 12px);
    background: var(--flowly-accent-primary);
    color: var(--flowly-text-inverse);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: transform 160ms ease, filter 160ms ease;
}
.flowly-access-submit:hover { filter: brightness(1.06); transform: translateY(-1px); }
.flowly-access-submit:active { transform: translateY(0); }
.flowly-access-submit:disabled { opacity: 0.55; cursor: wait; }
.flowly-access-note { margin: 22px 0 0; color: var(--flowly-text-tertiary); font-size: var(--flowly-text-2xs, calc(11px * var(--flowly-text-k))); line-height: 1.5; }