/*
Theme Name: LadysApp
Author: the WordPress team
Author URI: https://wordpress.org
Description: LadysApp emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Requires at least: 7.0
Tested up to: 8.4
Requires PHP: 8.3
Version: 1.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ladysapp
*/

:root {
/*	--cicolorR: 255;
	--cicolorG: 0;
	--cicolorB: 46;
*/	
	
	/*--cicolor:#ff002e;*/

	
	--cicolor: var(--wp--preset--color--accent-1);/*rgba(var(--cicolorR),var(--cicolorG),var(--cicolorB),1);*/
	--cicolor2: var(--wp--preset--color--accent-2);
	--cicolor3: var(--wp--preset--color--accent-3);
	--cicolor4: var(--wp--preset--color--accent-4);

	--textcolor:var(--wp--preset--color--contrast);
	--background:var(--wp--preset--color--base);

	--green: #2b9c00; /* Whatsapp Button */

	--filtermain: brightness(0) saturate(100%) invert(11%) sepia(95%) saturate(5809%) hue-rotate(345deg) brightness(104%) contrast(108%);
	--filtermain80: brightness(0) saturate(100%) invert(70%) sepia(56%) saturate(5021%) hue-rotate(311deg) brightness(101%) contrast(105%);

	
	--cicolor-80: color-mix(in srgb, var(--cicolor) 80%, transparent);
	--cicolor-60: color-mix(in srgb, var(--cicolor) 60%, transparent);
	--cicolor-40: color-mix(in srgb, var(--cicolor) 40%, transparent);
	--cicolor-20: color-mix(in srgb, var(--cicolor) 20%, transparent);
	--cicolor-10: color-mix(in srgb, var(--cicolor) 10%, transparent);
	--cicolor-5: color-mix(in srgb, var(--cicolor) 5%, transparent);

	--cicolor-w80: color-mix(in srgb, var(--cicolor) 80%, white);
	--cicolor-w60: color-mix(in srgb, var(--cicolor) 60%, white);
	--cicolor-w40: color-mix(in srgb, var(--cicolor) 40%, white);
	--cicolor-w20: color-mix(in srgb, var(--cicolor) 20%, white);

	--background-w95: color-mix(in srgb, var(--background) 95%, white);
	--background-w90: color-mix(in srgb, var(--background) 90%, white);
	--background-w85: color-mix(in srgb, var(--background) 85%, white);
	--background-w80: color-mix(in srgb, var(--background) 80%, white);
	--background-w60: color-mix(in srgb, var(--background) 60%, white);
	--background-w50: color-mix(in srgb, var(--background) 50%, white);
	--background-w40: color-mix(in srgb, var(--background) 40%, white);

	--linearbackground: radial-gradient(circle,rgba(71, 0, 13, 1) 0%, rgba(0, 0, 0, 1) 100%);


	--borderradius:25px;

	--breakpointmobile:600px;


	--transition: all 0.2s ease-in-out;

	--spacing-small:clamp(5px, 3vw, 10px);
	--spacing-medium:clamp(10px, 4vw, 30px);
	--spacing-big:clamp(20px, 6vw, 50px);

	--nicebackground: radial-gradient(
		farthest-corner at 80% 30%,
		var(--cicolor-20) 10%,
		var(--cicolor-5) 70%
	)

	
}

.nicebackground {
	background:var(--nicebackground);
}

* {
	box-sizing: border-box;
}

html{
	background-color: var(--background-w95);
	font-size: clamp(15px, 2vw, 17px);
}

strong {
	font-weight:bold;
	color:var(--cicolor);
	filter: drop-shadow(0 0 10px var(--cicolor-60));
}

h1, h2, h3,h4{
	/*padding-top:2rem;*/
	padding-bottom:2rem;
	font-weight:900;
	strong {
		color:var(--cicolor);
		filter: drop-shadow(0 0 10px var(--cicolor-60));
		font-weight:inherit;
	}
}


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

/* Rand für Boxen */
/* Verwendung bei regionen-most */
.boxenrand {
	
	
		border: 1px var(--cicolor-40) solid;
		background: var(--nicebackground);

		border-radius: var(--borderradius);
		padding:var(--spacing-medium);
		transition: var(--transition);

		&:is(a) {
			color:var(--cicolor-w80);
			text-decoration: unset;
			font-weight: bold;
			&:hover {
				border-color:var(--cicolor-60);
				transform:scale(1.05);
			}
		}
		

	
}


/* Stile Start ------------------------------------*/
.wp-block-button {
	/* Rosa */
	&.is-style-button-rosa {
		.wp-block-button__link {
			background-color:var(--cicolor-w60);
			color:var(--wp--preset--color--base);
			&:hover {
				background-color:var(--cicolor-w40);
			}
		}
	}

	/* Grau */
	&.is-style-button-grau {
		.wp-block-button__link {
			background-color:var(--background-w60);
			filter:unset;
			&:hover {
				background-color:var(--background-w40);
				filter:unset;
			}
		}
	}

	/* Grau dunkel */
	&.is-style-button-graudunkel {
		.wp-block-button__link {
			background-color:var(--background-w80);
			filter:unset;
			&:hover {
				background-color:var(--background-w60);
				filter:unset;
			}
		}
	}
}

/* Gruppe */
.wp-block-group {
	/* Nur via Backend, sonst tamplate mit .boxenrand */
	&.is-style-section-rand {
		border: 1px var(--background-w85) solid;
		background-color: var(--background-w95);
		/*background-image: var(--nicebackground);*/
		background-color:var(--background-w95);

		margin-top:var(--spacing-big);
		margin-bottom:var(--spacing-big);

		border-radius: var(--borderradius);
		padding-top:var(--spacing-big);
		padding-bottom:var(--spacing-big);

		.wp-block-columns:not(.alignfull) {
			padding-left:0;
			padding-right:0;
		}

		.wp-block-heading {
		}
		.wp-block-paragraph{
			margin:2rem 0;
		}

		.wp-block-image img{
			border-radius:var(--borderradius);
			
		}
		
	}
}



/* Stile Ende ------------------------------------*/


/* Stil Überschreibungen ------------------------- */
/* Button */
.wp-block-button
 {

	/* Default */
	.wp-block-button__link {
		background-color:var(--cicolor);
		color:var(--wp--preset--color--contrast);
		filter: drop-shadow(0 0 10px var(--cicolor-40));
		transition: var(--transition);
		font-weight:bold;
		padding:0.7rem 1.4rem;
		border-radius: var(--borderradius);
		text-align:center;
		&:hover {
			background-color:var(--cicolor-80);
			filter: drop-shadow(0 0 5px var(--cicolor-40));
		}
	}

	/* Kontur */
	&.is-style-outline {
		.wp-block-button__link{
			color:var(--cicolor);
			background:color-mix(in srgb, var(--cicolor) 20%, black);
			border-color:var(--cicolor);
			border-style:solid;
			border-width:1px;
			&:hover {
				background-color:color-mix(in srgb, var(--cicolor) 15%, black);
				border-color:color-mix(in srgb, var(--cicolor) 80%, transparent);
			}
		}
		
	}

}

/* Annotion */
.wp-block-group {
	.is-style-text-annotation{
		color: var(--cicolor);

		border-color: var(--cicolor-40) !important;
		/*background-color:var(--wp--preset--color--base);*/
		display: flex;
		align-items: center;
		gap:0.6rem;

		&:before {
			content: "";
			background-color: var(--cicolor);
			display: inline-block;
			width: 7px;
			height: auto;
			aspect-ratio: 1;
			vertical-align: middle;
			border-radius: 50%;
		}
	}

}





/* Bilder */
.wp-block-image {
	img {
		border-radius: var(--borderradius);
	}
}

/* Stil Überschreibungen Ende ------------------------- */






header {
	background-color:var(--background-w90);

	/* Logo & Menü */
	> div {
		display: flex;
		align-items: center;
        justify-content: space-between;

		/* Logo */
		> a {
			padding-left: 5px;
			text-decoration: unset;;
			img {
				max-width:clamp(200px,25vw,300px);
				width:100%;
				height: auto;
				display: block;
				padding-top: 5px;
                padding-bottom: 5px;
			}
		}
		
	}
	/* Burger-Button */
	.menu-toggle {
		&:after {
			filter:var(--filtermain);
		}
	}

	/* Haupt Navigation */
	nav {



		/* Burger Menü */
		.menu-toggle {
			
			all:unset;
			text-indent: -9000px;

			position: relative;
			display: block;
			width:50px;
			aspect-ratio: 1;
			cursor: pointer;

			@media (min-width: 600px) {
				display: none;		
			}
			/* Burger Icon */
			&:after {
				position: absolute;
				content:'';
				display: block;
				width:100%;
				height:100%;
				top:0;
				background:url('/wp-content/themes/ladysapp/assets/images/burger.svg') no-repeat 50% / contain;
			}

			
			
		}
		
		
		/* Burgermenü offen */
		&.open {
			
			.menu-hauptmenue-container {
				position: fixed;
				background-color: var(--background-w90);
				width:100%;
				left:0;
				z-index: 1;
				/* offenes Burger Menü */
				ul {
					flex-direction: column;
				}
			}

			button {
				&:after {
					background-image:url('/wp-content/themes/ladysapp/assets/images/close.svg');
			}
			}
		}
		/* Burgermenü NICHT offen */
		&:not(.open) {
			@media (max-width: calc(600px - 1px)) {
				.menu-hauptmenue-container {
				
					display: none;
				}
			}
			

		
		}

		/* Nav */
		ul {
			display: flex;
			gap:var(--spacing-small);
			list-style: none;
			padding-inline-start: var(--spacing-small);
			li {
				/* Hauptnavigation Links */
				color:var(--cicolor-w60);
				a{
					color:var(--cicolor-w60);
					border-bottom:2px transparent solid;
					text-decoration: unset;
					text-transform: uppercase;
					font-weight:bold;
					font-size:1rem;
					padding:0.3rem;
					transition: var(--transition);
					&:hover {

					}

					&:hover, .current_page_item &{
						border-bottom:2px var(--cicolor-w60) solid;
					}
				}

				/* Login (2. von Hinten) */
				&:nth-last-of-type(2){
					&:before {
						content:'';
						margin-right: var(--spacing-small);
						border-left:2px var(--background-w85) solid;
						@media (max-width: 600px) {
							content:unset;
							margin-right:unset;
							border-left:unset;
						}
					}

					a {
						color:var(--background-w40);
						@media (max-width: 600px) {
							color:inherit;
						}
					}
				}
				/* Registrieren (Letzte) */
				&:last-of-type {
					a{
						@media (min-width: 600px) {
							background-color:var(--cicolor);
							color:var(--wp--preset--color--contrast);
							filter: drop-shadow(0 0 10px var(--cicolor-40));
							transition: var(--transition);
							font-weight:bold;
							padding:0.7rem 1.4rem;
							border-radius: var(--borderradius);
							border-bottom:unset;
						}

						&:hover {
							@media (min-width: 600px) {
								background-color:var(--cicolor-80);
								/*border-bottom-color:var(--cicolor-80);*/
								
								filter: drop-shadow(0 0 5px var(--cicolor-40));
							}
						}
					}
				}
				
			}
		}
	}

	
}




/* Footer */
footer { 
	
	background-color:#330000;
	
	strong {
		filter:inherit;
		color:inherit;
	}

	.wp-block-image img {
		border-radius: inherit;
	}

	nav {
		.menu-toggle {display: none;}
		ul {
			display: flex;
			gap:2rem;
			flex-wrap: wrap;
			list-style: none;
			margin:0;
			margin-top:2rem;
			padding-left:0;
			padding-top:2rem;
			padding-bottom:2rem;
			@media (max-width: calc(600px - 1px)) {
				flex-direction: column;
			}
			li {
				/* Bestimmte Seiten ausblenden */
				/*&:nth-child(2), &:nth-child(3), &:nth-last-child(2), &:last-child{
					outline:1px red solid;
					display:none !important;
				}

				&:nth-child(1){
					order:3;
				}*/

				&.current-menu-item {
					a {
						text-decoration: underline;
					}
				}
			}
			
		}
	}

	/* Navlinks & Links */
	a {
		text-decoration: unset;
		line-height:1;
		color:var(--cicolor-w40) !important;
		font-size:1rem;
		transition: var(--transition);
		&:hover {
			text-decoration: underline;
		}
	}
	/* Text & Labels */
	p{
		color:var(--cicolor-w40);
		font-size:1rem;
	}

	/* Überschriften */
	strong {
		font-size:1.2rem;
		color:var(--cicolor-w40)
	}


	.wp-block-columns{

		.wp-block-column {
			/* Links Seite*/
			&:nth-child(1) {
			}
			/* Rechte Seite*/
			&:nth-child(2) {
				.is-layout-flex {
					display:flex;
					flex-direction: column;
					align-items: flex-start;
					gap:1rem;

					/* Impressum und Datenschutz als Links */
					p  {
						line-height: 1;
						a {
							&:hover {
								text-decoration: underline;
							}
						}
					}

					
					
				}

				/* Rechtliches */
				>p:nth-of-type(2) {
					padding-top:3rem;
				}
			}
		}
	}

}

/* Copyright */
copy {
	text-align: center;
	margin-left:auto;
	margin-right:auto;
	display: block;
	font-size:1rem;
	padding-bottom:2vw;
	padding-top:2vw;
	background-color: rgba(0, 0, 0, 0.5);
	color:var(--cicolor-w40)
}



/* Seitliche Begrenzungen Rand/Ränder */
.entry-content  .wp-block-group:not(.alignfull) 
, .entry-content .wp-block-columns:not(.alignfull) 
, .entry-content > .wp-block-heading
, header > div 
, footer > div > div {
	/*outline:1px red dashed;*/
	padding-left:var(--spacing-small);
	padding-right:var(--spacing-small);
	max-width:1100px;
	margin-left:auto;
	margin-right:auto;
}
.entry-content .wp-block-group:not(.alignwide):not(.alignfull)
, .entry-content .wp-block-columns:not(.alignwide):not(.alignfull)  {
	max-width:700px;
}

/* Sektionen bekommen Rand nach obenund unten */
.entry-content section.wp-block-group {
	padding-top:var(--spacing-big);
	padding-bottom:var(--spacing-big);
}


/* Sectionen/ Abschnitte mit Abstand */
.entry-content .wp-block-group
 {
	/*padding-top:5vmax;
	padding-bottom:5vmax;*/
 }

/* Kein Rand nach oben und unten */
 .nospacing
 , section.wp-block-group.nospacing {
	padding-top:0;
	padding-bottom:0;
	
}




/* Ladys Swiper */
.wp-block-group:has(.ladysswiper) {
	overflow: hidden; /* Beim Swipen die Seite verbreitern unterbinden */
}
.ladysswiper {
	position: relative;
	margin:auto;

	width:100%;
	max-width:1080px;
	max-height:90vh;
	min-height: 300px;

	height:100%;
	aspect-ratio: 1;
	cursor: pointer;
	
	/*
	width:calc(100% - (2*5vw));
	padding-left:5vw;
	padding-right:5vw;*/

	@media all and (max-width: 1100px) {
		width:calc(100% - (2*var(--spacing-small)));
		/* padding-left:var(--spacing-big); */
		/* padding-right:var(--spacing-big); */
		/* display: flex; */
		/* align-items: center; */
		/* justify-content: center; */
	}

	img::selection {
		background:unset;
	}

	
	
	.actionbuttons {
		position: relative;
		top:50%;
		/*display: none;*/
		button {
			transform: translateY(-50%);
			border:0;
			padding:0;
			/* padding:1rem; */
			/*box-shadow:  0 0 10px black;*/
			filter:drop-shadow(0 0 5px black);
			background-color: transparent;
			position: absolute;
			cursor: pointer;
			

			&:hover {
				img {
					transform:scale(1.3);
				}
			}

			&.ladyright {
				right:0;
			}
			&.ladyleft {
				img {
					transform:rotate(180deg);
				}
			}

			img {
				width:clamp(30px, 10vw,50px) !important;
				transition: var(--transition);
				transform-origin: center;
				height:auto !important;
				filter:var(--filtermain);
			}
		}
	}

	.lady-item {
		position: absolute;
		height:100%;
		width:100%;
	
		transform: translateZ(0); /* ios fix damit darunterliegende nicht sichtbar */

		
		
		&.empty {
			display: grid;
			place-content: center;
			width:100%;
			background:#555;
			
		}

		.lady-image {
			height:100%;
			width:100%;
			a {
				position: relative;

				img {
					width:100%;
					height:100%;
					display: block;
					object-fit: cover;
					max-width:100%;
					border-radius: var(--borderradius);
				}

				
			}
			
			

			
		}
		

		.overlay-wrapper {
			text-align: center;
				position: absolute;
				display: grid;
				place-content:center;
				align-content: end; 
				bottom:0;
				width:100%;
				height:100%;
			.overlay {
				
				padding:min(5vw,20px);
				margin-bottom:min(2vw,20px); /* Rand nach unten */
				position: relative;
				border-radius: var(--borderradius);
				backdrop-filter: blur(10px);
				background-color:rgba(0,0,0,0.4);
				border:1px rgba(120,120,120,0.4) solid;

				display:flex;
				flex-direction: column;
				gap:0.5rem;


				/*&::before {
					content:'';
					position: absolute;
					top:0;
					left:0;
					width:100%;
					height:100%;
					border-radius: var(--borderradius);
					background-color: rgba(0, 0, 0, 0.5);
				}*/
				h3 {
					/*text-shadow: 0 0 10px rgba(0,0,0,1);*/
					color: white;
                    font-weight: bold;
                    font-size: 2rem;
					margin:0;
					padding:0;
					line-height:1;
				}

				.infos {
					display:flex;
					flex-wrap: wrap;
					gap:1rem;
					justify-content: space-between;

					/* Verifiziert Badge */
					.verify-1 {
						
						display: inline-block;
						&::after {
							position: inherit;
						}
					}
					.locationnice {
						font-size:0.7rem;
						color:var(--cicolor-w50);
						img {
							opacity: 0.7;
						}
					}

					

					
				}

				.lady-content {
					display: flex;
					gap:var(--spacing-small);
					justify-content: space-between;
					align-items: center;
					.badge {
						display: flex;
                        align-items: center;

						background-color: rgba(0,0,0,0.2);
						border: 1px rgba(120,120,120,0.2) solid;
						color: var(--cicolor-w60);
						border-radius: calc(2 * var(--borderradius));
						padding: 5px 10px;
						font-size: 0.7rem;
                        font-weight: bold;
						
					}

					.likes {
						display: flex;

						align-items: stretch;
						/* Spezialisierung */
						.viewcounter {
							span {
								font-size:0.7rem;
								color:var(--textcolor);
							}
							button {
								background:unset;
								img {
									width:2rem;
									filter:var(--filtermain);
									padding:2px;
								}

							}

						}
					}
				}

			}
		}
		
	}
}






/* Shortcode Benutzer-Liste */
.benutzer-liste{
	.status-punkt {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		border: 2px solid #fff;
		&.online {
			background-color: #4caf50; /* grün */
		}
		&.offline {
			background-color: #aaa; /* grau */
		}
	
	}

	.status-text {
		&.online {
			color: #4caf50;
			font-weight: bold;
		}
		&.offline {
			color: #aaa;
		}
	}
}


/* Shortcode Ladyslisting */
.ladyslisting {
	display: flex;
	flex-direction: column;
	gap:1rem;
	margin-top:1rem;
	margin-bottom:1rem !important;

	
	.ladyslisting-item {
		display:flex;
		flex-wrap: wrap;
		gap:2rem;
		align-items:center;
		border-radius:var(--borderradius);
		padding:var(--spacing-medium);

		.ladyslisting-image {
			
			a{
				position: relative;
				display: block;

				
				.image {
					max-width:100%;
					width:100%;
					height:auto;
					display: block;
					aspect-ratio: 1;
					object-fit: cover;
					border-radius: var(--borderradius);
				}
			}
		}
		
			

		.ladyslisting-infos {
			display: flex;
			gap:2rem;
			flex-wrap: wrap;
			font-size:0.8rem;
			pointer-events: none;

			/* Angebote */
			.angebote-listing {
				display: block;
				
				.taglist {
					margin:0; /* kein rand */
				}
			}

			/* Galerie */
			.galerie-wrapper {
					padding:0;
					.lady-galerie {
						display:flex;
						flex-wrap: wrap;
						max-width:90px;
						margin:0;
						gap:0;

					}
					img {
						width:40px;
						margin:2px;
					}
			}

			
		}

		
	}
}



.badgeverified{
	box-shadow: 0 0 5px black;
	position: absolute;
	background: rgb(45 155 0);
	top: -3px;
	height:auto;
	left: var(--borderradius);
	content: "";
	width: 40px;
	aspect-ratio: 1;
	display: block;
	&:after {
		position: absolute;
		top:0;
		left:0;
		content:"";
		width:100%;
		height:100%;
		background:url('/wp-content/themes/ladysapp/assets/images/verified.svg') no-repeat 50% / contain;
	}
}

/* Regionen Auflistung mit Icon */
.region-wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-small);

	>div {
		gap:0.3rem;
		display: flex;
		display: inline-flex;
		align-items: center;
	}
	a {
		text-decoration: none;
	}
	
}


/* Lady Detail-Seite */
.single-lady {

	.wp-block-columns.wp-block-columns-is-layout-flex {
		@media all and (max-width: 781px) {
			gap:unset;
		}

	}

	.wp-block-group.is-style-section-rand{
		margin-block-end: 0;
	}

	.wp-block-group.alignwide:not(.imagename){
		margin-block-end: var(--spacing-big);
	}

	.headerimage {
		width: 100%;
		position: relative;
		display: flex;
        justify-content: center;
		&:after {
			position: absolute;
			width:100%;
			height:100%;
			content:'';
			opacity: 0.5;
			display: block;
			background: #47000d;
			background: var(--linearbackground);
		}

		>img {
			width:100%;
			aspect-ratio:16/9;
			height:auto;
			object-fit:cover;
			display: block;
			height:clamp(200px, 70vh, 60vmax);
		}

		

		.imagename{
			z-index: 1;
			width: 100%;
			position: absolute;
			bottom: var(--spacing-big); /* Rand von unten */
			display: flex;
			gap:1rem;
			align-items: flex-end;
			.imageround{
				width:clamp(80px, 10vw,500px);
				height:clamp(80px, 10vw,500px);
				aspect-ratio: 1;
				
				
				/*filter:drop-shadow(0 0 10px var(--background-w80));*/
				text-shadow:0 0 10px var(--background-w80);
				position: relative;
				img {
					box-shadow:0 0 10px var(--background-w80);
					width:100%;
					height:100%;
					border-radius: 50%;
					overflow: hidden;
					object-fit: cover;
					border:4px var(--cicolor-w60) solid;
				}
				
			}

			.wp-block-heading{
				
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				h1 {
					font-size:2.5rem;
					margin-top:0;
					margin-bottom: 1rem;
					padding:0;
				}

				
			}
		}
	}



	.contactbuttons {
		display: flex;
		flex-direction: column;
		gap:var(--spacing-medium);
		

		a {
			display: flex;
    		align-items: center;
			gap:var(--spacing-small);

			img {
				height:40px;
				width:auto;
				aspect-ratio: 1;
			}
			
		}

		.whatsapp {
			a{
				background-color:var(--green);
				filter: drop-shadow(0 0 10px color-mix(in srgb, var(--green) 40%, transparent));
				&:hover {
					filter: drop-shadow(0 0 5px color-mix(in srgb, var(--green) 80%, transparent));
					background-color: color-mix(in srgb, var(--green) 80%, transparent);;
				}
			}
		}

	}


	

	button#updatecounter {
		transition: var(--transition);
		/*border-radius:50%;*/
		border-radius: var(--borderradius);
		/*background:var(--cicolor);*/
		&:hover {
			transform: scale(1.1);
		}
		
		img {
			display: block;
			margin-top:0.4rem;

		}
		&:disabled {
			opacity: 0.5;
		}
	}

	#map {
		height:300px;
	}

	

	h2 {
		margin-top:0;
		padding-bottom: 0;
		margin-bottom:var(--spacing-big);
	}

}

/* View-Counter mit Herz */
.viewcounter {
	color:var(--cicolor);
	display: inline-block;
	gap:var(--spacing-small);
	font-weight:bold;
	position: relative;
	span {
		font-size:2rem;
		position: absolute;
        left: 0;
        width: 100%;
        top: 0;
        margin: auto;
        display: grid;
        place-content: center;
        height: 100%;
		pointer-events: none;
		z-index: 1;
	}
	button {
		padding:0;
		height:100%;
		img {
			display: block;
			height:auto;
			width: max-content;
            max-width: 6rem;
			padding:1rem;
		}
	}
}

/* Verifiziert Badge */
.verify-1{
	&:after {
		content:'';
		display: block;
		width:clamp(20px, 3vw,40px);
		aspect-ratio: 1;
		position: absolute;
		bottom:0;
		right:0;
		background:url('/wp-content/themes/ladysapp/assets/images/verified.svg') no-repeat 50% / 80%;
		background-color:#239400;
		border-radius: 50%;
		filter:drop-shadow(0 0 5px var(--background-w80));
	}
}


/* Leaflet */

.leaflet-container {
	max-width: 100%;
	max-height: 100%;
	width:100%;
	height:500px;
	max-height:90vh;
	background: #000;

	.leaflet-control-attribution  {
		svg {
			display: none !important;
		}
	}


	.leaflet-marker-icon.bildmarker{
		border-radius:50% !important;
		box-shadow: 0 0 5px black;
		outline:2px var(--cicolor) solid;
		position: relative;
	}


	.leaflet-layer,
	.leaflet-control-zoom-in,
	.leaflet-control-zoom-out,
	.leaflet-control-attribution {
		filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
	}

	.leaflet-popup-content-wrapper {
		background:black;
		a {
			color:var(--cicolor);
		}
	}

	.leaflet-popup-tip{
		background:black;
	}

	.leaflet-interactive {
		stroke-width: 0;
	}
		
}

#map, .map{
	width:100%;
	height:500px;
	max-height:90vh; 
	border-radius: var(--borderradius);
}
.ladysmap.entfernung-wrapper {
	margin-block-start:0;
}


/* Regionen Übersicht */
.region-list-wrapper {
/* item rekursiv mit region-list */

	/* Region - Rekursiv für jede Ebene */
	.region-list {
		list-style: none;
		display: flex;
		padding-left:0;
		flex-wrap: wrap;
		gap:2rem;
		flex-direction:column ; 

		a {
			display: flex;
			align-content: center;
			align-items: center;
			gap:var(--spacing-medium);
		}


	
		
	}

	/* 1. Ebene */
	> .region-list {


		> li {
			padding: 0.2rem 0;
			position: relative;
			display: flex;
			margin-left:50px;
			flex-direction: column;
			justify-content: flex-start;

			&.open {
				> ul {
					display: flex;
					gap:1rem;
					margin-top:1rem;
				}
				.toggleopen {
					transform:rotate(180deg);
				}
			}
			.toggleopen {
				all:unset;
				position: absolute;
				top: 1rem;
				left:0;
				background:var(--cicolor);
				border-radius: calc(2 * var(--borderradius));
				padding:1rem;
				cursor: pointer;
				margin-left:-50px;
				&:after {
					position: absolute;
					content:'';
					display: block;
					width:100%;
					height:100%;
					top:0;
					left:0;
					background:url('/wp-content/themes/ladysapp/assets/images/right.svg') no-repeat 50% / contain;
					transform: rotate(90deg);
				}
			}

			/* 2. Ebene */
			> ul {
				display: none; /* flex mit js klasse open */
				flex-direction:column;
				gap:1rem;

				

				> li {
					/* 3. Ebene */

					> ul {
						flex-direction:column;
						margin-top:1rem;
						margin-left:1rem;

					}
				}
			}

			/* Schweiz */
			&:nth-of-type(3) {
				>ul {
					flex-direction:row; 
				}
			}
		}


		

		
		.count {
			color: #999;
			font-size: 0.85em;
		}

	}




}

/* Regionen Archivseiten */
.region-grid{
	padding-left:0;
	list-style: none;
	/*padding-top:var(--spacing-big);
	padding-bottom:var(--spacing-big);*/
	/* padding-bottom:var(--spacing-big); */
	display:flex;
	flex-wrap: wrap;
	/*flex-direction: column;*/
	gap:var(--spacing-medium);
	@media all and (max-width: 600px) {
		flex-direction: column;
		align-content: flex-start;
	}
	.region-card {
		
		a {
			display:flex;
			gap:var(--spacing-small);
			align-items: center;
			text-decoration: none;
			transition: var(--transition);
			white-space: nowrap;
			&:hover {
				img {
					transform: scale(1.1);
				}
			}

			.region-image {
				img {
					display:block;
					transition: var(--transition);
				}
			}
		}
		
	}
}

/* Beliebteste Regionen */
.regionen-most-wrapper {
	
	.regionen{
		display: flex;
		flex-wrap: wrap;
		gap:var(--spacing-medium);
		
		@media all and (max-width: 600px) {
			flex-direction: column;
		}

		.region {
			
		}

		a {
			display:flex;
			gap:var(--spacing-medium);
			align-items: center;
		}
	}

}





/* Viewcounter */
.viewcounter {
	color:var(--cicolor);
}


.verify{
	&.yes {
	color:green;
		
	}
	&.no {
	color:red;
			
	}
}



/* Ladyslisting Filter */
.filter-wrapper{

	padding:var(--spacing-medium);
	background-color:var(--background-w95);
	border-radius: var(--borderradius);
	border: 1px solid var(--background-w90);

	strong {
		filter:unset; /* Kein roter Schein für Filterüberschriften */
	}

	/* Filter-Label */
	>div {
		margin-bottom: var(--spacing-medium);

		.data-count-wrapper {
			color:var(--cicolor-w60);
			margin-left:0.5rem;
		}
	}

	#ladyslisting-filter {

		display: flex;
		gap:var(--spacing-medium);
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: space-between;

		@media all and (max-width: 600px) {
			flex-wrap: wrap;
		}

		input[type=text], select, textarea {
			font-family:var(--wp--preset--font-family--manrope);
			font-size:1rem;
			height:3rem;
			color:black;
			font-weight:500;
			&::placeholder {
				color: black;
				font-weight:500;
			}
		}

		input[type=text], select{
			padding:0.5rem 1rem;
			border-radius: var(--borderradius);
			border-width:0;
			flex-grow: 1;
			
			@media all and (max-width: 600px) {
				width:100%;
			}
			
			&:has(option[selected]) {
				outline:1px var(--cicolor) solid;
				background-color:var(--cicolor);
				color:white;
			}

			
	
			&:hover,&:focus, &:focus-visible {
				outline:1px var(--cicolor) solid;
			}
		}

		
		
		


		.filter-row {
			display: flex;
			flex-wrap: wrap;
			gap:var(--spacing-small);
			margin-bottom:1vw;
			justify-content: space-between;
			flex-direction: column;
			flex-basis: 500px;

			.searchinput {
				width: stretch;
			}

			&.full {
				/*width:100%;*/
				align-content: stretch;
				align-items: stretch;
				flex-wrap:nowrap;
				flex-direction: column;
				@media all and (max-width: 600px) {
					width:100%;
					flex-direction: unset;
				}
				/* Suchen & Reset Button */
				>button {
					/*text-align: center;
					padding-top:0;
					padding-bottom:0;
					color:white;
					@media all and (max-width: 600px) {
						width:100%;
					}
					*/

					
				}
			}
		}

		/* Selects */
		.select-wrapper {
			display: flex;
			flex-wrap:wrap;
			gap:var(--spacing-small);
		}

		/* Angebote als Checkboxen */ 
		.angebot-checkboxen{
			display:flex;
			gap:var(--spacing-small);
			flex-direction: column;
			min-width: 20vw;
			width: 100%;
            order: 1;

			margin-top:var(--spacing-medium);

			strong {
			}

			.angebot-checkboxen-itemwrapper {
				display:flex;
				flex-wrap:wrap;
				gap:var(--spacing-medium);
				max-width: 560px;
				font-size:1rem;

			}
			
			label:has(input[type=checkbox]) {
				align-items: center;
				color:var(--cicolor-w60);
				display:flex;
				gap:var(--spacing-small);
				cursor: pointer;
				transition: var(--transition);
			

				&:hover,&:focus, &:focus-visible {
					/*outline:1px var(--cicolor) solid;*/
					 input {
						transform: scale(1.1);

					}
				}

				input[type=checkbox]{
					padding:1rem 1rem;
					border-radius: var(--borderradius);
					border-width:0;
					display: grid;
					/*grid-template-columns: 1em auto;*/
					gap: 0.5em;

					/* Add if not using autoprefixer */
					-webkit-appearance: none;
					appearance: none;
					/* For iOS < 15 to remove gradient background */
					background-color: var(--cicolor-10);
					/* Not removed via appearance */
					margin: 0;

					font: inherit;
					width: 2rem;
					height: 2rem;
					border: 2px solid var(--cicolor-w60);
					border-radius: var(--borderradius);
					transform: translateY(-0.075em);

					display: grid;
					place-content: center;

					&::before {
						content: "";
						width: 1rem;
						height: 1rem;
						transform: scale(0);
						transition: 120ms transform ease-in-out;
						box-shadow: inset 1em 1em var(--cicolor-w60);

						transform-origin: center;
						clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
					}
					&:checked::before {
						transform: scale(1);
					}
					
					
					
					
					
					
				}
				
			}
		}


		/* Buttons Suchen und Zurücksetzen */
		.wp-block-buttons {
			gap:var(--spacing-small);
			justify-content: space-between;
            width: min-content;
			display: flex;
			min-width:170px;
			flex-grow:1;
			@media  screen and (max-width:600px) {
				width:100%;
				flex-grow: 1;
			}

			> .wp-block-button {
				display: contents;
				button {
					width:100%;
				}
			}
			
		}

	}

	
}

.ladyslisting-loading {
		min-height:100vh;
		display:block;
		text-align:center;
		font-weight:bold;
		font-size:1.5rem;
		color:var(--cicolor-w60);
	}


button {
	all:unset;
	padding:0.5rem 1rem;
	background-color: var(--cicolor);
	border-radius: var(--borderradius);
	border-color:var(--cicolor);
	border-width:2px;
	cursor: pointer;
	transition: var(--transition);
	&:hover {
		&:after {
			/*opacity: 1;*/
		}
		
		filter:saturate(0.7) brightness(1.5);
	}
	
}



/* Galerie */
.galerie-wrapper {

}

.lady-galerie {
    /*display: grid;
    grid-template-columns: repeat( auto-fill, minmax( 150px, 1fr ) );*/
	display: flex;
	flex-wrap: wrap;
    gap: var(--spacing-medium);
	

	.lady-galerie__item {
		/*flex-grow:1;*/
		flex-basis:150px;

		img {
			display: block;
			width: 100%;
			aspect-ratio: 1;
			object-fit: cover;
			border-radius: var(--borderradius);
			transition: var(--transition);
		}
		&:hover img {
			filter:saturate(110%) brightness(105%);
			transform:scale(1.08);
		}
	}
}


#glightbox-body {
	.goverlay {
		background:black; /* auch keine leichte Transparenz */
	}
	.gbtn{
		border-radius: var(--borderradius);
		background-color:rgba(255, 0, 0, 0.32) ;
		display: grid;
    	place-content: center;
		aspect-ratio: 1;
    	height: auto;
	}
}
/* Galerie Ende */



/* Angebote Liste */
.taglist {
	display:flex;
	gap:var(--spacing-small);
	flex-wrap:wrap;
	font-size: 1rem;
	padding: 0;
	margin:0;
	list-style: none;
	color:var(--cicolor-w60); /* filter passend dazu */
	align-items: center;
	li {
		/*background-color:var(--background-w80);*/
		background: var(--nicebackground);
		border:1px var(--cicolor-40) solid;
		padding:0.5rem 1rem;
		border-radius: calc(var(--borderradius)/2);
		text-decoration: none;
		transition: var(--transition);
		display: inline-flex;
		align-items: center;
		gap:var(--spacing-small);
		> a > img, > img {
			filter: var(--filtermain80);
			width:20px;
			height:20px;
		}

		/* Wenn a enthält, dann kein padding das bekommt dann das a */
		&:has(a){
			padding:0;
			display:block;
			background:unset;
			border:unset;
			
		}

		/* Optionale Verlinkung */
		> a {
			padding:0.5rem 1rem; /* wie li */
			display: inline-flex;
			align-items: center;
			gap:var(--spacing-small); /* wie li */
			transition: var(--transition);
			text-decoration: none;
			border-radius: calc(var(--borderradius)/2);
			background: var(--nicebackground);
			border:1px var(--cicolor-40) solid;
			font-weight: bold;
			transform:scale(1.0001);
			&:hover {
				transform:scale(1.05);
			}
		}
		
	}
	
}


/* Lady-Card Start */
.lady-card {

	> a{
		width:100%;
		display: flex;
		/*background: var(--background-w95);*/
		background: var(--nicebackground);
		border: 1px solid var(--cicolor-40);
		border-radius: var(--borderradius);
		justify-content: space-between;
		overflow: hidden;
		color: var(--textcolor);
		text-decoration: unset;
		padding:var(--spacing-medium);
		gap:var(--spacing-big);
		flex-wrap: wrap;
		
		transition:  var(--transition);
		@media screen and (max-width:600px) {
			flex-wrap: wrap;
		}

		&:hover {
			transform:scale(1.03);
			border-color:var(--cicolor-60);
			box-shadow:0 0 10px var(--cicolor-40);
		}

	}

	
	.lady-card__bild-wrapper {
		position: relative;
		flex-shrink: 0;
		flex-grow: 1;
		max-width:400px;
		margin-left:auto;
		margin-right:auto;

		flex-basis: 150px;

		.lady-card__bild {
			width: 100%;
			height: auto;
			aspect-ratio: 1;
			object-fit: cover;
			display: block;
			border-radius: var(--borderradius);
			@media screen and (max-width:600px) {
				/*aspect-ratio: 16/9;*/
			}
		}
	}

	.lady-card__badge {
		box-shadow: 0 0 5px black;
		position: absolute;
		background: rgb(45 155 0);
		top: -3px;
		height:auto;
		left: var(--borderradius);
		content: "";
		width: 40px;
		aspect-ratio: 1;
		display: block;
		&:after {
			position: absolute;
			top:0;
			left:0;
			content:"";
			width:100%;
			height:100%;
			background:url('/wp-content/themes/ladysapp/assets/images/verified.svg') no-repeat 50% / contain;
		}
	}

	.lady-card__inhalt {
		display: grid;
		grid-template-columns: repeat(2,  auto);
		grid-template-rows: repeat(2,  auto);
		grid-column-gap: 0px;
		grid-row-gap: 0px;
		gap:var(--spacing-medium);
		align-items: start;
		max-width: 600px;

		flex-basis: 600px;

		
		color:var(--cicolor-w60);

		@media  screen and (max-width:599px) { 
			display: flex;
			flex-direction: column;
			gap:3rem;
			max-width:unset;
		}
		@media  screen and (min-width:600px) {
			padding-left:0;
		} 

		.lady-card__kopf {
			grid-area: 1 / 1 / 2 / 2;

			display: flex;
			align-items: center;
			gap:var(--spacing-small);
			color:var(--textcolor);

			h3{
				padding:0;
				margin:0;
				font-size:2.2rem;
			}

			.lady-card__whatsapp {
				display: flex;
			}
		}
		.lady-card__angebote {
			grid-area: 1 / 2 / 3 / 3;

			display: flex;
			gap:var(--spacing-medium);
			list-style:none;
			/*margin: 1rem 1rem;*/
			padding:0;
			flex-wrap: wrap;
			justify-content: flex-end;

			/*Spezialisierung */
			.taglist {
				justify-content: flex-end;
				@media  screen and (max-width:600px) { 
					justify-content: unset;
				}
			}
				
		}

		.lady-card__region{
			grid-area: 2 / 1 / 3 / 2;

			.region-wrapper {
				font-size:1rem;

				img {
					filter: var(--filtermain80);
				}
			}
		}
		
		
	}
}


/* Lady-Card Ende */



/* Breadcrumb */
.region-breadcrumb{

		font-size:0.9rem;
		font-weight:bold;
		color: var(--cicolor-40);
		text-transform: uppercase;
	
	a {
		color: var(--cicolor-60);
		border-bottom: 2px transparent solid;
		text-decoration: none;
		transition: var(--transition);
		padding-bottom:0.3rem;
		&:hover {
			border-color:var(--cicolor-40);
		}
	}

}


/* Location Anzeige mit Pin, Stadt, Land */
.locationnice{
	display: flex;
	flex-wrap: wrap;
	font-size:1rem;
	align-items: center;
	gap:5px;
}

/* Swiper */
.swiper {
  width: 100%;
  min-height: 50px;
  max-height:500px;
	
  padding-left:var(--spacing-big);
  padding-right:var(--spacing-big);

  --swiper-pagination-bullet-horizontal-gap:var(--spacing-small);
  --swiper-pagination-bullet-inactive-color:var(--cicolor);
  --swiper-theme-color:var(--cicolor);


  

}

/* Beliebteste Ladys */
.ladys-most-wrapper {

	/* Slider über volle Breite der Seite 
	.entry-content .wp-block-group:not(.alignfull):has(&) {
		max-width:unset ;
		padding-left:unset ;
		padding-right:unset ;
		.wp-block-heading {
			margin:auto;
			max-width:1100px ;
			padding-left: var(--spacing-big);
    		padding-right: var(--spacing-big);
		}
	}*/

	.swiper-slide {
		text-align: center;
		margin-top: 2vmax; /* Rand für Hover*/
		margin-bottom: 2vmax; /* Rand für Hover */
		/*margin-bottom: 5vmax;*/ /* Pagination unter Items setzen */
		&:hover {
			transform:scale(1.05);
		}
	}

	a {
		color:var(--cicolor-w80);
		transition: var(--transition);

		img {
			max-width:170px;
			aspect-ratio: 1;
			width:100%;
			height:auto;
			object-fit: cover;
			transition: var(--transition);
			border-radius: var(--borderradius);
		}
		

		h3 {
			text-align: center;
			margin:0;
			padding:0;
		}

	}

}



/* Select2 */
.select2-container {

	width:auto !important;
	flex-grow:1;

	&.select2-container--open{
		.select2-selection--single {
			background: unset;
    		border: unset;
		}
	}

	.selection {
		.select2-selection--single{
			border-radius: var(--borderradius);
			height:3rem;

			@media screen and (max-width: 600px) {
				min-width:230px;
			}

			.select2-selection__arrow {
				height:3rem;
			}

			.select2-selection__rendered{
				border-radius: var(--borderradius);
				font-size:1rem;
				line-height:3rem;
				background-color:white;
				padding-left:1rem;
				color:black;
				font-family: var(--wp--preset--font-family--manrope);
				font-weight:500;
			}
			
		}
	}

	.select2-search--dropdown{
		margin-left:var(--spacing-small);
		margin-right:var(--spacing-small);
	}
	
	.select2-dropdown--above{
		/*border-radius: var(--borderradius);*/
	}
	

	.select2-dropdown--below{
		/*border-radius: var(--borderradius);*/
		/*position: relative;*/
		.select2-search--dropdown{
			/*margin-top: -1rem;*/
			height:3rem;
		}
	}

	
	
	
	
	.select2-results{
		/*min-width:40vw;*/
		width:100%;
		/*left:0;*/
		/*position: absolute;*/
		/*padding-bottom:var(--borderradius);*/
		/*border-bottom-left-radius: var(--borderradius);
		border-bottom-right-radius: var(--borderradius);*/

		.select2-results__options{
			/*border-radius: var(--borderradius);*/
			>li {
				flex-basis:50px;
				color:black;
				background:white;
				white-space: nowrap;
				padding:0.2rem 1rem;
				transition: var(--transition);
				font-size:1rem;
				font-weight:500;
				&:hover {
					background-color:var(--cicolor);
					color:white;
				}
			}
		}
	}
}


/* Angebote Ladys */
.angebote-ladys {
	display:flex;
	flex-direction: column;
	align-items: flex-start;
	gap:var(--spacing-big);
	padding-left:0;
		
	li {
		all:unset;
		.term-link{
			display: block;
			>div {
				font-size:2rem;
				font-weight:bold;
				display: flex;
				gap:var(--spacing-medium);
				margin-bottom:var(--spacing-medium);

				img {
					width:40px;
					height:40px;
					filter:var(--filtermain80);
				}
			}
			
			
		}
		&:has(a) {
			all:unset;
		}

		/* Wrapper */
		.ladys-mit-term {
			display: flex;
			width:100%;
			padding-left:0;
			flex-direction: row;
			gap:var(--spacing-medium);
			flex-wrap: wrap;

			.boxenrand {
				display: flex;
				flex-direction: column;
				gap:var(--spacing-small);
				text-align: center;
				position: relative; /* für badge */
			}
			img {
				display: block;
			}
			h3 {
				margin:0;
				padding:0;
			}
		}
		/*
		.ladyslisting {
			width:100%;
			padding-left:0;
			flex-direction: row;
			gap:var(--spacing-big);
			flex-wrap: wrap;
			.ladyslisting-item {
				background:var(--nicebackground);
				flex-direction: column;
				gap:var(--spacing-small);
				border: 1px var(--cicolor-40) solid;

				img {
					display: block;
				}
				h3 {
					margin:0;
					padding:0;
				}
				
			}
		}
		*/
	}
}


/* OTP Login */
#lwp_login {
	background-color:unset;
	color:var(--textcolor);

	font-size:1rem;

	label {
		font-size:1.2rem;
		font-weight: bold;
	}
	
	.submit_button{
		background-color:var(--cicolor);
		border-color: var(--cicolor);
		border-radius: var(--borderradius);
	}

	.iti__flag-container{
		padding-left: 1rem !important;
	}

	#lwp_phone {
		border-radius: var(--borderradius);
		padding-left: 80px !important;
		height:40px;
	}
	.iti__country-name{
		color:var(--cicolor);
	}
}