/* ChargeMe — shared styles for the global footer, sub-page header and legal/policy pages.
   Loaded by index.html (footer only) and by every stand-alone page. */

:root{
  --cm-green:#43b02a;
  --cm-green-dark:#358a21;
  --cm-ink:#1c1c1e;
  --cm-muted:#6b6b70;
  --cm-cream:#f7f4ec;
  --cm-foot:#faf7ee;
  --cm-line:#ece7db;
  --cm-maxw:1160px;
}

/* ---------- Global footer (shared by every page) ---------- */
.cm-footer{
  background:var(--cm-foot);
  border-top:1px solid var(--cm-line);
  padding:60px 0 34px;
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--cm-ink);
  line-height:1.55;
}
.cm-footer .cm-wrap{max-width:var(--cm-maxw);margin:0 auto;padding:0 22px}
.cm-footer a{color:inherit;text-decoration:none}
.cm-foot-grid{display:grid;grid-template-columns:1.5fr .9fr 1.25fr 1.15fr;gap:34px}
.cm-foot-col h4{
  font-size:.9rem;display:flex;align-items:center;gap:7px;margin:0 0 14px;
}
.cm-foot-col ul{list-style:none;margin:0;padding:0}
.cm-foot-col li{margin-bottom:9px}
.cm-foot-col a{color:var(--cm-muted);font-size:.88rem}
.cm-foot-col a:hover{color:var(--cm-ink);text-decoration:underline}
.cm-foot-about img{height:44px;width:auto;display:block}
.cm-foot-about p{color:var(--cm-muted);font-size:.9rem;margin:16px 0 0;max-width:340px}
.cm-foot-about .cm-tag{margin-top:10px;font-weight:600;color:var(--cm-ink)}
.cm-legal-block{color:var(--cm-muted);font-size:.86rem;line-height:1.7;margin:0}
.cm-legal-block strong{color:var(--cm-ink);font-weight:600}

/* ---------- Accepted payment channels (content band above the footer) ---------- */
.cm-channels{background:#fff;border-top:1px solid var(--cm-line);padding:52px 0}
.cm-channels h2{font-size:1.3rem;margin:0 0 8px;text-align:center}
.cm-channels .cm-channels-lead{
  color:var(--cm-muted);font-size:.94rem;margin:0 auto 26px;max-width:640px;text-align:center;
}
/* The supplied artwork is 1417px wide with 19 logos on its widest row; below that
   it scrolls rather than shrinking the provider marks into illegibility. */
.cm-channels-frame{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  background:#fff;border:1px solid var(--cm-line);border-radius:16px;padding:18px;
  margin:0 auto;text-align:left;
}
.cm-channels-frame img{width:100%;min-width:820px;height:auto;display:block;max-width:none}
.cm-ssl-center{margin:18px auto 0}

@media(max-width:600px){
  .cm-channels{padding:38px 0}
  .cm-channels-frame{padding:12px;border-radius:12px}
}

/* SSLCOMMERZ trust mark (payment-channels band and checkout, not the footer).
   content-box pinned explicitly: index.html applies a global border-box reset,
   the stand-alone pages do not — without this the mark renders at two sizes. */
.cm-ssl-logo{
  box-sizing:content-box;
  height:38px;width:auto;max-width:100%;display:block;flex:0 0 auto;
  background:#fff;border:1px solid var(--cm-line);border-radius:10px;padding:8px 12px;
}
.cm-foot-bottom{
  border-top:1px solid var(--cm-line);margin-top:26px;padding-top:20px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  color:var(--cm-muted);font-size:.85rem;
}
.cm-foot-bottom a{color:var(--cm-green-dark);font-weight:600}

@media(max-width:1020px){
  .cm-foot-grid{grid-template-columns:repeat(2,1fr);gap:26px}
  .cm-foot-about{grid-column:1 / -1}
}
@media(max-width:600px){
  .cm-footer{padding:44px 0 28px}
  .cm-footer .cm-wrap{padding:0 18px}
  .cm-foot-grid{grid-template-columns:1fr}
  .cm-foot-bottom{flex-direction:column}
}

/* ---------- Stand-alone page shell (policy + checkout pages) ---------- */
.cm-page{
  margin:0;background:var(--cm-cream);color:var(--cm-ink);
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.65;-webkit-font-smoothing:antialiased;
}
.cm-page img{max-width:100%;display:block}
.cm-wrap{max-width:var(--cm-maxw);margin:0 auto;padding:0 22px}

.cm-subhead{background:#fff;border-bottom:1px solid var(--cm-line);padding:14px 0}
.cm-subhead .cm-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.cm-subhead img{height:38px;width:auto}
.cm-subhead nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cm-subhead nav a{color:var(--cm-muted);font-size:.88rem;text-decoration:none}
.cm-subhead nav a:hover{color:var(--cm-ink)}
.cm-subhead nav a.cm-back{color:var(--cm-green-dark);font-weight:600}
.cm-subhead nav a.cm-current{color:var(--cm-ink);font-weight:600}

/* ---------- Legal prose ---------- */
.cm-doc{padding:46px 0 66px}
.cm-doc .cm-wrap{max-width:880px}
.cm-doc h1{font-size:2.05rem;line-height:1.2;margin:0 0 12px;letter-spacing:-.01em}
.cm-doc .cm-meta{color:var(--cm-muted);font-size:.86rem;margin:0 0 26px}
.cm-doc .cm-intro{
  background:#fff;border:1px solid var(--cm-line);border-radius:16px;
  padding:18px 20px;margin:0 0 30px;color:var(--cm-muted);font-size:.94rem;
}
.cm-doc h2{
  font-size:1.06rem;margin:30px 0 8px;line-height:1.35;
  display:flex;gap:10px;align-items:baseline;
}
.cm-doc h2 .cm-num{color:var(--cm-green);font-weight:700;flex:0 0 auto}
.cm-doc p{margin:0 0 12px;font-size:.97rem}
.cm-doc a{color:var(--cm-green-dark);font-weight:600}
/* App-specific notice (e.g. ChargeMe EV Guide on the privacy page) */
.cm-app-notice{
  background:#fff;border:1px solid var(--cm-line);border-radius:16px;
  padding:4px 20px 8px;margin:0 0 34px;
}
.cm-app-notice h2{margin-top:18px}
.cm-app-notice h3{font-size:.97rem;margin:18px 0 6px}
.cm-doc hr{border:none;border-top:1px solid var(--cm-line);margin:34px 0 0}

/* Table of contents */
.cm-toc{
  background:#fff;border:1px solid var(--cm-line);border-radius:16px;
  padding:18px 20px;margin:0 0 34px;
}
.cm-toc h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--cm-muted);margin:0 0 12px}
.cm-toc ol{margin:0;padding-left:20px;columns:2;column-gap:28px}
.cm-toc ul{list-style:none;margin:0 0 6px;padding-left:0}
.cm-toc li{margin-bottom:6px;font-size:.9rem;break-inside:avoid}
.cm-toc a{color:var(--cm-ink);font-weight:400;text-decoration:none}
.cm-toc a:hover{color:var(--cm-green-dark);text-decoration:underline}

/* ---------- Checkout / payment page ---------- */
.cm-checkout{padding:40px 0 60px}
.cm-checkout .cm-wrap{max-width:720px}
.cm-checkout h1{font-size:1.7rem;margin:0 0 6px}
.cm-merchant{
  display:inline-block;background:#eef7ea;border:1px solid #cfe6c4;color:var(--cm-green-dark);
  border-radius:999px;padding:6px 16px;font-size:.84rem;font-weight:600;margin-bottom:24px;
}
.cm-card{
  background:#fff;border:1px solid var(--cm-line);border-radius:18px;padding:24px 26px;margin-bottom:20px;
}
.cm-card h2{font-size:1.02rem;margin:0 0 16px}
.cm-field{margin-bottom:16px}
.cm-field label{display:block;font-size:.85rem;font-weight:600;margin-bottom:6px}
.cm-field input,.cm-field select{
  width:100%;padding:12px 14px;border:1px solid #ded8ca;border-radius:12px;
  font-size:.95rem;font-family:inherit;background:#fdfcf9;color:var(--cm-ink);
}
.cm-field input:focus,.cm-field select:focus{outline:2px solid var(--cm-green);outline-offset:1px}
.cm-amounts{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.cm-amounts button{
  flex:1 1 90px;padding:11px 6px;border:1px solid #ded8ca;border-radius:12px;background:#fdfcf9;
  cursor:pointer;font-weight:600;font-size:.92rem;font-family:inherit;color:var(--cm-ink);transition:.15s;
}
.cm-amounts button:hover{border-color:var(--cm-green)}
.cm-amounts button[aria-pressed="true"]{background:var(--cm-green);border-color:var(--cm-green);color:#fff}

/* Transaction summary — shown immediately before the payment button */
.cm-summary{list-style:none;margin:0;padding:0}
.cm-summary li{
  display:flex;justify-content:space-between;gap:16px;padding:10px 0;
  border-bottom:1px dashed var(--cm-line);font-size:.94rem;
}
.cm-summary li span:first-child{color:var(--cm-muted)}
.cm-summary li.cm-total{
  border-bottom:none;border-top:2px solid var(--cm-ink);margin-top:6px;
  padding-top:14px;font-size:1.12rem;font-weight:700;
}
.cm-summary li.cm-total span:first-child{color:var(--cm-ink)}

.cm-fee-note{color:var(--cm-muted);font-size:.8rem;margin:12px 0 0;line-height:1.5}

/* Mandatory consent gate */
.cm-consent{
  display:flex;gap:12px;align-items:flex-start;background:#fbf9f3;
  border:1px solid var(--cm-line);border-radius:14px;padding:16px 18px;margin:22px 0 18px;
}
.cm-consent input[type=checkbox]{
  width:20px;height:20px;margin:2px 0 0;flex:0 0 auto;accent-color:var(--cm-green);cursor:pointer;
}
.cm-consent label{font-size:.92rem;line-height:1.6;cursor:pointer}
.cm-consent a{color:var(--cm-green-dark);font-weight:600}
.cm-pay{
  width:100%;padding:16px;border:none;border-radius:999px;background:var(--cm-green);color:#fff;
  font-size:1.02rem;font-weight:700;font-family:inherit;cursor:pointer;transition:.2s;
}
.cm-pay:hover:not(:disabled){background:var(--cm-green-dark)}
.cm-pay:disabled{background:#cfcabc;color:#f4f2ec;cursor:not-allowed}
.cm-pay-mark{display:flex;justify-content:center;margin-top:16px}
.cm-hint{text-align:center;color:var(--cm-muted);font-size:.83rem;margin:12px 0 0}
.cm-hint.cm-blocked{color:#a8471b;font-weight:600}

@media(max-width:600px){
  .cm-checkout{padding:26px 0 44px}
  .cm-card{padding:20px 18px}
  .cm-doc{padding:32px 0 48px}
  .cm-doc h1{font-size:1.6rem}
  .cm-toc ol{columns:1}
  .cm-subhead nav a:not(.cm-back){display:none}
}