/* IndiaMobileKart Resell Calculator — front-end styling
   Design concept: a phone "diagnostic console" — deep circuit-navy panel,
   a battery-level step meter, tactile hardware-button CTAs, and a
   digital-readout typeface for the price reveal. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@600;700&display=swap');

.imrc-wrap * { box-sizing: border-box; }

.imrc-wrap {
	--imrc-bg: #0F1626;
	--imrc-panel: #161F35;
	--imrc-panel-raised: #1C2740;
	--imrc-field: #101827;
	--imrc-border: #29365A;
	--imrc-teal: #2DE1C2;
	--imrc-teal-deep: #0E8570;
	--imrc-coral: #FF6B4A;
	--imrc-coral-deep: #B8391F;
	--imrc-red: #FF4D6D;
	--imrc-text: #FFFFFF;
	--imrc-muted: #8B96B3;
	--imrc-font-head: 'Space Grotesk', 'Segoe UI', Arial, sans-serif;
	--imrc-font-body: 'Inter', 'Segoe UI', Arial, sans-serif;
	--imrc-font-mono: 'JetBrains Mono', 'Consolas', monospace;

	font-family: var(--imrc-font-body);
	color: var(--imrc-text) !important;
	max-width: 640px;
	margin: 32px auto;
	padding: 0 16px;
}

/* Safety net: WordPress themes commonly style bare h1–h6 tags directly,
   which beats plain inheritance from .imrc-wrap. Pin every heading here
   explicitly so a theme's default heading color can never leak in. */
.imrc-wrap h1,
.imrc-wrap h2,
.imrc-wrap h3,
.imrc-wrap h4,
.imrc-wrap h5,
.imrc-wrap h6 {
	color: var(--imrc-text) !important;
}

.imrc-card {
	background: var(--imrc-panel);
	border: 1px solid var(--imrc-border);
	border-radius: 20px;
	padding: 28px 26px 26px;
	box-shadow: 0 20px 60px rgba(4, 8, 20, 0.45);
	position: relative;
	overflow: hidden;
}

.imrc-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--imrc-teal), var(--imrc-coral));
}

/* ---------- Header ---------- */

.imrc-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
}

.imrc-title {
	font-family: var(--imrc-font-head);
	font-weight: 700;
	font-size: 1.35rem;
	line-height: 1.25;
	margin: 0;
	letter-spacing: -0.01em;
	color: var(--imrc-text) !important;
}

.imrc-title span {
	display: block;
	font-family: var(--imrc-font-body);
	font-weight: 500;
	font-size: 0.8rem;
	color: var(--imrc-muted);
	margin-top: 2px;
}

/* Battery-style step meter: five cells that fill teal as you progress */
.imrc-meter {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

.imrc-meter-cell {
	width: 16px;
	height: 22px;
	border-radius: 3px;
	background: var(--imrc-field);
	border: 1px solid var(--imrc-border);
	transition: background 0.25s ease, box-shadow 0.25s ease;
}

.imrc-meter-cell.is-filled {
	background: var(--imrc-teal);
	box-shadow: 0 0 10px rgba(45, 225, 194, 0.55);
	border-color: var(--imrc-teal);
}

.imrc-meter-tip {
	width: 4px;
	height: 10px;
	background: var(--imrc-border);
	border-radius: 0 2px 2px 0;
}

/* ---------- Steps ---------- */

.imrc-step { display: none; }
.imrc-step.is-active { display: block; animation: imrc-fade 0.35s ease; }

@keyframes imrc-fade {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

.imrc-step h3 {
	font-family: var(--imrc-font-head);
	font-size: 1.05rem;
	margin: 0 0 4px;
	color: var(--imrc-text) !important;
}

.imrc-step p.imrc-hint {
	color: var(--imrc-muted);
	font-size: 0.88rem;
	margin: 0 0 18px;
}

/* ---------- Form fields ---------- */

.imrc-field-row {
	margin-bottom: 16px;
}

.imrc-field-row label {
	display: block;
	font-size: 0.85rem;
	font-weight: 500;
	margin-bottom: 6px;
	color: var(--imrc-text) !important;
}

.imrc-two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.imrc-wrap input[type="text"],
.imrc-wrap input[type="tel"],
.imrc-wrap input[type="number"],
.imrc-wrap input[type="date"],
.imrc-wrap select,
.imrc-wrap textarea {
	width: 100%;
	background: var(--imrc-field);
	border: 1px solid var(--imrc-border);
	color: var(--imrc-text) !important;
	border-radius: 10px;
	padding: 11px 13px;
	font-family: var(--imrc-font-body);
	font-size: 0.95rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.imrc-wrap textarea { min-height: 74px; resize: vertical; }

/* Chrome/Safari force black text + a yellow/white fill on autofilled
   fields, ignoring page CSS, until the value is edited — override both. */
.imrc-wrap input:-webkit-autofill,
.imrc-wrap input:-webkit-autofill:hover,
.imrc-wrap input:-webkit-autofill:focus,
.imrc-wrap textarea:-webkit-autofill,
.imrc-wrap select:-webkit-autofill {
	-webkit-text-fill-color: var(--imrc-text) !important;
	-webkit-box-shadow: 0 0 0px 1000px var(--imrc-field) inset !important;
	box-shadow: 0 0 0px 1000px var(--imrc-field) inset !important;
	caret-color: var(--imrc-text);
	transition: background-color 9999s ease-in-out 0s;
}

.imrc-wrap input:focus,
.imrc-wrap select:focus,
.imrc-wrap textarea:focus {
	outline: none;
	border-color: var(--imrc-teal);
	box-shadow: 0 0 0 3px rgba(45, 225, 194, 0.18);
}

.imrc-wrap input::placeholder,
.imrc-wrap textarea::placeholder { color: #56628A; }

.imrc-error-text {
	color: var(--imrc-red);
	font-size: 0.8rem;
	margin-top: 5px;
	display: none;
}

.imrc-field-row.has-error input,
.imrc-field-row.has-error select,
.imrc-field-row.has-error textarea {
	border-color: var(--imrc-red);
}
.imrc-field-row.has-error .imrc-error-text { display: block; }

/* ---------- Gate (box & bill yes/no) ---------- */

.imrc-gate-options {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 6px;
}

.imrc-pill-btn {
	background: var(--imrc-panel-raised);
	border: 1px solid var(--imrc-border);
	color: var(--imrc-text);
	border-radius: 12px;
	padding: 16px 10px;
	font-family: var(--imrc-font-head);
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	transition: all 0.15s ease;
}

.imrc-pill-btn:hover { border-color: var(--imrc-teal); }

.imrc-pill-btn.is-selected {
	background: linear-gradient(180deg, var(--imrc-teal), var(--imrc-teal-deep));
	color: #06251F;
	border-color: var(--imrc-teal-deep);
	box-shadow: 0 4px 0 var(--imrc-teal-deep);
}

.imrc-pill-btn.imrc-pill-no.is-selected {
	background: linear-gradient(180deg, var(--imrc-red), #A32B44);
	color: #2A0510;
	border-color: #A32B44;
	box-shadow: 0 4px 0 #A32B44;
}

.imrc-gate-warning {
	display: none;
	background: rgba(255, 77, 109, 0.1);
	border: 1px solid rgba(255, 77, 109, 0.4);
	color: #FFB0BF;
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 0.88rem;
	margin-top: 10px;
}
.imrc-gate-warning.is-visible { display: block; }

/* ---------- Condition checklist ---------- */

.imrc-condition-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 0;
	border-bottom: 1px solid var(--imrc-border);
}
.imrc-condition-row:last-child { border-bottom: none; }

.imrc-condition-label {
	font-size: 0.88rem;
	line-height: 1.3;
	color: var(--imrc-text) !important;
}

.imrc-condition-label small {
	display: block;
	color: var(--imrc-muted);
	font-size: 0.75rem;
	margin-top: 2px;
}

.imrc-toggle {
	display: flex;
	flex-shrink: 0;
	background: var(--imrc-field);
	border: 1px solid var(--imrc-border);
	border-radius: 9px;
	overflow: hidden;
}

.imrc-toggle button {
	background: transparent;
	border: none;
	color: var(--imrc-muted);
	font-family: var(--imrc-font-body);
	font-weight: 600;
	font-size: 0.78rem;
	padding: 7px 14px;
	cursor: pointer;
}

.imrc-toggle button.is-selected.imrc-yes { background: var(--imrc-red); color: #2A0510; }
.imrc-toggle button.is-selected.imrc-no { background: var(--imrc-teal); color: #06251F; }

/* ---------- Value reveal ---------- */

.imrc-value-panel {
	text-align: center;
	background: radial-gradient(circle at 50% 0%, rgba(45,225,194,0.14), transparent 60%), var(--imrc-panel-raised);
	border: 1px solid var(--imrc-border);
	border-radius: 16px;
	padding: 22px 16px 18px;
	margin-bottom: 18px;
}

.imrc-value-panel .imrc-value-label {
	color: var(--imrc-muted);
	font-size: 0.8rem;
	margin-bottom: 6px;
}

.imrc-value-panel .imrc-value-amount {
	font-family: var(--imrc-font-mono);
	font-size: 2.4rem;
	font-weight: 700;
	color: var(--imrc-coral);
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.imrc-value-sub {
	font-size: 0.78rem;
	color: var(--imrc-muted);
	margin-top: 6px;
}

.imrc-next-hint {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--imrc-teal) !important;
	margin-top: 12px;
}

.imrc-breakdown {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	font-size: 0.82rem;
}

.imrc-breakdown li {
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
	border-bottom: 1px dashed var(--imrc-border);
	color: var(--imrc-muted);
}
.imrc-breakdown li span:last-child { color: var(--imrc-red); font-family: var(--imrc-font-mono); }

/* ---------- Store location card ---------- */

.imrc-store-card {
	background: var(--imrc-panel-raised);
	border: 1px solid var(--imrc-border);
	border-radius: 14px;
	padding: 16px;
	margin-bottom: 18px;
}

.imrc-store-card h4 {
	margin: 0 0 8px;
	font-family: var(--imrc-font-head);
	font-size: 0.95rem;
	color: var(--imrc-text) !important;
}

.imrc-store-card p { margin: 3px 0; font-size: 0.85rem; color: var(--imrc-muted); }
.imrc-store-card iframe { width: 100%; border: 0; border-radius: 10px; margin-top: 10px; height: 200px; }

/* ---------- Image upload grid ---------- */

.imrc-upload-group { margin-bottom: 18px; }
.imrc-upload-group h4 {
	font-family: var(--imrc-font-head);
	font-size: 0.88rem;
	color: var(--imrc-muted);
	margin: 0 0 10px;
	text-transform: none;
}

.imrc-upload-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.imrc-upload-tile {
	position: relative;
	aspect-ratio: 1 / 1;
	border: 1.5px dashed var(--imrc-border);
	border-radius: 12px;
	background: var(--imrc-field);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	cursor: pointer;
	overflow: hidden;
	transition: border-color 0.15s ease;
}

.imrc-upload-tile:hover { border-color: var(--imrc-teal); }
.imrc-upload-tile.has-image { border-style: solid; border-color: var(--imrc-teal); }

.imrc-upload-tile input[type="file"] {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.imrc-upload-tile .imrc-upload-label {
	font-size: 0.7rem;
	color: var(--imrc-muted);
	padding: 6px;
	line-height: 1.25;
}

.imrc-upload-tile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.imrc-upload-tile .imrc-upload-check {
	position: absolute;
	top: 5px;
	right: 5px;
	background: var(--imrc-teal);
	color: #06251F;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	font-size: 0.7rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
}

/* ---------- Buttons ---------- */

.imrc-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin-top: 22px;
}

.imrc-btn {
	font-family: var(--imrc-font-head);
	font-weight: 600;
	font-size: 0.92rem;
	border: none;
	border-radius: 12px;
	padding: 13px 24px;
	cursor: pointer;
	transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s ease;
}

.imrc-btn-primary {
	background: linear-gradient(180deg, #35F0D0, var(--imrc-teal-deep));
	color: #06251F;
	box-shadow: 0 6px 0 var(--imrc-teal-deep), 0 10px 22px rgba(14, 133, 112, 0.35);
}
.imrc-btn-primary:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--imrc-teal-deep), 0 4px 10px rgba(0,0,0,0.3); }
.imrc-btn-primary:disabled { filter: grayscale(0.6); opacity: 0.55; cursor: not-allowed; }

.imrc-btn-coral {
	background: linear-gradient(180deg, #FF8A6B, var(--imrc-coral-deep));
	color: #2A0806;
	box-shadow: 0 6px 0 var(--imrc-coral-deep), 0 10px 22px rgba(184, 57, 31, 0.35);
}
.imrc-btn-coral:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--imrc-coral-deep), 0 4px 10px rgba(0,0,0,0.3); }

.imrc-btn-ghost {
	background: transparent;
	color: var(--imrc-muted);
	border: 1px solid var(--imrc-border);
	box-shadow: none;
}
.imrc-btn-ghost:hover { color: var(--imrc-text); border-color: var(--imrc-teal); }

.imrc-btn-full { width: 100%; }

.imrc-spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(6,37,31,0.35);
	border-top-color: #06251F;
	border-radius: 50%;
	animation: imrc-spin 0.7s linear infinite;
	vertical-align: -2px;
	margin-right: 6px;
}
@keyframes imrc-spin { to { transform: rotate(360deg); } }

/* ---------- Final confirmation ---------- */

.imrc-ref-code {
	font-family: var(--imrc-font-mono);
	font-size: 1.2rem;
	color: var(--imrc-teal);
	letter-spacing: 0.04em;
}

.imrc-banner {
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 0.85rem;
	margin-bottom: 16px;
}
.imrc-banner-error { background: rgba(255,77,109,0.1); border: 1px solid rgba(255,77,109,0.4); color: #FFB0BF; }
.imrc-banner-info { background: rgba(45,225,194,0.08); border: 1px solid rgba(45,225,194,0.3); color: #BFF6EB; }

/* ---------- Responsive ---------- */

@media (max-width: 480px) {
	.imrc-two-col, .imrc-gate-options { grid-template-columns: 1fr; }
	.imrc-upload-grid { grid-template-columns: repeat(2, 1fr); }
	.imrc-value-panel .imrc-value-amount { font-size: 1.9rem; }
	.imrc-header { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	.imrc-step.is-active { animation: none; }
	.imrc-btn, .imrc-meter-cell { transition: none; }
}