/* ============================================================
   MAIN STYLES - All 8 Modules (FIXED VERSION)
   ============================================================ */

/* Common */
.ccc-module-intro {
    color: #666;
    font-size: 16px;
    margin-bottom: 25px;
}

.ccc-error {
    margin-top: 20px;
    padding: 15px;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    color: #721c24;
}

.ccc-submit-btn {
    padding: 14px 30px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ccc-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.ccc-form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

.ccc-form-group label {
    font-weight: 600;
    margin-bottom: 5px;
    color: #2c3e50;
    font-size: 14px;
}

.ccc-form-group input,
.ccc-form-group select,
.ccc-form-group textarea {
    padding: 10px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    background: #fafafa;
    transition: all 0.3s ease;
}

.ccc-form-group input:focus,
.ccc-form-group select:focus,
.ccc-form-group textarea:focus {
    outline: none;
    border-color: #667eea;
    background: #ffffff;
}

/* ============================================================
   MODULE 1: COST CALCULATOR (FIXED)
   ============================================================ */

.ccc-calculator-wrapper {
    max-width: 800px;
    margin: 20px auto;
    padding: 30px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

.ccc-calculator-wrapper h2 {
    color: #2c3e50;
    font-size: 28px;
    margin-bottom: 10px;
}

#ccc-calculator-form {
    display: grid;
    gap: 15px;
}

.ccc-results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 15px;
}

.ccc-result-item {
    padding: 12px 16px;
    background: #f8f9fa;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ccc-result-item.total {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
}

.ccc-result-item.grand-total {
    background: #d4edda;
    border-left: 4px solid #28a745;
    font-weight: 700;
    font-size: 18px;
}

.ccc-result-label {
    color: #555;
    font-weight: 500;
}

.ccc-result-value {
    font-weight: 600;
    color: #2c3e50;
}

.ccc-breakdown {
    margin-top: 25px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

#ccc-monthly-breakdown {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

#ccc-monthly-breakdown .monthly-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    background: white;
    border-radius: 6px;
}

.ccc-breed-info {
    margin-top: 25px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.ccc-breed-info h4 {
    margin-top: 0;
    color: #2c3e50;
}

#ccc-breed-info-display {
    margin-top: 10px;
}

/* ============================================================
   MODULE 2: BREED QUIZ
   ============================================================ */

.ccc-quiz-wrapper {
    max-width: 800px;
    margin: 20px auto;
    padding: 30px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

.ccc-quiz-wrapper h2 {
    color: #2c3e50;
    font-size: 28px;
    margin-bottom: 10px;
}

.ccc-quiz-progress {
    margin-bottom: 30px;
    position: relative;
    background: #f0f0f0;
    border-radius: 20px;
    height: 8px;
    overflow: hidden;
}

.ccc-progress-bar {
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    transition: width 0.6s ease;
    border-radius: 20px;
    width: 0%;
}

.ccc-progress-text {
    position: absolute;
    right: 0;
    top: -25px;
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

.ccc-question {
    animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.ccc-question h3 {
    color: #667eea;
    font-size: 18px;
    margin-bottom: 10px;
}

.ccc-question-text {
    font-size: 20px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 25px;
}

.ccc-options {
    display: grid;
    gap: 12px;
    margin-bottom: 30px;
}

.ccc-option {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background: #f8f9fa;
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ccc-option:hover {
    background: #f0f2f5;
    border-color: #d0d5dd;
    transform: translateX(5px);
}

.ccc-option input[type="radio"] {
    margin-right: 15px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #667eea;
    flex-shrink: 0;
}

.ccc-option.selected {
    background: #e8edff;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

.ccc-option-label {
    font-weight: 600;
    color: #2c3e50;
    margin-right: 10px;
}

.ccc-option-desc {
    color: #666;
    font-size: 14px;
}

.ccc-quiz-nav {
    display: flex;
    gap: 15px;
    justify-content: space-between;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid #f0f0f0;
}

.ccc-quiz-prev,
.ccc-quiz-next,
.ccc-quiz-submit,
.ccc-quiz-restart {
    padding: 12px 30px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ccc-quiz-prev {
    background: #e8edff;
    color: #667eea;
}

.ccc-quiz-prev:hover {
    background: #d0d8ff;
    transform: translateX(-2px);
}

.ccc-quiz-next {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    margin-left: auto;
}

.ccc-quiz-next:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.ccc-quiz-submit {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    margin-left: auto;
}

.ccc-quiz-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(245, 87, 108, 0.3);
}

.ccc-quiz-restart {
    background: #f0f0f0;
    color: #2c3e50;
    display: block;
    margin: 20px auto 0;
}

.ccc-breed-result {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    border-left: 4px solid #667eea;
    transition: all 0.3s ease;
}

.ccc-breed-result:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.ccc-breed-name {
    font-size: 22px;
    font-weight: 700;
    color: #2c3e50;
}

.ccc-breed-score {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.ccc-breed-australian {
    margin-top: 10px;
    padding: 10px 15px;
    background: #fff3cd;
    border-radius: 8px;
    font-size: 14px;
    color: #856404;
}

.ccc-breed-australian::before {
    content: "🇦🇺 ";
}

.ccc-breed-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e0e0e0;
}

.ccc-breed-detail {
    font-size: 14px;
    color: #666;
}

.ccc-breed-detail strong {
    color: #2c3e50;
}

/* ============================================================
   MODULE 3: CAT LAWS MAP
   ============================================================ */

.ccc-laws-wrapper {
    max-width: 1200px;
    margin: 20px auto;
    padding: 30px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

.ccc-laws-wrapper h2 {
    color: #2c3e50;
    font-size: 28px;
    margin-bottom: 10px;
}

.ccc-laws-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.ccc-map-container {
    background: #f0f4f8;
    border-radius: 12px;
    padding: 20px;
}

.ccc-australia-map {
    width: 100%;
    height: auto;
    display: block;
}

.ccc-state {
    cursor: pointer;
    transition: all 0.3s ease;
}

.ccc-state:hover {
    filter: brightness(1.1);
    stroke-width: 4px;
}

.ccc-laws-panel {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 25px;
    min-height: 400px;
}

.ccc-laws-placeholder {
    text-align: center;
    padding: 60px 20px;
}

.ccc-placeholder-icon {
    font-size: 64px;
    display: block;
    margin-bottom: 20px;
}

.ccc-laws-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e0e0e0;
}

.ccc-laws-badge {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.ccc-laws-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.ccc-law-card {
    background: white;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border-left: 4px solid #667eea;
}

.ccc-law-card .ccc-law-icon {
    font-size: 28px;
    display: block;
    margin-bottom: 8px;
}

.ccc-law-card h4 {
    margin: 0 0 8px 0;
    color: #2c3e50;
    font-size: 14px;
    font-weight: 600;
}

.ccc-law-card p {
    margin: 0;
    color: #555;
    font-size: 14px;
    line-height: 1.5;
}

.ccc-laws-ai-section {
    margin-top: 20px;
    padding: 20px;
    background: white;
    border-radius: 10px;
    border: 1px solid #e8edff;
}

.ccc-laws-ai-section h4 {
    color: #2c3e50;
    margin: 0 0 10px 0;
}

.ccc-law-summary {
    color: #333;
    font-size: 15px;
    line-height: 1.8;
    padding: 10px 0;
    white-space: pre-line;
}

.ccc-refresh-btn {
    margin-top: 15px;
    padding: 10px 20px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.ccc-refresh-btn:hover {
    background: #5a6fd6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* ============================================================
   MODULE 4: RESOURCE HUB
   ============================================================ */

.ccc-resource-hub {
    max-width: 1200px;
    margin: 20px auto;
    padding: 30px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

.ccc-resource-hub h2 {
    color: #2c3e50;
    font-size: 28px;
    margin-bottom: 10px;
}

.ccc-resource-badges {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.ccc-badge {
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 14px;
}

.ccc-badge.vet-verified { background: #d4edda; color: #155724; }
.ccc-badge.rspca-endorsed { background: #fff3cd; color: #856404; }
.ccc-badge.rescue-approved { background: #d1ecf1; color: #0c5460; }

.ccc-resource-section {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 25px;
    border-left: 5px solid #667eea;
    transition: all 0.3s ease;
}

.ccc-resource-section:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.ccc-resource-section.emergency { border-left-color: #dc3545; background: #fff5f5; }
.ccc-resource-section.collaboration { border-left-color: #28a745; background: #f0fff4; }

.ccc-resource-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.ccc-resource-icon { font-size: 36px; }
.ccc-resource-header h3 { margin: 0; color: #2c3e50; font-size: 20px; }

.ccc-resource-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

.ccc-resource-badge.rspca { background: #fff3cd; color: #856404; }
.ccc-resource-badge.vet { background: #d4edda; color: #155724; }
.ccc-resource-badge.rescue { background: #d1ecf1; color: #0c5460; }
.ccc-resource-badge.local { background: #e8d5b7; color: #6b4c1a; }
.ccc-resource-badge.urgent { background: #f8d7da; color: #721c24; }
.ccc-resource-badge.partner { background: #d4edda; color: #155724; }

.ccc-resource-links {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.ccc-resource-btn {
    padding: 10px 20px;
    background: white;
    border: 2px solid #667eea;
    border-radius: 8px;
    color: #667eea;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.ccc-resource-btn:hover {
    background: #667eea;
    color: white;
    transform: translateY(-2px);
}

.ccc-resource-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin-top: 15px;
}

.ccc-resource-card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
}

.ccc-resource-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.ccc-resource-link {
    color: #667eea;
    text-decoration: none;
    font-weight: 500;
}

.ccc-resource-link:hover {
    color: #5a6fd6;
}

.ccc-resource-select {
    width: 100%;
    max-width: 400px;
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 16px;
    background: white;
    cursor: pointer;
}

.ccc-state-resources-content {
    margin-top: 20px;
    padding: 15px;
    background: white;
    border-radius: 8px;
    min-height: 100px;
}

.ccc-emergency-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.ccc-emergency-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px;
    background: white;
    border-radius: 10px;
}

.ccc-emergency-icon { font-size: 28px; }

.ccc-collab-logos {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    margin: 20px 0;
}

.ccc-collab-item {
    text-align: center;
    padding: 15px 25px;
    background: white;
    border-radius: 10px;
    flex: 1;
    min-width: 120px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.ccc-collab-icon { font-size: 32px; display: block; margin-bottom: 5px; }
.ccc-collab-item span { display: block; font-weight: 600; color: #2c3e50; }
.ccc-collab-item small { color: #666; font-size: 12px; }

.ccc-collab-note {
    padding: 15px;
    background: #e8edff;
    border-radius: 8px;
    margin-top: 10px;
}

.ccc-resource-footer {
    margin-top: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    text-align: center;
}

.ccc-disclaimer {
    font-size: 13px;
    color: #999;
    font-style: italic;
}

/* ============================================================
   MODULE 5: CAT TRENDS
   ============================================================ */

.ccc-trends-wrapper {
    max-width: 1200px;
    margin: 20px auto;
    padding: 30px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

.ccc-trends-wrapper h2 {
    color: #2c3e50;
    font-size: 28px;
    margin-bottom: 10px;
}

.ccc-trends-update-info {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 25px;
}

.ccc-trends-badge {
    padding: 6px 14px;
    background: #f0f4f8;
    border-radius: 20px;
    font-size: 13px;
    color: #2c3e50;
}

.ccc-trends-badge:first-child { background: #d4edda; color: #155724; }
.ccc-trends-badge:nth-child(2) { background: #e8edff; color: #667eea; }
.ccc-trends-badge:last-child { background: #fff3cd; color: #856404; }

.ccc-trends-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.ccc-trend-card {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
    border-left: 5px solid #667eea;
    transition: all 0.3s ease;
}

.ccc-trend-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.ccc-trend-card:nth-child(2) { border-left-color: #dc3545; }
.ccc-trend-card:nth-child(3) { border-left-color: #28a745; }
.ccc-trend-card:nth-child(4) { border-left-color: #f0ad4e; }

.ccc-trend-icon { font-size: 28px; margin-bottom: 10px; }
.ccc-trend-content h3 { color: #2c3e50; font-size: 16px; margin: 0 0 10px 0; }

.ccc-trend-data {
    font-size: 20px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 8px;
}

.ccc-trend-indicator {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 8px;
}

.ccc-trend-indicator.up { background: #d4edda; color: #155724; }
.ccc-trend-indicator.down { background: #f8d7da; color: #721c24; }
.ccc-trend-indicator.safe { background: #d1ecf1; color: #0c5460; }
.ccc-trend-indicator.update { background: #fff3cd; color: #856404; }

.ccc-trend-context {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}

.ccc-trends-summary {
    background: linear-gradient(135deg, #f8f9fa 0%, #e8edff 100%);
    border-radius: 12px;
    padding: 25px;
    margin-top: 30px;
}

.ccc-trends-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

.ccc-trends-summary-header span {
    font-weight: 600;
    font-size: 18px;
    color: #2c3e50;
}

.ccc-trends-refresh {
    padding: 8px 18px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}

.ccc-trends-refresh:hover {
    background: #5a6fd6;
    transform: translateY(-2px);
}

.ccc-trends-summary-content {
    font-size: 15px;
    line-height: 1.8;
    color: #2c3e50;
    white-space: pre-line;
}

.ccc-trends-disclaimer {
    font-size: 13px;
    color: #999;
    margin-top: 15px;
    font-style: italic;
}

.ccc-trends-newsletter {
    margin-top: 30px;
    padding: 25px;
    background: #f8f9fa;
    border-radius: 12px;
    text-align: center;
    border: 2px dashed #d0d5dd;
}

.ccc-newsletter-form {
    display: flex;
    gap: 10px;
    max-width: 400px;
    margin: 0 auto 10px;
}

.ccc-newsletter-input {
    flex: 1;
    padding: 10px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
}

.ccc-newsletter-btn {
    padding: 10px 25px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}

/* ============================================================
   MODULE 6: CAT STORIES
   ============================================================ */

.ccc-stories-wrapper {
    max-width: 1200px;
    margin: 20px auto;
    padding: 30px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

.ccc-stories-wrapper h2 {
    color: #2c3e50;
    font-size: 28px;
    margin-bottom: 10px;
}

.ccc-cat-of-month {
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}

.ccc-cat-of-month-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 4px 15px rgba(245, 87, 108, 0.3);
}

.ccc-cat-of-month-content {
    display: flex;
    gap: 25px;
    align-items: center;
}

.ccc-cat-of-month-image {
    flex-shrink: 0;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.ccc-placeholder-cat { font-size: 80px; }

.ccc-cat-of-month-info { flex: 1; }
.ccc-cat-of-month-info h3 { margin: 0 0 10px 0; font-size: 24px; color: #2c3e50; }
.ccc-cat-of-month-story { font-size: 16px; color: #555; line-height: 1.6; margin: 0 0 15px 0; }
.ccc-cat-of-month-meta { display: flex; gap: 20px; font-size: 14px; color: #666; }

.ccc-stories-toggle-form {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ccc-stories-toggle-form:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.ccc-stories-form {
    margin-top: 20px;
    padding: 25px;
    background: #f8f9fa;
    border-radius: 10px;
    border: 2px solid #e0e0e0;
}

.ccc-stories-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.ccc-story-card {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
    border-top: 4px solid #667eea;
    transition: all 0.3s ease;
}

.ccc-story-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

.ccc-story-type-badge {
    display: inline-block;
    padding: 3px 10px;
    background: #667eea;
    color: white;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.ccc-story-type-badge.adoption { background: #28a745; }
.ccc-story-type-badge.rescue { background: #f0ad4e; }
.ccc-story-type-badge.funny { background: #dc3545; }

.ccc-story-card h4 { margin: 0 0 5px 0; color: #2c3e50; font-size: 18px; }
.ccc-story-cat-name { color: #667eea; font-weight: 600; font-size: 14px; }
.ccc-story-excerpt { color: #555; font-size: 14px; line-height: 1.5; margin: 10px 0; }
.ccc-story-meta { display: flex; justify-content: space-between; font-size: 12px; color: #999; padding-top: 10px; border-top: 1px solid #e0e0e0; }

.ccc-load-more-btn {
    display: block;
    width: 100%;
    padding: 12px;
    margin-top: 20px;
    background: #f8f9fa;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    cursor: pointer;
}

.ccc-stories-share {
    margin-top: 30px;
    padding: 25px;
    background: #f8f9fa;
    border-radius: 12px;
    text-align: center;
}

.ccc-share-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.ccc-share-btn {
    padding: 10px 24px;
    border-radius: 8px;
    color: white;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.ccc-share-btn.facebook { background: #1877f2; }
.ccc-share-btn.twitter { background: #000000; }
.ccc-share-btn.whatsapp { background: #25d366; }

.ccc-share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* ============================================================
   MODULE 7: PRODUCT COMPARISON
   ============================================================ */

.ccc-comparison-wrapper {
    max-width: 1200px;
    margin: 20px auto;
    padding: 30px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

.ccc-comparison-wrapper h2 {
    color: #2c3e50;
    font-size: 28px;
    margin-bottom: 10px;
}

.ccc-comparison-filters {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    margin-bottom: 25px;
    align-items: flex-end;
}

.ccc-filter-group {
    flex: 1;
    min-width: 140px;
}

.ccc-filter-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 5px;
}

.ccc-filter-select {
    width: 100%;
    padding: 8px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    background: white;
}

.ccc-filter-reset {
    padding: 8px 20px;
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    height: 42px;
}

.ccc-filter-reset:hover {
    background: #c82333;
}

.ccc-comparison-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}

.ccc-view-btn {
    padding: 6px 15px;
    background: #f0f0f0;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}

.ccc-view-btn.active {
    background: #667eea;
    color: white;
}

.ccc-comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.ccc-product-card {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.ccc-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    border-color: #667eea;
}

.ccc-product-card.compare-selected {
    border-color: #28a745;
    background: #f0fff4;
}

.ccc-product-icon { font-size: 48px; display: block; margin-bottom: 10px; }
.ccc-product-card h4 { margin: 0 0 5px 0; color: #2c3e50; font-size: 16px; }
.ccc-product-brand { font-size: 13px; color: #999; margin-bottom: 8px; }
.ccc-product-price { font-size: 22px; font-weight: 700; color: #28a745; margin: 8px 0; }

.ccc-product-tags {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin: 10px 0;
}

.ccc-product-tag {
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.ccc-product-tag.eco { background: #d4edda; color: #155724; }
.ccc-product-tag.budget { background: #fff3cd; color: #856404; }
.ccc-product-tag.premium { background: #cce5ff; color: #004085; }

.ccc-product-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.ccc-product-btn {
    padding: 6px 14px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.ccc-product-btn.compare { background: #667eea; color: white; }
.ccc-product-btn.compare:hover { background: #5a6fd6; }
.ccc-product-btn.compare.added { background: #28a745; }
.ccc-product-btn.buy { background: #28a745; color: white; }

.ccc-compare-sidebar {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 320px;
    max-height: 400px;
    background: white;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
    padding: 20px;
    transform: translateY(calc(100% - 60px));
    transition: transform 0.3s ease;
    z-index: 1000;
    overflow-y: auto;
}

.ccc-compare-sidebar:hover {
    transform: translateY(0);
}

.ccc-compare-list {
    margin: 10px 0;
}

.ccc-compare-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 6px;
    margin-bottom: 5px;
}

.ccc-compare-item .remove {
    cursor: pointer;
    color: #dc3545;
    font-weight: 700;
}

.ccc-compare-btn {
    width: 100%;
    padding: 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}

.ccc-compare-clear {
    width: 100%;
    padding: 8px;
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 8px;
}

/* ============================================================
   MODULE 8: PET SERVICES
   ============================================================ */

.ccc-services-wrapper {
    max-width: 1200px;
    margin: 20px auto;
    padding: 30px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

.ccc-services-wrapper h2 {
    color: #2c3e50;
    font-size: 28px;
    margin-bottom: 10px;
}

.ccc-services-categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.ccc-service-category {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 25px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 3px solid transparent;
}

.ccc-service-category:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    border-color: #667eea;
}

.ccc-service-category.active {
    border-color: #667eea;
    background: #e8edff;
}

.ccc-service-icon { font-size: 48px; display: block; margin-bottom: 10px; }
.ccc-service-category h3 { margin: 0 0 5px 0; color: #2c3e50; font-size: 16px; }
.ccc-service-category p { margin: 0; color: #666; font-size: 14px; }

.ccc-services-content {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 30px;
    min-height: 400px;
}

.ccc-services-welcome { text-align: center; }
.ccc-services-welcome h3 { color: #2c3e50; font-size: 24px; margin-bottom: 10px; }

.ccc-services-values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.ccc-value-item {
    background: white;
    padding: 20px;
    border-radius: 10px;
}

.ccc-value-item span { font-size: 36px; display: block; margin-bottom: 5px; }
.ccc-value-item h4 { margin: 0 0 5px 0; color: #2c3e50; }

.ccc-service-detail { animation: fadeIn 0.4s ease; }

.ccc-providers-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
    margin: 15px 0;
}

.ccc-provider-card {
    background: white;
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid #667eea;
}

.ccc-provider-card .provider-name { font-weight: 600; color: #2c3e50; margin: 0 0 3px 0; }
.ccc-provider-card .provider-location { font-size: 13px; color: #666; }
.ccc-provider-card .provider-rating { color: #f0ad4e; }

.ccc-service-cta { text-align: center; margin-top: 20px; }

.ccc-book-btn {
    padding: 14px 40px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ccc-book-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

/* Modals */
.ccc-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 2000;
    overflow-y: auto;
}

.ccc-modal-content {
    background: white;
    max-width: 600px;
    margin: 50px auto;
    padding: 30px;
    border-radius: 12px;
    position: relative;
}

.ccc-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f0f0f0;
}

.ccc-modal-close {
    font-size: 30px;
    cursor: pointer;
    background: none;
    border: none;
    color: #999;
}

.ccc-modal-close:hover { color: #dc3545; }

.ccc-success-modal { text-align: center; }
.ccc-success-icon { font-size: 64px; display: block; margin-bottom: 15px; }

.ccc-success-btn {
    padding: 10px 30px;
    background: #28a745;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}

.ccc-comparison-table {
    width: 100%;
    border-collapse: collapse;
}

.ccc-comparison-table th,
.ccc-comparison-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
}

.ccc-comparison-table th {
    background: #f8f9fa;
    font-weight: 600;
    color: #2c3e50;
}

.ccc-loading-products,
.ccc-loading-stories,
.ccc-service-loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: #999;
}









/* ============================================================
   PRODUCT COMPARISON - WORKING VERSION
   ============================================================ */

.ccc-comparison-wrapper {
    max-width: 1200px;
    margin: 20px auto;
    padding: 30px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.ccc-comparison-wrapper h2 {
    color: #2c3e50;
    font-size: 28px;
    margin-bottom: 10px;
}

.ccc-module-intro {
    color: #666;
    font-size: 16px;
    margin-bottom: 25px;
}

/* Filters */
.ccc-comparison-filters {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    margin-bottom: 25px;
    align-items: flex-end;
}

.ccc-filter-group {
    flex: 1;
    min-width: 140px;
}

.ccc-filter-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 5px;
}

.ccc-filter-select {
    width: 100%;
    padding: 8px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    background: white;
}

.ccc-filter-reset {
    padding: 8px 20px;
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    height: 42px;
}

.ccc-comparison-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}

.ccc-view-btn {
    padding: 6px 15px;
    background: #f0f0f0;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}

.ccc-view-btn.active {
    background: #667eea;
    color: white;
}

/* ========== PRODUCT GRID ========== */
.ccc-comparison-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}

/* ========== PRODUCT CARD ========== */
.ccc-product-card {
    background: #f8f9fa !important;
    border-radius: 12px !important;
    padding: 20px !important;
    border: 2px solid #e0e0e0 !important;
    transition: all 0.3s ease !important;
    min-height: 250px !important;
    display: block !important;
}

.ccc-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    border-color: #667eea;
}

.ccc-product-card.compare-selected {
    border-color: #28a745;
    background: #f0fff4;
}

.ccc-product-icon {
    font-size: 48px !important;
    display: block !important;
    margin-bottom: 10px !important;
}

.ccc-product-card h4 {
    margin: 0 0 5px 0 !important;
    color: #2c3e50 !important;
    font-size: 16px !important;
}

.ccc-product-brand {
    font-size: 13px !important;
    color: #999 !important;
    margin-bottom: 8px !important;
}

.ccc-product-price {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #28a745 !important;
    margin: 8px 0 !important;
}

.ccc-product-tags {
    display: flex !important;
    gap: 5px !important;
    flex-wrap: wrap !important;
    margin: 10px 0 !important;
}

.ccc-product-tag {
    padding: 2px 10px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    display: inline-block !important;
}

.ccc-product-tag.eco { background: #d4edda; color: #155724; }
.ccc-product-tag.budget { background: #fff3cd; color: #856404; }
.ccc-product-tag.premium { background: #cce5ff; color: #004085; }
.ccc-product-tag.kitten { background: #f8d7da; color: #721c24; }
.ccc-product-tag.adult { background: #d1ecf1; color: #0c5460; }
.ccc-product-tag.senior { background: #e2d5f5; color: #4a148c; }

.ccc-product-actions {
    display: flex !important;
    gap: 8px !important;
    margin-top: 12px !important;
    flex-wrap: wrap !important;
}

.ccc-product-btn {
    padding: 6px 14px !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.ccc-product-btn.compare {
    background: #667eea !important;
    color: white !important;
}

.ccc-product-btn.compare:hover {
    background: #5a6fd6 !important;
}

.ccc-product-btn.compare.added {
    background: #28a745 !important;
}

.ccc-product-btn.buy {
    background: #28a745 !important;
    color: white !important;
    text-decoration: none !important;
    display: inline-block !important;
}

.ccc-product-btn.buy:hover {
    background: #218838 !important;
}

/* Compare Sidebar */
.ccc-compare-sidebar {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 320px;
    max-height: 400px;
    background: white;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
    padding: 20px;
    transform: translateY(calc(100% - 60px));
    transition: transform 0.3s ease;
    z-index: 1000;
    overflow-y: auto;
}

.ccc-compare-sidebar:hover {
    transform: translateY(0);
}

.ccc-compare-list {
    margin: 10px 0;
}

.ccc-compare-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 6px;
    margin-bottom: 5px;
}

.ccc-compare-item .remove {
    cursor: pointer;
    color: #dc3545;
    font-weight: 700;
}

.ccc-compare-btn {
    width: 100%;
    padding: 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}

.ccc-compare-clear {
    width: 100%;
    padding: 8px;
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 8px;
}

.ccc-compare-empty {
    color: #999;
    text-align: center;
    padding: 20px;
}

/* Modal */
.ccc-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 2000;
    overflow-y: auto;
}

.ccc-modal-content {
    background: white;
    max-width: 900px;
    margin: 50px auto;
    padding: 30px;
    border-radius: 12px;
}

.ccc-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f0f0f0;
}

.ccc-modal-close {
    font-size: 30px;
    cursor: pointer;
    background: none;
    border: none;
    color: #999;
}

.ccc-modal-close:hover {
    color: #dc3545;
}

.ccc-comparison-table {
    width: 100%;
    border-collapse: collapse;
}

.ccc-comparison-table th,
.ccc-comparison-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
}

.ccc-comparison-table th {
    background: #f8f9fa;
    font-weight: 600;
    color: #2c3e50;
}

/* Responsive */
@media (max-width: 992px) {
    .ccc-comparison-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .ccc-comparison-filters {
        flex-direction: column;
        gap: 10px;
    }
    .ccc-filter-group {
        min-width: 100%;
    }
    .ccc-filter-reset {
        width: 100%;
    }
    .ccc-comparison-grid {
        grid-template-columns: 1fr !important;
    }
    .ccc-compare-sidebar {
        width: 100%;
        max-height: 300px;
        border-radius: 0;
    }
}








/* Responsive */
@media (max-width: 992px) {
    .ccc-laws-container { grid-template-columns: 1fr; }
    .ccc-resource-grid { grid-template-columns: 1fr 1fr; }
    .ccc-trends-grid { grid-template-columns: 1fr; }
    .ccc-stories-container { grid-template-columns: 1fr 1fr; }
    .ccc-comparison-grid { grid-template-columns: 1fr 1fr; }
    .ccc-services-categories { grid-template-columns: repeat(2, 1fr); }
    .ccc-providers-grid { grid-template-columns: 1fr 1fr; }
    .ccc-emergency-grid { grid-template-columns: 1fr 1fr; }
    .ccc-services-values { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .ccc-calculator-wrapper, .ccc-quiz-wrapper, .ccc-laws-wrapper,
    .ccc-resource-hub, .ccc-trends-wrapper, .ccc-stories-wrapper,
    .ccc-comparison-wrapper, .ccc-services-wrapper {
        padding: 20px 15px;
    }
    
    .ccc-results-grid { grid-template-columns: 1fr; }
    #ccc-monthly-breakdown { grid-template-columns: 1fr; }
    
    .ccc-option { flex-wrap: wrap; }
    .ccc-option-desc { width: 100%; margin-left: 35px; font-size: 13px; }
    
    .ccc-laws-grid { grid-template-columns: 1fr; }
    .ccc-resource-grid { grid-template-columns: 1fr; }
    .ccc-stories-container { grid-template-columns: 1fr; }
    .ccc-comparison-grid { grid-template-columns: 1fr; }
    .ccc-services-categories { grid-template-columns: 1fr; }
    .ccc-providers-grid { grid-template-columns: 1fr; }
    .ccc-emergency-grid { grid-template-columns: 1fr; }
    .ccc-services-values { grid-template-columns: 1fr; }
    
    .ccc-cat-of-month-content {
        flex-direction: column;
        text-align: center;
    }
    
    .ccc-cat-of-month-image {
        width: 120px;
        height: 120px;
    }
    
    .ccc-comparison-filters {
        flex-direction: column;
        gap: 10px;
    }
    
    .ccc-filter-group { min-width: 100%; }
    .ccc-filter-reset { width: 100%; }
    
    .ccc-compare-sidebar {
        width: 100%;
        max-height: 300px;
        border-radius: 0;
    }
    
    .ccc-modal-content {
        margin: 20px;
        padding: 20px;
    }
    
    .ccc-newsletter-form {
        flex-direction: column;
    }
    
    .ccc-newsletter-btn { width: 100%; }
    .ccc-share-buttons { flex-direction: column; align-items: center; }
    .ccc-share-btn { width: 100%; max-width: 200px; text-align: center; }
    .ccc-quiz-nav { flex-wrap: wrap; }
}

@media (max-width: 480px) {
    .ccc-calculator-wrapper, .ccc-quiz-wrapper, .ccc-laws-wrapper,
    .ccc-resource-hub, .ccc-trends-wrapper, .ccc-stories-wrapper,
    .ccc-comparison-wrapper, .ccc-services-wrapper {
        padding: 15px 10px;
    }
    
    .ccc-stories-form { padding: 15px; }
    .ccc-breed-details { grid-template-columns: 1fr; }
    .ccc-cat-of-month-badge { position: static; display: inline-block; margin-bottom: 10px; }
}



/* ============================================================
   EMERGENCY PRODUCT VISIBILITY FIX - OVERRIDES EVERYTHING
   ============================================================ */

/* FORCE ALL PRODUCT CARDS TO BE VISIBLE */
.ccc-product-card {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: #f8f9fa !important;
    border: 2px solid #e0e0e0 !important;
    padding: 20px !important;
    margin: 10px 0 !important;
    border-radius: 12px !important;
    min-height: 200px !important;
    width: 100% !important;
    float: none !important;
    position: relative !important;
    z-index: 1 !important;
}

/* FORCE GRID LAYOUT */
.ccc-comparison-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    padding: 10px !important;
}

/* FORCE CONTAINER VISIBILITY */
#ccc-comparison-container {
    display: block !important;
    min-height: 300px !important;
    width: 100% !important;
}

/* HIDE LOADING MESSAGE */
.ccc-loading-products {
    display: none !important;
}

/* PRODUCT ICON */
.ccc-product-icon {
    font-size: 48px !important;
    display: block !important;
    text-align: center !important;
}

/* PRODUCT PRICE */
.ccc-product-price {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #28a745 !important;
}

/* PRODUCT ACTIONS */
.ccc-product-actions {
    display: flex !important;
    gap: 10px !important;
    margin-top: 15px !important;
}

/* COMPARE BUTTON */
.ccc-product-btn.compare {
    background: #667eea !important;
    color: white !important;
    padding: 8px 20px !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
}

/* MOBILE */
@media (max-width: 768px) {
    .ccc-comparison-grid {
        grid-template-columns: 1fr !important;
    }
}