/*
Theme Name: Boombox Child Theme
Theme URI: http://boombox.px-lab.com
Template: boombox
Author: Px-Lab
Author URI: https://px-lab.com
Description: SaveOz - Australia's Deal Finder. Child theme for Boombox with custom deals platform design.
Version: 2.0.0
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: boombox
*/

/* ============================================================
   SAVEOZ DESIGN SYSTEM  v2.0
   Platform: Australia's #1 Deals & Coupons Site
   ============================================================
   Color tokens:
     --brand       #FF5F1F   Orange (primary CTA, hotness)
     --brand-dark  #E54E0F   Hover state
     --navy        #0F172A   Deep navy (footer, headings)
     --page-bg     #EFF2F5   Warm page background
     --surface     #FFFFFF   Card surface
     --text        #111827   Body text
     --muted       #6B7280   Secondary text
     --border      #DFE3E8   Subtle dividers
     --success     #10B981   Free / green badges
   ============================================================ */

/* NOTE: Inter font is loaded via wp_enqueue_style in functions.php */


/* ============================================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================================ */

:root {
	/* Brand */
	--brand:        #FF5F1F;
	--brand-dark:   #E54E0F;
	--brand-light:  #FFF1EB;
	--brand-glow:   rgba(255, 95, 31, 0.18);

	/* Palette */
	--navy:         #0F172A;
	--navy-mid:     #1E293B;
	--navy-light:   #334155;
	--slate:        #64748B;
	--slate-light:  #94A3B8;

	/* Surfaces */
	--page-bg:      #EFF2F5;
	--surface:      #FFFFFF;
	--surface-2:    #F8FAFC;
	--border:       #DFE3E8;
	--border-focus: #FF5F1F;

	/* Text */
	--text:         #111827;
	--muted:        #6B7280;
	--faint:        #9CA3AF;

	/* Semantic */
	--success:      #10B981;
	--success-bg:   #ECFDF5;
	--success-text: #065F46;
	--info:         #3B82F6;
	--info-bg:      #EFF6FF;
	--hot:          #EF4444;

	/* Radius */
	--r-sm:         6px;
	--r:            10px;
	--r-lg:         14px;
	--r-pill:       9999px;

	/* Shadow */
	--shadow-xs:    0 1px 2px rgba(0,0,0,0.06);
	--shadow-sm:    0 1px 4px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
	--shadow:       0 4px 16px rgba(0,0,0,0.09), 0 1px 4px rgba(0,0,0,0.05);
	--shadow-lg:    0 8px 32px rgba(0,0,0,0.13), 0 4px 12px rgba(0,0,0,0.07);
	--shadow-brand: 0 4px 20px rgba(255,95,31,0.28);

	/* Motion */
	--ease:         cubic-bezier(0.4, 0, 0.2, 1);
	--ease-out:     cubic-bezier(0, 0, 0.2, 1);
	--dur-fast:     150ms;
	--dur:          220ms;
	--dur-slow:     350ms;

	/* Spacing scale */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
}


/* ============================================================
   2. DARK MODE VARIABLE OVERRIDES (.boombox-mode-on)
   ============================================================ */

.boombox-mode-on {
	--page-bg:      #0B1220;
	--surface:      #182236;
	--surface-2:    #1F2D42;
	--border:       #253348;
	--text:         #EDF2F7;
	--muted:        #8FA3BA;
	--faint:        #5C7A94;
	--brand-light:  #1C1007;
	--shadow-sm:    0 1px 4px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
	--shadow:       0 4px 20px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.35);
	--shadow-lg:    0 8px 36px rgba(0,0,0,0.65), 0 4px 16px rgba(0,0,0,0.4);
	--success-bg:   #064E3B;
	--success-text: #6EE7B7;
}


/* ============================================================
   3. GLOBAL BASE & TYPOGRAPHY
   ============================================================ */

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
	font-size: 15px;
	line-height: 1.6;
	color: var(--text) !important;
	background-color: var(--page-bg) !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-weight: 700 !important;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--text);
}

a {
	color: var(--brand);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease);
}

a:hover {
	color: var(--brand-dark);
}

img {
	max-width: 100%;
	height: auto;
}

button, input, select, textarea {
	font-family: inherit;
}

/* Remove default list styles in post listings */
.post-listing,
.post-listing > ul {
	list-style: none;
	margin: 0;
	padding: 0;
}


/* ============================================================
   4. PAGE LAYOUT
   ============================================================ */

#page-wrapper,
.page-wrapper {
	background-color: var(--page-bg) !important;
}

#main {
	background-color: var(--page-bg) !important;
}

#main .container,
#main > .container {
	padding-top: 20px;
	padding-bottom: 40px;
}

.content-area .post-listing {
	padding: 0;
}

.bb-featured-area.no-items {
	display: none;
}


/* ============================================================
   5. HEADER — saveoz branded two-tier header
   ============================================================ */

header.bb-header,
.bb-header {
	background-color: var(--surface) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 0 var(--border) !important;
	border-bottom: none !important;
}

/* Top tier: logo + search + actions */
.top-header,
.bb-header .top-header,
.bb-header .top-header-component {
	background-color: var(--surface) !important;
	padding: 12px 0 !important;
	border-bottom: 1px solid var(--border);
}

/* Bottom tier: navigation — orange brand bar */
.bottom-header,
.bb-header .bottom-header,
.bb-header .bottom-header-component,
.bb-header.header-desktop .bottom-header.include-in-color-mode {
	background: linear-gradient(135deg, #FF5F1F 0%, #FF7A40 100%) !important;
	border-bottom: 2px solid #E54E0F !important;
	box-shadow: 0 4px 12px rgba(255, 95, 31, 0.3) !important;
}

/* === Logo === */
.custom-logo-link,
.saveoz-logo-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.custom-logo,
.bb-logo-light,
.bb-logo-dark {
	height: 38px;
	width: auto;
	display: block;
}

/* === Logo light/dark switching ===
 * Boombox JS adds .boombox-mode-on to <body> when dark mode is toggled.
 * Default (no .boombox-mode-on): show light logo, hide dark logo.
 * Dark mode (.boombox-mode-on): show dark logo, hide light logo.
 */
body .bb-logo-dark {
	display: none !important;
}

body .bb-logo-light {
	display: block !important;
}

body.boombox-mode-on .bb-logo-light {
	display: none !important;
}

body.boombox-mode-on .bb-logo-dark {
	display: block !important;
}

/* Site title fallback if no image logo */
.site-title a,
.branding .site-title a {
	font-family: 'Inter', sans-serif !important;
	font-weight: 900 !important;
	font-size: 1.5rem;
	color: var(--text) !important;
	letter-spacing: -0.03em;
}

/* === Navigation links in orange bar === */
.bb-header .bottom-header .main-navigation > ul {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
}

.bb-header .bottom-header .main-navigation > ul > li > a {
	display: flex;
	align-items: center;
	height: 46px;
	padding: 0 15px !important;
	color: rgba(255, 255, 255, 0.92) !important;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	border-bottom: 3px solid transparent;
	transition: background-color var(--dur-fast) var(--ease),
	            border-color var(--dur-fast) var(--ease),
	            color var(--dur-fast) var(--ease);
}

.bb-header .bottom-header .main-navigation > ul > li > a:hover {
	background-color: rgba(0, 0, 0, 0.12) !important;
	color: #FFFFFF !important;
	border-bottom-color: rgba(255, 255, 255, 0.6);
}

.bb-header .bottom-header .main-navigation > ul > li.current-menu-item > a {
	background-color: rgba(0, 0, 0, 0.15) !important;
	color: #FFFFFF !important;
	border-bottom-color: #FFFFFF;
}

/* === Dropdowns from nav === */
.bb-header .bottom-header .main-navigation .sub-menu,
.bb-header-navigation .main-navigation .sub-menu {
	background: var(--surface) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--r) !important;
	box-shadow: var(--shadow-lg) !important;
	min-width: 200px;
	overflow: hidden;
}

.bb-header .bottom-header .main-navigation .sub-menu li a {
	color: var(--text) !important;
	font-size: 0.875rem;
	font-weight: 500;
	padding: 10px 18px !important;
	border-bottom: 1px solid var(--border);
	display: block;
}

.bb-header .bottom-header .main-navigation .sub-menu li:last-child a {
	border-bottom: none;
}

.bb-header .bottom-header .main-navigation .sub-menu li a:hover {
	background-color: var(--brand-light) !important;
	color: var(--brand) !important;
}

/* === Header search === */
.bb-header .search-form input[type="search"],
.header-search input[type="search"] {
	background: var(--surface-2) !important;
	border: 1.5px solid var(--border) !important;
	border-radius: var(--r-pill) !important;
	padding: 9px 20px 9px 42px !important;
	font-size: 0.9rem;
	font-family: 'Inter', sans-serif;
	color: var(--text);
	width: 100%;
	transition: border-color var(--dur) var(--ease),
	            box-shadow var(--dur) var(--ease),
	            background-color var(--dur) var(--ease);
}

.bb-header .search-form input[type="search"]:focus,
.header-search input[type="search"]:focus {
	border-color: var(--brand) !important;
	background: var(--surface) !important;
	box-shadow: 0 0 0 3px var(--brand-glow) !important;
	outline: none;
}

/* === Header "Submit Deal" button === */
.bb-header .top-header .bb-button-compose,
.bb-header .top-header .button-compose,
.bb-header .bb-button-compose {
	background: var(--brand) !important;
	color: #FFFFFF !important;
	border: none !important;
	border-radius: var(--r-pill) !important;
	font-weight: 700 !important;
	font-size: 0.875rem;
	padding: 9px 20px !important;
	transition: background-color var(--dur-fast) var(--ease),
	            box-shadow var(--dur-fast) var(--ease),
	            transform var(--dur-fast) var(--ease);
}

.bb-header .top-header .bb-button-compose:hover {
	background: var(--brand-dark) !important;
	box-shadow: var(--shadow-brand);
	transform: translateY(-1px);
}

/* === Dark mode mode-switcher button === */
.bb-mode-switcher {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--surface-2);
	border: 1.5px solid var(--border);
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: background-color var(--dur) var(--ease),
	            border-color var(--dur) var(--ease),
	            box-shadow var(--dur) var(--ease);
}

.bb-mode-switcher:hover {
	background: var(--border);
	border-color: var(--slate-light);
	box-shadow: var(--shadow-xs);
}

.bb-mode-switcher .bb-night-mode-icon,
.bb-mode-switcher .bb-day-mode-icon {
	position: absolute;
	left: 50%;
	font-size: 1rem;
	transition: transform var(--dur-slow) var(--ease);
}

/* === Mobile header === */
.bb-header.header-mobile .header-row {
	min-height: 58px;
	background: var(--surface) !important;
}

.bb-header.header-mobile .bottom-header,
.bb-header.header-mobile.include-in-color-mode .header-row {
	background: linear-gradient(135deg, #FF5F1F 0%, #FF7A40 100%) !important;
}


/* ============================================================
   6. DEAL CARD — distinctive horizontal layout
   ============================================================ */

/* Wrapper list item */
.post-item.post-item-classic {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
}

/* Card shell */
article.huk-deal-card {
	background: var(--surface);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	transition: box-shadow var(--dur) var(--ease),
	            transform var(--dur) var(--ease);
	padding: 0 !important;
	display: block;
	border: 1px solid var(--border);
	position: relative;
}

article.huk-deal-card:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-2px);
}

/* Top accent line for hot deals */
article.huk-deal-card.huk-temp--blazing::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, #FF5F1F, #FF7A40, #FFB347);
	border-radius: var(--r-lg) var(--r-lg) 0 0;
}

/* Blue top accent for cold deals */
article.huk-deal-card.huk-temp--cold::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, #3B82F6, #60A5FA);
	border-radius: var(--r-lg) var(--r-lg) 0 0;
}

/* Inner flex: image LEFT, content RIGHT */
.huk-card-inner {
	display: flex;
	align-items: stretch;
	min-height: 150px;
}

/* === LEFT: Image column === */
.huk-card-image {
	flex-shrink: 0;
	width: 170px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--surface-2);
	border-right: 1px solid var(--border);
	overflow: hidden;
	text-decoration: none !important;
	transition: background-color var(--dur) var(--ease);
}

.huk-card-image img,
.huk-card-image .post-image img {
	width: 170px;
	height: 150px;
	object-fit: contain;
	display: block;
	padding: 10px;
	transition: transform var(--dur-slow) var(--ease);
}

article.huk-deal-card:hover .huk-card-image img {
	transform: scale(1.04);
}

.huk-card-image .post-thumbnail-wrap,
.huk-card-image a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

/* Placeholder icon for no-image posts */
.huk-placeholder-img {
	width: 170px;
	height: 150px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--surface-2);
	color: var(--faint);
	font-size: 2.5rem;
	gap: 6px;
}

/* === RIGHT: Content column === */
.huk-card-content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: 14px 18px;
	gap: 6px;
}

/* --- Top row: badge + time --- */
.huk-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
}

/* --- Deal title --- */
.huk-deal-title {
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
	letter-spacing: -0.01em;
}

.huk-deal-title a {
	color: var(--text);
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.huk-deal-title a:hover {
	color: var(--brand);
}

/* --- Price & metadata bar --- */
.huk-price-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.huk-price {
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--brand);
	letter-spacing: -0.02em;
	line-height: 1;
}

.huk-free-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--success-bg);
	color: var(--success-text);
	font-size: 0.75rem;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: var(--r-pill);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.huk-poster {
	font-size: 0.8rem;
	color: var(--muted);
}

.huk-poster strong {
	color: var(--text);
	font-weight: 600;
}

/* --- Excerpt/description --- */
.huk-description {
	font-size: 0.875rem;
	color: var(--muted);
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	flex: 1;
}

/* --- Card footer: actions + CTA --- */
.huk-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--border);
	margin-top: auto;
}

/* Action icon buttons */
.huk-actions {
	display: flex;
	align-items: center;
	gap: 2px;
}

.huk-action-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 10px;
	border: none;
	background: transparent;
	color: var(--muted);
	font-size: 0.8rem;
	font-weight: 500;
	border-radius: var(--r-sm);
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--dur-fast) var(--ease),
	            color var(--dur-fast) var(--ease);
}

.huk-action-btn:hover {
	background: var(--surface-2);
	color: var(--text);
}

.huk-action-btn .bb-icon {
	font-size: 1rem;
}

.huk-action-count {
	font-size: 0.8rem;
	font-weight: 600;
}

/* Posted time pill */
.huk-posted-time {
	font-size: 0.75rem;
	color: var(--faint);
	white-space: nowrap;
	margin-left: auto;
}

/* === GET DEAL button === */
.huk-get-deal-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--brand);
	color: #FFFFFF !important;
	text-decoration: none !important;
	font-size: 0.875rem;
	font-weight: 700;
	padding: 9px 20px;
	border-radius: var(--r-pill);
	white-space: nowrap;
	flex-shrink: 0;
	border: none;
	cursor: pointer;
	letter-spacing: 0.01em;
	transition: background-color var(--dur-fast) var(--ease),
	            box-shadow var(--dur-fast) var(--ease),
	            transform var(--dur-fast) var(--ease);
}

.huk-get-deal-btn:hover {
	background: var(--brand-dark) !important;
	color: #FFFFFF !important;
	box-shadow: var(--shadow-brand);
	transform: translateY(-1px);
}

.huk-get-deal-btn:active {
	transform: translateY(0);
	box-shadow: none;
}


/* ============================================================
   7. TEMPERATURE / VOTE BADGE
   Wraps Boombox's .bb-post-rating .js-post-point natively.
   ============================================================ */

.huk-temp-badge.bb-post-rating {
	display: inline-flex !important;
	align-items: center;
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
	flex-shrink: 0;
}

.huk-temp-badge .inner {
	display: inline-flex;
	align-items: center;
	gap: 0;
	background: var(--surface-2);
	border: 1.5px solid var(--border);
	border-radius: var(--r-pill);
	padding: 2px;
	height: 34px;
	transition: border-color var(--dur) var(--ease),
	            background-color var(--dur) var(--ease);
}

/* Up/Down vote buttons */
.huk-temp-badge .point-btn {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: var(--muted);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 13px;
	line-height: 1;
	padding: 0;
	flex-shrink: 0;
	transition: background-color var(--dur-fast) var(--ease),
	            color var(--dur-fast) var(--ease),
	            transform var(--dur-fast) var(--ease);
}

.huk-temp-badge .point-btn:hover {
	transform: scale(1.1);
}

.huk-temp-badge .point-btn.up:hover,
.huk-temp-badge .point-btn.up.active {
	background: var(--brand);
	color: #FFFFFF;
}

.huk-temp-badge .point-btn.down:hover,
.huk-temp-badge .point-btn.down.active {
	background: var(--info);
	color: #FFFFFF;
}

/* Temperature count text */
.huk-degrees {
	display: inline-flex !important;
	align-items: center;
	font-size: 0.875rem;
	font-weight: 800;
	color: var(--text);
	padding: 0 7px;
	min-width: 40px;
	text-align: center;
	justify-content: center;
	letter-spacing: -0.02em;
}

.huk-degrees .spinner-pulse {
	display: none;
}

.huk-degree-symbol {
	font-size: 0.75rem;
	color: var(--muted);
	font-weight: 600;
}

/* HOT state (100–199 points) */
.huk-temp--hot .huk-temp-badge .inner,
article.huk-temp--hot .huk-temp-badge .inner {
	border-color: rgba(255,95,31,0.4);
	background: rgba(255,95,31,0.06);
}

.huk-temp--hot .huk-degrees .text,
.huk-temp--hot .huk-degree-symbol,
article.huk-temp--hot .huk-degrees .text,
article.huk-temp--hot .huk-degree-symbol {
	color: var(--brand);
}

/* BLAZING state (200+ points) */
.huk-temp--blazing .huk-temp-badge .inner,
article.huk-temp--blazing .huk-temp-badge .inner {
	border-color: var(--brand);
	background: var(--brand-light);
	box-shadow: 0 0 12px var(--brand-glow);
}

.huk-temp--blazing .huk-degrees .text,
.huk-temp--blazing .huk-degree-symbol,
article.huk-temp--blazing .huk-degrees .text,
article.huk-temp--blazing .huk-degree-symbol {
	color: var(--brand);
}

/* COLD state (negative points) */
.huk-temp--cold .huk-temp-badge .inner,
article.huk-temp--cold .huk-temp-badge .inner {
	border-color: rgba(59,130,246,0.4);
	background: rgba(59,130,246,0.06);
}

.huk-temp--cold .huk-degrees .text,
.huk-temp--cold .huk-degree-symbol,
article.huk-temp--cold .huk-degrees .text,
article.huk-temp--cold .huk-degree-symbol {
	color: var(--info);
}


/* ============================================================
   8. SIDEBAR & WIDGETS
   ============================================================ */

.widget {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	padding: 18px;
	margin-bottom: 14px;
	box-shadow: var(--shadow-xs);
	transition: box-shadow var(--dur) var(--ease);
}

.widget:hover {
	box-shadow: var(--shadow-sm);
}

.widget-title,
.widgettitle {
	font-size: 0.9rem !important;
	font-weight: 700 !important;
	color: var(--text) !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--brand);
	margin-bottom: 14px !important;
}

.widget ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.widget ul li {
	padding: 9px 0;
	border-bottom: 1px solid var(--border);
	font-size: 0.875rem;
	display: flex;
	align-items: center;
	gap: 8px;
}

.widget ul li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.widget ul li a {
	color: var(--text);
	text-decoration: none;
	font-weight: 500;
	flex: 1;
	transition: color var(--dur-fast) var(--ease);
}

.widget ul li a:hover {
	color: var(--brand);
}

/* Category count pills in widget */
.widget .post-count,
.widget ul li .count {
	background: var(--surface-2);
	border: 1px solid var(--border);
	color: var(--muted);
	font-size: 0.7rem;
	font-weight: 700;
	padding: 1px 7px;
	border-radius: var(--r-pill);
	flex-shrink: 0;
}


/* ============================================================
   9. GLOBAL BUTTONS
   ============================================================ */

.bb-btn,
.bb-btn-primary,
input[type="submit"],
.wp-block-button__link,
button[type="submit"] {
	background: var(--brand) !important;
	color: #FFFFFF !important;
	border: none !important;
	border-radius: var(--r-pill) !important;
	font-weight: 700 !important;
	font-family: 'Inter', sans-serif !important;
	padding: 10px 22px !important;
	font-size: 0.9rem;
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease),
	            box-shadow var(--dur-fast) var(--ease),
	            transform var(--dur-fast) var(--ease) !important;
}

.bb-btn:hover,
.bb-btn-primary:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
	background: var(--brand-dark) !important;
	box-shadow: var(--shadow-brand) !important;
	transform: translateY(-1px);
}

/* Secondary ghost button */
.bb-btn.btn-default,
.bb-btn.button-secondary {
	background: transparent !important;
	color: var(--text) !important;
	border: 1.5px solid var(--border) !important;
	box-shadow: none !important;
}

.bb-btn.btn-default:hover {
	background: var(--surface-2) !important;
	border-color: var(--slate-light) !important;
	transform: none;
}

/* More load button */
.more-load-button button {
	background: var(--surface) !important;
	color: var(--brand) !important;
	border: 2px solid var(--brand) !important;
	border-radius: var(--r-pill) !important;
	font-weight: 700 !important;
	padding: 12px 32px !important;
}

.more-load-button button:hover {
	background: var(--brand) !important;
	color: #FFFFFF !important;
}


/* ============================================================
   10. FORMS & INPUTS
   ============================================================ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
textarea,
select {
	background: var(--surface) !important;
	border: 1.5px solid var(--border) !important;
	border-radius: var(--r-sm) !important;
	padding: 9px 14px !important;
	font-size: 0.9rem;
	font-family: 'Inter', sans-serif;
	color: var(--text);
	transition: border-color var(--dur) var(--ease),
	            box-shadow var(--dur) var(--ease);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
	border-color: var(--brand) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px var(--brand-glow) !important;
}

label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text);
	display: block;
	margin-bottom: 5px;
}


/* ============================================================
   11. CATEGORY & TERM BADGES
   ============================================================ */

.bb-post-terms .term-badge,
.bb-post-terms a,
.post-terms a {
	display: inline-flex;
	align-items: center;
	background: var(--surface-2) !important;
	color: var(--slate) !important;
	border: 1px solid var(--border);
	padding: 3px 10px;
	border-radius: var(--r-pill);
	font-size: 0.75rem;
	font-weight: 600;
	text-decoration: none !important;
	letter-spacing: 0.01em;
	transition: background-color var(--dur-fast) var(--ease),
	            color var(--dur-fast) var(--ease),
	            border-color var(--dur-fast) var(--ease);
}

.bb-post-terms a:hover,
.post-terms a:hover {
	background: var(--brand-light) !important;
	color: var(--brand) !important;
	border-color: rgba(255,95,31,0.3);
}

/* Featured badge */
.bb-badge.featured,
.featured-badge {
	background: var(--brand) !important;
	color: #FFFFFF !important;
	border-radius: var(--r-pill);
	font-size: 0.7rem;
	font-weight: 700;
	padding: 3px 8px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}


/* ============================================================
   12. PAGE HEADER (archive titles, category headers)
   ============================================================ */

.bb-page-header {
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	padding: 18px 0;
	margin-bottom: 20px;
}

.bb-page-header h1,
.bb-page-header .page-title {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--text);
	margin: 0;
	letter-spacing: -0.03em;
}

.bb-page-header .page-description,
.bb-page-header .page-subtitle {
	font-size: 0.9rem;
	color: var(--muted);
	margin-top: 4px;
}


/* ============================================================
   13. FOOTER
   ============================================================ */

.footer,
footer.footer {
	background: #1E293B !important;
	color: #94A3B8;
	border-top: 3px solid var(--brand);
}

.footer .container {
	padding-top: 40px;
	padding-bottom: 32px;
}

.footer h1, .footer h2, .footer h3,
.footer h4, .footer h5, .footer h6,
.footer .widget-title,
.footer .widgettitle {
	color: #EDF2F7 !important;
	border-bottom-color: #334155 !important;
	font-size: 0.85rem !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.footer .widget {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
}

.footer a {
	color: #94A3B8 !important;
	font-size: 0.875rem;
	transition: color var(--dur-fast) var(--ease);
}

.footer a:hover {
	color: #FFFFFF !important;
}

.footer ul li {
	border-bottom-color: #2D3F55;
}

.footer ul li a {
	color: #94A3B8 !important;
}

.footer ul li a:hover {
	color: #FFFFFF !important;
}

/* Footer bottom bar */
.footer-bottom,
.footer .footer-bottom {
	background: var(--navy) !important;
	color: #4B6280;
	font-size: 0.8rem;
	padding: 14px 0;
	border-top: 1px solid #162032;
}

.footer-bottom a {
	color: #4B6280 !important;
}

.footer-bottom a:hover {
	color: #94A3B8 !important;
}


/* ============================================================
   14. PAGINATION
   ============================================================ */

.pagination,
.nav-links,
.bb-wp-pagination,
.navigation.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 24px 0;
}

.pagination .page-numbers,
.nav-links .page-numbers,
.bb-wp-pagination .page-numbers,
.navigation.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	background: var(--surface);
	border: 1.5px solid var(--border);
	border-radius: var(--r-sm);
	color: var(--text);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	transition: all var(--dur-fast) var(--ease);
}

.pagination .page-numbers:hover,
.nav-links .page-numbers:hover,
.bb-wp-pagination .page-numbers:hover,
.navigation.pagination .page-numbers:hover {
	background: var(--brand-light);
	border-color: rgba(255,95,31,0.3);
	color: var(--brand);
}

.pagination .page-numbers.current,
.nav-links .page-numbers.current,
.bb-wp-pagination span.current,
.navigation.pagination span.current {
	background: var(--brand) !important;
	border-color: var(--brand) !important;
	color: #FFFFFF !important;
	box-shadow: var(--shadow-brand);
}

.pagination .page-numbers.prev,
.pagination .page-numbers.next,
.nav-links .page-numbers.prev,
.nav-links .page-numbers.next {
	font-size: 0.8rem;
	padding: 0 16px;
}


/* ============================================================
   15. HIDE UNWANTED BOOMBOX ELEMENTS INSIDE HUK CARDS
   ============================================================ */

article.huk-deal-card .entry-footer,
article.huk-deal-card .bb-post-share-box,
article.huk-deal-card .bb-post-affiliate {
	display: none !important;
}


/* ============================================================
   16. RESPONSIVE
   ============================================================ */

/* Mobile (< 640px) */
@media (max-width: 640px) {
	.huk-card-inner {
		flex-direction: column;
	}

	.huk-card-image {
		width: 100%;
		height: 200px;
		border-right: none;
		border-bottom: 1px solid var(--border);
	}

	.huk-card-image img,
	.huk-card-image .post-image img {
		width: 100%;
		height: 200px;
		object-fit: cover;
		padding: 0;
	}

	.huk-placeholder-img {
		width: 100%;
		height: 120px;
	}

	.huk-card-content {
		padding: 12px 14px;
	}

	.huk-deal-title {
		font-size: 1rem;
	}

	.huk-price {
		font-size: 1.2rem;
	}

	.huk-get-deal-btn {
		padding: 8px 14px;
		font-size: 0.825rem;
	}

	.huk-card-footer {
		flex-wrap: wrap;
		gap: 8px;
	}
}

/* Small mobile (< 400px) */
@media (max-width: 400px) {
	.huk-get-deal-btn {
		width: 100%;
		justify-content: center;
	}
}

/* Tablet (640px+) */
@media (min-width: 640px) {
	.huk-card-image {
		width: 180px;
	}

	.huk-card-image img {
		width: 180px;
		height: 160px;
	}
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
	.huk-card-image {
		width: 200px;
	}

	.huk-card-image img {
		width: 200px;
		height: 170px;
	}

	.huk-card-content {
		padding: 16px 20px;
		gap: 8px;
	}

	.huk-deal-title {
		font-size: 1.1rem;
	}
}


/* ============================================================
   17. DARK MODE CARD & COMPONENT OVERRIDES
   ============================================================ */

/* -- Cards -- */
.boombox-mode-on article.huk-deal-card {
	background: var(--surface) !important;
	border-color: var(--border) !important;
}

.boombox-mode-on article.huk-deal-card:hover {
	box-shadow: var(--shadow-lg);
}

.boombox-mode-on .huk-card-image {
	background: var(--surface-2);
	border-right-color: var(--border);
}

.boombox-mode-on .huk-placeholder-img {
	background: var(--surface-2);
	color: var(--faint);
}

.boombox-mode-on .huk-card-footer {
	border-top-color: var(--border);
}

/* -- Temperature badge -- */
.boombox-mode-on .huk-temp-badge .inner {
	background: var(--surface-2);
	border-color: var(--border);
}

.boombox-mode-on .huk-degrees {
	color: var(--text);
}

.boombox-mode-on .huk-degree-symbol {
	color: var(--muted);
}

.boombox-mode-on .huk-temp-badge .point-btn {
	color: var(--muted);
}

.boombox-mode-on .huk-temp--blazing .huk-temp-badge .inner,
.boombox-mode-on article.huk-temp--blazing .huk-temp-badge .inner {
	background: rgba(255, 95, 31, 0.12);
	border-color: rgba(255, 95, 31, 0.45);
}

.boombox-mode-on .huk-temp--cold .huk-temp-badge .inner,
.boombox-mode-on article.huk-temp--cold .huk-temp-badge .inner {
	background: rgba(59, 130, 246, 0.1);
	border-color: rgba(59, 130, 246, 0.35);
}

.boombox-mode-on .huk-temp--cold .huk-degrees .text,
.boombox-mode-on article.huk-temp--cold .huk-degrees .text {
	color: #60A5FA;
}

.boombox-mode-on .huk-temp--cold .huk-degree-symbol,
.boombox-mode-on article.huk-temp--cold .huk-degree-symbol {
	color: #60A5FA;
}

/* -- Text colors -- */
.boombox-mode-on .huk-deal-title a {
	color: var(--text) !important;
}

.boombox-mode-on .huk-deal-title a:hover {
	color: var(--brand) !important;
}

.boombox-mode-on .huk-description {
	color: var(--muted);
}

.boombox-mode-on .huk-posted-time {
	color: var(--faint);
}

.boombox-mode-on .huk-poster {
	color: var(--muted);
}

.boombox-mode-on .huk-poster strong {
	color: var(--text);
}

/* -- Action buttons -- */
.boombox-mode-on .huk-action-btn {
	color: var(--muted);
}

.boombox-mode-on .huk-action-btn:hover {
	background: var(--surface-2);
	color: var(--text);
}

/* -- Header in dark mode -- */
.boombox-mode-on header.bb-header,
.boombox-mode-on .bb-header {
	background: var(--surface) !important;
	box-shadow: 0 2px 10px rgba(0,0,0,0.5), 0 1px 0 var(--border) !important;
}

.boombox-mode-on .bb-header .top-header,
.boombox-mode-on .top-header {
	background: var(--surface) !important;
	border-bottom-color: var(--border);
}

/* Orange nav stays orange in dark mode — override Boombox's night-mode.css */
.boombox-mode-on .bb-header .bottom-header,
.boombox-mode-on .bb-header.header-desktop .bottom-header.include-in-color-mode {
	background: linear-gradient(135deg, #FF5F1F 0%, #FF7A40 100%) !important;
}

.boombox-mode-on .bb-header.header-mobile.include-in-color-mode .header-row {
	background: var(--surface) !important;
}

/* Search in dark */
.boombox-mode-on .bb-header .search-form input[type="search"],
.boombox-mode-on .header-search input[type="search"] {
	background: var(--surface-2) !important;
	border-color: var(--border) !important;
	color: var(--text) !important;
}

/* Sub-menus in dark */
.boombox-mode-on .bb-header .bottom-header .main-navigation .sub-menu,
.boombox-mode-on .bb-header-navigation .main-navigation .sub-menu {
	background: var(--surface) !important;
	border-color: var(--border) !important;
}

.boombox-mode-on .bb-header .bottom-header .main-navigation .sub-menu li a {
	color: var(--text) !important;
	border-bottom-color: var(--border);
}

.boombox-mode-on .bb-header .bottom-header .main-navigation .sub-menu li a:hover {
	background: var(--surface-2) !important;
	color: var(--brand) !important;
}

/* -- Page background & main -- */
.boombox-mode-on #page-wrapper,
.boombox-mode-on .page-wrapper,
.boombox-mode-on #main {
	background: var(--page-bg) !important;
}

/* -- Page header -- */
.boombox-mode-on .bb-page-header {
	background: var(--surface);
	border-bottom-color: var(--border);
}

.boombox-mode-on .bb-page-header h1,
.boombox-mode-on .bb-page-header .page-title {
	color: var(--text);
}

/* -- Widgets in dark -- */
.boombox-mode-on .widget {
	background: var(--surface) !important;
	border-color: var(--border);
	box-shadow: var(--shadow-xs);
}

.boombox-mode-on .widget-title,
.boombox-mode-on .widgettitle {
	color: var(--text) !important;
	border-bottom-color: var(--brand) !important;
}

.boombox-mode-on .widget ul li {
	border-bottom-color: var(--border);
}

.boombox-mode-on .widget ul li a {
	color: var(--text);
}

.boombox-mode-on .widget ul li a:hover {
	color: var(--brand);
}

/* -- Category badges in dark -- */
.boombox-mode-on .bb-post-terms a,
.boombox-mode-on .post-terms a {
	background: var(--surface-2) !important;
	border-color: var(--border);
	color: var(--muted) !important;
}

.boombox-mode-on .bb-post-terms a:hover,
.boombox-mode-on .post-terms a:hover {
	background: rgba(255,95,31,0.12) !important;
	color: var(--brand) !important;
	border-color: rgba(255,95,31,0.3);
}

/* -- Forms in dark -- */
.boombox-mode-on input[type="text"],
.boombox-mode-on input[type="email"],
.boombox-mode-on input[type="password"],
.boombox-mode-on input[type="search"],
.boombox-mode-on textarea,
.boombox-mode-on select {
	background: var(--surface-2) !important;
	border-color: var(--border) !important;
	color: var(--text) !important;
}

/* -- Pagination in dark -- */
.boombox-mode-on .pagination .page-numbers,
.boombox-mode-on .nav-links .page-numbers,
.boombox-mode-on .bb-wp-pagination .page-numbers,
.boombox-mode-on .navigation.pagination .page-numbers {
	background: var(--surface);
	border-color: var(--border);
	color: var(--text);
}

.boombox-mode-on .pagination .page-numbers:hover,
.boombox-mode-on .nav-links .page-numbers:hover {
	background: rgba(255,95,31,0.1);
	border-color: rgba(255,95,31,0.3);
	color: var(--brand);
}

/* -- Headings in dark -- */
.boombox-mode-on h1,
.boombox-mode-on h2,
.boombox-mode-on h3,
.boombox-mode-on h4,
.boombox-mode-on h5,
.boombox-mode-on h6 {
	color: var(--text) !important;
}

/* Free delivery badge dark adaptation */
.boombox-mode-on .huk-free-badge {
	background: var(--success-bg);
	color: var(--success-text);
}

/* More load button in dark */
.boombox-mode-on .more-load-button button {
	background: var(--surface) !important;
	border-color: var(--brand) !important;
	color: var(--brand) !important;
}


/* ============================================================
   18. MICRO-ANIMATIONS & POLISH
   ============================================================ */

/* Smooth card entry */
@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.post-item.post-item-classic {
	animation: fadeUp 0.3s var(--ease) both;
}

.post-item.post-item-classic:nth-child(1) { animation-delay: 0ms; }
.post-item.post-item-classic:nth-child(2) { animation-delay: 40ms; }
.post-item.post-item-classic:nth-child(3) { animation-delay: 80ms; }
.post-item.post-item-classic:nth-child(4) { animation-delay: 120ms; }
.post-item.post-item-classic:nth-child(5) { animation-delay: 160ms; }
.post-item.post-item-classic:nth-child(n+6) { animation-delay: 200ms; }

/* Focus ring — accessibility */
*:focus-visible {
	outline: 3px solid var(--brand);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Loading skeleton shimmer for lazy images */
.huk-card-image:not(:has(img[src])) {
	background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%);
	background-size: 200% 100%;
	animation: skeleton 1.4s ease-in-out infinite;
}

@keyframes skeleton {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}


/* ============================================================
   19. COMMENT SYSTEM — OzBargain Style
   ============================================================ */

/* === Wrapper === */
.sz-comments-wrap {
	margin-top: 24px;
}

.sz-comments-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--brand);
	margin-bottom: 20px;
}

.sz-comments-title {
	font-size: 1.1rem !important;
	font-weight: 700 !important;
	color: var(--text) !important;
	margin: 0 !important;
	letter-spacing: 0 !important;
}

.sz-comments-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--brand);
	color: #fff;
	border-radius: var(--r-pill);
	font-size: 0.8rem;
	font-weight: 800;
	min-width: 26px;
	padding: 2px 8px;
	margin-left: 6px;
}

/* === Comment List === */
.sz-comment-list,
.sz-comment-list ol.children {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* === Individual Comment === */
.sz-comment {
	padding: 0;
	margin: 0;
	border-top: 1px solid var(--border);
}

.sz-comment:first-child {
	border-top: none;
}

/* Nested children */
.sz-comment ol.children {
	padding-left: 52px !important;
	border-left: 2px solid var(--border);
	margin-left: 20px !important;
}

.sz-comment.sz-collapsed > .sz-comment-wrap > .sz-comment-body > .sz-comment-text,
.sz-comment.sz-collapsed > .sz-comment-wrap > .sz-comment-body > .sz-comment-actions,
.sz-comment.sz-collapsed > ol.children {
	display: none;
}

/* === Comment Wrap (flex row: collapse | avatar | body) === */
.sz-comment-wrap {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 0 10px;
	position: relative;
}

/* === Collapse Button === */
.sz-collapse-btn {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: 3px;
	color: var(--muted);
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 9px;
	flex-basis: 22px;
	transition: background-color var(--dur-fast) var(--ease),
	            border-color var(--dur-fast) var(--ease);
}

.sz-collapse-btn:hover {
	background: var(--border);
	border-color: var(--muted);
	color: var(--text);
}

/* === Avatar === */
.sz-comment-avatar {
	flex-shrink: 0;
}

.sz-comment-avatar .sz-avatar,
.sz-comment-avatar img {
	width: 40px !important;
	height: 40px !important;
	border-radius: 50%;
	display: block;
	object-fit: cover;
	border: 2px solid var(--border);
}

/* === Comment Body (takes remaining space) === */
.sz-comment-body {
	flex: 1;
	min-width: 0;
}

/* === Comment Header row === */
.sz-comment-header {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 6px;
}

.sz-comment-meta {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	min-width: 0;
}

/* Author name */
.sz-author-link,
.sz-author-name {
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--text) !important;
	text-decoration: none;
}

.sz-author-link:hover {
	color: var(--brand) !important;
	text-decoration: underline;
}

/* Timestamp */
.sz-comment-time {
	color: var(--muted);
	font-size: 0.8rem;
	white-space: nowrap;
}

/* "OP" badge */
.sz-badge {
	display: inline-block;
	font-size: 0.65rem;
	font-weight: 800;
	padding: 2px 5px;
	border-radius: 3px;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.sz-badge-op {
	background: #10B981;
	color: #fff;
}

/* === Vote Box === */
.sz-vote-box {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
	opacity: 0.7;
	transition: opacity var(--dur-fast) var(--ease);
}

.sz-vote-box:hover {
	opacity: 1;
}

.sz-vote-btn {
	background: none;
	border: 1px solid var(--border);
	border-radius: 3px;
	width: 22px;
	height: 22px;
	font-size: 0.6rem;
	color: var(--muted);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color var(--dur-fast) var(--ease),
	            border-color var(--dur-fast) var(--ease),
	            color var(--dur-fast) var(--ease);
	padding: 0;
	line-height: 1;
}

.sz-vote-btn:hover {
	border-color: var(--brand);
	color: var(--brand);
	background: var(--brand-light);
}

.sz-vote-btn.sz-voted-up {
	background: rgba(16, 185, 129, 0.12);
	border-color: #10B981;
	color: #10B981;
}

.sz-vote-btn.sz-voted-down {
	background: rgba(239, 68, 68, 0.12);
	border-color: #EF4444;
	color: #EF4444;
}

.sz-vote-count {
	font-size: 0.8rem;
	font-weight: 700;
	min-width: 28px;
	text-align: center;
	color: var(--muted);
}

.sz-vote-positive .sz-vote-count {
	color: #10B981;
}

.sz-vote-negative .sz-vote-count {
	color: #EF4444;
}

/* Loading state */
.sz-voting .sz-vote-btn {
	opacity: 0.5;
	pointer-events: none;
}

/* === Pending moderation === */
.sz-pending-notice {
	background: rgba(245, 158, 11, 0.1);
	border-left: 3px solid #F59E0B;
	padding: 6px 10px;
	font-size: 0.8rem;
	color: #92400E;
	border-radius: 0 4px 4px 0;
	margin-bottom: 6px;
}

/* === Comment Text === */
.sz-comment-text {
	font-size: 0.925rem;
	line-height: 1.65;
	color: var(--text);
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.sz-comment-text p {
	margin: 0 0 8px;
}

.sz-comment-text p:last-child {
	margin-bottom: 0;
}

.sz-comment-text a {
	color: var(--brand);
	text-decoration: underline;
}

/* @mention highlight */
.sz-mention {
	color: var(--brand);
	font-weight: 600;
	background: var(--brand-light);
	border-radius: 3px;
	padding: 1px 4px;
	font-size: 0.875em;
}

/* === Actions row (Reply, Edit) === */
.sz-comment-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
	flex-wrap: wrap;
}

.sz-comment-actions .comment-reply-link {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--muted) !important;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	transition: color var(--dur-fast) var(--ease);
}

.sz-comment-actions .comment-reply-link:hover {
	color: var(--brand) !important;
}

.sz-edit-link a {
	font-size: 0.8rem;
	color: var(--muted);
	text-decoration: none;
}

.sz-edit-link a:hover {
	color: var(--brand);
}

/* === "Replying to" banner inside #respond === */
.sz-replying-to {
	background: var(--brand-light);
	border-left: 3px solid var(--brand);
	border-radius: 0 var(--r-sm) var(--r-sm) 0;
	padding: 8px 14px;
	font-size: 0.875rem;
	color: var(--text);
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.sz-cancel-reply-banner {
	background: none;
	border: none;
	color: var(--muted);
	cursor: pointer;
	font-size: 0.9rem;
	margin-left: auto;
	padding: 0 4px;
	line-height: 1;
}

.sz-cancel-reply-banner:hover {
	color: var(--hot);
}

/* === Comment Form === */
.sz-comment-form-wrap {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r);
	padding: 24px;
	margin-top: 28px;
	box-shadow: var(--shadow-sm);
}

.sz-reply-title {
	margin-bottom: 16px;
}

.sz-form-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--text);
}

.sz-form-row {
	display: flex;
	gap: 16px;
	margin-bottom: 14px;
}

.sz-form-col {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sz-label {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--muted);
}

.sz-input,
.sz-comment-textarea {
	width: 100%;
	background: var(--surface-2);
	border: 1.5px solid var(--border);
	border-radius: var(--r-sm);
	padding: 9px 14px;
	font-size: 0.9rem;
	font-family: 'Inter', sans-serif;
	color: var(--text);
	transition: border-color var(--dur) var(--ease),
	            box-shadow var(--dur) var(--ease);
}

.sz-input:focus,
.sz-comment-textarea:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px var(--brand-glow);
}

.sz-textarea-wrap {
	margin-bottom: 14px;
}

.sz-comment-textarea {
	resize: vertical;
	min-height: 100px;
}

.sz-comment-textarea.sz-has-mention {
	border-color: var(--brand);
}

.sz-submit-btn,
#commentform input[type="submit"],
.comment-form input[type="submit"] {
	background: var(--brand) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--r-pill) !important;
	padding: 10px 28px !important;
	font-size: 0.9rem !important;
	font-weight: 700 !important;
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease),
	            box-shadow var(--dur-fast) var(--ease),
	            transform var(--dur-fast) var(--ease) !important;
	font-family: 'Inter', sans-serif !important;
}

.sz-submit-btn:hover,
#commentform input[type="submit"]:hover {
	background: var(--brand-dark) !important;
	box-shadow: var(--shadow-brand) !important;
	transform: translateY(-1px) !important;
}

/* === No comments message === */
.sz-no-comments {
	text-align: center;
	color: var(--muted);
	padding: 24px;
	font-size: 0.9rem;
}

/* === Mobile responsive === */
@media ( max-width: 600px ) {
	.sz-form-row {
		flex-direction: column;
	}

	.sz-comment-wrap {
		gap: 8px;
	}

	.sz-comment-avatar img {
		width: 32px !important;
		height: 32px !important;
	}

	.sz-comment ol.children {
		padding-left: 28px !important;
		margin-left: 8px !important;
	}
}


/* ============================================================
   20. DARK MODE: COMMENT SYSTEM
   ============================================================ */

.boombox-mode-on .sz-comment-form-wrap {
	background: var(--surface) !important;
	border-color: var(--border) !important;
}

.boombox-mode-on .sz-input,
.boombox-mode-on .sz-comment-textarea {
	background: var(--surface-2) !important;
	border-color: var(--border) !important;
	color: var(--text) !important;
}

.boombox-mode-on .sz-comment {
	border-top-color: var(--border);
}

.boombox-mode-on .sz-comment ol.children {
	border-left-color: var(--border);
}

.boombox-mode-on .sz-vote-btn {
	border-color: var(--border);
	color: var(--muted);
}

.boombox-mode-on .sz-collapse-btn {
	background: var(--surface-2);
	border-color: var(--border);
	color: var(--muted);
}

.boombox-mode-on .sz-comment-avatar .sz-avatar,
.boombox-mode-on .sz-comment-avatar img {
	border-color: var(--border);
}

.boombox-mode-on .sz-pending-notice {
	background: rgba(245, 158, 11, 0.08);
	color: #FCD34D;
}

.boombox-mode-on .sz-mention {
	background: rgba(255, 95, 31, 0.1);
}

.boombox-mode-on .sz-replying-to {
	background: rgba(255, 95, 31, 0.08);
}


/* ============================================================
   21. DARK MODE: OVERRIDE BOOMBOX NIGHT-MODE.CSS
   night-mode.css is loaded dynamically AFTER child CSS but our
   .boombox-mode-on selectors have higher specificity than Boombox's
   plain selectors. We use !important throughout to win the cascade.
   ============================================================ */

/* --- Body & root backgrounds (beat night-mode.css body:#2d2d2d) --- */
body.boombox-mode-on {
	background-color: #0B1220 !important;
}

/* page-wrapper / #main — beat night-mode.css's #000000 secondary bg */
.boombox-mode-on .page-wrapper,
.boombox-mode-on #page-wrapper,
.boombox-mode-on #main,
.boombox-mode-on .site-main {
	background-color: #0B1220 !important;
}

/* --- Top header text & icons — ensure readable on dark surface --- */
.boombox-mode-on .bb-header .top-header,
.boombox-mode-on .bb-header .top-header-component {
	color: #EDF2F7 !important;
	background-color: #182236 !important;
}

.boombox-mode-on .bb-header .top-header a,
.boombox-mode-on .bb-header .top-header span,
.boombox-mode-on .bb-header .top-header .bb-icon,
.boombox-mode-on .bb-header .top-header .bb-header-icon,
.boombox-mode-on .bb-header .top-header .header-item,
.boombox-mode-on .bb-header .top-header .header-item a,
.boombox-mode-on .bb-header .top-header .bb-header-meta a,
.boombox-mode-on .bb-header .top-header .main-navigation a,
.boombox-mode-on .bb-header .top-header .main-navigation li,
.boombox-mode-on .bb-header .top-header .h-component,
.boombox-mode-on .bb-header .top-header .h-component a {
	color: #EDF2F7 !important;
}

.boombox-mode-on .bb-header .top-header a:hover,
.boombox-mode-on .bb-header .top-header .main-navigation a:hover {
	color: #FF5F1F !important;
}

/* --- Bottom header: keep orange, override night-mode.css #2d2d2d --- */
.boombox-mode-on .bb-header .bottom-header,
.boombox-mode-on .bb-header.header-desktop .bottom-header,
.boombox-mode-on .bb-header.header-desktop .bottom-header.include-in-color-mode {
	background: linear-gradient(135deg, #FF5F1F 0%, #FF7A40 100%) !important;
	color: #ffffff !important;
}

/* --- Boombox native card backgrounds (all listing types) --- */

/* Beat night-mode.css ".bb-cards-view .bb-card-item → #000000" */
.boombox-mode-on .bb-card-item,
.boombox-mode-on .bb-cards-view .bb-card-item {
	background-color: #182236 !important;
	border-color: #253348 !important;
}

/* Generic post-item for all layout types */
.boombox-mode-on .post-item,
.boombox-mode-on li.post-item,
.boombox-mode-on .post-listing .post-item {
	background-color: #182236 !important;
	border-color: #253348 !important;
}

/* Stream layout */
.boombox-mode-on .post-listing-stream .post-item,
.boombox-mode-on .post-list .post,
.boombox-mode-on .post-list .page {
	background-color: #182236 !important;
	border-color: #253348 !important;
}

/* Grid layout */
.boombox-mode-on .post-listing-grid .post-item,
.boombox-mode-on .post-grid .page {
	background-color: #182236 !important;
	border-color: #253348 !important;
}

/* Mixed / masonry */
.boombox-mode-on .mixed-list .post-item,
.boombox-mode-on .mixed-list .post-item-classic footer {
	background-color: #182236 !important;
	border-color: #253348 !important;
}

/* Post entry title links */
.boombox-mode-on .post-item .entry-title a,
.boombox-mode-on .post-item h2 a,
.boombox-mode-on .post-item h3 a,
.boombox-mode-on .bb-card-item .entry-title a {
	color: #EDF2F7 !important;
}

.boombox-mode-on .post-item .entry-title a:hover,
.boombox-mode-on .post-item h2 a:hover,
.boombox-mode-on .post-item h3 a:hover,
.boombox-mode-on .bb-card-item .entry-title a:hover {
	color: #FF5F1F !important;
}

/* Post meta */
.boombox-mode-on .post-item .post-meta,
.boombox-mode-on .post-item .bb-post-meta,
.boombox-mode-on .post-item .post-author-meta,
.boombox-mode-on .post-item footer {
	color: #8FA3BA !important;
	border-top-color: #253348 !important;
	background-color: transparent !important;
}

.boombox-mode-on .post-item .post-meta a,
.boombox-mode-on .post-item .bb-post-meta a,
.boombox-mode-on .post-item .byline a,
.boombox-mode-on .post-item .author-name {
	color: #8FA3BA !important;
}

/* Voting / rating box — beat night-mode.css #2d2d2d border */
.boombox-mode-on .bb-post-rating .inner,
.boombox-mode-on .bb-post-rating .point-btn,
.boombox-mode-on .bb-post-rating .count .bb-icon {
	background-color: #1F2D42 !important;
	border-color: #253348 !important;
	color: #EDF2F7 !important;
}

.boombox-mode-on .bb-post-rating a {
	background-color: #1F2D42 !important;
	color: #EDF2F7 !important;
}

/* Post entry subtitle / excerpt text */
.boombox-mode-on .entry-sub-title,
.boombox-mode-on .post-item .entry-sub-title {
	color: #8FA3BA !important;
	border-top-color: #253348 !important;
}

/* Page header / archive header */
.boombox-mode-on .bb-page-header,
.boombox-mode-on .bb-page-header .container-bg {
	background-color: #182236 !important;
	border-color: #253348 !important;
}

.boombox-mode-on .bb-page-header h1,
.boombox-mode-on .bb-page-header .page-title,
.boombox-mode-on .bb-page-header .page-subtitle {
	color: #EDF2F7 !important;
}

/* Sidebar widgets */
.boombox-mode-on .widget,
.boombox-mode-on .bb-widget {
	background-color: #182236 !important;
	border-color: #253348 !important;
}

/* More load button */
.boombox-mode-on .more-load-button button,
.boombox-mode-on .more-load-button:before {
	background-color: #182236 !important;
	border-color: #FF5F1F !important;
	color: #FF5F1F !important;
}

/* Comments in dark */
.boombox-mode-on #comments .comment,
.boombox-mode-on #comments .pingback,
.boombox-mode-on #comments .comment-list {
	background-color: #182236 !important;
	border-color: #253348 !important;
}

/* Mobile nav in dark */
.boombox-mode-on .bb-mobile-navigation,
.boombox-mode-on .bb-mobile-navigation .main-navigation,
.boombox-mode-on .bb-mobile-navigation .more-menu-body {
	background-color: #182236 !important;
	border-color: #253348 !important;
}

.boombox-mode-on .bb-mobile-navigation .main-navigation a,
.boombox-mode-on .bb-mobile-navigation .more-menu-body a {
	color: #EDF2F7 !important;
}

/* Mode switcher icon — sun when dark is ON */
.boombox-mode-on .bb-mode-switcher {
	background-color: #1F2D42 !important;
	border-color: #253348 !important;
	color: #EDF2F7 !important;
}