/**
 * TK9 — Gift Card page styling. Product 61384, Smart Coupons 9.80.0.
 *
 * v1.3.0 — carries more of the design than before, on purpose. CSS cannot hang
 *   the page; JS can. No visibility:hidden pre-hide anywhere in this file.
 *
 * @version 1.3.0
 */

:root {
	--tk9-purple: #7a00a6;
	--tk9-purple-dark: #5f0080;
	--tk9-green: #a3d53f;
	--tk9-border: #e2d5ea;
	--tk9-muted: #6b6b72;
	--tk9-radius: 10px;
}

/* ---------- Amount chips ---------- */

#call_for_credit.tk9-gc-amount {
	margin: 0 0 1.5rem;
}

#call_for_credit.tk9-gc-amount .wc-sc-row,
#call_for_credit.tk9-gc-amount .wc-sc-label,
#call_for_credit.tk9-gc-amount .wc-sc-input {
	display: block;
	width: 100%;
	float: none;
	padding: 0;
}

/* "Choose Gift Card Amount" — text comes from the Smart Coupons Labels setting. */
#call_for_credit.tk9-gc-amount label[for="credit_called"] {
	display: block;
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0 0 0.75rem;
	color: #1c1c1e;
}

.tk9-gc-chips {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 0.5rem;
}

@media (max-width: 900px) {
	.tk9-gc-chips {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.tk9-gc-chips {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.tk9-gc-chip {
	position: relative;
	min-height: 62px;
	padding: 0.5rem 0.35rem;
	background: #fff;
	border: 1px solid var(--tk9-border);
	border-radius: var(--tk9-radius);
	color: #1c1c1e;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.tk9-gc-chip--custom {
	font-size: 0.85rem;
}

.tk9-gc-chip:hover {
	border-color: var(--tk9-purple);
}

.tk9-gc-chip:focus-visible {
	outline: 2px solid var(--tk9-purple);
	outline-offset: 2px;
}

.tk9-gc-chip.is-selected {
	background: var(--tk9-purple);
	border-color: var(--tk9-green);
	box-shadow: 0 0 0 2px var(--tk9-green);
	color: #fff;
}

.tk9-gc-chip.is-selected::after {
	content: "";
	position: absolute;
	top: -8px;
	right: -8px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--tk9-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}

/* ---------- Custom amount ---------- */

.tk9-gc-custom {
	margin-top: 0.75rem;
	max-width: 260px;
}

.tk9-gc-custom #credit_called {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--tk9-border);
	border-radius: var(--tk9-radius);
	font-size: 1rem;
	box-sizing: border-box;
}

.tk9-gc-custom #credit_called:focus {
	border-color: var(--tk9-purple);
	outline: none;
}

#call_for_credit .wc-sc-error {
	margin: 0.6rem 0 0;
	font-size: 0.9rem;
}

#call_for_credit.has-error .tk9-gc-chip {
	border-color: #e3b0ac;
}

/* ---------- Recipient block ---------- */

.wc-sc-gift-card-receiver-detail-container {
	margin: 0 0 1.5rem;
}

/* "Who Are You Sending This Gift Card To?" heading. */
label[for="wc-sc-gift-title"] {
	display: block;
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0 0 0.35rem;
	color: #1c1c1e;
}

.tk9-gc-summary {
	margin: 0 0 0.75rem;
	font-size: 0.88rem;
	color: var(--tk9-muted);
}

/* The card. Styled by plugin class, not by anything JS adds. */
.wc-sc-gift-accordion {
	border: 1px solid var(--tk9-border);
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
}

.wc-sc-gift-accordion + .wc-sc-gift-accordion {
	margin-top: 0.85rem;
}

.wc-sc-gift-accordion-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.15rem 0.75rem;
	background: transparent;
	border: 0;
}

.wc-sc-accordion-title {
	font-weight: 700;
	font-size: 1rem;
	color: #1c1c1e;
}

.accordion-toggle {
	color: var(--tk9-muted);
}

.wc-sc-gift-accordion-content {
	padding: 0 1.15rem 1.15rem;
}

.gift_receiver_email,
.gift_receiver_message {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--tk9-border);
	border-radius: 8px;
	font-size: 0.95rem;
	box-sizing: border-box;
}

.message_row {
	margin-top: 0.65rem;
}

.sc_message {
	position: relative;
}

.gift_receiver_message {
	min-height: 84px;
	resize: vertical;
	display: block;
}

.gift_receiver_email:focus,
.gift_receiver_message:focus {
	border-color: var(--tk9-purple);
	outline: none;
}

.tk9-gc-counter {
	display: block;
	margin-top: 0.25rem;
	text-align: right;
	font-size: 0.75rem;
	color: #9a9aa2;
}

/* ---------- Quantity ---------- */

/*
 * Hidden rather than removed via sold_individually, so nothing about the
 * product's behaviour changes. The field still submits its default of 1.
 * Delete this block to bring the quantity selector back.
 */
.postid-61384 form.cart .quantity {
	display: none;
}

/* ---------- Purchase button + trust line ---------- */

/* Button text comes from the "Store credit product CTA" Labels setting. */
.tk9-gc-form .single_add_to_cart_button {
	display: block;
	width: 100%;
	padding: 1rem 1.25rem;
	background: var(--tk9-purple);
	border: 0;
	border-radius: var(--tk9-radius);
	color: #fff;
	font-size: 1.05rem;
	font-weight: 700;
}

.tk9-gc-form .single_add_to_cart_button:hover,
.tk9-gc-form .single_add_to_cart_button:focus {
	background: var(--tk9-purple-dark);
	color: #fff;
}

.tk9-gc-trust {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	margin: 0.75rem 0 0;
	font-size: 0.82rem;
	color: var(--tk9-muted);
}

.tk9-gc-trust__icon {
	width: 15px;
	height: 15px;
	flex: 0 0 15px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3d53f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Product media + title ---------- */

.postid-61384 div.product div.images img {
	border-radius: 14px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
}

.postid-61384 .product_title {
	font-size: 2rem;
	line-height: 1.2;
	margin-bottom: 0.5rem;
}

.postid-61384 .woocommerce-product-details__short-description {
	margin-bottom: 1.5rem;
	color: var(--tk9-muted);
	line-height: 1.55;
}

/* Empty price element the plugin leaves behind on any-amount products. */
.postid-61384 .summary > p.price:empty {
	display: none;
}