:root {

    --primary-color: #4361ee;

    --primary-dark: #3a56d4;

    --accent-color: #4895ef;

    --dark-color: #16213e;

    --text-color: #e6f1ff;

    --text-secondary: #ccd6f6;

    --card-bg: rgba(16, 42, 87, .7);

    --card-border: rgba(67, 97, 238, .2);

    --footer-bg: #0a192f;

    --footer-text: #e6f1ff;

    --footer-link: #64ffda;

    --success-color: #4bb543;

    --error-color: #ff3333;

}





/* Minimal Reset */



html {

    scroll-behavior: smooth;

    line-height: 1.6;

}



body {

    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    color: var(--text-color);

    background: #0a192f;

    background-image: linear-gradient(135deg, #0a192f 0, #172a45 100%);

    margin: 0;

    min-height: 100vh;

    display: flex;

    flex-direction: column;

}





/* Layout */



.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

    flex: 1;

    display: flex;

    flex-direction: column;

}





/* Typography */



h1,

h2,

h3,

h4 {

    color: var(--text-color);

    line-height: 1.3;

    margin-top: 0;

}



a {

    color: var(--footer-link);

    text-decoration: none;

    transition: color 0.2s ease;

}



a:hover {

    color: var(--primary-color);

}





/* Header */



.header {

    text-align: center;

    padding: rem 0;

    flex-shrink: 0;

}



.header h1 {

    font-size: clamp(1.8rem, 4vw, 2.5rem);

    color: var(--primary-color);

    margin-bottom: 0.5rem;

}



.header .subtitle {

    font-size: clamp(1rem, 2vw, 1.1rem);

    color: var(--text-secondary);

    max-width: 700px;

    margin: 0 auto;

}





/* Content Sections */



.policy-content,

.contact-container {

    background-color: var(--card-bg);

    border-radius: 10px;

    padding: 1.5rem;

    margin-bottom: 2rem;

    border: 1px solid var(--card-border);

    backdrop-filter: blur(5px);

    animation: fadeIn 0.5s ease;

}



.policy-content h2 {

    color: var(--primary-color);

    margin: 1.5rem 0 1rem;

    font-size: 1.3rem;

    position: relative;

    padding-bottom: 0.5rem;

}



.policy-content h2:first-child {

    margin-top: 0;

}



.policy-content h2::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 50px;

    height: 2px;

    background-color: var(--primary-color);

}



.policy-content p,

.policy-content li {

    color: var(--text-secondary);

    margin-bottom: 1rem;

}



.policy-content ul {

    margin-bottom: 1.5rem;

    padding-left: 1.25rem;

}





/* Contact Page */



.contact-container {

    display: grid;

    grid-template-columns: 1fr;

    gap: 1.5rem;

}



.contact-info,

.contact-form {

    padding: 1.5rem;

}



.contact-methods {

    display: grid;

    gap: 1rem;

    margin: 1.5rem 0;

}



.contact-method {

    background-color: rgba(16, 42, 87, 0.5);

    padding: 1.25rem;

    border-radius: 8px;

    transition: transform 0.2s ease;

}



.contact-method:hover {

    transform: translateY(-3px);

}



.contact-method i {

    color: var(--primary-color);

    font-size: 1.5rem;

    margin-bottom: 0.5rem;

}





/* Forms - Updated Dropdown Styles */



.form-group {

    margin-bottom: 1rem;

}



.form-group label {

    display: block;

    margin-bottom: 0.5rem;

    color: var(--text-color);

}



.form-group input,

.form-group select,

.form-group textarea {

    width: 100%;

    padding: 0.75rem;

    border-radius: 6px;

    border: 1px solid rgba(67, 97, 238, 0.3);

    background-color: rgba(255, 255, 255, 0.05);

    color: var(--text-color);

    font-size: 1rem;

    appearance: none;

    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ccd6f6'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");

    background-repeat: no-repeat;

    background-position: right 10px center;

    background-size: 15px;

}



.form-group select option {

    background-color: var(--card-bg);

    color: var(--text-color);

}



.form-group textarea {

    min-height: 150px;

    resize: vertical;

}



.submit-btn {

    width: 100%;

    padding: 0.75rem;

    background-color: var(--primary-color);

    color: white;

    border: none;

    border-radius: 6px;

    font-weight: 500;

    cursor: pointer;

    transition: background-color 0.2s ease;

}



.submit-btn:hover {

    background-color: var(--primary-dark);

}





/* Loading */



.loading-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(10, 25, 47, 0.9);

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 9999;

    display: none;

}



.spinner {

    width: 50px;

    height: 50px;

    border: 5px solid rgba(255, 255, 255, 0.3);

    border-radius: 50%;

    border-top-color: var(--primary-color);

    animation: spin 1s linear infinite;

}





/* Footer */



.footer {

    background-color: var(--footer-bg);

    color: var(--footer-text);

    padding: 2.5rem 0;

    margin-top: auto;

    border-top: 1px solid rgba(67, 97, 238, 0.2);

}



.footer-content {

    max-width: 1200px;

    margin: 0 auto;

    text-align: center;

}



.footer-links {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 1rem;

    margin: 1rem 0;

}





/* Animations */



@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(10px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes spin {

    to {

        transform: rotate(360deg);

    }

}





/* Accessibility */



:focus-visible {

    outline: 2px solid var(--primary-color);

    outline-offset: 2px;

}





/* Responsive */



@media (min-width: 768px) {

    .contact-container {

        grid-template-columns: 1fr 1fr;

        gap: 2rem;

    }

    .policy-content {

        padding: 2rem;

    }

}



@media (max-width: 480px) {

    .header {

        padding: rem 0;

    }

    .policy-content,

    .contact-info,

    .contact-form {

        padding: 1.25rem;

    }

}





/* Base Terms Notice Styles */



.terms-notice {

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    background-color: var(--card-bg);

    color: var(--text-color);

    padding: 15px 0 0 0;

    border-top: 1px solid var(--primary-color);

    box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.3);

    z-index: 9998;

    transform: translateY(100%);

    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);

    backdrop-filter: blur(10px);

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    margin-bottom: 0;

}



.terms-notice.show {

    transform: translateY(0);

}



.terms-notice-container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 15px 20px;

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 15px;

    position: relative;

}



.terms-notice-content {

    flex: 1;

    min-width: 200px;

}



.terms-notice-title {

    margin: 0 0 5px 0;

    font-size: 1rem;

    color: var(--primary-color);

    display: flex;

    align-items: center;

    gap: 8px;

}



.terms-notice-content p {

    margin: 0;

    font-size: 0.9rem;

    line-height: 1.5;

    color: var(--text-secondary);

}



.terms-notice-content a {

    color: var(--footer-link);

    text-decoration: underline;

    font-weight: 500;

}



.terms-notice-content a:hover {

    color: var(--primary-color);

}



.preferences-toggle {

    margin-top: 8px;

    font-size: 0.8rem;

    color: var(--footer-link);

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    gap: 5px;

    transition: all 0.3s ease;

}



.preferences-toggle:hover {

    color: var(--primary-color);

    text-decoration: underline;

}



.terms-notice-buttons {

    display: flex;

    gap: 10px;

}



.terms-notice .btn {

    padding: 8px 20px;

    border-radius: 6px;

    font-weight: 500;

    cursor: pointer;

    transition: all 0.3s ease;

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 0.9rem;

    border: none;

    min-width: 120px;

    justify-content: center;

}



.terms-notice .accept-btn {

    background-color: #2b5797;

    color: white;

}



.terms-notice .accept-btn:hover {

    background-color: #1e3f6f;

    transform: translateY(-2px);

    box-shadow: 0 3px 10px rgba(58, 154, 51, 0.3);

}



.terms-notice .decline-btn {

    background-color: rgba(255, 255, 255, 0.05);

    color: var(--text-color);

    border: 1px solid var(--error-color);

}



.terms-notice .decline-btn:hover {

    background-color: rgba(255, 51, 51, 0.1);

    transform: translateY(-2px);

}





/* Preferences Panel Styles */



.preferences-panel {

    max-height: 0;

    overflow: hidden;

    transition: max-height 0.5s ease-out;

    background: rgba(10, 25, 47, 0.95);

    border-top: 1px solid rgba(67, 97, 238, 0.3);

    margin-top: 15px;

}



.preferences-panel.show {

    max-height: 500px;

    padding: 20px;

    aria-hidden: "false";

}



.preferences-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;

}



.preferences-header h3 {

    margin: 0;

    font-size: 1.1rem;

    color: var(--primary-color);

    display: flex;

    align-items: center;

    gap: 10px;

}



.preferences-close {

    background: none;

    border: none;

    color: var(--text-secondary);

    font-size: 1.2rem;

    cursor: pointer;

    transition: all 0.3s ease;

    padding: 5px;

}



.preferences-close:hover {

    color: var(--text-color);

    transform: rotate(90deg);

}



.preference-category {

    margin-bottom: 15px;

    padding-bottom: 15px;

    border-bottom: 1px solid rgba(67, 97, 238, 0.2);

}



.preference-category:last-child {

    border-bottom: none;

    margin-bottom: 0;

    padding-bottom: 0;

}



.preference-toggle {

    display: flex;

    gap: 15px;

    align-items: center;

}



.preference-toggle label {

    position: relative;

    display: inline-block;

    width: 50px;

    height: 24px;

    cursor: pointer;

}



.preference-toggle input {

    opacity: 0;

    width: 0;

    height: 0;

}



.toggle-slider {

    position: absolute;

    cursor: pointer;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-color: rgba(255, 255, 255, 0.1);

    transition: .4s;

    border-radius: 24px;

}



.toggle-slider:before {

    position: absolute;

    content: "";

    height: 18px;

    width: 18px;

    left: 3px;

    bottom: 3px;

    background-color: white;

    transition: .4s;

    border-radius: 50%;

}



input:checked+.toggle-slider {

    background-color: var(--success-color);

}



input:checked+.toggle-slider:before {

    transform: translateX(26px);

}



input:disabled+.toggle-slider {

    background-color: var(--primary-color);

    cursor: not-allowed;

}



.preference-info h4 {

    margin: 0 0 5px 0;

    font-size: 0.95rem;

    color: var(--text-color);

}



.preference-info p {

    margin: 0;

    font-size: 0.85rem;

    color: var(--text-secondary);

    line-height: 1.5;

}



.preferences-actions {

    margin-top: 20px;

    text-align: right;

}



.save-btn {

    background-color: var(--primary-color);

    color: white;

    padding: 10px 25px;

    border-radius: 6px;

    border: none;

    cursor: pointer;

    transition: all 0.3s ease;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    font-weight: 500;

}



.save-btn:hover {

    background-color: var(--primary-dark);

    transform: translateY(-2px);

    box-shadow: 0 3px 10px rgba(67, 97, 238, 0.3);

}





/* Screen reader only text */



.sr-only {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border-width: 0;

}





/* Responsive Styles */



@media (max-width: 768px) {

    .terms-notice-container {

        flex-direction: column;

        text-align: center;

        padding-bottom: 20px;

    }

    .terms-notice-content {

        margin-bottom: 15px;

    }

    .terms-notice-buttons {

        width: 100%;

        justify-content: center;

    }

    .preferences-panel {

        padding: 15px;

    }

    .preference-toggle {

        gap: 10px;

    }

}