/* ==========================================================================
   LatePoint – Customer avatar upload & crop modal
   ========================================================================== */

/* ── Profile-tab avatar preview ─────────────────────────────────────────── */
.lp-avatar-upload-wrap {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	margin-bottom:   24px;
}

.lp-avatar-upload-preview {
	position: relative;
	width:    96px;
	height:   96px;
	cursor:   pointer;
}

.lp-avatar-preview-img {
	display:      block;
	width:        96px;
	height:       96px;
	border-radius: 50%;
	object-fit:   cover;
	border:       3px solid #e5e5e5;
	transition:   opacity 0.2s;
}

.lp-avatar-upload-preview:hover .lp-avatar-preview-img,
.lp-avatar-upload-preview:focus-visible .lp-avatar-preview-img {
	opacity: 0.72;
	outline: none;
}

.lp-avatar-upload-overlay {
	position:        absolute;
	inset:           0;
	display:         flex;
	align-items:     center;
	justify-content: center;
	border-radius:   50%;
	background:      rgba(0, 0, 0, 0.42);
	opacity:         0;
	transition:      opacity 0.2s;
	pointer-events:  none;
}

.lp-avatar-upload-preview:hover   .lp-avatar-upload-overlay,
.lp-avatar-upload-preview:focus-visible .lp-avatar-upload-overlay {
	opacity: 1;
}

.lp-avatar-upload-overlay svg {
	width:  26px;
	height: 26px;
	fill:   #fff;
}

.lp-avatar-change-label {
	margin-top:      8px;
	font-size:       13px;
	color:           #777;
	cursor:          pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition:      color 0.15s;
}

.lp-avatar-change-label:hover { color: #333; }

/* ── Modal backdrop ─────────────────────────────────────────────────────── */
#lp-avatar-crop-modal {
	position: fixed;
	inset:    0;
	z-index:  999999;
}

.lp-acm-overlay {
	position:        absolute;
	inset:           0;
	background:      rgba(0, 0, 0, 0.55);
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         16px;
}

/* ── Dialog box ─────────────────────────────────────────────────────────── */
.lp-acm-dialog {
	background:    #fff;
	border-radius: 14px;
	width:         100%;
	max-width:     360px;
	box-shadow:    0 24px 64px rgba(0, 0, 0, 0.28);
	overflow:      hidden;
	outline:       none;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.lp-acm-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         16px 20px 14px;
	border-bottom:   1px solid #f0f0f0;
}

.lp-acm-title {
	font-size:   15px;
	font-weight: 600;
	color:       #1a1a1a;
}

.lp-acm-close {
	background:  none;
	border:      none;
	font-size:   24px;
	line-height: 1;
	cursor:      pointer;
	color:       #aaa;
	padding:     0 2px;
	transition:  color 0.15s;
}

.lp-acm-close:hover { color: #333; }

/* ── Body ───────────────────────────────────────────────────────────────── */
.lp-acm-body {
	padding: 20px 20px 16px;
}

.lp-acm-frame-wrap {
	display:         flex;
	justify-content: center;
	margin-bottom:   12px;
}

/* The circular crop frame – image is repositioned/scaled inside it */
.lp-acm-frame {
	width:        280px;
	height:       280px;
	border-radius: 50%;
	overflow:     hidden;
	position:     relative;
	cursor:       grab;
	touch-action: none;
	background:   #f0f0f0;
	box-shadow:   0 0 0 2px #ddd, 0 0 0 6px rgba(0, 0, 0, 0.07);
	user-select:  none;
	-webkit-user-select: none;
}

.lp-acm-frame:active { cursor: grabbing; }

.lp-acm-frame img {
	position:       absolute;
	top:            0;
	left:           0;
	transform-origin: 0 0;
	max-width:      none;
	pointer-events: none;
	user-select:    none;
	-webkit-user-drag: none;
}

/* ── Hint text ──────────────────────────────────────────────────────────── */
.lp-acm-hint {
	text-align:   center;
	font-size:    12px;
	color:        #999;
	margin:       0 0 14px;
	line-height:  1.5;
}

/* ── Zoom slider row ────────────────────────────────────────────────────── */
.lp-acm-zoom {
	display:     flex;
	align-items: center;
	gap:         10px;
}

.lp-acm-zoom-icon {
	flex-shrink: 0;
	width:       18px;
	height:      18px;
	color:       #aaa;
}

#lp-acm-zoom-range {
	flex:               1;
	-webkit-appearance: none;
	appearance:         none;
	height:             4px;
	border-radius:      2px;
	background:         #e0e0e0;
	outline:            none;
	cursor:             pointer;
}

#lp-acm-zoom-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width:        18px;
	height:       18px;
	border-radius: 50%;
	background:   #4a6cf7;
	cursor:       pointer;
	border:       none;
	box-shadow:   0 1px 5px rgba(0, 0, 0, 0.22);
}

#lp-acm-zoom-range::-moz-range-thumb {
	width:        18px;
	height:       18px;
	border-radius: 50%;
	background:   #4a6cf7;
	cursor:       pointer;
	border:       none;
}

/* ── Footer / action buttons ────────────────────────────────────────────── */
.lp-acm-footer {
	display:         flex;
	justify-content: flex-end;
	gap:             10px;
	padding:         14px 20px 16px;
	border-top:      1px solid #f0f0f0;
}

.lp-acm-btn {
	padding:       9px 20px;
	border-radius: 8px;
	font-size:     14px;
	font-weight:   500;
	cursor:        pointer;
	border:        none;
	transition:    background 0.15s, opacity 0.15s;
	line-height:   1.4;
}

.lp-acm-btn:disabled {
	opacity: 0.55;
	cursor:  not-allowed;
}

.lp-acm-btn-cancel {
	background: #f0f0f0;
	color:      #444;
}

.lp-acm-btn-cancel:hover:not(:disabled) { background: #e4e4e4; }

.lp-acm-btn-save {
	background: #4a6cf7;
	color:      #fff;
}

.lp-acm-btn-save:hover:not(:disabled) { background: #3a5ce0; }