/* ================================================================
   Chancery Pricing Table — pricing-table.css v1.1.0
   Members is the DEFAULT selected state on page load.
   Brand colours: Crimson #A62461 · Teal #7ABFB8 only.
   Wise Digital Marketing © 2026
================================================================ */

.chpt-section *,
.chpt-section *::before,
.chpt-section *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Section ─────────────────────────────────────────────────── */
.chpt-section { padding: 64px 28px; width: 100%; }
.chpt-theme-dark  { background-color: #0d0d10; }
.chpt-theme-light { background-color: #f8f8f6; }

/* ── Header ──────────────────────────────────────────────────── */
.chpt-header { text-align: center; margin-bottom: 36px; }

.chpt-eyebrow {
	font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
	text-transform: uppercase; color: #A62461;
	margin-bottom: 10px; display: block;
}

.chpt-heading {
	font-size: clamp(28px, 4vw, 44px); font-weight: 800;
	letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 10px;
}
.chpt-theme-dark  .chpt-heading { color: #ffffff; }
.chpt-theme-light .chpt-heading { color: #0a0a0a; }

.chpt-sub { font-size: 14px; line-height: 1.6; }
.chpt-theme-dark  .chpt-sub { color: rgba(255,255,255,0.45); }
.chpt-theme-light .chpt-sub { color: #6b7280; }

/* ── Toggle — 1fr auto 1fr guarantees dead-centre ───────────── */
.chpt-toggle-wrap {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	column-gap: 12px;
	width: 100%;
	margin-bottom: 32px;
}

.chpt-tgl-left {
	font-size: 12px; font-weight: 600;
	text-align: right; transition: color 200ms;
}
.chpt-tgl-right {
	font-size: 12px; font-weight: 600;
	text-align: left;
	display: flex; align-items: center; gap: 6px;
	transition: color 200ms;
}

.chpt-theme-dark  .chpt-tgl-left,
.chpt-theme-dark  .chpt-tgl-right { color: rgba(255,255,255,0.35); }
.chpt-theme-light .chpt-tgl-left,
.chpt-theme-light .chpt-tgl-right { color: #9ca3af; }

.chpt-theme-dark  .chpt-tgl-left.active,
.chpt-theme-dark  .chpt-tgl-right.active { color: #ffffff; }
.chpt-theme-light .chpt-tgl-left.active,
.chpt-theme-light .chpt-tgl-right.active { color: #111111; }

/* Toggle pill */
.chpt-toggle {
	width: 44px; height: 24px; border-radius: 100px;
	position: relative; cursor: pointer;
	transition: background 300ms, border-color 300ms;
}
.chpt-theme-dark  .chpt-toggle { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); }
.chpt-theme-light .chpt-toggle { background: rgba(0,0,0,0.1);       border: 1px solid rgba(0,0,0,0.12); }
.chpt-toggle.on { background-color: #A62461 !important; border-color: #A62461 !important; }

.chpt-toggle-thumb {
	width: 18px; height: 18px; border-radius: 50%; background: #ffffff;
	position: absolute; top: 2px; left: 2px;
	transition: transform 300ms cubic-bezier(0.34, 1.2, 0.64, 1);
	pointer-events: none;
}
.chpt-toggle.on .chpt-toggle-thumb { transform: translateX(20px); }

/* Members badge */
.chpt-mem-badge {
	font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
	background: rgba(166,36,97,0.15); color: #A62461;
	border: 1px solid rgba(166,36,97,0.25);
	padding: 3px 9px; border-radius: 100px;
	opacity: 0; transition: opacity 300ms; white-space: nowrap;
}
.chpt-mem-badge.show { opacity: 1; }

/* ── Tabs ────────────────────────────────────────────────────── */
.chpt-tabs { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; }

.chpt-tab {
	padding: 10px 20px; border-radius: 100px;
	font-size: 12px; font-weight: 600; cursor: pointer;
	font-family: inherit; letter-spacing: 0.02em;
	transition: all 220ms; white-space: nowrap;
	border: 1px solid transparent; background: transparent;
}
.chpt-theme-dark  .chpt-tab { border-color: rgba(255,255,255,0.1);  color: rgba(255,255,255,0.45); }
.chpt-theme-light .chpt-tab { border-color: rgba(0,0,0,0.1);        color: #6b7280; }
.chpt-theme-dark  .chpt-tab:hover:not(.active) { border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.04); }
.chpt-theme-light .chpt-tab:hover:not(.active) { border-color: rgba(0,0,0,0.18);       color: #374151;                background: rgba(0,0,0,0.03); }

.chpt-tab.teal.active    { background-color: #7ABFB8; border-color: #7ABFB8; color: #0d0d10; }
.chpt-tab.crimson.active { background-color: #A62461; border-color: #A62461; color: #ffffff; }

/* ── Table card ──────────────────────────────────────────────── */
.chpt-table-card { border-radius: 20px; overflow: hidden; max-width: 760px; margin: 0 auto; border: 1px solid transparent; }
.chpt-theme-dark  .chpt-table-card { border-color: rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); }
.chpt-theme-light .chpt-table-card { border-color: rgba(0,0,0,0.09);       background: #ffffff; box-shadow: 0 4px 24px rgba(0,0,0,0.06); }

/* ── Category accent bar ─────────────────────────────────────── */
.chpt-cat-bar { height: 3px; transition: background 300ms; }
.chpt-cat-bar.teal    { background: linear-gradient(to right, #7ABFB8, rgba(122,191,184,0)); }
.chpt-cat-bar.crimson { background: linear-gradient(to right, #A62461, rgba(166,36,97,0)); }

/* ── Table header ────────────────────────────────────────────── */
.chpt-t-head {
	display: grid; grid-template-columns: 1fr 140px 140px;
	align-items: center; padding: 14px 24px;
	border-bottom: 1px solid transparent;
}
.chpt-theme-dark  .chpt-t-head { border-color: rgba(255,255,255,0.06); background: rgba(255,255,255,0.03); }
.chpt-theme-light .chpt-t-head { border-color: rgba(0,0,0,0.06);       background: rgba(0,0,0,0.02); }

.chpt-t-head-label {
	font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
	text-transform: uppercase; text-align: center; transition: opacity 300ms;
}
.chpt-t-head-label:first-child { text-align: left; }
.chpt-theme-dark  .chpt-t-head-label { color: rgba(255,255,255,0.3); }
.chpt-theme-light .chpt-t-head-label { color: rgba(0,0,0,0.35); }

/* Members column header — visible by default */
.chpt-t-head-members { opacity: 0; }
.chpt-t-head-members.show { opacity: 1; color: #A62461; }

/* Standard column header — dimmed by default */
.chpt-t-head-std { transition: opacity 300ms; }
.chpt-t-head-std.dimmed { opacity: 0.35; }

/* ── Rows ────────────────────────────────────────────────────── */
.chpt-panel { display: none; }
.chpt-panel.active { display: block; animation: chptIn 260ms ease; }
@keyframes chptIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.chpt-row {
	display: grid; grid-template-columns: 1fr 140px 140px;
	align-items: center; padding: 16px 24px;
	border-bottom: 1px solid transparent;
	transition: background 160ms; position: relative; overflow: hidden;
}
.chpt-theme-dark  .chpt-row { border-color: rgba(255,255,255,0.04); }
.chpt-theme-light .chpt-row { border-color: rgba(0,0,0,0.05); }
.chpt-row:last-child { border-bottom: none; }

.chpt-row::before {
	content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
	transform: scaleY(0); transition: transform 220ms cubic-bezier(0.34, 1.2, 0.64, 1);
	transform-origin: bottom;
}
.chpt-rows.teal    .chpt-row::before { background: #7ABFB8; }
.chpt-rows.crimson .chpt-row::before { background: #A62461; }

.chpt-theme-dark  .chpt-row:nth-child(odd) { background: rgba(255,255,255,0.015); }
.chpt-theme-light .chpt-row:nth-child(odd) { background: rgba(0,0,0,0.018); }
.chpt-theme-dark  .chpt-row:hover { background: rgba(255,255,255,0.04); }
.chpt-theme-light .chpt-row:hover { background: rgba(0,0,0,0.03); }
.chpt-row:hover::before { transform: scaleY(1); }

.chpt-row-name { font-size: 13.5px; font-weight: 500; line-height: 1.35; padding-right: 16px; }
.chpt-theme-dark  .chpt-row-name { color: rgba(255,255,255,0.8); }
.chpt-theme-light .chpt-row-name { color: #1f2937; }

/* ── Price cells — centred ───────────────────────────────────── */
.chpt-row-price,
.chpt-row-members {
	text-align: center; font-weight: 700; white-space: nowrap;
	display: flex; flex-direction: column; align-items: center; gap: 3px;
	transition: opacity 300ms;
}

/* Standard price — dimmed by default (Members is selected) */
.chpt-row-price { font-size: 14px; }
.chpt-theme-dark  .chpt-row-price { color: #ffffff; }
.chpt-theme-light .chpt-row-price { color: #0a0a0a; }
.chpt-row-price.dimmed { opacity: 0.35; }

/* Members price — visible by default */
.chpt-row-members { font-size: 13px; color: #A62461; opacity: 0; }
.chpt-row-members.show { opacity: 1; }
.chpt-row-members.included { color: #7ABFB8; font-size: 12px; font-weight: 700; }

/* Savings pill */
.chpt-saving { font-size: 9px; font-weight: 700; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 100px; opacity: 0; transition: opacity 280ms 60ms; }
.chpt-saving.show { opacity: 1; }
.chpt-rows.teal    .chpt-saving { background: rgba(122,191,184,0.15); color: #7ABFB8; }
.chpt-rows.crimson .chpt-saving { background: rgba(166,36,97,0.15);   color: #A62461; }

/* ── Footer ──────────────────────────────────────────────────── */
.chpt-footer { padding: 14px 24px; border-top: 1px solid transparent; font-size: 11px; text-align: center; line-height: 1.5; }
.chpt-theme-dark  .chpt-footer { border-color: rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); color: rgba(255,255,255,0.3); }
.chpt-theme-light .chpt-footer { border-color: rgba(0,0,0,0.06);       background: rgba(0,0,0,0.015);      color: #9ca3af; }
.chpt-footer a { color: #A62461; text-decoration: none; font-weight: 600; }
.chpt-footer a:hover { text-decoration: underline; }

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.chpt-toggle, .chpt-toggle-thumb,
	.chpt-row, .chpt-row::before,
	.chpt-panel, .chpt-row-members, .chpt-saving { transition: none !important; animation: none !important; }
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 768px) { .chpt-section { padding: 48px 20px; } }
@media (max-width: 600px) {
	.chpt-t-head, .chpt-row { grid-template-columns: 1fr 90px 90px; padding: 12px 16px; }
	.chpt-row-name { font-size: 12.5px; }
	.chpt-row-price, .chpt-row-members { font-size: 12px; }
}