/* IMK Dealer Hub — front end
   Built for shop counters and cheap Android phones: system fonts (so Bengali,
   Hindi and Latin all render from the device), flat surfaces, big tap targets,
   one signal colour reserved for "lowest price". */

.imk-app {
	--ink: #10161f;
	--ink-2: #4a5666;
	--line: #dbe1e8;
	--surface: #f5f7f9;
	--paper: #fff;
	--brand: #1a3a6b;
	--brand-dark: #12294c;
	--best: #0d7a3f;
	--best-bg: #e6f4ec;
	--warn: #9a5b00;
	--warn-bg: #fdf1de;
	--danger: #b3261e;
	--radius: 4px;

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Bengali", Arial, sans-serif;
	color: var(--ink);
	font-size: 15px;
	line-height: 1.5;
	max-width: 1180px;
	margin: 0 auto;
}

.imk-app *, .imk-app *::before, .imk-app *::after { box-sizing: border-box; }
.imk-app a { color: var(--brand); }
.imk-app h1, .imk-app h2, .imk-app h3 { color: var(--ink); margin: 0; }

/* ---------- notices ---------- */
.imk-notice {
	border-left: 3px solid var(--brand);
	background: var(--surface);
	padding: 12px 14px;
	margin: 0 0 16px;
	font-size: 14px;
}
.imk-notice--error { border-color: var(--danger); background: #fdecea; }
.imk-notice--ok { border-color: var(--best); background: var(--best-bg); }
.imk-notice--warn { border-color: var(--warn); background: var(--warn-bg); }

/* ---------- buttons ---------- */
.imk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 42px;
	padding: 0 16px;
	border: 1px solid var(--line);
	background: var(--paper);
	color: var(--ink);
	border-radius: var(--radius);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
}
.imk-btn:hover { border-color: var(--ink-2); }
.imk-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.imk-btn--primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.imk-btn--primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.imk-btn--ghost { background: transparent; }
.imk-btn--sm { min-height: 34px; padding: 0 12px; font-size: 13px; }
.imk-btn--save { background: var(--best); border-color: var(--best); color: #fff; }
.imk-link { background: none; border: 0; padding: 0; color: var(--brand); cursor: pointer; font: inherit; text-decoration: underline; }
.imk-link--danger { color: var(--danger); }

/* ---------- forms ---------- */
.imk-form label { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.imk-form input[type=text],
.imk-form input[type=email],
.imk-form input[type=tel],
.imk-form input[type=password],
.imk-form input[type=number],
.imk-form input[type=search],
.imk-form select,
.imk-form textarea {
	display: block;
	width: 100%;
	margin-top: 5px;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--paper);
	font: inherit;
	font-weight: 400;
	color: var(--ink);
	min-height: 42px;
}
.imk-form input:focus, .imk-form select:focus, .imk-form textarea:focus {
	outline: 2px solid var(--brand);
	outline-offset: -1px;
	border-color: var(--brand);
}
.imk-form textarea { min-height: 80px; }
.imk-hint { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; color: var(--ink-2); }
.imk-check { display: flex; align-items: center; gap: 6px; font-weight: 400; }
.imk-check input { margin: 0; }

.imk-form--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.imk-form--grid .imk-span2 { grid-column: 1 / -1; }
.imk-form__head {
	grid-column: 1 / -1;
	font-size: 13px;
	font-weight: 700;
	color: var(--ink-2);
	border-bottom: 1px solid var(--line);
	padding-bottom: 6px;
	margin: 18px 0 14px;
}
.imk-row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; font-size: 13px; }

/* ---------- sign-in gate ---------- */
.imk-gate { max-width: 420px; margin: 0 auto; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.imk-gate--wide { max-width: 760px; }
.imk-gate__title { font-size: 24px; margin-bottom: 4px; }
.imk-gate__sub { color: var(--ink-2); font-size: 14px; margin: 0 0 20px; }
.imk-gate__foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; }

/* ---------- portal shell ---------- */
.imk-shell__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 14px; }
.imk-shell__eyebrow { font-size: 12px; color: var(--ink-2); }
.imk-shell__name { font-size: 22px; }
.imk-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line); }
.imk-tab {
	padding: 10px 14px;
	text-decoration: none;
	color: var(--ink-2);
	font-weight: 600;
	font-size: 14px;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}
.imk-tab:hover { color: var(--ink); }
.imk-tab.is-active { color: var(--brand); border-bottom-color: var(--brand); }
.imk-shell__body { padding-top: 22px; }
.imk-h3 { font-size: 17px; margin: 26px 0 12px; }
.imk-empty { color: var(--ink-2); padding: 20px; background: var(--surface); border-radius: var(--radius); }
.imk-toolbar { align-items: flex-start; }
.imk-search { display: flex; gap: 8px; }
.imk-search input { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); min-height: 42px; }

/* ---------- stat cards ---------- */
.imk-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.imk-card { background: var(--paper); padding: 16px; }
.imk-card__value { display: block; font-size: 24px; font-weight: 700; letter-spacing: -0.5px; }
.imk-card__label { display: block; font-size: 12px; color: var(--ink-2); margin-top: 2px; }

/* ---------- tables ---------- */
.imk-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.imk-table th { text-align: left; font-size: 12px; color: var(--ink-2); border-bottom: 1px solid var(--line); padding: 8px 10px; }
.imk-table td { padding: 10px; border-bottom: 1px solid var(--line); }

.imk-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.imk-pill--best { background: var(--best-bg); color: var(--best); }
.imk-pill--over { background: var(--surface); color: var(--ink-2); }
.imk-pill--off { background: var(--surface); color: var(--ink-2); }
.imk-pill--warn { background: var(--warn-bg); color: var(--warn); }
.imk-pill--ok { background: var(--best-bg); color: var(--best); }

.imk-status { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface); color: var(--ink-2); }
.imk-status--new, .imk-status--pending { background: var(--warn-bg); color: var(--warn); }
.imk-status--delivered, .imk-status--approved { background: var(--best-bg); color: var(--best); }
.imk-status--cancelled, .imk-status--suspended { background: #fdecea; color: var(--danger); }

/* ---------- dealer product rows ---------- */
.imk-list { border: 1px solid var(--line); border-radius: var(--radius); }
.imk-item { display: grid; grid-template-columns: 56px 1fr auto auto; gap: 14px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.imk-item:last-child { border-bottom: 0; }
.imk-item.is-saved { background: var(--best-bg); transition: background 1.2s; }
.imk-item__img { width: 56px; height: 56px; object-fit: contain; background: var(--surface); border-radius: var(--radius); }
.imk-item__title { display: block; font-weight: 600; }
.imk-item__meta { display: flex; gap: 6px; margin-top: 4px; }
.imk-quick { display: flex; align-items: flex-end; gap: 8px; }
.imk-quick label { font-size: 11px; color: var(--ink-2); font-weight: 600; margin: 0; }
.imk-quick input { width: 90px; margin-top: 3px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); font: inherit; min-height: 38px; }
.imk-quick .imk-quick__qty { width: 68px; }
.imk-quick__msg { font-size: 12px; color: var(--best); font-weight: 600; min-width: 52px; }
.imk-item__actions { display: flex; flex-direction: column; gap: 4px; font-size: 13px; text-align: right; }

/* ---------- model picker ---------- */
.imk-picker { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; background: var(--surface); margin-bottom: 22px; }
.imk-picker__label { font-weight: 700; font-size: 14px; }
.imk-picker input[type=search] { width: 100%; margin-top: 8px; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius); font: inherit; min-height: 44px; }
.imk-picker__results { margin-top: 8px; background: var(--paper); border-radius: var(--radius); }
.imk-picker__results:not(:empty) { border: 1px solid var(--line); }
.imk-pick { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 12px; background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; font: inherit; }
.imk-pick:last-child { border-bottom: 0; }
.imk-pick:hover { background: var(--surface); }
.imk-pick img { width: 40px; height: 40px; object-fit: contain; background: var(--surface); }
.imk-pick__low { margin-left: auto; font-size: 13px; color: var(--best); font-weight: 600; white-space: nowrap; }

.imk-imagefield__row { display: flex; gap: 14px; align-items: center; margin-top: 6px; }
.imk-imagefield img { width: 90px; height: 90px; object-fit: contain; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }

.imk-split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }

/* ---------- public catalogue ---------- */
.imk-shop .imk-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.imk-filters input, .imk-filters select { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); font: inherit; min-height: 42px; }
.imk-filters input[type=search] { flex: 1 1 220px; }

.imk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.imk-prod { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); display: flex; flex-direction: column; }
.imk-prod__link { display: block; padding: 12px; text-decoration: none; color: inherit; flex: 1; }
.imk-prod__imgwrap { position: relative; background: var(--surface); border-radius: var(--radius); }
.imk-prod__imgwrap img { display: block; width: 100%; height: 170px; object-fit: contain; }
.imk-badge { position: absolute; top: 8px; left: 8px; background: var(--best); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 3px; }
.imk-badge--muted { background: var(--ink-2); }
.imk-prod__title { font-size: 15px; margin: 10px 0 4px; font-weight: 600; }
.imk-prod__price { font-size: 20px; font-weight: 700; letter-spacing: -0.5px; }
.imk-prod__price--ask { font-size: 15px; color: var(--ink-2); font-weight: 600; }
.imk-prod__meta { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.imk-prod__cta { display: flex; gap: 8px; padding: 0 12px 12px; }
.imk-prod__cta .imk-btn { flex: 1; }

.imk-pager { display: flex; gap: 6px; margin-top: 24px; }
.imk-pager__link { min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; }
.imk-pager__link.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }

.imk-crumb { font-size: 13px; color: var(--ink-2); margin-bottom: 14px; }
.imk-single { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: 32px; }
.imk-single__media { background: var(--surface); border-radius: var(--radius); padding: 20px; }
.imk-single__media img { width: 100%; height: auto; display: block; }
.imk-single__title { font-size: 26px; line-height: 1.25; }
.imk-single__pricebox { margin: 16px 0; padding: 14px 16px; background: var(--best-bg); border-radius: var(--radius); }
.imk-single__price { display: block; font-size: 30px; font-weight: 700; color: var(--best); letter-spacing: -1px; }
.imk-single__pricenote { font-size: 13px; color: var(--ink-2); }
.imk-single__features { margin: 16px 0; padding-left: 18px; }
.imk-single__features li { margin-bottom: 5px; }
.imk-single__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* ---------- modal ---------- */
.imk-modal { position: fixed; inset: 0; background: rgba(16, 22, 31, .55); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 99999; }
.imk-modal[hidden] { display: none; }
.imk-modal__panel { position: relative; background: var(--paper); border-radius: 6px; padding: 24px; width: 100%; max-width: 440px; max-height: 90vh; overflow: auto; }
.imk-modal__close { position: absolute; top: 8px; right: 10px; background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: var(--ink-2); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
	.imk-split, .imk-single { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.imk-form--grid { grid-template-columns: 1fr; }
	.imk-item { grid-template-columns: 48px 1fr; row-gap: 10px; }
	.imk-item__img { width: 48px; height: 48px; }
	.imk-quick, .imk-item__actions { grid-column: 1 / -1; }
	.imk-item__actions { flex-direction: row; gap: 14px; }
	.imk-quick input { width: 100%; }
	.imk-quick label { flex: 1; }
	.imk-table { display: block; overflow-x: auto; white-space: nowrap; }
	.imk-shell__top { flex-direction: column; align-items: flex-start; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.imk-item.is-saved { transition: none; }
}

/* photo upload field */
.imk-imagefield__controls { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.imk-imagefield__controls input[type=file] { font: inherit; font-size: 14px; max-width: 100%; }
.imk-upload-msg { font-size: 13px; font-weight: 600; color: var(--best); min-height: 18px; }

/* ---------- image framing ----------
   Fixed square frame with the image absolutely placed inside it. Themes and
   WooCommerce often force `img { height: auto }` on the front end, which makes
   a large upload render at full size and break the grid; absolute positioning
   inside a padded box holds every card to the same height regardless. */
.imk-app .imk-prod__frame {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	padding-top: 100% !important;
	overflow: hidden;
	background: var(--surface);
	border-radius: var(--radius);
}
.imk-app .imk-prod__frame img {
	position: absolute !important;
	top: 0; left: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	padding: 10px;
	margin: 0 !important;
}
.imk-app .imk-prod__imgwrap { background: transparent; }

.imk-app .imk-single__media { position: relative; }
.imk-app .imk-single__media img {
	width: 100% !important;
	height: auto !important;
	max-height: 420px !important;
	object-fit: contain !important;
	margin: 0 !important;
}
.imk-btn--wa { border-color: #128c7e; color: #0b6b5f; }
.imk-btn--buy { min-width: 150px; }
.imk-single__trust { font-size: 13px; color: var(--ink-2); margin-top: 12px; }
#imk-buy-only { display: none; }