/*!
 * CacciaOfferte.it - Custom Article System v2.0
 * Sistema CSS raffinato per armonia con homepage
 * Colori soft, leggibilità migliorata, box eleganti
 */

/* ========================================
   BRAND VARIABLES SYSTEM v2.0
   ======================================== */
:root {
    /* Palette Colori Brand - Versione Soft */
    --cco-shark: #2c3e50;          /* Blu scuro soft invece di nero duro */
    --cco-shark-light: #34495e;    /* Variante più chiara */
    --cco-swiss-coffee: #f8f9fa;   /* Bianco caldo più soft */
    --cco-swiss-coffee-dark: #e9ecef; /* Grigio chiarissimo per contrasti */
    --cco-buttercup: #f39c12;      /* Arancione più caldo e armonico */
    --cco-buttercup-light: #f5b041; /* Versione chiara */
    --cco-valencia: #e74c3c;       /* Rosso più soft e professionale */
    --cco-valencia-light: #ec7063; /* Versione chiara */
    
    /* Colori di supporto per armonia */
    --cco-blue-soft: #3498db;      /* Blu armonioso con homepage */
    --cco-green-soft: #27ae60;     /* Verde per successo */
    --cco-yellow-soft: #f1c40f;    /* Giallo per attenzione */
    
    /* Typography Variables */
    --cco-font-impact: 'Poppins', 'Montserrat', sans-serif;
    --cco-font-primary: 'Playfair Display', serif;
    --cco-font-secondary: 'Noto Sans', sans-serif;
    --cco-font-body: 'Roboto', Arial, sans-serif;
    
    /* Spacing System */
    --cco-space-xs: 8px;
    --cco-space-sm: 16px;
    --cco-space-md: 24px;
    --cco-space-lg: 32px;
    --cco-space-xl: 48px;
    
    /* Border Radius */
    --cco-radius-sm: 6px;
    --cco-radius-md: 8px;
    --cco-radius-lg: 12px;
    
    /* Shadows */
    --cco-shadow-light: 0 2px 8px rgba(0,0,0,0.08);
    --cco-shadow-medium: 0 4px 16px rgba(0,0,0,0.12);
}

/* ========================================
   TYPOGRAPHY SYSTEM v2.0
   ======================================== */
.cco-title-impact {
    font-family: var(--cco-font-impact);
    font-weight: 700;
    color: var(--cco-shark);
    line-height: 1.2;
}

.cco-heading-primary {
    font-family: var(--cco-font-primary);
    color: var(--cco-shark);
    line-height: 1.3;
    margin-bottom: var(--cco-space-md);
}

.cco-heading-secondary {
    font-family: var(--cco-font-secondary);
    font-weight: 600;
    color: var(--cco-shark);
    line-height: 1.4;
    margin-bottom: var(--cco-space-sm);
}

.cco-body-text {
    font-family: var(--cco-font-body);
    color: var(--cco-shark);
    line-height: 1.6;
    margin-bottom: var(--cco-space-sm);
}

.cco-text-small {
    font-family: var(--cco-font-body);
    font-size: 0.9rem;
    color: #6c757d;
    line-height: 1.5;
}

/* ========================================
   ARTICLE CONTAINER SYSTEM v2.0
   ======================================== */
.cco-article {
    max-width: 100%;
    margin: 0 auto;
    font-family: var(--cco-font-body);
    background: #fff;
    border-radius: var(--cco-radius-lg);
    padding: var(--cco-space-lg);
    box-shadow: var(--cco-shadow-light);
}

.cco-article h1 {
    font-family: var(--cco-font-primary);
    color: var(--cco-shark);
    font-size: 2rem;
    margin-bottom: var(--cco-space-md);
}

.cco-article h2 {
    font-family: var(--cco-font-secondary);
    color: var(--cco-shark);
    font-size: 1.5rem;
    font-weight: 600;
    margin: var(--cco-space-lg) 0 var(--cco-space-sm);
    padding-bottom: 10px;
    border-bottom: 2px solid var(--cco-buttercup);
}

.cco-article h3 {
    font-family: var(--cco-font-secondary);
    color: var(--cco-shark);
    font-size: 1.2rem;
    font-weight: 600;
    margin: var(--cco-space-md) 0 var(--cco-space-sm);
}

.cco-article p {
    font-family: var(--cco-font-body);
    color: var(--cco-shark);
    line-height: 1.6;
    margin-bottom: var(--cco-space-sm);
}

/* ========================================
   INTRO SECTION v2.0
   ======================================== */
.cco-intro {
    margin-bottom: var(--cco-space-xl);
}

.cco-intro-lead {
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.6;
    color: var(--cco-shark);
    margin-bottom: var(--cco-space-md);
}

.cco-intro-highlight {
    background: linear-gradient(120deg, var(--cco-buttercup-light), var(--cco-buttercup));
    color: white;
    padding: 2px 8px;
    border-radius: var(--cco-radius-sm);
    font-weight: 600;
}

.cco-alert-box {
    background: #f8f9fa;
    color: var(--cco-shark);
    padding: 12px 20px;
    border-radius: var(--cco-radius-sm);
    margin: var(--cco-space-md) 0;
    text-align: center;
    border: 1px solid #dee2e6;
    border-left: 3px solid var(--cco-valencia);
}

.cco-alert-box.valencia {
    border-left-color: var(--cco-valencia);
}

.cco-alert-text {
    margin: 0;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--cco-shark);
}

/* ========================================
   CTA SYSTEM v2.0 - SOFT & ELEGANT
   ======================================== */
.cco-cta-container {
    background: linear-gradient(135deg, var(--cco-swiss-coffee), white);
    border: 1px solid var(--cco-swiss-coffee-dark);
    border-radius: var(--cco-radius-lg);
    padding: var(--cco-space-lg);
    margin: var(--cco-space-lg) 0;
    text-align: center;
    box-shadow: var(--cco-shadow-light);
}

.cco-cta-title {
    color: var(--cco-shark);
    margin-top: 0;
    font-size: 1.4rem;
    font-family: var(--cco-font-secondary);
    font-weight: 600;
}

.cco-cta-description {
    margin: 10px 0;
    font-size: 1rem;
    color: #6c757d;
}

.cco-cta-primary {
    display: inline-block;
    background: linear-gradient(135deg, var(--cco-buttercup), var(--cco-buttercup-light));
    color: white;
    padding: 14px 28px;
    border-radius: var(--cco-radius-md);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    margin: 10px;
    border: none;
    transition: all 0.3s ease;
    font-family: var(--cco-font-secondary);
    box-shadow: var(--cco-shadow-light);
}

.cco-cta-primary:hover {
    background: linear-gradient(135deg, #e67e22, var(--cco-buttercup));
    color: white;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--cco-shadow-medium);
}

.cco-cta-secondary {
    display: inline-block;
    background: linear-gradient(135deg, var(--cco-valencia), var(--cco-valencia-light));
    color: white;
    padding: 12px 24px;
    border-radius: var(--cco-radius-md);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    margin: 10px;
    border: none;
    transition: all 0.3s ease;
    font-family: var(--cco-font-secondary);
    box-shadow: var(--cco-shadow-light);
}

.cco-cta-secondary:hover {
    background: linear-gradient(135deg, #c0392b, var(--cco-valencia));
    color: white;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--cco-shadow-medium);
}

/* ========================================
   OFFERS GRID SYSTEM v2.0
   ======================================== */
.cco-offers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--cco-space-md);
    margin: var(--cco-space-lg) 0;
}

.cco-offer-card {
    background: white;
    border: 1px solid var(--cco-swiss-coffee-dark);
    border-radius: var(--cco-radius-lg);
    padding: var(--cco-space-md);
    transition: all 0.3s ease;
    box-shadow: var(--cco-shadow-light);
}

.cco-offer-card:hover {
    border-color: var(--cco-buttercup-light);
    transform: translateY(-4px);
    box-shadow: var(--cco-shadow-medium);
}

.cco-offer-title {
    color: var(--cco-buttercup);
    margin-top: 0;
    font-size: 1.1rem;
    font-family: var(--cco-font-secondary);
    font-weight: 600;
}

.cco-offer-discount {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--cco-valencia);
    margin: 10px 0;
    display: block;
}

.cco-offer-list {
    margin: 15px 0;
    padding-left: 20px;
    color: var(--cco-shark);
}

.cco-offer-list li {
    margin-bottom: 6px;
    line-height: 1.5;
}

/* BUTTON PER OFFER CARDS */
.cco-offer-card .cco-cta-primary,
.cco-offer-card .cco-offer-button {
    display: block;
    background: linear-gradient(135deg, var(--cco-buttercup), var(--cco-buttercup-light));
    color: white;
    padding: 10px 16px;
    border-radius: var(--cco-radius-sm);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: 15px;
    text-align: center;
    transition: all 0.3s ease;
    border: none;
    font-family: var(--cco-font-secondary);
    box-shadow: var(--cco-shadow-light);
}

.cco-offer-card .cco-cta-primary:hover,
.cco-offer-card .cco-offer-button:hover {
    background: linear-gradient(135deg, #e67e22, var(--cco-buttercup));
    color: white;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--cco-shadow-medium);
}

/* ========================================
   CONTENT SECTIONS v2.0
   ======================================== */
.cco-section {
    margin: var(--cco-space-xl) 0;
}

.cco-section-title {
    color: var(--cco-shark);
    border-bottom: 2px solid var(--cco-buttercup);
    padding-bottom: 10px;
    margin-bottom: var(--cco-space-lg);
    font-family: var(--cco-font-secondary);
    font-weight: 600;
}

.cco-info-box {
    background: linear-gradient(135deg, var(--cco-swiss-coffee), white);
    padding: var(--cco-space-md);
    border-radius: var(--cco-radius-md);
    margin: var(--cco-space-md) 0;
    border-left: 4px solid var(--cco-buttercup);
    box-shadow: var(--cco-shadow-light);
}

.cco-info-box p {
    margin: 0;
    color: var(--cco-shark);
    line-height: 1.6;
}

.cco-product-placeholder {
    border: 2px dashed var(--cco-buttercup-light);
    padding: 30px;
    text-align: center;
    margin: var(--cco-space-lg) 0;
    background: linear-gradient(135deg, #fdf8f0, white);
    border-radius: var(--cco-radius-md);
}

.cco-product-placeholder p {
    color: #6c757d;
    font-style: italic;
    margin: 0;
}

/* ========================================
   FEATURES GRID v2.0
   ======================================== */
.cco-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--cco-space-sm);
    margin: var(--cco-space-md) 0;
}

.cco-feature-card {
    background: white;
    padding: 18px;
    border-left: 4px solid var(--cco-buttercup);
    border: 1px solid var(--cco-swiss-coffee-dark);
    border-radius: var(--cco-radius-md);
    box-shadow: var(--cco-shadow-light);
    transition: all 0.3s ease;
}

.cco-feature-card:hover {
    border-left-color: var(--cco-valencia);
    transform: translateY(-2px);
}

.cco-feature-title {
    color: var(--cco-shark);
    font-weight: 600;
    margin-bottom: 8px;
    font-family: var(--cco-font-secondary);
}

.cco-feature-description {
    color: #6c757d;
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.4;
}

/* ========================================
   STRATEGY SECTION v2.0
   ======================================== */
.cco-strategy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--cco-space-md);
    margin: var(--cco-space-lg) 0;
}

.cco-strategy-card {
    background: white;
    border-left: 4px solid var(--cco-blue-soft);
    padding: var(--cco-space-md);
    border: 1px solid var(--cco-swiss-coffee-dark);
    border-radius: var(--cco-radius-md);
    box-shadow: var(--cco-shadow-light);
    transition: all 0.3s ease;
}

.cco-strategy-card:hover {
    border-left-color: var(--cco-buttercup);
    transform: translateY(-2px);
}

.cco-strategy-title {
    color: var(--cco-blue-soft);
    margin-top: 0;
    font-size: 1.1rem;
    font-family: var(--cco-font-secondary);
    font-weight: 600;
}

.cco-strategy-list {
    padding-left: 20px;
    color: var(--cco-shark);
    line-height: 1.6;
}

.cco-strategy-list li {
    margin-bottom: 10px;
}

/* ========================================
   DEADLINE ALERTS v4.0 - DARK ELEGANT + READABLE
   ======================================== */
.cco-deadline-alert {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: #ffffff;
    padding: var(--cco-space-lg);
    border-radius: var(--cco-radius-lg);
    margin: 30px 0;
    text-align: center;
    box-shadow: var(--cco-shadow-medium);
}

.cco-deadline-title {
    margin-top: 0;
    font-size: 1.4rem;
    color: #ffffff !important;
    font-family: var(--cco-font-secondary);
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.cco-deadline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin: var(--cco-space-md) 0;
}

.cco-deadline-item {
    background: rgba(255, 255, 255, 0.15);
    padding: 18px;
    border-radius: var(--cco-radius-md);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.cco-deadline-item:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    border-color: var(--cco-buttercup-light);
}

.cco-deadline-date {
    font-weight: 700;
    display: block;
    margin-bottom: 8px;
    color: var(--cco-buttercup-light);
    font-size: 1.1rem;
}

.cco-deadline-item small {
    color: #ffffff;
    line-height: 1.4;
    font-weight: 400;
}

/* ========================================
   FINAL CTA SECTION v4.0 - DARK ELEGANT + READABLE
   ======================================== */
.cco-final-cta {
    background: linear-gradient(135deg, #34495e, #2c3e50);
    color: #ffffff;
    padding: var(--cco-space-xl);
    border-radius: var(--cco-radius-lg);
    text-align: center;
    margin: var(--cco-space-xl) 0;
    box-shadow: var(--cco-shadow-medium);
}

/* REGOLA GLOBALE: Tutto il testo nei box scuri deve essere bianco */
.cco-final-cta * {
    color: #ffffff !important;
}

/* Eccezioni per elementi specifici */
.cco-final-cta-button {
    color: #2c3e50 !important; /* Button text resta scuro */
}

.cco-final-cta-title {
    margin-top: 0;
    font-size: 1.8rem;
    color: #ffffff !important;
    font-family: var(--cco-font-secondary);
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.cco-final-cta-text {
    font-size: 1.1rem;
    margin: var(--cco-space-md) 0;
    line-height: 1.6;
    color: #ffffff !important;
    opacity: 1;
    font-weight: 400;
}

.cco-final-cta-features {
    text-align: left;
    max-width: 600px;
    margin: var(--cco-space-lg) auto;
    color: #ffffff;
}

.cco-final-cta-features p {
    margin: 12px 0;
    color: #ffffff !important;
    line-height: 1.6;
    font-weight: 500;
}

.cco-final-cta-button {
    display: inline-block;
    background: linear-gradient(135deg, var(--cco-buttercup), var(--cco-buttercup-light));
    color: #2c3e50;
    padding: 18px 36px;
    border-radius: var(--cco-radius-md);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.2rem;
    margin: 30px 10px;
    border: none;
    transition: all 0.3s ease;
    font-family: var(--cco-font-secondary);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cco-final-cta-button:hover {
    background: linear-gradient(135deg, #e67e22, var(--cco-buttercup));
    color: #2c3e50;
    text-decoration: none;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.cco-final-disclaimer {
    font-size: 0.9rem;
    margin-top: var(--cco-space-md);
    opacity: 0.9;
    font-style: italic;
    color: #ffffff;
}

/* ========================================
   FOOTER SECTION v2.0
   ======================================== */
.cco-footer {
    margin-top: var(--cco-space-xl);
    padding: var(--cco-space-md);
    background: linear-gradient(135deg, var(--cco-swiss-coffee), white);
    border-radius: var(--cco-radius-md);
    font-size: 0.9rem;
    color: var(--cco-shark);
    border: 1px solid var(--cco-swiss-coffee-dark);
}

.cco-footer p {
    margin: 0;
    line-height: 1.5;
}

.cco-footer p + p {
    margin-top: 12px;
}

/* ========================================
   SPECIAL OFFER VARIANTS v2.0
   ======================================== */
.cco-offer-special {
    background: linear-gradient(135deg, var(--cco-buttercup-light), #f8c471) !important;
    color: var(--cco-shark) !important;
    border: none !important;
}

.cco-offer-special-alt {
    background: linear-gradient(135deg, var(--cco-valencia-light), #f1948a) !important;
    color: white !important;
    border: none !important;
}

.cco-strategy-box {
    background: linear-gradient(135deg, var(--cco-yellow-soft), #f4d03f) !important;
    color: var(--cco-shark) !important;
    border-left-color: var(--cco-valencia) !important;
}

.cco-savings-calc {
    background: rgba(255, 255, 255, 0.2);
    padding: 15px;
    border-radius: var(--cco-radius-sm);
    margin: 15px 0;
}

.cco-savings-highlight {
    font-size: 1.1rem;
    font-weight: 700;
}

.cco-strikethrough {
    text-decoration: line-through;
    opacity: 0.7;
}

/* ========================================
   RESPONSIVE SYSTEM v2.0
   ======================================== */
@media (max-width: 768px) {
    .cco-article {
        padding: var(--cco-space-md);
        border-radius: var(--cco-radius-md);
    }
    
    .cco-offers-grid,
    .cco-features-grid,
    .cco-strategy-grid,
    .cco-deadline-grid {
        grid-template-columns: 1fr;
        gap: var(--cco-space-sm);
    }
    
    .cco-article h1 {
        font-size: 1.6rem;
    }
    
    .cco-article h2 {
        font-size: 1.3rem;
    }
    
    .cco-cta-primary,
    .cco-final-cta-button {
        display: block;
        width: 100%;
        max-width: 300px;
        margin: 10px auto;
    }
    
    .cco-final-cta-features {
        text-align: center;
    }
    
    .cco-final-cta,
    .cco-deadline-alert {
        padding: var(--cco-space-md);
    }
}

@media (max-width: 480px) {
    .cco-offer-discount {
        font-size: 1.4rem;
    }
    
    .cco-cta-container {
        padding: var(--cco-space-sm);
    }
}

/* ========================================
   UTILITY CLASSES v2.0
   ======================================== */
.cco-text-center { text-align: center; }
.cco-text-left { text-align: left; }
.cco-text-right { text-align: right; }

.cco-mb-sm { margin-bottom: var(--cco-space-sm); }
.cco-mb-md { margin-bottom: var(--cco-space-md); }
.cco-mb-lg { margin-bottom: var(--cco-space-lg); }

.cco-mt-sm { margin-top: var(--cco-space-sm); }
.cco-mt-md { margin-top: var(--cco-space-md); }
.cco-mt-lg { margin-top: var(--cco-space-lg); }

.cco-font-bold { font-weight: 600; }
.cco-font-normal { font-weight: 400; }

.cco-color-shark { color: var(--cco-shark); }
.cco-color-buttercup { color: var(--cco-buttercup); }
.cco-color-valencia { color: var(--cco-valencia); }

/* ========================================
   PRINT STYLES v2.0
   ======================================== */
@media print {
    .cco-cta-primary,
    .cco-cta-secondary,
    .cco-final-cta-button {
        background: white !important;
        color: black !important;
        border: 1px solid black !important;
    }
    
    .cco-final-cta,
    .cco-deadline-alert {
        background: white !important;
        color: black !important;
        border: 1px solid black !important;
    }
    
    .cco-article {
        box-shadow: none !important;
    }
}

/* ========================================
   TYPOGRAPHY SYSTEM
   ======================================== */
.cco-title-impact {
    font-family: var(--cco-font-impact);
    font-weight: 700;
    color: var(--cco-shark);
    line-height: 1.2;
}

.cco-heading-primary {
    font-family: var(--cco-font-primary);
    color: var(--cco-shark);
    line-height: 1.3;
    margin-bottom: var(--cco-space-md);
}

.cco-heading-secondary {
    font-family: var(--cco-font-secondary);
    font-weight: 600;
    color: var(--cco-shark);
    line-height: 1.4;
    margin-bottom: var(--cco-space-sm);
}

.cco-body-text {
    font-family: var(--cco-font-body);
    color: var(--cco-shark);
    line-height: 1.6;
    margin-bottom: var(--cco-space-sm);
}

.cco-text-small {
    font-family: var(--cco-font-body);
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
}

/* ========================================
   ARTICLE CONTAINER SYSTEM
   ======================================== */
.cco-article {
    max-width: 100%;
    margin: 0 auto;
    font-family: var(--cco-font-body);
}

.cco-article h1 {
    font-family: var(--cco-font-primary);
    color: var(--cco-shark);
    font-size: 2rem;
    margin-bottom: var(--cco-space-md);
}

.cco-article h2 {
    font-family: var(--cco-font-secondary);
    color: var(--cco-shark);
    font-size: 1.5rem;
    font-weight: 600;
    margin: var(--cco-space-lg) 0 var(--cco-space-sm);
    padding-bottom: 10px;
    border-bottom: 2px solid var(--cco-buttercup);
}

.cco-article h3 {
    font-family: var(--cco-font-secondary);
    color: var(--cco-shark);
    font-size: 1.2rem;
    font-weight: 600;
    margin: var(--cco-space-md) 0 var(--cco-space-sm);
}

.cco-article p {
    font-family: var(--cco-font-body);
    color: var(--cco-shark);
    line-height: 1.6;
    margin-bottom: var(--cco-space-sm);
}

/* ========================================
   INTRO SECTION
   ======================================== */
.cco-intro {
    margin-bottom: var(--cco-space-xl);
}

.cco-intro-lead {
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.6;
    color: var(--cco-shark);
    margin-bottom: var(--cco-space-md);
}

.cco-intro-highlight {
    background: var(--cco-swiss-coffee);
    color: var(--cco-shark);
    padding: 2px 6px;
    border-radius: var(--cco-radius-sm);
    font-weight: 600;
}

.cco-alert-box {
    background: var(--cco-buttercup);
    color: var(--cco-shark);
    padding: var(--cco-space-sm);
    border-radius: var(--cco-radius-md);
    margin: var(--cco-space-md) 0;
    text-align: center;
    border: 1px solid var(--cco-buttercup);
}

.cco-alert-box.valencia {
    background: var(--cco-valencia);
    color: white;
    border-color: var(--cco-valencia);
}

.cco-alert-text {
    margin: 0;
    font-weight: 600;
    font-size: 1rem;
}

/* ========================================
   CTA SYSTEM
   ======================================== */
.cco-cta-container {
    background: var(--cco-swiss-coffee);
    border: 2px solid var(--cco-buttercup);
    border-radius: var(--cco-radius-md);
    padding: var(--cco-space-md);
    margin: var(--cco-space-lg) 0;
    text-align: center;
}

.cco-cta-title {
    color: var(--cco-shark);
    margin-top: 0;
    font-size: 1.4rem;
    font-family: var(--cco-font-secondary);
    font-weight: 600;
}

.cco-cta-description {
    margin: 10px 0;
    font-size: 1rem;
    color: var(--cco-shark);
}

.cco-cta-primary {
    display: inline-block;
    background: var(--cco-buttercup);
    color: var(--cco-shark);
    padding: 12px 24px;
    border-radius: var(--cco-radius-md);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    margin: 10px;
    border: 2px solid var(--cco-buttercup);
    transition: all 0.2s ease;
    font-family: var(--cco-font-secondary);
}

.cco-cta-primary:hover {
    background: #e6a014;
    border-color: #e6a014;
    color: var(--cco-shark);
    text-decoration: none;
    transform: translateY(-1px);
}

.cco-cta-secondary {
    display: inline-block;
    background: var(--cco-valencia);
    color: white;
    padding: 10px 20px;
    border-radius: var(--cco-radius-md);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    margin: 10px;
    border: 2px solid var(--cco-valencia);
    transition: all 0.2s ease;
    font-family: var(--cco-font-secondary);
}

.cco-cta-secondary:hover {
    background: #c12e29;
    border-color: #c12e29;
    color: white;
    text-decoration: none;
    transform: translateY(-1px);
}

/* ========================================
   OFFERS GRID SYSTEM
   ======================================== */
.cco-offers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--cco-space-md);
    margin: var(--cco-space-lg) 0;
}

.cco-offer-card {
    background: #fff;
    border: 1px solid var(--cco-swiss-coffee);
    border-radius: var(--cco-radius-md);
    padding: var(--cco-space-md);
    transition: all 0.3s ease;
}

.cco-offer-card:hover {
    border-color: var(--cco-buttercup);
    box-shadow: 0 2px 8px rgba(247, 181, 22, 0.2);
}

.cco-offer-title {
    color: var(--cco-buttercup);
    margin-top: 0;
    font-size: 1.1rem;
    font-family: var(--cco-font-secondary);
    font-weight: 600;
}

.cco-offer-discount {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--cco-buttercup);
    margin: 10px 0;
    display: block;
}

.cco-offer-list {
    margin: 15px 0;
    padding-left: 20px;
    color: var(--cco-shark);
}

.cco-offer-list li {
    margin-bottom: 5px;
    line-height: 1.4;
}

/* ========================================
   CONTENT SECTIONS
   ======================================== */
.cco-section {
    margin: var(--cco-space-xl) 0;
}

.cco-section-title {
    color: var(--cco-shark);
    border-bottom: 2px solid var(--cco-buttercup);
    padding-bottom: 10px;
    margin-bottom: var(--cco-space-lg);
    font-family: var(--cco-font-secondary);
    font-weight: 600;
}

.cco-info-box {
    background: var(--cco-swiss-coffee);
    padding: var(--cco-space-md);
    border-radius: var(--cco-radius-md);
    margin: var(--cco-space-md) 0;
    border-left: 4px solid var(--cco-buttercup);
}

.cco-info-box p {
    margin: 0;
    font-style: italic;
    color: var(--cco-shark);
}

.cco-product-placeholder {
    border: 2px dashed var(--cco-buttercup);
    padding: 30px;
    text-align: center;
    margin: var(--cco-space-lg) 0;
    background: #f9f9f9;
    border-radius: var(--cco-radius-md);
}

.cco-product-placeholder p {
    color: #666;
    font-style: italic;
    margin: 0;
}

/* ========================================
   FEATURES GRID
   ======================================== */
.cco-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--cco-space-sm);
    margin: var(--cco-space-md) 0;
}

.cco-feature-card {
    background: #fff;
    padding: 15px;
    border-left: 3px solid var(--cco-buttercup);
    border: 1px solid var(--cco-swiss-coffee);
    border-radius: var(--cco-radius-sm);
}

.cco-feature-title {
    color: var(--cco-shark);
    font-weight: 600;
    margin-bottom: 5px;
    font-family: var(--cco-font-secondary);
}

.cco-feature-description {
    color: #666;
    font-size: 0.9rem;
    margin: 0;
}

/* ========================================
   STRATEGY SECTION
   ======================================== */
.cco-strategy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--cco-space-md);
    margin: var(--cco-space-lg) 0;
}

.cco-strategy-card {
    background: #fff;
    border-left: 4px solid var(--cco-buttercup);
    padding: var(--cco-space-md);
    border: 1px solid var(--cco-swiss-coffee);
    border-radius: var(--cco-radius-sm);
}

.cco-strategy-title {
    color: var(--cco-buttercup);
    margin-top: 0;
    font-size: 1.1rem;
    font-family: var(--cco-font-secondary);
    font-weight: 600;
}

.cco-strategy-list {
    padding-left: 20px;
    color: var(--cco-shark);
    line-height: 1.5;
}

.cco-strategy-list li {
    margin-bottom: 8px;
}

/* ========================================
   DEADLINE ALERTS
   ======================================== */
.cco-deadline-alert {
    background: var(--cco-shark);
    color: var(--cco-buttercup);
    padding: var(--cco-space-md);
    border-radius: var(--cco-radius-md);
    margin: 30px 0;
    text-align: center;
}

.cco-deadline-title {
    margin-top: 0;
    font-size: 1.3rem;
    color: var(--cco-buttercup);
    font-family: var(--cco-font-secondary);
}

.cco-deadline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin: var(--cco-space-md) 0;
}

.cco-deadline-item {
    background: rgba(247, 181, 22, 0.2);
    padding: 15px;
    border-radius: var(--cco-radius-sm);
}

.cco-deadline-date {
    font-weight: 700;
    display: block;
    margin-bottom: 5px;
}

/* ========================================
   FINAL CTA SECTION
   ======================================== */
.cco-final-cta {
    background: var(--cco-shark);
    color: var(--cco-buttercup);
    padding: 30px;
    border-radius: var(--cco-radius-md);
    text-align: center;
    margin: var(--cco-space-xl) 0;
}

.cco-final-cta-title {
    margin-top: 0;
    font-size: 1.6rem;
    color: var(--cco-buttercup);
    font-family: var(--cco-font-secondary);
}

.cco-final-cta-text {
    font-size: 1.1rem;
    margin: var(--cco-space-md) 0;
    line-height: 1.6;
}

.cco-final-cta-features {
    text-align: left;
    max-width: 600px;
    margin: var(--cco-space-lg) auto;
    color: var(--cco-buttercup);
}

.cco-final-cta-features p {
    margin: 8px 0;
    color: var(--cco-buttercup);
}

.cco-final-cta-button {
    display: inline-block;
    background: var(--cco-buttercup);
    color: var(--cco-shark);
    padding: 18px 36px;
    border-radius: var(--cco-radius-md);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.2rem;
    margin: 30px 10px;
    border: 2px solid var(--cco-buttercup);
    transition: all 0.2s ease;
    font-family: var(--cco-font-secondary);
}

.cco-final-cta-button:hover {
    background: #e6a014;
    border-color: #e6a014;
    color: var(--cco-shark);
    text-decoration: none;
    transform: translateY(-1px);
}

.cco-final-disclaimer {
    font-size: 0.9rem;
    margin-top: var(--cco-space-md);
    opacity: 0.8;
    font-style: italic;
}

/* ========================================
   FOOTER SECTION
   ======================================== */
.cco-footer {
    margin-top: var(--cco-space-xl);
    padding: var(--cco-space-md);
    background: var(--cco-swiss-coffee);
    border-radius: var(--cco-radius-md);
    font-size: 0.9rem;
    color: var(--cco-shark);
}

.cco-footer p {
    margin: 0;
    line-height: 1.5;
}

.cco-footer p + p {
    margin-top: 10px;
}

/* ========================================
   RESPONSIVE SYSTEM
   ======================================== */
@media (max-width: 768px) {
    .cco-offers-grid {
        grid-template-columns: 1fr;
        gap: var(--cco-space-sm);
    }
    
    .cco-features-grid {
        grid-template-columns: 1fr;
    }
    
    .cco-strategy-grid {
        grid-template-columns: 1fr;
    }
    
    .cco-deadline-grid {
        grid-template-columns: 1fr;
    }
    
    .cco-article h1 {
        font-size: 1.6rem;
    }
    
    .cco-article h2 {
        font-size: 1.3rem;
    }
    
    .cco-cta-primary,
    .cco-final-cta-button {
        display: block;
        width: 100%;
        max-width: 300px;
        margin: 10px auto;
    }
    
    .cco-final-cta-features {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .cco-offer-discount {
        font-size: 1.5rem;
    }
    
    .cco-cta-container {
        padding: var(--cco-space-sm);
    }
    
    .cco-final-cta {
        padding: var(--cco-space-md);
    }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */
.cco-text-center { text-align: center; }
.cco-text-left { text-align: left; }
.cco-text-right { text-align: right; }

.cco-mb-sm { margin-bottom: var(--cco-space-sm); }
.cco-mb-md { margin-bottom: var(--cco-space-md); }
.cco-mb-lg { margin-bottom: var(--cco-space-lg); }

.cco-mt-sm { margin-top: var(--cco-space-sm); }
.cco-mt-md { margin-top: var(--cco-space-md); }
.cco-mt-lg { margin-top: var(--cco-space-lg); }

.cco-font-bold { font-weight: 600; }
.cco-font-normal { font-weight: 400; }

.cco-color-shark { color: var(--cco-shark); }
.cco-color-buttercup { color: var(--cco-buttercup); }
.cco-color-valencia { color: var(--cco-valencia); }

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    .cco-cta-primary,
    .cco-cta-secondary,
    .cco-final-cta-button {
        background: white !important;
        color: black !important;
        border: 1px solid black !important;
    }
    
    .cco-final-cta,
    .cco-deadline-alert {
        background: white !important;
        color: black !important;
        border: 1px solid black !important;
    }
}