/* Product selection and comparable monthly plans, scoped to the calculator. */
#emi-planner { align-items: start; gap: 28px 40px; }
#emi-planner .emi-planner-heading { margin-bottom: 0; }
#emi-planner #emi-form { min-width: 0; }
#emi-planner .emi-product-picker { border: 0; margin: 0 0 28px; padding: 0; min-width: 0; }
#emi-planner .emi-product-picker > legend { margin-bottom: 16px; padding: 0; color: #1c2028; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
#emi-planner .emi-product-controls { display: grid; grid-template-columns: 1fr 1.45fr; gap: 14px; }
#emi-planner .emi-product-picker label { display: flex; flex-direction: column; gap: 8px; min-width: 0; color: #213969; font-size: 13px; font-weight: 500; }
#emi-planner .emi-product-picker > label { margin-top: 15px; }
#emi-planner .emi-product-picker input,
#emi-planner .emi-product-picker select { box-sizing: border-box; min-height: 48px; width: 100%; min-width: 0; max-width: 100%; margin: 0; border: 1px solid #b5c2d5; border-radius: 4px; padding: 11px 12px; background: #fff; color: #1c2028; font: inherit; font-size: 16px; caret-color: #213969; }
#emi-planner .emi-product-picker select { padding-right: 30px; text-overflow: ellipsis; }
#emi-planner .emi-product-picker input::placeholder { color: #66738b; opacity: 1; }
#emi-planner .emi-product-picker input:hover,
#emi-planner .emi-product-picker select:hover { border-color: #7b8ca7; }
#emi-planner :is(input, select, button):focus-visible { outline: 2px solid #213969; outline-offset: 3px; }
#emi-planner :is(#emi-product-matches, #emi-product-message, #emi-selected-source) { color: #52617a; font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
#emi-planner #emi-product-matches { margin: 8px 0 0; }
#emi-planner #emi-product-message { margin: 11px 0 0; }
#emi-planner .emi-selected-product { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 8px 16px; align-items: center; margin-top: 18px; padding: 18px; background: #fff; border-radius: 12px; }
#emi-planner .emi-selected-product > img { display: block; width: 80px; height: 80px; padding: 3px; object-fit: contain; }
#emi-planner #emi-selected-placeholder { display: flex; width: 80px; height: 80px; align-items: center; justify-content: center; border-radius: 8px; background: #eef2f7; color: #62728a; }
#emi-planner #emi-selected-placeholder .icon { width: 30px; height: 30px; }
#emi-planner .emi-selected-product > div:not(#emi-selected-placeholder) { min-width: 0; }
#emi-planner #emi-selected-name { color: #1c2028; font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: -.02em; overflow-wrap: anywhere; }
#emi-planner #emi-selected-variant { margin: 4px 0 0; color: #52617a; font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
#emi-planner #emi-selected-price { display: block; margin-top: 8px; color: #213969; font-size: 20px; line-height: 1.4; font-weight: 650; font-variant-numeric: tabular-nums; }
#emi-planner #emi-selected-source { margin: 4px 0 0; font-size: 11px; }
#emi-planner #emi-selected-source-link { display: inline-flex; align-items: center; min-height: 44px; color: #213969; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
#emi-planner #emi-product-clear { justify-self: start; grid-column: 2; min-height: 44px; padding: 9px 0; color: #213969; font-size: 12px; font-weight: 600; text-align: left; text-decoration: underline; text-underline-offset: 4px; }
#emi-planner #emi-product-clear:hover { color: #a71920; }
#emi-planner [hidden] { display: none !important; }
#emi-planner .emi-fields { gap: 17px 18px; }
#emi-planner .emi-fields label { color: #213969; font-size: 13px; }
#emi-planner .emi-fields input { min-height: 48px; height: auto; color: #1c2028; font-size: 16px; font-variant-numeric: tabular-nums; border-color: #b5c2d5; }
#emi-planner #emi-amount[readonly] { background: #edf2fa; border-color: #c3cee0; color: #213969; font-weight: 600; }
#emi-planner .emi-tenure { margin-top: 26px; }
#emi-planner .emi-tenure legend { margin-bottom: 12px; color: #213969; font-size: 15px; font-weight: 600; }
#emi-planner .emi-tenure > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#emi-planner [data-emi-tenure] { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; justify-content: center; min-width: 0; min-height: 94px; padding: 13px 14px; border: 1px solid #b5c2d5; border-radius: 8px; background: #fff; color: #213969; text-align: left; font-variant-numeric: tabular-nums; }
#emi-planner [data-emi-tenure] > span { font-size: 12px; line-height: 1.4; }
#emi-planner [data-emi-tenure] > strong { max-width: 100%; font-size: clamp(16px, 1.5vw, 21px); line-height: 1.3; letter-spacing: -.02em; font-weight: 650; overflow-wrap: anywhere; }
#emi-planner [data-emi-tenure] > small { font-size: 11px; line-height: 1.35; }
#emi-planner [data-emi-tenure]:hover { background: #eaf0fa; border-color: #213969; }
#emi-planner [data-emi-tenure].active { background: #213969; color: #fff; border-color: #213969; }
#emi-planner [data-emi-tenure].active > :is(span, strong, small) { color: #fff; }
#emi-planner .emi-plan-options-caption { margin: 0 0 12px; color: #52617a; font-size: 12px; line-height: 1.65; }
#emi-planner .emi-form-actions > small { color: #52617a; font-size: 12px; line-height: 1.7; }
#emi-planner .emi-form-actions .button { min-height: 48px; font-size: 14px; }
#emi-planner .emi-result { position: sticky; top: 24px; }
#emi-planner .emi-result > span { color: #405576; font-size: 14px; }
#emi-planner .emi-result > p { color: #52617a; font-size: 13px; }
#emi-planner .emi-result dl > div { font-size: 12px; }
#emi-planner .emi-result dt { color: #52617a; }
#emi-planner .emi-result > a { color: #213969; min-height: 44px; font-size: 12px; }
@media (max-width: 900px) {
  #emi-planner { grid-template-columns: minmax(0, 1fr); }
  #emi-planner .emi-result { position: static; }
  #emi-planner [data-emi-tenure] > strong { font-size: 21px; }
}
@media (max-width: 520px) {
  #emi-planner { padding: 24px 18px; gap: 24px; }
  #emi-planner .emi-product-controls { grid-template-columns: minmax(0, 1fr); }
  #emi-planner .emi-product-picker { margin-bottom: 24px; }
  #emi-planner .emi-selected-product { grid-template-columns: 60px minmax(0, 1fr); gap: 8px 12px; padding: 14px; }
  #emi-planner .emi-selected-product > img,
  #emi-planner #emi-selected-placeholder { width: 60px; height: 70px; }
  #emi-planner #emi-selected-name { font-size: 15px; }
  #emi-planner #emi-selected-price { font-size: 19px; }
  #emi-planner .emi-fields { gap: 16px 12px; }
  #emi-planner .emi-fields label { font-size: 12px; }
  #emi-planner .emi-tenure > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #emi-planner [data-emi-tenure] { padding: 12px; min-height: 94px; }
  #emi-planner [data-emi-tenure] > strong { font-size: 19px; }
  #emi-planner .emi-result { padding: 22px; }
  #emi-planner .emi-result > strong { font-size: 36px; }
}
@media (max-width: 360px) {
  #emi-planner .emi-fields { grid-template-columns: minmax(0, 1fr); }
  #emi-planner [data-emi-tenure] > strong { font-size: 17px; }
}
