:root {
     --color-primary: #1ca300;
     --color-accent: #FF9800;
     --color-neutral-darkest: #111827;
     --color-neutral-dark: #374151;
     --color-neutral-light: #F3F4F6;
     --color-white: #ffffff;
     --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
     --container-max-width: 1200px;
 }



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

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: var(--font-family-sans);
     line-height: 1.6;
     color: var(--color-neutral-dark);
     background-color: var(--color-white);
     display: flex;
     flex-direction: column;
     min-height: 100vh;
     font-size: 16px;
 }

 main {
     flex: 1;
     padding-top: 60px;
 }

 a {
     color: var(--color-primary);
     text-decoration: none;
     transition: color 0.3s, opacity 0.3s;
 }

 a:hover {
     color: var(--color-accent);
     opacity: 0.8;
 }

 img {
     max-width: 100%;
     height: auto;
     display: block;
 }

 .container {
     width: 90%;
     max-width: var(--container-max-width);
     margin: 0 auto;
     padding: 40px 0;
 }

 h1,
 h2,
 h3,
 h4 {
     color: var(--color-neutral-darkest);
     line-height: 1.2;
     margin-bottom: 0.75em;
 }

 h1 {
     font-size: 2.5rem;
 }

 h2 {
     font-size: 2rem;
 }

 h3 {
     font-size: 1.5rem;
 }


 .btn {
     display: inline-block;
     padding: 12px 24px;
     font-weight: 600;
     text-align: center;
     border-radius: 6px;
     cursor: pointer;
     transition: background-color 0.3s, transform 0.1s;
     border: 2px solid transparent;
 }

 .btn-primary {
     background-color: var(--color-primary);
     color: var(--color-white);
     border-color: var(--color-primary);
 }

 .btn-primary:hover {
     background-color: #008f87;
     color: var(--color-white);
     opacity: 1;
 }

 .btn-secondary {
     background-color: transparent;
     color: var(--color-primary);
     border-color: var(--color-primary);
 }

 .btn-secondary:hover {
     background-color: var(--color-primary);
     color: var(--color-white);
     opacity: 1;
 }

 .btn:active {
     transform: translateY(1px);
 }


 .header {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     background-color: var(--color-white);
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
     z-index: 100;
 }

 .header-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 10px 5%;
     max-width: var(--container-max-width);
     margin: 0 auto;
 }

 .logo {
     font-size: 1.5rem;
     font-weight: 700;
     color: var(--color-neutral-darkest);
 }

 .logo span {
     color: var(--color-primary);
 }


 .nav-list {
     list-style: none;
     display: none;
     gap: 20px;
 }

 .nav-list a {
     font-weight: 500;
     color: var(--color-neutral-dark);
     padding: 5px 0;
 }

 .nav-list a:hover {
     color: var(--color-primary);
 }

 .nav-auth {
     display: none;
     gap: 10px;
 }

 .nav-toggle {
     display: block;
     font-size: 1.5rem;
     cursor: pointer;
     color: var(--color-neutral-darkest);
     padding: 5px;
     background: none;
     border: none;
 }


 .mobile-menu {
     position: fixed;
     top: 60px;
     left: 0;
     width: 100%;
     height: calc(100% - 60px);
     background-color: var(--color-neutral-darkest);
     color: var(--color-white);
     z-index: 90;
     transform: translateX(100%);
     transition: transform 0.3s ease-in-out;
     padding: 20px;
     display: flex;
     flex-direction: column;
     overflow-y: auto;
 }

 .mobile-menu.active {
     transform: translateX(0);
 }

 .mobile-menu ul {
     list-style: none;
     padding: 0;
     margin-bottom: 20px;
 }

 .mobile-menu a {
     color: var(--color-white);
     display: block;
     padding: 15px 0;
     font-size: 1.2rem;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }

 .mobile-menu a:hover {
     color: var(--color-primary);
 }

 .mobile-auth {
     display: flex;
     flex-direction: column;
     gap: 15px;
     padding-top: 10px;
     border-top: 1px solid rgba(255, 255, 255, 0.2);
 }

 .mobile-auth .btn-secondary {
     color: var(--color-primary);
     border-color: var(--color-primary);
     background-color: var(--color-white);
 }

 .mobile-auth .btn-secondary:hover {
     background-color: var(--color-primary);
     color: var(--color-white);
 }


 .hero {
     background-color: var(--color-neutral-light);
     padding: 80px 5%;
 }

 .hero-content {
     display: flex;
     flex-direction: column;
     gap: 40px;
     align-items: center;
     max-width: var(--container-max-width);
     margin: 0 auto;
     text-align: center;
 }

 .hero-text {
     max-width: 600px;
 }

 .hero-text h1 {
     font-size: 2.8rem;
     margin-bottom: 15px;
 }

 .hero-text p {
     font-size: 1.2rem;
     color: var(--color-neutral-dark);
     margin-bottom: 30px;
 }

 .hero-ctas {
     display: flex;
     gap: 15px;
     justify-content: center;
 }

 .hero-image-placeholder {
     width: 100%;
     max-width: 500px;
     height: 300px;
     border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--color-neutral-dark);
     font-style: italic;

 }


 .featured-draws {
     padding: 60px 5%;
     text-align: center;
 }

 .draw-cards {
     display: grid;
     gap: 30px;
     margin-top: 40px;
 }

 .draw-card {
     background-color: var(--color-white);
     border: 1px solid var(--color-neutral-light);
     border-radius: 8px;
     padding: 30px;
     text-align: left;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
     transition: transform 0.3s, box-shadow 0.3s;
 }

 .draw-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
 }

 .draw-card h3 {
     margin-top: 15px;
     color: var(--color-primary);
 }

 .draw-card p {
     margin-bottom: 20px;
     font-size: 0.95rem;
 }

 .draw-logo-placeholder {
     height: 50px;
     width: 150px;
     background-color: var(--color-accent);
     border-radius: 4px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--color-white);
     font-weight: 700;
 }

 .card-ctas {
     display: flex;
     gap: 10px;
     margin-top: 15px;
 }

 .card-ctas .btn {
     padding: 8px 15px;
     font-size: 0.9rem;
 }


 .how-it-works {
     background-color: var(--color-neutral-light);
     padding: 60px 5%;
     text-align: center;
 }

 .steps-grid {
     display: grid;
     gap: 30px;
     margin-top: 40px;
 }

 .step-item {
     padding: 20px;
     background-color: var(--color-white);
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }

 .step-item i {
     font-size: 2.5rem;
     color: var(--color-primary);
     margin-bottom: 10px;
 }

 .step-item h4 {
     font-size: 1.2rem;
     margin-bottom: 0;
 }


 .highlights {
     padding: 60px 5%;
     text-align: center;
 }

 .highlights-grid {
     display: grid;
     gap: 30px;
     margin-top: 40px;
 }

 .highlight-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 20px;
 }

 .highlight-item i {
     font-size: 2.5rem;
     color: var(--color-accent);
     margin-bottom: 10px;
 }

 .highlight-item p {
     font-weight: 500;
     color: var(--color-neutral-darkest);
 }


 .responsible-play-strip {
     background-color: var(--color-primary);
     color: var(--color-white);
     padding: 15px 5%;
     text-align: center;
     font-size: 0.95rem;
 }

 .responsible-play-strip a {
     color: var(--color-accent);
     font-weight: 600;
     margin-left: 5px;
 }


 .footer {
     background-color: var(--color-neutral-darkest);
     color: var(--color-neutral-light);
     padding: 40px 5% 20px;
     font-size: 0.9rem;
 }

 .footer-grid {
     display: grid;
     gap: 30px;
     margin-bottom: 30px;
 }

 .footer-section h4 {
     color: var(--color-white);
     margin-bottom: 15px;
     font-size: 1.1rem;
 }

 .footer-section p,
 .footer-section a {
     color: var(--color-neutral-light);
     display: block;
     margin-bottom: 5px;
 }

 .footer-section a:hover {
     color: var(--color-primary);
 }

 .social-icons a {
     display: inline-block;
     margin-right: 15px;
     font-size: 1.5rem;
 }

 .legal-links {
     display: flex;
     flex-wrap: wrap;
     gap: 10px 20px;
     margin-bottom: 15px;
 }

 .legal-links a {
     display: inline;
 }

 .small-print {
     text-align: center;
     padding-top: 20px;
     border-top: 1px solid var(--color-neutral-dark);
     opacity: 0.7;
     font-size: 0.85rem;
 }


 .modal-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.7);
     display: none;
     align-items: center;
     justify-content: center;
     z-index: 1000;
     opacity: 0;
     transition: opacity 0.3s;
 }

 .modal-overlay.active {
     display: flex;
     opacity: 1;
 }

 .modal-content {
     background-color: var(--color-white);
     padding: 30px;
     border-radius: 8px;
     max-width: 90%;
     width: 400px;
     text-align: center;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
     transform: scale(0.9);
     transition: transform 0.3s;
 }

 .modal-overlay.active .modal-content {
     transform: scale(1);
 }

 .modal-content h3 {
     margin-bottom: 20px;
     color: var(--color-neutral-darkest);
 }

 .modal-buttons {
     display: flex;
     flex-direction: column;
     gap: 10px;
     margin-top: 20px;
 }

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

 #ageGate .btn-secondary {
     border-color: var(--color-accent);
     color: var(--color-accent);
 }

 #ageGate .btn-secondary:hover {
     background-color: var(--color-accent);
     color: var(--color-white);
 }

 .cookie-banner {
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
     background-color: var(--color-neutral-darkest);
     color: var(--color-white);
     padding: 15px 5%;
     z-index: 999;
     display: none;
     opacity: 0;
     transition: opacity 0.3s;
 }

 .cookie-banner.active {
     display: block;
     opacity: 1;
 }

 .cookie-content {
     display: flex;
     flex-direction: column;
     gap: 15px;
     max-width: var(--container-max-width);
     margin: 0 auto;
     align-items: center;
 }

 .cookie-text {
     flex-grow: 1;
     font-size: 0.9rem;
 }

 .cookie-text a {
     color: var(--color-primary);
     font-weight: 500;
 }

 .cookie-buttons {
     display: flex;
     gap: 10px;
 }

 .cookie-buttons .btn {
     padding: 8px 15px;
     font-size: 0.9rem;
     white-space: nowrap;
 }

 .cookie-buttons .btn-secondary {
     color: var(--color-accent);
     border-color: var(--color-accent);
 }

 .cookie-buttons .btn-secondary:hover {
     background-color: var(--color-accent);
     color: var(--color-white);
 }


 .cookie-settings-list {
     list-style: none;
     text-align: left;
     margin: 20px 0;
 }

 .cookie-settings-list li {
     padding: 10px 0;
     border-bottom: 1px solid var(--color-neutral-light);
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .cookie-settings-list li:last-child {
     border-bottom: none;
 }

 .cookie-settings-list p {
     font-size: 0.95rem;
     color: var(--color-neutral-dark);
 }

 .switch {
     position: relative;
     display: inline-block;
     width: 40px;
     height: 20px;
 }

 .switch input {
     opacity: 0;
     width: 0;
     height: 0;
 }

 .slider {
     position: absolute;
     cursor: pointer;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: #ccc;
     transition: .4s;
     border-radius: 20px;
 }

 .slider:before {
     position: absolute;
     content: "";
     height: 16px;
     width: 16px;
     left: 2px;
     bottom: 2px;
     background-color: white;
     transition: .4s;
     border-radius: 50%;
 }

 input:checked+.slider {
     background-color: var(--color-primary);
 }

 input:checked+.slider:before {
     transform: translateX(20px);
 }

 .required-toggle {
     opacity: 0.6;
     cursor: not-allowed;
 }


 @media (min-width: 768px) {

     .nav-toggle {
         display: none;
     }

     .nav-list,
     .nav-auth {
         display: flex;
     }

     .header-content {
         padding: 15px 5%;
     }


     .hero-content {
         flex-direction: row;
         text-align: left;
         padding: 80px 0;
     }

     .hero-text {
         max-width: 50%;
     }

     .hero-image-placeholder {
         width: 50%;
         height: 400px;
     }

     .hero-text h1 {
         font-size: 3.2rem;
     }

     .hero-ctas {
         justify-content: flex-start;
     }


     .draw-cards {
         grid-template-columns: repeat(3, 1fr);
     }


     .steps-grid {
         grid-template-columns: repeat(4, 1fr);
     }


     .highlights-grid {
         grid-template-columns: repeat(4, 1fr);
     }


     .footer-grid {
         grid-template-columns: 2fr 1fr 1fr;
     }


     .cookie-content {
         flex-direction: row;
         justify-content: space-between;
     }
 }


 .skip-link {
     position: absolute;
     top: -40px;
     left: 0;
     background: var(--color-accent);
     color: var(--color-white);
     padding: 8px;
     z-index: 1000;
     transition: top 0.3s;
 }

 .skip-link:focus {
     top: 0;
 }

 .about-intro {
     background-color: var(--color-neutral-light);
     padding: 60px 5%;
     text-align: center;
 }

 .about-content {
     padding: 40px 5%;
 }

 .principles-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 30px;
     margin: 40px 0;
     text-align: center;
 }

 .principle-card {
     padding: 30px;
     border: 1px solid var(--color-neutral-light);
     border-radius: 8px;
     transition: border-color 0.3s;
 }

 .principle-card:hover {
     border-color: var(--color-primary);
 }

 .principle-card i {
     font-size: 2.5rem;
     color: var(--color-primary);
     margin-bottom: 15px;
 }

 .principle-card h4 {
     font-size: 1.25rem;
     color: var(--color-neutral-darkest);
 }

 .trust-badges {
     text-align: center;
     padding: 40px 5%;
     border-top: 1px solid var(--color-neutral-light);
     margin-top: 40px;
 }

 .trust-icons {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     gap: 40px;
     margin-top: 30px;
 }

 .trust-icon i {
     font-size: 3rem;
     color: var(--color-accent);
     opacity: 0.7;
 }


 body {
     font-family: var(--font-family-sans);
     line-height: 1.6;
     color: var(--color-neutral-dark);
     background-color: var(--color-white);
     display: flex;
     flex-direction: column;
     min-height: 100vh;
     font-size: 16px;
 }

 main {
     flex: 1;
     padding-top: 60px;
 }

 .container {
     width: 90%;
     max-width: var(--container-max-width);
     margin: 0 auto;
     padding: 40px 0;
 }

 @media (max-width: 767px) {
     .trust-icons {
         gap: 20px;
     }
 }

 .contact-layout {
     display: grid;
     gap: 40px;
     padding: 60px 5%;
     max-width: var(--container-max-width);
     margin: 0 auto;
 }

 .contact-details {
     padding: 30px;
     background-color: var(--color-neutral-light);
     border-radius: 8px;
 }

 .contact-details h2 {
     margin-top: 0;
     color: var(--color-primary);
 }

 .contact-item {
     display: flex;
     align-items: flex-start;
     margin-bottom: 20px;
 }

 .contact-item i {
     font-size: 1.5rem;
     color: var(--color-accent);
     margin-right: 15px;
     margin-top: 5px;
 }

 .contact-item p {
     margin: 0;
     line-height: 1.4;
 }

 .contact-item a {
     color: var(--color-neutral-dark);
 }

 .contact-item a:hover {
     color: var(--color-primary);
 }




 .contact-form-card {
     padding: 30px;
     border: 1px solid var(--color-neutral-light);
     border-radius: 8px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
     background-color: var(--color-white);
 }

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

 label {
     display: block;
     font-weight: 600;
     margin-bottom: 8px;
     color: var(--color-neutral-darkest);
 }

 input[type="text"],
 input[type="email"],
 input[type="tel"],
 select,
 textarea {
     width: 100%;
     padding: 12px;
     border: 1px solid #ccc;
     border-radius: 6px;
     font-size: 1rem;
     transition: border-color 0.3s, box-shadow 0.3s;
 }

 input:focus,
 select:focus,
 textarea:focus {
     border-color: var(--color-primary);
     box-shadow: 0 0 0 3px rgba(0, 163, 152, 0.2);
     outline: none;
 }

 textarea {
     resize: vertical;
     min-height: 120px;
 }

 .honeypot {
     display: none;
 }

 .consent-group {
     display: flex;
     align-items: flex-start;
     margin-bottom: 20px;
 }

 .consent-group input[type="checkbox"] {
     margin-right: 10px;
     margin-top: 4px;
 }

 .error-message {
     color: var(--color-accent);
     font-size: 0.85rem;
     margin-top: 5px;
     display: none;
 }

 .alert-message {
     padding: 15px;
     border-radius: 6px;
     margin-bottom: 20px;
     font-weight: 600;
     text-align: center;
     display: none;
 }

 .alert-success {
     background-color: #e6f7f5;
     color: var(--color-primary);
     border: 1px solid var(--color-primary);
 }

 .alert-error {
     background-color: #fff4e5;
     color: var(--color-accent);
     border: 1px solid var(--color-accent);
 }

 .loading-spinner {
     display: none;
     margin-left: 10px;
     border: 4px solid var(--color-neutral-light);
     border-top: 4px solid var(--color-white);
     border-radius: 50%;
     width: 20px;
     height: 20px;
     animation: spin 1s linear infinite;
 }

 .btn-submit {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
 }

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

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

 @media (min-width: 992px) {
     .contact-layout {
         grid-template-columns: 1fr 2fr;
         padding: 80px 5%;
     }
 }

 @media (max-width: 576px) {
     .name-email-group {
         display: block;
     }

     .name-email-group .form-group {
         width: 100%;
         margin-right: 0;
     }
 }

 body {
     font-family: var(--font-family-sans);
     line-height: 1.6;
     color: var(--color-neutral-dark);
     background-color: var(--color-white);
     display: flex;
     flex-direction: column;
     min-height: 100vh;
     font-size: 16px;
 }

 .buy-container {
     display: flex;
     gap: 30px;
     max-width: var(--container-max-width);
     margin: 40px auto;
     padding: 0 5%;
 }

 .builder-section {
     flex: 3;
     background-color: var(--color-white);
     padding: 30px;
     border-radius: 8px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 }

 .summary-panel {
     flex: 1;
     min-width: 250px;
     background-color: var(--color-neutral-light);
     padding: 20px;
     border-radius: 8px;
     height: fit-content;
     position: sticky;
     top: 80px;
 }

 .step-indicator {
     display: flex;
     justify-content: space-between;
     margin-bottom: 40px;
     border-bottom: 1px solid #ddd;
     padding-bottom: 15px;
 }

 .step-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     transition: opacity 0.3s;
 }

 .step-item.active {
     opacity: 1;
 }

 .step-circle {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     background-color: #ccc;
     color: var(--color-white);
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: bold;
     margin-bottom: 5px;
 }

 .step-item.active .step-circle {
     background-color: var(--color-primary);
 }

 .checkout-step {
     display: none;
 }

 .checkout-step.active {
     display: block;
 }

 /* Game Selector Tabs */
 .game-selector {
     display: flex;
     margin-bottom: 25px;
     border-bottom: 1px solid #ddd;
 }

 .game-tab {
     padding: 10px 15px;
     border: none;
     background: none;
     cursor: pointer;
     font-weight: 600;
     color: var(--color-neutral-dark);
     border-bottom: 3px solid transparent;
     margin-bottom: -1px;
     /* Overlap border */
     transition: color 0.3s;
 }

 .game-tab.active {
     color: var(--color-primary);
     border-bottom-color: var(--color-primary);
 }

 .game-content {
     padding: 10px 0;
 }

 /* Number Picker */
 .number-picker-grid {
     border: 1px solid #ddd;
     padding: 20px;
     border-radius: 6px;
     margin-bottom: 20px;
 }

 .ticket-line {
     display: flex;
     align-items: center;
     margin-bottom: 15px;
     padding: 10px;
     background-color: var(--color-neutral-light);
     border-radius: 4px;
 }

 .number-inputs {
     display: flex;
     gap: 10px;
     flex-grow: 1;
     margin-right: 20px;
 }

 .line-number {
     width: 50px;
     height: 50px;
     text-align: center;
     font-size: 1.1rem;
     border: 2px solid #ccc;
     border-radius: 4px;
     transition: border-color 0.3s, background-color 0.3s;
 }

 .line-number:focus {
     outline: none;
     border-color: var(--color-primary);
 }

 .line-number.quick-picked {
     border-color: var(--color-success);
     background-color: #e6ffe6;
 }

 .price-breakdown .price-line,
 .price-total {
     display: flex;
     justify-content: space-between;
     padding: 5px 0;
     font-size: 1.1rem;
 }

 .price-total {
     margin-top: 10px;
     border-top: 2px solid var(--color-neutral-dark);
     font-weight: bold;
     font-size: 1.2rem;
 }

 .payment-placeholder {
     text-align: center;
     padding: 40px;
     border: 2px dashed #ccc;
     border-radius: 8px;
     margin-top: 20px;
 }

 .payment-placeholder i {
     font-size: 3rem;
     color: var(--color-neutral-dark);
     margin-bottom: 10px;
 }

 @media (max-width: 992px) {
     .buy-container {
         flex-direction: column;
     }

     .summary-panel {
         position: static;
     }
 }

 @media (max-width: 600px) {
     .ticket-line {
         flex-direction: column;
         align-items: stretch;
     }

     .number-inputs {
         margin-right: 0;
         margin-bottom: 10px;
         gap: 5px;
     }

     .line-number {
         width: 15%;
         height: 40px;
     }

     .form-row {
         flex-direction: column;
     }
 }


 body {
     font-family: var(--font-family-sans);
     line-height: 1.6;
     color: var(--color-neutral-dark);
     background-color: var(--color-white);
     display: flex;
     flex-direction: column;
     min-height: 100vh;
     font-size: 16px;
 }

 main {
     flex: 1;
     padding-top: 60px;
 }

 .container {
     width: 90%;
     max-width: var(--container-max-width);
     margin: 0 auto;
     padding: 40px 0;
 }

 .auth-page {
     background-color: var(--color-neutral-light);
     min-height: calc(100vh - 100px);
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 120px 5%;
 }

 .auth-card {
     background-color: var(--color-white);
     padding: 40px;
     border-radius: 8px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
     width: 100%;
     max-width: 400px;
     text-align: center;
 }

 .auth-card h1 {
     color: var(--color-primary);
     margin-bottom: 25px;
     font-size: 2rem;
 }

 .form-group {
     margin-bottom: 20px;
     text-align: left;
 }

 label {
     display: block;
     font-weight: 600;
     margin-bottom: 8px;
     color: var(--color-neutral-darkest);
 }

 input[type="email"],
 input[type="password"],
 input[type="text"] {
     width: 100%;
     padding: 12px;
     border: 1px solid #ccc;
     border-radius: 6px;
     font-size: 1rem;
 }

 .password-group {
     position: relative;
 }

 .password-group .toggle-password {
     position: absolute;
     right: 15px;
     top: 50%;
     transform: translateY(-50%);
     cursor: pointer;
     color: var(--color-neutral-dark);
 }

 .error-message {
     color: var(--color-accent);
     font-size: 0.85rem;
     margin-top: 5px;
     display: none;
 }

 .form-footer {
     margin-top: 20px;
     font-size: 0.95rem;
 }

 .form-footer a {
     color: var(--color-neutral-dark);
 }

 .form-footer a:hover {
     color: var(--color-primary);
 }

 .loading-spinner {
     display: none;
     margin-left: 10px;
     border: 4px solid var(--color-neutral-light);
     border-top: 4px solid var(--color-white);
     border-radius: 50%;
     width: 20px;
     height: 20px;
     animation: spin 1s linear infinite;
 }

 .btn-submit {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
 }

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

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

 .footer-imgs {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
 }

 .footer-imgs img {
     height: 60px;
     background: white;
     padding: 10px;
     margin: 10px;
     border-radius: 10px;
 }

 .legal-content {
     padding: 60px 5%;
     max-width: var(--container-max-width);
     margin: 0 auto;
 }

 .legal-content h1 {
     color: var(--color-primary);
     margin-bottom: 20px;
     text-align: center;
 }

 .legal-content h2 {
     color: var(--color-neutral-darkest);
     border-bottom: 1px solid var(--color-neutral-light);
     padding-bottom: 5px;
     margin-top: 30px;
     margin-bottom: 15px;
 }

 .legal-content p,
 .legal-content ul {
     margin-bottom: 20px;
 }

 .legal-content ul {
     padding-left: 20px;
 }

 .legal-content li {
     margin-bottom: 10px;
 }

 .cookie-table {
     width: 100%;
     border-collapse: collapse;
     margin: 20px 0 40px;
     font-size: 0.95rem;
 }

 .cookie-table th,
 .cookie-table td {
     border: 1px solid #ddd;
     padding: 10px;
     text-align: left;
 }

 .cookie-table th {
     background-color: var(--color-neutral-light);
     color: var(--color-neutral-darkest);
     font-weight: 600;
 }

 .cookie-table tr:nth-child(even) {
     background-color: #fafafa;
 }

 .settings-block {
     background-color: var(--color-neutral-light);
     padding: 20px;
     border-radius: 8px;
     text-align: center;
     margin: 40px 0;
 }

 .rg-header {
     background-color: var(--color-danger);
     color: var(--color-white);
     padding: 40px 5%;
     text-align: center;
 }

 .rg-content {
     padding: 60px 5%;
     max-width: var(--container-max-width);
     margin: 0 auto;
 }

 .rg-content h2 {
     color: var(--color-neutral-darkest);
     border-bottom: 2px solid var(--color-primary);
     padding-bottom: 5px;
     margin-top: 40px;
     margin-bottom: 20px;
 }

 .rg-content h3 {
     color: var(--color-primary);
     margin-top: 25px;
     margin-bottom: 10px;
     font-size: 1.25rem;
 }

 .resource-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 30px;
     margin: 30px 0;
 }

 .resource-card {
     padding: 20px;
     border: 1px solid var(--color-neutral-light);
     border-radius: 8px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
     background-color: var(--color-white);
     text-align: center;
 }

 .resource-card i {
     font-size: 2.5rem;
     color: var(--color-accent);
     margin-bottom: 15px;
 }

 .resource-card a {
     display: inline-block;
     margin-top: 15px;
     color: var(--color-primary);
     font-weight: 600;
 }

 .alert-box {
     padding: 20px;
     border-radius: 8px;
     margin: 30px 0;
     display: flex;
     align-items: flex-start;
     border: 1px solid;
 }

 .alert-warning {
     background-color: #fff4e5;
     color: var(--color-accent);
     border-color: var(--color-accent);
 }

 .alert-box i {
     font-size: 1.5rem;
     margin-right: 15px;
 }

 .tool-button {
     display: block;
     width: 100%;
     max-width: 400px;
     margin: 15px auto;
     text-align: center;
 }