/* ===== Reset e base ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

[hidden] { display: none !important; }

body {
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    display: flex;
    min-height: 100vh;
    /* Respeita o notch do iPhone (safe areas) */
    padding: max(24px, env(safe-area-inset-top))
             max(16px, env(safe-area-inset-right))
             max(24px, env(safe-area-inset-bottom))
             max(16px, env(safe-area-inset-left));
    background: radial-gradient(1200px 700px at 50% 20%, #125055 0%, #0c3c40 55%, #072a2d 100%);
    background-attachment: fixed;
}

/* ===== Cartão / modal (totalmente fluido) ===== */
.modal {
    position: relative;
    width: 100%;
    max-width: 440px;
    margin: auto; /* centraliza e permite rolar sem cortar o topo */
    padding: clamp(22px, 6vw, 30px) clamp(16px, 5vw, 26px);
    border-radius: 18px;
    text-align: center;
    color: #ffffff;
    background: linear-gradient(175deg, #17595e 0%, #114a4e 55%, #0d3d41 100%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

.btn-fechar {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s;
}
.btn-fechar:hover { background: rgba(255, 255, 255, .32); }

.modal h1 { font-size: clamp(1.1rem, 5vw, 1.4rem); font-weight: 800; letter-spacing: .2px; }

.subtitulo { margin-top: 6px; font-size: clamp(.78rem, 3.6vw, .88rem); color: #cfe6e6; }

/* ===== Linha do link ===== */
.linha-link { display: flex; gap: 10px; margin-top: 20px; }

.linha-link input {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    border: 2px solid #0a2f32;
    border-radius: 10px;
    background: #ffffff;
    color: #143c41;
    font-size: .82rem;
    font-weight: 600;
    outline: none;
}
.linha-link input:focus { border-color: #3fd0d6; box-shadow: 0 0 0 3px rgba(63, 208, 214, .25); }

/* ===== Botões ===== */
.btn {
    border: none;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .12s ease, filter .12s ease;
}
.btn:hover  { filter: brightness(1.08); }
.btn:active { transform: scale(.96); }

.btn-destaque { background: #3fd0d6; color: #07393d; }
.btn-claro    { background: #f2f4f4; color: #123a3f; }

/* ===== Cartão do QR Code (brilho roxo) ===== */
.cartao-qr {
    width: fit-content;
    margin: clamp(16px, 4vw, 24px) auto;
    padding: clamp(14px, 4vw, 22px);
    border-radius: 18px;
    background: #f7f7fb;
    box-shadow: 0 0 0 2px rgba(192, 132, 252, .45), 0 0 30px rgba(168, 85, 247, .55);
    max-width: 100%;
}

#qrcode { display: flex; justify-content: center; }
#qrcode canvas, #qrcode img { max-width: 100%; height: auto; }

/* ===== Ações inferiores ===== */
.linha-acoes { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* ===== Botão "Como instalar no iPhone" ===== */
.btn-passos {
    margin-top: 16px;
    padding: 8px 16px;
    border: 1px solid rgba(63, 208, 214, .55);
    border-radius: 999px;
    background: transparent;
    color: #8ff0f4;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s;
}
.btn-passos:hover { background: rgba(63, 208, 214, .12); }

/* ===== Passo a passo iOS ===== */
.passos-ios {
    margin-top: 14px;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px solid rgba(63, 208, 214, .45);
    background: rgba(255, 255, 255, .08);
    text-align: left;
    font-size: .85rem;
    animation: surgir .3s ease;
}
.passos-ios h2 { font-size: .95rem; margin-bottom: 10px; text-align: center; }
.passos-ios ol { padding-left: 22px; display: grid; gap: 8px; color: #e5f4f4; }
.passos-ios li::marker { color: #3fd0d6; font-weight: 800; }
.passos-nota { margin-top: 12px; font-size: .78rem; color: #ffd166; text-align: center; }

@keyframes surgir {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== Toast (aviso) ===== */
.toast {
    position: fixed;
    left: 50%;
    bottom: calc(28px + env(safe-area-inset-bottom));
    transform: translate(-50%, 16px);
    padding: 10px 20px;
    border-radius: 999px;
    background: #06282b;
    border: 1px solid #3fd0d6;
    color: #8ff0f4;
    font-size: .85rem;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .25s;
    max-width: 90vw;
    text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.erro-lib {
    color: #b91c1c;
    font-size: .8rem;
    font-weight: 600;
    max-width: 210px;
    text-align: center;
}

/* ===== Impressão ===== */
.area-impressao { display: none; }

@media print {
    body { display: block; background: #fff; padding: 0; }
    .modal, .toast { display: none !important; }

    .area-impressao { display: block; text-align: center; color: #111; padding: 40px 20px; }
    .area-impressao h2 { font-size: 1.3rem; margin-bottom: 6px; }
    .area-impressao .print-obs { font-size: .85rem; color: #555; }
    .area-impressao .print-link { font-size: .8rem; color: #333; margin-top: 12px; word-break: break-all; }
    .print-qr { width: 280px; height: 280px; margin-top: 18px; }
}

/* ===== Responsivo: celulares pequenos ===== */
@media (max-width: 480px) {
    .linha-link  { flex-direction: column; }
    .linha-link .btn,
    .linha-acoes .btn { width: 100%; }
    .linha-acoes { flex-direction: column; }
}

@media (max-width: 340px) {
    .btn { font-size: .8rem; padding: 11px 12px; }
    .passos-ios { padding: 14px; }
}

/* ===== Paisagem / telas baixas ===== */
@media (max-height: 640px) {
    .cartao-qr { margin: 14px auto; }
    .linha-link { margin-top: 14px; }
}