/**
 * 🌎 COUNTRY CARDS - 50% / 50% LAYOUT
 *
 * BRASIL (🇧🇷): 50% esquerda (borda esquerda → meio)
 * USA (🇺🇸): 50% direita (meio → borda direita)
 *
 * Mesma técnica de preenchimento dos 6 cards acima
 */

/* ===================================
   🎯 CONTAINER PAI - Grid 50/50
=================================== */

/**
 * Wrapper que contém os 2 cards de países
 * - Display flex para dividir 50/50
 * - Full-width edge-to-edge
 */
.countries-wrapper {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
    gap: 0; /* SEM gap - conectados no meio */
}

/* ===================================
   🌍 CARDS DE PAÍSES - 50% CADA
=================================== */

/**
 * Ambos os cards ocupam 50% da largura
 * - Brasil: da borda esquerda até o meio
 * - USA: do meio até a borda direita
 */
.elite-country-card-apple {
    /* 50% da largura da viewport */
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;

    /* Remove margens (conectar no meio) */
    margin: 0 !important;

    /* Remove bordas arredondadas (estilo dos 6 cards) */
    border-radius: 0 !important;

    /* Padding vertical */
    padding-top: 64px !important;
    padding-bottom: 64px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;

    /* Position relativa para blobs */
    position: relative !important;

    /* Mesmo background dos 6 cards */
    background: var(--apple-bg-primary) !important;

    /* Borda sutil */
    border-top: 1px solid var(--apple-border) !important;

    /* Remove shadows (layout flat) */
    box-shadow: none !important;

    /* Transição suave */
    transition: background-color 0.6s cubic-bezier(0.28, 0.11, 0.32, 1);

    /* Overflow para blobs */
    overflow: hidden !important;
}

/* ===================================
   🇧🇷 BRASIL - 50% ESQUERDA
=================================== */

/**
 * Card do Brasil
 * - Ocupa lado esquerdo (50%)
 * - Background alternado (secondary)
 */
.elite-country-card-brasil {
    /* Lado esquerdo */
    order: 1;

    /* Background alternado */
    background: var(--apple-bg-secondary) !important;

    /* Borda direita no meio (separa dos USA) */
    border-right: 0.5px solid var(--apple-border) !important;

    /* Remove padding inferior para footer colar */
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* ===================================
   🇺🇸 USA - 50% DIREITA
=================================== */

/**
 * Card dos USA
 * - Ocupa lado direito (50%)
 * - Background alternado (primary)
 */
.elite-country-card-usa {
    /* Lado direito */
    order: 2;

    /* Background alternado */
    background: var(--apple-bg-primary) !important;

    /* Borda esquerda no meio (separa do Brasil) */
    border-left: 0.5px solid var(--apple-border) !important;

    /* Remove padding inferior para footer colar */
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* ===================================
   📦 CONTEÚDO INTERNO - CENTRALIZADO
=================================== */

/**
 * Conteúdo interno centralizado
 * - Max-width para não ficar muito largo
 * - Padding lateral
 */
.country-card-content {
    max-width: 600px !important;
    margin: 0 auto !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    position: relative !important;
    z-index: 10 !important;
}

/* ===================================
   🌀 BLOBS - AJUSTADOS PARA 50% WIDTH
=================================== */

/**
 * Container de blobs
 * - Preenche todo o card (50% da tela)
 * - Blobs ficam dentro do espaço de 50%
 */
.country-blob-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: 0 !important;
    opacity: 0.08;
}

[data-theme="dark"] .country-blob-container {
    opacity: 0.12;
}

/**
 * Blobs individuais
 * - Mesma animação dos 6 cards
 * - Gradientes coloridos
 */
.country-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    mix-blend-mode: multiply;
    animation: country-blob-morph 20s ease-in-out infinite;
}

[data-theme="dark"] .country-blob {
    mix-blend-mode: screen;
}

/* Blob 1 - Brasil (Verde/Amarelo) */
.elite-country-card-brasil .country-blob-1 {
    width: 400px;
    height: 400px;
    top: -100px;
    left: -100px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    animation-delay: 0s;
}

.elite-country-card-brasil .country-blob-2 {
    width: 350px;
    height: 350px;
    bottom: -100px;
    right: -100px;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    animation-delay: 5s;
}

/* Blob 2 - USA (Vermelho/Azul) */
.elite-country-card-usa .country-blob-1 {
    width: 400px;
    height: 400px;
    top: -100px;
    left: -100px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    animation-delay: 0s;
}

.elite-country-card-usa .country-blob-2 {
    width: 350px;
    height: 350px;
    bottom: -100px;
    right: -100px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    animation-delay: 5s;
}

/* Animação dos blobs */
@keyframes country-blob-morph {
    0%, 100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
    25% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
        transform: translate(30px, -30px) rotate(90deg) scale(1.05);
    }
    50% {
        border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
        transform: translate(-20px, 20px) rotate(180deg) scale(0.95);
    }
    75% {
        border-radius: 70% 30% 50% 50% / 30% 70% 50% 50%;
        transform: translate(20px, 10px) rotate(270deg) scale(1.02);
    }
}

/* ===================================
   🗑️ REMOVE GRID (mantém só blobs)
=================================== */

.country-grid {
    display: none !important;
}

/* ===================================
   📱 RESPONSIVE - MOBILE
=================================== */

/**
 * Mobile: Empilha cards verticalmente
 * - Brasil fica em cima
 * - USA fica embaixo
 * - Ambos 100% width
 */
@media (max-width: 1024px) {
    .countries-wrapper {
        flex-direction: column;
    }

    .elite-country-card-apple {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .elite-country-card-brasil {
        border-right: none !important;
        border-bottom: 0.5px solid var(--apple-border) !important;
    }

    .elite-country-card-usa {
        border-left: none !important;
        border-top: 0.5px solid var(--apple-border) !important;
    }

    .country-card-content {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .elite-country-card-apple {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    /* Mobile: último card (USA) sem padding inferior */
    .elite-country-card-usa {
        padding-bottom: 0 !important;
    }
}

/* Remove hover transforms */
.elite-country-card-apple:hover {
    transform: none !important;
}

/* ===================================
   🎨 AJUSTES FINOS DE ELEMENTOS INTERNOS
=================================== */

/* Headers e títulos mantêm estilo atual */
.country-header,
.country-title,
.country-stats,
.country-stat,
.country-section,
.country-form,
.country-btn,
.country-btn-highlight {
    /* Mantém estilos originais */
    position: relative;
    z-index: 10;
}

/* Cards internos mantêm bordas arredondadas */
.country-stat {
    border-radius: 18px !important;
}