/*
modern.css — Varna.BIZ frontend modernization override layer.

Loaded AFTER styles.css from both head templates:
  - templates/_html_head.php            (public pages)
  - templates/user_templates/_user_html_head.php (user/auth pages)

styles.css is frozen; all modern styling lives in this file.
Full rollback = remove the two <link> tags that load this file.

Sections:
   0. Design tokens
   1. Base & typography
   2. Containers & layout
   3. Buttons & labels
   4. Forms & select2
   5. Navbar
   6. Hero (homepage)
   7. Footer
   8. Homepage blocks
   9. Listings & search
  10. Place detail
  11. All categories
  12. Blog
  13. User/auth chrome
  14. Alerts, modals, misc
  15. Utilities & animation
  16. Responsive
*/

/*--------------------------------------------------------------
0. Design tokens
--------------------------------------------------------------*/
:root {
	/* brand */
	--c-brand-50: #fff4ec;
	--c-brand-400: #ff8534;
	--c-brand-500: #ff6300;
	--c-brand-600: #e05500;
	--c-brand-700: #b84500;

	/* accent */
	--c-accent: #ff2e63;
	--c-accent-600: #d81b4f;

	/* gradients */
	--grad-hero: linear-gradient(115deg, #ff9e00 0%, #ff6300 32%, #ff2e63 72%, #d61f69 100%);
	/* translucent twin of --grad-hero: veils the hero photo underneath */
	--grad-hero-veil: linear-gradient(115deg, rgba(255, 158, 0, .74) 0%, rgba(255, 99, 0, .72) 32%, rgba(255, 46, 99, .70) 72%, rgba(214, 31, 105, .74) 100%);
	--grad-cta: linear-gradient(135deg, #ff6300, #ff2e63);

	/* ink & text */
	--c-ink: #171a21;
	--c-text: #4c5260;
	--c-muted: #8a91a3;

	/* surfaces */
	--c-bg: #f4f5f7;
	--c-surface: #fff;
	--c-surface-2: #fafbfc;

	/* borders */
	--c-border: #e4e7ec;
	--c-border-strong: #d3d8e0;

	/* semantic */
	--c-link: #1f6fd6;
	--c-success: #17a05a;
	--c-danger: #e63946;
	--c-warning: #f5a623;

	/* radius scale */
	--r-xs: 6px;
	--r-sm: 8px;
	--r-md: 12px;
	--r-lg: 16px;
	--r-xl: 24px;
	--r-pill: 999px;

	/* shadow scale */
	--sh-1: 0 1px 2px rgba(23, 26, 33, .05), 0 2px 6px rgba(23, 26, 33, .06);
	--sh-2: 0 6px 16px rgba(23, 26, 33, .08);
	--sh-3: 0 16px 40px rgba(23, 26, 33, .12);
	--sh-brand: 0 10px 30px rgba(255, 99, 0, .35);
	--ring: 0 0 0 3px rgba(255, 99, 0, .30);

	/* spacing scale */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 24px;
	--sp-6: 32px;
	--sp-7: 48px;
	--sp-8: 64px;

	/* motion */
	--t-fast: 120ms;
	--t-base: 200ms ease;

	/* fonts */
	--font-main: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
}

/*--------------------------------------------------------------
1. Base & typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {
	color: var(--c-text);
	font-family: var(--font-main);
}

body {
	background-color: var(--c-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--c-ink);
	font-weight: 800;
	letter-spacing: -0.02em;
}

h1 {
	font-size: 4rem;
}

h2 {
	font-weight: 700;
}

/* legacy styles.css centers every h3 globally (".slogan h1,h3" rule);
   restore sane default here — contexts that want centered h3 keep their
   own higher-specificity rules (.slogan h3, .featured-item h3, ...) */
h3 {
	text-align: left;
}

a:link,
a:visited {
	color: var(--c-text);
	transition: color var(--t-fast) ease;
}

a:hover,
a:active {
	color: var(--c-brand-600);
}

::selection {
	background: rgba(255, 99, 0, .18);
	color: var(--c-ink);
}

:focus-visible {
	outline: none;
	box-shadow: var(--ring);
}

/*--------------------------------------------------------------
2. Containers & layout
--------------------------------------------------------------*/
.wrapper,
.navbar-inner,
.search-block-inner,
#footer-inner {
	max-width: 1200px;
}

.full-block {
	background-color: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-1);
	padding: var(--sp-6);
}

/*--------------------------------------------------------------
15. Utilities & animation
--------------------------------------------------------------*/
@keyframes fade-up {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.fade-up {
	animation: fade-up .5s ease both;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*:before,
	*:after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/*--------------------------------------------------------------
3. Buttons & labels
--------------------------------------------------------------*/
.btn {
	border: 0;
	border-radius: var(--r-sm);
	font-weight: 700;
	letter-spacing: .01em;
	padding: 10px 22px;
	transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease,
		background-color var(--t-fast) ease, color var(--t-fast) ease;
}

.btn:hover,
.btn:focus {
	transform: translateY(-2px);
	box-shadow: var(--sh-2);
}

.btn:active {
	transform: translateY(0);
	box-shadow: var(--sh-1);
}

.btn-orange,
.btn-orange:hover,
.btn-orange:focus,
.btn-orange:active {
	background: var(--grad-cta);
	color: #fff;
}

.btn-orange:hover {
	box-shadow: var(--sh-brand);
}

.btn-blue,
.btn-blue:hover,
.btn-blue:focus {
	background-color: var(--c-link);
	color: #fff;
}

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

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

.btn-default,
.btn-default:hover,
.btn-default:focus {
	background-color: var(--c-surface);
	border: 1px solid var(--c-border-strong);
	color: var(--c-ink);
}

/* vertical padding stays inherited from the navbar so the pill
   shares the menu links' baseline at every breakpoint */
a.btn-sign-in,
a.btn-sign-in:link,
a.btn-sign-in:visited {
	background: var(--grad-cta);
	border-radius: var(--r-pill);
	color: #fff;
	padding-left: 20px;
	padding-right: 20px;
}

a.btn-sign-in:hover {
	box-shadow: var(--sh-brand);
	color: #fff;
}

.label {
	border-radius: var(--r-pill);
	font-weight: 600;
	padding: .4em .9em;
}

.label-blue {
	background-color: var(--c-link);
}

.label-green {
	background-color: var(--c-success);
}

.label-danger {
	background-color: var(--c-danger);
}

/*--------------------------------------------------------------
4. Forms & select2
--------------------------------------------------------------*/
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
select,
textarea,
.form-control {
	background-color: var(--c-surface);
	border: 1px solid var(--c-border-strong);
	border-radius: var(--r-sm);
	box-shadow: none;
	color: var(--c-ink);
	padding: 10px 14px;
	transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus,
.form-control:focus {
	border-color: var(--c-brand-500);
	box-shadow: var(--ring);
	outline: none;
}

.select2-container--default .select2-selection--single {
	border: 1px solid var(--c-border-strong);
	border-radius: var(--r-sm);
	height: 46px;
	padding: 6px 8px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--c-ink);
	line-height: 32px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 44px;
}

.select2-dropdown {
	border: 1px solid var(--c-border);
	border-radius: var(--r-sm);
	box-shadow: var(--sh-2);
}

.select2-results__option--highlighted[aria-selected] {
	background-color: var(--c-brand-500);
}

.select2-container--default .select2-results__option[aria-selected="true"] {
	background-color: var(--c-bg);
}

.autocomplete-suggestions {
	border: 1px solid var(--c-border);
	border-radius: var(--r-sm);
	box-shadow: var(--sh-2);
}

.autocomplete-selected {
	background: var(--c-bg);
}

/*--------------------------------------------------------------
5. Navbar
--------------------------------------------------------------*/
.header .navbar {
	position: sticky;
	top: 0;
	z-index: 1030;
}

body:not(.tpl-index) > .header {
	background: rgba(255, 255, 255, .92);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: var(--sh-1);
	position: sticky;
	top: 0;
	z-index: 1030;
}

body:not(.tpl-index) .header a:link,
body:not(.tpl-index) .header a:visited {
	color: var(--c-text);
}

body:not(.tpl-index) .header a:hover,
body:not(.tpl-index) .header a:active {
	color: var(--c-brand-600);
}

body:not(.tpl-index) #main-menu li a {
	color: var(--c-text);
}

body:not(.tpl-index) .glyphicon-menu-hamburger {
	color: var(--c-ink);
}

.tpl-index .glyphicon-menu-hamburger {
	color: #fff;
}

#main-menu li a {
	font-weight: 600;
}

.tpl-index .navbar-default {
	background-color: rgba(23, 26, 33, .35);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
	background-color: rgba(255, 255, 255, .18);
}

.navbar-default .navbar-toggle {
	border-color: transparent;
}

body #main-menu ul.dropdown-menu li a {
	color: var(--c-text);
}

.dropdown-menu {
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	box-shadow: var(--sh-2);
	overflow: hidden;
	padding: var(--sp-2);
}

.dropdown-menu > li > a {
	border-radius: var(--r-xs);
	color: var(--c-text);
	padding: 8px 14px;
}

.dropdown-menu > li > a:hover {
	background-color: var(--c-bg);
	color: var(--c-brand-600);
}

/*--------------------------------------------------------------
6. Hero (homepage)
--------------------------------------------------------------*/
.header::before,
:not(.tpl-index) > .header::before {
	display: none;
}

.tpl-index .header {
	background:
		radial-gradient(70rem 44rem at 88% -12%, rgba(255, 255, 255, .28), transparent 60%),
		radial-gradient(56rem 36rem at 8% 112%, rgba(255, 46, 99, .35), transparent 62%),
		var(--grad-hero-veil),
		url("../../imgs/varna-cathedral.jpg") center 68% / cover no-repeat;
	background-color: var(--c-brand-600);
	min-height: 560px;
}

.slogan {
	padding: var(--sp-7) 24px var(--sp-2);
}

.slogan h1 {
	color: #fff;
	font-size: clamp(2.8rem, 4.4vw, 4.4rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0 auto var(--sp-3);
	max-width: 16em;
	text-align: center;
	text-shadow: 0 4px 24px rgba(23, 26, 33, .25);
}

.slogan h3 {
	color: rgba(255, 255, 255, .92);
	font-size: clamp(1.5rem, 1.6vw, 1.9rem);
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.55;
	margin: 0 auto;
	max-width: 46em;
	text-align: center;
}

.search-block {
	background-color: transparent;
	padding: var(--sp-5) 0 var(--sp-7);
}

#main-search-form {
	margin: 0 auto;
	max-width: 720px;
}

/* the pill wrapper is the BS3 column div holding input + button;
   the trailing .clearfix div must not inherit the pill chrome */
#main-search-form > div:first-child {
	align-items: center;
	background: rgba(255, 255, 255, .96);
	border-radius: var(--r-pill);
	box-shadow: var(--sh-3);
	display: flex;
	float: none;
	gap: var(--sp-2);
	margin: 0;
	padding: 6px;
	width: 100%;
}

/* nothing floats inside the form anymore */
#main-search-form > .clearfix {
	display: none;
}

#query-input {
	background: transparent;
	border: 0;
	box-shadow: none;
	flex: 1;
	float: none;
	font-size: 1.8rem;
	padding: 12px 22px;
	width: auto;
}

#query-input:focus {
	box-shadow: none;
	outline: none;
}

#main-search-form button {
	border: 0;
	border-radius: 50%;
	background: var(--grad-cta);
	color: #fff;
	flex: none;
	height: 52px;
	width: 52px;
}

#quick-links {
	float: none;
	margin: var(--sp-5) auto 0;
	width: 100%;
	z-index: 1;
}

#quick-links ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	justify-content: center;
	margin: 0;
	padding: 0;
}

#quick-links ul li {
	color: #fff;
	float: none;
	list-style: none;
	padding: 0;
}

#quick-links ul li a {
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	background: rgba(255, 255, 255, .16);
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: var(--r-pill);
	color: #fff;
	display: inline-block;
	font-weight: 600;
	padding: 8px 18px;
	transition: background var(--t-fast) ease;
}

#quick-links ul li a:hover {
	background: rgba(255, 255, 255, .28);
	color: #fff;
}

/*--------------------------------------------------------------
7. Footer
--------------------------------------------------------------*/
#footer {
	background: #111426;
	border-top: 0;
	margin-top: var(--sp-7);
}

#footer-inner {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-6);
	padding: var(--sp-7) 24px;
}

#footer-inner .clear {
	display: none;
}

.footer-inner-left {
	flex: 2 1 320px;
	float: none;
	width: auto;
}

.footer-inner-right {
	flex: 1 1 200px;
	float: none;
	text-align: left;
	width: auto;
}

.footer-site-name {
	color: #fff;
	font-size: 2.2rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin-bottom: var(--sp-2);
}

.footer-tagline {
	color: rgba(255, 255, 255, .55);
	font-size: 1.4rem;
	margin: 0;
	max-width: 34rem;
}

.footer-heading {
	color: #fff;
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: .08em;
	margin-bottom: var(--sp-3);
	text-transform: uppercase;
}

.footer-inner-right ul {
	display: block;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.footer-inner-right li {
	float: none;
	margin: 0 0 10px;
}

#footer,
#footer a:link,
#footer a:visited {
	color: rgba(255, 255, 255, .72);
}

#footer a:hover,
#footer a:active {
	color: var(--c-brand-400);
}

/*--------------------------------------------------------------
14. Alerts, modals, misc
--------------------------------------------------------------*/
.alert {
	border: 0;
	border-radius: var(--r-md);
	font-weight: 600;
}

.alert-success {
	background-color: rgba(23, 160, 90, .12);
	color: var(--c-success);
}

.alert-danger {
	background-color: rgba(230, 57, 70, .12);
	color: var(--c-danger);
}

.alert-info {
	background-color: rgba(31, 111, 214, .10);
	color: var(--c-link);
}

.alert-warning {
	background-color: rgba(245, 166, 35, .14);
	color: #b97c0e;
}

.modal-content {
	border: 0;
	border-radius: var(--r-lg);
	box-shadow: var(--sh-3);
	overflow: hidden;
}

.modal-header {
	background: var(--c-ink) !important;
}

.modal-header .modal-title,
.modal-header h3,
.modal-header h4,
.modal-title {
	color: #fff !important;
}

.modal-header .close {
	color: #fff !important;
	opacity: .7;
	text-shadow: none;
}

.modal-footer {
	border-top: 1px solid var(--c-border);
}

/*--------------------------------------------------------------
8. Homepage blocks
--------------------------------------------------------------*/
/* section headings with brand underline */
body.tpl-index h2 {
	font-size: 2.8rem;
	margin: var(--sp-7) 0 var(--sp-5);
}

body.tpl-index h2::after {
	background: var(--grad-cta);
	border-radius: 2px;
	content: "";
	display: block;
	height: 4px;
	margin-top: var(--sp-2);
	width: 56px;
}

/* home blog: four compact cards in a row */
.home-blog-grid {
	display: grid;
	gap: var(--sp-3);
	grid-template-columns: repeat(4, 1fr);
	margin-bottom: var(--sp-7);
}

/* collapsible seo text on homepage */
.home-seo-text {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	margin-bottom: var(--sp-7);
	margin-top: var(--sp-6);
	padding: var(--sp-4) var(--sp-5);
}

.home-seo-text p {
	color: var(--c-muted);
	font-size: 1.4rem;
	line-height: 1.6;
	margin: 0 0 var(--sp-3);
}

.home-seo-text p:last-child {
	margin-bottom: 0;
}

#home-seo-more p:first-child {
	margin-top: var(--sp-3);
}

#home-seo-toggle {
	color: var(--c-brand-600);
	display: inline-block;
	font-size: 1.4rem;
	font-weight: 600;
	margin-top: var(--sp-2);
	text-decoration: none;
}

#home-seo-toggle:hover {
	color: var(--c-brand-400);
}

.home-blog-card {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	display: block;
	overflow: hidden;
	text-decoration: none;
	transition: transform var(--t-base), box-shadow var(--t-base);
}

.home-blog-card:hover {
	box-shadow: var(--sh-2);
	transform: translateY(-3px);
}

.home-blog-card img {
	height: 180px;
	object-fit: cover;
	width: 100%;
}

.home-blog-card h3 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: var(--c-ink);
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.35;
	margin: 12px 14px 6px;
	overflow: hidden;
}

.home-blog-card:hover h3 {
	color: var(--c-brand-600);
}

.home-blog-card p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: var(--c-muted);
	font-size: 1.35rem;
	line-height: 1.45;
	margin: 0 14px 14px;
	overflow: hidden;
}

/* featured listings: float grid -> flex cards */
.home-trending-venues {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-5);
}

.home-trending-venues > .clear {
	display: none;
}

.home-trending-venues .featured-item {
	background: var(--c-surface);
	border-radius: var(--r-md);
	box-shadow: var(--sh-1);
	display: flex;
	flex: 0 0 calc((100% - 72px) / 4);
	flex-direction: column;
	float: none;
	height: auto;
	margin: 0;
	overflow: hidden;
	transition: transform var(--t-base), box-shadow var(--t-base);
	width: auto;
}

.home-trending-venues .featured-item:hover {
	box-shadow: var(--sh-2);
	transform: translateY(-4px);
}

.featured-item-pic {
	position: relative;
}

.featured-item-pic img {
	aspect-ratio: 4 / 3;
	border-radius: 0;
	display: block;
	max-height: none;
	opacity: 1;
	object-fit: cover;
	width: 100%;
}

/* title & rating sit below the image, in normal flow */
.featured-item-rating {
	padding: 12px 16px 0;
	position: static;
	text-align: left;
	width: auto;
}

.featured-item h3 {
	color: var(--c-ink);
	font-size: 1.8rem;
	padding: 2px 16px 0;
	position: static;
	text-align: left;
	text-shadow: none;
	width: auto;
}

.featured-item:hover h3 {
	color: var(--c-brand-600);
}

.featured-item-description {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	color: var(--c-text);
	display: -webkit-box;
	flex: 1;
	font-size: 1.4rem;
	overflow: hidden;
	padding: var(--sp-4) var(--sp-4) var(--sp-5);
}

.user-pic img {
	border: 3px solid #fff;
	box-shadow: var(--sh-1);
	height: 64px;
	width: 64px;
}

.user-pic {
	top: -32px;
	z-index: 2;
}

/* main categories: compact two-up chips at the top of the page */
.tpl-index .full-block {
	padding: var(--sp-4);
}

.home-main-cats {
	display: grid;
	gap: var(--sp-2);
	grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}

.home-main-cats > .clear {
	display: none;
}

.home-main-cats .main-cat-block {
	align-items: center;
	background: var(--c-surface-2);
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	display: flex;
	float: none;
	gap: var(--sp-2);
	height: auto;
	margin: 0;
	padding: 8px 12px;
	text-align: left;
	transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
	width: auto;
}

.home-main-cats .main-cat-block:hover {
	border-color: var(--c-brand-400);
	box-shadow: var(--sh-1);
	transform: translateY(-2px);
}

.main-cat-block a,
.main-cat-icon a,
.main-cat-icon i {
	color: var(--c-brand-500);
	font-weight: 600;
}

/* kill the legacy 48px link strut; the favzz glyph sits on the i pseudo-element */
.home-main-cats .main-cat-icon a {
	font-size: 2.2rem;
	line-height: 1;
}

.home-main-cats [class^="favzz-"]:before,
.home-main-cats [class*=" favzz-"]:before {
	font-size: 2.2rem;
}

.main-cat-name {
	margin-top: 0;
}

.main-cat-name a {
	color: var(--c-ink);
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.3;
}

.home-main-cats .main-cat-block:hover .main-cat-name a {
	color: var(--c-brand-600);
}

/*--------------------------------------------------------------
16. Responsive
--------------------------------------------------------------*/
@media (max-width: 1200px) {
	.home-trending-venues .featured-item {
		flex-basis: calc((100% - 48px) / 3);
	}
}

@media (max-width: 992px) {
	.content-col {
		float: none;
		width: 100%;
	}

	.sidebar {
		float: none;
		width: 100%;
	}

	.map-wrapper {
		width: 100%;
	}

	/* neutralize jquery.sticky inline position:fixed on small screens */
	#sticker {
		position: static !important;
		top: 0 !important;
	}
}

@media (max-width: 768px) {
	.tpl-index .header {
		min-height: 480px;
	}

	.slogan {
		padding-top: var(--sp-6);
	}

	.home-trending-venues .featured-item {
		flex-basis: calc((100% - 24px) / 2);
	}

	.home-blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 576px) {
	.home-trending-venues .featured-item {
		flex-basis: 100%;
	}

	/* auto-fill would collapse to one column on phones */
	.home-main-cats {
		grid-template-columns: repeat(2, 1fr);
	}

	.home-blog-grid {
		grid-template-columns: 1fr;
	}
}

/*--------------------------------------------------------------
9. Listings & search
--------------------------------------------------------------*/
.list-items .item {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	box-shadow: var(--sh-1);
	margin-bottom: var(--sp-4);
	padding: var(--sp-4);
	transition: transform var(--t-base), box-shadow var(--t-base);
}

.list-items .item:hover {
	box-shadow: var(--sh-2);
	transform: translateY(-2px);
}

.item-pic {
	margin-right: var(--sp-4);
	width: 96px;
}

.item-pic img {
	aspect-ratio: 1;
	border-radius: var(--r-sm);
	max-width: 96px;
	object-fit: cover;
}

.item-title-row h2 a {
	color: var(--c-ink);
}

.item-title-row h2 a:hover {
	color: var(--c-brand-600);
}

.item-counter {
	background: var(--grad-cta);
	height: 26px;
	width: 26px;
}

.results-count {
	background-color: rgba(255, 99, 0, .12);
	border-radius: var(--r-pill);
	color: var(--c-brand-700);
	padding: 4px 12px;
}

.breadcrumbs,
.breadcrumbs a:link,
.breadcrumbs a:visited {
	color: var(--c-muted);
	font-size: 1.4rem;
}

.breadcrumbs a:hover {
	color: var(--c-brand-600);
}

.subcats .btn {
	border-radius: var(--r-pill);
	margin: 0 8px 8px 0;
}

.subcats .btn-default,
.subcats .btn-default:hover {
	background-color: var(--c-surface);
	border: 1px solid var(--c-border-strong);
	color: var(--c-text);
}

.subcats .btn-default:hover {
	border-color: var(--c-brand-400);
	color: var(--c-brand-600);
}

.pagination > li > a,
.pagination > li > span {
	background-color: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-sm);
	color: var(--c-ink);
	padding: 8px 14px;
}

.pagination > li > a:hover {
	border-color: var(--c-brand-400);
	color: var(--c-brand-600);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
	background: var(--grad-cta);
	border: 0;
	color: #fff;
}

/*--------------------------------------------------------------
10. Place detail
--------------------------------------------------------------*/
h1.place-title {
	font-size: 3.6rem;
}

.info-block {
	border-bottom: 1px solid var(--c-border);
	padding: var(--sp-3) 0;
}

.info-block:empty {
	display: none !important;
}

.info-block .block:last-child {
	margin-bottom: 0;
}

.place-details-left .info-block:last-of-type,
.place-details-right .info-block:last-of-type {
	border-bottom: none;
}

.place-details-left .info-block h3,
.place-details-right .info-block h3 {
	font-size: 1.6rem;
	letter-spacing: 0;
	margin-bottom: var(--sp-1);
	text-transform: uppercase;
}

/* place detail page hero text contrast */
.tpl-place .breadcrumbs,
.tpl-place .breadcrumbs a,
.tpl-place .breadcrumbs a:link,
.tpl-place .breadcrumbs a:visited {
	color: rgba(255, 255, 255, 0.92) !important;
}

.tpl-place .breadcrumbs a:hover {
	color: #ffffff !important;
	text-decoration: underline;
}

.tpl-place .all-cats-line,
.tpl-place .all-cats-line a,
.tpl-place .all-cats-line a:link,
.tpl-place .all-cats-line a:visited {
	color: rgba(255, 255, 255, 0.95) !important;
	font-weight: 500;
}

.tpl-place .all-cats-line a:hover {
	color: #ffffff !important;
	text-decoration: underline;
}

.map-wrapper {
	border: 0;
	border-radius: var(--r-md);
	box-shadow: var(--sh-1);
	overflow: hidden;
}

.place-thumb {
	border-radius: var(--r-sm);
	overflow: hidden;
	transition: transform var(--t-base);
}

.place-thumb:hover {
	transform: scale(1.03);
}

.tpl-place .review-item {
	background: var(--c-surface-2);
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	padding: var(--sp-4);
}

/*--------------------------------------------------------------
11. All categories (migrated from tpl_all-categories inline style)
--------------------------------------------------------------*/
[class^="favzz-"]:before,
[class*=" favzz-"]:before,
[class^="favzz-"]:after,
[class*=" favzz-"]:after {
	font-size: 24px;
}

.main-categories .block {
	color: var(--c-muted);
	font-size: 1.5rem;
	margin-bottom: var(--sp-5);
}

/* grid instead of column masonry: every row stretches its cards
   to the same height, so column bottoms never dangle */
ul.cat-main-parent {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: repeat(3, 1fr);
	margin-bottom: 0;
	padding-left: 0;
}

.cat-tree {
	list-style-type: none;
}

.cat-tree a {
	color: var(--c-ink);
	text-decoration: none;
}

.cat-tree a:hover {
	color: var(--c-brand-600);
}

/* top-level category = card, subcategories = chips inside it */
.cat-main-parent > li {
	background: var(--c-surface-2);
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	margin-bottom: 0;
	padding: var(--sp-4);
	transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}

.cat-main-parent > li:hover {
	border-color: var(--c-brand-400);
	box-shadow: var(--sh-1);
	transform: translateY(-2px);
}

.cat-main-parent > li > a {
	align-items: center;
	display: flex;
	font-size: 1.6rem;
	font-weight: 700;
	gap: var(--sp-2);
}

.cat-main-parent > li > a > [class^="favzz-"]:before,
.cat-main-parent > li > a > [class*=" favzz-"]:before {
	color: var(--c-brand-500);
	font-size: 2.2rem;
}

.cat-count {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-pill);
	color: var(--c-muted);
	font-size: 1.2rem;
	font-weight: 600;
	margin-left: auto;
	padding: 2px 10px;
}

.cat-main-parent > li > ul.cat-tree {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: var(--sp-3) 0 0;
	padding-left: 0;
}

.cat-main-parent > li > ul.cat-tree > li > a {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-pill);
	color: var(--c-text);
	display: inline-block;
	font-size: 1.3rem;
	font-weight: 500;
	padding: 4px 12px;
	transition: border-color var(--t-fast), color var(--t-fast), background-color var(--t-fast);
}

.cat-main-parent > li > ul.cat-tree > li > a:hover {
	background-color: var(--c-surface);
	border-color: var(--c-brand-400);
	color: var(--c-brand-600);
}

/* "view all" chip: shown when a main category has more subcategories
   than fit in the clamp; clicking it opens the full category page */
.cat-main-parent > li > ul.cat-tree > li.cat-more > a {
	background-color: var(--c-brand-50);
	border-color: var(--c-brand-400);
	color: var(--c-brand-600);
	font-weight: 700;
}

.cat-main-parent > li > ul.cat-tree > li.cat-more > a:hover {
	background-image: var(--grad-cta);
	border-color: transparent;
	color: #fff;
}

/* deeper nesting falls back to a plain indented list */
.cat-tree ul.cat-tree {
	display: block;
	margin-top: var(--sp-2);
	padding-left: var(--sp-3);
}

.cat-tree ul.cat-tree a {
	font-size: 1.3rem;
}

@media only screen and (max-width: 992px) {
	ul.cat-main-parent {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media only screen and (max-width: 600px) {
	ul.cat-main-parent {
		grid-template-columns: 1fr;
	}
}

/*--------------------------------------------------------------
12. Blog
--------------------------------------------------------------*/
.blog-list-item {
	border-bottom: 1px solid var(--c-border);
	display: flex;
	gap: var(--sp-5);
	align-items: flex-start;
	padding: var(--sp-5) 0;
}

.blog-list-item .blog-item-pic {
	border-radius: var(--r-md);
	flex: 0 0 360px;
	float: none;
	margin-right: 0;
	overflow: hidden;
}

.blog-list-item .blog-item-pic img {
	aspect-ratio: 16 / 10;
	height: 225px;
	object-fit: cover;
	transition: transform var(--t-base);
	width: 100%;
}

.blog-list-item:hover .blog-item-pic img {
	transform: scale(1.05);
}

.blog-list-item .blog-item-body {
	flex: 1;
	min-width: 0;
}

.blog-list-item .blog-item-body h2 {
	font-size: 2.4rem;
	line-height: 1.3;
	margin-top: 0;
	margin-bottom: var(--sp-2);
}

.blog-list-item .blog-item-body h2 a {
	color: var(--c-ink);
}

.blog-list-item .blog-item-body h2 a:hover {
	color: var(--c-brand-600);
}

.blog-list-item .blog-item-body p {
	font-size: 1.5rem;
	line-height: 1.6;
	color: var(--c-muted);
	margin-bottom: var(--sp-3);
}

.blog-item-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: var(--sp-2);
}

.blog-item-date {
	color: var(--c-muted);
	font-size: 1.3rem;
	letter-spacing: .02em;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 0;
	text-transform: uppercase;
}

.blog-item-views {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #64748b;
	background: #f1f5f9;
	padding: 2px 10px;
	border-radius: 12px;
	font-size: 1.2rem;
	font-weight: 500;
}

.blog-item-views i {
	color: #3b82f6;
	font-size: 1.2rem;
}

.blog-read-more {
	color: var(--c-brand-600);
	font-size: 1.4rem;
	font-weight: 600;
}

@media (max-width: 768px) {
	.blog-list-item {
		flex-direction: column;
	}
	.blog-list-item .blog-item-pic {
		flex: none;
		width: 100%;
	}
	.blog-list-item .blog-item-pic img {
		height: 220px;
	}
}

.blog-post h1 {
	font-size: 4.2rem;
}

.blog-post .blog-post-cover {
	border-radius: var(--r-lg);
	box-shadow: var(--sh-2);
}

.blog-post,
.blog-contents {
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.blog-contents {
	font-size: 1.7rem;
	line-height: 1.8;
	max-width: 100%;
	width: 100%;
}

.blog-contents img,
.blog-contents iframe,
.blog-contents video {
	height: auto;
	max-width: 100% !important;
}

.blog-contents table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

.blog-contents pre,
.blog-contents code {
	white-space: pre-wrap;
	word-break: break-all;
}

.blog-contents h2,
.blog-contents h3 {
	margin-top: var(--sp-6);
}

/*--------------------------------------------------------------
13. User/auth chrome
--------------------------------------------------------------*/
.form-block,
.msg-block {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-1);
	padding: var(--sp-6);
}

.tpl-login h1,
.tpl-sign-up h1,
.tpl-password-request h1 {
	font-size: 3rem;
	margin-bottom: var(--sp-4);
	text-align: center;
}

.tpl-login .wrapper,
.tpl-sign-up .wrapper,
.tpl-password-request .wrapper {
	margin-top: var(--sp-7);
}

label {
	color: var(--c-text);
	font-weight: 600;
}

.main-container {
	border-radius: var(--r-md);
}

/* the legacy two-column split (form left / social right) is gone */
.login-form {
	border-right: 0;
	float: none;
	padding-right: 0;
	width: 100%;
}

.form-block .form-row {
	margin-bottom: var(--sp-3);
}

.form-block input[type="text"],
.form-block input[type="password"],
.form-block input[type="email"] {
	width: 100%;
}

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

.login-form .form-row a {
	display: block;
	margin-top: var(--sp-2);
	text-align: center;
}

.auth-alt {
	color: var(--c-muted);
	font-size: 1.4rem;
	margin-top: var(--sp-4);
	text-align: center;
}

.alert-bubble {
	background: var(--c-danger);
	border-radius: var(--r-md);
	font-size: 1.3rem;
	margin: var(--sp-5) 0 0;
	padding: 8px 12px;
}

.tpl-sign-up .msg {
	margin: var(--sp-4) auto 0;
	width: 100%;
}

/* form left (col-md-4), explanatory aside right (col-md-8) */
.auth-split {
	margin-top: var(--sp-5);
}

.auth-aside {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-1);
	height: 100%;
	padding: var(--sp-6);
}

.auth-aside h2 {
	font-size: 2.2rem;
	margin-bottom: var(--sp-3);
}

.auth-aside p {
	color: var(--c-text);
	font-size: 1.5rem;
	margin-bottom: var(--sp-4);
}

.auth-aside ul {
	list-style: none;
	padding-left: 0;
}

.auth-aside li {
	color: var(--c-text);
	font-size: 1.4rem;
	margin-bottom: var(--sp-3);
	padding-left: 28px;
	position: relative;
}

.auth-aside li:before {
	color: var(--c-brand-500);
	content: "\f00c";
	font-family: FontAwesome;
	left: 0;
	position: absolute;
}

/* ---- user panel chrome (sidebar + page head) ---- */
.menu-box ul {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	box-shadow: var(--sh-1);
	padding: var(--sp-2);
}

.menu-box a {
	background-color: transparent;
	border-radius: var(--r-sm);
	color: var(--c-text);
	font-weight: 600;
	margin-bottom: 2px;
	padding: 10px 12px;
	transition: background-color var(--t-fast) ease, color var(--t-fast) ease;
}

.menu-box a:hover {
	background-color: var(--c-bg);
	color: var(--c-ink);
}

.menu-box a.active {
	background: var(--grad-cta);
	color: #fff;
}

.menu-box a i {
	margin-right: 6px;
	text-align: center;
	width: 18px;
}

.main-container {
	border: 1px solid var(--c-border);
	box-shadow: var(--sh-1);
}

.panel-head {
	align-items: center;
	display: flex;
	gap: var(--sp-3);
	justify-content: space-between;
	padding: var(--sp-5) var(--sp-5) 0;
}

.panel-head h2 {
	border-bottom: 0;
	font-size: 2.6rem;
	letter-spacing: -0.02em;
	margin: 0;
	padding: 0;
}

.panel-head-note {
	color: var(--c-muted);
	font-size: 1.4rem;
	font-weight: 500;
	letter-spacing: 0;
}

.panel-head-note a {
	color: var(--c-link);
}

/* ---- my-profile: avatar card + form grid ---- */
.profile-grid {
	display: grid;
	gap: var(--sp-6);
	grid-template-columns: 220px 1fr;
}

.profile-side {
	align-self: start;
	background: var(--c-surface-2);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	padding: var(--sp-5);
	text-align: center;
}

.tpl-my-profile #profile-pic {
	float: none;
	margin: 0 auto var(--sp-4);
	width: 150px;
}

.tpl-my-profile #profile-pic .dummy,
.tpl-my-profile #profile-pic img {
	border-radius: 50%;
	box-shadow: 0 0 0 4px var(--c-brand-50), 0 0 0 5px var(--c-brand-400);
}

.tpl-my-profile .container-img {
	border-radius: 50%;
}

.tpl-my-profile .profile-pic-controls {
	display: flex;
	flex-direction: column;
	float: none;
	gap: var(--sp-2);
}

.profile-pic-controls .btn {
	width: 100%;
}

#upload-failed {
	color: var(--c-danger);
	font-size: 1.2rem;
	margin-top: var(--sp-2);
}

.profile-form .field {
	margin-bottom: var(--sp-4);
}

.profile-form .field > label {
	display: block;
	font-size: 1.3rem;
	font-weight: 700;
	margin-bottom: var(--sp-2);
}

.field-row-2 {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: 1fr 1fr;
}

.profile-form input[type="text"] {
	width: 100%;
}

.radio-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

.radio-pills label {
	cursor: pointer;
	margin: 0;
	position: relative;
}

.radio-pills input {
	height: 1px;
	left: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	width: 1px;
}

.radio-pills span {
	border: 1px solid var(--c-border-strong);
	border-radius: var(--r-pill);
	color: var(--c-text);
	display: inline-block;
	font-weight: 600;
	padding: 8px 18px;
	transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease,
		color var(--t-fast) ease;
}

.radio-pills label:hover span {
	border-color: var(--c-brand-400);
	color: var(--c-brand-600);
}

.radio-pills label:has(input:checked) span {
	background: var(--grad-cta);
	border-color: transparent;
	color: #fff;
}

.radio-pills input:focus-visible + span {
	box-shadow: var(--ring);
}

.bday-row {
	display: flex;
	gap: var(--sp-2);
}

.bday-row select {
	flex: 1 1 80px;
	min-width: 0;
	padding: 10px 14px;
	width: auto;
}

.submit-row {
	margin-top: var(--sp-5);
}

.submit-row .btn {
	border-radius: var(--r-pill);
	padding: 12px 32px;
}

@media (max-width: 768px) {
	.field-row-2,
	.profile-grid {
		grid-template-columns: 1fr;
	}

	.panel-head {
		flex-wrap: wrap;
	}
}

/*--------------------------------------------------------------
14. Category/search pages: blog carousel + SEO text
--------------------------------------------------------------*/
.blog-carousel-block {
	margin: var(--sp-6) 0;
}

.blog-carousel {
	align-items: center;
	display: flex;
	gap: var(--sp-2);
}

.blog-carousel-track {
	display: flex;
	flex: 1;
	gap: var(--sp-3);
	min-width: 0;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.blog-carousel-track::-webkit-scrollbar {
	display: none;
}

.blog-carousel-track .home-blog-card {
	flex: 0 0 calc(33.333% - 16px);
	margin-bottom: 0;
	scroll-snap-align: start;
}

/* larger cards than the homepage grid: taller image, bigger type */
.blog-carousel-track .home-blog-card img {
	height: 220px;
}

.blog-carousel-track .home-blog-card h3 {
	font-size: 1.8rem;
	margin: 14px 16px 6px;
}

.blog-carousel-track .home-blog-card p {
	font-size: 1.4rem;
	line-height: 1.5;
	margin: 0 16px 12px;
}

.blog-carousel-track .home-blog-card .home-blog-views {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 1.2rem;
	color: #64748b;
	margin: 0 16px 16px;
	background: #f1f5f9;
	padding: 2px 8px;
	border-radius: 10px;
	font-weight: 500;
}

.blog-carousel-track .home-blog-card .home-blog-views i {
	color: #3b82f6;
}

.blog-carousel-arrow {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: 50%;
	color: var(--c-text);
	cursor: pointer;
	flex: 0 0 40px;
	font-size: 1.4rem;
	height: 40px;
	line-height: 1;
	padding: 0;
	transition: border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
	width: 40px;
}

.blog-carousel-arrow:hover {
	border-color: var(--c-brand-400);
	box-shadow: var(--sh-1);
	color: var(--c-brand-600);
}

.seo-text {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	margin: var(--sp-6) 0;
	padding: var(--sp-5) var(--sp-6);
}

.seo-text h2 {
	color: var(--c-ink);
	font-size: 2.2rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0 0 var(--sp-3);
}

.seo-text p {
	color: var(--c-text);
	font-size: 1.45rem;
	line-height: 1.75;
	margin: 0 0 var(--sp-3);
	max-width: 92ch;
}

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

@media (max-width: 768px) {
	.blog-carousel-track .home-blog-card {
		flex: 0 0 calc(50% - 12px);
	}
}

@media (max-width: 576px) {
	.blog-carousel-arrow {
		display: none;
	}

	.blog-carousel-track .home-blog-card {
		flex: 0 0 85%;
	}
}

/*--------------------------------------------------------------
15. VIP listings: highlighted card + badge
--------------------------------------------------------------*/
/* overrides the legacy .featured-li flat yellow (styles.css) */
.list-items .item.featured-li {
	background-color: var(--c-brand-50);
	border-color: var(--c-brand-400);
	box-shadow: 0 6px 18px rgba(255, 99, 0, .12);
}

.list-items .item.featured-li:hover {
	box-shadow: 0 10px 24px rgba(255, 99, 0, .18);
}

.vip-badge {
	background: var(--grad-cta);
	border-radius: var(--r-pill);
	color: #fff;
	display: inline-block;
	font-size: 1.1rem;
	font-weight: 800;
	letter-spacing: .08em;
	line-height: 1;
	margin-right: 6px;
	padding: 5px 10px;
	text-transform: uppercase;
	vertical-align: middle;
}

/* corner overlay variant used on homepage featured cards */
.featured-item-pic {
	position: relative;
}

.vip-badge-corner {
	box-shadow: var(--sh-2);
	font-size: 1.2rem;
	margin-right: 0;
	padding: 6px 12px;
	position: absolute;
	right: 10px;
	top: 10px;
	z-index: 2;
}

/* ---- User panel: my-places cards ---- */
.place-card {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-1);
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: 112px 1fr;
	margin-bottom: var(--sp-4);
	padding: var(--sp-4);
	transition: box-shadow var(--t-base), transform var(--t-base);
}

.place-card:hover {
	box-shadow: var(--sh-2);
	transform: translateY(-2px);
}

.place-card-pic img {
	aspect-ratio: 1 / 1;
	border-radius: var(--r-md);
	display: block;
	object-fit: cover;
	width: 100%;
}

.place-card-head {
	align-items: flex-start;
	display: flex;
	gap: var(--sp-2);
	justify-content: space-between;
}

.place-card-head .place-name a {
	color: var(--c-ink);
	font-size: 1.8rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.place-card-head .place-name a:hover {
	color: var(--c-brand-600);
}

.tpl-my-places .user-item-pubdate {
	color: var(--c-muted);
	font-size: 1.25rem;
	font-style: normal;
	margin: 2px 0 var(--sp-2);
}

.place-card-desc {
	color: var(--c-text);
	font-size: 1.4rem;
	line-height: 1.65;
	margin-bottom: var(--sp-3);
}

.place-card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

.place-card-actions .btn {
	border-radius: var(--r-pill);
}

.place-card-actions .place-remove-trigger {
	color: var(--c-danger);
}

.place-card-actions .place-remove-trigger:hover {
	border-color: var(--c-danger);
	color: var(--c-danger);
}

.tpl-my-places .place-card .alert {
	margin-bottom: 0;
}

.tpl-my-places .empty-state {
	background: var(--c-surface);
	border: 1px dashed var(--c-border-strong);
	border-radius: var(--r-lg);
	color: var(--c-muted);
	font-size: 1.5rem;
	padding: var(--sp-8) var(--sp-5);
	text-align: center;
}

.tpl-my-places .empty-state i {
	display: block;
	font-size: 3.2rem;
	margin-bottom: var(--sp-3);
	opacity: 0.5;
}

@media (max-width: 768px) {
	.place-card {
		gap: var(--sp-3);
		grid-template-columns: 88px 1fr;
		padding: var(--sp-3);
	}
}

/* ============================================================
   16. Place form (user/edit-place + user/add-place)
   ============================================================ */
.tpl-edit-place .full-block,
.tpl-add-place .full-block {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-1);
	margin-bottom: var(--sp-6);
	padding: var(--sp-6);
}

.tpl-edit-place .full-block > h1,
.tpl-add-place .full-block > h1 {
	color: var(--c-ink);
	font-size: 2.8rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0;
}

.tpl-edit-place .sub-header,
.tpl-add-place .sub-header {
	color: var(--c-muted);
	font-size: 1.5rem;
	margin: var(--sp-1) 0 0;
}

/* section headings with brand accent bar */
.tpl-edit-place .full-block h3,
.tpl-add-place .full-block h3 {
	color: var(--c-ink);
	font-size: 1.9rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin: var(--sp-6) 0 var(--sp-4);
	padding: 0 0 0 14px;
	position: relative;
}

.tpl-edit-place .full-block h3:before,
.tpl-add-place .full-block h3:before {
	background: var(--grad-cta);
	border-radius: var(--r-xs);
	content: "";
	height: 1.1em;
	left: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
}

.tpl-edit-place .form-wrapper,
.tpl-add-place .form-wrapper {
	padding: var(--sp-4) 0 0;
}

/* map */
.tpl-edit-place #map-wrapper,
.tpl-add-place #map-wrapper {
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-1);
	height: 380px;
	margin-bottom: var(--sp-5);
	overflow: hidden;
	width: 100%;
}

/* rows: legacy floats -> flex */
.tpl-edit-place .form-row,
.tpl-add-place .form-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	margin-bottom: var(--sp-4);
	width: 100%;
}

.tpl-edit-place .form-row-half,
.tpl-add-place .form-row-half {
	flex: 1 1 calc(50% - var(--sp-4));
	float: none;
	margin: 0;
	min-width: 0;
	width: auto;
}

.tpl-edit-place .form-row-full,
.tpl-add-place .form-row-full {
	flex: 1 1 100%;
	min-width: 0;
}

/* labels */
.tpl-edit-place .form-row label,
.tpl-add-place .form-row label {
	color: var(--c-text);
	display: block;
	font-size: 1.3rem;
	font-weight: 700;
	margin-bottom: var(--sp-1);
}

.tpl-edit-place a.the-tooltip,
.tpl-add-place a.the-tooltip {
	color: var(--c-brand-500);
	margin-left: 4px;
}

.tpl-edit-place a.the-tooltip:hover,
.tpl-add-place a.the-tooltip:hover {
	color: var(--c-brand-600);
}

/* fields take full width of their column */
.tpl-edit-place .form-row input[type="text"],
.tpl-edit-place .form-row input[type="tel"],
.tpl-edit-place .form-row input[type="url"],
.tpl-edit-place .form-row input[type="email"],
.tpl-edit-place .form-row input[type="number"],
.tpl-edit-place .form-row textarea,
.tpl-add-place .form-row input[type="text"],
.tpl-add-place .form-row input[type="tel"],
.tpl-add-place .form-row input[type="url"],
.tpl-add-place .form-row input[type="email"],
.tpl-add-place .form-row input[type="number"],
.tpl-add-place .form-row textarea {
	width: 100%;
}

.tpl-edit-place textarea#description,
.tpl-add-place textarea#description {
	min-height: 140px;
	resize: vertical;
}

/* select2 (city + category) */
.select2-container {
	width: 100% !important;
}

.select2-container--default .select2-selection--single {
	border: 1px solid var(--c-border);
	border-radius: var(--r-sm);
	height: 44px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--c-text);
	font-weight: 600;
	line-height: 42px;
	padding-left: 14px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 42px;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--c-brand-400);
	box-shadow: var(--ring);
}

.select2-dropdown {
	border: 1px solid var(--c-border);
	border-radius: var(--r-sm);
	box-shadow: var(--sh-2);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--grad-cta);
}

/* business hours */
.tpl-edit-place #selected-hours,
.tpl-add-place #selected-hours {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	margin-bottom: var(--sp-4);
}

.tpl-edit-place .hours-row,
.tpl-add-place .hours-row {
	align-items: center;
	background: var(--c-surface-2);
	border: 1px solid var(--c-border);
	border-radius: var(--r-sm);
	display: flex;
	font-size: 1.4rem;
	gap: var(--sp-3);
	padding: 9px 14px;
}

.tpl-edit-place .hours-row .weekday,
.tpl-add-place .hours-row .weekday {
	color: var(--c-ink);
	min-width: 110px;
}

.tpl-edit-place .hours-row .remove-hours,
.tpl-add-place .hours-row .remove-hours {
	align-items: center;
	border-radius: 50%;
	color: var(--c-muted);
	cursor: pointer;
	display: flex;
	height: 24px;
	justify-content: center;
	margin-left: auto;
	transition: all var(--t-fast);
	width: 24px;
}

.tpl-edit-place .hours-row .remove-hours:hover,
.tpl-add-place .hours-row .remove-hours:hover {
	background: #fdecea;
	color: var(--c-danger);
}

.tpl-edit-place .hours-control,
.tpl-add-place .hours-control {
	flex: 0 1 130px;
	height: auto;
	min-width: 0;
	padding: 9px 12px;
	width: 130px;
}

.tpl-edit-place .btn-hours-control,
.tpl-add-place .btn-hours-control {
	background: var(--c-surface);
	border: 1px solid var(--c-border-strong);
	border-radius: var(--r-pill);
	color: var(--c-ink);
	cursor: pointer;
	flex: 0 0 auto;
	font-family: inherit;
	font-size: 1.4rem;
	font-weight: 700;
	padding: 9px 20px;
	transition: all var(--t-fast);
}

.tpl-edit-place .btn-hours-control:hover,
.tpl-add-place .btn-hours-control:hover {
	background: var(--c-brand-50);
	border-color: var(--c-brand-400);
	color: var(--c-brand-600);
}

/* photos */
.tpl-edit-place #uploaded,
.tpl-add-place #uploaded {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
	width: 100%;
}

.tpl-edit-place .thumbs,
.tpl-edit-place .thumbs-preloader,
.tpl-add-place .thumbs,
.tpl-add-place .thumbs-preloader {
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	box-shadow: var(--sh-1);
	display: block;
	margin: 0;
	overflow: hidden;
	position: relative;
}

.tpl-edit-place .thumbs img,
.tpl-add-place .thumbs img {
	aspect-ratio: 1 / 1;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.tpl-edit-place .btn-delete-thumb,
.tpl-add-place .btn-delete-thumb {
	background: var(--c-danger);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	font-size: 1.4rem;
	height: 26px;
	line-height: 26px;
	position: absolute;
	right: 6px;
	text-align: center;
	top: 6px;
	transition: transform var(--t-fast);
	width: 26px;
}

.tpl-edit-place .btn-delete-thumb:hover,
.tpl-add-place .btn-delete-thumb:hover {
	transform: scale(1.12);
}

.tpl-edit-place #upload-button,
.tpl-add-place #upload-button {
	border: 1px dashed var(--c-border-strong);
	border-radius: var(--r-pill);
	font-weight: 600;
}

.tpl-edit-place #upload-button:hover,
.tpl-add-place #upload-button:hover {
	background: var(--c-brand-50);
	border-color: var(--c-brand-400);
	color: var(--c-brand-600);
}

.tpl-edit-place #upload-button.disabled,
.tpl-add-place #upload-button.disabled {
	opacity: 0.5;
	pointer-events: none;
}

/* custom fields plugin (its styles.css is injected after modern.css,
   so beat #custom-fields rules with body-class + id specificity) */
.tpl-edit-place #custom-fields ul,
.tpl-add-place #custom-fields ul {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: 1fr 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tpl-edit-place #custom-fields li.block,
.tpl-add-place #custom-fields li.block {
	background: var(--c-surface-2);
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	font-size: 1.4rem;
	padding: var(--sp-4);
}

.tpl-edit-place #custom-fields li.block > label:first-child,
.tpl-add-place #custom-fields li.block > label:first-child {
	color: var(--c-text);
	display: block;
	font-size: 1.3rem;
	font-weight: 700;
	margin: 0 0 var(--sp-2);
}

.tpl-edit-place #custom-fields li.block input[type="text"],
.tpl-edit-place #custom-fields li.block textarea,
.tpl-edit-place #custom-fields li.block select,
.tpl-add-place #custom-fields li.block input[type="text"],
.tpl-add-place #custom-fields li.block textarea,
.tpl-add-place #custom-fields li.block select {
	width: 100%;
}

.tpl-edit-place #custom-fields li.block label input[type="radio"],
.tpl-edit-place #custom-fields li.block label input[type="checkbox"],
.tpl-add-place #custom-fields li.block label input[type="radio"],
.tpl-add-place #custom-fields li.block label input[type="checkbox"] {
	margin-right: 6px;
}

/* add-place inline validation bubbles */
.tpl-add-place .alert-bubble {
	background: #fdecea;
	border: 1px solid var(--c-danger);
	border-radius: var(--r-sm);
	color: var(--c-danger);
	font-size: 1.3rem;
	font-weight: 600;
	margin: var(--sp-2) 0 0;
	padding: 8px 12px;
}

/* submit */
.tpl-edit-place .submit-row div,
.tpl-add-place .submit-row div {
	padding: var(--sp-6) 0 var(--sp-2);
	text-align: center;
	width: 100%;
}

.tpl-edit-place .submit-row input[type="submit"],
.tpl-add-place .submit-row input[type="submit"] {
	border-radius: var(--r-pill);
	font-size: 1.5rem;
	font-weight: 700;
	padding: 12px 48px;
}

@media (max-width: 820px) {
	.tpl-edit-place .form-row-half,
	.tpl-add-place .form-row-half {
		flex: 1 1 100%;
	}

	.tpl-edit-place #custom-fields ul,
	.tpl-add-place #custom-fields ul {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 580px) {
	.tpl-edit-place .full-block,
	.tpl-add-place .full-block {
		padding: var(--sp-4);
	}

	.tpl-edit-place #map-wrapper,
	.tpl-add-place #map-wrapper {
		height: 280px;
	}

	.tpl-edit-place .hours-control,
	.tpl-add-place .hours-control {
		flex: 1 1 calc(50% - var(--sp-2));
		width: auto;
	}

	.tpl-edit-place .btn-hours-control,
	.tpl-add-place .btn-hours-control {
		width: 100%;
	}
}

/* ============================================================
   17. Plan selection (user/select-plan)
   ============================================================ */
.tpl-select-plan .full-block {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-1);
	margin-bottom: var(--sp-6);
	padding: var(--sp-6);
}

.tpl-select-plan .full-block > h1 {
	color: var(--c-ink);
	font-size: 2.8rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0;
	text-align: center;
}

.plans-grid {
	display: grid;
	gap: var(--sp-5);
	grid-template-columns: repeat(auto-fit, minmax(260px, 380px));
	justify-content: center;
	margin-top: var(--sp-6);
}

.plan-card {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-xl);
	box-shadow: var(--sh-1);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
	transition: box-shadow var(--t-base), transform var(--t-base);
}

.plan-card:hover {
	box-shadow: var(--sh-2);
	transform: translateY(-4px);
}

.plan-card-featured {
	border-color: var(--c-brand-400);
	box-shadow: var(--sh-brand);
}

.plan-card-featured:before {
	background: var(--grad-cta);
	content: "";
	height: 4px;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.plan-card-head h2 {
	color: var(--c-ink);
	font-size: 1.9rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin: 0;
	padding: var(--sp-5) var(--sp-5) 0;
	text-align: center;
}

.plan-card-price {
	padding: var(--sp-4) var(--sp-5) var(--sp-5);
	text-align: center;
}

.plan-card-price strong {
	background: var(--grad-cta);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: 3.6rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.plan-card-features {
	border-top: 1px solid var(--c-border);
	flex: 1 1 auto;
	list-style: none;
	margin: 0;
	padding: var(--sp-3) var(--sp-5);
}

.plan-card-features li {
	align-items: baseline;
	border-bottom: 1px solid var(--c-border);
	color: var(--c-text);
	display: flex;
	font-size: 1.4rem;
	gap: var(--sp-2);
	line-height: 1.5;
	padding: 10px 0;
}

.plan-card-features li:last-child {
	border-bottom: 0;
}

.plan-card-features li .fa {
	flex: 0 0 auto;
	text-align: center;
	width: 16px;
}

.plan-card-features .fa-check {
	color: var(--c-success);
}

.plan-card-features .fa-times {
	color: var(--c-muted);
	opacity: 0.7;
}

.plan-card-features li:has(.fa-times) {
	color: var(--c-muted);
}

.plan-card-cta {
	margin-top: auto;
	padding: var(--sp-4) var(--sp-5) var(--sp-5);
}

.plan-card-cta .btn {
	border-radius: var(--r-pill);
	font-weight: 700;
	padding: 12px 24px;
}

.tpl-select-plan .empty-state {
	background: var(--c-surface);
	border: 1px dashed var(--c-border-strong);
	border-radius: var(--r-lg);
	color: var(--c-muted);
	font-size: 1.5rem;
	grid-column: 1 / -1;
	padding: var(--sp-8) var(--sp-5);
	text-align: center;
}

.tpl-select-plan .empty-state i {
	display: block;
	font-size: 3.2rem;
	margin-bottom: var(--sp-3);
	opacity: 0.5;
}

@media (max-width: 580px) {
	.tpl-select-plan .full-block {
		padding: var(--sp-4);
	}

	.plans-grid {
		grid-template-columns: 1fr;
	}
}

/* == END == */