/* ============================================================
   CANCEL / SWITCH-TO-FREE DRAWER (billing screen)
   Single-page right-side drawer that replaces the old multi-step
   GF cancellation modal. Scoped under .tcd-overlay.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:wght@400;500;600;700&display=swap');

.tcd-overlay {
  --teal:#00A896; --teal-dark:#007A6E; --teal-light:#E6F7F5;
  --dark:#1A2B2A; --mid:#3D5250; --gray:#6B7B7A; --border:#E2EEEC; --light:#F5F9F8;
  --sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --serif:'DM Serif Display',Georgia,serif;
  position:fixed; inset:0; z-index:100000; background:rgba(26,43,42,.40);
  display:flex; justify-content:flex-end; opacity:0; transition:opacity .22s ease;
  font-family:var(--sans);
}
.tcd-overlay.on { opacity:1; }
/* CRITICAL: display:flex above would otherwise beat the UA [hidden]{display:none}
   (equal specificity, this sheet loads later), leaving a transparent full-screen
   z-index:100000 overlay that swallows every click on the page. Force it hidden. */
.tcd-overlay[hidden] { display:none !important; }
.tcd-overlay *{ box-sizing:border-box; }

.tcd-drawer {
  width:440px; max-width:100%; height:100%; background:#fff; color:var(--dark);
  display:flex; flex-direction:column; box-shadow:-16px 0 48px rgba(26,43,42,.20);
  transform:translateX(100%); transition:transform .26s cubic-bezier(.2,.8,.2,1);
  overflow-y:auto;
}
.tcd-overlay.on .tcd-drawer { transform:translateX(0); }

.tcd-head { display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--border); position:sticky; top:0; background:#fff; z-index:1; }
.tcd-title { font-family:var(--serif); font-weight:400; font-size:20px; }
.tcd-x { border:none; background:var(--light); width:30px; height:30px; border-radius:50%; color:var(--gray); cursor:pointer; font-size:17px; line-height:1; padding:0; transition:background .15s,color .15s; }
.tcd-x:hover { background:#ECF3F1; color:var(--dark); }

.tcd-body { padding:22px 24px; flex:1; }
.tcd-plan { display:flex; align-items:center; gap:12px; background:var(--light); border:1px solid var(--border); border-radius:12px; padding:14px 16px; margin-bottom:18px; }
.tcd-plan-ic { width:38px; height:38px; border-radius:10px; background:var(--teal-light); color:var(--teal-dark); display:flex; align-items:center; justify-content:center; flex:none; font-size:16px; }
.tcd-plan-txt { display:flex; flex-direction:column; }
.tcd-plan-nm { font-weight:600; font-size:14.5px; }
.tcd-plan-sub { font-size:12.5px; color:var(--gray); }

.tcd-callout { background:var(--teal-light); border:1px solid rgba(0,168,150,.18); border-radius:12px; padding:14px 16px; margin-bottom:20px; }
.tcd-callout-big { font-weight:600; font-size:14px; color:var(--teal-dark); display:flex; align-items:center; gap:8px; }
.tcd-callout p { margin:6px 0 0; font-size:13px; line-height:1.55; color:var(--mid); }

.tcd-h4 { font:600 11px/1 var(--sans); text-transform:uppercase; letter-spacing:.06em; color:var(--gray); margin:0 0 12px; }
.tcd-h4 span { text-transform:none; font-weight:400; color:var(--gray); }
.tcd-opts { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.tcd-opt { display:flex; align-items:center; gap:10px; border:1px solid var(--border); border-radius:10px; padding:11px 14px; font-size:13.5px; color:var(--dark); cursor:pointer; transition:.12s; }
.tcd-opt:hover { border-color:var(--teal); }
.tcd-opt input { position:absolute; opacity:0; pointer-events:none; }
.tcd-rb { width:18px; height:18px; border-radius:50%; border:1.5px solid var(--border); flex:none; transition:.12s; }
.tcd-opt:has(input:checked) { border-color:var(--teal); background:var(--teal-light); }
.tcd-opt:has(input:checked) .tcd-rb { border-color:var(--teal); background:var(--teal); box-shadow:inset 0 0 0 3px #fff; }
.tcd-comment { width:100%; border:1px solid var(--border); border-radius:10px; padding:11px 13px; font:400 13.5px/1.5 var(--sans); resize:vertical; min-height:74px; outline:none; }
.tcd-comment:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(0,168,150,.18); }
.tcd-error { color:#C0392B; font-size:13px; margin:12px 0 0; }

.tcd-foot { border-top:1px solid var(--border); padding:16px 24px; display:flex; gap:10px; position:sticky; bottom:0; background:#fff; }
.tcd-btn { font:600 14px/1 var(--sans); padding:13px 18px; border-radius:8px; cursor:pointer; border:1px solid var(--border); background:#fff; color:var(--mid); transition:all .16s; }
.tcd-keep { flex:1.2; }
.tcd-keep:hover { border-color:var(--teal); color:var(--teal-dark); }
.tcd-go { flex:1; background:var(--teal); border-color:var(--teal); color:#fff; }
.tcd-go:hover { background:var(--teal-dark); border-color:var(--teal-dark); }

.tcd-done { padding:48px 28px; text-align:center; }
.tcd-done-ic { width:54px; height:54px; border-radius:50%; background:var(--teal-light); color:var(--teal-dark); display:inline-flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:16px; }
.tcd-done-title { font-family:var(--serif); font-weight:400; font-size:24px; margin:0 0 10px; color:var(--dark); }
.tcd-done-msg { font-size:14px; line-height:1.6; color:var(--mid); margin:0 0 24px; }
.tcd-done-btn { display:inline-block; text-decoration:none; text-align:center; }

@media (max-width:480px) {
  .tcd-drawer { width:100%; }
}

/* ============================================================
   BRANDED CONFIRM MODAL (replaces window.confirm — e.g. Reactivate)
   Small centered card. Scoped under .tcfm-overlay.
   ============================================================ */
.tcfm-overlay {
  --teal:#00A896; --teal-dark:#007A6E; --teal-light:#E6F7F5;
  --dark:#1A2B2A; --mid:#3D5250; --gray:#6B7B7A; --border:#E2EEEC; --light:#F5F9F8;
  --sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --serif:'DM Serif Display',Georgia,serif;
  position:fixed; inset:0; z-index:100001; background:rgba(26,43,42,.40);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; transition:opacity .18s ease; font-family:var(--sans);
}
.tcfm-overlay.on { opacity:1; }
.tcfm-overlay[hidden] { display:none !important; }
.tcfm-overlay *{ box-sizing:border-box; }
.tcfm-box {
  width:380px; max-width:100%; background:#fff; color:var(--dark); border-radius:16px;
  padding:30px 28px 24px; text-align:center; box-shadow:0 24px 64px rgba(26,43,42,.28);
  transform:translateY(10px) scale(.98); transition:transform .2s cubic-bezier(.2,.8,.2,1);
}
.tcfm-overlay.on .tcfm-box { transform:translateY(0) scale(1); }
.tcfm-ic { width:52px; height:52px; border-radius:50%; background:var(--teal-light); color:var(--teal-dark); display:inline-flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:14px; }
.tcfm-title { font-family:var(--serif); font-weight:400; font-size:21px; margin:0 0 8px; }
.tcfm-msg { font-size:13.5px; line-height:1.6; color:var(--mid); margin:0 0 22px; }
.tcfm-foot { display:flex; gap:10px; }
.tcfm-btn { flex:1; font:600 14px/1 var(--sans); padding:12px 16px; border-radius:8px; cursor:pointer; border:1px solid var(--border); background:#fff; color:var(--mid); transition:all .16s; }
.tcfm-cancel:hover { border-color:var(--teal); color:var(--teal-dark); }
.tcfm-ok { background:var(--teal); border-color:var(--teal); color:#fff; }
.tcfm-ok:hover { background:var(--teal-dark); border-color:var(--teal-dark); }
.tcfm-ok[disabled] { opacity:.6; cursor:default; }