/* =====================================================================
   YANMAR NEXT — Loan Calculator Styles (no header)
   All rules scoped under .ylc-wrap to avoid theme collisions
   ===================================================================== */
.ylc-wrap {
    --red:   #b7111a;
    --red-d: #910d14;
    --ink:   #1d1d1b;
    --grey:  #6b6b6b;
    --line:  #e4e4e4;
    --bg:    #f5f5f5;
    --card:  #ffffff;
    --soft:  #fafafa;
    --r:     13px;
    --sh:    0 4px 20px rgba(0,0,0,.07);
    font-family: inherit;
    color: var(--ink);
 
}
.ylc-wrap * { box-sizing: border-box; }

/* ----- Tractor info banner (shown when pre-filled from post) ----- */
.ylc-tractor-info {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 5px solid var(--red);
    border-radius: var(--r);
    padding: 14px 18px;
    margin-bottom: 18px;
    box-shadow: var(--sh);
}
.ylc-tractor-info.no-img { border-left-width: 5px; }
.ylc-wrap .ylc-thumb {
    width: 80px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    border: 1px solid var(--line);
}
.ylc-tractor-title { font-size: 17px; font-weight: 800; color: var(--ink); }
.ylc-tractor-sub   { font-size: 12.5px; color: var(--grey); margin-top: 3px; }

/* ----- Two-column grid ----- */
.ylc-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1.1fr);
    gap: 18px;
}
@media (max-width: 860px) { .ylc-grid { grid-template-columns: 1fr; } }

/* ----- Cards ----- */
.ylc-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--sh);
    padding: 22px 20px;
}
.ylc-card-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 800;
    margin: 0 0 16px;
}
.ylc-bar {
    display: inline-block;
    width: 4px;
    height: 16px;
    background: var(--red);
    border-radius: 2px;
    flex-shrink: 0;
}

/* ----- Series tabs ----- */
.ylc-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.ylc-tabs button {
    flex: 1;
    min-width: 80px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    padding: 9px 6px;
    border-radius: 9px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    transition: .15s;
    line-height: 1;
    margin: 0;
}
.ylc-tabs button.on {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

/* ----- Form fields ----- */
.ylc-fld {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #3a3a3a;
    margin: 13px 0 5px;
}
.ylc-wrap input[type=text],
.ylc-wrap input[type=number] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    font-size: 14.5px;
    background: #fff;
    color: var(--ink);
    font-family: inherit;
    margin: 0;
}
.ylc-wrap select {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    font-size: 14.5px;
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='%236b6b6b'><path d='M7 10l5 5 5-5z'/></svg>") no-repeat right 12px center;
    color: var(--ink);
    font-weight: 600;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
    padding-right: 34px;
    margin: 0;
}
.ylc-wrap select:focus,
.ylc-wrap input:focus {
    outline: 2px solid rgba(183,17,26,.18);
    border-color: var(--red);
}
.ylc-model-row { display: flex; align-items: center; gap: 10px; }
.ylc-model-row select { flex: 1; }
.ylc-hpbadge {
    white-space: nowrap;
    background: #eee;
    border: 1px solid var(--line);
    font-weight: 800;
    font-size: 12.5px;
    padding: 8px 11px;
    border-radius: 8px;
    line-height: 1;
}

/* ----- Price box ----- */
.ylc-pricebox { border: 1px solid var(--line); border-radius: 10px; margin-top: 14px; overflow: hidden; }
.ylc-pl { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 13px; font-size: 14px; }
.ylc-pl.base { background: var(--soft); }
.ylc-pl.sell { border-top: 1px dashed var(--line); }
.ylc-pl.sell span:first-child { color: var(--red); font-weight: 800; }
.ylc-pl b { font-weight: 800; }
.ylc-pl.sell b { color: var(--red); font-size: 16px; }

/* ----- Implements ----- */
.ylc-impl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 6px;
}
@media (max-width: 500px) { .ylc-impl { grid-template-columns: 1fr; } }
.ylc-imp {
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 9px 10px;
    cursor: pointer;
    font-size: 12.5px;
    margin: 0;
    transition: .15s;
}
.ylc-imp.on { border-color: var(--red); background: #fff5f5; }
.ylc-imp input { width: auto; accent-color: var(--red); flex-shrink: 0; }
.ylc-imp .ylc-nm { font-weight: 600; }
.ylc-imp .ylc-p  { margin-left: auto; color: var(--grey); font-weight: 600; font-size: 11.5px; }

/* ----- Down / term row ----- */
.ylc-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: 10px;
}
.ylc-sep { padding-bottom: 10px; color: var(--grey); font-weight: 600; font-size: 13px; text-align: center; }
@media (max-width: 480px) { .ylc-row { grid-template-columns: 1fr; } .ylc-sep { display: none; } }

/* ----- Payment method ----- */
.ylc-method {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 6px;
}
@media (min-width: 540px) { .ylc-method { grid-template-columns: repeat(4,1fr); } }
.ylc-method button {
    border: 1px solid var(--line);
    background: #fff;
    padding: 9px 5px;
    border-radius: 9px;
    cursor: pointer;
    font-weight: 800;
    font-size: 12.5px;
    line-height: 1;
    color: var(--ink);
    margin: 0;
    transition: .15s;
}
.ylc-method button small { display: block; font-weight: 500; font-size: 10px; opacity: .75; margin-top: 3px; }
.ylc-method button.on { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ----- Actions ----- */
.ylc-actions { display: flex; gap: 10px; margin-top: 18px; }
.ylc-btn {
    flex: 1;
    border: 0;
    border-radius: 11px;
    padding: 13px;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    line-height: 1;
    font-family: inherit;
    margin: 0;
    transition: .15s;
}
.ylc-btn-reset { background: #fff; border: 1px solid var(--line); color: var(--ink); }
.ylc-btn-calc  { background: var(--red); color: #fff; }
.ylc-btn-calc:hover { background: var(--red-d); }

/* ----- Results (right card) ----- */
.ylc-result-box {
    border: 1.5px solid var(--red);
    border-radius: 11px;
    padding: 13px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ylc-rl   { font-size: 13px; font-weight: 600; color: #3a3a3a; }
.ylc-rn   { font-size: 28px; font-weight: 900; line-height: 1.1; }
.ylc-rn.red { color: var(--red); }
.ylc-rn small { font-size: 13px; color: var(--grey); font-weight: 600; }
.ylc-approx { font-size: 11.5px; color: var(--grey); font-weight: 600; }

.ylc-instalment {
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 15px;
    margin-top: 10px;
}
.ylc-inst-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.ylc-freq { font-size: 11.5px; color: var(--grey); font-weight: 600; text-align: right; white-space: nowrap; }
.ylc-paynote {
    font-size: 12px;
    color: #3a3a3a;
    margin-top: 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 11px;
    line-height: 1.6;
}

/* ----- Stat strip ----- */
.ylc-stat { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 12px 0; }
.ylc-s { background: var(--soft); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; }
.ylc-k { font-size: 11px; color: var(--grey); font-weight: 600; }
.ylc-v { font-size: 14.5px; font-weight: 800; margin-top: 2px; }

/* ----- Bar chart ----- */
.ylc-chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 180px;
    border-top: 1px solid var(--line);
    padding-top: 14px;
    margin-top: 6px;
}
.ylc-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    cursor: pointer;
}
.ylc-col .ylc-val { font-size: 10.5px; font-weight: 800; margin-bottom: 4px; white-space: nowrap; }
.ylc-col .ylc-bar { width: 100%; max-width: 44px; background: #d6d6d6; border-radius: 7px 7px 3px 3px; transition: height .35s; }
.ylc-col .ylc-clab { font-size: 11px; color: var(--grey); font-weight: 600; margin-top: 6px; }
.ylc-col.on .ylc-bar { background: var(--red); }
.ylc-col.on .ylc-val { color: var(--red); }
.ylc-chart-cap { font-size: 11px; color: var(--grey); text-align: center; margin-top: 5px; }

/* ----- Schedule table ----- */
#ylc-schedWrap { margin-top: 14px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
#ylc-schedWrap h3 { font-size: 13px; font-weight: 800; background: var(--ink); color: #fff; padding: 8px 12px; margin: 0; }
.ylc-wrap table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ylc-wrap td, .ylc-wrap th { padding: 8px 11px; text-align: right; border-bottom: 1px solid var(--line); }
.ylc-wrap th { background: var(--soft); font-weight: 800; color: #3a3a3a; }
.ylc-wrap td:first-child, .ylc-wrap th:first-child { text-align: left; }
.ylc-wrap tfoot td { font-weight: 800; background: var(--soft); }

/* ----- CTA ----- */
.ylc-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--red);
    border-radius: 11px;
    padding: 13px 16px;
    margin-top: 16px;
    flex-wrap: wrap;
    box-shadow: var(--sh);
}
.ylc-cta-t b    { font-size: 14px; display: block; }
.ylc-cta-t span { font-size: 12px; color: var(--grey); }
.ylc-cta-btns   { display: flex; gap: 8px; flex-wrap: wrap; }
.ylc-btn-call, .ylc-btn-line {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    font-weight: 800;
    font-size: 13px;
    padding: 9px 15px;
    border-radius: 999px;
}
.ylc-btn-call { background: var(--red);  color: #fff; }
.ylc-btn-line { background: #06C755; color: #fff; }

/* ----- Disclaimer ----- */
.ylc-disc { font-size: 11px; color: var(--grey); line-height: 1.7; margin-top: 14px; }

/* ----- Agri small installment input ----- */
#ylc-smallWrap { margin-top: 10px; }