/* ==========================================================
   NC Progress Photos — reuses the theme's existing CSS custom
   properties (var(--green-700), var(--border), var(--radius-lg),
   etc.) instead of its own token set, same approach as
   NC Meal Planner, so it matches the rest of the site for free.
   ========================================================== */

.ncpp-login-gate {
	max-width: 460px; margin: 0 auto; text-align: center;
	border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 48px 32px;
}
.ncpp-login-gate-icon { font-size: 40px; margin-bottom: 14px; }
.ncpp-login-gate h3 { font-size: 19px; font-weight: 800; margin: 0 0 10px; }
.ncpp-login-gate p { font-size: 14px; color: var(--text-600); line-height: 1.6; margin: 0 0 24px; }
.ncpp-login-gate-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.ncpp-shell { display: flex; flex-direction: column; gap: 28px; }

/* ── Upload card ── */
.ncpp-upload-card, .ncpp-compare-card {
	border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px;
}
.ncpp-upload-card h3, .ncpp-compare-card h3, .ncpp-gallery-section h3 {
	font-size: 16px; font-weight: 800; margin: 0 0 16px;
}
.ncpp-upload-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.ncpp-file-drop {
	flex: 1; min-width: 180px; border: 2px dashed var(--border); border-radius: var(--radius-md);
	padding: 28px 14px; text-align: center; cursor: pointer; font-size: 13.5px; font-weight: 600;
	color: var(--text-600); display: flex; align-items: center; justify-content: center;
	transition: border-color .15s, background .15s;
}
.ncpp-file-drop:hover { border-color: var(--green-600); background: #f7fbf8; }
.ncpp-file-drop.ncpp-has-file { border-color: var(--green-600); color: var(--green-700); }
.ncpp-upload-fields { display: flex; gap: 12px; flex: 1; min-width: 220px; }
.ncpp-upload-fields > div { flex: 1; }
.ncpp-upload-fields label { display: block; font-size: 11.5px; font-weight: 700; color: var(--text-600); margin-bottom: 5px; }
.ncpp-upload-fields input {
	width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px; font-size: 13.5px; font-family: inherit;
}
.ncpp-upload-status { font-size: 12.5px; color: var(--text-400); text-align: center; margin: 12px 0 0; min-height: 14px; }
.ncpp-upload-status.ncpp-status--ok { color: var(--green-700); font-weight: 600; }
.ncpp-upload-status.ncpp-status--error { color: #b23a3a; font-weight: 600; }

/* ── Before/After slider ── */
.ncpp-compare-selects { display: flex; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.ncpp-compare-selects > div { flex: 1; min-width: 140px; }
.ncpp-compare-selects label { display: block; font-size: 11.5px; font-weight: 700; color: var(--text-600); margin-bottom: 5px; }
.ncpp-compare-selects select {
	width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px; font-size: 13.5px; font-family: inherit;
}

.ncpp-slider {
	position: relative; width: 100%; max-width: 520px; margin: 0 auto;
	aspect-ratio: 3 / 4; border-radius: var(--radius-md); overflow: hidden;
	background: #f1f0ec; user-select: none; touch-action: none;
}
.ncpp-slider-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ncpp-slider-before-wrap {
	position: absolute; inset: 0; width: 50%; overflow: hidden;
}
.ncpp-slider-before-wrap .ncpp-slider-img { width: 100%; height: 100%; }
.ncpp-slider-handle {
	position: absolute; top: 0; bottom: 0; left: 50%; width: 0; cursor: ew-resize;
	display: flex; align-items: center; justify-content: center;
}
.ncpp-slider-handle::before {
	content: ''; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: #fff;
}
.ncpp-slider-handle-grip {
	position: relative; z-index: 2; width: 34px; height: 34px; border-radius: 50%; background: #fff;
	display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--text-900);
	box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.ncpp-slider-label {
	position: absolute; bottom: 10px; font-size: 11px; font-weight: 700; color: #fff;
	background: rgba(0,0,0,.45); padding: 4px 9px; border-radius: 12px;
}
.ncpp-slider-label--left { left: 10px; }
.ncpp-slider-label--right { right: 10px; }

/* ── Gallery ── */
.ncpp-gallery-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px;
}
.ncpp-gallery-empty { color: var(--text-400); font-size: 13.5px; padding: 30px 0; text-align: center; grid-column: 1 / -1; }
.ncpp-gallery-card {
	border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; position: relative;
}
.ncpp-gallery-thumb-wrap { position: relative; aspect-ratio: 3 / 4; background: #f1f0ec; }
.ncpp-gallery-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.ncpp-gallery-del {
	position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; border: none;
	background: rgba(0,0,0,.5); color: #fff; font-size: 11px; cursor: pointer; z-index: 2;
}
.ncpp-gallery-del:hover { background: rgba(0,0,0,.7); }
.ncpp-gallery-info { padding: 10px; }
.ncpp-gallery-date { font-size: 12px; font-weight: 700; }
.ncpp-gallery-weight { font-size: 11.5px; color: var(--text-400); margin-top: 2px; }

@media (max-width: 640px) {
	.ncpp-upload-row { flex-direction: column; }
	.ncpp-upload-fields { flex-direction: column; }
}