/**
 * Bondelaget billett-velger — row-style price picker.
 */

/* Hide the default MentorKit scorm-course CTA when our picker is present.
 * The picker takes over the purchase flow. */
body.has-bondelaget-billett-velger .scorm-course-hero-cta > a:first-child,
body.has-bondelaget-billett-velger .scorm-course-hero-cta > span:first-child {
	display: none !important;
}

/* Group single page: the core has no CTA-suppression filter, so the picker is
 * injected just before the default CTA block (scorm_before_group_actions) and
 * we hide the whole default CTA block here. The picker carries its own buy
 * button. */
body.has-bondelaget-group-billett-velger .scorm-group-hero .scorm-group-hero-cta {
	display: none !important;
}

.bondelaget-billett-velger {
	margin: 1.5rem 0;
	font-family: inherit;
}

.bondelaget-billett-velger__status {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: #e6f4ea;
	color: #1f5132;
	border-radius: 8px;
	padding: 0.65rem 0.85rem;
	margin-bottom: 1rem;
	font-size: 0.95rem;
}

.bondelaget-billett-velger__status svg {
	flex-shrink: 0;
}

.bondelaget-billett-velger__intro {
	font-weight: 600;
	margin: 0 0 0.5rem;
	font-size: 1rem;
}

.bondelaget-billett-velger__rows {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.bondelaget-billett-velger__row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 0.85rem;
	padding: 0.9rem 1rem;
	border: 1.5px solid #d0d5dd;
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
	position: relative;
}

.bondelaget-billett-velger__row:hover:not(.is-locked) {
	border-color: #6f8bb8;
}

.bondelaget-billett-velger__row.is-selected {
	border-color: #2c5d3f;
	border-width: 2px;
	padding: calc(0.9rem - 0.5px) calc(1rem - 0.5px);
}

.bondelaget-billett-velger__row.is-locked {
	opacity: 0.55;
	cursor: not-allowed;
	background: #f7f7f5;
}

.bondelaget-billett-velger__row input[type="radio"] {
	margin: 0;
	width: 18px;
	height: 18px;
	accent-color: #2c5d3f;
}

.bondelaget-billett-velger__row-main {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.bondelaget-billett-velger__row-badge {
	display: inline-block;
	background: #dbe7ff;
	color: #1f3a8a;
	font-size: 0.7rem;
	font-weight: 600;
	padding: 0.1rem 0.45rem;
	border-radius: 999px;
	width: max-content;
}

.bondelaget-billett-velger__row-title {
	font-weight: 600;
	font-size: 1rem;
	color: #1a1a1a;
}

.bondelaget-billett-velger__row-desc {
	font-size: 0.85rem;
	color: #555;
	line-height: 1.3;
}

.bondelaget-billett-velger__row-price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.1rem;
	text-align: right;
	flex-shrink: 0;
}

.bondelaget-billett-velger__row-amount {
	font-weight: 700;
	font-size: 1.15rem;
	color: #1a1a1a;
	white-space: nowrap;
}

.bondelaget-billett-velger__row-amount .woocommerce-Price-amount {
	font-weight: 700;
}

.bondelaget-billett-velger__row-savings {
	color: #1f5132;
	font-size: 0.8rem;
	font-weight: 600;
}

.bondelaget-billett-velger__row-exvat {
	color: #777;
	font-size: 0.8rem;
}

.bondelaget-billett-velger__form {
	margin: 0;
}

/* Primary purchase button — matches the standard single-price CTA, which on
 * Bondelaget resolves to NB Skog #215732 fill + white text (--ast-global-color-1),
 * i.e. DESIGN.md button-primary. The default ghost style was "lite synlig".
 * The explicit :hover background/color also defends against Astra's
 * `button:hover` Spire-fill override. */
.bondelaget-billett-velger__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.95rem 1.2rem;
	background: #215732;
	color: #fff;
	border: 1.5px solid #215732;
	border-radius: 8px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.bondelaget-billett-velger__cta:hover,
.bondelaget-billett-velger__cta:focus {
	background: #16401f;
	border-color: #16401f;
	color: #fff;
}

/* Keep a distinct keyboard-focus ring even on themes that reset button
 * outlines (focus would otherwise be indistinguishable from hover). */
.bondelaget-billett-velger__cta:focus-visible {
	outline: 2px solid #215732;
	outline-offset: 2px;
}

/* The price inside the CTA must read as part of the white button label.
 * On selection, billett-velger.js clones the chosen row's price node
 * (.row-amount — dark #1a1a1a, larger/bolder), and wc_price() wraps the
 * amount in .woocommerce-Price-amount which the theme may colour. Force
 * both to inherit the button's colour and weight so the price stays white
 * whether server-rendered or swapped in by JS. */
.bondelaget-billett-velger__cta .bondelaget-billett-velger__row-amount,
.bondelaget-billett-velger__cta .woocommerce-Price-amount {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

.bondelaget-billett-velger__hint {
	margin: 0.75rem 0 0;
	font-size: 0.85rem;
	color: #555;
	display: flex;
	align-items: center;
	gap: 0.35rem;
	justify-content: center;
}

.bondelaget-billett-velger__why {
	color: #2563eb;
	text-decoration: underline;
}

.bondelaget-billett-velger__dialog {
	border: none;
	border-radius: 10px;
	padding: 1.5rem;
	max-width: 460px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.bondelaget-billett-velger__dialog::backdrop {
	background: rgba(0, 0, 0, 0.4);
}

.bondelaget-billett-velger__dialog h3 {
	margin: 0 0 0.5rem;
}

.bondelaget-billett-velger__dialog ul {
	padding-left: 1.2rem;
	margin: 0.5rem 0;
}

.bondelaget-billett-velger__dialog button {
	margin-top: 1rem;
	padding: 0.5rem 1rem;
	background: #2c5d3f;
	color: #fff;
	border: none;
	border-radius: 6px;
	cursor: pointer;
}

@media (max-width: 540px) {
	.bondelaget-billett-velger__row {
		grid-template-columns: auto 1fr;
	}
	.bondelaget-billett-velger__row-price {
		grid-column: 1 / -1;
		align-items: flex-start;
		padding-left: 2rem;
	}
}