/* OKDHS Holiday Hope — Global Styles
   Palette aligned with Oklahoma Visual Identity (Sky / Water Blue). */
:root {
    --okdhs-blue: #004D99;          /* OKDHS site blue (sampled from oklahoma.gov/okdhs) */
    --okdhs-blue-dark: #003A75;
    --okdhs-blue-light: #187BC0;    /* Water Blue Bright */
    --okdhs-gold: #004D99;
    --okdhs-gold-light: #1CA6DF;    /* Sky Blue Bright accent */
    --okdhs-green: #3A6B2A;
    --okdhs-white: #FFFFFF;
    --okdhs-gray-light: #FFFFFF;
    --okdhs-gray: #D8DDE2;
    --okdhs-text: #1A1A1A;
    --okdhs-text-muted: #5C6670;
    --okdhs-slate: #464646;         /* Global footer bar */
    --hero-gradient: #004D99;
    --page-atmosphere: none;
    --card-shadow: 0 2px 14px rgba(0, 77, 153, 0.10);
    --card-hover-shadow: 0 8px 32px rgba(0, 77, 153, 0.16);
    /* Primary content width for header, form shell, and .page-container pages */
    --app-content-max: 1440px;
    --base-font-size: 18px;
}

html, body {
    font-family: 'Nunito', 'Montserrat', Georgia, 'Times New Roman', serif;
    background-color: #FFFFFF;
    background-image: none;
    color: var(--okdhs-text);
    margin: 0;
    padding: 0;
    font-size: var(--base-font-size);
}

/* Hero Section */
.hero-section {
    background: var(--hero-gradient);
    color: white;
    padding: 80px 24px 100px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 60%);
    pointer-events: none;
}

.hero-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.hero-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.3rem);
    opacity: 0.92;
    max-width: 680px;
    margin: 0 auto 36px;
    line-height: 1.6;
    font-weight: 300;
}

.hero-badge {
    display: inline-block;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 100px;
    padding: 6px 20px;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    margin-bottom: 24px;
    backdrop-filter: blur(4px);
}

/* Stats Strip */
.stats-strip {
    background: white;
    border-bottom: 1px solid var(--okdhs-gray);
    padding: 0;
}

.stat-item {
    text-align: center;
    padding: 28px 16px;
    border-right: 1px solid var(--okdhs-gray);
}

.stat-item:last-child {
    border-right: none;
}

.stat-number {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--okdhs-blue);
    line-height: 1;
    display: block;
}

.stat-label {
    font-size: 0.82rem;
    color: var(--okdhs-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 6px;
    font-weight: 500;
}

/* Child Cards */
.child-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    height: 100%;
}

.child-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-hover-shadow) !important;
}

.child-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

.avatar-boy {
    background: linear-gradient(135deg, var(--okdhs-blue-dark), var(--okdhs-blue-light));
}

.avatar-girl {
    background: linear-gradient(135deg, var(--okdhs-gold), var(--okdhs-gold-light));
}

.wish-item-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--okdhs-gray-light);
    border: 1px solid var(--okdhs-gray);
    border-radius: 100px;
    padding: 4px 12px;
    font-size: 0.8rem;
    color: var(--okdhs-text);
    margin: 3px;
}

.sponsored-overlay {
    background: rgba(200, 150, 12, 0.08);
    border: 1px solid rgba(200, 150, 12, 0.3);
}

/* Steps Section */
.steps-section {
    background: white;
    padding: 64px 0;
}

.step-card {
    text-align: center;
    padding: 32px 24px;
}

.step-number {
    width: 56px;
    height: 56px;
    background: var(--hero-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
}

.step-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--okdhs-blue-dark);
    margin-bottom: 12px;
}

.step-desc {
    color: var(--okdhs-text-muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

/* Page sections */
.section-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--okdhs-blue-dark);
    margin-bottom: 8px;
}

.section-subtitle {
    color: var(--okdhs-text-muted);
    font-size: 1rem;
    margin-bottom: 32px;
}

/* Filter bar */
.filter-bar {
    background: white;
    border-bottom: 1px solid var(--okdhs-gray);
    padding: 16px 0;
    position: sticky;
    top: 64px;
    z-index: 10;
}

/* CTA Section */
.cta-section {
    background: var(--hero-gradient);
    color: white;
    padding: 64px 24px;
    text-align: center;
}

/* Interest tags */
.interest-tag {
    display: inline-block;
    background: rgba(0, 77, 153, 0.08);
    color: var(--okdhs-blue);
    border-radius: 100px;
    padding: 3px 12px;
    font-size: 0.8rem;
    font-weight: 500;
    margin: 2px;
    border: 1px solid rgba(0, 77, 153, 0.18);
}

/* Form pages */
.form-page-header {
    background: var(--hero-gradient);
    color: white;
    padding: 48px 24px 64px;
    text-align: center;
}

/* Footer */
.app-footer {
    background: var(--okdhs-blue-dark);
    color: rgba(255,255,255,0.85);
    padding: 40px 0 20px;
    margin-top: auto;
}

.footer-link {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.footer-link:hover {
    color: white;
}

/* Responsive utilities */
.page-container {
    max-width: var(--app-content-max);
    margin: 0 auto;
    padding: 0 16px;
}

@media (max-width: 768px) {
    .hero-section {
        padding: 56px 16px 72px;
    }
    .stat-item {
        border-right: none;
        border-bottom: 1px solid var(--okdhs-gray);
        padding: 20px 8px;
    }
    .bean-header-inner {
        padding: 12px 16px;
        min-height: 88px;
    }
    .bean-logo-image {
        height: 68px;
    }
}

/* MudBlazor overrides */
.mud-appbar {
    background-color: var(--okdhs-blue) !important;
}

.mud-chip.mud-chip-color-success {
    background-color: #16A34A !important;
}

.mud-chip.mud-chip-color-warning {
    background-color: var(--okdhs-gold) !important;
}

/* Holiday Hope shell — white banner strip over page content */
.bean-app {
    min-height: 100vh;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
}

.bean-header {
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    background: var(--okdhs-white);
    border-bottom: 1px solid rgba(0, 77, 153, 0.18);
    box-shadow: 0 1px 0 rgba(0, 77, 153, 0.06);
}

.bean-header-inner {
    max-width: var(--app-content-max);
    width: 100%;
    margin: 0 auto;
    padding: 14px 28px;
    min-height: 112px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: transparent;
    box-sizing: border-box;
}

.bean-logo-image {
    display: block;
    width: auto;
    height: 92px;
    max-width: min(560px, 100%);
    max-height: 100%;
    object-fit: contain;
    object-position: left center;
}

.bean-main {
    flex: 1;
    background: #FFFFFF;
}

/* Oklahoma.gov–style global header strip */
.okdhs-global-header {
    width: 100%;
    background: var(--okdhs-blue);
    color: var(--okdhs-white);
}

.okdhs-global-header-inner {
    max-width: var(--app-content-max);
    margin: 0 auto;
    padding: 0 28px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-sizing: border-box;
}

.okdhs-global-header-brand {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    text-decoration: none;
}

.okdhs-global-header-logo {
    display: block;
    height: 28px;
    width: 28px;
}

.okdhs-global-header-brand:hover .okdhs-global-header-logo,
.okdhs-global-header-brand:focus .okdhs-global-header-logo {
    opacity: 0.9;
}

.okdhs-global-header-link {
    color: var(--okdhs-white);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.okdhs-global-header-link:hover,
.okdhs-global-header-link:focus {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Agency footer (blue) — OKDHS-style */
.okdhs-agency-footer {
    width: 100%;
    background: var(--okdhs-blue);
    color: var(--okdhs-white);
    margin-top: auto;
    position: relative;
}

.okdhs-agency-footer-inner {
    max-width: var(--app-content-max);
    margin: 0 auto;
    padding: 44px 28px 40px;
    display: grid;
    grid-template-columns: minmax(220px, 300px) 1px minmax(0, 1fr);
    gap: 36px 40px;
    align-items: start;
    box-sizing: border-box;
}

.okdhs-agency-footer-brand {
    min-width: 0;
}

.okdhs-agency-footer-logo-link {
    display: inline-block;
    line-height: 0;
    margin-bottom: 18px;
}

.okdhs-agency-footer-logo {
    display: block;
    height: 58px;
    width: auto;
    max-width: min(280px, 100%);
    object-fit: contain;
}

.okdhs-agency-footer-address {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--okdhs-white);
    font-weight: 400;
}

.okdhs-agency-footer-divider {
    width: 1px;
    align-self: stretch;
    background: rgba(255, 255, 255, 0.85);
    min-height: 140px;
}

.okdhs-agency-footer-right {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    min-width: 0;
    padding-top: 4px;
    padding-right: 110px;
}

.okdhs-back-to-top {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--okdhs-white);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
}

.okdhs-back-to-top:hover,
.okdhs-back-to-top:focus {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.okdhs-back-to-top-icon {
    font-size: 0.85rem;
    line-height: 1;
    transform: translateY(-1px);
}

.okdhs-agency-footer-nav {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

.okdhs-agency-footer-nav-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
}

.okdhs-agency-footer-link {
    color: var(--okdhs-white);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
}

.okdhs-agency-footer-link:hover,
.okdhs-agency-footer-link:focus {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.okdhs-agency-footer-social {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 4px;
}

.okdhs-agency-footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--okdhs-white);
    color: var(--okdhs-blue);
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.okdhs-agency-footer-social-link svg {
    width: 18px;
    height: 18px;
}

.okdhs-agency-footer-social-link:hover,
.okdhs-agency-footer-social-link:focus {
    opacity: 0.88;
}

/* Global footer (slate) */
.okdhs-global-footer {
    width: 100%;
    background: var(--okdhs-slate);
    color: rgba(255, 255, 255, 0.85);
}

.okdhs-global-footer-inner {
    max-width: var(--app-content-max);
    margin: 0 auto;
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.okdhs-global-footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}

.okdhs-global-footer-link {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.8rem;
}

.okdhs-global-footer-link:hover,
.okdhs-global-footer-link:focus {
    color: var(--okdhs-white);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.okdhs-global-footer-copy {
    margin: 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 768px) {
    .okdhs-global-header-inner {
        padding: 0 16px;
        min-height: 40px;
    }

    .okdhs-agency-footer-inner {
        padding: 28px 16px 32px;
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .okdhs-agency-footer-divider {
        display: none;
    }

    .okdhs-agency-footer-right {
        align-items: flex-start;
        width: 100%;
        padding-right: 0;
        padding-top: 28px;
    }

    .okdhs-agency-footer-nav-row {
        gap: 10px 16px;
    }

    .okdhs-agency-footer-logo {
        height: 48px;
    }

    .okdhs-global-footer-inner {
        padding: 14px 16px;
        flex-direction: column;
        align-items: flex-start;
    }
}

.wishlist-shell {
    max-width: var(--app-content-max);
    margin: 0 auto;
    padding: 75px 120px 56px;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    background: #FFFFFF;
}

/* After submit: full-width page tone + confirmation card (matches BE A NEIGHBOR confirmation mock) */
.wishlist-shell--submission-result {
    max-width: 100%;
    width: 100%;
    background: #FFFFFF;
    margin: 0;
    padding: 32px 24px 64px;
    min-height: calc(100vh - 112px);
    box-sizing: border-box;
    min-width: 0;
    overflow-x: hidden;
}

.wishlist-confirmation {
    max-width: var(--app-content-max);
    margin: 0 auto;
}

.wishlist-confirmation-card {
    background: #ffffff;
    border-radius: 0;
    border: 1px solid #d8dde2;
}

.wishlist-confirmation-inner {
    padding: 28px 32px 32px;
}

.wishlist-confirmation-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.wishlist-confirmation-icon {
    font-size: 1.75rem;
    width: 1.75rem;
    height: 1.75rem;
}

.wishlist-confirmation-icon--success {
    color: #2e7d32;
}

.wishlist-confirmation-icon--error {
    color: #c23934;
}

.wishlist-confirmation .wishlist-confirmation-heading {
    font-size: 1.4rem;
    line-height: 1.2;
    font-weight: 700;
    color: #202020;
    margin: 0;
    flex: 1;
    min-width: 0;
}

.wishlist-confirmation-body {
    margin: 0 0 0;
    color: #1f2933;
    font-size: 0.95rem;
    line-height: 1.5;
    max-width: 52em;
}

.wishlist-confirmation-request-ids {
    margin-top: 20px;
    padding: 14px 16px;
    background: #f5f7f9;
    border: 1px solid #d8dde2;
}

.wishlist-confirmation-request-ids-heading {
    margin: 0 0 8px;
    font-weight: 700;
    font-size: 0.95rem;
    color: #1f2933;
}

.wishlist-confirmation-request-id-list {
    margin: 0;
    padding-left: 1.25rem;
    color: #1f2933;
    font-size: 0.95rem;
    line-height: 1.6;
}

.wishlist-confirmation-child-name {
    font-weight: 600;
}

.wishlist-confirmation-request-id-sep {
    margin: 0 0.35rem;
    color: #6b7280;
}

.wishlist-confirmation-request-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.92em;
    background: #ffffff;
    border: 1px solid #d8dde2;
    padding: 0.1em 0.4em;
    border-radius: 2px;
    user-select: all;
}

.wishlist-confirmation-request-ids-hint {
    margin: 10px 0 0;
    font-size: 0.875rem;
    color: #4b5563;
}

.wishlist-confirmation .mud-button-root {
    margin-top: 20px;
    text-transform: none;
    font-weight: 600;
}

a.wishlist-confirmation-mail {
    color: var(--okdhs-blue);
    text-decoration: underline;
    text-underline-offset: 1px;
}

a.wishlist-confirmation-mail:hover,
a.wishlist-confirmation-mail:focus {
    color: var(--okdhs-blue-dark);
}

.wishlist-intro h1 {
    font-size: 1.6rem;
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 8px;
    color: #202020;
}

.wishlist-intro p {
    max-width: 100%;
    margin: 0;
    color: #1f2933;
    font-size: 0.9rem;
    line-height: 1.4;
}

.wishlist-workspace {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 28px;
    margin-top: 34px;
    align-items: start;
    min-width: 0;
}

.wishlist-stepper {
    border-right: 1px solid #d9d9d9;
    padding: 0 16px 0 4px;
    display: flex;
    flex-direction: column;
}

.wishlist-step {
    position: relative;
    display: grid;
    grid-template-columns: 22px 1fr;
    align-items: start;
    column-gap: 12px;
    width: 100%;
    padding: 4px 0 28px;
    border: 0;
    background: transparent;
    color: #4f5b66;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.wishlist-step:last-child {
    padding-bottom: 4px;
}

.wishlist-step[disabled] {
    cursor: not-allowed;
}

.wishlist-step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 10px;
    top: 24px;
    bottom: 6px;
    width: 1px;
    background: #cfd6dd;
}

.wishlist-step-marker {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 999px;
    z-index: 1;
    flex: 0 0 auto;
}

.wishlist-step-dot {
    width: 15px;
    height: 15px;
    border: 2px solid #cfd6dd;
    border-radius: 999px;
    background: #fff;
    display: block;
    box-sizing: border-box;
}

.wishlist-step.active .wishlist-step-dot {
    border-color: var(--okdhs-blue);
    background: var(--okdhs-blue);
}

.wishlist-step.complete .wishlist-step-dot {
    border-color: #7d8790;
    background: #ffffff;
    position: relative;
}

.wishlist-step.complete .wishlist-step-dot::after {
    content: "✓";
    position: absolute;
    inset: 0;
    color: #5f8d4e;
    font-size: 0.7rem;
    line-height: 11px;
    text-align: center;
    font-weight: 700;
}

.wishlist-step-lock {
    font-size: 16px;
    color: #98a2ad;
    line-height: 1;
}

.wishlist-step.locked {
    color: #98a2ad;
}

.wishlist-step.locked strong {
    color: #98a2ad;
    font-weight: 500;
}

.wishlist-step-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding-top: 1px;
}

.wishlist-step strong {
    display: block;
    color: #2b2f33;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.25;
    word-break: break-word;
}

.wishlist-step small {
    display: block;
    color: #7a8691;
    font-size: 0.8rem;
    line-height: 1.35;
}

.wishlist-form-card {
    /* Dense single-line fields + MudSelect: lock so placeholder vs. selected value are same height */
    --wishlist-control-height: 30px;
    /* Match Mud outlined dense + wishlist 0.9rem text; keep select/text fields aligned */
    --wishlist-control-line: 1.25;
    border: 1px solid #d8dde2;
    border-radius: 0;
    background: #ffffff;
    min-width: 0; /* allow grid child to shrink on small screens */
}

.wishlist-form-header {
    background: #FFFFFF;
    border-bottom: 1px solid #d8dde2;
    padding: 14px 16px;
}

.wishlist-form-header h2 {
    margin: 0;
    color: #222;
    font-size: 1.125rem;
    font-weight: 500;
}

.wishlist-form-body {
    padding: 20px 28px 24px;
}

.submitter-certify-checkbox {
    margin-top: 1rem;
    max-width: 100%;
    align-items: flex-start;
}

.submitter-certify-checkbox .mud-typography {
    color: #1f2933;
    line-height: 1.4;
}

.wishlist-submit-chevron {
    font-weight: 600;
    text-transform: none;
    min-width: 6.5rem;
    padding: 0 1rem 0 0.75rem;
}

.field-label {
    display: block;
    margin: 0 0 2px;
    color: #5c6570;
    font-size: 0.8rem;
    line-height: 1.3;
}

.field-label.required::before {
    content: "*";
    color: #c23934;
    margin-right: 1px;
}

.wishlist-help-text {
    margin: 8px 0 14px;
    color: #111827;
    font-size: 0.88rem;
    line-height: 1.35;
    font-weight: 700;
}

.wishlist-copy {
    margin: 2px 0 14px;
    color: #1f2933;
    font-size: 0.95rem;
    line-height: 1.4;
}

.form-section-title {
    margin: 12px 0 4px;
    color: #333;
    font-size: 0.95rem;
    font-weight: 700;
}

.same-address-checkbox {
    margin: 0 0 4px -4px;
}

.same-address-checkbox .mud-typography {
    color: #5c6570;
    font-size: 0.8rem;
}

.field-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    margin-left: 4px;
    border-radius: 999px;
    background: #7a7f85;
    color: #ffffff;
    font-size: 0.6rem;
    font-weight: 700;
    cursor: help;
}

.field-info-tooltip {
    max-width: 280px;
    white-space: normal;
}

.wishlist-child-section--additional {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #d8dde2;
}

.additional-child-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.additional-child-title {
    margin: 0;
    color: #202020;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.25;
}

.discard-child-button {
    text-transform: none !important;
    font-weight: 600 !important;
    border-color: #2f9aad !important;
    color: #2f9aad !important;
}

.add-child-button {
    margin-top: 18px;
    border-color: #2f9aad !important;
    color: #2f9aad !important;
    font-weight: 600 !important;
    text-transform: none !important;
}

.wishlist-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 0;
    padding: 22px 30px 0;
    background: #ffffff;
}

/* Flex grow between Prev and Next/Submit (replaces MudSpacer: no [Class] parameter in this Mud version) */
.wishlist-action-spacer {
    flex: 1 1 auto;
    min-width: 0;
    align-self: stretch;
    height: auto;
}

.wishlist-action-divider {
    width: 1px;
    height: 46px;
    background: #d8dde2;
    display: inline-block;
}

.wishlist-form-card .mud-input-root,
.wishlist-form-card .mud-input-control,
.wishlist-form-card .mud-input-label {
    font-size: 0.9rem;
}

/* Selects, pickers, and other controls */
.wishlist-form-card .mud-select .mud-input-root,
.wishlist-form-card .mud-picker .mud-input-root,
.wishlist-form-card .mud-numeric-field .mud-input-root {
    font-size: 0.9rem;
}

/* Placeholder and single-line value share one line box; multiline (textarea) excluded below */
.wishlist-form-card .mud-input:not(:has(textarea)) > .mud-input-slot,
.wishlist-form-card .mud-text-field:not(:has(textarea)) .mud-input-slot {
    min-height: 30px;
}

.wishlist-form-card .mud-text-field:not(:has(textarea)) .mud-input > input.mud-input-root-outlined,
.wishlist-form-card .mud-text-field:not(:has(textarea)) .mud-input-slot.mud-input-root-outlined,
.wishlist-form-card .mud-input:not(:has(textarea)) > .mud-input-slot.mud-input-root-outlined,
.wishlist-form-card .mud-input:not(:has(textarea)) > .mud-input-slot.mud-input-root,
.wishlist-form-card .mud-text-field:not(:has(textarea)) .mud-input .mud-input-slot {
    padding-top: 0;
    padding-bottom: 0;
}

/* Outlined + dense: Mud uses padding-top/bottom: 10.5px on the slot; must clear it on selects so 40px row + flex centring works */
.wishlist-form-card .mud-select .mud-input.mud-input-outlined > .mud-input-slot.mud-input-root-outlined.mud-input-root-margin-dense,
.wishlist-form-card .mud-select .mud-input.mud-input-outlined > .mud-input-slot.mud-input-root.mud-input-root-outlined.mud-input-root-margin-dense {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Single-line: one shared input height (text, date, time, numeric, select — MudSelect not taller than peers) */
.wishlist-form-card .mud-text-field:not(:has(textarea)) .mud-input.mud-input-outlined,
.wishlist-form-card .mud-date-picker .mud-input.mud-input-outlined,
.wishlist-form-card .mud-time-picker .mud-input.mud-input-outlined,
.wishlist-form-card .mud-numeric-field .mud-input.mud-input-outlined,
.wishlist-form-card .mud-select .mud-input.mud-input-outlined {
    box-sizing: border-box;
    min-height: var(--wishlist-control-height) !important;
    max-height: var(--wishlist-control-height) !important;
    height: var(--wishlist-control-height) !important;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden;
}

/* MudSelect: stay left-aligned and full width of the column (avoid flex "centering" the field). */
.wishlist-form-card .mud-select {
    min-height: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: flex-start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    text-align: start;
}

.wishlist-form-card .mud-select .mud-input-control,
.wishlist-form-card .mud-select .mud-input,
.wishlist-form-card .mud-select .mud-input.mud-input-outlined,
.wishlist-form-card .mud-select .mud-input.mud-select-input {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
}

/* Column stack inside the control: stretch the actual field to the full row width. */
.wishlist-form-card .mud-select .mud-input-control {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-content: flex-start;
    justify-content: flex-start;
}

/* End icons default to ~48px; keep all outlined rows visually the same 40px band. */
.wishlist-form-card .mud-input.mud-input-outlined .mud-end-adornment,
.wishlist-form-card .mud-input.mud-input-outlined .mud-input-adornment-end,
.wishlist-form-card .mud-text-field:not(:has(textarea)) .mud-input .mud-end-adornment,
.wishlist-form-card .mud-text-field:not(:has(textarea)) .mud-input .mud-input-adornment-end,
.wishlist-form-card .mud-date-picker .mud-end-adornment,
.wishlist-form-card .mud-time-picker .mud-end-adornment,
.wishlist-form-card .mud-numeric-field .mud-end-adornment {
    min-height: 0;
    max-height: 100%;
    display: flex;
    align-items: center;
    align-self: center;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    flex: 0 0 auto;
}

.wishlist-form-card .mud-input.mud-input-outlined .mud-icon-button,
.wishlist-form-card .mud-text-field:not(:has(textarea)) .mud-input .mud-icon-button,
.wishlist-form-card .mud-date-picker .mud-icon-button,
.wishlist-form-card .mud-time-picker .mud-icon-button,
.wishlist-form-card .mud-numeric-field .mud-icon-button,
.wishlist-form-card .mud-select .mud-icon-button {
    --mud-icon-size: 1.125rem;
    width: 1.75rem;
    min-width: 1.75rem;
    max-width: 1.75rem;
    height: 1.75rem;
    min-height: 1.75rem;
    max-height: 1.75rem;
    padding: 0.2rem;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0;
}

/* Mobile tweaks: preserve the same alignment and padding on small screens */
@media (max-width: 760px) {
    .wishlist-form-card .mud-select .mud-input-slot,
    .wishlist-form-card .mud-text-field .mud-input-slot {
        padding: 0 10px !important;
    }
}

/* Invitation landing — Invitation Code: increased height + cleanup */
.invitation-landing {
    padding: 36px 0 48px;
    --invitation-control-height: 35px; /* changed from 48px */
}

.invitation-landing .invitation-title {
    margin: 0 0 24px;
}

.invitation-landing .invitation-description {
    margin: 0 0 28px;
    line-height: 1.2;
}

.invitation-landing .invitation-prompt {
    margin: 0 0 20px;
    line-height: 1.5;
}

.invitation-landing .invitation-field {
    margin-bottom: 22px;
    max-width: 220px;
    width: 100%;
    box-sizing: border-box;
}

.invitation-landing .invitation-field .invitation-code-input {
    width: 100%;
    box-sizing: border-box;
    font-size: 0.9rem; /* match .wishlist-form-card controls */
}

/* Match single-line outlined control sizing and vertical centering */
.invitation-landing .invitation-field .invitation-code-input .mud-input.mud-input-outlined,
.invitation-landing .invitation-field .invitation-code-input .mud-text-field .mud-input.mud-input-outlined {
    box-sizing: border-box;
    height: var(--invitation-control-height);
    min-height: var(--invitation-control-height);
    display: flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
}

/* Ensure the input slot and native input fill the row and use the same font-size */
.invitation-landing .invitation-field .invitation-code-input .mud-input-slot,
.invitation-landing .invitation-field .invitation-code-input input.mud-input-root,
.invitation-landing .invitation-field .invitation-code-input input.mud-input-root-outlined {
    width: 100%;
    box-sizing: border-box;
    font-size: 0.9rem;
    padding-top: 0;
    padding-bottom: 0;
}

/* End icons / adornments sizing */
.invitation-landing .invitation-field .invitation-code-input .mud-end-adornment,
.invitation-landing .invitation-field .invitation-code-input .mud-input-adornment-end,
.invitation-landing .invitation-field .invitation-code-input .mud-icon-button {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    --mud-icon-size: 1.125rem;
    width: 1.75rem;
    height: 1.75rem;
}

.invitation-landing .invitation-submit-btn {
    margin-top: 10px;
}

/* Invitation error — display message text in red */
.invitation-error {
    color: #c23934; /* error red used elsewhere in the stylesheet */
}

/* Keep selected value in MudSelect vertically centered (no other styles changed) */
.wishlist-form-card .mud-select .mud-input.mud-input-outlined .mud-select-input,
.wishlist-form-card .mud-select .mud-input.mud-input-outlined .mud-select-value {
    display: inline-flex !important;
    align-items: center !important;
    height: 100% !important;
    line-height: 1 !important;
}