:root {
    --primary: #e28821;
    --primary-dark: #fb9745;
    --secondary: #2f973d;
    --secondary-dark: #58b66c;
    --light: #212121;
    --dark: #121212;
    --text-light: #f2f2f2;
    --text-dark: #d1a34d;
    --border-color: #333;
    --error: #ff4d4d;
    --success: #2ecc71;
    --shadow: 0 8px 20px rgb(0, 0, 0);
  }


    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

body {
    margin: 0;
    padding: 0;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('../img/F1.jpg') center center no-repeat;

    background-size: cover;
    filter: blur(3px) brightness(60%); /* Controls darkness/lightness */
    z-index: -1;
}

.forms-section {
    position: relative;
    z-index: 1;
}




    /* Section layout */
    .forms-section {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 40px 20px;
      min-height: 100vh;
    }

    .section-title {
      font-size: 32px;
      letter-spacing: 1px;
      color: var(--text-light);
      margin-bottom: 20px;
    }

    /* Toggle Buttons */
    .form-toggle-buttons {
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
      gap: 20px;
    }

    .form-toggle {
      padding: 10px 25px;
      font-size: 16px;
      border: none;
      background: var(--primary);
      color: white;
      border-radius: 25px;
      cursor: pointer;
      transition: 0.3s ease;
    }

    .form-toggle.active {
      background: var(--secondary-dark);
    }

    .form-toggle:hover {
      background: var(--primary-dark);
    }

    /* Form container */
    .forms {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
      width: 100%;
      max-width: 900px;
    }

    .form-wrapper {
      flex: 1 1 400px;
      max-width: 420px;
      display: none;
      transition: all 0.3s ease;
    }

    .form-wrapper.active {
      display: block;
    }

    /* Switcher UI (not used in new layout but retained for fallback) */
    .switcher {
      display: block;
      margin: 0 auto 10px;
      font-size: 18px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--text-dark);
      background: none;
      border: none;
      cursor: pointer;
      position: relative;
      transition: all 0.3s ease;
    }

    .switcher:hover {
      color: var(--primary-dark);
    }

    .underline {
      position: absolute;
      bottom: -8px;
      left: 0;
      width: 100%;
      height: 2px;
      overflow: hidden;
    }

    .underline::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: currentColor;
      transform: translateX(-101%);
      transition: transform 0.3s ease;
    }

    .form-wrapper.is-active .underline::before {
      transform: translateX(0);
    }

    /* Form appearance */
    .form {
      background: #454545;
      padding: 30px 25px;
      border-radius: 8px;
      box-shadow: var(--shadow);
      transform-origin: top;
      min-width: 100%;
      animation: fadeOut 0.3s ease;
    }

    .form-wrapper.active .form {
      animation: fadeIn 0.4s ease;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    @keyframes fadeOut {
      from {
        opacity: 1;
        transform: scale(1);
      }
      to {
        opacity: 0;
        transform: scale(0.98);
      }
    }

    /* Input and label styling */
    .input-block {
      margin-bottom: 20px;
    }

    .input-block label {
      display: block;
      margin-bottom: 6px;
      font-size: 14px;
      color: var(--text-dark);
    }

    .input-block input,
    .input-block select {
      width: 100%;
      padding: 10px 14px;
      font-size: 16px;
      color: var(--dark);
      background-color: #f8f8f8;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      outline: none;
      transition: border-color 0.3s;
    }

    .input-block input:focus,
    .input-block select:focus {
      border-color: var(--primary);
    }

    /* Submit buttons */
    .form [type='submit'] {
      display: block;
      width: 100%;
      padding: 12px;
      font-size: 16px;
      font-weight: bold;
      border: none;
      border-radius: 30px;
      cursor: pointer;
      transition: background 0.3s, color 0.3s;
      margin-top: 30px;
    }

    .btn-login {
      background-color: var(--primary);
      color: #170404;
    }

    .btn-login:hover {
      background-color: var(--dark);
      color: var(--primary-dark);
    }

    .btn-signup {
      background-color: var(--dark);
      color: var(--primary);
      border: 2px solid var(--primary);
    }

    .btn-signup:hover {
      background-color: var(--primary);
      color: #121111;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .forms {
        flex-direction: column;
        align-items: center;
      }

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