/**
 * SR Product 360° View — product 360° metabox styles.
 * Loaded only on the product edit screen (see Admin\Assets).
 * Task 035 styles the container shell (header/pill/intro/regions); later Phase-4
 * tasks add the grid, variation chips and override-panel styles.
 */

/* Header row carrying the Active/Inactive status pill. */
.sr360-metabox__header {
	display: flex;
	align-items: center;
	margin: 0 0 10px;
}

/* Status pill — mirrors the settings UI pill; green when a set exists. */
.sr360-pill {
	display: inline-block;
	font-size: 11.5px;
	line-height: 1.6;
	padding: 2px 9px;
	border-radius: 999px;
	background: #f0f0f1;
	color: #50575e;
}

.sr360-pill--set {
	background: #e6f2e9;
	color: #00753e;
}

/* Intro help line under the header. */
.sr360-metabox__intro {
	margin: 0 0 12px;
	color: #646970;
	font-size: 12.5px;
}

/* Regions later tasks populate; empty ones take no vertical space. */
.sr360-metabox__region:empty {
	margin: 0;
}

/* ---- Preview Spin modal (task 041) -------------------------------------- */

.sr360-modal {
	position: fixed;
	inset: 0;
	z-index: 160000; /* above WP admin bar + media modal backdrop */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba( 0, 0, 0, 0.7 );
}

.sr360-modal[hidden] {
	display: none;
}

.sr360-modal__dialog {
	background: #fff;
	border-radius: 4px;
	max-width: 92vw;
	max-height: 92vh;
	overflow: auto;
	box-shadow: 0 6px 30px rgba( 0, 0, 0, 0.35 );
}

.sr360-modal__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-bottom: 1px solid #dcdcde;
}

.sr360-modal__title {
	margin: 0;
	font-size: 15px;
}

.sr360-modal__close {
	margin-inline-start: auto;
	width: 30px;
	height: 30px;
	line-height: 1;
	font-size: 20px;
	border: 1px solid #dcdcde;
	border-radius: 3px;
	background: #f6f7f7;
	color: #50575e;
	cursor: pointer;
}

.sr360-modal__close:hover {
	background: #f0f0f1;
}

.sr360-modal__stage {
	width: 600px;
	max-width: 84vw;
	aspect-ratio: 1;
	margin: 14px;
}

.sr360-modal__fallback {
	margin: 14px;
	color: #646970;
}

/* ---- AJAX message + inline validation (task 040) ------------------------ */

.sr360-metabox__message {
	margin: 0 0 12px;
	padding: 8px 12px;
	border-inline-start: 4px solid #72aee6;
	background: #f0f6fc;
	font-size: 13px;
}

.sr360-metabox__message.is-error {
	border-inline-start-color: #d63638;
	background: #fcf0f1;
}

.sr360-ovr-error {
	flex-basis: 100%;
	color: #d63638;
	font-size: 12.5px;
}

.sr360-ovr-row.has-error .sr360-ovr-input {
	border-color: #d63638;
}

/* ---- Override panel (task 038) ------------------------------------------ */

.sr360-overrides {
	margin: 14px 0 0;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	background: #fbfbfc;
}

.sr360-overrides__summary {
	padding: 11px 14px;
	font-weight: 600;
	font-size: 13.5px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
}

.sr360-overrides__count {
	margin-inline-start: auto;
	font-weight: 400;
	font-size: 11.5px;
	padding: 2px 9px;
	border-radius: 999px;
	background: #f0f0f1;
	color: #50575e;
}

.sr360-overrides__body {
	padding: 0 14px 12px;
}

.sr360-overrides__intro {
	margin: 8px 0 4px;
	color: #646970;
	font-size: 12.5px;
}

.sr360-ovr-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 0;
	border-top: 1px solid #f0f0f1;
	font-size: 13.5px;
}

.sr360-ovr-row__label {
	width: 170px;
	flex-shrink: 0;
	font-weight: 600;
}

.sr360-ovr-state {
	min-width: 150px;
}

.sr360-ovr-value {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.sr360-ovr-value.is-locked {
	opacity: 0.45;
}

.sr360-ovr-unit,
.sr360-ovr-media__label {
	color: #646970;
	font-size: 12.5px;
}

.sr360-ovr-check {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-inline-end: 8px;
}

.sr360-overrides__more {
	margin: 10px 0 0;
}

/* ---- Variation chips (task 037) ----------------------------------------- */

.sr360-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 14px;
}

.sr360-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	padding: 5px 12px;
	border-radius: 999px;
	border: 1px solid #c3c4c7;
	background: #f6f7f7;
	color: #50575e;
	cursor: pointer;
}

.sr360-chip:hover {
	background: #f0f0f1;
}

.sr360-chip.is-active {
	background: #2271b1;
	border-color: #2271b1;
	color: #fff;
	font-weight: 600;
}

.sr360-chip:focus {
	outline: 2px solid #2271b1;
	outline-offset: 1px;
}

.sr360-chip.is-active:focus {
	outline-color: #fff;
	outline-offset: -3px;
}

.sr360-chip__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #00a32a;
}

.sr360-chip__dot.is-unset {
	background: #c3c4c7;
}

.sr360-chip.is-active .sr360-chip__dot.is-unset {
	background: #ffffff80;
}

/* ---- Frame grid (task 036) ---------------------------------------------- */

.sr360-frames__count {
	margin: 0 0 10px;
	color: #00753e;
	font-size: 13px;
}

.sr360-frames__grid {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 76px, 1fr ) );
	gap: 8px;
}

.sr360-frame {
	position: relative;
	aspect-ratio: 1;
	background: #f0f0f1;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	overflow: hidden;
	cursor: grab;
}

.sr360-frame:focus {
	outline: 2px solid #2271b1;
	outline-offset: 1px;
}

.sr360-frame__thumb,
.sr360-frame__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sr360-frame__num {
	position: absolute;
	top: 3px;
	inset-inline-start: 4px;
	font-size: 10.5px;
	color: #50575e;
	background: rgba( 255, 255, 255, 0.8 );
	border-radius: 3px;
	padding: 0 4px;
}

.sr360-frame__controls {
	position: absolute;
	top: 2px;
	inset-inline-end: 2px;
	display: flex;
	gap: 2px;
	opacity: 0;
	transition: opacity 0.12s;
}

.sr360-frame:hover .sr360-frame__controls,
.sr360-frame:focus .sr360-frame__controls,
.sr360-frame:focus-within .sr360-frame__controls {
	opacity: 1;
}

.sr360-frame__controls button {
	width: 18px;
	height: 18px;
	line-height: 1;
	padding: 0;
	font-size: 12px;
	border: 1px solid #dcdcde;
	border-radius: 3px;
	background: #fff;
	color: #50575e;
	cursor: pointer;
}

.sr360-frame__remove {
	color: #b32d2e;
}

.sr360-frame--placeholder {
	border: 1px dashed #2271b1;
	background: #f0f6fc;
}

.sr360-frames__more,
.sr360-frames__hint {
	margin: 0 0 10px;
	font-size: 12.5px;
	color: #646970;
}

.sr360-frames__actions {
	margin: 12px 0 0;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.sr360-frames__empty {
	margin: 0 0 10px;
	color: #646970;
	font-size: 13px;
}

/* ---- Colour field (native HTML5 picker + Clear) ------------------------- */
.sr360-color {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.sr360-color__picker {
	width: 46px;
	height: 30px;
	padding: 2px;
	border: 1px solid #8c8f94;
	border-radius: 3px;
	background: #fff;
	cursor: pointer;
}

.sr360-color__picker:disabled {
	cursor: default;
	opacity: 0.5;
}

/* Override-panel media picker: thumbnail of the currently chosen image. The settings
   screen has its own equivalent rules in settings.css. */
.sr360-ovr-media {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.sr360-ovr-media__thumb img {
	display: block;
	max-height: 40px;
	width: auto;
	border-radius: 3px;
}

/* ---- Deleted-attachment frames (task 135) -------------------------------- */

/* A frame whose attachment has been removed from the Media Library renders no image at
   all, so without a marker it is a blank tile indistinguishable from one still loading.
   Mirrors the --placeholder treatment, in the warning colour rather than the accent. */
.sr360-frame--missing {
	border: 1px dashed #b32d2e;
	background: #fcf0f1;
}

.sr360-frame--missing .sr360-frame__thumb {
	display: flex;
	align-items: center;
	justify-content: center;
}

.sr360-frame__missing-mark {
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
	color: #b32d2e;
}

/* Sits directly under the count line, so the "N images selected" claim and the caveat
   to it are read together. `notice-alt` gives it the flat in-content notice styling
   rather than the floating admin-notice look. */
.sr360-frames__missing {
	margin: 0 0 10px;
	padding: 8px 12px;
	font-size: 12.5px;
}

.sr360-frames__missing[hidden] {
	display: none;
}


/* ---- The `hidden` attribute must actually hide, inside wp-admin ------------
   ⛔ WordPress core ships `.wp-core-ui .button { display: inline-block }` at
   specificity (0,2,0), which OUTRANKS the user-agent `[hidden] { display: none }`
   rule entirely. So `el.hidden = true` on any wp-admin button leaves it fully
   visible while the script believes it is gone.

   That is not theoretical: the "Preview spin" button is hidden when a context has
   no frames, and on a product whose 360° sets live only on its variations it stayed
   on screen — offering an action that could only ever answer "select images first".

   Scoped to (0,3,0) so it beats core's rule, and written for the whole metabox
   rather than that one button, because the next element someone hides will hit
   exactly the same trap. See the admin-radio-css-specificity notes. */
.wp-core-ui .sr360-metabox [hidden] {
	display: none;
}