/*
 * OK Builder — Block content styles.
 *
 * Loaded on the real frontend (for posts with the builder enabled) AND in
 * the editor canvas, so the editor preview and the live page always match.
 */

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: -0.15em;
    line-height: 1;
}

/* Per-device visibility (show_desktop/show_tablet/show_mobile settings,
   auto-injected onto every leaf block — see BuilderManager::registerBlock()
   and ::wrapVisibility()). Breakpoints match Bootstrap's lg/md so they line
   up with the theme's own responsive behavior. */
@media (min-width: 992px) {
    .ok-b-hide-desktop { display: none !important; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .ok-b-hide-tablet { display: none !important; }
}
@media (max-width: 767.98px) {
    .ok-b-hide-mobile { display: none !important; }
}

/* Auto-injected `min_height` wrapper (see BuilderManager::wrapMinHeight()) --
   without the flex stretch, the reserved height would just sit as blank
   space below the block's own content-sized box instead of the box itself
   growing to fill it. justify-content/align-items on the inner box are set
   inline per-instance (from the content_v_align/content_h_align settings),
   not here -- this file only owns the structural (always-on) part. */
.ok-b-min-height-wrap {
    display: flex;
    flex-direction: column;
}
.ok-b-min-height-wrap > .ok-b-min-height-inner {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
/* Blocks that manage their own internal alignment (video_section,
   call_to_action) get this modifier instead of justify-content/align-items
   (see wrapMinHeight()) -- their own rendered box is a real background box
   that must stretch to fill the reserved height itself, not just be
   positioned within blank space above/below a shorter box. `> *` reaches the
   block's own root without ever touching its own `style="..."` attribute. */
.ok-b-min-height-inner.ok-b-min-height-stretch-child > * {
    flex: 1 1 auto;
}

.ok-b-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
}

.ok-b-container-fluid {
    width: 100%;
    padding: 0 15px;
}

.ok-b-section {
    border-radius: 0;
    min-width: 0;
}

.ok-b-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
    min-width: 0;
}

.ok-b-column {
    padding: 0 10px;
    width: 100%;
    /* Flex items refuse to shrink below their own content's natural width
       by default (min-width:auto) -- without this, a column next to
       siblings with much narrower content (e.g. a wide embed/placeholder
       box next to a small button) can end up wider than its own
       percentage/equal share instead of actually honoring it. */
    min-width: 0;
}

.ok-b-col-equal { flex: 1 1 0; max-width: 100%; }
.ok-b-col-100 { flex: 0 0 100%; max-width: 100%; }
.ok-b-col-75  { flex: 0 0 75%;  max-width: 75%; }
.ok-b-col-70  { flex: 0 0 70%;  max-width: 70%; }
.ok-b-col-66  { flex: 0 0 66.6667%; max-width: 66.6667%; }
.ok-b-col-50  { flex: 0 0 50%;  max-width: 50%; }
.ok-b-col-33  { flex: 0 0 33.3333%; max-width: 33.3333%; }
.ok-b-col-30  { flex: 0 0 30%;  max-width: 30%; }
.ok-b-col-25  { flex: 0 0 25%;  max-width: 25%; }

@media (max-width: 767.98px) {
    .ok-b-column[class*="ok-b-col-"] { flex: 0 0 100%; max-width: 100%; }
}

.ok-b-pad-none   { padding-top: 0; padding-bottom: 0; }
.ok-b-pad-small  { padding-top: 20px; padding-bottom: 20px; }
.ok-b-pad-medium { padding-top: 50px; padding-bottom: 50px; }
.ok-b-pad-large  { padding-top: 90px; padding-bottom: 90px; }

.ok-b-heading { margin: 0 0 15px; line-height: 1.25; overflow-wrap: anywhere; }
.ok-b-text { margin: 0 0 15px; line-height: 1.7; overflow-wrap: anywhere; }
.ok-b-text p:last-child { margin-bottom: 0; }

.ok-b-image img { display: inline-block; }

.ok-b-btn { display: inline-block; text-decoration: none; font-weight: 600; }

.ok-b-divider { opacity: 1; }

.ok-b-video { position: relative; }

.ok-b-gallery {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, 1fr);
}
.ok-b-gallery-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ok-b-gallery-cols-4 { grid-template-columns: repeat(4, 1fr); }
.ok-b-gallery-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; aspect-ratio: 1 / 1; }

.ok-b-icon i, .ok-b-icon .material-symbols-outlined { line-height: 1; }

.ok-b-alert { border-radius: 0; }

.ok-b-accordion .accordion-button:not(.collapsed) { background-color: rgba(15, 159, 143, 0.1); color: #0f766e; }
.ok-b-tabs .nav-link.active { color: #0f766e; border-color: #dee2e6 #dee2e6 #fff; }

.ok-b-counter-num { font-size: 2.5rem; font-weight: 800; line-height: 1; }
.ok-b-counter-label { color: #6c757d; margin-top: 6px; font-weight: 500; }

.ok-b-iconbox { padding: 20px; }
.ok-b-iconbox-icon { font-size: 2rem; color: #0f9f8f; margin-bottom: 10px; }
.ok-b-iconbox-title { font-weight: 700; margin-bottom: 6px; }
.ok-b-iconbox-text { color: #6c757d; }

.ok-b-social { display: flex; gap: 12px; }
.ok-b-social-link { font-size: 1.3rem; text-decoration: none; }

.ok-b-image-placeholder,
.ok-b-video-placeholder,
.ok-b-gallery-placeholder,
.ok-b-audio-placeholder,
.ok-b-doc-placeholder,
.ok-b-map-placeholder {
    border-radius: 0;
    background: #f8f9fa;
}

/* ── Media (audio / doc / map / video-section) ──────────────────────── */

.ok-b-audio { margin-bottom: 15px; }
.ok-b-doc { margin-bottom: 15px; }
/* DocumentViewer's own injected <style> (see class-document-viewer.php)
   gives .ok-doc-container a 30px vertical margin meant for bare shortcode
   drop-in use -- redundant and slightly misaligned inside this block's own
   margin-bottom, so it's zeroed out here instead of touching that file. */
.ok-b-doc .ok-doc-container { margin: 0 !important; }
.ok-b-map { border-radius: 0; overflow: hidden; line-height: 0; position: relative; }
.ok-b-map iframe { display: block; }
.ok-b-video-section { border-radius: 0; }

/* ── Card / Image box ─────────────────────────────────────────────── */

.ok-b-card { overflow: hidden; height: 100%; }
.ok-b-card-icon { font-size: 1.6rem; color: #0f9f8f; margin-bottom: 8px; }
.ok-b-card-eyebrow { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0; color: #0f9f8f; margin-bottom: 6px; }
.ok-b-card-title { margin-bottom: 8px; }
.ok-b-card-text { color: #6c757d; }
.ok-b-card-link { display: inline-block; margin-top: 12px; font-weight: 700; color: #0f766e; text-decoration: none; }
.ok-b-card-link:hover { text-decoration: underline; }

.ok-b-image-box-img { width: 100%; border-radius: 0; display: block; }
.ok-b-image-box-title { font-size: 1.05rem; }
.ok-b-image-box-text { color: #6c757d; margin-top: 4px; }

/* ── Icon list ────────────────────────────────────────────────────── */

.ok-b-icon-list li { margin-bottom: 10px; display: flex; align-items: center; }
.ok-b-icon-list li:last-child { margin-bottom: 0; }
.ok-b-icon-list i, .ok-b-icon-list .material-symbols-outlined { color: #0f9f8f; }
.ok-b-icon-list-horizontal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.ok-b-icon-list-horizontal li { margin-bottom: 0; }
.ok-b-icon-list-link { color: inherit; text-decoration: none; }
.ok-b-icon-list-link:hover { color: #0f766e; }

/* ── Progress bar ─────────────────────────────────────────────────── */

.ok-b-progress { margin-bottom: 15px; }

/* ── Pricing table ────────────────────────────────────────────────── */

.ok-b-pricing-table {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 0;
    padding: 30px 24px;
}
.ok-b-pricing-highlight { border-color: #0f9f8f; box-shadow: 0 6px 20px rgba(15, 159, 143, .16); }
.ok-b-pricing-title { color: #6c757d; text-transform: uppercase; font-size: .8rem; letter-spacing: 0; margin-bottom: 12px; }
.ok-b-pricing-price { font-size: 2.6rem; font-weight: 800; line-height: 1; margin-bottom: 20px; }
.ok-b-pricing-currency { font-size: 1.4rem; font-weight: 700; vertical-align: top; margin-right: 2px; }
.ok-b-pricing-period { font-size: 1rem; font-weight: 400; color: #6c757d; }
.ok-b-pricing-features { margin-bottom: 24px; text-align: left; }
.ok-b-pricing-features li { margin-bottom: 10px; }
.ok-b-pricing-features li:last-child { margin-bottom: 0; }

/* ── Countdown ────────────────────────────────────────────────────── */

.ok-b-countdown-label { color: #6c757d; font-weight: 600; margin-bottom: 8px; overflow-wrap: anywhere; }
.ok-b-countdown-clock {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    font-variant-numeric: tabular-nums;
}
.ok-b-countdown-unit {
    min-width: 78px;
    padding: 10px 12px;
    border: 1px solid rgba(15, 159, 143, .18);
    background: rgba(15, 159, 143, .055);
    text-align: center;
}
.ok-b-countdown-value {
    display: block;
    font-size: 1.65rem;
    font-weight: 850;
    line-height: 1;
}
.ok-b-countdown-unit-label {
    display: block;
    margin-top: 5px;
    color: #6c757d;
    font-size: .72rem;
    font-weight: 700;
}

/* ── Call to action ───────────────────────────────────────────────── */

.ok-b-cta { border-radius: 0; padding: 50px 30px; color: #fff; }
.ok-b-cta-img { max-width: 100%; border-radius: 0; margin-bottom: 20px; }
.ok-b-cta-title { margin-bottom: 10px; }
.ok-b-cta-text { opacity: .9; margin-bottom: 24px; }

.ok-b-cta-bg-right, .ok-b-cta-bg-left { position: relative; overflow: hidden; }
.ok-b-cta-bg-right .ok-b-cta-content,
.ok-b-cta-bg-left .ok-b-cta-content {
    position: relative;
    z-index: 1;
    max-width: min(760px, 72%);
    text-shadow: 0 2px 18px rgba(0, 0, 0, .22);
}
.ok-b-cta-bg-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
}
.ok-b-cta-bg-image, .ok-b-cta-bg-fade { position: absolute; inset: 0; }
.ok-b-cta-bg-image {
    background-size: cover;
    background-position: center;
    opacity: 1;
    filter: saturate(1.04) contrast(1.02);
}
.ok-b-cta-bg-right .ok-b-cta-bg-image { background-position: center right; }
.ok-b-cta-bg-left .ok-b-cta-bg-image { background-position: center left; }
/* .ok-b-cta-bg-fade paints the actual gradient inline (its color has to
   match the block's own bg_color setting). The image covers the full CTA,
   while the overlay creates the readable side and dissolves into the photo,
   so there is no visible vertical edge where the image starts. */
@media (max-width: 767.98px) {
    .ok-b-cta-bg-layer { display: none; }
    .ok-b-cta-bg-right .ok-b-cta-content,
    .ok-b-cta-bg-left .ok-b-cta-content {
        max-width: 100%;
    }
}

/* ── Contact form ─────────────────────────────────────────────────── */

.ok-b-contact-form { max-width: 480px; }

/* ── Shortcode ────────────────────────────────────────────────────── */

.ok-b-shortcode:empty { display: none; }

/* ── Posts grid ───────────────────────────────────────────────────── */

.ok-b-posts-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, 1fr);
}
.ok-b-posts-grid-cols-1 { grid-template-columns: 1fr; }
.ok-b-posts-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ok-b-posts-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ok-b-posts-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.ok-b-posts-grid-item,
.ok-b-posts-grid-item:hover,
.ok-b-posts-grid-item:visited,
.ok-b-posts-grid-item * {
    /* The theme's own content-area link styling (e.g. `.entry-content a`)
       can be more specific than a lone class selector here, so `!important`
       guarantees the card never shows the underline browsers otherwise put
       on any real <a> -- this whole grid item is one big link (see
       posts_grid's render()), including its title/date/excerpt text. Color
       is deliberately left alone here so .ok-b-posts-grid-excerpt's own
       muted gray still applies -- only the link's own text keeps the plain
       `color: inherit` below. */
    text-decoration: none !important;
}
.ok-b-posts-grid-item {
    display: block;
    color: inherit;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 0;
    overflow: hidden;
}
.ok-b-posts-grid-media {
    width: 100%;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #eef4f3;
}
.ok-b-posts-grid-media > .ok-b-posts-grid-image {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: cover;
}
.ok-b-posts-grid-excerpt { color: #6c757d; font-size: .9rem; margin-top: 4px; }

/* 3 and 4 columns get cramped on tablet widths -- step down to 2 there
   instead of jumping straight from the desktop column count to 1 at the
   mobile breakpoint below. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .ok-b-posts-grid-cols-3, .ok-b-posts-grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
    .ok-b-posts-grid[class*="ok-b-posts-grid-cols-"] { grid-template-columns: 1fr; }
}

/* Visual polish layer
   These rules intentionally stay scoped to OK Builder block classes so theme
   styles keep owning the rest of the page. Inline per-block settings still
   win where users chose a custom radius, color, size, or alignment. */

:root {
    --okb-accent: #0f9f8f;
    --okb-accent-deep: #0f766e;
    --okb-ink: #103c37;
    --okb-muted: #64748b;
    --okb-soft: #f7fbfb;
    --okb-border: #dbe8e7;
    --okb-radius-sm: 6px;
    --okb-radius: 8px;
    --okb-shadow-sm: 0 4px 14px rgba(15, 23, 42, .07);
    --okb-shadow-md: 0 10px 28px rgba(15, 23, 42, .12);
}

.ok-b-heading {
    color: var(--okb-ink);
    letter-spacing: 0;
}
.ok-b-text {
    color: #334155;
    font-size: 1rem;
}
.ok-b-text a,
.ok-b-card-link,
.ok-b-icon-list-link {
    text-underline-offset: 3px;
}

.ok-b-btn {
    border-radius: var(--okb-radius-sm);
    box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.ok-b-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--okb-shadow-sm);
}
.ok-b-btn.btn-primary {
    background: var(--okb-accent);
    border-color: var(--okb-accent);
}
.ok-b-btn.btn-primary:hover {
    background: var(--okb-accent-deep);
    border-color: var(--okb-accent-deep);
}
.ok-b-btn.btn-outline-primary {
    color: var(--okb-accent);
    border-color: var(--okb-accent);
}
.ok-b-btn.btn-outline-primary:hover {
    color: #fff;
    background: var(--okb-accent);
}

.ok-b-divider {
    opacity: .9;
}

.ok-b-image img,
.ok-b-image-box-img,
.ok-b-gallery-item img {
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.ok-b-image a,
.ok-b-image-box a,
.ok-b-gallery-item {
    display: block;
    overflow: hidden;
    border-radius: inherit;
}
.ok-b-image-caption,
.ok-b-video-caption {
    color: var(--okb-muted);
    font-size: .88rem;
    margin-top: 8px;
}

.ok-b-gallery {
    gap: 14px;
}
.ok-b-gallery-item {
    background: var(--okb-soft);
    border-radius: var(--okb-radius);
    box-shadow: var(--okb-shadow-sm);
}
.ok-b-gallery-item:hover img {
    transform: scale(1.03);
}

.ok-b-image-placeholder,
.ok-b-video-placeholder,
.ok-b-gallery-placeholder,
.ok-b-audio-placeholder,
.ok-b-doc-placeholder,
.ok-b-map-placeholder {
    border: 1px dashed #cbd5e1 !important;
    border-radius: var(--okb-radius);
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    color: var(--okb-muted);
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ok-b-video,
.ok-b-map,
.ok-b-doc .ok-doc-container,
.ok-b-video-section {
    border-radius: var(--okb-radius);
    overflow: hidden;
    box-shadow: var(--okb-shadow-sm);
}
.ok-b-map-pin-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    line-height: normal;
}
.ok-b-map-pin-wrap {
    position: absolute;
    transform: translate(-50%, -100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: auto;
}
.ok-b-map-pin {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 999px 999px 999px 8px;
    background: #0f9f8f;
    color: #fff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .22);
    transform: rotate(-45deg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ok-b-map-pin .material-symbols-outlined {
    font-size: 24px;
    transform: rotate(45deg);
}
.ok-b-map-pin-card {
    position: absolute;
    left: 50%;
    bottom: 54px;
    width: 230px;
    max-width: min(230px, 70vw);
    transform: translateX(-50%);
    background: #fff;
    color: #0f172a;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 8px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .18);
    padding: 12px 14px;
    text-align: left;
}
.ok-b-map-pin-card::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-right: 1px solid rgba(15, 23, 42, .1);
    border-bottom: 1px solid rgba(15, 23, 42, .1);
    transform: translateX(-50%) rotate(45deg);
}
.ok-b-map-pin-title {
    font-weight: 800;
    margin-bottom: 4px;
}
.ok-b-map-pin-text {
    color: #475569;
    font-size: .92rem;
    line-height: 1.45;
}
.ok-b-video-section {
    isolation: isolate;
    background-image:
        radial-gradient(circle at 16% 18%, rgba(15, 159, 143, .24), transparent 34%),
        radial-gradient(circle at 88% 82%, rgba(20, 184, 166, .20), transparent 30%),
        linear-gradient(135deg, rgba(15, 23, 42, .98), rgba(30, 41, 59, .94));
}
.ok-b-video-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, .08), transparent 42%);
    pointer-events: none;
}
.ok-b-video-section-content {
    gap: 8px;
    z-index: 1;
}
.ok-b-video-section-eyebrow {
    letter-spacing: 0 !important;
}
.ok-b-video-section-title {
    font-size: 2.25rem;
    line-height: 1.1;
    max-width: 760px;
}
.ok-b-video-section-text {
    line-height: 1.65;
    margin-bottom: 0;
}
.ok-b-audio {
    background: #fff;
    border: 1px solid var(--okb-border);
    border-radius: var(--okb-radius);
    padding: 14px;
    box-shadow: var(--okb-shadow-sm);
}

.ok-b-alert {
    border-radius: var(--okb-radius);
    border-width: 1px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .05);
}
.ok-b-alert .material-symbols-outlined {
    font-size: 1.2em;
}

.ok-b-accordion {
    border: 1px solid var(--okb-border);
    border-radius: var(--okb-radius);
    overflow: hidden;
    box-shadow: var(--okb-shadow-sm);
}
.ok-b-accordion .accordion-item {
    border-color: var(--okb-border);
}
.ok-b-accordion .accordion-button {
    font-weight: 700;
    color: var(--okb-ink);
    box-shadow: none;
}
.ok-b-accordion .accordion-button:not(.collapsed) {
    background-color: rgba(15, 159, 143, .1);
    color: var(--okb-accent);
}

.ok-b-tabs .nav {
    gap: 6px;
}
.ok-b-tabs .nav-tabs {
    border-bottom-color: var(--okb-border);
}
.ok-b-tabs .nav-link {
    border-radius: var(--okb-radius-sm) var(--okb-radius-sm) 0 0;
    color: var(--okb-muted);
    font-weight: 700;
}
.ok-b-tabs .nav-pills .nav-link {
    border-radius: var(--okb-radius-sm);
}
.ok-b-tabs .nav-link.active {
    color: var(--okb-accent);
    border-color: var(--okb-border) var(--okb-border) #fff;
}
.ok-b-tabs .nav-pills .nav-link.active {
    color: #fff;
    background: var(--okb-accent);
}
.ok-b-tabs .tab-content {
    border-color: var(--okb-border) !important;
    border-radius: 0 0 var(--okb-radius) var(--okb-radius);
    box-shadow: var(--okb-shadow-sm);
}

.ok-b-iconbox {
    border-radius: var(--okb-radius);
    transition: transform .18s ease, box-shadow .18s ease;
    min-width: 0;
}
.ok-b-iconbox:hover {
    transform: translateY(-2px);
}
.ok-b-iconbox-icon {
    color: var(--okb-accent);
}
.ok-b-iconbox-title {
    color: var(--okb-ink);
    font-size: 1.06rem;
}
.ok-b-iconbox-text,
.ok-b-card-text,
.ok-b-image-box-text {
    color: var(--okb-muted);
}

.ok-b-card {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    min-width: 0;
}
.ok-b-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--okb-shadow-md) !important;
}
.ok-b-card-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--okb-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 159, 143, .1);
}
.ok-b-card-title,
.ok-b-image-box-title {
    color: var(--okb-ink);
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.ok-b-card-text,
.ok-b-image-box-text,
.ok-b-iconbox-text,
.ok-b-iconbox-title {
    overflow-wrap: anywhere;
}
.ok-b-card-link {
    text-decoration: none;
}
.ok-b-card-link:hover {
    text-decoration: underline;
}

.ok-b-image-box {
    border-radius: var(--okb-radius);
}
.ok-b-image-box-img {
    border-radius: var(--okb-radius);
    box-shadow: var(--okb-shadow-sm);
}
.ok-b-image-box a:hover .ok-b-image-box-img {
    transform: translateY(-2px);
    box-shadow: var(--okb-shadow-md);
}

.ok-b-icon-list li {
    gap: 8px;
    color: #334155;
}
.ok-b-icon-list i,
.ok-b-icon-list .material-symbols-outlined {
    color: var(--okb-accent);
    flex: 0 0 auto;
}
.ok-b-icon-list-horizontal {
    gap: 10px 24px;
}

.ok-b-progress .progress {
    height: 10px;
    border-radius: 999px;
    background: #edf0f6;
    overflow: hidden;
}
.ok-b-progress .progress-bar {
    border-radius: inherit;
}

.ok-b-pricing-table {
    border-color: var(--okb-border);
    border-radius: var(--okb-radius);
    padding: 34px 26px;
    box-shadow: var(--okb-shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ok-b-pricing-table:hover {
    transform: translateY(-2px);
    box-shadow: var(--okb-shadow-md);
}
.ok-b-pricing-highlight {
    border-color: rgba(15, 159, 143, .55);
    box-shadow: 0 14px 34px rgba(15, 159, 143, .18);
}
.ok-b-pricing-title {
    color: var(--okb-accent);
    letter-spacing: 0;
}
.ok-b-pricing-price {
    color: var(--okb-ink);
}
.ok-b-pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.ok-b-pricing-table .btn-primary {
    background: var(--okb-accent);
    border-color: var(--okb-accent);
    border-radius: var(--okb-radius-sm);
    font-weight: 700;
}

.ok-b-countdown {
    --okb-countdown-accent: var(--okb-accent);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--okb-border);
    border-top: 3px solid var(--okb-countdown-accent);
    border-radius: 0;
    padding: 24px 18px;
    box-shadow: none;
}
.ok-b-countdown-label {
    color: var(--okb-muted);
    font-size: .94rem;
    font-weight: 700;
    margin: 0;
}
.ok-b-countdown-clock {
    color: inherit;
    width: 100%;
}
.ok-b-countdown-unit {
    border-color: rgba(15, 159, 143, .20);
    background: #fff;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .04);
}
.ok-b-countdown-value {
    color: var(--okb-ink);
}
.ok-b-countdown-unit-label {
    color: var(--okb-muted);
}

.ok-b-cta {
    border-radius: var(--okb-radius);
    padding: 56px 34px;
    background-image: linear-gradient(135deg, rgba(16, 60, 55, .98), rgba(13, 84, 78, .94));
    box-shadow: none;
    overflow: hidden;
}
.ok-b-cta-img {
    border-radius: var(--okb-radius);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
}
.ok-b-cta-title {
    font-size: 2rem;
    font-weight: 850;
    line-height: 1.18;
}
.ok-b-cta-text {
    max-width: 620px;
    line-height: 1.65;
}
.ok-b-cta .btn {
    border-radius: 6px;
    padding-inline: 18px;
    min-height: 42px;
}

.ok-b-social {
    align-items: center;
}
.ok-b-social-link {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--okb-border);
    box-shadow: 0 3px 10px rgba(15, 23, 42, .06);
    transition: transform .15s ease, box-shadow .15s ease, color .15s ease;
}
.ok-b-social-link:hover {
    transform: translateY(-1px);
    box-shadow: var(--okb-shadow-sm);
    color: var(--okb-accent) !important;
}

.ok-b-contact-form {
    background: #fff;
    border: 1px solid var(--okb-border);
    border-radius: var(--okb-radius);
    padding: 24px;
    box-shadow: var(--okb-shadow-sm);
}
.ok-b-contact-form h5 {
    color: var(--okb-ink);
    font-weight: 800;
}
.ok-b-contact-form .form-control {
    border-color: var(--okb-border);
    border-radius: var(--okb-radius-sm);
    min-height: 42px;
}
.ok-b-contact-form .form-control:focus {
    border-color: var(--okb-accent);
    box-shadow: 0 0 0 .2rem rgba(15, 159, 143, .14);
}
.ok-b-contact-form .btn-primary {
    background: var(--okb-accent);
    border-color: var(--okb-accent);
    border-radius: var(--okb-radius-sm);
    font-weight: 700;
}

.ok-b-posts-grid {
    gap: 22px;
}
.ok-b-posts-grid-item {
    border-color: var(--okb-border);
    border-radius: var(--okb-radius);
    box-shadow: var(--okb-shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ok-b-posts-grid-item:hover {
    transform: translateY(-2px);
    border-color: rgba(15, 159, 143, .35);
    box-shadow: var(--okb-shadow-md);
}
.ok-b-posts-grid-item img {
    transition: transform .22s ease;
}
.ok-b-posts-grid-item:hover img {
    transform: scale(1.02);
}
.ok-b-posts-grid-excerpt {
    color: var(--okb-muted);
    line-height: 1.55;
}

@media (max-width: 767.98px) {
    .ok-b-pad-large { padding-top: 64px; padding-bottom: 64px; }
    .ok-b-pad-medium { padding-top: 38px; padding-bottom: 38px; }
    .ok-b-cta { padding: 38px 22px; }
    .ok-b-pricing-table,
    .ok-b-contact-form,
    .ok-b-countdown { padding: 22px; }
    .ok-b-countdown {
        align-items: center;
        gap: 12px;
    }
    .ok-b-countdown-clock { gap: 8px; }
    .ok-b-countdown-unit { min-width: 68px; padding: 9px 10px; }
    .ok-b-countdown-value { font-size: 1.35rem; }
    .ok-b-video-section-content { padding: 18px !important; }
    .ok-b-video-section-title { font-size: 1.6rem; }
}