/* ==========================================================================
   Privat (/privat/) – service bubbles, price cards, guide links
   ========================================================================== */

/* ---------- service directory: round "bubbles", 7 per row (5 / 4 / 3 / 2 on smaller screens) ---------- */
.ck-bubbles { --cols: 7; }
.ck-bubble-item { width: calc((100% - (var(--cols) - 1) * 16px) / var(--cols)) !important; min-height: 184px; display: grid !important; place-items: center; }
.ck-bubble-item:nth-child(even) { padding-top: 20px !important; }
.ck-bubble { width: 100% !important; max-width: 150px; aspect-ratio: 1; border-radius: 50%; border: 1px solid #d4e2eb; background: #fff; color: #243b50; text-align: center; box-shadow: 0 3px 12px #153c6405; transition: transform .24s, box-shadow .24s, border-color .24s; isolation: isolate; }
.ck-bubble-item.is-priority .ck-bubble { max-width: 172px; background: #e7f2fa; border-color: #bed8ea; color: #08418e; }
.ck-bubble-item.is-navy .ck-bubble { background: #08418e; border-color: #08418e; color: #fff; }
.ck-bubble .elementor-heading-title, .ck-bubble .elementor-icon { color: inherit !important; }
.ck-bubble .elementor-icon svg { stroke: currentColor; fill: none; }
.ck-bubble-icon svg { width: 27px; height: 27px; stroke-width: 1.5; transition: transform .24s; }
.ck-bubble-arrow svg { width: 15px; height: 15px; }
.ck-bubble-arrow { opacity: .55; transition: transform .24s, opacity .24s; }
.ck-bubble-label .elementor-heading-title { overflow-wrap: anywhere; hyphens: auto; }
.ck-bubble::after { content: ""; position: absolute; inset: 0; border: 1px solid #528eb7; border-radius: 50%; opacity: 0; pointer-events: none; }
.ck-bubble-item.is-navy .ck-bubble::after { border-color: #c0ddf2; }
.ck-bubble:focus-visible { outline: 3px solid #145295; outline-offset: 5px; }
@media (hover: hover) and (pointer: fine) {
	.ck-bubble:hover { transform: scale(1.025); border-color: #5898c4; box-shadow: 0 10px 24px #153c6415; }
	.ck-bubble:hover .ck-bubble-icon svg { transform: translateY(-2px); }
	.ck-bubble:hover .ck-bubble-arrow { transform: translate(3px, -3px); opacity: 1; }
	.ck-bubble:hover::after { animation: ck-ripple 550ms ease-out 1; }
}
@keyframes ck-ripple { from { opacity: .4; transform: scale(.98); } to { opacity: 0; transform: scale(1.09); } }
@media (max-width: 1250px) {
	.ck-bubbles { --cols: 5; }
	.ck-bubble-item { min-height: 174px; }
	.ck-bubble-item.is-priority .ck-bubble { max-width: 166px; }
}
@media (max-width: 1000px) { .ck-bubbles { --cols: 4; } .ck-bubble-item:nth-child(even) { padding-top: 0 !important; } }
@media (max-width: 760px) { .ck-bubbles { --cols: 3; } }
@media (max-width: 640px) {
	.ck-bubbles { --cols: 2; }
	.ck-bubble-item { min-height: 0; }
	.ck-bubble, .ck-bubble-item.is-priority .ck-bubble { max-width: 168px; padding: 16px 12px !important; gap: 10px !important; }
}
.ck-directory-head { max-width: 680px; margin-inline: auto !important; }

/* ---------- price preview: three cards with an accent tick ---------- */
.ck-pcard { position: relative; min-height: 188px; background: #f0f7fb; border: 1px solid #d1e2ed; border-radius: 8px; overflow: hidden; transition: background .2s, border-color .2s; }
.ck-pcard::before { content: ""; position: absolute; top: 0; left: 28px; width: 36px; height: 3px; background: #6ba8cc; }
.ck-pcard-price { width: 100%; padding-top: 18px; border-top: 1px solid #d1e2ed; }
.ck-pcard-price .elementor-heading-title { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) { .ck-pcard:hover { background: #eaf4fa; border-color: #a6c9df; } }
.ck-pp-btn .elementor-button { min-height: 50px; }
@media (max-width: 960px) { .ck-pcard { min-height: 174px; padding: 24px 20px !important; } }
@media (max-width: 700px) {
	.ck-pp-head { grid-template-columns: minmax(0, 1fr) !important; --e-con-grid-template-columns: minmax(0, 1fr) !important; gap: 18px !important; margin-bottom: 24px !important; }
	.ck-pcards { grid-template-columns: minmax(0, 1fr) !important; --e-con-grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
	.ck-pcard { flex-direction: row !important; align-items: center !important; min-height: 88px; padding: 22px 20px !important; gap: 16px !important; }
	.ck-pcard::before { inset: 20px auto 20px 0; width: 3px; height: auto; }
	.ck-pcard-name { flex: 1 !important; }
	.ck-pcard-name .elementor-heading-title { font-size: 15px !important; }
	.ck-pcard-price { flex: 1 !important; width: auto; border: 0; padding: 0; }
	.ck-pcard-price .elementor-heading-title { font-size: 24px !important; text-align: right; }
	.ck-pp-bottom { flex-direction: column !important; align-items: stretch !important; gap: 18px !important; }
	.ck-pp-btn .elementor-button, .ck-pp-btn .elementor-button-content-wrapper { width: 100%; justify-content: space-between; }
	.ck-mw-19ch .elementor-heading-title { max-width: 22ch; }
}

/* ---------- guides: link rows with the arrow at the end ---------- */
.ck-guide-links .elementor-icon-list-item { margin: 0 !important; padding: 0 !important; }
.ck-guide-links .elementor-icon-list-item > a { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 15px; min-height: 56px; padding: 12px 6px; border-bottom: 1px solid #dde6ed; transition: background .2s, border-color .2s, transform .2s; }
.ck-guide-links .elementor-icon-list-text { padding: 0 !important; }
.ck-guide-links .elementor-icon-list-icon { margin: 0 !important; padding: 0 !important; }
.ck-guide-links .elementor-icon-list-text { flex: 1 1 auto; min-width: 0; }
.ck-guide-links .elementor-icon-list-item::after { display: none !important; }
@media (hover: hover) and (pointer: fine) { .ck-guide-links .elementor-icon-list-item > a:hover { background: #eef5fa; border-color: #8db3cd; transform: translateX(3px); } }
.ck-guide { transition: transform .3s, box-shadow .3s; }
.ck-guide:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -24px #08418e66; }

/* bubble text colours win over the kit's link colour */
.ck-bubble, .ck-bubble:hover { color: #243b50 !important; }
.ck-bubble-item.is-priority .ck-bubble { color: #08418e !important; }
.ck-bubble-item.is-navy .ck-bubble { color: #fff !important; }
.ck-bubble-label .elementor-heading-title { display: block; font-size: 14px !important; line-height: 1.35 !important; }