/*
 * gift-card-override.css
 * PLUGIN OVERRIDE: Lo Castro brand styling for the Loyalty & Gift Cards
 * plugin. The plugin emits the .lc-giftcard-* markup (it is not in this
 * theme); it ships generic, unbranded styles by design (it's resold to
 * other clients), so all Lo Castro look-and-feel is layered on here.
 *
 * Loaded only on the gift-card page (is_page( 'gift-card' ) in
 * functions.php).
 *
 * KNOWN GAP: section 3 (checkout redemption box) is NOT loaded on the
 * checkout page, because this file is only enqueued on gift-card — those
 * rules currently have no effect. See LoCastro_Code_Refactor_Report.md.
 *
 * Divergence from the system: this file uses 4px corners
 * (border-radius: 4px) where the rest of the site is square. Kept as-is
 * pending a Figma decision.
 */

/* ------------------------------------------------------------------
   1. Layout-constraint fix (recurring WP block-theme gotcha)
   Same pattern already applied across the other custom pages —
   the gift card page is a full custom layout and shouldn't be
   squeezed into the default content width.
------------------------------------------------------------------ */
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}



/* ------------------------------------------------------------------
   2. Purchase form — [lc_gift_card] shortcode page
------------------------------------------------------------------ */

.lc-giftcard {
	background: var(--lc-bg);
	color: var(--lc-text);
	font-family: var(--lc-font-serif);
	margin: 0 auto;
	padding: 64px 32px 96px;

}

/* --- Hero header --- */

.lc-giftcard-hero {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lc-giftcard-hero-title {
	  margin: 0 0 16px;
  font-family: var(--lc-font-serif);
  font-size: 20px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  font-weight: 600;
  color: var(--lc-text);
}

/* Same as the shared .lc-intro (style.css §3) — plugin markup can't take the class. */
.lc-giftcard-hero-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--lc-text);
  opacity: 0.7;
  margin: 0;
}
.has-global-padding {
    padding-right: 0;
    padding-left: 0;
 }
/* --- Toolbar (breadcrumb-style row above the two panels) --- */

.lc-giftcard-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 16px;
	margin-bottom: 32px;
	border-bottom: 1px solid var(--lc-border-default);
	font-family: var(--lc-font-display);
	font-size: 11px;
	letter-spacing: var(--lc-track-wide);
	text-transform: uppercase;
	color: var(--lc-text);
	opacity: 0.6;
}

/* --- Two-panel shell --- */

.lc-giftcard-shell {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 32px;
	align-items: start;
}

.lc-giftcard-panel {
	background: var(--lc-surface);
	border: 1px solid var(--lc-border-default);
	border-radius: 4px;
	padding: 40px;
}

/* Inner title role — same as the product title / consulenza step title. */
.lc-giftcard-section-title {
	font-family: var(--lc-font-display);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: var(--lc-track-default);
	text-transform: uppercase;
	color: var(--lc-text);
	margin: 0 0 8px;
}

.lc-giftcard-sub {
	font-family: var(--lc-font-serif);
	font-size: 13px;
	line-height: 1.6;
	color: var(--lc-text);
	opacity: 0.7;
	margin: 0 0 32px;
}

/* --- Form fields --- */

.lc-giftcard-form {
	display: flex;
	flex-direction: column;
}

.lc-giftcard-field {
	margin-bottom: 24px;
}

.lc-giftcard-label-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--lc-font-display);
	font-size: 10px;
	letter-spacing: var(--lc-track-wide);
	text-transform: uppercase;
	color: var(--lc-text);
	opacity: 0.7;
	margin-bottom: 10px;
}

.lc-giftcard-inline-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.lc-giftcard-divider {
	height: 1px;
	background: var(--lc-border-subtle);
	margin: 32px 0;
}

/* --- Amount selector --- */

.lc-giftcard-amount-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}

.lc-giftcard-amountbtn {
	font-family: var(--lc-font-display);
	font-size: 14px;
	letter-spacing: 0.02em;
	color: var(--lc-text);
	background: var(--lc-bg);
	border: 1px solid var(--lc-border-default);
	border-radius: 4px;
	padding: 14px 8px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.lc-giftcard-amountbtn:hover {
	border-color: var(--lc-text);
}

.lc-giftcard-amountbtn.is-active {
	background: var(--lc-text);
	color: var(--lc-bg);
	border-color: var(--lc-text);
}

/* --- Inputs, textarea --- */

.lc-giftcard-input,
.lc-giftcard-textarea {
	width: 100%;
	font-family: var(--lc-font-serif);
	font-size: 13px;
	color: var(--lc-text);
	background: var(--lc-bg);
	border: 1px solid var(--lc-border-default);
	border-radius: 4px;
	padding: 12px 14px;
	box-sizing: border-box;
	transition: border-color 0.15s ease;
}

.lc-giftcard-input::placeholder,
.lc-giftcard-textarea::placeholder {
	color: var(--lc-text);
	opacity: 0.45;
}

.lc-giftcard-input:focus,
.lc-giftcard-textarea:focus {
	outline: none;
	border-color: var(--lc-text);
}

.lc-giftcard-textarea {
	min-height: 100px;
	resize: vertical;
	font-family: var(--lc-font-serif);
}

/* --- Primary CTA --- */

.lc-giftcard-primarybtn {
	width: 100%;
	margin-top: 8px;
	padding: 16px;
	font-family: var(--lc-font-display);
	font-size: 12px;
	letter-spacing: var(--lc-track-wide);
	text-transform: uppercase;
	color: var(--lc-bg);
	background: var(--lc-text);
	border: 1px solid var(--lc-text);
	border-radius: 4px;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.lc-giftcard-primarybtn:hover:not(:disabled) {
	opacity: 0.88;
}

.lc-giftcard-primarybtn:disabled {
	opacity: var(--lc-state-disabled-opacity);
	cursor: not-allowed;
}

/* --- Preview panel --- */

.lc-giftcard-preview {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.lc-giftcard-card-media {
	border-radius: 4px;
	overflow: hidden;
	border: 1px solid var(--lc-border-default);
}

.lc-giftcard-card-media img {
	display: block;
	width: 100%;
	height: auto;
}

.lc-giftcard-card-meta {
	display: flex;
	flex-direction: column;
	gap: 14px;
	font-family: var(--lc-font-serif);
	font-size: 13px;
	color: var(--lc-text);
}

.lc-giftcard-card-meta > div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--lc-border-subtle);
}

.lc-giftcard-card-meta > div:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

/* --- Mobile: stack the two panels --- */

@media (max-width: 900px) { /* System breakpoint: mobile */
	.lc-giftcard {
		padding: 40px 20px 64px;
	}

	/* Was 1.9rem (~30px) here — BIGGER than the 20px desktop size right
	   above, i.e. backwards: the title rendered larger on the small
	   screen than on desktop. Scaled down instead, matching the pattern
	   every other hero/section title on the site follows (shrink on
	   mobile, never grow). */
	.lc-giftcard-hero-title {
		font-size: 17px;
	}

	.lc-giftcard-shell {
		grid-template-columns: 1fr;
	}

	.lc-giftcard-panel {
		padding: 28px;
	}

	.lc-giftcard-inline-row {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.lc-giftcard-amount-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ------------------------------------------------------------------
   3. Checkout redemption box
   These classes only render on the checkout page (both classic and
   WooCommerce Blocks checkout), so this section is safe to include
   in the same file without an extra page condition.
------------------------------------------------------------------ */

.lc-giftcard-redeem-box {
	font-family: var(--lc-font-serif);
	background: var(--lc-surface);
	border: 1px solid var(--lc-border-default);
	border-radius: 4px;
	padding: 20px;
	margin: 0 0 20px;
}

.lc-giftcard-redeem-label {
	font-family: var(--lc-font-display);
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	color: var(--lc-text);
	margin: 0 0 12px;
	font-weight: 600;
}

.lc-giftcard-redeem-input {
	font-family: var(--lc-font-serif);
	color: var(--lc-text);
	background: var(--lc-bg);
	border: 1px solid var(--lc-border-default);
	border-radius: 4px;
	padding: 10px 12px;
}

.lc-giftcard-redeem-input::placeholder {
	color: var(--lc-text);
	opacity: 0.45;
}

.lc-giftcard-redeem-input:focus {
	outline: none;
	border-color: var(--lc-text);
}

.lc-giftcard-redeem-button {
	font-family: var(--lc-font-display);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lc-bg);
	background: var(--lc-text);
	border: 1px solid var(--lc-text);
	border-radius: 4px;
	padding: 10px 20px;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.lc-giftcard-redeem-button:hover {
	opacity: 0.88;
}

.lc-giftcard-redeem-applied {
	font-family: var(--lc-font-serif);
	color: var(--lc-text);
}

.lc-giftcard-redeem-remove {
	font-family: var(--lc-font-display);
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--lc-text);
	background: transparent;
	border: 1px solid var(--lc-border-default);
	border-radius: 4px;
	padding: 6px 14px;
	cursor: pointer;
}

.lc-giftcard-redeem-remove:hover {
	border-color: var(--lc-text);
}

.lc-giftcard-redeem-message {
	font-family: var(--lc-font-serif);
	font-size: 0.85rem;
}