/* ==========================================================================
   Public website header
   ========================================================================== */

/**
 * Public website header wrapper.
 */
.public-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    width: 100%;
    background-color: var(--sak-page-background);
    border-bottom: 1px solid #EBCFCA;
    ;
}

/**
 * Remove Bootstrap navbar spacing so the header height can be controlled here.
 */
.public-navbar {
    min-height: 90px;
    padding: 0;
    background-color: var(--sak-page-background);
    box-shadow: 0 2px 10px rgba(35, 35, 35, 0.1);
}

/**
 * Main header content container.
 */
.public-navbar__container {
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

/**
 * Logo image.
 */
.public-navbar__logo {
    display: block;
    width: auto;
    max-width: 290px;
    max-height: 90px;
    object-fit: contain;
}

/**
 * Right-side actions.
 */
.public-navbar__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
}

/**
 * Login button.
 */
.public-navbar__login {
    min-width: 95px;
    min-height: 35px;
    padding: 8px 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sak-primary);
    border-radius: 10px;
    background-color: transparent;
    color: var(--sak-primary);
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.public-navbar__login:hover,
.public-navbar__login:focus {
    border-color: var(--sak-primary);
    background-color: var(--sak-primary);
    color: var(--sak-white);
    box-shadow: 0 5px 15px rgba(174, 21, 54, 0.18);
}

.public-navbar__login:focus-visible {
    outline: 3px solid rgba(174, 21, 54, 0.2);
    outline-offset: 2px;
}

/**
 * Phone contact link.
 */
.public-navbar__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--sak-text-primary);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.public-navbar__phone:hover,
.public-navbar__phone:focus {
    color: var(--sak-primary);
}

/**
 * Circular phone icon, replacing the help icon from the reference.
 */
.public-navbar__phone-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 1rem;
    line-height: 1;
}

/* ==========================================================================
   Responsive header
   ========================================================================== */

@media (max-width: 991.98px) {
    .public-navbar {
        min-height: auto;
        padding: 14px 0;
    }

    /*
     * Existing public/login header can still use two rows where needed.
     */
    .public-navbar__container {
        min-height: auto;
        flex-direction: column;
        justify-content: center;
        gap: 18px;
    }

    .public-navbar__actions {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px 18px;
    }

    /*
     * Authenticated header must remain one row:
     * logo on the left and account control on the right.
     */
    .public-navbar__container--authenticated {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
    }

    .public-navbar__actions--authenticated {
        width: auto;
        flex: 0 0 auto;
        flex-wrap: nowrap;
        justify-content: flex-end;
        margin-left: auto;
    }

    /*
     * Shorten the logo enough to leave space for the account icon.
     */
    .public-navbar__container--authenticated .public-navbar__logo {
        max-width: 240px;
        max-height: 58px;
    }
}

@media (max-width: 575.98px) {
    .public-navbar {
        padding: 10px 0;
    }

    .public-navbar__container {
        gap: 15px;
    }

    /*
     * General public header logo.
     */
    .public-navbar__logo {
        max-width: 210px;
        max-height: 62px;
    }

    .public-navbar__actions {
        width: 100%;
        gap: 12px;
    }

    /*
     * Override public header behaviour for logged-in users.
     */
    .public-navbar__container--authenticated {
        width: 100%;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }

    .public-navbar__container--authenticated .navbar-brand {
        min-width: 0;
        flex: 1 1 auto;
        overflow: hidden;
    }

    .public-navbar__container--authenticated .public-navbar__logo {
        max-width: 175px;
        max-height: 48px;
    }

    .public-navbar__actions--authenticated {
        width: auto;
        flex: 0 0 auto;
        margin-left: auto;
        gap: 0;
    }

    .public-navbar__login {
        min-width: 108px;
        min-height: 38px;
        padding: 7px 18px;
        font-size: 0.9rem;
    }

    .public-navbar__phone {
        gap: 5px;
        font-size: 0.75rem;
        line-height: 1;
    }

    .public-navbar__phone-icon {
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
        font-size: 0.8rem;
    }
}

@media (max-width: 374.98px) {
    .public-navbar__container--authenticated .public-navbar__logo {
        max-width: 145px;
        max-height: 44px;
    }
}

/* ==========================================================================
   Homepage registration section
   ========================================================================== */
/**
 * Main homepage registration area.
 */
.home-registration-section {
    min-height: 600px;
    padding: 35px 0 35px;
    background-color: var(--sak-section-background-green);
}

.home-registration-section__row {
    min-height: 510px;
}

/* ==========================================================================
   Registration card
   ========================================================================== */

.registration-card {
    width: 100%;
    max-width: 540px;
    margin-left: auto;
    border-radius: 26px;
    background-color: var(--sak-card-background);
    box-shadow:
        0 24px 45px rgba(35, 35, 35, 0.22),
        0 8px 18px rgba(35, 35, 35, 0.12);
}

/**
 * Coloured top portion of the registration card.
 */
.registration-card__header {
    min-height: 80px;
    padding: 10px 30px 34px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    border-radius: 26px 26px 0 0;
    background-color: var(--sak-primary);
}

/**
 * White body overlaps the coloured header.
 */
.registration-card__body {
    position: relative;
    margin-top: -24px;
    padding: 22px 42px 38px;
    border-radius: 26px;
    background-color: var(--sak-card-background);
}

/**
 * Apply branded dimensions and interaction states to the joined
 * country-code and mobile-number controls.
 */
.registration-mobile-group .form-control,
.registration-mobile-group .form-select {
    min-height: 56px;
    border-color: var(--sak-control-border);
    border-radius: 11px;
    box-shadow: none;
}

.registration-mobile-group .form-control:hover,
.registration-mobile-group .form-select:hover {
    border-color: var(--sak-primary);
}

.registration-mobile-group .form-control:focus,
.registration-mobile-group .form-select:focus {
    border-color: var(--sak-primary);
    box-shadow: 0 0 0 3px rgba(174, 21, 54, 0.14);
}


/**
 * Keep the country-code selector compact.
 */
.registration-mobile-group .registration-country-code {
    flex: 0 0 98px;
    max-width: 98px;
    border-top-left-radius: 11px;
    border-bottom-left-radius: 11px;
}

.registration-mobile-group .form-control {
    border-top-right-radius: 11px;
    border-bottom-right-radius: 11px;
}

/**
 * Separate the controls slightly, matching the supplied design.
 */
.registration-mobile-group {
    gap: 13px;
}

.registration-mobile-group>.form-select,
.registration-mobile-group>.form-control {
    width: auto;
    margin-left: 0 !important;
}

/**
 * Allow the mobile-number input to consume remaining space.
 */
.registration-mobile-group .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

/**
 * Main registration button.
 *
 * Typography comes from:
 * fs-16, fw-semibold and text-uppercase.
 */
.registration-form__submit {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    border: 1px solid var(--sak-primary);
    border-radius: 0.3rem;
    background-color: var(--sak-primary);
    color: #ffffff;
    letter-spacing: 0.025em;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.registration-form__submit:hover,
.registration-form__submit:focus {
    border-color: var(--sak-primary-hover);
    background-color: var(--sak-primary-hover);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(174, 21, 54, 0.24);
    transform: translateY(-1px);
}

.registration-form__submit:active {
    transform: translateY(0);
}

/**
 * Typography comes from fs-12 and text-muted.
 */
.registration-form__terms {
    margin-top: 23px;
    line-height: 19px;
}

.registration-form__terms a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.registration-form__terms a:hover,
.registration-form__terms a:focus {
    color: var(--sak-primary);
}

/* ==========================================================================
   Tablet view
   ========================================================================== */

@media (min-width: 768px) and (max-width: 991.98px) {
    .home-registration-section {
        min-height: auto;
        padding: 42px 0 58px;
    }

    .home-registration-section__row {
        min-height: auto;
        justify-content: center;
    }

    .registration-card {
        max-width: 560px;
        margin-right: auto;
    }
}

/* ==========================================================================
   Mobile view
   ========================================================================== */

@media (max-width: 767.98px) {
    .home-registration-section {
        min-height: auto;
        padding: 28px 0 42px;
    }

    .home-registration-section__row {
        min-height: auto;
    }

    .registration-card {
        max-width: none;
        margin: 0 auto;
        border-radius: 20px;
    }

    .registration-card__header {
        min-height: 70px;
        padding: 10px 20px 30px;
        border-radius: 20px 20px 0 0;
    }

    .registration-card__body {
        margin-top: -22px;
        padding: 30px 22px 28px;
        border-radius: 20px;
    }

    .registration-form__terms {
        margin-top: 18px;
    }

    .registration-mobile-group .form-control,
    .registration-mobile-group .form-select {
        min-height: 52px;
    }

    .registration-mobile-group .registration-country-code {
        flex-basis: 88px;
        max-width: 88px;
    }
}

/* ==========================================================================
   Small mobile view
   ========================================================================== */

@media (max-width: 374.98px) {
    .registration-card__body {
        padding-right: 16px;
        padding-left: 16px;
    }

    .registration-mobile-group {
        gap: 8px;
    }

    .registration-mobile-group .registration-country-code {
        flex-basis: 80px;
        max-width: 80px;
    }
}

/* ==========================================================================
   Mainly used for help text
   ========================================================================== */
.color-pink {
    color: var(--vz-code-color);
}

/* ==========================================================================
   Password field
   ========================================================================== */

.password-field {
    position: relative;
}

.password-field__input {
    padding-right: 3rem;
}

.password-field__toggle {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    z-index: 1;

    width: 2rem;
    height: 2rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    border: 0;
    background: transparent;

    color: #6c757d;
    transform: translateY(-50%);
    cursor: pointer;
}

.password-field__toggle:hover,
.password-field__toggle:focus-visible {
    color: var(--vz-primary);
}

.password-field__toggle:focus-visible {
    border-radius: 0.25rem;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(var(--vz-primary-rgb), 0.2);
}

.password-field__input.is-invalid,
.password-field__input.is-valid {
    padding-right: 5.25rem;
}

.password-field__input.is-invalid+.password-field__toggle,
.password-field__input.is-valid+.password-field__toggle {
    right: 2.75rem;
}

/* ==========================================================================
   Choices dropdown stacking
   ========================================================================== */

.registration-form .choices {
    position: relative;
    z-index: 2;
}

.registration-form .choices.is-open {
    z-index: 50;
}

.registration-form .choices__list--dropdown,
.registration-form .choices__list[aria-expanded] {
    z-index: 51;
    padding-bottom: 0px;
}

/* ==========================================================================
   Form submit loader
   ========================================================================== */

.registration-submit__idle,
.registration-submit__loading {
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
}

.registration-submit__idle {
    display: inline-flex;
}

.registration-submit__loading:not(.d-none) {
    display: inline-flex;
}

[data-submit-button][disabled] {
    cursor: wait;
    opacity: 0.8;
}

form[aria-busy="true"] {
    cursor: progress;
}

/* --------------------------------------------------------------------------
   Registration OTP
   -------------------------------------------------------------------------- */

.registration-otp-page {
    min-height: 70vh;
    display: flex;
    align-items: center;
}

.registration-otp-card {
    border: 0;
    border-radius: 18px;
    box-shadow: 0 12px 35px rgba(30, 35, 40, 0.1);
}

.registration-otp-icon {
    width: 58px;
    height: 58px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(174, 21, 54, 0.1);
    color: #ae1536;
    font-size: 26px;
}

.registration-profile-reference {
    color: #495057;
}

.registration-otp-inputs {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.registration-otp-input {
    width: 58px;
    height: 62px;
    padding: 0;
    border-radius: 12px;
    text-align: center;
    font-size: 26px;
    font-weight: 600;
}

.registration-otp-input:focus {
    border-color: #ae1536;
    box-shadow: 0 0 0 0.2rem rgba(174, 21, 54, 0.15);
}

.registration-otp-timer {
    min-height: 48px;
}

.registration-otp-timer strong {
    color: #ae1536;
}

#resendOtpButton:disabled {
    color: #6c757d;
    text-decoration: none;
    cursor: not-allowed;
    opacity: 0.65;
}

@media (max-width: 420px) {
    .registration-otp-inputs {
        gap: 8px;
    }

    .registration-otp-input {
        width: 50px;
        height: 56px;
        font-size: 23px;
    }
}

.registration-otp-resend-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;

    padding: 0;
    margin-left: 0.25rem;

    border: 0;
    background: transparent;

    color: #ae1536;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.registration-otp-resend-link:hover {
    text-decoration: none;
}

.registration-otp-resend-link:disabled {
    color: #6c757d;
    text-decoration: none;
    cursor: not-allowed;
    opacity: 0.7;
}

/* ==========================================================================
   Dashboard user dropdown integration
   ========================================================================== */

/*
 * Allow the existing Velzon topbar profile component to fit inside
 * the public website header.
 */
.public-navbar .topbar-user {
    margin-left: 0 !important;
}

/*
 * The app.css topbar user button was originally designed for the Velzon
 * admin topbar. Keep it compact inside the Sikh Anand Karaj header.
 */
.public-navbar .topbar-user .btn {
    min-height: 54px;
    padding: 6px 12px;
    border: 0;
    border-radius: 10px;
}

/* .public-navbar .topbar-user .btn:hover,
.public-navbar .topbar-user .btn:focus,
.public-navbar .topbar-user .btn[aria-expanded="true"] {
    background-color: rgba(174, 21, 54, 0.06);
} */

/*
 * Keep the dropdown above page cards and form controls.
 */
.public-navbar .topbar-user {
    position: relative;
    margin-left: 0 !important;
}

.public-navbar .topbar-user .dropdown-menu {
    top: 100% !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;

    z-index: 1055;
    min-width: 230px;
    margin-top: 8px !important;

    /*
     * Used with data-bs-display="static".
     */
    transform: none !important;
}

/*
 * Use the Sikh Anand Karaj brand colour for the generated avatar.
 */
.public-navbar .topbar-user .avatar-title {
    background-color: rgba(174, 21, 54, 0.1) !important;
    color: var(--sak-primary) !important;
}

/*
 * Ensure the logout form button has the same dimensions as normal
 * dropdown links.
 */
.public-navbar .topbar-user form .dropdown-item {
    padding: var(--vz-dropdown-item-padding-y) var(--vz-dropdown-item-padding-x);
}

/*
 * Mobile displays only the avatar.
 */
@media (max-width: 575.98px) {
    .public-navbar .topbar-user .btn {
        min-height: 44px;
        padding: 3px;
    }

    .public-navbar .topbar-user .avatar-sm {
        width: 38px;
        height: 38px;
    }

    .public-navbar .topbar-user .dropdown-menu {
        right: 0 !important;
        left: auto !important;
        min-width: min(230px, calc(100vw - 24px));
        margin-top: 8px !important;
    }
}

.auth-content-height {
    min-height: calc(100vh - 220px);
}

/* ---------------------------------------------------------
   Email verification
--------------------------------------------------------- */

.email-verification-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    padding: 1.15rem 1.25rem;
    border: 1px solid rgba(174, 21, 54, 0.22);
    border-left: 4px solid #ae1536;
    border-radius: 0.75rem;
    background: rgba(174, 21, 54, 0.055);
}

.email-verification-alert__content {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    min-width: 0;
}

.email-verification-alert__icon {
    flex: 0 0 auto;
    color: #ae1536;
    font-size: 1.5rem;
    line-height: 1;
}

.email-verification-alert__title {
    margin: 0 0 0.3rem;
    color: var(--vz-heading-color);
    font-size: 1rem;
    font-weight: 600;
}

.email-verification-alert__message {
    margin: 0;
    color: var(--vz-secondary-color);
    font-size: 0.875rem;
    line-height: 1.55;
}

.email-verification-alert__form {
    flex: 0 0 auto;
    margin: 0;
}

.email-verification-alert__action,
.email-verification-result__action {
    border-color: #ae1536;
    background: #ae1536;
    color: #ffffff;
    font-weight: 600;
}

.email-verification-alert__action:hover,
.email-verification-alert__action:focus,
.email-verification-result__action:hover,
.email-verification-result__action:focus {
    border-color: #92122e;
    background: #92122e;
    color: #ffffff;
}

.email-verification-result {
    display: flex;
    min-height: calc(100vh - 160px);
    align-items: center;
    padding: 3rem 0;
}

.email-verification-result__card {
    max-width: 560px;
    margin: 0 auto;
    padding: 2.5rem;
    border: 1px solid var(--vz-border-color);
    border-radius: 1rem;
    background: var(--vz-card-bg);
    box-shadow: 0 0.5rem 1.75rem rgba(56, 65, 74, 0.08);
    text-align: center;
}

.email-verification-result__icon {
    display: inline-flex;
    width: 4.5rem;
    height: 4.5rem;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    border-radius: 50%;
    font-size: 2.5rem;
}

.email-verification-result__icon--success {
    background: rgba(10, 179, 156, 0.12);
    color: #0ab39c;
}

.email-verification-result__icon--error {
    background: rgba(240, 101, 72, 0.12);
    color: #f06548;
}

.email-verification-result__title {
    margin-bottom: 0.75rem;
    font-size: 1.5rem;
    font-weight: 600;
}

.email-verification-result__message {
    margin-bottom: 1.5rem;
    color: var(--vz-secondary-color);
    line-height: 1.6;
}

/**
 * Prevent repeated verification-email requests while the request
 * is being processed.
 */
.email-verification-alert__action:disabled {
    cursor: not-allowed;
    opacity: 0.72;
    transform: none;
    box-shadow: none;
}

.email-verification-alert__action[aria-busy="true"] {
    pointer-events: none;
}

@media (max-width: 767.98px) {
    .email-verification-alert {
        align-items: stretch;
        flex-direction: column;
    }

    .email-verification-alert__form,
    .email-verification-alert__action {
        width: 100%;
    }

    .email-verification-result__card {
        padding: 2rem 1.25rem;
    }
}

/* =========================================================
   Reusable application feedback modal
   ========================================================= */

.app-feedback-modal {
    --feedback-modal-accent: #315fa8;
    --feedback-modal-accent-soft: #edf4ff;
}

.app-feedback-modal__content {
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 1.25rem 3rem rgba(35, 24, 28, 0.18);
    overflow: hidden;
}

.app-feedback-modal__body {
    padding: 2rem 1.5rem 1.5rem;
    text-align: center;
}

.app-feedback-modal__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    background-color: var(--feedback-modal-accent-soft);
    color: var(--feedback-modal-accent);
    font-size: 2rem;
    line-height: 1;
}

.app-feedback-modal__title {
    margin: 0 0 0.65rem;
    color: var(--bs-body-color);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.35;
}

.app-feedback-modal__message {
    max-width: 28rem;
    margin: 0 auto 1.5rem;
    color: var(--bs-secondary-color);
    font-size: 0.95rem;
    line-height: 1.6;
}

.app-feedback-modal__button {
    min-width: 8rem;
    padding: 0.65rem 1.5rem;
    border-color: var(--feedback-modal-accent);
    border-radius: 0.65rem;
    background-color: var(--feedback-modal-accent);
    color: #ffffff;
    font-weight: 600;
}

.app-feedback-modal__button:hover,
.app-feedback-modal__button:focus {
    border-color: var(--feedback-modal-accent);
    background-color: var(--feedback-modal-accent);
    color: #ffffff;
    filter: brightness(0.92);
}

.app-feedback-modal--success {
    --feedback-modal-accent: #198754;
    --feedback-modal-accent-soft: #eaf7f0;
}

.app-feedback-modal--warning {
    --feedback-modal-accent: #b77900;
    --feedback-modal-accent-soft: #fff7df;
}

.app-feedback-modal--error {
    --feedback-modal-accent: #b42318;
    --feedback-modal-accent-soft: #fff0ee;
}

.app-feedback-modal--info {
    --feedback-modal-accent: #315fa8;
    --feedback-modal-accent-soft: #edf4ff;
}

@media (min-width: 576px) {
    .app-feedback-modal__body {
        padding: 2.25rem 2rem 1.75rem;
    }
}

/* ==========================================================================
   Member dashboard
   ========================================================================== */

/**
 * Keep the member account panel visible while scrolling through dashboard
 * sections on larger screens.
 */
.dashboard-sidebar {
    position: sticky;
    top: 24px;
}

/**
 * Temporary member avatar used until profile-image storage is connected.
 */
.dashboard-avatar {
    width: 104px;
    height: 104px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(174, 21, 54, 0.08);
    color: var(--sak-primary);
    font-size: 3rem;
    object-fit: cover;
}

/**
 * Align the profile-completion shortcut icons consistently.
 */
.dashboard-shortcut-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    color: var(--sak-primary);
    font-size: 1.25rem;
}

/**
 * Horizontal member-card list.
 *
 * This allows the dashboard to show several profiles without forcing every
 * section into a large multi-row grid.
 */
.dashboard-profile-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: thin;
}

/**
 * Online/offline indicator positioned over the profile placeholder.
 */
.dashboard-online-status {
    position: absolute;
    right: calc(50% - 45px);
    bottom: 3px;
    width: 14px;
    height: 14px;
    border: 2px solid var(--sak-white);
    border-radius: 50%;
}

/* ==========================================================================
   Member dashboard responsive behaviour
   ========================================================================== */

@media (max-width: 991.98px) {

    /*
     * Sticky positioning is unnecessary once the sidebar stacks above the
     * dashboard content.
     */
    .dashboard-sidebar {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .dashboard-profile-scroll {
        gap: 12px;
    }



}

/* ==========================================================================
   Member profile completion
   ========================================================================== */

/**
 * Circular profile-completion indicator.
 *
 * The percentage is supplied through --profile-progress from the view.
 */
.profile-completion-circle {
    --profile-progress: 0;

    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    flex: 0 0 92px;
    border-radius: 50%;
    background:
        conic-gradient(var(--sak-primary) calc(var(--profile-progress) * 1%),
            rgba(174, 21, 54, 0.12) 0);
}

.profile-completion-circle::before {
    content: "";
    grid-area: 1 / 1;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background-color: var(--vz-card-bg);
}

.profile-completion-circle__value {
    position: relative;
    z-index: 1;
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    line-height: 1.1;
}

.profile-completion-circle__value strong {
    color: var(--sak-primary);
    font-size: 1.2rem;
}

.profile-completion-circle__value span {
    margin-top: 0.2rem;
    color: var(--vz-secondary-color);
    font-size: 0.65rem;
    text-transform: uppercase;
}

@media (max-width: 575.98px) {
    .profile-completion-circle {
        width: 78px;
        height: 78px;
        flex-basis: 78px;
    }

    .profile-completion-circle::before {
        width: 62px;
        height: 62px;
    }

    .profile-completion-circle__value strong {
        font-size: 1rem;
    }

    .profile-completion-circle__value span {
        font-size: 0.58rem;
    }
}

.h-80 {
    height: 80% !important;
}

.h-85 {
    height: 85% !important;
}

.h-90 {
    height: 90% !important;
}

/* ==========================================================================
   Member profile editor
   ========================================================================== */

/**
 * Provide sufficient desktop width for profile forms while retaining a
 * full-width editor on small screens.
 */
.profile-offcanvas {
    --bs-offcanvas-width: 620px;
}

/**
 * Keep form actions visible while scrolling through longer profile forms.
 */
.profile-offcanvas__footer {
    position: static;
    margin-right: -1rem;
    margin-bottom: -1rem;
    margin-left: -1rem;
    padding: 1rem;
    border-top: 1px solid var(--vz-border-color);
    background-color: var(--vz-card-bg);
}

/**
 * Apply the application brand colour to profile completion progress bars.
 */
.profile-progress .progress-bar {
    background-color: var(--sak-primary);
}

.profile-offcanvas__footer .btn,
.profile-offcanvas__footer .registration-form__submit {
    min-height: 42px;
    padding: 0.625rem 1rem;
    line-height: 1.25;
}

@media (max-width: 575.98px) {
    .profile-offcanvas {
        --bs-offcanvas-width: 100%;
    }
}

/* ==========================================================================
   Member profile photos
   ========================================================================== */

.profile-photos-page__count {
    min-width: 7rem;
}

.profile-photo-upload-card {
    position: sticky;
    top: 1rem;
}

.profile-photo-dropzone {
    position: relative;
    min-height: 15rem;
    overflow: hidden;
    border: 1px dashed rgba(174, 21, 54, 0.45);
    border-radius: 0.75rem;
    background: rgba(174, 21, 54, 0.025);
}

.profile-photo-dropzone__input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.profile-photo-dropzone__label {
    display: flex;
    min-height: 15rem;
    padding: 1.5rem;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    cursor: pointer;
}

.profile-photo-dropzone__icon {
    display: inline-flex;
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(174, 21, 54, 0.1);
    color: #ae1536;
    font-size: 1.4rem;
}

.profile-photo-dropzone__preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.profile-photo-file-name {
    min-height: 1.2rem;
    overflow-wrap: anywhere;
}

.profile-photo-visibility-options {
    display: grid;
    gap: 0.75rem;
}

.profile-photo-visibility-option {
    display: flex;
    padding: 0.75rem;
    gap: 0.65rem;
    align-items: flex-start;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    cursor: pointer;
}

.profile-photo-visibility-option:has(input:checked) {
    border-color: rgba(174, 21, 54, 0.55);
    background: rgba(174, 21, 54, 0.035);
}

.profile-photo-visibility-option input {
    margin-top: 0.2rem;
}

.profile-photo-visibility-option strong,
.profile-photo-visibility-option small {
    display: block;
}

.profile-photo-visibility-option small {
    margin-top: 0.15rem;
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
    line-height: 1.35;
}

.profile-photos-empty {
    padding: 3rem 1rem;
    border: 1px dashed var(--bs-border-color);
    border-radius: 0.75rem;
}

.profile-photos-empty__icon {
    display: inline-flex;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 0.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(174, 21, 54, 0.08);
    color: #ae1536;
    font-size: 1.5rem;
}

.profile-photo-card {
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    background: var(--bs-body-bg);
}

.profile-photo-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--bs-tertiary-bg);
}

.profile-photo-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-photo-card__placeholder {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color);
    font-size: 2rem;
}

.profile-photo-card__badges {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    left: 0.65rem;
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    pointer-events: none;
}

.profile-photo-card__body {
    padding: 0.9rem;
}

.profile-photo-guidelines {
    background: var(--bs-tertiary-bg);
}

@media (max-width: 991.98px) {
    .profile-photo-upload-card {
        position: static;
    }
}

@media (max-width: 575.98px) {

    .profile-photo-dropzone,
    .profile-photo-dropzone__label {
        min-height: 13rem;
    }

    .profile-photo-card__body {
        padding: 0.8rem;
    }
}

#prelaunch-profile-form .form-control {
    background-color: #F2F2F7 !important;
}

#prelaunch-profile-form .choices__inner {
    background-color: #F2F2F7 !important;
}

/*
 * Member photo card image actions.
 *
 * Actions appear on hover/focus for pointer devices and remain visible on
 * touch devices where hover interaction is not available.
 */
.profile-photo-card__media {
    position: relative;
}

.profile-photo-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(to top,
            rgba(0, 0, 0, 0.72) 0%,
            rgba(0, 0, 0, 0.18) 48%,
            rgba(0, 0, 0, 0) 72%);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
}

.profile-photo-card__media:hover .profile-photo-card__overlay,
.profile-photo-card__media:focus-within .profile-photo-card__overlay {
    opacity: 1;
    visibility: visible;
}

/*
 * Touch devices do not provide a reliable hover state.
 */
@media (hover: none),
(pointer: coarse) {
    .profile-photo-card__overlay {
        opacity: 1;
        visibility: visible;
    }
}

/*
 * Member profile preview.
 * Bootstrap and app.css handle the remaining layout and presentation.
 */
.profile-preview-photo {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center;
}

.profile-preview-notice {
    background: linear-gradient(120deg,
            #fff8e8,
            #fffdf8);
}

.profile-preview-edit-button {
    z-index: 3;
}

/**
 * Prelaunch saving modal progress transition.
 */
#prelaunchSavingProgressBar {
    transition: width 900ms ease;
}

@media (prefers-reduced-motion: reduce) {
    #prelaunchSavingProgressBar {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
 * Administrator prelaunch photo review
 * ----------------------------------------------------------------------- */

/*
 * The gallery button fills its Bootstrap card without adding browser-default
 * button spacing or appearance.
 */
.prelaunch-admin-photo-button {
    display: block;
    cursor: pointer;
    border-radius: 0.375rem;
}

.prelaunch-admin-photo-button:focus-visible {
    outline: 3px solid rgba(174, 21, 54, 0.2);
    outline-offset: 3px;
}

/*
 * Keep gallery images small, square and fully visible.
 *
 * object-fit: contain prevents portrait and landscape photographs from being
 * cropped. The light background fills any unused space.
 */
.prelaunch-admin-photo-media {
    max-width: 10rem;
    margin-inline: auto;
}

.prelaunch-admin-photo-media img {
    display: block;
    object-position: center;
    transition: transform 180ms ease;
}

.prelaunch-admin-photo-button:hover .prelaunch-admin-photo-media img,
.prelaunch-admin-photo-button:focus-visible .prelaunch-admin-photo-media img {
    transform: scale(1.025);
}

/*
 * Give the enlarged image a predictable modal boundary. The image remains
 * contained and does not overflow the browser viewport.
 */
.prelaunch-admin-modal-media {
    width: 100%;
    max-width: 46rem;
    height: min(68vh, 42rem);
}

.prelaunch-admin-modal-media img {
    display: block;
    object-position: center;
}

/*
 * Ensure Bootstrap modals remain above the administrator layout, sidebar and
 * sticky header.
 */
.modal-backdrop {
    z-index: 1050;
}

.modal {
    z-index: 1055;
}

@media (max-width: 767.98px) {
    .prelaunch-admin-photo-media {
        max-width: 8.5rem;
    }

    .prelaunch-admin-modal-media {
        height: 58vh;
    }
}

@media (max-width: 575.98px) {
    .prelaunch-admin-photo-media {
        max-width: 7.5rem;
    }

    .prelaunch-admin-modal-media {
        height: 52vh;
    }
}

/*
|--------------------------------------------------------------------------
| Home registration hero
|--------------------------------------------------------------------------
|
| bg_index.png covers the full left side of the section rather than only
| the Bootstrap column. The content remains aligned with the site container.
|
*/

.home-registration-section {
    position: relative;
    min-height: 650px;
    overflow: hidden;
    background-color: #f8fcf8;
    isolation: isolate;
}

/*
 * Full-height image layer.
 *
 * It starts at the browser's left edge and extends slightly beyond the
 * seven-column desktop region. This removes the empty strip created by the
 * Bootstrap container and column gutters.
 */
.home-registration-section::before {
    position: absolute;
    z-index: -2;
    top: 0;
    bottom: 0;
    left: 0;
    width: 61%;
    background-image: url("../images/bg_index.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    content: "";
}

/*
 * Continuous fade toward the registration form.
 *
 * The gradient belongs to the section, so the fade extends across the full
 * image height without producing a separate rectangular image block.
 */
.home-registration-section::after {
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    width: 66%;
    background:
        linear-gradient(90deg,
            rgba(255, 248, 245, 0.1) 0%,
            rgba(255, 248, 245, 0.04) 42%,
            rgba(248, 252, 248, 0.16) 64%,
            rgba(248, 252, 248, 0.7) 83%,
            #f8fcf8 100%),
        linear-gradient(180deg,
            rgba(255, 249, 247, 0.82) 0%,
            rgba(255, 249, 247, 0.58) 25%,
            rgba(255, 249, 247, 0.1) 52%,
            rgba(255, 249, 247, 0.03) 100%);
    content: "";
    pointer-events: none;
}

.home-registration-section__row {
    min-height: 650px;
}

/*
 * The left column now contains only overlay content.
 * It does not limit or crop the section-level image.
 */
.home-registration-visual {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    min-height: 650px;
    height: 100%;
}

/*
 * Text overlays the image near the top.
 */
.home-registration-visual__content {
    width: min(100%, 650px);
    padding: 46px 34px 30px;
    text-align: center;
}

.home-registration-visual__eyebrow {
    margin: 0 0 10px;
    color: #945b66;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    line-height: 1.5;
    text-transform: uppercase;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95),
        0 2px 10px rgba(255, 255, 255, 0.82);
}

.home-registration-visual__title {
    margin: 0;
    color: #432053;
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -0.025em;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95),
        0 4px 18px rgba(255, 255, 255, 0.82);
}

.home-registration-visual__title span {
    display: block;
    margin-top: 5px;
    color: #ae1536;
}

.home-registration-visual__divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 330px);
    margin: 20px auto 16px;
    color: #d69a47;
}

.home-registration-visual__divider span {
    display: block;
    flex: 1 1 auto;
    height: 1px;
    background-color: currentColor;
    opacity: 0.82;
}

.home-registration-visual__divider i {
    flex: 0 0 auto;
    margin: 0 12px;
    font-size: 20px;
    line-height: 1;
}

.home-registration-visual__description {
    margin: 0;
    color: #514a4c;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.65;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.98),
        0 3px 14px rgba(255, 255, 255, 0.9);
}

/*
 * Keep the form vertically centered without changing registration-card
 * styling.
 */
.home-registration-section .col-lg-5 {
    display: flex;
    align-items: flex-start;
}

.home-registration-section .registration-card {
    width: 100%;
    margin-top: 35px;
}

/*
 * Wide desktop screens need a slightly larger image area because the
 * Bootstrap container leaves more space outside the content.
 */
@media (min-width: 1200px) {

    .home-registration-section,
    .home-registration-section__row,
    .home-registration-visual {
        min-height: 530px;
    }

    .home-registration-section::before {
        width: 62%;
    }

    .home-registration-section::after {
        width: 67%;
    }

    .home-registration-visual__content {
        padding-top: 50px;
    }
}

@media (min-width: 1400px) {

    .home-registration-section,
    .home-registration-section__row,
    .home-registration-visual {
        min-height: 550px;
    }

    .home-registration-section::before {
        width: 63%;
    }

    .home-registration-section::after {
        width: 68%;
    }
}

/*
 * The artwork remains hidden on mobile because the corresponding left
 * Bootstrap column is hidden. Remove section pseudo-elements as well.
 */
@media (max-width: 991.98px) {
    .home-registration-section {
        min-height: auto;
        padding-top: 24px;
        padding-bottom: 32px;
    }

    .home-registration-section::before,
    .home-registration-section::after {
        display: none;
    }

    .home-registration-section__row {
        min-height: auto;
    }

    .home-registration-section .col-lg-5 {
        display: block;
    }
}

.light-yellowish {
    background-color: #f8fcf8;
}

/*
|--------------------------------------------------------------------------
| Dashboard - completed profile
|--------------------------------------------------------------------------
*/

.dashboard-profile-complete {
    position: relative;
    width: 100%;
}

.dashboard-profile-complete__content {
    min-width: 0;
}

.dashboard-profile-complete__content .badge {
    font-weight: 500;
}

.dashboard-profile-complete__actions .btn {
    min-width: 138px;
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    .dashboard-profile-complete__actions {
        width: 100%;
        padding-top: 1rem;
        border-top: 1px solid var(--bs-border-color);
    }
}

@media (max-width: 575.98px) {
    .dashboard-profile-complete {
        text-align: center;
    }

    .dashboard-profile-complete .profile-completion-circle {
        margin-inline: auto;
    }

    .dashboard-profile-complete__content .d-flex {
        justify-content: center;
    }

    .dashboard-profile-complete__actions {
        width: 100%;
    }

    .dashboard-profile-complete__actions .btn {
        width: 100%;
    }
}

/*
|--------------------------------------------------------------------------
| Admin member profile photograph
|--------------------------------------------------------------------------
|
| Admin review uses a portrait-oriented photograph rather than an avatar.
| This exposes more of the member's actual photograph while maintaining a
| compact profile-summary header.
|
*/
/* ==========================================================================
   Member dashboard
   ========================================================================== */

/**
 * Keep the member account panel visible while scrolling through dashboard
 * sections on larger screens.
 */
.dashboard-sidebar {
    position: sticky;
    top: 24px;
}

/**
 * Align the profile-completion shortcut icons consistently.
 */
.dashboard-shortcut-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    color: var(--sak-primary);
    font-size: 1.25rem;
}

/**
 * Horizontal member-card list.
 *
 * This allows the dashboard to show several profiles without forcing every
 * section into a large multi-row grid.
 */
.dashboard-profile-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: thin;
}

/**
 * Keep every dashboard profile card wide enough to contain the common
 * member thumbnail.
 *
 * Thumbnail: 193px
 * Card body horizontal padding: 16px + 16px
 * Total required width: approximately 225px.
 */
.dashboard-profile-card {
    min-width: 190px;
    max-width: 190px;
    flex: 0 0 190px;
    scroll-snap-align: start;
}

/* ==========================================================================
   Shared member profile thumbnail
   ========================================================================== */

/**
 * Common member photograph presentation.
 *
 * Used by:
 * - Admin member summary
 * - Member dashboard sidebar
 * - Match/recommendation cards
 *
 * All member thumbnails should have the same dimensions and presentation.
 */
.member-profile-thumbnail {
    width: 160px;
    height: 160px;
    flex: 0 0 160px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 18px;

    background-color: var(--sak-page-background);
    color: var(--sak-primary);

    font-size: 3rem;
    font-weight: 600;
}

/**
 * Actual member photograph.
 *
 * Crop the photograph into the fixed square without stretching it.
 */
.member-profile-thumbnail img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

/**
 * Fallback shown when the member does not have an available photograph.
 */
.member-profile-thumbnail--fallback {
    background-color: var(--vz-primary-bg-subtle);
    color: var(--sak-primary);
}

/* ==========================================================================
   Member dashboard responsive behaviour
   ========================================================================== */

@media (max-width: 991.98px) {

    /*
     * Sticky positioning is unnecessary once the sidebar stacks above the
     * dashboard content.
     */
    .dashboard-sidebar {
        position: static;
    }
}

@media (max-width: 575.98px) {

    .dashboard-profile-scroll {
        gap: 12px;
    }

    /*
     * Do not shrink profile photographs on mobile.
     *
     * The dashboard profile list already scrolls horizontally, so keeping
     * one consistent thumbnail size prevents different member photos from
     * having different visual presentation across devices.
     */
    .dashboard-profile-card {
        min-width: 190px;
        max-width: 190px;
        flex-basis: 190px;
    }
}

/* ==========================================================================
   Partner Preference - Any selection
   ========================================================================== */

/**
 * Compact representation used when every available value is acceptable.
 *
 * The underlying select still contains all selected values so the existing
 * backend persistence and matching behaviour remain unchanged.
 */
.partner-preference-any-value {
    display: none;
    padding: 0.5rem 0.75rem;
    align-items: center;

    border: 1px solid var(--vz-border-color);
    border-radius: 0.25rem;

    background-color: var(--vz-input-bg);
    color: var(--vz-body-color);

    font-size: 0.8125rem;
}

/**
 * Choices.js would normally render every selected value as an individual
 * removable tag. Hide the Choices presentation when "Any" represents the
 * complete selection.
 */
.partner-preference-multi-select.is-any .partner-preference-multi-select__control>.choices {
    display: none;
}

/**
 * Show one clean value instead of dozens of Choices tags.
 */
.partner-preference-multi-select.is-any .partner-preference-any-value {
    display: flex;
}

/*
 * Member profile medium display image.
 *
 * Used for the primary member image on profile/detail screens.
 * The dimensions intentionally match the earlier profile presentation.
 */
.member-photo-medium {
    display: block;
    width: 320px;
    max-width: 100%;
    height: 280px;
    object-fit: cover;
    object-position: center;
    border-radius: 0.5rem;
}

/*
 * Gallery thumbnails remain square and independent from the
 * medium profile-image presentation.
 */
.profile-preview-gallery-photo {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
}

.text-gurmukhi {
    color: #ae1536;
    line-height: 1.1;
    text-shadow: 0 2px 20px rgba(0,0,0,0.4);
    font-weight: 700;
}