/*
 * This plugin's own blocks on WooCommerce's pages.
 *
 * Three wrappers, one set of tokens, and they are here together because they
 * appear together: the gift fields sit on the checkout, and the two panels sit
 * on the order-received page the buyer lands on a second later. Styling one and
 * not the others is what made the receipt read like a different product from
 * the form that produced it.
 *
 *   .smartg-gift-fields   the gift fields on a classic or Divi checkout
 *   .smartg-gift-receipt  what the buyer of a gift is told afterwards
 *   .smartg-wc-panel      the "your guide is ready" panel on an ordinary order
 *
 * SCOPED TO THOSE THREE AND NOTHING ELSE. This loads on pages that belong to
 * somebody else's theme — Divi, on the site this was written for — and every
 * rule is inside one of those wrappers. There is no element selector, no
 * :root, and nothing that can reach a thing it was not aimed at.
 *
 * THE SELECTORS ARE DELIBERATELY SPECIFIC. Divi styles checkout labels, inputs
 * and headings through several layers of its own, and a single-class rule loses
 * to them. Each rule carries enough specificity to win without !important,
 * which keeps the site's own customiser able to override it afterwards.
 *
 * The sizes are in pt because that is how they were specified. 24pt is 32px and
 * 1pt is about 1.33px; both are written as given rather than converted, so that
 * the numbers here match the numbers anybody asks for.
 */

/*
 * ONE TOKEN BLOCK FOR ALL THREE, declared on the wrappers rather than on :root
 * so that nothing is defined outside them. A panel that drifted to a different
 * blue from the field above it is the exact failure this file exists to fix, and
 * a shared custom property is what makes that a one-line change rather than a
 * search.
 */
.smartg-gift-fields,
.smartg-gift-receipt,
.smartg-wc-panel {
	--smartg-gift-ink: #004aad;
	--smartg-gift-rule: 1pt;
	--smartg-gift-label: 24pt;
	--smartg-gift-display: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
}

.smartg-gift-fields {
	margin: 1.5em 0;
}

/*
 * The label font. Bebas Neue is a display face with no lowercase of its own, so
 * it is left to render the label as the face intends rather than being forced
 * with text-transform. The fallbacks are condensed sans faces, so a browser that
 * never gets the webfont still lays the row out at roughly the right width.
 */
.smartg-gift-fields label,
.smartg-gift-fields .form-row label {
	display: block;
	margin-bottom: 0.35em;
	color: var(--smartg-gift-ink);
	font-family: var(--smartg-gift-display);
	font-size: var(--smartg-gift-label);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0.01em;
}

/*
 * The checkbox row is a label wrapping an input, so the label rule above would
 * put the box on its own line above the words. Kept inline, and the words are
 * carried by the span the markup puts them in.
 */
.smartg-gift-fields .smartg-gift-toggle label {
	display: flex;
	align-items: center;
	gap: 0.4em;
	margin-bottom: 0;
}

.smartg-gift-fields .smartg-gift-toggle input[type="checkbox"] {
	flex: 0 0 auto;
	width: auto;
	margin: 0;
}

/* The required mark inherits the label rather than being separately styled. */
.smartg-gift-fields label .required,
.smartg-gift-fields label abbr.required {
	color: inherit;
	border: 0;
	text-decoration: none;
}

.smartg-gift-fields .form-row {
	margin: 0 0 1.1em;
	padding: 0;
}

.smartg-gift-fields .smartg-gift-recipient {
	margin-top: 1em;
}

/*
 * The inputs. The border is the rule the labels are set in, so the group reads
 * as one block rather than as a field that happens to sit under a heading.
 */
.smartg-gift-fields input[type="text"],
.smartg-gift-fields input[type="email"],
.smartg-gift-fields .form-row input.input-text {
	width: 100%;
	box-sizing: border-box;
	padding: 0.6em 0.75em;
	border: var(--smartg-gift-rule) solid var(--smartg-gift-ink);
	border-radius: 0;
	background: #fff;
	color: inherit;
	font-size: 1rem;
	line-height: 1.4;
}

.smartg-gift-fields input[type="text"]:focus,
.smartg-gift-fields input[type="email"]:focus,
.smartg-gift-fields .form-row input.input-text:focus {
	outline: var(--smartg-gift-rule) solid var(--smartg-gift-ink);
	outline-offset: 1px;
}

/*
 * WooCommerce's own invalid state, kept legible against the border above. Its
 * script adds these classes to the row rather than to the input, which is why
 * the input is reached through the row here.
 */
.smartg-gift-fields .form-row.woocommerce-invalid input.input-text {
	border-color: #b32d2e;
}

.smartg-gift-fields .form-row.woocommerce-validated input.input-text {
	border-color: var(--smartg-gift-ink);
}

/*
 * Hidden until the box is ticked. The attribute is what the inline script
 * toggles; the rule is here because a stylesheet that overrides display on
 * .form-row would otherwise beat the browser's own handling of [hidden].
 */
.smartg-gift-fields [hidden] {
	display: none !important;
}

/* ---------------------------------------------------------------------------
 * The two panels.
 *
 * Same heading face, same ink and same rule as the fields above, so that the
 * checkout and the page the buyer lands on next read as one thing. The panels
 * carry a left rule rather than a full border: they are a note in the flow of
 * WooCommerce's own order tables, not a form control, and a box around them
 * competes with the table directly underneath.
 * ------------------------------------------------------------------------ */

.smartg-gift-receipt,
.smartg-wc-panel {
	margin: 1.75em 0;
	padding: 0.25em 0 0.25em 1em;
	border-left: calc(var(--smartg-gift-rule) * 3) solid var(--smartg-gift-ink);
}

.smartg-gift-receipt .smartg-gift-receipt__heading,
.smartg-wc-panel .smartg-wc-panel__heading {
	margin: 0 0 0.5em;
	padding: 0;
	color: var(--smartg-gift-ink);
	font-family: var(--smartg-gift-display);
	font-size: var(--smartg-gift-label);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0.01em;
}

.smartg-gift-receipt .smartg-gift-receipt__line,
.smartg-wc-panel .smartg-wc-panel__lead {
	margin: 0 0 0.6em;
	line-height: 1.5;
}

.smartg-gift-receipt .smartg-gift-receipt__line:last-child,
.smartg-wc-panel .smartg-wc-panel__lead:last-child {
	margin-bottom: 0;
}

/*
 * The guide list on an ordinary order. No bullets, because each item is a
 * thing to click rather than a point in an argument.
 */
.smartg-wc-panel .smartg-wc-panel__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.smartg-wc-panel .smartg-wc-panel__item {
	margin: 0 0 0.5em;
	padding: 0;
	list-style: none;
}

.smartg-wc-panel .smartg-wc-panel__link {
	color: var(--smartg-gift-ink);
	font-family: var(--smartg-gift-display);
	font-size: calc(var(--smartg-gift-label) * 0.6);
	line-height: 1.2;
	text-decoration: none;
	border-bottom: var(--smartg-gift-rule) solid currentColor;
}

.smartg-wc-panel .smartg-wc-panel__link:hover,
.smartg-wc-panel .smartg-wc-panel__link:focus {
	text-decoration: none;
	border-bottom-color: transparent;
}

.smartg-wc-panel .smartg-wc-panel__subtitle {
	display: block;
	margin-top: 0.15em;
	font-size: 0.9em;
	opacity: 0.85;
}

.smartg-wc-panel .smartg-wc-panel__all {
	margin: 0.75em 0 0;
	font-size: 0.95em;
}

.smartg-wc-panel .smartg-wc-panel__all a {
	color: var(--smartg-gift-ink);
}

/*
 * THE GIFT RECEIPT HAS NO LINK RULE, AND THAT IS NOT AN OVERSIGHT. There is
 * nothing clickable in that panel by design — see Gifts\BuyerNotice::lines() —
 * so a style for an anchor inside it would be a style for something that must
 * never be there.
 */