@font-face {
  font-family: 'HammerPro';
  src: url('../fonts/HammerProGX.woff2') format('woff2'),
       url('../fonts/HammerProGX.ttf') format('truetype');
  font-display: swap;
}
html { font-size: 90%; 

}

:root {--c1:#FFCA00;--c2:#7249CD;--c3:#261D68}
*{margin:0;padding:0;box-sizing:border-box;font-family:'HammerPro',Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;letter-spacing:normal}
body{direction:rtl;cursor:default;background-color:var(--c1)}
.container{display:flex;flex-direction:row-reverse;min-height:100vh}
.form-container{width:350px;background-color:#6838c2;padding:2rem;display:flex;flex-direction:column;align-items:center}
.form-container h2 {text-align:center;display:flex;flex-direction:row; gap:5px; color:#fff;font-size:2em;font-weight:400;line-height:1;margin:0 auto 20px auto}
.form-container h2 span {color:var(--c1);}
.logo{width:200px;margin-bottom:2rem}
form{width:100%;color:#fff}
.form-group{margin-bottom:10px}
label{display:block;margin-bottom:.5rem}
input,select{width:100%;padding:13px 20px;border:none;border-radius:4px;text-align:right;font-size:1.1em}
input::placeholder{color:gray;font-size:1em}
input[type="checkbox"]{display:none}
.checkbox-group{margin:1rem 0;display:flex;align-items:center}
.checkbox-group label {margin-bottom:0;font-size:.96em;display:block;padding-inline-start:30px;position:relative}
.checkbox-group label:before {content:'';width:20px;height:20px;background-color:var(--c1);display:block;position:absolute;top:0;inset-inline-start:0;border-radius:50%;transition:all .2s ease}
.checkbox-group label:hover:before {transform:scale(1.2);box-shadow:0 0 10px var(--c1)}
.checkbox-group label:after {content:'';width:20px;height:20px;background:url(../images/v.svg) no-repeat center center / 60%;display:block;position:absolute;top:0;inset-inline-start:0;z-index:2;opacity:0;transform:translateY(-10px);transition:all .2s ease}
.checkbox-group input:checked+label:after {opacity:1;transform:translateY(0)}
button{background-color:var(--c1);color:var(--c3);border:none;padding:.75rem 2rem;border-radius:50px;cursor:pointer;font-weight:700;width:100%;font-size:1.3em;display:flex;align-items:center;justify-content:center;gap:.25rem;transition:all .2s ease}
button span{display:inline-block;transform:scaleX(-1)}
button:hover{box-shadow:0 5px 20px var(--c1);transform:translateY(-2px)}
.whatsapp-btn {
  display: none;
}
/* ---------- STAGE (מבנה כללי) ---------- */
.stage {flex-basis:calc(100% - 350px);color:var(--c3);position:relative;overflow:hidden}
.stage ul {display:flex;flex-wrap:wrap;gap:20px;padding:20px 40px 20px 20px;font-size:1.3em;max-width:500px}
.stage ul li {flex-basis:calc(50% - 20px);list-style:none;display:flex;align-items:center;gap:20px;line-height:1}
.stage ul img {width:2em}
.stage aside {position:absolute;bottom:0;left:0;top:100px;max-width:550px;display:flex;align-items:flex-end}
.stage aside img {max-height:100%;width:auto;max-width:100%;}
.stage footer {background-color:var(--c2);color:#fff;padding:20px 40px;font-size:1.7em}
.sapir_logo {display:none;max-width:200px}
.remind-sentence-mobile{color:#fff;}
.circle-badge-phone{display:none;}
.tags-phone{display:none;}
.tags-phone-new{display:none;}
.tags-sentence-phone{display:none;}
.tags-sentence-phone-new{display:none;}

.tags .tag { display:flex; flex-direction:column; line-height:1; }
.tags .tag .sub { font-size:0.8em; margin-top:2px }
.tags {
  display:flex; flex-wrap:wrap; gap:10px; align-items:stretch; width:50%;
}
.tags span {
  background-color:var(--c1);
  color:var(--c3);
  font-weight:400;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:2px 3px;
  height:55px;
  white-space:nowrap;
  border-radius:4px;
}
.tags span > span {
  font-size:0.8em;
  line-height:1;
  display:block;
  margin-top:2px;
}
header .header-first {font-weight:800;display:inline-block;background-color:var(--c2);padding:0 20px 10px 20px;font-size:1em;transform:translateY(-50%);margin:40px 0 0 -20px}
.tags-sentence{font-size:1.8rem;display:flex;align-items:center;}
.tags-sentence-mini{font-size:1.2rem;}
.title {margin:20px 40px 0 0;font-size:5em;font-weight:700;line-height:.8}

/* ---------- לוגואים ו־Header ---------- */
.logos {display:flex;padding:30px;gap:40px;justify-content:flex-end;align-items:center}
header {display:flex;color:#fff;font-size:5.6em;justify-content:flex-start;align-items:flex-end;line-height:1;padding:0 40px 0 0;}
header .header-make {font-size:0.7em;font-weight:400}
header h2 {display:inline-block;background-color:var(--c2);font-weight:800;font-size:1em;padding:0 20px 10px 10px;flex-grow:1}
.promo-wrapper {display:flex;padding: 40px 0px 40px 0px;}
.date {display:flex;padding:0 40px 0 0px;font-size:3em;align-items:center;gap:30px}
.date div p:first-child {font-size:1em;font-weight:700;line-height:.7}
.date div p:last-child {font-weight:400;line-height:1}
.intro {padding:0;font-size:2.3em;line-height:1; padding:0 40px 0 0px; margin-top:20px}
.intro p {font-weight:500}
.logos_m {display:none;padding:20px;gap:20px;align-items:center;justify-content:center}
.remind-sentence{width:100%; color:white; margin-top: 5px;}

.footer_m {display:none;text-align:center;color:#fff;margin-bottom:20px}

/* ---------- עיגול ומדבקות ---------- */
.circle-badge {
  width:150px; height:150px; border-radius:50%;
  background-color:#7b57db; display:flex; justify-content:center; align-items:center;
  position:relative; color:#fff; text-align:center; font-weight:700;
  margin: 20px;
}
.circle-badge::before {content:'';position:absolute;inset:8px;border:2px solid #fff;border-radius:50%;}
.circle-inner {position:relative;z-index:2;}
.circle-text-top {font-size:1.3rem;line-height:0.8;margin-bottom:0;}
.circle-text-bottom {
  display:grid; grid-template-columns:auto auto; grid-auto-rows:auto;
  align-items:start; justify-content:center; font-weight:800; line-height:1;
  direction:ltr; font-size:2rem;
}
.circle-text-bottom .amount {grid-column:2;grid-row:1/span 2;font-size:2rem;}
.circle-text-bottom .asterisk {grid-column:1;grid-row:1;font-size:1rem;align-self:start;font-weight:600;}
.circle-text-bottom .currency {grid-column:1;grid-row:2;font-size:.8rem;align-self:start;}



.semester-chip {
  display: inline-flex;
  align-items: center;
  gap: .6rem;                
  padding: .5rem .9rem;     
  background: #27206a;        
  color: #fff;                
  border-radius: .35rem;      
  line-height: 1;             
  direction: rtl;           
  white-space: nowrap;        
}

@supports (-webkit-touch-callout: none) {
    /* Normalize letter spacing on iOS to prevent unwanted gaps */
    body, input, select, button, label, h1, h2, h3, h4, h5, h6, p, span, div, a {
        letter-spacing: 0;
    }
    
    /* Improve font rendering consistency on iOS */
    * {
        -webkit-font-feature-settings: "kern" 1;
        font-feature-settings: "kern" 1;
        font-kerning: normal;
    }
    
    /* Reduce font weight appearance on iOS for better consistency */
    .form-container h2 {
        font-weight: 700;
    }
    
    header h1 {
        font-weight: 400;
    }
}

@media (max-width: 1301px) {
  .stage aside { overflow:visible; }
  .stage aside img {
    height:100%;
    width:auto;
    object-fit:contain;
    transform-origin:left bottom;
    transform:scale(0.8);
  }
  .tags{
    position: relative;
    z-index: 999;
    width: 100%;
  }
}

/* ---------- Laptop / Tablet ---------- */
@media (max-width:1500px) {
  .stage main {font-size:.8em}
}

@media (max-width:1000px) {
  header {max-width:none;margin:0 0 0 40px}
  .stage {display:flex;flex-direction:column;align-items:center}
  .stage main {width:100%}
  .sapir_logo {display:block;margin:20px auto 60px auto}
  .logos {display:none}
  .stage aside {position:relative;top:0;flex-direction:row-reverse;align-items:center;justify-content:space-between;padding:0 40px 0 0}
  .stage aside img {max-width:100%}
  .stage aside div {position:relative;bottom:auto;left:auto;flex-wrap:nowrap;font-size:2em;gap:5px;justify-content:flex-end;max-width:none;flex-direction:column;align-items:flex-start}
  .stage aside div span {background-color:var(--c2);padding:0 10px 5px 10px;display:inline-flex;color:#fff}
  .stage footer {display:none}
  .remind-sentence{display: block;}
}

/* ---------- Mobile (עד 768px) ---------- */
@media (max-width:930px) {
  header {font-size:4em}
  .date {font-size:2em}
}

@media (max-width:580px) {

 .form-container h2 {
    font-size: 3em;
  }     
  header,
header .header-first,
header h2 {
  white-space: nowrap;
}

header .header-first { z-index: 1;font-weight:800;display:inline-block;background-color:var(--c2);padding:0 20px 10px 20px;font-size:1.2em;transform:translateY(-50%);margin:40px 0 0 -20px}

    .stage main {font-size: 0.9rem;}
  header {font-size:6em}
    .logo {display:none}

    .container{flex-direction:column;width:100%;overflow-x:hidden}
  
      .stage{display:contents}
      .container{display:flex;flex-direction:column;width:100%;overflow-x:hidden}
      .stage main{order:1;width:100%}
      .container > .form-container{order:2}
      .stage aside{order:3;position:relative;width:100%;display:flex;justify-content:center}
  .form-container {width:auto;margin:0px 20px 0 20px;position:relative;z-index:1}
  .logos_m {padding:0px;gap:0px;align-items:center;justify-content:center; background-color: #fff; max-width: 100%;}
  .footer_m {display:block}
  .logos_m  {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  overflow: hidden;
}

.logos_m  img {
  max-width: 100%;
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}
  .circle-badge{display:none;}

  .circle-badge-phone {
  display: flex;
  position: relative;
  margin-bottom: -100px; 
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: #7b57db;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
  font-weight: 700;
}


  .circle-badge-phone::before {
    content:'';
    position:absolute;
    inset:4px;
    border:2px solid #fff;
    border-radius:50%;
  }

  .tags-phone{
    display:flex; flex-direction:column; gap:10px;
    /* width:min(280px,90vw); margin:auto; */
  }
  .tags-phone .tag{
    background:var(--c1); text-align:center; line-height:1.1;
    padding:12px 10px; height:70px; border-radius:3px;
    display:flex; align-items:center; justify-content:center;
    font-size:2rem; flex-direction:column;
  }
  .tags-phone .tag .sub{font-size:.85em;margin-top:4px;line-height:1.1}
  
  .tags-sentence-phone{
    display:flex;justify-content:center;align-items:center;
    gap:6px;color:#fff;margin:10px 0;font-size:2rem;white-space:nowrap;
    padding-top:10px ;
    border-bottom: 1px solid #c1c1c1;
    height: 60px;
  }
  .tags-sentence-phone-strong{
    font-weight: 400;
  }
  .tags-sentence-mini-phone-new{font-size:1rem;line-height:1;}
  .tags-sentence-phone-new{
    display:flex;justify-content:center;align-items:center;
    flex-direction: column;
    gap:6px;color:#fff;margin:0px 0;font-size:2rem;
    border-bottom: 1px solid #c1c1c1;
    height: 150px;
    
  }
  .tags-sentence-mini-phone{font-size:1.5rem;line-height:1;}


  
  
}

@media (max-width:580px) {

  .semester-chip{
padding: .4rem .8rem;
border-radius: 0rem;


  }

  .chip-label{
    font-size: 2rem;
  }
  header{display: flex;
    flex-direction: column;
     font-size:3.8em;
      margin: 0;
       width: 100%;
        padding: 0;
      align-items: flex-start;
  margin: 0 !important;  
  margin-bottom: -50px !important;

      }
 .header-first {
  display: flex;
  position: relative;
  width: fit-content;
  right: 5%;
  margin: 0 !important; 
}
header .header-make {font-size:0.8em;font-weight:400;}

.header2 {
  padding: 10px;
  padding-left: 10px !important;
  position: relative;
  right: 35%;
  bottom: 50px;
  width: 70%;
  font-size: 1.2em;

  }
  .checkbox-group label {font-size:1em}
   
  .form-container {width:100%;margin:20px 0px 0 20px;position:relative;z-index:1}
  .stage aside {
  position: relative;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  padding: 0 0px 0 0;
}

.stage aside img {
  width: 100%;
  height: auto;
  object-fit: contain;
  margin-top: 50px;
  transform: scale(1);
}

  .stage ul {display:none}
  .promo-wrapper {display:flex;padding: 0px 0px 0px 0px; justify-content: center;}
  .date {display:flex;padding:0 0px 0 0px;font-size:2.3em;}
  .date div p:first-child {font-size:1em;font-weight:600;line-height:.7}
  .date div p:last-child {font-weight:350;line-height:1}
  .date div p {text-align: center;}
  .intro {text-align: center; margin-top: 5px; padding: 0px;}

  .chip-year{
    font-weight: 800;

  }
  
  
  .chip-month { 
    font-weight: 800;
  }
 
  .circle-inner {position:relative;z-index:2;}
.circle-text-top {font-size:2rem;line-height:0.8;margin-bottom:0; font-weight: 400;}
.circle-text-bottom {
font-size:2rem;
}
.circle-text-bottom .amount {
font-size:2.7rem;
}

  .form-group input{
    border-radius: 20px;
  }
   .form-group select{
    border-radius: 20px;
  }
.form-group{
    margin-bottom: 20px;

}

.submit-btn{
    font-size: 2em;
}


 /* בסיס – כמו שלך, רק עם מרווח בטוח למובייל */
.whatsapp-btn{
  position: fixed;
  right: 15px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); /* עדכון קטן: bottom ולא top */
  color: #000;                 /* טקסט כהה על רקע בהיר */
  text-decoration: none;
  font-weight: 600;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 999;
  min-height: 44px;
  border-radius: 999px;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);

  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  will-change: backdrop-filter;
}
.whatsapp-btn:hover { transform: scale(1); }
.whatsapp-btn img{ width:30px; height:30px; }
.whatsapp-btn span{ font-size:1em; color:#fff; white-space:nowrap; line-height:1; }

@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .whatsapp-btn{
    background: rgba(255,255,255,.85);  
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 6px 14px rgba(0,0,0,.18);
  }
}


@supports (-webkit-backdrop-filter: blur(0)) and (not (backdrop-filter: blur(0))) {
  .whatsapp-btn{
    -webkit-backdrop-filter: blur(6px);
  }
}

.whatsapp-btn{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  backdrop-filter: blur(6px);
}
.whatsapp-btn span{ color:#000000; } 

  /* .whatsapp-btn span { display: none; }
.whatsapp-btn:hover span { display: inline; } */

}

#thankYouMessage{display:none;text-align:center;color:#fcc52d;padding-top:50px}
#thankYouMessage h2{color:#fff;font-weight:700;margin:0px; margin-bottom:20px;font-size:1.5em; text-align: center; justify-content: center;}
#thankYouMessage p{font-size:2em}