/**
 * Player Registration - Extends support.css
 * Player-specific: sections, fee box, input groups, lookup
 */

/* Live photo capture */
.player-reg-photo-capture {
    max-width: 20rem;
}

.player-reg-photo-preview-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    max-height: 16rem;
    background: var(--bs-dark);
    border-radius: 0.75rem;
    overflow: hidden;
    border: 2px solid var(--bs-border-color);
}

[data-bs-theme="dark"] .player-reg-photo-preview-wrap,
html[data-bs-theme="dark"] .player-reg-photo-preview-wrap {
    background: #1a1a1a;
    border-color: rgba(255, 255, 255, 0.2);
}

.player-reg-photo-video,
.player-reg-photo-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.player-reg-photo-canvas {
    display: none;
}

.player-reg-photo-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

.player-reg-photo-placeholder i {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.player-reg-photo-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.player-reg-photo-actions .btn {
    border-radius: 0.5rem;
}

.player-reg-photo-retake {
    display: none;
}

.player-reg-photo-retake.is-visible {
    display: inline-block;
}

/* Look up current player */
.player-reg-lookup-section {
    padding: 1rem 0 1.5rem;
}

/* Lookup card sits on site dark surfaces (unations_dark .card); avoid Bootstrap
   body vars here — with data-bs-theme=light they yield dark text / white inputs
   on a dark card. Use an explicit dark-surface palette (aligned with support.css). */
.player-reg-lookup-card {
    color-scheme: dark;
    --pr-lookup-text: rgba(255, 255, 255, 0.95);
    --pr-lookup-text-muted: rgba(255, 255, 255, 0.72);
    --pr-lookup-surface: #1a1a1e;
    --pr-lookup-input-bg: #25252a;
    --pr-lookup-input-bg-focus: #2d2d33;
    --pr-lookup-border: rgba(255, 255, 255, 0.15);
    --pr-lookup-input-border: rgba(255, 255, 255, 0.22);
    border-radius: 1rem;
    background: var(--pr-lookup-surface);
    color: var(--pr-lookup-text);
    border: 1px solid var(--pr-lookup-border);
}

.player-reg-lookup-card .card-body {
    padding: 1.25rem 1.5rem;
}

.player-reg-lookup-title,
.player-reg-lookup-title i {
    color: var(--pr-lookup-text) !important;
}

.player-reg-lookup-desc {
    color: var(--pr-lookup-text-muted) !important;
}

.player-reg-lookup-card .form-label {
    color: var(--pr-lookup-text) !important;
}

/* Lookup inputs – professional, accessible */
.player-reg-lookup-input {
    border-radius: 0.5rem;
    border: 1px solid var(--pr-lookup-input-border);
    background: var(--pr-lookup-input-bg) !important;
    color: #fff !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.player-reg-lookup-input::placeholder {
    color: rgba(255, 255, 255, 0.45) !important;
}

.player-reg-lookup-input:focus {
    border-color: rgba(128, 0, 0, 0.65);
    background: var(--pr-lookup-input-bg-focus) !important;
    color: #fff !important;
    box-shadow: 0 0 0 0.2rem rgba(128, 0, 0, 0.25);
}

.player-reg-lookup-btn {
    border-radius: 0.5rem;
    font-weight: 600;
    transition: background-color 0.15s ease, transform 0.05s ease;
}

.player-reg-lookup-btn:hover {
    transform: translateY(-1px);
}

.player-reg-lookup-btn:active {
    transform: translateY(0);
}

/* Live search dropdown – appears below name input */
.player-reg-lookup-name-wrap {
    position: relative;
}

.player-reg-lookup-live {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.25rem;
    max-height: 16rem;
    overflow-y: auto;
    background: var(--pr-lookup-input-bg-focus);
    color: var(--pr-lookup-text);
    border: 1px solid var(--pr-lookup-input-border);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.35);
    z-index: 1050;
}

.player-reg-lookup-live.is-visible {
    display: block;
}

.player-reg-lookup-live-item {
    padding: 0.6rem 0.85rem;
    cursor: pointer;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: background-color 0.1s ease;
}

.player-reg-lookup-live-item:last-child {
    border-bottom: none;
}

.player-reg-lookup-live-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.player-reg-lookup-live-name {
    font-weight: 500;
}

.player-reg-lookup-live-email {
    display: block;
    font-size: 0.8rem;
    color: var(--pr-lookup-text-muted);
    margin-top: 0.15rem;
    font-weight: 400;
}

.player-reg-lookup-live-empty {
    padding: 0.75rem 0.85rem;
    color: var(--pr-lookup-text-muted);
    font-size: 0.9rem;
}

/* Lookup dropdown when multiple players found */
.player-reg-lookup-dropdown-wrap {
    display: none;
    max-width: 28rem;
}

.player-reg-lookup-dropdown-wrap .form-label {
    color: var(--pr-lookup-text) !important;
}

.player-reg-lookup-dropdown-wrap.is-visible {
    display: block;
}

.player-reg-lookup-result {
    display: none;
}

.player-reg-lookup-result.is-visible {
    display: block;
}

/* Popover overlay */
.player-reg-popover {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1060;
    padding: 1.5rem;
    align-items: flex-start;
    justify-content: center;
    padding-top: 4rem;
}

.player-reg-popover.is-visible {
    display: flex;
}

.player-reg-popover-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

.player-reg-popover-content {
    position: relative;
    max-width: 28rem;
    width: 100%;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-radius: 1rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
    padding: 1.25rem 1.5rem;
    padding-right: 3rem;
}

[data-bs-theme="dark"] .player-reg-popover-content,
html[data-bs-theme="dark"] .player-reg-popover-content {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5);
}

.player-reg-popover-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--bs-secondary-color);
    cursor: pointer;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, background 0.15s ease;
}

.player-reg-popover-close:hover {
    color: var(--bs-body-color);
    background: rgba(0, 0, 0, 0.06);
}

[data-bs-theme="dark"] .player-reg-popover-close,
html[data-bs-theme="dark"] .player-reg-popover-close {
    color: rgba(255, 255, 255, 0.7);
}

[data-bs-theme="dark"] .player-reg-popover-close:hover,
html[data-bs-theme="dark"] .player-reg-popover-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

/* Lookup result card with update form */
.player-reg-lookup-result-card {
    padding: 1rem 1.25rem;
    background: rgba(25, 135, 84, 0.08);
    border: 1px solid rgba(25, 135, 84, 0.3);
    border-radius: 0.75rem;
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .player-reg-lookup-result-card,
html[data-bs-theme="dark"] .player-reg-lookup-result-card {
    background: rgba(25, 135, 84, 0.2);
    border-color: rgba(25, 135, 84, 0.5);
    color: var(--bs-body-color);
}

.player-reg-lookup-result-header {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .player-reg-lookup-result-header,
html[data-bs-theme="dark"] .player-reg-lookup-result-header {
    color: var(--bs-body-color);
}

.player-reg-update-form .form-control,
.player-reg-update-form .form-select {
    max-width: 20rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .player-reg-update-form .form-control,
[data-bs-theme="dark"] .player-reg-update-form .form-select,
html[data-bs-theme="dark"] .player-reg-update-form .form-control,
html[data-bs-theme="dark"] .player-reg-update-form .form-select {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: rgba(255, 255, 255, 0.2);
}

.player-reg-update-form .player-reg-update-field-wrap label {
    font-weight: 500;
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .player-reg-update-form .player-reg-update-field-wrap label,
html[data-bs-theme="dark"] .player-reg-update-form .player-reg-update-field-wrap label {
    color: var(--bs-body-color);
}

.player-reg-update-btn {
    border-radius: 0.5rem;
    font-weight: 600;
}

.player-reg-on-file {
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .player-reg-on-file,
html[data-bs-theme="dark"] .player-reg-on-file {
    color: rgba(255, 255, 255, 0.7);
}

/* Popover alerts – ensure visibility in dark mode */
.player-reg-popover .alert-success {
    background: rgba(25, 135, 84, 0.2);
    color: #0a3622;
    border-color: rgba(25, 135, 84, 0.5);
}

[data-bs-theme="dark"] .player-reg-popover .alert-success,
html[data-bs-theme="dark"] .player-reg-popover .alert-success {
    background: rgba(25, 135, 84, 0.25);
    color: #75b798;
    border-color: rgba(25, 135, 84, 0.5);
}

.player-reg-popover .alert-danger {
    background: rgba(220, 53, 69, 0.15);
    color: #58151c;
    border-color: rgba(220, 53, 69, 0.4);
}

[data-bs-theme="dark"] .player-reg-popover .alert-danger,
html[data-bs-theme="dark"] .player-reg-popover .alert-danger {
    background: rgba(220, 53, 69, 0.25);
    color: #f1aeb5;
    border-color: rgba(220, 53, 69, 0.5);
}

.player-reg-popover .text-muted {
    color: var(--bs-secondary-color) !important;
}

[data-bs-theme="dark"] .player-reg-popover .text-muted,
html[data-bs-theme="dark"] .player-reg-popover .text-muted {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Badge visibility in popover */
.player-reg-popover .badge.bg-secondary {
    background-color: var(--bs-secondary) !important;
    color: #fff !important;
}

/* Ensure heading/strong text in popover is visible */
.player-reg-popover .player-reg-lookup-result-header strong {
    color: var(--bs-body-color);
}

.player-reg-lookup-select {
    font-size: 0.95rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--pr-lookup-input-border);
    background: var(--pr-lookup-input-bg) !important;
    color: #fff !important;
}

.player-reg-lookup-select:focus {
    border-color: rgba(128, 0, 0, 0.65);
    background: var(--pr-lookup-input-bg-focus) !important;
    color: #fff !important;
    box-shadow: 0 0 0 0.2rem rgba(128, 0, 0, 0.25);
}

/* Section titles and dividers */
.player-reg-section {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.player-reg-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.player-reg-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: #800000;
    margin-bottom: 1rem;
}

[data-bs-theme="dark"] .player-reg-section-title,
[data-bs-theme="dark"] .player-reg-section-title i,
html[data-bs-theme="dark"] .player-reg-section-title,
html[data-bs-theme="dark"] .player-reg-section-title i {
    color: #fff !important;
}

/* Fee block - matches support amount chip styling */
.player-reg-fee {
    margin: 1.5rem 0;
    padding: 1.25rem 1.5rem;
    background: rgba(128, 0, 0, 0.06);
    border-radius: 1rem;
    border: 2px solid var(--bs-border-color);
}

[data-bs-theme="dark"] .player-reg-fee,
html[data-bs-theme="dark"] .player-reg-fee {
    background: rgba(128, 0, 0, 0.15);
    border-color: rgba(255, 255, 255, 0.15);
}

.player-reg-fee-inner {
    font-size: 1.05rem;
}

.player-reg-fee-amount {
    font-weight: 800;
    font-size: 1.35rem;
    color: #800000;
}

.player-reg-fee-note {
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
    margin-top: 0.5rem;
}

/* Dark mode: white icons and fee text */
[data-bs-theme="dark"] .player-reg-fee-inner,
[data-bs-theme="dark"] .player-reg-fee-inner span,
[data-bs-theme="dark"] .player-reg-fee-amount,
[data-bs-theme="dark"] .player-reg-fee-note,
html[data-bs-theme="dark"] .player-reg-fee-inner,
html[data-bs-theme="dark"] .player-reg-fee-inner span,
html[data-bs-theme="dark"] .player-reg-fee-amount,
html[data-bs-theme="dark"] .player-reg-fee-note {
    color: #fff !important;
}

/* Input groups - dark addon with white icons (visible in both themes) */
.player-reg-section .input-group-text {
    background: #4a1515 !important;
    border-color: rgba(128, 0, 0, 0.4) !important;
    color: #fff !important;
}

.player-reg-section .input-group-text i,
.player-reg-section .input-group-text .bi {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

[data-bs-theme="dark"] .player-reg-section .input-group-text,
html[data-bs-theme="dark"] .player-reg-section .input-group-text {
    background: rgba(128, 0, 0, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .player-reg-section .input-group-text i,
[data-bs-theme="dark"] .player-reg-section .input-group-text .bi,
html[data-bs-theme="dark"] .player-reg-section .input-group-text i,
html[data-bs-theme="dark"] .player-reg-section .input-group-text .bi {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Thanks icon - use check for success (support uses heart) */
.support-thanks .bi-check-circle-fill {
    color: #198754;
}