:root{
      --bf-azul:#0078C8;
      --bf-verde:#00B37E;
      --bf-verde-neon:#00E295;
      --bf-bg:#F7F9FC;
      --bf-texto:#0A2D4D;
      --bf-cinza:#555F6D;
      --bf-borda:#E3EAF1;
    }

    *{box-sizing:border-box;}

    body{
      margin:0;
      padding:0;
      font-family:"Poppins", Arial, sans-serif !important;
      background:var(--bf-bg);
      color:var(--bf-texto);
    }

    .checkout-page{
      max-width:1100px;
      margin:30px auto;
      padding:0 15px 40px;
    }
    

    .checkout-header{
      text-align:center;
      margin-bottom:25px;
    }
    .checkout-header h1{
      font-size:24px;
      font-weight:800;
      margin:0 0 6px;
      color:var(--bf-texto);
    }
    .checkout-header p{
      margin:0;
      font-size:14px;
      color:var(--bf-cinza);
    }

    /* Layout principal */
    .checkout-grid{
      display:grid;
      grid-template-columns:2fr 1.4fr;
      gap:20px;
      align-items:flex-start;
    }

    .card{
      background:#ffffff;
      border-radius:14px;
      border:1px solid var(--bf-borda);
      box-shadow:0 6px 18px rgba(0,0,0,.05);
      padding:18px 18px 20px;
    }

    .card h2{
      font-size:18px;
      margin:0 0 12px;
      font-weight:700;
      color:var(--bf-texto);
      display:flex;
      align-items:center;
      gap:8px;
    }
    .card h2 span.emoji{
      font-size:20px;
    }

    .form-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px 15px;
    }
    .form-group{
      display:flex;
      flex-direction:column;
    }
    .form-group.full{
      grid-column:1 / -1;
    }
    .form-group label{
      font-size:13px;
      margin-bottom:4px;
      color:var(--bf-cinza);
      font-weight:600;
    }
    .form-group input,
    .form-group select{
      border-radius:10px;
      border:1px solid var(--bf-borda);
      padding:10px 12px;
      font-size:14px;
      outline:none;
      transition:border-color .2s, box-shadow .2s, background-color .2s;
      background:#fff;
    }
    .form-group input:focus,
    .form-group select:focus{
      border-color:var(--bf-azul);
      box-shadow:0 0 0 2px rgba(0,120,200,.15);
      background:#fbfdff;
    }

    .linha{
      display:flex;
      gap:12px;
    }
    .linha > .form-group{
      flex:1;
    }

    /* Resumo do pedido */
    .resumo-item{
      display:flex;
      justify-content:space-between;
      margin-bottom:8px;
      font-size:14px;
      color:var(--bf-cinza);
    }
    .resumo-item.valor{
      font-weight:700;
      font-size:16px;
      color:var(--bf-texto);
    }
    .resumo-kit{
      margin-bottom:12px;
      font-size:14px;
    }
    .resumo-kit strong{
      color:var(--bf-azul);
    }

    .tag-frete{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 10px;
      border-radius:20px;
      background:rgba(0,179,126,.08);
      color:var(--bf-verde);
      font-size:12px;
      font-weight:700;
      margin-bottom:10px;
    }

    .garantia-box{
      margin-top:14px;
      padding:10px 10px 12px;
      border-radius:10px;
      background:#F0FFF7;
      border:1px solid rgba(0,226,149,.4);
      font-size:12px;
      color:#1C4A2F;
    }
    .garantia-box strong{
      color:#0e7a4f;
    }

    /* Botão principal */
    .btn-principal{
      display:block;
      width:100%;
      text-align:center;
      margin-top:16px;
      padding:14px 20px;
      border-radius:999px;
      border:none;
      outline:none;
      background:linear-gradient(90deg, var(--bf-verde) 0%, var(--bf-azul) 100%);
      color:#fff;
      font-weight:800;
      font-size:16px;
      text-decoration:none;
      cursor:pointer;
      box-shadow:0 8px 18px rgba(0,179,126,.4);
      transition:transform .2s, box-shadow .2s, filter .2s;
      position:relative;
      overflow:hidden;
    }
    .btn-principal:hover{
      transform:scale(1.03) translateY(-1px);
      box-shadow:0 10px 24px rgba(0,179,126,.55);
      filter:brightness(1.03);
    }

    .btn-principal::before{
      content:"";
      position:absolute;
      top:0;
      left:-80%;
      width:50%;
      height:100%;
      background:rgba(255,255,255,.35);
      transform:skewX(-25deg);
      animation:shine 3s infinite;
    }
    @keyframes shine{
      0%{left:-80%;}
      60%{left:130%;}
      100%{left:130%;}
    }

    /* Selos de confiança */
    .selos{
      margin-top:14px;
      font-size:11px;
      color:var(--bf-cinza);
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      justify-content:center;
    }
    .selos span{
      display:inline-flex;
      align-items:center;
      gap:4px;
      padding:4px 8px;
      border-radius:20px;
      background:#F3F7FC;
    }

    /* Pagamento */
    .pagamento-opcoes{
      margin-top:10px;
      font-size:13px;
      color:var(--bf-cinza);
    }
    .pagamento-opcoes label{
      display:flex;
      align-items:center;
      gap:8px;
      margin-bottom:6px;
      cursor:pointer;
      font-weight:500;
    }
    .pagamento-opcoes input[type="radio"]{
      accent-color:var(--bf-verde);
    }

    /* Responsivo */
    @media (max-width: 900px){
      .checkout-grid{
        grid-template-columns:1fr;
      }
    }

    @media (max-width: 600px){
      .card{
        padding:14px 12px 16px;
      }
      .checkout-header h1{
        font-size:20px;
      }
      .form-grid{
        grid-template-columns:1fr;
      }
    }


    /* LAYTOU DO IONIC MSG */
ion-alert {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 999999 !important;
  --backdrop-opacity: 0.45; 
}


ion-alert::part(content),
ion-alert .alert-wrapper {
  max-width: 320px !important;
  width: auto !important;
  border-radius: 14px !important;
  padding: 20px !important;
  background: white !important;
  color: #222 !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
  margin: auto !important;
}


ion-alert::part(content) {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}


ion-alert h2,
ion-alert h1,
ion-alert p {
  font-size: 14px !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  text-align: center !important;
}

     /* END */