/**
 * Deal roundup pages — loaded by inc/roundup.php on pages that use the
 * `ta-roundup` class on their Kadence rows.
 *
 * Layout, spacing, colours and type sizes live on the Kadence blocks themselves,
 * so they stay editable in the editor. This file covers what the blocks can't:
 * the shared dark tokens, the hero orb, the coupon pill, the collection cards'
 * colours and the Fluent Form's dark styling.
 */

:root {
	--ta-rd-bg: #120d0a;
	--ta-rd-surface: #1c1613;
	--ta-rd-raised: #130e0b;
	--ta-rd-border: #2c231d;
	--ta-rd-text: #ddd4ca;
	--ta-rd-muted: #a3978c;
	--ta-rd-heading: #f6f1ea;
	--ta-rd-cream: #f4efe8;
	--ta-rd-orange: #f98a2c;
	--ta-rd-ink: #140d08;
	--ta-rd-display: 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
	--ta-rd-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--ta-rd-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

.ta-roundup {
	font-family: var(--ta-rd-body);
	color: var(--ta-rd-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.ta-roundup .kt-row-column-wrap {
	position: relative;
	z-index: 1;
}

.ta-roundup :is(h1, h2, h3) {
	font-family: var(--ta-rd-display);
}

.ta-roundup a:focus-visible,
.ta-roundup button:focus-visible,
.ta-roundup [role='button']:focus-visible {
	outline: 2px solid var(--ta-rd-orange);
	outline-offset: 3px;
}

/* Hero ------------------------------------------------------------------- */

/* The theme header is position: fixed, so the hero starts below it. The
   fallbacks match the header's height with and without the promo bar;
   roundup.js replaces them with the measured height. */
.ta-roundup-hero {
	position: relative;
	overflow: hidden;
	padding-top: var(--ta-header-h, 174px);
}

@media (max-width: 1100px) {
	.ta-roundup-hero {
		padding-top: var(--ta-header-h, 88px);
	}
}

/* The moon: an orange sphere with a soft-edged shadow disc biting into it. */
.ta-roundup-hero::before {
	content: '';
	position: absolute;
	top: calc(var(--ta-header-h, 174px) + 8px);
	right: max(-60px, calc(50% - 640px));
	width: min(42vw, 590px);
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		radial-gradient(circle at 24% 78%, #1d140f 0%, #1d140f 47%, rgba(29, 20, 15, 0.6) 50%, rgba(29, 20, 15, 0) 53%),
		radial-gradient(circle at 66% 26%, #f2a050 0%, #e9772a 32%, #d25a15 62%, #9c3a0b 100%);
	box-shadow: 0 0 140px rgba(249, 138, 44, 0.12);
	pointer-events: none;
}

.ta-eyebrow {
	font-family: var(--ta-rd-mono) !important;
	text-transform: uppercase;
}

.ta-eyebrow--dot::before {
	content: '';
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 10px;
	border-radius: 50%;
	background: currentColor;
	vertical-align: 0.12em;
}

/* Section header with the coupon pill on the right ----------------------- */

.ta-copy-pill {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 11px 16px;
	border: 1px dashed rgba(249, 138, 44, 0.45);
	border-radius: 12px;
	background: #19120e;
	cursor: pointer;
	user-select: none;
	transition: border-color 150ms ease, background-color 150ms ease;
}

.ta-copy-pill:hover {
	border-color: var(--ta-rd-orange);
	background: #1f1611;
}

.ta-copy-pill__code {
	color: #f7a65a;
	font-family: var(--ta-rd-mono);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: 0.1em;
}

.ta-copy-pill__hint {
	color: var(--ta-rd-muted);
	font-size: 13px;
	font-weight: 600;
}

.ta-copy-pill.is-copied .ta-copy-pill__hint {
	color: #6fd36b;
}

/* Collections (Atelier Blocks) ------------------------------------------- */

.ta-roundup .darkify-collection {
	--darkify-collection-text: var(--ta-rd-text);
	--darkify-collection-muted: var(--ta-rd-muted);
	--darkify-collection-heading: var(--ta-rd-heading);
	--darkify-collection-surface: var(--ta-rd-surface);
	--darkify-collection-raised: var(--ta-rd-raised);
	--darkify-collection-border: var(--ta-rd-border);
	--darkify-collection-accent: var(--ta-rd-cream);
	--darkify-collection-accent-text: var(--ta-rd-ink);
	--darkify-collection-focus: var(--ta-rd-orange);
	--darkify-collection-highlight: var(--ta-rd-orange);
	--darkify-collection-highlight-text: var(--ta-rd-ink);
	--darkify-collection-live: #6fd36b;
	--darkify-collection-upcoming: #f5b942;
	--darkify-collection-mono: var(--ta-rd-mono);
	--darkify-collection-shadow: none;
	--darkify-collection-shadow-hover: 0 18px 40px rgba(0, 0, 0, 0.35);
	--darkify-collection-featured-surface: #241a13;
	--darkify-collection-featured-border: #3d2c1f;
	--darkify-collection-title-size: 18px;
	font-family: var(--ta-rd-body);
}

.ta-roundup .darkify-collection__title {
	font-family: var(--ta-rd-display);
	letter-spacing: -0.01em;
}

.ta-roundup .is-template-deal .darkify-collection__title {
	font-size: 19px;
}

.ta-roundup .is-template-deal-featured .darkify-collection__title {
	font-size: 17px;
}

.ta-roundup .is-template-deal-featured .darkify-collection__deal-icon {
	width: 42px;
	height: 42px;
	font-size: 15px;
}

.ta-roundup .is-template-deal-featured .darkify-collection__deal-badge {
	padding: 4px 9px;
	font-size: 11.5px;
}

.ta-roundup .darkify-collection__deal-icon {
	font-family: var(--ta-rd-display);
	color: #f7a65a;
}

.ta-roundup .darkify-collection__deal-text {
	color: #b3a79c;
}

/* The filter chips: outlined, with the active one filled cream. */
.ta-roundup .darkify-collection__bar {
	margin-bottom: 28px;
}

.ta-roundup .darkify-collection__filter {
	padding: 9px 18px;
	background: transparent;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--ta-rd-heading);
}

.ta-roundup .darkify-collection__filter:hover {
	border-color: var(--ta-rd-muted);
}

.ta-roundup .darkify-collection__filter-count,
.ta-roundup .darkify-collection__filter.is-active .darkify-collection__filter-count {
	padding: 0;
	background: none;
	font-weight: 400;
	font-size: 13.5px;
	color: var(--ta-rd-muted);
}

.ta-roundup .darkify-collection__filter.is-active .darkify-collection__filter-count {
	color: #6b6158;
}

.ta-roundup .darkify-collection__search {
	max-width: 360px;
}

.ta-roundup .darkify-collection__search-input {
	padding: 13px 44px 13px 22px;
	background: #1a1411;
	color: var(--ta-rd-heading);
	font-size: 15px;
}

.ta-roundup .darkify-collection__more-button {
	border-color: var(--ta-rd-border);
	background: transparent;
	color: var(--ta-rd-heading);
}

/* Call to action and the submit panel ------------------------------------ */

.ta-roundup-cta .kb-btn,
.ta-roundup-cta .wp-block-kadence-singlebtn {
	white-space: nowrap;
}

/* With JavaScript on, the form waits behind the "Submit your deal" buttons.
   Without it the panel simply shows, so the form is never out of reach. */
.ta-js .ta-submit-panel:not(.is-open) {
	display: none;
}

.ta-submit-panel.is-open {
	animation: ta-rd-reveal 360ms ease both;
}

@keyframes ta-rd-reveal {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ta-submit-panel.is-open {
		animation: none;
	}
}

/* Fluent Form, dark. */
.ta-roundup .fluentform .ff-el-input--label label,
.ta-roundup .fluentform .ff-el-input--label {
	color: var(--ta-rd-heading);
	font-size: 14px;
	font-weight: 600;
}

.ta-roundup .fluentform .ff-el-group {
	margin-bottom: 20px;
}

.ta-roundup .fluentform .ff-el-form-control,
.ta-roundup .fluentform select.ff-el-form-control,
.ta-roundup .fluentform textarea.ff-el-form-control {
	padding: 12px 14px;
	border: 1px solid var(--ta-rd-border);
	border-radius: 10px;
	background-color: var(--ta-rd-raised);
	color: var(--ta-rd-heading);
	font-family: var(--ta-rd-body);
	font-size: 15px;
	line-height: 1.4;
	box-shadow: none;
}

.ta-roundup .fluentform .ff-el-form-control::placeholder {
	color: #6f655c;
}

.ta-roundup .fluentform .ff-el-form-control:focus {
	border-color: var(--ta-rd-orange);
	box-shadow: 0 0 0 3px rgba(249, 138, 44, 0.18);
	outline: none;
}

.ta-roundup .fluentform select.ff-el-form-control {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a3978c' stroke-width='1.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	-webkit-appearance: none;
	appearance: none;
}

.ta-roundup .fluentform .ff-el-help-message {
	color: var(--ta-rd-muted);
	font-size: 13px;
	font-style: normal;
}

.ta-roundup .fluentform .ff-el-is-required.asterisk-right label::after {
	color: var(--ta-rd-orange);
}

.ta-roundup .fluentform .ff_file_upload_holder .ff_upload_btn,
.ta-roundup .fluentform .ff_upload_btn.ff-btn {
	border: 1px dashed var(--ta-rd-border);
	border-radius: 10px;
	background: var(--ta-rd-raised);
	color: var(--ta-rd-heading);
}

.ta-roundup .fluentform .ff-el-tc,
.ta-roundup .fluentform .ff_tc_checkbox + div,
.ta-roundup .fluentform .ff-el-tc label {
	color: var(--ta-rd-text);
	font-size: 14px;
}

.ta-roundup .fluentform .ff-btn-submit,
.ta-roundup .fluentform .ff-btn-submit:not(.ff_btn_no_style) {
	padding: 14px 30px;
	border: 0;
	border-radius: 999px;
	background-color: var(--ta-rd-orange) !important;
	color: var(--ta-rd-ink) !important;
	font-family: var(--ta-rd-body);
	font-size: 15px;
	font-weight: 600;
	transition: opacity 150ms ease;
}

.ta-roundup .fluentform .ff-btn-submit:hover {
	opacity: 0.9;
}

.ta-roundup .fluentform .error,
.ta-roundup .fluentform .text-danger {
	color: #ff8a7a;
	font-size: 13px;
}

.ta-roundup .ff-message-success {
	border: 1px solid rgba(111, 211, 107, 0.35);
	border-radius: 12px;
	background: rgba(111, 211, 107, 0.08);
	color: var(--ta-rd-heading);
	box-shadow: none;
}

/* Small screens ---------------------------------------------------------- */

@media (max-width: 1024px) {
	.ta-roundup-hero::before {
		top: calc(var(--ta-header-h, 88px) - 40px);
		right: -160px;
		width: 420px;
		opacity: 0.75;
	}
}

@media (max-width: 767px) {
	.ta-roundup-hero::before {
		top: calc(var(--ta-header-h, 81px) - 70px);
		right: -150px;
		width: 300px;
		opacity: 0.55;
	}

	.ta-roundup .darkify-collection__search {
		max-width: none;
		flex-basis: 100%;
	}

	.ta-copy-pill__code {
		font-size: 17px;
	}
}

/* In-page links (#deals, #submit-deal) land below the fixed header. */
.ta-roundup[id] {
	scroll-margin-top: 96px;
}

html:has(.ta-roundup) {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html:has(.ta-roundup) {
		scroll-behavior: auto;
	}
}

/* ========================================================================
   Site header and footer, dark skin (body.ta-roundup-page)
   The markup is the theme's own header.php / footer.php; only colours change.
   ======================================================================== */

body.ta-roundup-page {
	background-color: var(--ta-rd-bg);
}

/* Header ------------------------------------------------------------------ */

.ta-roundup-page .ta-header,
.ta-roundup-page .ta-header.ta-sticky-menu,
.ta-roundup-page .ta-header.menu-active {
	background-color: rgba(18, 13, 10, 0.92);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	-webkit-backdrop-filter: saturate(140%) blur(12px);
	backdrop-filter: saturate(140%) blur(12px);
}

.ta-roundup-page .ta-header.ta-sticky-menu,
.ta-roundup-page .ta-header.menu-active {
	box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.6);
}

/* The open mobile menu sits over the page, so it gets a solid background. */
.ta-roundup-page .ta-header.menu-active {
	background-color: var(--ta-rd-bg);
}

.ta-roundup-page .ta-header .site-branding img {
	height: 30px;
	width: auto;
}

.ta-roundup-page .ta-header ul li a {
	color: #d9d0c6;
	font-family: var(--ta-rd-body);
	font-weight: 500;
	transition: color 150ms ease;
}

.ta-roundup-page .ta-header ul li a:hover,
.ta-roundup-page .ta-header ul li.current-menu-item > a {
	color: var(--ta-rd-orange);
}

.ta-roundup-page .ta-header #menu-button {
	color: var(--ta-rd-heading);
}

.ta-roundup-page .ta-header .header-cart svg {
	fill: #d9d0c6;
}

.ta-roundup-page .ta-header .header-cart:hover svg {
	fill: var(--ta-rd-orange);
}

.ta-roundup-page .ta-header .header-cart > div {
	background-color: var(--ta-rd-orange);
	color: var(--ta-rd-ink);
}

/* "Login": the outlined orange pill from the design's "Submit your deal". */
.ta-roundup-page .ta-header .ta-btn-secondary {
	padding: 8px 22px !important;
	border: 1px solid rgba(249, 138, 44, 0.7);
	border-radius: 999px;
	background: transparent;
	color: var(--ta-rd-orange);
	font-weight: 600;
}

.ta-roundup-page .ta-header .ta-btn-secondary:hover {
	border-color: var(--ta-rd-orange);
	background: var(--ta-rd-orange);
	color: var(--ta-rd-ink) !important;
}

/* My Account dropdown */
.ta-roundup-page .ta-header .dropdown_menu {
	border: 1px solid var(--ta-rd-border);
	background-color: var(--ta-rd-surface) !important;
}

.ta-roundup-page .ta-header .dropdown_menu::after {
	border-bottom-color: var(--ta-rd-surface) !important;
}

.ta-roundup-page .ta-header .dropdown_menu li a {
	color: var(--ta-rd-text);
}

/* Footer ------------------------------------------------------------------ */

.ta-roundup-page .ta-footer,
.ta-roundup-page .ta-footer.bg-secondary {
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	background-color: #0d0907;
	color: var(--ta-rd-muted);
	font-family: var(--ta-rd-body);
}

.ta-roundup-page .ta-footer h1,
.ta-roundup-page .ta-footer h2,
.ta-roundup-page .ta-footer h3,
.ta-roundup-page .ta-footer h4,
.ta-roundup-page .ta-footer .wp-block-heading {
	color: var(--ta-rd-heading);
	font-family: var(--ta-rd-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
}

.ta-roundup-page .ta-footer ul li a {
	color: #b3a79c;
	transition: color 150ms ease;
}

.ta-roundup-page .ta-footer ul li a:hover {
	color: var(--ta-rd-orange);
}

.ta-roundup-page .ta-footer.bg-secondary form input,
.ta-roundup-page .ta-footer .ff-el-form-control {
	border: 1px solid var(--ta-rd-border) !important;
	border-radius: 10px;
	background-color: var(--ta-rd-surface) !important;
	color: var(--ta-rd-heading) !important;
}

.ta-roundup-page .ta-footer .ff-el-form-control::placeholder {
	color: #6f655c;
}

.ta-roundup-page .ta-footer .ff-el-form-control:focus {
	border-color: var(--ta-rd-orange) !important;
	box-shadow: 0 0 0 3px rgba(249, 138, 44, 0.18);
}

.ta-roundup-page .ta-footer form button,
.ta-roundup-page .ta-footer .ff-btn-submit {
	border-radius: 999px;
	background-color: var(--ta-rd-orange) !important;
	color: var(--ta-rd-ink) !important;
	font-weight: 600;
}

.ta-roundup-page .ta-footer form button:hover {
	opacity: 0.9;
}

.ta-roundup-page .ta-footer .ta-footer-bottom,
.ta-roundup-page .ta-footer.bg-secondary .ta-footer-bottom {
	border-color: rgba(255, 255, 255, 0.08) !important;
	color: #8a7f75;
	font-size: 14px;
}

.ta-roundup-page .ta-footer .ta-footer-bottom a {
	color: var(--ta-rd-orange);
}