/* ====================================================
   PLAYER THEME OVERRIDES
   Player-registration-specific tweaks shared by Web and MAUI.
   ==================================================== */

/* Auth forms input visibility — ensures typed text and labels are dark
   even when the host's playerfirst-theme.css is missing these rules. */
.auth-card label,
.auth-card .form-label {
    color: #172033;
}

.auth-card input.form-control,
.auth-card select.form-control,
.auth-card textarea.form-control {
    background-color: #ffffff;
    border: 1px solid #98a2b3;
    color: #172033;
    -webkit-text-fill-color: #172033;
}

.auth-card input.form-control::placeholder,
.auth-card textarea.form-control::placeholder {
    color: #667085;
    -webkit-text-fill-color: #667085;
}

.auth-card select.form-control option {
    background: #ffffff;
    color: #172033;
}

.auth-card input.form-control:focus,
.auth-card select.form-control:focus,
.auth-card textarea.form-control:focus {
    border-color: #e30613;
    box-shadow: 0 0 0 3px rgba(227, 6, 19, .12);
}

/* --- Achievements step: larger cards and inputs --- */
.achievement-card {
    grid-template-columns: 48px 1fr 40px;
    align-items: stretch;
    min-height: 92px;
    padding: 1rem;
    gap: 1rem;
}

.achievement-icon {
    align-self: center;
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
}

.achievement-body {
    gap: 0.5rem;
    justify-content: center;
}

.achievement-title,
.achievement-detail {
    font-size: 1rem;
    padding: 0.45rem 0;
    min-height: 2.4rem;
    line-height: 1.4;
}

.achievement-remove {
    align-self: center;
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
}

/* --- Player dashboard navigation --- */
.role-player {
    --role-color: var(--pf-player-red, #C41E3A);
    --role-tint: #fee2e2;
}

.role-player .btn-primary,
.role-player .btn-player {
    --bs-btn-bg: var(--pf-player-red, #C41E3A);
    --bs-btn-border-color: var(--pf-player-red, #C41E3A);
    --bs-btn-hover-bg: var(--pf-player-red-dark, #A01830);
    --bs-btn-hover-border-color: var(--pf-player-red-dark, #A01830);
    --bs-btn-active-bg: var(--pf-player-red-dark, #A01830);
    --bs-btn-active-border-color: var(--pf-player-red-dark, #A01830);
    --bs-btn-disabled-bg: var(--pf-player-red, #C41E3A);
    --bs-btn-disabled-border-color: var(--pf-player-red, #C41E3A);
    background-color: var(--pf-player-red, #C41E3A);
    border-color: var(--pf-player-red, #C41E3A);
    color: #ffffff;
}

.role-player .btn-primary:hover:not(:disabled),
.role-player .btn-primary:focus:not(:disabled),
.role-player .btn-primary:active:not(:disabled),
.role-player .btn-player:hover:not(:disabled),
.role-player .btn-player:focus:not(:disabled),
.role-player .btn-player:active:not(:disabled) {
    background-color: var(--pf-player-red-dark, #A01830);
    border-color: var(--pf-player-red-dark, #A01830);
    color: #ffffff;
}

.role-player .dashboard-mobile-nav a.active,
.role-player .dashboard-mobile-nav button.active {
    color: var(--role-color);
    font-weight: 700;
}

.role-player .dashboard-mobile-nav a.active span:first-child img,
.role-player .dashboard-mobile-nav button.active span:first-child img {
    opacity: 1;
}

/* Dashboard avatar fallback and notification bell */
.dashboard-topbar-avatar .avatar-fallback,
.dashboard-profile-avatar .avatar-fallback {
    align-items: center;
    display: inline-flex;
    height: 100%;
    justify-content: center;
    width: 100%;
}

.dashboard-topbar-avatar .avatar-fallback {
    font-size: 1.25rem;
}

.dashboard-profile-avatar .avatar-fallback {
    font-size: 1.75rem;
}

.dashboard-bell {
    color: #172033;
    font-size: 1.4rem;
    position: relative;
}

.dashboard-bell .bi-bell {
    display: block;
    font-size: 1.4rem;
}

/* Registration journeys fill the usable viewport. The page itself stays fixed;
   only an over-height card scrolls, so short forms do not produce empty-page scroll. */
.registration-container,
.auth-container,
.v2-shell,
.journey-shell {
    box-sizing: border-box !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    width: 100% !important;
    overflow: hidden !important;
}

.registration-container {
    align-items: stretch !important;
    padding: clamp(.75rem, 2.5vw, 1.5rem) !important;
}

.registration-container > .registration-card,
.registration-container > .club-registration-card,
.registration-container > .parent-registration-card,
.registration-container > .admin-registration-card {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.registration-card > form,
.club-registration-card > form,
.parent-registration-card > form,
.admin-registration-card > form {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}

.registration-card .form-actions,
.club-registration-card .form-actions,
.parent-registration-card .form-actions,
.admin-registration-card .form-actions {
    margin-top: auto !important;
    padding-top: 1.5rem;
}

.v2-shell,
.journey-shell {
    padding: clamp(.75rem, 2.5vw, 1.75rem) !important;
}

.v2-shell > .v2-card,
.journey-shell > .journey-card {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
}

.pf-choice-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: .65rem;
}

.pf-choice-pill {
    appearance: none;
    background: #fff;
    border: 2px solid #d7dee8;
    border-radius: 999px;
    color: #26354d;
    cursor: pointer;
    font-size: .9rem;
    font-weight: 650;
    line-height: 1.2;
    min-height: 42px;
    padding: .65rem 1rem;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.pf-choice-pill:hover,
.pf-choice-pill:focus-visible {
    border-color: #cf1738;
    box-shadow: 0 0 0 3px rgba(207, 23, 56, .12);
    outline: none;
}

.pf-choice-pill.selected {
    background: #cf1738;
    border-color: #cf1738;
    color: #fff;
}

@media (max-width: 520px) {
    .registration-container,
    .auth-container,
    .v2-shell,
    .journey-shell {
        padding: 0 !important;
    }

    .registration-container > .registration-card,
    .registration-container > .club-registration-card,
    .registration-container > .parent-registration-card,
    .registration-container > .admin-registration-card,
    .v2-shell > .v2-card,
    .journey-shell > .journey-card {
        border-radius: 0 !important;
        max-width: none !important;
        width: 100% !important;
        padding-bottom: max(1.5rem, env(safe-area-inset-bottom)) !important;
    }

    .pf-choice-pills {
        gap: .5rem;
    }

    .pf-choice-pill {
        min-height: 40px;
        padding: .58rem .85rem;
    }
}

@media (orientation: landscape) and (max-height: 600px) {
    .registration-container,
    .auth-container,
    .v2-shell,
    .journey-shell {
        height: 100dvh !important;
        min-height: 100dvh !important;
    }
}