/* =================================================================
   Chitty Checkout — Brand styles
   Mirrors the dark Chitty pricing section + green/gold accents
   ================================================================= */

:root{
  --g:#00894A; --gd:#005C32; --gm:#00B560; --gl:#E8F5EF;
  --gold:#D4AF37; --gold2:#B8962A; --goldSoft:#FFE082;
  --w:#fff; --off:#F8FAF9; --g1:#F3F4F6; --g2:#E5E7EB;
  --g4:#9CA3AF; --g6:#4B5563; --g8:#1F2937; --g9:#111827;
  --dark:#0B0F0D; --dark2:#0D1A12; --dark3:#0F1C14; --dark4:#16231A;
  --red:#ef4444; --radius-lg:24px; --radius-md:16px; --radius-sm:10px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:linear-gradient(160deg,#FAFFFE 0%,#F0FAF5 45%,#E6F4EF 100%);
  color:var(--g8); line-height:1.6; min-height:100vh; display:flex; flex-direction:column;
}
a{ color:inherit; }

/* ===== Top bar ===== */
.ch-top{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 5%; background:rgba(255,255,255,.95);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(0,137,74,.08);
}
.ch-logo{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.ch-logo svg{ width:34px; height:34px; display:block; }
.ch-name{ font-weight:800; font-size:19px; color:var(--g9); }
.ch-secure{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; color:var(--g6); font-weight:600;
}
.ch-secure svg{ color:var(--g); }

/* ===== Layout ===== */
.ch-wrap{
  max-width:1080px; width:100%;
  margin:0 auto; padding:48px 5% 64px;
  flex:1;
}
.ch-grid{
  display:grid; grid-template-columns:1fr 1.2fr; gap:32px; align-items:start;
}

/* ===== Plan summary card (dark) ===== */
.ch-plan{
  background:linear-gradient(160deg,var(--dark) 0%,var(--dark2) 50%,var(--dark) 100%);
  border-radius:var(--radius-lg); padding:32px 30px;
  color:#fff; position:relative; overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.18);
}
.ch-plan::before{
  content:''; position:absolute; top:-160px; right:-160px;
  width:380px; height:380px;
  background:radial-gradient(circle,rgba(0,137,74,.18) 0%,transparent 65%);
  pointer-events:none;
}
.ch-plan-tag{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(74,255,154,.12); color:#4AFF9A;
  padding:5px 14px; border-radius:50px; font-size:11px; font-weight:700;
  letter-spacing:1.4px; text-transform:uppercase;
  border:1px solid rgba(74,255,154,.22);
  margin-bottom:18px;
}
.ch-plan-name{
  font-size:13px; font-weight:700; text-transform:uppercase;
  letter-spacing:1.5px; color:rgba(255,255,255,.5); margin-bottom:6px;
}
.ch-plan-edition{
  font-size:30px; font-weight:800; letter-spacing:-.6px; margin-bottom:14px; color:#fff;
}
.ch-plan-edition.lifetime{ color:var(--gold); }
.ch-plan-price{
  display:flex; align-items:baseline; gap:4px; margin-bottom:8px;
}
.ch-plan-amount{
  font-size:54px; font-weight:800; letter-spacing:-2px; color:#fff; line-height:1;
}
.ch-plan-period{
  font-size:14px; color:rgba(255,255,255,.5); font-weight:500; margin-left:6px;
}
.ch-plan-usd{
  font-size:12.5px; color:rgba(255,255,255,.45); margin-bottom:18px; font-weight:500;
}
.ch-plan-tagline{
  font-size:13.5px; color:rgba(255,255,255,.7); line-height:1.65;
  padding-top:18px; border-top:1px solid rgba(255,255,255,.08);
}

/* Method badges */
.ch-methods{
  display:flex; flex-wrap:wrap; gap:6px; margin-top:18px;
}
.ch-method{
  font-size:11px; font-weight:600;
  padding:4px 10px; border-radius:6px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.7);
}

/* ===== Form card (light) ===== */
.ch-form{
  background:#fff; border-radius:var(--radius-lg); padding:34px 32px;
  border:1.5px solid var(--g2); box-shadow:0 14px 48px rgba(0,0,0,.06);
}
.ch-form h1{
  font-size:24px; font-weight:800; color:var(--g9); letter-spacing:-.4px; margin-bottom:6px;
}
.ch-form .ch-sub{
  font-size:14px; color:var(--g6); margin-bottom:26px;
}
.ch-field{ margin-bottom:16px; }
.ch-label{
  display:block; font-size:12.5px; font-weight:700; color:var(--g8);
  margin-bottom:7px; letter-spacing:.3px;
}
.ch-input{
  width:100%; padding:13px 15px;
  border:1.5px solid var(--g2); border-radius:var(--radius-sm);
  font-size:14.5px; color:var(--g8);
  font-family:inherit; background:#fff; transition:all .2s;
}
.ch-input:focus{
  outline:none; border-color:var(--g);
  box-shadow:0 0 0 3px rgba(0,137,74,.12);
}
.ch-input[readonly]{
  background:var(--off); color:var(--g6);
}
.ch-row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ch-help{
  font-size:11.5px; color:var(--g4); margin-top:5px; line-height:1.5;
}

/* Pay button */
.ch-pay{
  width:100%;
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(135deg,var(--g),var(--gd));
  color:#fff; padding:15px 24px; border-radius:50px;
  font-size:15.5px; font-weight:700; font-family:inherit;
  border:none; cursor:pointer; transition:all .25s;
  box-shadow:0 6px 24px rgba(0,137,74,.3);
  margin-top:8px;
}
.ch-pay:hover{
  transform:translateY(-2px); box-shadow:0 10px 32px rgba(0,137,74,.45);
}
.ch-pay.lifetime{
  background:linear-gradient(135deg,#FFE082,var(--gold));
  color:#1a1a1a; box-shadow:0 6px 24px rgba(212,175,55,.4);
}
.ch-pay.lifetime:hover{ box-shadow:0 10px 32px rgba(212,175,55,.55); }

/* Trust strip */
.ch-trust{
  display:flex; align-items:center; gap:10px; justify-content:center;
  margin-top:18px; padding-top:18px; border-top:1px dashed var(--g2);
  font-size:12px; color:var(--g4); font-weight:500;
}
.ch-trust svg{ color:var(--g); flex-shrink:0; }

/* Flash / error */
.ch-alert{
  background:#FEF2F2; border:1px solid #FECACA; color:#991B1B;
  padding:11px 14px; border-radius:var(--radius-sm);
  font-size:13px; font-weight:500; margin-bottom:18px;
}

/* Change plan link */
.ch-change{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12.5px; color:var(--g); font-weight:600;
  text-decoration:none; margin-top:14px;
}
.ch-change:hover{ color:var(--gd); }

/* ===== Status pages (success / failed) ===== */
.ch-status{
  max-width:540px; margin:0 auto; text-align:center;
  background:#fff; border-radius:var(--radius-lg);
  padding:48px 36px; border:1.5px solid var(--g2);
  box-shadow:0 14px 48px rgba(0,0,0,.08);
}
.ch-status-icon{
  width:88px; height:88px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 20px;
}
.ch-status-icon.ok{ background:var(--gl); color:var(--g); }
.ch-status-icon.no{ background:#FEF2F2; color:var(--red); }
.ch-status h1{
  font-size:26px; font-weight:800; color:var(--g9); margin-bottom:10px; letter-spacing:-.4px;
}
.ch-status p{
  font-size:14.5px; color:var(--g6); margin-bottom:24px; line-height:1.7;
}
.ch-status-detail{
  background:var(--off); border:1px solid var(--g2);
  border-radius:var(--radius-sm); padding:14px 18px;
  font-size:13px; color:var(--g6); text-align:left; margin-bottom:24px;
}
.ch-status-detail strong{ color:var(--g9); }
.ch-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(135deg,var(--g),var(--gd));
  color:#fff; padding:13px 28px; border-radius:50px;
  font-size:14.5px; font-weight:700; text-decoration:none;
  box-shadow:0 4px 14px rgba(0,137,74,.3); transition:all .2s;
}
.ch-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(0,137,74,.4); }
.ch-btn.s{
  background:#fff; color:var(--g8); border:1.5px solid var(--g2); box-shadow:none;
}
.ch-btn.s:hover{ border-color:var(--g); color:var(--g); }
.ch-status .ch-btns{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ===== Responsive ===== */
@media(max-width:880px){
  .ch-grid{ grid-template-columns:1fr; }
  .ch-plan{ padding:28px 24px; }
  .ch-plan-amount{ font-size:46px; }
}
@media(max-width:520px){
  .ch-wrap{ padding:32px 4% 48px; }
  .ch-form, .ch-plan{ padding:26px 22px; }
  .ch-row2{ grid-template-columns:1fr; }
  .ch-plan-edition{ font-size:24px; }
  .ch-plan-amount{ font-size:40px; }
  .ch-form h1{ font-size:20px; }
}


/* Coupon section styles are applied inline in checkout.php */