/* WPHostee Competitions for WooCommerce - frontend styles */

.wphc-competition-info {
	margin: 1em 0;
}

.wphc-price-per-ticket-note,
.wphc-ticket-total-note {
	font-size: 11px;
	font-weight: 400;
	opacity: 0.75;
}

.wphc-qty-label {
	margin: 1em 0 0.4em;
	font-weight: 600;
}

.wphc-ticket-total {
	margin: 0.6em 0 1em;
	font-size: 1.15em;
	font-weight: 700;
}

/* Quantity box, Enter Competition button, and Total price share one row -
   see single-competition-add-to-cart.php for the wrapper markup. */
.wphc-purchase-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1em;
	margin: 0.5em 0 1em;
}

.wphc-purchase-row .quantity,
.wphc-purchase-row .wphc-ticket-total,
.wphc-purchase-row .wphc-add-to-cart {
	margin: 0;
}

/* Basket page ("Product" column header relabel + per-row image badge) -
   see frontend.js for why these are injected via JS rather than rendered
   server-side: the basket page is the WooCommerce Cart block, a React
   app, not a PHP template. */
.wc-block-cart-items__header-image.wphc-relabelled {
	white-space: normal;
	text-align: center;
}

.wc-block-cart-item__image.wphc-badged {
	position: relative;
}

/* The Cart block otherwise renders this at a much larger size than the
   underlying image file, blurring it from the upscale. !important because
   the Cart block's own CSS sets width on this same element and loads
   after this stylesheet, so equal specificity would let it win on source
   order alone. */
.wc-block-cart-item__image.wphc-badged img {
	width: 100px !important;
	height: 100px !important;
	object-fit: cover;
}

.wphc-cart-image-ticket-badge {
	position: absolute;
	left: 50%;
	bottom: -8px;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #054ba6;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.wphc-cart-image-ticket-badge svg {
	width: 16px;
	height: 16px;
	color: #fff;
}

.wphc-ticket-total-amount {
	color: #054ba6;
}

/* Shared "Enter Competition" button - deliberately self-contained rather
   than relying on the theme's generic .button class, since that class is
   overridden to an icon-only style in the shop-loop context on this site
   and its appearance elsewhere isn't guaranteed either. */
.wphc-enter-competition-button {
	display: inline-block;
	margin-top: 0.5em;
	padding: 0.65em 1.4em;
	background: #054ba6 !important;
	color: #fff !important;
	text-decoration: none;
	border-radius: 6px;
	font-weight: 600;
	text-align: center;
	transition: background-color 0.15s ease;
}

.wphc-enter-competition-button:hover,
.wphc-enter-competition-button:focus {
	background: #04408d !important;
	color: #fff !important;
}

.wphc-enter-competition-button.is-closed,
.wphc-enter-competition-button.is-closed:hover,
.wphc-enter-competition-button.is-closed:focus {
	background: #b0b0b0 !important;
	color: #f0f0f0 !important;
}

/* Shop/archive cards - competition products only. The theme's own
   icon-only add-to-cart overlay (and its empty hover-overlay wrapper,
   which would otherwise be left showing as a blank box) is hidden here
   rather than fought with PHP hooks, since it's a single hardcoded
   callback shared by every product type. !important is needed because
   the theme's own display rule for it is itself !important. */
.product-type-competition .overlay-container {
	display: none !important;
}

.wphc-shop-card-details {
	margin: 0.75em 0;
	/* The theme's own card layout (li.product) is a column flexbox with
	   align-items:flex-start - WooCommerce's own title/price elements get
	   a width:100% rule (from WooCommerce/theme CSS) so they stretch to
	   the card's full width and then center their own text; without the
	   same treatment, this element would otherwise just shrink to its own
	   content's width and sit flush against that flex-start edge, however
	   the theme happens to align things by default. align-self:stretch
	   matches what WooCommerce's own elements already get here, rather
	   than introducing an alignment rule of our own. */
	align-self: stretch;
}

.wphc-shop-card-details .wphc-countdown-label {
	font-size: 0.72em;
	margin-bottom: 0.5em;
}

.wphc-shop-card-details .wphc-countdown-timer {
	gap: 0.4em;
	/* display:flex positions its own children via justify-content, which
	   (unlike block-level content) ignores the ambient text-align the
	   theme/WooCommerce already put in effect for this card - centered,
	   here - so it has to be set explicitly to actually follow it. */
	justify-content: center;
}

.wphc-shop-card-details .wphc-countdown-segment {
	min-width: 2.6em;
	padding: 0.35em 0.15em;
}

.wphc-shop-card-details .wphc-countdown-value {
	font-size: 1.1em;
}

.wphc-shop-card-details .wphc-countdown-unit {
	font-size: 0.6em;
}

.wphc-shop-card-details .wphc-progress {
	margin: 0.6em 0 0.4em;
}

.wphc-shop-card-details .wphc-shop-enter-button {
	margin-top: 0.6em;
}

/* "Ticket Price Drop" badge - competition products only. Higher
   specificity than the theme's ".woocommerce span.onsale" rule so it
   doesn't need !important. */
.woocommerce span.onsale.wphc-price-drop-badge {
	background: #a5d6a7;
	color: #1b5e20;
}

/* [wphc_competitions] grid */
.wphc-competitions-filter-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 0 0 1.25em;
}

.wphc-competitions-filter-btn {
	background: rgba(0, 0, 0, 0.05);
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 0.5em 1.1em;
	font-size: 0.9em;
	font-weight: 600;
	color: inherit;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.wphc-competitions-filter-btn:hover {
	background: rgba(5, 75, 166, 0.12);
}

.wphc-competitions-filter-btn.is-active {
	background: #054ba6;
	color: #fff;
}

.wphc-competitions-filter-btn:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}

/* Countdown */
.wphc-countdown .wphc-countdown-label {
	font-weight: 600;
	margin-bottom: 1em;
	text-transform: uppercase;
	font-size: 0.85em;
	letter-spacing: 0.04em;
}

.wphc-countdown-timer {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
}

.wphc-countdown-segment {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 3.5em;
	padding: 0.5em 0.25em;
	background: rgba(0, 0, 0, 0.05);
	border-radius: 6px;
}

.wphc-countdown-value {
	font-size: 1.4em;
	font-weight: 700;
	line-height: 1.1;
}

.wphc-countdown-unit {
	font-size: 0.7em;
	text-transform: uppercase;
	opacity: 0.7;
}

.wphc-countdown-live-badge:not([hidden]),
.wphc-countdown-closed-badge:not([hidden]) {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	margin-left: 0.5em;
	padding: 0.25em 0.75em;
	color: #fff;
	font-size: 1.1em;
	font-weight: 800;
	letter-spacing: 0.03em;
	border-radius: 999px;
	vertical-align: middle;
	animation: wphc-badge-pulse 2s ease-in-out infinite;
}

.wphc-countdown-live-badge {
	background: #4caf50;
}

.wphc-countdown-closed-badge {
	background: #e64a19;
}

.wphc-countdown-live-badge svg,
.wphc-countdown-closed-badge svg {
	width: 0.95em;
	height: 0.95em;
	flex: 0 0 auto;
}

@keyframes wphc-badge-pulse {
	0%, 100% {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		opacity: 0.65;
		transform: scale(1.06);
	}
}

/* Progress bar */
.wphc-progress {
	margin: 0.75em 0 1em;
}

.wphc-progress-track {
	background: rgba(0, 0, 0, 0.08);
	border-radius: 999px;
	height: 10px;
	overflow: hidden;
}

.wphc-progress-fill {
	background: #2e7d32;
	height: 100%;
	transition: width 0.3s ease;
}

.wphc-progress-label {
	font-size: 0.85em;
	margin-top: 0.35em;
	opacity: 0.8;
}

/* Competition facts */
.wphc-competition-facts {
	list-style: none;
	margin: 1.1em 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55em;
}

.wphc-competition-fact {
	display: flex;
	align-items: center;
	gap: 0.75em;
	padding: 0.55em 0.9em;
	background: rgba(46, 125, 50, 0.07);
	border-left: 3px solid #2e7d32;
	border-radius: 6px;
	font-size: 0.95em;
}

.wphc-fact-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.1em;
	height: 2.1em;
	border-radius: 50%;
	background: #2e7d32;
	color: #fff;
}

.wphc-fact-icon svg {
	width: 60%;
	height: 60%;
	display: block;
}

.wphc-fact-text {
	font-weight: 500;
}

/* Free entry */
.wphc-free-entry {
	margin: 1.5em 0;
	padding: 1em;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 6px;
}

.wphc-free-entry h3 {
	margin-top: 0;
}

.wphc-free-entry-terms {
	font-size: 0.85em;
	opacity: 0.75;
}

/* Unavailable notice */
.wphc-unavailable-notice {
	font-weight: 600;
	padding: 0.75em 1em;
	background: rgba(0, 0, 0, 0.05);
	border-radius: 6px;
	display: inline-block;
}

/* Question fieldset */
.wphc-question,
.wphc-ticket-mode {
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 6px;
	padding: 0.75em 1em 1em;
	margin: 0 0 1em;
}

.wphc-question legend,
.wphc-ticket-mode legend {
	font-weight: 600;
	padding: 0 0.4em;
}

.wphc-question-option,
.wphc-ticket-mode label {
	display: block;
	margin: 0.4em 0;
	cursor: pointer;
}

/* Help tooltips. display/color/background are !important because some
   contexts this appears in (e.g. WooCommerce's .product_meta, where the
   SKU tooltip lives) have their own theme CSS that otherwise overrides
   the "?" to a dark grey nearly invisible against its own circle. */
.wphc-help-tip {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 1.15em;
	height: 1.15em;
	border-radius: 50%;
	background: #666 !important;
	color: #fff !important;
	font-size: 0.75em;
	font-weight: 700;
	line-height: 1;
	cursor: help;
	margin-left: 0.4em;
	position: relative;
	vertical-align: middle;
}

.wphc-help-tip .wphc-tooltip-content {
	display: none;
	position: absolute;
	bottom: 140%;
	left: 50%;
	transform: translateX(-50%);
	background: #1d2327;
	color: #fff;
	padding: 0.6em 0.8em;
	border-radius: 4px;
	font-size: 0.85em;
	font-weight: 400;
	width: 240px;
	max-width: 70vw;
	z-index: 20;
	line-height: 1.45;
	text-align: left;
	white-space: normal;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.wphc-help-tip:hover .wphc-tooltip-content,
.wphc-help-tip:focus .wphc-tooltip-content,
.wphc-help-tip:focus-visible .wphc-tooltip-content {
	display: block;
}

/* Online Entry / Free Postal Entry tabs */
.wphc-entry-tabs {
	margin: 0 0 1em;
}

.wphc-entry-tab-nav {
	display: flex;
	gap: 0.25em;
	border-bottom: 1px solid rgba(0, 0, 0, 0.15);
	margin-bottom: 1em;
}

.wphc-entry-tab-btn {
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
	padding: 0.6em 1em;
	font-size: 1em;
	font-weight: 600;
	cursor: pointer;
	color: rgba(0, 0, 0, 0.55);
}

.wphc-entry-tab-btn.is-active {
	color: inherit;
	border-bottom-color: #2e7d32;
}

.wphc-entry-tab-btn:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}

.wphc-entry-tab-panel[hidden] {
	display: none;
}

.wphc-free-entry-text p {
	margin: 0 0 1em;
}

.wphc-free-entry-terms-link {
	font-size: 0.9em;
	opacity: 0.8;
}

.wphc-required {
	color: #c0392b;
}

/* Ticket selector */
.wphc-ticket-selector {
	margin: 0 0 1em;
}

.wphc-ticket-selector[hidden] {
	display: none;
}

.wphc-ticket-selector-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	margin-bottom: 0.5em;
}

.wphc-ticket-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35em;
	max-height: 260px;
	overflow-y: auto;
	padding: 0.5em;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 6px;
}

.wphc-ticket-btn {
	min-width: 3.4em;
	padding: 0.4em 0.3em;
	font-size: 0.85em;
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	text-align: center;
}

.wphc-ticket-btn:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 1px;
}

.wphc-ticket-btn[data-available="0"] {
	background: rgba(0, 0, 0, 0.08);
	color: rgba(0, 0, 0, 0.4);
	cursor: not-allowed;
	text-decoration: line-through;
}

.wphc-ticket-btn[aria-pressed="true"] {
	background: #2e7d32;
	color: #fff;
	border-color: #2e7d32;
}

.wphc-ticket-selected-count {
	font-weight: 600;
	margin: 0.5em 0 0;
}

.wphc-ticket-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	margin-top: 0.5em;
	font-size: 0.8em;
	opacity: 0.8;
}

.wphc-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
}

.wphc-swatch {
	width: 0.9em;
	height: 0.9em;
	border-radius: 3px;
	display: inline-block;
	border: 1px solid rgba(0, 0, 0, 0.25);
}

.wphc-swatch-available { background: #fff; }
.wphc-swatch-selected { background: #2e7d32; border-color: #2e7d32; }
.wphc-swatch-taken { background: rgba(0, 0, 0, 0.08); }

/* Winners list - purely informational, nothing in here is ever a link or
   button, matching the read-only "trophy shelf" design it's modelled on. */
.wphc-winners-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.5em;
}

.wphc-winner-card {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
	cursor: default;
}

.wphc-winner-card-photo {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.04);
}

.wphc-winner-card-photo .wphc-winner-photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
	border-radius: 0;
}

.wphc-winner-card-body {
	padding: 1em 1.1em 1.2em;
}

.wphc-winner-name {
	margin: 0 0 0.3em;
	font-size: 1.1em;
	font-weight: 700;
	color: #054ba6;
}

.wphc-winner-competition {
	margin: 0 0 0.9em;
	color: rgba(0, 0, 0, 0.6);
	font-size: 0.95em;
}

.wphc-winner-ticket {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: rgba(0, 0, 0, 0.65);
}

.wphc-winner-ticket svg {
	width: 1.3em;
	height: 1.3em;
	flex: 0 0 auto;
	color: #054ba6;
}

.wphc-winner-ticket-number {
	font-weight: 700;
	color: #000;
}

/* Winners-list photo upload panel (My Account) */
.wphc-winners-photo-panel {
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	padding: 1.2em;
	margin: 0 0 1.5em;
}

.wphc-winners-photo-panel h3 {
	margin-top: 0;
}

.wphc-winners-photo-intro {
	opacity: 0.75;
	font-size: 0.9em;
	max-width: 60ch;
}

.wphc-winners-photo-current {
	display: flex;
	align-items: center;
	gap: 1em;
	margin: 1em 0;
}

.wphc-winners-photo-current .wphc-winner-photo {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	object-fit: cover;
}

.wphc-winners-photo-source {
	font-size: 0.85em;
	opacity: 0.75;
}

.wphc-winners-photo-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75em;
}

.wphc-winners-photo-remove-form {
	margin-top: 0.6em;
}

.wphc-winners-photo-remove-btn {
	background: none;
	border: none;
	color: #c0392b;
	text-decoration: underline;
	cursor: pointer;
	padding: 0;
	font-size: 0.85em;
}

/* My Account */
.wphc-my-competitions-table th,
.wphc-my-competitions-table td {
	text-align: left;
	padding: 0.6em 0.5em;
}

.wphc-winner-badge {
	display: inline-block;
	background: #f1c40f;
	color: #4a3b00;
	font-size: 0.75em;
	font-weight: 700;
	padding: 0.15em 0.5em;
	border-radius: 999px;
	margin-left: 0.4em;
}

@media (max-width: 600px) {
	.wphc-my-competitions-table thead {
		display: none;
	}
	.wphc-my-competitions-table,
	.wphc-my-competitions-table tbody,
	.wphc-my-competitions-table tr,
	.wphc-my-competitions-table td {
		display: block;
		width: 100%;
	}
	.wphc-my-competitions-table tr {
		margin-bottom: 1em;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	}
	.wphc-my-competitions-table td::before {
		content: attr(data-title);
		font-weight: 600;
		display: block;
		font-size: 0.75em;
		opacity: 0.7;
	}
}