/* ==========================================================================
   MAKE THE CV — Billing & subscription design system
   Shared presentation layer for: public pricing (home), the logged-in
   subscription screen, and the payment-confirmation screen.
   Presentation only — every value on screen comes from the app.
   ========================================================================== */

:root{
  /* Brand */
  --mtc-g:#16A34A; --mtc-g2:#22C55E; --mtc-gd:#15803D;
  --mtc-gl:#E9F9EF; --mtc-gm:#B7E7CA;
  /* Ink & surfaces */
  --mtc-ink:#0B1220; --mtc-ink-2:#1F2A37; --mtc-mut:#5B6675; --mtc-faint:#93A0B2;
  --mtc-line:#E6EAF0; --mtc-surface:#FFFFFF; --mtc-bg:#F4F6F9; --mtc-bg-2:#EEF1F5;
  /* Dark plan panel */
  --mtc-dark-1:#0F3D2E; --mtc-dark-2:#07231A;
  /* Status */
  --mtc-warn:#9A5B00; --mtc-warn-l:#FFF7EC; --mtc-warn-m:#F6E3C2;
  --mtc-bad:#B42318;  --mtc-bad-l:#FEF3F2;  --mtc-bad-m:#F5C7C2;
  /* Radii */
  --mtc-r-sm:8px; --mtc-r-md:12px; --mtc-r-lg:18px; --mtc-r-xl:24px;
  /* Elevation */
  --mtc-sh-1:0 8px 22px -16px rgba(11,18,32,.40);
  --mtc-sh-2:0 24px 60px -48px rgba(11,18,32,.40);
  --mtc-sh-3:0 40px 90px -50px rgba(11,18,32,.50);
  /* Type */
  --mtc-sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mtc-disp:"Space Grotesk","Plus Jakarta Sans",system-ui,sans-serif;
}

/* Scope: everything below applies inside a .mtc-billing container so the rest
   of the app keeps its own styling untouched. */
.mtc-billing{font-family:var(--mtc-sans);color:var(--mtc-ink)}
.mtc-billing *,.mtc-billing *::before,.mtc-billing *::after{box-sizing:border-box}
.mtc-billing button{font-family:inherit;cursor:pointer}
.mtc-billing [hidden]{display:none!important}
.mtc-billing :focus-visible{outline:2px solid var(--mtc-g);outline-offset:2px;border-radius:var(--mtc-r-sm)}
.mtc-wrap{max-width:1180px;margin:0 auto;width:100%}

/* ---------- Banners / flash / notices ------------------------------------ */
.mtc-banner{background:linear-gradient(180deg,#EAF9F0,#F1FBF5);border:1px solid var(--mtc-gm);border-radius:var(--mtc-r-lg);padding:16px 22px;margin-bottom:22px}
.mtc-banner .t{font-size:15px;font-weight:800;color:var(--mtc-gd);margin:0}
.mtc-banner .d{font-size:13.5px;color:#4A7A5F;margin:3px 0 0}
.mtc-banner.warn{background:linear-gradient(180deg,var(--mtc-warn-l),#FFFBF4);border-color:var(--mtc-warn-m)}
.mtc-banner.warn .t{color:var(--mtc-warn)}
.mtc-banner.warn .d{color:#8A5B12}
.mtc-banner.bad{background:linear-gradient(180deg,var(--mtc-bad-l),#FFF8F7);border-color:var(--mtc-bad-m)}
.mtc-banner.bad .t{color:var(--mtc-bad)}
.mtc-banner.bad .d{color:#8C2F27}
.mtc-banner-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}

/* ---------- Segmented tabs ----------------------------------------------- */
.mtc-tabsrow{display:flex;justify-content:center}
.mtc-tabs{display:inline-flex;gap:5px;background:var(--mtc-surface);border:1px solid var(--mtc-line);border-radius:14px;padding:5px;box-shadow:var(--mtc-sh-1);max-width:100%}
.mtc-tab{border:none;background:none;padding:11px 22px;border-radius:10px;font-weight:700;font-size:14.5px;color:var(--mtc-mut);white-space:nowrap}
.mtc-tab:hover{color:var(--mtc-ink)}
.mtc-tab[aria-selected="true"]{background:var(--mtc-ink);color:#fff}

/* ---------- Pricing header ----------------------------------------------- */
.mtc-pricing{text-align:center;padding:26px 0 10px}
.mtc-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mtc-gd);background:var(--mtc-gl);border-radius:999px;padding:7px 15px}
.mtc-eyebrow svg{width:13px;height:13px}
.mtc-h2{font-family:var(--mtc-disp);font-size:clamp(28px,4.2vw,44px);font-weight:700;letter-spacing:-.02em;margin:18px 0 0;line-height:1.08;color:var(--mtc-ink)}
.mtc-h2 .accent{color:var(--mtc-g)}
.mtc-sub{font-size:16px;color:var(--mtc-mut);margin:14px auto 0;max-width:640px;line-height:1.55}
.mtc-sub b{color:var(--mtc-ink-2);font-weight:700}

/* ---------- Hero plan card ------------------------------------------------ */
.mtc-plan{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);border-radius:var(--mtc-r-xl);overflow:hidden;box-shadow:var(--mtc-sh-3);margin:34px auto 0;max-width:1000px;background:var(--mtc-surface);border:1px solid var(--mtc-line)}
.mtc-plan-l{background:linear-gradient(150deg,var(--mtc-dark-1),var(--mtc-dark-2));color:#fff;padding:34px}
.mtc-plan-tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#CFE9DC;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:7px 13px}
.mtc-plan-l h3{font-family:var(--mtc-disp);font-size:26px;font-weight:700;margin:26px 0 12px;color:#fff;line-height:1.15}
.mtc-plan-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.mtc-plan-price .amt{font-family:var(--mtc-disp);font-size:clamp(32px,4vw,46px);font-weight:700;letter-spacing:-.02em;overflow-wrap:anywhere}
.mtc-plan-price .per{font-size:16px;color:#A9C6B8}
.mtc-plan-note{font-size:14px;color:#9FC0B0;margin:12px 0 0}
.mtc-plan-desc{font-size:14px;color:#BBD6C8;margin:14px 0 0;line-height:1.55}
.mtc-plan-r{padding:30px 32px;display:flex;flex-direction:column}

/* ---------- Feature list -------------------------------------------------- */
.mtc-feat{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;margin:0;padding:0;list-style:none}
.mtc-feat li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--mtc-ink-2);line-height:1.4}
.mtc-ck{width:22px;height:22px;flex:0 0 auto;border-radius:999px;background:var(--mtc-gl);color:var(--mtc-gd);display:grid;place-items:center}
.mtc-ck svg{width:13px;height:13px;display:block}

/* ---------- Discount / promo code ---------------------------------------- */
.mtc-disc{display:flex;gap:10px;margin-top:24px}
.mtc-disc input{flex:1 1 auto;min-width:0;height:52px;border:1px solid var(--mtc-line);border-radius:var(--mtc-r-md);padding:0 16px;font-family:inherit;font-size:14px;letter-spacing:.05em;text-transform:uppercase;color:var(--mtc-ink);background:var(--mtc-surface);outline:none}
.mtc-disc input::placeholder{color:var(--mtc-faint);letter-spacing:.05em}
.mtc-disc input:focus{border-color:var(--mtc-g);box-shadow:0 0 0 3px rgba(22,163,74,.13)}
.mtc-disc .mtc-apply{height:52px;padding:0 22px;border:1px solid var(--mtc-line);border-radius:var(--mtc-r-md);background:var(--mtc-surface);font-weight:700;font-size:14px;color:var(--mtc-ink-2);white-space:nowrap}
.mtc-disc .mtc-apply:hover:not([disabled]){background:var(--mtc-bg)}
.mtc-discmsg{font-size:12.5px;font-weight:600;margin:8px 0 0;min-height:1px}
.mtc-discmsg.ok{color:var(--mtc-gd)}
.mtc-discmsg.bad{color:var(--mtc-bad)}
.mtc-upgrade-break{display:grid;gap:0;margin-top:22px;border:1px solid var(--mtc-line);border-radius:var(--mtc-r-md);overflow:hidden;background:#FBFDFB}
.mtc-upgrade-break div{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:11px 14px;border-top:1px solid var(--mtc-line);font-size:13.5px;color:var(--mtc-mut)}
.mtc-upgrade-break div:first-child{border-top:0}
.mtc-upgrade-break b{font-size:14px;color:var(--mtc-ink);white-space:nowrap}
.mtc-upgrade-break .save span,.mtc-upgrade-break .save b{color:var(--mtc-gd)}
.mtc-upgrade-break .total{background:#F0FDF4}
.mtc-upgrade-break .total span,.mtc-upgrade-break .total b{font-weight:800;color:var(--mtc-ink)}

/* ---------- Buttons ------------------------------------------------------- */
.mtc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:54px;padding:0 30px;border:1px solid transparent;border-radius:var(--mtc-r-md);font-weight:700;font-size:15px;transition:background .18s,box-shadow .18s,transform .18s,border-color .18s;text-align:center}
.mtc-btn.block{width:100%}
.mtc-btn.sm{height:42px;padding:0 18px;font-size:14px}
.mtc-btn.solid{border:none;background:linear-gradient(180deg,var(--mtc-g2),var(--mtc-g));color:#fff;box-shadow:0 14px 28px -14px rgba(22,163,74,.7)}
.mtc-btn.solid:hover:not([disabled]){background:var(--mtc-gd)}
.mtc-btn.dark{border:none;background:var(--mtc-ink);color:#fff}
.mtc-btn.dark:hover:not([disabled]){background:#1B2738}
.mtc-btn.ghost{border-color:var(--mtc-line);background:var(--mtc-surface);color:var(--mtc-ink-2)}
.mtc-btn.ghost:hover:not([disabled]){background:var(--mtc-bg)}
.mtc-btn.danger{border-color:var(--mtc-bad-m);background:var(--mtc-bad-l);color:var(--mtc-bad)}
.mtc-btn.danger:hover:not([disabled]){background:#FBE4E1}
.mtc-btn[disabled],.mtc-btn[aria-disabled="true"]{opacity:.62;cursor:not-allowed;box-shadow:none}
.mtc-btn.is-busy{position:relative;pointer-events:none;opacity:.75}
.mtc-btn.is-busy::after{content:"";width:15px;height:15px;border-radius:999px;border:2px solid currentColor;border-right-color:transparent;animation:mtc-spin .7s linear infinite}
@keyframes mtc-spin{to{transform:rotate(360deg)}}
.mtc-foot{text-align:center;font-size:13px;color:var(--mtc-faint);margin:20px auto 0}

/* ---------- Plan option cards (secondary / multi-term plans) --------------- */
.mtc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;max-width:1000px;margin:34px auto 0}
.mtc-card{background:var(--mtc-surface);border:1px solid var(--mtc-line);border-radius:20px;padding:26px;position:relative;box-shadow:var(--mtc-sh-2);display:flex;flex-direction:column}
.mtc-card.best{border:2px solid var(--mtc-g);box-shadow:0 40px 90px -46px rgba(22,163,74,.45)}
.mtc-card.current{border:2px solid var(--mtc-gd);background:#FBFEFC}
.mtc-flag{position:absolute;top:-14px;left:26px;display:inline-flex;align-items:center;gap:6px;background:linear-gradient(180deg,var(--mtc-g2),var(--mtc-g));color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:6px 13px;border-radius:999px}
.mtc-flag svg{width:12px;height:12px}
.mtc-card .term{font-family:var(--mtc-disp);font-size:20px;font-weight:700;color:var(--mtc-ink)}
.mtc-card .desc{font-size:13.5px;color:var(--mtc-faint);margin:4px 0 0}
.mtc-bigprice{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:22px 0 0}
.mtc-bigprice .cur{font-size:20px;font-weight:700;color:var(--mtc-ink-2)}
.mtc-bigprice .num{font-family:var(--mtc-disp);font-size:clamp(38px,5vw,52px);font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--mtc-ink)}
.mtc-bigprice .for{font-size:15px;color:var(--mtc-faint)}
.mtc-strike-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.mtc-strike{font-size:15px;color:var(--mtc-faint);text-decoration:line-through}
.mtc-savepill{font-size:12.5px;font-weight:700;color:var(--mtc-gd);background:var(--mtc-gl);border-radius:var(--mtc-r-sm);padding:4px 10px}
.mtc-permonth{font-size:15px;color:var(--mtc-ink-2);margin-top:14px}
.mtc-permonth b{font-weight:700}
.mtc-card .mtc-actions{margin-top:auto;padding-top:20px}
.mtc-card .mtc-btn{margin-top:0}
.mtc-card .mtc-feat{grid-template-columns:1fr;gap:12px;margin:20px 0}
.mtc-card .mtc-feat li{font-size:14px}

/* ---------- Included-features panel --------------------------------------- */
.mtc-incl{max-width:1000px;margin:30px auto 0;background:var(--mtc-surface);border:1px solid var(--mtc-line);border-radius:20px;overflow:hidden;box-shadow:var(--mtc-sh-2)}
.mtc-incl-h{display:flex;gap:14px;align-items:center;padding:20px 24px;background:var(--mtc-bg);border-bottom:1px solid var(--mtc-line)}
.mtc-incl-h .sq{width:40px;height:40px;flex:0 0 auto;border-radius:11px;background:linear-gradient(135deg,var(--mtc-g2),var(--mtc-g));color:#fff;display:grid;place-items:center}
.mtc-incl-h .sq svg{width:20px;height:20px}
.mtc-incl-h h4{font-family:var(--mtc-disp);font-size:16.5px;font-weight:700;margin:0;color:var(--mtc-ink)}
.mtc-incl-h p{font-size:13px;color:var(--mtc-mut);margin:3px 0 0}
.mtc-incl .row{display:flex;align-items:center;gap:12px;padding:16px 24px;border-top:1px solid var(--mtc-line);font-size:15px;color:var(--mtc-ink-2)}
.mtc-incl .row:first-of-type{border-top:none}
.mtc-incl .row svg{width:17px;height:17px;color:var(--mtc-g);flex:0 0 auto}

/* ---------- List cards: invoices, payments, orders ------------------------ */
.mtc-lcard{background:var(--mtc-surface);border:1px solid var(--mtc-line);border-radius:var(--mtc-r-lg);box-shadow:var(--mtc-sh-2);padding:22px 24px;margin:22px auto 0;max-width:1000px}
.mtc-lcard-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.mtc-lcard h3{font-family:var(--mtc-disp);font-size:18px;font-weight:700;margin:0;color:var(--mtc-ink)}
.mtc-lcard-note{font-size:12.5px;color:var(--mtc-faint)}
.mtc-lrow{display:flex;align-items:center;gap:14px;padding:16px 0;border-top:1px solid var(--mtc-line)}
.mtc-lrow:first-of-type{border-top:none}
.mtc-lrow .date{font-size:14px;font-weight:600;color:var(--mtc-ink-2);flex:0 0 120px}
.mtc-lrow .mid{font-size:14px;color:var(--mtc-mut);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mtc-lrow .amt{font-size:14px;font-weight:700;color:var(--mtc-ink);white-space:nowrap}
.mtc-lrow .view{color:var(--mtc-gd);font-weight:700;font-size:13.5px;background:var(--mtc-gl);border:none;border-radius:var(--mtc-r-sm);padding:6px 12px;white-space:nowrap}
.mtc-lrow .view:hover{background:#DCF4E6}

/* Status pills — mapped from the backend's own status strings */
.mtc-status{font-size:12px;font-weight:700;border-radius:999px;padding:4px 11px;white-space:nowrap;color:var(--mtc-gd);background:var(--mtc-gl)}
.mtc-status.warn{color:var(--mtc-warn);background:var(--mtc-warn-l)}
.mtc-status.bad{color:var(--mtc-bad);background:var(--mtc-bad-l)}
.mtc-status.neutral{color:var(--mtc-mut);background:var(--mtc-bg-2)}

/* ---------- Definition grid (subscription summary) ------------------------ */
.mtc-defs{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px 24px;margin-top:18px}
.mtc-def{display:flex;flex-direction:column;gap:3px;min-width:0}
.mtc-def .k{font-size:12px;color:var(--mtc-faint);font-weight:700;margin:0}
.mtc-def .v{font-size:14.5px;color:var(--mtc-ink);font-weight:700;margin:0;overflow-wrap:anywhere}
.mtc-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}

/* ---------- Empty states -------------------------------------------------- */
.mtc-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:30px 18px}
.mtc-empty .ic{width:46px;height:46px;border-radius:999px;background:var(--mtc-bg-2);color:var(--mtc-faint);display:grid;place-items:center;margin-bottom:6px}
.mtc-empty .ic svg{width:21px;height:21px}
.mtc-empty h4{font-family:var(--mtc-disp);font-size:15.5px;font-weight:700;margin:0;color:var(--mtc-ink-2)}
.mtc-empty p{font-size:13.5px;color:var(--mtc-mut);margin:0;max-width:420px;line-height:1.55}

/* ---------- Skeleton / loading ------------------------------------------- */
.mtc-skeleton{border-radius:var(--mtc-r-lg);background:linear-gradient(90deg,var(--mtc-bg-2) 25%,#F7F9FB 37%,var(--mtc-bg-2) 63%);background-size:400% 100%;animation:mtc-shimmer 1.3s ease-in-out infinite;height:220px;max-width:1000px;margin:24px auto 0}
@keyframes mtc-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
.mtc-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Responsive ---------------------------------------------------- */
@media(max-width:900px){
  .mtc-plan{grid-template-columns:1fr}
  .mtc-feat{grid-template-columns:1fr}
  .mtc-plan-l{padding:28px 24px}
  .mtc-plan-r{padding:26px 24px}
}
@media(max-width:600px){
  .mtc-tabs{width:100%;overflow-x:auto;scrollbar-width:none;justify-content:flex-start}
  .mtc-tabs::-webkit-scrollbar{display:none}
  .mtc-disc{flex-wrap:wrap}
  .mtc-disc input,.mtc-disc .mtc-apply{flex:1 1 100%}
  .mtc-lrow{flex-wrap:wrap;gap:6px 12px}
  .mtc-lrow .date,.mtc-lrow .mid{flex:1 1 100%}
  .mtc-lcard{padding:20px 18px;border-radius:var(--mtc-r-md)}
  .mtc-plan{border-radius:var(--mtc-r-lg)}
  .mtc-btn{width:100%}
  .mtc-actions .mtc-btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .mtc-billing *{transition:none!important;animation:none!important}
}