:root {
	--sbhbt-loyalty-bg: #F5F4F2;
	--sbhbt-loyalty-padding: 0;

	--sbhbt-loyalty-font-size: 16px;
	--sbhbt-loyalty-line-height: 22px;
	--sbhbt-loyalty-title-font-size: 24px;
	--sbhbt-loyalty-title-line-height: 32px;
 

	--sbhbt-loyalty-fields-height: 30px;
	--sbhbt-loyalty-fields-background-color: #ffffff;
	--sbhbt-loyalty-fields-color: #000000;
	--sbhbt-loyalty-fields-border-color: #000000;
	--sbhbt-loyalty-fields-border-size: 1px;
	--sbhbt-loyalty-fields-border-radius: 4px;

	
    --sbhbt-loyalty-button-bg-color: #0073aa;
    --sbhbt-loyalty-button-padding: 10px 15px;
    --sbhbt-loyalty-button-border-radius: 4px;
    --sbhbt-loyalty-button-border-size: 1px;
	--sbhbt-loyalty-button-height: 40px;
    --sbhbt-loyalty-button-border-color: #0073aa;
    --sbhbt-loyalty-button-text-color: #ffffff;
	--sbhbt-loyalty-button-font-size: 16px;
	--sbhbt-loyalty-button-line-height: 22px;

	--sbhbt-loyalty-button-border-color-hover: #0073aa;
	--sbhbt-loyalty-button-bg-color-hover: #0073aa;
    --sbhbt-loyalty-button-text-color-hover: #ffffff;



}


.sbhbt-container * {
    box-sizing: border-box;
    font-family: var(--sbhbt-loyalty-en-font-family);
}

html[lang="he"] .sbhbt-container * ,
html[lang="he-IL"] .sbhbt-container * 
{
    font-family: var(--sbhbt-loyalty-he-font-family);
}

.sbhbt-container *{
	box-sizing: border-box;
}
.sbhbt-container {
	background-color: var(--sbhbt-loyalty-bg);
	padding: var(--sbhbt-loyalty-padding);

}
 
.sbhbt-container input[type="text"],
.sbhbt-container input[type="email"],
.sbhbt-container input[type="password"],
.sbhbt-container input[type="tel"],
.sbhbt-container input[type="date"] {
	height: var(--sbhbt-loyalty-fields-height);
	line-height: var(--sbhbt-loyalty-fields-height);
	background-color: var(--sbhbt-loyalty-fields-background-color);
	color: var(--sbhbt-loyalty-fields-color);
	border-color: var(--sbhbt-loyalty-fields-border-color);
	border-width: var(--sbhbt-loyalty-fields-border-size);
	border-style: solid;
	border-radius: var(--sbhbt-loyalty-fields-border-radius);
}
button#loyalty_submit{
	font-size: var(--sbhbt-loyalty-button-font-size);
 


	height: var(--sbhbt-loyalty-button-height);
	line-height: var(--sbhbt-loyalty-button-height);

background-color: var(--sbhbt-loyalty-button-bg-color);
padding: var(--sbhbt-loyalty-button-padding);
border-radius: var(--sbhbt-loyalty-button-border-radius);
border: var(--sbhbt-loyalty-button-border-size) solid var(--sbhbt-loyalty-button-border-color);
color: var(--sbhbt-loyalty-button-text-color);
}

@media (hover: hover){
	button#loyalty_submit:hover{
		border-color: var(--sbhbt-loyalty-button-border-color-hover);
		background-color: var(--sbhbt-loyalty-button-bg-color-hover);
		color: var(--sbhbt-loyalty-button-text-color-hover);
	}
}


.sbhbt-container input {
	font-size: var(--sbhbt-loyalty-font-size);
}

.sbhbt-field-message,
.sbhbt-err_handler_general,
.sbhbt-container p {
	font-size: var(--sbhbt-loyalty-font-size);
	line-height: var(--sbhbt-loyalty-line-height);
}

.sbhbt-container h2 {
	font-size: var(--sbhbt-loyalty-title-font-size);
	line-height: var(--sbhbt-loyalty-title-line-height);
}

 

.sbhbt-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	position: relative;
}
.sbhbt-fields  > div{
	flex:0 0 calc(50% - 10px);
	width: calc(50% - 10px);
}
.sbhbt-fields  > div.sbhbt-field-checkbox,
.sbhbt-fields  > div.sbhbt-field-password
{
	flex:0 0 100%;
	width: 100%;
}
.sbhbt-container p {
margin:0 0 5px 0;
}
.sbhbt-container input[type="text"],
.sbhbt-container input[type="password"],
.sbhbt-container input[type="email"],
.sbhbt-container input[type="tel"],
.sbhbt-container input[type="date"] {
	box-shadow: none;
	width: 100%;
	padding: 0 10px;
}
 
.sbhbt-field-checkbox label p{
	margin:0;
}
.sbhbt-field-checkbox label{
	display: flex; gap: 10px; align-items: flex-start;
}

.sbhbt-err_handler_general{
	margin: 30px auto 0;
	font-weight: 700;
	color:red;
}
button#loyalty_submit{  
    box-shadow: none; 
    width: 100%;
    margin: 30px auto 0;
    border-radius: 0;
    font-weight: 400;
    display: block;
}

.sbhbt-field{
	position: relative;
}
.loyalty-date-calendar{
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	width: 100%;
	height: 100%;
	z-index: 50;
	background-color: #fff;

}

.loyalty-date-calendar .calenca--inline{
	width: 100%;
}
.loyalty-date-calendar .calenca--inline .calenca__dialog {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12); 
}


.loyalty-date-calendar .calenca--inline .calenca__nav-btn--next-year, 
.loyalty-date-calendar .calenca--inline .calenca__nav-btn--prev-year {
    display: inline-flex;
}
 
.loyalty-date-calendar{
	display: none;
}
.loyalty-date-calendar.active{
	display: block;
}

.loyalty-calendar-icon-container{
	position: relative;
}

.sbhbt-container .loyalty-calendar-icon-container input[type="text"]{
	padding-inline-start: 40px;
}
.loyalty-calendar-icon{
	inset-inline-start: 10px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	fill: #000;
}

dialog.sbhbt-loyalty-dialog{
	opacity: 0; visibility: hidden;

	width: 100%;
	height: 0;
	position: fixed;
	top:0; right: 0;
	background-color: rgba(0, 11, 82, 0.25);
	align-items: center; justify-content: center;
	display: flex;
	transition: opacity 0.6s cubic-bezier(0.33, 1, 0.68, 1);
	border: 0; 
	max-width: 100%;
	max-height: 100%;
}

dialog.sbhbt-loyalty-dialog[open]{
	opacity: 1; 
	z-index: 20000;
	height: 100vh;
	visibility: visible;
} 

.sbhbt-loyalty-dialog-content{
	border-radius: 5px;
    padding: 3rem;
    margin-bottom: 5rem;
    background-color: #fff;
    box-shadow: 0px -2px 17px 0px rgba(0, 11, 82, 0.06), 0px 20px 40px 0px rgba(0, 0, 0, 0.05);
	transform: translateY(5rem);
	transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
}

dialog.sbhbt-loyalty-dialog[open] .sbhbt-loyalty-dialog-content{
	transform: translateY(0);
} 

@media (max-width: 768px){
	.sbhbt-fields > div {
		flex: 0 0 100%;
		width: 100%;
	}
}