/* EpicPulls Free Entry — entry-mode toggle + free postal entry route
 * for Lottery for WooCommerce single product pages.
 * Brand: navy var(--otg-navy, #14263a), violet var(--otg-violet, #7c3aed). */

.ep-entry-switch {
	margin: 1rem 0;
}

/* Online / Free Postal Entry toggle */
.ep-entry-toggle {
	display: inline-flex;
	background: #efeafb;
	border-radius: 999px;
	padding: 4px;
	gap: 4px;
	max-width: 100%;
}

.ep-entry-toggle__btn {
	border: 0;
	background: transparent;
	color: #64748b;
	font-size: var(--ep-fs-xs, 0.8125rem);
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	line-height: 1.2;
	padding: 10px 20px;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.ep-entry-toggle__btn.is-active {
	background: var(--otg-violet-deep, #6d28d9);
	color: #fff;
}

/* Instructions: hidden until Free Postal Entry is chosen. */
.ep-free-entry-route {
	display: none;
	margin-top: 1rem;
}

.ep-free-entry-route__body {
	font-size: var(--ep-fs-sm, 0.875rem);
	line-height: 1.6;
	color: var(--otg-navy, #14263a);
}

.ep-free-entry-route__body p {
	margin: 0 0 0.75rem;
}

.ep-free-entry-route__body ol,
.ep-free-entry-route__body ul {
	margin: 0 0 0.75rem 1.25rem;
}

/* ---- Postal mode: hide the paid-entry UI, keep the timer + amount sold ---- */

/* Price, the purchase form (question + quantity + add to cart), and any
   stray quantity/price bits. */
.summary.ep-postal-mode .price,
.summary.ep-postal-mode form.cart,
.summary.ep-postal-mode .lty-lottery-range-slider-wrapper,
.summary.ep-postal-mode .lty-lottery-price {
	display: none !important;
}

/* Notices inside the lottery summary are <p> elements — hide them all... */
.summary.ep-postal-mode .lty-lottery-product-summary > p {
	display: none !important;
}

/* ...but keep the "tickets sold" line (the amount sold). */
.summary.ep-postal-mode .lty-lottery-product-summary > p.lty-tickets-sold {
	display: block !important;
}

/* Reveal the instructions. */
.summary.ep-postal-mode .ep-free-entry-route {
	display: block;
}

/* ---- Reorder the giveaway single-product summary to match the reference ----
 * Target order: title, price, question, toggle, timer, tickets-sold,
 * quantity, add-to-cart. The lottery summary and the cart form are set to
 * display:contents so their children join the summary's flex flow and can be
 * interleaved; the <form> still wraps its inputs in the DOM, so it submits. */
.product-type-lottery .summary.entry-summary {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.product-type-lottery .summary .lty-lottery-product-summary,
.product-type-lottery .summary form.cart {
	display: contents;
}

/* Default: anything not explicitly placed goes to the end (never jumps to top). */
.product-type-lottery .summary > *,
.product-type-lottery .summary .lty-lottery-product-summary > *,
.product-type-lottery .summary form.cart > * {
	order: 20;
}

.product-type-lottery .summary > .product_title {
	order: 1;
}
.product-type-lottery .summary > .price {
	order: 2;
}
.product-type-lottery .summary > .woocommerce-product-details__short-description {
	order: 3;
}
.product-type-lottery .summary form.cart > .lty-lottery-question-answer-container {
	order: 4;
}
.product-type-lottery .summary > .ep-entry-switch {
	order: 5;
}
.product-type-lottery .summary .lty-lottery-product-summary > .lty-lottery-end-time-label,
.product-type-lottery .summary .lty-lottery-product-summary > .lty-lottery-date-ranges,
.product-type-lottery .summary .lty-lottery-product-summary > .lty-lottery-time-left-label,
.product-type-lottery .summary .lty-lottery-product-summary > .lty-lottery-countdown-timer {
	order: 6;
}
.product-type-lottery .summary .lty-lottery-product-summary > .lty-tickets-sold,
.product-type-lottery .summary .lty-lottery-product-summary > .lty-lottery-progress-bar {
	order: 7;
}
.product-type-lottery .summary form.cart > .lty-lottery-predefined-buttons-container,
.product-type-lottery .summary form.cart > .lty-lottery-range-slider-wrapper {
	order: 8;
}
.product-type-lottery .summary form.cart > .single_add_to_cart_button {
	order: 9;
}

/* Remove per the reference: the "Question Answers" heading above the question,
 * the "this giveaway will have N winner(s)" line, and the summary notices. */
.product-type-lottery .summary .lty-lottery-question-answer-container > h3 {
	display: none;
}
.product-type-lottery .summary .lty-winners-count,
.product-type-lottery .summary .lty-lottery-status,
.product-type-lottery .summary .lty-minimum-ticket-notice,
.product-type-lottery .summary .lty-maximum-ticket-notice,
.product-type-lottery .summary .lty-minimum-tickets-per-user-notice,
.product-type-lottery .summary .lty-maximum-tickets-per-user-notice,
.product-type-lottery .summary .lty-gift-product-notice {
	display: none;
}

/* Drop the bottom margin under the short description. */
.product-type-lottery .summary .woocommerce-product-details__short-description,
.product-type-lottery .summary .woocommerce-product-details__short-description > *:last-child {
	margin-bottom: 0;
}

/* ---- Single-product timer: dark navy box, matching the product card ----
 * (number + label colours come from the plugin's single-product timer
 * colour options, set to white.) */
.product-type-lottery .summary .lty-lottery-time-left-label {
	display: none; /* label removed from the timer */
}

.product-type-lottery .summary .lty-lottery-countdown-timer {
	display: flex;
	background: transparent; /* no box */
	border-radius: 0;
	padding: 15px 0;
	margin: 0 0 14px;
	border-top: 1px solid var(--otg-line, #ece8f5);
	border-bottom: 1px solid var(--otg-line, #ece8f5);
}

.product-type-lottery .summary .lty-lottery-countdown-timer .lty-lottery-timer {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	text-align: center;
	line-height: 1.25;
	padding: 0 8px;
	border-right: 1px solid var(--otg-line, #ece8f5); /* "|" separator */
}

.product-type-lottery .summary .lty-lottery-countdown-timer .lty-lottery-timer:last-child {
	border-right: 0;
}

.product-type-lottery .summary .lty-lottery-countdown-timer .lty-lottery-timer-content[id^="lty_lottery_"] {
	font-size: var(--ep-fs-lg, 1.125rem);
	font-weight: 700;
	min-height: 1.25em;
}

.product-type-lottery .summary .lty-lottery-countdown-timer .lty-lottery-timer > .lty-lottery-timer-content:last-child {
	font-size: var(--ep-fs-3xs, 0.6875rem);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	opacity: 0.85;
}

/* ---- Single-product progress bar — clean markup from our template override
 * (templates/lottery/single-product/progress-bar.php). No more hiding/reordering
 * the plugin's default spans. The wrapper keeps .lty-lottery-progress-bar so the
 * summary reorder (order:7) still applies. */
.product-type-lottery .summary .otg-progress {
	display: block;
	margin: 0;
}

.product-type-lottery .summary .otg-progress__caption {
	margin: 0 0 6px;
	color: var(--otg-muted, #374758);
	font-size: var(--ep-fs-2xs, 0.75rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.product-type-lottery .summary .otg-progress__caption::before {
	content: '';
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: 5px;
	vertical-align: -2px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%235b6070' viewBox='0 0 16 16'%3E%3Cpath d='M4 4.85v.9h1v-.9H4Zm7 0v.9h1v-.9h-1Zm-7 1.8v.9h1v-.9H4Zm7 0v.9h1v-.9h-1Zm-7 1.8v.9h1v-.9H4Zm7 0v.9h1v-.9h-1Zm-7 1.8v.9h1v-.9H4Zm7 0v.9h1v-.9h-1Z'/%3E%3Cpath d='M1.5 3A1.5 1.5 0 0 0 0 4.5V6a.5.5 0 0 0 .5.5 1.5 1.5 0 1 1 0 3 .5.5 0 0 0-.5.5v1.5A1.5 1.5 0 0 0 1.5 13h13a1.5 1.5 0 0 0 1.5-1.5V10a.5.5 0 0 0-.5-.5 1.5 1.5 0 0 1 0-3A.5.5 0 0 0 16 6V4.5A1.5 1.5 0 0 0 14.5 3h-13ZM1 4.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v1.05a2.5 2.5 0 0 0 0 4.9v1.05a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-1.05a2.5 2.5 0 0 0 0-4.9V4.5Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.product-type-lottery .summary .otg-progress__sold,
.product-type-lottery .summary .otg-progress__max {
	font-weight: 700;
}

/* Track + fill + end marker match the product card exactly (see _shop.scss
 * .lty-lottery-progress-bar-loop): 10px/6px, gradient fill, violet knob. */
.product-type-lottery .summary .otg-progress__track {
	position: relative;
	height: 10px;
	background: var(--otg-track, #e7e1f5);
	border-radius: 6px;
	overflow: visible; /* let the end marker show */
}

.product-type-lottery .summary .otg-progress__fill {
	position: relative;
	display: block;
	height: 100%;
	border-radius: 6px;
	background: linear-gradient(90deg, var(--otg-violet, #7c3aed), var(--otg-violet-purple, #a855f7));
}

.product-type-lottery .summary .otg-progress__fill::after {
	content: '';
	position: absolute;
	right: -7px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	background: var(--otg-violet, #7c3aed);
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(20, 38, 58, 0.3);
}

.product-type-lottery .summary .otg-progress__percent {
	margin: 6px 0 0;
	color: var(--otg-violet-deep, #6d28d9);
	font-size: var(--ep-fs-2xs, 0.75rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: right;
}

/* ---- Giveaway meta bar (below the summary, above the tabs) ---- */
/* The image + summary are floated, so clear them to drop the bar onto its own
   full-width line below (same as the WooCommerce tabs do). */
.ep-giveaway-meta-bar {
	clear: both;
	width: 100%;
	margin: 24px 0;
	text-align: center;
}

.ep-giveaway-meta-bar__inner {
	font-size: var(--ep-fs-xs, 0.8125rem);
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.6;
	text-transform: uppercase;
	color: var(--otg-faint, #64748b);
}

.ep-giveaway-meta-sep {
	margin: 0 10px;
	color: #d6cdea;
}

/* ---- Price: violet + bold, per the design ---- */
.product-type-lottery .summary > .price,
.product-type-lottery .summary > .price .woocommerce-Price-amount,
.product-type-lottery .summary > .price .amount {
	color: var(--otg-violet-deep, #6d28d9) !important;
	font-weight: 700 !important;
}

/* On a sale item the struck-through original steps back to the faint tone. The
   rule above deliberately colours everything inside .price, <del> included, so
   this has to come after it and carry !important to win. */
.product-type-lottery .summary > .price del,
.product-type-lottery .summary > .price del .woocommerce-Price-amount,
.product-type-lottery .summary > .price del .amount {
	color: var(--otg-faint, #64748b) !important;
	font-weight: 600 !important;
}

/* <ins> is underlined by default, which reads as a second strikethrough next to
   the <del> it sits beside. */
.product-type-lottery .summary > .price ins {
	text-decoration: none;
}

/* Question label: dark + prominent (body text is muted). */
.product-type-lottery .summary .lty-lottery-question {
	color: var(--otg-navy, #14263a);
	font-weight: 700;
}

/* ---- Skill question: option rows with a faux radio + violet selected state ----
 * The plugin renders clickable <li> pills (no real radio); the chosen one gets
 * class .lty-selected via JS, so we draw the radio dot with ::before. */
.product-type-lottery .summary ul.lty-lottery-answers {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.product-type-lottery .summary .lty-lottery-answers li {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 !important;
	padding: 14px 18px !important;
	border: 2px solid var(--otg-track, #e7e1f5) !important;
	border-radius: 12px !important;
	background: #fff !important;
	color: var(--otg-navy, #14263a);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.product-type-lottery .summary .lty-lottery-answers li::before {
	content: '';
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid #cfc7e3;
	background: #fff;
	box-sizing: border-box;
	transition: border 0.15s ease;
}

.product-type-lottery .summary .lty-lottery-answers li.lty-selected {
	border-color: var(--otg-violet-deep, #6d28d9) !important;
	background: var(--otg-tint, #f4efff) !important;
	color: var(--otg-plum-deep, #4c1d95);
}

.product-type-lottery .summary .lty-lottery-answers li.lty-selected::before {
	border: 5px solid var(--otg-violet-deep, #6d28d9);
}

/* ---- Quantity range slider (jQuery UI) → navy buttons + violet slider ---- */
.product-type-lottery .summary .lty-lottery-range-slider-wrapper {
	margin-bottom: 40px; /* room for the centred "N tickets" caption */
}

.product-type-lottery .summary .lty-lottery-range-slider-content {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	margin: 8px 0;
}

/* − / + round navy buttons */
.product-type-lottery .summary .lty-lottery-range-slider-btn {
	flex: 0 0 auto;
	width: 40px !important;
	height: 40px !important;
	background: var(--otg-navy, #14263a) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 50% !important;
	/* Glyph metric for the fixed 40px circle, not a text size — stays off the
	   --ep-fs-* ladder on purpose. */
	font-size: 22px !important;
	line-height: 1 !important;
	cursor: pointer;
}

/* Track */
.product-type-lottery .summary .lty-quantity-range-slider {
	flex: 1 1 auto;
	float: none !important;
	width: auto !important;
	height: 10px !important;
	margin: 0 !important;
	background: var(--otg-track, #e7e1f5) !important;
	border-radius: 999px !important;
	position: relative;
}

/* Fill (jQuery UI range element) */
.product-type-lottery .summary .lty-quantity-range-slider .ui-widget-header {
	background: linear-gradient(90deg, var(--otg-violet, #7c3aed), var(--otg-violet-purple, #a855f7)) !important;
	border-radius: 999px !important;
}

/* Handle */
.product-type-lottery .summary .lty-quantity-range-slider .ui-slider-handle {
	width: 26px !important;
	height: 26px !important;
	top: -8px !important;
	margin-left: -13px !important;
	background: #fff !important;
	border: 4px solid var(--otg-violet, #7c3aed) !important;
	border-radius: 50% !important;
	box-shadow: 0 2px 8px rgba(109, 40, 217, 0.4) !important;
}

/* "N tickets" value → plain centred grey caption (not the pink tooltip) */
.product-type-lottery .summary .lty-lottery-range-value {
	left: 50% !important;
	right: auto !important;
	bottom: -28px !important;
	transform: translateX(-50%);
	width: auto !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--otg-faint, #64748b) !important;
	font-size: var(--ep-fs-xs, 0.8125rem) !important;
	white-space: nowrap;
}

.product-type-lottery .summary .lty-lottery-range-value::before {
	display: none !important;
}

/* ---- CTA: full-width, prominent (design) ---- */
.product-type-lottery .summary .single_add_to_cart_button {
	width: 100%;
	padding: 16px 18px !important;
	font-size: var(--ep-fs-base, 1rem) !important;
	border-radius: 12px !important;
	text-align: center;
}

/* ==========================================================================
 * Giveaway tabs accordion + entries table (moved from theme _shop.scss in
 * Phase 4 for portability; colours now come from the --otg-* palette).
 * ========================================================================== */
/* .accordion.ep-giveaway-accordion (two classes) so these --bs-accordion-*
 * overrides beat Bootstrap's own `.accordion` defaults regardless of whether
 * the plugin CSS loads before or after the theme's Bootstrap. */
.accordion.ep-giveaway-accordion {
	--bs-accordion-border-width: 0;
	--bs-accordion-btn-focus-box-shadow: none;
	--bs-accordion-active-bg: transparent;
	--bs-accordion-active-color: var(--otg-navy, #14263a);
	--bs-accordion-btn-bg: transparent;
	--bs-accordion-btn-color: var(--otg-navy, #14263a);
	max-width: 50rem;
	width: 100%;
	margin: 0 auto 5rem auto;
}

.accordion.ep-giveaway-accordion .accordion-item {
	background: transparent;
	border-bottom: 1px solid var(--otg-line, #ece8f5);
}

.accordion.ep-giveaway-accordion .accordion-button {
	padding: 1.125rem 0;
	/* The trigger is a section heading and the visible text lives in this button,
	   not in the <h2> wrapping it — so the button carries the size. It takes the
	   section-title rung, the same one .title-medium and .related.products h2 use,
	   which keeps it clearly above anything its own panel contains. */
	font-size: var(--ep-fs-h3, 1.375rem);
	font-weight: 600;
	color: var(--otg-navy, #14263a);
	background: transparent;
	box-shadow: none;
}

/* Panel content is author-entered WYSIWYG and the levels are not trustworthy:
   the FAQs tab uses h4 for its questions while Prize Description uses h6 for the
   same kind of sub-heading, so the h4s rendered LARGER than the trigger above
   them and the h6s rendered as plain bold body text. Every heading inside a
   panel is the same thing — a sub-heading one step below the trigger — so they
   all take one rung regardless of the level the author picked. */
.accordion.ep-giveaway-accordion .accordion-body h1,
.accordion.ep-giveaway-accordion .accordion-body h2,
.accordion.ep-giveaway-accordion .accordion-body h3,
.accordion.ep-giveaway-accordion .accordion-body h4,
.accordion.ep-giveaway-accordion .accordion-body h5,
.accordion.ep-giveaway-accordion .accordion-body h6 {
	font-size: var(--ep-fs-h4, 1.1875rem);
	line-height: var(--ep-lh-tight, 1.2);
}

.accordion.ep-giveaway-accordion .accordion-button:focus {
	box-shadow: none;
}

/* "+" when collapsed, "−" when open (no chevron, no rotation). */
.accordion.ep-giveaway-accordion .accordion-button::after {
	width: 1.25rem;
	height: 1.25rem;
	background-size: 1.25rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236d28d9' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M8 3.5v9M3.5 8h9'/%3E%3C/svg%3E");
	transform: none;
}

.accordion.ep-giveaway-accordion .accordion-button:not(.collapsed)::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236d28d9' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M3.5 8h9'/%3E%3C/svg%3E");
	transform: none;
}

/* Every panel gets the same borderless, flush padding. */
.accordion.ep-giveaway-accordion .accordion-body {
	padding: 0 0 1.5rem !important;
	color: var(--otg-muted, #374758);
	background: transparent;
	border: 0 !important;
	border-radius: 0;
	margin-top: 0 !important;
}

/* Entries table (ticket logs) inside the accordion. */
.ep-giveaway-accordion .lty-ticket-logs-table {
	width: 100%;
	margin: 0;
	border: 1px solid rgba(20, 38, 58, 0.12);
	border-radius: 0.625rem;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-size: var(--ep-fs-sm, 0.875rem);
}

.ep-giveaway-accordion .lty-ticket-logs-table thead th {
	background: var(--otg-navy, #14263a);
	color: #fff;
	font-weight: 600;
	font-size: var(--ep-fs-xs, 0.8125rem);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-align: left;
	padding: 0.75rem 1rem;
	border: 0;
}

.ep-giveaway-accordion .lty-ticket-logs-table tbody td {
	padding: 0.75rem 1rem;
	border: 0;
	border-top: 1px solid rgba(20, 38, 58, 0.08);
	color: var(--otg-navy, #14263a);
	vertical-align: middle;
}

/* Ticket number: monospace + emphasis so it reads as the key value. */
.ep-giveaway-accordion .lty-ticket-logs-table tbody td:last-child {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-weight: 600;
}

.ep-giveaway-accordion .lty-ticket-logs-table tbody tr:nth-child(even) td {
	background: rgba(20, 38, 58, 0.03);
}

.ep-giveaway-accordion .lty-ticket-logs-table tbody tr:hover td {
	background: rgba(124, 58, 237, 0.12);
}

.ep-giveaway-accordion .lty-ticket-logs-table tfoot td {
	border: 0;
	border-top: 1px solid rgba(20, 38, 58, 0.12);
	padding: 0.75rem 1rem;
	background: transparent;
}

/* Search filter row (when enabled) above the table. */
.ep-giveaway-accordion .lty-ticket-logs-filters {
	display: flex;
	gap: 0.5rem;
	margin: 0 0 1rem;
}

.ep-giveaway-accordion .lty-ticket-logs-filters .lty-ticket-logs-search {
	flex: 1;
	padding: 0.5rem 0.75rem;
	border: 1px solid rgba(20, 38, 58, 0.2);
	border-radius: 0.5rem;
}
