/**
 * Modprinters configurator UI + design choice modal.
 * Scoped to .mp-calc / .mp-modal so it won't leak into the rest of your theme.
 */

.mp-calc {
	--mp-ink: #0a0e1a;
	--mp-ink-50: #f5f6fa;
	--mp-ink-100: #e5e7ee;
	--mp-ink-200: #c4c8d6;
	--mp-ink-500: #3a435a;
	--mp-brand: #ff4d0a;
	--mp-brand-50: #fff4ed;
	--mp-radius: 14px;
	--mp-radius-sm: 10px;

	display: grid;
	gap: 1.5rem;
	margin: 1.25rem 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
	color: var(--mp-ink);
}

.modprinters-hidden-qty { display: none !important; }

/* --- Highlights bar -------------------------------------------------- */
.mp-calc__highlights {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.25rem;
}
.mp-calc__highlight {
	background: var(--mp-ink-50);
	color: var(--mp-ink-500);
	padding: 0.4rem 0.8rem;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
}

/* --- Sections -------------------------------------------------------- */
.mp-calc__group { display: grid; gap: 0.65rem; }
.mp-calc__label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mp-ink-500);
}

/* --- Quantity tier picker ------------------------------------------- */
.mp-calc__tiers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
}
@media (min-width: 640px) {
	.mp-calc__tiers { grid-template-columns: repeat(4, 1fr); }
}
.mp-calc__tier {
	display: grid;
	gap: 2px;
	padding: 0.75rem 0.5rem;
	border: 1px solid var(--mp-ink-200);
	border-radius: var(--mp-radius-sm);
	background: #fff;
	cursor: pointer;
	text-align: center;
	transition: all 0.15s ease;
}
.mp-calc__tier:hover { border-color: var(--mp-ink-500); }
.mp-calc__tier.is-active {
	border-color: var(--mp-ink);
	background: var(--mp-ink);
	color: #fff;
}
.mp-calc__tier-qty { font-weight: 700; font-size: 15px; }
.mp-calc__tier-price { font-size: 11px; opacity: 0.75; }
.mp-calc__tier-price .woocommerce-Price-amount { font-size: 11px; }

/* --- Choice grid ----------------------------------------------------- */
.mp-calc__choices {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.5rem;
}
@media (min-width: 640px) {
	.mp-calc__choices { grid-template-columns: 1fr 1fr; }
}
.mp-calc__choice {
	display: grid;
	gap: 2px;
	text-align: left;
	padding: 0.75rem 1rem;
	border: 1px solid var(--mp-ink-200);
	border-radius: var(--mp-radius-sm);
	background: #fff;
	cursor: pointer;
	transition: all 0.15s ease;
}
.mp-calc__choice:hover { border-color: var(--mp-ink-500); }
.mp-calc__choice.is-active {
	border-color: var(--mp-ink);
	background: var(--mp-brand-50);
}
.mp-calc__choice-label { font-weight: 600; font-size: 14px; }
.mp-calc__choice-hint { font-size: 12px; color: var(--mp-ink-500); }

/* --- Continue button ------------------------------------------------- */
.mp-calc__continue {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	background: var(--mp-brand);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 0.95rem 1.5rem;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	box-shadow: 0 12px 32px -10px rgba(255,77,10,0.5);
}
.mp-calc__continue:hover { transform: translateY(-1px); box-shadow: 0 16px 40px -10px rgba(255,77,10,0.6); }

/* --- Hide the WC default add-to-cart button (we trigger it programmatically) */
.mp-calc + .single_add_to_cart_button,
.single_add_to_cart_button.mp-hidden,
.mp-calc-attached .single_add_to_cart_button {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* --- Summary panel --------------------------------------------------- */
.mp-calc__summary {
	background: #fff;
	border: 1px solid var(--mp-ink-100);
	border-radius: var(--mp-radius);
	padding: 1.25rem 1.5rem;
	box-shadow: 0 1px 2px rgba(10, 14, 26, 0.04), 0 8px 24px rgba(10, 14, 26, 0.06);
	display: grid;
	gap: 0.75rem;
}
.mp-calc__summary-label {
	font-size: 12px;
	color: var(--mp-ink-500);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
}
.mp-calc__summary-total {
	font-size: 36px;
	font-weight: 800;
	margin-top: 4px;
	line-height: 1.1;
}
.mp-calc__summary-total .woocommerce-Price-amount { font-size: inherit; font-weight: inherit; }
.mp-calc__summary-unit { font-size: 13px; color: var(--mp-ink-500); margin-top: 4px; }

.mp-calc__design-status {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem;
	background: var(--mp-brand-50);
	border-radius: var(--mp-radius-sm);
	border: 1px solid var(--mp-brand);
}
.mp-calc__design-status img {
	width: 56px; height: 56px;
	border-radius: 8px;
	object-fit: cover;
	border: 1px solid var(--mp-ink-100);
}
.mp-calc__design-status strong { display: block; font-size: 13px; }
.mp-calc__design-status span { display: block; font-size: 11px; color: var(--mp-ink-500); }

/* --- Artwork upload (legacy inline picker) -------------------------- */
.mp-calc input[type="file"] {
	display: block;
	width: 100%;
	padding: 1rem;
	border: 2px dashed var(--mp-ink-200);
	border-radius: var(--mp-radius-sm);
	background: #fff;
	cursor: pointer;
}
.mp-calc input[type="file"]:hover { border-color: var(--mp-brand); background: var(--mp-brand-50); }
.mp-calc__hint { font-size: 12px; color: var(--mp-ink-500); margin: 0; }

/* ===================================================================== */
/*  Design choice modal                                                  */
/* ===================================================================== */
.mp-modal {
	position: fixed; inset: 0; z-index: 9998;
	display: flex; align-items: center; justify-content: center;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
	color: var(--mp-ink, #0a0e1a);
	animation: mpModalIn 0.16s ease;
}
@keyframes mpModalIn { from { opacity: 0; } to { opacity: 1; } }
.mp-modal__overlay { position: absolute; inset: 0; background: rgba(10,14,26,0.58); }
.mp-modal__panel {
	position: relative;
	background: #fff;
	border-radius: 18px;
	max-width: 720px;
	width: calc(100% - 32px);
	padding: 2rem 2rem 2.25rem;
	box-shadow: 0 32px 80px -24px rgba(10,14,26,0.4);
	z-index: 1;
}
.mp-modal__close {
	position: absolute;
	top: 12px; right: 12px;
	background: transparent;
	border: 0;
	font-size: 28px;
	color: #5c6680;
	cursor: pointer;
	width: 36px; height: 36px;
	border-radius: 999px;
}
.mp-modal__close:hover { background: #f5f6fa; }
.mp-modal__panel h2 { margin: 0 0 0.5rem; font-size: 22px; font-weight: 700; }
.mp-modal__panel p { color: #5c6680; margin: 0 0 1.5rem; font-size: 14px; }

.mp-modal__choices {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: 1fr;
}
@media (min-width: 600px) {
	.mp-modal__choices { grid-template-columns: 1fr 1fr; }
}
.mp-modal__choice {
	background: #fff;
	border: 1px solid #e5e7ee;
	border-radius: 14px;
	padding: 1.5rem 1.25rem;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	text-align: left;
	transition: all 0.15s ease;
}
.mp-modal__choice:hover {
	border-color: var(--mp-brand, #ff4d0a);
	transform: translateY(-2px);
	box-shadow: 0 16px 36px -16px rgba(255,77,10,0.35);
}
.mp-modal__icon {
	font-size: 28px;
	width: 48px; height: 48px;
	border-radius: 12px;
	background: #fff4ed;
	color: #ff4d0a;
	display: grid;
	place-items: center;
}
.mp-modal__title { font-size: 16px; font-weight: 700; }
.mp-modal__sub { font-size: 13px; color: #5c6680; line-height: 1.45; }

.mp-modal__choice--upload .mp-modal__icon { background: #fff4ed; color: #ff4d0a; }
.mp-modal__choice--studio .mp-modal__icon { background: #ecfdf5; color: #10b981; }

/* --- Upload-flow drop zone ----------------------------------------- */
.mp-modal__drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 3rem 1.5rem;
	border: 2px dashed #c4c8d6;
	border-radius: 14px;
	background: #f5f6fa;
	cursor: pointer;
	text-align: center;
	transition: all 0.15s ease;
}
.mp-modal__drop:hover, .mp-modal__drop.is-drag {
	border-color: var(--mp-brand, #ff4d0a);
	background: #fff4ed;
}
.mp-modal__drop > span:first-of-type { font-weight: 600; font-size: 15px; }
.mp-modal__progress { margin-top: 1rem; height: 6px; background: #e5e7ee; border-radius: 999px; overflow: hidden; }
.mp-modal__progress > div { height: 100%; background: var(--mp-brand, #ff4d0a); width: 5%; transition: width 0.2s ease; }
.mp-modal__error { margin-top: 1rem; padding: 0.75rem; background: #fee2e2; color: #b91c1c; border-radius: 8px; font-size: 13px; }

/* --- Shortcode grids ------------------------------------------------- */
.mp-cats {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}
@media (min-width: 640px) { .mp-cats { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .mp-cats { grid-template-columns: repeat(3, 1fr); } }
.mp-cats__item {
	display: block;
	padding: 1.25rem 1.5rem;
	background: #fff;
	border: 1px solid var(--mp-ink-100);
	border-radius: var(--mp-radius);
	color: inherit;
	text-decoration: none !important;
	transition: all 0.2s ease;
}
.mp-cats__item:hover {
	transform: translateY(-2px);
	border-color: var(--mp-brand);
	box-shadow: 0 10px 28px -10px rgba(255, 77, 10, 0.2);
}
.mp-cats__item h3 { margin: 0 0 0.4rem; font-size: 18px; font-weight: 700; }
.mp-cats__item p { margin: 0; color: var(--mp-ink-500); font-size: 14px; }

.mp-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
}
@media (min-width: 640px) { .mp-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .mp-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .mp-grid { grid-template-columns: repeat(4, 1fr); } }
.mp-grid__item {
	background: #fff;
	border: 1px solid var(--mp-ink-100);
	border-radius: var(--mp-radius);
	overflow: hidden;
	color: inherit;
	text-decoration: none !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mp-grid__item:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 36px -16px rgba(10, 14, 26, 0.15);
}
.mp-grid__image img { width: 100%; height: auto; display: block; }
.mp-grid__title { padding: 1rem 1rem 0; font-size: 16px; font-weight: 700; margin: 0; }
.mp-grid__price { padding: 0.4rem 1rem 1rem; color: var(--mp-ink-500); font-size: 14px; margin: 0; }