/*
 * Shared Pomalloc public-page palette.
 * Matches the #ff851b primary colour used by the authenticated application.
 */
:root {
    --p: #ff851b;
}

.brand b,
.center > b {
    background: linear-gradient(135deg, #ff9f45, #e56700);
}

.primary,
.register-submit {
    background: linear-gradient(135deg, #ff9a3d, #df6200);
    box-shadow: 0 12px 25px #ff851b33;
}

.primary:hover,
.register-submit:hover {
    box-shadow: 0 16px 30px #ff851b44;
}

.balance {
    background: linear-gradient(135deg, #ff922f, #d85b00);
}

.progress i,
.steps li > span {
    background: #ff851b;
}

.steps i,
.purple,
.points article > span {
    color: #ff851b;
    background: #fff0e2;
}

.cta > .container > div {
    background: linear-gradient(120deg, #ed7207, #ff9a3d);
}

.white {
    color: #d85b00;
}

.decoration-one {
    background: radial-gradient(circle, #ffe0c4, transparent 68%);
}

.virtual-note {
    border-color: #ffd7b5;
    color: #77523a;
    background: #fff1e5;
}

.form-icon {
    background: #fff0e2;
}

.field input:hover {
    border-color: #ffc28d;
}

.field input:focus {
    border-color: #ff851b;
    box-shadow: 0 0 0 4px #ff851b1c;
}

/* Official Pomalloc logo assets */
.brand-logo-image {
    display: block;
    width: auto;
    height: 46px;
    object-fit: contain;
}
.footer-brand .brand-logo-image {
    height: 50px;
}
.brand-icon-image {
    display: block;
    width: 42px;
    height: 42px;
    object-fit: contain;
}
.mock-brand {
    gap: 7px;
    font-size: 17px;
}
.mock-brand strong {
    font-weight: 700;
}
.login-pig-icon {
    overflow: hidden;
    padding: 7px;
}
.login-pig-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.login-session-note {
    margin-bottom: 20px;
    padding: 13px 15px;
    border: 1px solid #ffd7b5;
    border-radius: 12px;
    color: #77523a;
    background: #fff8f1;
    font-size: 14px;
}
.login-session-note a {
    color: #d85b00;
    font-weight: 700;
}
@media (max-width: 560px) {
    .brand-logo-image {
        height: 39px;
    }
}
.family-brand-icon {
    display: block;
    width: 64px;
    height: 58px;
    margin: 0 auto 5px;
    object-fit: contain;
}