/* ==========================================================================
   WCS Gadget Insurance — the offer card, its modal, and the added line.

   ── ONE STYLESHEET FOR TWO VERY DIFFERENT PAGES ─────────────────────────────

   /secure-checkout/ has a full design system ("Emerald & Slate": --c2-green,
   --c2-ink, --c2-radius and friends, declared on body.checkout2-page).
   /sell-my-gadget/<device>/ has none — it is an older page with its own ad-hoc
   styling.

   So every colour here is `var(--c2-token, <fallback>)`. On the checkout the
   card inherits the page's own palette and looks native; on the trade-in page
   the fallbacks take over and it looks deliberate rather than borrowed. One
   file, no per-page overrides, and a future retheme of the checkout carries the
   card with it for free.

   ── EVERYTHING IS NAMESPACED UNDER .iout-wcs- ───────────────────────────────

   Both host pages carry aggressive global rules. The checkout has an isolation
   reset that zeroes margins on bare elements; the trade-in page styles inputs
   and buttons by element. Nothing here relies on an element selector, and
   nothing here is a bare `p`, `ul` or `input` rule that could leak out.
   ========================================================================== */

.iout-wcs-card,
.iout-wcs-added,
.iout-wcs-modal,
.iout-wcs-pdp,
.iout-wcs-confirm {
	--wcs-accent: var(--c2-green, #059669);
	--wcs-accent-dark: var(--c2-green-dark, #047857);
	--wcs-accent-ghost: var(--c2-green-ghost, rgba(5, 150, 105, .10));
	--wcs-ink: var(--c2-ink, #10231b);
	--wcs-muted: var(--c2-muted, #7a857e);
	--wcs-line: var(--c2-line, #e7ece9);
	--wcs-panel: var(--c2-panel, #f4f7f5);
	--wcs-radius: var(--c2-radius-sm, 12px);
	--wcs-shadow: var(--c2-shadow-sm, 0 1px 2px rgba(16, 32, 24, .04));

	box-sizing: border-box;
	font-family: inherit;
	color: var(--wcs-ink);
	text-align: left;
}

.iout-wcs-card *,
.iout-wcs-added *,
.iout-wcs-modal * { box-sizing: border-box; }

/* --- the row it sits in on the checkout summary ---------------------------
   The summary is a two-column table; this is not a line item, so it spans. */
tr.iout-wcs-row > td {
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}

/* --- the card ------------------------------------------------------------- */

.iout-wcs-card {
	position: relative;
	margin: 16px 0;
	padding: 16px;
	border: 1px solid var(--wcs-line);
	border-radius: var(--wcs-radius);
	background: #fff;
	box-shadow: var(--wcs-shadow);
	/* A quiet accent edge, so the card reads as an offer rather than as another
	   line of the order. Left rather than top: it survives the card being
	   narrow, which it is inside a ~320px summary column. */
	border-left: 3px solid var(--wcs-accent);
}

.iout-wcs-card[hidden] { display: none; }

.iout-wcs-card__eyebrow {
	display: inline-block;
	margin: 0 0 8px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--wcs-accent-ghost);
	color: var(--wcs-accent-dark);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1.6;
}

.iout-wcs-card__headline {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}

.iout-wcs-card__subhead {
	margin: 0 0 12px;
	color: var(--wcs-muted);
	font-size: 13.5px;
	line-height: 1.5;
}

/* --- the read-more disclosure --------------------------------------------
   A <details>, so it works with JavaScript off and carries its own expanded
   state for screen readers. It sits ABOVE the buttons on purpose: the whole
   design note behind this card was that clicking "Yes" to find out what "Yes"
   means feels committal. */

.iout-wcs-card__details {
	margin: 0 0 14px;
	padding-top: 12px;
	border-top: 1px solid var(--wcs-line);
}

.iout-wcs-card__summary {
	display: flex;
	align-items: center;
	gap: 7px;
	cursor: pointer;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--wcs-accent-dark);
	list-style: none;
	user-select: none;
}

.iout-wcs-card__summary::-webkit-details-marker { display: none; }

.iout-wcs-card__summary:focus-visible {
	outline: 2px solid var(--wcs-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

.iout-wcs-card__chevron {
	display: inline-block;
	font-size: 15px;
	line-height: 1;
	transition: transform .18s ease;
}

.iout-wcs-card__details[open] .iout-wcs-card__chevron { transform: rotate(90deg); }

.iout-wcs-card__body {
	margin-top: 12px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--wcs-muted);
}

.iout-wcs-card__bullets {
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 7px;
}

.iout-wcs-card__bullets > li {
	display: grid;
	grid-template-columns: 16px 1fr;
	gap: 8px;
	align-items: start;
	margin: 0;
}

.iout-wcs-card__tick {
	color: var(--wcs-accent);
	font-weight: 700;
	line-height: 1.55;
}

.iout-wcs-card__note { margin-top: 8px; }

/* --- the two buttons ------------------------------------------------------ */

.iout-wcs-card__choices {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.iout-wcs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--wcs-line);
	border-radius: 10px;
	background: var(--wcs-panel);
	color: var(--wcs-ink);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	/* Inside a ~300px summary column these sit two-up. Left to wrap, "Yes, add
	   it" breaks after "add", which reads as a broken button. */
	white-space: nowrap;
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .06s ease;
}

.iout-wcs-btn:hover { border-color: #cfd8d3; background: #eef2f0; }
.iout-wcs-btn:active { transform: translateY(1px); }

.iout-wcs-btn:focus-visible {
	outline: none;
	border-color: var(--wcs-accent);
	box-shadow: 0 0 0 3px var(--wcs-accent-ghost);
}

.iout-wcs-btn[disabled] { opacity: .55; cursor: not-allowed; }

.iout-wcs-btn--primary {
	background: var(--c2-cta, linear-gradient(135deg, #10b981, #047857));
	border-color: var(--wcs-accent-dark);
	color: #fff;
}

.iout-wcs-btn--primary:hover {
	background: var(--wcs-accent-dark);
	border-color: var(--wcs-accent-dark);
}

.iout-wcs-btn--wide { flex: 1 1 auto; min-width: 170px; }

.iout-wcs-card__reassurance {
	margin-top: 10px;
	color: var(--wcs-muted);
	font-size: 11.5px;
	line-height: 1.45;
	text-align: center;
}

/* The IPID notice WCS require, ABOVE the buttons. It looks like a sibling of
   __reassurance and is not one: that line is a courtesy, this is a regulated
   disclosure that has to be readable before the decision, so it is left-aligned
   and its link looks like a link. */
.iout-wcs-card__ipid {
	margin: 14px 0 10px;
	color: var(--wcs-muted);
	font-size: 11.5px;
	line-height: 1.45;
}

.iout-wcs-card__ipid a {
	color: inherit;
	text-decoration: underline;
}

/* --- the added confirmation ----------------------------------------------- */

.iout-wcs-added {
	display: none;
	margin: 16px 0;
	padding: 12px 14px;
	border: 1px solid var(--wcs-accent);
	border-radius: var(--wcs-radius);
	background: var(--wcs-accent-ghost);
	font-size: 13.5px;
	line-height: 1.5;
}

.iout-wcs-added.is-visible { display: block; }

.iout-wcs-added__label { font-weight: 700; }

.iout-wcs-added__tick {
	color: var(--wcs-accent-dark);
	margin-right: 5px;
	font-weight: 700;
}

.iout-wcs-added__amount { float: right; font-weight: 700; }

.iout-wcs-added__note {
	display: block;
	clear: both;
	margin-top: 4px;
	color: var(--wcs-muted);
	font-size: 12px;
}

.iout-wcs-added__remove {
	margin-top: 6px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wcs-muted);
	font-family: inherit;
	font-size: 12px;
	text-decoration: underline;
	cursor: pointer;
}

.iout-wcs-added__remove:hover { color: var(--wcs-ink); }

/* --- modal ---------------------------------------------------------------- */

.iout-wcs-modal {
	position: fixed;
	inset: 0;
	/* Above the checkout's sticky summary and its mobile toggle bar, below
	   nothing else on either page. */
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	overflow-y: auto;
}

.iout-wcs-modal[hidden] { display: none; }

.iout-wcs-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 24, 18, .55);
}

.iout-wcs-modal__dialog {
	position: relative;
	width: min(540px, 100%);
	max-height: 90vh;
	overflow-y: auto;
	padding: 22px;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 24px 48px rgba(10, 24, 18, .28);
}

.iout-wcs-modal__dialog:focus { outline: none; }

.iout-wcs-modal__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 4px;
}

.iout-wcs-modal__title { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.3; }

.iout-wcs-modal__close {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border: 1px solid var(--wcs-line);
	border-radius: 50%;
	background: #fff;
	color: var(--wcs-muted);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.iout-wcs-modal__close:hover { background: var(--wcs-panel); color: var(--wcs-ink); }

.iout-wcs-modal__device {
	margin: 0 0 16px;
	color: var(--wcs-muted);
	font-size: 13.5px;
	line-height: 1.5;
}

.iout-wcs-modal__pricing {
	margin: 0 0 18px;
	padding: 13px 14px;
	border: 1px solid var(--wcs-line);
	border-radius: var(--wcs-radius);
	background: var(--wcs-panel);
	font-size: 13.5px;
	line-height: 1.5;
}

.iout-wcs-modal__pricing-head { font-size: 15px; font-weight: 700; margin-bottom: 4px; }

.iout-wcs-modal__bank { margin: 0 0 16px; padding: 0; border: 0; min-width: 0; }

.iout-wcs-modal__bank legend {
	float: none;
	width: auto;
	margin: 0 0 4px;
	padding: 0;
	font-size: 15px;
	font-weight: 700;
}

.iout-wcs-modal__intro {
	margin: 0 0 14px;
	color: var(--wcs-muted);
	font-size: 12.5px;
	line-height: 1.55;
}

.iout-wcs-field { margin-bottom: 12px; }

.iout-wcs-field label {
	display: block;
	margin-bottom: 5px;
	font-size: 13.5px;
	font-weight: 600;
}

.iout-wcs-field input {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--wcs-line);
	border-radius: 10px;
	background: #fff;
	color: var(--wcs-ink);
	font-family: inherit;
	font-size: 15px;
}

.iout-wcs-field input:focus {
	outline: none;
	border-color: var(--wcs-accent);
	box-shadow: 0 0 0 3px var(--wcs-accent-ghost);
}

.iout-wcs-field input.is-invalid { border-color: #c0392b; }

.iout-wcs-field__hint {
	display: block;
	margin-top: 5px;
	color: var(--wcs-muted);
	font-size: 12px;
	line-height: 1.45;
}

.iout-wcs-field__error {
	display: block;
	margin-top: 5px;
	color: #c0392b;
	font-size: 12.5px;
}

.iout-wcs-field__error[hidden] { display: none; }

/* --- device picker (trade-in only) ---------------------------------------- */

.iout-wcs-results {
	margin-top: 6px;
	border: 1px solid var(--wcs-line);
	border-radius: 10px;
	max-height: 240px;
	overflow-y: auto;
	background: #fff;
}

.iout-wcs-results[hidden] { display: none; }

.iout-wcs-result {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 10px 12px;
	border: 0;
	border-bottom: 1px solid var(--wcs-line);
	background: none;
	color: var(--wcs-ink);
	font-family: inherit;
	font-size: 13.5px;
	text-align: left;
	cursor: pointer;
}

.iout-wcs-result:last-child { border-bottom: 0; }
.iout-wcs-result:hover,
.iout-wcs-result:focus { background: var(--wcs-panel); outline: none; }

.iout-wcs-result__price { flex: 0 0 auto; font-weight: 700; white-space: nowrap; }

.iout-wcs-results__empty {
	padding: 12px;
	color: var(--wcs-muted);
	font-size: 13px;
}

.iout-wcs-chosen {
	margin: 0 0 12px;
	padding: 11px 13px;
	border: 1px solid var(--wcs-accent);
	border-radius: var(--wcs-radius);
	background: var(--wcs-accent-ghost);
	font-size: 13.5px;
	line-height: 1.5;
}

.iout-wcs-chosen[hidden] { display: none; }

.iout-wcs-modal__docs {
	margin: 0 0 16px;
	color: var(--wcs-muted);
	font-size: 11.5px;
	line-height: 1.6;
}

.iout-wcs-modal__docs a { color: var(--wcs-accent-dark); text-decoration: underline; }

/*
 * Important information - the declaration a customer agrees to when they press
 * Add cover. Added 9 Sep 2026 after Warranty & Creditor Services checked both
 * sites and found the section missing from each.
 *
 * Sized like __docs rather than like body copy, because it is the same kind of
 * thing: required disclosure that has to be READABLE and present before the
 * button, without becoming the loudest part of a modal whose actual job is
 * three fields. It is scrollable with the rest of the dialog rather than boxed
 * in its own scroller - a nested scrollbar on a phone is how people miss that
 * there is anything below it.
 */
.iout-wcs-modal__important {
	margin: 0 0 16px;
	padding-top: 14px;
	border-top: 1px solid var(--wcs-line, #e6e9e7);
	color: var(--wcs-muted);
	font-size: 11.5px;
	line-height: 1.6;
}

.iout-wcs-modal__important h3 {
	margin: 0 0 8px;
	color: var(--wcs-ink, #10231b);
	font-size: 13px;
	font-weight: 700;
}

.iout-wcs-modal__important ul {
	margin: 0 0 12px;
	padding-left: 18px;
	list-style: disc;
}

.iout-wcs-modal__important li { margin: 0 0 4px; }

.iout-wcs-modal__important p { margin: 0 0 10px; }

.iout-wcs-modal__important p:last-child { margin-bottom: 0; }

.iout-wcs-modal__important a { color: var(--wcs-accent-dark); text-decoration: underline; }

.iout-wcs-modal__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* --- small screens --------------------------------------------------------
   A bottom sheet rather than a centred box: on a phone the modal is nearly
   full-height anyway, and anchoring it to the bottom keeps the primary action
   within thumb reach instead of floating mid-screen. */

@media (max-width: 575px) {
	.iout-wcs-modal { padding: 0; align-items: flex-end; }

	.iout-wcs-modal__dialog {
		width: 100%;
		max-height: 92vh;
		border-radius: 18px 18px 0 0;
	}

	.iout-wcs-card__choices { grid-template-columns: 1fr; }

	.iout-wcs-modal__actions > .iout-wcs-btn { width: 100%; }
}

/* Respect a reduced-motion preference — the only animation here is the
   chevron, but a rule that costs one line should not need a second thought. */
@media (prefers-reduced-motion: reduce) {
	.iout-wcs-card__chevron,
	.iout-wcs-btn { transition: none; }
}


/* ==========================================================================
   The product page banner.

   Deliberately the smallest thing in this stylesheet. It sits under the buy
   button between the add-to-cart and the Trustpilot strip, and the page already
   has a compact icon row there (.three_cart_features: a leaf, a truck, a credit
   card). This is written to read as one more line of that row rather than as a
   second offer competing with the price — it is a fact about the product, and
   the actual decision is two pages away.
   ========================================================================== */

.iout-wcs-pdp {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 14px 0;
	padding: 10px 12px;
	border: 1px solid var(--wcs-line);
	border-radius: var(--wcs-radius);
	background: var(--wcs-accent-ghost);
	box-sizing: border-box;
}

.iout-wcs-pdp * { box-sizing: border-box; }

.iout-wcs-pdp__icon {
	flex: 0 0 auto;
	margin-top: 2px;
	font-size: 18px;
	line-height: 1;
	color: var(--wcs-accent);
}

.iout-wcs-pdp__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.iout-wcs-pdp__headline {
	font-weight: 700;
	font-size: 14px;
	line-height: 1.3;
	color: var(--wcs-ink);
}

/* The asterisk carries the price disclosure, so it must not read as
   decoration — same weight and colour as the claim it qualifies. */
.iout-wcs-pdp__star { color: var(--wcs-accent); }

.iout-wcs-pdp__detail {
	font-size: 13px;
	line-height: 1.4;
	color: var(--wcs-ink);
}

.iout-wcs-pdp__footnote {
	font-size: 11px;
	line-height: 1.4;
	color: var(--wcs-muted);
}

@media (max-width: 480px) {
	.iout-wcs-pdp { padding: 9px 10px; gap: 8px; }
	.iout-wcs-pdp__headline { font-size: 13px; }
	.iout-wcs-pdp__detail { font-size: 12px; }
}

/* ==========================================================================
   The confirmation, on the basket AND on the checkout.

   The offer card itself is the shared .iout-wcs-card. This is what replaces it
   once cover is added, and it is the same component on both pages on purpose:
   the basket is where everything is asked, and the checkout only repeats what
   was agreed. One block, so the two screens cannot describe the same cover
   differently.

   It has to say what actually happens next, because saying yes buys nothing
   today and puts no line on the bill — "added" on its own reads as a charge.
   ========================================================================== */

/* No top margin here: the offer card inside carries its own 16px, and doubling
   them would open a gap above an offer that is meant to sit with the basket. */
.iout-wcs-cart { margin: 0 0 16px; }

.iout-wcs-cart__offer[hidden],
.iout-wcs-confirm[hidden] { display: none; }

/* The confirmation REPLACES the offer card, so it has to bring that card's top
   margin with it. Without this it inherits only the wrapper's zero and sits
   flush against the basket items above — the card had the spacing, and hiding
   the card took the spacing with it. */
.iout-wcs-confirm {
	margin-top: 16px;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid var(--wcs-accent);
	border-radius: var(--wcs-radius);
	background: var(--wcs-accent-ghost);
	box-shadow: var(--wcs-shadow);
}

.iout-wcs-confirm * { box-sizing: border-box; }

.iout-wcs-confirm__tick {
	flex: 0 0 auto;
	margin-top: 1px;
	font-weight: 700;
	color: var(--wcs-accent);
}

.iout-wcs-confirm__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 0;
	font-size: 13px;
	line-height: 1.4;
}

.iout-wcs-confirm__text strong { font-weight: 700; }
.iout-wcs-confirm__text span { color: var(--wcs-muted); }

/* Removing is deliberately a quiet text button rather than a second CTA. We
   would rather they kept it — but a confirmation with no way out is the kind
   that gets abandoned along with the basket. */
.iout-wcs-confirm__remove {
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 12px;
	color: var(--wcs-muted);
	text-decoration: underline;
	cursor: pointer;
}

.iout-wcs-confirm__remove:hover { color: var(--wcs-ink); }

@media (max-width: 480px) {
	.iout-wcs-confirm { flex-wrap: wrap; }
	.iout-wcs-confirm__remove { margin-left: auto; }
}