/**
 * Kaam Ase Payments.
 *
 * Version 1.0.0
 *
 * Loaded only on the page holding the plans shortcode, and only when
 * something is actually for sale. It borrows the theme's design tokens
 * rather than restating any colour, so a change to the palette reaches
 * this file without anybody remembering it exists.
 *
 * Everything is scoped under .kp-, which is not the theme's prefix, so
 * nothing here can reach a page it was not loaded for.
 */


/* --------------------------------------------------------------------------
   The plan
   -------------------------------------------------------------------------- */

.kp-plans {
	display: grid;
	gap: var(--ka-4);
}

@media (min-width: 720px) {

	.kp-plans--many {
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		align-items: start;
	}
}

.kp-plan {
	background: var(--ka-surface);
	border: 1px solid var(--ka-border);
	border-radius: var(--ka-radius-lg);
	padding: var(--ka-5);
	display: flex;
	flex-direction: column;
	gap: var(--ka-3);
}

.kp-plan__name {
	margin: 0;
	font-size: var(--ka-text-lg);
	line-height: 1.2;
}

.kp-plan__note {
	margin: 0;
	color: var(--ka-text-soft);
	font-size: var(--ka-text-sm);
}


/* --------------------------------------------------------------------------
   What it gives

   Ticks rather than bullets, because the list is what somebody is
   buying rather than a set of notes about it. Written as a border and a
   character instead of an image so it costs nothing to load.
   -------------------------------------------------------------------------- */

.kp-plan__gives {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--ka-2);
}

.kp-plan__gives li {
	position: relative;
	padding-left: 1.6em;
	font-size: var(--ka-text-sm);
}

.kp-plan__gives li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: var(--ka-green-600);
	font-weight: var(--ka-weight-bold);
}


/* --------------------------------------------------------------------------
   Price

   Large, because it is the thing the page exists to answer and the
   thing somebody scrolled to find. A price buried in a button label
   makes a person hunt for it, and hunting for a price reads as hiding
   one.
   -------------------------------------------------------------------------- */

.kp-buy {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ka-3);
	flex-wrap: wrap;
	padding-top: var(--ka-3);
	border-top: 1px solid var(--ka-border);
}

.kp-price {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.kp-price__amount {
	font-size: var(--ka-text-xl);
	font-weight: var(--ka-weight-bold);
	color: var(--ka-text);
}

.kp-price__per {
	font-size: var(--ka-text-sm);
	color: var(--ka-text-soft);
}

/*
 * The saving on a yearly plan, when there is one. Shown as an amount
 * rather than a percentage, because a builder deciding between two
 * numbers wants the rupees.
 */
.kp-price__save {
	margin-top: 2px;
	font-size: var(--ka-text-xs);
	font-weight: var(--ka-weight-medium);
	color: var(--ka-green-700);
}

.kp-buy form {
	margin: 0;
}


/* --------------------------------------------------------------------------
   What has been paid

   A list of rows rather than a table, because on a phone a four column
   table of dates and amounts either scrolls sideways or squeezes every
   column into two characters.
   -------------------------------------------------------------------------- */

.kp-history {
	list-style: none;
	margin: var(--ka-3) 0 0;
	padding: 0;
	border-top: 1px solid var(--ka-border);
}

.kp-history li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ka-3);
	padding: var(--ka-3) 0;
	border-bottom: 1px solid var(--ka-border);
	font-size: var(--ka-text-sm);
}

.kp-history__when {
	color: var(--ka-text-soft);
}

.kp-history__what {
	text-align: right;
}

.kp-history__amount {
	font-weight: var(--ka-weight-medium);
	white-space: nowrap;
}

.kp-history__status {
	display: block;
	font-size: var(--ka-text-xs);
	color: var(--ka-text-soft);
}

/* A payment that did not complete should not read like one that did. */
.kp-history li[data-status="failed"] .kp-history__amount,
.kp-history li[data-status="halted"] .kp-history__amount {
	color: var(--ka-busy);
	text-decoration: line-through;
}