/* main.css */

:root {
    --primary-color: #ff6f00;       /* Orange (used for background, buttons, focus) */
    --secondary-color: #ff6f00;    /* Lighter orange (used for gradients/accents) */
    --accent-color: #ff6f00;       /* Primary accent orange */
    --black: #757575;
    --white: #ffffff;
    --gray: #efefef;
    --gray-2: #757575;

    --facebook-color: #4267B2;
    --google-color: #DB4437;
    --twitter-color: #1DA1F2;
    --insta-color: #E1306C;
}


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap');

* {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100vh;
    overflow: hidden;
}

.container {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}

.row {
    display: flex;
    flex-wrap: wrap;
    height: 100vh;
}

.col {
    width: 50%;
}

.align-items-center {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.form-wrapper {
    width: 100%;
    max-width: 28rem;
}

.form {
    padding: 1rem;
    background-color: var(--white);
    border-radius: 1.5rem;
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    transform: scale(0);
    transition: .5s ease-in-out;
    transition-delay: 1s;
}

.input-group {
    position: relative;
    width: 100%;
    margin: 1rem 0;
}

/* .input-group i {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    font-size: 1.4rem;
    color: var(--gray-2);
} */

.input-group .icon {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: #777;
}

.input-group input {
    width: 100%;
    padding: 1rem 3rem;
    font-size: 1rem;
    background-color: var(--gray);
    border-radius: .5rem;
    border: 0.125rem solid var(--white);
    outline: none;
}

.toggle-password {
  position: absolute;
  /* border: 1px solid red; */
  top: 50%;
  right: 1rem; /* 👁️ sits near right edge */
  transform: translateY(-50%);
  font-size: 1.6rem;
  color: #777;
  cursor: pointer;
  z-index: 2;
  width: auto;
  height: auto;
  display: inline;  /* ✅ prevents full-width issue */
}

/* .toggle-password {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: #777;
  cursor: pointer;
  z-index: 2;

  display: flex;              
  align-items: center;
  justify-content: center;
  width: auto;
  height: 100%;
  pointer-events: all;
} */

/* .toggle-password {
  border: 1px solid red;
  right: -19rem;

} */

/* 
.input-group input:focus {
    border: 0.125rem solid var(--primary-color);
} */

.input-group input:focus {
  border: 0.125rem solid var(--primary-color);
}

/* .input-group {
  position: relative;  
  margin-bottom: 20px;
}

.input-group input {
  width: 100%;
  padding: 1rem 3rem 1rem 3rem;  
  border: none;
  border-radius: 8px;
  background-color: #f0f0f0;
  font-size: 1rem;
  box-sizing: border-box;
}

.input-group .icon {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  color: #777;
  font-size: 1.2rem;
}

.input-group .toggle-password {
  position: absolute;
  top: 50%;
  right: 1rem; 
  transform: translateY(-50%);
  color: #777;
  font-size: 1.2rem;
  cursor: pointer;
} */



.form button {
    cursor: pointer;
    width: 100%;
    padding: .6rem 0;
    border-radius: .5rem;
    border: none;
    background-color: var(--primary-color);
    color: var(--white);
    font-size: 1.2rem;
    outline: none;
}

.form button:hover {
    background-color: #e65c00; /* Darker orange hover effect */
}

.form p {
    margin: 1rem 0;
    font-size: .7rem;
}

.flex-col {
    flex-direction: column;
}

.pointer {
    cursor: pointer;
}

.container.sign-in .form.sign-in,
.container.sign-in .social-list.sign-in,
.container.sign-in .social-list.sign-in > div,
.container.sign-up .form.sign-up,
.container.sign-up .social-list.sign-up,
.container.sign-up .social-list.sign-up > div {
    transform: scale(1);
}

.content-row {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 6;
    width: 100%;
}

.text {
    margin: 4rem;
    color: var(--white);
}

.text h2 {
    font-size: 3.5rem;
    font-weight: 800;
    margin: 2rem 0;
    transition: 1s ease-in-out;
}

.text p {
    font-weight: 600;
    transition: 1s ease-in-out;
    transition-delay: .2s;
}

.img img {
    width: 30vw;
    transition: 1s ease-in-out;
    transition-delay: .4s;
}

.text.sign-in h2,
.text.sign-in p,
.img.sign-in img {
    transform: translateX(-250%);
}

.text.sign-up h2,
.text.sign-up p,
.img.sign-up img {
    transform: translateX(250%);
}

.container.sign-in .text.sign-in h2,
.container.sign-in .text.sign-in p,
.container.sign-in .img.sign-in img,
.container.sign-up .text.sign-up h2,
.container.sign-up .text.sign-up p,
.container.sign-up .img.sign-up img {
    transform: translateX(0);
}

/* BACKGROUND */

.container::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100vh;
    width: 300vw;
    transform: translate(35%, 0);
    background-image: linear-gradient(-45deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    transition: 1s ease-in-out;
    z-index: 6;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-bottom-right-radius: max(50vw, 50vh);
    border-top-left-radius: max(50vw, 50vh);
}

.container.sign-in::before {
    transform: translate(0, 0);
    right: 50%;
}

.container.sign-up::before {
    transform: translate(100%, 0);
    right: 50%;
}

/* RESPONSIVE */
/* Add below this */
/* 
@media only screen and (max-width: 425px) {
  .container.sign-up .col.sign-up {
    transform: translateY(0) !important;
    z-index: 10;
  }

  .container.sign-in .col.sign-in {
    transform: translateY(0) !important;
    z-index: 10;
  }
} */

/* Hide the text by default */
/* .mobile-toggle-text {
  display: none;
} */

@media only screen and (max-width: 400px) {

  #users-btn {
    display: none;
  }


  .mobile-toggle-text {
    display: block;
    text-align: center;
    font-size: 0.6rem;
    margin-top: 1rem;
    color: var(--black); /* Optional for visibility */
  }

  .container.sign-in .col.sign-in,
  .container.sign-up .col.sign-up {
    /* transform: translateY(0); */
    transform: translateY(-20%) !important;
    z-index: 10;
  }

  .toggle-password {
    right: -14rem !important;
  }

  .container::before,
  .container.sign-in::before,
  .container.sign-up::before {
    height: 100vh;
    border-bottom-right-radius: 0;
    border-top-left-radius: 0;
    z-index: 0;
    transform: none;
    right: 0;
  }

  .container.sign-in .col.sign-in,
  .container.sign-up .col.sign-up {
    transform: translateY(0);
    z-index: 10;
  }

  .col {
    width: 100%;
    position: absolute;
    padding: 2rem;
    background-color: var(--white);
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
    transform: translateY(100%);
    transition: 1s ease-in-out;
  }

  .row {
    align-items: flex-end;
    justify-content: flex-end;
  }

  .form,
  .social-list {
    box-shadow: none;
    margin: 0;
    padding: 0;
  }

  .text {
    margin: 0;
  }

  .text p {
    display: none;
  }

  .text h2 {
    margin: 0.5rem;
    font-size: 2rem;
  }
  .mobile-toggle-text {
    display: block;
    text-align: center;
    font-size: 0.85rem;
    margin-top: 1rem;
  }
}



@media (max-width: 768px) {

  #users-btn {
    display: none;
  }

  .toggle-password {
    right: -14rem !important;
  }
}

@media only screen and (max-width: 344px) and (max-height: 882px) {
  .container.sign-up .col.sign-up {
    transform: translateY(-20%) !important;
    z-index: 10;
  }

  .container::before,
  .container.sign-in::before,
  .container.sign-up::before {
    height: 100vh;
    border-bottom-right-radius: 0;
    border-top-left-radius: 0;
    z-index: 0;
    transform: none;
    right: 0;
  }

  .form-wrapper {
    position: relative;
    top: -10%;
    width: 100%;
    max-width: 28rem;
  }

  .toggle-password {
    right: -14rem !important;
  }

  .container.sign-in .col.sign-in,
  .container.sign-up .col.sign-up {
    transform: translateY(0);
  }

  .content-row {
    align-items: flex-start !important;
  }

  .content-row .col {
    transform: translateY(0);
    background-color: unset;
  }

  .col {
    width: 100%;
    position: absolute;
    padding: 2rem;
    background-color: var(--white);
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
    transform: translateY(100%);
    transition: 1s ease-in-out;
  }

  .row {
    align-items: flex-end;
    justify-content: flex-end;
  }

  .form p {
    margin: 1rem 0;
    font-size: 0.7rem;
  }

  .form,
  .social-list {
    box-shadow: none;
    margin: 0;
    padding: 0;
  }

  .text {
    margin: 0;
  }

  .text p {
    display: none;
  }

  .text h2 {
    margin: 0.5rem;
    font-size: 2rem;
  }
}
@media only screen and (max-width: 320px) and (max-height: 2340px){
  #users-btn {
    display: none;
  }

  .container.sign-up .col.sign-up,
  .container.sign-in .col.sign-in {
    transform: translateY(-10%) !important;
    z-index: 10 !important;
  }

  .col {
    width: 100%;
    position: absolute;
    padding: 2rem;
    background-color: var(--white);
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
    transform: translateY(100%);
    /* transform: translateY(-10%) !important; */
    z-index: 10 !important;
    transition: 1s ease-in-out;
  }
}
/* @media only screen and (max-width: 1024px) and (max-height: 2340px) {
  .container.sign-up .col.sign-up {
    transform: translateY(-30%) !important;
    z-index: 10;
  }

  .container::before,
  .container.sign-in::before,
  .container.sign-up::before {
    height: 100vh;
    border-bottom-right-radius: 0;
    border-top-left-radius: 0;
    z-index: 0;
    transform: none;
    right: 0;
  }

  .form-wrapper {
    position: relative;
    top: -5%;
    width: 100%;
    max-width: 28rem;
  }

  .toggle-password {
    right: -10rem !important;
  }

  .container.sign-in .col.sign-in,
  .container.sign-up .col.sign-up {
    transform: translateY(0);
  }

  .content-row {
    align-items: flex-start !important;
  }

  .content-row .col {
    transform: translateY(0);
    background-color: unset;
  }

  .col {
    width: 100%;
    position: absolute;
    padding: 2rem;
    background-color: var(--white);
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
    transform: translateY(100%);
    transition: 1s ease-in-out;
  }

  .row {
    align-items: flex-end;
    justify-content: flex-end;
  }

  .form p {
    margin: 1rem 0;
    font-size: 0.8rem;
  }

  .form,
  .social-list {
    box-shadow: none;
    margin: 0;
    padding: 0;
  }

  .text {
    margin: 0;
  }

  .text p {
    display: none;
  }

  .text h2 {
    margin: 0.5rem;
    font-size: 2.5rem;
  }
} */


@media only screen and (max-width: 425px) {
  #users-btn {
    display: none;
  }
  
  .container.sign-in .col.sign-in,
  .container.sign-up .col.sign-up {
    transform: translateY(0);
    /* transform: translateY(-10%) !important; */
    z-index: 10;
  }
  .container::before,
  .container.sign-in::before,
  .container.sign-up::before {
    height: 100vh;
    border-bottom-right-radius: 0;
    border-top-left-radius: 0;
    z-index: 0;
    transform: none;
    right: 0;
  }

  .form-wrapper {
    position: relative;
    top: -10%;
    width: 100%;
    max-width: 28rem;
  }

  .toggle-password {
    right: -14rem !important;
  }

  .content-row {
    align-items: flex-start !important;
  }

  .content-row .col {
    transform: translateY(0);
    background-color: unset;
  }

  .col {
    /* width: 100%;
    position: absolute;
    padding: 2rem;
    background-color: var(--white);
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
    transform: translateY(100%);
    transition: 1s ease-in-out; */
    
    transform: none;
  }

  .row {
    align-items: flex-end;
    justify-content: flex-end;
  }

  .form p {
    margin: 1rem 0;
    font-size: 0.7rem;
  }

  .form,
  .social-list {
    box-shadow: none;
    margin: 0;
    padding: 0;
  }

  .text {
    margin: 0;
  }

  .text p {
    display: none;
  }

  .text h2 {
    margin: 0.5rem;
    font-size: 2rem;
  }

  /* .container.sign-up .form.sign-up,
.container.sign-up .social-list.sign-up,
.container.sign-up .social-list.sign-up > div */
  .container.sign-in .form.sign-in,
.container.sign-in .social-list.sign-in,
.container.sign-in .social-list.sign-in > div
 {
    transform: scale(1);
}
}


/* captcha */

#generateCaptchaBtn {
  cursor: pointer;
  width: 120px; /* specify units */
  padding: 0.6rem 0;
  border-radius: 0.5rem;
  border: none;
  background-color: rgb(222, 62, 3);
  color: white;
  font-size: 0.7rem;
  outline: none;
  display: block;       /* Make button a block element */
  margin: 0 auto 1rem;  /* Center horizontally with margin auto and add bottom margin */
  text-align: center;   /* Center text */
}

#generateCaptchaBtn:hover {
    cursor: pointer;
    width: 120px; /* specify units */
    padding: 0.6rem 0;
    border-radius: 0.5rem;
    border: none;
    background-color: rgb(200, 42, 3);
    color: white;
    font-size: 0.7rem;
    outline: none;
    display: block;       /* Make button a block element */
    margin: 0 auto 1rem;  /* Center horizontally with margin auto and add bottom margin */
    text-align: center;   /* Center text */
}

#captchaInput {
  border: none;
  outline: none;
  background: transparent;
  font-size: 1rem;
  color: black; /* or your preferred text color */
  padding: 0;
  /* Optionally: add a bottom border or underline */
  /* border-bottom: 1px solid #ccc; */
  width: 150px; /* or as needed */
  /* transform: translateY(10px); */
  margin-bottom: 20px;
  text-align: center;
}


#snackbar {
  min-width: 250px;
  max-width: 80%;
  background-color: #d32f2f;
  color: #fff;
  border-radius: 4px;
  padding: 10px 14px 10px 40px;
  position: fixed;
  top: 40px;
  font-size: 14px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transform: translateX(0);
  transition: transform 0.4s ease, opacity 0.3s ease, visibility 0.3s;
}

/* Slide-in from LEFT (used for Signup) */
#snackbar.slide-left {
  left: 10px;
  right: auto;
  transform: translateX(-100%);
}
#snackbar.slide-left.show {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}
#snackbar.slide-left.hide {
  transform: translateX(-100%);
  opacity: 0;
  visibility: hidden;
}

/* Slide-in from RIGHT (used for Signin) */
#snackbar.slide-right {
  right: 10px;
  left: auto;
  transform: translateX(100%);
}
#snackbar.slide-right.show {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}
#snackbar.slide-right.hide {
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
}

/* Snackbar error icon */
.snackbar-icon {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: white;
  position: relative;
  flex-shrink: 0;
}

.snackbar-icon::before,
.snackbar-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  background-color: #d32f2f;
  transform-origin: center;
}

.snackbar-icon::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.snackbar-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

a#forgot-password {
  color: red;
  text-decoration: none;
  transition: color 0.3s ease;
  /* position: relative;
  bottom: 20rem; */
}

a#forgot-password:hover {
  color: darkred;
  text-decoration: underline;
}

@media only screen and (max-width: 1260px) and (max-height: 2800px) {
  .container.sign-up .col.sign-up,
  .container.sign-in .col.sign-in {
    transform: translateY(-10%) !important;
    z-index: 10 !important;
  }

  .form-wrapper {
    position: relative;
    top: -5%;
    width: 100%;
    max-width: 28rem;
  }

  .toggle-password {
    right: -10rem !important;
  }

  .content-row {
    align-items: flex-start !important;
  }

  .content-row .col {
    transform: translateY(0);
    background-color: unset;
  }

  .col {
    width: 100%;
    position: absolute;
    padding: 2rem;
    background-color: var(--white);
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
    transform: translateY(100%);
    transition: 1s ease-in-out;
  }

  .row {
    align-items: flex-end;
    justify-content: flex-end;
  }

  .form p {
    margin: 1rem 0;
    font-size: 0.8rem;
  }

  .form,
  .social-list {
    box-shadow: none;
    margin: 0;
    padding: 0;
  }

  .text {
    margin: 0;
  }

  .text p {
    display: none;
  }

  .text h2 {
    margin: 0.5rem;
    font-size: 2.5rem;
  }

  #users-btn {
    display: none;
  }
}


/* Responsive for major mobile widths */
@media only screen and (max-width: 600px) {
  html, body {
    overflow: auto;
  }

  .text h2 {
    font-size: 1.5rem;
  }

  .form-wrapper {
    padding: 0 1rem;
    top: 0;
  }

  .input-group input {
    padding: 0.8rem 2.5rem;
    font-size: 0.95rem;
  }

  .toggle-password {
    right: 1.5rem !important;
    font-size: 1.4rem;
  }

  .form button {
    font-size: 1rem;
    padding: 0.5rem 0;
  }

  #generateCaptchaBtn {
    width: 100%;
    font-size: 0.8rem;
  }

  #captchaInput {
    font-size: 1rem;
    width: 100%;
  }

  a#forgot-password {
    font-size: 0.9rem;
  }
}


/* iPhone SE / smaller screens */
@media only screen and (max-width: 375px) {
  .text h2 {
    font-size: 1.3rem;
  }

  .input-group input {
    padding: 0.7rem 2.2rem;
  }

  .toggle-password {
    font-size: 1.3rem;
    right: 1.2rem !important;
  }

  #captchaInput {
    width: 100%;
  }
}

/* Pixel 4a, Galaxy S10e, etc. */
@media only screen and (max-width: 360px) {
  .form-wrapper {
    padding: 0;
  }

  .form {
    padding: 0.5rem;
  }
}


@media only screen and (max-width: 1260px) and (max-height: 2800px) {
  .container.sign-up .col.sign-up, .container.sign-in .col.sign-in {
      /* transform: translateY(-10%) !important; */
      z-index: 10 !important;
  }
}

/* tab responsive */
@media only screen and (min-width: 768px) and (max-width: 1024px) {

  .container,
  .row {
    display: flex;
    flex-wrap: nowrap !important;
    width: 100%;
    height: 100vh;
  }

  /* Column base style */
  .col.align-items-center.flex-col {
    flex: 0 0 50%;
    max-width: 50%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    box-sizing: border-box;
  }

  /* Orange panel */
  .orange-panel {
    background-color: var(--orange);
    color: var(--white);
    text-align: center;
  }

  /* Form panel */
  .form-panel {
    background-color: var(--white);
  }

  /* Headings in orange panel */
  .orange-panel .text h2 {
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.3;
    word-break: break-word;
    max-width: 90%;
  }

  /* Keep container in flex row for tablets */
  .container.sign-up {
    display: flex;
    flex-direction: row;
  }

  /* Move the sign-up form column to the left */
  .container.sign-up .col.sign-up {
    order: 1;
  }

  /* Move the text/image column to the right */
  .container.sign-up .col.align-items-center.flex-col {
    order: 2;
    position: relative;
    left: 0%;
  }


  /* Toggle password icon */
  .toggle-password {
    position: absolute;
    top: 50%;
    right: 1rem !important;
    transform: translateY(-50%);
    font-size: 1.2rem;
    cursor: pointer;
    /* color: var(--dark-gray); */
    z-index: 2;
  }
}