/* ============================================================ Kredītu Apvienošanas Kalkulators — calculator.css v2.0 Namespace: .ccalc__ / .ccalc-btn Mobile-first. Colors via CSS vars set in . ============================================================ */ :root { --ccalc-p: #2563eb; --ccalc-s: #eff6ff; --ccalc-b: #2563eb; --ccalc-p-dark: #1d4ed8; --ccalc-p-light: #dbeafe; --ccalc-ok: #15803d; --ccalc-ok-bg: #f0fdf4; --ccalc-err: #dc2626; --ccalc-err-bg: #fef2f2; --ccalc-border: #e2e8f0; --ccalc-text: #0f172a; --ccalc-muted: #64748b; --ccalc-radius: 10px; --ccalc-radius-s:6px; --ccalc-shadow: 0 1px 3px rgba(0,0,0,.08); --ccalc-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; } .ccalc *, .ccalc *::before, .ccalc *::after { box-sizing: border-box; margin: 0; padding: 0; } .ccalc { font-family: var(--ccalc-font); font-size: 15px; color: var(--ccalc-text); line-height: 1.6; max-width: 820px; margin: 0 auto; padding-bottom: 2rem; } /* ---- Title ---- */ .ccalc__title { font-size: 1.4rem; font-weight: 700; color: var(--ccalc-p); margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 3px solid var(--ccalc-p); } /* ---- Toolbar ---- */ .ccalc__toolbar { display: flex; justify-content: flex-end; margin-bottom: .75rem; } .ccalc__toolbar--bottom { margin-top: 1.5rem; margin-bottom: 0; } /* ---- Sections ---- */ .ccalc__section { background: #fff; border: 1px solid var(--ccalc-border); border-radius: var(--ccalc-radius); padding: 1.25rem 1rem; margin-bottom: 1.1rem; box-shadow: var(--ccalc-shadow); } .ccalc__section--alt { background: var(--ccalc-s); } .ccalc__section-title { font-size: 1rem; font-weight: 700; color: var(--ccalc-p); margin-bottom: .5rem; padding-bottom: .35rem; border-bottom: 2px solid var(--ccalc-p-light); } .ccalc__section-desc { font-size: .87rem; color: var(--ccalc-muted); margin-bottom: 1rem; } /* ---- Buttons ---- */ .ccalc-btn { display: inline-flex; align-items: center; gap: .3rem; padding: .5rem 1rem; border-radius: var(--ccalc-radius-s); font-size: .88rem; font-weight: 600; font-family: var(--ccalc-font); border: none; cursor: pointer; line-height: 1; transition: background .15s, opacity .15s; } .ccalc-btn:disabled { opacity: .45; cursor: not-allowed; } .ccalc-btn--add { background: var(--ccalc-b); color: #fff; } .ccalc-btn--add:hover:not(:disabled) { background: var(--ccalc-p-dark); } .ccalc-btn--clear { background: transparent; color: var(--ccalc-muted); border: 1px solid var(--ccalc-border); font-size: .82rem; padding: .38rem .8rem; } .ccalc-btn--clear:hover { color: var(--ccalc-err); border-color: var(--ccalc-err); background: var(--ccalc-err-bg); } /* ---- Loan card ---- */ .ccalc__loan-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .85rem; } .ccalc__loan-counter { font-size: .84rem; color: var(--ccalc-muted); } .ccalc__loan { background: #fff; border: 1px solid var(--ccalc-border); border-radius: var(--ccalc-radius); padding: 1rem; margin-bottom: .85rem; box-shadow: var(--ccalc-shadow); transition: border-color .15s; } .ccalc__loan:focus-within { border-color: var(--ccalc-p); } .ccalc__loan-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; } .ccalc__loan-title { font-weight: 700; color: var(--ccalc-p); font-size: .95rem; } .ccalc__loan-badge { font-weight: 500; color: var(--ccalc-muted); font-size: .82rem; } .ccalc__loan-remove { background: none; border: none; color: var(--ccalc-muted); cursor: pointer; font-size: 1rem; padding: .2rem .35rem; border-radius: 4px; line-height: 1; transition: color .15s, background .15s; } .ccalc__loan-remove:hover { color: var(--ccalc-err); background: var(--ccalc-err-bg); } .ccalc__loan-name-row { display: grid; grid-template-columns: 1fr; gap: .6rem; margin-bottom: .75rem; } @media (min-width: 480px) { .ccalc__loan-name-row { grid-template-columns: 180px 1fr; } } .ccalc__loan-fields { display: grid; grid-template-columns: 1fr; gap: .6rem; } @media (min-width: 520px) { .ccalc__loan-fields { grid-template-columns: repeat(3, 1fr); } } .ccalc__loan-result { margin-top: .85rem; padding-top: .7rem; border-top: 1px dashed var(--ccalc-border); display: flex; flex-wrap: wrap; gap: .85rem; } .ccalc__loan-res-item { display: flex; flex-direction: column; gap: .1rem; } .ccalc__loan-res-item span { font-size: .78rem; color: var(--ccalc-muted); } .ccalc__loan-res-item strong { font-size: .95rem; color: var(--ccalc-p); } /* ---- Fields ---- */ .ccalc__field { display: flex; flex-direction: column; gap: .22rem; } .ccalc__label { font-size: .83rem; font-weight: 600; color: #334155; } .ccalc__opt { font-weight: 400; color: var(--ccalc-muted); font-size: .75rem; } .ccalc__req { color: var(--ccalc-err); } .ccalc__hint { color: var(--ccalc-muted); font-size: .8rem; cursor: help; } .ccalc__note { font-size: .75rem; color: var(--ccalc-muted); font-style: italic; } .ccalc__input { width: 100%; padding: .55rem .75rem; border: 1px solid var(--ccalc-border); border-radius: var(--ccalc-radius-s); font-size: .92rem; font-family: var(--ccalc-font); color: var(--ccalc-text); background: #fff; transition: border-color .15s, box-shadow .15s; -moz-appearance: textfield; } .ccalc__input::-webkit-inner-spin-button { opacity: 1; } .ccalc__input:focus { outline: none; border-color: var(--ccalc-p); box-shadow: 0 0 0 3px rgba(37,99,235,.15); } .ccalc__input--ro { background: var(--ccalc-p-light); color: var(--ccalc-muted); cursor: not-allowed; } .ccalc__input--err { border-color: var(--ccalc-err) !important; box-shadow: 0 0 0 3px rgba(220,38,38,.1) !important; } .ccalc__error { font-size: .78rem; color: var(--ccalc-err); min-height: 1rem; } /* ---- Block 2 stats ---- */ .ccalc__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .85rem; } @media (min-width: 600px) { .ccalc__stats { grid-template-columns: repeat(4, 1fr); } } .ccalc__stat { display: flex; flex-direction: column; gap: .2rem; } .ccalc__stat--big .ccalc__stat-value { font-size: 1.5rem; } .ccalc__stat-label { font-size: .77rem; color: var(--ccalc-muted); font-weight: 500; } .ccalc__stat-value { font-size: 1.1rem; font-weight: 700; color: var(--ccalc-text); } .ccalc__stat-value--accent { color: var(--ccalc-p); } /* ---- Block 3 ---- */ .ccalc__form { display: grid; grid-template-columns: 1fr; gap: .7rem; margin-bottom: 1rem; } @media (min-width: 520px) { .ccalc__form { grid-template-columns: repeat(2, 1fr); } } .ccalc__refi-result { display: flex; flex-direction: column; gap: .5rem; } .ccalc__inline-stat { display: flex; justify-content: space-between; align-items: center; padding: .5rem .75rem; background: #fff; border: 1px solid var(--ccalc-border); border-radius: var(--ccalc-radius-s); font-size: .88rem; gap: .5rem; } .ccalc__inline-stat span { color: var(--ccalc-muted); } .ccalc__inline-stat strong { font-weight: 700; color: var(--ccalc-p); white-space: nowrap; } /* ---- Block 4 comparison ---- */ .ccalc__cmp-table { width: 100%; border-collapse: collapse; font-size: .92rem; display: none; margin-bottom: 1rem; } @media (min-width: 600px) { .ccalc__cmp-table { display: table; } .ccalc__cmp-mobile { display: none; } } .ccalc__cmp-table th { background: var(--ccalc-s); color: var(--ccalc-p); font-weight: 700; padding: .6rem .85rem; text-align: right; border-bottom: 2px solid var(--ccalc-border); } .ccalc__cmp-table th:first-child { text-align: left; } .ccalc__cmp-table td { padding: .65rem .85rem; text-align: right; border-bottom: 1px solid #f1f5f9; vertical-align: middle; } .ccalc__cmp-label { text-align: left !important; font-weight: 600; color: #334155; white-space: nowrap; } .ccalc__cmp-diff { font-weight: 700; font-size: 1rem; } /* Mobile comparison cards */ .ccalc__cmp-mobile { display: flex; flex-direction: column; gap: .85rem; margin-bottom: 1rem; } @media (min-width: 600px) { .ccalc__cmp-mobile { display: none; } } .ccalc__cmp-group { background: #fff; border: 1px solid var(--ccalc-border); border-radius: var(--ccalc-radius); overflow: hidden; box-shadow: var(--ccalc-shadow); } .ccalc__cmp-group-title { background: var(--ccalc-s); color: var(--ccalc-p); font-weight: 700; padding: .5rem .85rem; font-size: .9rem; border-bottom: 1px solid var(--ccalc-border); } .ccalc__cmp-row { display: flex; justify-content: space-between; align-items: center; padding: .5rem .85rem; border-bottom: 1px solid #f8fafc; font-size: .9rem; } .ccalc__cmp-row:last-child { border-bottom: none; } .ccalc__cmp-row span:first-child { color: var(--ccalc-muted); font-size: .82rem; } .ccalc__cmp-row span:last-child { font-weight: 600; } .ccalc__cmp-row--diff span:last-child { font-weight: 700; font-size: 1rem; } /* Diff colors */ .ccalc__diff--pos { color: var(--ccalc-ok); } .ccalc__diff--neg { color: var(--ccalc-err); } .ccalc__diff--neu { color: var(--ccalc-muted); } /* Summary text */ .ccalc__summary-text { background: var(--ccalc-p-light); border-left: 4px solid var(--ccalc-p); padding: .85rem 1rem; border-radius: 0 var(--ccalc-radius-s) var(--ccalc-radius-s) 0; font-size: .92rem; line-height: 1.7; margin-top: 1rem; } .ccalc__placeholder { color: var(--ccalc-muted); font-style: italic; margin: 0; } /* ---- Accordion ---- */ .ccalc__accordion { border: 1px solid var(--ccalc-border); border-radius: var(--ccalc-radius); margin-bottom: 1rem; box-shadow: var(--ccalc-shadow); overflow: hidden; } .ccalc__acc-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: .95rem 1.1rem; background: #fff; border: none; cursor: pointer; font-size: .97rem; font-weight: 600; font-family: var(--ccalc-font); color: var(--ccalc-text); text-align: left; transition: background .15s; } .ccalc__acc-btn:hover { background: var(--ccalc-s); } .ccalc__acc-btn[aria-expanded="true"] { background: var(--ccalc-p-light); color: var(--ccalc-p); border-bottom: 1px solid var(--ccalc-border); } .ccalc__acc-icon { width: 18px; height: 18px; position: relative; flex-shrink: 0; } .ccalc__acc-icon::before, .ccalc__acc-icon::after { content: ''; position: absolute; background: currentColor; border-radius: 2px; transition: transform .15s; } .ccalc__acc-icon::before { width: 10px; height: 2px; top: 8px; left: 4px; } .ccalc__acc-icon::after { width: 2px; height: 10px; top: 4px; left: 8px; } .ccalc__acc-btn[aria-expanded="true"] .ccalc__acc-icon::after { transform: rotate(90deg); } .ccalc__acc-panel { padding: 1.1rem 1rem; background: #fff; } /* ---- Amort table ---- */ .ccalc__table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .ccalc__table { width: 100%; border-collapse: collapse; font-size: .85rem; } .ccalc__table th { background: var(--ccalc-s); color: var(--ccalc-p); font-weight: 700; text-align: right; padding: .5rem .65rem; border-bottom: 2px solid var(--ccalc-border); white-space: nowrap; } .ccalc__table th:first-child, .ccalc__table td:first-child { text-align: center; } .ccalc__table td { text-align: right; padding: .42rem .65rem; border-bottom: 1px solid #f1f5f9; } .ccalc__table tr:nth-child(even) td { background: #f8fafc; } .ccalc__empty { text-align: center !important; color: var(--ccalc-muted); padding: 1.5rem !important; font-style: italic; } /* ---- Dynamic calculator ---- */ .ccalc__dyn-info { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.25rem; padding: .85rem 1rem; background: var(--ccalc-p-light); border-radius: var(--ccalc-radius-s); border: 1px solid var(--ccalc-border); } @media (min-width: 520px) { .ccalc__dyn-info { flex-direction: row; gap: 1rem; } } .ccalc__slider-wrap { margin-bottom: 1.25rem; } .ccalc__slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: var(--ccalc-border); outline: none; cursor: pointer; margin: .4rem 0; } .ccalc__slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--ccalc-p); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--ccalc-p); cursor: pointer; } .ccalc__slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--ccalc-p); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--ccalc-p); cursor: pointer; } .ccalc__slider-labels { display: flex; justify-content: space-between; font-size: .75rem; color: var(--ccalc-muted); } .ccalc__dyn-result { display: flex; flex-direction: column; gap: .65rem; padding: 1rem; background: var(--ccalc-s); border-radius: var(--ccalc-radius); margin-bottom: 1rem; } /* ---- Mobile overrides ---- */ @media (max-width: 479px) { .ccalc__section { padding: 1rem .75rem; } .ccalc__stats { grid-template-columns: 1fr 1fr; } .ccalc-btn { padding: .45rem .8rem; font-size: .82rem; } }