/* =========================================================
   POLICY PAGES STYLES
   Styles for Privacy Policy, Terms of Service, and Guidelines
   Uses variables from main light mode style.css
   ========================================================= */

/* Container Sizing */
body.policy-page .container-sm{
    max-width: 900px;
}

/* Policy Header */
body.policy-page .policy-header{
    text-align: center;
    padding: 3rem 0;
    border-bottom: 2px solid var(--gray-200);
    margin-bottom: 2rem;
}

body.policy-page .policy-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin-bottom: 1.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, #6366f1 100%);
    color: white;
    font-size: 2.5rem;
}

body.policy-page .policy-title{
    margin-bottom: 1rem;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--gray-900);
}

body.policy-page .policy-subtitle{
    font-size: 1.125rem;
    color: var(--gray-600);
    margin-bottom: 1.5rem;
}

body.policy-page .policy-meta{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    font-size: 0.875rem;
    color: var(--gray-500);
}

body.policy-page .policy-meta span{
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Mission Card */
body.policy-page .mission-card{
    text-align: center;
    padding: 2rem;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.1) 0%, rgba(99, 102, 241, 0.05) 100%);
    border: 2px solid var(--primary);
    border-radius: var(--radius-lg);
}

body.policy-page .mission-card i{
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

body.policy-page .mission-card h3{
    margin-bottom: 1rem;
    color: var(--gray-900);
}

body.policy-page .mission-card p{
    font-size: 1.0625rem;
    color: var(--gray-700);
    line-height: 1.7;
}

/* Table of Contents */
body.policy-page .policy-toc{
    margin-bottom: 2rem;
    padding: 2rem;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
}

body.policy-page .policy-toc h3{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    color: var(--gray-900);
}

body.policy-page .toc-nav{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

body.policy-page .toc-link{
    display: block;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    color: var(--gray-700);
    font-weight: 500;
    transition: all 0.2s ease;
}

body.policy-page .toc-link:hover{
    background: var(--gray-100);
    color: var(--primary);
    padding-left: 1.5rem;
}

/* Policy Content */
body.policy-page .policy-content{
    line-height: 1.7;
}

body.policy-page .policy-section{
    margin-bottom: 3rem;
}

body.policy-page .policy-section h2{
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--gray-200);
    font-size: 1.75rem;
    color: var(--gray-900);
    scroll-margin-top: 100px;
}

body.policy-page .policy-section h2 i{
    color: var(--primary);
}

body.policy-page .policy-section h3{
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    color: var(--gray-900);
}

body.policy-page .policy-section h4{
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-size: 1.0625rem;
    color: var(--gray-900);
}

body.policy-page .policy-section p{
    margin-bottom: 1rem;
    color: var(--gray-700);
}

body.policy-page .policy-section ul,
body.policy-page .policy-section ol{
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

body.policy-page .policy-section li{
    margin-bottom: 0.5rem;
    color: var(--gray-700);
}

body.policy-page .policy-section strong{
    color: var(--gray-900);
    font-weight: 600;
}

body.policy-page .policy-intro{
    margin-bottom: 2rem;
}

body.policy-page .lead{
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--gray-700);
}

/* Alert Boxes */
body.policy-page .alert{
    display: flex;
    gap: 1rem;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    border-radius: var(--radius-md);
}

body.policy-page .alert i{
    flex-shrink: 0;
    font-size: 1.25rem;
}

body.policy-page .alert-info{
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid var(--info);
    color: #1e40af;
}

body.policy-page .alert-info i{
    color: var(--info);
}

body.policy-page .alert-warning{
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid var(--warning);
    color: #92400e;
}

body.policy-page .alert-warning i{
    color: var(--warning);
}

body.policy-page .alert-danger{
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--danger);
    color: #991b1b;
}

body.policy-page .alert-danger i{
    color: var(--danger);
}

body.policy-page .alert strong{
    display: block;
    margin-bottom: 0.25rem;
}

body.policy-page .alert p{
    margin: 0;
}

/* Info Grid */
body.policy-page .info-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

body.policy-page .info-card{
    padding: 1.5rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: all 0.2s ease;
}

body.policy-page .info-card:hover{
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

body.policy-page .info-card i{
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

body.policy-page .info-card h4{
    margin-bottom: 0.5rem;
    color: var(--gray-900);
}

body.policy-page .info-card p{
    margin: 0;
    font-size: 0.9375rem;
    color: var(--gray-600);
}

/* Values Grid */
body.policy-page .values-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

body.policy-page .value-card{
    padding: 2rem;
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: all 0.3s ease;
}

body.policy-page .value-card:hover{
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

body.policy-page .value-card i{
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

body.policy-page .value-card h3{
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: var(--gray-900);
}

body.policy-page .value-card p{
    margin: 0;
    font-size: 0.9375rem;
    color: var(--gray-600);
}

/* Guideline Lists */
body.policy-page .guideline-category{
    margin-bottom: 2rem;
}

body.policy-page .guideline-category h3{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    color: var(--gray-900);
}

body.policy-page .guideline-list{
    list-style: none;
    padding: 0;
}

body.policy-page .guideline-list li{
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    margin-bottom: 1rem;
    background: var(--gray-50);
    border-left: 4px solid var(--success);
    border-radius: var(--radius-md);
}

body.policy-page .guideline-list li i{
    flex-shrink: 0;
    font-size: 1.25rem;
    color: var(--success);
    margin-top: 2px;
}

body.policy-page .guideline-list strong{
    display: block;
    margin-bottom: 0.25rem;
    color: var(--gray-900);
}

body.policy-page .guideline-list p{
    margin: 0;
    font-size: 0.9375rem;
    color: var(--gray-600);
}

/* Violations Grid */
body.policy-page .violations-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

body.policy-page .violation-card{
    padding: 1.5rem;
    background: var(--gray-50);
    border: 2px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--radius-lg);
}

body.policy-page .violation-card i{
    font-size: 2rem;
    color: var(--danger);
    margin-bottom: 1rem;
}

body.policy-page .violation-card h4{
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--danger);
}

body.policy-page .violation-card ul{
    margin: 0;
    padding-left: 1.5rem;
    font-size: 0.9375rem;
}

body.policy-page .violation-card li{
    margin-bottom: 0.5rem;
    color: var(--gray-700);
}

/* Tip Boxes */
body.policy-page .tip-box{
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    margin: 1.5rem 0;
    background: rgba(79, 70, 229, 0.05);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-md);
}

body.policy-page .tip-box i{
    flex-shrink: 0;
    font-size: 1.5rem;
    color: var(--primary);
}

body.policy-page .tip-box strong{
    display: block;
    margin-bottom: 0.5rem;
    color: var(--gray-900);
}

body.policy-page .tip-box ul{
    margin: 0;
    padding-left: 1.5rem;
}

body.policy-page .tip-box li{
    margin-bottom: 0.5rem;
    color: var(--gray-700);
}

/* Info Box */
body.policy-page .info-box{
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    margin: 1.5rem 0;
    background: var(--gray-50);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
}

body.policy-page .info-box i{
    flex-shrink: 0;
    font-size: 1.5rem;
    color: var(--info);
}

body.policy-page .info-box p{
    margin: 0;
    color: var(--gray-700);
}

/* Reporting Steps */
body.policy-page .reporting-steps{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

body.policy-page .step{
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
}

body.policy-page .step-number{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    font-size: 1.25rem;
    font-weight: 700;
}

body.policy-page .step-content h4{
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: var(--gray-900);
}

body.policy-page .step-content p{
    margin: 0;
    font-size: 0.875rem;
    color: var(--gray-600);
}

/* Consequences Timeline */
body.policy-page .consequences-timeline{
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

body.policy-page .consequence-item{
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--gray-300);
}

body.policy-page .consequence-badge{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 1.125rem;
    font-weight: 700;
    color: white;
}

body.policy-page .consequence-badge.warning{
    background: var(--warning);
}

body.policy-page .consequence-badge.alert{
    background: #ff6b35;
}

body.policy-page .consequence-badge.danger{
    background: var(--danger);
}

body.policy-page .consequence-badge.banned{
    background: #1a1a1a;
}

body.policy-page .consequence-content h4{
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: var(--gray-900);
}

body.policy-page .consequence-content p{
    margin-bottom: 0.5rem;
    color: var(--gray-700);
}

body.policy-page .consequence-content .small{
    font-size: 0.875rem;
    color: var(--gray-500);
    margin: 0;
}

/* Security Features */
body.policy-page .security-features{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

body.policy-page .security-item{
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--gray-50);
    border-left: 4px solid var(--success);
    border-radius: var(--radius-md);
}

body.policy-page .security-item i{
    flex-shrink: 0;
    font-size: 1.5rem;
    color: var(--success);
    margin-top: 2px;
}

body.policy-page .security-item h4{
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: var(--gray-900);
}

body.policy-page .security-item p{
    margin: 0;
    font-size: 0.9375rem;
    color: var(--gray-600);
}

/* Rights Grid */
body.policy-page .rights-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

body.policy-page .right-card{
    padding: 1.5rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    text-align: center;
    transition: all 0.2s ease;
}

body.policy-page .right-card:hover{
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

body.policy-page .right-card i{
    font-size: 1.75rem;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

body.policy-page .right-card h4{
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    color: var(--gray-900);
}

body.policy-page .right-card p{
    margin: 0;
    font-size: 0.875rem;
    color: var(--gray-600);
}

/* Policy Table */
body.policy-page .policy-table{
    width: 100%;
    margin: 1.5rem 0;
    border-collapse: collapse;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

body.policy-page .policy-table thead{
    background: var(--gray-100);
}

body.policy-page .policy-table th{
    padding: 1rem 1.5rem;
    text-align: left;
    font-weight: 600;
    color: var(--gray-900);
    border-bottom: 2px solid var(--gray-300);
}

body.policy-page .policy-table td{
    padding: 1rem 1.5rem;
    color: var(--gray-700);
    border-bottom: 1px solid var(--gray-200);
}

body.policy-page .policy-table tbody tr:last-child td{
    border-bottom: none;
}

body.policy-page .policy-table tbody tr:hover{
    background: var(--gray-50);
}

body.policy-page .badge{
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

body.policy-page .badge-required{
    background: var(--danger);
    color: white;
}

body.policy-page .badge-optional{
    background: var(--gray-400);
    color: white;
}

/* Service Features */
body.policy-page .service-features{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

body.policy-page .feature-item{
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
}

body.policy-page .feature-item i{
    flex-shrink: 0;
    font-size: 1.75rem;
    color: var(--primary);
    margin-top: 2px;
}

body.policy-page .feature-item h4{
    margin: 0 0 0.5rem 0;
    color: var(--gray-900);
}

body.policy-page .feature-item p{
    margin: 0;
    font-size: 0.9375rem;
    color: var(--gray-600);
}

/* Prohibited Grid */
body.policy-page .prohibited-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

body.policy-page .prohibited-item{
    padding: 1.5rem;
    background: var(--gray-50);
    border: 2px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--radius-md);
    text-align: center;
}

body.policy-page .prohibited-item i{
    font-size: 2rem;
    color: var(--danger);
    margin-bottom: 0.5rem;
}

body.policy-page .prohibited-item h4{
    margin: 0 0 0.5rem 0;
    color: var(--danger);
    font-size: 1rem;
}

body.policy-page .prohibited-item p{
    margin: 0;
    font-size: 0.875rem;
    color: var(--gray-700);
}

/* Contact Info */
body.policy-page .contact-info{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

body.policy-page .contact-method{
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
}

body.policy-page .contact-method i{
    flex-shrink: 0;
    font-size: 1.5rem;
    color: var(--primary);
    margin-top: 2px;
}

body.policy-page .contact-method strong{
    display: block;
    margin-bottom: 0.5rem;
    color: var(--gray-900);
}

body.policy-page .contact-method a{
    color: var(--primary);
    font-weight: 500;
}

body.policy-page .contact-method p{
    margin: 0;
    font-size: 0.9375rem;
    color: var(--gray-700);
}

/* Related Links */
body.policy-page .related-links{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

body.policy-page .related-link{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    color: var(--gray-900);
    font-weight: 500;
    transition: all 0.2s ease;
}

body.policy-page .related-link:hover{
    border-color: var(--primary);
    background: rgba(79, 70, 229, 0.05);
    color: var(--primary);
    transform: translateX(4px);
}

body.policy-page .related-link i{
    color: var(--primary);
}

/* Responsive */
@media (max-width: 768px) {
    body.policy-page .policy-title{
        font-size: 2rem;
    }

    body.policy-page .policy-meta{
        flex-direction: column;
        gap: 0.5rem;
    }

    body.policy-page .info-grid,
body.policy-page .values-grid,
body.policy-page .violations-grid,
body.policy-page .prohibited-grid{
        grid-template-columns: 1fr;
    }

    body.policy-page .reporting-steps{
        grid-template-columns: 1fr;
    }

    body.policy-page .consequence-item{
        flex-direction: column;
        text-align: center;
    }

    body.policy-page .consequence-badge{
        margin: 0 auto;
    }
}