/* ============================================================
   PLAN MODALS — v3 reskin (downgrade / upgrade / cancellation)
   Scoped to .plansModal so it can't leak to other modals. Loaded
   AFTER custom.css (dep) so these win ties. Pure restyle — the
   step show/hide (.modelStep display, jQuery .show/.hide/.active)
   and every JS/payment hook are untouched. The labeled step bar +
   close "×" are injected by js/plan-modals.js (progress display only).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:wght@400;500;600;700&display=swap');

.plansModal {
  --pm-teal: #00A896; --pm-teal-dark: #007A6E; --pm-teal-light: #E6F7F5;
  --pm-dark: #1A2B2A; --pm-mid: #3D5250; --pm-gray: #6B7B7A;
  --pm-border: #E2EEEC; --pm-light: #F5F9F8;
  --pm-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pm-serif: 'DM Serif Display', Georgia, serif;
}

/* ---- shell: center a compact card instead of a full-bleed slab ---- */
.plansModal .modal-container {
  min-height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 16px;
}
.plansModal .modal-container .modal-row {
  display: block;
  width: 100%;
  max-width: 640px;
  min-height: 0;
  margin: 0 auto;
  padding: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(26,43,42,.35);
  overflow: hidden;
  align-items: initial;
  font-family: var(--pm-sans);
  color: var(--pm-dark);
}

/* ---- injected header (title + close ×) ---- */
.plansModal .tdm-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px; border-bottom: 1px solid var(--pm-border);
}
.plansModal .tdm-title { font-family: var(--pm-serif); font-weight: 400; font-size: 19px; color: var(--pm-dark); }
.plansModal .tdm-x {
  border: none; background: var(--pm-light); color: var(--pm-gray);
  width: 30px; height: 30px; border-radius: 50%; font-size: 17px; line-height: 1;
  cursor: pointer; flex: none; transition: background .15s, color .15s; padding: 0;
}
.plansModal .tdm-x:hover { background: #ECF3F1; color: var(--pm-dark); }

/* ---- injected step bar (progress indicator only) ---- */
.plansModal .tdm-steps { display: flex; gap: 6px; padding: 16px 24px 0; }
.plansModal .tdm-steps span {
  flex: 1; text-align: center; font: 600 11px/1 var(--pm-sans);
  letter-spacing: .04em; text-transform: uppercase; color: var(--pm-gray);
  padding-bottom: 9px; border-bottom: 2px solid var(--pm-border); transition: color .2s, border-color .2s;
}
.plansModal .tdm-steps span.on { color: var(--pm-teal-dark); border-color: var(--pm-teal); }

/* ---- step body ---- */
.plansModal .modelStep { width: 100%; text-align: left; padding: 24px 28px 26px; }
.plansModal .modelStep.step-1,
.plansModal .upgrade-modal-step.step-1,
.plansModal .cancellation-model-step.step-1,
.plansModal .canceled-model-step { text-align: center; padding: 30px 30px 32px; }
.plansModal .modelStep > img,
.plansModal .canceled-model-step img { width: 56px; height: auto; margin: 4px auto 14px; }

.plansModal .modelStep h2,
.plansModal .modelStep .border-heading {
  font-family: var(--pm-serif); font-weight: 400; font-size: 25px; line-height: 1.15;
  color: var(--pm-dark); margin: 0 0 10px;
}
.plansModal .modelStep h2:after,
.plansModal .modelStep .border-heading:after { content: none !important; display: none !important; }
.plansModal .modelStep p {
  font-family: var(--pm-sans); font-size: 14.5px; line-height: 1.6; color: var(--pm-mid); margin: 0 0 16px;
}
.plansModal .modelStep p b,
.plansModal .modelStep p strong { color: var(--pm-teal-dark); font-weight: 600; }

/* ---- buttons: teal primary, ghost secondary ---- */
.plansModal .site-button {
  font: 600 14px/1 var(--pm-sans); border-radius: 8px; padding: 12px 22px;
  border: 1px solid var(--pm-border); background: #fff; color: var(--pm-mid);
  min-width: 0; transition: all .18s cubic-bezier(.2,.8,.2,1); display: inline-flex;
  align-items: center; justify-content: center; text-decoration: none;
}
.plansModal .site-button:hover { border-color: var(--pm-teal); color: var(--pm-teal-dark); }
.plansModal .site-button.green-bg,
.plansModal .modal-button .site-button.grey-bg,
.plansModal .site-button.grey-bg {
  background: var(--pm-teal); border-color: var(--pm-teal); color: #fff; min-width: 0;
}
.plansModal .site-button.green-bg:hover,
.plansModal .modal-button .site-button.grey-bg:hover,
.plansModal .site-button.grey-bg:hover { background: var(--pm-teal-dark); border-color: var(--pm-teal-dark); color: #fff; }
.plansModal .site-button.grey-white,
.plansModal .site-button.bg-white { background: #fff; border-color: var(--pm-border); color: var(--pm-mid); }
.plansModal .site-button.grey-white:hover,
.plansModal .site-button.bg-white:hover { border-color: var(--pm-teal); color: var(--pm-teal-dark); }

/* text-link close ("I'll downgrade later", "Cancel") */
.plansModal .modal-button a.close-btn,
.plansModal a.close-btn:not(.site-button) {
  font: 600 13.5px/1 var(--pm-sans); color: var(--pm-gray); text-decoration: underline;
  margin: 14px 0 0; display: inline-block;
}
.plansModal .modal-button a.close-btn:hover,
.plansModal a.close-btn:not(.site-button):hover { color: var(--pm-teal-dark); }

.plansModal .modal-button { margin-top: 22px; }
.plansModal .button-row,
.plansModal .summary-btn { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.plansModal .button-row .site-button[id^="trigger"],
.plansModal .button-row input[type="submit"] { background: var(--pm-teal); border: 1px solid var(--pm-teal); color: #fff; border-radius: 8px; font: 600 14px/1 var(--pm-sans); padding: 13px 22px; cursor: pointer; }
.plansModal .button-row input[type="submit"]:hover { background: var(--pm-teal-dark); }

/* ---- step 2: plan compare ---- */
.plansModal .plan-container { margin: 4px 0 0; }
.plansModal .plan-container .title { display: flex; align-items: center; gap: 20px; padding: 0 0 12px; }
.plansModal .plan-container .title h6 {
  flex: 1; margin: 0; font: 600 13px/1.2 var(--pm-sans); text-transform: uppercase;
  letter-spacing: .05em; color: var(--pm-gray);
}
.plansModal .plan-container .title .empty { width: 1px; flex: none; }
.plansModal .plan-list { display: flex; align-items: flex-start; gap: 20px; }
.plansModal .plan-list > ul {
  flex: 1; margin: 0; padding: 14px 16px; list-style: none;
  border: 1px solid var(--pm-border); border-radius: 12px; background: #fff;
}
.plansModal .plan-list > ul:last-of-type,
.plansModal .plan-list > ul.downgrade-plan-features { background: var(--pm-teal-light); border-color: rgba(0,168,150,.18); }
.plansModal .plan-list .arrow { display: none; }
.plansModal .plan-list li {
  position: relative; padding: 6px 0 6px 24px; font: 400 13.5px/1.4 var(--pm-sans); color: var(--pm-dark);
}
.plansModal .plan-list li:before {
  content: '\2713'; position: absolute; left: 0; top: 6px; color: var(--pm-teal);
  font-weight: 700; font-size: 13px;
}
.plansModal .plan-list li.not-available { color: var(--pm-gray); text-decoration: line-through; text-decoration-color: rgba(107,123,122,.5); }
.plansModal .plan-list li.not-available:before { content: '\2715'; color: #C26B6B; text-decoration: none; }
.plansModal .plan-container > p { font-size: 13px; color: var(--pm-gray); margin: 14px 0 0; }

/* ---- step 3: accounts to deactivate ---- */
.plansModal .accounts-detail { margin-top: 4px; }
.plansModal .downgrade-plan-users { font-size: 13.5px; color: var(--pm-mid); margin: 0 0 14px; }
.plansModal .account-table { border: 1px solid var(--pm-border); border-radius: 12px; overflow: hidden; margin: 0 0 14px; }
.plansModal .account-table .table-head {
  display: grid; grid-template-columns: 1.6fr 1.6fr .8fr; gap: 12px;
  padding: 11px 16px; background: var(--pm-light); font: 600 11px/1 var(--pm-sans);
  text-transform: uppercase; letter-spacing: .05em; color: var(--pm-gray);
}
.plansModal .account-table .table-info {
  display: grid; grid-template-columns: 1.6fr 1.6fr .8fr; gap: 12px; align-items: center;
  padding: 13px 16px; border-top: 1px solid var(--pm-border); position: relative;
}
.plansModal .account-table .table-info .name a { display: flex; align-items: center; gap: 9px; color: var(--pm-dark); font-weight: 600; font-size: 13.5px; text-decoration: none; }
.plansModal .account-table .table-info .name img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; }
.plansModal .account-table .table-info .email a { color: var(--pm-gray); font-size: 12.5px; text-decoration: none; }
.plansModal .account-table .table-info .role { font-size: 11px; font-weight: 600; color: var(--pm-gray); }

/* brand checkbox (white check on teal) — input is the .subUsers sibling before .check-box */
.plansModal .account-table .table-info input[type="checkbox"].subUsers { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; left: 16px; top: 50%; transform: translateY(-50%); cursor: pointer; z-index: 2; }
.plansModal .account-table .table-info { padding-left: 46px; }
.plansModal .account-table .table-info .check-box {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border: 1.5px solid var(--pm-border); border-radius: 6px;
  background: #fff; pointer-events: none;
}
.plansModal .account-table .table-info .check-box span { position: absolute; inset: 0; }
.plansModal .account-table .table-info input.subUsers:checked + .check-box { background: var(--pm-teal); border-color: var(--pm-teal); }
.plansModal .account-table .table-info input.subUsers:checked + .check-box span:after {
  content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
/* owner row has no checkbox → keep its content aligned to the left edge */
.plansModal .account-table .my-subclients .subclient-data:not(:has(input.subUsers)) { padding-left: 16px; }

/* ---- step 4: summary + card ---- */
.plansModal .summary-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.plansModal .summary-row .left-collunm,
.plansModal .summary-row .right-collunm { width: 100%; }
.plansModal .plan-detail { background: var(--pm-light); border: 1px solid var(--pm-border); border-radius: 12px; padding: 16px 18px; }
.plansModal .plan-detail p { font-size: 13.5px; color: var(--pm-mid); margin: 0 0 10px; }
.plansModal .plan-detail ul { margin: 0 0 12px; padding-left: 18px; }
.plansModal .plan-detail ul li { font-size: 13.5px; color: var(--pm-dark); padding: 2px 0; }
.plansModal .order-summary h2,
.plansModal .order-summary h3,
.plansModal .card-details h3 { font-family: var(--pm-serif); font-weight: 400; font-size: 16px; color: var(--pm-dark); margin: 14px 0 8px; }
.plansModal #downgrade-card-element,
.plansModal #upgrade-card-element { border: 1px solid var(--pm-border); border-radius: 10px; padding: 13px 14px; background: #fff; }
.plansModal #downgrade-card-errors,
.plansModal #card-errors { color: #C0392B; font-size: 12.5px; margin-top: 8px; }

/* ---- cancellation modal: GF form 57 native progress bar ----
   GF renders its own "Step X of Y" + progress bar. Keep it as clean stacked
   blocks (title above the bar) so the step counter can't overlap the question
   heading, and brand the bar teal. */
.plansModal .gf_progressbar_wrapper { position: static !important; float: none; clear: both; margin: 0 0 22px; padding: 0; width: 100%; }
.plansModal .gf_progressbar_title { position: static !important; float: none; clear: both; display: block; text-align: left; font: 600 12px/1.3 var(--pm-sans); text-transform: uppercase; letter-spacing: .04em; color: var(--pm-gray); margin: 0 0 8px; }
.plansModal .gf_progressbar { background: var(--pm-border); border-radius: 999px; height: 8px; overflow: hidden; padding: 0; }
.plansModal .gf_progressbar_percentage { background: var(--pm-teal); height: 8px; border-radius: 999px; }
.plansModal .gf_progressbar_percentage span { display: none; }
.plansModal .cancellation-model-step .gform_wrapper .gsection_title,
.plansModal .cancellation-model-step .gform_wrapper .gfield_label { clear: both; }

/* ---- step 5 / done states ---- */
.plansModal .canceled-model-step h2 { font-family: var(--pm-serif); font-weight: 400; }
.plansModal .cancelSubmitResponse { color: var(--pm-mid); }

@media (max-width: 600px) {
  .plansModal .plan-list { flex-direction: column; }
  .plansModal .summary-row { grid-template-columns: 1fr; }
  .plansModal .account-table .table-head { display: none; }
  .plansModal .account-table .table-info { grid-template-columns: 1fr; gap: 2px; }
}