/*
Theme Name: OTO Modern
Theme URI: https://officetemplatesonline.com
Author: Office Templates Online
Author URI: https://officetemplatesonline.com
Description: A modern, fast, template-marketplace redesign of the "oto" theme. Child theme of oto — inherits all SEO/schema logic, custom post types, download-manager integration and shortcodes from the parent; templates and styling are rebuilt from scratch on a lightweight, Bootstrap-free CSS grid.
Template: oto
Version: 2.0.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: oto-modern
*/

/* =========================================================
   1. Design tokens
   ========================================================= */
:root{
	/* same blue as the [claire_author_box] component, for site-wide consistency */
	--brand-primary: #1e73be;
	--brand-primary-dark: #175f9c;
	--brand-primary-light: #eef6ff;
	--brand-secondary: #64a9ff;
	--brand-accent: #16a34a;
	--brand-accent-dark: #15803d;
	--brand-accent-light: #eafbf1;

	--link-color: var(--brand-primary);

	--ink-900: #0f172a;
	--ink-800: #1e2536;
	--ink-700: #334155;
	--ink-500: #475569;
	--ink-400: #64748b;

	--surface: #ffffff;
	--surface-alt: #f8fafc;
	--border-color: #e6ecf3;

	--radius-lg: 20px;
	--radius-md: 14px;
	--radius-sm: 9px;

	--shadow-sm: 0 1px 3px rgba(15, 23, 42, .07);
	--shadow-md: 0 12px 30px rgba(15, 23, 42, .11);
	--shadow-lg: 0 24px 54px rgba(15, 23, 42, .16);

	--font-heading: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
	--font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

	--gutter: 20px;
}

/* =========================================================
   2. Reset / base
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
	margin: 0;
	font-family: var(--font-body);
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--ink-700);
	background: var(--surface);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	overflow-wrap: break-word;
}
h1,h2,h3,h4,h5,h6{
	font-family: var(--font-heading);
	color: var(--ink-900);
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.25;
	margin: 0 0 .6em;
}
h1{ font-size: clamp(1.7rem, 1.3rem + 2vw, 2.5rem); }
p{ margin: 0 0 1.1em; }
ul, ol{ margin: 0 0 1.1em; }
a{ color: var(--link-color); text-decoration: none; }
a:hover{ color: var(--brand-primary-dark); }
img, iframe, video, embed, object{ max-width: 100%; height: auto; }
img{ display: block; }
button{ font-family: inherit; cursor: pointer; }
input, textarea{ font-family: inherit; }
table{ width: 100%; border-collapse: collapse; margin-bottom: 1.5em; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table th, table td{ border: 1px solid var(--border-color); padding: 8px 12px; }

.screen-reader-text, .skip-link{
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link:focus{
	position: fixed !important; width: auto; height: auto;
	clip: auto; z-index: 10000;
	background: var(--ink-900); color: #fff;
	padding: 10px 18px; border-radius: var(--radius-sm);
	top: 10px; left: 10px;
}
a:focus-visible, button:focus-visible, input:focus-visible{
	outline: 2px solid var(--brand-primary);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
	html{ scroll-behavior: auto; }
	*{ animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* =========================================================
   3. Layout primitives
   ========================================================= */
.wrap{
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.wrap--narrow{ max-width: 860px; }

.section{ padding: 46px 0; }
.section--alt{ background: var(--surface-alt); }
.section-title{ font-size: clamp(1.3rem, 1rem + 1.2vw, 1.8rem); margin-bottom: 22px; }
.section-title--center{ text-align: center; }

.layout{
	display: grid;
	grid-template-columns: 1fr;
	gap: 34px;
	padding-top: 20px;
	padding-bottom: 60px;
	align-items: start;
}
.layout__main{ min-width: 0; }
.layout__aside{ min-width: 0; }
@media (min-width: 1024px){
	.layout{ grid-template-columns: minmax(0, 1fr) 320px; }
}

/* =========================================================
   4. Card grid (template thumbnails everywhere)
   ========================================================= */
.tpl-grid{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: var(--gutter);
}
.tpl-grid--dense{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.tpl-grid--related{ grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin-top: 10px; }
.tpl-grid__ad{ grid-column: 1 / -1; text-align: center; }

.tpl-card{
	background: var(--surface);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.tpl-card:hover{
	transform: translateY(-5px);
	box-shadow: var(--shadow-md);
	border-color: transparent;
}
.tpl-card__media{
	display: block;
	position: relative;
	aspect-ratio: 4/5;
	overflow: hidden;
	background: var(--surface-alt);
}
.tpl-card__media img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.tpl-card:hover .tpl-card__media img{ transform: scale(1.08); }
.tpl-card__badge{
	position: absolute; top: 10px; left: 10px; z-index: 2;
	background: rgba(15,23,42,.85);
	color: #fff;
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	padding: 4px 10px;
	border-radius: 999px;
}
.tpl-card__badge--new{ background: var(--brand-accent); }
.tpl-card__badge--cat{
	background: var(--brand-primary);
	transition: background-color .15s ease, transform .15s ease;
}
.tpl-card__badge--cat:hover{
	background: var(--brand-primary-dark);
	color: #fff;
	transform: translateY(-1px);
}
.tpl-card__body{ padding: 14px 16px 16px; flex: 1; }
.tpl-card__title{
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	margin: 0;
	font-family: var(--font-heading);
}
.tpl-card__title a{ color: var(--ink-900); }
.tpl-card__title a:hover{ color: var(--brand-primary); }
.tpl-card__excerpt{ margin: 8px 0 0; font-size: .88rem; color: var(--ink-500); }
.tpl-card__link{ color: var(--ink-700); font-weight: 500; }
.tpl-card__link:hover{ color: var(--brand-primary); }

/* Special Collections — curated hub cards */
.tpl-grid--collections{ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.tpl-card--collection{
	position: relative;
	overflow: hidden;
	background: var(--surface);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tpl-card--collection:hover{
	transform: translateY(-6px);
	box-shadow: 0 18px 36px rgba(15, 23, 42, .12);
	border-color: rgba(30, 115, 190, .2);
}

.tpl-card--collection .tpl-card__media{
	aspect-ratio: 16/9;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Glassmorphism count badge */
.tpl-card--collection .tpl-card__badge{
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 4;
	background: rgba(15, 23, 42, 0.65);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #ffffff;
	font-size: .72rem;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	letter-spacing: .02em;
}

/* Illustrated Hero Cover when no post image exists */
.tpl-card__media--hero{
	position: relative;
	width: 100%;
	height: 125px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Background watermark shapes */
.tpl-card__media--hero::before{
	content: "";
	position: absolute;
	width: 130px;
	height: 130px;
	right: -20px;
	bottom: -30px;
	border: 2px solid rgba(255, 255, 255, 0.15);
	border-radius: 24px;
	transform: rotate(25deg);
	pointer-events: none;
}
.tpl-card__media--hero::after{
	content: "";
	position: absolute;
	width: 80px;
	height: 80px;
	left: -15px;
	top: -20px;
	border: 2px solid rgba(255, 255, 255, 0.12);
	border-radius: 50%;
	pointer-events: none;
}

/* Glass icon circle */
.tpl-card__hero-icon{
	position: relative;
	z-index: 2;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.22);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
	transition: transform .3s ease, background-color .3s ease;
}
.tpl-card__hero-icon svg{
	width: 24px;
	height: 24px;
}
.tpl-card--collection:hover .tpl-card__hero-icon{
	transform: scale(1.12);
	background: rgba(255, 255, 255, 0.32);
}

/* Color Themes for Special Collection Hero Cover */
.tpl-card--collection-blue .tpl-card__media--hero{
	background: linear-gradient(135deg, #1e73be 0%, #0284c7 100%);
}
.tpl-card--collection-indigo .tpl-card__media--hero{
	background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
}
.tpl-card--collection-emerald .tpl-card__media--hero{
	background: linear-gradient(135deg, #047857 0%, #10b981 100%);
}
.tpl-card--collection-amber .tpl-card__media--hero{
	background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%);
}
.tpl-card--collection-rose .tpl-card__media--hero{
	background: linear-gradient(135deg, #be123c 0%, #f43f5e 100%);
}
.tpl-card--collection-cyan .tpl-card__media--hero{
	background: linear-gradient(135deg, #0369a1 0%, #06b6d4 100%);
}
.tpl-card--collection-violet .tpl-card__media--hero{
	background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 100%);
}
.tpl-card--collection-gold .tpl-card__media--hero{
	background: linear-gradient(135deg, #92400e 0%, #d97706 100%);
}
.tpl-card--collection-teal .tpl-card__media--hero{
	background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
}

.tpl-card--collection .tpl-card__body{ padding: 18px 20px 20px; }
.tpl-card--collection .tpl-card__title{ font-size: 1.08rem; font-weight: 700; margin-bottom: 6px; line-height: 1.35; }
.tpl-card--collection .tpl-card__excerpt{ margin-bottom: 16px; font-size: .88rem; color: var(--ink-500); line-height: 1.55; }
.tpl-card__cta{
	display: inline-flex; align-items: center; gap: 6px;
	font-weight: 700; font-size: .88rem;
	color: var(--brand-primary);
}
.tpl-card__cta span{ transition: transform .2s ease; }
.tpl-card--collection:hover .tpl-card__cta{ color: var(--brand-primary-dark); }
.tpl-card--collection:hover .tpl-card__cta span{ transform: translateX(4px); }

.tpl-card--thumb .tpl-card__media{ aspect-ratio: 3/4; }
.tpl-card__overlay{
	position: absolute; inset: 0;
	display: flex; align-items: flex-end; justify-content: center;
	padding-bottom: 18px;
	background: linear-gradient(180deg, transparent 40%, rgba(15,23,42,.72) 100%);
	opacity: 0;
	transition: opacity .22s ease;
}
.tpl-card:hover .tpl-card__overlay{ opacity: 1; }
.tpl-card__overlay-cta{
	display: inline-flex; align-items: center; gap: 6px;
	background: #fff;
	color: var(--brand-primary-dark);
	font-size: .82rem; font-weight: 700;
	padding: 8px 16px;
	border-radius: 999px;
	box-shadow: var(--shadow-sm);
	transform: translateY(8px);
	transition: transform .22s ease;
}
.tpl-card:hover .tpl-card__overlay-cta{ transform: translateY(0); }
.tpl-card__overlay-cta svg{ width: 15px; height: 15px; flex-shrink: 0; }
.tpl-card--related{ border-radius: var(--radius-sm); }
.relatedPostsAfterContent .relatedLink{ padding: 10px 12px 12px; margin: 0; font-size: .92rem; }

/* =========================================================
   5. Header / navigation
   ========================================================= */
.site-header{
	position: sticky; top: 0; z-index: 500;
	transition: transform .3s ease;
}
.site-header.site-header--hidden{ transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce){
	.site-header{ transition: none; }
}
.site-header::before{
	content: "";
	display: block;
	height: 4px;
	background: linear-gradient(90deg, var(--brand-primary-dark), var(--brand-primary), var(--brand-secondary));
}

.site-header__top{
	background: var(--surface);
	border-bottom: 1px solid var(--border-color);
	box-shadow: 0 1px 0 rgba(15, 23, 42, .02);
}
.site-header__top-inner{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 20px var(--gutter);
}
.site-brand{
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
}
.site-brand__img{ max-height: 44px; width: auto; }
.site-brand__text{ display: flex; flex-direction: column; line-height: 1.2; }
.site-brand__name{
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 1.4rem;
	color: var(--ink-900);
}
.site-brand__tagline{
	font-size: .78rem;
	font-weight: 500;
	color: var(--ink-500);
	margin-top: 2px;
}

.site-header__search{
	flex: 1;
	max-width: 620px;
	min-width: 0;
	margin-inline: 0 0;
	padding-left: 24px;
	border-left: 1px solid var(--border-color);
}
@media (min-width: 768px) and (max-width: 1199.98px) {
	.site-header__top-inner {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		padding: 16px var(--gutter);
	}
	.site-header__search {
		width: 100%;
		max-width: 100%;
		padding-left: 0;
		border-left: none;
	}
}
.site-header__search-mobile{ display: none; padding: 0 var(--gutter) 14px; background: var(--surface); }

.site-nav{
	background: linear-gradient(180deg, var(--brand-primary-light), #e3edfb);
	border-bottom: 1px solid #d7e6fa;
}
.site-nav .wrap{ display: flex; }
.site-nav__list{
	list-style: none;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin: 0; padding: 8px 0;
	gap: 4px;
}
.site-nav__list .menu-item{ position: relative; }
.site-nav__list a{
	display: flex;
	align-items: center;
	padding: 9px 15px;
	color: var(--ink-700);
	font-weight: 600;
	font-size: .92rem;
	white-space: nowrap;
	border-radius: 999px;
	transition: background-color .18s ease, color .18s ease;
}
.site-nav__list > .menu-item > a:hover{
	color: var(--brand-primary-dark);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
}
.site-nav__list > .current-menu-item > a{
	color: #fff;
	background: var(--brand-primary);
}
.site-nav__list .menu-item-has-children > a::after{
	content: "";
	display: inline-block;
	width: 6px; height: 6px;
	margin-left: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	opacity: .6;
	transition: transform .18s ease;
}
.site-nav__list .menu-item-has-children:hover > a::after{ transform: rotate(225deg); }
.site-nav__list .sub-menu{
	list-style: none;
	margin: 0; padding: 16px;
	position: absolute; top: 100%; left: 0; margin-top: 10px;
	width: max-content;
	min-width: 240px;
	max-width: 640px;
	background: linear-gradient(180deg, #ffffff, var(--surface-alt));
	border-radius: var(--radius-lg);
	box-shadow: 0 28px 60px rgba(15, 23, 42, .16), 0 6px 16px rgba(15, 23, 42, .08), inset 0 3px 0 0 var(--brand-primary);
	border: 1px solid var(--border-color);
	overflow: visible;
	z-index: 50;
	/* Long submenus (e.g. "Customize Online") flow into extra columns
	   instead of stretching into one very tall dropdown. */
	columns: 200px 3;
	column-gap: 8px;
	max-height: 70vh;
	overflow-y: auto;
	/* Smooth fade + scale in without position-shifting jerk */
	opacity: 0;
	visibility: hidden;
	transform: scale(.98);
	transform-origin: top left;
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
/* Invisible hover bridge connecting top menu item to dropdown, eliminating hover gap & jerk */
.site-nav__list .sub-menu::before{
	content: "";
	position: absolute;
	top: -14px;
	left: 0;
	right: 0;
	height: 14px;
	background: transparent;
}
.site-nav__list .sub-menu li{ break-inside: avoid; }
.site-nav__list .sub-menu a{
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	font-weight: 600; font-size: .85rem; padding: 11px 14px; color: var(--ink-700);
	border-radius: var(--radius-sm); white-space: normal;
	transition: background-color .15s ease, color .15s ease, padding-left .15s ease;
}
.site-nav__list .sub-menu a::after{
	content: "\2192";
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--brand-primary-light);
	color: var(--brand-primary);
	font-size: .72rem;
	opacity: 0;
	transform: scale(.6);
	transition: opacity .15s ease, transform .15s ease, background-color .15s ease, color .15s ease;
}
.site-nav__list .sub-menu a:hover{
	background: var(--brand-primary-light);
	color: var(--brand-primary-dark);
}
.site-nav__list .sub-menu a:hover::after{
	opacity: 1;
	transform: scale(1);
	background: var(--brand-primary);
	color: #fff;
}

/* Keep dropdowns near the end of the bar from running off the right edge */
.site-nav__list > .menu-item:nth-last-child(-n+2) > .sub-menu{ left: auto; right: 0; }

/* Admin-assignable menu-item highlight classes (CSS Classes field on a menu item) */
.green_link > a{ color: var(--brand-accent-dark) !important; }
.red_link > a{
	background: var(--brand-primary) !important;
	color: #fff !important;
	border-radius: 999px !important;
	padding: 8px 18px !important;
	border-bottom: none !important;
}
.red_link > a:hover{ background: var(--brand-primary-dark) !important; }

.site-nav__toggle{
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 40px; height: 40px;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	background: var(--surface);
	flex-shrink: 0;
	margin-left: auto;
}
.site-nav__toggle span{
	display: block; height: 2px; width: 18px;
	margin-inline: auto;
	background: var(--ink-900);
	transition: transform .2s ease, opacity .2s ease;
}

@media (min-width: 768px){
	.site-nav__list li:hover > .sub-menu,
	.site-nav__list li:focus-within > .sub-menu{
		opacity: 1;
		visibility: visible;
		transform: scale(1);
	}
}
@media (max-width: 767.98px){
	.site-header__top-inner{ flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 8px; padding: 10px var(--gutter); }
	.site-brand{ flex: 1; min-width: 0; overflow: hidden; }
	.site-brand__img{ max-height: 32px; }
	.site-brand__name{ font-size: clamp(0.95rem, 4vw, 1.15rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.site-brand__tagline{ display: none; }
	.site-header__search{ display: none; }
	.site-header__search-mobile{ display: block; }
	.site-header__actions{ display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
	.site-header__saved-btn{
		position: relative;
		width: 36px;
		height: 36px;
		min-width: 36px;
		padding: 0;
		border-radius: 50%;
		justify-content: center;
	}
	.site-header__saved-badge{
		position: absolute;
		top: -4px;
		right: -4px;
		min-width: 18px;
		height: 18px;
		padding: 0 4px;
		font-size: 0.68rem;
		border: 2px solid var(--surface);
		box-shadow: 0 2px 6px rgba(0,0,0,0.15);
	}
	.site-nav__toggle{
		display: flex;
		width: 36px;
		height: 36px;
		border-radius: 50%;
		margin-left: 0;
	}
	.site-nav .wrap{ display: block; }
	.site-nav{
		max-height: 0;
		overflow: hidden;
		transition: max-height .25s ease;
	}
	.site-nav.is-open{ max-height: 80vh; overflow-y: auto; }
	.site-nav__list{ flex-direction: column; align-items: stretch; padding: 12px 0; gap: 4px; }
	.site-nav__list a{
		padding: 11px 18px;
		border-bottom: none;
		justify-content: space-between;
		border-radius: 999px;
	}
	.site-nav__list > .menu-item{
		margin-bottom: 2px;
	}
	.site-nav__list .sub-menu{
		display: none;
		position: static;
		box-shadow: none;
		border: 1px solid rgba(30, 115, 190, 0.15);
		background: rgba(255, 255, 255, 0.85);
		border-radius: var(--radius-md);
		margin: 6px 0 10px 14px;
		padding: 6px;
		width: auto;
		max-width: none;
		columns: initial;
		max-height: none;
		overflow: visible;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
	}
	.site-nav__list .sub-menu a{
		color: var(--ink-700);
		border-bottom: none;
		padding: 10px 16px;
		border-radius: var(--radius-sm);
	}
	.site-nav__list .sub-menu a::after{ color: var(--brand-primary); }
	.site-nav__list .sub-menu a:hover{
		background: #ffffff;
		color: var(--brand-primary-dark);
		box-shadow: var(--shadow-sm);
	}
	.site-nav__list .menu-item.is-open > .sub-menu{ display: block; }
	.site-nav__list .menu-item.is-open > a::after{ transform: rotate(225deg); opacity: 1; }
	.red_link > a{ display: inline-flex; width: auto; max-width: 100%; }
}

@media (max-width: 640px) {
	.wrap { padding-inline: 12px !important; }
	.layout { padding-top: 10px !important; padding-bottom: 30px !important; gap: 16px !important; }
	.layout__main { padding: 0 !important; width: 100% !important; min-width: 0 !important; }
	.singlePost { padding-inline: 0 !important; }
	.breadcrumbs-row { padding-top: 6px; }
	.oto_toc { padding: 14px 16px; margin: 18px 0 24px 0; }
}

@media (max-width: 440px) {
	.oto-wa-float {
		bottom: 12px !important;
		right: 12px !important;
		width: 36px !important;
		height: 36px !important;
		padding: 0 !important;
		justify-content: center !important;
		border-radius: 50% !important;
	}
	.oto-wa-float__icon {
		width: 20px !important;
		height: 20px !important;
	}
	.oto-wa-float__tooltip {
		display: none !important;
	}
	#oto-back-to-top {
		bottom: 54px !important;
		right: 12px !important;
		width: 36px !important;
		height: 36px !important;
		font-size: 0.9rem !important;
		border-radius: 50% !important;
	}
}

/* Search form: category select + input + button, all one pill */
.oto-search{
	display: flex; align-items: stretch;
	border: 1px solid var(--border-color);
	border-radius: 999px;
	background: var(--surface);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}
/* Plain <select> fallback (JS disabled) — same look the custom dropdown mimics */
.oto-search__cat{
	border: none;
	border-right: 1px solid var(--border-color);
	background: var(--surface-alt);
	padding: 0 12px;
	font-size: .82rem;
	font-weight: 600;
	color: var(--ink-700);
	max-width: 130px;
}
.oto-search__cat:disabled{ color: var(--ink-400); background: var(--surface-alt); cursor: not-allowed; }

/* Custom dropdown that replaces the <select> once JS runs */
.oto-select{ position: relative; width: 120px; min-width: 75px; flex-shrink: 1; }
.oto-select__trigger{
	display: flex; align-items: center; justify-content: space-between; gap: 4px;
	width: 100%; height: 100%;
	border: none;
	border-right: 1px solid var(--border-color);
	background: var(--surface-alt);
	padding: 0 8px;
	font-family: inherit;
	font-size: .8rem;
	font-weight: 600;
	color: var(--ink-700);
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.oto-select__trigger::after{
	content: "";
	width: 6px; height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	flex-shrink: 0;
	opacity: .6;
	transition: transform .15s ease;
}
.oto-select.is-open .oto-select__trigger::after{ transform: rotate(225deg); }
.oto-select__trigger:disabled{ color: var(--ink-400); cursor: not-allowed; }
.oto-select__trigger:disabled::after{ opacity: .3; }
/* Rendered at the body level (not nested in .oto-search) since the search
   bar clips its children to draw its rounded pill shape, which would also
   clip this menu; top/left/min-width are positioned by JS on open. */
.oto-select__menu{
	list-style: none;
	margin: 0; padding: 6px;
	position: fixed;
	min-width: 170px;
	max-height: min(320px, calc(100vh - 90px));
	overflow-y: auto;
	background: #ffffff;
	border-radius: 12px;
	border: 1px solid #e2e8f0;
	box-shadow: 0 10px 30px -4px rgba(15, 23, 42, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
	z-index: 1000;
}
.oto-select__option{
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 0.84rem;
	font-weight: 500;
	color: var(--ink-700, #334155);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.oto-select__option:hover, .oto-select__option:focus{
	background: #f1f5f9;
	color: var(--brand-primary, #1e73be);
	outline: none;
}
.oto-select__option.is-selected{
	background: var(--brand-primary-light, #eef6ff);
	color: var(--brand-primary-dark, #175f9c);
	font-weight: 600;
}
.oto-select__option.is-selected::after{
	content: "✓";
	font-weight: 700;
	font-size: 0.8rem;
	color: var(--brand-primary, #1e73be);
	margin-left: 8px;
}

.oto-search__input{
	flex: 1;
	border: none;
	padding: 11px 14px;
	font-size: .92rem;
	min-width: 0;
}
.oto-search__input:focus, .oto-search__cat:focus{ outline: none; }
.oto-search:focus-within{ border-color: var(--brand-primary); box-shadow: 0 0 0 4px var(--brand-primary-light); }
.oto-search__btn{
	border: none;
	background: var(--brand-primary);
	color: #fff;
	padding: 0 18px;
	display: flex; align-items: center; gap: 6px;
	font-weight: 700; font-size: .88rem;
}
.oto-search__btn:hover{ background: var(--brand-primary-dark); }
@media (max-width: 640px){
	.oto-search__cat, .oto-select{ display: none; }
	.oto-search__btn-text{ display: none; }
}

/* Breadcrumbs */
.breadcrumbs-row{ padding-top: 10px; }
.breadcrumbs, #breadcrumbs{
	font-size: .85rem;
	color: var(--ink-500);
	margin: 6px 0;
}
.breadcrumbs a, #breadcrumbs a{ color: var(--ink-500); text-decoration: underline; text-underline-offset: 2px; }
.breadcrumbs a:hover, #breadcrumbs a:hover{ color: var(--brand-primary); }
.breadcrumbs .current{ color: var(--ink-700); font-weight: 600; }

/* =========================================================
   6. Buttons / pills
   ========================================================= */
.btn{
	display: inline-block;
	border-radius: 999px;
	font-weight: 600;
	padding: .6rem 1.4rem;
	border: 1px solid transparent;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn--primary, .btn-primary{
	background: var(--brand-primary);
	border-color: var(--brand-primary);
	color: #fff !important;
}
.btn--primary:hover, .btn-primary:hover{ background: var(--brand-primary-dark); border-color: var(--brand-primary-dark); transform: translateY(-1px); }

.pill{
	display: inline-block;
	padding: 5px 12px;
	margin: 3px;
	border-radius: 999px;
	border: 1px solid var(--border-color);
	background: var(--surface);
	color: var(--ink-700) !important;
	font-size: .78rem;
	font-weight: 500;
}
.pill:hover{ background: var(--brand-primary-light); border-color: var(--brand-primary); color: var(--brand-primary-dark) !important; }

/* =========================================================
   7. Homepage sections
   ========================================================= */
.home-intro{ background: var(--surface-alt); border-bottom: 1px solid var(--border-color); padding: 14px 0; }
.home-intro__lead{ margin: 0; font-size: .98rem; text-align: center; color: var(--ink-700); }

.hero{
	background: linear-gradient(120deg, var(--brand-primary-dark) 0%, var(--brand-primary) 55%, var(--brand-secondary) 100%);
	padding: clamp(46px, 7vw, 96px) 0 50px;
	text-align: center;
	color: #fff;
}
.hero__title{ font-weight: 800; color: #fff; }
.hero__lead{ max-width: 720px; margin: 0 auto 6px; color: rgba(255,255,255,.9); font-size: 1.08rem; }
.hero__intro{ max-width: 720px; margin: 0 auto 26px; color: rgba(255,255,255,.75); font-size: .92rem; }

.hero-search-wrap{ max-width: 680px; margin: 0 auto; }
.hero-search-wrap .oto-search{ padding: 4px; box-shadow: var(--shadow-lg); }
.hero-search-wrap .oto-search__input{ padding: 14px; font-size: 1rem; }
.hero-search-wrap .oto-search__btn{ padding: 0 26px; border-radius: 999px; font-size: .95rem; }

.hero__quick{ margin-top: 20px; }
.hero__quick-label{ display: block; margin-bottom: 6px; font-weight: 600; font-size: .85rem; color: rgba(255,255,255,.75); }
.hero__quick .pill{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: #fff !important; }
.hero__quick .pill:hover{ background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.5); color: #fff !important; }

/* Trust row */
/* Full-width colored band breaking up the page rhythm — a soft tint
   rather than a bold gradient, so it separates this section visually
   without fighting for attention against the hero above it. */
.section--feature{
	background: linear-gradient(135deg, var(--brand-primary-light) 0%, var(--surface-alt) 100%);
	padding: 56px 0;
}
.section--feature__lead{
	max-width: 760px;
	margin: 0 auto 28px;
	text-align: center;
	color: var(--ink-500);
}
.section--feature__cta{ text-align: center; margin-top: 28px; }

.trust-row{ background: var(--surface); border-bottom: 1px solid var(--border-color); padding: 30px 0; }
.trust-row__grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
}
.trust-item{ display: flex; align-items: center; gap: 14px; }
.trust-item__icon{
	flex-shrink: 0;
	width: 46px; height: 46px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--brand-primary-light);
	color: var(--brand-primary);
}
.trust-item__icon svg{ width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.trust-item strong{ display: block; font-size: .95rem; color: var(--ink-900); }
.trust-item div span{ display: block; font-size: .82rem; color: var(--ink-500); }

/* Category grid — typographic tiles: the category name carries the
   design instead of a per-card icon/color, with a single consistent
   brand accent on hover rather than a different color per tile. */
.section-subtitle{ text-align: center; color: var(--ink-500); margin-top: -14px; margin-bottom: 26px; }
.cat-rail{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 14px;
}
.ct{
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--surface);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: 16px 18px;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ct:hover{
	border-color: var(--brand-primary);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}
.ct__icon{
	flex-shrink: 0;
	width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--brand-primary-light);
	color: var(--brand-primary);
}
.ct__icon svg{ width: 22px; height: 22px; }
.ct__body{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ct__title{
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--ink-900);
	font-size: 1rem;
}
.ct:hover .ct__title{ color: var(--brand-primary-dark); }
.ct__count{ font-size: .8rem; color: var(--ink-500); }
.ct__arrow{
	flex-shrink: 0;
	color: var(--brand-primary);
	font-weight: 700;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity .18s ease, transform .18s ease;
}
.ct:hover .ct__arrow{ opacity: 1; transform: translateX(0); }

.seo-content h3{ margin-top: 1.6em; }
.seo-content a{ color: var(--brand-primary); text-decoration: underline; }

/* =========================================================
   8. Sidebar / widgets (Minimalist & Clean)
   ========================================================= */
.d_sidebar{
	position: relative;
	background: var(--surface);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	box-shadow: 0 2px 10px rgba(15, 23, 42, .03);
	overflow: hidden;
	margin-bottom: 24px;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.d_sidebar::before{ content: none; }
.d_sidebar:hover{
	box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
	border-color: rgba(30, 115, 190, .25);
}

.sidebar_head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	background: var(--brand-primary);
	color: #ffffff !important;
	font-weight: 700;
	font-size: .95rem;
	padding: 13px 18px;
	margin: 0;
	letter-spacing: -.01em;
}
.sidebar_head a{ color: #ffffff; }
.d_sidebar:first-of-type .sidebar_head{
	background: var(--brand-accent-dark);
}

.d_sidebar ul{ margin: 0; padding: 4px 0; list-style: none; }
.d_sidebar ul li{
	padding: 0;
	margin: 0;
	font-size: .9rem;
	border-bottom: 1px solid #f1f5f9;
}
.d_sidebar ul li:last-child{ border-bottom: none; }
.d_sidebar ul li a{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 11px 18px;
	color: var(--ink-700);
	transition: background-color .18s ease, color .18s ease, padding-left .18s ease;
}
.d_sidebar ul li a::after{
	content: "\2192";
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity .18s ease, transform .18s ease;
	color: var(--brand-primary);
	flex-shrink: 0;
	font-weight: 700;
}
.d_sidebar ul li a:hover{
	background: var(--surface-alt);
	color: var(--brand-primary);
	padding-left: 22px;
}
.d_sidebar ul li a:hover::after{
	opacity: 1;
	transform: translateX(0);
}
.d_sidebar li a[aria-current="page"],
.d_sidebar li.current-cat > a,
.d_sidebar li.current-menu-item > a,
.d_sidebar li.active-category-link > a,
.d_sidebar li.oto-active-menu-item > a {
	font-weight: 700;
	color: var(--brand-primary-dark);
	background: var(--brand-primary-light);
	border-left: 3px solid var(--brand-primary);
	padding-left: 20px;
}
.d_sidebar li a[aria-current="page"]::after,
.d_sidebar li.current-cat > a::after,
.d_sidebar li.current-menu-item > a::after,
.d_sidebar li.active-category-link > a::after,
.d_sidebar li.oto-active-menu-item > a::after {
	opacity: 1;
	transform: translateX(0);
}
.widgett{ margin: 0 0 24px; }

/* AdSense containers: reserve space so the async ad script filling
   these in doesn't shift surrounding content (CLS), and keep ads
   visually separated from cards/links per AdSense placement policy. */
.inpageAd,
.tpl-grid__ad,
.sidebar-ad-sticky {
	margin: 32px auto;
	min-height: 120px;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--surface-subtle, #f8fafc);
	border: 1px dashed var(--ink-100, #e2e8f0);
	border-radius: var(--radius-md, 8px);
	padding: 14px 12px;
	box-sizing: border-box;
	text-align: center;
}

.inpageAd--after {
	margin-top: 40px;
	margin-bottom: 32px;
}

.tpl-grid__ad {
	grid-column: 1 / -1;
	margin: 16px 0;
	min-height: 140px;
}

.sidebar-ad-sticky {
	position: sticky;
	top: 90px;
	margin-top: 24px;
	min-height: 280px;
	background: #ffffff;
	border: 1px solid var(--ink-100, #e2e8f0);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.ad-label {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--ink-400, #94a3b8);
	margin-bottom: 8px;
	user-select: none;
}

.inpageAd .widgett,
.tpl-grid__ad .widgett,
.sidebar-ad-sticky .widgett {
	margin: 0;
	width: 100%;
	text-align: center;
}

.inpageAd ins.adsbygoogle,
.tpl-grid__ad ins.adsbygoogle,
.sidebar-ad-sticky ins.adsbygoogle {
	max-width: 100% !important;
	margin: 0 auto;
}

/* Office Templates Builder "Smart Templates" widget — its own responsive
   rules react to the browser viewport width, not the sidebar's actual
   width, so on a normal desktop viewport it can still try to lay out as
   many columns as configured in the widget (up to 6) inside a ~300px
   column. Cap it at a sensible 2 here and give it the same inset the
   rest of the sidebar widgets have; 2 keeps the "columns" setting from
   the widget admin screen meaningful instead of overriding it outright. */
.d_sidebar .otb-templates-masonry.otb-templates-masonry{
	column-count: 2 !important;
	column-gap: 12px !important;
	margin: 0 !important;
	padding: 14px 16px 4px;
}
.d_sidebar .otb-template-item{ margin-bottom: 12px; }
.d_sidebar .otb-template-footer{ padding: 8px; }
.d_sidebar .otb-template-title-below{ font-size: 12px; }
.d_sidebar .otb-launch-btn.size-small{ padding: 6px 10px; font-size: 12px; }
.d_sidebar .otb-view-all-wrap{ padding: 0 16px 16px; margin-top: -4px; }
.d_sidebar .otb-view-all-wrap .otb-view-all-btn{ width: 100%; justify-content: center; }

/* The plugin's "Customize" card button ships with no default color at all
   unless a style-N modifier class is present; give it the site's button look. */
.otb-launch-btn{
	background: var(--brand-primary);
	color: #fff !important;
}
.otb-launch-btn:hover{ background: var(--brand-primary-dark); color: #fff !important; }
.otb-view-all-btn{
	border-color: var(--brand-primary) !important;
	color: var(--brand-primary) !important;
	border-radius: 999px !important;
}
.otb-view-all-btn:hover{ background: var(--brand-primary) !important; color: #fff !important; }

/* =========================================================
   9. Article / page content
   ========================================================= */

/* Image alignment (classic-editor img.alignright and Gutenberg's
   figure.wp-block-image.alignright both need this) — WordPress core does
   not float these for classic (non-block) themes like this one; it's
   left to the theme to provide, so without it "align right/left" content
   editors set on an image silently does nothing. */
.alignleft{ float: left; margin: .4em 1.5em 1em 0; }
.alignright{ float: right; margin: .4em 0 1em 1.5em; }
.aligncenter{ display: block; margin-left: auto; margin-right: auto; }
.alignnone{ margin: .4em 0 1em; }
.wp-block-image.alignleft{ float: left; margin: .4em 1.5em 1em 0; }
.wp-block-image.alignright{ float: right; margin: .4em 0 1em 1.5em; }
.wp-block-image.aligncenter{ margin-left: auto; margin-right: auto; }
.category-intro::after, .category-description::after, .singlePost::after{ content: ""; display: table; clear: both; }

.category-head{ padding-top: 32px; }
.category-head h1{ margin-bottom: 10px; }
.category-intro, .category-description{ color: var(--ink-500); margin-bottom: 10px; }
/* Round and frame images embedded in editor content (category intros/descriptions,
   post & page bodies) — excluding circular author-box avatars and small UI icons. */
.category-intro img,
.category-description img,
.singlePost img:not(.oto-author img, .img-48 img, .wpdm_icon){
	border-radius: var(--radius-md);
	border: 1px solid var(--border-color);
	box-shadow: 0 10px 28px rgba(15, 23, 42, .07), 0 1px 3px rgba(15, 23, 42, .04);
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
	max-width: 100%;
	height: auto;
}

.category-intro img:hover,
.category-description img:hover,
.singlePost img:not(.oto-author img, .img-48 img, .wpdm_icon):hover{
	transform: translateY(-3px);
	box-shadow: 0 18px 36px rgba(15, 23, 42, .12);
	border-color: rgba(30, 115, 190, .3);
}

/* WP Figure & Captions Styling */
.singlePost figure.wp-block-image,
.singlePost figure.aligncenter,
.singlePost figure.alignleft,
.singlePost figure.alignright{
	margin-top: 1.8em;
	margin-bottom: 1.8em;
}

/* Center images horizontally on mobile/small screen views */
@media (max-width: 768px) {
	.singlePost img:not(.oto-author img, .img-48 img, .wpdm_icon, .img-share-btn img),
	.category-intro img,
	.category-description img,
	.entry-content img,
	.layout__main img,
	.singlePost figure.wp-block-image,
	.singlePost figure {
		display: block !important;
		margin-left: auto !important;
		margin-right: auto !important;
		float: none !important;
	}
	.singlePost figure,
	.entry-content figure {
		text-align: center !important;
	}
}

.singlePost figcaption,
.singlePost .wp-element-caption{
	font-size: .85rem;
	color: var(--ink-500);
	text-align: center;
	margin-top: 10px;
	font-style: italic;
	line-height: 1.4;
}

.category-intro a{ text-decoration: underline !important; }

/* "Top Picks" ([as_category_templates]) is a parent-theme shortcode that
   predates this redesign and still emits raw Bootstrap-era markup
   (.row/.col-*, .card, .btn-outline-secondary). Its Bootstrap grid
   classes have no real effect without Bootstrap loaded, so the row/col
   markup is remapped to a proper CSS grid here instead of trying to
   emulate every Bootstrap breakpoint class it might output. */
.as-category-templates{ margin: 40px 0; }
.as-category-templates h2.h4{
	font-family: var(--font-heading);
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--ink-900);
	margin-bottom: 20px;
}
.as-category-templates .row{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 18px;
	margin: 0;
}
.as-category-templates .row > [class*="col-"]{
	width: auto;
	padding: 0;
	margin: 0;
}
.as-category-templates .card{
	height: 100%;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	box-shadow: none;
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease;
}
.as-category-templates .card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.as-category-templates .card-img-top{
	width: 100%;
	aspect-ratio: 4/5;
	object-fit: cover;
	display: block;
}
.as-category-templates .card-body{ padding: 14px 16px 16px; flex: 1; }
.as-category-templates h3.h6{
	font-size: 1rem;
	font-weight: 600;
	color: var(--ink-900);
	margin-bottom: 6px;
}
.as-category-templates h3.h6 a:hover{ color: var(--brand-primary); }
.as-category-templates .card-body .text-muted{ font-size: .85rem; }

.singlePost{ padding-top: 0; overflow-wrap: break-word; word-break: break-word; }

.singlePost .entry-title,
.singlePost h1{
	font-size: clamp(1.85rem, 1.4rem + 1.8vw, 2.5rem);
	font-weight: 800;
	color: var(--ink-900);
	line-height: 1.22;
	letter-spacing: -.025em;
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 2px solid var(--border-color);
	position: relative;
}
.singlePost .entry-title::after,
.singlePost h1::after{
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 64px;
	height: 3.5px;
	background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary));
	border-radius: 4px;
}

.singlePost h2{
	font-size: 1.38rem;
	font-weight: 750;
	color: var(--ink-900);
	margin: 2.2em 0 .9em;
	line-height: 1.3;
	letter-spacing: -.015em;
	padding: 8px 14px;
	background: linear-gradient(90deg, var(--brand-primary-light) 0%, rgba(238, 246, 255, 0.25) 75%, transparent 100%);
	border-left: 4px solid var(--brand-primary);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.singlePost h3:not([class*="otb-"] h3, .otb-template-item h3, .otb-template-footer h3, .otb-editor h3, .oto-author h3, .claire_author_box h3){
	font-size: 1.22rem;
	font-weight: 700;
	color: var(--ink-900);
	margin-top: 2.5em;
	margin-bottom: .8em;
	line-height: 1.35;
	letter-spacing: -.01em;
	position: relative;
	padding-left: 24px;
	border-left: none !important;
}
.singlePost h3:not([class*="otb-"] h3, .otb-template-item h3, .otb-template-footer h3, .otb-editor h3, .oto-author h3, .claire_author_box h3)::before{
	content: "";
	position: absolute;
	left: 2px;
	top: 0.4em;
	width: 9px;
	height: 9px;
	background: var(--brand-accent);
	border-radius: 3px;
	box-shadow: 0 0 0 4px var(--brand-accent-light);
}

.singlePost h4:not([class*="otb-"] h4, .otb-template-item h4, .otb-template-footer h4, .otb-editor h4, .oto-author h4, .claire_author_box h4){
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--ink-800);
	margin: 1.6em 0 .6em;
	line-height: 1.4;
	letter-spacing: -.005em;
	display: flex;
	align-items: center;
	gap: 10px;
}
.singlePost h4:not([class*="otb-"] h4, .otb-template-item h4, .otb-template-footer h4, .otb-editor h4, .oto-author h4, .claire_author_box h4)::before{
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	background: var(--brand-primary);
	border-radius: 50%;
	flex-shrink: 0;
}

/* Neutralize pseudo-element bullets & extra padding for OTB Editor cards & Author Box */
[class*="otb-"] h1::before,
[class*="otb-"] h2::before,
[class*="otb-"] h3::before,
[class*="otb-"] h4::before,
[class*="otb-"] h5::before,
[class*="otb-"] h6::before,
[class*="otb-"] li::before,
.otb-template-item h3::before,
.otb-template-item h4::before,
.otb-template-title-below::before,
.otb-template-footer h3::before,
.otb-template-footer h4::before,
.oto-author h1::before,
.oto-author h2::before,
.oto-author h3::before,
.oto-author h4::before,
.oto-author h5::before,
.oto-author h6::before,
.oto-author li::before,
.claire_author_box h1::before,
.claire_author_box h2::before,
.claire_author_box h3::before,
.claire_author_box h4::before,
.claire_author_box h5::before,
.claire_author_box h6::before,
.claire_author_box li::before {
	content: none !important;
	display: none !important;
	box-shadow: none !important;
}

[class*="otb-"] h3,
[class*="otb-"] h4,
.otb-template-item h3,
.otb-template-item h4,
.otb-template-title-below,
.otb-template-footer h3,
.otb-template-footer h4,
.oto-author h3,
.oto-author h4,
.claire_author_box h3,
.claire_author_box h4 {
	padding-left: 0 !important;
}

.singlePost h5{
	font-size: .95rem;
	font-weight: 700;
	color: var(--ink-700);
	margin: 1.4em 0 .5em;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.singlePost h6{
	font-size: .85rem;
	font-weight: 700;
	color: var(--ink-500);
	margin: 1.2em 0 .4em;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: .08em;
}

/* Custom Modern Lists (UL & OL) for Post/Page Content */
.singlePost ul:not(.d_sidebar ul, .pagination, .oto_toc ul, .menu){
	list-style: none;
	padding-left: 0;
	margin-bottom: 1.4em;
}
.singlePost ul:not(.d_sidebar ul, .pagination, .oto_toc ul, .menu) > li{
	position: relative;
	padding-left: 28px;
	margin-bottom: 10px;
	line-height: 1.65;
}
.singlePost ul:not(.d_sidebar ul, .pagination, .oto_toc ul, .menu) > li::before{
	content: "";
	position: absolute;
	left: 6px;
	top: 0.6em;
	width: 7px;
	height: 7px;
	background: var(--brand-primary);
	border-radius: 50%;
	box-shadow: 0 0 0 3.5px var(--brand-primary-light);
}

/* Nested UL */
.singlePost ul:not(.d_sidebar ul, .pagination, .oto_toc ul, .menu) ul{
	margin-top: 8px;
	margin-bottom: 8px;
	padding-left: 6px;
}
.singlePost ul:not(.d_sidebar ul, .pagination, .oto_toc ul, .menu) ul > li::before{
	background: var(--brand-accent);
	box-shadow: 0 0 0 3.5px var(--brand-accent-light);
}

/* Custom Modern OL (Ordered Lists) */
.singlePost ol:not(.d_sidebar ol, .pagination){
	list-style: none;
	counter-reset: oto-ol-counter;
	padding-left: 0;
	margin-bottom: 1.4em;
}
.singlePost ol:not(.d_sidebar ol, .pagination) > li{
	counter-increment: oto-ol-counter;
	position: relative;
	padding-left: 36px;
	margin-bottom: 12px;
	line-height: 1.65;
}
.singlePost ol:not(.d_sidebar ol, .pagination) > li::before{
	content: counter(oto-ol-counter);
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 24px;
	height: 24px;
	background: var(--brand-primary-light);
	color: var(--brand-primary-dark);
	font-weight: 700;
	font-size: .78rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(30, 115, 190, .2);
}
.singlePost p:not(.tpl-card__title) a{
	font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.singlePost .size-full{ max-width: 100% !important; height: inherit !important; }

/* =========================================================
   Gutenberg Blockquote & Quote Block Reset
   ========================================================= */
.singlePost h3,
.page h3,
.is-layout-flow {
	border-left: none !important;
}

figure.wp-block-quote,
blockquote {
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-top: 20px !important;
	margin-bottom: 24px !important;
	padding: 16px 20px !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	border: 1px solid var(--border-color, #e2e8f0) !important;
	border-left: none !important;
	background: var(--surface-alt, #f8fafc) !important;
	border-radius: var(--radius-md, 12px) !important;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
}

/* Strip extra borders, backgrounds, margins & padding from all nested children */
figure.wp-block-quote *,
blockquote *,
.wp-block-quote * {
	border-left: none !important;
	border: none !important;
}

figure.wp-block-quote blockquote,
blockquote blockquote,
.wp-block-quote blockquote {
	background: transparent !important;
	border: none !important;
	border-left: none !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	width: 100% !important;
	max-width: 100% !important;
}

blockquote p,
.wp-block-quote p {
	margin: 0 0 8px 0 !important;
	font-size: 1.02rem !important;
	line-height: 1.65 !important;
	color: var(--ink-800, #1e2536) !important;
	font-style: normal !important;
}

blockquote p:last-child,
.wp-block-quote p:last-child {
	margin-bottom: 0 !important;
}

blockquote cite,
.wp-block-quote cite {
	display: block !important;
	font-size: 0.84rem !important;
	font-weight: 600 !important;
	color: var(--ink-500, #64748b) !important;
	font-style: normal !important;
	margin-top: 8px !important;
}

[data-theme="dark"] figure.wp-block-quote,
[data-theme="dark"] blockquote {
	background: #131b2e !important;
	border: 1px solid #1e293b !important;
	border-left: none !important;
	color: #cbd5e1 !important;
}

[data-theme="dark"] figure.wp-block-quote blockquote,
[data-theme="dark"] blockquote blockquote {
	background: transparent !important;
	border: none !important;
	border-left: none !important;
}

[data-theme="dark"] blockquote p,
[data-theme="dark"] .wp-block-quote p {
	color: #f8fafc !important;
}

[data-theme="dark"] blockquote cite,
[data-theme="dark"] .wp-block-quote cite {
	color: #94a3b8 !important;
}

@media (max-width: 640px) {
	figure.wp-block-quote,
	blockquote {
		padding: 12px 14px !important;
		margin-top: 14px !important;
		margin-bottom: 18px !important;
	}
}
.singlePost .img-48 img, .wpdm_icon{ max-width: 48px !important; }

.oto_toc{ background: var(--surface-alt); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 20px 24px; margin-bottom: 1.6em; }
.oto_toc ul{ list-style: none; padding-left: 0; margin: 0; }
.oto_toc ul li{ padding-left: 0; margin: 6px 0; }
.oto_toc ul li::before{ content: none; }
.oto_toc ul li a{ color: var(--brand-primary-dark); font-weight: 600; }

.post-pager{
	display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
	margin: 40px 0;
}
.post-pager__item{ min-width: 0; }
.post-pager__item a{
	display: flex;
	align-items: center;
	gap: 12px;
	height: 100%;
	background: linear-gradient(135deg, var(--brand-primary-light), var(--surface));
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: 14px 16px;
	color: var(--ink-700);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}
.post-pager__item a:hover{
	border-color: var(--brand-primary);
	background: linear-gradient(135deg, var(--brand-primary-light), var(--brand-primary-light));
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
	color: var(--ink-700);
}
.post-pager__item--next a{ flex-direction: row-reverse; text-align: right; }
.post-pager__icon{
	flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: var(--brand-primary);
	color: #fff;
	box-shadow: var(--shadow-sm);
	transition: background-color .18s ease, transform .18s ease;
}
.post-pager__icon svg{ width: 18px; height: 18px; }
.post-pager__item a:hover .post-pager__icon{ background: var(--brand-primary-dark); transform: scale(1.08); }
.post-pager__text{ min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.post-pager__label{ font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--brand-primary-dark); }
.post-pager__title{
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: .92rem;
	color: var(--ink-900);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
@media (max-width: 640px){
	.post-pager{ grid-template-columns: 1fr; }
	.post-pager__item--next a{ flex-direction: row; text-align: left; }
}

/* =========================================================
   10. Pagination (rendered by the inherited bootstrap_pagination())
   ========================================================= */
.pager-wrap{ margin: 30px 0; }
.pagination{ list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.pagination .page-item{ display: inline-flex; }
.pagination .page-link{
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 38px; height: 38px; padding: 0 10px;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	color: var(--ink-700);
	font-size: .9rem;
}
.pagination .page-link:hover{ background: var(--brand-primary-light); color: var(--brand-primary-dark); }
.pagination .page-item.active .page-link{
	background: var(--brand-primary); border-color: var(--brand-primary); color: #fff;
}

/* =========================================================
   11. Footer
   ========================================================= */
.site-footer{
	background: var(--ink-900);
	color: rgba(255,255,255,.75);
	margin-top: 50px;
	padding: 36px 0 26px;
	border-top: 4px solid var(--brand-primary);
}
.site-footer__notice{
	font-size: .85rem;
	line-height: 1.5;
	color: rgba(255,255,255,.7);
	text-align: center;
	margin-bottom: 24px;
	padding: 12px 20px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-md, 10px);
}
.site-footer__notice a{ color: rgba(255,255,255,.9); text-decoration: underline; }
.site-footer__row{
	display: flex; flex-wrap: wrap;
	align-items: center; justify-content: space-between;
	gap: 18px;
}
.site-footer__brand img{ filter: brightness(0) invert(1); opacity: .9; }
.site-footer__copy{ margin: 10px 0 0; font-size: .85rem; color: rgba(255,255,255,.5); }
.site-footer__links{ display: flex; flex-wrap: wrap; gap: 4px; }
.site-footer__links a{
	color: rgba(255,255,255,.75);
	font-size: .9rem;
	padding: 4px 12px;
	border-right: 1px solid rgba(255,255,255,.15);
}
.site-footer__links a:last-child{ border-right: none; }
.site-footer__links a:hover{ color: #fff; }

#oto-back-to-top{
	position: fixed; right: 22px; bottom: 22px;
	width: 46px; height: 46px; border-radius: 50%;
	background: var(--ink-900); color: #fff; border: none;
	font-size: 1.1rem; line-height: 1;
	box-shadow: var(--shadow-md);
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: opacity .25s ease, transform .25s ease, background-color .2s ease;
	z-index: 1000;
}
#oto-back-to-top.is-visible{ opacity: 1; visibility: visible; transform: translateY(0); }
#oto-back-to-top:hover{ background: var(--brand-primary); }

/* =========================================================
   12. WP Download Manager — download page + inline link
   ========================================================= */
.download-page{ padding-top: 6px; }
.download-page__media{ border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 20px; box-shadow: var(--shadow-sm); }
.download-page__meta{ display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.download-page__badge{
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--brand-primary-light); color: var(--brand-primary-dark);
	border-radius: 999px; padding: 6px 14px; font-size: .85rem; font-weight: 600;
}
.download-page__badge--muted{ background: var(--surface-alt); color: var(--ink-500); }
.download-page__cta{
	position: relative;
	background: linear-gradient(135deg, var(--brand-primary-light), var(--surface));
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	padding: 26px 22px 22px;
	text-align: center;
	margin-bottom: 28px;
	overflow: hidden;
}
.download-page__cta::before{
	content: "";
	position: absolute; inset: 0 0 auto 0; height: 4px;
	background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary));
}
.download-page__countdown{
	display: flex; align-items: center; justify-content: center; gap: 10px;
	color: var(--ink-700); font-weight: 600;
}
.download-page__spinner{
	width: 18px; height: 18px; border-radius: 50%;
	border: 3px solid var(--brand-primary-light);
	border-top-color: var(--brand-primary);
	animation: oto-spin 0.8s linear infinite;
}
@keyframes oto-spin{ to{ transform: rotate(360deg); } }
/* WPDM injects its own admin-configurable button classes here (color/size
   variants we don't control and can't predict) — force our own look
   regardless of which one shows up, so the button can never disappear
   into a matching background or lose its shape. */
.download-page__download-link a{
	display: inline-block !important;
	background: var(--brand-primary) !important;
	color: #fff !important;
	font-weight: 700 !important;
	padding: 14px 32px !important;
	border: none !important;
	border-radius: 999px !important;
	font-size: 1.05rem !important;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: transform .15s ease, background-color .15s ease;
}
.download-page__download-link a:hover{
	background: var(--brand-primary-dark) !important;
	color: #fff !important;
	transform: translateY(-1px);
}
.download-page__content{ margin-bottom: 20px; }
.download-page__tags{ font-size: .88rem; color: var(--ink-500); }

.dl-link {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 20px;
	margin: 22px 0;
	background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
	border: 1px solid #e2e8f0;
	border-left: none !important;
	border-radius: var(--radius-md, 12px);
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

.dl-link:hover {
	border-color: var(--brand-primary, #1e40af);
	border-left-color: var(--brand-accent, #16a34a);
	box-shadow: 0 10px 28px rgba(30, 64, 175, 0.1);
	transform: translateY(-2px);
}

.dl-link__icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: #eef6ff;
	border: 1px solid #dbeafe;
	flex-shrink: 0;
	transition: transform 0.25s ease, background 0.25s ease;
}

.dl-link:hover .dl-link__icon-wrap {
	transform: scale(1.08);
	background: #dbeafe;
}

.dl-link__icon img {
	width: 30px;
	height: 30px;
	object-fit: contain;
	display: block;
}

.dl-link__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.dl-link__title {
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--ink-900, #0f172a);
	text-decoration: none !important;
	line-height: 1.35;
	transition: color 0.2s ease;
}

.dl-link__title:hover,
.dl-link:hover .dl-link__title {
	color: var(--brand-primary, #1e40af);
}

.dl-link__subtitle {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--brand-accent-dark, #15803d);
	display: flex;
	align-items: center;
	gap: 4px;
}

.dl-link__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.dl-link__size {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--ink-500, #64748b);
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	padding: 4px 10px;
	border-radius: 20px;
	white-space: nowrap;
}

.dl-link__size i {
	margin-right: 4px;
	color: var(--ink-400, #94a3b8);
}

.dl-link__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	font-size: 0.85rem;
	font-weight: 700;
	border-radius: 20px;
	background: var(--brand-primary, #1e40af);
	color: #ffffff !important;
	text-decoration: none !important;
	box-shadow: 0 2px 6px rgba(30, 64, 175, 0.25);
	transition: all 0.2s ease;
	white-space: nowrap;
}

.dl-link__btn svg {
	width: 14px;
	height: 14px;
	transition: transform 0.2s ease;
}

.dl-link__btn:hover,
.dl-link:hover .dl-link__btn {
	background: var(--brand-primary-dark, #175f9c);
	box-shadow: 0 4px 12px rgba(30, 64, 175, 0.35);
}

.dl-link:hover .dl-link__btn svg {
	transform: translateX(3px);
}

@media (max-width: 576px) {
	.dl-link {
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 12px !important;
		padding: 10px 14px !important;
		margin: 16px 0 !important;
		border-radius: 12px !important;
	}
	.dl-link__icon-wrap {
		width: 38px !important;
		height: 38px !important;
		min-width: 38px !important;
		border-radius: 10px !important;
		flex-shrink: 0 !important;
	}
	.dl-link__icon img {
		width: 24px !important;
		height: 24px !important;
	}
	.dl-link__info {
		display: none !important;
	}
	.dl-link__meta {
		flex: 1 !important;
		width: auto !important;
		border-top: none !important;
		padding-top: 0 !important;
		margin-top: 0 !important;
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 8px !important;
	}
	.dl-link__size {
		display: inline-flex !important;
		font-size: 0.8rem !important;
		font-weight: 600 !important;
		padding: 5px 12px !important;
		border-radius: 20px !important;
		white-space: nowrap !important;
		flex-shrink: 0 !important;
	}
	.dl-link__btn {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 6px !important;
		padding: 8px 16px !important;
		font-size: 0.84rem !important;
		font-weight: 700 !important;
		border-radius: 20px !important;
		white-space: nowrap !important;
		flex-shrink: 0 !important;
		margin-left: auto !important;
	}
	.dl-link__btn svg {
		width: 14px !important;
		height: 14px !important;
		flex-shrink: 0 !important;
	}
}

@media (max-width: 380px) {
	.dl-link {
		padding: 8px 12px !important;
		gap: 8px !important;
	}
	.dl-link__size {
		font-size: 0.76rem !important;
		padding: 4px 8px !important;
	}
	.dl-link__btn {
		padding: 7px 12px !important;
		font-size: 0.78rem !important;
	}
}


/* =========================================================
   13. Scroll-reveal micro-interactions
   ========================================================= */
.reveal-up{ opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.reveal-up.is-visible{ opacity: 1; transform: none; }

/* =========================================================
   14. Legacy-content compatibility layer
   Older post/page content and some plugin shortcodes still
   emit a handful of Bootstrap-style utility classes; keep a
   minimal, cheap fallback so that content still reads fine
   without loading Bootstrap itself.
   ========================================================= */
.container, .container-fluid{ max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
.row{ display: flex; flex-wrap: wrap; margin-inline: -10px; }
.row > [class*="col-"]{ padding-inline: 10px; width: 100%; margin-bottom: 20px; }
@media (min-width: 768px){
	.row > .col-md-3{ width: 25%; }
	.row > .col-md-4{ width: 33.3333%; }
	.row > .col-md-6{ width: 50%; }
	.row > .col-md-8{ width: 66.6667%; }
	.row > .col-md-12{ width: 100%; }

	/* [oto_collection] shortcode grid: show 4 per row instead of the
	   default 3 (its markup is a plain .row.my-5 > .col-md-4, so this
	   is scoped to that combo rather than changing col-md-4 sitewide). */
	.row.my-5 > .col-md-4{ width: 25%; }
}
.card{ border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); }
.form-control{
	width: 100%; padding: 10px 14px;
	border: 1px solid var(--border-color); border-radius: var(--radius-sm);
	font-size: .95rem;
}
.form-control:focus{ outline: none; border-color: var(--brand-primary); }
.text-muted{ color: var(--ink-500); }
.text-dark{ color: var(--ink-900); }
.text-white{ color: #fff; }
.text-center{ text-align: center; }
.d-flex{ display: flex; }
.d-block{ display: block; }
.flex-column{ flex-direction: column; }
.flex-wrap{ flex-wrap: wrap; }
.align-items-center{ align-items: center; }
.mt-auto{ margin-top: auto; }
.mr-2{ margin-right: .5rem; }
.text-reset{ color: inherit; }

/* Bootstrap 4's responsive float utilities — old post/page content across
   the site uses these directly (e.g. `float-none float-md-right` on an
   image wrapper) to float images beside text starting at a given
   breakpoint. Matches Bootstrap 4's exact breakpoints so existing content
   behaves identically to before. */
.float-left{ float: left !important; }
.float-right{ float: right !important; }
.float-none{ float: none !important; }
@media (min-width: 576px){
	.float-sm-left{ float: left !important; }
	.float-sm-right{ float: right !important; }
	.float-sm-none{ float: none !important; }
}
@media (min-width: 768px){
	.float-md-left{ float: left !important; }
	.float-md-right{ float: right !important; }
	.float-md-none{ float: none !important; }
}
@media (min-width: 992px){
	.float-lg-left{ float: left !important; }
	.float-lg-right{ float: right !important; }
	.float-lg-none{ float: none !important; }
}
@media (min-width: 1200px){
	.float-xl-left{ float: left !important; }
	.float-xl-right{ float: right !important; }
	.float-xl-none{ float: none !important; }
}
.small{ font-size: .875rem; }
.rounded-circle{ border-radius: 50%; }
.shadow{ box-shadow: var(--shadow-md); }
.shadow-sm{ box-shadow: var(--shadow-sm); }
.border{ border: 1px solid var(--border-color); }
.border-0{ border: none; }
.mb-1{ margin-bottom: .25rem; } .mb-2{ margin-bottom: .5rem; } .mb-3{ margin-bottom: 1rem; } .mb-4{ margin-bottom: 1.5rem; }
.mt-1{ margin-top: .25rem; } .mt-2{ margin-top: .5rem; } .mt-3{ margin-top: 1rem; } .mt-4{ margin-top: 1.5rem; }

/* Bootstrap-style buttons/badges still used by some content shortcodes */
.btn-sm{ padding: .4rem 1rem; font-size: .85rem; }
.btn-outline-primary{
	background: var(--surface);
	border: 1px solid var(--brand-primary);
	color: var(--brand-primary) !important;
}
.btn-outline-primary:hover{ background: var(--brand-primary); color: #fff !important; }
.btn-outline-secondary{
	background: var(--surface);
	border: 1px solid var(--border-color);
	color: var(--ink-700) !important;
}
.btn-outline-secondary:hover{ background: var(--brand-primary-light); border-color: var(--brand-primary); color: var(--brand-primary-dark) !important; }
.badge{
	display: inline-block;
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--brand-primary-light);
	color: var(--brand-primary-dark);
}

/* =========================================================
   15. Responsive
   ========================================================= */
@media (max-width: 767.98px){
	.site-footer__row{ text-align: center; justify-content: center; }
	.site-footer__links{ justify-content: center; }
}

/* =========================================================
   16. Social Media Image Hover Overlay (Non-Intrusive Portal)
   ========================================================= */
.img-share-overlay{
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(-50%, -50%) scale(0.85);
	z-index: 9999;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	background: rgba(15, 23, 42, 0.82);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-radius: 30px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
}

.img-share-overlay.is-visible{
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	transform: translate(-50%, -50%) scale(1) !important;
}

.img-share-btn{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	color: #ffffff !important;
	border: none;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease, color .2s ease;
	text-decoration: none !important;
}

.img-share-btn svg{
	width: 17px;
	height: 17px;
}

.img-share-btn:hover{
	transform: scale(1.15);
}

/* Platform Brand Colors on Hover */
.img-share-btn--fb:hover{ background: #1877f2; }
.img-share-btn--x:hover{ background: #000000; }
.img-share-btn--pin:hover{ background: #e60023; }
.img-share-btn--li:hover{ background: #0a66c2; }
.img-share-btn--wa:hover{ background: #25d366; }
.img-share-btn--copy:hover{ background: var(--brand-accent); }

.img-share-btn--copy.is-copied{
	background: var(--brand-accent) !important;
	transform: scale(1.2);
}

/* =========================================================
   17. Page/Post Engagement & Bookmark Bar
   ========================================================= */
.post-engagement-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 12px;
	padding: 8px 16px;
	margin: 16px 0 24px 0;
	background: linear-gradient(135deg, rgba(248, 250, 252, 0.9), rgba(255, 255, 255, 0.98));
	border: 1px solid var(--border-color, #e2e8f0);
	border-radius: var(--radius-md, 10px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.post-engagement-bar__left,
.post-engagement-bar__right {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	flex-shrink: 0;
}

.post-engagement-bar__label {
	font-size: 0.82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ink-500, #64748b);
	margin-right: 2px;
}

.post-engagement-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 6px 14px;
	min-height: 36px;
	font-size: 0.84rem;
	font-weight: 600;
	border-radius: 20px;
	background: #ffffff;
	border: 1px solid var(--border-color, #cbd5e1);
	color: var(--ink-700, #334155);
	cursor: pointer;
	text-decoration: none !important;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	white-space: nowrap;
}

/* Icon-only social share buttons on the right side */
.post-engagement-bar__right .post-engagement-btn {
	width: 36px;
	height: 36px;
	min-width: 36px;
	min-height: 36px;
	padding: 0;
	border-radius: 50%;
}

.post-engagement-btn svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.post-engagement-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Bookmark Button Styles */
.post-engagement-btn--bookmark:hover {
	border-color: #f59e0b;
	color: #d97706;
	background: #fffbeb;
}

.post-engagement-btn--bookmark.is-bookmarked {
	background: linear-gradient(135deg, #f59e0b, #d97706);
	color: #ffffff !important;
	border-color: #d97706;
	box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
}

.post-engagement-btn--bookmark.is-bookmarked:hover {
	background: linear-gradient(135deg, #d97706, #b45309);
	color: #ffffff !important;
	border-color: #b45309;
}

/* Social Platform Button Hover States */
.post-engagement-btn--fb:hover { background: #1877f2; color: #ffffff !important; border-color: #1877f2; }
.post-engagement-btn--x:hover { background: #000000; color: #ffffff !important; border-color: #000000; }
.post-engagement-btn--pin:hover { background: #e60023; color: #ffffff !important; border-color: #e60023; }
.post-engagement-btn--li:hover { background: #0a66c2; color: #ffffff !important; border-color: #0a66c2; }
.post-engagement-btn--wa:hover { background: #25d366; color: #ffffff !important; border-color: #25d366; }
.post-engagement-btn--copy:hover { background: var(--brand-primary, #1e40af); color: #ffffff !important; border-color: var(--brand-primary, #1e40af); }

.post-engagement-btn--copy.is-copied {
	background: #10b981 !important;
	color: #ffffff !important;
	border-color: #10b981 !important;
}

@media (max-width: 900px) {
	.post-engagement-bar {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding: 10px 12px;
	}
	.post-engagement-bar__left {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: nowrap;
		gap: 8px;
	}
	.post-engagement-bar__left .post-engagement-pill {
		min-width: 0;
		flex: 1;
		padding: 6px 10px;
		font-size: 0.8rem;
	}
	.post-engagement-bar__left .post-engagement-pill span {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.post-engagement-bar__left .post-engagement-btn--bookmark {
		flex-shrink: 0;
		padding: 6px 12px;
		font-size: 0.82rem;
	}
	.post-engagement-bar__right {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: nowrap;
		gap: 6px;
		border-top: 1px solid var(--border-color, #e2e8f0);
		padding-top: 8px;
	}
	[data-theme="dark"] .post-engagement-bar__right {
		border-top-color: #1e293b !important;
	}
}

@media (max-width: 440px) {
	.post-engagement-bar__label {
		display: none;
	}
	.post-engagement-bar__right {
		justify-content: space-around;
		gap: 4px;
	}
	.post-engagement-bar__right .post-engagement-btn {
		width: 32px;
		height: 32px;
		min-width: 32px;
		min-height: 32px;
	}
	.post-engagement-bar__right .post-engagement-btn svg {
		width: 14px;
		height: 14px;
	}
}

.post-engagement-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	font-size: 0.84rem;
	font-weight: 500;
	color: var(--ink-700, #334155);
	background: #ffffff;
	border: 1px solid #cbd5e1;
	border-radius: 20px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.post-engagement-pill svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

.post-engagement-pill--count,
.post-engagement-pill--featured {
	background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
	border-color: #bfdbfe;
	color: #1e40af;
}

.post-engagement-pill--count svg,
.post-engagement-pill--featured svg {
	color: #2563eb;
}

.post-engagement-pill--badge {
	background: #f8fafc;
	border-color: #e2e8f0;
	color: #475569;
}

.post-engagement-pill--badge svg {
	color: #64748b;
}

.post-engagement-meta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--ink-500, #64748b);
	background: rgba(241, 245, 249, 0.8);
	border: 1px solid #e2e8f0;
	border-radius: 20px;
}

.post-engagement-meta svg {
	width: 14px;
	height: 14px;
	color: var(--brand-primary, #1e40af);
}

/* =========================================================
   18. Table of Contents & WCAG 2.1 Focus-visible Polish
   ========================================================= */
.oto_toc {
	background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
	border: 1px solid #e2e8f0;
	border-left: 4px solid var(--brand-primary, #1e40af);
	border-radius: var(--radius-md, 12px);
	padding: 18px 22px;
	margin: 24px 0 32px 0;
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
}

.oto_toc h2, .oto_toc h3, .oto_toc .toc_title {
	font-size: 1.08rem;
	font-weight: 700;
	color: var(--ink-900, #0f172a);
	margin-bottom: 12px;
	margin-top: 0;
}

.oto_toc ul, .oto_toc ol {
	margin: 0;
	padding-left: 18px;
}

.oto_toc li {
	margin-bottom: 6px;
	font-size: 0.94rem;
}

.oto_toc a {
	color: var(--ink-700, #334155);
	font-weight: 500;
	text-decoration: none;
	transition: color 0.15s ease;
}

.oto_toc a:hover {
	color: var(--brand-primary, #1e40af);
	text-decoration: underline;
}

/* Accessibility Focus-Visible Rings for WCAG Compliance */
:focus-visible {
	outline: 2px solid var(--brand-primary, #1e40af) !important;
	outline-offset: 3px !important;
}

/* =========================================================
   19. Print Optimization Stylesheet (@media print)
   ========================================================= */
@media print {
	.site-header,
	.site-footer,
	.sidebar,
	.inpageAd,
	.post-engagement-bar,
	.img-share-overlay,
	#oto-back-to-top,
	.post-pager,
	.site-header__search,
	.breadcrumbs-row {
		display: none !important;
	}

	body {
		background: #ffffff !important;
		color: #000000 !important;
		font-size: 12pt !important;
	}

	.layout {
		display: block !important;
		padding: 0 !important;
	}

	.layout__main {
		width: 100% !important;
	}

	a[href]:after {
		content: "";
	}
}

/* =========================================================
   20. Saved Templates Drawer, Header Button & Toast Notification
   ========================================================= */
.site-header__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.site-header__saved-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 6px 10px;
	min-width: 36px;
	height: 36px;
	background: var(--brand-primary-light, #eef6ff);
	border: 1px solid rgba(30, 115, 190, 0.2);
	border-radius: 30px;
	color: var(--brand-primary-dark, #175f9c);
	font-size: 0.84rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.site-header__saved-btn:hover {
	background: var(--brand-primary);
	color: #ffffff;
	border-color: var(--brand-primary);
	transform: scale(1.06);
}

.site-header__saved-btn svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

.site-header__saved-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--brand-primary, #1e73be);
	color: #ffffff;
	font-size: 0.74rem;
	font-weight: 800;
	line-height: 1;
}

.site-header__saved-btn:hover .site-header__saved-badge {
	background: #ffffff;
	color: var(--brand-primary-dark);
}

/* Slide-Over Drawer Backdrop */
.oto-drawer-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.5);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 9998;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
.oto-drawer-backdrop.is-visible {
	opacity: 1;
	visibility: visible;
}

/* Slide-Over Drawer Modal */
.oto-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	max-width: 420px;
	background: #ffffff;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
	transform: translateX(100%);
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.oto-drawer.is-open {
	transform: translateX(0);
}

.oto-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 22px;
	border-bottom: 1px solid var(--border-color, #e2e8f0);
	background: var(--surface-alt, #f8fafc);
}

.oto-drawer__title-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
}
.oto-drawer__title-wrap svg {
	width: 20px;
	height: 20px;
	color: var(--brand-primary, #1e73be);
}
.oto-drawer__title {
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--ink-900, #0f172a);
	margin: 0;
}
.oto-drawer__badge {
	background: var(--brand-primary-light, #eef6ff);
	color: var(--brand-primary-dark, #175f9c);
	font-size: 0.78rem;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 999px;
	border: 1px solid rgba(30, 115, 190, 0.2);
}

.oto-drawer__close {
	background: transparent;
	border: none;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--ink-500, #64748b);
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 6px;
	transition: color 0.15s ease, background 0.15s ease;
}
.oto-drawer__close:hover {
	background: #e2e8f0;
	color: var(--ink-900);
}

.oto-drawer__body {
	flex: 1;
	overflow-y: auto;
	padding: 16px 20px;
}

.oto-saved-empty {
	text-align: center;
	padding: 48px 20px;
	color: var(--ink-500);
}
.oto-saved-empty svg {
	width: 48px;
	height: 48px;
	color: var(--ink-400, #94a3b8);
	margin-bottom: 14px;
}
.oto-saved-empty h3 {
	font-size: 1.1rem;
	margin-bottom: 8px;
}
.oto-saved-empty p {
	font-size: 0.9rem;
	line-height: 1.5;
}

.oto-saved-items {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.oto-saved-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	background: var(--surface, #ffffff);
	border: 1px solid var(--border-color, #e2e8f0);
	border-radius: var(--radius-md, 12px);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.oto-saved-item:hover {
	border-color: var(--brand-primary, #1e73be);
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

.oto-saved-item__info {
	flex: 1;
	min-width: 0;
}
.oto-saved-item__title {
	display: block;
	font-weight: 700;
	font-size: 0.92rem;
	color: var(--ink-900, #0f172a);
	text-decoration: none !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.oto-saved-item__title:hover {
	color: var(--brand-primary, #1e73be);
}

.oto-saved-item__remove {
	background: transparent;
	border: none;
	color: #ef4444;
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 6px;
	transition: background-color 0.15s ease;
}
.oto-saved-item__remove:hover {
	background: #fee2e2;
}

.oto-drawer__footer {
	padding: 16px 20px;
	border-top: 1px solid var(--border-color, #e2e8f0);
	background: var(--surface-alt, #f8fafc);
	display: flex;
	gap: 10px;
}

.oto-drawer__close-footer-btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 18px;
	background: var(--brand-primary, #1e73be);
	color: #ffffff;
	border: none;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.88rem;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.oto-drawer__close-footer-btn:hover {
	background: var(--brand-primary-dark, #175f9c);
	transform: scale(1.02);
}
.oto-drawer__close-footer-btn svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

.oto-drawer__clear-btn {
	padding: 10px 18px;
	background: #ffffff;
	border: 1px solid var(--border-color, #cbd5e1);
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.88rem;
	color: var(--ink-700, #334155);
	cursor: pointer;
}
.oto-drawer__clear-btn:hover {
	background: #fee2e2;
	color: #dc2626;
	border-color: #fca5a5;
}

.oto-drawer__pwa-btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 18px;
	background: var(--brand-primary, #1e73be);
	color: #ffffff;
	border: none;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.88rem;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.oto-drawer__pwa-btn:hover {
	background: var(--brand-primary-dark, #175f9c);
}
.oto-drawer__pwa-btn svg {
	width: 16px;
	height: 16px;
}

/* Toast Notification */
.oto-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translate(-50%, 20px) scale(0.95);
	z-index: 10000;
	background: #1e293b !important;
	color: #ffffff !important;
	border: 1px solid #334155 !important;
	padding: 10px 22px;
	border-radius: 30px;
	font-size: 0.88rem;
	font-weight: 600;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}
.oto-toast.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0) scale(1);
}

/* Flying Bookmark Particle & Target Arrival Bounce */
.oto-fly-particle {
	position: fixed;
	z-index: 10001;
	width: 36px;
	height: 36px;
	margin-left: -18px;
	margin-top: -18px;
	border-radius: 50%;
	background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 24px rgba(245, 158, 11, 0.5), 0 2px 8px rgba(0, 0, 0, 0.2);
	pointer-events: none;
	opacity: 1;
	transition: transform 0.62s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.62s ease;
}

.oto-fly-particle svg {
	width: 18px;
	height: 18px;
}

@keyframes oto-target-bounce {
	0% { transform: scale(1); }
	40% { transform: scale(1.22); }
	70% { transform: scale(0.95); }
	100% { transform: scale(1); }
}

.oto-pulse-bounce {
	animation: oto-target-bounce 0.55s ease-out !important;
}

.oto-pulse-bounce .site-header__saved-badge {
	background: #f59e0b !important;
	color: #ffffff !important;
	box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.35);
	transform: scale(1.25);
	transition: all 0.2s ease;
}

/* Floating WhatsApp Contact Widget */
.oto-wa-float {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 9999;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #25d366;
	color: #ffffff;
	text-decoration: none;
	padding: 10px 18px 10px 12px;
	border-radius: 50px;
	box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4), 0 2px 6px rgba(0, 0, 0, 0.12);
	transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, background-color 0.2s ease;
}
.oto-wa-float:hover {
	transform: translateY(-4px) scale(1.03);
	background: #20bd5a;
	color: #ffffff;
	box-shadow: 0 10px 26px rgba(37, 211, 102, 0.52), 0 4px 10px rgba(0, 0, 0, 0.15);
}
.oto-wa-float:active {
	transform: translateY(0) scale(0.98);
}
.oto-wa-float__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
}
.oto-wa-float__tooltip {
	font-size: 0.88rem;
	font-weight: 700;
	letter-spacing: 0.2px;
	white-space: nowrap;
	font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
}

/* Adjust Back to Top button so it does not overlap WhatsApp widget */
#oto-back-to-top {
	bottom: 84px !important;
}

@media (max-width: 600px) {
	.oto-wa-float {
		bottom: 18px;
		right: 16px;
		padding: 10px;
		border-radius: 50%;
	}
	.oto-wa-float__tooltip {
		display: none;
	}
	#oto-back-to-top {
		bottom: 76px !important;
		right: 16px !important;
	}
}

/* Theme Toggle Button */
.site-header__theme-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: var(--brand-primary-light, #eaf4fd);
	border: 1px solid var(--border-subtle, #d0e4f7);
	color: var(--brand-primary, #1e73be);
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.2s ease;
}
.site-header__theme-btn:hover {
	background: #d4e8fc;
	color: var(--brand-primary-dark, #175f9c);
	transform: scale(1.06);
}
.theme-icon-sun { display: inline-flex; align-items: center; }
.theme-icon-moon { display: none; align-items: center; }

/* Dark Theme System */
[data-theme="dark"] {
	--surface: #131b2e;
	--surface-alt: #0f172a;
	--surface-body: #090d16;
	--surface-card: #131b2e;
	--surface-subtle: #0f172a;
	
	--border-color: #1e293b;
	--border-subtle: #1e293b;

	--ink-900: #f8fafc;
	--ink-800: #f1f5f9;
	--ink-700: #cbd5e1;
	--ink-500: #94a3b8;
	--ink-400: #64748b;
	--ink-100: #1e293b;

	--brand-primary-light: #162440;
	--brand-accent-light: #0d2818;
	--link-color: #60a5fa;
}

[data-theme="dark"] body,
[data-theme="dark"] #site-main,
[data-theme="dark"] .singlePost,
[data-theme="dark"] .layout,
[data-theme="dark"] .layout__main {
	background-color: #090d16 !important;
	color: #cbd5e1 !important;
}

[data-theme="dark"] .wrap,
[data-theme="dark"] .wrap--narrow,
[data-theme="dark"] .site-header__top-inner,
[data-theme="dark"] .site-nav .wrap,
[data-theme="dark"] .home-intro .wrap,
[data-theme="dark"] .trust-row__grid {
	background: transparent !important;
	background-color: transparent !important;
}

/* 1. Header & Navigation */
[data-theme="dark"] .site-header,
[data-theme="dark"] .site-header__top {
	background: #0b1120 !important;
	background-image: none !important;
	border-color: #1e293b !important;
}

[data-theme="dark"] .site-nav {
	background: #0f172a !important;
	background-image: none !important;
	border-color: #1e293b !important;
}

[data-theme="dark"] .site-brand img {
	filter: brightness(0) invert(1);
}

[data-theme="dark"] .site-brand__name,
[data-theme="dark"] .site-brand__tagline {
	color: #f8fafc !important;
}

[data-theme="dark"] .site-nav__list > li > a {
	color: #cbd5e1 !important;
}

[data-theme="dark"] .site-nav__list > li:hover > a,
[data-theme="dark"] .site-nav__list > li.active > a,
[data-theme="dark"] .site-nav__list > li.current-menu-item > a {
	color: #60a5fa !important;
	background-color: #1e293b !important;
}

[data-theme="dark"] .site-nav__list .sub-menu {
	background: #131b2e !important;
	background-image: none !important;
	border-color: #1e293b !important;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .site-nav__list .sub-menu a {
	color: #cbd5e1 !important;
}

[data-theme="dark"] .site-nav__list .sub-menu a:hover {
	background: #1e293b !important;
	color: #60a5fa !important;
}

[data-theme="dark"] .site-header__theme-btn {
	background: #1e293b !important;
	border-color: #334155 !important;
	color: #f59e0b !important;
}
[data-theme="dark"] .theme-icon-sun { display: none !important; }
[data-theme="dark"] .theme-icon-moon { display: inline-flex !important; }

[data-theme="dark"] .site-header__saved-btn {
	background: #1e293b !important;
	border-color: #334155 !important;
	color: #60a5fa !important;
}
[data-theme="dark"] .site-header__saved-badge {
	border-color: #0f172a !important;
}
[data-theme="dark"] .site-nav__toggle {
	background: #1e293b !important;
	border-color: #334155 !important;
}
[data-theme="dark"] .site-nav__toggle span {
	background: #f8fafc !important;
}

/* Homepage Hero & Intro Dark Theme */
[data-theme="dark"] .hero {
	background: linear-gradient(180deg, #0f172a 0%, #131b2e 100%) !important;
	background-image: none !important;
	border-bottom: 1px solid #1e293b;
	color: #f8fafc !important;
}
[data-theme="dark"] .hero__title {
	color: #f8fafc !important;
}
[data-theme="dark"] .hero__lead {
	color: #cbd5e1 !important;
}
[data-theme="dark"] .hero__intro {
	color: #94a3b8 !important;
}
[data-theme="dark"] .hero-search-wrap .oto-search {
	background-color: #1e293b !important;
	border-color: #334155 !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}
[data-theme="dark"] .hero-search-wrap .oto-search__input {
	background-color: #1e293b !important;
	color: #f8fafc !important;
}
[data-theme="dark"] .hero-search-wrap .oto-search__input::placeholder {
	color: #64748b !important;
}
[data-theme="dark"] .hero__quick-label {
	color: #94a3b8 !important;
}
[data-theme="dark"] .hero__quick .pill {
	background: #1e293b !important;
	border-color: #334155 !important;
	color: #cbd5e1 !important;
}
[data-theme="dark"] .hero__quick .pill:hover {
	background: #2563eb !important;
	border-color: #2563eb !important;
	color: #ffffff !important;
}
[data-theme="dark"] .home-intro {
	background: #0b1120 !important;
	border-bottom-color: #1e293b !important;
}
[data-theme="dark"] .home-intro__lead {
	color: #cbd5e1 !important;
}
[data-theme="dark"] .section--feature {
	background: linear-gradient(135deg, #131b2e 0%, #0f172a 100%) !important;
	background-image: none !important;
}
[data-theme="dark"] .trust-row {
	background: #131b2e !important;
	border-bottom-color: #1e293b !important;
}
[data-theme="dark"] .trust-item strong {
	color: #f8fafc !important;
}
[data-theme="dark"] .trust-item div span {
	color: #94a3b8 !important;
}
[data-theme="dark"] .trust-item__icon {
	background: #1e293b !important;
	color: #60a5fa !important;
}

/* 2. Search Bar & Custom Dropdowns */
[data-theme="dark"] .oto-search,
[data-theme="dark"] .oto-select__trigger,
[data-theme="dark"] .oto-search__input,
[data-theme="dark"] .oto-select__menu {
	background-color: #1e293b !important;
	color: #f8fafc !important;
	border-color: #334155 !important;
}

[data-theme="dark"] .oto-select__option {
	color: #cbd5e1 !important;
}

[data-theme="dark"] .oto-select__option:hover,
[data-theme="dark"] .oto-select__option.is-selected {
	background-color: #334155 !important;
	color: #60a5fa !important;
}

/* 3. Post Engagement / Action Bar */
[data-theme="dark"] .post-engagement-bar {
	background: #131b2e !important;
	background-image: none !important;
	border-color: #1e293b !important;
	color: #cbd5e1 !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .post-engagement-pill {
	background: #1e293b !important;
	border-color: #334155 !important;
	color: #60a5fa !important;
}

[data-theme="dark"] .post-engagement-pill span,
[data-theme="dark"] .post-engagement-pill strong {
	color: #60a5fa !important;
}

[data-theme="dark"] .post-engagement-btn {
	background-color: #1e293b !important;
	color: #cbd5e1 !important;
	border-color: #334155 !important;
}

[data-theme="dark"] .post-engagement-btn svg {
	stroke: #cbd5e1 !important;
}

[data-theme="dark"] .post-engagement-btn:hover {
	background-color: #334155 !important;
	color: #60a5fa !important;
}

[data-theme="dark"] .post-engagement-btn--bookmark:hover {
	background-color: #451a03 !important;
	color: #fbbf24 !important;
	border-color: #d97706 !important;
}

[data-theme="dark"] .post-engagement-btn--bookmark.is-bookmarked {
	background: linear-gradient(135deg, #f59e0b, #d97706) !important;
	color: #ffffff !important;
	border-color: #d97706 !important;
}

[data-theme="dark"] .post-engagement-btn--bookmark.is-bookmarked:hover {
	background: linear-gradient(135deg, #ea580c, #c2410c) !important;
	color: #ffffff !important;
	border-color: #c2410c !important;
}

[data-theme="dark"] .post-engagement-bar__label {
	color: #94a3b8 !important;
}

/* 4. Headings & In-Article Elements */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .entry-title,
[data-theme="dark"] strong,
[data-theme="dark"] b {
	color: #f8fafc !important;
}

[data-theme="dark"] p,
[data-theme="dark"] li {
	color: #cbd5e1;
}

[data-theme="dark"] .singlePost h2 {
	background: linear-gradient(90deg, #1e293b 0%, #0f172a 100%) !important;
	color: #f8fafc !important;
	border-left: 4px solid #3b82f6 !important;
}

[data-theme="dark"] .singlePost h3,
[data-theme="dark"] .page h3,
[data-theme="dark"] h3 {
	border-left: none !important;
}

[data-theme="dark"] .oto_toc {
	background: #131b2e !important;
	border-color: #1e293b !important;
	color: #cbd5e1 !important;
}

/* 5. Author Box (.oto-author & .claire_author_box) */
[data-theme="dark"] .oto-author,
[data-theme="dark"] .claire_author_box,
[data-theme="dark"] .claire-author-card {
	--bg: #131b2e !important;
	--txt: #f8fafc !important;
	background: #131b2e !important;
	background-color: #131b2e !important;
	border: 1px solid #1e293b !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
	color: #cbd5e1 !important;
}

[data-theme="dark"] .oto-author__avatar-wrap {
	box-shadow: 0 0 0 3px #1e293b, 0 2px 12px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .oto-author__name,
[data-theme="dark"] .oto-author__name a {
	color: #f8fafc !important;
}

[data-theme="dark"] .oto-author__badge {
	background-color: #1e293b !important;
	color: #60a5fa !important;
	border-color: #334155 !important;
}

[data-theme="dark"] .oto-author__title {
	color: #94a3b8 !important;
}

[data-theme="dark"] .oto-author__bio {
	color: #cbd5e1 !important;
}

[data-theme="dark"] .oto-author__chip {
	background: #1e293b !important;
	border-color: #334155 !important;
	color: #cbd5e1 !important;
}

[data-theme="dark"] .oto-author__chip b {
	color: #60a5fa !important;
}

[data-theme="dark"] .oto-author__actions .btn-primary {
	background: #2563eb !important;
	border-color: #2563eb !important;
	color: #ffffff !important;
}

[data-theme="dark"] .oto-author__actions .btn-outline-primary {
	background: #1e293b !important;
	border-color: #3b82f6 !important;
	color: #60a5fa !important;
}

[data-theme="dark"] .oto-author__proof {
	background: #0f172a !important;
	border-color: #1e293b !important;
	color: #cbd5e1 !important;
}

[data-theme="dark"] .oto-author__proof-title {
	color: #94a3b8 !important;
}

[data-theme="dark"] .oto-author__links a {
	background: #1e293b !important;
	border-color: #334155 !important;
	color: #60a5fa !important;
}

[data-theme="dark"] .oto-author__links a:hover {
	background: #2563eb !important;
	border-color: #2563eb !important;
	color: #ffffff !important;
}

/* 6. Previous & Next Article Navigation Cards (.post-pager) */
[data-theme="dark"] .post-pager__item a {
	background: #131b2e !important;
	background-image: none !important;
	border-color: #1e293b !important;
	color: #f8fafc !important;
}

[data-theme="dark"] .post-pager__item a:hover {
	background: #1e293b !important;
	border-color: #3b82f6 !important;
	color: #60a5fa !important;
}

[data-theme="dark"] .post-pager__label {
	color: #60a5fa !important;
}

[data-theme="dark"] .post-pager__title {
	color: #f8fafc !important;
}

[data-theme="dark"] .post-pager__icon {
	background: #1e40af !important;
	color: #ffffff !important;
}

/* 7. Grid Cards, Download Containers & Sidebar Widgets */
[data-theme="dark"] .tpl-card,
[data-theme="dark"] .tpl-card--collection,
[data-theme="dark"] .card,
[data-theme="dark"] .d_card,
[data-theme="dark"] .otb-template-item,
[data-theme="dark"] .d_sidebar,
[data-theme="dark"] .layout__aside,
[data-theme="dark"] .widgett,
[data-theme="dark"] .oto-drawer,
[data-theme="dark"] .oto-modal,
[data-theme="dark"] .section--alt,
[data-theme="dark"] .sidebar-ad-sticky {
	background-color: #131b2e !important;
	border-color: #1e293b !important;
	color: #cbd5e1 !important;
}

[data-theme="dark"] .tpl-card__title,
[data-theme="dark"] .tpl-card__title a,
[data-theme="dark"] .card-title,
[data-theme="dark"] .card-title a,
[data-theme="dark"] .row.my-5 h2 a {
	color: #f8fafc !important;
}

[data-theme="dark"] .tpl-card__excerpt,
[data-theme="dark"] .card-text {
	color: #94a3b8 !important;
}

[data-theme="dark"] .tpl-card__badge {
	background: #1e293b !important;
	color: #f8fafc !important;
	border: 1px solid #334155 !important;
}

[data-theme="dark"] .sidebar_head {
	background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%) !important;
	color: #ffffff !important;
}

[data-theme="dark"] .d_sidebar:first-of-type .sidebar_head {
	background: linear-gradient(135deg, #065f46 0%, #047857 100%) !important;
	color: #ffffff !important;
}

[data-theme="dark"] .sidebar_head a {
	color: #ffffff !important;
}

[data-theme="dark"] .d_sidebar h6,
[data-theme="dark"] .d_sidebar h5 {
	background-color: #1e293b !important;
	color: #f8fafc !important;
	border-color: #334155 !important;
}

[data-theme="dark"] .d_sidebar ul,
[data-theme="dark"] .d_sidebar li,
[data-theme="dark"] .layout__aside li {
	border-bottom-color: #1e293b !important;
}

[data-theme="dark"] .d_sidebar a,
[data-theme="dark"] .layout__aside a {
	color: #cbd5e1 !important;
}

[data-theme="dark"] .d_sidebar a:hover,
[data-theme="dark"] .layout__aside a:hover {
	color: #60a5fa !important;
}

/* 8. Format Filter Bar & Modals */
[data-theme="dark"] .oto-filter-bar {
	background: #131b2e !important;
	border-color: #1e293b !important;
}

[data-theme="dark"] .oto-filter-bar__label {
	color: #94a3b8 !important;
}

[data-theme="dark"] .oto-filter-btn {
	background: #1e293b !important;
	border-color: #334155 !important;
	color: #cbd5e1 !important;
}

[data-theme="dark"] .oto-filter-btn.is-active {
	background: #2563eb !important;
	border-color: #2563eb !important;
	color: #ffffff !important;
}

[data-theme="dark"] .oto-modal__title {
	color: #f8fafc !important;
}

[data-theme="dark"] .oto-modal__desc {
	color: #cbd5e1 !important;
}

[data-theme="dark"] .oto-saved-item {
	background: #1e293b !important;
	border-color: #334155 !important;
	color: #f8fafc !important;
}

/* 9. Back to Top Button & Footer */
[data-theme="dark"] #oto-back-to-top {
	background-color: #1e293b !important;
	color: #f8fafc !important;
	border: 1px solid #334155 !important;
}

[data-theme="dark"] .site-footer {
	background-color: #060911 !important;
	border-top-color: #1e293b !important;
}

[data-theme="dark"] .site-footer__notice {
	background-color: #0f172a !important;
	color: #cbd5e1 !important;
	border: 1px solid #1e293b !important;
	padding: 12px 20px !important;
	border-radius: 10px !important;
}

[data-theme="dark"] .site-footer__notice a {
	color: #60a5fa !important;
}

/* 10. WPDM Download Link Cards (.dl-link) */
[data-theme="dark"] .dl-link {
	background: #131b2e !important;
	background-image: none !important;
	border: 1px solid #1e293b !important;
	border-left: none !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .dl-link:hover {
	border-color: #2563eb !important;
	border-left: none !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .dl-link__icon-wrap {
	background: #1e293b !important;
	border-color: #334155 !important;
}

[data-theme="dark"] .dl-link:hover .dl-link__icon-wrap {
	background: #334155 !important;
}

[data-theme="dark"] .dl-link__title {
	color: #f8fafc !important;
}

[data-theme="dark"] .dl-link__title:hover,
[data-theme="dark"] .dl-link:hover .dl-link__title {
	color: #60a5fa !important;
}

[data-theme="dark"] .dl-link__subtitle {
	color: #34d399 !important;
}

[data-theme="dark"] .dl-link__size {
	background: #1e293b !important;
	border-color: #334155 !important;
	color: #cbd5e1 !important;
}

[data-theme="dark"] .dl-link__size i {
	color: #94a3b8 !important;
}

[data-theme="dark"] .dl-link__btn {
	background: #2563eb !important;
	color: #ffffff !important;
	box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4) !important;
}

[data-theme="dark"] .dl-link__btn:hover,
[data-theme="dark"] .dl-link:hover .dl-link__btn {
	background: #1d4ed8 !important;
}

/* 11. Audio Player Dark Mode Skin (HTML5, MediaElement.js & TTS Plugins) */
[data-theme="dark"] audio,
[data-theme="dark"] .wp-block-audio audio {
	filter: invert(0.9) hue-rotate(180deg) !important;
	border-radius: 30px;
}

[data-theme="dark"] .wp-block-audio {
	background: #131b2e !important;
	border: 1px solid #1e293b !important;
	padding: 12px 18px;
	border-radius: 16px;
	color: #cbd5e1 !important;
}

[data-theme="dark"] .mejs-container,
[data-theme="dark"] .mejs-embed,
[data-theme="dark"] .mejs-embed body,
[data-theme="dark"] .mejs-container .mejs-controls {
	background: #131b2e !important;
	border-color: #1e293b !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
	color: #cbd5e1 !important;
	border-radius: 12px;
}

[data-theme="dark"] .mejs-controls .mejs-time-rail .mejs-time-total {
	background: #1e293b !important;
}

[data-theme="dark"] .mejs-controls .mejs-time-rail .mejs-time-loaded {
	background: #334155 !important;
}

[data-theme="dark"] .mejs-controls .mejs-time-rail .mejs-time-current {
	background: #2563eb !important;
}

[data-theme="dark"] .mejs-controls .mejs-time-float {
	background: #1e293b !important;
	color: #f8fafc !important;
	border-color: #334155 !important;
}

[data-theme="dark"] .mejs-controls .mejs-time,
[data-theme="dark"] .mejs-controls .mejs-time span {
	color: #cbd5e1 !important;
}

[data-theme="dark"] .mejs-controls .mejs-button button {
	color: #cbd5e1 !important;
}

[data-theme="dark"] .audioplayer,
[data-theme="dark"] .audio-player,
[data-theme="dark"] .oto-audio-player,
[data-theme="dark"] .voice-player,
[data-theme="dark"] .tts-player,
[data-theme="dark"] .tts-container,
[data-theme="dark"] .speech-container,
[data-theme="dark"] .ap-container,
[data-theme="dark"] .sc_player,
[data-theme="dark"] .listen-player,
[data-theme="dark"] .read-aloud-player,
[data-theme="dark"] .player-container,
[data-theme="dark"] [class*="audio-player"],
[data-theme="dark"] [class*="audioplayer"],
[data-theme="dark"] [class*="voice-player"],
[data-theme="dark"] [class*="tts-player"],
[data-theme="dark"] [class*="speech-player"],
[data-theme="dark"] [class*="audio_player"],
[data-theme="dark"] [class*="sound-player"] {
	background: #131b2e !important;
	background-color: #131b2e !important;
	border: 1px solid #1e293b !important;
	color: #cbd5e1 !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
	border-radius: 12px;
}

[data-theme="dark"] [class*="audio-player"] *,
[data-theme="dark"] [class*="audioplayer"] *,
[data-theme="dark"] [class*="voice-player"] *,
[data-theme="dark"] [class*="tts-player"] * {
	color: #cbd5e1;
}

[data-theme="dark"] [class*="audio-player"] h1,
[data-theme="dark"] [class*="audio-player"] h2,
[data-theme="dark"] [class*="audio-player"] h3,
[data-theme="dark"] [class*="audio-player"] strong,
[data-theme="dark"] [class*="audioplayer"] strong {
	color: #f8fafc !important;
}

[data-theme="dark"] [class*="audio-player"] button,
[data-theme="dark"] [class*="audioplayer"] button,
[data-theme="dark"] .ap-btn,
[data-theme="dark"] .audioplayer-playbtn,
[data-theme="dark"] .audioplayer-pausebtn {
	background-color: #1e293b !important;
	border-color: #334155 !important;
	color: #60a5fa !important;
}

[data-theme="dark"] [class*="audio-player"] button:hover,
[data-theme="dark"] [class*="audioplayer"] button:hover {
	background-color: #2563eb !important;
	color: #ffffff !important;
}

/* Instant Template Format Filter Bar */
.oto-filter-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 24px;
	padding: 12px 16px;
	background: var(--surface-card, #ffffff);
	border: 1px solid var(--ink-100, #e2e8f0);
	border-radius: var(--radius-md, 8px);
}
.oto-filter-bar__label {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--ink-400, #64748b);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-right: 4px;
}
.oto-filter-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--surface-subtle, #f8fafc);
	border: 1px solid var(--ink-100, #e2e8f0);
	color: var(--ink-700, #334155);
	font-size: 0.85rem;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: 30px;
	cursor: pointer;
	transition: all 0.2s ease;
}
.oto-filter-btn:hover {
	border-color: var(--brand-primary, #1e73be);
	color: var(--brand-primary, #1e73be);
}
.oto-filter-btn.is-active {
	background: var(--brand-primary, #1e73be);
	border-color: var(--brand-primary, #1e73be);
	color: #ffffff;
}

/* Quick View Trigger Button on Grid Cards */
.tpl-card__media {
	position: relative;
}
.tpl-card__quick-view-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -40%) scale(0.9);
	opacity: 0;
	visibility: hidden;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(15, 23, 42, 0.88);
	color: #ffffff;
	border: none;
	padding: 8px 16px;
	border-radius: 30px;
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	backdrop-filter: blur(4px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
	transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tpl-card:hover .tpl-card__quick-view-btn {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, -50%) scale(1);
}
.tpl-card__quick-view-btn:hover {
	background: var(--brand-primary, #1e73be);
	transform: translate(-50%, -50%) scale(1.08);
}

/* Modal Lightbox */
.oto-modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(15, 23, 42, 0.65);
	backdrop-filter: blur(4px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
.oto-modal-backdrop.is-open {
	opacity: 1;
	visibility: visible;
}
.oto-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -45%) scale(0.95);
	z-index: 100001;
	width: 90%;
	max-width: 820px;
	max-height: 90vh;
	overflow-y: auto;
	background: var(--surface-card, #ffffff);
	border-radius: var(--radius-lg, 12px);
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
	padding: 28px;
	opacity: 0;
	visibility: hidden;
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease, visibility 0.3s ease;
}
.oto-modal.is-open {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, -50%) scale(1);
}
.oto-modal__close {
	position: absolute;
	top: 14px;
	right: 18px;
	background: none;
	border: none;
	font-size: 2rem;
	line-height: 1;
	color: var(--ink-400, #94a3b8);
	cursor: pointer;
	transition: color 0.2s ease;
}
.oto-modal__close:hover {
	color: var(--ink-900, #0f172a);
}
.oto-modal__content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	align-items: center;
}
.oto-modal__media img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	border: 1px solid var(--ink-100, #e2e8f0);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.oto-modal__format-badge {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 4px 10px;
	border-radius: 4px;
	background: #dbeafe;
	color: #1e40af;
	margin-bottom: 12px;
}
.oto-modal__format-badge--excel {
	background: #dcfce7;
	color: #166534;
}
.oto-modal__title {
	font-size: 1.35rem;
	font-weight: 700;
	margin: 0 0 12px;
	color: var(--ink-900, #0f172a);
}
.oto-modal__desc {
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--ink-500, #64748b);
	margin-bottom: 24px;
}
.oto-modal__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

@media (max-width: 680px) {
	.oto-modal__content {
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.oto-modal {
		padding: 20px;
	}
}

/* WPDM Download Page Countdown Box Fix */
.download-page__countdown {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 20px 24px;
	background: linear-gradient(135deg, #f0f7ff 0%, #e0f2fe 100%);
	border: 1.5px solid #3b82f6;
	border-radius: 14px;
	color: #1e293b;
	font-size: 1.02rem;
	font-weight: 600;
	text-align: center;
	margin: 20px 0 28px;
	box-shadow: 0 4px 14px rgba(59, 130, 246, 0.12);
}

.download-page__spinner {
	display: inline-block;
	width: 28px;
	height: 28px;
	border: 3px solid rgba(59, 130, 246, 0.25);
	border-top-color: #2563eb;
	border-radius: 50%;
	animation: oto-spin 0.8s linear infinite;
	flex-shrink: 0;
}

@keyframes oto-spin {
	to { transform: rotate(360deg); }
}

.download-page__countdown-text {
	display: block;
	line-height: 1.5;
	color: #334155;
	font-weight: 600;
}

.download-page__countdown-num {
	display: inline-block;
	white-space: nowrap !important;
	color: #1d4ed8;
	font-weight: 800;
	font-size: 1.1rem;
}

[data-theme="dark"] .download-page__countdown {
	background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
	border-color: #3b82f6 !important;
	color: #f8fafc !important;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .download-page__countdown-text {
	color: #cbd5e1 !important;
}

[data-theme="dark"] .download-page__countdown-num {
	color: #60a5fa !important;
}

/* Mobile Grid Layout & Card Optimization (screens below 480px / 440px) */
@media (max-width: 480px) {
	.tpl-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 12px !important;
	}
	.tpl-card__body {
		padding: 10px 12px 14px !important;
	}
	.tpl-card__title {
		font-size: 0.88rem !important;
		line-height: 1.3 !important;
	}
	.tpl-card__badge {
		top: 6px !important;
		left: 6px !important;
		font-size: 0.65rem !important;
		padding: 3px 8px !important;
	}
	.tpl-card__quick-view-btn {
		display: none !important;
	}
}

@media (max-width: 360px) {
	.tpl-grid {
		gap: 8px !important;
	}
	.tpl-card__body {
		padding: 8px 10px 12px !important;
	}
	.tpl-card__title {
		font-size: 0.82rem !important;
	}
}