/* MARKET PAGE FIXES */

/* Stats */
.market-stats { 
    padding: 80px 0; 
    background: linear-gradient(135deg, #f8f9fa, #fff);
    overflow-x: hidden;
    width: 100%;
}

.market-stats .container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.stats-grid { 
    display: grid !important; 
    grid-template-columns: repeat(4, 1fr) !important; 
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    justify-items: stretch !important;
}

.stat-card { 
    background: white; 
    padding: 30px 15px; 
    border-radius: 16px; 
    text-align: center; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.08); 
    transition: all 0.3s; 
    position: relative; 
    overflow: visible !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.stat-card::before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    height: 4px; 
    background: #cfa447; 
    transform: scaleX(0); 
    transition: transform 0.3s; 
}

.stat-card:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 8px 30px rgba(207,164,71,0.2); 
}

.stat-card:hover::before { 
    transform: scaleX(1); 
}

.stat-icon { 
    width: 60px; 
    height: 60px; 
    margin: 0 auto 15px; 
    background: rgba(207,164,71,0.1); 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 28px; 
    color: #cfa447; 
    flex-shrink: 0;
}

.stat-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.stat-number { 
    font-size: 2.5rem !important; 
    font-weight: 800 !important; 
    color: #2f3237 !important; 
    margin: 0 !important; 
    line-height: 1.1 !important;
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
}

.stat-label { 
    font-size: 0.9rem !important; 
    color: #666 !important; 
    font-weight: 500 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

@media (max-width: 1200px) {
    .stats-grid {
        gap: 20px;
    }
    
    .stat-card {
        padding: 35px 15px;
    }
}

@media (max-width: 1024px) { 
    .stats-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 20px;
    }
    
    .stat-number {
        font-size: 2.5rem !important;
    }
}

@media (max-width: 768px) { 
    .market-stats .container {
        padding: 0 15px;
    }
    
    .stats-grid { 
        grid-template-columns: 1fr; 
        gap: 20px;
    }
    
    .stat-card {
        padding: 30px 20px;
    }
    
    .stat-number {
        font-size: 2.2rem !important;
    }
}

/* World Map */
.world-map-section { padding: 100px 0; background: white; }
.world-map-wrapper { position: relative; max-width: 1200px; margin: 0 auto; }
.world-map-bg { width: 100%; height: auto; display: block; }
.export-routes { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.market-markers { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.marker { position: absolute; cursor: pointer; }
.marker-pulse { position: absolute; width: 30px; height: 30px; border-radius: 50%; background: var(--gold); opacity: 0.3; animation: pulse 2s infinite; }
.marker-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--gold); border: 3px solid white; box-shadow: 0 0 20px rgba(207,164,71,0.6); position: relative; z-index: 2; }
.marker-dot.origin { background: var(--brown); box-shadow: 0 0 20px rgba(90,58,30,0.6); }
.marker-tooltip { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); background: white; padding: 15px 20px; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.15); min-width: 200px; opacity: 0; visibility: hidden; transition: all 0.3s; z-index: 10; }
.marker:hover .marker-tooltip { opacity: 1; visibility: visible; bottom: 50px; }
.marker-tooltip h4 { margin: 0 0 5px; color: var(--primary); font-size: 1rem; }
.marker-tooltip p { margin: 0 0 10px; color: #666; font-size: 0.85rem; }
.tooltip-stats { display: flex; flex-direction: column; gap: 5px; }
.tooltip-stats span { font-size: 0.8rem; color: var(--gold); font-weight: 600; }
.europe-marker { top: 30%; left: 48%; }
.mena-marker { top: 45%; left: 52%; }
.americas-marker { top: 40%; left: 20%; }
.india-marker { top: 40%; left: 65%; }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.3; } 50% { transform: scale(1.5); opacity: 0; } }

/* Regional Markets */
.regional-markets { padding: 80px 0; background: #f8f9fa; }
.region-tabs { display: flex; justify-content: center; gap: 20px; margin-bottom: 50px; flex-wrap: wrap; }
.region-tab { display: flex; align-items: center; gap: 10px; padding: 15px 30px; background: white; border: 2px solid #e0e0e0; border-radius: 50px; color: var(--primary); font-weight: 600; cursor: pointer; transition: all 0.3s; }
.region-tab:hover, .region-tab.active { background: var(--gold); border-color: var(--gold); color: white; transform: translateY(-2px); }
.region-content { display: none; }
.region-content.active { display: block; animation: fadeIn 0.5s; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.region-header { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-bottom: 50px; }
.region-info h2 { font-size: 2.5rem; font-weight: 800; color: var(--primary); margin: 0 0 20px; }
.region-info p { font-size: 1.1rem; color: #666; line-height: 1.8; margin: 0 0 30px; }
.region-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.region-stat { text-align: center; padding: 20px; background: white; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.stat-value { font-size: 2rem; font-weight: 700; color: var(--gold); display: block; margin-bottom: 5px; }
.stat-label { font-size: 0.9rem; color: #666; }
.region-image { border-radius: 20px; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,0.15); }
.region-image img { width: 100%; height: 400px; object-fit: cover; }
@media (max-width: 1024px) { .region-header { grid-template-columns: 1fr; } .region-stats { grid-template-columns: 1fr; } }

/* Countries - Redesigned */
.countries-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px; 
    margin-bottom: 40px; 
}

.country-card { 
    background: white; 
    padding: 0;
    border-radius: 16px; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.08); 
    transition: all 0.3s ease; 
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

.country-card:hover { 
    transform: translateY(-8px); 
    box-shadow: 0 12px 40px rgba(0,0,0,0.15); 
}

.country-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #cfa447, #ff7a2e);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.country-card:hover::before {
    opacity: 1;
}

.country-flag { 
    width: 100%;
    height: 140px;
    overflow: hidden; 
    position: relative;
    background: #f5f5f5;
}

.country-flag img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover;
    transition: transform 0.3s ease;
}

.country-card:hover .country-flag img {
    transform: scale(1.05);
}

.country-info { 
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.country-info h3 { 
    font-size: 1.3rem; 
    font-weight: 700; 
    color: #2f3237; 
    margin: 0;
    line-height: 1.2;
}

.country-info p { 
    font-size: 0.9rem; 
    color: #666; 
    margin: 0; 
    line-height: 1.6;
    min-height: 48px;
}

.country-stats { 
    display: flex; 
    flex-direction: column; 
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.country-stats .stat { 
    font-size: 0.85rem; 
    color: #cfa447; 
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.country-stats .stat::before {
    content: '•';
    color: #cfa447;
    font-size: 1.2rem;
}

.region-footer { 
    background: white; 
    padding: 25px; 
    border-radius: 12px; 
    margin-top: 30px; 
}

.region-footer p { 
    margin: 0; 
    color: #666; 
    line-height: 1.7; 
}

@media (max-width: 1024px) { 
    .countries-grid { 
        grid-template-columns: repeat(2, 1fr); 
    } 
}

@media (max-width: 768px) { 
    .countries-grid { 
        grid-template-columns: 1fr; 
    } 
}

/* Export Process */
.export-process { padding: 80px 0; background: var(--primary); color: white; }
.export-process .section-title { color: white; }
.export-process .section-subtitle { color: rgba(255,255,255,0.8); }
.process-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 50px; }
.process-step { text-align: center; position: relative; }
.step-number { width: 80px; height: 80px; margin: 0 auto 20px; background: rgba(255,255,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 800; color: var(--gold); border: 3px solid rgba(207,164,71,0.3); }
.process-step:hover .step-number { background: var(--gold); color: white; border-color: var(--gold); transform: scale(1.1); }
.step-content h3 { font-size: 1.2rem; margin: 0 0 10px; color: white; }
.step-content p { font-size: 0.9rem; opacity: 0.9; margin: 0; }
@media (max-width: 1024px) { .process-timeline { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .process-timeline { grid-template-columns: 1fr; } }

/* Market Insights */
.market-insights { padding: 80px 0; background: white; }
.insights-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.insight-card { background: #f8f9fa; padding: 30px; border-radius: 16px; text-align: center; transition: all 0.3s; }
.insight-card:hover { background: white; box-shadow: 0 8px 30px rgba(0,0,0,0.1); transform: translateY(-5px); }
.insight-icon { width: 70px; height: 70px; margin: 0 auto 20px; background: var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; color: white; }
.insight-card h3 { font-size: 1.2rem; margin: 0 0 15px; color: var(--primary); }
.insight-card p { font-size: 0.9rem; color: #666; margin: 0; line-height: 1.6; }
@media (max-width: 1024px) { .insights-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .insights-grid { grid-template-columns: 1fr; } }

/* CTA */
.market-cta { 
    padding: 80px 0; 
    background: linear-gradient(135deg, #5a3a1e, #2f3237) !important; 
    color: white !important; 
    text-align: center; 
}

.market-cta h2 { 
    font-size: 2.5rem; 
    margin: 0 0 15px; 
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    font-weight: 700;
}

.market-cta p { 
    font-size: 1.2rem; 
    margin: 0 0 30px; 
    color: #ffffff !important;
    opacity: 0.95 !important;
}

.cta-buttons { 
    display: flex; 
    gap: 15px; 
    justify-content: center; 
    flex-wrap: wrap; 
}

.btn-outline { 
    background: transparent; 
    border: 2px solid white; 
    color: white; 
}

.btn-outline:hover {
    background: white;
    color: #2f3237;
}
.btn-outline:hover { background: white; color: var(--gold); }
@media (max-width: 768px) { .cta-buttons { flex-direction: column; align-items: stretch; max-width: 300px; margin: 0 auto; } }


/* ===== HEADER FIXES FOR MARKET PAGE ===== */
.header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    width: 100% !important;
    background: rgba(255, 255, 255, 0.95) !important;
}

main {
    padding-top: 85px !important;
}

@media (max-width: 768px) {
    main {
        padding-top: 70px !important;
    }
}