/* ================================
   Common Page Styles
   ================================ */

/* No Content / Empty States */
.no-content {
    text-align: center;
    grid-column: 1 / -1;
    padding: 3rem 1rem;
}

.no-content p {
    color: #666;
    font-size: 1.1rem;
}

.no-content i {
    opacity: 0.3;
    margin-bottom: 1rem;
}

/* Top Shop Badge */
.shop-card-ranked {
    position: relative;
}

.rank-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.9rem;
    z-index: 1;
}

.rank-badge.gold {
    background: #FFD700;
}

.rank-badge.silver {
    background: #C0C0C0;
}

.rank-badge.bronze {
    background: #CD7F32;
}

/* Blog Categories */
.no-posts-category {
    text-align: center;
    padding: 4rem 2rem;
}

.no-posts-category h3 {
    color: #333;
    margin: 1rem 0;
}

.no-posts-category p {
    color: #666;
}

/* CRM Comparison */
.selector-logo-placeholder,
.table-logo-placeholder {
    display: none;
}

/* Debug Box */
.debug-box {
    background: #f0f0f0;
    padding: 20px;
    margin: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.debug-box h3 {
    margin-top: 0;
    color: #333;
}

.debug-box details {
    margin-top: 1rem;
}

.debug-box pre {
    background: white;
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
}

/* Article Header with Background */
.article-header-bg {
    background-size: cover;
    background-position: center;
    position: relative;
}

.article-header-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(rgba(0,101,129,0.7), rgba(0,38,49,0.8));
}

.article-header-bg .article-header-content {
    position: relative;
    z-index: 1;
}

/* Article Title */
.article-title-large {
    color: var(--primary-color);
    margin-bottom: 2rem;
    font-size: 2.5rem;
    line-height: 1.3;
}

/* Legal Pages Styles */
.legal-content {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    margin: 2rem 0;
}

.legal-content h2 {
    color: #005a73;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 0.5rem;
    margin: 2rem 0 1rem 0;
}

.legal-content h3 {
    color: #333;
    margin: 1.5rem 0 1rem 0;
}

.legal-content ul,
.legal-content ol {
    margin: 1rem 0;
    padding-left: 2rem;
}

.legal-content li {
    margin: 0.5rem 0;
    line-height: 1.6;
}

.legal-content p {
    line-height: 1.6;
    margin: 1rem 0;
}

/* Contact Info Box */
.contact-info-box {
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 8px;
    margin: 2rem 0;
}

.contact-info-box h3 {
    color: #005a73;
    margin-bottom: 1rem;
}

.contact-info-box p {
    margin: 0.5rem 0;
    color: #666;
}

.contact-info-box strong {
    color: #333;
}

/* Responsive */
@media (max-width: 768px) {
    .article-title-large {
        font-size: 2rem;
    }
    
    .legal-content {
        padding: 1rem;
    }
}