/* width */
.apartamente-grid ::-webkit-scrollbar {
  width: 10px;
}

/* Track */
.apartamente-grid ::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
.apartamente-grid ::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
.apartamente-grid ::-webkit-scrollbar-thumb:hover {
  background: #555;
}


.apartamente-grid a {
	color: var(--main-a);
}
.apartamente-grid a:focus,
.apartamente-grid a:hover,
.apartamente-grid a:visited {
	color: var(--main-ah);
}
.apartamente-grid > * {
	margin: 10px 4vw;
	padding: 10px;
}
.apartamente-grid .list-item {
	display: grid;
	grid-template-areas: 
		"poza" 
		"titlu"
		"descriere"
		"detalii-contact"
		"detalii"
		"detalii-note"
		"facilitati";
	grid-template-columns: auto;
	gap: 10px;
	border: 1px solid var(--main-a);
	border-radius: 10px;
	box-shadow: 
			inset 0px 0px 10px rgb(0 0 0 / 0.4),
			4px 4px 10px rgb(0 0 0 / 0.4);
}
.list-item input {
	outline: none;
}
.list-item .detalii-poza {
	grid-area: poza;
	height: 300px;
	overflow: hidden;
	position: relative;
	border: 1px solid var(--main-a);
	border-radius: 10px;
}
.list-item .detalii-poza img {
	max-width: 100%;
	min-height: 100%;
	object-fit: cover;

	position: absolute;
}
.list-item .detalii-poza .iterator {
	position: absolute;
	left: 0px;
	padding: 4px;
	background: var(--main-bg);
	color: var(--main-fg);
}
.list-item .detalii-titlu {
	grid-area: titlu;
}
.list-item .detalii-descriere {
	grid-area: descriere;
}
.list-item .detalii-facilitati {
	grid-area: facilitati;
}
.list-item .detalii-detalii {
	grid-area: detalii;
}
.list-item .detalii-contact {
	grid-area: detalii-contact;
	text-align: center;
}
.list-item .detalii-note {
	grid-area: detalii-note;
}
.list-item .descriere {
	max-height: 120px;
	overflow-y: scroll;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
}
.list-item .grid-detalii {
	background: #333;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
}
.list-item .grid-detalii > * {
	background: var(--main-bg);
	padding: 0px 4px;
}
.list-item input {
	background: var(--main-bg);
	color: var(--main-fg);
	border: none;
	width: 100%;
}

.list-item textarea {
	width: 100%;
	resize: vertical;
	background: rgb(0 0 0 / 0.2);
	color: var(--main-fg);
}

.detalii-contact > .call-button {
	display: grid;
	grid-template-columns: 1fr min(100px, 25vw);
	background: var(--main-a) !important;
	color: var(--main-clr) !important;
	display: grid;
	border-radius: 10px;
	overflow: hidden;
	text-align: center;
/*	padding: 10px;*/
	text-decoration: none;
}
.detalii-contact > .call-button > * {
	padding: 10px;
}
.detalii-contact > .call-button > .button-contact {
	background: #8c0;
	color: #fff;
	text-decoration: none;
}
.detalii-contact > .call-button > .button-contact:focus,
.detalii-contact > .call-button > .button-contact:hover {
	background: #9d0;
}
.detalii-contact > .call-button input {
	background: var(--main-a);
	color: var(--main-clr);
}
.detalii-contact > .vanzator {
	display: flex;
}
.detalii-contact > .vanzator input {
	height: 22px;
}