/* ==========================================================================
   RAILSAATHI - LOGIN & AUTH SCREEN STYLES
   css/sections/login.css
   ========================================================================== */
    /* ==========================================
   LOGIN SCREEN STYLES
============================================= */
    #login-screen {
      position: fixed;
      inset: 0;
      z-index: 999999;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      padding: 1rem;
      background-color: #000000;
      background-image:
        linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.68)),
        url('../../images/train0.png');
      background-position: center, center;
      background-repeat: no-repeat;
      background-size: cover;
      animation: none;
      overflow: hidden;
    }

    #login-screen .track-container {
      position: absolute;
      bottom: 8%;
      width: 100%;
      height: 8px;
      background: #334155;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    }

    #login-screen .sleepers {
      position: absolute;
      width: 100%;
      height: 100%;
      background-image: linear-gradient(90deg, transparent 50%, #0f172a 50%);
      background-size: 30px 100%;
      animation: moveTracks 0.4s linear infinite;
    }

    #login-screen .login-train {
      position: absolute;
      bottom: calc(8% + 8px);
      left: -500px;
      width: 320px;
      height: 42px;
      background: linear-gradient(to bottom, #cf1d1d 0%, #b91c1c 50%, #7f1d1d 100%);
      border-radius: 4px 30px 2px 5px;
      box-shadow: 0 12px 25px rgba(0, 0, 0, 0.6);
      animation: trainRun 12s linear infinite;
      z-index: 10;
      display: flex;
      align-items: center;
      border-top: 2px solid rgba(255, 255, 255, 0.2);
    }

    #login-screen .login-train::before {
      content: "";
      position: absolute;
      top: 8px;
      left: 50px;
      width: 220px;
      height: 14px;
      background-image: repeating-linear-gradient(90deg, #1e293b 0px, #1e293b 15px, transparent 15px, transparent 25px);
      opacity: 0.8;
    }

    #login-screen .login-train::after {
      content: "INDIAN RAILWAYS";
      position: absolute;
      bottom: 4px;
      left: 60px;
      color: rgba(255, 255, 255, 0.9);
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 1.5px;
      white-space: nowrap;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    }

    #login-particles-container {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
    }

    .login-particle {
      position: absolute;
      background: rgba(255, 255, 255, 0.15);
      border-radius: 50%;
      pointer-events: none;
      animation: floatParticle 8s infinite linear;
    }

    .login-glass-card {
      background: rgba(2, 6, 23, 0.78);
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);
      border: 1px solid rgba(255, 255, 255, 0.15);
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
      animation: cardFadeIn 0.8s ease-out forwards;
      position: relative;
      z-index: 30;
      width: min(100%, 340px);
      max-width: 340px;
      padding: 1.5rem;
      border-radius: 1rem;
    }

    .login-modal-container {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 9999999;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(5px);
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }

    .login-modal-container.active {
      display: flex;
    }

    .login-input-focus:focus {
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
      border-color: #60a5fa;
    }

    .login-input-with-icon {
      position: relative;
    }

    .login-input-icon {
      position: absolute;
      z-index: 1;
      top: 50%;
      left: 12px;
      width: 17px;
      height: 17px;
      color: #93c5fd;
      fill: none;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 1.8;
      pointer-events: none;
      transform: translateY(-50%);
    }

    .login-password-icon {
      left: 12px;
    }

    .password-requirements {
      display: none;
      margin-top: 5px;
    }

    .password-requirement {
      display: block;
      color: #f87171;
      font-size: 9px;
      line-height: 1.5;
    }

    .password-requirement.is-met {
      color: #4ade80;
    }

    .login-btn-primary {
      background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .login-spinner {
      display: none;
      width: 14px;
      height: 14px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      border-top-color: #fff;
      animation: loginSpin 0.8s linear infinite;
    }

    #login-error-msg {
      background: rgba(239, 68, 68, 0.15);
      border: 1px solid rgba(239, 68, 68, 0.4);
      color: #fca5a5;
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 12px;
      text-align: center;
      margin-top: 8px;
      display: none;
    }

    .login-download-status {
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 41;
      width: min(320px, calc(100vw - 36px));
      padding: 12px 14px;
      border-radius: 16px;
      background: rgba(15, 23, 42, 0.88);
      border: 1px solid rgba(255, 255, 255, 0.14);
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
      color: #fff;
      display: none;
      pointer-events: none;
    }

    .login-download-status__title {
      font-size: 12px;
      font-weight: 700;
      margin: 0 0 4px;
    }

    .login-download-status__text {
      font-size: 11px;
      line-height: 1.5;
      color: #cbd5e1;
      margin: 0;
    }

    .login-download-status__bar {
      margin-top: 10px;
      width: 100%;
      height: 4px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.12);
      overflow: hidden;
    }

    .login-download-status__bar span {
      display: block;
      width: 0%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #60a5fa 0%, #22c55e 100%);
      transition: width 0.3s ease;
    }

    .login-download-status.is-success .login-download-status__bar span {
      width: 100% !important;
    }

    @media (max-width: 640px) {
      #login-screen {
        align-items: center;
        justify-content: center;
        overflow-y: auto;
        padding: 1rem 0.75rem;
        gap: 0;
      }

      #login-screen>.login-glass-card {
        margin: 0 auto;
        padding: 2rem 1.1rem 1.1rem;
        transform: translateY(-3vh);
      }

      #login-screen .login-brand-mark {
        width: 84px !important;
        height: 84px !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
      }

      #login-screen .login-brand-mark img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
      }

      .login-download-status {
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: auto;
      }
    }

    @media (max-height: 760px) and (max-width: 700px) {
      #login-screen {
        align-items: center;
        justify-content: center;
        overflow-y: auto;
        padding-top: 1rem;
        padding-bottom: 1rem;
        gap: 0;
      }

      .login-glass-card {
        margin-top: 0;
      }
    }

    @keyframes gradientBG {
      0% {
        background-position: 0% 50%;
      }

      50% {
        background-position: 100% 50%;
      }

      100% {
        background-position: 0% 50%;
      }
    }

    @keyframes moveTracks {
      from {
        background-position: 0 0;
      }

      to {
        background-position: -30px 0;
      }
    }

    @keyframes trainRun {
      0% {
        left: -500px;
      }

      100% {
        left: 120%;
      }
    }

    @keyframes floatParticle {
      0% {
        transform: translateY(110vh) translateX(0);
        opacity: 0;
      }

      50% {
        opacity: 0.4;
      }

      100% {
        transform: translateY(-10vh) translateX(20px);
        opacity: 0;
      }
    }

    @keyframes cardFadeIn {
      from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
      }

      to {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

    @keyframes loginSpin {
      to {
        transform: rotate(360deg);
      }
    }