/*
 * PeptidePro Sale Raffle — front end styles.
 *
 * Colours are lifted from the static cards on Elementor page 72685 so the live board is
 * indistinguishable from the mock it replaces:
 *   drawn  bg #06273D  border #E8B33E  day label #22E4FD  prize #DC9B38
 *   today  bg #084D70  border #22E4FD  day label #074668 on a cyan pill
 *   locked bg #031621  border rgba(255,255,255,.09)  text #8AA0AB
 *   grand  bg rgba(220,155,56,.2)  border #E8B33E
 * Every one is a custom property, so the page can retheme without editing this file.
 */

.ppro-raffle-board {
	--ppro-radius: 12px;
	--ppro-gold: #E8B33E;
	--ppro-prize: #DC9B38;
	--ppro-cyan: #22E4FD;
	--ppro-muted: #8AA0AB;
	--ppro-drawn-bg: linear-gradient( 180deg, #084067, #06273D );
	--ppro-today-bg: linear-gradient( 180deg, #0A6A94, #084D70 );
	--ppro-locked-bg: linear-gradient( 180deg, #06222F, #031621 );
	--ppro-locked-border: rgba( 255, 255, 255, 0.09 );
	--ppro-grand-bg: rgba( 220, 155, 56, 0.2 );
}

/*
 * Flex, not grid: a 13-card run in a 7-wide grid leaves the last row hugging the left
 * with a hole beside it. Wrapping flex items with justify-content:center balances the
 * short row under the full one.
 */
.ppro-raffle-board__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.ppro-raffle-board__grid > .ppro-raffle-card {
	flex: 0 1 calc( ( 100% - 6 * 12px ) / 7 );
	min-width: 132px;
}

@media ( max-width: 1024px ) {
	.ppro-raffle-board__grid > .ppro-raffle-card {
		flex-basis: calc( ( 100% - 3 * 12px ) / 4 );
	}
}

@media ( max-width: 600px ) {
	.ppro-raffle-board__grid > .ppro-raffle-card {
		flex-basis: calc( ( 100% - 12px ) / 2 );
		min-width: 0;
	}
}

/*
 * The finale sits apart from the daily run and outranks it: gold ground, bigger type,
 * more padding. The grand prize outranks the three runners-up in turn.
 */
.ppro-raffle-board__finale {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 14px;
	margin-top: 26px;
	padding-top: 26px;
	border-top: 1px solid rgba( 255, 255, 255, 0.09 );
}

.ppro-raffle-finale {
	flex: 0 1 auto;
	padding: 18px 18px 22px;
	border-width: 1px;
	border-style: solid;
	min-height: 180px;
	justify-content: flex-start;
}

.ppro-raffle-finale--grand {
	flex-basis: 300px;
	background: linear-gradient( 160deg, rgba( 232, 179, 62, 0.28 ), rgba( 220, 155, 56, 0.10 ) );
	border-color: var( --ppro-gold );
	box-shadow: 0 0 26px rgba( 232, 179, 62, 0.16 );
}

.ppro-raffle-finale--runner {
	flex-basis: 190px;
	background: linear-gradient( 160deg, rgba( 232, 179, 62, 0.12 ), rgba( 6, 39, 61, 0.65 ) );
	border-color: rgba( 232, 179, 62, 0.55 );
}

.ppro-raffle-finale__icon {
	width: 40px;
	height: 40px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	margin: 2px auto 6px;
}

.ppro-raffle-finale--runner .ppro-raffle-finale__icon {
	width: 30px;
	height: 30px;
}

.ppro-raffle-finale__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: rgba( 255, 255, 255, 0.75 );
}

.ppro-raffle-finale__prize {
	font-size: 38px;
	font-weight: 800;
	line-height: 1.05;
	color: var( --ppro-gold );
}

.ppro-raffle-finale--runner .ppro-raffle-finale__prize {
	font-size: 24px;
}

.ppro-raffle-finale__winner {
	font-size: 17px;
	font-weight: 700;
	color: #fff;
	margin-top: 2px;
}

.ppro-raffle-finale--runner .ppro-raffle-finale__winner {
	font-size: 15px;
}

.ppro-raffle-finale .ppro-raffle-card__day {
	color: rgba( 255, 255, 255, 0.8 );
	border-color: rgba( 255, 255, 255, 0.18 );
}

@media ( max-width: 600px ) {
	.ppro-raffle-finale--grand,
	.ppro-raffle-finale--runner {
		flex-basis: 100%;
	}
}

.ppro-raffle-card {
	border-radius: var( --ppro-radius );
	border: 1px solid var( --ppro-locked-border );
	background: var( --ppro-locked-bg );
	padding: 10px 10px 16px;
	min-height: 118px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: center;
	color: #fff;
}

.ppro-raffle-card--skeleton {
	opacity: 0.3;
}

/* ---- head: day pill, plus the state mark on the right ---- */

.ppro-raffle-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	min-height: 22px;
}

.ppro-raffle-card__day {
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	padding: 5px 10px;
	border-radius: 999px;
	border: 1px solid var( --ppro-locked-border );
	color: var( --ppro-muted );
}

.ppro-raffle-card__mark {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.ppro-raffle-card__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	justify-content: center;
	flex: 1;
}

.ppro-raffle-card__icon {
	width: 30px;
	height: 30px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	margin-bottom: 2px;
}

.ppro-raffle-card__winner {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
}

.ppro-raffle-card__prize {
	font-size: 14px;
	font-weight: 600;
	color: var( --ppro-prize );
}

.ppro-raffle-card__status {
	font-size: 14px;
	color: var( --ppro-muted );
}

/* ---- drawn ---- */

.ppro-raffle-card--drawn {
	background: var( --ppro-drawn-bg );
	border-color: var( --ppro-gold );
}

.ppro-raffle-card--drawn .ppro-raffle-card__day {
	color: var( --ppro-cyan );
	border-color: transparent;
	padding-left: 2px;
}

/* ---- today ---- */

.ppro-raffle-card--today {
	background: var( --ppro-today-bg );
	border-color: var( --ppro-cyan );
	box-shadow: 0 0 20px rgba( 34, 228, 253, 0.25 );
}

.ppro-raffle-card--today .ppro-raffle-card__day {
	background: var( --ppro-cyan );
	border-color: transparent;
	color: #074668;
}

.ppro-raffle-card--today .ppro-raffle-card__winner {
	color: var( --ppro-cyan );
	font-size: 14px;
}

.ppro-raffle-card--today .ppro-raffle-card__prize {
	color: rgba( 255, 255, 255, 0.8 );
	font-size: 13px;
	font-weight: 400;
}

/* ---- a day that closed without a draw yet ---- */

.ppro-raffle-card--pending .ppro-raffle-card__status {
	color: var( --ppro-cyan );
}

/* ------------------------------------------------------------- countdown */

.ppro-raffle-countdown {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.ppro-raffle-countdown__label {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
}

.ppro-raffle-countdown__label b {
	color: #22E4FD;
}

.ppro-raffle-countdown__clock {
	display: inline-flex;
	align-items: flex-start;
	gap: 10px;
}

.ppro-raffle-seg {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	min-width: 46px;
}

.ppro-raffle-seg b {
	font-size: 30px;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: #fff;
}

.ppro-raffle-seg i {
	font-style: normal;
	font-size: 11px;
	letter-spacing: 0.12em;
	color: var( --ppro-muted, #8AA0AB );
	margin-top: 4px;
}

.ppro-raffle-seg-sep {
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
	color: rgba( 255, 255, 255, 0.5 );
}

/* ------------------------------------------------------------------ form */

/*
 * Selectors here are deliberately specific (element + class, and .ppro-raffle-form as an
 * ancestor). The theme and Elementor both style bare h3/button/input, and at equal
 * specificity they win on source order — which is how the title rendered near-black on
 * navy and the submit button came out theme-teal instead of brand gold.
 *
 * The form paints NO background or border of its own: it inherits whatever container it
 * is dropped into, so it sits correctly in any section.
 */

.ppro-raffle-form {
	--ppro-gold: #E8B33E;
	--ppro-cyan: #22E4FD;
	--ppro-muted: #8AA0AB;
	--ppro-field: #031621;
	--ppro-line: rgba( 255, 255, 255, 0.14 );
	width: 100%;
	max-width: 440px;
	margin-left: auto;
	margin-right: auto;
	color: #fff;
	text-align: left;
}

.ppro-raffle-form h3.ppro-raffle-form__title {
	margin: 0 0 6px;
	padding: 0;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.2;
	color: #fff;
}

.ppro-raffle-form p.ppro-raffle-form__hint {
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 1.5;
	color: var( --ppro-muted );
}

.ppro-raffle-form .ppro-raffle-form__hint strong {
	color: var( --ppro-cyan );
	font-weight: 700;
}

/* First/last name sit side by side, stacking on narrow screens. */
.ppro-raffle-form .ppro-raffle-row {
	display: flex;
	gap: 12px;
}

.ppro-raffle-form .ppro-raffle-row .ppro-raffle-field {
	flex: 1 1 0;
	min-width: 0;
}

.ppro-raffle-form .ppro-raffle-row input[type="text"] {
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 13px 14px;
	border-radius: 10px;
	border: 1px solid var( --ppro-line );
	background: var( --ppro-field );
	color: #fff;
	font-size: 15px;
	line-height: 1.3;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ppro-raffle-form .ppro-raffle-row input[type="text"]:focus {
	outline: none;
	border-color: var( --ppro-cyan );
	box-shadow: 0 0 0 3px rgba( 34, 228, 253, 0.18 );
}

@media ( max-width: 420px ) {
	.ppro-raffle-form .ppro-raffle-row {
		flex-direction: column;
		gap: 0;
	}
}

.ppro-raffle-form .ppro-raffle-field {
	display: block;
	margin: 0 0 16px;
}

.ppro-raffle-form .ppro-raffle-field__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --ppro-muted );
}

.ppro-raffle-form .ppro-raffle-pill {
	font-style: normal;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	padding: 3px 9px;
	border-radius: 999px;
	color: #04202A;
	background: var( --ppro-cyan );
}

.ppro-raffle-form .ppro-raffle-field input[type="email"],
.ppro-raffle-form .ppro-raffle-field input[type="tel"] {
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 13px 14px;
	border-radius: 10px;
	border: 1px solid var( --ppro-line );
	background: var( --ppro-field );
	color: #fff;
	font-size: 15px;
	line-height: 1.3;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ppro-raffle-form .ppro-raffle-field input::placeholder {
	color: rgba( 255, 255, 255, 0.32 );
}

.ppro-raffle-form .ppro-raffle-field input:focus {
	outline: none;
	border-color: var( --ppro-cyan );
	box-shadow: 0 0 0 3px rgba( 34, 228, 253, 0.18 );
}

.ppro-raffle-form .ppro-raffle-field__note {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: rgba( 255, 255, 255, 0.45 );
}

.ppro-raffle-form .ppro-raffle-field.is-earned .ppro-raffle-pill {
	background: #1F7A4D;
	color: #D8FFE9;
}

.ppro-raffle-form .ppro-raffle-field.is-earned .ppro-raffle-pill::after {
	content: " earned";
}

/* Custom control: the browser default is a white square on a dark panel. */
.ppro-raffle-form .ppro-raffle-consent {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0 0 18px;
	font-size: 13px;
	line-height: 1.45;
	color: var( --ppro-muted );
	cursor: pointer;
}

.ppro-raffle-form .ppro-raffle-consent input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	border: 1px solid var( --ppro-line );
	border-radius: 5px;
	background: var( --ppro-field );
	cursor: pointer;
	position: relative;
}

.ppro-raffle-form .ppro-raffle-consent input[type="checkbox"]:checked {
	background: var( --ppro-cyan );
	border-color: var( --ppro-cyan );
}

.ppro-raffle-form .ppro-raffle-consent input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2px;
	width: 4px;
	height: 9px;
	border: solid #04202A;
	border-width: 0 2px 2px 0;
	transform: rotate( 45deg );
}

.ppro-raffle-form .ppro-raffle-consent input[type="checkbox"]:focus-visible {
	outline: 2px solid var( --ppro-cyan );
	outline-offset: 2px;
}

/* Gold, matching the campaign's primary CTA — not the theme's default button. */
.ppro-raffle-form button.ppro-raffle-btn,
.ppro-raffle-form a.ppro-raffle-btn {
	display: inline-block;
	padding: 13px 24px;
	border: 0;
	border-radius: 999px;
	background: var( --ppro-gold );
	background-image: none;
	color: #1A1205;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	transition: filter 0.15s ease;
}

.ppro-raffle-form button.ppro-raffle-btn:hover,
.ppro-raffle-form a.ppro-raffle-btn:hover {
	background: var( --ppro-gold );
	color: #1A1205;
	filter: brightness( 1.08 );
}

.ppro-raffle-form button.ppro-raffle-btn--block {
	display: block;
	width: 100%;
}

.ppro-raffle-form button.ppro-raffle-btn[disabled] {
	opacity: 0.55;
	cursor: default;
	filter: none;
}

.ppro-raffle-form .ppro-raffle-form__msg {
	min-height: 1.3em;
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.45;
}

.ppro-raffle-form .ppro-raffle-form__msg.is-ok {
	color: #3DDC84;
}

.ppro-raffle-form .ppro-raffle-form__msg.is-err {
	color: #FF8A8A;
}

/* -------------------------------------------------------------- counters */

.ppro-raffle-count {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
	color: #fff;
}

.ppro-raffle-count__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #8AA0AB;
}

.ppro-raffle-count__value {
	font-size: 34px;
	font-weight: 800;
	line-height: 1;
	color: #E8B33E;
}

.ppro-raffle-count__break {
	width: 100%;
	text-align: center;
	font-size: 13px;
	color: rgba( 255, 255, 255, 0.55 );
}

/* ------------------------------------------------- product entry badges */

/*
 * Shown on shop cards, above the single-product title, and as a checkout totals row.
 * Deliberately quiet: it sits beside pricing, so it must read as information rather
 * than compete with the buy button.
 */
.ppro-raffle-badge {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba( 34, 228, 253, 0.12 );
	border: 1px solid rgba( 34, 228, 253, 0.45 );
	color: #22E4FD;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	vertical-align: middle;
}

.ppro-raffle-badge strong {
	font-size: 13px;
	font-weight: 800;
	color: #22E4FD;
}

.ppro-raffle-badge--loop {
	margin: 0 0 6px;
}

.ppro-raffle-badge--single {
	margin: 0 0 10px;
	font-size: 13px;
	padding: 6px 14px;
}

.ppro-raffle-badge--single strong {
	font-size: 15px;
}

.ppro-raffle-checkout-row .ppro-raffle-badge {
	background: none;
	border: 0;
	padding: 0;
}

/* A light theme (shop pages are not always on the dark sale background). */
@media ( prefers-color-scheme: light ) {
	.ppro-raffle-badge {
		background: rgba( 8, 77, 112, 0.08 );
		border-color: rgba( 8, 77, 112, 0.35 );
		color: #084D70;
	}
	.ppro-raffle-badge strong {
		color: #084D70;
	}
}

/* Elementor's product-title widget has no room of its own; give the badge some. */
.ppro-raffle-badge-wrap {
	margin: 0 0 8px;
}

/* FunnelKit slide-in cart, above the checkout button. */
.ppro-raffle-cart-note {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 12px;
	padding: 10px 12px;
	border-radius: 10px;
	background: rgba( 34, 228, 253, 0.10 );
	border: 1px solid rgba( 34, 228, 253, 0.35 );
	font-size: 13px;
	line-height: 1.4;
	text-align: left;
}

.ppro-raffle-cart-note__icon {
	font-size: 15px;
	line-height: 1.3;
	flex: 0 0 auto;
}

.ppro-raffle-cart-note__lead {
	font-weight: 800;
}

.ppro-raffle-cart-note__text strong {
	font-weight: 800;
}

/* Checkout totals row. */
.ppro-raffle-checkout-row .ppro-raffle-badge {
	background: none;
	border: 0;
	padding: 0;
}

.ppro-raffle-checkout-note {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	line-height: 1.35;
	opacity: 0.7;
	font-weight: 400;
}