/*
 * A field with its action as an icon inside it: the promo code (the cart page's Cart block, the card checkout of the
 * main site, PS IN and Xbox TR, the classic checkout of /digital/, /retro/, /xbox-games-us/ and the main site's
 * /checkout/), applied by an arrow, and the wishlist page's link to the list, copied by a tap on the field. One look
 * (Kirill, 2026-10-22): a 48px field with 12px corners and no label of its own (the panel, the notice or the line above
 * it says what it is for), the icon 14px from its right edge. The accent pill beside the field was heavier than these
 * side paths deserve (same day). On the dark pages the field takes the card colour, like the catalog's search field;
 * on the classic checkout it keeps the form's own colours (light on /digital/). Icons: global.css. Loaded on every
 * page: the wishlist page is any page with the shortcode.
 *
 * Before: the cart page had WooCommerce's white field with a pale floating "Введите код", the card checkout square
 * corners (giftcard-checkout-page.css), the classic checkout a full-width upper-case button (snippet 28, then
 * checkout.css), the wishlist a small framed field and a "Copy" button with a glow.
 * The words are in storefront.php and js/wc-strings.js.
 */

/* ── The look ───────────────────────────────────────────────────────────────── */

:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-totals-coupon__form .wc-block-components-text-input input[type="text"],
.woocommerce form.checkout_coupon input#coupon_code,
.woosw-list .woosw-copy input#woosw_copy_url {
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	min-height: 0;
	margin: 0;
	padding: 0 16px;
	border-radius: 12px;
	font-family: Onest, sans-serif;
	font-size: 16px;
	line-height: normal;
	box-shadow: none;
	outline: none;
}

:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-totals-coupon__form .wc-block-components-text-input input[type="text"],
body.gp-card-checkout-shell form.checkout_coupon input#coupon_code,
.woosw-list .woosw-copy input#woosw_copy_url {
	border: 1px solid transparent;
	background: var(--wp--preset--color--custom-card-background);
	color: var(--wp--preset--color--primary);
	transition: border-color 0.2s ease;
}

:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-totals-coupon__form .wc-block-components-text-input input[type="text"]:focus,
body.gp-card-checkout-shell form.checkout_coupon input#coupon_code:focus {
	border-color: var(--wp--preset--color--accent);
}

body.gp-card-checkout-shell form.checkout_coupon input#coupon_code::placeholder {
	color: #7A7A7A;
	opacity: 1;
}

/* Room on the right for the icon */
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-totals-coupon__form .wc-block-components-text-input input[type="text"],
.woocommerce form.checkout_coupon input#coupon_code,
.woosw-list .woosw-copy input#woosw_copy_url {
	padding-right: 48px;
	text-overflow: ellipsis;
}

/* "Применить": the arrow at the field's right end; its word stays for screen readers (font-size 0 in the classic form,
   clipped in the block's, whose text element sets a size of its own) */
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-totals-coupon__button,
.woocommerce form.checkout_coupon button[name="apply_coupon"] {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	min-width: 0;
	height: 48px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: none !important; /* over the theme's and snippet 102's accent */
	box-shadow: none;
	color: var(--wp--preset--color--accent);
	font-size: 0;
	line-height: 0;
	text-transform: none;
	cursor: pointer;
}

:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-totals-coupon__button::before,
.woocommerce form.checkout_coupon button[name="apply_coupon"]::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: var(--gp-icon-arrow-right) center / contain no-repeat;
	mask: var(--gp-icon-arrow-right) center / contain no-repeat;
}

/* Until a code is typed WooCommerce disables it: grey, as the field's other icons */
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-totals-coupon__button:disabled {
	color: #7A7A7A;
	opacity: 1;
}

/* The Cart block's buttons go dark under the pointer (cart-common.css); this one stays the accent */
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__button.wc-block-components-button:hover {
	color: var(--wp--preset--color--accent);
	opacity: 1;
}

/* While the code is checked, WooCommerce's spinner in place of the arrow */
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-totals-coupon__button:has(.wc-block-components-spinner)::before {
	display: none;
}

:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-totals-coupon__button .wc-block-components-button__text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* ── Promo code ─────────────────────────────────────────────────────────────── */

.wc-block-components-totals-coupon__form,
.woocommerce form.checkout_coupon {
	position: relative;
	display: flex;
	align-items: stretch;
}

/* The classic form starts hidden by an inline display: none, which WooCommerce's script takes off when the notice's
   link is clicked; then this flex row shows. Its two rows lose their floats and widths. */
.woocommerce form.checkout_coupon .form-row {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

.woocommerce form.checkout_coupon .form-row-first {
	flex: 1 1 auto;
	min-width: 0;
}

.woocommerce form.checkout_coupon .form-row-last {
	position: static;
	flex: none;
	width: 0;
}

.woocommerce form.checkout_coupon .clear {
	display: none;
}

:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-totals-coupon__form .wc-block-components-text-input {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

/* The floating "Введите код": the field keeps it as its aria-label */
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-totals-coupon__form .wc-block-components-text-input label {
	display: none;
}


/* ── The wishlist's link ────────────────────────────────────────────────────── */

/* "Ссылка на список" above the field. A tap on the field copies the link (js/wishlist.js) and its icon turns into a
   check for 2 seconds; no "Скопировать" button and no accent frame (Kirill, 2026-10-22). */
.woosw-list .woosw-actions {
	display: block;
	margin-top: 24px;
}

.woosw-list .woosw-copy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.woosw-list .woosw-copy .woosw-copy-label {
	flex: 0 0 100%;
	color: #A4A4A4;
	font-size: 14px;
}

.woosw-list .woosw-copy .woosw-copy-url {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	color: #7A7A7A;
	cursor: pointer;
	transition: color 0.2s ease;
}

.woosw-list .woosw-copy .woosw-copy-url::after {
	content: "";
	position: absolute;
	top: 14px;
	right: 14px;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: var(--gp-icon-copy) center / contain no-repeat;
	mask: var(--gp-icon-copy) center / contain no-repeat;
	pointer-events: none;
}

.woosw-list .woosw-copy .woosw-copy-url.gp-copied::after {
	-webkit-mask-image: var(--gp-icon-check);
	mask-image: var(--gp-icon-check);
}

.woosw-list .woosw-copy input#woosw_copy_url {
	cursor: pointer;
}

.woosw-list .woosw-copy .woosw-copy-btn {
	display: none;
}

@media (hover: hover) {
	.woosw-list .woosw-copy .woosw-copy-url:hover {
		color: var(--wp--preset--color--primary);
	}
}