/**
 * Evziiin Lottery — frontend styles for the dashboard and shortcodes.
 * Tokens lifted from the live site's Elementor kit: Poppins, accent
 * #87C332, petrol #052730, green #69A316, wash #F5FAEE, text #676767.
 * Everything scoped under .evz-* so the theme is never affected.
 */

.evz-dashboard,
.evz-competition,
.evz-competitions-list,
.evz-tc-form,
.evz-referral-link,
.evz-active-competitions,
.evz-notice,
.evz-login-required {
	--evz-accent: #87c332;
	--evz-accent-dark: #69a316;
	--evz-petrol: #052730;
	--evz-forest: #244731;
	--evz-wash: #f5faee;
	--evz-text: #676767;
	--evz-line: #e3ebdc;
	font-family: "Poppins", sans-serif;
	color: #1b1a1a;
}

/* ------------------------------------------------------------- Callouts */

.evz-eligibility-hint {
	display: block;
	margin: 0 0 26px;
	padding: 14px 18px 14px 46px;
	position: relative;
	background: var(--evz-wash);
	border: 1px solid var(--evz-line);
	border-left: 4px solid var(--evz-accent);
	border-radius: 10px;
	color: var(--evz-forest);
	font-size: 15px;
}
.evz-eligibility-hint::before {
	content: "⚡";
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 19px;
}

.evz-notice {
	margin: 0 0 22px;
	padding: 13px 18px;
	border-radius: 10px;
	font-size: 15px;
}
.evz-notice-success {
	background: var(--evz-wash);
	border: 1px solid var(--evz-accent);
	color: var(--evz-forest);
}
.evz-notice-error {
	background: #fdf0ed;
	border: 1px solid #dd8574;
	color: #8a2417;
}
.evz-notice-warning {
	background: #fdf6e3;
	border: 1px solid #e3c04c;
	color: #755b0b;
}
.evz-account-status p {
	margin: 0 0 10px;
}
.evz-inline-action {
	padding: 8px 20px;
	background: transparent;
	border: 1.5px solid currentColor;
	border-radius: 999px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: inherit;
	cursor: pointer;
	transition: background-color 140ms ease;
}
.evz-inline-action:hover,
.evz-inline-action:focus {
	background: rgba(0, 0, 0, 0.06);
}

/* -------------------------------------------------- Competition cards */

.evz-dashboard-competition,
.evz-competition-card {
	position: relative;
	margin: 0 0 24px;
	padding: 26px 30px 22px 40px;
	background: #ffffff;
	border: 1px solid var(--evz-line);
	border-radius: 14px;
	box-shadow: 0 2px 10px rgba(5, 39, 48, 0.06);
	overflow: hidden;
}
/* Perforated ticket-stub edge. */
.evz-competition-card::before,
.evz-dashboard-competition::before {
	content: "";
	position: absolute;
	top: 0;
	left: 13px;
	bottom: 0;
	border-left: 2px dashed var(--evz-line);
}
.evz-competition-card::after,
.evz-dashboard-competition::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 14px;
	background: var(--evz-wash);
	border-right: 1px solid var(--evz-line);
}

.evz-dashboard-competition h3,
.evz-competition-card h3,
.evz-dashboard-referral h3 {
	margin: 0 0 4px;
	font-size: 21px;
	font-weight: 600;
	color: var(--evz-petrol);
}
.evz-competition-dates {
	margin: 0 0 16px;
	font-size: 13.5px;
	color: var(--evz-text);
}

/* Ticket count as a stub number. */
.evz-ticket-count {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 6px 0 10px;
}
.evz-ticket-count__value {
	font-size: 42px;
	font-weight: 700;
	line-height: 1;
	color: var(--evz-petrol);
	font-variant-numeric: tabular-nums;
}
.evz-ticket-count__label {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--evz-accent-dark);
}

.evz-ticket-ranges {
	margin: 0 0 14px;
	padding: 10px 14px;
	background: var(--evz-wash);
	border: 1px solid var(--evz-line);
	border-radius: 8px;
	font-family: Consolas, Monaco, monospace;
	font-size: 13px;
	color: var(--evz-forest);
	word-break: break-word;
}

.evz-participation-status {
	color: var(--evz-text);
	font-size: 14.5px;
}

/* Withdraw: present but quiet — it's destructive. */
.evz-withdraw-form {
	margin: 14px 0 0;
	text-align: right;
}
.evz-withdraw-link {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: 12.5px;
	color: #a5423a;
	text-decoration: none;
	opacity: 0.75;
}
.evz-withdraw-link:hover,
.evz-withdraw-link:focus {
	text-decoration: underline;
	opacity: 1;
}

/* ------------------------------------------- Competitions overview page */

.evz-competition-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
}
.evz-chip {
	display: inline-block;
	padding: 4px 14px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
}
.evz-chip--joined {
	background: var(--evz-accent);
	color: var(--evz-petrol);
}
.evz-chip--open {
	background: #f0f0f0;
	color: var(--evz-text);
	border: 1px solid var(--evz-line);
}
.evz-competition-description {
	margin: 0 0 14px;
	font-size: 14.5px;
	line-height: 1.6;
	color: #3c3c3c;
}
.evz-competition-card__tickets {
	font-weight: 600;
	color: var(--evz-forest);
}

/* "Accept the terms & participate" expandable */
.evz-join {
	margin-top: 6px;
}
.evz-join summary {
	display: inline-block;
	padding: 12px 30px;
	background: var(--evz-accent);
	color: var(--evz-petrol);
	font-size: 15px;
	font-weight: 700;
	border-radius: 999px;
	cursor: pointer;
	list-style: none;
	transition: background-color 140ms ease, color 140ms ease;
}
.evz-join summary::-webkit-details-marker {
	display: none;
}
.evz-join summary:hover,
.evz-join summary:focus {
	background: var(--evz-accent-dark);
	color: #ffffff;
}
.evz-join[open] summary {
	background: var(--evz-petrol);
	color: #ffffff;
	margin-bottom: 14px;
}

/* ------------------------------------------------------------ T&C form */

.evz-tc-form {
	margin-top: 8px;
}
.evz-tc-readlink {
	margin: 0 0 14px;
}
.evz-tc-open {
	background: none;
	border: none;
	padding: 0;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--evz-accent-dark, #69a316);
	text-decoration: underline;
	cursor: pointer;
}
.evz-tc-open:hover,
.evz-tc-open:focus {
	color: var(--evz-petrol, #052730);
}

/* Terms popup (native dialog) */
.evz-tc-dialog {
	max-width: 680px;
	width: calc(100vw - 40px);
	max-height: 80vh;
	padding: 0;
	border: 1px solid var(--evz-line, #e3ebdc);
	border-radius: 14px;
	box-shadow: 0 20px 60px rgba(5, 39, 48, 0.3);
	font-family: "Poppins", sans-serif;
}
.evz-tc-dialog::backdrop {
	background: rgba(5, 39, 48, 0.55);
}
.evz-tc-dialog__head {
	position: sticky;
	top: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	padding: 16px 22px;
	background: var(--evz-petrol, #052730);
	color: #ffffff;
	font-size: 15px;
}
.evz-tc-dialog__close {
	background: none;
	border: none;
	color: #ffffff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
	flex: none;
}
.evz-tc-dialog__close:hover,
.evz-tc-dialog__close:focus {
	color: var(--evz-accent, #87c332);
}
.evz-tc-dialog__body {
	padding: 18px 24px 24px;
	overflow-y: auto;
	max-height: calc(80vh - 60px);
	font-size: 14px;
	line-height: 1.7;
	color: #3c3c3c;
}
.evz-tc-accept label,
.evz-marketing-consent label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14.5px;
	line-height: 1.55;
	cursor: pointer;
}
.evz-tc-accept input[type="checkbox"],
.evz-marketing-consent input[type="checkbox"] {
	margin-top: 3px;
	accent-color: var(--evz-accent-dark);
	width: 17px;
	height: 17px;
	flex: none;
}
.evz-marketing-consent {
	color: var(--evz-text);
}

.evz-tc-submit {
	display: inline-block;
	padding: 13px 34px;
	background: var(--evz-accent);
	color: var(--evz-petrol);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 140ms ease, color 140ms ease;
}
.evz-tc-submit:hover,
.evz-tc-submit:focus {
	background: var(--evz-accent-dark);
	color: #ffffff;
}

/* ------------------------------------------------------ Referral section */

.evz-dashboard-referral {
	margin-top: 30px;
	padding: 26px 30px;
	background: var(--evz-petrol);
	border-radius: 14px;
	color: #ffffff;
}
.evz-dashboard-referral h3 {
	color: #ffffff;
}
.evz-dashboard-referral h3::after {
	content: "";
	display: block;
	width: 34px;
	height: 3px;
	margin-top: 8px;
	background: var(--evz-accent);
}

.evz-referral-url-row {
	display: flex;
	margin: 16px 0 14px;
}
.evz-referral-url {
	flex: 1;
	min-width: 0;
	padding: 11px 14px;
	border: 1px solid var(--evz-line);
	border-right: none;
	border-radius: 10px 0 0 10px;
	font-family: Consolas, Monaco, monospace;
	font-size: 13px;
	color: #1b1a1a;
	background: #ffffff;
}
.evz-referral-copy {
	padding: 11px 22px;
	background: var(--evz-accent);
	color: var(--evz-petrol);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	border: none;
	border-radius: 0 10px 10px 0;
	cursor: pointer;
	transition: background-color 140ms ease;
}
.evz-referral-copy:hover,
.evz-referral-copy:focus {
	background: var(--evz-accent-dark);
	color: #ffffff;
}

.evz-referral-share {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0 0;
}
/* Keyed on the anchor's own class so the pills survive any wrapper
   mangling by themes/builders; explicit margins double as spacing when
   the flex parent is lost. */
a.evz-share {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 8px 8px 0;
	padding: 8px 18px;
	border: 1px solid var(--evz-line, #e3ebdc);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	vertical-align: middle;
	color: var(--evz-petrol, #052730);
	background: #ffffff;
	text-decoration: none;
	transition: border-color 140ms ease, color 140ms ease;
}
.evz-referral-share a.evz-share {
	margin: 0;
}
a.evz-share .evz-share-icon,
.evz-referral-share a svg {
	width: 15px;
	height: 15px;
	flex: none;
	display: inline-block;
	vertical-align: middle;
}
a.evz-share:hover,
a.evz-share:focus {
	border-color: var(--evz-accent-dark, #69a316);
	color: var(--evz-accent-dark, #69a316);
}
/* On the dark referral card the pills invert. */
.evz-dashboard-referral a.evz-share {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.35);
	color: #ffffff;
}
.evz-dashboard-referral a.evz-share:hover,
.evz-dashboard-referral a.evz-share:focus {
	border-color: var(--evz-accent);
	color: var(--evz-accent);
}

/* ------------------------------------------------------ Referral QR */

.evz-referral-qr {
	--evz-accent: #87c332;
	--evz-petrol: #052730;
	--evz-line: #e3ebdc;
	--evz-text: #676767;
	display: inline-block;
	padding: 22px 22px 14px;
	background: #ffffff;
	border: 1px solid var(--evz-line);
	border-radius: 14px;
	box-shadow: 0 2px 10px rgba(5, 39, 48, 0.08);
	text-align: center;
	font-family: "Poppins", sans-serif;
}
.evz-qr-box {
	margin: 0 auto;
	border: 4px solid var(--evz-accent);
	border-radius: 10px;
	padding: 10px;
	box-sizing: content-box;
	background: #ffffff;
}
.evz-qr-box img,
.evz-qr-box canvas {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
}
.evz-referral-qr-caption {
	margin: 12px 0 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--evz-petrol);
}

/* ---------------------------------------------------- Newsletter row */

.evz-newsletter-pref {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 16px;
	padding: 14px 20px;
	background: #ffffff;
	border: 1px solid var(--evz-line);
	border-radius: 10px;
	font-size: 14px;
	color: #1b1a1a;
}
.evz-newsletter-pref .evz-inline-action {
	color: var(--evz-accent-dark);
}

/* -------------------------------------------------- Lists + misc */

.evz-active-competitions {
	list-style: none;
	margin: 0;
	padding: 0;
}
.evz-active-competitions li {
	padding: 14px 18px;
	margin: 0 0 10px;
	background: #ffffff;
	border: 1px solid var(--evz-line);
	border-left: 4px solid var(--evz-accent);
	border-radius: 10px;
}
.evz-no-competitions,
.evz-login-required {
	color: var(--evz-text);
}
.evz-login-required a {
	color: var(--evz-accent-dark);
	font-weight: 600;
}

.evz-dashboard :focus-visible,
.evz-tc-form :focus-visible,
.evz-referral-link :focus-visible {
	outline: 2px solid var(--evz-accent-dark);
	outline-offset: 2px;
}

@media (max-width: 600px) {
	.evz-dashboard-competition {
		padding: 20px 18px 18px 30px;
	}
	.evz-dashboard-referral {
		padding: 20px 18px;
	}
	.evz-referral-url-row {
		flex-direction: column;
	}
	.evz-referral-url {
		border-right: 1px solid var(--evz-line);
		border-radius: 10px 10px 0 0;
	}
	.evz-referral-copy {
		border-radius: 0 0 10px 10px;
	}
}