/**
 * Claim page.
 *
 * The form itself is rendered by Gravity Forms or Contact Form 7, so the
 * controls are styled by input type and by those plugins' own class names
 * rather than by markup this plugin owns. The palette arrives as custom
 * properties on .plg-claim from PLB_Theme, and the Form screen's look as
 * --plg-form-* properties and data attributes from PLB_Form_Style; every
 * default below is the shipped design.
 */

.plg-claim {
	--plg-ink: #12181c;
	--plg-surface: #ffffff;

	/* Shipped palette. PLB_Theme writes the same custom properties into
	   this element's style attribute, so anything set in settings wins
	   and anything left blank falls through to these. */
	--plg-accent: #0b6b66;
	--plg-start: #d40511;
	--plg-bar-restart: #29a9e0;
	--plg-bar-meter: #17264d;
	--plg-bar-ink: #ffffff;
	--plg-bar-radius: 8px;

	--plg-field-height: var(--plg-form-field-height, 54px);
	--plg-field-radius: 999px;
	--plg-field-area: 22px;
	--plg-button-radius: 999px;
	--plg-line: rgba(18, 24, 28, 0.16);

	--plg-f-eyebrow: var(--plg-form-eyebrow-size, 12px);
	--plg-f-heading: var(--plg-form-heading-size, 28px);
	--plg-f-hint: var(--plg-form-hint-size, 15px);
	--plg-f-label: var(--plg-form-label-size, 14px);
	--plg-f-input: var(--plg-form-input-size, 16px);
	--plg-f-button: var(--plg-form-button-size, 16px);

	max-width: var(--plg-form-width, 560px);
	margin: 0 auto;
	padding: var(--plg-form-pad-t, 0) var(--plg-form-pad-r, 0) var(--plg-form-pad-b, 0) var(--plg-form-pad-l, 0);
	color: var(--plg-ink);
	background: var(--plg-form-panel, transparent);
	border: 0 var(--plg-form-border-style, solid) var(--plg-form-border-color, transparent);
	border-width: var(--plg-form-bw-t, 0) var(--plg-form-bw-r, 0) var(--plg-form-bw-b, 0) var(--plg-form-bw-l, 0);
	border-radius: var(--plg-form-r-tl, 0) var(--plg-form-r-tr, 0) var(--plg-form-r-br, 0) var(--plg-form-r-bl, 0);
}

@media (max-width: 1024px) {
	.plg-claim {
		--plg-f-eyebrow: var(--plg-form-eyebrow-size-t, var(--plg-form-eyebrow-size, 12px));
		--plg-f-heading: var(--plg-form-heading-size-t, var(--plg-form-heading-size, 28px));
		--plg-f-hint: var(--plg-form-hint-size-t, var(--plg-form-hint-size, 15px));
		--plg-f-label: var(--plg-form-label-size-t, var(--plg-form-label-size, 14px));
		--plg-f-input: var(--plg-form-input-size-t, var(--plg-form-input-size, 16px));
		--plg-f-button: var(--plg-form-button-size-t, var(--plg-form-button-size, 16px));
	}
}

@media (max-width: 600px) {
	.plg-claim {
		--plg-field-height: var(--plg-form-field-height, 50px);
		--plg-f-eyebrow: var(--plg-form-eyebrow-size-m, var(--plg-form-eyebrow-size-t, var(--plg-form-eyebrow-size, 12px)));
		--plg-f-heading: var(--plg-form-heading-size-m, var(--plg-form-heading-size-t, var(--plg-form-heading-size, 28px)));
		--plg-f-hint: var(--plg-form-hint-size-m, var(--plg-form-hint-size-t, var(--plg-form-hint-size, 15px)));
		--plg-f-label: var(--plg-form-label-size-m, var(--plg-form-label-size-t, var(--plg-form-label-size, 14px)));
		--plg-f-input: var(--plg-form-input-size-m, var(--plg-form-input-size-t, var(--plg-form-input-size, 16px)));
		--plg-f-button: var(--plg-form-button-size-m, var(--plg-form-button-size-t, var(--plg-form-button-size, 16px)));
	}
}

.plg-claim[data-plg-field-shape="rounded"] {
	--plg-field-radius: 12px;
	--plg-field-area: 12px;
}

.plg-claim[data-plg-field-shape="square"] {
	--plg-field-radius: 0;
	--plg-field-area: 0;
}

.plg-claim[data-plg-button-shape="rounded"] {
	--plg-button-radius: 12px;
}

.plg-claim[data-plg-button-shape="square"] {
	--plg-button-radius: 0;
}

.plg-claim[data-plg-shadow="soft"] {
	box-shadow: 0 12px 32px -14px rgba(15, 32, 62, 0.28);
}

.plg-claim[data-plg-shadow="strong"] {
	box-shadow: 0 22px 48px -16px rgba(15, 32, 62, 0.45);
}

.plg-claim.plg-claim--ready {
	display: flex;
	flex-direction: column;
	gap: 20px;
	justify-content: center;
	align-items: center;
	padding: var(--plg-form-pad-t, 20px) var(--plg-form-pad-r, 20px) var(--plg-form-pad-b, 20px) var(--plg-form-pad-l, 20px);
}

.plg-claim,
.plg-claim *,
.plg-claim *::before,
.plg-claim *::after {
	box-sizing: border-box;
}

.plg-claim__prize,
.plg-claim__result {
	text-align: center;
	margin: 0 0 24px;
}

.plg-claim__form,
.plg-claim__form :is(input, select, textarea) {
	text-align: center;
}

.plg-claim[data-plg-align="left"] .plg-claim__prize,
.plg-claim[data-plg-align="left"] .plg-claim__result,
.plg-claim[data-plg-align="left"] .plg-claim__form,
.plg-claim[data-plg-align="left"] .plg-claim__form :is(input, select, textarea) {
	text-align: left;
}

.plg-claim__prize[hidden],
.plg-claim__result[hidden],
.plg-claim__form[hidden] {
	display: none !important;
}

.plg-claim__eyebrow {
	margin: 0 0 4px;
	font-size: var(--plg-f-eyebrow);
	font-weight: var(--plg-form-eyebrow-weight, 700);
	letter-spacing: var(--plg-form-eyebrow-ls, 0.1em);
	text-transform: var(--plg-form-eyebrow-case, uppercase);
	color: var(--plg-form-eyebrow-color, var(--plg-bar-restart));
}

.plg-claim__prizename {
	margin: 0 0 8px;
	font-size: var(--plg-f-heading);
	line-height: 1.15;
}

.plg-claim__hint {
	margin: 0 0 8px;
	font-size: var(--plg-f-hint);
	line-height: 1.55;
	opacity: 0.8;
}

/* What the theme decides until the Form screen sets it: each rule applies
   only while data-plg-set names that text property. */
.plg-claim[data-plg-set~="eyebrow-font"] .plg-claim__eyebrow { font-family: var(--plg-form-eyebrow-font); }
.plg-claim[data-plg-set~="heading-font"] .plg-claim__prizename { font-family: var(--plg-form-heading-font); }
.plg-claim[data-plg-set~="heading-weight"] .plg-claim__prizename { font-weight: var(--plg-form-heading-weight); }
.plg-claim[data-plg-set~="heading-color"] .plg-claim__prizename { color: var(--plg-form-heading-color); }
.plg-claim[data-plg-set~="heading-case"] .plg-claim__prizename { text-transform: var(--plg-form-heading-case); }
.plg-claim[data-plg-set~="heading-ls"] .plg-claim__prizename { letter-spacing: var(--plg-form-heading-ls); }
.plg-claim[data-plg-set~="hint-font"] .plg-claim__hint { font-family: var(--plg-form-hint-font); }
.plg-claim[data-plg-set~="hint-weight"] .plg-claim__hint { font-weight: var(--plg-form-hint-weight); }
.plg-claim[data-plg-set~="hint-color"] .plg-claim__hint { color: var(--plg-form-hint-color); opacity: 1; }
.plg-claim[data-plg-set~="hint-case"] .plg-claim__hint { text-transform: var(--plg-form-hint-case); }
.plg-claim[data-plg-set~="hint-ls"] .plg-claim__hint { letter-spacing: var(--plg-form-hint-ls); }

.plg-claim__code {
	display: inline-block;
	margin: 12px 0;
	padding: 14px 26px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--plg-bar-meter);
	background: rgba(18, 24, 28, 0.04);
	border: 2px dashed var(--plg-bar-restart);
	border-radius: 12px;
	user-select: all;
	word-break: break-all;
}

.plg-claim__cta {
	display: inline-block;
	margin-top: 8px;
	padding: 12px 24px;
	font-weight: 600;
	text-decoration: none;
	color: var(--plg-form-button-color, var(--plg-bar-ink));
	background: var(--plg-form-button, var(--plg-start));
	border-radius: var(--plg-bar-radius);
	font-weight: var(--plg-form-button-weight, 800);
	letter-spacing: var(--plg-form-button-ls, 0.05em);
	text-transform: var(--plg-form-button-case, uppercase);
}

/* Themes colour every link (body.some-class a), which outweighs one class.
   This link is drawn as a button, so a doubled class keeps its ink. */
.plg-claim__cta.plg-claim__cta {
	color: var(--plg-form-button-color, var(--plg-bar-ink));
	text-decoration: none;
}

.plg-claim[data-plg-button-shape] .plg-claim__cta {
	border-radius: var(--plg-button-radius);
}

.plg-claim[data-plg-set~="button-font"] .plg-claim__cta { font-family: var(--plg-form-button-font); }
.plg-claim[data-plg-set~="button-size"] .plg-claim__cta { font-size: var(--plg-f-button); }

.plg-claim--notice {
	padding: 14px 18px;
	background: rgba(176, 83, 14, 0.08);
	border-left: 3px solid #b0530e;
}

.plg-claim--notice .plg-claim__hint {
	margin: 0;
	opacity: 1;
}

/* Voucher ------------------------------------------------------------
   A torn ticket: a stub at the top, a perforation across the middle and
   the code below it.

   The notches are cut out of the card with radial gradients rather than
   drawn as circles in the page colour, because the page colour is the
   theme's business and not something this file can know. That means the
   card background has to be one colour, so the stub is separated by
   typography and the perforation instead of a filled band. It also means
   the shadow has to be a filter: box-shadow would trace the rectangle and
   ignore the bites taken out of the sides.
   ------------------------------------------------------------------- */

.plg-voucher {
	--plg-notch: 15px;
	--plg-rip: 118px;

	position: relative;
	max-width: 400px;
	margin: 22px auto;
	padding: 0;
	text-align: center;
	border-radius: 18px;
	background:
		radial-gradient(circle at left var(--plg-rip), rgba(255, 255, 255, 0) var(--plg-notch), var(--plg-surface) calc(var(--plg-notch) + 1px)) left top / 50.5% 100% no-repeat,
		radial-gradient(circle at right var(--plg-rip), rgba(255, 255, 255, 0) var(--plg-notch), var(--plg-surface) calc(var(--plg-notch) + 1px)) right top / 50.5% 100% no-repeat;
	filter: drop-shadow(0 14px 30px rgba(15, 32, 62, 0.18));
}

.plg-voucher__head {
	padding: 30px 28px 0;
	min-height: var(--plg-rip);
}

.plg-voucher__eyebrow {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--plg-bar-restart);
}

.plg-voucher__name {
	margin: 0;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.15;
	color: var(--plg-bar-meter);
}

/* The perforation. Sits exactly on the notch centres. */
.plg-voucher__rip {
	height: 0;
	margin: 0 calc(var(--plg-notch) + 6px);
	border-top: 2px dashed rgba(18, 24, 28, 0.22);
}

.plg-voucher__body {
	padding: 24px 28px 30px;
}

.plg-voucher__image {
	display: block;
	width: auto;
	max-width: 70%;
	height: auto;
	max-height: 160px;
	margin: 0 auto 20px;
	object-fit: contain;
}

.plg-voucher__label {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(18, 24, 28, 0.5);
}

.plg-voucher__code {
	margin: 0 0 14px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: clamp(28px, 9vw, 38px);
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.1;
	color: var(--plg-bar-meter);
	/* The one thing on the page worth selecting in a single gesture. */
	user-select: all;
	word-break: break-all;
}

.plg-voucher__valid {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	color: rgba(18, 24, 28, 0.62);
}

@media (max-width: 600px) {
	.plg-voucher {
		--plg-rip: 104px;
	}

	.plg-voucher__head {
		padding: 24px 20px 0;
	}

	.plg-voucher__body {
		padding: 20px 20px 26px;
	}

	.plg-voucher__name {
		font-size: 22px;
	}
}

/* Form controls ------------------------------------------------------
   Selectors are by input type and by the form plugin's own class names,
   because the markup belongs to Contact Form 7 or Gravity Forms, not to
   this plugin. Every rule starts .plg-claim.plg-claim: one class heavier
   than the form plugins' own rules (.wpcf7 form.invalid .wpcf7-response-output)
   and a theme's (body.x input), so the Form screen's look wins, and all of
   it stays scoped to the box.
   ------------------------------------------------------------------- */

.plg-claim.plg-claim .plg-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 0 0 14px;
}

.plg-claim.plg-claim .plg-field {
	flex: 1 1 180px;
	min-width: 0;
	margin-bottom: 14px;
}

.plg-claim.plg-claim .plg-fields .plg-field {
	margin-bottom: 0;
}

.plg-claim.plg-claim[data-plg-gap] .plg-fields {
	gap: var(--plg-form-gap);
	margin-bottom: var(--plg-form-gap);
}

.plg-claim.plg-claim[data-plg-gap] .plg-field,
.plg-claim.plg-claim[data-plg-gap] .plg-claim__form form > p,
.plg-claim.plg-claim[data-plg-gap] .plg-claim__form .gfield {
	margin: 0 0 var(--plg-form-gap);
}

.plg-claim.plg-claim[data-plg-gap] .plg-fields .plg-field {
	margin-bottom: 0;
}

.plg-claim.plg-claim .plg-field label,
.plg-claim.plg-claim .plg-claim__form label,
.plg-claim.plg-claim .plg-claim__form .gfield_label {
	display: block;
	margin-bottom: 6px;
	font-size: var(--plg-f-label);
	font-weight: var(--plg-form-label-weight, 700);
	color: var(--plg-form-label-color, var(--plg-bar-meter));
}

.plg-claim.plg-claim[data-plg-set~="label-font"] .plg-claim__form :is(label, .gfield_label) { font-family: var(--plg-form-label-font); }
.plg-claim.plg-claim[data-plg-set~="label-case"] .plg-claim__form :is(label, .gfield_label):not(.plg-consent label, .wpcf7-acceptance label, .gfield_consent_label) { text-transform: var(--plg-form-label-case); }
.plg-claim.plg-claim[data-plg-set~="label-ls"] .plg-claim__form :is(label, .gfield_label):not(.plg-consent label, .wpcf7-acceptance label, .gfield_consent_label) { letter-spacing: var(--plg-form-label-ls); }

.plg-claim.plg-claim .plg-claim__form input[type="text"],
.plg-claim.plg-claim .plg-claim__form input[type="email"],
.plg-claim.plg-claim .plg-claim__form input[type="tel"],
.plg-claim.plg-claim .plg-claim__form input[type="number"],
.plg-claim.plg-claim .plg-claim__form input[type="url"],
.plg-claim.plg-claim .plg-claim__form select,
.plg-claim.plg-claim .plg-claim__form textarea {
	width: 100%;
	min-height: var(--plg-field-height);
	padding: 0 22px;
	font: inherit;
	font-family: var(--plg-form-input-font, inherit);
	font-size: var(--plg-f-input);
	font-weight: var(--plg-form-input-weight, inherit);
	color: var(--plg-form-input-color, var(--plg-ink));
	background: var(--plg-form-field-bg, var(--plg-surface));
	border: 0 solid var(--plg-form-field-line, var(--plg-line));
	border-width: var(--plg-form-field-bw-t, 1px) var(--plg-form-field-bw-r, 1px) var(--plg-form-field-bw-b, 1px) var(--plg-form-field-bw-l, 1px);
	border-radius: var(--plg-field-radius);
	box-shadow: 0 2px 10px -7px rgba(9, 14, 15, 0.5);
	-webkit-appearance: none;
	appearance: none;
}

.plg-claim.plg-claim[data-plg-set~="input-case"] .plg-claim__form :is(input, select, textarea) { text-transform: var(--plg-form-input-case); }
.plg-claim.plg-claim[data-plg-set~="input-ls"] .plg-claim__form :is(input, select, textarea) { letter-spacing: var(--plg-form-input-ls); }

.plg-claim.plg-claim .plg-claim__form textarea {
	min-height: 120px;
	padding: 16px 22px;
	border-radius: var(--plg-field-area);
	resize: vertical;
}

.plg-claim.plg-claim .plg-claim__form input::placeholder,
.plg-claim.plg-claim .plg-claim__form textarea::placeholder {
	color: rgba(18, 24, 28, 0.45);
}

.plg-claim.plg-claim .plg-claim__form input:focus,
.plg-claim.plg-claim .plg-claim__form select:focus,
.plg-claim.plg-claim .plg-claim__form textarea:focus {
	border-color: var(--plg-form-focus, var(--plg-bar-restart));
	outline: 3px solid var(--plg-form-focus, var(--plg-bar-restart));
	outline-offset: 1px;
}

/* Contact Form 7 wraps every field in a span, which breaks the flex
   sizing unless it is told to fill its parent. */
.plg-claim.plg-claim .plg-claim__form .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

/* Consent ------------------------------------------------------------
   Both form plugins render a real checkbox inside a label. The native box
   keeps its keyboard and screen reader behaviour and is hidden visually,
   with the circle drawn on the following label text instead.
   ------------------------------------------------------------------- */

.plg-claim.plg-claim .plg-consent {
	margin: 4px 0 20px;
}

.plg-claim.plg-claim .plg-consent label,
.plg-claim.plg-claim .plg-claim__form .wpcf7-acceptance label,
.plg-claim.plg-claim .plg-claim__form .gfield_consent_label {
	display: block;
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	cursor: pointer;
}

.plg-claim.plg-claim .plg-claim__form input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.plg-claim.plg-claim .plg-claim__form input[type="checkbox"] + span::before,
.plg-claim.plg-claim .plg-claim__form input[type="checkbox"] + label::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 22px;
	margin-right: 10px;
	vertical-align: -5px;
	background: var(--plg-surface);
	border: 2px solid var(--plg-form-tick, var(--plg-bar-restart));
	border-radius: 50%;
	transition: background 0.15s ease;
}

.plg-claim.plg-claim .plg-claim__form input[type="checkbox"]:checked + span::before,
.plg-claim.plg-claim .plg-claim__form input[type="checkbox"]:checked + label::before {
	background: var(--plg-form-tick, var(--plg-bar-restart));
	box-shadow: inset 0 0 0 4px var(--plg-surface);
}

.plg-claim.plg-claim .plg-claim__form input[type="checkbox"]:focus-visible + span::before,
.plg-claim.plg-claim .plg-claim__form input[type="checkbox"]:focus-visible + label::before {
	outline: 3px solid var(--plg-form-tick, var(--plg-bar-restart));
	outline-offset: 2px;
}

/* Submit -------------------------------------------------------------- */

.plg-claim.plg-claim .plg-claim__form input[type="submit"],
.plg-claim.plg-claim .plg-claim__form button[type="submit"],
.plg-claim.plg-claim .plg-claim__form .gform_button {
	display: inline-block;
	width: 100%;
	min-height: var(--plg-field-height);
	padding: 0 34px;
	font: inherit;
	font-family: var(--plg-form-button-font, inherit);
	font-size: var(--plg-f-button);
	font-weight: var(--plg-form-button-weight, 800);
	letter-spacing: var(--plg-form-button-ls, 0.06em);
	text-transform: var(--plg-form-button-case, uppercase);
	color: var(--plg-form-button-color, var(--plg-bar-ink));
	background: var(--plg-form-button, var(--plg-start));
	border: 0;
	border-radius: var(--plg-button-radius);
	cursor: pointer;
	transition: filter 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.plg-claim.plg-claim[data-plg-button-width="auto"] .plg-claim__form :is(input[type="submit"], button[type="submit"], .gform_button) {
	width: auto;
}

.plg-claim.plg-claim .plg-claim__form input[type="submit"]:hover,
.plg-claim.plg-claim .plg-claim__form button[type="submit"]:hover,
.plg-claim.plg-claim .plg-claim__form .gform_button:hover {
	filter: brightness(1.08);
}

.plg-claim.plg-claim .plg-claim__form input[type="submit"]:focus-visible,
.plg-claim.plg-claim .plg-claim__form button[type="submit"]:focus-visible,
.plg-claim.plg-claim .plg-claim__form .gform_button:focus-visible {
	outline: 3px solid var(--plg-bar-meter);
	outline-offset: 3px;
}

/* The form plugins bring their own validation furniture. Kept in the same
   language as everything else rather than left at their defaults. */

.plg-claim.plg-claim .plg-claim__form .wpcf7-not-valid-tip,
.plg-claim.plg-claim .plg-claim__form .gfield_validation_message {
	margin-top: 6px;
	padding: 0 22px;
	font-size: 13px;
	font-weight: 600;
	color: var(--plg-form-error, #b3231b);
}

.plg-claim.plg-claim .plg-claim__form .wpcf7-not-valid {
	border-color: var(--plg-form-error, #b3231b);
}

.plg-claim.plg-claim .plg-claim__form .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 12px 20px;
	font-size: 14px;
	border: 1px solid var(--plg-line);
	border-radius: 14px;
}

.plg-claim.plg-claim .plg-claim__form .wpcf7-spinner {
	display: block;
	margin: 12px auto 0;
}

@media (max-width: 600px) {
	.plg-claim.plg-claim .plg-fields {
		gap: 10px;
	}
}

/* Voucher page ------------------------------------------------------- */

.plg-vouchers__item + .plg-vouchers__item {
	margin-top: 32px;
}

.plg-vouchers [hidden] {
	display: none !important;
}

button.plg-claim__cta {
	border: 0;
	cursor: pointer;
	font: inherit;
	font-weight: 800;
}

.plg-voucher--expired .plg-voucher__code {
	text-decoration: line-through;
	opacity: 0.55;
}