/* ==========================================================================
   BPR Cover Photo
   Dùng các CSS custom property từ profile-redesign.css:
     --bpr-bg, --bpr-bg-card, --bpr-border,
     --bpr-accent, --bpr-accent-soft, --bpr-accent-border,
     --bpr-radius-lg, --bpr-radius-md
   ========================================================================== */

/* --------------------------------------------------------------------------
   COVER SECTION WRAPPER
   Nằm trên cùng của #bpr-profile, ngay trước .bpr-profile-header
   -------------------------------------------------------------------------- */

.bpr-cover-section {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   COVER CONTAINER
   Background mặc định khi chưa có ảnh: gradient tím tối khớp với theme.
   Khi có ảnh: background-image + background-position inject qua inline
   <style> từ PHP/JS (bpr_cover_head_style / updateLiveStyle)
   -------------------------------------------------------------------------- */

.bpr-cover-container {
	position:   relative;
	width:      100%;
	height:     240px;
	overflow:   hidden;

	/* Default background — gradient purple-dark */
	background: linear-gradient(
		145deg,
		#12111b 0%,
		#1a1528 45%,
		#1f1535 100%
	);
	background-size:     cover;
	background-position: center 50%;
	background-repeat:   no-repeat;

	/* Kết nối trực quan với .bpr-header-card bên dưới:
	   bo góc trên, để thẳng góc dưới */
	border-radius: var(--bpr-radius-lg) var(--bpr-radius-lg) 0 0;
	border:        1px solid var(--bpr-border);
	border-bottom: none;

	/* Subtle shimmer pattern khi chưa có ảnh */
	background-image: linear-gradient(
		145deg,
		#12111b 0%,
		#1a1528 45%,
		#1f1535 100%
	);
}

/* Accent line ở đáy container để kết nối với header card */
.bpr-cover-container::after {
	content:    '';
	position:   absolute;
	bottom:     0;
	left:       0;
	right:      0;
	height:     2px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		var(--bpr-accent) 30%,
		var(--bpr-accent) 70%,
		transparent 100%
	);
	opacity: 0.5;
}

/* Đảm bảo .bpr-header-card bên dưới ghép liền, không có gap */
.bpr-cover-section + .bpr-profile-header .bpr-header-card {
	border-top:           none;
	border-radius:        0 0 var(--bpr-radius-lg) var(--bpr-radius-lg);
	border-top-left-radius:  0;
	border-top-right-radius: 0;
}

/* --------------------------------------------------------------------------
   PREVIEW IMG (overlay trong lúc upload / chọn vị trí)
   -------------------------------------------------------------------------- */

.bpr-cover-preview {
	position:    absolute;
	inset:       0;
	width:       100%;
	height:      auto;
	z-index:     2;
	cursor:      grab;
	will-change: transform;
	user-select: none;
	-webkit-user-drag: none;
	display:     block;
}

.bpr-cover-preview[data-locked="1"] {
	cursor:         default;
	pointer-events: none;
}

/* Pulse viền tím nhẹ khi đang kéo */
.bpr-cover-container.bpr-is-dragging {
	outline:        2px solid var(--bpr-accent);
	outline-offset: -2px;
}

/* --------------------------------------------------------------------------
   CONTROLS — nằm góc dưới-phải của cover
   -------------------------------------------------------------------------- */

.bpr-cover-controls {
	position:        absolute;
	right:           14px;
	bottom:          14px;
	z-index:         10;
	display:         flex;
	align-items:     center;
	gap:             8px;
	flex-wrap:       wrap;
	justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   NÚT UPLOAD / SAVE COVER
   -------------------------------------------------------------------------- */

.bpr-cover-upload-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             7px;
	padding:         8px 16px;
	font-size:       13px;
	font-weight:     600;
	line-height:     1;
	color:           #fff;
	background:      rgba(11, 11, 16, 0.6);
	border:          1px solid var(--bpr-accent-border);
	border-radius:   var(--bpr-radius-md);
	cursor:          pointer;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition:      background  .18s ease,
	                 border-color .18s ease,
	                 transform   .12s ease,
	                 opacity     .18s ease;
	white-space:     nowrap;
	-webkit-appearance: none;
	appearance:      none;
}

.bpr-cover-upload-btn:hover {
	background:   var(--bpr-accent-soft);
	border-color: var(--bpr-accent);
}

.bpr-cover-upload-btn:active {
	transform: scale(0.96);
}

/* Trạng thái "Save Cover" — solid accent */
.bpr-cover-upload-btn.is-save-mode {
	background:   var(--bpr-accent);
	border-color: var(--bpr-accent);
}

.bpr-cover-upload-btn.is-save-mode:hover {
	background:   #7c3aed;
	border-color: #7c3aed;
}

/* Trạng thái loading */
.bpr-cover-upload-btn.is-loading,
.bpr-cover-upload-btn:disabled {
	opacity:        0.55;
	cursor:         not-allowed;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   NÚT CANCEL
   -------------------------------------------------------------------------- */

.bpr-cover-cancel-btn {
	display:         inline-flex;
	align-items:     center;
	padding:         7px 13px;
	font-size:       12px;
	font-weight:     600;
	line-height:     1;
	color:           #fff;
	background:      rgba(180, 28, 28, 0.72);
	border:          1px solid rgba(255, 255, 255, .15);
	border-radius:   var(--bpr-radius-md);
	cursor:          pointer;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition:      background .18s ease, transform .12s ease;
	-webkit-appearance: none;
	appearance:      none;
}

.bpr-cover-cancel-btn:hover  { background: rgba(180, 28, 28, 0.95); }
.bpr-cover-cancel-btn:active { transform: scale(0.96); }

/* --------------------------------------------------------------------------
   GỢI Ý KÉO
   -------------------------------------------------------------------------- */

.bpr-cover-drag-hint {
	font-size:       11px;
	color:           rgba(255, 255, 255, .8);
	background:      rgba(11, 11, 16, .55);
	padding:         3px 10px;
	border-radius:   999px;
	pointer-events:  none;
	user-select:     none;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	white-space:     nowrap;
}

/* --------------------------------------------------------------------------
   TOAST NOTIFICATION
   -------------------------------------------------------------------------- */

.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);
	border:     1px solid rgba(255, 100, 100, .3);
}

.bpr-toast.is-visible {
	opacity:   1;
	transform: translateX(-50%) translateY(0);
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
	.bpr-cover-container {
		height:        180px;
		border-radius: var(--bpr-radius-md) var(--bpr-radius-md) 0 0;
	}
}

@media (max-width: 480px) {
	.bpr-cover-container {
		height: 140px;
	}

	.bpr-cover-controls {
		right:  10px;
		bottom: 10px;
		gap:    6px;
	}

	.bpr-cover-upload-btn {
		padding:   6px 12px;
		font-size: 12px;
	}

	.bpr-cover-cancel-btn {
		padding:   5px 10px;
		font-size: 11px;
	}

	.bpr-cover-drag-hint {
		font-size: 10px;
	}
}