﻿.mobile-downloads-container {
    background-color: #F0F0F0;
    margin: 0 20px;
}

.mobile-downloads-content {
    background-color: #F0F0F0;
    min-height: 25vh;
    padding: var(--spacing-2xl) var(--spacing-md);
    text-align: center;
    position: relative;
    max-width: 1440px;
    margin: 1em auto 1em auto;
    background-color: #F0F0F0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}


.downloads-heading {
    font-size: 2.5em;
    color: var(--color-primary-accent);
    font-weight: 600;
}

.downloads-buttons {
    padding: 1em;
    display: flex;
    justify-content: center;
    gap: 0rem;
    flex-wrap: wrap;
    align-items: center;
}

/* Shared button styles */
.store-btn {
    display: flex;
    align-items: center;
    background: #000;
    border: 1px solid #A6A6A6;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    height: 5vh; /* responsive height */
    max-height: 80px;
    text-decoration: none;
    transition: transform 0.2s;
}

    .store-btn:hover {
        transform: scale(1.05);
    }

/* Logo */
.store-logo {
    flex-shrink: 0;
    margin-right: 0.5rem;
    height: 80%; /* scale with button */
    width: auto;
}

/* Apple logo using pseudo-element */
.apple-logo {
    background: url('https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg') no-repeat center/contain;
    width: 1em;
}

/* Google Play logo using pseudo-element */
.google-logo {
    background: url('https://upload.wikimedia.org/wikipedia/commons/7/78/Google_Play_Store_badge_EN.svg') no-repeat center/contain;
    width: 1em;
}

/* Text styling */
.store-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
}

.small-text {
    font-size: 0.5em;
    line-height: 1;
}

.large-text {
    font-size: 0.9em;
    line-height: 1;
    font-weight: bold;
}

.android {
    width: 190px;
    height: 80px;
    order: 0;
}

.apple {
    width: 164px;
    order: 1;
}


/* Mobile: stack vertically */
@media (max-width: 768px) {

    .mobile-downloads-container {
        margin: 0;
    }

    .downloads-buttons {
        flex-direction: column;
        gap: 1rem;
    }
}
