:root{
      --azul-mar:#0077b6;
      --azul-claro:#00b4d8;
      --azul-escuro:#023e8a;
      --branco:#ffffff;
      --vermelho:#d62828;
      --cinza:#1f2937;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:'Poppins',sans-serif;
      background:url('image.png') no-repeat center center fixed;
      background-size:cover;
      color:var(--branco);
    }
    body::before{
      content:"";
      position:fixed; inset:0;
      background:linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,.7));
      z-index:-1;
    }
    header{padding:3rem 2rem 1rem;text-align:center}
    header h1{font-size:2.8rem;font-weight:700;margin:0 0 .5rem;text-shadow:0 2px 8px rgba(0,0,0,.6)}
    header p{font-size:1.3rem;opacity:.95;text-shadow:0 2px 6px rgba(0,0,0,.6)}
    .container{max-width:1000px;margin:auto;padding:2rem;display:flex;justify-content:center;align-items:center}
    .livro-card{
      background:rgba(255,255,255,.1);
      border-radius:20px;padding:2rem;text-align:center;
      backdrop-filter:blur(15px);box-shadow:0 8px 25px rgba(0,0,0,.4)
    }
    .livro-card img{max-width:280px;border-radius:15px;margin-bottom:1rem}
    .preco{font-size:2rem;font-weight:700;margin:1rem 0}
    .bonus{font-size:1rem;background:rgba(255,255,255,.15);padding:.8rem 1.2rem;border-radius:12px;display:inline-block;margin-bottom:1.5rem}
    button{
      background:linear-gradient(135deg,var(--azul-mar),var(--azul-claro));
      border:none;padding:1rem 2.5rem;font-size:1.2rem;border-radius:50px;color:var(--branco);
      font-weight:600;cursor:pointer;transition:.3s;position:relative;overflow:hidden;box-shadow:0 6px 15px rgba(0,0,0,.3)
    }
    button:hover{transform:scale(1.05);background:linear-gradient(135deg,var(--azul-claro),var(--azul-mar))}
    button:disabled{opacity:.6;cursor:not-allowed}

    /* POPUP */
    .popup{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);justify-content:center;align-items:center;z-index:999;padding:1rem}
    .popup-content{
      background:rgba(255,255,255,.9);color:#333;padding:2rem;border-radius:20px;width:90%;max-width:520px;
      text-align:left;animation:surgir .4s ease;max-height:80vh;overflow-y:auto;backdrop-filter:blur(10px)
    }
    @keyframes surgir{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
    .popup-content h2{text-align:center;margin:0 0 1rem;font-weight:700}
    .popup-content label{display:block;margin-top:1rem;font-weight:600;font-size:.95rem}
    .popup-content input,.popup-content select{
      width:100%;padding:.7rem;margin-top:.4rem;border:1px solid #ccc;border-radius:10px;font-size:1rem;background:#fff
    }
    .help{font-size:.8rem;color:#6b7280;margin-top:.25rem}
    .erro{font-size:.8rem;color:var(--vermelho);display:none;margin-top:.25rem}
    input.error{border-color:var(--vermelho);background:#fff6f6}

    /* Valores */
    .valores{margin-top:.8rem}
    .linha{display:flex;justify-content:space-between;align-items:center}
    .subtotal,.frete{font-size:.95rem;color:var(--cinza);margin-top:.35rem}
    .total{margin-top:.8rem;font-size:1.8rem;font-weight:800;color:var(--azul-escuro);text-shadow:0 1px 0 rgba(0,0,0,.05)}
    .obs-frete{font-size:.85rem;color:#374151;margin-top:.25rem}

    /* Botões */
    .btn-concluir{width:100%;margin-top:1rem;font-size:1.2rem}
    .btn-cancelar{
      background:var(--vermelho);margin-top:.6rem;padding:.45rem .9rem;font-size:.8rem;border-radius:10px;
      width:auto;display:block;margin-left:auto;margin-right:auto
    }