/**
 * BuddyPilot Pricing — block styles
 *
 * Dark navy section matching the mockup design.
 * All tokens map to --bp-* custom properties defined in base.css / theme.json.
 *
 * Token reference (base.css → used here):
 *   --bp-navy   #0A0F1E   --bp-cobalt #1944CB   --bp-orange #FD9045
 *   --bp-sky    #93C5FD   --bp-dark   #0F1F3D   --bp-white  #FFFFFF
 *   --bp-tx-l1  #F1F5F9   --bp-tx-l2  #CBD5E1   --bp-tx-l3  #A0AEC0
 *   --bp-tx-sky #93C5FD   --bp-tx-org #FD9045
 *   --bp-r      12px      --bp-r-lg   20px
 *   --bp-sh-lg  (theme shadow)
 */

/* ── Section wrapper ──────────────────────────────────────────────────────── */

.bp-pricing {
	padding-block: 5rem;
	background: var(--bp-navy, #0A0F1E);
}

.bp-pricing .section-header {
	margin-bottom: 0;
	align-self: start;
}

.bp-pricing .section-header h2 {
	color: var(--bp-tx-l1, #F1F5F9);
}

.bp-pricing .section-header p {
	color: var(--bp-tx-l2, #CBD5E1);
}

/* ── Dwukolumnowy nagłówek ────────────────────────────────────────────────── */

.pricing-header-grid {
	display: grid;
	grid-template-columns: 1fr 360px;
	column-gap: clamp(2rem, 5vw, 4rem);
	row-gap: 0.75rem;
	align-items: start;
	margin-bottom: 2.5rem;
}

/* ── Karta "Masz problem z wyborem?" ─────────────────────────────────────── */

.pricing-help-card {
	background:  rgba(255, 255, 255, .05);
	border:      1px solid rgba(255, 255, 255, .10);
	border-radius: 16px;
	padding:     1.75rem;
	grid-column: 2;
	grid-row:    1 / 3;
	align-self:  start;
}

.pricing-help-card-title {
	font-size:   1.125rem;
	font-weight: 700;
	color:       var(--bp-tx-l1, #F1F5F9);
	line-height: 1.35;
	margin:      0 0 0.75rem;
}

.pricing-help-card-desc {
	font-size:   0.9375rem;
	color:       var(--bp-tx-l2, #CBD5E1);
	line-height: 1.6;
	margin:      0 0 1.25rem;
}

/* ── Billing toggle — minimalistyczny styl tekstowy ──────────────────────── */

.pricing-toggle-section {
	display:     flex;
	align-items: baseline;
	gap:         0.5rem;
	flex-wrap:   wrap;
	grid-column: 1;
	grid-row:    2;
	align-self:  end;
	margin-top:  1rem;
	margin-bottom: 0;
}

.pricing-toggle-label {
	font-size:   0.875rem;
	font-weight: 500;
	color:       var(--bp-tx-l2, #CBD5E1);
	white-space: nowrap;
}

.pricing-toggle-sep {
	font-size: 0.875rem;
	color:     var(--bp-tx-l3, #A0AEC0);
	line-height: 1.4;
}

.toggle-btn {
	font-family:   inherit;
	font-size:     0.875rem;
	font-weight:   600;
	color:         var(--bp-tx-l3, #A0AEC0);
	background:    none;
	border:        none;
	border-bottom: 2px solid transparent;
	padding:       0 0 0.15rem;
	cursor:        pointer;
	transition:    color 150ms, border-color 150ms;
	line-height:   1.4;
	min-height:    44px;
	display:       inline-flex;
	align-items:   flex-end;
	white-space:   nowrap;
}

.toggle-btn:hover { color: var(--bp-tx-l1, #F1F5F9); }

.toggle-btn:focus-visible {
	outline:        2px solid var(--bp-sky, #93C5FD);
	outline-offset: 3px;
	border-radius:  2px;
}

/* Miesięcznie aktywne — niebieska linia */
#bp-monthly-btn.active {
	color:               var(--bp-tx-l1, #F1F5F9);
	border-bottom-color: var(--bp-sky, #93C5FD);
}

/* Rocznie aktywne — pomarańczowa linia */
#bp-yearly-btn.active {
	color:               var(--bp-tx-l1, #F1F5F9);
	border-bottom-color: var(--bp-tx-org, #FD9045);
}

.savings-text {
	font-size:   0.875rem;
	font-weight: 600;
	color:       var(--bp-tx-l3, #A0AEC0);
	white-space: nowrap;
}

/* Tryb roczny — napis pomarańczowy */
body.bp-yearly-mode .savings-text {
	color: var(--bp-tx-org, #FD9045);
}

/* ── Table wrap + scroll ─────────────────────────────────────────────────── */

.pricing-table-wrap {
	position: relative;
	width: 100%;
	padding: 0 clamp(1rem, 2.5vw, 2.5rem);
	box-sizing: border-box;
	margin-bottom: 1.5rem;
}

.pricing-table {
	display: grid;
	/* grid-template-columns set inline in render.php */
	grid-template-rows: auto 1fr;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.pricing-table::-webkit-scrollbar {
	display: none;
}

/* ── Scroll buttons ───────────────────────────────────────────────────────── */

.pricing-scroll-button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	border-radius: 50%;
	border: 2px solid var(--bp-sky, #93C5FD);
	background: rgba(10, 15, 30, .8);
	color: var(--bp-sky, #93C5FD);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	transition: background 200ms, box-shadow 200ms;
}

.pricing-scroll-button:hover {
	background: rgba(10, 15, 30, .95);
	box-shadow: 0 0 12px rgba(147, 197, 253, .3);
}

.pricing-scroll-button:focus-visible {
	outline: 3px solid var(--bp-cobalt, #1944CB);
	outline-offset: 3px;
}

.pricing-scroll-button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	border-color: rgba(147, 197, 253, .4);
}

.pricing-scroll-button.left  { left:  0; }
.pricing-scroll-button.right { right: 0; }

/* ── Group label row (Row 1) ─────────────────────────────────────────────── */

.ptl-group {
	grid-row: 1;
	padding: 0;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: 8px 8px 0 0;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.ptl-text {
	display: inline-block;
	position: sticky;
	left: 0;
	padding: 0.6rem 1.25rem;
	white-space: nowrap;
	border-radius: 8px 8px 0 0;
	background: inherit;
}

/* Group colour themes */
.ptl-service {
	background: rgba(147, 197, 253, .08);
	color: var(--bp-tx-sky, #93C5FD);
	border: 1px solid rgba(147, 197, 253, .2);
	border-bottom: none;
}

.ptl-ecommerce {
	background: rgba(253, 144, 69, .08);
	color: var(--bp-tx-org, #FD9045);
	border: 1px solid rgba(253, 144, 69, .2);
	border-bottom: none;
}

.ptl-jet {
	background: rgba(201, 168, 76, .08);
	color: #C9A84C;
	border: 1px solid rgba(201, 168, 76, .25);
	border-bottom: none;
}

/* ── Package cards (Row 2) ───────────────────────────────────────────────── */

.pricing-card {
	grid-row: 2;
	background: rgba(255, 255, 255, .06);
	border: 1.5px solid rgba(255, 255, 255, .1);
	border-radius: 0 0 var(--bp-r-lg, 20px) var(--bp-r-lg, 20px);
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: 0;
	min-width: 220px;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	transition: transform 200ms, box-shadow 200ms;
}

.pricing-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--bp-sh-lg, 0 12px 40px rgba(10, 15, 30, .18), 0 4px 12px rgba(10, 15, 30, .10));
}

/* Featured / highlighted card */
.pricing-card.featured {
	background: var(--bp-white, #FFFFFF);
	border-color: transparent;
	box-shadow: var(--bp-sh-lg, 0 12px 40px rgba(10, 15, 30, .18));
}

.featured-badge {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--bp-orange, #FD9045);
	color: var(--bp-btn-orange-text, #0F1F3D);
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0.3rem 1rem;
	border-radius: 20px;
	white-space: nowrap;
}

/* Plan name */
.plan-name {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bp-tx-sky, #93C5FD);
	margin: 0 0 0.5rem;
}

.pricing-card.featured .plan-name {
	color: var(--bp-cobalt, #1944CB);
}

/* Per-group plan name colours */
.ptc-service   .plan-name { color: var(--bp-tx-sky, #93C5FD); }
.ptc-ecommerce .plan-name { color: var(--bp-tx-org, #FD9045); }
.ptc-jet       .plan-name { color: #C9A84C; }

/* ── Price block ─────────────────────────────────────────────────────────── */

.plan-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem;
	margin-bottom: 0.25rem;
	min-height: 3.5rem;
}

.price-amount {
	font-size: 3rem;
	font-weight: 800;
	line-height: 1;
	color: var(--bp-tx-l1, #F1F5F9);
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	transition: opacity 0.2s;
}

.price-currency {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--bp-tx-l1, #F1F5F9);
}

.price-period {
	font-size: 0.8rem;
	color: var(--bp-tx-l3, #A0AEC0);
}

/* Featured card — dark text on white */
.pricing-card.featured .price-currency,
.pricing-card.featured .price-amount { color: var(--bp-tx-pri, #0F1F3D); }
.pricing-card.featured .price-period { color: var(--bp-tx-sec, #374151); }

/* Custom label (e.g. "Individual quote") for Jet */
.jet-price-label {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--bp-tx-l1, #F1F5F9);
	line-height: 1.2;
}

/* Yearly total / invoice note */
.price-yearly-total {
	font-size: 0.8rem;
	color: var(--bp-tx-l3, #A0AEC0);
	margin: 0;
	min-height: 1.1em;
	visibility: hidden;
}

/* Plan subtitle */
.plan-subtitle {
	font-size: 0.875rem;
	color: var(--bp-tx-l2, #CBD5E1);
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	max-width: none;
	min-height: 4.5rem;
}

.pricing-card.featured .plan-subtitle {
	color: var(--bp-tx-sec, #374151);
	border-bottom-color: var(--bp-border, #DBEAFE);
}

/* ── Feature list ────────────────────────────────────────────────────────── */

.plan-features {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	flex: 1;
	font-size: 0.875rem;
}

.plan-features li {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	padding: 0.45rem 0;
	color: var(--bp-tx-l2, #CBD5E1);
	line-height: 1.4;
}

.pricing-card.featured .plan-features li {
	color: var(--bp-tx-pri, #0F1F3D);
}

/* Icon — active check (bright green: 11.6:1 on navy) */
.plan-features li > i:first-child {
	color: #4ade80;
	margin-top: 0.15rem;
	flex-shrink: 0;
	font-size: 0.8rem;
}

/* Inactive */
.plan-features li.inactive {
	color: var(--bp-tx-l3, #A0AEC0);
	opacity: 0.6;
}

.plan-features li.inactive i:first-child {
	color: var(--bp-tx-l3, #A0AEC0);
}

/* Add-on */
.plan-features li.addon i:first-child {
	color: var(--bp-tx-org, #FD9045);
}

/* Per-group em colour accents */
.ptc-service   .plan-features em { color: var(--bp-tx-sky, #93C5FD); font-style: normal; font-weight: 600; }
.ptc-ecommerce .plan-features em { color: var(--bp-tx-org, #FD9045); font-style: normal; font-weight: 600; }
.ptc-jet       .plan-features em { color: #C9A84C;                   font-style: normal; font-weight: 600; }

.plan-features li > .feat-row {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 0.5rem;
	flex: 1;
}

.feat-text {
	flex: 1;
}

.addon-tag {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: lowercase;
	color: var(--bp-tx-org, #FD9045);
	background: rgba(253, 144, 69, .14);
	padding: 0.1rem 0.42rem;
	border-radius: 4px;
	margin-left: auto;
	white-space: nowrap;
	align-self: center;
}

/* ── Tooltips ────────────────────────────────────────────────────────────── */

.tooltip-wrap {
	display: inline-flex;
	align-items: center;
	margin-left: 0.4rem;
	vertical-align: middle;
	position: relative;
	z-index: 10;
	cursor: default;
}

.tooltip-icon {
	font-size: 0.75rem;
	color: var(--bp-tx-l3, #A0AEC0);
	min-width: 20px;
	min-height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: color 150ms;
}

.tooltip-wrap:hover .tooltip-icon,
.tooltip-wrap:focus-within .tooltip-icon {
	color: var(--bp-sky, #93C5FD);
}

.tooltip-wrap [role="tooltip"] {
	position: absolute;
	bottom: calc(100% + 12px);
	left: 50%;
	transform: translateX(-50%);
	background: var(--bp-navy, #0A0F1E);
	color: var(--bp-tx-l1, #F1F5F9);
	font-size: 0.8rem;
	line-height: 1.55;
	padding: 0.75rem 1rem;
	border-radius: 8px;
	max-width: 260px;
	white-space: normal;
	box-shadow: 0 8px 32px rgba(10, 15, 30, .4);
	z-index: 1000;
	pointer-events: none;
	visibility: hidden;
	opacity: 0;
	transition: opacity 120ms, visibility 120ms;
	width: max-content;
}

.tooltip-wrap:hover [role="tooltip"],
.tooltip-wrap:focus-visible [role="tooltip"],
.tooltip-wrap:focus-within [role="tooltip"] {
	visibility: visible;
	opacity: 1;
}

.tooltip-wrap:focus-visible {
	outline: 2px solid var(--bp-sky, #93C5FD);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ── CTA button ──────────────────────────────────────────────────────────── */

.btn-plan {
	display: block;
	margin-top: auto;
	width: 100%;
	text-align: center;
	padding: 0.875rem;
	border-radius: 10px;
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
	border: 2px solid rgba(255, 255, 255, .25);
	color: var(--bp-tx-l1, #F1F5F9);
	background: transparent;
	transition: background 150ms, border-color 150ms, color 150ms;
	min-height: 44px;
	line-height: 1.4;
}

.btn-plan:hover {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .5);
	color: var(--bp-tx-l1, #F1F5F9);
	text-decoration: none;
}

/* Featured card — solid cobalt CTA */
.pricing-card.featured .btn-plan {
	background: var(--bp-cobalt, #1944CB);
	border-color: var(--bp-cobalt, #1944CB);
	color: var(--bp-btn-cobalt-text, #FFFFFF);
}

.pricing-card.featured .btn-plan:hover {
	background: #1538b0;
	border-color: #1538b0;
}

/* Per-group CTA accents */
.ptc-service .btn-plan   { border-color: var(--bp-tx-sky, #93C5FD); color: var(--bp-tx-sky, #93C5FD); }
.ptc-service .btn-plan:hover { background: rgba(147, 197, 253, .12); }

.ptc-ecommerce .btn-plan   { border-color: var(--bp-tx-org, #FD9045); color: var(--bp-tx-org, #FD9045); }
.ptc-ecommerce .btn-plan:hover { background: rgba(253, 144, 69, .12); }

.ptc-jet .btn-plan   { border-color: rgba(201, 168, 76, .5); color: #C9A84C; }
.ptc-jet .btn-plan:hover { background: rgba(201, 168, 76, .1); border-color: #C9A84C; }

/* ── Per-group card borders ───────────────────────────────────────────────── */

.ptc-service {
	border-top: 2px solid rgba(147, 197, 253, .35);
}

.ptc-ecommerce {
	border-top: 2px solid rgba(253, 144, 69, .4);
}

.ptc-jet {
	background: linear-gradient(150deg, #0C0C12 0%, #13131C 100%);
	border: 1px solid rgba(201, 168, 76, .22);
	border-top: 2px solid rgba(201, 168, 76, .5);
	box-shadow: 0 8px 40px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(201, 168, 76, .12);
}

.ptc-jet .plan-features li { color: var(--bp-tx-l2, #CBD5E1); }
.ptc-jet .plan-subtitle    { color: var(--bp-tx-l3, #A0AEC0); border-bottom-color: rgba(201, 168, 76, .12); }

/* ── Pricing note ────────────────────────────────────────────────────────── */

.pricing-note {
	display: block;
	font-size: 0.875rem;
	color: var(--bp-tx-l2, #CBD5E1);
	text-align: center;
	margin: 2rem auto 0;
	max-width: none;
}

.pricing-note a {
	color: var(--bp-tx-sky, #93C5FD);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

/* Tablet ≤900px — siatka nagłówka: jednokolumnowa */
@media (max-width: 900px) {
	.pricing-header-grid {
		grid-template-columns: 1fr;
		margin-bottom: 1.5rem;
	}

	.pricing-help-card {
		grid-column: 1;
		grid-row:    auto;
	}

	.pricing-toggle-section {
		grid-column:  1;
		grid-row:     auto;
		align-self:   auto;
		margin-top:   1.25rem;
		margin-bottom: 0;
	}
}

/* Desktop ≥1400px — wszystkie karty widoczne, bez scrollowania */
@media (min-width: 1400px) {
	:root {
		--bp-pricing-col: 18vw;
	}

	.pricing-table {
		justify-content: center;
		padding-inline: clamp(1rem, 3vw, 3rem);
		overflow-x: visible;
	}

	.pricing-scroll-button {
		display: none;
	}
}

/* Tablet ≤1399px — ~2 karty na widok + scroll */
@media (max-width: 1399px) {
	:root {
		--bp-pricing-col: 38vw;
	}

	.pricing-table-wrap {
		padding: 0;
	}

	.pricing-table {
		/* wyśrodkowanie: (100vw - 2×38vw - 1 gap) / 2 = 12vw - 0.5rem */
		padding-inline: calc(12vw - 0.5rem);
		scroll-padding-left: calc(12vw - 0.5rem);
		overflow-x: auto;
	}
}

/* Mobile ≤600px — 1 karta na widok + scroll */
@media (max-width: 600px) {
	:root {
		--bp-pricing-col: 76vw;
	}

	.pricing-table-wrap {
		padding: 0 1rem;
	}

	.pricing-table {
		/* wyśrodkowanie pierwszej karty */
		padding-inline: calc((100vw - 76vw - 2rem) / 2);
		/* reset scroll-padding dziedziczonego z tablet MQ */
		scroll-padding: 0;
	}

	/* Scroll-snap na kartach, nie na grupach */
	.ptl-group    { scroll-snap-align: none; }
	.pricing-card { scroll-snap-align: center; }

	.pricing-scroll-button {
		width: 40px;
		height: 40px;
		min-width: 40px;
		min-height: 40px;
		font-size: 1rem;
	}

	/* Zmniejszone odstępy w kartach */
	.pricing-card {
		padding: 1.25rem;
	}

	.plan-price {
		margin-bottom: 0.5rem;
		min-height: 3rem;
	}

	.plan-subtitle {
		margin-bottom: 1rem;
		padding-bottom: 1rem;
		min-height: 3rem;
	}

	.plan-features {
		margin-bottom: 1.25rem;
	}

	.plan-features li {
		padding: 0.35rem 0;
	}
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.pricing-card,
	.toggle-btn,
	.savings-text,
	.price-amount,
	.btn-plan,
	.tooltip-wrap [role="tooltip"] {
		transition: none;
	}
}