@import url("website/scripts/normalize.min.css");
@import url(https://fonts.googleapis.com/earlyaccess/opensanshebrew.css);
@import url("css_vars.css");

:root {
    --font-main: 'Open Sans Hebrew', Arial, Helvetica, sans-serif;
    --color-text:#18375F;
}

HTML {font-size: 100%; /* IE hack */}
*{margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; zoom: 1;}
*{box-sizing: border-box;}
*[aria-hidden="true"]{display: none;}
*{-webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-tap-highlight-color: transparent;}
*:focus-visible{outline: 1px dashed #2c2e2f; outline-offset: 1px;}

/* -------- -------- -------- -------- -------- -------- -------- -------- -------- -------- */
BODY{direction: rtl; font-weight: 400; font-family: 'Open Sans Hebrew', Arial, Helvetica, sans-serif; background-color: #ffffff; color: var(--color-text);}
IMG {border: 0px;}
button{cursor: pointer;font-family: 'Open Sans Hebrew', Arial, Helvetica, sans-serif; }
input, select, textarea{font-family:'Open Sans Hebrew', Arial, Helvetica, sans-serif; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
.clear {display: block; overflow: hidden; clear: both; float:none !important; font-size: 1px; line-height: 1px !important; height: 0px !important; margin: 0px !important; padding: 0px !important;}
.centeredContent{padding: 0px 40px; width: 100%; max-width: 1250px; margin: 0px auto;}
h1, h2, h3, h4, h5, strong, B{font-weight: 600; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
ul, li{list-style: none;}
a{text-decoration: none; color: #2c2e2f;}
a:hover, a:focus{text-decoration: underline;}
strong{font-weight:600}

.error{color:var(--color-fail-dark); background-color:var(--color-fail-extra-light)}
.success{background-color:var(--color-ok-extra-light); color:var(--color-ok)}
.centered {text-align:center; margin-left:auto; margin-right:auto}
/* -------- -------- -------- -------- -------- -------- -------- -------- -------- -------- */
.rel{position:relative}
.blockMobileOnly{display:none}
@media screen and (max-width: 960px) {
    .hide_on_small-screen{display: none}

}
.miniModal-container .modal-inner{max-width:940px !important;width:95vw !important}
a.text_link{font-weight:600; color:var(--color-light-dark-blue); text-decoration: none;cursor: pointer; display: inline;border-bottom: 0.3em solid white; border-bottom-color: transparent; transition-timing-function: ease-in-out; transition-duration: .2s;}
a.text_link:hover{text-decoration: none;border-bottom-color: var(--color-light-blue-text)}

.bouncer {animation-duration: 2s; animation-iteration-count: 5; animation-name: bounce-4; animation-timing-function: ease;}
details.bouncer_dt:not([open]) {
  animation: bounce-4 2s ease 5;
}
@keyframes bounce-4 {
    0%   { transform: scale(1,1)    translateY(0); }
    10%  { transform: scale(1.1,.9) translateY(0); }
    30%  { transform: scale(.9,1.1) translateY(-20px); }
    50%  { transform: scale(1,1)    translateY(0); }
    100% { transform: scale(1,1)    translateY(0); }
}

/***** MAIN PAGE ****/
/*Header*/
.topLogo{position:absolute;top:0;right:20px;z-index:10}
.topLogo .logoBlob{position:absolute;height:90px;}
.topLogo .logoImg{position:absolute;z-index:2;height:40px; top:14px; right:25px}

.topNotice{position:absolute;top:20px;left:40px;z-index:10;box-shadow: var(--box-shade-down);}
.topNotice { border: 1px solid var(--color-dark-blue); border-radius: 5px; padding: 0;max-width: 300px;  background-color: #d7e5fc; overflow: hidden; transition: all 0.3s ease; }
.topNotice summary {font-size:1em; background-color: var(--color-dark-blue); color: white; padding: 12px 16px; cursor: pointer;  font-weight: bold; list-style: none; user-select: none; transition: background-color 0.3s ease; }
.topNotice summary:hover { background-color: var(--color-dark-pink); border-color:var(--color-dark-pink) }
.topNotice summary::marker { display: none; }
.topNotice[open] summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.topNotice h4{margin-bottom: 10px}
.topNotice div { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; padding: 0 16px; background-color: white; }
.topNotice[open] div { max-height: 500px; padding: 12px 16px; }
.topNotice ul { margin: 0; padding-right: 20px; list-style-type: disc; }
.topNotice li { margin-bottom: 5px; list-style-type: disc; }
.topNotice .help_note{margin-top:10px; border-top:1px solid var(--color-grey-text); padding-top:10px; font-size:0.95em}
@keyframes rotate180 { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(0deg); } }
.closeBtn { position: absolute; bottom: 12px; left: 12px; background-color: #bc8191; color: white; border: none; border-radius: 50%; width: 32px; height: 32px; font-size: 20px; line-height: 30px; text-align: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.2); transition: background-color 0.3s ease; overflow: hidden; }
.closeBtn:hover { background-color: #a56778; }
.closeIcon { display: inline-block; transition: transform 0.5s ease-in-out; transform-origin: center center; }
.closeBtn:hover .closeIcon { animation: rotate180 0.5s ease-in-out; }

@media screen and (max-width: 480px) {
    .topNotice{position:absolute;top:10px;left:15px}
    .topNotice summary {font-size:0.8em;padding: 5px 9px;}
}

.mainImage{position: relative;max-width:100vw;max-height:100vh}
.mainImage>picture{width:100%;height:100%}
.mainImage img{display: block;width: 100%;height: 300px;object-fit: cover;object-position: center;}
.mainText{position:absolute;top:110px; right:40px; font-size:24px; line-height:26px;max-width:40%; width:450px}
.mainText p{margin-top:7px;font-size:16px; line-height:22px}

@media screen and (max-width: 670px) {
    .blockMobileOnly{display:block}
    .mainImage img{height: 100vh;object-position: bottom;}
    .mainText{width:auto;max-width:none;margin:0 auto}
}

h1{margin:0 0 10px 0;font-size:32px;font-weight:400}

/*Plans*/
.plansContainer{display:flex;justify-content:space-around;flex-wrap: nowrap;width:90%; max-width:1920px;margin:40px auto 20px;}
.price-ribbon{min-height:20px; background-color:var(--color-dark-blue); color:var(--color-peach); text-align:center; font-weight:bold; font-size:1.2rem; line-height:1.2; padding:2px 20px}
.price-ribbon.top-ribbon{margin:auto;background-color: var(--color-light-blue);color: var(--color-dark-blue);}
.plan-ribbon{display: none}
.planDiv{text-align: center; width:20vw}
.planDiv>strong{display:none}
.blobContainer {position: relative; width: fit-content;margin: 0 auto;}
.blobContainer>img {display: block;height: 150px;}
.blobOverlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;
  display: flex;flex-direction: column; align-items: center; justify-content: center; pointer-events: none;}
.hedgeIcon{transform: scaleX(-1);}
.hedgeIcon svg{height:35px;fill:var(--color-text);}
.planTitle{direction:ltr;font-weight:600;text-align:center;line-height:1}
.planBody{font-size:1.15rem;margin-top:20px}
.planPrice{font-weight:600; font-size:18px; margin:10px auto 5px;}
a.priceListOpener{text-decoration:none;font-weight:600;font-size:15px;color:var(--color-text);display:inline-block;border-bottom:1px solid;line-height:13px;margin:10px auto}
a.priceListOpener:hover{border-bottom-width:2px;}
.planText>span{font-size:0.85em}

.btnContainer{margin-top:10px}
.desktopBtn{text-align: center}
a.btn_go{display:inline-block;box-shadow:var(--box-shade-down);background-color:var(--color-light-blue);color:var(--color-dark-blue);text-decoration:none;font-weight:600;text-align:center;font-size:14px;line-height:35px;height:35px;padding:0 18px; border-radius:4px}
a.btn_go{height:45px; line-height: 35px; padding:4px 20px; font-size:1.2rem;background-color: var(--color-dark-blue);color:white;transition: background-color 0.3s ease;}
.desktopBtn a.btn_go{margin-top:20px}
.desktopBtn a.btn_go:hover{background-color:var(--color-dark-pink);}
.planDiv a.btn_go{background-color:var(--color-dark-blue);color:white}
@media screen and (max-width: 670px) {
    .hide_on_mobile{display: none}
    .plansContainer{display: block}
    .top-ribbon{display: none}
    .plan-ribbon{position:inherit; display: block; margin:5px 0 20px 0;font-weight:normal}
    .planDiv{width:auto;margin-bottom: 30px; border-bottom: 1px solid var(--color-grey-text);  padding-bottom: 20px;}
    .planDiv>strong{display:block;position:absolute; transform: rotate(39deg);top: 38px; left: calc(50% - 22px); z-index: 2;background-color: var(--color-dark-blue);color: white;padding: 4px 10px;line-height: 1.2rem;}
    }

/***** FORM PAGE ****/
.mainContainer{ margin:110px 40px 0 40px}
.formContainer{ margin:0 auto 50px auto; background-color:var(--color-grey-background); padding:20px;}

.mainContainer h2, .mainContainer h3{color:var(--color-dark-pink);}
.mainContainer h2{text-align:center}
.mainContainer h3{ font-weight:600}

/*Progress Bar*/
.progress-container { display: flex; justify-content: space-between; position: relative; margin: 50px auto; max-width: 600px; padding: 0 20px; }
.step { text-align: center; flex: 1; position: relative; z-index: 1; }
.step:not(:last-child)::after { content: ''; position: absolute; top: 20px; right: 50%; width: 100%; height: 2px; background-color: #ddd; z-index: 0; }
.step.prev:not(:last-child)::after { background-color: var(--color-dark-blue); }
.circle {position:relative; width: 40px; height: 40px; background-color: #ddd; border-radius: 50%; margin: 0 auto; line-height: 40px; font-weight: bold; color: var(--color-dark-blue); transition: background-color 0.3s; z-index: 1; position: relative; }
.label { margin-top: 8px; font-size: 14px; color:var(--color-text) }
.step.active .label{font-weight:600; color:var(--color-dark-pink)}
.step.active .circle, .step.prev .circle { background-color:  var(--color-dark-blue); color:white}
.step.active .circle {background-color:var(--color-dark-pink);color:white}
.step.completed .circle::after { content: "✓"; position: absolute; top: -10px; right: -40%; transform: translateX(-50%); background-color: var(--color-ok-light); color: white; width: 20px; height: 20px; font-size: 14px; font-weight: bold; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px white; z-index: 2; }

.progress-container a{cursor: pointer}
.progress-container a:hover{text-decoration:none}

/*Btn style*/
.btn{display:inline-block; white-space: nowrap; border:none; border-radius:5px; background-color:var(--color-dark-blue);color:white;font-weight:600; padding:5px 12px; font-weight:1.3rem}
.btn:hover{background-color:var(--color-dark-pink); text-decoration:none;}

/*Prev Next*/
.prevNext{display:flex;justify-content:space-between;padding:20px 0; margin-top:30px}
.btn_prev, .btn_next{width:150px; height:35px; font-size:1.2rem}
.btn_prev{background-color:#bdd4fa; color:var(--color-dark-blue);font-weight:400;text-align:start;}
.btn_prev i{margin-left:10px}

.btn_next{text-align:end;}
.btn_next i{margin-right:10px}
.btn_prev:hover{background-color: var(--color-light-blue-text);font-weight:600}


/*Input Fields*/
.field-group {display:inline-block;position: relative;margin: 1.5rem 0 0.5rem 0.5rem;}
.field-group span.error{position:absolute;color:red;font-size:0.8rem}
input {height:55px; padding: 1rem 0.75rem 0.25rem 0.75rem; font-size: 1rem; border: 1px solid #cacaca; border-radius: 0.375rem; background-color: white;}
input.err{border-color:red}
input.crossed{text-decoration: line-through}
label { position: absolute; top:0; right: 0.75rem; padding: 0 0.25rem; color: var(--color-text); font-size: 1rem; pointer-events: none; transition: 0.2s ease all; }
input:required + label::after {content: " *";color: red;}

/* Floating effect */
input:focus + label,
input:enabled:not(:placeholder-shown) + label,
input.autofilled + label{ top: -1.2rem; right: 0.5rem; font-size: 0.85rem; color: var(--color-text);text-align: right;  line-height: 1;}
input::placeholder {color: transparent;}
input:disabled{color:var(--color-dark-blue)}

/* Focus style */
input:focus { border-color: var(--color-light-blue-text); outline: none;}

/*DropDown style*/
.dropdown-group { direction: rtl; position: relative; display: inline-block; margin: 1.5rem 0 0.5rem 0.5rem;}
.dropdown-group.xl{min-width:300px}
.dropdown-group select { width: 100%; height:55px; padding: 10px 40px 10px 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 6px; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: #fff; cursor: pointer; }
.dropdown-group i { position: absolute; left: 20px; top: 40px; transform: translateY(-50%); pointer-events: none; font-size: 14px; color: #666; }
label.dropdownLabel{right:0;top:-1.4rem; white-space: nowrap;font-size:0.85rem; padding:0.1rem 0.7rem}
label.dropdownLabel:after{content: " *"; color: red;}

/*Checkbox style*/
.checkbox-group { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0.5rem 0 0.5rem 0.4rem; direction: rtl; font-size: 1rem; color: var(--color-text); }
.checkbox-group input[type="checkbox"] { appearance: none; width: 25px; height: 25px; border: 1px solid #cacaca; border-radius: 0.25rem; background-color: #fff; cursor: pointer; position: relative; transition: all 0.2s ease; padding:0}
.checkbox-group input[type="checkbox"]:checked { background-color: var(--color-dark-pink); border-color: var(--color-dark-pink); }
.checkbox-group input[type="checkbox"]::after { content: ''; position: absolute; top: 3px; right: 8px; width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; transition: opacity 0.2s ease; }
.checkbox-group input[type="checkbox"]:checked::after { opacity: 1; }
.checkbox-group label {position: static;padding: 0;color: var(--color-text); pointer-events: auto; cursor: pointer;}
.checkbox-group input[type="checkbox"]:checked + label {color: var(--color-dark-pink); font-weight: bold;}

/*School Form (step 1)*/
@media screen and (max-width: 670px) {
    .field-group.contact-form{width:100%}
    .field-group.contact-form input{width:100%}
}

#schoolDetails{text-align:center;border-top:1px solid var(--color-grey-text); padding:20px 0}
#schoolDetailsFields{display:flex;flex-wrap: wrap; justify-content: center; gap:20px}
#schoolDetailsFields .field-group{margin:0}
.quoteOrOrder{display: flex; justify-content: center; gap: 40px; padding:30px 10px;border-top: 1px solid var(--color-grey-text);}
.quoteOrOrder .btn{width:180px; height:35px; font-size:1.1rem; line-height:1.1rem}
#goto_download_quote{background-color: var(--color-light-blue-text)}
#goto_download_quote:hover{background-color: var(--color-dark-pink)}

#step1_btns{margin-top:20px;display: flex; justify-content: center; gap: 30px;}
#step1_btns .btn{width:180px; height:35px; font-size:1.1rem; line-height:1.1rem}
#step1_btns.goto_order #download_quote_file{display:none}
#step1_btns.goto_quote .submit1{border:1px solid var(--color-dark-blue); background-color:white; color:var(--color-dark-blue)}
#step1_btns.goto_quote .submit1:hover{background-color: var(--color-dark-pink);border-color: var(--color-dark-pink); color:white}

#step1_msg{text-align: center;}

@media screen and (max-width: 480px) {
    .quoteOrOrder, #step1_btns{justify-content: center; gap: 15px; flex-direction: column-reverse; align-items: center;}
}

/*Area Form (step 2)*/
fieldset{border:none}
.moneyField{direction:ltr}
.moneyField.minus{background-color: var(--color-ok-extra-light);}
.moneyField.plus{background-color: var(--color-pink);}
.areaRow { display: flex; flex-wrap: wrap; gap: 0; width: 100%;}
.areaRow fieldset { display: flex; gap: 0px; width: 50%; min-width: 200px; border-top:2px solid white}
.areaRow.smallClassesRow fieldset{border-top:none}
.areaRow fieldset:first-child>div { flex: 1 1 0;padding: 0 10px 10px 10px; text-align: center; }
.areaRow fieldset:last-child>div { flex: 1 1 0; padding: 0 10px; text-align: center;}
.areaRow fieldset input{width:100%}
.areaRow fieldset .field-group.sm{max-width:90px}
.areaRow fieldset .field-group:last-child{margin-left:0}

@media screen and (max-width: 670px) {
    .mainContainer{margin:110px 0 0 0}
    .areaRow fieldset { width:100%}
    .areaRow fieldset:last-child{border-top:none}
}

@media screen and (max-width: 480px) {
    .smallClassesNote{margin:-20px 0 20px}
    .areaRow fieldset:last-child{display: block; margin:0 10px 20px 0}
    .areaRow fieldset:last-child .field-group{display: flex; flex-direction: row-reverse; justify-content: space-between; margin:5px 0 0 0; padding: 0}
    .areaRow fieldset:last-child .field-group input{border:none; height:20px; background-color: transparent; width:120px; padding:0 0 0 10px}
    .areaRow fieldset:last-child .field-group label{position:initial; white-space: nowrap; font-weight:bold; font-size:1rem}
}

.checkbox-group.checkArea{display:flex;border-top: 1px solid #cacaca; padding: 10px 0;}
.checkbox-group.checkArea input + label{font-size:1.2rem}

.areaRow fieldset div.smallClassesNote{flex:2;text-align: right;font-size: 0.9rem;}
.smallClassesNum{margin-right:7px;width:70px !important; height:30px; background:transparent; border:none; border-bottom:2px solid grey; border-radius: 0}
.smallClassesNote .checkbox-group{margin:0}
.checkbox-group.checkSmallClasses input[type="checkbox"]{width:20px;height:20px}
.checkbox-group.checkSmallClasses input[type="checkbox"]::after{top:2px;right:5px}
.checkbox-group.checkSmallClasses input + label{font-size:0.9rem !important}
.checkbox-group.checkSmallClasses input[type="checkbox"]:checked {background-color: var(--color-dark-blue);border-color: var(--color-dark-blue);}
.checkbox-group.checkSmallClasses input[type="checkbox"]:checked + label {color: var(--color-dark-blue);font-weight:normal}

.totalSum{text-align:end; border-top:1px solid #cacaca; padding:20px 0}
.totalSum .field-group{margin:10px 20px 10px 0}
#grandTotal{font-weight:600;border-color:var(--color-dark-blue)}

.checkTerms{width:100%;border-top:1px solid grey; padding-top:20px; margin-top:20px}
.checkbox-group.checkTerms input[type="checkbox"] + label{font-size:1rem}
.checkbox-group.checkTerms input[type="checkbox"]:checked + label{font-weight:normal;color:var(--color-dark-blue);}

.termsPar{margin-top:30px}

.submit4{text-align: center;}

.ok_circle{margin: 0px auto 20px; font-size: 2rem; line-height: 1.2; text-align: center; border-radius: 50%; width: 2.6rem; height: 2.6rem; background-color: var(--color-ok-light); color: white;}