@font-face {
     font-family: 'Onest';
     src: url('../fonts/onest/Onest-Regular.woff2') format('woff2');
     font-weight: 400;
     font-style: normal;
     font-display: swap;
 }

 @font-face {
     font-family: 'Onest';
     src: url('../fonts/onest/Onest-Medium.woff2') format('woff2');
     font-weight: 500;
     font-style: normal;
     font-display: swap;
 }

 @font-face {
     font-family: 'Onest';
     src: url('../fonts/onest/Onest-Bold.woff2') format('woff2');
     font-weight: 700;
     font-style: normal;
     font-display: swap;
 }

 :root {
     --primary-color: #0aec33;
     --dark-blue: #012641;
     --light-gray: #f2f2f2;
     --deep-black: #0f0f0f;
     --soft-gray: #eaeaea;
     --text-black: #0f0f0f;
     --font-family: 'Onest', sans-serif;
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: var(--font-family);
     min-height: 100vh;
     overflow-x: hidden;
 }


 /* Language selector */
 .language-selector {
     position: absolute;
     top: 20px;
     right: 20px;
     z-index: 1000;
     margin-bottom: 10px;
 }

 #languageSelect {
     border: 2px solid var(--primary-color);
     transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }

 .language-selector select {
     background: rgba(255, 255, 255, 0.15);
     border: 1px solid rgba(255, 255, 255, 0.2);
     color: #666;
     padding: 8px 15px;
     border-radius: 25px;
     font-size: 14px;
 }

 /* Main container */
 .main-container {
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 20px;
     margin-top: 30px;
 }

 /* Glass card effect */
 .glass-card {
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(20px);
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 24px;
     padding: 40px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
     max-width: 500px;
     width: 100%;
     animation: slideUp 0.8s ease-out;
     position: relative;
     overflow: hidden;
 }

 .glass-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 1px;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
 }

 @keyframes slideUp {
     from {
         opacity: 0;
         transform: translateY(50px);
     }

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

 /* Header section */
 .header-section {
     text-align: center;
     margin-bottom: 30px;
 }

 .main-title {
     font-size: 2.2rem;
     font-weight: 800;
     color: var(--dark-blue);
     margin-bottom: 10px;
     line-height: 1.2;
 }

 .earning-highlight {
     color: var(--primary-color);
     text-shadow: 0 0 20px rgba(10, 236, 51, 0.5);
     animation: glow 2s ease-in-out infinite alternate;
 }

 @keyframes glow {
     from {
         text-shadow: 0 0 20px rgba(10, 236, 51, 0.5);
     }

     to {
         text-shadow: 0 0 30px rgba(10, 236, 51, 0.8);
     }
 }

 .bonus-section {
     background: var(--deep-black);
     color: white;
     padding: 20px;
     border-radius: 16px;
     margin: 20px 0;
     text-align: center;
     position: relative;
     overflow: hidden;
 }

 .bonus-section::before {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
     animation: shine 3s infinite;
 }

 @keyframes shine {
     0% {
         transform: translateX(-100%) translateY(-100%) rotate(45deg);
     }

     100% {
         transform: translateX(100%) translateY(100%) rotate(45deg);
     }
 }

 .bonus-title {
     font-size: 1.3rem;
     font-weight: 700;
     margin-bottom: 5px;
 }

 .bonus-note {
     font-size: 0.85rem;
     opacity: 0.9;
     margin-top: 10px;
 }

 /* Warning section */
 .warning-section {
     background: rgba(255, 255, 255, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 12px;
     padding: 15px;
     margin: 20px 0;
     text-align: center;
     color: var(--deep-black);
 }

 /* Form styles */
 .form-group {
     margin-bottom: 20px;
     position: relative;
 }

 .form-control {
     background: #f2f2f2;
     border: 1px solid #e0e0e0;
     border-radius: 8px;
     padding: 15px 20px;
     color: #666;
     font-size: 16px;
     transition: all 0.3s ease;
     width: 100%;
 }



 .form-control::placeholder {
     color: #999;
     font-weight: 400;
 }

 .form-control:focus {
     background: rgba(255, 255, 255, 0.15);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(10, 236, 51, 0.2);
     color: #666;
 }

 .form-select {
     background: #f2f2f2;
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 12px;
     padding: 15px 20px;
     color: #666;

 }

 .form-select option {
     background: var(--dark-blue);
     color: white;
 }

 /* Radio buttons */
 .radio-group {
     display: flex;
     gap: 15px;
     justify-content: center;
     margin: 20px 0;
 }

 #bikeNumberGroup {
     display: none;
 }

 #bikeNumberGroup.show {
     display: block;
 }

 .input-group-text {
     color: #999;
 }

 .radio-option {
     flex: 1;
     background: #f2f2f2;
     border: 1px solid #e0e0e0;
     border-radius: 12px;
 }

 .radio-option input[type="radio"] {
     display: none;
 }

 .radio-label {
     display: block;
     background: rgba(255, 255, 255, 0.1);
     border: 2px solid rgba(255, 255, 255, 0.2);
     border-radius: 12px;
     padding: 15px;
     text-align: center;
     color: #666;
     cursor: pointer;
     transition: all 0.3s ease;
     font-weight: 500;
 }

 .radio-option input[type="radio"]:checked+.radio-label {
     background: var(--primary-color);
     border-color: var(--primary-color);
     transform: scale(1.05);
     box-shadow: 0 5px 15px rgba(10, 236, 51, 0.3);
 }

 /* Submit button */
 .submit-btn {
     background: linear-gradient(135deg, var(--primary-color), #00d62f);
     border: none;
     border-radius: 12px;
     padding: 18px;
     width: 100%;
     color: white;
     font-size: 18px;
     font-weight: 700;
     cursor: pointer;
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
 }

 .submit-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 25px rgba(10, 236, 51, 0.4);
 }

 .submit-btn::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
     transition: left 0.5s;
 }

 .submit-btn:hover::before {
     left: 100%;
 }

 /* Features section */
 .features {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 15px;
     margin: 25px 0;
 }

 .feature-item {
     background: rgba(255, 255, 255, 0.08);
     padding: 15px;
     border-radius: 12px;
     text-align: center;
     color: var(--text-black);
     transition: transform 0.3s ease;
 }

 .feature-item:hover {
     transform: translateY(-5px);
 }

 .feature-icon {
     font-size: 2rem;
     color: var(--primary-color);
     margin-bottom: 8px;
 }

 .feature-text {
     font-size: 0.9rem;
     font-weight: 500;
 }

 /* Responsive design */
 @media (max-width: 768px) {
     .glass-card {
         padding: 25px;
         margin: 10px;
     }

     .main-title {
         font-size: 1.8rem;
     }

     .features {
         grid-template-columns: 1fr;
     }

     .radio-group {
         flex-direction: column;
     }
 }

 /* Loading animation */
 .loading {
     display: none;
 }

 .loading .spinner {
     width: 20px;
     height: 20px;
     border: 2px solid rgba(255, 255, 255, 0.3);
     border-top: 2px solid white;
     border-radius: 50%;
     animation: spin 1s linear infinite;
     margin-right: 10px;
 }

 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 @media (max-width: 768px) {
     .glass-card {
         padding: 20px;
         margin: 10px;
     }

     .main-title {
         font-size: 1.6rem;
     }

     .bonus-title {
         font-size: 1.1rem;
     }

     .bonus-note {
         font-size: 0.75rem;
     }

     .form-control,
     .form-select {
         font-size: 14px;
         padding: 12px 15px;
     }

     .radio-label {
         padding: 12px;
         font-size: 14px;
     }

     .submit-btn {
         font-size: 16px;
         padding: 14px;
     }

     .feature-item {
         font-size: 0.85rem;
         padding: 12px;
     }

     .feature-icon {
         font-size: 1.6rem;
     }

     .features {
         grid-template-columns: 1fr;
     }

     .radio-group {
         flex-direction: row;
         gap: 10px;
     }

     .language-selector {
         margin-bottom: 10px;
     }

     .language-selector select {
         font-size: 13px;
         padding: 6px 12px;
     }
 }

 @media (max-width: 480px) {
     .main-title {
         font-size: 1.4rem;
     }

     .bonus-title {
         font-size: 1rem;
     }

     .form-control,
     .form-select {
         font-size: 13px;
         padding: 10px 14px;
     }

     .radio-label {
         font-size: 13px;
         padding: 10px;
     }

     .submit-btn {
         font-size: 15px;
         padding: 12px;
     }

     .feature-item {
         font-size: 0.8rem;
         padding: 10px;
     }

     .feature-icon {
         font-size: 1.4rem;
     }
 }