/* Login Page Styles */
    :root {
       --color-p: #efba34;
       --color-white: #fff;
       --color-light-gray: #eff2f5;
       --color-mid-gray: #96a0b5;
       --color-dark-gray: #6d7d93;
       --color-dark: #e7623d;
       --color-red: #d13a3a;
    }
    body {
       margin: 0;
    }
    .wrapper h1 {
       font-size: 20px;
       line-height: 1.4rem;
    }
    .wrapper h2 {
       font-size: 2rem;
    }
    .wrapper h3 {
       font-size: 1.563rem;
    }
    .wrapper h4 {
       font-size: 1.25rem;
    }
    .wrapper a {
       text-decoration: none;
       color: var(--color-p);
       transition: all 0.3s ease-out;
    }
    .wrapper a:hover {
       color: var(--color-dark);
    }
    /* .text-center {
       text-align: center;
    }
    .text-underline {
       text-decoration: underline;
    } */
    *,
    *:before,
    *:after {
       box-sizing: border-box;
    }
 
    .wrapper {
       background: var(--color-white);
       color: var(--color-dark);
       font-size: var(--normal-font-size);
       font-family: var(--body-font);
       line-height: 1.3rem;
    }
    .wrapper img,
    .wrapper svg {
       display: block;
       max-width: 100%;
       height: auto;
    }
    .wrapper {
       min-height: 100vh;
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       text-align: center;
    }
    .wrapper .left {
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.3s ease-out;
    }
    .wrapper .left h1 {
       font-weight: 700;
       margin-bottom: 1rem;
    }
    .wrapper .left .social-buttons {
       display: flex;
       align-items: center;
       justify-content: center;
       margin: 0 auto 0.75rem;
       gap: 1rem;
    }
    .wrapper .left .social-buttons a {
       padding: 8px;
       display: inline-block;
       background-color: var(--color-light-gray);
       border-radius: 4px;
    }
    .wrapper .left-inner {
       display: flex;
       flex-flow: column wrap;
       width: 250px;
    }
    .wrapper .left .seperator {
       position: relative;
    }
    .wrapper .left .seperator:before {
       content: "";
       position: absolute;
       top: 38%;
       left: 0;
       z-index: 1;
       height: 1px;
       width: 100%;
       background-color: var(--color-mid-gray);
    }
    .wrapper .left .seperator span {
       background-color: var(--color-white);
       padding: 0 1rem;
       display: inline-block;
       position: relative;
       z-index: 2;
       color: var(--color-mid-gray);
       margin-bottom: 0.5rem;
    }
    .wrapper .left #login_form .form-group {
       margin-bottom: 1rem;
       text-align: left;
    }
    .wrapper label {
       display: block;
       color: var(--color-dark-gray);
       font-size: 14px;
       font-weight: 400;
    }
    .wrapper input {
      background-color: var(--color-light-gray);
      border: 1px solid transparent;
      width: 100%;
      border-radius: 6px;
      font-size: initial;
      font-weight: 500;
      color: var(--title-color);
      padding: 6px 6px;

    }
    .wrapper input:focus {
       color: var(--title-color);
       background-color: var(--color-white);
       border-color: var(--color-p);
       outline: 0;
       border: 1px solid var(--color-p);
    }
    .wrapper input.error {
       border: 1.5px solid var(--color-red);
    }
    .wrapper .form-radio,
    .wrapper .form-checkbox {
       appearance: none;
       display: inline-block;
       position: relative;
       background-color: var(--color-white);
       border: 2px solid #bdbcc0;
       height: 24px;
       width: 24px;
       border-radius: 50px;
       cursor: pointer;
       margin: 0 10px 0 0;
       outline: none;
       padding: 0;
    }
    .wrapper label[for="id_remember"], .wrapper .form-group .form-text.text-muted  {
      display: none;
    }

    .wrapper .form-radio:checked::before,
    .wrapper .form-checkbox:checked::before {
       position: absolute;
       left: 5px;
       top: 1px;
       content: "\02143";
       font-size: 14px;
       transform: rotate(40deg);
    }
   .wrapper  .form-radio:hover,
   .wrapper  .form-checkbox:hover {
       background-color: var(--color-mid-gray);
       outline: none;
    }
    .wrapper .form-radio:checked,
   .wrapper  .form-checkbox:checked {
       background-color: var(--color-p);
       border-color: var(--color-dark);
       color: var(--color-white);
       z-index: 2;
    }
   .wrapper .form-radio {
       border: 2px solid #bdbcc0;
       top: 6px;
    }
    .wrapper .form-checkbox {
       border-radius: 4px;
    }
    .wrapper .error-text {
       color: var(--color-red);
    }
    #register_form .form-group ,.wrapper .error-block {
      width: 250px;
   }
   #register_form .form-text.text-muted ul{
      color: var(--title-color);
   }
   #register_form{
      text-align: justify;
   }
   #register_form .create-aacount{
      text-align: center;
   }
    .wrapper .remember-forgot {
       display: flex;
       justify-content: space-between;
       align-items: center;
    }
    .wrapper .remember {
       display: flex;
       align-items: center;
    }
    .wrapper .remember label {
       display: inline-block;
       line-height: 1;
    }
    .wrapper .forgot {
       line-height: 1;
       text-align: right;
    }
    .wrapper button {
       display: flex;
       align-items: center;
       justify-content: center;
       background-color: var(--color-p);
       color: var(--color-white);
       border: 0;
       padding: 0.75rem;
       width: 100%;
       border-radius: 6px;
       font-weight: 700;
       font-size: 0.75rem;
       cursor: pointer;
       transition: all 0.3s ease-out;
    }
    .wrapper button:hover {
       background-color: var(--color-dark);
    }
    .wrapper .right {
       background: radial-gradient(
          82.76% 57.9% at 72.85% 4.95%,
          var(--color-p) 0%,
          var(--color-dark) 100%
       );
       display: flex;
       align-items: flex-start;
       justify-content: center;
       color: var(--color-white);
       padding: 3rem;
    }
    .wrapper .right svg {
       margin: auto;
    }
    .wrapper .right h2 {
      color: var(--deep-umber); /* Lighter, pastel orange that complements */
      
      font-weight: 500;
      font-size: 1.1rem;
      line-height: 1.6;
      text-align: center;

    }
    .wrapper .right strong {
       color: var(--Dark-Espresso); /* Warm terracotta tone matching clay */
      font-family: 'Montserrat-Alt1', sans-serif;
      font-weight: 600;
      font-size: 2.2rem;
      line-height: 1.4;
      text-align: center;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.2); /* subtle contrast */

    }
    .wrapper .right p {
       max-width: 50vw;
      margin: 0 auto;
      line-height: 1.8rem;
      font-size: 1.6rem;

    }
    .wrapper .right{
      position: relative;
      z-index: 2;
    }
    .right_img{
      position: absolute;
      transform: translate(-50%, -50%);
      top: 50%;
      left: 50%;
      filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.25));
      z-index: -10;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
    }
    .right_img img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .wrapper .right::after{
      content: '';
      opacity: 0.8;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-repeat: no-repeat;
      background-position: left bottom;
      background-size: cover;
      mix-blend-mode: multiply;
    }
    .wrapper .right .right-inner {
      position: relative;
      z-index: 2;
      background-color: rgba(255, 255, 255, 0.75);
      border-radius: 12px;
      border: 1px solid rgba(209, 213, 219, 0.3);
      background-size: 200% ;
      background-clip: text;
      -webkit-background-clip: text;
      backdrop-filter: blur(2px) saturate(100%);
      -webkit-backdrop-filter: blur(2px) saturate(100%);
      margin-bottom: 10% 0;
      color: var(--color-dark);
      /* animation: ani-gradient 2.5s ease-in-out 1 ;
      animation-fill-mode: forwards;
      animation-iteration-count: infinite; */
      padding: 1.8rem 0.5rem 1.8rem 0.5rem;
      text-align: center;
      text-shadow: 0 0 10px #fff, 0 0 20px #fff;
    }
    @keyframes ani-gradient {
      from {
         text-shadow: 0 0 10px #fff, 0 0 20px #fff;
       }
       to {
         text-shadow: 0 0 20px #fff;
       }
    }
    .sign-in-form,
    .forgot-pass-form,
    .sign-up-form {
       display: none;
    }
    .sign-in-form.active,
    .forgot-pass-form.active,
    .sign-up-form.active {
       display: block;
    }
    .dark-mode-btn {
       position: fixed;
       left: 1rem;
       bottom: 1rem;
       z-index: 10;
       background-color: var(--color-white);
       padding: 0.5rem;
       display: flex;
       align-items: center;
       justify-content: center;
       border: 2px solid var(--color-mid-gray);
       border-radius: 50%;
       transition: all 0.3s ease-out;
    }
    .dark-mode-btn svg {
       filter: invert(67%) sepia(7%) saturate(757%) hue-rotate(182deg)
          brightness(95%) contrast(88%);
       width: 16px;
       height: 16px;
    }
    .dark-mode-btn.active {
       background-color: var(--color-p);
       border-color: var(--color-p);
    }
    .dark-mode-btn.active svg {
       filter: invert(91%) sepia(31%) saturate(1482%) hue-rotate(328deg)
          brightness(102%) contrast(101%);
    }
    .dark-mode-on .left {
       background-color: var(--color-dark);
       color: var(--color-white);
    }
    .dark-mode-on input {
       background-color: transparent;
       border: 1px solid var(--color-mid-gray);
    }
    .dark-mode-on .seperator span {
       background-color: var(--color-dark);
    }
    .dark-mode-on button:hover {
       background-color: var(--color-white);
       color: var(--color-dark);
    }
    @media screen and (max-width: 48rem) {
       .wrapper {
          grid-template-columns: 1fr;
       }
       .wrapper .right {
          display: none;
       }
    }


   .wrapper .field {
      position: relative;
      width: 100%; /* The field will take up 100% of the parent container's width */
   }
   .wrapper .input-field {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: flex-end; /* Align eye icon above the input */
   }

   .wrapper .input-field input {
      width: 100%; /* Input field will take full width of its parent */
      box-sizing: border-box; /* Padding and border are included in the width */
      z-index: 2; /* Ensure the input is on top */
      position: relative;
      color: var(--title-color);
   }

  .wrapper .password,.wrapper .cPassword {
      margin-top: 38px;
   }

   .wrapper .btn-primary {
      margin-top: 38px;
   }

   .wrapper .field .error {
      position: absolute;
      display: flex;
      align-items: center;
      font-size: 20px;
      margin-top: -22px;
      margin-bottom: -90px;
      display: none;
      width: 100%; /* Error message container takes full width of the parent */
      box-sizing: border-box; /* Keeps padding and borders inside the width */
      z-index: 1; /* Error message will be behind the input */
      background: transparent;

   }

   .wrapper .error .error-icon {
      margin-right: 6px;
      font-size: 15px;
      vertical-align: middle;
   }

  .wrapper  .pError-icon {
      margin-right: 6px;
      font-size: 15px;
      vertical-align: middle;
      margin-left: -21px;
   }


  .wrapper #checkUser {
      font-size: 25px;
   }

   .wrapper .eye {
      position: absolute;
      right: 10px;
      top: 57px;
      z-index: 3;
    }

   .wrapper .eye i {
      font-size: 20px;
      
    }
    
   .wrapper .form-group.email {
      margin-bottom: 50px;
   }

   #login_form .alert.alert-danger,#register_form .error-block {
      white-space: pre-wrap;
      width: 250px;
      text-align: left;
      display: inline-flex;
   }
   #login_form .alert,#register_form .error-block{
    background-color: white;
    padding: 10px 0 0 0;
    color: inherit;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
    word-wrap: break-word;
    /* overflow-wrap: break-word; */
    text-align: left;
    box-shadow: none;
   }
   .wrapper form div:nth-child(2).alert.alert-danger {
      display: none !important;
   }
   .position-relative {
        position: relative;
    }
    
    .position-absolute {
        position: absolute;
    }
    
    
    
    .toggle-password {
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        font-size: 0.875rem; /* Smaller icon size */
    }

        /* Hide default eye icons */
    input[type="password"]::-ms-reveal,
    input[type="password"]::-ms-clear {
    display: none;
    }