:root {
    --brand-color: #004a88;
    --brand-color-dark: #003867;
}

body {
    background-color: #f5f7fa;
}

.site-header,
.site-footer {
    background-color: var(--brand-color);
    color: #fff;
}

.site-footer {
    padding: 1rem 0;
}

.site-footer a {
    color: #fff;
}

.checkout-card {
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);
}

.checkout-card .card-body {
    padding: 2rem;
}

.checkout-header-img {
    max-width: 500px;
    width: 100%;
    height: auto;
}

.checkout-payment-img {
    max-width: 430px;
    width: 100%;
    height: auto;
}

.btn-brand {
    background-color: var(--brand-color);
    border-color: var(--brand-color);
    color: #fff;
}

.btn-brand:hover,
.btn-brand:focus {
    background-color: var(--brand-color-dark);
    border-color: var(--brand-color-dark);
    color: #fff;
}

#loader-proceso {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.7);
}

.confirmacion-estado {
    padding: 3rem 1rem;
}

.confirmacion-estado img.checkout-header-img {
    max-width: 500px;
}

.confirmacion-estado .datafono-img {
    max-width: 158px;
    width: 100%;
    height: auto;
}