/* ===== Fonts ===== */
@font-face {
  font-family: "NotoSansHebrew";
  src: url("media/NotoSansHebrew-VariableFont.ttf");
}

@font-face {
  font-family: "Yarden";
  src: url("media/yarden-regular.otf");
  unicode-range: U+0590-05FF;
}

@font-face {
  font-family: "Mochibop";
  src: url("media/mochibop.ttf");
}

/* ===== Global ===== */
* {
  box-sizing: border-box;
  margin: 0;
  font-family: NotoSansHebrew, sans-serif;
}

body {
  direction: rtl;
}

/* ===== Background ===== */
.Body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: url("media/Background.png");
  background-repeat: repeat-x;
  background-size: auto 100%;
  animation: moveBg 120s linear infinite;
  position: relative;
}

@keyframes moveBg {
  from { background-position-x: 0; }
  to   { background-position-x: 100%; }
}

/* ===== Card ===== */
.Container {
  background: #fff;
  border: 10px solid #000;
  box-shadow: 20px 20px 0 #000;
  padding: 32px;
  width: min(80vw, 510px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: center;
  z-index: 10;
}

/* ===== Text ===== */
/* .Container h1 { */
  /* font-weight: 900; */
  /* font-size: clamp(20px, 8vw, 3rem); */
/* } */

.Container h1 {
    color: #000;
    font-size: 42px;
    font-weight: 900;
    margin-bottom: -6px;
    overflow: hidden;
    position: relative;
    width: 100%;
	}
	
.Container p {
  font-size: 21px;
  margin-bottom: 8px;
}

.Container p span {
  color: #0a9a65;
  font-weight: 700;
}

/* ===== Input ===== */
.Container input {
  width: 100%;
  padding: 10px;
  border: 6px solid #000;
  font-size: 1.4rem;
  text-align: center;
  font-family: Yarden, Mochibop;
}

/* ===== Main Button ===== */
.MainButton {
  position: relative;
  overflow: hidden;
  background: #000;
  color: #fff;
  border: 6px solid #000;
  font-size: 1.4rem;
  font-weight: 700;
  padding: 16px;
  cursor: pointer;
  transition: transform 0.3s;
}

/* Overlay */
.MainButton::before {
  content: "שלח אותי";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #05ffa3;
  color: #000;
  transform: translateY(100%);
  transition: transform 0.3s;
}

/* Hover reveal */
.MainButton:hover::before {
  transform: translateY(0);
}

/* Disabled */
.MainButton:disabled {
  cursor: not-allowed;
}

/* Hover + empty email */
.Container:has(input:placeholder-shown)
.MainButton:disabled::before {
  content: "יש להזין כתובת דוא\"ל";
  background: #e68686;
}

/* Hover + invalid email */
.MainButton:disabled::before {
  content: "כתובת דוא\"ל לא תקינה!";
  background: #ff0505;
}

/* Button scale */
.MainButton:hover {
  transform: scale(1.025);
}

.MainButton:active:not(:disabled) {
  transform: scale(0.95);
}

/* ===== Contact Button ===== */
.ContactButton {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 75px;
  height: 75px;
  border-radius: 50px;
  background: #000;
  border: 6px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  z-index: 100;
  transition: transform 0.3s;
}

.ContactButton:hover {
  transform: scale(1.05);
}

.ContactButton::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #f205bb;
  transform: translateY(100%);
  transition: transform 0.3s;
  mix-blend-mode: lighten;
}

.ContactButton:hover::before {
  transform: translateY(0);
}

.ContactButton:active {
  transform: scale(0.92);
}


.Container input{stroke:none;-webkit-appearance:none;appearance:none;background-color:#fff;border:6px solid #000;box-sizing:border-box;direction:ltr;font-family:Yarden,Mochibop;font-size:clamp(12px,5.2vw,1.96875rem);margin-bottom:8px;outline:none;padding:7px;text-align:center;text-transform:lowercase;width:100%}
.Container input,.Container input::placeholder{transition:all .3s ease}
.Container input:active{transform:scale(1)}.Container input::selection{background:#ff0}
.Container input:hover:not(:focus){background-color:#e9e9ff;border-color:#230647!important;color:#230647!important;transform:scale(1.04)}
.Container input:focus{border-color:#151394;color:#151394;transform:scale(.98)}