/**
 * TreguPlus Theme — main stylesheet.
 * Original visual identity: not a Classima reskin. Scoped to `.tpt-`
 * classes throughout so nothing here collides with the Frontend
 * plugin's own `.tpf-` marketplace styles, which this theme never
 * duplicates (see template-parts/marketplace/*.php reusing tpf-card
 * markup directly when the Frontend plugin is active).
 */

:root {
	--tpt-primary: #1a56db;
	--tpt-primary-dark: #133a99;
	--tpt-secondary: #0f766e;
	--tpt-secondary-dark: #0b5852;
	--tpt-ink: #101828;
	--tpt-body: #344054;
	--tpt-muted: #667085;
	--tpt-border: #e4e7ec;
	--tpt-surface: #ffffff;
	--tpt-bg: #f8fafc;
	--tpt-danger: #b42318;
	--tpt-success: #027a48;
	--tpt-warning: #b54708;
	--tpt-radius: 10px;
	--tpt-radius-sm: 6px;
	--tpt-container: 1200px;
	--tpt-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--tpt-font);
	color: var(--tpt-body);
	background: var(--tpt-bg);
	line-height: 1.55;
}

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

a { color: var(--tpt-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { color: var(--tpt-ink); line-height: 1.25; margin: 0 0 .5em; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.tpt-skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	background: var(--tpt-primary);
	color: #fff;
	padding: 10px 16px;
	z-index: 10000;
}
.tpt-skip-link:focus { top: 0; }

.tpt-container { max-width: var(--tpt-container); margin: 0 auto; padding: 0 16px; }

/* ---------------- Header ---------------- */
.tpt-header {
	background: var(--tpt-surface);
	border-bottom: 1px solid var(--tpt-border);
	position: sticky;
	top: 0;
	z-index: 500;
}
.tpt-header-inner {
	max-width: var(--tpt-container);
	margin: 0 auto;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	gap: 20px;
}
.tpt-branding { flex-shrink: 0; }
.tpt-site-title { font-size: 20px; font-weight: 700; color: var(--tpt-ink); }
.tpt-branding img { max-height: 40px; width: auto; }

.tpt-menu-toggle {
	display: none;
	background: none;
	border: 1px solid var(--tpt-border);
	border-radius: 6px;
	padding: 8px 10px;
	margin-left: auto;
	cursor: pointer;
}
.tpt-menu-toggle-bars,
.tpt-menu-toggle-bars::before,
.tpt-menu-toggle-bars::after {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--tpt-ink);
	position: relative;
}
.tpt-menu-toggle-bars::before { content: ""; position: absolute; top: -6px; }
.tpt-menu-toggle-bars::after { content: ""; position: absolute; top: 6px; }

.tpt-primary-nav { flex: 1; }
.tpt-primary-menu {
	list-style: none;
	display: flex;
	gap: 20px;
	margin: 0;
	padding: 0;
}
.tpt-primary-menu a { color: var(--tpt-body); font-weight: 500; }
.tpt-primary-menu a:hover { color: var(--tpt-primary); text-decoration: none; }
.tpt-primary-menu ul { list-style: none; }

/* ---------------- Submenus (dropdowns) ----------------
 * Desktop: pure CSS hover/focus-within, no JS required.
 * Mobile/touch: the .tpt-submenu-toggle button (added by
 * TPT_Nav_Walker only on parent items) is click-toggled by
 * assets/js/theme.js, which also manages aria-expanded there.
 */
.tpt-primary-menu li { position: relative; display: flex; align-items: center; }
.tpt-primary-menu > li { display: block; }
.tpt-primary-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 6px;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	background: var(--tpt-surface);
	border: 1px solid var(--tpt-border);
	border-radius: var(--tpt-radius-sm);
	box-shadow: 0 8px 24px rgba(16, 24, 40, .08);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .15s ease, transform .15s ease;
	z-index: 600;
}
.tpt-primary-menu .sub-menu .sub-menu { top: 0; left: 100%; }
.tpt-primary-menu .sub-menu li { display: block; }
.tpt-primary-menu .sub-menu a { display: block; padding: 8px 10px; border-radius: 4px; white-space: nowrap; }
.tpt-primary-menu .sub-menu a:hover { background: var(--tpt-bg); text-decoration: none; }

/* Desktop hover/focus reveal — no JS needed for pointer/keyboard-tab users. */
.tpt-primary-menu li:hover > .sub-menu,
.tpt-primary-menu li:focus-within > .sub-menu,
.tpt-primary-menu li.is-submenu-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.tpt-submenu-toggle {
	display: none; /* shown only in the mobile breakpoint below */
	background: none;
	border: none;
	padding: 4px 8px;
	margin-left: 2px;
	cursor: pointer;
	font-size: 12px;
	color: var(--tpt-muted);
}
.tpt-submenu-toggle[aria-expanded="true"] span { transform: rotate(180deg); display: inline-block; }

/* ---------------- Search box component (search-box.php) ---------------- */
.tpt-search-box--compact {
	display: flex;
	align-items: center;
	border: 1px solid var(--tpt-border);
	border-radius: 999px;
	padding: 2px 4px 2px 14px;
	background: var(--tpt-bg);
	flex: 0 1 260px;
}
.tpt-search-box--compact input[type="search"] {
	border: none;
	background: transparent;
	outline: none;
	font-size: 14px;
	width: 100%;
	padding: 6px 0;
}
.tpt-search-box--compact .tpt-search-box-submit {
	border: none;
	background: var(--tpt-primary);
	color: #fff;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	cursor: pointer;
	flex-shrink: 0;
	font-size: 13px;
	padding: 0;
}

.tpt-search-box--hero {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	background: var(--tpt-surface);
	padding: 8px;
	border-radius: var(--tpt-radius);
	box-shadow: 0 8px 24px rgba(16, 24, 40, .06);
}
.tpt-search-box--hero input[type="search"] { flex: 1 1 220px; padding: 12px 14px; border: 1px solid var(--tpt-border); border-radius: var(--tpt-radius-sm); font-size: 15px; }
.tpt-search-box--hero select { padding: 12px 14px; border: 1px solid var(--tpt-border); border-radius: var(--tpt-radius-sm); font-size: 15px; }
.tpt-search-box--hero .tpt-search-box-submit { padding: 12px 22px; }

.tpt-search-box--inline { display: flex; flex-wrap: wrap; gap: 8px; }
.tpt-search-box--inline input[type="search"],
.tpt-search-box--inline select { padding: 9px 12px; border: 1px solid var(--tpt-border); border-radius: var(--tpt-radius-sm); font-size: 14px; }
.tpt-search-box-advanced-link { align-self: center; font-size: 13px; font-weight: 600; }

.tpt-header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* ---------------- Header right cluster (lang + whatsapp + account) ---------------- */
.tpt-header-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; margin-left: auto; }

/* ---------------- WhatsApp contact ---------------- */
.tpt-whatsapp-contact {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border-radius: 999px;
	background: #e7f9f1;
	color: #058b56;
	font-size: 13px;
	font-weight: 600;
}
.tpt-whatsapp-contact:hover { background: #d3f4e5; color: #058b56; text-decoration: none; }

/* ---------------- Vertical category navigation drawer ---------------- */
.tpt-category-nav { position: relative; flex-shrink: 0; }
.tpt-category-nav-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	border: 1px solid var(--tpt-border);
	border-radius: var(--tpt-radius-sm);
	background: var(--tpt-surface);
	color: var(--tpt-ink);
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
}
.tpt-category-nav-toggle:hover { border-color: var(--tpt-primary); color: var(--tpt-primary); }

.tpt-category-nav-panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	width: 760px; /* MODULE 1: widened from 340px for the 3-column mega-menu; the <900px breakpoint below overrides this to a full-screen drawer regardless, so this value only ever applies at desktop/tablet widths. */
	max-width: calc(100vw - 32px);
	background: var(--tpt-surface);
	border: 1px solid var(--tpt-border);
	border-radius: var(--tpt-radius);
	box-shadow: 0 12px 32px rgba(16, 24, 40, .12);
	z-index: 650;
	max-height: 75vh;
	overflow-y: auto;
}
.tpt-category-nav-panel[hidden] { display: none; }
.tpt-category-nav-panel-inner { padding: 16px; }
.tpt-category-nav-title { font-size: 16px; margin: 0 0 10px; }
.tpt-category-nav-close { display: none; } /* shown only in the mobile full-screen drawer, see breakpoint below */

/* ---------------- FAZA 4: Category pills (header/category-pills.php) ----------------
 * An additional, always-visible navigation row below the main header
 * bar — does not replace the mega-menu/accordion above, which keeps
 * its own "☰ Categories" entry point and full subcategory panel. */
.tpt-category-pills {
	background: var(--tpt-bg);
	border-top: 1px solid var(--tpt-border);
}
.tpt-category-pills-scroll {
	max-width: var(--tpt-container);
	margin: 0 auto;
	padding: 10px 16px;
	display: flex;
	align-items: center;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}
.tpt-category-pills-scroll::-webkit-scrollbar { height: 5px; }
.tpt-category-pills-scroll::-webkit-scrollbar-thumb { background: var(--tpt-border); border-radius: 999px; }

.tpt-category-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--tpt-surface);
	border: 1px solid var(--tpt-border);
	color: var(--tpt-body);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.tpt-category-pill:hover {
	background: #eff4ff;
	border-color: var(--tpt-primary);
	color: var(--tpt-primary);
	text-decoration: none;
	transform: translateY(-1px);
}
.tpt-category-pill.is-active {
	background: var(--tpt-primary);
	border-color: var(--tpt-primary);
	color: #fff;
}
.tpt-category-pill.is-active:hover { color: #fff; transform: none; }
.tpt-category-pill--all { font-weight: 700; }

.tpt-category-pill-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--tpt-muted); }
.tpt-category-pill:hover .tpt-category-pill-icon,
.tpt-category-pill.is-active .tpt-category-pill-icon { color: currentColor; }
.tpt-category-pill-icon--image { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }
.tpt-category-pill-icon--glyph { font-size: 14px; line-height: 1; }

.tpt-category-pill-more {
	background: transparent;
	border: 1px dashed var(--tpt-border);
	color: var(--tpt-muted);
	cursor: pointer;
}
.tpt-category-pill-more:hover { border-color: var(--tpt-primary); color: var(--tpt-primary); background: #eff4ff; }
.tpt-category-pill-more-arrow { display: inline-block; transition: transform .15s ease; }
.tpt-category-pill-more[aria-expanded="true"] .tpt-category-pill-more-arrow { transform: rotate(90deg); }

.tpt-category-pill:focus-visible,
.tpt-category-pill-more:focus-visible {
	outline: 2px solid var(--tpt-primary);
	outline-offset: 2px;
}

/* ---------------- MODULE 1: Mega-menu (desktop/tablet, >=900px) ----------------
 * The mobile accordion (.tpt-category-nav-mobile, wrapping the existing,
 * unmodified categories/category-list.php component) is hidden here and
 * shown instead below the 900px breakpoint, where this grid is hidden —
 * see that breakpoint further down for the swap. */
.tpt-category-nav-mobile { display: none; }

.tpt-mega-menu {
	display: grid;
	grid-template-columns: 1.1fr 1.1fr 0.9fr;
	gap: 24px;
}
.tpt-mega-menu-heading {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--tpt-muted);
	margin: 0 0 12px;
}
.tpt-mega-menu-list,
.tpt-mega-menu-sublist,
.tpt-mega-menu-quicklist { list-style: none; margin: 0 0 12px; padding: 0; }

.tpt-mega-menu-item { border-radius: var(--tpt-radius-sm); }
.tpt-mega-menu-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: var(--tpt-radius-sm);
	color: var(--tpt-body);
	font-size: 14px;
	font-weight: 500;
}
.tpt-mega-menu-link:hover { background: var(--tpt-bg); text-decoration: none; }
.tpt-mega-menu-item.is-active > .tpt-mega-menu-link {
	background: #eff4ff;
	color: var(--tpt-primary);
	font-weight: 600;
}
.tpt-mega-menu-icon { width: 20px; flex-shrink: 0; text-align: center; font-size: 16px; }
.tpt-mega-menu-icon--svg { width: 20px; height: 20px; color: var(--tpt-muted); }
.tpt-mega-menu-item.is-active .tpt-mega-menu-icon--svg,
.tpt-mega-menu-link:hover .tpt-mega-menu-icon--svg { color: var(--tpt-primary); }
.tpt-mega-menu-icon--image { width: 20px; height: 20px; border-radius: 4px; object-fit: cover; }
.tpt-mega-menu-icon--glyph { font-size: 16px; }
.tpt-mega-menu-label { flex: 1; }
.tpt-mega-menu-arrow { color: var(--tpt-muted); flex-shrink: 0; }
.tpt-mega-menu-item.is-active .tpt-mega-menu-arrow { color: var(--tpt-primary); }

.tpt-mega-menu-sub-panel { display: none; }
.tpt-mega-menu-sub-panel.is-active { display: block; }
.tpt-mega-menu-sublist li a {
	display: block;
	padding: 7px 10px;
	font-size: 14px;
	color: var(--tpt-body);
	border-radius: var(--tpt-radius-sm);
}
.tpt-mega-menu-sublist li a:hover { background: var(--tpt-bg); color: var(--tpt-primary); text-decoration: none; }
.tpt-mega-menu-empty { font-size: 13px; color: var(--tpt-muted); margin: 0; }

.tpt-mega-menu-quicklist li a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 10px;
	font-size: 14px;
	color: var(--tpt-body);
	border-radius: var(--tpt-radius-sm);
}
.tpt-mega-menu-quicklist li a:hover { background: var(--tpt-bg); color: var(--tpt-primary); text-decoration: none; }

.tpt-mega-menu-viewall { font-size: 13px; font-weight: 600; display: inline-block; }

.tpt-icon-link {
	position: relative;
	font-size: 18px;
	color: var(--tpt-body);
	padding: 6px;
}
.tpt-badge {
	position: absolute;
	top: -2px; right: -2px;
	background: #e0245e;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	padding: 3px 5px;
	border-radius: 999px;
}

/* ---------------- FAZA 2: Account menu (header/account-area.php) ----------------
 * Same open/close/outside-click/Escape interaction as the category
 * mega-menu toggle (.tpt-category-nav-toggle/-panel above) — reuses
 * that proven pattern rather than inventing a new one. See
 * assets/js/theme.js. */
.tpt-account-menu { position: relative; flex-shrink: 0; }
.tpt-account-menu-toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border: 1px solid var(--tpt-border);
	border-radius: 999px;
	background: var(--tpt-surface);
	color: var(--tpt-body);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
.tpt-account-menu-toggle:hover { border-color: var(--tpt-primary); color: var(--tpt-primary); }
.tpt-account-menu-caret { font-size: 10px; color: var(--tpt-muted); display: inline-block; transition: transform .15s ease; }
.tpt-account-menu-toggle[aria-expanded="true"] .tpt-account-menu-caret { transform: rotate(180deg); }

.tpt-account-menu-panel {
	list-style: none;
	margin: 0;
	padding: 6px;
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 200px;
	max-width: calc(100vw - 24px);
	background: var(--tpt-surface);
	border: 1px solid var(--tpt-border);
	border-radius: var(--tpt-radius-sm);
	box-shadow: 0 12px 32px rgba(16, 24, 40, .12);
	z-index: 650;
}
.tpt-account-menu-panel[hidden] { display: none; }
.tpt-account-menu-panel li a {
	display: block;
	padding: 9px 10px;
	border-radius: 4px;
	font-size: 14px;
	color: var(--tpt-body);
	white-space: nowrap;
}
.tpt-account-menu-panel li a:hover { background: var(--tpt-bg); color: var(--tpt-primary); text-decoration: none; }
.tpt-account-menu-item--logout { border-top: 1px solid var(--tpt-border); margin-top: 4px; padding-top: 4px; }

/* ---------------- Buttons ---------------- */
.tpt-btn {
	display: inline-block;
	padding: 9px 16px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	border: 1px solid transparent;
	cursor: pointer;
}
.tpt-btn:hover { text-decoration: none; }
.tpt-btn-primary { background: var(--tpt-primary); color: #fff; }
.tpt-btn-primary:hover { background: var(--tpt-primary-dark); color: #fff; }
.tpt-btn-ghost { background: transparent; border-color: var(--tpt-border); color: var(--tpt-body); }
.tpt-btn-ghost:hover { border-color: var(--tpt-primary); color: var(--tpt-primary); }
.tpt-btn-large { padding: 13px 24px; font-size: 16px; }

/* ---------------- Hero ---------------- */
.tpt-hero {
	background: linear-gradient(135deg, #eef4ff 0%, #f8fafc 100%);
	padding: 64px 16px;
	text-align: center;
}
.tpt-hero-inner { max-width: 720px; margin: 0 auto; }
.tpt-hero-title { font-size: 36px; margin-bottom: 12px; }
.tpt-hero-subtitle { font-size: 17px; color: var(--tpt-muted); margin-bottom: 28px; }
.tpt-hero-search { max-width: 720px; margin: 0 auto 20px; }
.tpt-hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.tpt-hero-stats { display: flex; gap: 28px; justify-content: center; margin-top: 32px; color: var(--tpt-muted); font-size: 14px; }
.tpt-hero-stats strong { display: block; font-size: 22px; color: var(--tpt-ink); }

/* ---------------- Sections ---------------- */
.tpt-section { margin: 48px 0; }
.tpt-section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
.tpt-section-title { font-size: 24px; margin: 0 0 18px; }
.tpt-section-head .tpt-section-title { margin-bottom: 0; }
.tpt-link { font-size: 14px; font-weight: 600; }

/* ---------------- Category grid ---------------- */
.tpt-category-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 12px;
}
.tpt-category-card {
	background: var(--tpt-surface);
	border: 1px solid var(--tpt-border);
	border-radius: var(--tpt-radius);
	padding: 18px 14px;
	text-align: center;
	color: var(--tpt-body);
	font-weight: 600;
}
.tpt-category-card:hover { border-color: var(--tpt-primary); color: var(--tpt-primary); text-decoration: none; }
.tpt-category-card-count { display: block; font-size: 12px; color: var(--tpt-muted); margin-top: 2px; }

/* ---------------- Fallback listing card (Frontend plugin inactive) ---------------- */
.tpt-listing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.tpt-listing-card { background: var(--tpt-surface); border: 1px solid var(--tpt-border); border-radius: var(--tpt-radius); overflow: hidden; display: block; color: var(--tpt-body); }
/* FAZA (redesign — listing card hover elevation): shared by this
   fallback card AND the full Module 4 listing card below (both use
   the `.tpt-listing-card` class) — a controlled lift, not an
   exaggerated animation, per the redesign spec's own formula. */
.tpt-listing-card:hover {
	text-decoration: none;
	border-color: var(--tpt-primary);
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(16, 24, 40, .1);
}
.tpt-listing-card-media { display: block; aspect-ratio: 4/3; background: var(--tpt-bg); overflow: hidden; }
.tpt-listing-card-media img { width: 100%; height: 100%; object-fit: cover; }
.tpt-listing-card-title { display: block; padding: 10px 12px 2px; font-weight: 600; color: var(--tpt-ink); }
.tpt-listing-card-price { display: block; padding: 0 12px 12px; color: var(--tpt-primary); font-weight: 700; }

/* ---------------- Standard content (posts/pages) ---------------- */
.tpt-content-area { padding: 32px 0 64px; }
.tpt-post-list { display: flex; flex-direction: column; gap: 32px; }
.tpt-post { border-bottom: 1px solid var(--tpt-border); padding-bottom: 32px; }
.tpt-post-thumb { display: block; margin-bottom: 16px; border-radius: var(--tpt-radius); overflow: hidden; }
.tpt-post-title { font-size: 22px; }
.tpt-post-title a { color: var(--tpt-ink); }
.tpt-post-meta { font-size: 13px; color: var(--tpt-muted); margin-bottom: 10px; }
.tpt-page-title { font-size: 30px; margin-bottom: 20px; }
.tpt-edit-link { font-size: 13px; }

.tpt-archive-header { margin-bottom: 24px; }
.tpt-archive-title { font-size: 28px; }
.tpt-archive-description { color: var(--tpt-muted); }

.tpt-breadcrumbs { font-size: 13px; color: var(--tpt-muted); margin-bottom: 16px; }
.tpt-breadcrumbs span { color: var(--tpt-body); }

.tpt-no-results { text-align: center; padding: 48px 0; color: var(--tpt-muted); }

/* ---------------- Search form (searchform.php) ---------------- */
.tpt-search-form { display: flex; gap: 8px; margin: 16px 0; }
.tpt-search-form-input {
	flex: 1;
	padding: 10px 14px;
	border: 1px solid var(--tpt-border);
	border-radius: var(--tpt-radius-sm);
	font-size: 14px;
}

/* ---------------- Comments (comments.php) ---------------- */
.tpt-comments-area { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--tpt-border); }
.tpt-comments-title { font-size: 20px; margin-bottom: 20px; }
.tpt-comment-list { list-style: none; margin: 0 0 24px; padding: 0; }
.tpt-comment-list .children { list-style: none; margin: 16px 0 0 32px; padding: 0; }
.tpt-comment-list article {
	display: flex;
	gap: 12px;
	padding: 16px 0;
	border-bottom: 1px solid var(--tpt-border);
}
.tpt-comment-list .comment-author img { border-radius: 50%; display: block; }
.tpt-comment-list .comment-meta { font-size: 13px; color: var(--tpt-muted); margin-bottom: 4px; }
.tpt-comment-list .comment-content p { margin: 0 0 8px; }
.tpt-comment-list .reply a { font-size: 13px; font-weight: 600; }
.tpt-comments-closed { color: var(--tpt-muted); font-style: italic; }
.comment-respond .comment-form p { margin: 0 0 14px; }
.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
.comment-respond textarea {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--tpt-border);
	border-radius: var(--tpt-radius-sm);
	font-family: inherit;
	font-size: 14px;
}
.comment-respond textarea { min-height: 120px; }

.tpt-notice { padding: 12px 16px; border-radius: 6px; margin-bottom: 20px; }
.tpt-notice-info { background: #eff8ff; color: #175cd3; border: 1px solid #b2ddff; }

.tpt-404 { text-align: center; padding: 64px 0; }
.tpt-404-title { font-size: 32px; }
.tpt-404-actions { display: flex; gap: 12px; justify-content: center; margin: 20px 0; }

/* Standard WP pagination markup (the_posts_pagination) */
.pagination, .nav-links { display: flex; gap: 8px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
.pagination .page-numbers, .nav-links .page-numbers {
	padding: 8px 14px;
	border: 1px solid var(--tpt-border);
	border-radius: 6px;
	color: var(--tpt-body);
}
.pagination .page-numbers.current, .nav-links .page-numbers.current { background: var(--tpt-primary); color: #fff; border-color: var(--tpt-primary); }

/* ---------------- Footer ---------------- */
.tpt-footer { background: var(--tpt-ink); color: #d0d5dd; margin-top: 64px; }
.tpt-footer-inner { max-width: var(--tpt-container); margin: 0 auto; padding: 48px 16px 24px; }
.tpt-footer-widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; margin-bottom: 32px; }
.tpt-footer-widget-title { color: #fff; font-size: 15px; margin-bottom: 10px; }

/* FAZA (redesign — 4-zone footer): TreguPlus (brand) / Kategoritë /
   Lidhje / Na ndiq (social). A zone that has nothing real to show
   (e.g. no Kontakt page exists yet) simply isn't in the grid — see
   footer.php — so the layout never shows an empty column. */
.tpt-footer-columns {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr);
	gap: 32px;
	padding-bottom: 32px;
	border-bottom: 1px solid #344054;
}
.tpt-footer-col-title {
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin: 0 0 14px;
}
.tpt-footer-col-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.tpt-footer-col-list a { color: #d0d5dd; font-size: 14px; }
.tpt-footer-col-list a:hover { color: #fff; text-decoration: none; }

.tpt-footer-branding { margin-bottom: 8px; }
.tpt-footer-branding .tpt-site-title { color: #fff; font-size: 20px; font-weight: 700; }
.tpt-footer-tagline { font-size: 13px; color: #98a2b3; margin: 4px 0 0; max-width: 320px; }

.tpt-footer-nav { margin-top: 14px; }
.tpt-footer-menu { list-style: none; display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; }
.tpt-footer-menu a { color: #d0d5dd; font-size: 14px; }
.tpt-footer-menu a:hover { color: #fff; text-decoration: none; }

.tpt-footer-col--social .tpt-social-links-list { margin-top: 2px; }
.tpt-footer-col--social .tpt-social-links-item { background: rgba(255,255,255,.06); border-color: #344054; color: #d0d5dd; }
.tpt-footer-col--social .tpt-social-links-item:hover { background: var(--tpt-primary); border-color: var(--tpt-primary); color: #fff; }

.tpt-footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	padding-top: 20px;
}
.tpt-footer-copy { font-size: 12px; color: #98a2b3; margin: 0; }
.tpt-footer-legal { list-style: none; display: flex; gap: 18px; margin: 0; padding: 0; }
.tpt-footer-legal a { color: #98a2b3; font-size: 12px; }
.tpt-footer-legal a:hover { color: #fff; text-decoration: none; }

/* =====================================================================
   MODULE 4 — Marketplace UI Components (template-parts/marketplace/**)
   Organized to mirror the component folder structure. All scoped to
   `.tpt-` classes; nothing here overrides the Frontend plugin's own
   `.tpf-` styles, which stay entirely separate.
   ===================================================================== */

/* ---------------- Categories ---------------- */
.tpt-category-card-icon { display: block; font-size: 22px; margin-bottom: 6px; }
.tpt-category-card-icon--svg {
	width: 34px;
	height: 34px;
	margin: 0 auto 8px;
	color: var(--tpt-primary);
	background: #eff4ff;
	border-radius: 50%;
	padding: 8px;
	box-sizing: content-box;
}
.tpt-category-card:hover .tpt-category-card-icon--svg { background: var(--tpt-primary); color: #fff; }
.tpt-category-card-icon--image { width: 40px; height: 40px; margin: 0 auto 8px; border-radius: 50%; object-fit: cover; }
.tpt-category-card-icon--glyph { display: block; font-size: 22px; margin-bottom: 6px; }
.tpt-category-list { list-style: none; margin: 0; padding: 0; }
.tpt-category-list-item { margin-bottom: 2px; }
.tpt-category-list-row { display: flex; align-items: stretch; }
.tpt-category-list-row > a { flex: 1; display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-radius: var(--tpt-radius-sm); color: var(--tpt-body); font-size: 14px; }
.tpt-category-list-row > a:hover { background: var(--tpt-bg); text-decoration: none; }
.tpt-category-list-item.is-current > .tpt-category-list-row > a { background: #eff4ff; color: var(--tpt-primary); font-weight: 600; }
.tpt-category-list-icon { display: inline-flex; width: 22px; flex-shrink: 0; text-align: center; font-size: 16px; }
.tpt-category-list-label { flex: 1; }

.tpt-category-expand {
	flex-shrink: 0;
	width: 36px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--tpt-muted);
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tpt-category-expand:hover { color: var(--tpt-primary); }
.tpt-category-expand span { display: inline-block; transition: transform .15s ease; }
.tpt-category-expand[aria-expanded="true"] span { transform: rotate(90deg); }

.tpt-category-sublist { list-style: none; margin: 2px 0 8px 32px; padding: 0; border-left: 2px solid var(--tpt-border); }
.tpt-category-sublist[hidden] { display: none; }
.tpt-category-sublist a { display: block; padding: 7px 10px; font-size: 13px; color: var(--tpt-muted); }
.tpt-category-sublist a:hover { color: var(--tpt-primary); text-decoration: none; }
.tpt-category-sublist li.is-current a { color: var(--tpt-primary); font-weight: 600; }

/* ---------------- Locations ---------------- */
.tpt-location-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.tpt-location-card { display: flex; align-items: center; gap: 8px; background: var(--tpt-surface); border: 1px solid var(--tpt-border); border-radius: var(--tpt-radius); padding: 14px; color: var(--tpt-body); font-weight: 600; }
.tpt-location-card:hover { border-color: var(--tpt-primary); color: var(--tpt-primary); text-decoration: none; }
.tpt-location-list { list-style: none; margin: 0; padding: 0; }
.tpt-location-list-item { margin-bottom: 4px; }
.tpt-location-list-item > a { display: block; padding: 8px 10px; border-radius: var(--tpt-radius-sm); color: var(--tpt-body); }
.tpt-location-list-item > a:hover { background: var(--tpt-bg); text-decoration: none; }
.tpt-location-list-item.is-current > a { background: #eff4ff; color: var(--tpt-primary); font-weight: 600; }
.tpt-location-sublist { list-style: none; margin: 2px 0 8px 14px; padding: 0; border-left: 2px solid var(--tpt-border); }
.tpt-location-sublist a { display: block; padding: 6px 10px; font-size: 13px; color: var(--tpt-muted); }

/* ---------------- Listing cards (grid/list/compact/featured) ---------------- */
.tpt-listing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.tpt-listing-grid.tpt-layout-list { grid-template-columns: 1fr; }

.tpt-listing-card { position: relative; border: 1px solid var(--tpt-border); border-radius: var(--tpt-radius); overflow: hidden; background: var(--tpt-surface); display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.tpt-listing-card-media { display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--tpt-bg); position: relative; }
.tpt-listing-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tpt-listing-card-body { padding: 12px; flex: 1; }
.tpt-listing-card-title { display: block; font-weight: 600; color: var(--tpt-ink); margin-bottom: 4px; }
.tpt-listing-card-price { color: var(--tpt-primary); font-weight: 700; margin-bottom: 6px; }
.tpt-listing-card-category { display: inline-block; font-size: 12px; color: var(--tpt-primary); text-decoration: none; margin: 2px 0 4px; }
.tpt-listing-card-category:hover { text-decoration: underline; }
.tpt-listing-card-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--tpt-muted); }
.tpt-listing-card-extra { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 12px; color: var(--tpt-muted); }
.tpt-listing-card-featured-badge { position: absolute; top: 8px; left: 8px; background: var(--tpt-secondary); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 4px; }
.tpt-listing-card-status { position: absolute; bottom: 8px; left: 8px; }
.tpt-chip-sm { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--tpt-bg); border: 1px solid var(--tpt-border); font-size: 11px; }

.tpt-favorite-btn { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(255,255,255,.9); cursor: pointer; font-size: 16px; color: #98a2b3; z-index: 2; }
.tpt-favorite-btn.is-active { color: #e0245e; }

/* List variant: horizontal card */
.tpt-listing-card--list { flex-direction: row; }
.tpt-listing-card--list .tpt-listing-card-media { width: 220px; flex-shrink: 0; aspect-ratio: auto; }
.tpt-listing-card--list .tpt-listing-card-body { display: flex; flex-direction: column; justify-content: center; }

/* Compact variant: small, no meta row, no favorite button (see listing-card.php) */
.tpt-listing-card--compact { flex-direction: row; align-items: center; }
.tpt-listing-card--compact .tpt-listing-card-media { width: 72px; height: 72px; flex-shrink: 0; aspect-ratio: auto; }
.tpt-listing-card--compact .tpt-listing-card-body { padding: 8px 10px; }
.tpt-listing-card--compact .tpt-listing-card-title { font-size: 13px; margin-bottom: 2px; }
.tpt-listing-card--compact .tpt-listing-card-price { font-size: 13px; margin-bottom: 0; }

/* Featured variant: larger image, highlighted price */
.tpt-listing-card--featured { border-color: var(--tpt-secondary); box-shadow: 0 4px 16px rgba(15, 118, 110, .1); }
.tpt-listing-card--featured .tpt-listing-card-media { aspect-ratio: 16/10; }
.tpt-listing-card--featured .tpt-listing-card-price { font-size: 19px; }

/* Skeleton loading card */
.tpt-skeleton-card { border: 1px solid var(--tpt-border); border-radius: var(--tpt-radius); overflow: hidden; background: var(--tpt-surface); }
.tpt-skeleton-media, .tpt-skeleton-line { background: linear-gradient(90deg, #eef1f4 25%, #f6f8fa 37%, #eef1f4 63%); background-size: 400% 100%; animation: tpt-shimmer 1.4s ease infinite; }
.tpt-skeleton-media { aspect-ratio: 4/3; }
.tpt-skeleton-line { height: 12px; margin: 10px 12px; border-radius: 4px; }
.tpt-skeleton-line--title { width: 70%; }
.tpt-skeleton-line--price { width: 40%; }
@keyframes tpt-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ---------------- Single listing components ---------------- */
.tpt-gallery-main { position: relative; aspect-ratio: 4/3; border-radius: var(--tpt-radius); overflow: hidden; background: var(--tpt-bg); }
.tpt-gallery-main-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tpt-gallery--empty img { width: 100%; aspect-ratio: 4/3; object-fit: contain; background: var(--tpt-bg); border-radius: var(--tpt-radius); }
.tpt-gallery-nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 36px; height: 36px; border-radius: 50%; border: none;
	background: rgba(16,24,40,.55); color: #fff; font-size: 20px; cursor: pointer;
}
.tpt-gallery-prev { left: 10px; }
.tpt-gallery-next { right: 10px; }
.tpt-gallery-thumbs { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.tpt-gallery-thumb { padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; width: 64px; height: 64px; cursor: pointer; background: none; }
.tpt-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tpt-gallery-thumb.is-active, .tpt-gallery-thumb:hover { border-color: var(--tpt-primary); }

.tpt-listing-meta-row { display: flex; gap: 16px; flex-wrap: wrap; color: var(--tpt-muted); font-size: 13px; margin: 12px 0; }

.tpt-listing-actions-bar { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }

.tpt-seller-box { border: 1px solid var(--tpt-border); border-radius: var(--tpt-radius); padding: 16px; }
.tpt-seller-card { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.tpt-seller-card-avatar { border-radius: 50%; flex-shrink: 0; }
.tpt-seller-card-name { font-size: 16px; margin: 0 0 4px; }
.tpt-seller-card-meta, .tpt-seller-card-count { font-size: 13px; color: var(--tpt-muted); margin: 0 0 2px; }

.tpt-related-listings { margin-top: 40px; }

/* ---------------- Marketplace CTA (marketplace-cta.php) ---------------- */
.tpt-cta-section { margin: 56px 0; }
.tpt-cta-box {
	background: linear-gradient(135deg, #eef4ff 0%, #f0fbf9 100%);
	border-radius: var(--tpt-radius);
	padding: 48px 24px;
	text-align: center;
}
.tpt-cta-box h2 { margin-bottom: 8px; }
.tpt-cta-box p { color: var(--tpt-muted); margin-bottom: 20px; }

/* ---------------- FAZA (redesign): Advertisement zones (advertisement.php) ----------------
 * Infrastructure/UI only — content comes entirely from TPT_Advertisements
 * (Customizer). A zone with nothing configured renders no markup at
 * all (see that class + advertisement.php), so there is never an empty
 * box reserving space on the page. */
.tpt-ad-zone { margin: 32px 0; }
.tpt-footer .tpt-ad-zone { margin: 0 0 32px; }
.tpt-ad {
	position: relative;
	border-radius: var(--tpt-radius);
	overflow: hidden;
	background: var(--tpt-surface);
	border: 1px solid var(--tpt-border);
}
.tpt-ad-label {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	background: rgba(16, 24, 40, .65);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 3px 9px;
	border-radius: 999px;
}
.tpt-ad-link { display: block; }
.tpt-ad-image { width: 100%; height: auto; display: block; }
.tpt-ad-html { padding: 20px; }
.tpt-ad-video-frame { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; }
.tpt-ad-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tpt-ad-video { width: 100%; height: auto; display: block; background: #000; }

/* ---------------- FAZA (redesign): Social links (social-links.php) ---------------- */
.tpt-social-links-list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.tpt-social-links-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--tpt-bg);
	border: 1px solid var(--tpt-border);
	color: var(--tpt-muted);
	transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.tpt-social-links-item:hover { background: var(--tpt-primary); border-color: var(--tpt-primary); color: #fff; transform: translateY(-2px); text-decoration: none; }
.tpt-social-links-item:focus-visible { outline: 2px solid var(--tpt-primary); outline-offset: 2px; }
.tpt-social-icon, .tpt-whatsapp-icon { width: 18px; height: 18px; }
.tpt-whatsapp-icon { width: 16px; height: 16px; }

/* ---------------- FAZA (redesign): Homepage social/community section (social-section.php) ---------------- */
.tpt-social-section { text-align: center; }
.tpt-social-section-inner { max-width: 560px; margin: 0 auto; }
.tpt-social-section-subtitle { color: var(--tpt-muted); margin: 0 0 18px; }
.tpt-social-section .tpt-social-links-list { justify-content: center; }

/* ---------------- Marketplace Browse composition (template-marketplace-browse.php) ---------------- */
.tpt-listings-layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; margin-top: 20px; }
.tpt-filters-sidebar { position: sticky; top: 90px; }
.tpt-results-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.tpt-results-count { color: var(--tpt-muted); font-size: 13px; }
.tpt-subcategories, .tpt-sublocations { margin: 16px 0; }
.tpt-sublocations { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------------- Filters & sort ---------------- */
.tpt-filter-panel { display: flex; flex-direction: column; gap: 14px; border: 1px solid var(--tpt-border); border-radius: var(--tpt-radius); padding: 16px; }
.tpt-filter-panel-title { font-size: 16px; margin: 0; }
.tpt-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--tpt-body); }
.tpt-field label { font-weight: 500; }
.tpt-field input, .tpt-field select, .tpt-field textarea {
	padding: 8px 10px; border: 1px solid var(--tpt-border); border-radius: var(--tpt-radius-sm); font-size: 14px; font-family: inherit;
}
.tpt-field.has-error input, .tpt-field.has-error select, .tpt-field.has-error textarea { border-color: var(--tpt-danger); }
.tpt-field-help { font-size: 12px; color: var(--tpt-muted); margin: 2px 0 0; }
.tpt-field-error { font-size: 12px; color: var(--tpt-danger); margin: 2px 0 0; }
.tpt-field-required { color: var(--tpt-danger); }
.tpt-field-row { display: flex; gap: 10px; }
.tpt-field-row .tpt-field { flex: 1; }
.tpt-filter-panel-actions { display: flex; gap: 10px; align-items: center; }

.tpt-radio-group, .tpt-checkbox { display: flex; flex-direction: column; gap: 6px; }
.tpt-radio, .tpt-checkbox { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 400; flex-direction: row; }
.tpt-file-placeholder { border: 2px dashed var(--tpt-border); border-radius: var(--tpt-radius-sm); padding: 12px; }

.tpt-sort-select select { padding: 8px 12px; border: 1px solid var(--tpt-border); border-radius: var(--tpt-radius-sm); font-size: 14px; background: var(--tpt-surface); }

/* ---------------- Pagination (marketplace component) ---------------- */
.tpt-pagination { display: flex; gap: 6px; justify-content: center; align-items: center; margin-top: 28px; flex-wrap: wrap; }
.tpt-page-link { padding: 8px 13px; border: 1px solid var(--tpt-border); border-radius: var(--tpt-radius-sm); color: var(--tpt-body); font-size: 14px; }
.tpt-page-link:hover { border-color: var(--tpt-primary); color: var(--tpt-primary); text-decoration: none; }
.tpt-page-link.is-current { background: var(--tpt-primary); color: #fff; border-color: var(--tpt-primary); }
.tpt-page-ellipsis { color: var(--tpt-muted); padding: 0 4px; }

/* ---------------- Status badges ---------------- */
.tpt-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.tpt-badge-draft { background: #f2f4f7; color: #344054; }
.tpt-badge-pending { background: #fffaeb; color: var(--tpt-warning); }
.tpt-badge-approved { background: #ecfdf3; color: var(--tpt-success); }
.tpt-badge-rejected { background: #fef3f2; color: var(--tpt-danger); }
.tpt-badge-expired, .tpt-badge-archived { background: #f2f4f7; color: var(--tpt-muted); }
.tpt-badge-sold { background: #eff8ff; color: #175cd3; }

/* ---------------- Button system ---------------- */
.tpt-btn-outline { background: transparent; border: 1px solid var(--tpt-primary); color: var(--tpt-primary); }
.tpt-btn-outline:hover { background: #eff4ff; color: var(--tpt-primary); }
.tpt-btn-danger { background: var(--tpt-danger); border-color: var(--tpt-danger); color: #fff; }
.tpt-btn-danger:hover { background: #93190f; }
.tpt-btn-success { background: var(--tpt-success); border-color: var(--tpt-success); color: #fff; }
.tpt-btn-icon { width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.tpt-btn[disabled], .tpt-btn.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.tpt-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.tpt-btn.is-loading::after {
	content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
	border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; color: #fff;
	animation: tpt-spin .6s linear infinite;
}
.tpt-btn-ghost.is-loading::after { color: var(--tpt-body); }
@keyframes tpt-spin { to { transform: rotate(360deg); } }
.tpt-link { color: var(--tpt-primary); font-weight: 600; font-size: 14px; }

/* ---------------- UI states: alert, empty-state, modal ---------------- */
.tpt-alert { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: var(--tpt-radius-sm); margin-bottom: 16px; font-size: 14px; }
.tpt-alert-success { background: #ecfdf3; color: var(--tpt-success); border: 1px solid #abefc6; }
.tpt-alert-error { background: #fef3f2; color: var(--tpt-danger); border: 1px solid #fda29b; }
.tpt-alert-warning { background: #fffaeb; color: var(--tpt-warning); border: 1px solid #fec84b; }
.tpt-alert-info { background: #eff8ff; color: #175cd3; border: 1px solid #b2ddff; }
.tpt-alert-dismiss { background: none; border: none; font-size: 18px; cursor: pointer; color: inherit; line-height: 1; }

.tpt-empty-state { text-align: center; padding: 48px 16px; color: var(--tpt-muted); }
.tpt-empty-state .tpt-btn { margin-top: 12px; }

.tpt-modal { position: fixed; inset: 0; background: rgba(16,24,40,.6); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 16px; }
.tpt-modal[hidden] { display: none; }
.tpt-modal-inner { background: var(--tpt-surface); border-radius: var(--tpt-radius); padding: 24px; max-width: 480px; width: 100%; position: relative; max-height: 90vh; overflow-y: auto; }
.tpt-modal-close { position: absolute; top: 10px; right: 14px; background: none; border: none; font-size: 22px; cursor: pointer; color: var(--tpt-muted); }
.tpt-modal-title { margin: 0 0 16px; font-size: 18px; padding-right: 24px; }


/* ---------------- Responsive ---------------- */

/* Tablet tier — keeps the desktop hover-dropdown nav (there's room for
   it) but starts tightening spacing/hero sizing before the 900px
   mobile-nav breakpoint kicks in. */
@media (max-width: 1024px) {
	.tpt-container { padding: 0 20px; }
	.tpt-hero { padding: 56px 20px; }
	.tpt-search-box--compact { flex-basis: 200px; }
}

@media (max-width: 900px) {
	.tpt-menu-toggle { display: inline-flex; align-items: center; justify-content: center; order: 2; }
	.tpt-primary-nav {
		display: none;
		flex-basis: 100%;
		order: 4;
	}
	.tpt-primary-nav.is-open { display: block; }
	.tpt-primary-menu { flex-direction: column; gap: 4px; padding: 12px 0; }
	.tpt-primary-menu li { flex-direction: column; align-items: stretch; }
	.tpt-primary-menu a { display: block; padding: 8px 0; }

	/* Submenus become an inline accordion instead of an absolute
	   dropdown — .is-submenu-open is toggled by assets/js/theme.js. */
	.tpt-primary-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: none;
		padding: 0 0 0 16px;
		max-height: 0;
		overflow: hidden;
		transition: max-height .2s ease;
	}
	.tpt-primary-menu li.is-submenu-open > .sub-menu { max-height: 600px; }
	.tpt-submenu-toggle { display: inline-flex; align-items: center; justify-content: center; }

	.tpt-header-inner { flex-wrap: wrap; }
	.tpt-header-actions { order: 3; margin-left: auto; }
	.tpt-search-box--compact { order: 5; flex-basis: 100%; margin-top: 8px; }
	.tpt-hero-title { font-size: 26px; }
}

@media (max-width: 600px) {
	/* FAZA 2: only collapse the secondary "Regjistrohu" ghost button at
	   the smallest widths to save space — "Hyr" (.tpt-login-link) stays
	   visible so a logged-out visitor always has a real, direct way to
	   log in from the header, not just via a submit-listing redirect. */
	.tpt-header-actions .tpt-btn-ghost:not(.tpt-login-link) { display: none; }
	.tpt-hero { padding: 40px 16px; }
	.tpt-hero-stats { gap: 16px; }
	.tpt-search-box--compact { display: none; } /* header search box hides on very small screens; marketplace listings page has its own search bar */

	/* FAZA (redesign — footer): 1 column at the narrowest widths. */
	.tpt-footer-columns { grid-template-columns: 1fr; gap: 28px; }
	.tpt-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* FAZA (redesign — footer): 2 columns at tablet width, matching the
   grid's own "brand column is wider" ratio collapsing to a 2x2-ish
   layout rather than jumping straight to 1 column. */
@media (max-width: 900px) {
	.tpt-footer-columns { grid-template-columns: 1fr 1fr; gap: 28px; }
}

/* ---------------- Module 4 responsive additions ---------------- */

/* Mobile search: hidden entirely on desktop/tablet (the header's own
   compact search box handles those), shown only inside the mobile nav
   panel below the 900px breakpoint where the header's search hides. */
.tpt-mobile-search { display: none; }

@media (max-width: 900px) {
	.tpt-mobile-search { display: block; margin-bottom: 12px; }
	.tpt-mobile-search .tpt-search-box--inline { flex-direction: column; }

	.tpt-listing-card--list { flex-direction: column; }
	.tpt-listing-card--list .tpt-listing-card-media { width: 100%; aspect-ratio: 4/3; }

	.tpt-field-row { flex-direction: column; }
	.tpt-listings-layout { grid-template-columns: 1fr; }
	.tpt-filters-sidebar { position: static; }

	/* Category nav becomes a full-screen drawer instead of a dropdown. */
	.tpt-category-nav-panel {
		position: fixed;
		inset: 0;
		top: 0;
		left: 0;
		width: 100%;
		max-width: none;
		max-height: none;
		border-radius: 0;
		border: none;
		z-index: 9998;
	}
	.tpt-category-nav-panel-inner { padding: 20px; height: 100%; overflow-y: auto; }
	.tpt-category-nav-close { display: block; position: absolute; top: 14px; right: 14px; background: none; border: none; font-size: 26px; cursor: pointer; color: var(--tpt-muted); }
	.tpt-header-right { gap: 8px; }
	.tpt-whatsapp-number { display: none; } /* icon-only on small screens to save header width */

	/* MODULE 1: below 900px, show the existing accordion instead of the
	   3-column mega-menu (which has no room to lay out three columns on
	   a phone-width screen) — same swap point the rest of this
	   breakpoint already uses for the drawer itself. */
	.tpt-mega-menu { display: none; }
	.tpt-category-nav-mobile { display: block; }

	/* FAZA 4: on narrow screens the pills row simply scrolls horizontally
	   (already the default via overflow-x: auto above) — the "Më shumë"
	   toggle is a desktop/tablet convenience, not needed once scrolling
	   is the natural interaction, so every pill is present and reachable
	   by swiping instead of being hidden behind the toggle. */
	.tpt-category-pill--overflow { display: inline-flex; }
	.tpt-category-pill-more { display: none; }
	.tpt-category-pills-scroll { padding: 8px 16px; }
}

@media (max-width: 768px) {
	.tpt-search-box--hero { flex-direction: column; align-items: stretch; }
	.tpt-search-box--hero .tpt-search-box-submit { width: 100%; }
	.tpt-listing-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

@media (max-width: 480px) {
	.tpt-listing-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.tpt-gallery-thumbs { justify-content: center; }
	.tpt-modal-inner { padding: 18px; }
	.tpt-listing-actions-bar { flex-direction: column; }
	.tpt-listing-actions-bar .tpt-btn { width: 100%; text-align: center; }
	.tpt-ad-html { padding: 14px; }
	.tpt-social-links-item { width: 36px; height: 36px; }
}

@media (max-width: 360px) {
	.tpt-listing-grid { grid-template-columns: 1fr; }
	.tpt-hero-stats { flex-direction: column; gap: 8px; }
}

/* ---------------- v2.4.0: Classima-inspired marketplace navigation polish ----------------
 * Visual inspiration only: clean classified-marketplace proportions,
 * stronger category affordance, wider mega-menu and clearer mobile drawer.
 * No Classima markup, assets or dependency is introduced.
 */
.tpt-category-nav-toggle {
	min-height: 40px;
	padding-inline: 15px;
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.tpt-category-nav-toggle:focus-visible { outline: 2px solid var(--tpt-primary); outline-offset: 2px; }
.tpt-category-nav-panel {
	width: min(920px, calc(100vw - 32px));
	border-radius: 12px;
	box-shadow: 0 18px 48px rgba(16, 24, 40, .16);
}
.tpt-category-nav-panel-inner { padding: 20px; }
.tpt-mega-menu { grid-template-columns: 1.05fr 1.35fr .9fr; gap: 18px; }
.tpt-mega-menu-col { min-width: 0; }
.tpt-mega-menu-heading { margin-bottom: 10px; }
.tpt-mega-menu-list { max-height: 430px; overflow-y: auto; padding-right: 4px; }
.tpt-mega-menu-link { min-height: 40px; padding: 9px 11px; }
.tpt-mega-menu-item.is-active > .tpt-mega-menu-link,
.tpt-mega-menu-link:hover { box-shadow: inset 3px 0 0 var(--tpt-primary); }
.tpt-mega-menu-sublist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.tpt-mega-menu-sublist li a { min-height: 36px; display: flex; align-items: center; }
.tpt-mega-menu-quicklist { border-left: 1px solid var(--tpt-border); padding-left: 14px; }
.tpt-mega-menu-viewall { margin-top: 4px; }
.tpt-category-pills { box-shadow: 0 1px 0 rgba(16, 24, 40, .02); }

@media (max-width: 900px) {
	.tpt-category-nav-panel-inner { padding: 20px 16px; }
	.tpt-mega-menu { display: none; }
	.tpt-category-nav-mobile { display: block; }
	.tpt-category-nav-title { font-size: 20px; padding-right: 44px; }
	.tpt-category-nav-panel { box-shadow: none; }
}