/*
 * Ångra köp-sidan (/angra-kop/) i samma utseende som Käpprätts
 * informationssidor (Retur, Köpvillkor, Reklamation). Kortets regler är
 * kopierade från retursidans inbäddade CSS på live (sid-id 102098). Formuläret
 * stylas mot WooCommerces egna klassnamn — ingen markup i formuläret ändras.
 * Laddas bara på ångersidan, och bara när "Ångra köp-sidan i
 * informationssidornas stil" är på (Transport → Allmänt).
 * Flyttad hit från Aftertaste Optimizer 1.1.1 (2026-09-25).
 */

/* Temats rubrik och brödsmula ersätts av kortets logga och rubrik. */
body.woocommerce-order-withdrawal .entry-header,
body.woocommerce-order-withdrawal .woocommerce-breadcrumb {
	display: none;
}

/* --- Kortet (som informationssidorna) --- */

.atr-wd-page .page-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0.9rem 0.1rem;
}

.atr-wd-page .terms-container {
	background: #ffffff;
	padding: 2.5rem;
	border-radius: 6px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	width: 100%;
	box-sizing: border-box;
}

.atr-wd-page .logo {
	display: block;
	margin: 0 auto 2rem;
	max-width: 200px;
	height: auto;
}

.atr-wd-page .main-title {
	text-align: center;
	color: #333;
	font-size: 2.2rem;
	margin-bottom: 1.5rem;
	font-weight: 600;
}

.atr-wd-page p {
	color: #444;
	line-height: 1.7;
}

.atr-wd-page a {
	color: #fa7b4c;
	text-decoration: none;
}

.atr-wd-page a:hover {
	text-decoration: underline;
}

/* Knappar (t.ex. "Skapa retursedel" i transports ruta) behåller vit text. */
.atr-wd-page a.button,
.atr-wd-page a.button:hover {
	color: #ffffff;
	text-decoration: none;
}

/* --- Inledning och noteringar --- */

.atr-wd-page .woocommerce-order-withdrawal-content__intro {
	margin-bottom: 1rem;
}

.atr-wd-page p.woocommerce-order-withdrawal-content__note {
	background: #fff8f6;
	border-left: 4px solid #fa7b4c;
	padding: 1rem 1.5rem;
	margin: 1rem 0 1.5rem;
}

.atr-wd-page span.woocommerce-order-withdrawal-content__note {
	display: block;
	color: #666;
	font-size: 0.9em;
	margin: -0.5rem 0 1.5rem;
}

/* --- Stegen: numrerade cirklar som på retursidan --- */

.atr-wd-page .woocommerce-order-withdrawal-content__steps {
	list-style: none;
	counter-reset: afo-step;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
	margin: 1.5rem 0 2rem;
	padding: 0;
}

.atr-wd-page .woocommerce-order-withdrawal-content__step {
	counter-increment: afo-step;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	color: #888;
	font-weight: 500;
}

.atr-wd-page .woocommerce-order-withdrawal-content__step::before {
	content: counter(afo-step);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	background: #eee;
	color: #888;
	flex-shrink: 0;
}

.atr-wd-page .woocommerce-order-withdrawal-content__step--current {
	color: #333;
}

.atr-wd-page .woocommerce-order-withdrawal-content__step--current::before {
	background: #fa7b4c;
	color: #ffffff;
}

/* --- Formuläret --- */

.atr-wd-page .woocommerce-OrderWithdrawalForm label,
.atr-wd-page .woocommerce-order-withdrawal-content__radio-field legend {
	font-weight: 600;
	color: #333;
	margin-bottom: 0.4rem;
}

.atr-wd-page .woocommerce-OrderWithdrawalForm .input-text {
	width: 100%;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 0.75rem 1rem;
	background: #fff;
	box-shadow: none;
}

.atr-wd-page .woocommerce-OrderWithdrawalForm .input-text:focus {
	border-color: #fa7b4c;
	outline: none;
	box-shadow: 0 0 0 3px rgba(250, 123, 76, 0.15);
}

/* Valen "Hela köpet" / "Bara vissa varor" som klickbara rutor. */
.atr-wd-page .woocommerce-order-withdrawal-content__radio-field {
	border: 0;
	padding: 0;
	margin: 1rem 0 1.25rem;
	min-width: 0;
}

/* Temat ger legend egen indragning — i linje med övriga etiketter. */
.atr-wd-page .woocommerce-order-withdrawal-content__radio-field legend {
	float: none;
	width: 100%;
	padding: 0;
	margin: 0 0 0.6rem;
	font-size: inherit;
}

.atr-wd-page label.woocommerce-order-withdrawal-content__radio-label {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 0.85rem 1rem;
	margin: 0 0 0.6rem;
	font-weight: 500;
	cursor: pointer;
	background: #fff;
}

.atr-wd-page label.woocommerce-order-withdrawal-content__radio-label:has(input:checked) {
	border-color: #fa7b4c;
	background: #fff8f6;
}

.atr-wd-page .woocommerce-order-withdrawal-content__radio-label input[type="radio"] {
	accent-color: #fa7b4c;
	width: 18px;
	height: 18px;
	margin: 0;
}

/* --- Granskningen: grå ruta som adressrutan på retursidan --- */

.atr-wd-page .woocommerce-order-withdrawal-content__review {
	background: #f8f8f8;
	border: 1px solid #eee;
	border-radius: 4px;
	padding: 1rem 1.5rem;
	margin: 1rem 0 1.5rem;
}

.atr-wd-page .woocommerce-order-withdrawal-content__review-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.5rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid #eee;
}

.atr-wd-page .woocommerce-order-withdrawal-content__review-row:last-child {
	border-bottom: 0;
}

.atr-wd-page .woocommerce-order-withdrawal-content__review dt {
	flex: 0 0 180px;
	font-weight: 600;
	color: #333;
	margin: 0;
}

.atr-wd-page .woocommerce-order-withdrawal-content__review dd {
	flex: 1;
	margin: 0;
	color: #444;
}

/* --- Knappar --- */

.atr-wd-page .woocommerce-order-withdrawal-content__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.atr-wd-page .woocommerce-order-withdrawal-content__actions .button {
	background: #fa7b4c;
	color: #ffffff;
	border: 1px solid #fa7b4c;
	border-radius: 4px;
	padding: 0.75rem 1.5rem;
	font-weight: 500;
}

.atr-wd-page .woocommerce-order-withdrawal-content__actions .button:hover {
	background: #e56a3e;
	border-color: #e56a3e;
}

/* "Redigera uppgifter" som sekundär knapp. */
.atr-wd-page .woocommerce-order-withdrawal-content__actions .button[value="edit"] {
	background: #ffffff;
	color: #fa7b4c;
}

.atr-wd-page .woocommerce-order-withdrawal-content__actions .button[value="edit"]:hover {
	background: #fff8f6;
}

/* --- Hjälpraden sist: som kontaktrutan på informationssidorna --- */

.atr-wd-page .afo-withdrawal-help {
	background: #f8f8f8;
	border-radius: 6px;
	padding: 1.5rem 2rem;
	margin-top: 2.5rem !important;
	text-align: center;
}

@media (max-width: 768px) {
	.atr-wd-page .terms-container {
		padding: 1.5rem;
	}

	.atr-wd-page .woocommerce-order-withdrawal-content__review dt {
		flex-basis: 100%;
	}

	.atr-wd-page .woocommerce-order-withdrawal-content__actions .button {
		width: 100%;
		text-align: center;
	}
}