@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,300&display=swap");

:root {
  --red: #ed1c24;
  --blue: #0e27bf;
}

body {
  /* font-family: "Plus Jakarta Sans", sans-serif; */
  font-family: "Poppins", sans-serif;
}

:is(h1, h2, h3, h4, h5, h6) {
  font-family: "Bricolage Grotesque", sans-serif;
}
:is(h1, h2, h3) {
  font-weight: 700;
}

ul {
  list-style: none;
}

h1 {
  font-size: clamp(2.15rem, 3vw, 3.15rem);
  /* line-height: 1.08; */
  margin-block: 1rem 0.75rem;
}

h1 em {
  font-style: normal;
  background: linear-gradient(90deg, #ffd5d8, #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
h1 span {
  background: linear-gradient(90deg, #ffc60a, #ffb4b8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

a {
  color: var(--blue);
  text-decoration: none;
  text-underline-offset: 5px;
  transition: 0.4s;
}
a:hover {
  color: var(--red);
  text-decoration: underline;
}

:is(input, select):focus {
  outline: none;
  box-shadow: none !important;
  border-color: #000;
}

input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #4f46e5;
  cursor: pointer;
}

.login_sec {
  position: relative;
  overflow: hidden;
}

.login_sec .login_leftarea {
  position: relative;
  height: 100%;
  color: #fff;
  padding: 3rem 4rem 2.5rem;
  /* background:
    radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0), transparent 40%), radial-gradient(circle at 100% 55%, #0e27bf, transparent 40%),
    linear-gradient(140deg, var(--red) 0%, #6b1a8f, var(--blue) 100%); */
  background:
    radial-gradient(circle at 0% 0%, var(--red), transparent 40%), radial-gradient(circle at 100% 50%, #1518b1, transparent 40%), linear-gradient(140deg, var(--red) 0%, #8b0f99, var(--blue) 100%);
  overflow: hidden;
}

.login_leftarea::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../../assets/img/register-bg.png") no-repeat right/contain;
  opacity: 0.15;
  pointer-events: none;
}

.login_leftarea .brand_content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  height: 100%;
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
  z-index: 2;
}

.login_leftarea .brand_content .subheading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  background: #ff575e3d;
  border: 1px solid #ffffff2e;
  box-shadow: 3px 1px 10px #fff4;
  padding: 0.5rem 14px;
}

.float-chip {
  position: absolute;
  z-index: 1;
  width: 3.25rem;
  aspect-ratio: 1/1;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: #ffffff1f;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 1.25rem;
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 25px -10px rgba(0, 0, 0, 0.3);
}

.chip-plane {
  top: 14%;
  right: 10%;
  animation: floaty 6s ease-in-out infinite;
}
.chip-pin {
  top: 50%;
  right: 18%;
  animation: floaty 9s ease-in-out infinite;
}
.chip-globe {
  bottom: 20%;
  right: 5%;
  animation: floaty 7.5s ease-in-out infinite reverse;
}

@keyframes floaty {
  0%,
  100% {
    transform: translateY(0) rotate(-4deg);
  }
  50% {
    transform: translateY(-14px) rotate(4deg);
  }
}

.brand_content .subheading.circle::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 0.5rem;
  background: #41f0a3;
  box-shadow: 0 0 0 4px rgba(65, 240, 163, 0.25);
  animation: pulse 1.8s ease-in-out infinite;
  border-radius: 50%;
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 4px rgba(65, 240, 163, 0.25);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(65, 240, 163, 0.05);
  }
}

.brand_content p {
  color: #ffffffdd;
  max-width: 515px;
  width: 100%;
}
.brand_content .stat_strip {
  gap: 0.75rem;
  padding: 1rem 0 0.75rem;
  margin-bottom: 0.5rem;
  border-block: 1px solid rgba(255, 255, 255, 0.15);
}

.brand_content .testimonial {
  margin: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 22px 1.5rem;
  border-radius: 20px;
  backdrop-filter: blur(14px);
}

.testimonial .avatar_info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
}

.testimonial .avatar_info .avatar {
  place-content: center;
  text-align: center;
  width: 2.25rem;
  aspect-ratio: 1/1;
  font-weight: 700;
  background: linear-gradient(135deg, #ffd5d8, #5b8cff);
  border-radius: 50%;
}

/* ============   Right Side  ============== */

.login_sec .login_rightarea {
  position: relative;
  place-content: center;
  padding: 2.5rem 4rem 4rem;
  height: 100%;
  margin: auto;
}
.login_sec .login_rightarea p {
  color: #5a6275;
}

.form_wrapper {
  max-width: 460px;
  margin-inline: auto;
}

.form_wrapper header span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(237, 28, 36, 0.08), rgba(30, 64, 175, 0.08));
  color: var(--blue);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(30, 64, 175, 0.15);
}

.travobyte_form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.travobyte_form label {
  font-weight: 500;
}
.travobyte_form :is(input, select):not([type="checkbox"]) {
  font-weight: 500;
  width: 100%;
  padding: 14px 1rem 0.75rem 2.75rem;
  border-radius: 12px;
  border: 1.5px solid #ddd;
  background-color: #f6f8fc;
  transition: 0.25s;
}
.travobyte_form .forget_link {
  font-weight: 500;
  font-size: 0.92rem;
}

:is(input, button)[type="submit"],
.login-loader-btn {
  position: relative;
  width: 100%;
  padding: 15px 22px;
  color: #fff;
  font-weight: 600;
  border: 0;
  margin-block: 1rem 1rem;
  text-transform: capitalize;
  letter-spacing: 0.4px;
  word-spacing: 1px;
  background: linear-gradient(120deg, var(--red), #b51b5b, var(--blue), var(--red));
  background-size: 150%;
  background-position: left center;
  border-radius: 15px;
  box-shadow: 0 14px 30px -10px rgba(237, 28, 36, 0.55);
  transition: 0.4s;
  cursor: pointer;
  overflow: hidden;
}
:is(input, button)[type="submit"]:hover {
  background-size: 120%;
  background-position: right center;
  box-shadow: 0 10px 25px -8px rgba(237, 28, 36, 0.25);
  transform: translateY(2px);
}
.login-loader-btn {
  opacity: 0.8;
  cursor: not-allowed;
}

.field-icon {
  position: absolute;
  left: 16px;
  color: #aab0c0;
  pointer-events: none;
}
.toggle-eye {
  position: absolute;
  right: 14px;
  background: transparent;
  border: 0;
  color: #666;
  font-size: 1rem;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: 0.4s;
}
.toggle-eye:hover {
  color: #f00;
  background: #f001;
}

footer.form-foot {
  position: absolute;
  left: 0;
  bottom: 10px;
  width: 100%;
  padding-inline: 1rem;
}

/* ============   Register Page  ============== */

.register_leftarea .brand_content {
  max-width: 600px;
}
.register_leftarea .stat_strip li {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0;
}

.register_leftarea .stat_strip li i[my-icon="icon1"] {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='white' d='M212 80a12 12 0 0 1-12 12h-28a64.07 64.07 0 0 1-64 64h-5l65 59.12a12 12 0 1 1-16.14 17.76l-88-80A12 12 0 0 1 72 132h36a40 40 0 0 0 40-40H72a12 12 0 0 1 0-24h68a40 40 0 0 0-32-16H72a12 12 0 0 1 0-24h128a12 12 0 0 1 0 24h-42.09a64 64 0 0 1 9.4 16H200a12 12 0 0 1 12 12'/%3E%3C/svg%3E");
}
.register_leftarea .stat_strip li i[my-icon="icon2"] {
  --icon-color: #9026e3;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='m19 1l-1.26 2.75L15 5l2.74 1.26L19 9l1.25-2.74L23 5l-2.75-1.25M9 4L6.5 9.5L1 12l5.5 2.5L9 20l2.5-5.5L17 12l-5.5-2.5M19 15l-1.26 2.74L15 19l2.74 1.25L19 23l1.25-2.75L23 19l-2.75-1.26'/%3E%3C/svg%3E");
}
.register_leftarea .stat_strip li i[my-icon="icon3"] {
  --icon-color: #373aeb;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 2C6.486 2 2 6.486 2 12v4.143C2 17.167 2.897 18 4 18h1a1 1 0 0 0 1-1v-5.143a1 1 0 0 0-1-1h-.908C4.648 6.987 7.978 4 12 4s7.352 2.987 7.908 6.857H19a1 1 0 0 0-1 1V18c0 1.103-.897 2-2 2h-2v-1h-4v3h6c2.206 0 4-1.794 4-4c1.103 0 2-.833 2-1.857V12c0-5.514-4.486-10-10-10'/%3E%3C/svg%3E");
}

.register_leftarea .stat_strip li i {
  position: relative;
  display: inline-block;
  width: 3rem;
  height: 3rem;
  aspect-ratio: 1/1;
  background-color: var(--icon-color, #e43573);
  border-radius: 50%;
}
.register_leftarea .stat_strip li i::before {
  content: "";
  position: absolute;
  inset: 0.5rem;
  background: var(--svg) no-repeat center/contain;
}

.feature_area {
  padding: 1.25rem 1.5rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  backdrop-filter: blur(2px);
}
.feature_area ul {
  columns: 2 200px;
  column-gap: 0.75rem;
  padding: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.feature_area li {
  display: flex;
  gap: 5px;
  align-items: center;
  margin-bottom: 0.75rem;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
.feature_area li::before {
  content: "";
  display: inline-block;
  width: 1.75rem;
  aspect-ratio: 1/1;
  text-align: center;
  place-content: center;
  color: #fff;
  background-color: #e73c85;

  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 21a9 9 0 1 0 0-18a9 9 0 0 0 0 18m-.232-5.36l5-6l-1.536-1.28l-4.3 5.159l-2.225-2.226l-1.414 1.414l3 3l.774.774z' clip-rule='evenodd'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
}

.travobyte_form.register_form :where(input, select):not([type="checkbox"]) {
  padding: 14px 1rem 0.75rem;
}

.form-select {
  cursor: pointer;
}

select.form-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23666' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px;
  padding-right: 2rem;
}

.field-control:has(i),
.field-control.merge_field {
  position: relative;
  display: flex;
  align-items: center;
}
.travobyte_form .field-control.merge_field select {
  width: auto;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding-inline: 0.75rem;
  background-position: right 2px center;
  border-right: none;
}

.field-control.merge_field input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

#manual-captcha,
.refresh-btn {
  font-size: 20px;
  font-weight: 600;
  height: 100%;
  place-content: center;
}
#manual-captcha {
  font-family: "Courier New", monospace;
  padding: 0.5rem 1.5rem;
  background: linear-gradient(135deg, #e0e0e0, #f5f5f5);
  letter-spacing: 7px;
  user-select: none;
  border-radius: 10px 0 0 10px;
}

.refresh-btn {
  padding: 6px 12px;
  background-color: #6c757d;
  border: none;
  color: white;
  border-radius: 0 10px 10px 0;
}

.refresh-btn:hover {
  background-color: #5a6268;
}
input[name="captcha_input"]:not(:placeholder-shown) {
  letter-spacing: 2px;
}
@media (max-width: 1200px) {
  .login_sec .login_leftarea {
    padding: 3rem 2.5rem 2.5rem;
  }
}

@media (max-width: 764px) {
  html {
    font-size: 15.4px;
  }
  footer.form-foot {
    position: relative;
  }
}
@media (max-width: 564px) {
  .login_sec .login_leftarea,
  .login_sec .login_rightarea {
    padding: 2rem 1.1rem 2.5rem;
  }

  .login_sec .login_rightarea {
    padding-bottom: 0.5rem;
  }

  .brand_content .testimonial {
    padding: 1.5rem 1rem;
  }
  .register_leftarea .stat_strip li i {
    width: 2.75rem;
    height: 2.75rem;
  }
  .feature_area {
    padding: 1.25rem 0.75rem;
  }
  #manual-captcha {
    padding: 0.5rem 1rem;
  }
}