/*
 * The visual editor's widgets on the public site. Colours, corners and widths are the theme's tokens, each with a fallback, so a
 * widget looks at home in any theme. Rules start from `.blk` (the block's wrapper): one class more than a theme's text styles
 * (`.prose h2`), so a widget inside a page's text keeps its own look. What an editor styled is written per block (`.ob-<id>`) and
 * wins over all of this.
 */

/* ---- container ------------------------------------------------------------------------------------------------- */
.blk-container { position: relative; padding: 10px; }
.blk .ob-con { display: block; margin: 0; }
.blk .ob-con__inner { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.blk .ob-con--boxed > .ob-con__inner { width: min(100%, var(--wrap, 72rem)); margin-inline: auto; }
.blk .ob-con__inner > .blk { min-width: 0; max-width: 100%; margin: 0; }
.prose .blk-container, .tpl-section .blk-container { margin-block: 0; }
/* A full-width container holding nothing but a picture of some kind (a slider, an image, a video, a map) runs from edge to edge:
   none of the container's own space around it, and a slider's corners square. A padding set in the editor still wins (its rule is
   more particular than this one, which only ties the default above and follows it). */
.blk-container:where(:has(> .ob-con--full > .ob-con__inner > :is(.blk-slider, .blk-image, .blk-video, .blk-map):only-child)) { padding: 0; }
.ob-con--full > .ob-con__inner > .blk-slider:only-child > .okslider { border-radius: 0; }

/* ---- heading, text --------------------------------------------------------------------------------------------- */
.blk .ob-heading { margin: 0; color: var(--ink, #111827); font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); line-height: 1.2; text-wrap: balance; }
.blk p.ob-heading, .blk div.ob-heading { font-size: 1.125rem; }
.blk h1.ob-heading { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); }
.blk h3.ob-heading { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); }
.blk h4.ob-heading, .blk h5.ob-heading, .blk h6.ob-heading { font-size: 1.125rem; }
.blk .ob-heading a { color: inherit; text-decoration: none; }
.blk .ob-heading a:hover { text-decoration: underline; }

.blk .ob-text { line-height: 1.7; }
/* A theme's reading measure (`p { max-width: 68ch }`) would leave centred text off-centre: a widget's width is set in the editor. */
.blk .ob-text p, .blk .ob-text li { max-width: none; }
.blk .ob-text > :first-child { margin-top: 0; }
.blk .ob-text > :last-child { margin-bottom: 0; }
.blk .ob-text p, .blk .ob-text ul, .blk .ob-text ol, .blk .ob-text blockquote { margin: 0 0 1em; }
.blk .ob-text h2, .blk .ob-text h3, .blk .ob-text h4 { margin: 1.4em 0 0.5em; line-height: 1.25; }
.blk .ob-text blockquote { padding-inline-start: 1em; border-inline-start: 3px solid var(--accent, #1d4ed8); color: var(--ink-quiet, #4b5563); }
.blk .ob-text a { color: var(--accent, #1d4ed8); }

/* ---- icon ------------------------------------------------------------------------------------------------------ */
.blk .ob-svg { display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: -0.125em; }
.blk .ob-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--accent, #1d4ed8); font-size: 48px; line-height: 1; text-decoration: none; transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease; }
.blk .ob-icon--stacked { padding: 0.45em; background: var(--accent, #1d4ed8); color: var(--accent-ink, #ffffff); }
.blk .ob-icon--framed { padding: 0.4em; border: 2px solid currentColor; }
.blk .ob-icon--circle.ob-icon--stacked, .blk .ob-icon--circle.ob-icon--framed { border-radius: 50%; }
.blk .ob-icon--square.ob-icon--stacked, .blk .ob-icon--square.ob-icon--framed { border-radius: var(--radius-sm, 6px); }
a.ob-icon:focus-visible { outline: 3px solid var(--accent, #1d4ed8); outline-offset: 3px; }

/* ---- space, separator ------------------------------------------------------------------------------------------ */
.blk-space { height: 40px; }
.blk .ob-space { height: 100%; }
.blk .ob-sep { width: 100%; height: 0; margin: 0 auto; border: 0; border-top: 1px solid var(--line, #e5e7eb); }

/* ---- tabs ------------------------------------------------------------------------------------------------------ */
.blk .ob-tabs__list { display: flex; flex-wrap: wrap; gap: 0.25rem; border-bottom: 1px solid var(--line, #e5e7eb); }
.blk .ob-tabs__tab {
    min-height: 2.75rem; margin: 0 0 -1px; padding: 0.6rem 1.1rem; border: 1px solid transparent; border-radius: var(--radius-sm, 6px) var(--radius-sm, 6px) 0 0;
    background: transparent; color: var(--ink-quiet, #4b5563); font: inherit; font-weight: 600; cursor: pointer; box-shadow: none;
}
.blk .ob-tabs__tab:hover { color: var(--ink, #111827); background: transparent; filter: none; }
.blk .ob-tabs__tab.is-active { border-color: var(--line, #e5e7eb) var(--line, #e5e7eb) var(--paper, #ffffff); background: var(--paper, #ffffff); color: var(--accent, #1d4ed8); }
.blk .ob-tabs__tab:focus-visible { outline: 3px solid var(--accent, #1d4ed8); outline-offset: -3px; }
.blk .ob-tabs__panel { padding: 1.25rem 1rem; }
.blk .ob-tabs__panel > :last-child { margin-bottom: 0; }
/* Without the script every panel shows, each under its own title; with it, one at a time. */
.blk .ob-tabs:not(.is-ready) .ob-tabs__list { display: none; }
.blk .ob-tabs.is-ready .ob-tabs__heading { display: none; }
.blk .ob-tabs__heading { margin: 0 0 0.5rem; font-size: 1.125rem; }
.blk .ob-tabs.is-ready .ob-tabs__panel[hidden] { display: none; }
.blk .ob-tabs--vertical.is-ready { display: grid; grid-template-columns: minmax(10rem, max-content) 1fr; gap: 1.5rem; }
.blk .ob-tabs--vertical .ob-tabs__list { flex-direction: column; border-bottom: 0; border-inline-end: 1px solid var(--line, #e5e7eb); }
.blk .ob-tabs--vertical .ob-tabs__tab { margin: 0 -1px 0 0; border-radius: var(--radius-sm, 6px) 0 0 var(--radius-sm, 6px); text-align: start; }
.blk .ob-tabs--vertical .ob-tabs__tab.is-active { border-color: var(--line, #e5e7eb) var(--paper, #ffffff) var(--line, #e5e7eb) var(--line, #e5e7eb); }
@media (max-width: 767px) {
    .blk .ob-tabs--vertical.is-ready { display: block; }
    .blk .ob-tabs--vertical .ob-tabs__list { flex-direction: row; border-inline-end: 0; border-bottom: 1px solid var(--line, #e5e7eb); }
    .blk .ob-tabs--vertical .ob-tabs__tab { margin: 0 0 -1px; border-radius: var(--radius-sm, 6px) var(--radius-sm, 6px) 0 0; }
}

/* ---- accordion ------------------------------------------------------------------------------------------------- */
.blk .ob-acc { display: flex; flex-direction: column; gap: 0.5rem; }
.blk .ob-acc__item { border: 1px solid var(--line, #e5e7eb); border-radius: var(--radius-sm, 6px); background: var(--paper, #ffffff); }
.blk .ob-acc__title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; padding: 0.75rem 1rem; font-weight: 600; cursor: pointer; list-style: none; }
.blk .ob-acc__title::-webkit-details-marker { display: none; }
.blk .ob-acc__title:focus-visible { outline: 3px solid var(--accent, #1d4ed8); outline-offset: -3px; border-radius: var(--radius-sm, 6px); }
.blk .ob-acc__icon { transition: transform 200ms ease; }
.blk .ob-acc__item[open] > .ob-acc__title .ob-acc__icon { transform: rotate(180deg); }
.blk .ob-acc__body { padding: 0 1rem 1rem; }
.blk .ob-acc__body > :last-child { margin-bottom: 0; }

/* ---- map ------------------------------------------------------------------------------------------------------- */
.blk .ob-map__frame { display: block; width: 100%; border: 0; border-radius: var(--radius-sm, 6px); }

/* ---- icon box -------------------------------------------------------------------------------------------------- */
.blk .ob-ibox { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.blk .ob-ibox--left, .blk .ob-ibox--right { flex-direction: row; align-items: flex-start; text-align: start; }
.blk .ob-ibox--right { flex-direction: row-reverse; }
.blk .ob-ibox__icon { display: inline-flex; color: var(--accent, #1d4ed8); font-size: 40px; line-height: 1; }
.blk .ob-ibox__body { min-width: 0; }
.blk .ob-ibox__title { margin: 0 0 0.4rem; font-size: 1.25rem; line-height: 1.3; }
.blk .ob-ibox__title a { color: inherit; text-decoration: none; }
.blk .ob-ibox__text { margin: 0; color: var(--ink-quiet, #4b5563); }
@media (max-width: 767px) {
    .blk .ob-ibox--left, .blk .ob-ibox--right { flex-direction: column; align-items: center; text-align: center; }
}

/* ---- counter --------------------------------------------------------------------------------------------------- */
.blk-counter { container-type: inline-size; }
.blk .ob-counter { text-align: center; }
/* The number keeps to one line and to its own width: in a narrow column it is smaller, not broken in two. */
.blk .ob-counter__number { color: var(--accent, #1d4ed8); font-size: min(3.5rem, 19cqi); font-weight: 700; line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.blk .ob-counter--m .ob-counter__number { font-size: min(3.5rem, 14cqi); }
.blk .ob-counter--l .ob-counter__number { font-size: min(3.5rem, 10.5cqi); }
/* Longer still, it may break into lines rather than run off a phone. */
.blk .ob-counter--xl .ob-counter__number { font-size: min(3rem, 9cqi); white-space: normal; }
.blk .ob-counter__title { margin-top: 0.35rem; color: var(--ink-quiet, #4b5563); font-size: 1.05rem; }

/* ---- testimonial ----------------------------------------------------------------------------------------------- */
.blk .ob-quote { margin: 0; text-align: center; }
.blk .ob-quote--left { text-align: start; }
.blk .ob-quote__stars { display: inline-flex; gap: 0.15em; margin-bottom: 0.75rem; color: #f59e0b; font-size: 18px; }
.blk .ob-quote__text { margin: 0; padding: 0; border: 0; background: none; color: inherit; font-size: 1.15rem; font-style: italic; line-height: 1.6; }
.blk .ob-quote__text p { margin: 0; }
.blk .ob-quote__who { display: inline-flex; align-items: center; gap: 0.75rem; margin-top: 1.25rem; text-align: start; }
.blk .ob-quote__image { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.blk .ob-quote__person { display: flex; flex-direction: column; }
.blk .ob-quote__name { font-weight: 700; }
.blk .ob-quote__role { color: var(--ink-quiet, #4b5563); font-size: 0.9rem; }

/* ---- price table ----------------------------------------------------------------------------------------------- */
.blk .ob-price { position: relative; display: flex; flex-direction: column; gap: 1.25rem; height: 100%; padding: 2rem 1.5rem; overflow: hidden; border: 1px solid var(--line, #e5e7eb); border-radius: var(--radius, 10px); background: var(--paper, #ffffff); text-align: center; }
.blk .ob-price--featured { border-color: var(--accent, #1d4ed8); box-shadow: 0 10px 30px rgb(16 24 40 / 0.12); }
/* A pill above the title, in the flow: a long word (პოპულარული) fits whatever the card's width. */
.blk .ob-price__ribbon { align-self: center; max-width: 100%; margin: -0.75rem 0 -0.5rem; padding: 0.25rem 0.8rem; border-radius: 999px; background: var(--accent, #1d4ed8); color: var(--accent-ink, #ffffff); font-size: 0.8rem; font-weight: 700; overflow-wrap: anywhere; }
.blk .ob-price__title { margin: 0; font-size: 1.25rem; }
.blk .ob-price__subtitle { margin: 0.35rem 0 0; color: var(--ink-quiet, #4b5563); font-size: 0.95rem; }
.blk .ob-price__amount { display: flex; align-items: baseline; justify-content: center; gap: 0.15rem; color: var(--ink, #111827); }
.blk .ob-price__currency { font-size: 1.5rem; font-weight: 600; }
.blk .ob-price__value { font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); font-weight: 800; line-height: 1; }
.blk .ob-price__period { color: var(--ink-quiet, #4b5563); font-size: 1rem; }
.blk .ob-price__features { display: flex; flex-direction: column; gap: 0.6rem; margin: 0; padding: 0; list-style: none; text-align: start; }
.blk .ob-price__features li { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0; }
.blk .ob-price__features .ob-svg { margin-top: 0.2em; }
.blk .ob-price__features .is-yes .ob-svg { color: var(--success, #15803d); }
.blk .ob-price__features .is-no { color: var(--ink-quiet, #6b7280); text-decoration: line-through; }
.blk .ob-price__features .is-no .ob-svg { color: var(--ink-quiet, #9ca3af); }
.blk .ob-price__button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; margin-top: auto; padding: 0.65rem 1.4rem; border-radius: var(--radius-sm, 6px); background: var(--accent, #1d4ed8); color: var(--accent-ink, #ffffff); font-weight: 700; text-decoration: none; transition: filter 150ms ease, background-color 150ms ease; }
.blk .ob-price__button:hover { filter: brightness(1.08); color: var(--accent-ink, #ffffff); }
.blk .ob-price__button:focus-visible { outline: 3px solid var(--accent, #1d4ed8); outline-offset: 3px; }

/* ---- social icons ---------------------------------------------------------------------------------------------- */
.blk .ob-social { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.blk .ob-social li { margin: 0; }
.blk .ob-social__link { display: inline-flex; align-items: center; justify-content: center; width: 2.6em; height: 2.6em; background: var(--ink, #111827); color: var(--paper, #ffffff); font-size: 16px; text-decoration: none; transition: filter 150ms ease, background-color 150ms ease; }
.blk .ob-social__link:hover { filter: brightness(1.15); color: var(--paper, #ffffff); }
.blk .ob-social__link:focus-visible { outline: 3px solid var(--accent, #1d4ed8); outline-offset: 2px; }
.blk .ob-social--circle .ob-social__link { border-radius: 50%; }
.blk .ob-social--rounded .ob-social__link { border-radius: 25%; }
.blk .ob-social__link--facebook { background: #1877f2; }
.blk .ob-social__link--instagram { background: #c13584; }
.blk .ob-social__link--x { background: #000000; }
.blk .ob-social__link--youtube { background: #ff0000; }
.blk .ob-social__link--linkedin { background: #0a66c2; }
.blk .ob-social__link--tiktok { background: #010101; }
.blk .ob-social__link--whatsapp { background: #25d366; }
.blk .ob-social__link--telegram { background: #229ed9; }
.blk .ob-social__link--viber { background: #7360f2; }

/* ---- menu ------------------------------------------------------------------------------------------------------ */
/* The links take the colour of the text around them (a dark header's white, a page's ink); the panels that open over the page
   (a sub-menu, the list on a small screen) are the page's own paper and ink, whatever the header around them. */
.blk .ob-menu { position: relative; }
.blk .ob-menu__list, .blk .ob-menu__sub { margin: 0; padding: 0; list-style: none; }
.blk .ob-menu__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.blk .ob-menu--vertical .ob-menu__list { flex-direction: column; align-items: stretch; }
.blk .ob-menu--align-center .ob-menu__list { justify-content: center; }
.blk .ob-menu--align-end .ob-menu__list { justify-content: flex-end; }
.blk .ob-menu--horizontal.ob-menu--align-justify .ob-menu__list > .ob-menu__item { flex: 1 1 auto; }
.blk .ob-menu--horizontal.ob-menu--align-justify .ob-menu__list > .ob-menu__item > .ob-menu__link { justify-content: center; }
.blk .ob-menu__item { position: relative; margin: 0; padding: 0; }
.blk .ob-menu__link {
    display: flex; align-items: center; gap: 0.35em; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm, 6px);
    color: inherit; font-weight: 500; line-height: 1.3; text-decoration: none; transition: color 150ms ease, background-color 150ms ease;
}
.blk .ob-menu__link:hover, .blk .ob-menu__item.is-current > .ob-menu__link { color: var(--accent, #1d4ed8); }
.blk .ob-menu__link:focus-visible { outline: 3px solid var(--accent, #1d4ed8); outline-offset: 1px; }
.blk .ob-menu__caret { width: 0.9em; height: 0.9em; margin-inline-start: auto; transition: transform 150ms ease; }
.blk .ob-menu--horizontal .ob-menu__list > .ob-menu__item > .ob-menu__link > .ob-menu__caret { margin-inline-start: 0; }

/* A horizontal menu's sub-menu opens under its item, on the pointer or on the keyboard's focus; a deeper one beside it. */
.blk .ob-menu__sub { color: var(--ink, #111827); }
.blk .ob-menu--horizontal .ob-menu__sub {
    position: absolute; top: 100%; inset-inline-start: 0; z-index: 50; min-width: 13rem; padding: 0.35rem;
    border: 1px solid var(--line, #e5e7eb); border-radius: var(--radius-sm, 8px); background: var(--paper, #ffffff);
    box-shadow: 0 12px 32px rgb(15 23 42 / 0.14); opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity 150ms ease, transform 150ms ease, visibility 150ms;
}
.blk .ob-menu--horizontal .ob-menu__sub .ob-menu__sub { top: -0.4rem; inset-inline-start: 100%; }
.blk .ob-menu--horizontal .ob-menu__item:hover > .ob-menu__sub,
.blk .ob-menu--horizontal .ob-menu__item:focus-within > .ob-menu__sub { opacity: 1; visibility: visible; transform: none; }
.blk .ob-menu--horizontal .ob-menu__item:hover > .ob-menu__link > .ob-menu__caret { transform: rotate(180deg); }
.blk .ob-menu--horizontal .ob-menu__sub .ob-menu__link:hover { background: var(--paper-sunken, #f3f4f6); }
.blk .ob-menu--horizontal .ob-menu__sub .ob-menu__caret,
.blk .ob-menu--horizontal .ob-menu__sub .ob-menu__item:hover > .ob-menu__link > .ob-menu__caret { transform: rotate(-90deg); }
/* A vertical menu shows its sub-menus under their items, indented. */
.blk .ob-menu--vertical .ob-menu__sub { padding-inline-start: 1rem; color: inherit; }

/* On a small screen (the script decides, from the widget's choice): one button, and the whole list under it when it is open. */
.blk .ob-menu__toggle {
    display: none; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; min-height: 0; margin: 0; padding: 0;
    border: 1px solid currentColor; border-radius: var(--radius-sm, 8px); background: transparent; color: inherit; font-size: 1.35rem;
    cursor: pointer; box-shadow: none; filter: none;
}
.blk .ob-menu__toggle:hover { background: rgb(127 127 127 / 0.12); filter: none; }
.blk .ob-menu__toggle:focus-visible { outline: 3px solid var(--accent, #1d4ed8); outline-offset: 2px; }
.blk .ob-menu__close, .blk .ob-menu.is-open .ob-menu__open { display: none; }
.blk .ob-menu.is-open .ob-menu__close { display: inline-block; }
.blk .ob-menu.is-collapsed { display: flex; }
.blk .ob-menu--align-center.is-collapsed { justify-content: center; }
.blk .ob-menu--align-end.is-collapsed { justify-content: flex-end; }
.blk .ob-menu.is-collapsed .ob-menu__toggle { display: inline-flex; }
.blk .ob-menu.is-collapsed > .ob-menu__list {
    position: absolute; top: calc(100% + 0.4rem); inset-inline-start: 0; z-index: 50; display: none; flex-direction: column; flex-wrap: nowrap;
    align-items: stretch; gap: 0; width: max-content; min-width: min(16rem, calc(100vw - 2rem)); max-width: calc(100vw - 2rem);
    max-height: 75vh; overflow-y: auto; padding: 0.35rem; border: 1px solid var(--line, #e5e7eb); border-radius: var(--radius-sm, 8px);
    background: var(--paper, #ffffff); color: var(--ink, #111827); box-shadow: 0 12px 32px rgb(15 23 42 / 0.16);
}
.blk .ob-menu--align-end.is-collapsed > .ob-menu__list { inset-inline: auto 0; }
.blk .ob-menu--align-center.is-collapsed > .ob-menu__list { inset-inline-start: 50%; transform: translateX(-50%); }
.blk .ob-menu.is-collapsed.is-open > .ob-menu__list { display: flex; }
.blk .ob-menu.is-collapsed .ob-menu__item { flex: none; }
.blk .ob-menu.is-collapsed .ob-menu__link { justify-content: flex-start; }
.blk .ob-menu.is-collapsed .ob-menu__sub {
    position: static; min-width: 0; padding: 0 0 0 1rem; border: 0; background: none; box-shadow: none; opacity: 1; visibility: visible; transform: none;
}
.blk .ob-menu.is-collapsed .ob-menu__caret { display: none; }

/* ---- entrance animations: only once the script is there, and never for somebody who asked for less motion ----------- */
@media (prefers-reduced-motion: no-preference) {
    .ob-anim-ready [data-ob-anim] { transition: opacity 700ms ease, transform 700ms ease; }
    .ob-anim-ready [data-ob-anim]:not(.is-in) { opacity: 0; }
    .ob-anim-ready [data-ob-anim="fade-up"]:not(.is-in) { transform: translateY(32px); }
    .ob-anim-ready [data-ob-anim="fade-down"]:not(.is-in) { transform: translateY(-32px); }
    .ob-anim-ready [data-ob-anim="fade-left"]:not(.is-in) { transform: translateX(32px); }
    .ob-anim-ready [data-ob-anim="fade-right"]:not(.is-in) { transform: translateX(-32px); }
    .ob-anim-ready [data-ob-anim="zoom-in"]:not(.is-in) { transform: scale(0.92); }
}

@media print {
    .ob-anim-ready [data-ob-anim] { opacity: 1 !important; transform: none !important; }
    .blk .ob-tabs .ob-tabs__panel[hidden] { display: block; }
}

/* A page laid out by the builder ("full", "canvas"): the blocks set the space around them, the theme's main area adds none. */
main:has(> .ob-page) { padding-block: 0; }
.ob-page { display: flow-root; }