/* ==================================================================
   Gift card page /dovanu-kortele/ – the old shop's `giftVoucher` block, 1:1
   ------------------------------------------------------------------
   Page content (familia-content): core/media-text `.familia-giftcard` =
   photo | heading + [familia_gift_card_form] + the two description lines.
   Form markup: familia-promotions FP_Giftcard_Form; behaviour:
   assets/js/familia-giftcard.js. Legacy classes (client.bundle.js) quoted
   per rule; breakpoints sm 768 / md 1024 / lg 1280 as in the old bundle.
   Measured on shop.familia.lt at 1440 / 1024 / 768 / 375 (2026-09-23).
   Enqueued only on pages carrying the shortcode (inc/setup.php).
   ================================================================== */

/* ---- block: `bg-default-100 md:bg-default-50` › `mx-auto md:flex md:justify-between md:pb-20 md:items-start` */
body.familia.page .entry-content > .wp-block-media-text.familia-giftcard {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--f-max-flow);   /* familia.lt's page container (client 2026-10-11; was the old shop's 1440px) – a purchase form: it keeps it on wide screens too, as the cart and checkout (client 2026-10-12, familia.css §04) */
	margin: 0 auto;
	padding: 0;
	gap: 0;
	background: var(--f-default-100);
	color: var(--f-ink);
	font-family: var(--f-text);
	font-size: 14px;
	line-height: 20px;
}
@media (min-width: 1024px) {
	body.familia.page .entry-content > .wp-block-media-text.familia-giftcard {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		padding-bottom: 80px;
		background: var(--f-default-50);
	}
}

/* ---- photo: `w-full sm:w-1/2 flex justify-center sm:justify-end sm:mt-28 pb-8 sm:pb-4 bg-default-50
        rounded-br-[100px] overflow-hidden md:overflow-visible`; img 540×370 box, the file is 299×213 */
body.familia.page .entry-content .familia-giftcard > .wp-block-media-text__media {
	order: 0;
	align-self: flex-start;   /* core media-text centres both columns */
	display: flex;
	align-items: flex-start;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0 0 32px;
	overflow: hidden;
	border-radius: 0 0 100px 0;
	background: var(--f-default-50);
}
body.familia.page .entry-content .familia-giftcard > .wp-block-media-text__media img {
	display: block;
	width: 299px;
	max-width: 100%;
	height: auto;
	margin: 0;
	border-radius: 0;
	vertical-align: middle;
}
/* legacy srcset `sizes="(max-width: 425px) 340px, 540px"`: on a phone (2×/3×) the 540w file lands in a
   340px slot and draws at 299 × 340 / 540 = 188px */
@media (max-width: 425px) {
	body.familia.page .entry-content .familia-giftcard > .wp-block-media-text__media img { width: 188px; }
}
@media (min-width: 768px) {
	body.familia.page .entry-content .familia-giftcard > .wp-block-media-text__media {
		justify-content: flex-end;
		width: 50%;
		margin-top: 112px;
		padding-bottom: 16px;
	}
}
@media (min-width: 1024px) {
	body.familia.page .entry-content .familia-giftcard > .wp-block-media-text__media { flex: none; overflow: visible; }
}

/* ---- right column: `max-w-[1440px] px-4 md:px-[90px] w-full sm:w-1/2 mx-auto space-y-8 mt-7 sm:mt-0`
        (+ the button section's `max-sm:pb-28`, the last thing in the column) */
body.familia.page .entry-content .familia-giftcard > .wp-block-media-text__content {
	align-self: flex-start;
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--f-max-flow);
	margin: 28px auto 0;
	padding: 0 var(--f-gut) 112px;   /* familia.lt's 20px sides on phones (was 16px) */
}
@media (min-width: 768px) {
	body.familia.page .entry-content .familia-giftcard > .wp-block-media-text__content { width: 50%; margin-top: 0; padding-bottom: 0; }
}
@media (min-width: 1024px) {
	body.familia.page .entry-content .familia-giftcard > .wp-block-media-text__content { flex: none; margin: 0; padding-inline: 90px var(--f-gut); }   /* the form ends on the page's rail */
}

/* heading: `.semantic-html.no-bottom-spacing` h2 32→44px 600 lh 1.375, no margin */
body.familia.page .entry-content .familia-giftcard > .wp-block-media-text__content > h2 {
	margin: 0;
	font-size: 32px;
	font-weight: 400;
	line-height: 1.375;
	color: var(--f-ink);
}
@media (min-width: 1024px) {
	body.familia.page .entry-content .familia-giftcard > .wp-block-media-text__content > h2 { font-size: 44px; }
}

/* description under the button: `.semantic-html mt-4` › `.description-text` 14px light lh 1.375 */
body.familia.page .entry-content .familia-giftcard > .wp-block-media-text__content > p {
	margin: 0;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.375;
	color: var(--f-ink);
}
body.familia.page .entry-content .familia-giftcard > .wp-block-media-text__content > .familia-giftcard__form + p { margin-top: 16px; }
body.familia.page .entry-content .familia-giftcard > .wp-block-media-text__content > p strong { font-weight: 700; }
body.familia.page .entry-content .familia-giftcard > .wp-block-media-text__content > p a { color: inherit; font-weight: inherit; text-decoration: none; }
body.familia.page .entry-content .familia-giftcard > .wp-block-media-text__content > p a:hover { text-decoration: underline; }

/* ---- the form: `w-full flex flex-col justify-center space-y-10 text-lg` */
body.familia.page .entry-content .familia-giftcard .familia-giftcard__form { margin: 32px 0 0; }
body.familia.page .entry-content .familia-giftcard .familia-gc {
	margin: 0;
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	color: var(--f-ink);
}
body.familia.page .entry-content .familia-giftcard .familia-gc__step,
body.familia.page .entry-content .familia-giftcard .familia-gc__submit { margin-top: 40px; }
body.familia.page .entry-content .familia-giftcard .familia-gc__step:first-of-type { margin-top: 0; }
body.familia.page .entry-content .familia-giftcard .familia-gc__q {
	margin: 0;
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	color: var(--f-ink);
}

/* tiles: grid `gap-4 mt-5`, type `grid-cols-1 sm:grid-cols-2`, sums `grid-cols-4 sm:grid-cols-5`;
   tile `flex justify-center items-center text-center py-3 px-4 border-2 rounded-sm cursor-pointer select-none`,
   border default-300 / chosen black / red after a send without an amount */
body.familia.page .entry-content .familia-giftcard .familia-gc__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	margin-top: 20px;
}
body.familia.page .entry-content .familia-giftcard .familia-gc__grid--sum { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 768px) {
	body.familia.page .entry-content .familia-giftcard .familia-gc__grid--type { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.familia.page .entry-content .familia-giftcard .familia-gc__grid--sum { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
body.familia.page .entry-content .familia-giftcard .familia-gc__tile {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	margin: 0;
	padding: 12px 16px;
	border: 2px solid var(--f-default-300);
	border-radius: var(--f-r-xs);
	background: transparent;
	color: var(--f-ink);
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	text-align: center;
	text-transform: none;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}
body.familia.page .entry-content .familia-giftcard .familia-gc__tile--sum { white-space: nowrap; }
body.familia.page .entry-content .familia-giftcard .familia-gc__tile.is-selected { border-color: #000; }
body.familia.page .entry-content .familia-giftcard .familia-gc__tile.has-error { border-color: var(--f-red); }
body.familia.page .entry-content .familia-giftcard .familia-gc__radio {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
/* keyboard focus only (the old tiles were not focusable at all) */
body.familia.page .entry-content .familia-giftcard .familia-gc__tile:has(.familia-gc__radio:focus-visible) { outline: 2px solid var(--f-ink); outline-offset: 2px; }
body.familia.page .entry-content .familia-giftcard .familia-gc__box:has(.familia-gc__checkbox:focus-visible) { outline: 2px solid transparent; box-shadow: var(--f-field-ring); }

/* greeting: `flex flex-col mt-5`; checkbox row `mb-5 flex justify-start items-start cursor-pointer`,
   box `border-2 w-6 h-6 mr-4 rounded-[1px]` ink when ticked / default-300, tick `w-3.5`,
   text `mt-0.5 text-sm sm:text-base font-normal` */
body.familia.page .entry-content .familia-giftcard .familia-gc__greeting { display: flex; flex-direction: column; margin-top: 20px; }
/* "Neįtraukti asmeninio sveikinimo teksto" ticked: recipient, greeting and sender are not shown at all (staff 2026-10-05,
   the old shop only made them read-only); cleared, they appear to be filled in. :has() covers the first paint, the
   page script sets `hidden` too (older browsers). */
body.familia.page .entry-content .familia-giftcard .familia-gc__greeting:has(.familia-gc__checkbox:checked) .familia-gc__field,
body.familia.page .entry-content .familia-giftcard .familia-gc__greeting .familia-gc__field[hidden] { display: none; }
body.familia.page .entry-content .familia-giftcard .familia-gc__email { margin-top: 28px; }
body.familia.page .entry-content .familia-giftcard .familia-gc__check {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	margin: 0 0 20px;
	padding: 0;
	cursor: pointer;
	font-size: 18px;
	line-height: 28px;
}
/* the box: the shared check box (client 2026-10-12, "5. Form fields": 22px, the fields' rim, 4px corners, sky when
   ticked; was 24px with a 2px #e8eaed rim, 1.2:1) */
body.familia.page .entry-content .familia-giftcard .familia-gc__box {
	position: relative;
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--f-check-size);
	height: var(--f-check-size);
	margin: 0 16px 0 0;
	border: var(--f-field-rim) solid var(--f-field-border);
	border-radius: var(--f-check-radius);
	background: var(--f-field-bg);
	color: var(--f-ink);
}
body.familia.page .entry-content .familia-giftcard .familia-gc__check.is-checked .familia-gc__box { border-color: var(--f-check-on); background: var(--f-check-on); }
body.familia.page .entry-content .familia-giftcard .familia-gc__check:hover .familia-gc__box { border-color: var(--f-field-border-hover); }
body.familia.page .entry-content .familia-giftcard .familia-gc__checkbox {
	position: absolute;
	top: -1px;
	left: -1px;
	width: var(--f-check-size);
	height: var(--f-check-size);
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
body.familia.page .entry-content .familia-giftcard .familia-gc__tick { display: none; width: 14px; height: 14px; pointer-events: none; }
body.familia.page .entry-content .familia-giftcard .familia-gc__check.is-checked .familia-gc__tick { display: block; }
/* the check box's sentence: the shared 14px at every width (client 2026-10-12, "5. Form fields"; was 16px from 768) */
body.familia.page .entry-content .familia-giftcard .familia-gc__check-text {
	margin-top: 1px;
	font-size: var(--f-check-label);
	font-weight: 400;
	line-height: 20px;
	color: var(--f-ink);
}

/* fields: `relative w-full` › `flex flex-col`; label `mb-2 font-bold uppercase text-sm`;
   input `rounded-sm text-lg w-auto mb-4 h-12 p-4 placeholder:text-default-600 bg-transparent border-2
   focus:border-default-500 border-default-300`, `border-error` and no margin on error;
   textarea rows 4, `mb-2.5 lg:mb-4`, `max-sm:bg-default-100`;
   message `flex items-center mt-2 mb-2.5 lg:mb-4` › `text-error text-xs` */
body.familia.page .entry-content .familia-giftcard .familia-gc__field { position: relative; display: flex; flex-direction: column; width: 100%; }
/* the shared field (client 2026-10-12, "5. Form fields": familia.css §02 --f-field-*) – 55px, 1px #8c8178 rim, 8px
   corners, white, 16px; the name above it 14px regular. Was the old shop's 48px, 2px #e8eaed (1.2:1), 2px corners,
   transparent, 18px, a 500 label and no focus mark */
body.familia.page .entry-content .familia-giftcard .familia-gc__label {
	display: block;
	margin: 0 0 var(--f-field-label-gap);
	padding: 0;
	color: var(--f-field-label-ink);
	font-size: var(--f-field-label);
	font-weight: 400;
	line-height: 20px;
	text-transform: none;
	letter-spacing: normal;
}
body.familia.page .entry-content .familia-giftcard .familia-gc__input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: var(--f-field-h);
	min-height: 0;
	margin: 0 0 16px;
	padding: 0 var(--f-field-pad);
	border: var(--f-field-rim) solid var(--f-field-border);
	border-radius: var(--f-field-radius);
	outline: none;
	background: var(--f-field-bg);
	box-shadow: none;
	color: var(--f-field-ink);
	font-family: var(--f-text);
	font-size: var(--f-field-size);
	font-weight: 400;
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .15s cubic-bezier(.4, 0, .2, 1);
}
body.familia.page .entry-content .familia-giftcard .familia-gc__input--area {
	height: auto;
	min-height: var(--f-field-area-h);
	margin-bottom: 10px;
	padding: 12px var(--f-field-pad);
	resize: vertical;
}
@media (min-width: 1280px) {
	body.familia.page .entry-content .familia-giftcard .familia-gc__input--area { margin-bottom: 16px; }
}
body.familia.page .entry-content .familia-giftcard .familia-gc__input::placeholder { color: var(--f-field-placeholder); opacity: 1; }
body.familia.page .entry-content .familia-giftcard .familia-gc__input:hover { border-color: var(--f-field-border-hover); }
body.familia.page .entry-content .familia-giftcard .familia-gc__input:focus { border-color: var(--f-field-focus); outline: 2px solid transparent; box-shadow: var(--f-field-ring); }
body.familia.page .entry-content .familia-giftcard .familia-gc__input.has-error { margin-bottom: 0; border-color: var(--f-field-error); box-shadow: var(--f-field-error-rim); }
body.familia.page .entry-content .familia-giftcard .familia-gc__input.has-error:focus { box-shadow: var(--f-field-error-ring); }
body.familia.page .entry-content .familia-giftcard .familia-gc__error {
	display: flex;
	align-items: center;
	margin: 6px 0 10px;
	color: var(--f-field-error);
	font-size: var(--f-field-msg);
	line-height: 1.4;
}
body.familia.page .entry-content .familia-giftcard .familia-gc__error[hidden] { display: none; }
@media (min-width: 1280px) {
	body.familia.page .entry-content .familia-giftcard .familia-gc__error { margin-bottom: 16px; }
}

/* button: grid `grid-cols-1 sm:grid-cols-2 sm:gap-4 -mt-5`; button (primary, md, hasShadow, uppercase,
   fullWidth) `rounded-sm md:w-full mt-0 sm:mt-7 min-w-fit h-12 border-2 font-bold text-base shadow-sm`,
   inner `flex items-center md:ml-2`, sum `pl-2 font-extrabold`; error `text-xs text-error mt-2 lg:mt-0` */
body.familia.page .entry-content .familia-giftcard .familia-gc__actions {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin-top: -20px;
}
@media (min-width: 768px) {
	body.familia.page .entry-content .familia-giftcard .familia-gc__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
body.familia.page .entry-content .familia-giftcard .familia-gc__button {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-width: fit-content;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 2px solid var(--f-sky);
	border-radius: var(--f-r-xs);
	background: var(--f-sky);
	box-shadow: 0 10px 30px 4px rgba(0, 0, 0, .15);
	color: var(--f-ink);
	font-family: var(--f-text);
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition: color .15s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), border-color .15s cubic-bezier(.4, 0, .2, 1), box-shadow .15s cubic-bezier(.4, 0, .2, 1);
}
@media (min-width: 768px) {
	body.familia.page .entry-content .familia-giftcard .familia-gc__button { margin-top: 28px; }
}
body.familia.page .entry-content .familia-giftcard .familia-gc__button:hover { border-color: var(--f-sky-deep); background: var(--f-sky-deep); color: var(--f-ink); }
body.familia.page .entry-content .familia-giftcard .familia-gc__button:active { border-color: var(--f-ink); background: var(--f-ink); }
body.familia.page .entry-content .familia-giftcard .familia-gc__button:focus { outline: none; }
body.familia.page .entry-content .familia-giftcard .familia-gc__button:focus-visible { outline: 2px solid var(--f-ink); outline-offset: 2px; }
body.familia.page .entry-content .familia-giftcard .familia-gc__button[aria-busy="true"] { cursor: progress; }
body.familia.page .entry-content .familia-giftcard .familia-gc__button-in { display: flex; align-items: center; }
@media (min-width: 1024px) {
	body.familia.page .entry-content .familia-giftcard .familia-gc__button-in { margin-left: 8px; }
}
body.familia.page .entry-content .familia-giftcard .familia-gc__button-label { display: flex; font-size: 16px; font-weight: 500; }
body.familia.page .entry-content .familia-giftcard .familia-gc__button-price { padding-left: 8px; font-size: 16px; font-weight: 500; }
body.familia.page .entry-content .familia-giftcard .familia-gc__button-price[hidden] { display: none; }
body.familia.page .entry-content .familia-giftcard .familia-gc__form-error {
	margin-top: 8px;
	color: var(--f-red);
	font-size: 12px;
	line-height: 16px;
}
body.familia.page .entry-content .familia-giftcard .familia-gc__form-error[hidden] { display: none; }
@media (min-width: 1280px) {
	body.familia.page .entry-content .familia-giftcard .familia-gc__form-error { margin-top: 0; }
}