/*
 * Costio – butiken.
 *
 * Typsnitt och färger kommer från temat – Costio sätter inga egna. Det enda
 * med egen färg är markeringen av den nivå kunden ligger på, och den går att
 * ändra under Inställningar.
 *
 * Det som är unikt för Costio har däremot sin egen hierarki: fetstil på
 * rollpriset, och mindre, nedtonad text på det som är sekundärt. Nedtoningen
 * görs med opacity, så den fungerar med vilken textfärg temat än har.
 */

/* -------------------------------------------------------------------------
 * Rollpriset
 * ---------------------------------------------------------------------- */

.costio-price {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4em;
}

.costio-price__label {
	font-weight: 600;
}

.costio-price__regular {
	opacity: 0.6;
	text-decoration: line-through;
}

/* <ins> stryks under av webbläsaren – ett pris ska inte se ut som en länk. */
.costio-price__amount {
	text-decoration: none;
	font-weight: 700;
}

.costio-price__saving {
	font-size: 0.85em;
	opacity: 0.8;
}

.costio-price__tax {
	font-size: 0.8em;
	font-weight: normal;
	opacity: 0.8;
}

.costio-price__tax--below {
	display: block;
	flex-basis: 100%;
	margin-top: 2px;
}

.costio-min-qty {
	margin: 0 0 0.75em;
	font-size: 0.9em;
	opacity: 0.8;
}

/* -------------------------------------------------------------------------
 * Stegtabellen
 * ---------------------------------------------------------------------- */

.costio-tiers {
	margin: 0 0 1.5em;
}

.costio-tiers__title {
	display: block;
	margin-bottom: 0.5em;
}

/*
 * Nollställ temats tabellstilar – versaler, ramar, cellbakgrunder och mindre
 * text på th – så tabellen blir en ren lista. Typsnitt och färg ärvs från
 * omgivningen, alltså från temat.
 */
.costio-tiers .costio-tiers__table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	table-layout: fixed;
	background: transparent;
}

.costio-tiers .costio-tiers__table th,
.costio-tiers .costio-tiers__table td {
	width: 50%;
	padding: 0.85em 0.75em;
	border: 0;
	border-bottom: 1px dashed var( --costio-tier-border, rgba( 0, 0, 0, 0.12 ) );
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	vertical-align: middle;
}

/* Kolumnrubrikerna får fetstil som vanliga tabellrubriker; radrubrikerna ser ut som text. */
.costio-tiers .costio-tiers__table thead th {
	font-weight: bold;
}

.costio-tiers .costio-tiers__table .woocommerce-Price-amount {
	color: inherit;
	font: inherit;
}

/* Aktiv nivå */

.costio-tiers__row {
	transition: background-color 150ms ease, color 150ms ease;
}

.costio-tiers--live .costio-tiers__row {
	cursor: pointer;
}

/* Genomskinlig grå, så den fungerar på ljus och mörk bakgrund. */
.costio-tiers--live .costio-tiers__row:not(.is-active):hover th,
.costio-tiers--live .costio-tiers__row:not(.is-active):hover td {
	background: rgba( 0, 0, 0, 0.03 );
}

.costio-tiers .costio-tiers__table .costio-tiers__row.is-active th,
.costio-tiers .costio-tiers__table .costio-tiers__row.is-active td {
	background: var( --costio-tier-active-bg, #dd9933 );
	color: var( --costio-tier-active-color, #ffffff );
	border-bottom-color: transparent;
}

.costio-tiers__row--hidden {
	display: none;
}

.costio-tiers__after {
	margin-left: 0.4em;
	font-size: 0.85em;
	opacity: 0.85;
}

/* Summan */

.costio-tiers .costio-tiers__table .costio-tiers__summary th,
.costio-tiers .costio-tiers__table .costio-tiers__summary td {
	border-bottom: 0;
}

/* Nästa nivå */

.costio-tiers__nudge {
	margin: 0.5em 0 0;
	padding: 0 0.75em;
}

.costio-tiers__nudge[hidden] {
	display: none;
}