/*!
 * magicalkidz.com — site palette on top of Canvas 8 (/common/c2/).
 *
 * Canvas ships its own variables; this file only overrides them and adds the
 * handful of site-specific components. Do not fork Canvas — it is shared by
 * every site on the fleet and lives at /var/www/common/c2.
 */

:root {
	/* Sampled from design/logo-*-source.png, not eyeballed. If the artwork
	   changes, re-sample rather than nudging these by hand — the wordmark and
	   the CSS have to agree or the header looks subtly wrong. */
	--mk-indigo:  #390C98;   /* the wordmark; primary brand colour */
	--mk-violet:  #690CCA;   /* the star's trail */
	--mk-teal:    #00C1C7;
	--mk-yellow:  #FDC90A;   /* the star */
	--mk-coral:   #FD675B;

	--mk-ink:     #1b1533;
	--mk-paper:   #fdfbff;
	--mk-muted:   #6f6880;

	/* Canvas 8 reads these; overriding them re-themes the whole kit. */
	--cnvs-themecolor: var(--mk-indigo);
	--cnvs-body-font: 'Nunito', sans-serif;
	--cnvs-primary-font: 'Baloo 2', 'Nunito', sans-serif;
}

body { background: var(--mk-paper); color: var(--mk-ink); }

/* --- Logo ------------------------------------------------------------ */
/* The header uses the real wordmark image; .mk-wordmark is the text fallback
   used in the footer and anywhere the image would be overkill. */
#logo img.mk-logo { height: 40px; width: auto; }

.mk-wordmark {
	font-family: 'Baloo 2', sans-serif;
	font-weight: 700;
	font-size: 1.6rem;
	letter-spacing: -.5px;
	color: var(--mk-indigo);
	line-height: 1;
}
.mk-wordmark span { color: var(--mk-teal); }
.mk-wordmark-footer { font-size: 1.9rem; color: #fff; }
.mk-wordmark-footer span { color: var(--mk-teal); }
.mk-logo-footer { height: 46px; width: auto; }

/* --- Footer base line ------------------------------------------------ */
.mk-foot-base {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .5rem;
	padding: 1.25rem 0;
	border-top: 1px solid rgba(255,255,255,.12);
	font-size: .9rem;
	opacity: .8;
}

/* --- Product cards --------------------------------------------------- */
.mk-product-card {
	border: 1px solid rgba(57,12,152,.14);
	border-radius: 14px;
	background: #fff;
	padding: 1.5rem;
	height: 100%;
	transition: transform .18s ease, box-shadow .18s ease;
}
.mk-product-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(57,12,152,.16);
}
.mk-product-card h3 { font-family: var(--cnvs-primary-font); margin-bottom: .35rem; }
.mk-grid-badge {
	display: inline-block;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: .18rem .5rem;
	border-radius: 999px;
	background: rgba(0,193,199,.14);
	color: #056e72;
}

/* --- Gallery --------------------------------------------------------- */
.mk-tile { position: relative; display: block; border-radius: 12px; overflow: hidden; background: #eee; }
.mk-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-tile-meta {
	position: absolute; inset: auto 0 0 0;
	padding: .6rem .8rem;
	background: linear-gradient(transparent, rgba(0,0,0,.72));
	color: #fff; font-size: .85rem;
}
.mk-pending { outline: 2px dashed var(--mk-yellow); outline-offset: -2px; }

/* --- Notices --------------------------------------------------------- */
.mk-note {
	border-left: 4px solid var(--mk-violet);
	background: rgba(105,12,202,.06);
	padding: 1rem 1.15rem;
	border-radius: 0 10px 10px 0;
}
.mk-note-warn { border-left-color: var(--mk-yellow); background: rgba(253,201,10,.12); }
.mk-note-bad  { border-left-color: var(--mk-coral); background: rgba(253,103,91,.10); }

/* --- Upload dropzone -------------------------------------------------- */
.mk-dropzone {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .25rem;
	min-height: 190px;
	padding: 2rem 1rem;
	text-align: center;
	border: 2px dashed rgba(57,12,152,.28);
	border-radius: 14px;
	background: rgba(105,12,202,.035);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.mk-dropzone:hover { border-color: var(--mk-violet); background: rgba(105,12,202,.07); }
.mk-dropzone.mk-dragging {
	border-color: var(--mk-teal);
	background: rgba(0,193,199,.10);
	transform: scale(1.01);
}
.mk-dropzone.mk-has-files { min-height: 120px; }
.mk-dropzone i { font-size: 2.4rem; color: var(--mk-violet); line-height: 1; }
.mk-dropzone strong { font-family: var(--cnvs-primary-font); font-size: 1.15rem; }
.mk-dropzone span { color: var(--mk-muted); font-size: .9rem; }

/* The input stays in the DOM and stays focusable — it is the no-JavaScript
   fallback and the keyboard route — but is not drawn over the zone. */
.mk-dropzone input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}
.mk-dropzone input[type="file"]:focus-visible {
	outline: 3px solid var(--mk-teal);
	outline-offset: 2px;
	opacity: .01;
}

/* --- Chosen-file previews --------------------------------------------- */
.mk-filelist { display: grid; gap: .5rem; }
.mk-file {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .5rem;
	border: 1px solid rgba(57,12,152,.12);
	border-radius: 10px;
	background: #fff;
}
.mk-file img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 8px;
	flex: 0 0 auto;
	background: #eee;
}
.mk-file-meta { flex: 1 1 auto; min-width: 0; }
.mk-file-meta strong {
	display: block;
	font-weight: 600;
	font-size: .92rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mk-file-meta span { color: var(--mk-muted); font-size: .82rem; }
.mk-file-x {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 50%;
	background: rgba(253,103,91,.12);
	color: #c0392b;
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
}
.mk-file-x:hover { background: var(--mk-coral); color: #fff; }

/* --- Show/hide password ------------------------------------------------ */
.mk-pw { position: relative; display: block; }
.mk-pw > input { padding-right: 2.9rem !important; }

.mk-pw-eye {
	position: absolute;
	top: 50%;
	right: .35rem;
	transform: translateY(-50%);
	width: 2.2rem;
	height: 2.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--mk-muted);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	transition: color .12s ease, background .12s ease;
}
.mk-pw-eye:hover { color: var(--mk-violet); background: rgba(105,12,202,.08); }
.mk-pw-eye[aria-pressed="true"] { color: var(--mk-violet); }
.mk-pw-eye:focus-visible {
	outline: 3px solid var(--mk-teal);
	outline-offset: 1px;
}