
/* CCGP Widget CSS — scoped */
#ccgp-1.ccgp{
  font-family: Inter, Segoe UI, Roboto, Arial, sans-serif;
  max-width: 1200px;
  margin: 18px auto;
  padding: 0 12px;
}

/* Theme variables */
#ccgp-1{
  --accent:#2b6cb0;
  --muted:#6b7280;
  --card:#ffffff;
  --radius:12px;
  --shadow:0 8px 28px rgba(15,23,42,0.06);
  --btn-primary:#475569;
  --btn-ghost:#f8fafc;
  --btn-text:#ffffff;
  --border:#e6eef8;
  --columns-total:12;
}

/* No effects */
#ccgp-1 .gp-card{ background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; border:1px solid rgba(15,23,42,0.06); }
#ccgp-1 .gp-top{ display:grid; grid-template-columns:1fr 380px; gap:20px; align-items:start; }
@media(max-width:1100px){ #ccgp-1 .gp-top{ grid-template-columns:1fr } }

#ccgp-1 h2{ margin:0 0 8px; font-size:18px; color:var(--accent); font-weight:700; letter-spacing:.1px; }
#ccgp-1 label{ display:block; margin-top:8px; font-weight:600; color:#0f172a; font-size:13px; }
#ccgp-1 input[type="number"], #ccgp-1 select{
  width:100%; padding:10px; margin-top:6px; box-sizing:border-box;
  border-radius:10px; border:1px solid var(--border); font-size:14px;
  background:#fff; color:#0f172a; height:44px;
}
#ccgp-1 .gp-small{ font-size:13px; color:var(--muted); margin-top:8px; }

#ccgp-1 .payment-section{ padding:12px 0 0; margin-bottom:14px; border-top:1px dashed rgba(14,20,30,0.10); }
#ccgp-1 .payment-block{ padding:10px 0; margin-bottom:12px; }
#ccgp-1 .payment-block h3{ margin:0 0 8px; font-size:15px; color:#0f172a; font-weight:700; }
#ccgp-1 .muted-note{ font-size:12px; color:var(--muted); margin-top:8px; }

#ccgp-1 .loan-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; width:100%; }
@media(max-width:900px){ #ccgp-1 .loan-grid{ grid-template-columns:1fr 1fr } }

#ccgp-1 .intro-post-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
@media(max-width:900px){ #ccgp-1 .intro-post-row{ grid-template-columns:1fr } }

#ccgp-1 .min-two-col{ display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:end; width:100%; }
@media(max-width:900px){ #ccgp-1 .min-two-col{ grid-template-columns:1fr } }

#ccgp-1 .summary-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; align-items:start; margin-top:12px; }
@media(max-width:900px){ #ccgp-1 .summary-grid{ grid-template-columns:1fr } }
#ccgp-1 .summary-grid .header{ font-weight:700; background:#f8fbff; border-bottom:1px solid var(--border); padding:10px 12px; text-align:left; font-size:13px; }
#ccgp-1 .summary-grid .label{ padding:10px 12px; border-bottom:1px dashed #eef3f8; color:#0f172a; font-weight:600; font-size:13px; }
#ccgp-1 .summary-grid .scheduled, #ccgp-1 .summary-grid .minimum{ padding:10px 12px; border-bottom:1px dashed #eef3f8; color:var(--muted); background:#fafcff; font-weight:600; font-size:13px; }

#ccgp-1 .btn-row{ display:flex; gap:12px; margin-top:14px; }
#ccgp-1 .btn-row button{ flex:1; padding:12px 14px; border-radius:10px; font-weight:700; font-size:14px; cursor:pointer; border:0; text-align:center; }
#ccgp-1 .btn-primary{ background:var(--btn-primary); color:var(--btn-text); }
#ccgp-1 .btn-ghost{ background:var(--btn-ghost); color:#1f2937; border:1px solid rgba(15,23,42,0.12); }
@media(max-width:700px){ #ccgp-1 .btn-row{ flex-direction:column } }

#ccgp-1 .gp-pill{ display:inline-block; padding:6px 12px; border-radius:999px; background:#eef6ff; color:#1f4f7a; font-size:12px; border:1px solid rgba(79,70,229,0.06); font-weight:700; }

#ccgp-1 .gp-schedule-wrap{ margin-top:12px; overflow:auto; max-height:760px; position:relative; }
#ccgp-1 table.gp-schedule{ width:100%; border-collapse:collapse; font-size:13px; table-layout:fixed; }
#ccgp-1 table.gp-schedule th, #ccgp-1 table.gp-schedule td{
  border:1px solid #e9f0f7; padding:12px 10px; text-align:center; vertical-align:middle;
  overflow-wrap:break-word; word-break:break-word; white-space:normal;
}
#ccgp-1 table.gp-schedule thead th{
  background:#f1f6ff; font-weight:700; color:#0f172a; position:sticky; top:0; z-index:40;
}
#ccgp-1 table.gp-schedule tbody tr:nth-child(even){ background:#fbfdff; }

#ccgp-1 .col-prior-balance{ background:#f7fbff; }
#ccgp-1 .col-principal{ background:#f0f7fb; }
#ccgp-1 .col-payment{ background:#fff7f6; }
#ccgp-1 .col-balance{ background:#f7fff6; }
#ccgp-1 .col-interest{ background:#fffdf0; }

/* 12 columns equal width */
#ccgp-1 table.gp-schedule th, #ccgp-1 table.gp-schedule td{ width: calc(100% / var(--columns-total)); min-width:0; }

/* Sticky Month and Status */
#ccgp-1 table.gp-schedule th:first-child,
#ccgp-1 table.gp-schedule td:first-child{
  position: sticky; left:0; z-index:60; background:#fff; text-align:center;
}
#ccgp-1 table.gp-schedule th:nth-child(2),
#ccgp-1 table.gp-schedule td:nth-child(2){
  position: sticky; left: calc(100% / var(--columns-total)); z-index:59; background:#fff;
  text-align:left; padding-left:12px;
}

#ccgp-1 .gp-error{
  display:none;
  margin-top:12px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #fecaca;
  background:#fef2f2;
  color:#991b1b;
  font-weight:700;
  font-size:13px;
}