/*
    Adoption Application - PetPlace design (Figma: PetPoint Design Requests / Ready for Dev)
    Loaded after the legacy DNN/Bootstrap styles; everything is scoped to .aa-page so the
    old skin rules (Open Sans, 12px body, .form-control, .btn-maroon...) don't leak in.
*/

:root {
    --aa-font: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    --aa-text-brand-primary: #066f65;
    --aa-text-brand-secondary: #30415a;
    --aa-text-primary: #181d27;
    --aa-text-secondary: #535862;
    --aa-text-placeholder: #717680;
    --aa-text-error: #d92d20;

    --aa-bg: #ffffff;
    --aa-bg-brand-soft: #e4f5f4;
    --aa-bg-banner: #f1f2eb;
    --aa-bg-button-primary: #ffa63b;
    --aa-bg-button-primary-hover: #f59521;

    --aa-border-input: #d5d7da;
    --aa-border-subtle: #e9eaeb;
    --aa-border-focus: #1d837a;
    --aa-border-button-secondary: #30415a;
    --aa-icon-brand: #1d837a;

    --aa-radius-full: 9999px;
    --aa-radius-2xl: 16px;

    --aa-space-xxs: 4px;
    --aa-space-xs: 8px;
    --aa-space-sm: 12px;
    --aa-space-md: 16px;
    --aa-space-lg: 20px;
    --aa-space-xl: 24px;
    --aa-space-2xl: 32px;
    --aa-space-3xl: 40px;
    --aa-space-4xl: 48px;
    --aa-space-6xl: 80px;

    --aa-gutter: var(--aa-space-6xl);
}

@media (max-width: 767.98px) {
    :root {
        --aa-gutter: var(--aa-space-md);
    }
}

/* ---------- Base ---------- */

body.aa-body {
    margin: 0;
    background: var(--aa-bg);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

    /* Push the footer to the bottom on short pages (e.g. the "submitted" screen). */
    body.aa-body > #app {
        flex: 1 0 auto;
    }

.aa-page,
.aa-page *,
.aa-page a:link,
.aa-page a:visited {
    font-family: var(--aa-font);
    font-feature-settings: "ss02" 1;
    box-sizing: border-box;
}

.aa-page {
    color: var(--aa-text-primary);
    font-size: 16px;
    line-height: 1.4;
}

.aa-page a {
    color: var(--aa-text-brand-primary);
}

/* ---------- Header banner ---------- */

.aa-banner {
    background: var(--aa-bg-banner);
}

.aa-banner__desktop {
    display: block;
    width: 100%;
    aspect-ratio: 1960 / 262;
    object-fit: cover;
}

.aa-banner__mobile {
    display: none;
}

@media (max-width: 767.98px) {
    .aa-banner__desktop {
        display: none;
    }

    .aa-banner__mobile {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    /* The mobile header re-uses crops of the desktop banner image (logos left, illustration right). */
    .aa-banner__crops {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .aa-banner__crop {
        height: 66px;
        background-image: url('../images/adoption/header-banner.png');
        background-repeat: no-repeat;
    }

    .aa-banner__crop--logos {
        width: 132px;
        background-size: 477.7% 127.27%;
        background-position: 0.56% 38.9%;
    }

    .aa-banner__crop--art {
        width: 93px;
        background-size: 528.65% 100%;
        background-position: 99.46% 0;
    }

    .aa-banner__promo {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0 10px 10px 12px;
    }

    .aa-banner__headline {
        width: 144px;
        margin: 0;
        font-size: 16px;
        line-height: 1.4;
        color: var(--aa-text-primary);
    }

    .aa-banner__headline strong {
        line-height: 1.1;
    }

    .aa-banner__cta {
        display: flex;
        flex-direction: column;
        gap: 6px;
        width: 149px;
        padding-bottom: 10px;
    }

    .aa-banner__tagline {
        margin: 0;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.5;
    }
}

/* ---------- Body ---------- */

.aa-main {
    width: 100%;
}

.aa-content {
    max-width: calc(1280px + 2 * var(--aa-gutter));
    margin: 0 auto;
    padding: var(--aa-space-3xl) var(--aa-gutter) var(--aa-space-6xl);
    display: flex;
    flex-direction: column;
    gap: var(--aa-space-3xl);
}

.aa-step {
    display: flex;
    flex-direction: column;
    gap: var(--aa-space-3xl);
}

.aa-heading {
    display: flex;
    flex-direction: column;
    gap: var(--aa-space-sm);
}

.aa-page .aa-title {
    margin: 0 !important;
    color: var(--aa-text-brand-primary);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.48px;
}

.aa-intro {
    margin: 0;
    color: var(--aa-text-primary);
    font-size: 14px;
    line-height: 1.4;
}

/* ---------- Form layout ---------- */

.aa-form {
    display: flex;
    flex-direction: column;
    gap: var(--aa-space-lg);
    padding: var(--aa-space-3xl);
    border-radius: var(--aa-radius-2xl);
}

.aa-stack {
    display: flex;
    flex-direction: column;
    gap: var(--aa-space-lg);
}

.aa-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--aa-space-lg);
    align-items: stretch;
}

.aa-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.aa-full {
    grid-column: 1 / -1;
}

.aa-new-row {
    grid-column-start: 1;
}

@media (max-width: 767.98px) {
    .aa-form {
        padding: 0;
    }

    .aa-grid,
    .aa-grid--3 {
        grid-template-columns: minmax(0, 1fr);
    }
}

.aa-section-title {
    margin: var(--aa-space-xs) 0 0;
    color: var(--aa-text-brand-secondary);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}

.aa-hint {
    margin: 0;
    color: var(--aa-text-secondary);
    font-size: 14px;
    line-height: 1.4;
}

.aa-divider {
    border: 0;
    border-top: 1px solid var(--aa-border-subtle);
    margin: var(--aa-space-xs) 0;
}

/* ---------- Field ---------- */

.aa-field {
    display: flex;
    flex-direction: column;
    gap: var(--aa-space-xs);
    min-width: 0;
}

    /* Keep controls on the same line when a neighbouring label wraps to two lines. */
    .aa-field > .aa-control:last-child,
    .aa-field > .aa-inline:last-child,
    .aa-field > .aa-scale:last-child {
        margin-top: auto;
    }

.aa-page .aa-label {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding-left: var(--aa-space-xs);
    color: var(--aa-text-primary);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

.aa-page .aa-sublabel {
    display: block;
    margin: 0;
    padding-left: var(--aa-space-xs);
    color: var(--aa-text-secondary);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
}

.aa-label--required::after {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    background: url('../images/adoption/required.svg') no-repeat center / contain;
}

.aa-page .aa-control {
    display: block;
    width: 100%;
    height: 40px;
    margin: 0;
    padding: var(--aa-space-xs) var(--aa-space-sm);
    background-color: var(--aa-bg);
    border: 1px solid var(--aa-border-input);
    border-radius: var(--aa-radius-full);
    box-shadow: none;
    color: var(--aa-text-primary);
    font-size: 16px;
    line-height: 1.4;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.aa-page .aa-control::placeholder {
    color: var(--aa-text-placeholder);
    opacity: 1;
}

.aa-page select.aa-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 40px;
    background-image: url('../images/adoption/chevron-down.svg');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px 20px;
    cursor: pointer;
}

.aa-page .aa-control:focus {
    border-color: var(--aa-border-focus);
    box-shadow: 0 0 0 3px rgba(29, 131, 122, 0.18);
}

.aa-page .aa-control:disabled {
    background-color: #fafafa;
    color: var(--aa-text-placeholder);
    cursor: not-allowed;
}

.aa-page .aa-control.hasError {
    border-color: var(--aa-text-error) !important;
}

    .aa-page .aa-control.hasError:focus {
        box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.18) !important;
    }

/* Input + select / input + suffix side by side */
.aa-inline {
    display: flex;
    align-items: center;
    gap: var(--aa-space-sm);
}

    .aa-inline > .aa-control {
        flex: 1 1 0;
        min-width: 0;
    }

    .aa-inline > .aa-control--narrow {
        flex: 0 0 140px;
    }

.aa-suffix {
    flex: 0 0 auto;
    color: var(--aa-text-secondary);
    font-size: 14px;
}

/* ---------- Checkboxes ---------- */

.aa-checks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--aa-space-sm) var(--aa-space-xl);
    padding-left: var(--aa-space-xs);
}

.aa-page .aa-check {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-space-xs);
    margin: 0;
    color: var(--aa-text-primary);
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
}

.aa-page .aa-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--aa-text-brand-primary);
    cursor: pointer;
}

/* ---------- 1-5 rating scale ---------- */

.aa-scale {
    position: relative;
    display: flex;
    gap: var(--aa-space-xs);
    padding-left: var(--aa-space-xs);
}

    .aa-scale input[type="radio"] {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
        pointer-events: none;
    }

.aa-page .aa-scale label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    border: 1px solid var(--aa-border-input);
    border-radius: var(--aa-radius-full);
    background: var(--aa-bg);
    color: var(--aa-text-primary);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

    .aa-page .aa-scale label:hover {
        border-color: var(--aa-border-focus);
    }

.aa-page .aa-scale input[type="radio"]:checked + label {
    background: var(--aa-text-brand-primary);
    border-color: var(--aa-text-brand-primary);
    color: #fff;
}

.aa-page .aa-scale input[type="radio"]:focus-visible + label {
    box-shadow: 0 0 0 3px rgba(29, 131, 122, 0.3);
}

/* ---------- Buttons ---------- */

.aa-page .aa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--aa-space-xs);
    height: 48px;
    margin: 0;
    padding: 0 var(--aa-space-md);
    border: 1px solid transparent;
    border-radius: var(--aa-radius-full);
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

    .aa-page .aa-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(29, 131, 122, 0.3);
    }

.aa-page .aa-btn--primary {
    background: var(--aa-bg-button-primary);
    color: var(--aa-text-brand-secondary);
}

    .aa-page .aa-btn--primary:hover {
        background: var(--aa-bg-button-primary-hover);
    }

.aa-page .aa-btn--secondary {
    background: var(--aa-bg);
    border-color: var(--aa-border-button-secondary);
    color: var(--aa-text-brand-secondary);
}

    .aa-page .aa-btn--secondary:hover {
        background: #f5f6f7;
    }

.aa-page .aa-btn--sm {
    height: 40px;
    font-size: 16px;
    padding: 0 var(--aa-space-xl);
}

.aa-page .aa-btn--xs {
    height: 36px;
    font-size: 12px;
    white-space: normal;
}

.aa-page .aa-link-btn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--aa-text-brand-primary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: underline;
    cursor: pointer;
}

.aa-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--aa-space-3xl);
}

    .aa-actions .aa-btn--secondary {
        grid-column: 1;
    }

    .aa-actions .aa-btn--primary {
        grid-column: 2;
    }

@media (max-width: 767.98px) {
    .aa-actions {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--aa-space-md);
    }

        .aa-actions .aa-btn--secondary,
        .aa-actions .aa-btn--primary {
            grid-column: 1;
        }
}

/* ---------- Tables (shelters, current/previous pets, review) ---------- */

.aa-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--aa-border-input);
    border-radius: var(--aa-radius-2xl);
}

.aa-page .aa-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .aa-page .aa-table th {
        padding: var(--aa-space-sm) var(--aa-space-md);
        background: var(--aa-bg-brand-soft);
        color: var(--aa-text-brand-secondary);
        font-weight: 500;
        text-align: left;
        white-space: nowrap;
    }

    .aa-page .aa-table td {
        padding: var(--aa-space-sm) var(--aa-space-md);
        border-top: 1px solid var(--aa-border-subtle);
        color: var(--aa-text-primary);
    }

/* ---------- Review (step 10) ---------- */

.aa-review {
    display: flex;
    flex-direction: column;
    gap: var(--aa-space-2xl);
}

.aa-review-section {
    display: flex;
    flex-direction: column;
    gap: var(--aa-space-sm);
}

.aa-review-list {
    border: 1px solid var(--aa-border-input);
    border-radius: var(--aa-radius-2xl);
    overflow: hidden;
}

.aa-review-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--aa-space-md);
    padding: var(--aa-space-sm) var(--aa-space-md);
    /* Divider drawn above each row; the list's overflow:hidden clips it on the first visible row. */
    box-shadow: 0 -1px 0 var(--aa-border-subtle);
    font-size: 14px;
}

.aa-review-label {
    color: var(--aa-text-secondary);
    font-weight: 500;
}

.aa-review-value {
    color: var(--aa-text-primary);
    word-break: break-word;
}

@media (max-width: 767.98px) {
    .aa-review-row {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--aa-space-xxs);
    }
}

/* ---------- Footer ---------- */

.aa-footer {
    background: var(--aa-bg-brand-soft);
}

.aa-footer__inner {
    max-width: calc(1280px + 2 * var(--aa-gutter));
    margin: 0 auto;
    padding: var(--aa-space-3xl) var(--aa-gutter);
    display: flex;
    gap: var(--aa-space-3xl);
    align-items: flex-start;
}

.aa-footer__main {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--aa-space-xl);
}

.aa-footer__logo {
    display: block;
    width: 172px;
    height: 32px;
}

.aa-footer__copy {
    margin: 0;
    color: var(--aa-text-secondary);
    font-size: 16px;
}

.aa-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--aa-space-md) var(--aa-space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
}

    .aa-footer__links li {
        margin: 0;
        padding: 0;
        list-style: none;
    }

.aa-page .aa-footer__links a {
    display: inline-block;
    padding: var(--aa-space-xxs) 0;
    color: var(--aa-text-brand-secondary);
    font-size: 16px;
    text-decoration: none;
}

    .aa-page .aa-footer__links a:hover {
        text-decoration: underline;
    }

.aa-footer__social {
    display: flex;
    gap: var(--aa-space-lg);
    align-items: center;
}

    .aa-footer__social img {
        display: block;
        width: 28px;
        height: 28px;
    }

@media (max-width: 767.98px) {
    .aa-footer__inner {
        flex-direction: column;
        gap: var(--aa-space-xl);
    }
}

/* ---------- Done state ---------- */

.aa-done {
    display: flex;
    flex-direction: column;
    gap: var(--aa-space-sm);
}