/* Import base styles from index.css */
@import url('index.css');

/* Privacy Policy specific styles */
.privacy-hero-section {
    padding: 100px 0 80px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.05) 100%);
}

.privacy-hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
    text-align: center;
}

.privacy-hero-title {
    font-size: 3rem;
    color: #fff;
    margin-bottom: 25px;
    line-height: 1.2;
}

.privacy-hero-description {
    font-size: 1.2rem;
    color: #ccc;
    margin-bottom: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.privacy-highlights {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.highlight-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.1);
    padding: 15px 25px;
    border-radius: 25px;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.highlight-icon {
    font-size: 1.5rem;
}

.highlight-text {
    color: #3b82f6;
    font-weight: 600;
}

.last-updated {
    color: #ccc;
    font-size: 1rem;
    padding: 15px 25px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    display: inline-block;
}

/* Privacy Navigation */
.privacy-navigation-section {
    padding: 40px 0;
    background: rgba(255, 255, 255, 0.05);
}

.privacy-navigation-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
}

.privacy-navigation-container h2 {
    text-align: center;
    color: #3b82f6;
    font-size: 1.8rem;
    margin-bottom: 30px;
}

.nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    text-decoration: none;
    color: #ccc;
    transition: all 0.3s ease;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.nav-item:hover {
    background: rgba(59, 130, 246, 0.2);
    transform: translateY(-2px);
    color: #3b82f6;
}

.nav-icon {
    font-size: 1.2rem;
}

.nav-text {
    font-weight: 600;
}

/* Privacy Content */
.privacy-content-section {
    padding: 80px 0;
    background: rgba(0, 0, 0, 0.3);
}

.privacy-content-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 10px;
}

.policy-section {
    margin-bottom: 60px;
    background: rgba(255, 255, 255, 0.1);
    padding: 40px;
    border-radius: 15px;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.policy-section h2 {
    color: #3b82f6;
    font-size: 2rem;
    margin-bottom: 25px;
    border-bottom: 2px solid rgba(59, 130, 246, 0.3);
    padding-bottom: 10px;
}

.policy-content p {
    color: #ccc;
    line-height: 1.8;
    margin-bottom: 20px;
    font-size: 1.05rem;
}

.policy-content ul {
    color: #ccc;
    line-height: 1.8;
    margin-bottom: 20px;
    padding-left: 20px;
}

.policy-content li {
    margin-bottom: 8px;
}

/* Information Categories */
.info-category,
.use-category,
.sharing-category {
    background: rgba(255, 255, 255, 0.1);
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 25px;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.info-category h3,
.use-category h3,
.sharing-category h3 {
    color: #3b82f6;
    font-size: 1.4rem;
    margin-bottom: 15px;
}

.info-category:last-child,
.use-category:last-child,
.sharing-category:last-child {
    margin-bottom: 0;
}

/* Important Notice */
.important-notice {
    background: rgba(59, 130, 246, 0.1);
    padding: 20px;
    border-radius: 10px;
    border-left: 4px solid #3b82f6;
    margin: 25px 0;
}

.important-notice h4 {
    color: #3b82f6;
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.important-notice p {
    margin-bottom: 0;
}

/* Security Measures */
.security-measures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

.security-item {
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.security-item h4 {
    color: #3b82f6;
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.security-notice {
    background: rgba(255, 193, 7, 0.1);
    padding: 20px;
    border-radius: 10px;
    border-left: 4px solid #ffc107;
    margin: 25px 0;
}

.security-notice h4 {
    color: #ffc107;
    font-size: 1.2rem;
    margin-bottom: 15px;
}

/* Rights Grid */
.rights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

.right-item {
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.right-item h4 {
    color: #3b82f6;
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.rights-exercise {
    background: rgba(255, 255, 255, 0.1);
    padding: 25px;
    border-radius: 10px;
    margin-top: 30px;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.rights-exercise h3 {
    color: #3b82f6;
    font-size: 1.4rem;
    margin-bottom: 15px;
}

.verification-notice {
    background: rgba(34, 197, 94, 0.1);
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid #22c55e;
    margin-top: 20px;
}

.verification-notice h4 {
    color: #22c55e;
    font-size: 1.1rem;
    margin-bottom: 8px;
}

/* Cookie Types */
.cookie-types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 25px;
}

.cookie-type {
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.cookie-type h4 {
    color: #3b82f6;
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.cookie-management {
    background: rgba(255, 255, 255, 0.1);
    padding: 25px;
    border-radius: 10px;
    margin-top: 30px;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.cookie-management h3 {
    color: #3b82f6;
    font-size: 1.4rem;
    margin-bottom: 15px;
}

.browser-instructions {
    background: rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 8px;
    margin-top: 15px;
}

.browser-instructions h4 {
    color: #3b82f6;
    font-size: 1.1rem;
    margin-bottom: 10px;
}

/* Retention Periods */
.retention-periods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-top: 25px;
}

.retention-item {
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.retention-item h4 {
    color: #3b82f6;
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.retention-notice {
    background: rgba(255, 255, 255, 0.1);
    padding: 25px;
    border-radius: 10px;
    margin-top: 30px;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.retention-notice h4 {
    color: #3b82f6;
    font-size: 1.3rem;
    margin-bottom: 15px;
}

/* Transfer Safeguards */
.transfer-safeguards,
.transfer-locations,
.transfer-rights {
    background: rgba(255, 255, 255, 0.1);
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 25px;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.transfer-safeguards h3,
.transfer-locations h3,
.transfer-rights h3 {
    color: #3b82f6;
    font-size: 1.4rem;
    margin-bottom: 15px;
}

/* Age Restrictions */
.age-restriction,
.protection-measures,
.parent-notice {
    background: rgba(239, 68, 68, 0.1);
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 25px;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.age-restriction h3,
.protection-measures h3,
.parent-notice h3 {
    color: #ef4444;
    font-size: 1.4rem;
    margin-bottom: 15px;
}

/* Policy Updates */
.update-process,
.notification-method {
    background: rgba(255, 255, 255, 0.1);
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 25px;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.update-process h3,
.notification-method h3 {
    color: #3b82f6;
    font-size: 1.4rem;
    margin-bottom: 15px;
}

.version-history {
    background: rgba(255, 255, 255, 0.1);
    padding: 25px;
    border-radius: 10px;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.version-history h3 {
    color: #3b82f6;
    font-size: 1.4rem;
    margin-bottom: 20px;
}

.version-item {
    background: rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    border-left: 4px solid #3b82f6;
}

.version-item:last-child {
    margin-bottom: 0;
}

.version-item strong {
    color: #3b82f6;
    font-size: 1.1rem;
}

/* Contact Methods */
.contact-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.contact-method {
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.contact-method h4 {
    color: #3b82f6;
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.response-time,
.regulatory-contact {
    background: rgba(255, 255, 255, 0.1);
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 25px;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.response-time h3,
.regulatory-contact h3 {
    color: #3b82f6;
    font-size: 1.4rem;
    margin-bottom: 15px;
}

/* CTA Section */
.privacy-cta-section {
    padding: 80px 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0.1) 100%);
}

.privacy-cta-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding: 0 10px;
}

.privacy-cta-title {
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 20px;
}

.privacy-cta-description {
    font-size: 1.2rem;
    color: #ccc;
    margin-bottom: 40px;
}

.cta-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.btn-contact-privacy,
.btn-join-secure {
    display: inline-block;
    padding: 18px 35px;
    text-decoration: none;
    border-radius: 30px;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.btn-contact-privacy {
    background: #3b82f6;
    color: #fff;
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3);
}

.btn-contact-privacy:hover {
    background: #2563eb;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.4);
}

.btn-join-secure {
    background: transparent;
    color: #fff;
    border: 2px solid #3b82f6;
}

.btn-join-secure:hover {
    background: #3b82f6;
    color: #fff;
}

/* Smooth scrolling for navigation links */
html {
    scroll-behavior: smooth;
}

/* Responsive Design */
@media (max-width: 1080px) {
    .privacy-highlights {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    .nav-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
    
    .security-measures {
        grid-template-columns: 1fr;
    }
    
    .rights-grid {
        grid-template-columns: 1fr;
    }
    
    .cookie-types {
        grid-template-columns: 1fr;
    }
    
    .retention-periods {
        grid-template-columns: 1fr;
    }
    
    .contact-methods {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .privacy-hero-title {
        font-size: 2.5rem;
    }
    
    .privacy-hero-description {
        font-size: 1rem;
    }
    
    .policy-section {
        padding: 25px;
    }
    
    .policy-section h2 {
        font-size: 1.8rem;
    }
    
    .nav-grid {
        grid-template-columns: 1fr;
    }
    
    .cta-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .btn-contact-privacy,
    .btn-join-secure {
        width: 100%;
        max-width: 300px;
    }
}

@media (max-width: 480px) {
    .privacy-hero-section {
        padding: 80px 0 60px;
    }
    
    .privacy-hero-title {
        font-size: 2rem;
    }
    
    .privacy-cta-title {
        font-size: 2rem;
    }
    
    .policy-section {
        padding: 20px;
    }
    
    .info-category,
    .use-category,
    .sharing-category {
        padding: 20px;
    }
    
    .important-notice,
    .security-notice,
    .verification-notice {
        padding: 15px;
    }
    
    .highlight-item {
        padding: 12px 20px;
    }
    
    .nav-item {
        padding: 12px 15px;
    }
}

/* Footer active link styling */
.footer-link.active {
    color: #3b82f6;
    font-weight: 600;
}