/* ============================================================ Спільні стилі калькуляторів «без файлів / без макетів» для менеджерів. Використовується на druk-plakativ, tsyfrovyy-druk-onlayn та майбутніх сторінках. Підключати у , щоб стилі були доступні одразу (посилання-тригер і модалка стилізовані ще до відкриття калькулятора). JS-калькулятори (*-app/manual-calc.js) лише формують розмітку. ============================================================ */ /* ── Посилання-тригер під формою завантаження ── */ .ep-pl-manualwrap { text-align: center; margin: 16px auto 0; } .ep-pl-manuallink { font-size: .85rem; color: #8493a5; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transition: color .15s; background: none; border: none; padding: 0; font-family: inherit; } .ep-pl-manuallink:hover { color: #DA1A32; } body.ep-dg-calc-open .ep-pl-manualwrap { display: none; } /* ── Модалка ── */ .ep-mc { display: none; position: fixed; inset: 0; z-index: 100060; background: rgba(15,28,46,.72); align-items: center; justify-content: center; padding: 16px; } .ep-mc.is-open { display: flex; } .ep-mc__dialog { background: #fff; border-radius: 16px; width: min(860px, 100%); max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(15,28,46,.4); font-family: inherit; } .ep-mc__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; background: #1E3A5F; color: #fff; font-weight: 700; font-size: 1rem; } .ep-mc__x { background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; line-height: 1; padding: 0 4px; } .ep-mc__body { padding: 16px 18px; overflow: auto; } /* ── Базові контроли ── */ .ep-mc-in { font: inherit; font-size: .86rem; padding: 8px 10px; border: 1.5px solid rgba(30,58,95,.18); border-radius: 8px; background: #fff; color: #1E3A5F; } .ep-mc-cust { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; color: #6b7c91; } .ep-mc-mm { color: #8493a5; } .ep-mc-chk { font-size: .82rem; color: #1E3A5F; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .ep-mc-lbl { font-size: .82rem; color: #6b7c91; display: inline-flex; align-items: center; gap: 6px; } /* ── Терміни (ціни) ── */ .ep-mc__tiers { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; } .ep-mc-tier { flex: 1 1 155px; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1.5px solid rgba(30,58,95,.16); border-radius: 12px; background: #fff; cursor: pointer; text-align: left; } .ep-mc-tier--sel { border-color: #1E9E57; background: rgba(30,158,87,.08); box-shadow: 0 0 0 3px rgba(30,158,87,.15); } .ep-mc-tier__l { font-size: .78rem; color: #6b7c91; font-weight: 600; } .ep-mc-tier__p { font-size: 1.15rem; font-weight: 800; color: #1E3A5F; } /* ── Примітка + підвал ── */ .ep-mc__note { margin-top: 14px; font-size: .8rem; color: #8493a5; line-height: 1.5; } .ep-mc__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-top: 1px solid rgba(30,58,95,.1); background: #f7f9fc; } .ep-mc__foothint { font-size: .82rem; color: #6b7c91; max-width: 420px; } .ep-mc__order { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border: none; border-radius: 10px; background: #1E3A5F; color: #fff; font-weight: 700; font-size: .92rem; cursor: pointer; transition: background .15s; } .ep-mc__order:hover { background: #DA1A32; } /* ── Варіант «рядки форматів» (плакати) ── */ .ep-mc__rows { display: flex; flex-direction: column; gap: 8px; } .ep-mc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; border: 1px solid rgba(30,58,95,.14); border-radius: 10px; background: #fbfcfe; } .ep-mc-num { width: 72px; } .ep-mc-sum { margin-left: auto; font-weight: 800; color: #1E3A5F; font-size: .95rem; white-space: nowrap; } .ep-mc-del { margin-left: auto; width: 28px; height: 28px; border: none; background: rgba(218,26,50,.1); color: #DA1A32; border-radius: 7px; cursor: pointer; font-size: 1.1rem; line-height: 1; } .ep-mc-del:disabled { opacity: .35; cursor: default; } .ep-mc__addrow { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1.5px dashed rgba(30,58,95,.3); background: #fff; color: #1E3A5F; border-radius: 9px; font-weight: 700; font-size: .85rem; cursor: pointer; } .ep-mc__addrow:hover { border-color: #DA1A32; color: #DA1A32; } .ep-mc-row .ep-sel { min-width: 150px; } /* ── Варіант «сітка параметрів» (цифровий друк) ── */ .ep-mc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; } .ep-mc-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .ep-mc-field--full { grid-column: 1 / -1; } .ep-mc-field > label { font-size: .78rem; font-weight: 600; color: #6b7c91; } .ep-mc-grid .ep-mc-in { width: 100%; box-sizing: border-box; padding: 9px 11px; font-size: .88rem; } .ep-mc-grid .ep-mc-cust { display: flex; margin-top: 6px; } .ep-mc-grid .ep-mc-cust .ep-mc-in { width: 80px; } .ep-mc-grid .ep-mc-chk { padding-top: 22px; } .ep-mc-grid .ep-sel { width: 100%; } @media (max-width: 640px) { .ep-mc-sum { margin-left: 0; } } @media (max-width: 560px) { .ep-mc-grid { grid-template-columns: 1fr; } .ep-mc-grid .ep-mc-chk { padding-top: 0; } } /* ── Стилізовані випадайки (ep-sel) — щоб файл був самодостатнім на будь-якій сторінці, де підключено manager-calc.css (для майбутніх калькуляторів) ── */ .ep-sel { position: relative; } .ep-sel > select.ep-calc-select { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; } .ep-sel__trigger { width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 14px; border: 1.5px solid rgba(30,58,95,.18); border-radius: 10px; background: #fff; font: inherit; font-size: .92rem; color: #1E3A5F; cursor: pointer; transition: border-color .15s, box-shadow .15s; } .ep-sel__trigger:hover { border-color: rgba(30,58,95,.35); } .ep-sel.is-open .ep-sel__trigger { border-color: #1E9E57; box-shadow: 0 0 0 3px rgba(30,158,87,.15); } .ep-sel__caret { flex-shrink: 0; width: 8px; height: 8px; border: solid #8493a5; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-top: -3px; transition: transform .2s; } .ep-sel.is-open .ep-sel__caret { transform: rotate(-135deg); margin-top: 2px; } .ep-sel__panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50; background: #fff; border: 1px solid rgba(30,58,95,.12); border-radius: 12px; box-shadow: 0 12px 32px rgba(30,58,95,.16); padding: 6px; display: none; max-height: 260px; overflow: auto; } .ep-sel.is-open .ep-sel__panel { display: block; } .ep-sel__opt { padding: 10px 12px; border-radius: 8px; font-size: .9rem; color: #1E3A5F; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ep-sel__opt:hover { background: rgba(58,175,217,.1); } .ep-sel__opt--sel { background: rgba(30,158,87,.1); color: #16603a; font-weight: 600; } .ep-sel__opt--sel::after { content: ""; flex-shrink: 0; width: 5px; height: 9px; border: solid #1E9E57; border-width: 0 2px 2px 0; transform: rotate(45deg); } /* Некоректні дані у службовому калькуляторі: 0 грн + попередження біля вартості */ .ep-mc-invalid { flex-basis: 100%; margin-top: 2px; display: flex; align-items: center; gap: 7px; color: #DA1A32; font-size: .86rem; font-weight: 600; } .ep-mc-invalid i { font-size: .95rem; line-height: 1; } /* ── Режим службового калькулятора (друк+прошивка / тільки прошивка) ── */ .ep-mc-modes { display: flex; gap: 8px; margin-bottom: 14px; } .ep-mc-modebtn { flex: 1; padding: 10px 14px; border: 1.5px solid rgba(30,58,95,.18); background: #fff; border-radius: 10px; font: inherit; font-size: .9rem; font-weight: 600; color: #1E3A5F; cursor: pointer; transition: border-color .15s, background .15s; } .ep-mc-modebtn:hover { border-color: rgba(30,58,95,.35); } .ep-mc-modebtn--sel { border-color: #1E9E57; background: rgba(30,158,87,.08); box-shadow: 0 0 0 2px rgba(30,158,87,.15); } .ep-mc-fieldnote { margin-top: 12px; font-size: .8rem; color: #6b7c91; line-height: 1.5; } /* ── Оздоблення проєкту у службовому калькуляторі креслень ── */ .ep-mc-proj { margin-top: 12px; padding: 12px 14px; border: 1px dashed rgba(30,58,95,.22); border-radius: 12px; background: #f7f9fc; } .ep-mc-proj__t { font-size: .82rem; font-weight: 700; color: #1E3A5F; margin-bottom: 10px; } .ep-mc-proj__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }