/* =========================================================
   checkout.css — Premium Checkout (2026 / $5000 style)
   ========================================================= */

.coHero{
  padding: clamp(34px, 5vw, 64px) 0;
  background:
    radial-gradient(900px circle at 12% 20%, rgba(14,165,233,0.12), transparent 58%),
    radial-gradient(900px circle at 85% 28%, rgba(245,196,81,0.10), transparent 62%),
    linear-gradient(180deg,#ffffff 0%,#f7faff 100%);
  border-bottom: 1px solid rgba(226,232,240,0.92);
}

.coHero__wrap{
  display:grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 16px;
  align-items: start;
}

.coHero__kicker{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 950;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--primary);
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(226,232,240,0.92);
}

.coHero__title{
  margin: 14px 0 0;
  font-family: var(--font-heading);
  font-weight: 950;
  line-height: 1.4;
  color: var(--primary);
  font-size: clamp(34px, 3.2vw, 48px);
  width: 95%;
  margin: auto;
}

.coHero__accent{
  margin-left: 6px;
  background: linear-gradient(92deg, #0B2A6F 0%, #0EA5E9 42%, #22D3EE 72%, #0B2A6F 100%);
  -webkit-background-clip: text;
  background-clip:text;
  color: transparent;
}

.coHero__sub{
  margin-top: 10px;
  max-width: 70ch;
  font-size: 18px;
  line-height: 1.5;
}

.coHero__trust{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px 14px;
  color: var(--primary);
  font-weight: 950;
  font-size: 16px;
}
.coHero__trust i{ margin-right: 8px; color:#0EA5E9; }

/* Mini summary */
.coMiniSum{
  border-radius: 22px;
  padding: 16px;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(226,232,240,0.92);
  box-shadow: 0 26px 70px rgba(15,23,42,0.08);
}

.coMiniSum__top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}

.coMiniSum__title{
  font-family: var(--font-heading);
  font-weight: 950;
  color: var(--primary);
  font-size: 20px;
}

.coMiniSum__edit{
  font-weight: 950;
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.coMiniSum__row{
  margin-top: 10px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(247,250,255,0.90);
  border: 1px solid rgba(226,232,240,0.92);
}

.coMiniSum__row--total{
  background: rgba(14,165,233,0.08);
  border-color: rgba(14,165,233,0.18);
}

.coMiniSum__label{
  color: var(--muted);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.coMiniSum__value{
  color: var(--primary);
  font-weight: 950;
  font-size: 16px;
}

.coMiniSum__price{
  font-family: var(--font-numbers);
  font-size: 18px;
}
.coMiniSum__cur{
  font-size: 12px;
  color: var(--muted);
  margin-right: 6px;
}

.coMiniSum__note{
  margin-top: 12px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.7;
}

/* Main checkout */
.co{
  padding: clamp(34px, 5vw, 70px) 0;
  background: #fff;
}

.co__grid{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 16px;
  align-items: start;
}

.coBox{
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(226,232,240,0.92);
  box-shadow: 0 26px 70px rgba(15,23,42,0.07);
  overflow: hidden;
}

.coBox__head{
  padding: 16px 16px 0;
}

.coBox__title{
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 950;
  letter-spacing: -0.02em;
  color: var(--primary);
  font-size: 18px;
}

.coBox__sub{
  margin-top: 6px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

/* Form */
.coForm{
  padding: 16px;
  display:grid;
  gap: 12px;
}

.coForm__cols{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.coForm__label{
  display:block;
  margin-bottom: 7px;
  font-weight: 950;
  font-size: 14px;
  text-transform: uppercase;
}

.coForm__input,
.coForm__select,
.coForm__textarea{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(226,232,240,0.92);
  background: #fff;
  padding: 12px 12px;
  color: var(--primary);
  font-weight: 600;
  outline: none;
  font-size: 17px;
}

.coForm__textarea{ resize: vertical; }

.coForm__input:focus,
.coForm__select:focus,
.coForm__textarea:focus{
  box-shadow: var(--ring);
}

.coForm__hr{
  height: 1px;
  background: rgba(226,232,240,0.92);
  margin: 4px 0 0;
}

.coChk{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  font-size: 15px;
  line-height: 1.6;
}
.coChk input{ margin-top: 3px; }
.coForm__cta{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 8px;;
}
.coBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.5px;
  text-decoration:none;
  border: 1px solid rgba(226,232,240,0.92);
  background: #fff;
  color: var(--primary);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}

.coBtn--primary{
  color: #06101A;
  /* background: var(--g-blue-1, linear-gradient(135deg,#2563EB 0%,#0EA5E9 52%,#22D3EE 100%)); */
  border: 1px solid rgba(34,211,238,0.22);
  box-shadow: 0 18px 44px rgba(14,165,233,0.16);
  background-color: #ffd700;
  
}

.coBtn--whatsapp{
  color: #fff;
  background: #069239;
  border: 1px solid rgba(37,211,102,0.25);
  box-shadow: 0 18px 44px rgba(37,211,102,0.16);
}

.coBtn:hover{ transform: translateY(-2px); opacity: 0.98; }

.coForm__micro{
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}
.coForm__micro i{ color:#0EA5E9; margin-right: 8px; }

/* Payment accordion */
.payCard{
  padding: 16px;
  display:grid;
  gap: 10px;
}

.payCard__item{
  width: 100%;
  display:grid;
  grid-template-columns: 44px 1fr auto;
  align-items:center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(247,250,255,0.90);
  border: 1px solid rgba(226,232,240,0.92);
  cursor: pointer;
  text-align: left;
}

.payCard__ico{
  width: 44px; height: 44px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(226,232,240,0.92);
  background: #fff;
  font-size: 18px;
}
.payCard__ico--mint{ color:#10B981; background: rgba(16,185,129,0.10); border-color: rgba(16,185,129,0.18); }
.payCard__ico--blue{ color:#0EA5E9; background: rgba(14,165,233,0.10); border-color: rgba(14,165,233,0.18); }

.payCard__name{ display:block; font-weight: 950; color: var(--primary); }
.payCard__desc{ display:block; color: var(--muted); font-size: 12.8px; margin-top: 2px; }

.payCard__chev{ opacity: .8; }

.payCard__panel{
  margin-top: -6px;
  padding: 12px 12px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(226,232,240,0.92);
}

.payLine{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 14px;
  background: rgba(15,23,42,0.03);
  margin-bottom: 8px;
}
.payLine__k{ color: var(--primary); font-weight: 950; font-size: 13px; }
.payLine__v{ color: var(--muted); font-weight: 800; font-size: 13px; }

.payTip{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 14px;
  background: rgba(14,165,233,0.08);
  border: 1px solid rgba(14,165,233,0.16);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.payTip i{ color:#0EA5E9; margin-top: 2px; }

/* Proof box */
.proofBox{
  margin: 0 16px 16px;
  border-radius: 22px;
  padding: 14px;
  background: rgba(247,250,255,0.92);
  border: 1px solid rgba(226,232,240,0.92);
}

.proofBox__title{
  font-weight: 950;
  color: var(--primary);
}

.proofBox__list{
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display:grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
}
.proofBox__list i{ color:#10B981; margin-right: 10px; }

.proofBox__btn{
  margin-top: 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 950;
  font-size: 13px;
  text-decoration: none;
  color: #fff;
  background: #25D366;
  border: 1px solid rgba(37,211,102,0.25);
  box-shadow: 0 18px 44px rgba(37,211,102,0.16);
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.proofBox__btn:hover{ transform: translateY(-2px); opacity: .98; }

/* Tiny FAQ */
.coTinyFaq{
  margin: 0 16px 16px;
  border-radius: 22px;
  padding: 14px;
  background: #fff;
  border: 1px solid rgba(226,232,240,0.92);
}

.coTinyFaq__q{
  font-weight: 950;
  color: var(--primary);
  margin-top: 8px;
}
.coTinyFaq__q:first-child{ margin-top: 0; }

.coTinyFaq__a{
  margin-top: 6px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.7;
}

/* Bottom bar */
.coBar{
  padding: 18px 0;
  background:
    radial-gradient(900px circle at 12% 20%, rgba(14,165,233,0.16), transparent 60%),
    linear-gradient(135deg, #0B2A6F 0%, #0EA5E9 55%, #22D3EE 100%);
  color: rgba(244,247,255,0.96);
}

.coBar__wrap{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}

.coBar__title{
  font-family: var(--font-heading);
  font-weight: 950;
  letter-spacing: -0.02em;
}

.coBar__text{
  margin-top: 6px;
  color: rgba(234,240,255,0.86);
  font-size: 13.5px;
  line-height: 1.7;
}

.coBar__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 950;
  font-size: 13px;
  text-decoration:none;
  color: #06101A;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 18px 44px rgba(0,0,0,0.18);
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.coBar__btn:hover{ transform: translateY(-2px); opacity: 0.98; }

/* Responsive */
@media (max-width: 980px){
  .coHero__wrap{ grid-template-columns: 1fr; }
  .co__grid{ grid-template-columns: 1fr; }
  .coHero__wrap{
    text-align: center;
  }
  .coHero__sub{
    margin: auto;
  }
  .coHero__trust{
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media (max-width: 560px){
  .coForm__cols{ grid-template-columns: 1fr; }
  .coForm__cta{ grid-template-columns: 1fr; }
  .coBar__wrap{ flex-direction: column; align-items: stretch; }
}
/* Checkout grid single column mode */
.co__grid--single{
  grid-template-columns: 1fr !important;
}
.coForm__cta--single{
  grid-template-columns: 1fr !important;
}