/* ==========================================================================
   TirupatiHelps v2.0.0 — components.css
   11. Buttons
   12. Badges, chips, pills
   13. Cards
   14. Stat strip
   15. Forms
   16. Table of contents
   17. Social follow strips
   18. Pagination
   19. Widgets and sidebar blocks
   20. Accordions (FAQ)
   21. Notices and callouts
   22. Ad slots
   23. Rating bars and review blocks
   24. Pricing plans
   ========================================================================== */

/* --------------------------------------------------------------------------
   11. Buttons
   -------------------------------------------------------------------------- */

.th-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 42px;
	padding: 0 18px;
	border: 1px solid transparent;
	border-radius: var(--th-r-sm);
	font-family: var(--th-font-head);
	font-size: 14.5px;
	font-weight: 650;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background .16s var(--th-ease), border-color .16s var(--th-ease), color .16s var(--th-ease), transform .12s var(--th-ease);
}

.th-btn:active {
	transform: translateY(1px);
}

.th-btn svg {
	width: 17px;
	height: 17px;
	flex: none;
}

.th-btn--primary {
	background: var(--th-red);
	color: #fff;
}

.th-btn--primary:hover,
.th-btn--primary:focus {
	background: var(--th-red-dark);
	color: #fff;
}

.th-btn--dark {
	background: var(--th-bg-dark);
	color: #fff;
}

.th-btn--dark:hover,
.th-btn--dark:focus {
	background: #000;
	color: #fff;
}

.th-btn--wa {
	background: var(--th-wa-dark);
	color: #fff;
}

.th-btn--wa:hover,
.th-btn--wa:focus {
	background: var(--th-wa-deep);
	color: #fff;
}

.th-btn--wa-bright {
	background: var(--th-wa);
	color: #fff;
}

.th-btn--wa-bright:hover,
.th-btn--wa-bright:focus {
	background: #1fbe5b;
	color: #fff;
}

.th-btn--green {
	background: var(--th-green);
	color: #fff;
}

.th-btn--green:hover,
.th-btn--green:focus {
	background: var(--th-green-dark);
	color: #fff;
}

.th-btn--ghost {
	background: #fff;
	border-color: var(--th-line);
	color: var(--th-ink);
}

.th-btn--ghost:hover,
.th-btn--ghost:focus {
	border-color: var(--th-red);
	color: var(--th-red);
}

.th-btn--outline {
	background: transparent;
	border-color: var(--th-red);
	color: var(--th-red);
}

.th-btn--outline:hover,
.th-btn--outline:focus {
	background: var(--th-red);
	color: #fff;
}

.th-btn--soft {
	background: var(--th-red-soft);
	color: var(--th-red-dark);
}

.th-btn--soft:hover,
.th-btn--soft:focus {
	background: #fbdedc;
	color: var(--th-red-deep);
}

.th-btn--sm {
	height: 34px;
	padding: 0 13px;
	font-size: 13px;
}

.th-btn--sm svg {
	width: 15px;
	height: 15px;
}

.th-btn--lg {
	height: 50px;
	padding: 0 26px;
	font-size: 16px;
}

.th-btn--block {
	width: 100%;
}

.th-btn[disabled],
.th-btn.is-disabled {
	opacity: .55;
	pointer-events: none;
}

.th-btnrow {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Text link with arrow */
.th-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--th-font-head);
	font-size: 14px;
	font-weight: 650;
	color: var(--th-red);
}

.th-more svg {
	width: 14px;
	height: 14px;
	transition: transform .16s var(--th-ease);
}

.th-more:hover svg {
	transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   12. Badges, chips, pills
   -------------------------------------------------------------------------- */

.th-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	border-radius: var(--th-r-xs);
	font-family: var(--th-font-head);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1.5;
}

.th-badge svg {
	width: 12px;
	height: 12px;
}

.th-badge--verified {
	background: var(--th-green-soft);
	color: var(--th-green-dark);
}

.th-badge--featured {
	background: var(--th-red);
	color: #fff;
}

.th-badge--top {
	background: var(--th-amber-soft);
	color: #8a5e00;
}

.th-badge--info {
	background: var(--th-blue-soft);
	color: #1252b0;
}

.th-badge--neutral {
	background: var(--th-bg-warm);
	color: var(--th-muted);
}

.th-badge--open {
	background: var(--th-green-soft);
	color: var(--th-green-dark);
}

.th-badge--closed {
	background: #fdecea;
	color: #a62520;
}

.th-badge--sponsored {
	background: var(--th-bg-warm);
	color: var(--th-muted);
	border: 1px dashed var(--th-line);
	text-transform: uppercase;
	font-size: 10.5px;
	letter-spacing: .07em;
}

.th-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* Chips — used for amenities, filters, tags */
.th-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r-pill);
	background: #fff;
	font-size: 13px;
	color: var(--th-body);
	line-height: 1.4;
}

.th-chip svg {
	width: 14px;
	height: 14px;
	color: var(--th-green);
	flex: none;
}

a.th-chip:hover {
	border-color: var(--th-red);
	color: var(--th-red);
}

.th-chip--on {
	background: var(--th-red);
	border-color: var(--th-red);
	color: #fff;
}

a.th-chip--on:hover {
	background: var(--th-red-dark);
	color: #fff;
}

.th-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Rating pill */
.th-rating {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	font-weight: 650;
	color: var(--th-ink);
}

.th-rating__stars {
	display: inline-flex;
	gap: 1px;
	color: var(--th-amber);
}

/*
 * Scoped through .th-rating so the stars stay amber inside card meta rows,
 * where `.th-card__meta svg` would otherwise grey them out.
 */
.th-rating .th-rating__stars svg {
	width: 13px;
	height: 13px;
	color: var(--th-amber);
}

.th-rating__count {
	color: var(--th-muted);
	font-weight: 450;
}

.th-rating--box {
	background: var(--th-green);
	color: #fff;
	padding: 3px 8px;
	border-radius: var(--th-r-xs);
	font-size: 12.5px;
}

/* --------------------------------------------------------------------------
   13. Cards
   -------------------------------------------------------------------------- */

.th-card {
	container-type: inline-size;
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r);
	overflow: hidden;
	transition: border-color .18s var(--th-ease), box-shadow .18s var(--th-ease), transform .18s var(--th-ease);
}

.th-card:hover {
	border-color: #d9d2cc;
	box-shadow: var(--th-sh);
	transform: translateY(-2px);
}

.th-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--th-bg-warm);
	overflow: hidden;
}

.th-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s var(--th-ease);
}

.th-card:hover .th-card__media img {
	transform: scale(1.04);
}

.th-card__media--tall {
	aspect-ratio: 4 / 5;
}

.th-card__media--wide {
	aspect-ratio: 16 / 9;
}

.th-card__flags {
	position: absolute;
	top: 10px;
	left: 10px;
	right: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	pointer-events: none;
}

.th-card__flags .th-badge {
	box-shadow: var(--th-sh-xs);
}

.th-card__save {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	border: 1px solid var(--th-line);
	display: grid;
	place-items: center;
	color: var(--th-muted);
}

.th-card__save svg {
	width: 15px;
	height: 15px;
}

.th-card__save:hover,
.th-card__save.is-on {
	color: var(--th-red);
	border-color: var(--th-red);
}

.th-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 15px 16px;
	flex: 1 1 auto;
}

.th-card__kicker {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--th-font-head);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--th-red);
}

.th-card__title {
	font-family: var(--th-font-head);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.32;
	color: var(--th-ink);
	margin: 0;
}

.th-card__title a {
	color: inherit;
}

.th-card__title a:hover {
	color: var(--th-red);
}

.th-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	font-size: 12.5px;
	color: var(--th-muted);
}

.th-card__meta span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.th-card__meta svg {
	width: 13px;
	height: 13px;
	color: var(--th-faint);
	flex: none;
}

.th-card__excerpt {
	font-size: 14px;
	color: var(--th-muted);
	margin: 0;
}

.th-card__foot {
	margin-top: auto;
	padding-top: 12px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	border-top: 1px solid var(--th-line-soft);
}

/*
 * In a four-across grid a card is about 280px wide, which is not enough for a
 * price and two buttons on one line. Below that the actions take their own row
 * rather than squeezing the price into an ellipsis.
 */
@container (max-width: 300px) {
	.th-card__actions {
		width: 100%;
	}
}

.th-card__actions {
	display: flex;
	gap: 7px;
	flex-wrap: wrap;
}

.th-card__price {
	font-family: var(--th-font-head);
	font-size: 15px;
	font-weight: 750;
	color: var(--th-ink);
}

.th-card__price small {
	font-weight: 450;
	color: var(--th-muted);
	font-size: 12px;
}

/* Horizontal listing row (archive list view) */
.th-row {
	display: grid;
	grid-template-columns: 236px minmax(0, 1fr);
	gap: 0;
	background: #fff;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r);
	overflow: hidden;
	transition: border-color .18s var(--th-ease), box-shadow .18s var(--th-ease);
}

.th-row:hover {
	border-color: #d9d2cc;
	box-shadow: var(--th-sh);
}

.th-row__media {
	position: relative;
	background: var(--th-bg-warm);
	min-height: 178px;
}

.th-row__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.th-row__body {
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.th-row__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
}

.th-row__title {
	font-family: var(--th-font-head);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 4px;
}

.th-row__title a {
	color: var(--th-ink);
}

.th-row__title a:hover {
	color: var(--th-red);
}

.th-row__addr {
	font-size: 13px;
	color: var(--th-muted);
	display: flex;
	align-items: flex-start;
	gap: 6px;
}

.th-row__addr svg {
	width: 14px;
	height: 14px;
	margin-top: 2px;
	flex: none;
	color: var(--th-faint);
}

.th-row__foot {
	margin-top: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--th-line-soft);
}

@media (max-width: 640px) {
	.th-row {
		grid-template-columns: minmax(0, 1fr);
	}

	.th-row__media {
		min-height: 0;
		aspect-ratio: 16 / 9;
	}

	.th-row__media img {
		position: static;
	}
}

/* Category tile */
.th-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	padding: 18px 12px;
	background: #fff;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r);
	text-align: center;
	transition: border-color .18s var(--th-ease), transform .18s var(--th-ease), box-shadow .18s var(--th-ease);
}

.th-tile:hover {
	border-color: var(--th-red);
	transform: translateY(-3px);
	box-shadow: var(--th-sh);
}

.th-tile__icon {
	width: 46px;
	height: 46px;
	border-radius: var(--th-r);
	background: var(--th-red-tint);
	color: var(--th-red);
	display: grid;
	place-items: center;
}

.th-tile__icon svg {
	width: 23px;
	height: 23px;
}

.th-tile__name {
	font-family: var(--th-font-head);
	font-size: 14px;
	font-weight: 650;
	color: var(--th-ink);
	line-height: 1.3;
}

.th-tile__count {
	font-size: 11.5px;
	color: var(--th-muted);
}

/* --------------------------------------------------------------------------
   14. Stat strip
   -------------------------------------------------------------------------- */

.th-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
}

.th-stat {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r);
}

.th-stat__icon {
	width: 38px;
	height: 38px;
	border-radius: var(--th-r-sm);
	background: var(--th-red-tint);
	color: var(--th-red);
	display: grid;
	place-items: center;
	flex: none;
}

.th-stat__icon svg {
	width: 19px;
	height: 19px;
}

.th-stat__n {
	font-family: var(--th-font-head);
	font-size: 20px;
	font-weight: 750;
	color: var(--th-ink);
	line-height: 1.15;
}

.th-stat__l {
	font-size: 12.5px;
	color: var(--th-muted);
}

/* --------------------------------------------------------------------------
   15. Forms
   -------------------------------------------------------------------------- */

.th-field {
	display: grid;
	gap: 6px;
	margin-bottom: 16px;
}

.th-field__label,
.th-form label {
	font-family: var(--th-font-head);
	font-size: 13.5px;
	font-weight: 650;
	color: var(--th-ink);
}

.th-field__hint {
	font-size: 12.5px;
	color: var(--th-muted);
}

.th-req {
	color: var(--th-red);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="date"],
input[type="time"],
select,
textarea {
	width: 100%;
	min-height: 44px;
	padding: 10px 13px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r-sm);
	background: #fff;
	font-size: 14.5px;
	color: var(--th-ink);
	transition: border-color .15s var(--th-ease), box-shadow .15s var(--th-ease);
}

textarea {
	min-height: 120px;
	resize: vertical;
	line-height: 1.6;
}

select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b7370' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 15px;
	padding-right: 36px;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--th-red);
	outline: none;
	box-shadow: 0 0 0 3px var(--th-red-soft);
}

input::placeholder,
textarea::placeholder {
	color: var(--th-faint);
}

input[type="checkbox"],
input[type="radio"] {
	width: 17px;
	height: 17px;
	min-height: 0;
	accent-color: var(--th-red);
	margin: 0;
	flex: none;
}

.th-check {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 14px;
	color: var(--th-body);
	cursor: pointer;
	margin-bottom: 9px;
}

.th-check input {
	margin-top: 3px;
}

.th-check span {
	font-weight: 450;
}

.th-fieldset {
	border: 1px solid var(--th-line);
	border-radius: var(--th-r);
	padding: 18px;
	margin: 0 0 20px;
}

.th-fieldset legend {
	font-family: var(--th-font-head);
	font-size: 14px;
	font-weight: 700;
	color: var(--th-red);
	padding: 0 8px;
}

.th-formgrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 16px;
}

.th-formgrid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.th-formgrid .th-field--full {
	grid-column: 1 / -1;
}

@media (max-width: 640px) {
	.th-formgrid,
	.th-formgrid--3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Honeypot — never shown, never announced */
.th-hp {
	position: absolute !important;
	left: -9999px !important;
	opacity: 0;
	height: 0;
	width: 0;
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   16. Table of contents
   -------------------------------------------------------------------------- */

.th-toc {
	background: var(--th-bg-soft);
	border: 1px solid var(--th-line);
	border-left: 3px solid var(--th-red);
	border-radius: var(--th-r);
	padding: 16px 18px;
	margin: 0 0 28px;
}

.th-toc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	background: none;
	border: 0;
	padding: 0;
	text-align: left;
	font-family: var(--th-font-head);
	font-size: 15.5px;
	font-weight: 700;
	color: var(--th-ink);
}

.th-toc__head svg:first-child {
	width: 17px;
	height: 17px;
	color: var(--th-red);
	flex: none;
	margin-right: 8px;
}

.th-toc__title {
	display: inline-flex;
	align-items: center;
	flex: 1 1 auto;
}

.th-toc__caret {
	width: 16px;
	height: 16px;
	color: var(--th-muted);
	transition: transform .2s var(--th-ease);
	flex: none;
}

.th-toc.is-collapsed .th-toc__caret {
	transform: rotate(-90deg);
}

.th-toc__body {
	margin-top: 13px;
	padding-top: 13px;
	border-top: 1px solid var(--th-line);
}

.th-toc.is-collapsed .th-toc__body {
	display: none;
}

.th-toc ol {
	list-style: none;
	counter-reset: th-toc;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
}

.th-toc li {
	margin: 0;
}

.th-toc a {
	display: block;
	padding: 5px 8px 5px 30px;
	position: relative;
	font-size: 14.5px;
	line-height: 1.45;
	color: var(--th-body);
	border-radius: var(--th-r-xs);
}

.th-toc > .th-toc__body > ol > li > a {
	counter-increment: th-toc;
	font-weight: 550;
}

.th-toc > .th-toc__body > ol > li > a::before {
	content: counter(th-toc) ".";
	position: absolute;
	left: 8px;
	color: var(--th-red);
	font-weight: 700;
	font-size: 13px;
}

.th-toc a:hover {
	background: #fff;
	color: var(--th-red);
}

.th-toc a.is-active {
	background: var(--th-red-tint);
	color: var(--th-red-dark);
	font-weight: 650;
}

/* Nested H3 level */
.th-toc ol ol {
	margin: 2px 0 4px;
}

.th-toc ol ol a {
	padding-left: 44px;
	font-size: 13.5px;
	color: var(--th-muted);
}

.th-toc ol ol a::before {
	content: "";
	position: absolute;
	left: 30px;
	top: 14px;
	width: 7px;
	height: 1px;
	background: var(--th-faint);
}

/* Sidebar variant — sticky, scrolls independently */
.th-toc--side {
	margin: 0;
	max-height: calc(100vh - var(--th-header-h) - 48px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Anchor offset for headings targeted by the TOC */
.th-article :is(h2, h3)[id] {
	scroll-margin-top: calc(var(--th-header-h) + 18px);
}

/* --------------------------------------------------------------------------
   17. Social follow strips
   -------------------------------------------------------------------------- */

.th-social-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 20px;
	padding: 18px 20px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r);
	background: linear-gradient(135deg, var(--th-red-tint), #fff 62%);
	margin: 30px 0;
}

.th-social-strip__text {
	min-width: 0;
}

.th-social-strip__title {
	font-family: var(--th-font-head);
	font-size: 16px;
	font-weight: 700;
	color: var(--th-ink);
	margin: 0 0 3px;
}

.th-social-strip__sub {
	font-size: 13.5px;
	color: var(--th-muted);
	margin: 0;
}

.th-social-strip__links {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

.th-slink {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 38px;
	padding: 0 14px;
	border-radius: var(--th-r-sm);
	background: #fff;
	border: 1px solid var(--th-line);
	font-family: var(--th-font-head);
	font-size: 13.5px;
	font-weight: 650;
	color: var(--th-ink);
	transition: transform .14s var(--th-ease), box-shadow .14s var(--th-ease), color .14s var(--th-ease), border-color .14s var(--th-ease);
}

.th-slink svg {
	width: 17px;
	height: 17px;
	flex: none;
}

.th-slink:hover {
	transform: translateY(-2px);
	box-shadow: var(--th-sh-sm);
	color: #fff;
}

.th-slink--fb:hover     { background: #1877f2; border-color: #1877f2; }
.th-slink--ig:hover     { background: linear-gradient(45deg, #f09433, #dc2743 45%, #bc1888); border-color: #dc2743; }
.th-slink--tg:hover     { background: #229ed9; border-color: #229ed9; }
.th-slink--wa:hover     { background: var(--th-wa-dark); border-color: var(--th-wa-dark); }
.th-slink--yt:hover     { background: #ff0000; border-color: #ff0000; }
.th-slink--x:hover      { background: #000; border-color: #000; }

.th-slink--fb svg { color: #1877f2; }
.th-slink--ig svg { color: #dc2743; }
.th-slink--tg svg { color: #229ed9; }
.th-slink--wa svg { color: var(--th-wa-dark); }
.th-slink--yt svg { color: #ff0000; }
.th-slink--x  svg { color: #000; }

.th-slink:hover svg { color: #fff; }

/* Compact variant dropped between listing cards in an archive grid */
.th-social-strip--inline {
	grid-column: 1 / -1;
	margin: 0;
	padding: 15px 18px;
	background: var(--th-bg-soft);
}

.th-social-strip--inline .th-social-strip__title {
	font-size: 15px;
}

/* Icon-only variant for tight spaces */
.th-social-strip--icons .th-slink {
	width: 38px;
	padding: 0;
	justify-content: center;
}

.th-social-strip--icons .th-slink span {
	display: none;
}

@media (max-width: 560px) {
	.th-social-strip {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	.th-social-strip__links {
		justify-content: center;
	}
}

/* Share row on posts and listings */
.th-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
	padding: 14px 0;
	border-top: 1px solid var(--th-line);
	border-bottom: 1px solid var(--th-line);
	margin: 26px 0;
}

.th-share__label {
	font-family: var(--th-font-head);
	font-size: 13.5px;
	font-weight: 650;
	color: var(--th-ink);
	margin-right: 4px;
}

.th-share a,
.th-share button {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--th-line);
	background: #fff;
	display: grid;
	place-items: center;
	color: var(--th-muted);
	transition: transform .14s var(--th-ease), color .14s var(--th-ease), border-color .14s var(--th-ease);
}

.th-share a svg,
.th-share button svg {
	width: 16px;
	height: 16px;
}

.th-share a:hover,
.th-share button:hover {
	transform: translateY(-2px);
	color: var(--th-red);
	border-color: var(--th-red);
}

.th-share__done {
	font-size: 12.5px;
	color: var(--th-green-dark);
	margin-left: 4px;
}

/* --------------------------------------------------------------------------
   18. Pagination
   -------------------------------------------------------------------------- */

.th-pager {
	display: flex;
	justify-content: center;
	margin-top: 34px;
}

.th-pager .nav-links,
.th-pager .page-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.th-pager .page-numbers {
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r-sm);
	background: #fff;
	font-family: var(--th-font-head);
	font-size: 14px;
	font-weight: 650;
	color: var(--th-body);
}

.th-pager a.page-numbers:hover {
	border-color: var(--th-red);
	color: var(--th-red);
}

.th-pager .page-numbers.current {
	background: var(--th-red);
	border-color: var(--th-red);
	color: #fff;
}

.th-pager .page-numbers.dots {
	border-color: transparent;
	background: none;
}

/*
 * Prev / next on single posts.
 *
 * the_post_navigation() renders nav.th-adjacent > .nav-links >
 * .nav-previous|.nav-next > a, so the card styling has to hang off WordPress's
 * own class names rather than classes of our own.
 */
.th-adjacent {
	margin: 34px 0;
}

.th-adjacent .nav-links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.th-adjacent .nav-previous,
.th-adjacent .nav-next {
	min-width: 0;
}

/* A lone "next" belongs on the right, where it would have been. */
.th-adjacent .nav-next:only-child {
	grid-column: 2;
}

.th-adjacent .nav-links a {
	display: flex;
	flex-direction: column;
	gap: 5px;
	height: 100%;
	padding: 15px 17px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r);
	background: #fff;
	color: inherit;
	transition: border-color .16s var(--th-ease), box-shadow .16s var(--th-ease);
}

.th-adjacent .nav-links a:hover {
	border-color: var(--th-red);
	box-shadow: var(--th-sh-sm);
}

.th-adjacent__dir {
	font-size: 12px;
	font-weight: 650;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--th-red);
}

.th-adjacent__title {
	font-family: var(--th-font-head);
	font-size: 15px;
	font-weight: 650;
	color: var(--th-ink);
	line-height: 1.35;
}

.th-adjacent .nav-next a {
	text-align: right;
}

@media (max-width: 560px) {
	.th-adjacent .nav-links {
		grid-template-columns: minmax(0, 1fr);
	}

	.th-adjacent .nav-next:only-child {
		grid-column: 1;
	}

	.th-adjacent .nav-next a {
		text-align: left;
	}
}

/* --------------------------------------------------------------------------
   19. Widgets and sidebar blocks
   -------------------------------------------------------------------------- */

.th-widget {
	background: #fff;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r);
	padding: 17px 18px;
	margin-bottom: 20px;
}

.th-widget__title,
.th-widget .widget-title {
	font-family: var(--th-font-head);
	font-size: 15.5px;
	font-weight: 700;
	color: var(--th-ink);
	margin: 0 0 13px;
	padding-bottom: 11px;
	border-bottom: 1px solid var(--th-line);
	display: flex;
	align-items: center;
	gap: 8px;
}

.th-widget__title svg {
	width: 16px;
	height: 16px;
	color: var(--th-red);
}

/*
 * Block-based widgets (WordPress 5.8+) print their own heading instead of using
 * the sidebar's before_title, so those headings need matching here or they
 * render at full h2 size inside a small widget card.
 */
.th-widget > .wp-block-heading,
.th-widget > .wp-block-group > .wp-block-heading,
.th-widget .widget_block > h1,
.th-widget .widget_block > h2,
.th-widget .widget_block > h3 {
	font-family: var(--th-font-head);
	font-size: 15.5px;
	font-weight: 700;
	color: var(--th-ink);
	margin: 0 0 13px;
	padding-bottom: 11px;
	border-bottom: 1px solid var(--th-line);
	letter-spacing: -.01em;
}

.th-widget .wp-block-search__inside-wrapper {
	gap: 8px;
}

.th-widget .wp-block-search__button {
	border: 0;
	border-radius: var(--th-r-sm);
	background: var(--th-red);
	color: #fff;
	padding: 0 16px;
	font-family: var(--th-font-head);
	font-weight: 650;
	font-size: 14px;
}

.th-widget .wp-block-latest-posts__post-title {
	font-family: var(--th-font-head);
	font-weight: 600;
}

.th-widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 9px;
}

.th-widget li {
	margin: 0;
	font-size: 14px;
}

.th-widget a {
	color: var(--th-body);
}

.th-widget a:hover {
	color: var(--th-red);
}

.th-widget .children {
	margin: 8px 0 0 14px;
	padding-left: 10px;
	border-left: 1px solid var(--th-line);
}

/* Category list with counts */
.th-catlist li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 7px 0;
	border-bottom: 1px dashed var(--th-line-soft);
}

.th-catlist li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.th-catlist__n {
	font-size: 12px;
	color: var(--th-muted);
	background: var(--th-bg-warm);
	border-radius: var(--th-r-pill);
	padding: 2px 9px;
	flex: none;
}

/* Compact post list */
.th-mini {
	display: flex;
	gap: 11px;
	align-items: flex-start;
}

.th-mini + .th-mini {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--th-line-soft);
}

.th-mini__thumb {
	width: 72px;
	height: 58px;
	border-radius: var(--th-r-sm);
	object-fit: cover;
	flex: none;
	background: var(--th-bg-warm);
}

.th-mini__title {
	font-family: var(--th-font-head);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.38;
	color: var(--th-ink);
	margin: 0 0 4px;
}

.th-mini__title a {
	color: inherit;
}

.th-mini__title a:hover {
	color: var(--th-red);
}

.th-mini__meta {
	font-size: 12px;
	color: var(--th-muted);
}

/* Contact card used in listing sidebar and helpdesk blocks */
.th-contactcard {
	background: linear-gradient(150deg, var(--th-red-tint), #fff 60%);
	border: 1px solid var(--th-line);
	border-radius: var(--th-r);
	padding: 18px;
}

.th-contactcard__price {
	font-family: var(--th-font-head);
	font-size: 24px;
	font-weight: 750;
	color: var(--th-ink);
	line-height: 1.1;
}

.th-contactcard__price small {
	font-size: 13px;
	font-weight: 450;
	color: var(--th-muted);
}

.th-contactcard .th-btn {
	margin-top: 10px;
}

/* Helpdesk block (green) */
.th-helpdesk {
	background: var(--th-green-soft);
	border: 1px solid #bfe3c9;
	border-radius: var(--th-r);
	padding: 16px 18px;
}

.th-helpdesk__title {
	font-family: var(--th-font-head);
	font-size: 15px;
	font-weight: 700;
	color: var(--th-green-dark);
	margin: 0 0 6px;
	display: flex;
	align-items: center;
	gap: 7px;
}

.th-helpdesk p {
	font-size: 13.5px;
	color: #2c5c3a;
	margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   20. Accordions (FAQ)
   -------------------------------------------------------------------------- */

.th-faq {
	display: grid;
	gap: 10px;
}

.th-faq--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 768px) {
	.th-faq--2 {
		grid-template-columns: minmax(0, 1fr);
	}
}

.th-acc {
	border: 1px solid var(--th-line);
	border-radius: var(--th-r);
	background: #fff;
	overflow: hidden;
	align-self: start;
}

.th-acc__q {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
	padding: 15px 17px;
	background: none;
	border: 0;
	text-align: left;
	font-family: var(--th-font-head);
	font-size: 15px;
	font-weight: 650;
	color: var(--th-ink);
	line-height: 1.45;
}

.th-acc__q:hover {
	color: var(--th-red);
}

.th-acc__icon {
	width: 18px;
	height: 18px;
	flex: none;
	color: var(--th-red);
	margin-top: 2px;
	transition: transform .2s var(--th-ease);
}

.th-acc.is-open .th-acc__icon {
	transform: rotate(45deg);
}

.th-acc__a {
	padding: 0 17px 16px;
	font-size: 14.5px;
	color: var(--th-body);
	border-top: 1px solid var(--th-line-soft);
	padding-top: 14px;
}

.th-acc:not(.is-open) .th-acc__a {
	display: none;
}

.th-acc__a p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   21. Notices and callouts
   -------------------------------------------------------------------------- */

.th-note {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 17px;
	border-radius: var(--th-r);
	font-size: 14.5px;
	margin: 20px 0;
	border: 1px solid transparent;
}

.th-note svg {
	width: 19px;
	height: 19px;
	flex: none;
	margin-top: 2px;
}

.th-note p:last-child {
	margin-bottom: 0;
}

.th-note--info {
	background: var(--th-blue-soft);
	border-color: #cfe0fa;
	color: #16418a;
}

.th-note--warn {
	background: var(--th-amber-soft);
	border-color: #f7e2b0;
	color: #7a5300;
}

.th-note--alert {
	background: #fdecea;
	border-color: #f7cdc9;
	color: #8e2019;
}

.th-note--ok {
	background: var(--th-green-soft);
	border-color: #bfe3c9;
	color: var(--th-green-dark);
}

.th-note__title {
	font-family: var(--th-font-head);
	font-weight: 700;
	display: block;
	margin-bottom: 3px;
}

/* Big CTA band */
.th-cta {
	position: relative;
	overflow: hidden;
	border-radius: var(--th-r-lg);
	background: linear-gradient(120deg, var(--th-red-deep), var(--th-red) 55%, #e0574f);
	color: #fff;
	padding: clamp(26px, 4vw, 42px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 22px 32px;
}

.th-cta::after {
	content: "";
	position: absolute;
	right: -60px;
	top: -60px;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .07);
	pointer-events: none;
}

.th-cta__text {
	position: relative;
	z-index: 1;
	max-width: 620px;
}

.th-cta h2 {
	color: #fff;
	margin-bottom: 8px;
}

.th-cta p {
	color: rgba(255, 255, 255, .88);
	margin: 0;
	font-size: 15px;
}

.th-cta__actions {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.th-cta .th-btn--ghost {
	background: #fff;
	border-color: #fff;
	color: var(--th-red-deep);
}

.th-cta .th-btn--ghost:hover {
	background: rgba(255, 255, 255, .9);
	color: var(--th-red-deep);
}

.th-cta .th-btn--outline {
	border-color: rgba(255, 255, 255, .6);
	color: #fff;
}

.th-cta .th-btn--outline:hover {
	background: rgba(255, 255, 255, .14);
	color: #fff;
}

/* --------------------------------------------------------------------------
   22. Ad slots
   -------------------------------------------------------------------------- */

.th-adslot {
	margin: 26px 0;
	text-align: center;
	min-height: 1px;
}

.th-adslot--inline {
	margin: 30px 0;
}

.th-adslot--side {
	margin: 0 0 20px;
}

.th-adslot__label {
	display: block;
	font-size: 10.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--th-faint);
	margin-bottom: 6px;
}

.th-adslot ins,
.th-adslot iframe {
	max-width: 100%;
}

/* --------------------------------------------------------------------------
   23. Rating bars and review blocks
   -------------------------------------------------------------------------- */

.th-score {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.th-score__big {
	text-align: center;
	flex: none;
}

.th-score__n {
	font-family: var(--th-font-head);
	font-size: 42px;
	font-weight: 800;
	color: var(--th-ink);
	line-height: 1;
}

.th-score__of {
	font-size: 12.5px;
	color: var(--th-muted);
}

.th-bars {
	flex: 1 1 260px;
	display: grid;
	gap: 7px;
	min-width: 220px;
}

.th-bar {
	display: grid;
	grid-template-columns: 1fr 96px auto;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--th-muted);
}

.th-bar__track {
	height: 6px;
	border-radius: 3px;
	background: var(--th-line);
	overflow: hidden;
}

.th-bar__fill {
	height: 100%;
	border-radius: 3px;
	background: var(--th-green);
}

.th-review {
	display: flex;
	gap: 13px;
	padding: 16px 0;
	border-bottom: 1px solid var(--th-line-soft);
}

.th-review:last-child {
	border-bottom: 0;
}

.th-review__av {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--th-red-tint);
	color: var(--th-red);
	display: grid;
	place-items: center;
	font-family: var(--th-font-head);
	font-weight: 700;
	font-size: 15px;
	flex: none;
}

.th-review__name {
	font-family: var(--th-font-head);
	font-size: 14.5px;
	font-weight: 650;
	color: var(--th-ink);
}

.th-review__meta {
	font-size: 12.5px;
	color: var(--th-muted);
	margin-bottom: 6px;
}

.th-review__text {
	font-size: 14.5px;
	margin: 0;
}

.th-review__reply {
	margin-top: 10px;
	padding: 11px 14px;
	background: var(--th-bg-soft);
	border-left: 3px solid var(--th-green);
	border-radius: 0 var(--th-r-sm) var(--th-r-sm) 0;
	font-size: 13.5px;
}

.th-review__reply strong {
	display: block;
	color: var(--th-green-dark);
	margin-bottom: 3px;
	font-size: 13px;
}

/* --------------------------------------------------------------------------
   24. Pricing plans
   -------------------------------------------------------------------------- */

.th-plans {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.th-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r);
	padding: 20px;
}

.th-plan--best {
	border-color: var(--th-red);
	box-shadow: 0 0 0 3px var(--th-red-soft);
}

.th-plan__tag {
	position: absolute;
	top: -11px;
	left: 20px;
	background: var(--th-red);
	color: #fff;
	font-family: var(--th-font-head);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 4px 11px;
	border-radius: var(--th-r-xs);
}

.th-plan__name {
	font-family: var(--th-font-head);
	font-size: 17px;
	font-weight: 700;
	color: var(--th-ink);
	margin: 0 0 4px;
}

.th-plan__price {
	font-family: var(--th-font-head);
	font-size: 30px;
	font-weight: 800;
	color: var(--th-red);
	line-height: 1.1;
	margin-bottom: 3px;
}

.th-plan__per {
	font-size: 13px;
	color: var(--th-muted);
	font-weight: 450;
}

.th-plan__desc {
	font-size: 13.5px;
	color: var(--th-muted);
	margin: 8px 0 14px;
}

.th-plan__list {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: grid;
	gap: 8px;
	font-size: 14px;
}

.th-plan__list li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	color: var(--th-body);
}

.th-plan__list svg {
	width: 15px;
	height: 15px;
	flex: none;
	margin-top: 3px;
	color: var(--th-green);
}

.th-plan__list li.is-off {
	color: var(--th-faint);
}

.th-plan__list li.is-off svg {
	color: var(--th-faint);
}

.th-plan .th-btn {
	margin-top: auto;
}

/* Simple data table (tariffs, timings) */
.th-table {
	width: 100%;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r);
	overflow: hidden;
	background: #fff;
}

.th-table table {
	width: 100%;
	font-size: 14px;
}

.th-table th {
	background: var(--th-bg-warm);
	font-family: var(--th-font-head);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--th-muted);
	text-align: left;
	padding: 11px 14px;
	white-space: nowrap;
}

.th-table td {
	padding: 12px 14px;
	border-top: 1px solid var(--th-line-soft);
	vertical-align: top;
}

.th-table tr.is-now td {
	background: var(--th-red-tint);
}

.th-table__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.th-table__scroll table {
	min-width: 560px;
}

/* Sample / demo content marker. Deliberately loud — it must never read as a
   normal status badge sitting quietly among the real ones. */
.th-badge--demo {
	background: #3d342f;
	color: #fff;
	letter-spacing: .07em;
	text-transform: uppercase;
	font-size: 10.5px;
}