/* =========================================================================
   Soulstones - per-item gift-wrap control on Cart / Checkout (feature 5)
   Warm neutral (#c2a18a) accent, squared, matches the theme.
   ========================================================================= */

.sg-giftwrap-item {
	--sg-accent: #c2a18a;
	--sg-checked: #7c5c46; /* darker warm tone for the ticked checkbox */
	--sg-line: #e7e2dc;
	--sg-ink: #1c1c1c;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 10px 0 2px;
	padding-top: 8px;
	border-top: 1px solid var(--sg-line);
	font-family: "Poppins", sans-serif;
}

.sg-giftwrap-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 13px;
	line-height: 1.3;
	color: #3d3a35;
	cursor: pointer;
}

/* custom square checkbox - !important + specific selector to beat the parent
   theme's generic input[type=checkbox] rule (margin, shadow, blue accent).
   Shared by the cart/checkout gift-wrap toggle and the product-page popup. */
.sg-giftwrap-check input.sg-giftwrap-toggle[type="checkbox"],
.sg-gwpop input.sg-gwpop__mute-cb[type="checkbox"] {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	width: 16px;
	min-width: 16px;
	height: 16px;
	margin: 0 !important;
	padding: 0;
	flex: 0 0 auto;
	border: 1px solid #b7b0a6;
	border-radius: 2px;
	background: #fff !important;
	box-shadow: none !important;
	position: relative;
	vertical-align: middle;
	accent-color: var(--sg-checked);
	cursor: pointer;
	transition: background-color .12s ease, border-color .12s ease;
}

.sg-giftwrap-check input.sg-giftwrap-toggle[type="checkbox"]:checked,
.sg-gwpop input.sg-gwpop__mute-cb[type="checkbox"]:checked {
	border-color: var(--sg-checked);
	background: var(--sg-checked) !important;
	background-image: none !important;
}

/* kill the theme's blue dashicons checkmark (drawn via ::before, color #13aff0) */
.sg-giftwrap-check input.sg-giftwrap-toggle[type="checkbox"]::before,
.sg-giftwrap-check input.sg-giftwrap-toggle[type="checkbox"]:checked::before,
.sg-gwpop input.sg-gwpop__mute-cb[type="checkbox"]::before,
.sg-gwpop input.sg-gwpop__mute-cb[type="checkbox"]:checked::before {
	content: none !important;
	display: none !important;
}

/* our own white checkmark */
.sg-giftwrap-check input.sg-giftwrap-toggle[type="checkbox"]:checked::after,
.sg-gwpop input.sg-gwpop__mute-cb[type="checkbox"]:checked::after {
	content: "" !important;
	position: absolute;
	left: 5px;
	top: 2px;
	width: 4px;
	height: 8px;
	border: solid #fff !important;
	border-width: 0 2px 2px 0 !important;
	background: none !important;
	transform: rotate(45deg);
}

.sg-giftwrap-check input.sg-giftwrap-toggle[type="checkbox"]:focus-visible,
.sg-gwpop input.sg-gwpop__mute-cb[type="checkbox"]:focus-visible {
	outline: 2px solid var(--sg-checked);
	outline-offset: 1px;
}

/* gift icon - nudged up 1px so its visual mass lines up with the text */
.sg-giftwrap-check .sg-gift {
	display: block;
	flex: 0 0 auto;
	position: relative;
	top: -1px;
	color: var(--sg-accent);
}

.sg-giftwrap-price {
	font-size: 13px;
	color: #6f6a63;
}

.sg-giftwrap-select {
	max-width: 100%;
	padding: 6px 10px;
	font-size: 13px;
	font-family: "Poppins", sans-serif;
	border: 1px solid var(--sg-line);
	background: #fbf9f7;
	color: var(--sg-ink);
}

.sg-giftwrap-select[hidden] {
	display: none;
}

/* busy state during the AJAX round-trip */
.sg-giftwrap-spinner {
	display: none;
	width: 14px;
	height: 14px;
	border: 2px solid var(--sg-line);
	border-top-color: var(--sg-accent);
	border-radius: 50%;
	animation: sg-spin .7s linear infinite;
}

.sg-giftwrap-item.sg-busy .sg-giftwrap-spinner {
	display: inline-block;
}

.sg-giftwrap-item.sg-busy {
	opacity: .6;
	pointer-events: none;
}

@keyframes sg-spin {
	to { transform: rotate(360deg); }
}

/* gift-wrap line item (the linked box/bag row in the cart) */
.sg-wrap-for {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: #8a8177;
}

/* Cart coupon box - desktop only: 2-col grid so the input sits top-left, the
   "apply" button top-right, and the coupon error notice ("Lūdzu ievadiet kupona
   numuru") on row 2 under the input. Mobile keeps the theme's own layout.
   !important beats the theme's inline display:flex on .coupon. */
@media (min-width: 768px) {
	.woocommerce-cart-form td.actions .coupon,
	.woocommerce-cart-form .actions .coupon {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 6px 16px;
		align-items: start;
		padding-bottom: 20px;
	}

	.woocommerce-cart-form .actions .coupon > label.screen-reader-text {
		position: absolute;
	}

	.woocommerce-cart-form .actions .coupon .input-text,
	.woocommerce-cart-form .actions .coupon #coupon_code {
		grid-column: 1;
		grid-row: 1;
		width: 100%;
		margin: 0;
		float: none;
	}

	.woocommerce-cart-form .actions .coupon .button,
	.woocommerce-cart-form .actions .coupon button[name="apply_coupon"] {
		grid-column: 2;
		grid-row: 1;
		margin: 0;
		float: none;
		white-space: nowrap;
	}

	.woocommerce-cart-form .actions .coupon .coupon-error-notice,
	.woocommerce-cart-form .actions .coupon #coupon-error-notice {
		grid-column: 1;
		grid-row: 2;
		width: 100%;
		margin: 0;
	}
}

/* Lifetime spend line on My Account dashboard (feature 6) */
.soulstones-lifetime-spend {
	margin: 12px 0 0;
	padding: 10px 14px;
	background: #faf6f2;
	border-left: 3px solid #c2a18a;
	font-size: 15px;
}

/* =========================================================================
   "Add gift wrapping?" popup after add-to-cart on a product page (feature 5b)
   ========================================================================= */
.sg-gwpop[hidden] { display: none; }

.sg-gwpop {
	--sg-accent: #c2a18a;
	--sg-checked: #7c5c46;
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Poppins", sans-serif;
}

.sg-gwpop__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(28, 24, 20, .55);
}

.sg-gwpop__box {
	position: relative;
	z-index: 1;
	width: min(420px, calc(100vw - 32px));
	background: #fff;
	padding: 26px 24px 18px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .28);
}

.sg-gwpop__x {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	font-size: 24px;
	line-height: 1;
	color: #8a8177;
	cursor: pointer;
	transition: transform .25s ease, color .2s ease;
}

.sg-gwpop__x:hover,
.sg-gwpop__x:focus-visible {
	color: var(--theme-primary-color, #7c5c46);
}

.sg-gwpop__box h3 {
	margin: 0 0 8px;
	font-size: 18px;
	line-height: 1.3;
}

.sg-gwpop__lead {
	margin: 0 0 14px;
	font-size: 13px;
	color: #6f6a63;
}

.sg-gwpop__field {
	display: block;
	margin-bottom: 16px;
	font-size: 13px;
}

.sg-gwpop__field > span {
	display: block;
	margin-bottom: 6px;
	color: #3d3a35;
}

.sg-gwpop__field select {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	font: inherit;
	font-size: 14px;
	border: 1px solid #e7e2dc;
	background: #fbf9f7;
	color: #1c1c1c;
}

.sg-gwpop__error[hidden] { display: none; }

.sg-gwpop__error {
	margin: -6px 0 14px;
	padding: 9px 12px;
	background: #fbecec;
	border-left: 3px solid #c0392b;
	font-size: 13px;
	color: #8a2a20;
}

.sg-gwpop__actions {
	display: flex;
	gap: 10px;
	align-items: stretch;
	margin-bottom: 14px;
}

.sg-gwpop__add {
	flex: 1 1 auto;
	min-height: 46px;
	padding: 12px 16px;
	font-size: 14px;
}

.sg-gwpop__skip {
	flex: 0 0 auto;
	min-height: 46px;
	padding: 12px 16px;
	background: none;
	border: 1px solid #e7e2dc;
	font: inherit;
	font-size: 14px;
	color: #6f6a63;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.sg-gwpop__skip:hover,
.sg-gwpop__skip:focus-visible {
	background-color: var(--theme-primary-color, #7c5c46);
	border-color: var(--theme-primary-color, #7c5c46);
	color: #fff;
}

.sg-gwpop__mute {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 6px 0;
	font-size: 13px;
	color: #8a8177;
	cursor: pointer;
}

body.sg-gwpop-open { overflow: hidden; }

/* hold the theme's slide-out flyout back while the popup is up */
body.sg-hold-flyout .cart-flyout,
body.sg-hold-flyout .la-overlay-global {
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	transition: none !important;
}

/* Mobile - full-width, thumb-friendly targets */
@media (max-width: 480px) {
	.sg-gwpop { align-items: flex-end; }

	.sg-gwpop__box {
		width: 100%;
		padding: 22px 18px calc(18px + env(safe-area-inset-bottom, 0px));
	}

	.sg-gwpop__actions {
		flex-direction: column-reverse;
	}

	.sg-gwpop__add,
	.sg-gwpop__skip {
		width: 100%;
		min-height: 50px;
		font-size: 15px;
	}

	.sg-gwpop__field select { font-size: 16px; } /* prevents iOS zoom-on-focus */

	.sg-gwpop__mute { min-height: 40px; }
}

/* Hide the "Created with MailerLite" badge on the spin-wheel popup. */
.ml-hide-branding {
	display: none !important;
}

/* =========================================================================
   YITH WooCommerce Gift Cards (feature 7) - match the site's own look
   instead of the plugin's default green/teal skin.
   ========================================================================= */

/* "Got a gift card..." notice - the theme's own WooCommerce notice box
   already looks right, left untouched. */

/* The theme's own input styling (style.css) is scoped to "form input[type=text]"
   etc - it needs a real <form> ancestor. YITH's wrapper is a plain
   <div method="post">, not an actual <form> element, so that rule never
   matches here. Reapplied explicitly with the same values/variable so it
   looks identical to every other text input on the site. */
/* WooCommerce core's own ".form-row .input-text" rule (height:50px;
   line-height:48px) beats the plain-selector version above via source order -
   overridden explicitly since it's what's forcing the mismatched height. */
.form-row .input-text#giftcard_code {
	display: inline-block;
	height: auto;
	min-height: 30px;
	width: 100%;
	font-size: 14px;
	line-height: 1.8;
	padding: 10px 20px;
	vertical-align: middle;
	background-color: transparent;
	color: inherit;
	border: 1px solid var(--theme-border-color);
	transition: all .3s ease;
}

.form-row .input-text#giftcard_code:focus {
	border-color: #bbb;
	outline: 0;
}

/* .ywgc_enter_code ships its own padding: 20px; margin: 2em 0; - drop both so
   it sits flush like the coupon row instead of boxed off with extra spacing. */
.ywgc_enter_code {
	padding: 0;
	padding-bottom: 20px;
	margin: 0;
}

/* ywgc-frontend.css also sets ".ywgc_enter_code>div { margin: 0 -14px }"
   unconditionally (not scoped to a media query) - zero it out everywhere. */
.ywgc_enter_code > div {
	margin: 0 !important;
}

/* Same reasoning as the input above: outside a real <form>, so it also
   misses out on the theme's default button skin and falls back to
   WooCommerce core's own (greenish) button style. Forced to match every
   other .button on the site, !important to beat that core rule's source
   order. */
.ywgc_apply_gift_card_button.button {
	background-color: var(--theme-secondary-color) !important;
	color: #fff !important;
	border: none !important;
	font-size: 14px;
	padding: 18px 30px;
	margin: 0;
	line-height: 1;
}

.ywgc_apply_gift_card_button.button:hover {
	background-color: var(--theme-primary-color) !important;
	border-color: var(--theme-primary-color) !important;
	color: #fff !important;
}

@media (max-width: 767px) {
	.ywgc_enter_code {
		padding-left: 16px !important;
		padding-right: 16px !important;
		padding-bottom: 20px;
	}

	.ywgc_apply_gift_card_button.button {
		width: 100%;
	}
}

/* .ywgc_enter_code p ships its own padding-left/right: 15px - drop it, same
   reasoning as everything else in this section. */
.ywgc_enter_code p {
	padding: 0 !important;
}

/* Same desktop 2-col grid already used for the cart's coupon row (input
   left, button right) - applied directly to the gift-card wrapper so it sits
   the same way. The input and button keep the theme's own native input-text /
   button styling; nothing about their color/font/padding is redeclared here. */
@media (min-width: 768px) {
	.ywgc_enter_code > div {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 6px 16px;
		align-items: start;
		margin: 0;
	}

	/* the instruction text ("Apply the gift card code...") is the first
	   child in markup but has no .form-row class, so grid auto-placement
	   was dropping it into row 2 below the input/button. Pin it to row 1,
	   spanning both columns, and push the input+button to row 2. */
	.ywgc_enter_code > div > p {
		grid-column: 1 / -1;
		grid-row: 1;
		margin: 0 0 8px;
	}

	.ywgc_enter_code .form-row-first {
		grid-column: 1;
		grid-row: 2;
		width: 100% !important;
		padding: 0;
		margin: 0;
		float: none;
	}

	.ywgc_enter_code .form-row-last {
		grid-column: 2;
		grid-row: 2;
		width: auto !important;
		padding: 0;
		margin: 0;
		float: none;
		white-space: nowrap;
	}
}