.sns-footer {
    display: grid;
    color: var(--spk-site-footer-body-text-color-primary);
    background-color: var(--spk-site-footer-background-color-one);
}

.sns-footer-container {
    display: flex;
    flex-direction: column;
    justify-self: center;
    max-width: 960px;
    padding: 24px;
}


.sns-licenses-container {
    display: flex;
    flex-direction: column;
    margin: 12px;
}

.sns-footer-action-buttons {
    display: flex;
    width: 100%;
    gap: 8px;
    justify-content: space-between;
    margin-bottom: 16px;
}

@media only screen and (max-width: 1023px) {
    .sns-footer-action-buttons {
        flex-direction: column;
    }
}

.sns-footer-action-button {
    display: flex;
    background-color: var(--spk-site-footer-background-color-three);
    border-radius: 8px;
    color: var(--spk-site-footer-link-color-default);
    justify-content: center;
    padding: 8px;
    text-decoration: none;
    width: 100%;
}

.sns-footer-action-button-content {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.sns-footer-logo {
    width: 180px;
    height: 88px;
    margin-top: 12px;
    align-self: center;
    margin-bottom: 36px;
}

.sns-footer-icon-color {
    color: var(--spk-site-footer-icon-color-primary);
}

.sns-footer-item-container {
    background-color: var(--spk-site-footer-background-color-three);
    padding: 8px;
    border-radius: 8px;
}

.sns-footer-social-section {
    display: flex;
    gap: 8px;
    justify-content: center;
    width: 100%;
    margin-bottom: 13px;
}

.sns-footer-payment-section {
    width: 100%;
    padding: 24px;
}

.sns-footer-links {
    text-decoration: none;
}

.sns-footer-ssi-group-container {
    background-color: var(--spk-site-footer-background-color-three);
    border-radius: var(--sns-footer-ssi-group-container-border-radius);
}

.sns-footer-ssi-container {
    padding: var(--sns-footer-ssi-container-padding);
}

.sns-footer-separator {
    margin: 1em 0;
    border: none;
    height: 1px;
    /* Override hr styling from Whitelabel */
    max-width: unset;
    background-color: var(--spk-site-background-color-secondary);
}

.sns-footer-seo {
    margin-bottom: 13px;
}

@media only screen and (min-width: 1024px) {
    .sns-footer-action-buttons {
        margin-bottom: 20px;
    }
    
    .sns-footer-social-section {
        margin-bottom: 30px;
    }

    .sns-footer-seo {
        margin-bottom: 30px;
    }
}

:root {
    /* @todo ¡These random pixel values should come from Spark somehow! */
    --sns-footer-ssi-group-container-border-radius: 8px;
    --sns-footer-ssi-container-padding: 16px;
}