/*
 * Frontend CSS for Loan EMI Calculator
 * Based on the provided EMI calculator style but scoped under `.lemc-emi-wrap` to avoid clashes.
 * Colours have been adjusted to allow dynamic presets rather than fixed branding.
 */

.lemc-emi-wrap {
  /* Default colour variables. These values will be overridden by the selected preset
     or custom settings defined in the admin panel. By defining sensible defaults
     here (a dark theme), the calculator still looks good even if no styles are set. */
  --bg: #090d11;
  /* dark background */
  --card: #0f1218;
  /* card background */
  --muted: #8a93a5;
  /* muted text */
  --b: #20344c;
  /* border colour */
  --accent: #55acd9;
  /* primary accent colour */
  --ok: #22c55e;
  /* green for positive metrics */
  --warn: #f59e0b;
  /* amber for warning metrics */
  --txt: #e6e9ef;
  /* primary text colour */
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color: var(--txt);
}

.lemc-emi-wrap * {
  box-sizing: border-box;
}

/* Grid layout */
.lemc-emi-wrap .lemc-emi-grid,
.lemc-emi-wrap .emi-grid {
  display: grid;
  gap: 24px;
}

@media (min-width: 900px) {

  .lemc-emi-wrap .lemc-emi-grid,
  .lemc-emi-wrap .emi-grid {
    /* Make the input column slightly wider than the results column on larger screens */
    grid-template-columns: 1.2fr 1fr;
  }
}

.lemc-emi-wrap .emi-h1 {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 700;
  letter-spacing: 0.2px;
  margin: 0 0 6px;
}

.lemc-emi-wrap .emi-sub {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 18px;
}

.lemc-emi-wrap .lemc-emi-card,
.lemc-emi-wrap .emi-card {
  background: var(--card);
  border: 1px solid var(--b);
  border-radius: 14px;
  padding: 18px;
  align-content: center;
  box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.lemc-emi-wrap .lemc-emi-label,
.lemc-emi-wrap .emi-label {
  display: flex;
  align-items: center;
  justify-content: left;
  font-weight: 600;
  font-size: 16px;
  gap: 10px;
}

.emi-label svg {
  fill: none !important;
  width: 24px;
}

.lemc-emi-wrap .emi-inline {
  display: flex;
  gap: 10px;
  align-items: center;
}

.lemc-emi-wrap .lemc-emi-input,
.lemc-emi-wrap .emi-input {
  flex: 1 1 120px;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: end;
}

.lemc-amount-input {
  width: 150px !important;
}

.lemc-rate-input,
.lemc-tenure-input {
  width: 100px !important;
}

.lemc-emi-wrap .lemc-emi-input input[type="number"],
.lemc-emi-wrap .lemc-emi-input input[type="text"],
.lemc-emi-wrap .emi-input input[type="number"],
.lemc-emi-wrap .emi-input input[type="text"] {
  background: var(--card);
  color: var(--txt);
  border: 1px solid var(--b);
  border-radius: 10px;
  padding: 2px 12px;
  outline: none;
  font-size: 16px !important;
}

.lemc-emi-wrap .lemc-emi-range,
.lemc-emi-wrap .emi-range {
  width: 100%;
}

.lemc-emi-wrap .lemc-emi-range input[type="range"],
.lemc-emi-wrap .emi-range input[type="range"] {
  width: 100%;
}

.lemc-emi-wrap .lemc-emi-minmax,
.lemc-emi-wrap .emi-minmax {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--muted);
  line-height: 16px;
}

.lemc-emi-wrap .lemc-loan-types {
  display: grid;
  /* Always use a two-column grid for loan type cards, matching the reference design */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.lemc-emi-wrap .lemc-loan-type {
  position: relative;
}

.lemc-emi-wrap .lemc-loan-type input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}

.lemc-emi-wrap .lemc-loan-type .lemc-box {
  border: 1px solid var(--b);
  border-radius: 12px;
  padding: 12px;
  /* Use the card colour so that the loan type cards adapt to the selected theme */
  background: var(--card);
  transition: 0.15s ease;
  min-height: 76px;
}

.lemc-emi-wrap .lemc-loan-type .lemc-t {
  font-weight: 600;
  font-size: 17px;
  line-height: 20px;
  color: var(--txt);
}

.lemc-emi-wrap .lemc-loan-type .lemc-s {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 12px;
}

.lemc-emi-wrap .lemc-loan-type input:checked+.lemc-box {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 25%, transparent);
  transform: translateY(-1px);
}

.lemc-emi-wrap .lemc-emi-big,
.lemc-emi-wrap .emi-big {
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 700;
  margin: 8px 0 2px;
}

.lemc-emi-wrap .lemc-emi-caption,
.lemc-emi-wrap .emi-caption {
  color: var(--txt);
  font-size: 13px;
}

.lemc-emi-wrap .lemc-kpi {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 10px;
  grid-auto-rows: auto;
}

.lemc-emi-wrap .lemc-kpi>div:last-child {
  grid-column: span 2;
}

.lemc-emi-wrap .lemc-kpi .lemc-k {
  /* Use the card colour for KPI boxes */
  background: var(--card);
  border: 1px solid var(--b);
  border-radius: 12px;
  padding: 12px;
}

.lemc-emi-wrap .lemc-k .lemc-h {
  font-size: 14px;
  color: var(--muted);
}

.lemc-emi-wrap .lemc-k .lemc-v {
  font-weight: 700;
  margin-top: 6px;
  font-size: 18px;
}

.lemc-emi-wrap .lemc-bar {
  height: 10px;
  width: 100%;
  /* Use the card colour for the bar container */
  background: var(--card);
  border: 1px solid var(--b);
  border-radius: 999px;
  overflow: hidden;
}

.lemc-emi-wrap .lemc-bar .lemc-bar-p {
  height: 100%;
  background: var(--ok);
}

.lemc-emi-wrap .lemc-bar .lemc-bar-i {
  height: 100%;
  background: var(--warn);
}

.lemc-emi-wrap .lemc-legend {
  display: flex;
  gap: 14px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  flex-wrap: wrap;
}

.lemc-emi-wrap .lemc-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}

.lemc-emi-wrap .row {
  display: grid;
  gap: 20px;
}

.lemc-emi-wrap .lemc-hint,
.lemc-emi-wrap .hint {
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}

.lemc-emi-wrap .lemc-muted,
.lemc-emi-wrap .muted {
  color: var(--muted);
}

.lemc-emi-wrap .lemc-pill,
.lemc-emi-wrap .pill {
  background: var(--card);
  border: 1px solid var(--b);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
}

.lemc-emi-wrap .lemc-foot-note {
  font-size: 11px;
  color: var(--muted);
  margin-top: 12px;
}

.lemc-emi-wrap .lemc-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.lemc-amount-range,
.lemc-rate-range,
.lemc-tenure-range {
  appearance: none;
  height: .5rem;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
  accent-color: var(--rang) !important;
}

.left-side-card {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.lemc-heading {
  font-size: 22px !important;
  line-height: 24px !important;
}

/* --- New Icons & Breakdown Styles --- */

/* Icons */
.lemc-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Loan Breakdown Layout */
.lemc-breakdown-row {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: flex-start;
}

/* Donut Chart */
.lemc-chart-container {
  flex-shrink: 0;
}

.lemc-donut-chart {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(var(--accent) 0% 0%, var(--warn) 0% 100%, #dcddde 0% 100%);
  position: relative;
  /* Ensure it looks like a ring */
  display: flex;
  align-items: center;
  justify-content: center;
}

.lemc-donut-chart::after {
  content: "";
  position: absolute;
  width: 90px;
  height: 90px;
  background: var(--card);
  /* Match card background to create 'hole' */
  border-radius: 50%;
}

/* Breakdown Details List */
.lemc-breakdown-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

.lemc-detail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lemc-detail-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1.2;
}

.lemc-legend-sq {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
}

.lemc-detail-value {
  font-weight: 700;
  font-size: 16px;
  margin-left: 20px;
  /* Align with text, inset from square */
  color: var(--txt);
}