/* FONTS */
@font-face {
  font-family: "VirginScript_Medium";
  src: url("https://clearstream-static.s3.eu-west-1.amazonaws.com/virgin_red-inner_circle/last/lp/fonts/VirginScript_Medium.otf")
    format("truetype");
}

/* ROOT */
:root {
  /* Colors */
  --bg: #020202;
  --bg-2: #ffffff;
  --text: #ffffff;
  --sec-text: #1d1d1d;
  --accent: #ffffff;

  /* Fonts */
  --font-headers: "VirginScript_Medium";
  --font-ineter: "inter-18pt";

  /* Rescaling — calc( px / 1920 * 100vw ) */
  --pad-x: max(1rem, calc(270 / 1920 * 100vw));

  /* Rescaling font sizes */
  --fs-body: max(1rem, calc(30 / 1920 * 100vw));
  --fs-h1: max(3.5rem, calc(73 / 1920 * 100vw));
  --fs-p: max(1rem, calc(18 / 1920 * 100vw));

  /* Rescaling by height and width - Height of the bar is 2x92 it's mean in psd is 184px */
  --nav-h: max(6.25rem, calc((92 / 1920 * 90vw) + (92 / 1080 * 90svh)));

  /* Misc */
  --ease: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Rescaling — media */
@media (max-width: 1500px) {
  :root {
    --pad-x: max(1rem, calc(100 / 1920 * 100vw));
  }
}

/* RESET */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-ineter);
  color: #1d1d1d;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3 {
  font-weight: normal;
}

ul,
ol {
  margin-left: 20px;
}

p {
  font-family: var(--font-ineter);
}

a {
  color: inherit;
}

button {
  cursor: pointer;
  font: inherit;
  border: none;
  background: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

a,
p,
li {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

/* NAV */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--pad-x);
  background: var(--bg-2);
  grid-template-rows: var(--nav-h);
  overflow: hidden;
}

.nav.scrolled {
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}

.nav_logo:first-of-type {
  width: max(4rem, calc((60.5 / 1920 * 100vw) + (60.5 / 1080 * 100vh)));
  /* Rescaling by height and width - Size of image is 2x60.5 it's mean in psd is 121px */
  transition: opacity var(--ease);
}

.nav_logo:last-of-type {
  width: max(10rem, calc((166.5 / 1920 * 100vw) + (166.5 / 1080 * 100vh)));
  /* Rescaling by height and width - Size of image is 2x166.5 it's mean in psd is 333px */
  transition: opacity var(--ease);
}

.nav_logo:hover {
  opacity: 0.8;
}

/* Media Hero */
@media (max-width: 490px) {
  .nav {
    grid-template-columns: 1fr auto;
  }
}

/* HERO */
.hero {
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: center;
  margin-top: var(--nav-h);
  padding-top: 2rem;
  padding-bottom: 2rem;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
  position: relative;
  overflow: hidden;
  background-image: url("https://clearstream-static.s3.eu-west-1.amazonaws.com/virgin_red-inner_circle/last/lp/media/back_red.png");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  font-family: var(--font-headers);
  color: var(--text);
  font-size: var(--fs-body);
  line-height: 1.7;
}

.hero_inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr minmax(auto, 419px);
  align-items: center;
  gap: max(2rem, calc(64 / 1920 * 100vw));
}

.back_mobile {
  display: none;
}

/* Left hero box */
.hero_content {
  max-width: 65ch;
}

.hero_title {
  font-size: var(--fs-h1);
  line-height: 0.96;
  margin-bottom: max(1rem, calc(20 / 1920 * 100vw));
}

.hero_sub {
  font-family: var(--font-ineter);
  font-size: var(--fs-p);
  color: var(--text);
  max-width: 37ch;
  margin-bottom: max(2rem, calc(40 / 1920 * 100vw));
  letter-spacing: 0.15px;
}

/* Right hero box */
.log-box {
  position: relative;
  background: var(--bg-2);
  margin: auto;
  padding: 46px;
  padding-top: 30px;
  width: 100%;
  max-width: 419px;
  min-width: 0;
}

.log-box h2 {
  font-family: var(--font-ineter);
  font-size: max(1.53rem, calc(30 / 1920 * 100vw));
  text-transform: uppercase;
  font-weight: bold;
  color: var(--sec-text);
  margin-bottom: 2px;
}

#user_session_password,
#user_session_login {
  width: 100%;
  margin: 0;
  margin-bottom: 31px;
  padding: 0;
  padding: 8px 0 8px 0;
  font-family: var(--font-ineter);
  font-size: 16px;
  background: transparent;
  color: #020202;
  border: 0;
  border-bottom: 1px solid #020202;
  border-radius: 0;
}

#user_session_password::placeholder,
#user_session_login::placeholder {
  font-family: var(--font-ineter);
  font-size: 16px;
  color: #b4b4b4;
}

#user_session_login:focus,
#user_session_login:focus-visible,
#user_session_password:focus,
#user_session_password:focus-visible {
  outline: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  font-family: var(--font-ineter);
  font-size: 16px;
  -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
  -webkit-text-fill-color: #1d1d1d !important;
  background-color: #ffffff;
  transition: background-color 5000s ease-in-out 0s;
}

.submit.btn.btn-secondary.btn-login {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 48px;
  margin-top: 21px;
  background-color: #e10c0c;
  color: #ffffff;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.5s ease;
  text-decoration: none;
  border: 0;
}

.submit.btn.btn-secondary.btn-login:hover {
  opacity: 0.8;
}

div.password-field-container div.password-eye {
  color: #020202 !important;
  right: -15px !important;
  bottom: 39px !important;
}

div.password-eye > svg {
  width: 26px !important;
}

.password-eye.show-icon.hidden,
.password-eye.hide-icon.hidden {
  display: none;
}

.forgot-pass {
  display: block;
  font-family: var(--font-ineter);
  font-size: 16px;
  color: #020202;
  text-align: left;
  margin-top: 23px;
  text-decoration: underline;
}

.forgot-pass:hover {
  transform: scale(1.01);
}

#new_user_session > div.alert.alert-danger.errorExplanation > p {
  font-size: 16px;
  padding: 5px;
  font-size: 15px;
  color: #ff4545;
  font-weight: bold;
}

/* Mobile Hero */
@media (max-width: 830px) {
  .hero {
    background-image: unset;
    background-size: unset;
    background-position: unset;
    background-repeat: unset;
    padding: 0;
    flex-direction: column;
  }

  .back_mobile {
    display: block;
    width: 100%;
  }

  .hero_inner {
    padding-top: 40px;
    grid-template-columns: auto;
    gap: unset;
    padding-top: 40px;
    padding-bottom: 90px;
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
    color: var(--sec-text);
  }

  .hero_sub {
    color: var(--sec-text);
    max-width: 100%;
  }

  .log-box {
    border: 1px solid #e3e3e3;
  }
}

/* FOOTER */
.footer {
  display: flex;
  justify-content: space-between;
  padding-top: max(2.5rem, calc(50 / 1920 * 100vw));
  padding-bottom: max(2.5rem, calc(70 / 1920 * 100vw));
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
  gap: 30px;
  background-color: #fce8e8;
}

.footer > div {
  width: 50%;
}

.footer-left > p {
  font-size: 16px;
}

.footer-right > p {
  font-size: 16px;
  text-align: end;
}

.footer-right > p > a {
  font-size: 0.875rem;
  text-decoration: none;
}

.footer-right > p > a:hover {
  text-decoration: underline;
}

/* LEGALS */
.legal-box {
  margin-top: var(--nav-h);
  padding-top: max(100px, calc(130 / 1920 * 100vw));
  padding-bottom: 100px;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

.legal-box h1 {
  font-family: var(--font-headers);
  font-size: var(--fs-h1);
  margin: max(25px, calc(28 / 1920 * 100vw)) 0;
}

.legal-box h2 {
  font-family: var(--font-headers);
  font-size: max(1.53rem, calc(32 / 1920 * 100vw));
  margin: max(30px, calc(37 / 1920 * 100vw)) 0;
}

.legal-box h1,
.legal-box h2 {
  text-transform: lowercase;
}

.legal-box h1::first-letter,
.legal-box h2::first-letter {
  text-transform: uppercase;
  /* Прави само първата буква на целия таг ГЛАВНА */
}

.legal-box p {
  font-family: var(--fs-body);
  font-size: var(--fs-p);
  margin-bottom: max(20px, calc(24 / 1920 * 100vw));
}

.legal-box ul,
.legal-box ol {
  margin-bottom: max(20px, calc(24 / 1920 * 100vw));
}

.table-overflow {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: max(20px, calc(24 / 1920 * 100vw));
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

.table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  color: #333333;
}

.table th {
  background-color: #f1f3f5;
  color: #1a1a1a;
  font-weight: 600;
  padding: 16px;
  border-bottom: 2px solid #ced4da;
  white-space: nowrap;
}

.table td {
  padding: 14px 16px;
  border-bottom: 1px solid #e9ecef;
  vertical-align: top;
}

.table td p {
  margin: 0;
  line-height: 1.5;
}

.table tbody tr:nth-child(even) {
  background-color: #f8f9fa;
}

.table tbody tr:hover {
  background-color: #f1f3f5;
  transition: background-color 0.2s ease;
}

.home-btn-legal {
  color: #e10c0c;
  font: max(20px, calc(25 / 1920 * 100vw));
}

.home-btn-legal:hover {
  font-weight: bold;
}

#user_title {
    cursor: pointer;
}

#user_title, #user_fname, #user_sname, #email, #passwordNew {
    width: 450px;
    max-width: 85%;
    padding: 10px;
    border: 1px solid #000000;
    border-radius: 6px;
    font-size: var(--fs-p);
    height: 50px;
}

#new_user > .form-group {
    margin-bottom: 20px;
}

#new_user > div.col-md-12 > .clear.red.strong {
    width: 800px;
    max-width: 90%;
    margin: auto;
    margin-bottom: 20px;
}

#registration_submit{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 450px;
  max-width: 85%;
  height: 48px;
  margin: auto;
  margin-top: 21px;
  background-color: #e10c0c;
  color: #ffffff;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.5s ease;
  text-decoration: none;
  border: 0;
  border-style: none;
}

#registration_submit:hover {
  opacity: 0.8;
}

.g-recaptcha.required {
    margin: auto;
    width: fit-content;
}

/* REVEAL SCROLL */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.65s ease,
    transform 0.65s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

.reveal-d1 {
  transition-delay: 0.1s;
}

.reveal-d2 {
  transition-delay: 0.2s;
}

.reveal-d3 {
  transition-delay: 0.3s;
}