/* ==========================================================================
   BPR Avatar Upload v2 — background-image crop approach
   ========================================================================== */

/* ==========================================================================
   CAMERA BUTTON — giữa avatar, hiện khi hover
   ========================================================================== */

.bpr-avatar-wrap {
    position:     relative;
    display:      inline-block;
    cursor:       pointer;
}

.bpr-avatar-wrap::before {
    content:        '';
    position:       absolute;
    inset:          0;
    border-radius:  50%;
    background:     rgba(0, 0, 0, 0);
    transition:     background .2s ease;
    pointer-events: none;
    z-index:        1;
}

.bpr-avatar-wrap:hover::before {
    background: rgba(0, 0, 0, 0.32);
}

.bpr-avatar-edit-btn {
    position:        absolute;
    top:             50%;
    left:            50%;
    transform:       translate(-50%, -50%);
    z-index:         2;
    width:           36px;
    height:          36px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      rgba(0, 0, 0, 0.45);
    border:          1.5px solid rgba(255, 255, 255, 0.35);
    border-radius:   50%;
    color:           #fff;
    cursor:          pointer;
    padding:         0;
    opacity:         0;
    transition:      opacity .2s ease, background .15s ease;
    -webkit-appearance: none;
    appearance:      none;
}

.bpr-avatar-wrap:hover .bpr-avatar-edit-btn { opacity: 0.72; }
.bpr-avatar-edit-btn:hover                  { background: rgba(0,0,0,.65) !important; opacity: 1 !important; }
.bpr-avatar-edit-btn:focus-visible          { opacity: 1; outline: 2px solid var(--bpr-accent); outline-offset: 3px; }

/* ==========================================================================
   MODAL
   ========================================================================== */

body.bpr-modal-open { overflow: hidden; }

.bpr-avatar-modal {
    display:         none;
    position:        fixed;
    inset:           0;
    z-index:         99990;
    align-items:     center;
    justify-content: center;
}
.bpr-avatar-modal.is-open { display: flex; }

.bpr-modal-backdrop {
    position:   absolute;
    inset:      0;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation:  bpr-fade-in .18s ease;
}

.bpr-modal-box {
    position:      relative;
    z-index:       1;
    width:         min(94vw, 440px);
    background:    var(--bpr-bg-card);
    border:        1px solid var(--bpr-border);
    border-radius: var(--bpr-radius-lg);
    overflow:      hidden;
    animation:     bpr-slide-up .2s ease;
    max-height:    92vh;
    overflow-y:    auto;
}

@keyframes bpr-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes bpr-slide-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.bpr-modal-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         16px 20px 12px;
    border-bottom:   1px solid var(--bpr-border);
    position:        sticky;
    top:             0;
    background:      var(--bpr-bg-card);
    z-index:         1;
}
.bpr-modal-title {
    font-size: 15px; font-weight: 700; color: var(--bpr-text); margin: 0;
}
.bpr-modal-close {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    background: transparent; border: none; border-radius: var(--bpr-radius-md);
    color: var(--bpr-text-muted); cursor: pointer; padding: 0;
    transition: background .15s ease, color .15s ease;
    -webkit-appearance: none; appearance: none;
}
.bpr-modal-close:hover { background: var(--bpr-accent-soft); color: var(--bpr-accent); }

.bpr-modal-step { padding: 20px; }
.bpr-hidden     { display: none !important; }

/* ==========================================================================
   DROP ZONE
   ========================================================================== */

.bpr-drop-zone {
    border: 2px dashed var(--bpr-accent-border);
    border-radius: var(--bpr-radius-lg);
    background: var(--bpr-accent-soft);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
    outline: none;
}
.bpr-drop-zone:hover,
.bpr-drop-zone:focus-visible,
.bpr-drop-zone.is-dragover {
    border-color: var(--bpr-accent);
    background:   rgba(139,92,246,.16);
}
.bpr-drop-inner {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 10px; padding: 32px 20px;
    text-align: center; pointer-events: none;
}
.bpr-drop-icon   { color: var(--bpr-accent); line-height: 1; }
.bpr-drop-text   { color: var(--bpr-text); font-size: 14px; margin: 0; }
.bpr-drop-browse { color: var(--bpr-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.bpr-drop-hint   { color: var(--bpr-text-muted); font-size: 12px; margin: 0; }

.bpr-delete-wrap { text-align: center; margin-top: 12px; }
.bpr-delete-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; font-size: 12px; font-weight: 600;
    color: #f87171;
    background: rgba(248,113,113,.08);
    border: 1px solid rgba(248,113,113,.25);
    border-radius: var(--bpr-radius-md);
    cursor: pointer; transition: background .15s ease;
    -webkit-appearance: none; appearance: none;
}
.bpr-delete-btn:hover { background: rgba(248,113,113,.18); }

/* ==========================================================================
   CROP FRAME
   ========================================================================== */

.bpr-crop-frame {
    position:      relative;
    width:         360px;
    height:        360px;
    max-width:     100%;
    aspect-ratio:  1 / 1;
    overflow:      hidden;
    background:    var(--bpr-bg);
    border:        1px solid var(--bpr-border);
    border-radius: var(--bpr-radius-lg);
    margin:        0 auto;
    user-select:   none;
}

/* ==========================================================================
   CROP CANVAS (div với background-image)
   Thay thế <img> + CSS transform
   backgroundSize     = kích thước hiển thị của ảnh
   backgroundPosition = offset (dx, dy)
   ========================================================================== */
.bpr-crop-canvas {
    position:            absolute;
    inset:               0;
    z-index:             1;
    background-repeat:   no-repeat;
    background-size:     auto;
    background-position: 0 0;
    cursor:              grab;
    user-select:         none;
    /* Không dùng will-change để tránh composite layer issues */
}

/* Overlay tối bên ngoài vòng tròn — màu set bởi JS (radial-gradient) */
.bpr-crop-overlay {
    position:       absolute;
    inset:          0;
    z-index:        2;
    pointer-events: none;
}

/* Viền tròn tím + box-shadow tối ngoài vòng tròn */
.bpr-crop-circle {
    position:       absolute;
    inset:          0;
    z-index:        3;
    border-radius:  50%;
    border:         2px solid var(--bpr-accent);
    pointer-events: none;
    box-shadow:     0 0 0 9999px rgba(0,0,0,.55);
}

.bpr-crop-drag-hint {
    position:       absolute;
    bottom:         12px;
    left:           50%;
    transform:      translateX(-50%);
    z-index:        4;
    font-size:      11px;
    color:          rgba(255,255,255,.8);
    background:     rgba(0,0,0,.5);
    padding:        3px 12px;
    border-radius:  999px;
    pointer-events: none;
    white-space:    nowrap;
    backdrop-filter: blur(4px);
}

/* ==========================================================================
   ZOOM SLIDER
   ========================================================================== */

.bpr-crop-zoom {
    display: flex; align-items: center; gap: 10px;
    margin: 14px auto 0; width: min(360px, 100%);
    color: var(--bpr-accent);
}
.bpr-crop-zoom svg { flex-shrink: 0; }

#bpr-crop-zoom-slider {
    flex: 1; -webkit-appearance: none; appearance: none;
    height: 4px; background: var(--bpr-border);
    border-radius: 2px; outline: none; cursor: pointer;
}
#bpr-crop-zoom-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 16px; height: 16px;
    border-radius: 50%; background: var(--bpr-accent);
    border: 2px solid var(--bpr-bg-card); cursor: pointer;
    transition: transform .12s ease;
}
#bpr-crop-zoom-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
#bpr-crop-zoom-slider::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--bpr-accent); border: 2px solid var(--bpr-bg-card); cursor: pointer;
}
#bpr-crop-zoom-slider::-moz-range-track {
    background: var(--bpr-border); height: 4px; border-radius: 2px;
}

/* ==========================================================================
   CROP ACTION BUTTONS
   ========================================================================== */

.bpr-crop-actions {
    display: flex; gap: 10px; margin-top: 16px;
}
.bpr-btn-primary,
.bpr-btn-secondary {
    flex: 1; display: inline-flex; align-items: center; justify-content: center;
    padding: 9px 16px; font-size: 13px; font-weight: 600;
    border-radius: var(--bpr-radius-md); cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
    -webkit-appearance: none; appearance: none;
    border: 1px solid transparent; white-space: nowrap;
}
.bpr-btn-secondary {
    color: var(--bpr-text-muted); background: transparent;
    border-color: var(--bpr-border); flex: 0 0 auto;
}
.bpr-btn-secondary:hover { border-color: var(--bpr-text-muted); color: var(--bpr-text); }
.bpr-btn-primary  { color: #fff; background: var(--bpr-accent); border-color: var(--bpr-accent); }
.bpr-btn-primary:hover    { background: #7c3aed; border-color: #7c3aed; }
.bpr-btn-primary:disabled { opacity: .55; pointer-events: none; }

/* ==========================================================================
   LOADING SPINNER
   ========================================================================== */

.bpr-spinner-wrap {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 16px; padding: 40px 20px; min-height: 180px;
}
.bpr-spinner {
    width: 36px; height: 36px;
    border: 3px solid var(--bpr-border);
    border-top: 3px solid var(--bpr-accent);
    border-radius: 50%;
    animation: bpr-spin .7s linear infinite;
}
@keyframes bpr-spin { to { transform: rotate(360deg); } }
.bpr-spinner-text { color: var(--bpr-text-muted); font-size: 13px; margin: 0; }

/* ==========================================================================
   TOAST
   ========================================================================== */

.bpr-toast {
    position: fixed; top: 20px; left: 50%;
    transform: translateX(-50%) translateY(-10px);
    z-index: 999999; padding: 10px 22px;
    font-size: 13px; font-weight: 600; color: #fff;
    border-radius: var(--bpr-radius-md);
    pointer-events: none; opacity: 0;
    transition: opacity .22s ease, transform .22s ease;
    white-space: nowrap;
}
.bpr-toast--success { background: rgba(20,20,28,.95); border: 1px solid var(--bpr-accent-border); }
.bpr-toast--error   { background: rgba(180,28,28,.92); }
.bpr-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 480px) {
    .bpr-avatar-modal.is-open { align-items: flex-end; }
    .bpr-modal-box {
        width: 100vw; max-height: 92dvh; border-radius: var(--bpr-radius-lg) var(--bpr-radius-lg) 0 0;
        position: fixed; bottom: 0; left: 0; right: 0;
    }
    .bpr-crop-frame { width: calc(100vw - 40px); }
    .bpr-crop-zoom  { width: calc(100vw - 40px); }
}