/* ---------------------------------------------------------------------------
   "להוסיף שיחה אישית בסיום האתגר" - inside the checkout's order summary.

   Same card as the one at the foot of /atgar/ (.yk-callopt in main.css): white,
   gold hairline, 14px radius. Deliberately identical, because it is the same
   offer - a woman who read it there and meets a different-looking box here has
   to work out whether it is the same thing.

   Loaded only on checkout, cart and account screens, from yk-atgar-checkout-call.php.
   --------------------------------------------------------------------------- */

.yk-checkout-callopt {
	/*
	 * No rule of its own. WooCommerce drops this slot into
	 * .wc-block-components-totals-wrapper, which already draws the 1px divider
	 * that separates it from the total - adding a second one produced two lines
	 * with a dead 18px band between them, checked on the live checkout before
	 * this was cut back to padding alone.
	 */
	padding-block-start: 14px;
	padding-block-end: 2px;
}

.yk-checkout-callopt__label {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	cursor: pointer;
	text-align: start;

	background: var(--white, #fff);
	border: 1px solid rgba(192, 139, 60, .42);
	border-radius: 14px;
	padding: .8rem 1rem;

	line-height: 1.45;
	font-size: .95rem;
	color: var(--text, #3a2f4d);

	box-shadow: var(--shadow-soft, 0 8px 22px rgba(43, 26, 71, .08));
	transition: border-color .18s ease;
}

.yk-checkout-callopt__label:hover {
	border-color: var(--gold, #c08b3c);
}

/* The input is the focus target, but the card is what the eye follows. */
.yk-checkout-callopt__label:focus-within {
	outline: 2px solid var(--gold-strong, #a97627);
	outline-offset: 3px;
}

.yk-checkout-callopt__box {
	inline-size: 1.15rem;
	block-size: 1.15rem;
	accent-color: var(--gold-strong, #a97627);
	flex: none;
	margin: 0;
	/* Optical alignment with the first line of a 1.45 line-height label. */
	margin-block-start: .12rem;
}

.yk-checkout-callopt__text {
	text-wrap: balance;
}

.yk-checkout-callopt__price {
	color: var(--ink, #3e2a68);
	font-weight: 700;
	white-space: nowrap;
}

/* How long the call is, and that Yarden is the one who sets the time. Fine
   print by size, not by a washed-out colour: #6b5f7d measures 5.90:1 on the
   white card and still clears AA for small text. Matches .yk-callopt-note at
   the foot of /atgar/ - same offer, same terms, same look. */
.yk-checkout-callopt__note {
	display: block;
	margin-block-start: .35rem;
	font-size: .82rem;
	line-height: 1.5;
	color: #6b5f7d;
	text-wrap: pretty;
}

/* While the cart is recalculating. Faded, not hidden - the row must not jump. */
.yk-checkout-callopt.is-busy .yk-checkout-callopt__label {
	opacity: .6;
	cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
	.yk-checkout-callopt__label {
		transition: none;
	}
}