/* Sopify_Refactored/css/components/countries.css */

.countries-section {
    padding: 80px 0; /* Original padding */
    background: var(--bg-countries-section); /* New light gray background */
}

.countries-section-title { /* Was .countries-section h2 */
    text-align: center;
    font-size: var(--font-size-h2);
    margin-bottom: 3.5rem; /* Increased margin below title */
    color: var(--text-dark-contrast);
    font-weight: 600;
}
/* .highlight-red is defined in base.css */


.countries-grid {
    display: grid;
    /* grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); */
    grid-template-columns: repeat(3, 1fr); /* Force 3 columns on desktop if desired */
    gap: 2.5rem; /* Original gap */
}

.country-card {
    background: transparent; /* No card background, content sits on section background */
    padding: 0; /* Remove card padding */
    border-radius: 0; /* Remove card radius */
    box-shadow: none; /* Remove card shadow */
    border: none; /* Remove card border */
    text-align: center; /* Center content within the card column */
    /* Remove backdrop-filter if it was there */
    transition: none; /* No hover transform for the card itself */
}

.country-card:hover .learn-more { /* Hover effect on learn more link */
    color: var(--color-accent-darker);
}
.country-card:hover .learn-more .arrow {
    transform: translateX(4px);
}


.country-flag-container {
    margin-bottom: 1.5rem; /* Space below flag */
    display: inline-block; /* To center the image block */
}

.country-flag-img {
    width: 64px; /* Adjust flag size as needed */
    height: 64px;
    border-radius: var(--border-radius-flag); /* Circular flags */
    object-fit: cover; /* Ensure flags fill the circle */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Subtle shadow for flags */
    display: block; /* Remove extra space below image */
    margin: 0 auto; /* Center flag if container is block */
}

.country-card-content {
    /* No specific styling needed if text-align: center on .country-card works */
}

.country-title { /* This is an h3 now */
    font-size: var(--font-size-h3); /* 1.125rem default */
    font-weight: 600;
    color: var(--text-dark-contrast);
    margin-bottom: 0.75rem;
}

.country-card p {
    color: var(--text-color-medium);
    font-size: var(--font-size-sm); /* 14px */
    line-height: var(--line-height-base);
    margin-bottom: 1.25rem;
    padding: 0 0.5rem; /* Add slight horizontal padding to constrain paragraph width */
}

.learn-more {
    color: var(--color-accent); /* Red color */
    text-decoration: none;
    font-weight: 500;
    font-size: var(--font-size-sm);
    display: inline-flex; /* For aligning text and arrow */
    align-items: center;
    transition: color 0.3s ease;
}

.learn-more .arrow {
    margin-left: 0.4rem;
    display: inline-block;
    transition: transform 0.3s ease;
}


/* Floating WhatsApp Button Styles - Can go in a new global components CSS or here if specific to layout near countries */
.whatsapp-float {
    position: fixed;
    width: auto; /* Auto width based on content */
    height: 48px; /* Fixed height */
    bottom: 25px;
    right: 25px;
    background-color: var(--color-whatsapp);
    color: var(--text-color-light);
    border-radius: 24px; /* Pill shape */
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 100;
    display: flex;
    align-items: center;
    padding: 0 16px 0 12px; /* Adjust padding for icon and text */
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.whatsapp-float:hover {
    background-color: var(--color-whatsapp-darker);
    transform: translateY(-2px);
    color: var(--text-color-light); /* ADDED: Keep text color white on hover */
}

.whatsapp-icon {
    width: 20px; /* Adjust icon size */
    height: 20px;
    fill: currentColor; /* Icon inherits text color (white) */
    margin-right: 8px;
}


@media (max-width: 992px) { /* Adjust breakpoint for 2 columns */
    .countries-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .countries-section {
        padding: 60px 0;
    }
    .countries-section-title {
        font-size: 1.75rem;
        margin-bottom: 2.5rem;
    }
    .countries-grid {
        grid-template-columns: 1fr; /* Stack on mobile */
        gap: 2.5rem; /* Increased gap when stacked */
    }
    .country-card p {
        padding: 0 1rem; /* More padding on mobile for readability */
    }
    .whatsapp-float {
        height: 44px;
        bottom: 20px;
        right: 20px;
        font-size: var(--font-size-xs);
        padding: 0 12px 0 10px;
    }
    .whatsapp-icon {
        width: 18px;
        height: 18px;
    }
}