/* ----------------------------
   GLOBAL STYLES
---------------------------- */

@font-face {
  font-family: 'Bricolage';
  src: url('../../fonts/BricolageGrotesque200.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bricolage';
  src: url('../../fonts/BricolageGrotesque300.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bricolage';
  src: url('../../fonts/BricolageGrotesque400.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bricolage';
  src: url('../../fonts/BricolageGrotesque500.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bricolage';
  src: url('../../fonts/BricolageGrotesque700.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}



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

body {
  background-color: #0b0d17;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  display: flex;
  width: 100%;
  max-width: 950px;
  border-radius: 20px;
  overflow: hidden;
  background-color: #121520;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
  margin: 50px 0px;
}

/* ----------------------------
   LEFT SECTION - FORM
---------------------------- */
.form-section {
  flex: 1;
  padding: 60px 50px;
  background-color: #121520;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.logo {
  width: 150px;
  margin-bottom: 25px;
}

h2 {
  font-size: 1.4em;
  margin-bottom: 10px;
  color: #ffffff;
}

.subtitle {
  color: #a5a8b3;
  font-size: 0.9em;
  margin-bottom: 35px;
}

.input-group {
  margin-bottom: 20px;
}

label {
  display: block;
  font-size: 0.8em;
  margin-bottom: 3px;
  color: #c2c5d3;
}

input[type="text"],
input[type="email"],
input[type="password"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #2a2f3f;
  border-radius: 10px;
  background-color: #1a1d29;
  margin-bottom: -5px;
  color: #fff;
  font-size: 0.8em;
  outline: none;
  transition: border 0.3s ease;
}

input:focus {
  border-color: #5b6fff;
}

button {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(90deg, #5b6fff, #3a4de3);
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 20px;
}

button:hover {
  background: linear-gradient(90deg, #7286ff, #5b6fff);
  transform: translateY(-1px);
}

#errorMsg {
  color: #ff5555;
  text-align: center;
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.footer-text {
  text-align: center;
  font-size: 0.8em;
  color: #a5a8b3;
  margin-top: 25px;
}

.footer-text a {
  color: #5b6fff;
  text-decoration: none;
}

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

/* ----------------------------
   RIGHT SECTION - BRAND
---------------------------- */
.brand-section {
  flex: 1;
  background: 
    radial-gradient(circle at 70% 20%, rgba(10, 37, 64, 0.2), rgba(11, 41, 71, 1)), 
    url('../xtrade.png') no-repeat bottom right;
  background-size: cover;  /* Resize image to 50% width, maintaining aspect ratio */
  background-position: bottom right;
  display: flex;
  gap: 0px;
  flex-direction: column;
  justify-content: center;
  padding: 100px 50px;
}




.brand-section img {
  width: 200px;
  margin-top: 0px;
  margin-bottom: 5px;
  text-align: center;
}
.brand-section h2 {
  line-height: 20px;
  text-align: center;
}
.brand-section p {
  line-height: 20px;
  font-size: 0.9em;
  text-align: center;
}
.footer{
  color: white;
  margin-top: 100px;
}

/* ----------------------------
   RESPONSIVE DESIGN
---------------------------- */

/* Hide brand section on small screens */
@media (max-width: 768px) {

  .logo {
    width: 150px;
    margin-bottom: 15px;
  }

  .brand-section {
    display: none;
  }

  .form-section {
    width: 100%;
    padding: 20px 30px;
  }

  /* Optional: stack layout vertically if using flex container */
  .container {
    flex-direction: column;
    width: 80%;
  }

input[type="text"],
input[type="email"],
input[type="password"] {
  width: 100%;
  padding: 10px 14px;
  font-size: 0.8em;
  outline: none;
  margin-bottom: 0px;
  transition: border 0.3s ease;
}
}