/*
 * The gift voucher page (WPS-041).
 *
 * Loaded only where it is used (plan section 1.1, engineering standards
 * section 7), after components.css - it may build on both it and tokens.css
 * and declares no colour of its own.
 *
 * WHAT THIS FILE DOES NOT DRAW, because page-dovanu-kuponai.php does not ship
 * it - the page template's own docblock has the full reasoning:
 *
 *   - The seasonal promotion bar and block. They exist since WPS-083, but they
 *     are drawn on more than one page, so their CSS is in components.css - the
 *     theme loads exactly one page stylesheet, and a component that appears
 *     twice has no page to live in.
 *   - The "Dianos dovanos" cross-sell banner (WPS-095, still an open decision
 *     - the same call WPS-012 and WPS-020 already made for the same link).
 *   - JetBrains Mono anywhere. AS-137 is open at the design-system level; the
 *     one element that used it (the coupon's code line) is bold Alegreya Sans
 *     with wide tracking instead, the same substitution other built pages
 *     already made rather than invent a second one.
 */

/* ---------------------------------------------------------------------------
 * Section rhythm - identical to the other built pages: no space above, a
 * generous gap below, and the shared 1100 px container.
 */

.dk-section {
	padding-block: 0 clamp( 32px, 5vw, 56px );
}

.dk-section--tight {
	padding-block: 0 clamp( 20px, 3vw, 32px );
}

/*
 * The narrow inner column three sections share (picks, "how it works", terms
 * all read at 860px even though the section itself is the full 1100px
 * container) - a shared class rather than the same three declarations
 * repeated as inline styles at each call site.
 */
.dk-narrow {
	max-width: 860px;
	margin: 0 auto;
}

.dk-narrow--head {
	margin-bottom: clamp( 14px, 2vw, 20px );
}

.dk-caption {
	margin: 12px auto 0;
	text-align: center;
}

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

.dk-hero {
	padding-block: clamp( 28px, 5vw, 60px ) clamp( 24px, 3.5vw, 40px );
}

.dk-hero__grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 320px ), 1fr ) );
	align-items: center;
	gap: clamp( 24px, 4vw, 56px );
}

.dk-hero__copy {
	display: flex;
	flex-direction: column;
	gap: var( --space-4 );
}

.dk-hero__title {
	max-width: 560px;
}

.dk-hero__lead {
	max-width: 520px;
	color: var( --text-body );
}

.dk-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var( --space-3 );
}

.dk-badge {
	display: inline-flex;
	align-items: center;
	gap: var( --space-2 );
	padding: 7px var( --space-4 );
	background: var( --tint-paper-icon );
	border-radius: var( --radius-pill );
	color: var( --color-amber-ink );
	font-size: var( --fs-eyebrow );
	font-weight: var( --fw-bold );
}

.dk-badge .material-symbols-outlined {
	font-size: 15px;
}

/* ---------------------------------------------------------------------------
 * The coupon card - the printed/PDF face of the voucher, variant 11
 * "Klasika" (chosen 2026-08-18). The ribbon is one filled path folded over
 * the corner plus a bow drawn as an equal-width stroke with round caps, so
 * the loop's hole is a real hole rather than a second white line pretending
 * to separate ribbon from card.
 */

.dk-card {
	position: relative;
	width: 100%;
	max-width: 520px;
	background: var( --surface-card );
	border: 1px solid var( --border-hairline );
	border-radius: var( --radius-md );
	box-shadow: var( --shadow-floating );
	overflow: hidden;
}

.dk-card__bow {
	position: absolute;
	top: 0;
	right: 0;
	width: clamp( 88px, 26%, 134px );
	height: auto;
	pointer-events: none;
}

.dk-card__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: clamp( 20px, 3vw, 28px ) clamp( 18px, 3vw, 30px ) 0;
}

/*
 * The logo lockup's font-size IS the unit the rest of the set scales from
 * (mockup's own comment: mark 3.067em, name 1.233em, gap 0.6em - the same
 * 46/18.5/15/9 px ratio the site header uses), so the proportions hold at
 * every width without a breakpoint of their own.
 */
.dk-card__logotype {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: clamp( 9.5px, 2.1vw, 13.5px );
}

.dk-card__mark {
	position: absolute;
	top: 50%;
	right: calc( 100% + 0.6em );
	transform: translateY( -50% );
	width: 3.067em;
	height: 3.067em;
}

.dk-card__name {
	font-size: 1.233em;
	font-weight: var( --fw-black );
	line-height: 1.05;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.dk-card__name span:first-child {
	color: var( --text-link );
}

.dk-card__name span:last-child {
	color: var( --color-brand-red );
}

.dk-card__sub {
	margin-top: 0.067em;
	font-family: var( --font-accent );
	font-weight: 600;
	font-size: 1em;
	line-height: 1.15;
	color: var( --text-body );
	white-space: nowrap;
}

.dk-card__title {
	margin-top: clamp( 10px, 1.8vw, 16px );
	font-size: clamp( 28px, 6vw, 46px );
	font-weight: var( --fw-black );
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-align: center;
}

.dk-card__tagline {
	margin-top: 4px;
	font-size: clamp( 11.5px, 1.6vw, 13.5px );
	color: var( --text-meta );
	text-align: center;
}

.dk-card__recipient {
	display: flex;
	align-items: baseline;
	gap: var( --space-3 );
	padding: clamp( 16px, 2.6vw, 22px ) clamp( 20px, 4vw, 42px ) 0;
	font-size: clamp( 13px, 1.9vw, 16px );
	font-weight: var( --fw-black );
}

.dk-card__recipient-line {
	flex: 1;
	height: 16px;
	border-bottom: 2px dotted var( --tint-line-strong );
}

.dk-card__contacts {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: clamp( 14px, 2.4vw, 20px ) clamp( 16px, 3vw, 30px ) clamp( 10px, 1.8vw, 14px );
}

.dk-card__contact-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 3px 8px;
	font-size: clamp( 11px, 1.7vw, 12.5px );
	color: var( --text-body );
}

/*
 * padding-block/margin-block cancel each other visually but not for hit
 * testing (qa-measure I8.2): at this card's smallest type size the text line
 * alone measures under 18px tall, so the tap target needs 44px added without
 * the phone number itself growing - the same expand-then-cancel technique the
 * mockup's own footer links already use for the same reason.
 */
.dk-card__contact-row a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-block: 14px;
	margin-block: -14px;
	color: inherit;
	text-decoration: none;
}

.dk-card__contact-row .material-symbols-outlined {
	font-size: 15px;
	color: var( --text-meta );
}

.dk-card__site {
	font-size: clamp( 11.5px, 1.7vw, 13px );
	font-weight: var( --fw-bold );
	color: var( --text-meta );
	letter-spacing: 0.01em;
}

.dk-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px 12px;
	padding: var( --space-3 ) clamp( 16px, 3vw, 30px );
	background: var( --surface-page );
	border-top: 1px solid var( --border-hairline );
}

/*
 * Substitutes for the mockup's JetBrains Mono code line (AS-137, open at the
 * design-system level - see this file's own top comment). Bold Alegreya Sans
 * with the widest tracking the canon allows reads as "a code", the same
 * effect the mockup wanted, without loading a second typeface.
 */
.dk-card__code {
	font-weight: var( --fw-bold );
	font-size: 10.5px;
	letter-spacing: 0.1em;
	color: var( --text-meta );
}

.dk-card__valid {
	font-size: 10.5px;
	color: var( --text-meta );
}

/* ---------------------------------------------------------------------------
 * Two ways to gift - twin cards, identical structure, no colour stripe
 * telling them apart (the words already do that).
 */

.dk-picks {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 300px ), 1fr ) );
	gap: clamp( 14px, 2vw, 20px );
}

.dk-pick {
	display: flex;
	flex-direction: column;
	gap: var( --space-3 );
	padding: clamp( 20px, 2.6vw, 28px );
	background: var( --surface-card );
	border-radius: var( --radius-xl );
	box-shadow: var( --shadow-card );
}

.dk-pick__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: var( --tint-paper-icon );
	border-radius: var( --radius-pill );
	color: var( --color-amber-ink );
}

.dk-pick__title {
	margin: 0;
	font-size: 18.5px;
}

/*
 * The free-amount card wraps its lower half in a <form>, and `display:
 * contents` is what keeps that wrapper from becoming a layout boundary: the
 * chips, the price row and the button stay direct flex children of the card,
 * so the card's one gap applies to every seam in both cards equally.
 *
 * Before WPS-059 the form was a plain block. The card's 12px gap stopped at
 * its edge, so inside it the chips, the price and the button touched - the
 * "30 € too close to the button" finding - while the other card kept its 12px.
 * The two cards' rhythms differed by exactly that gap.
 *
 * The form is never the accessible name of anything here (no aria-label, no
 * heading), so removing its box removes no semantics; it still submits.
 */
.dk-pick form {
	display: contents;
}

.dk-pick__text {
	margin: 0;
	font-size: var( --fs-caption );
	line-height: var( --lh-relaxed );
	color: var( --text-meta );
}

/*
 * The price and the button are pinned to the bottom of whichever card they are
 * in, so the two buttons line up no matter how much copy sits above them.
 *
 * They used to line up only by arithmetic accident: the fixed card's paragraph
 * ran one line longer than the free-amount card's, and that line happened to
 * be worth the same 44px as the chip row the other card carries. Measured on
 * dev, both buttons landed on the same pixel - and would have stopped doing so
 * the first time either paragraph was reworded. `margin-top: auto` says the
 * thing the arithmetic was only implying.
 */
.dk-pick__price-row {
	display: flex;
	align-items: baseline;
	gap: var( --space-2 );
	flex-wrap: wrap;
	margin-top: auto;
	padding-top: var( --space-3 );
	border-top: 1px solid var( --border-hairline );
}

.dk-pick__price {
	font-size: var( --fs-price );
	font-weight: var( --fw-black );
	color: var( --text-heading );
	line-height: 1;
}

/*
 * The struck base price beside a promotion price (WPS-085): the mockup's
 * 17 px / 600 in meta grey, on both cards. On the fixed card it is part of
 * the .price-pair inside the price span; on the free-amount card it is its
 * own element in the price row, which main.js adds and removes as the chip
 * changes - removed, never emptied, because the row's gap would still apply
 * to an empty element and push the price sideways.
 *
 * The promotion price itself keeps the heading ink rather than the mockup's
 * season accent: on the christmas palette that accent is a peach that
 * measures 1.54:1 on the white card, and a price nobody can read is not a
 * price.
 */
.dk-pick__price .price-pair__was,
.dk-pick__was {
	color: var( --text-meta );
	font-size: 17px;
	font-weight: 600;
	text-decoration: line-through;
}

.dk-pick__price-unit {
	font-size: var( --fs-caption );
	color: var( --text-meta );
}

/*
 * The "Laisva suma" amount picker. Four native radios, the input wrapped
 * inside its own label and hidden with the standard clip technique, styled
 * as chips rather than the mockup's onClick divs (AS-76-class dead
 * interactivity has no place here): a real radio group works identically
 * with JavaScript on, off, or half-loaded (sypsena-wploop section 3), where a
 * div with an onClick handler would leave every chip a dead control on the
 * no-JS pass. :has() rather than a sibling selector because the input is a
 * CHILD of the label it styles, not a sibling of it - suzinok.css already
 * relies on the same selector, so this is not a new browser-support floor.
 */
/*
 * No `flex: 1` here any more. It was the free-amount card's way of pushing its
 * own price row down to meet the other card's, back when the form swallowed
 * the gaps; `.dk-pick__price-row`'s `margin-top: auto` now does that for both
 * cards from one declaration, and a growing chip row would only fight it.
 */
.dk-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var( --space-2 );
	align-content: flex-start;
}

.dk-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: var( --space-2 ) var( --space-4 );
	background: var( --surface-soft );
	border-radius: var( --radius-pill );
	color: var( --text-body );
	font-size: var( --fs-caption );
	font-weight: var( --fw-bold );
	cursor: pointer;
}

.dk-chip input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.dk-chip:has( input:checked ) {
	background: var( --action-primary );
	color: var( --color-surface );
}

.dk-chip:has( input:focus-visible ) {
	outline: 3px solid var( --focus-ring );
	outline-offset: 2px;
}

.dk-pick__cta {
	width: 100%;
}

/* ---------------------------------------------------------------------------
 * How it works - four cards, no decorative numerals.
 */

.dk-steps {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 190px ), 1fr ) );
	gap: clamp( 12px, 2vw, 16px );
}

.dk-step {
	display: flex;
	flex-direction: column;
	gap: var( --space-3 );
	padding: 22px;
	background: var( --surface-card );
	border-radius: var( --radius-lg );
	box-shadow: var( --shadow-hairline );
}

.dk-step__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: var( --tint-paper-icon );
	border-radius: var( --radius-pill );
	color: var( --color-amber-ink );
}

.dk-step__title {
	margin: 0;
	font-size: 16px;
}

.dk-step__text {
	margin: 0;
	font-size: 13.5px;
	line-height: var( --lh-relaxed );
	color: var( --text-meta );
}

/* ---------------------------------------------------------------------------
 * Live A notice - the launch-specific promise the Apimtis calls for clearly
 * visible, not folded into the three-item terms grid below it. Amber, the
 * tone tokens.css already reserves for "worth reading, not an error"
 * (--tint-amber's own comment), and the wording is the 2026-08-19 decision's
 * own (docs/sprendimu-zurnalas.md), not the mockup's plain "valid from the
 * purchase date" - that line is inaccurate for as long as the coupons sell
 * before the practice itself restarts.
 */

.dk-livea {
	display: flex;
	align-items: flex-start;
	gap: var( --space-3 );
	max-width: 860px;
	margin: 0 auto clamp( 14px, 2vw, 20px );
	padding: clamp( 16px, 2.4vw, 20px );
	background: var( --tint-amber );
	border-radius: var( --radius-lg );
}

.dk-livea .material-symbols-outlined {
	flex-shrink: 0;
	color: var( --color-amber-ink );
}

.dk-livea__text {
	font-size: var( --fs-caption );
	line-height: var( --lh-relaxed );
	color: var( --text-body );
}

.dk-terms {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --space-4 ) clamp( 18px, 3vw, 32px );
	max-width: 860px;
	margin: 0 auto;
	padding: clamp( 20px, 2.8vw, 28px );
	background: var( --surface-card );
	/* Snapped from the mockup's 18px minimum to 20px - the nearest value inside
	 * the card band (20-28px), the same mapping earlier pages already used for
	 * an out-of-band mockup radius (qa-tokens T4). */
	border-radius: clamp( 20px, 2.2vw, 24px );
	box-shadow: var( --shadow-hairline );
}

/* Mobile-first: one column below, three from 921px up - the same breakpoint
 * every other page stylesheet in this theme uses (config/review-rules.md
 * rule 7 asks for min-width, not a max-width override of a wide default). */
@media ( min-width: 921px ) {
	.dk-terms {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

.dk-term {
	display: flex;
	align-items: flex-start;
	gap: 11px;
}

.dk-term .material-symbols-outlined {
	flex-shrink: 0;
	color: var( --text-link );
}

.dk-term__text {
	font-size: var( --fs-caption );
	line-height: var( --lh-relaxed );
	color: var( --text-body );
}