/* Bootstrap 5.0.2 cuida de grade, display, espacamentos e componentes. */
.pet-page {
    --pet-primary: #361f8a;
    --pet-secondary: #d11e85;
    --pet-soft: #fffaff;
    --pet-support: #e8f9fc;
    --pet-ink: #212529;
    color: var(--pet-ink);
}

.pet-page .pet-primary { color: var(--pet-primary); }
.pet-page .pet-soft { background-color: var(--pet-soft); }
.pet-page .pet-support { background-color: var(--pet-support); }
.pet-page .pet-hero { background-color: #212529; }
.pet-page .pet-icon { background-color: var(--pet-primary); color: #fff; }
.pet-page .pet-image { object-fit: cover; }
.pet-page .pet-hero-image { object-position: 56% 42%; }
.pet-page .pet-mission-child { object-position: center 30%; }
.pet-page .pet-story-family { object-position: 42% center; }
.pet-page .pet-story-image { object-position: center 25%; }
.pet-page .pet-company-image { object-position: center 25%; }
.pet-page .pet-donation-image { object-position: center 60%; }
.pet-page .pet-food-image { object-position: center 58%; }
.pet-page .pet-final-image { object-position: center 30%; }

/* O Bootstrap 5.0.2 nao tem utilitario de proporcao por breakpoint. */
@media (max-width: 1199.98px) {
    .pet-page .pet-middle-photo { --bs-aspect-ratio: calc(9 / 21 * 100%); }
    .pet-page .pet-donation-image { object-position: center 40%; }
}

.pet-page .pet-hero-overlay,
.pet-page .pet-final-overlay {
    background-color: #000000a1;
}

.pet-page .pet-option,
.pet-page .pet-frequency {
    color: var(--pet-primary);
    background-color: #fff;
    border-color: #ded9ec;
}

.pet-page .btn-check:checked + .pet-option {
    background-color: #f2edff;
    border-color: var(--pet-primary) !important;
    box-shadow: inset 0 0 0 1px var(--pet-primary);
}

.pet-page .btn-check:checked + .pet-frequency {
    background-color: var(--pet-primary);
    border-color: var(--pet-primary);
    color: #fff;
}

.pet-page .pet-option:hover,
.pet-page .pet-frequency:hover {
    border-color: var(--pet-primary) !important;
}

/* Reusa o gradiente da marca sem a largura fixa da classe legada. */
.pet-page .pet-button { background: linear-gradient(113deg, var(--pet-primary) 0%, var(--pet-secondary) 100%); }

.pet-page .pet-button,
.pet-page .pet-button:hover,
.pet-page .pet-button:focus {
    color: #fff !important;
}

.pet-page a.pet-link { color: var(--pet-primary) !important; }
.pet-page a.pet-link:hover { color: var(--pet-secondary) !important; }
.pet-page .pet-link { text-decoration: underline !important; }

.pet-page .form-control {
    color: var(--pet-ink);
    border-color: #ded9ec !important;
    border-radius: .25rem !important;
}

.pet-page .form-control:focus,
.pet-page .btn-check:focus + .btn,
.pet-page .btn:focus-visible,
.pet-page a:focus-visible {
    outline: 3px solid var(--pet-secondary);
    outline-offset: 3px;
    box-shadow: none;
}

.pet-page .accordion-button {
    color: var(--pet-primary);
    background-color: #fff;
}

.pet-page .accordion-button:not(.collapsed) {
    color: var(--pet-primary);
    background-color: #f2edff;
}

.pet-page .accordion-button:focus {
    border-color: var(--pet-secondary);
    box-shadow: 0 0 0 .2rem rgba(209, 30, 133, .2);
}

@media (prefers-reduced-motion: reduce) {
    .pet-page .collapsing { transition: none; }
}