/* Avatar picker (_AvatarPicker.cshtml). The two pages that use it - Register and
   CompleteProfile - set Layout = null and have no Styles section, so this is linked
   from their <head> directly. */

/* ── Trigger row: preview thumbnail + "Choose profile pic" button ── */
.rh-avatar-trigger {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.rh-avatar-preview {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--phoenix-secondary-bg, rgba(0,0,0,.03));
    border: 1px dashed var(--phoenix-border-color, rgba(0,0,0,.2));
    display: flex;
    align-items: center;
    justify-content: center;
}

    .rh-avatar-preview.rh-avatar-has-image {
        border-style: solid;
        border-color: var(--phoenix-primary, #0d6efd);
    }

    .rh-avatar-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.rh-avatar-preview-empty {
    color: var(--phoenix-body-tertiary-color, rgba(0,0,0,.4));
    font-size: 1.5rem;
    line-height: 1;
}

.rh-avatar-field.rh-avatar-invalid .rh-avatar-preview {
    border-color: var(--phoenix-danger, #dc3545);
}

/* ── Modal grid of car thumbnails ── */
.rh-avatar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: .75rem;
}

.rh-avatar-option {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    background: var(--phoenix-secondary-bg, rgba(0,0,0,.03));
    border: 2px solid transparent;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

    .rh-avatar-option img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .rh-avatar-option:hover {
        transform: translateY(-2px);
        border-color: var(--phoenix-border-color, rgba(0,0,0,.2));
    }

    .rh-avatar-option:focus-visible {
        outline: 2px solid var(--phoenix-primary, #0d6efd);
        outline-offset: 2px;
    }

    .rh-avatar-option.rh-avatar-selected {
        border-color: var(--phoenix-primary, #0d6efd);
        box-shadow: 0 0 0 3px rgba(var(--phoenix-primary-rgb, 13,110,253), .25);
    }

/* The first tile in the grid: upload your own, showing a preview once one is picked. */
.rh-avatar-upload-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    border: 2px dashed var(--phoenix-border-color, rgba(0,0,0,.25));
    color: var(--phoenix-body-tertiary-color, rgba(0,0,0,.5));
    font-size: .75rem;
    text-align: center;
    padding: .5rem;
}

    .rh-avatar-upload-tile.rh-avatar-selected {
        border-style: solid;
    }

    .rh-avatar-upload-tile .rh-avatar-upload-icon {
        font-size: 1.5rem;
        line-height: 1;
    }

    /* Once a file is chosen the tile becomes the preview, so the label and icon step aside. */
    .rh-avatar-upload-tile.rh-avatar-has-image {
        border-style: solid;
        padding: 0;
    }

        .rh-avatar-upload-tile.rh-avatar-has-image .rh-avatar-upload-icon,
        .rh-avatar-upload-tile.rh-avatar-has-image .rh-avatar-upload-label {
            display: none;
        }

    .rh-avatar-upload-tile img {
        position: absolute;
        inset: 0;
    }