@font-face {
  font-family: 'Roboto';
  font-weight: 100 900;
  src: url('https://ttmsystem.sk/fonts/Roboto.ttf') format('truetype');
  font-display: swap;
}

body {
	display: flex;
    flex-direction: column;
    min-height: 100vh;
	background-color: #f3f3f3;
	font-family: 'Roboto', Arial;
	font-size: 14px;
}


* {padding: 0; margin: 0; font-family: 'Roboto';}
a {text-decoration: none;}

header {
	float: left;
    width: 100%;
	color: #fff;
    background-image: url(../img/header.webp);
    background-repeat: repeat;
    background-size: cover;
    background-position: center;
    background-color: #14171d;
	padding: 75px 0;
}
main {flex: 1;}
	
.container {margin: auto; max-width: 1366px;}

.hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px; 
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

	.logo {display: block; max-width: max-content; margin: auto; padding-bottom: 35px;}
	.logo a {display: block; color: #fff; text-align: center; line-height: 20px;}
	.logo img {display: block; width: 180px; height: auto; margin: auto;}

	.call {
		display: block;
		max-width: max-content;
		align-items: center;
		padding: 10px 10px;
		margin: auto;
		border: 1px solid #ffffff42;
		border-radius: 10px;
	}
	
	.call p {display: inline-block; font-weight: 500; margin: 0 8px 0 4px;}
	.call a {display: inline-block; background: #a3142d; color: #fff; padding: 8px 12px; border-radius: 5px;}
	.call a:hover {background: #bc0b29;}

	.menu {display: block; margin: auto; max-width: max-content;}
	.menu ul {display: flex; gap: 25px; list-style-type: none; padding: 40px 15px 15px 15px; border-bottom: solid 1px #c8c8c9;}
	.menu li {display: block; position: relative;}
	.menu a  {display: block; color: #000; font-weight: 500;}
	.menu li::after {
		content: '';
		position: absolute;
		width: 10px;
		height: 10px;
		background-color: #d90a2d;
		border-radius: 50%;
		left: 50%;
		bottom: -16px;
		transform: translate(-50%, calc(50% - 1px));
		opacity: 0;
		transition: opacity 0.1s ease-in-out;
	}
	.menu li.active::after,
	.menu li:hover::after {
		opacity: 1;
	}
	
	.references {display: block; max-width: max-content; margin: auto; padding: 50px 0;}
		
	.references h1 {display: block; max-width: 480px; font-size: 16px; color: #000; text-align: center; margin: auto; padding: 25px 0;}
	.references h1 span {display: block; line-height: 20px; font-size: 13px; color: #515151; font-weight: 400; padding: 5px 0;}
	
	.references button {
		display: block;
		width: 150px;
		outline: none;
		border: 0;
		cursor: pointer;
		background: #d4d6d9;
		padding: 8px 12px;
		margin: auto;
		border-radius: 5px;
		font-weight: 500;
		font-size: 13px;
	} .references button:hover {background: #c21734; color: #fff;}
	
		.show-section {display: none; padding: 15px 0; margin: auto;}
		.show-section h2 {display: block; font-size: 14px; color: #000; background: #d4d6d9; padding: 6px 12px;}
	
	
	.gallery {display: flex; flex-wrap: wrap; justify-content: center; max-width: 640px; gap: 2px; padding: 15px 0;}
	.gallery figure {display: block;}
	.gallery figure a {display: block;}
	.gallery figure img {display: block; width: 150px; height: auto; opacity: 0.85; filter: grayscale(0.5);}
	.gallery figure a:hover img {transform: scale(1.05); opacity: 1; filter: grayscale(0); transition: all 0.2s;}


/*** služby a cenník ***/

.services {display: block; max-width: max-content; margin: auto; padding: 50px 0;}

.services h1 {display: block; max-width: 480px; font-size: 16px; color: #000; text-align: center; margin: auto; padding: 25px 0;}
.services h1 span {display: block; line-height: 20px; font-size: 13px; color: #515151; font-weight: 400; padding: 5px 0;}

	.services-list {display: block; margin: 25px auto;}
	.services-list-header {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		background-size: cover;
		background-position: center;
		min-width: 440px;
		padding: 12px;
	}
	  .sl-podlahy 	{background-image: url('../img/podlaha.webp');}
	  .sl-dvere   	{background-image: url('../img/dvere.webp');}
	  .sl-brusenie  {background-image: url('../img/brusenie.webp');}
	  .sl-nivelacia  {background-image: url('../img/nivelacia.webp');}
	  
	.services-list-header h2 {color: #fff; font-size: 16px; font-weight: 600;}
	.services-list-header a  {color: #fff; background: #0000008f; line-height: 20px; padding: 8px 12px; border-radius: 5px;}
	.services-list-header a:hover {background: #c21734;}
	
	.services-list ul {display: block; border: solid 1px #c5c9ce;}
	.services-list li {list-style: inside; border-bottom: solid 1px #c5c9ce; padding: 12px;}
	
	.pricing-group {border: solid 1px #c5c9ce;}
	.pricing-group h2 {background: #d4d6d9; padding: 8px 12px; font-size: 16px; margin-bottom: 5px;}
	
		.p-dvere {margin: 25px auto;}
		.p-dvere h3 {width: 250px; font-size: 14px; font-weight: 400; line-height: 30px;}
			
			.polozka {display: flex; flex-wrap: wrap; align-items: center; padding: 12px;}
			.polozka p {margin-left: 15px;}
			
			.plus-btn,
			.minus-btn {
				display: inline-block;
				width: 35px;  
				height: 35px; 
				line-height: 33px;
				text-align: center;
				border: 1px solid #d1d5db; 
				font-size: 18px;       
				font-weight: bold;     
				cursor: pointer;       
				transition: background-color 0.1s;
				user-select: none;
			}

			.plus-btn {
				background-color: #d7d9dd;
				border-color: #d1d5db;
				border-left: 1px solid #d1d5db;
				border-radius: 0 4px 4px 0; 
			}

			.minus-btn {
				background-color: #d7d9dd;
				border-color: #d1d5db;
				border-right: 1px solid #d1d5db;
				border-radius: 4px 0 0 4px;
			}

			.plus-btn:hover {background-color: #45be52; color: #fff;}
			.minus-btn:hover {background-color: #cb4e4e; color: #fff;}

			.plus-btn:active {background-color: #45be52; color: #fff;}
			.minus-btn:active {background-color: #cb4e4e; color: #fff;}

			.quantity {
				display: block;
				width: 35px;
				line-height: 34px;
				color: #6b7280;
				background: #f9fafb;
				font-size: 14px;
				font-weight: 600;
				border-top: 1px solid #d1d5db;
				border-bottom: 1px solid #d1d5db;
				text-align: center;
				user-select: none;
			}
			
	.pricing {
		display: flex;
		flex-direction: column;
		align-items: normal;
		justify-content: center;
		align-content: center;
		flex-wrap: wrap;
		gap: 10px;
		margin: 20px auto;
		padding: 0 20px;
	}
	
		.pricing p {display: block; text-align: center; max-width: 185px;}
		.pricing small {text-align: center;}
		
		.pricing label {min-width: 150px; color: #000; font-weight: 600;}
		
		.pricing select {
		   -webkit-appearance: none;
		   -moz-appearance: none;
			appearance: none;
			background-color: #fff;
			border: 1px solid #d1d5db;
			border-radius: 8px;
			padding: 10px 36px 10px 12px;
			font-size: 14px;
			color: #1f2937;
			box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
			background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%234b5563" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>');
			background-repeat: no-repeat;
			background-position: right 10px center;
			background-size: 10px 10px;
			transition: border-color 0.2s, box-shadow 0.2s;
			cursor: pointer;
		}
		
		.pricing select:focus {
			outline: none;
			border-color: #3b82f6;
			box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
		}

		.relative {
			display: flex;
			align-items: center;
			border: 1px solid #d1d5db;
			border-radius: 8px;
			background-color: #fff;
			box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
			transition: border-color 0.2s, box-shadow 0.2s;
			overflow: hidden;
		}

		.relative:has(input:focus) {
			outline: none;
			border-color: #3b82f6;
			box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
		}

		.relative input[type="number"] {
			border: none;
			outline: none;
			padding: 10px 12px;
			color: #1f2937;
			max-width: 120px;
			text-align: right;
			-moz-appearance: textfield;
		}

		.relative input::-webkit-outer-spin-button,
		.relative input::-webkit-inner-spin-button {
			-webkit-appearance: none;
			margin: 0;
		}

		.relative span {
			color: #6b7280;
			padding: 10px; 
			background-color: #f9fafb;
			border-left: 1px solid #d1d5db;
			height: 100%;
			display: inline-block;
			align-items: center;
		}

		.result {
			min-width: 72px;
			text-align: center;
			font-weight: 600;
			background: #3466ba;
			color: #fff;
			border-radius: 8px;
			padding: 10px;
		}
			.result small {font-size: 10px; display: block; padding-top: 5px;}

/*** kontakt ***/

	.kontakt {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 25px;
		margin: 50px auto;
	}
		.kontakt ul {list-style: none; padding: 10px; border: solid 1px #c5c9ce;}
		.k-default {list-style: inside; padding: 4px 15px;}
		.k-default::marker {color: #6b7280;}
		.kontakt ul li b {display: block; line-height: 25px; font-size: 15px;}
		
		
.copyright {padding-bottom: 50px; margin: auto;}
.copyright p {
	max-width: 480px;
    margin: auto;
    line-height: 20px;
    color: #515151;
    text-align: center;
    font-size: 13px;
}	.copyright b {color: #000;}

@media screen and (max-width: 1366px) {
	.container{max-width: 1366px;}
}

@media screen and (max-width: 1024px) {
	.container{max-width: 1024px;}
}

@media screen and (max-width: 960px) {
	.container{max-width: 960px;}
}

@media screen and (max-width: 768px) {
	.container{max-width: 768px;}
}

@media screen and (max-width: 480px) {
	.container{max-width: 480px;}
	
	.gallery figure img {width: 30vw;}
	.pricing {flex-direction: column; align-items: normal; margin: 25px; background: #fff; padding: 25px; border-radius: 8px;}
	.pricing label {text-align: center;}
	
	.services-list {padding: 0 15px;}
	.services-list li {display: block;}
	.services-list-header {min-width: auto;}
	.polozka {max-width: 250px; margin: auto;}
}