/* * Єдина система підказок «?» — калькулятори, кабінет, вхід. * Розмітка: * Для готового HTML (з PHP, wp_kses): data-uvh-html замість data-uvh. * JS (hints.js) сам малює кружечок «?» і поповер — тут лише стилі. * * ⚠️ Тема XStore перебиває наші класи і чіпляє !important до кнопок/label — * тому всі властивості кружечка й поповера теж з !important (зразок: * .uvdtf-calc__cart-add у calc.css). [hidden] дублюємо явним display:none — * інакше свій display у правилі стану перебиває браузерний дефолт. */ .uvh { position: relative; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; max-width: 18px !important; max-height: 18px !important; padding: 0 !important; margin: 0 !important; border: 1.5px solid #c3bbd9 !important; border-radius: 50% !important; background: #f5f3fb !important; color: #675c8a !important; font: 800 11.5px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; white-space: nowrap !important; cursor: pointer !important; vertical-align: middle !important; flex: 0 0 auto !important; box-shadow: none !important; appearance: none !important; -webkit-appearance: none !important; -webkit-tap-highlight-color: transparent; transition: background .12s ease, color .12s ease, border-color .12s ease; } /* Зона натискання ≥44px на тач — без розтягування самого кружечка. */ .uvh::before { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } .uvh:hover, .uvh:focus-visible, .uvh.is-open { background: var(--uvh-acc, var(--uvc-acc, #6d28d9)) !important; border-color: var(--uvh-acc, var(--uvc-acc, #6d28d9)) !important; color: #fff !important; } .uvh:focus-visible { outline: 2px solid var(--uvh-acc, var(--uvc-acc, #6d28d9)) !important; outline-offset: 2px !important; } .uvh:focus:not(:focus-visible) { outline: none !important; } /* Рядок «підпис + підказка» — для місць, де поруч немає власного тексту-хука. */ .uvh-row { display: flex !important; align-items: center !important; gap: 6px !important; margin: 0 0 6px !important; } .uvh-row > span { font-size: 12.5px !important; font-weight: 700 !important; color: #4b5563 !important; text-transform: uppercase !important; letter-spacing: .02em !important; } /* ─── Поповер: один спільний вузол, JS позиціонує через position:fixed ─── (щоб не залежати від transform/overflow батьків — та сама причина, з якої липка планка калькулятора живе прямо в , див. calc.css). */ .uvh-pop { position: fixed !important; z-index: 2147483620 !important; box-sizing: border-box !important; width: max-content !important; max-width: 280px !important; background: #fff !important; color: #241e3c !important; border: 1px solid #e6e1f2 !important; border-radius: 12px !important; box-shadow: 0 14px 34px -10px rgba(45, 27, 80, .38), 0 2px 10px rgba(45, 27, 80, .12) !important; padding: 12px 14px !important; font: 400 13.5px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; opacity: 0; transform: translateY(4px); transition: opacity .12s ease, transform .12s ease; pointer-events: none; } .uvh-pop[hidden] { display: none !important; } .uvh-pop.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; } .uvh-pop b { color: var(--uvh-acc, var(--uvc-acc, #6d28d9)) !important; font-weight: 700 !important; } .uvh-pop a { color: var(--uvh-acc, var(--uvc-acc, #6d28d9)) !important; font-weight: 600 !important; text-decoration: underline !important; } .uvh-pop__body p { margin: 0 0 6px !important; } .uvh-pop__body p:last-child { margin-bottom: 0 !important; } .uvh-pop__arrow { position: absolute !important; width: 0 !important; height: 0 !important; border-style: solid !important; left: 16px; } .uvh-pop[data-place="bottom"] .uvh-pop__arrow { top: -6px; border-width: 0 6px 6px 6px !important; border-color: transparent transparent #fff transparent !important; filter: drop-shadow(0 -2px 2px rgba(45, 27, 80, .10)); } .uvh-pop[data-place="top"] .uvh-pop__arrow { bottom: -6px; border-width: 6px 6px 0 6px !important; border-color: #fff transparent transparent transparent !important; filter: drop-shadow(0 2px 2px rgba(45, 27, 80, .10)); } @media (max-width: 480px) { .uvh-pop { max-width: calc(100vw - 20px) !important; } }