/* ==========================================================================
   MAX Datori — style.css
   Web fonts are linked from includes/head.php (Open Sans 400/600/700, Merriweather 400/700).
   ========================================================================== */

/* --- Design tokens ------------------------------------------------------- */
:root {
	/* palette (unchanged brand colours) */
	--ink:            #231F20;
	--green:          #659943;
	--green-light:    #98D82D;
	--green-dark:     #538509;
	--green-accent:   #82BA41;
	--green-soft:     #8CC63F;
	--green-hover:    #749F38;
	--green-tint:     #eef3e8;
	--green-tint-2:   #dbe8cf;
	--sage:           #7a8a66;
	--line:           #e3e8dd;
	--sky:            #CDEBFA;
	--orange:         #E16E29;
	--error:          #DF2125;
	--whatsapp:       #4C9D7C;
	--messenger:      #3C76B0;
	--white:          #FFF;
	--gray-900:       #444;
	--gray-700:       #555;
	--gray-600:       #777;
	--gray-500:       #999;
	--gray-300:       #DADADA;
	--gray-200:       #DDD;
	--gray-100:       #EEE;

	/* typography */
	--font-body:      "Open Sans", "Segoe UI", Arial, sans-serif;
	--font-display:   "Merriweather", Georgia, serif;
	--text-sm:        14px;
	--text-base:      16px;
	--text-lg:        18px;
	--text-xl:        22px;
	--text-2xl:       28px;
	--text-3xl:       36px;
	--leading:        1.6;

	/* layout */
	--container:      1100px;
	--gutter:         16px;
	--space-1:        4px;
	--space-2:        8px;
	--space-3:        12px;
	--space-4:        16px;
	--space-5:        24px;
	--space-6:        32px;
	--space-7:        48px;
	--space-8:        64px;
	--radius-sm:      8px;
	--radius:         10px;
	--radius-lg:      14px;
	--shadow-sm:      0 1px 2px rgba(35, 31, 32, .06);
	--shadow-md:      0 8px 24px rgba(101, 153, 67, .18);
	--shadow-lg:      0 10px 28px rgba(0, 0, 0, .12);
	--transition:     .2s ease-out;
}

/* --- Base ---------------------------------------------------------------- */
* {
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important;
	outline: none !important;
}

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

body {
	background: var(--white);
	font: var(--text-base)/var(--leading) var(--font-body);
	color: var(--ink);
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
}

p, li {
	line-height: var(--leading);
}

h1, h2, h3, h4 {
	line-height: 1.25;
	margin: 0 0 var(--space-4);
	color: var(--ink);
}

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

ul {
	list-style: none;
	padding-left: 15px;
}

ul li {
	background: url(../img/abullet.png) no-repeat left 8px;
	background-size: 10px;
	padding-left: 15px;
	overflow: auto;
}

a {
	color: var(--green);
	text-decoration: none;
	transition: color var(--transition), background-color var(--transition), box-shadow var(--transition), border-color var(--transition);
}

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

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

a:active, a:focus {
	outline: none;
	border: none;
	-moz-outline-style: none;
}

.blue {
	font-weight: bold;
	color: var(--gray-900);
}

.green {
	font-weight: bold;
}

.seo, .stats {
	display: none;
	font-size: 10px;
	color: var(--gray-600);
	text-align: center;
}

.clear {
	clear: both;
}


.content {
	max-width: var(--container);
	position: relative;
	margin: 0 auto;
	padding: 0 var(--gutter);
}

#popup .content {
	padding: 0 var(--gutter);
}



/* ==========================================================================
   Header: e-mail | logo | phone, language switch underneath
   ========================================================================== */
.header .content {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-areas:
		"email logo phone"
		"langs langs langs";
	align-items: center;
	column-gap: var(--space-4);
	padding-top: var(--space-4);
	padding-bottom: var(--space-3);
}

.header .facebook,
.header .profile {
	display: grid;
	grid-template-columns: auto auto;
	grid-template-rows: auto auto;
	align-items: center;
	align-content: center;
	column-gap: var(--space-3);
	color: var(--ink);
	min-width: 0;
}

.header .facebook {
	grid-area: email;
	justify-self: start;
}

.header .profile {
	grid-area: phone;
	justify-self: end;
	text-align: right;
}

/* round icon (phone.png / email.png are 96px green circles) */
.header .facebook::before,
.header .profile::before {
	content: "";
	grid-row: 1 / span 2;
	width: 48px;
	height: 48px;
	background: url(../img/social/email.png) no-repeat center / 48px;
	transition: transform var(--transition), filter var(--transition);
}

.header .profile::before {
	grid-column: 2;
	background-image: url(../img/phone.png);
}

.header .profile span {
	grid-column: 1;
}

.header .facebook:hover::before,
.header .profile:hover::before {
	transform: scale(1.06);
	filter: brightness(108%);
}

.header .facebook span,
.header .profile span {
	display: block;
}

.header .sname {
	font-size: 13px;
	color: var(--gray-600);
	line-height: 1.2;
}

.header .name {
	font: 600 var(--text-lg)/1.25 var(--font-body);
	color: var(--ink);
	overflow-wrap: anywhere;
}

.header .profile .name {
	font-family: var(--font-display);
	font-weight: 400;
}

/* below 800px: icons + short caption only, like before */
@media (max-width: 799px) {
	.header .facebook,
	.header .profile {
		grid-template-columns: auto;
		row-gap: var(--space-1);
		text-align: center;
		justify-items: center;
	}

	.header .facebook::before,
	.header .profile::before {
		grid-row: 1;
		grid-column: 1;
	}

	.header .profile span {
		grid-column: 1;
	}

	.header .facebook .name,
	.header .profile .name {
		display: none;
	}

	.header .sname {
		font-size: 12px;
	}
}

.logo {
	grid-area: logo;
	justify-self: center;
	display: block;
	width: 140px;
	height: 88px;
	background: url(../img/logo.png) no-repeat center center / 140px;
	transition: filter var(--transition);
}

.logo:hover {
	filter: brightness(108%);
}

.langs {
	grid-area: langs;
	justify-self: center;
	display: flex;
	gap: var(--space-4);
	margin-top: var(--space-2);
}

.langs a {
	font-size: var(--text-sm);
	color: var(--gray-600);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 0 4px;
	border-bottom: 2px solid transparent;
}

.langs a::before {
	content: "";
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: no-repeat center / cover;
}

.langs .lv::before { background-image: url(../img/langs/lv.png); }
.langs .ru::before { background-image: url(../img/langs/ru.png); }
.langs .en::before { background-image: url(../img/langs/en.png); }
.langs .ee::before { background-image: url(../img/langs/ee.png); }

.langs a:hover {
	color: var(--ink);
}

.langs .active {
	color: var(--ink);
	border-bottom-color: var(--green);
}


/* ==========================================================================
   Sticky menu bar (#top): burger + anchors, search on /lcd/
   ========================================================================== */
#top {
	position: sticky;
	top: 0;
	width: 100%;
	z-index: 999;
	transition: box-shadow var(--transition);
}

#top.stuck {
	box-shadow: 0 4px 12px rgba(35, 31, 32, .18);
}

.menuBg {
	background: var(--green);
}

.menuBg .content {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 48px;
}

/* invisible spacer as wide as the burger, so whatever sits between them
   (menu anchors, /lcd/ search box) is centred on the page, not on the
   space right of the burger */
.menuBg .content::after {
	content: "";
	flex: 0 0 32px;
	order: 99;
}

/* on /lcd/ the clear button (32px + gap) already balances the burger */
.menuBg .content:has(.search)::after {
	display: none;
}

/* burger / cart toggle */
.sub, .cart {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-left: calc(-1 * var(--space-2));
	background: url(../img/subBg.png) no-repeat center / 18px;
	border-radius: var(--radius-sm);
	transition: background-color var(--transition);
}

.sub:hover, .cart:hover, .sub.open {
	background-color: rgba(255, 255, 255, .14);
}

.sub.open {
	background-image: url(../img/close.png);
}

a.cart {
	width: auto;
	min-width: 40px;
	padding: 0 10px 0 34px;
	background: url(../img/cart.png) no-repeat 10px center / 18px;
	color: var(--white);
	font-weight: 700;
	font-size: var(--text-sm);
}

a.cart span {
	margin-top: -2px;
}

/* dropdown with the list of services */
#sub {
	position: absolute;
	top: 100%;
	left: var(--gutter);
	width: 300px;
	max-width: calc(100vw - 2 * var(--gutter));
	margin: 0;
	padding: var(--space-2) 0;
	background: var(--white);
	border: 1px solid var(--line);
	border-top: none;
	border-radius: 0 0 var(--radius) var(--radius);
	box-shadow: var(--shadow-lg);
	z-index: 1000;
}

#sub a {
	color: var(--ink);
	font-size: 15px;
	background-position: 14px 13px;
	padding: 8px 16px 8px 36px;
	border-bottom: 1px solid var(--line);
}

#sub a:last-child {
	border-bottom: none;
}

#sub a:hover, #sub .active {
	background: var(--green-tint) url(../img/abullet.png) no-repeat 14px 13px / 10px;
	color: var(--green-dark);
}

/* main anchors */
.menu, .pmenu {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	gap: var(--space-2);
	padding: 0;
}

.menu a, .pmenu a {
	font-size: 15px;
	font-weight: 600;
	color: var(--white);
	text-shadow: none;
	display: inline-block;
	padding: 12px 14px 9px;
	border-bottom: 3px solid transparent;
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	white-space: nowrap;
	transition: background-color var(--transition), border-color var(--transition);
}

@media (max-width: 419px) {
	.menu a, .pmenu a {
		font-size: 14px;
		padding-left: 8px;
		padding-right: 8px;
	}
}

@media (min-width: 786px) {
	.menu a:hover, .pmenu a:hover {
		background-color: rgba(255, 255, 255, .12);
	}
}

.menu .active, .pmenu .active {
	border-bottom-color: var(--white);
}

/* /lcd/ search box lives in the bar instead of the anchors */
.search {
	flex: 1 1 auto;
	max-width: 520px;
	margin: 0 0 0 auto;
	padding: 8px 12px 8px 34px;
	background: var(--white) url(../img/icons/search.png) no-repeat 10px center / 16px;
	font: var(--text-sm) var(--font-body);
	color: var(--ink);
	border: 1px solid transparent;
	border-radius: 999px;
	transition: box-shadow var(--transition);
}

.search:focus {
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .35);
}

.sclear {
	flex: 0 0 auto;
	margin-right: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	transition: background-color var(--transition);
}

.sclear:hover {
	background-color: rgba(255, 255, 255, .14);
}

/* admin shortcut to the shop */
.lcd {
	flex: 0 0 auto;
	margin-left: auto;
	width: 40px;
	height: 40px;
	background: url(../img/icons/search.png) no-repeat center / 18px;
	border-radius: var(--radius-sm);
}

.lcd:hover {
	background-color: rgba(255, 255, 255, .14);
}


/* ==========================================================================
   Page sections: services slider (#news), about (#about), courier (#call)
   ========================================================================== */
.bg1, .bg2 {
	padding: var(--space-7) 0;
}

.bg2 {
	background-image: linear-gradient(to bottom, var(--sky), var(--white) 45%);
}

/* section titles (h1 on the page, h2 for sections, div.title in popups/banner) */
.content .title, .boxwrap .title, .footer .title, #popup .title {
	font-size: clamp(22px, 3.2vw, 28px);
	font-weight: 700;
	line-height: 1.25;
	text-transform: none;
	color: var(--ink);
	text-align: center;
	margin: 0 0 var(--space-5);
}

h1.title {
	font-size: clamp(26px, 4vw, 36px);
	letter-spacing: -.01em;
}

#new .content .title {
	max-width: 300px;
	font-size: var(--text-lg);
	color: inherit;
	margin: 0 auto;
}

/* admin edit / stats icons that sit inside titles */
.title a {
	display: inline-block;
	vertical-align: middle;
	margin: 0 0 0 var(--space-2);
}

.title a img {
	vertical-align: middle;
}

/* --- Services slider -------------------------------------------------- */
.boxwrap {
	height: auto;
	padding: var(--space-2) 0 var(--space-7);
}

/* let flexbox stretch all cards of a row to the tallest one */
.boxwrap .swiper-slide {
	height: auto;
}

.box {
	position: relative;
	z-index: 0;
	height: auto;
	padding: var(--space-4) var(--space-2) var(--space-3);
	font-weight: 600;
	text-align: center;
	transition: transform var(--transition);
}

/* card face drawn behind the slide so news.php markup stays untouched */
.box::before {
	content: "";
	position: absolute;
	inset: 0 6px;
	z-index: -1;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition);
}

.box:hover {
	transform: translateY(-3px);
}

.box:hover::before {
	box-shadow: var(--shadow-md);
}

.box .image, #new .image {
	background-position: center center;
	background-size: contain;
	display: block;
	width: 120px;
	height: 92px;
	margin: 0 auto var(--space-3);
}

.box .btitle {
	font-size: 15px;
	line-height: 1.35;
	width: auto;
	height: auto;
	margin: 0 auto;
	padding: 0 var(--space-2);
}

.box .btitle a {
	color: var(--ink);
	margin: 0;
}

.box .btitle a:hover, .box:hover .btitle .link {
	color: var(--green-dark);
}

.box .btitle .active {
	color: var(--green);
}

.box .btitle div {
	margin-top: var(--space-2);
}

.box .bdate, #new .bdate {
	font: 20px var(--font-display);
	color: var(--ink);
}

/* Swiper chrome: round arrows, green bullets */
.boxwrap .swiper-button-prev,
.boxwrap .swiper-button-next {
	width: 40px;
	height: 40px;
	margin-top: -38px;
	background: var(--white) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23659943' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / 20px;
	border: 1px solid var(--line);
	border-radius: 50%;
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition), border-color var(--transition);
}

.boxwrap .swiper-button-prev {
	transform: scaleX(-1);
	left: 0;
}

.boxwrap .swiper-button-next {
	right: 0;
}

.boxwrap .swiper-button-prev:hover,
.boxwrap .swiper-button-next:hover {
	border-color: var(--green);
	box-shadow: var(--shadow-md);
}

.boxwrap .swiper-button-disabled {
	opacity: .3;
}

.boxwrap .swiper-pagination-bullet {
	background: var(--green-dark);
}

.boxwrap .swiper-pagination-bullet-active {
	background: var(--green);
}

@media (max-width: 649px) {
	.boxwrap .swiper-button-prev,
	.boxwrap .swiper-button-next {
		display: none;
	}
}

/* --- About / service page text -------------------------------------- */
#about .about-body {
	display: grid;
	gap: var(--space-5) var(--space-6);
	align-items: start;
	max-width: 900px;
	margin: 0 auto;
}

#about .about-body--split {
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	max-width: none;
}

.bgimage, #preview img {
	display: block;
	background-repeat: no-repeat;
	background-size: contain;
	mix-blend-mode: multiply;
	width: 150px;
	margin: 0 auto var(--space-2);
	position: relative;
}

/* service pages: the section icon is a grid item, so centre it explicitly */
#about .about-body > .bgimage {
	justify-self: center;
	background-position: center;
}

#about .about-body > .bgimage img {
	max-height: 100px;
}

.about .bgimage {
	width: 100%;
	max-width: 420px;
	float: none;
	margin: 0 auto;
}

.bgimage img {
	width: 100%;
	visibility: hidden;
}

#new .image, #about .image {
	width: 300px;
	height: 300px;
	margin: 10px auto;
}

.about-text {
	min-width: 0;
}

.about-text .title {
	text-align: left;
	font-size: var(--text-xl);
	margin-bottom: var(--space-3);
}

.about-text h2:not(.title), .about-text h3 {
	font-size: var(--text-xl);
	margin: var(--space-5) 0 var(--space-3);
}

#about p, #call p {
	font-size: var(--text-base);
	text-align: left;
	margin: 0 0 var(--space-4);
}

#about ul {
	font-size: var(--text-base);
	margin: 0 0 var(--space-4);
}

#about ul li {
	margin-bottom: var(--space-1);
}

@media (max-width: 799px) {
	#about .about-body--split {
		grid-template-columns: 1fr;
	}

	.about .bgimage {
		max-width: 260px;
	}
}

/* --- Courier banner ---------------------------------------------------- */
.content .banner {
	position: relative;
	overflow: hidden;
	width: 100%;
	min-height: 254px;
	padding: var(--space-6) 40% var(--space-6) var(--space-6);
	background: var(--green-dark) url(../img/banner.jpg) no-repeat center center / cover;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}

.content .banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(35, 31, 32, .38), rgba(35, 31, 32, 0) 65%);
	pointer-events: none;
}

.content .banner > * {
	position: relative;
}

.content .banner .title {
	width: auto;
	font-size: var(--text-2xl);
	color: var(--white);
	text-align: left;
	text-shadow: none;
	margin-bottom: var(--space-3);
	padding: 0;
}

.content .banner p {
	width: auto;
	max-width: 520px;
	font-size: var(--text-base);
	color: var(--white);
	text-align: left;
	text-shadow: none;
	padding: 0;
}

.banner .photo {
	position: absolute;
	right: var(--space-4);
	bottom: var(--space-3);
	width: 38%;
	max-width: 400px;
	aspect-ratio: 400 / 214;
	background: url(../img/photo.png) no-repeat bottom right / contain;
	float: none;
	filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .25));
}

@media (max-width: 549px) {
	.content .banner {
		padding: var(--space-5) var(--space-4) 120px;
	}

	.content .banner p {
		max-width: none;
	}

	.banner .photo {
		width: 55%;
		max-width: 240px;
		right: var(--space-3);
		bottom: var(--space-3);
	}
}

/* --- Buttons ----------------------------------------------------------- */
.bbutton, .submit {
	display: inline-block;
	background: var(--green);
	color: var(--white);
	font: 600 15px/1.2 var(--font-body);
	letter-spacing: .01em;
	text-shadow: none;
	text-align: center;
	min-width: 140px;
	margin: var(--space-2) 0;
	padding: 12px 24px;
	border: none;
	border-radius: var(--radius);
	box-shadow: 0 2px 6px rgba(101, 153, 67, .3);
	cursor: pointer;
	transition: background-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.bbutton:hover, .submit:hover {
	background: var(--green-dark);
	color: var(--white);
	box-shadow: 0 6px 16px rgba(101, 153, 67, .35);
	transform: translateY(-1px);
	filter: none;
}

.content .banner .bbutton {
	background: var(--ink);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}

.content .banner .bbutton:hover {
	background: var(--gray-900);
}


/* ==========================================================================
   Popups (#popup, loaded by ajax) and forms
   ========================================================================== */
#popup {
	min-width: 280px;
	min-height: 100px;
	max-width: 800px;
	width: 100%;
	text-align: center;
	padding: var(--space-6) 0;
}

#popup .menuBg {
	margin-top: var(--space-4);
	border-radius: var(--radius-sm);
}

#popup .pmenu {
	flex-wrap: wrap;
}

/* fields keep their old width scheme (50% / 33% / 100% minus 15px),
   flex-wrap + 15px gap replaces the float:left */
#popup form:not(#upform):not(#imageform) {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0 15px;
	text-align: left;
	margin: 0;
}

#popup p {
	text-align: center;
}

#popup form p,
#popup form #message,
#popup form #more {
	flex: 1 1 100%;
}

#popup form #more {
	display: flex;
	flex-wrap: wrap;
	gap: 0 15px;
}

.label {
	width: calc(50% - 15px);
	float: none;
	margin: var(--space-4) 0 0;
}

@media (max-width: 500px) {
	.label {
		width: calc(100% - 15px);
	}
}

.label span {
	display: block;
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--gray-700);
	margin-bottom: 6px;
	padding-left: 2px;
}

.label input, .label select, .label textarea {
	background: var(--white);
	font: var(--text-base) var(--font-body);
	color: var(--ink);
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--gray-300);
	border-radius: var(--radius);
	transition: border-color var(--transition), box-shadow var(--transition);
}

.label input:focus, .label select:focus, .label textarea:focus {
	border-color: var(--green-accent);
	box-shadow: 0 0 0 3px rgba(130, 186, 65, .2);
}

.label select {
	padding: 9px 12px;
}

.label textarea, textarea {
	height: 150px;
	resize: vertical;
}

.label input[type="checkbox"] {
	width: 18px;
	height: 18px;
	padding: 0;
	vertical-align: middle;
}

.submit {
	border: none;
	margin-top: var(--space-4);
	padding: 12px 28px;
}

.submit:hover {
	cursor: pointer;
}

.label .error {
	border-color: var(--error);
}

.error {
	color: var(--error);
}

input.error, select.error, textarea.error {
	color: inherit;
}

#content {
	padding: var(--space-4);
}

#content img {
	max-width: 100%;
}

#message {
	text-align: center;
	margin-top: var(--space-4);
}

#preview {
	text-align: center;
	margin-bottom: var(--space-4);
}

#preview img {
	max-width: 240px;
	margin: 0 auto;
}

/* --- Fancybox modal chrome (vendor CSS untouched) ------------------------
   fancybox 3.1 puts the inline #popup straight into .fancybox-slide,
   so #popup itself is the modal box */
/* style.css loads before the vendor CSS, so these selectors carry one extra
   class to win against fancybox's own rules of equal specificity */
.fancybox-container.fancybox-is-open .fancybox-bg {
	background: var(--ink);
	opacity: .6;
}

.fancybox-slide > #popup {
	padding: var(--space-6) var(--space-5);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: 0 24px 64px rgba(35, 31, 32, .35), 0 2px 8px rgba(35, 31, 32, .12);
}

.fancybox-slide > #popup .fancybox-close-small {
	top: 6px;
	right: 6px;
}

.fancybox-slide > #popup .fancybox-close-small:after {
	color: var(--gray-600);
	background: var(--white);
	border: 1px solid var(--line);
	transition: background var(--transition), color var(--transition);
}

.fancybox-slide > #popup .fancybox-close-small:hover:after {
	color: var(--ink);
	background: var(--green-tint);
}

/* image lightbox (/lcd/ product photos, galleries) gets the same chrome */
.fancybox-container .fancybox-slide--image .fancybox-image-wrap {
	background-color: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: 0 24px 64px rgba(35, 31, 32, .35), 0 2px 8px rgba(35, 31, 32, .12);
	overflow: hidden;
}

.fancybox-container .fancybox-slide--image .fancybox-image {
	border-radius: inherit;
}

/* --- Floating call / write buttons --------------------------------------- */
.callus, #writeus {
	background: url(../img/callus.png) no-repeat center / 56px;
	position: fixed;
	bottom: 24px;
	right: 16px;
	z-index: 9999;
	width: 56px;
	height: 56px;
	cursor: pointer;
	border-radius: 50%;
	box-shadow: 0 6px 16px rgba(35, 31, 32, .25);
	transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
}

#writeus {
	background-image: url(../img/writeus.png);
	bottom: 92px;
}

.callus:hover, #writeus:hover {
	filter: brightness(108%);
}

.callus.show, #writeus.show {
	opacity: 1;
	visibility: visible;
	transform: none;
}


/* ==========================================================================
   Footer (#contact): map | contact | services, then up/login row
   ========================================================================== */
.footer {
	background: var(--ink);
	text-align: center;
	font-size: 15px;
	color: var(--gray-100);
	text-shadow: none;
	margin: 0 auto;
	padding: var(--space-7) 0 110px;
	border-top: 4px solid var(--green-accent);
}

.footer a {
	color: var(--gray-100);
}

.footer .content {
	max-width: var(--container);
}

.footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--space-6);
	align-items: start;
	text-align: left;
}

/* the class .submenu is shared with the #sub dropdown in the menu bar */
.submenu {
	min-width: 0;
	width: auto;
	margin: 0;
}

.submenu a {
	font-size: 15px;
	background: url(../img/bullet.png) no-repeat 8px 13px / 10px;
	color: var(--gray-500);
	display: block;
	text-align: left;
	padding: 7px 0 7px 28px;
	border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.submenu a:hover, .submenu .active {
	background: url(../img/abullet.png) no-repeat 8px 13px / 10px;
	color: var(--green-soft);
}

.submenu a:last-child {
	border-bottom: none;
}

.footer .contact {
	min-width: 0;
	width: auto;
	text-align: center;
	margin: 0;
}

.footer .contact > div {
	margin: var(--space-3) 0;
}

.footer .title {
	color: var(--white);
	font-weight: 400;
}

.footer .props {
	background: url(../img/flogo.png) no-repeat center 0 / 140px;
	width: auto;
	max-width: 280px;
	margin: 0 auto;
	padding-top: 100px;
	line-height: 1.5;
}

.footer .props p {
	margin: 0 0 var(--space-2);
}

.props p strong {
	font-weight: 400;
	color: var(--green-soft);
}

.footer .waze {
	display: inline-block;
	margin-top: var(--space-2);
	transition: transform var(--transition);
}

.footer .waze:hover {
	transform: scale(1.05);
}

.footer .waze img {
	display: block;
	width: 56px;
}

.footer .map {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 360px;
	margin: 0;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--radius);
	filter: saturate(.9);
}

/* WhatsApp / Messenger / e-mail row */
.footer .social-labels,
.footer .social {
	display: flex;
	justify-content: center;
	gap: var(--space-4);
	width: auto;
	padding: 0;
}

.footer .social-labels {
	margin-bottom: var(--space-1);
	font-size: 13px;
}

.footer .social-labels span {
	width: 56px;
	display: inline-block;
	text-align: center;
	margin: 0;
}

.footer .w { color: var(--whatsapp); filter: brightness(125%); }
.footer .m { color: var(--messenger); filter: brightness(140%); }
.footer .e { color: var(--green-soft); }

.footer .social a {
	display: block;
	width: 56px;
	height: 56px;
	margin: 0;
	background: no-repeat center / 50px;
	border-radius: 50%;
	transition: transform var(--transition), filter var(--transition);
}

.footer .social .whatsapp  { background-image: url(../img/social/whatsapp.png); }
.footer .social .messenger { background-image: url(../img/social/messenger.png); }
.footer .social .email     { background-image: url(../img/femail.png); }

.footer .social a:hover, .footer .profile:hover, .footer .up:hover {
	transform: translateY(-2px);
	filter: brightness(110%);
}

.footer .phone {
	display: inline-block;
	background: none;
	font: 26px var(--font-display);
	color: var(--white);
	margin-top: var(--space-2);
}

.footer .phone:hover {
	color: var(--green-soft);
}

.footer .review {
	display: table;
	margin: var(--space-4) auto 0;
	padding: var(--space-2) var(--space-5);
	border: 1px solid var(--green-soft);
	border-radius: 999px;
	color: var(--green-soft);
	font-size: var(--text-sm);
	transition: background var(--transition), color var(--transition);
}

.footer .review:hover {
	background: var(--green-soft);
	color: var(--ink);
}

.footer .edit-contacts {
	display: inline-block;
	margin-top: var(--space-3);
}

/* up / login row */
.footer .uprofile {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 750px;
	margin: var(--space-7) auto 0;
	padding: 0 var(--space-4);
}

.footer .up, .footer .profile {
	display: block;
	width: 44px;
	height: 44px;
	float: none;
	margin: 0;
	position: static;
	background: url(../img/up.png) no-repeat center / 44px;
	transition: transform var(--transition), filter var(--transition);
}

.footer .profile {
	background-image: url(../img/fprofile.png);
}

.footer .up {
	order: 2;
}

.footer .copy {
	color: var(--gray-600);
	font-size: 13px;
	margin-top: var(--space-5);
}

@media (max-width: 849px) {
	.footer-grid {
		grid-template-columns: 1fr;
		gap: var(--space-6);
		text-align: center;
	}

	.footer .map {
		order: 2;
		min-height: 260px;
		height: 260px;
	}

	.footer .contact {
		order: 1;
	}

	.footer .submenu {
		order: 3;
		max-width: 360px;
		margin: 0 auto;
		width: 100%;
	}
}


/* ==========================================================================
   Tables (/lcd/ search results, admin lists)
   ========================================================================== */
.table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	border: none;
	background: var(--white);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: 0 0 0 1px var(--line);
}

.table td {
	font-size: var(--text-sm);
	text-align: left;
	border: none;
	border-top: 1px solid var(--line);
	padding: 10px;
	word-break: break-word;
	vertical-align: middle;
}

.table tr:first-child td {
	border-top: none;
}

.table .labels {
	background: var(--green);
	color: var(--white);
	font-weight: 600;
	text-shadow: none;
}

.table .name:hover {
	cursor: pointer;
}

/* price and WhatsApp columns: the HTML width="50"/"35" hints are too
   narrow once padding is added (table-layout is fixed), so size them here */
.table td.green {
	width: 84px;
	white-space: nowrap;
	word-break: normal;
	text-align: right;
}

.table td.w {
	width: 52px;
	padding: 6px 8px;
	text-align: center;
}

.table .w img {
	position: static;
	display: block;
	width: 32px;
	height: 32px;
	max-width: none;
	margin: 0 auto;
}

.table .bg0 {
	background: var(--white);
}

.table .bg1 {
	background: #f7f9f4;
}

.table tr:hover td {
	background: var(--green-tint);
}

.table .labels:hover td {
	background: var(--green);
}

.table img {
	position: relative;
	top: 2px;
}

.table select {
	font: 13px var(--font-body);
}

.table .buttons a {
	display: inline-block;
	margin: 0 10px 10px 0;
}

.table .thumb {
	text-align: center;
	padding: 2px 5px;
}

.table .thumb img {
	position: static;
	height: 40px;
	width: auto;
	max-width: 60px;
	object-fit: contain;
	cursor: pointer;
	vertical-align: middle;
	display: inline-block;
}

td .more {
	color: var(--ink);
	display: block;
	background: url(../img/icons/add.png) no-repeat 0 center;
	font-weight: 600;
	padding: 8px 25px;
}

/* /lcd/ intro text above the results */
.stext {
	max-width: 800px;
	margin: 0 auto var(--space-5);
}

.message {
	text-align: center;
	margin: var(--space-4) auto;
}

#message, .message {
	margin-top: var(--space-5);
}

@media (min-width: 700px) {
	.add {
		display: table-cell;
	}
}

@media (max-width: 699px) {
	.add {
		display: none;
	}

	.show {
		display: block;
	}

	.props {
		padding-bottom: 10px;
	}

	.waze {
		display: block;
	}
}

/* ==========================================================================
   News popup (#new), admin media gallery
   ========================================================================== */
#new .content .title {
	font-size: var(--text-lg);
	color: inherit;
}

.content .nfacebook {
	background: url(../img/social/facebook.png) no-repeat 0 center / 25px;
	width: auto;
	font-size: var(--text-sm);
	color: var(--ink);
	display: inline-block;
	margin: var(--space-3) auto 0;
	padding: 4px 0 4px 30px;
}

#new .content .nfacebook:hover {
	filter: brightness(110%);
}

#new #content, #new #content p {
	text-align: left;
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 25px;
	height: 0;
}

.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 25px 0;
}

.images {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	float: none;
	margin: var(--space-4) 0;
}

.images .image {
	background-position: center center;
	background-size: cover;
	display: block;
	float: none;
	width: 180px;
	height: 180px;
	margin: 0;
	border: 3px solid var(--orange);
	border-radius: var(--radius-sm);
}

.image .buttons {
	background: var(--white);
	text-align: right;
	opacity: .85;
	padding: 5px 0;
	position: relative;
	right: 0;
	z-index: 3;
}

.image .buttons a {
	opacity: 1;
	margin-right: 10px;
}

h1.title, h2.title {
	margin-top: 0;
}

/* --- Majaslapu izveide (id 34): SEO sekcija --- */
.mkweb{color:var(--ink);line-height:1.5;}
.mkweb .lead{font-size:18px;color:var(--gray-900);}
.mkweb .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin:22px 0;}
.mkweb .card{border:1px solid var(--line);border-radius:var(--radius);padding:20px;background:#fff;transition:.2s;}
.mkweb .card:hover{box-shadow:0 8px 24px rgba(101,153,67,.18);transform:translateY(-3px);}
.mkweb .card:before{display:block;font-size:30px;margin-bottom:10px;}
.mkweb .card.i-land:before{content:"🚀";}
.mkweb .card.i-corp:before{content:"🌐";}
.mkweb .card.i-shop:before{content:"🛒";}
.mkweb .card.i-app:before{content:"⚙️";}
.mkweb .card h4{margin:0 0 6px;font-size:17px;}
.mkweb .card p{margin:0;font-size:14px;color:var(--gray-700);}
.mkweb .accent{background:linear-gradient(135deg,var(--green),var(--green-accent));color:#fff;border-radius:14px;padding:26px;margin:26px 0;}
.mkweb .accent h3{color:#fff;margin:0 0 12px;}
.mkweb .accent ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:6px 20px;}
.mkweb .accent ul li{background:none;padding:6px 0 6px 26px;position:relative;overflow:visible;}
.mkweb .accent ul li:before{content:"✓";position:absolute;left:0;font-weight:bold;}
.mkweb .pf{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:18px 0;}
.mkweb .pf a{display:block;text-decoration:none;color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;transition:.2s;}
.mkweb .pf a:hover{box-shadow:0 10px 28px rgba(0,0,0,.12);transform:translateY(-3px);}
.mkweb .pf .thumb{display:flex;height:150px;background:linear-gradient(135deg,var(--green-tint),var(--green-tint-2));align-items:center;justify-content:center;font-size:15px;color:var(--sage);font-weight:600;text-align:center;padding:10px;}
.mkweb .pf a img{display:block!important;width:100%!important;height:150px!important;max-height:150px!important;object-fit:cover!important;object-position:top!important;border:0!important;margin:0!important;padding:0!important;}
.mkweb .pf .meta{display:block;padding:14px 16px;}
.mkweb .pf .tag{display:inline-block;font-size:11px;text-transform:uppercase;letter-spacing:.5px;background:var(--green-tint);color:var(--green);padding:3px 9px;border-radius:20px;margin-bottom:8px;}
.mkweb .pf .name{display:block;font-size:16px;font-weight:bold;}
.mkweb .pf .desc{display:block;font-size:13px;color:var(--gray-600);}
.mkweb ol.steps{counter-reset:s;padding:0;list-style:none;margin:16px 0;}
.mkweb ol.steps li{background:none;position:relative;padding:8px 0 8px 46px;margin-bottom:4px;min-height:30px;overflow:visible;}
.mkweb ol.steps li:before{counter-increment:s;content:counter(s);position:absolute;left:0;top:4px;width:30px;height:30px;background:var(--green);color:#fff;border-radius:50%;text-align:center;line-height:30px;font-weight:bold;}
.mkweb .cta{background:var(--ink);color:#fff;border-radius:14px;padding:28px;text-align:center;margin:26px 0;}
.mkweb .cta h3{color:#fff;margin:0 0 8px;}
.mkweb .cta a.btn{display:inline-block;background:var(--orange);color:#fff;padding:12px 28px;border-radius:30px;text-decoration:none;font-weight:bold;margin-top:10px;}