/**
 * Photo uploader - The Photo Shop
 *
 * Tokens mirror Elementor kit 2887 so the uploader matches the rest of the
 * site. They are redeclared here rather than imported because this is a
 * plugin: it has to look right even if the theme changes.
 */

.tps-pu,
.tps-pu-dialog {
	--pu-teal:   #0E9594;
	--pu-bright: #11B8B6;
	--pu-purple: #4E36A3;
	--pu-coral:  #FF5544;
	--pu-ink:    #252525;
	--pu-rule:   #ECECEC;
	--pu-muted:  #6B6B6B;
	--pu-surface:#F7F9F9;

	--pu-display: "Oswald", sans-serif;
	--pu-body:    "Inter", sans-serif;
}

.tps-pu {
	margin: 1.25rem 0;
	font-family: var(--pu-body);
}

/* ================================================= button reset -------
 *
 * Hello Elementor's reset.css styles every bare <button>:
 *
 *   button          { border: 1px solid #cc3366; color: #cc3366;
 *                     padding: .5rem 1rem; border-radius: 3px;
 *                     display: inline-block; }
 *   button:hover,
 *   button:focus    { background-color: #cc3366; color: #fff; }
 *
 * The :focus half is the one that bites: a button keeps focus after the
 * dialog closes, so the pink fill stays on screen. The padding and the
 * inline-block break the centring of the close and remove icons.
 *
 * Everything below is stripped back first. Component rules then re-apply
 * what we want, and each one restates :hover and :focus at a specificity
 * above button:focus (0,1,1), which is why they all carry a parent prefix.
 */

.tps-pu button,
.tps-pu-dialog button {
	appearance: none;
	-webkit-appearance: none;
	width: auto;
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	background: none;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	text-align: inherit;
	text-transform: none;
	letter-spacing: normal;
	text-decoration: none;
	cursor: pointer;
}

.tps-pu button:hover,
.tps-pu button:focus,
.tps-pu-dialog button:hover,
.tps-pu-dialog button:focus {
	background-color: transparent;
	color: inherit;
	text-decoration: none;
	box-shadow: none;
}

/* The native quantity box is driven by the uploader, not the customer. */
.tps-pu-qty-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ===================================================== empty state drop */

.tps-pu .tps-pu-drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	width: 100%;
	padding: 1.75rem 1.25rem;
	background: var(--pu-surface);
	border: 2px dashed var(--pu-rule);
	border-radius: 12px;
	cursor: pointer;
	text-align: center;
	color: var(--pu-ink);
	transition: border-color 0.15s ease, background 0.15s ease;
}

.tps-pu .tps-pu-drop:hover,
.tps-pu .tps-pu-drop:focus {
	border-color: var(--pu-bright);
	background: #fff;
	background-color: #fff;
	color: var(--pu-ink);
}

.tps-pu .tps-pu-drop:focus-visible {
	outline: 3px solid var(--pu-purple);
	outline-offset: 2px;
}

.tps-pu .tps-pu-drop svg { color: var(--pu-teal); }

.tps-pu-drop__title {
	font-family: var(--pu-display);
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.tps-pu-drop__hint {
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--pu-muted);
	max-width: 36ch;
}

/* ======================================================= filled summary */

.tps-pu-summary {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	padding: 0.875rem 1rem;
	background: var(--pu-surface);
	border-radius: 12px;
}

.tps-pu-summary__strip {
	display: flex;
	gap: 0.3rem;
	flex: 0 0 auto;
}

.tps-pu-summary__strip img {
	width: 2.5rem;
	height: 2.5rem;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}

.tps-pu-summary__chip,
.tps-pu-summary__more {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 6px;
	background: #fff;
	border: 1px solid var(--pu-rule);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--pu-muted);
	text-transform: uppercase;
}

.tps-pu-summary__meta {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	flex: 1 1 auto;
	flex-wrap: wrap;
}

.tps-pu-summary__meta strong {
	font-family: var(--pu-display);
	font-size: 0.9375rem;
	font-weight: 600;
}

.tps-pu .tps-pu-summary__edit {
	padding: 0;
	font-size: 0.8125rem;
	color: var(--pu-teal);
	text-decoration: underline;
	cursor: pointer;
}

.tps-pu .tps-pu-summary__edit:hover,
.tps-pu .tps-pu-summary__edit:focus {
	color: var(--pu-ink);
	text-decoration: underline;
}

/* ================================================================ error */

.tps-pu-error,
.tps-pu-dialog__error {
	margin: 0.75rem 0 0;
	padding: 0.65rem 0.9rem;
	background: #FFF4F2;
	border-left: 3px solid var(--pu-coral);
	border-radius: 0 6px 6px 0;
	font-size: 0.875rem;
	color: var(--pu-ink);
}

/* =============================================================== dialog */

.tps-pu-dialog {
	width: min(56rem, calc(100vw - 2rem));
	max-width: none;
	max-height: calc(100vh - 4rem);
	padding: 0;
	border: 0;
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
	color: var(--pu-ink);
	font-family: var(--pu-body);
	overflow: hidden;
}

.tps-pu-dialog::backdrop {
	background: rgba(20, 28, 28, 0.55);
}

.tps-pu-dialog__form {
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 4rem);
	margin: 0;
}

.tps-pu-dialog__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 1.5rem;
	border-bottom: 1px solid var(--pu-rule);
	flex: 0 0 auto;
}

.tps-pu-dialog__head h2 {
	margin: 0;
	font-family: var(--pu-display);
	font-size: 1.125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.tps-pu-dialog .tps-pu-dialog__close {
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	padding: 0;
	display: grid;
	place-items: center;
	border-radius: 50%;
	font-size: 1.5rem;
	line-height: 0;
	color: var(--pu-muted);
}

.tps-pu-dialog .tps-pu-dialog__close:hover,
.tps-pu-dialog .tps-pu-dialog__close:focus {
	background-color: var(--pu-surface);
	color: var(--pu-ink);
}

.tps-pu-dialog__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 1.25rem 1.5rem;
	-webkit-overflow-scrolling: touch;
}

/* Drop zone inside the dialog */

.tps-pu-zone {
	display: grid;
	place-items: center;
	padding: 1.5rem;
	background: var(--pu-surface);
	border: 2px dashed var(--pu-rule);
	border-radius: 12px;
	cursor: pointer;
	text-align: center;
}

.tps-pu-zone.is-over {
	border-color: var(--pu-teal);
	background: #fff;
}

.tps-pu-zone__text strong {
	display: block;
	font-family: var(--pu-display);
	font-size: 0.9375rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.tps-pu-zone__text span {
	font-size: 0.8125rem;
	color: var(--pu-muted);
}

/* Tile grid */

.tps-pu-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
	gap: 1rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.tps-pu-grid:empty { margin: 0; }

.tps-pu-tile {
	margin: 0;
	text-align: center;
}

.tps-pu-tile__preview {
	position: relative;
	aspect-ratio: 1;
	border-radius: 10px;
	overflow: hidden;
	background: var(--pu-surface);
	display: grid;
	place-items: center;
}

.tps-pu-tile__preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tps-pu-tile__noimg { color: var(--pu-muted); }

.tps-pu-tile.is-failed .tps-pu-tile__preview {
	background: #FFF4F2;
	box-shadow: inset 0 0 0 2px var(--pu-coral);
}

.tps-pu-tile__spinner {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.7);
	display: grid;
	place-items: center;
}

.tps-pu-tile__spinner::after {
	content: "";
	width: 1.5rem;
	height: 1.5rem;
	border: 2px solid var(--pu-rule);
	border-top-color: var(--pu-teal);
	border-radius: 50%;
	animation: tps-pu-spin 0.7s linear infinite;
}

@keyframes tps-pu-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.tps-pu-tile__spinner::after { animation-duration: 2s; }
}

.tps-pu-dialog .tps-pu-tile__remove {
	position: absolute;
	top: 0.3rem;
	right: 0.3rem;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	display: grid;
	place-items: center;
	background-color: rgba(0, 0, 0, 0.55);
	color: #fff;
	border-radius: 50%;
	font-size: 1.05rem;
	line-height: 0;
}

.tps-pu-dialog .tps-pu-tile__remove:hover,
.tps-pu-dialog .tps-pu-tile__remove:focus {
	background-color: var(--pu-coral);
	color: #fff;
}

.tps-pu-tile__name {
	margin: 0.4rem 0 0.35rem;
	font-size: 0.75rem;
	color: var(--pu-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tps-pu-tile__qty label {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--pu-rule);
	border-radius: 50px;
	overflow: hidden;
	background: #fff;
}

.tps-pu-dialog .tps-pu-tile__qty button {
	width: 1.9rem;
	padding: 0;
	font-size: 1rem;
	line-height: 1;
	color: var(--pu-muted);
}

.tps-pu-dialog .tps-pu-tile__qty button:hover,
.tps-pu-dialog .tps-pu-tile__qty button:focus {
	background-color: var(--pu-surface);
	color: var(--pu-ink);
}

.tps-pu-tile__qty input {
	width: 2.4rem;
	padding: 0.35rem 0;
	border: 0;
	border-left: 1px solid var(--pu-rule);
	border-right: 1px solid var(--pu-rule);
	font-family: var(--pu-display);
	font-size: 0.9375rem;
	text-align: center;
	background: none;
	-moz-appearance: textfield;
}

.tps-pu-tile__qty input::-webkit-outer-spin-button,
.tps-pu-tile__qty input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Footer */

.tps-pu-dialog__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding: 1rem 1.5rem;
	border-top: 1px solid var(--pu-rule);
	background: var(--pu-surface);
	flex: 0 0 auto;
}

.tps-pu-dialog__totals {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	font-size: 0.875rem;
	color: var(--pu-muted);
}

.tps-pu-dialog__totals strong {
	font-family: var(--pu-display);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--pu-ink);
}

.tps-pu-dialog .tps-pu-dialog__save {
	padding: 0.8rem 1.75rem;
	font-family: var(--pu-display);
	font-size: 0.9375rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #fff;
	background-color: var(--pu-teal);
	border-radius: 50px;
	cursor: pointer;
}

.tps-pu-dialog .tps-pu-dialog__save:hover:not(:disabled),
.tps-pu-dialog .tps-pu-dialog__save:focus:not(:disabled) {
	background-color: var(--pu-bright);
	color: #fff;
}

.tps-pu-dialog .tps-pu-dialog__save:disabled {
	background-color: #BFC7C7;
	color: #fff;
	cursor: not-allowed;
}

.tps-pu-dialog .tps-pu-dialog__save:focus-visible {
	outline: 3px solid var(--pu-purple);
	outline-offset: 2px;
}

/* ====================================== phone: full screen sheet ------ *
 *
 * A centred box holding twenty tiles is unusable on a phone. Below 720px
 * the dialog fills the screen, the body scrolls, and the footer stays put
 * so the running total and Save are always reachable.
 */

@media (max-width: 720px) {

	.tps-pu-dialog {
		width: 100vw;
		max-width: 100vw;
		height: 100dvh;
		max-height: 100dvh;
		margin: 0;
		border-radius: 0;
	}

	.tps-pu-dialog__form { max-height: 100dvh; height: 100dvh; }

	.tps-pu-dialog__head,
	.tps-pu-dialog__foot { padding-inline: 1rem; }

	.tps-pu-dialog__body { padding: 1rem; }

	.tps-pu-grid { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 0.75rem; }

	.tps-pu-dialog__foot { position: sticky; bottom: 0; }

	.tps-pu-dialog .tps-pu-dialog__save { flex: 1 1 100%; }
}

/* ============================================= cart display ----------- */

.tps-pu-breakdown {
	display: block;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: #6B6B6B;
}

.tps-pu-fixed-qty {
	display: inline-flex;
	align-items: baseline;
	gap: 0.3rem;
	font-family: "Oswald", sans-serif;
	font-size: 1rem;
	font-weight: 600;
	color: #252525;
}

.tps-pu-fixed-qty__label {
	font-family: "Inter", sans-serif;
	font-size: 0.75rem;
	font-weight: 400;
	color: #6B6B6B;
}