/* for log in / sign up screen form */

@media only screen and (max-width: 700px) {  /* mobile */ 
  #tenants, #for, #new_address, #new_tenants, #taNote, #add1 {
    width: 100%;
    margin: auto; 
    vertical-align: middle;
    resize: both;
  }

  #head_logo_before_login  {
    /* margin-left: 1em;  */
    font-size: 1.5em; 
    margin: auto;
  }

  #details_container {
    /* display: none; */
    width: 98%;
    margin: auto; 
  }
  
}  /* max 700 px */ 


/* desktop */ 
@media (min-width:701px) {
  #tenants, #for, #new_address, #new_tenants, #taNote, #add1 {
    width: 85%;
    vertical-align: middle;
    resize: both;
  }

  #head_logo_before_login  {
    /* margin-left: 20%;  */
    /* width: 90%;  */
    font-size: 3em;     
    margin: auto; 
  }

/* introduced detail confirm to reg, for demo 2026-3-14 */
#details_container {
  /* display: none; */
  width: 80%;
  margin: auto; 
}


} /* min 801 px */




/* universial to all screen sizes */ 
.label-confirm {
  /* can delete maybe 2025-2-9*/
  width: 4em;
  display: inline-block;
  text-align: left;
  margin-right: 5px;
  margin-top: 0.5em;
}

.label-login {
  /* can delete maybe 2025-2-9*/
  width: 5em;
  display: inline-block;
  text-align: left;
  margin-right: 0px;
  margin-top: 0.5em;
}

.signupTextInput {
  width: 65%;
  margin: 0.5em;
  margin-bottom: 0.2em; 
  height: 2em; 
}

#LoginDiv, #login-buttons, #reg-buttons {
  border: 3px solid rgb(10, 88, 202);
  padding: 1.2em 0.5em 1.5em 0.5em;
  /* margin: 1em 0px 1.4em 0px; */
  margin: auto; 
  width: 350px;
  text-align: center; 
}

#login-buttons {
  border: none; 
}

/* in login div */
#try_btn, #regis_btn {
  margin: 0 0 0 0.4em;
}

/* bit spacing for all submit button */
.btn {
  margin-left: 0.3em; 
}

#try_btn {
  /* padding-left: 1.7em; 
  padding-right: 1.7em;  */
}

#login_btn:disabled, #RegBtn:disabled {
  background-color: lightgray;
  color: gray;
}

input[type="password"]::-ms-reveal {  /* remove bult-in eye, as only appear 1st time on shit edge shit, hf fucking shit working */ 
  display: none;
}

#imgUserNameok {
  margin-left: -11px;  /* this doesn't have password toggle, so remain same -8 */ 
  margin-top: -5px; 
}

#imgPasswordOK, #imgPassword2OK {
  margin-left: 2px;  /* changed after adding the password toggle eyes */ 
  margin-top: -5px; 
}

.pw_tips {  /* for password tip */
  text-align: left;
  margin-left: 10%;
}

.valid {  /* met requirement */
  color: green;
}

.invalid { /* not met requirement */
  color: red;
}

/* out box for sign up */ 
#divSignUpForm {
  margin: auto; 
  width: 350px;

  text-align: center; 
  /* 400 is full width on blu android phone */
}

/* inner box for sign up */ 
#RegisterDiv {
  border: 3px solid rgb(10, 88, 202);
  padding: 1.2em 0.5em 1.4em 0.5em;
  margin: 0em 0em 1em 0em; 
  display: flex;   /* line up vertically */ 
}

.toggle_eye {  /* for log in, sign in */ 
  margin-left: -2em;  /* move the eye insde the text box */ 
  margin-top: 0.8em; 
  width: 15px; /* make it smaller */ 
  display: none; 
}

.toggle_eye2 {  /* for register, sing up */
  margin-left: -2em;  /* move the eye insde the text box */ 
  margin-top: -0.3em; 
  width: 15px; /* make it smaller */ 
  display: none; 
}


#id_user, #id_pass { /* for log in, sign in */ 
  margin: 5px;
  font-weight: 600;
  /* width: 60%; */  /* not working well with horizontal align, may fix later 2026-4-6 when figure out  */.
}

#div_username_input, #div_password_input {  /* contain pw label and pw input */ 
  display: flex; 
}

#show_pass1, #hide_pass1 {
  /* display: none;  */
}

#id_signup_new_user, #id_signup_new_pass {
  /* margin: 5px;  */
  /* font-weight: 600; */
  /* width: 60%;  */
}

#id_pw_tips, #id_pw_match_tip {
  display: none;
  margin: 0 auto;
  width: 100%;
  margin: 3px 1px -0.5em 2.5em;

  line-height: 1.3em; 
}

/* .pw1_requirements1 {
  line-height: 1.3em; 
  margin-bottom: 0em 0em 0em 1em; 
} */


#divSignIn {  /* sign in */ 
  display: none; 
}

#details_div_card {
  /* start up hide */
  border: 3px solid rgb(10, 88, 202);
  padding: 0px 0px 0px 0px;
  margin: 0.5em 0px 1em 0px;
}

#confirm_card-header {
  /* background-color: rgb(10, 88, 202);  */
  /* background-color: #0a58ca; */
  background-color: rgb(10, 108, 222);
  color: white;
  font-weight: 600;
  border-radius: 0;
}

.input1 {
  background-color: rgba(255, 255, 192, 1);
  margin-top: 5px;
}

#hidden_fields {  /* hide 7 fields, used to hold values to post */ 
  display: none; 
}

/* will make the logo stick to the menu, default is flex, spent hours */ 
#menu2 {
  /* display: block; */
}

.navbar-collapse {  /* the dropdown 1st item was too close to the parent 3 bar */ 
  margin-top: 0.8em; 
}

#show_more1 {
  /* display:block;  */   /* block will not make it work somehow */ 
  /* text-align:center; */  /* can not center div, changed to div later */ 

  background-color: white; /* over write default background color for collpse class */ 
  box-shadow: none;  /* over write default box shade for collpse class */ 

  color: rgb(12, 99, 228);   /* slightly blue indicating link */ 

  width: 6em;  /* make it not too long, avoid the down/up arrow too far from the text */
  margin: auto;  /* center it */ 

  cursor: hand; 

  /* margin-top: 1em;  */
}

/* finish detail confirm screen for try out */


/* for SEO */ 
h1 {
  display: none;
}

h2 {
  text-align:center; 
  margin: 0em 0 1em 0; 
}

#spanPreNote {   /* previous receipt note, for demo, no show at start */ 
  display: none;
}

#edit_house_btn {  /* edit hidden for demo */ 
  display: none; 
}

#div_video {  /* outer wrapper for video */
  display: block;  
  width: 100%; 
  margin: auto; 
  text-align:center;
  margin-bottom: 10em; 
}

#video_demo { /* the video itself */ 
  display: block; 
  text-align:center;
  margin-top:-0.2em; 
  margin:-.4em auto 0 auto ; 
  text-align:center;
  opacity: 0.3; 
  width: 300px; 
  border: 1px solid rgb(10, 88, 202);
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
  border-radius: 5px;

}
/* end of video demo */ 

/* receipt ready for finaly receipt notes */
#receipt-ready {
  display: absolute;
  top: 0; left: 0; 
  padding: 0em 0em 0.1em 0em; 
  width: 100%; 
  font-size: 3.6em; 
  font-family: cursive
}

#receipt-ready2, #receipt-ready3 {
  padding: 0em 0em 0.1em 0em; 
  width: 100%; 
  /* font-size:1.5em;  */
}


#receipt-ready3 {
  padding: 0em 0em 1em 0em; 
  width: 100%; 
  font-size:1.5em; 
}

.receipt_final {
  font-size: 5em!; 
}

#div_final_receipt_btns {
  text-align: center; 
  font-size: 3em; 
  padding: 0.5em;
  margin: 0; 
}

/* rainbow start */ 
.rainbow-text {
  /* font-size: 1.9em; */
  font-family: Optima;  /* Optima (elegance), Tahoma Helvetica, Josefin Sans, Inter, Sans serif,  cursive */
  /* font-style: italic;  */

  /* added 2026-4-22 */ 
  text-decoration: none; 
  font-weight: bold; 
  /* text-shadow: 1px 1px 2px #FF0000; */
  
  background-image: linear-gradient(to right, red, orange, cyan, green, cyan, blue, violet);
  color: transparent;   /* transparent is needed for js animation  */ 
  -webkit-background-clip: text;
  display: inline-block;  /* this is needed for rainbow */ 

  /* margin-bottom: 0.2em; */
  text-align: center; 

  width: 100%;
}

.rainbow-text:nth-of-type(2) {
   background-image: radial-gradient(circle, violet, indigo, blue, green, yellow, orange, red);
 color: transparent;
}

.rainbow-text:nth-of-type(3) {
   background-image: conic-gradient(from 90deg, violet, indigo, blue, green, yellow, orange, red);
 color: transparent;
}

.rainbow-text-loop {
  /* font-size: 1.5rem; */
  /* display: inline-block; */
  /* margin-top: 1rem; */
  /* text-shadow: 1px 1px 2px #FF0000; */
  -webkit-animation: rainbow 5s infinite; 
}

@-webkit-keyframes rainbow{
  0%{color: red;}  
  10%{color: orange;} 
  20%{color: yellow;}
  30%{color: light-green;}
  40%{color: cyan;}
  50%{color: light-blue;}
  60%{color: light-purple;}
  70%{color: pink;}
  80%{color: yellow;}
  90%{color: golden;}
  100%{color: orange;}
}


.rainbow-text-shadow {
  display: inline-block;
  margin-top: 2.5rem;
  font-size: 1.5rem;
  font-weight: 100;
  color: #ef3550;
  letter-spacing: 8px;
  text-shadow: 1px 0 #f48fb1, 2px 0 #7e57c2, 3px 0 #2196f3, 4px 0 #26c6da, 5px 0 #43a047, 6px 0 #eeff41, 7px 0 #f9a825, 8px 0 #ff5722, -1px 0 #f48fb1, -2px 0 #7e57c2, -3px 0 #2196f3, -4px 0 #26c6da, -5px 0 #43a047, -6px 0 #eeff41, -7px 0 #f9a825, -8px 0 #ff5722;
}

#btn_share {
  margin-right: 0.5em; 

  font-size: 0.8em; 
  padding: 1em 2em 1em 2em; 
  border-radius: 2em ; 

  border: 1px dotted #DDD;

  color: #E8E8E8; 

  /* text-shadow: 0px 0px 10px rgba(0,0,0,0.2); */
  box-shadow: 10px 10px 20px #AAA;

  /* background-image: linear-gradient(to right, #84fab0 0%, #8fd3f4 51%, #84fab0 100%); */

  background-image: linear-gradient(to left,  #F88, orange, yellow, #adff2f, #8FF, #00bfff , #e6e6fa  );
  background-image: linear-gradient(to right,  #EEF, #FFF, #EEF);  
  /* opacity: 0.5;  */
  

  text-shadow: 1px 1px black, -1px -1px white;

}










#btn_download {
  /* my custom */ 
  margin-right: 1em; 
  font-size: 0.8em; 
  color: #DDD;
  text-shadow: 1px 1px black, -1px -1px white;

  /* original below */ 
  /* font-size: clamp(32px, 6vw, 64px); */
  font-family: "Amaranth", sans-serif;
  text-transform: none;
  min-width: 8em;
  height: 3em;
  line-height: 1;
  display: inline-grid;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 0.5em 1.5em;
  outline: max(2px, calc(var(--brdr) * 0.75)) solid transparent;
  outline-offset: max(2px, var(--brdr));
  
  border-radius: 99vw;
  transition: all 0.33s var(--cubic-out);
  
  --brdr: 0.15em;
  border: max(2px, var(--brdr)) solid transparent;
  
  background: 
      linear-gradient( to bottom, 
          oklch(0.95 0.01 257), 
          oklch(0.92 0.0175 257 / 80%) 33%, 
          oklch(0.99 0.01 257 / 80%)) padding-box,
      linear-gradient( 165deg, 
          oklch(0.94 0.025 257 / 80%) 25%, 
          oklch(0.99 0.01 257 / 80%)) border-box;
  
  --inset-shadow:
      inset 0 0 0 0 oklch(1 0.02 257 / 0),
      inset -0.35em -0.35em 0.25em -0.25em oklch(0.99 0.02 257),
      inset -0.33em -1em 0.75em -0.75em oklch(0.99 0.01 257);
  
  --outer-shadow: 
      oklch(0.35 0.1 257 / 0.12) 0px max(4px, 0.3em) 0.3em 0px, 
      oklch(0.35 0.1 257 / 0.12) 0px max(2px, 0.18em) 0.18em 0px, 
      oklch(0.35 0.1 257 / 0.1) 0px max(1px, 0.05em) max(2px, 0.05em) 0px;
  
  /* if the drop-shadow element is missing, put it here */
  box-shadow: var(--inset-shadow), var(--outer-shadow);
  /* if the drop-shadow element exists, hide it here */
  &:has(.drop-shadow) {
      box-shadow: var(--inset-shadow);
  }
  
  
  &::before,
  &::after,
  & .drop-shadow,
  & .drop-shadow::after,
  & .drop-shadow::before {
      content: "";
      position: absolute;
      inset: min(-2px, calc(var(--brdr) * -1));
      border-radius: inherit;
      pointer-events: none;
      transition: all 0.6s var(--cubic-in);
  }
  
  &:hover,
  &.shine {
      &::before,
      &::after,
      & .drop-shadow,
      & .drop-shadow::after,
      & .drop-shadow::before {
          transition-duration: 0.3s;
          transition-timing-function: var(--cubic-out);
      }
  }
  
  &::after {
      
      /* inner glassy glow */
      
      opacity: 0.3;
      background: transparent;
      box-shadow: 
          inset 0 -0.3em 2px 1px oklch(0.99 0.01 257),
          inset 0 -0.3em 0.25em oklch(0.99 0.01 257),
          inset 0 -0.3em 0.5em oklch(0.99 0.01 257),
          inset 0 -0.3em 0.75em oklch(0.99 0.01 257),
          inset 0 -0.3em 1em oklch(0.99 0.01 257);
      mix-blend-mode: lighten;
      z-index: 2;
  }
  
  & .drop-shadow {
      box-shadow: var(--outer-shadow);
      z-index: -2;
  }
  
  &::before,
  & .drop-shadow::after {
      
      /* iridescence */
      
      opacity: 0;
      translate: 1.1em 0em;
      scale: 0.8;
      background: linear-gradient(
          98deg in oklab,
          oklch(0.8 0.1348 355.91) -5%,
          oklch(0.8 0.2 280) ,
          oklch(0.98 0.22 200) 160%
      );
      mask: linear-gradient(166deg, transparent 60%, black);
      filter:  blur(5px) brightness(1) contrast(1.3);
      box-shadow: 
          inset 0 max(-2px, calc(var(--brdr) * -1)) 0 min(2px, var(--brdr)) oklch(0.99 0.01 257 / 20%),
          inset 0 -0.25em 0.25em 0.125em oklch(0.99 0.01 257 / 40%);
      z-index: 3;
  }
  
  & .drop-shadow::after {
      
      /* outer iridescence */
      
      opacity: 0;
      translate: -0.25em 1.2em;
      filter:  blur(8px) brightness(1.2) contrast(1.05);
      mix-blend-mode: lighten;
      background-position: center;
      
      mask: radial-gradient(
          closest-side, 
          hsl(0, 0%, 100%) 0%,
          hsla(0, 0%, 100%, 0.987) 8.1%,
          hsla(0, 0%, 100%, 0.951) 15.5%,
          hsla(0, 0%, 100%, 0.896) 22.5%,
          hsla(0, 0%, 100%, 0.825) 29%,
          hsla(0, 0%, 100%, 0.741) 35.3%,
          hsla(0, 0%, 100%, 0.648) 41.2%,
          hsla(0, 0%, 100%, 0.55) 47.1%,
          hsla(0, 0%, 100%, 0.45) 52.9%,
          hsla(0, 0%, 100%, 0.352) 58.8%,
          hsla(0, 0%, 100%, 0.259) 64.7%,
          hsla(0, 0%, 100%, 0.175) 71%,
          hsla(0, 0%, 100%, 0.104) 77.5%,
          hsla(0, 0%, 100%, 0.049) 84.5%,
          hsla(0, 0%, 100%, 0.013) 91.9%,
          hsla(0, 0%, 100%, 0) 100%
      );
      z-index: -2;
      
  }
  
  & .drop-shadow::before {
      
      /* outer glassy glow */
      
      opacity: 1;
      translate: 1.2em 1.1em;
      scale: 1.5 0.8;
      background: red;
      background: oklch(0.98 0.03 257);
      
      mask: radial-gradient(
          closest-side, 
          hsl(0, 0%, 100%) 0%,
          hsla(0, 0%, 100%, 0.987) 8.1%,
          hsla(0, 0%, 100%, 0.951) 15.5%,
          hsla(0, 0%, 100%, 0.896) 22.5%,
          hsla(0, 0%, 100%, 0.825) 29%,
          hsla(0, 0%, 100%, 0.741) 35.3%,
          hsla(0, 0%, 100%, 0.648) 41.2%,
          hsla(0, 0%, 100%, 0.55) 47.1%,
          hsla(0, 0%, 100%, 0.45) 52.9%,
          hsla(0, 0%, 100%, 0.352) 58.8%,
          hsla(0, 0%, 100%, 0.259) 64.7%,
          hsla(0, 0%, 100%, 0.175) 71%,
          hsla(0, 0%, 100%, 0.104) 77.5%,
          hsla(0, 0%, 100%, 0.049) 84.5%,
          hsla(0, 0%, 100%, 0.013) 91.9%,
          hsla(0, 0%, 100%, 0) 100%
      );
      z-index: -1;
  }  
  /* end of silver effect button */

  /* for firework */ 
  #fireworks-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }