/*
Theme Name: GymBeam Blog theme #24design
Theme URI: https://gymbeam.sk/blog
Author: GymBeam devs
Author URI: https://github.com/gymbeam
Version: 2.4.0
Description: GymBeam blog theme #24design
License: GNU General Public License v2.0 & Apache License 2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html http://www.apache.org/licenses/LICENSE-2.0
Text Domain: GymBeam
*/

#floating-notices-wrapper{
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 1020;
}
body.admin-bar #floating-notices-wrapper{
	top: 48px;
}
.floating-notice{
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 20px 10px 12px;
	background: #fae5e5;
	color: #e02b27;
}
.floating-notice.success{
	background: #e5efe5;
	color: #006400;
}
.floating-notice::before{
	content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24" fill="none" stroke="%23e02b27" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><path d="M12 9v4"></path><path d="M12 17v.01"/></svg>');
	font-size: 0;
}
.floating-notice.success::before{
	content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 28 28" fill="%23006400"><path d="M26.652 2.475c-.064.02-.155.056-.204.082-.048.028-3.943 2.66-8.657 5.853a2284.717 2284.717 0 0 1-8.596 5.808c-.017 0-1.682-1.26-3.702-2.805C3.471 9.869 1.767 8.58 1.705 8.55a.962.962 0 0 0-1.093.185c-.28.282-.368.755-.202 1.1.028.057 1.833 3.047 4.01 6.642 3.033 5.01 3.984 6.563 4.07 6.653a.86.86 0 0 0 .252.181c.395.185.795.114 1.118-.202.075-.073 1.799-1.915 3.825-4.092 2.028-2.177 5.995-6.432 8.813-9.454 2.82-3.022 5.154-5.54 5.189-5.593a.859.859 0 0 0 .157-.549c-.002-.26-.048-.397-.198-.598a.934.934 0 0 0-.714-.372.943.943 0 0 0-.28.024z"/></svg>');
}

.ajaxForm.loading{
	pointer-events: none;
}

.newsletter-form{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 20px 0 5px;
	background: #000;
	color: #fff;
}
.newsletter-form:is( .source-blog, .source-recipes ){
	gap: 15px;
	padding: 15px;
}
.newsletter-form-text{
	width: 100%;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.142857;
}
.newsletter-form-text br{
	display: none;
}
.newsletter-form-input{
	position: relative;
}
.newsletter-form-input button{
	position: absolute;
	z-index: 1;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
}
.newsletter-form-tooltip{
	pointer-events: none;
	opacity: 0;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 250px;
	padding: 16px 12px;
	background: #fff;
	border: 1px solid #bbbbbb;
	font-size: 14px;
	text-align: left;
}
.newsletter-form-input{
	flex-grow: 1;
}
.newsletter-form-input button:hover .newsletter-form-tooltip{
	opacity: 1;
}
.newsletter-form-input input{
	width: 100%;
	height: 30px;
	margin: 0;
	padding: 0 12px;
	border: 0;
	font-size: 14px;
}
.newsletter-form-input input::-moz-placeholder{
	color: #9ca3af;
	opacity: 1;
}
.newsletter-form-input input::placeholder{
	color: #9ca3af;
	opacity: 1;
}
.newsletter-form .btn{
	padding: 8px 20px;
	font-size: 14px;
}
.newsletter-form-acceptance{
	text-wrap: balance;
}
.ajaxForm.loading .newsletter-form-input, .ajaxForm.loading .btn{
	opacity: 0.5 !important;
}

@media (min-width: 680px){
	.newsletter-form-text{
		width: auto;
		text-align: right;
	}
	.newsletter-form-text br{
		display: block;
	}
	.newsletter-form-input{
		flex-grow: 0;
	}
	.newsletter-form-input input{
		width: 220px;
	}
	.newsletter-form-acceptance{
		display: none;
	}
}

@media (min-width: 768px){
	.newsletter-form-input input{
		width: 300px;
	}
}

@media (min-width: 1023px){
	.newsletter-form-input input{
		width: 486px;
	}
}

@media (max-width: 1110px){
	.newsletter-form.source-recipes .newsletter-form-input input{
		width: 300px;
	}
}

@media (min-width: 680px) and (max-width: 940px){
	.newsletter-form.source-recipes .newsletter-form-text{
		width: 100%;
		text-align: center;
	}
}

@media (max-width: 679px){
	.newsletter-form.source-recipes .newsletter-form-input input{
		width: 100%;
	}
}