@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

   body {
     font-family: 'Inter', sans-serif;
     background-color: #F4F5F8;
     color: #1a1a1a;
     margin: 0;
     padding: 0;
   }

   /* YouTube-style Loader Bar */
   #loader-progress-bar {
     position: fixed;
     top: 0;
     left: 0;
     height: 3px;
     width: 0%;
     background: #c4183c;
     z-index: 10000;
     transition: width 0.4s ease;
     display: none;
   }

   #loader-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(255, 255, 255, 0.5);
     backdrop-filter: blur(2px);
     z-index: 9999;
     display: none;
   }

   /* Premium Alert Box (PHP Session Errors) */
   .alert-container {
     position: fixed;
     top: 20px;
     right: 20px;
     z-index: 9999;
     display: flex;
     flex-direction: column;
     gap: 10px;
   }

   .alert-premium {
     background: rgb(225 224 224 / 90%);
     backdrop-filter: blur(15px);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-left: 4px solid #c4183c;
     color: rgb(61 81 112 / var(--tw-text-opacity, 1));
     padding: 16px 25px;
     border-radius: 12px;
     min-width: 300px;
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
     display: flex;
     align-items: center;
     position: relative;
     overflow: hidden;
     animation: slideInRight 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
   }

   .alert-premium.hide {
     animation: slideOutRight 0.5s ease forwards;
   }

   .alert-premium::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     height: 3px;
     width: 100%;
     background: #c4183c;
     animation: progress 4s linear forwards;
   }

   /* Input Styles */
   .input-container {
     border: 1px solid #d1d5db;
     border-radius: 4px;
     padding: 8px 16px;
     border-radius: 12px;
     transition: border-color 0.2s, box-shadow 0.2s;
     background-color: #fff;
     position: relative;
   }

   .input-container:focus-within {
     border-color: #000;
     box-shadow: 0 0 0 1px #000;
   }

   .input-label {
     font-size: 0.75rem;
     font-weight: 600;
     margin-bottom: 2px;
     display: block;
     letter-spacing: .05rem;
     color: #818ea3;
     text-transform: uppercase;
   }

   .input-field {
     width: 100%;
     border: none;
     outline: none;
     font-size: 16px;
     padding: 2px 0;
     color: #000;
     background: transparent;
   }

   .btn-red {
     background-color: #c4183c;
     transition: all 0.2s;
   }

   .btn-red:hover {
     background-color: #a11431;
     transform: translateY(-1px);
   }

   .interactive-shadow {
     box-shadow: 0 2px 0 rgba(90, 97, 105, .11),
       0 4px 8px rgba(90, 97, 105, .12),
       0 10px 10px rgba(90, 97, 105, .06),
       0 7px 70px rgba(90, 97, 105, .1);
   }

   @keyframes slideInRight {
     from {
       transform: translateX(120%);
       opacity: 0;
     }

     to {
       transform: translateX(0);
       opacity: 1;
     }
   }

   @keyframes slideOutRight {
     from {
       transform: translateX(0);
       opacity: 1;
     }

     to {
       transform: translateX(120%);
       opacity: 0;
     }
   }

   @keyframes progress {
     from {
       width: 100%;
     }

     to {
       width: 0%;
     }
   }


   /* 1. Autofill ka blue background hatane ke liye */
   input:-webkit-autofill,
   input:-webkit-autofill:hover,
   input:-webkit-autofill:focus,
   input:-webkit-autofill:active {
     /* Yeh blue color ko white box-shadow se replace kar dega */
     -webkit-box-shadow: 0 0 0 30px white inset !important;
     /* Text ka color wahi rahega jo aapne design mein rakha hai */
     -webkit-text-fill-color: #3d5170 !important;
     transition: background-color 5000s ease-in-out 0s;
   }

   /* Input select hone par glowing red border animation */
   .input-container:focus-within {
     border-color: #c4183c;
     /* Base red color */
     box-shadow: 0 0 0 1px #c4183c;
     animation: borderGlow 1.5s infinite alternate;
     /* Glow animation */
   }

   /* Red Glow Animation Logic */
   @keyframes borderGlow {
     from {
       box-shadow: 0 0 2px rgba(196, 24, 60, 0.2), 0 0 0 1px rgba(196, 24, 60, 0.4);
       border-color: #c4183c;
     }

     to {
       box-shadow: 0 0 12px rgba(196, 24, 60, 0.6), 0 0 0 2px rgba(196, 24, 60, 0.8);
       border-color: #ff1e4d;
       /* Thora light red for pulse effect */
     }
   }


   /* Simple & Premium Button */
   .btn-red {
     background-color: #c4183c;
     position: relative;
     transition: all 0.3s ease;
     overflow: hidden;
   }

   /* Hover par halka sa glow aur bounce */
   .btn-red:hover {
     background-color: #d91b42;
     transform: translateY(-2px);
     box-shadow: 0 5px 15px rgba(196, 24, 60, 0.4);
   }

   /* Click karne par dabe ga */
   .btn-red:active {
     transform: translateY(0) scale(0.95);
   }

   /* Hover par ek baar safed shine guzre gi */
   .btn-red::after {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
     transition: 0.5s;
   }

   .btn-red:hover::after {
     left: 100%;
   }