/* Zavaj light-theme refinements. Loaded after the original TuruLav stylesheet. */

:root {
    --zavaj-ink: #210053;
    --zavaj-copy: #554862;
    --zavaj-muted: #776b81;
    --zavaj-rose: #df314d;
    --zavaj-rose-dark: #b91f3a;
    --zavaj-blush: #fff3f3;
    --zavaj-paper: #ffffff;
    --zavaj-border: rgba(33, 0, 83, 0.14);
    --zavaj-shadow: 0 16px 42px rgba(33, 0, 83, 0.10);
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--zavaj-paper);
    color: var(--zavaj-ink);
}

body,
button,
input,
select,
textarea {
    -webkit-font-smoothing: antialiased;
}

p {
    color: var(--zavaj-copy);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--zavaj-ink);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 3px solid rgba(223, 49, 77, 0.30);
    outline-offset: 3px;
}

.header-wrapper .logo {
    width: auto !important;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.header-social {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.header-social li {
    list-style: none;
}

.header-social a {
    display: inline-flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    overflow: hidden;
    color: #210053;
    font-size: 22px;
}

.header-social a:hover {
    color: var(--zavaj-rose);
}

.header-social img {
    display: block;
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    min-width: 0;
    flex-shrink: 0;
    object-fit: contain;
}

.header-section.header-fixed {
    top: 0 !important;
}

.zavaj-section-copy {
    max-width: 720px;
    margin: 14px auto 0;
    color: var(--zavaj-copy);
    font-size: 17px;
    line-height: 1.75;
}

.zavaj-eyebrow,
.zavaj-card-kicker,
.zavaj-work-subtitle {
    display: inline-block;
    color: var(--zavaj-rose-dark);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.zavaj-lead {
    color: #40334c;
    font-size: 18px;
    line-height: 1.8;
}

.zavaj-surface {
    background: var(--zavaj-blush);
}

.zavaj-link {
    color: var(--zavaj-rose-dark);
    font-weight: 700;
}

.zavaj-link:hover {
    color: var(--zavaj-ink);
}

.zavaj-outline-btn {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 0 28px;
    border: 2px solid var(--zavaj-ink);
    border-radius: 4px;
    color: var(--zavaj-ink);
    font-weight: 700;
    transition: 0.25s ease;
}

.zavaj-outline-btn:hover {
    border-color: var(--zavaj-rose);
    background: var(--zavaj-rose);
    color: #fff;
}

.top-member-section .member-item .lab-content p {
    color: var(--zavaj-copy);
}

/*
 * Same root cause as the "New Members" slider fix above: the theme's own
 * .member-item.style-1 .lab-thumb img rule has no height or object-fit, so
 * each card's image renders at its own natural aspect ratio. Real member
 * photos are arbitrary uploads (portrait, landscape, square), so without a
 * shared height here the "Zavaj Members Online Now" grid cards end up with
 * mismatched image heights row to row. Scoped to .top-member-section so the
 * member grids on other pages (all_members, member_profile) are unaffected.
 */
.top-member-section .member-item.style-1 .lab-inner .lab-thumb img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

/*
 * Inner-page banner: soft, light and high contrast. Also trims the
 * theme's own padding (200px/60px, 280px/100px at desktop) down to
 * something more proportionate for a banner that's just a title and
 * breadcrumb - the larger value was clearly sized for the home hero's much
 * bigger content (form + photo), and left an oversized empty-looking gap
 * before every inner page's actual content on every page using this banner
 * (about, blog, gallery, login, pricing, signup, single).
 *
 * .header-section is position:absolute, floating over this banner rather
 * than pushing it down in normal flow (118px tall on mobile, 173px at
 * desktop) - padding-top must clear that or the title overlaps the nav, so
 * this doesn't go as low as the surrounding content's own spacing would
 * otherwise suggest.
 */
.header-section {
    position: relative;
    overflow: visible;
    background: white !important;
}

.header-section .header-bottom,
.header-section .header-wrapper,
.header-section .menu-area {
    overflow: visible;
}

.page-header-section.zavaj-page-header {
    border-bottom: 1px solid var(--zavaj-border);
    background: linear-gradient(135deg, #fff3f3 0%, #ffffff 58%, #f8f0ff 100%) !important;
    padding-top: 20px;
    padding-bottom: 20px;
}

@media (min-width: 992px) {
    .page-header-section.zavaj-page-header {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

.zavaj-page-header .page-title h2,
.zavaj-page-header .page-title p,
.zavaj-page-header .breadcrumb li,
.zavaj-page-header .breadcrumb li a {
    color: var(--zavaj-ink) !important;
    text-shadow: none;
}

.zavaj-page-header .breadcrumb li.active,
.zavaj-page-header .breadcrumb li::after {
    color: var(--zavaj-rose-dark) !important;
}

/* Shared light cards. */
.zavaj-value-card,
.zavaj-blog-card,
.zavaj-story-card,
.zavaj-price-card,
.zavaj-image-frame,
.zavaj-article,
.account-wrapper {
    border: 1px solid var(--zavaj-border);
    background: var(--zavaj-paper);
    box-shadow: var(--zavaj-shadow);
}

.zavaj-value-card {
    height: 100%;
    padding: 30px 24px;
    text-align: center;
}

.zavaj-value-card>i {
    display: inline-grid;
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
    place-items: center;
    border-radius: 50%;
    background: var(--zavaj-blush);
    color: var(--zavaj-rose);
    font-size: 30px;
}

.zavaj-value-card h4,
.zavaj-blog-card h3,
.zavaj-story-card h3,
.zavaj-price-card h3 {
    color: var(--zavaj-ink);
}

.zavaj-value-card p,
.zavaj-blog-card p,
.zavaj-story-card p,
.zavaj-price-card p,
.zavaj-price-card span,
.zavaj-price-features li {
    color: var(--zavaj-copy);
}

.zavaj-image-frame {
    position: relative;
    overflow: hidden;
    padding: 20px;
    border-radius: 8px;
}

.zavaj-image-frame>img {
    width: 100%;
}

.zavaj-image-note {
    position: absolute;
    right: 32px;
    bottom: 32px;
    padding: 11px 16px;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(33, 0, 83, 0.16);
    color: var(--zavaj-ink);
    font-weight: 700;
}

.zavaj-blog-card,
.zavaj-story-card {
    height: 100%;
    overflow: hidden;
    border-radius: 6px;
}

.zavaj-blog-image,
.zavaj-story-card>img {
    overflow: hidden;
}

.zavaj-blog-image img,
.zavaj-story-card>img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.zavaj-blog-card:hover img,
.zavaj-story-card:hover>img {
    transform: scale(1.035);
}

.zavaj-blog-content,
.zavaj-story-card>div {
    padding: 26px;
}

.zavaj-blog-content h3,
.zavaj-story-card h3 {
    margin: 7px 0 12px;
    font-size: 22px;
    line-height: 1.35;
}

.zavaj-quote {
    position: relative;
    max-width: 920px;
    margin: 55px auto 0;
    padding: 36px 42px;
    border-left: 5px solid var(--zavaj-rose);
    background: var(--zavaj-blush);
    box-shadow: 0 12px 34px rgba(33, 0, 83, 0.08);
}

.zavaj-quote>i {
    color: var(--zavaj-rose);
    font-size: 34px;
}

.zavaj-quote blockquote {
    margin: 12px 0;
    color: var(--zavaj-ink);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.65;
}

.zavaj-quote p {
    margin: 0;
    color: var(--zavaj-rose-dark);
    font-weight: 700;
}

/* Pricing */
.zavaj-price-card {
    position: relative;
    height: 100%;
    padding: 38px 34px;
    border-radius: 6px;
}

.zavaj-price-card.is-featured {
    border: 2px solid var(--zavaj-rose);
    box-shadow: 0 20px 50px rgba(223, 49, 77, 0.16);
}

.zavaj-popular {
    position: absolute;
    top: 0;
    right: 24px;
    padding: 7px 14px;
    border-radius: 0 0 5px 5px;
    background: var(--zavaj-rose);
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.zavaj-price-top {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--zavaj-border);
}

.zavaj-price {
    display: flex;
    align-items: flex-start;
    margin: 12px 0 2px;
    color: var(--zavaj-ink);
}

.zavaj-price sup {
    top: 13px;
    margin-right: 4px;
    color: var(--zavaj-rose-dark);
    font-size: 24px;
}

.zavaj-price strong {
    color: var(--zavaj-ink);
    font-size: 68px;
    line-height: 1;
}

.zavaj-price-features {
    min-height: 210px;
    margin: 26px 0;
}

.zavaj-price-features li {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    font-weight: 600;
}

.zavaj-price-features i {
    flex: 0 0 auto;
    color: var(--zavaj-rose);
    font-size: 18px;
}

.zavaj-price-card .lab-btn,
.zavaj-price-card .zavaj-outline-btn {
    width: 100%;
}

.zavaj-pricing-note {
    max-width: 850px;
    margin: 36px auto 0;
    color: var(--zavaj-copy);
    text-align: center;
}

.zavaj-pricing-note i {
    color: var(--zavaj-rose);
}

/* Calls to action and article. */
.zavaj-cta {
    padding: 70px 0;
    background: var(--zavaj-blush);
}

.zavaj-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 42px 46px;
    border: 1px solid var(--zavaj-border);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--zavaj-shadow);
}

.zavaj-cta-inner h2 {
    margin: 7px 0 8px;
}

.zavaj-cta-inner p {
    margin: 0;
}

.zavaj-article {
    max-width: 920px;
    margin: auto;
    padding: 42px;
    border-radius: 8px;
}

.zavaj-article-hero {
    width: 100%;
    margin-bottom: 32px;
    border-radius: 5px;
}

.zavaj-article h2,
.zavaj-article h3 {
    margin-top: 24px;
}

.zavaj-article blockquote {
    margin: 28px 0;
    padding: 24px 28px;
    border-left: 4px solid var(--zavaj-rose);
    background: var(--zavaj-blush);
    color: var(--zavaj-ink);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.7;
}

.zavaj-article-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}

/* Account forms */
.account-wrapper {
    border-radius: 8px;
}

.account-wrapper .title,
.account-wrapper .account-bottom,
.account-wrapper .checkgroup label {
    color: var(--zavaj-ink);
}

.account-wrapper>p,
.zavaj-form-note {
    color: var(--zavaj-copy) !important;
}

.account-form input,
.account-form select {
    width: 100%;
    border: 1px solid rgba(33, 0, 83, 0.22) !important;
    background: #fff !important;
    color: var(--zavaj-ink) !important;
}

.account-form select {
    height: 48px;
    padding: 0.6rem 1rem;
    border-radius: 4px;
}

.account-form .otp-input {
    letter-spacing: 0.45em;
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    color: var(--zavaj-ink) !important;
}

.account-form .form-group button.zavaj-outline-btn {
    width: 100%;
    border: 2px solid var(--zavaj-ink);
    background: transparent;
    box-shadow: none;
    color: var(--zavaj-ink);
}

.account-form .form-group button.zavaj-outline-btn:hover {
    border-color: var(--zavaj-rose);
    background: var(--zavaj-rose);
    color: #fff;
    box-shadow: none;
}

.account-wrapper .zavaj-eyebrow {
    display: block;
    margin-bottom: 10px;
}

.zavaj-alert {
    margin: 0 0 20px;
    padding: 12px 16px;
    border-radius: 4px;
    text-align: left;
    font-weight: 600;
    line-height: 1.5;
}

.zavaj-alert-success {
    background: #eefaf1;
    color: #146c2e;
    border: 1px solid #b7e4c7;
}

.zavaj-alert-error {
    background: #fff1f3;
    color: #b91f3a;
    border: 1px solid rgba(223, 49, 77, 0.28);
}

.account-form input::placeholder {
    color: #71657a;
    opacity: 1;
}

.account-form textarea {
    width: 100%;
    min-height: 130px;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(33, 0, 83, 0.22) !important;
    border-radius: 4px;
    background: #fff !important;
    color: var(--zavaj-ink) !important;
    resize: vertical;
}

.account-form textarea:focus {
    border-color: var(--zavaj-rose) !important;
    box-shadow: 0 0 0 3px rgba(223, 49, 77, 0.11);
    outline: none;
}

.zavaj-profile-card {
    max-width: 880px;
    padding: 28px 20px 32px;
    text-align: center;
}

@media (min-width: 768px) {
    .zavaj-profile-card {
        padding: 44px 48px 48px;
    }
}

.zavaj-profile-intro {
    max-width: 560px;
    margin: 0 auto 28px;
    color: var(--zavaj-copy);
    line-height: 1.7;
}

.zavaj-profile-form {
    text-align: left;
}

.zavaj-profile-form label {
    display: block;
    margin-bottom: 8px;
    color: var(--zavaj-ink);
    font-size: 14px;
    font-weight: 700;
}

.zavaj-profile-form label span {
    color: var(--zavaj-rose);
}

.zavaj-profile-form .form-group {
    margin-bottom: 0;
}

.zavaj-profile-form .row > [class*="col-"] {
    margin-bottom: 4px;
}

.zavaj-form-section {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--zavaj-border);
}

.zavaj-form-section h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    color: var(--zavaj-ink);
    font-size: 18px;
}

.zavaj-form-section h4 i {
    color: var(--zavaj-rose);
}

.zavaj-photo-upload {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-bottom: 8px;
    padding: 16px;
    border: 1px dashed rgba(33, 0, 83, 0.22);
    border-radius: 8px;
    background: var(--zavaj-blush);
    text-align: left;
}

.zavaj-photo-preview {
    display: inline-flex;
    width: 96px;
    height: 96px;
    flex: 0 0 96px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 8px 20px rgba(33, 0, 83, 0.12);
    cursor: pointer;
}

.zavaj-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zavaj-photo-preview .zavaj-user-initials {
    font-size: 32px;
}

.zavaj-photo-copy {
    flex: 1 1 180px;
}

.zavaj-photo-copy p {
    margin: 0 0 12px;
    color: var(--zavaj-copy);
}

.zavaj-photo-btn {
    min-height: 40px;
    padding: 0 18px;
    cursor: pointer;
}

.zavaj-profile-form input[type=file] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.zavaj-profile-submit {
    margin-top: 32px;
}

.zavaj-profile-submit .lab-btn {
    width: 100%;
}

@media (max-width: 575px) {
    .zavaj-profile-card {
        padding: 24px 16px 28px;
    }

    .zavaj-photo-upload {
        justify-content: center;
        text-align: center;
    }

    .zavaj-photo-copy {
        flex-basis: 100%;
    }
}

/* The hero form and app panel retain their rich brand colours. */
.app-section h2,
.app-section h4,
.app-section p,
.app-section a {
    color: #fff;
}

.footer-section .footer-middle {
    background-color: #fff;
}

.footer-section .footer-middle h4,
.footer-section .footer-middle h6,
.footer-section .footer-middle a,
.footer-section .footer-bottom p {
    color: var(--zavaj-ink);
}

.footer-section .footer-middle p {
    color: var(--zavaj-copy);
}

.footer-section .footer-middle a:hover,
.footer-section .footer-bottom a {
    color: var(--zavaj-rose-dark);
}

@media (max-width: 991px) {
    .zavaj-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .zavaj-price-features {
        min-height: 0;
    }
}

@media (max-width: 575px) {

    .zavaj-quote,
    .zavaj-article,
    .zavaj-price-card,
    .zavaj-cta-inner {
        padding: 26px 22px;
    }

    .zavaj-price strong {
        font-size: 56px;
    }

    .zavaj-image-note {
        position: static;
        display: block;
        margin-top: 15px;
        box-shadow: none;
    }
}

/* Homepage "New Members" slider (admin-curated real members) */
.featured-members-slider-wrap {
    position: relative;
    padding: 0 44px;
}

.featured-members-slider .swiper-slide {
    width: 176px;
    height: auto;
}

/*
 * The theme's own .member-item.style-1 .lab-thumb img rule has no height or
 * object-fit - it relied on the demo images already being pre-cropped to a
 * small square-ish thumbnail, and on Bootstrap's narrow grid column to keep
 * them small. Real member photos are arbitrary uploads, so without an
 * explicit cap here they render at full size inside the slider. Selector
 * specificity is kept one class above the theme rule (member-item, style-1,
 * lab-inner, lab-thumb, featured-members-slider) so this wins regardless of
 * stylesheet load order.
 *
 * .lab-thumb itself also carries the theme's own 10px side padding, which
 * would otherwise shrink the image to less than the slide's width - remove
 * it here so the image fills the full 176px slide.
 */
.featured-members-slider .member-item.style-1 .lab-inner .lab-thumb {
    padding: 0;
}

.featured-members-slider .member-item.style-1 .lab-inner .lab-thumb img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.featured-members-slider-prev,
.featured-members-slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    z-index: 2;
}

.featured-members-slider-prev {
    left: 0;
}

.featured-members-slider-next {
    right: 0;
}

.featured-members-slider .flag-icon {
    margin-right: 4px;
    vertical-align: middle;
}

@media (max-width: 575px) {
    .header-social a {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 18px;
    }

    .header-social img {
        width: 20px !important;
        height: 20px !important;
        max-width: 20px !important;
    }
}

/*
 * Hero background video. .banner-section already has position:relative (see
 * the shared rule with .banner-thumb/.intro-form earlier in style.css), so
 * this just needs to fill it and sit behind everything else. object-fit:
 * cover + width/height:100% keeps it correctly cropped and responsive at
 * any section size, the same technique as a background-image but able to
 * play video. inset:0 combined with the parent's own height (set by
 * .zavaj-hero-centered below using min-height, not a fixed value) is what
 * keeps this correct as the section reflows at any zoom level or viewport
 * width - there is no hardcoded height anywhere for it to fall out of sync
 * with.
 *
 * .container gets position:relative + z-index above the video explicitly:
 * without it, the video (a positioned element) would paint above it by
 * default stacking rules even though it comes first in the markup, since
 * .container has no stacking context of its own otherwise.
 */
.zavaj-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.zavaj-hero-video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(20, 6, 20, 0.45);
    z-index: 0;
}

.banner-section.zavaj-hero-centered>.container {
    position: relative;
    z-index: 1;
}

/*
 * Centered logo/wordmark/tagline/CTA hero, replacing the old form+photo
 * layout entirely. min-height (not a fixed height) is what keeps this
 * responsive under browser zoom and at any viewport width - the same
 * reasoning as the video sizing above: vh/px minimums scale consistently
 * with the viewport, a fixed height would not.
 */
.header-wrapper {
    padding: 10px 0;
}

.zavaj-hero-centered {
    display: flex;
    align-items: center;
    padding: 0;
    min-height: 640px;
}

@media (min-width: 576px) {
    .zavaj-hero-centered {
        min-height: 83vh;
    }
}

/*
 * Every size below is clamp(min, min(Xvw, Yvh), max) rather than a plain
 * vw-based clamp. A plain vw clamp only reacts to viewport WIDTH, so at a
 * short-but-wide viewport - which is exactly what browser zoom produces
 * (zooming in shrinks both dimensions, but .zavaj-hero-centered's min-height
 * is itself a vh value, so a short viewport still leaves plenty of vw to
 * work with) - the content's fixed-px padding/logo/text kept its full size
 * while the vh-based section floor shrank underneath it. The section then
 * had to grow past that floor to fit its own content, so it ended up taller
 * than the viewport instead of scaling down with it: the "getting bigger
 * instead of the frame adjusting things inside" symptom. Sizing every
 * dimension off whichever of vw/vh is smaller means the whole block shrinks
 * together with the section's own vh-based height at any aspect ratio, so
 * it always fits rather than overflowing.
 */
.zavaj-hero-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: clamp(24px, min(8vw, 10vh), 90px) 16px clamp(20px, min(6vw, 8vh), 70px);
    text-align: center;
}

.zavaj-hero-logo-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(64px, min(11vw, 14vh), 96px);
    height: clamp(64px, min(11vw, 14vh), 96px);
    margin-bottom: 10px;
    /*padding: 8px;*/
    /*background: #fff;*/
    border-radius: 12px;
    /*box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);*/
}

.zavaj-hero-logo {
    border-radius:15px;
    width: 100%;
    height: auto;
}

.zavaj-hero-wordmark {
    display: inline-flex;
    align-items: baseline;
    color: #fff;
    font-family: "Jost", sans-serif;
    font-size: clamp(40px, min(10vw, 14vh), 96px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
}

.zavaj-hero-wordmark > span {
    display: inline-block;
    line-height: 1;
    padding-right:9px;
}

.zavaj-hero-letter-j {
    transform: scaleY(0.82);
    transform-origin: top center;
}

.zavaj-hero-tagline {
    margin: 0 0 clamp(12px, min(2.5vw, 2.5vh), 18px);
    color: #fff;
    font-size: clamp(16px, min(3.4vw, 4.4vh), 28px);
    font-weight: 700;
    line-height: 1.3;
}

.zavaj-hero-tagline strong {
    font-weight: 800;
}

.zavaj-hero-cta {
    display: inline-flex;
    min-height: clamp(40px, min(10vw, 9vh), 52px);
    align-items: center;
    justify-content: center;
    margin-top: clamp(16px, min(6vw, 5vh), 30px);
    padding: 0 44px;
    border-radius: 999px;
    background: var(--zavaj-rose);
    color: #fff !important;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 10px 24px rgba(223, 49, 77, 0.35);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.zavaj-hero-cta:hover {
    background: var(--zavaj-rose-dark);
    color: #fff !important;
    transform: translateY(-2px);
}

/*
 * "Join Zavaj" / "View Premier" under the featured-members carousel. The
 * theme's .lab-btn only sets line-height:50px (no explicit height), and the
 * icofont-star glyph used here has taller font metrics than icofont-users,
 * which pushes this button's rendered box to 60px while the other stays at
 * 50px - a real, glyph-dependent height mismatch, not just a hover/hardware
 * artifact. Forcing an explicit height with flex centering makes both
 * buttons the same size regardless of which icon's glyph is inside.
 */
.member-button-group {
    row-gap: 12px;
}

.member-button-group .lab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    line-height: normal;
    gap: 5px;
}

.member-button-group .lab-btn:first-child {
    margin-right: 0;
}

.header-bar span {
    background-color: var(--zavaj-rose) !important;
}

.zavaj-user-menu {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    margin-left: 12px;
}

.zavaj-user-toggle {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--zavaj-blush);
    box-shadow: 0 4px 14px rgba(33, 0, 83, 0.18);
}

.header-section.header-fixed .zavaj-user-toggle {
    border-color: var(--zavaj-rose);
}

.zavaj-user-toggle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zavaj-user-initials {
    color: var(--zavaj-rose-dark);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

.zavaj-user-dropdown {
    min-width: 200px;
    margin-top: 10px;
    padding: 8px 0;
    border: 1px solid var(--zavaj-border);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--zavaj-shadow);
}

.zavaj-user-dropdown-name {
    padding: 8px 16px 10px;
    color: var(--zavaj-ink);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    border-bottom: 1px solid var(--zavaj-border);
}

.zavaj-user-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    color: var(--zavaj-ink);
    font-weight: 600;
}

.zavaj-user-dropdown .dropdown-item i {
    color: var(--zavaj-rose);
}

.zavaj-user-dropdown .dropdown-item:hover,
.zavaj-user-dropdown .dropdown-item:focus {
    background: var(--zavaj-blush);
    color: var(--zavaj-rose-dark);
}

@media (max-width: 767px) {
    .zavaj-user-menu {
        margin-left: 8px;
        margin-right: 10px;
    }
}



/* =========================================================
 * Homepage landing — full responsive (mobile → large desktop)
 * ========================================================= */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

/* —— Header —— */
.header-section .header-wrapper {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}



/* ==========================================================================
   Homepage App Showcase Section (Under Hero Video)
   ========================================================================== */
.zavaj-app-showcase-section {
    background-color: #ffffff;
    padding: 70px 0 80px;
    position: relative;
    overflow: hidden;
}

.zavaj-app-mockup-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.zavaj-app-mockup-img {
    max-width: 460px;
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 18px 36px rgba(33, 0, 83, 0.08));
    transition: transform 0.35s ease;
}

.zavaj-app-mockup-wrapper:hover .zavaj-app-mockup-img {
    transform: translateY(-4px);
}

.zavaj-app-showcase-content {
    padding-left: 24px;
}

.zavaj-app-eyebrow {
    display: block;
    color: var(--zavaj-rose);
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 6px;
    letter-spacing: -0.5px;
}

.zavaj-app-headline {
    color: #111111;
    font-size: clamp(34px, 4.6vw, 54px);
    font-weight: 800;
    line-height: 1.12;
    margin-bottom: 32px;
    letter-spacing: -0.5px;
}

.zavaj-app-stats-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
}

.zavaj-app-stat-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.zavaj-app-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--zavaj-rose);
    flex-shrink: 0;
}

.zavaj-app-stat-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--zavaj-rose);
}

.zavaj-app-stat-text {
    color: var(--zavaj-rose);
    font-size: clamp(19px, 2.2vw, 24px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.2px;
}

.zavaj-app-store-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    margin-top: 10px;
}

.zavaj-store-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #111111;
    color: #ffffff !important;
    padding: 10px 22px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid #222222;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.zavaj-store-badge:hover {
    background: var(--zavaj-rose);
    border-color: var(--zavaj-rose);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(223, 49, 77, 0.25);
    color: #ffffff !important;
}

.zavaj-store-badge img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.zavaj-store-badge span {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.15;
}

.zavaj-store-badge span small {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.85;
}

.zavaj-store-badge span strong {
    font-size: 15px;
    font-weight: 700;
}

@media (max-width: 991px) {
    .zavaj-app-showcase-section {
        padding: 50px 0 60px;
    }

    .zavaj-app-showcase-content {
        padding-left: 0;
        text-align: center;
        margin-top: 16px;
    }

    .zavaj-app-stats-list {
        align-items: center;
    }

    .zavaj-app-stat-item {
        justify-content: center;
    }

    .zavaj-app-store-badges {
        justify-content: center;
    }

    .zavaj-app-mockup-img {
        max-width: 360px;
        margin: 0 auto;
    }
}

@media (max-width: 575px) {
    .zavaj-app-showcase-section {
        padding: 40px 0 45px;
    }

    .zavaj-app-mockup-img {
        max-width: 300px;
    }

    .zavaj-app-stat-item {
        gap: 10px;
    }
}
/* =========================================================
 * Team Members Page 
 * ========================================================= */

.ul-2-banner {
    max-width: calc(clamp(0px, 95.64vw, 1820px) + 30px);
    margin: 0 auto 0;
    padding: 0 15px;
    box-sizing: border-box;
}

.ul-breadcrumb {
    padding: clamp(70px, 8.5vw, 150px) clamp(20px, 4vw, 70px) !important;
    position: relative;
    z-index: 1;
    color: #ffffff;
    overflow: hidden;
    background: var(--team-banner-image, url('../images/team/banner.jpg')) no-repeat center center / cover;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
}

.ul-breadcrumb::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(227, 30, 36, 0.96) 0%, rgba(227, 30, 36, 0.90) 25%, rgba(227, 30, 36, 0.60) 32%, rgba(227, 30, 36, 0.15) 82%, transparent 100%);
}

.ul-container {
    --container-space-x: 30px;
    max-width: calc(clamp(1140px, 72vw, 1340px) + var(--container-space-x));
    padding-left: calc(var(--container-space-x) / 2);
    padding-right: calc(var(--container-space-x) / 2);
    margin: auto;
}

.ul-breadcrumb-title {
    font-weight: 700;
    font-size: clamp(28px, 3.8vw, 64px);
    color: #ffffff;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: clamp(10px, 1.2vw, 20px);
}

.ul-breadcrumb-nav {
    display: inline-flex;
    align-items: center;
    font-size: clamp(14px, 0.95vw, 16px);
    font-weight: 500;
    gap: clamp(6px, 0.55vw, 10px);
    color: #ffffff;
}

.ul-breadcrumb-nav a {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    transition: color 0.2s ease;
}

.ul-breadcrumb-nav a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.ul-breadcrumb-nav .separator {
    display: inline-flex;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.85);
}

.ul-breadcrumb-nav .current {
    color: #ffffff;
    font-weight: 600;
}

.ul-2-team.ul-section-spacing {
    padding-top: clamp(50px, 5.5vw, 90px);
    padding-bottom: clamp(60px, 7vw, 120px);
    background-color: #ffffff;
}

.ul-bs-row {
    --bs-gutter-x: clamp(24px, 3.2vw, 52px);
    --bs-gutter-y: clamp(36px, 4vw, 60px);
}

.ul-team-card-wrapper {
    border: 1px solid #f0f0f0;
    border-radius: 17px;
    background-color: #f5f5f5;
    box-shadow: 2px 3px 8px 3px rgba(0, 0, 0, 0.18);
    overflow: visible;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
    margin: 0 25px;
}

.ul-team-card-wrapper:hover {
    transform: translateY(-6px);
    box-shadow: 2px 8px 20px 4px rgba(0, 0, 0, 0.22);
}

.ul-2-team-member {
    position: relative;
    text-align: center;
    padding-bottom: 0;
}

.ul-2-team-member-img {
    position: relative;
    overflow: hidden;
    border-radius: 17px 17px 0 0;
    aspect-ratio: 330/370;
    background-color: #e8eaed;
}

.ul-2-team-member-img img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 17px 17px 0 0;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.4s ease;
}

.ul-team-card-wrapper:hover .ul-2-team-member-img img {
    transform: scale(1.04);
}

/* Floating name & role badge */
.ul-2-team-member-info.name-box {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    width: 86%;
    max-width: 320px;
    padding: 12px 14px;
    border-radius: 10px;
    background-color: #f40303;
    box-shadow: 0 4px 12px rgba(244, 3, 3, 0.35);
    z-index: 3;
    text-align: center;
}

.ul-2-team-member-name {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.25;
    display: block;
    letter-spacing: -0.01em;
    margin-bottom: 3px;
}

.ul-2-team-member-name a {
    color: #ffffff;
    text-decoration: none;
}

.ul-2-team-member-role {
    display: block;
    font-size: 14px;
    color: #000000;
    font-weight: 600;
    line-height: 1.2;
}

.description-box {
    text-align: center;
    padding: 44px 22px 26px;
    background-color: #f5f5f5;
    border-radius: 0 0 17px 17px;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.description-box p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: #222222;
}

.description-box strong {
    font-weight: 500;
    color: #222222;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .ul-2-banner {
        margin-top: 20px;
        padding: 0 12px;
    }

    .ul-breadcrumb {
        padding: 60px 24px !important;
        border-radius: 16px;
    }

    .ul-breadcrumb-title {
        font-size: 32px;
    }

    .ul-container {
        --container-space-x: 20px;
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .ul-2-banner {
        margin-top: 14px;
        padding: 0 10px;
    }

    .ul-breadcrumb {
        padding: 44px 16px !important;
        border-radius: 14px;
        text-align: center;
    }

    .ul-breadcrumb::before {
        background: linear-gradient(180deg, rgba(227, 30, 36, 0.94) 0%, rgba(227, 30, 36, 0.85) 60%, rgba(227, 30, 36, 0.65) 100%);
    }

    .ul-breadcrumb-title {
        font-size: 26px;
    }

    .ul-breadcrumb-nav {
        justify-content: center;
        font-size: 14px;
    }

    .ul-2-team.ul-section-spacing {
        padding-top: 40px;
        padding-bottom: 60px;
    }

    .ul-team-card-wrapper {
        max-width: 360px;
        margin: 0 auto;
    }

    .ul-2-team-member-info.name-box {
        width: 86%;
        padding: 9px 12px;
    }

    .ul-2-team-member-name {
        font-size: 18px;
    }

    .ul-2-team-member-role {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .ul-breadcrumb-title {
        font-size: 24px;
    }

    .ul-2-team-member-info.name-box {
        width: 88%;
        padding: 8px 10px;
    }

    .ul-2-team-member-name {
        font-size: 17px;
    }

    .ul-2-team-member-role {
        font-size: 13px;
    }
}



/* =========================================================
 * Team page � partner logo slider + news subscribe bar
 * ========================================================= */

.zavaj-partner-strip {
    background: #fff;
    padding: 28px 0 5px;
}

.zavaj-partner-slider {
    overflow: hidden;
    padding: 8px 0;
}

.zavaj-partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 8px 12px;
    opacity: 0.72;
    transition: opacity 0.2s ease;
}

.zavaj-partner-logo:hover {
    opacity: 1;
}

.zavaj-partner-logo img {
    display: block;
    width: auto;
    max-width: 120px;
    height: 70px;

}

.zavaj-news-bar {
    background: #fff;
    padding: 0px 0 28px;
}

.zavaj-news-bar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px 32px;
    padding-top: 28px;
}

.zavaj-news-brand {
    display: inline-flex;
    align-items: start;
    gap: 12px;
    min-width: 180px;
    color: #1a1a1a;
    text-decoration: none;
}

.zavaj-news-brand:hover {
    color: #1a1a1a;
}

.zavaj-news-brand-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 6px;
    background: #e31e24;
}

.zavaj-news-brand-icon img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.zavaj-news-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.zavaj-news-brand-text strong {
    color: #111;
    font-size: 1.05rem;
    font-weight: 700;
}

.zavaj-news-brand-text span {
    color: #333;
    font-size: 0.9rem;
    font-weight: 600;
}

.zavaj-news-copy {
    margin: 0;
    color: #1A1A1A;
    font-size: 24px;
    font-weight: 500;
    text-align: center;
    flex: 1 1 220px;
}

.zavaj-news-form {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 340px;
    overflow: hidden;
    border-radius: 4px;
    background: #f0f0f0;
}

.zavaj-news-form input[type="email"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 52px;
    padding: 0 18px;
    border: 0;
    outline: none;
    background: transparent;
    color: #222;
    font-size: 0.95rem;
    box-shadow: none;
}

.zavaj-news-form input[type="email"]::placeholder {
    color: #8a8a8a;
}

.zavaj-news-form button {
    display: inline-flex;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    align-items: center;
    justify-content: center;
    border: 0;
    background: #FF0000;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.zavaj-news-form button i {
    color: #fff;
    font-size: 22px;
    transform: rotate(-45deg);
}

.zavaj-news-form button:hover {
    background: #FF0000;
}

@media (max-width: 991px) {
    .zavaj-news-bar-inner {
        justify-content: center;
        text-align: center;
    }

    .zavaj-news-brand {
        justify-content: start;
    }

    .zavaj-news-copy {
        flex-basis: 100%;
    }

    .zavaj-news-form {
        max-width: 420px;
        width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 575px) {
    .zavaj-partner-strip {
        padding: 36px 0 18px;
    }

    .zavaj-partner-logo img {
        max-width: 96px;
        height: 32px;
    }

    .zavaj-news-bar {
        padding: 20px 0 40px;
    }

    .zavaj-news-copy {
        font-size: 0.98rem;
    }

    .zavaj-news-form input[type="email"],
    .zavaj-news-form button {
        height: 48px;
    }

    .zavaj-news-form button {
        flex-basis: 48px;
        width: 48px;
    }
}
/* Professional Link Footer */
.footer-section.zavaj-footer {
    padding: 68px 0 32px;
    background: linear-gradient(180deg, #0d0a12 0%, #050408 100%);
    color: #ffffff;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 2;
    font-family: "Jost", sans-serif;
    -webkit-font-smoothing: antialiased;
}

.zavaj-footer-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1.55fr) repeat(4, minmax(130px, 1fr));
    gap: 48px 40px;
    align-items: start;
}

.zavaj-footer-brand {
    display: flex;
    flex-direction: column;
}

.zavaj-footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #ffffff !important;
    width: fit-content;
}

.zavaj-footer-logo-img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(223, 49, 77, 0.26);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: transform 0.25s ease;
}

.zavaj-footer-logo:hover .zavaj-footer-logo-img {
    transform: scale(1.05);
}

.zavaj-footer-logo-text {
    font-family: "Jost", sans-serif;
    font-size: 27px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.035em;
    color: #ffffff;
    display: inline-flex;
    align-items: baseline;
}

.zavaj-footer-logo-j {
    color: var(--zavaj-rose);
    transform: scaleY(0.88);
    transform-origin: top center;
    display: inline-block;
}

.zavaj-footer-tagline {
    margin: 15px 0 22px;
    color: #9ca3af;
    font-family: "Jost", sans-serif;
    font-size: 14px;
    line-height: 1.6;
    max-width: 320px;
}

.zavaj-footer-social {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.zavaj-footer-social li {
    margin: 0;
    padding: 0;
}

.zavaj-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e4e4e7 !important;
    font-size: 17px;
    line-height: 1;
    text-decoration: none;
    transition: transform 0.22s ease, background-color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
}

.zavaj-footer-social a:hover,
.zavaj-footer-social a:focus-visible {
    background: var(--zavaj-rose);
    border-color: var(--zavaj-rose);
    color: #ffffff !important;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(223, 49, 77, 0.40);
}

.zavaj-footer-social img {
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1);
    object-fit: contain;
}

.zavaj-footer-links {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.zavaj-footer-links h4 {
    margin: 0 0 16px;
    color: #ffffff;
    font-family: "Jost", sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.25px;
    position: relative;
    padding-bottom: 9px;
    display: inline-block;
    width: fit-content;
}

.zavaj-footer-links h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 20px;
    height: 2px;
    background: var(--zavaj-rose);
    border-radius: 2px;
}

.zavaj-footer-links a {
    color: #a1a1aa;
    font-family: "Jost", sans-serif;
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1.45;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
}

.zavaj-footer-links a:hover,
.zavaj-footer-links a:focus-visible {
    color: #ffffff;
    transform: translateX(4px);
}

.zavaj-footer-links a i {
    font-size: 14px;
    color: var(--zavaj-rose);
    opacity: 0.85;
    transition: opacity 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}

.zavaj-footer-links a:hover i {
    opacity: 1;
}

.zavaj-footer-company {
    margin-top: 18px;
    color: var(--zavaj-rose);
}

/* Footer Bottom Bar */
.zavaj-footer-bottom {
    margin-top: 50px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.zavaj-footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
}

.zavaj-footer-copyright {
    margin: 0;
    color: #71717a;
    font-family: "Jost", sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.15px;
}

.zavaj-footer-trust-pills {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-right: 76px; /* Clearance so floating scrollToTop button never hides pills */
}

.zavaj-trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: #a1a1aa;
    font-family: "Jost", sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2px;
}

.zavaj-trust-pill.zavaj-trust-pill-halal {
    padding-right: 16px;
    margin-right: 8px;
}

.zavaj-trust-pill i {
    color: var(--zavaj-rose);
    font-size: 13px;
}

@media (max-width: 1199.98px) {
    .zavaj-footer-grid {
        gap: 40px 28px;
    }
}

@media (max-width: 991.98px) {
    .footer-section.zavaj-footer {
        padding: 56px 0 30px;
    }

    .zavaj-footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 32px;
    }

    .zavaj-footer-brand {
        grid-column: 1 / -1;
        max-width: 540px;
    }

    .zavaj-footer-bottom-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
}

@media (max-width: 575.98px) {
    .footer-section.zavaj-footer {
        padding: 44px 0 28px;
    }

    .zavaj-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 18px;
    }

    .zavaj-footer-brand {
        grid-column: 1 / -1;
        text-align: left;
    }

    .zavaj-footer-tagline {
        max-width: 100%;
        font-size: 13.5px;
    }

    .zavaj-footer-bottom {
        margin-top: 36px;
        padding-top: 20px;
        padding-bottom: 26px;
    }

    .zavaj-footer-bottom-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 14px;
    }

    .zavaj-footer-trust-pills {
        justify-content: center;
        gap: 8px;
        padding-right: 0;
    }

    .zavaj-trust-pill.zavaj-trust-pill-halal {
        margin-right: 0;
        padding-right: 12px;
    }

    .zavaj-trust-pill {
        font-size: 11px;
        padding: 4px 10px;
    }
}

/* Contact page */
.zavaj-contact-header .page-title p { max-width: 650px; margin: 8px 0 0; font-size: 16px; line-height: 1.65; }
.zavaj-contact-section { padding: 80px 0; background: linear-gradient(180deg, #fff 0%, #fff8f8 100%); }
.zavaj-contact-form-card, .zavaj-contact-details { height: 100%; border: 1px solid var(--zavaj-border); border-radius: 24px; background: #fff; box-shadow: var(--zavaj-shadow); }
.zavaj-contact-form-card { padding: 42px; }
.zavaj-contact-form-card h3, .zavaj-contact-details h3 { margin: 6px 0 12px; font-size: 30px; }
.zavaj-contact-form-card > p, .zavaj-contact-details > p { margin-bottom: 30px; line-height: 1.7; }
.zavaj-contact-form label { display: block; margin-bottom: 8px; color: var(--zavaj-ink); font-size: 14px; font-weight: 700; }
.zavaj-contact-form input, .zavaj-contact-form textarea { width: 100%; border: 1px solid var(--zavaj-border); border-radius: 12px; background: #fcfafc; color: var(--zavaj-ink); }
.zavaj-contact-form input { height: 52px; padding: 0 16px; }
.zavaj-contact-form textarea { min-height: 150px; padding: 15px 16px; resize: vertical; }
.zavaj-contact-form input:focus, .zavaj-contact-form textarea:focus { border-color: var(--zavaj-rose); background: #fff; outline: 3px solid rgba(223,49,77,.12); }
.zavaj-contact-submit { display: inline-flex; align-items: center; gap: 10px; border: 0; }
.zavaj-contact-form-note { display: inline-block; margin: 12px 0 0 16px; color: var(--zavaj-muted); font-size: 13px; }
.zavaj-contact-form-note i { color: var(--zavaj-rose); }
.zavaj-contact-details { padding: 42px; background: var(--zavaj-ink); }
.zavaj-contact-details h3, .zavaj-contact-details > p, .zavaj-contact-details .zavaj-card-kicker { color: #fff; }
.zavaj-contact-details > p { color: rgba(255,255,255,.72); }
.zavaj-contact-methods { display: grid; gap: 14px; }
.zavaj-contact-method { display: flex; align-items: center; gap: 15px; padding: 16px; border: 1px solid rgba(255,255,255,.13); border-radius: 14px; background: rgba(255,255,255,.07); color: #fff; }
.zavaj-contact-method:hover { border-color: rgba(223,49,77,.7); background: rgba(255,255,255,.11); color: #fff; transform: translateY(-2px); }
.zavaj-contact-method > i { display: grid; flex: 0 0 44px; width: 44px; height: 44px; place-items: center; border-radius: 50%; background: var(--zavaj-rose); font-size: 21px; }
.zavaj-contact-method span { min-width: 0; }
.zavaj-contact-method small, .zavaj-contact-method strong { display: block; }
.zavaj-contact-method small { margin-bottom: 3px; color: rgba(255,255,255,.62); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.zavaj-contact-method strong { overflow-wrap: anywhere; color: #fff; font-size: 15px; }
.zavaj-contact-social { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 28px; color: #fff; font-weight: 700; }
.zavaj-contact-social > div { display: flex; gap: 9px; }
.zavaj-contact-social a { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: 18px; }
.zavaj-contact-social a:hover { background: var(--zavaj-rose); color: #fff; }
.zavaj-contact-social img { width: 18px; height: 18px; filter: brightness(0) invert(1); }
.zavaj-contact-map { height: 340px; margin-top: 48px; overflow: hidden; border: 1px solid var(--zavaj-border); border-radius: 24px; box-shadow: var(--zavaj-shadow); }
.zavaj-contact-map iframe { width: 100%; height: 100%; border: 0; }
@media (max-width: 767px) { .zavaj-contact-section { padding: 55px 0; } .zavaj-contact-form-card, .zavaj-contact-details { padding: 28px 22px; border-radius: 18px; } .zavaj-contact-form-note { display: block; margin-left: 0; } .zavaj-contact-map { height: 280px; margin-top: 32px; border-radius: 18px; } }

/* Contact breadcrumb alignment */
.zavaj-contact-header .page-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.zavaj-contact-header .breadcrumb { flex: 0 0 auto; display: flex; align-items: center; margin: 0; padding: 10px 16px; border: 1px solid var(--zavaj-border); border-radius: 999px; background: rgba(255,255,255,.72); }
.zavaj-contact-header .breadcrumb li { display: inline-flex; align-items: center; margin: 0 !important; font-size: 14px; }
.zavaj-contact-header .breadcrumb li a { padding: 0 20px 0 0 !important; font-weight: 600; }
.zavaj-contact-header .breadcrumb li a::before { right: 7px !important; }
.zavaj-contact-header .breadcrumb li.active { padding-left: 2px; font-weight: 700; }
@media (max-width: 767px) { .zavaj-contact-header .page-header-inner { align-items: flex-start; flex-direction: column; gap: 18px; } .zavaj-contact-header .breadcrumb { align-self: flex-start; padding: 8px 14px; } }

/* Privacy policy and terms pages */
.zavaj-legal-header .page-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.zavaj-legal-header .page-title p { margin: 8px 0 0; font-size: 16px; text-transform: none !important; }
.zavaj-legal-header .breadcrumb { flex: 0 0 auto; display: flex; align-items: center; margin: 0 !important; padding: 7px 14px !important; border: 1px solid var(--zavaj-border); border-radius: 999px; background: rgba(255,255,255,.75); line-height: 1.2; }
.zavaj-legal-header .breadcrumb li { display: inline-flex; align-items: center; margin: 0 !important; padding-top: 0; padding-bottom: 0; font-size: 14px; line-height: 1.2; }
.zavaj-legal-header .breadcrumb li a { padding: 0 20px 0 0 !important; font-weight: 600; line-height: inherit; }
.zavaj-legal-header .breadcrumb li a::before { right: 7px !important; top: 50% !important; }
.zavaj-legal-header .breadcrumb li.active { padding-left: 2px; font-weight: 700; }
.zavaj-legal-section { padding: 72px 0 88px; background: linear-gradient(180deg, #fff 0%, #fff8f8 100%); }
.zavaj-legal-sidebar { position: sticky; top: 105px; }
.zavaj-legal-nav-label { margin: 0 0 12px; color: var(--zavaj-muted); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.zavaj-legal-nav { display: grid; gap: 8px; }
.zavaj-legal-nav > a { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border: 1px solid transparent; border-radius: 12px; color: var(--zavaj-copy); font-weight: 700; }
.zavaj-legal-nav > a i { font-size: 20px; }
.zavaj-legal-nav > a:hover { border-color: var(--zavaj-border); background: #fff; color: var(--zavaj-rose-dark); }
.zavaj-legal-nav > a.active { border-color: rgba(223,49,77,.22); background: var(--zavaj-blush); color: var(--zavaj-rose-dark); }
.zavaj-legal-help { margin-top: 28px; padding: 24px; border-radius: 18px; background: var(--zavaj-ink); }
.zavaj-legal-help > i { display: grid; width: 44px; height: 44px; margin-bottom: 18px; place-items: center; border-radius: 50%; background: var(--zavaj-rose); color: #fff; font-size: 21px; }
.zavaj-legal-help h4 { margin-bottom: 8px; color: #fff; font-size: 18px; }
.zavaj-legal-help p { margin-bottom: 15px; color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.6; }
.zavaj-legal-help a { color: #fff; font-size: 14px; font-weight: 700; }
.zavaj-legal-help a:hover { color: var(--zavaj-rose); }
.zavaj-legal-card { overflow: hidden; border: 1px solid var(--zavaj-border); border-radius: 24px; background: #fff; box-shadow: var(--zavaj-shadow); }
.zavaj-legal-card-header { display: flex; align-items: center; gap: 18px; padding: 32px 40px; border-bottom: 1px solid var(--zavaj-border); background: linear-gradient(135deg, var(--zavaj-blush), #fff); }
.zavaj-legal-icon { display: grid; flex: 0 0 56px; width: 56px; height: 56px; place-items: center; border-radius: 16px; background: var(--zavaj-rose); color: #fff; box-shadow: 0 10px 24px rgba(223,49,77,.22); font-size: 27px; }
.zavaj-legal-card-header span { color: var(--zavaj-rose-dark); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.zavaj-legal-card-header h1 { margin: 3px 0 0; font-size: 30px; }
.zavaj-legal-content { padding: 40px; color: var(--zavaj-copy); font-size: 16px; line-height: 1.8; overflow-wrap: anywhere; }
.zavaj-legal-content > :first-child { margin-top: 0 !important; }
.zavaj-legal-content > :last-child { margin-bottom: 0 !important; }
.zavaj-legal-content h1, .zavaj-legal-content h2, .zavaj-legal-content h3, .zavaj-legal-content h4, .zavaj-legal-content h5, .zavaj-legal-content h6 { margin: 32px 0 12px; color: var(--zavaj-ink); line-height: 1.35; }
.zavaj-legal-content h1 { font-size: 28px; } .zavaj-legal-content h2 { font-size: 24px; } .zavaj-legal-content h3 { font-size: 20px; }
.zavaj-legal-content p, .zavaj-legal-content ul, .zavaj-legal-content ol { margin-bottom: 18px; color: var(--zavaj-copy); }
.zavaj-legal-content ul, .zavaj-legal-content ol { padding-left: 24px; }
.zavaj-legal-content li { margin-bottom: 8px; }
.zavaj-legal-content a { color: var(--zavaj-rose-dark); text-decoration: underline; text-underline-offset: 3px; }
.zavaj-legal-content strong { color: var(--zavaj-ink); }
.zavaj-legal-content table { display: block; width: 100%; margin: 24px 0; overflow-x: auto; border-collapse: collapse; }
.zavaj-legal-content th, .zavaj-legal-content td { padding: 12px 14px; border: 1px solid var(--zavaj-border); text-align: left; }
.zavaj-legal-content th { background: var(--zavaj-blush); color: var(--zavaj-ink); }
@media (max-width: 991px) { .zavaj-legal-sidebar { position: static; } .zavaj-legal-nav { grid-template-columns: repeat(2, 1fr); } .zavaj-legal-help { display: none; } }
@media (max-width: 767px) { .zavaj-legal-header .page-header-inner { align-items: flex-start; flex-direction: column; gap: 18px; } .zavaj-legal-header .breadcrumb { padding: 7px 14px !important; } .zavaj-legal-section { padding: 50px 0 62px; } .zavaj-legal-card { border-radius: 18px; } .zavaj-legal-card-header { padding: 24px 22px; } .zavaj-legal-card-header h1 { font-size: 24px; } .zavaj-legal-content { padding: 28px 22px; font-size: 15px; } }

/* Home Page Above-Footer App CTA Section & QR Code */
.zavaj-home-app-cta-section {
    background: linear-gradient(180deg, #ffffff 0%, #fff7f8 100%);
    padding: 55px 0 65px;
    position: relative;
    z-index: 1;
}

.zavaj-app-cta-card {
    background: #ffffff;
    border-radius: 28px;
    border: 1px solid rgba(223, 49, 77, 0.14);
    box-shadow: 0 16px 45px rgba(33, 0, 83, 0.06), 0 2px 10px rgba(223, 49, 77, 0.04);
    padding: 44px 48px;
    position: relative;
    overflow: hidden;
}

.zavaj-app-cta-card::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(223, 49, 77, 0.08) 0%, rgba(223, 49, 77, 0) 70%);
    pointer-events: none;
    z-index: 0;
}

.zavaj-app-cta-card > .row {
    position: relative;
    z-index: 1;
}

.zavaj-app-cta-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(223, 49, 77, 0.08);
    color: var(--zavaj-rose-dark, #b91f3a);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.zavaj-pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--zavaj-rose, #df314d);
    box-shadow: 0 0 0 3px rgba(223, 49, 77, 0.22);
}

.zavaj-app-cta-title {
    font-size: clamp(26px, 2.6vw, 36px);
    font-weight: 800;
    line-height: 1.22;
    color: var(--zavaj-ink, #210053);
    margin: 0 0 14px;
    letter-spacing: -0.4px;
}

.zavaj-app-cta-title span {
    color: var(--zavaj-rose, #df314d);
    display: inline-block;
}

.zavaj-app-cta-desc {
    font-size: 15px;
    line-height: 1.62;
    color: var(--zavaj-copy, #554862);
    margin-bottom: 24px;
    max-width: 580px;
}

.zavaj-home-app-badges {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.zavaj-app-store-btn {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    background: #0b0b0d;
    color: #ffffff !important;
    padding: 10px 20px;
    border-radius: 13px;
    text-decoration: none;
    border: 1px solid #222226;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    min-width: 195px;
}

.zavaj-app-store-btn:hover,
.zavaj-app-store-btn:focus-visible {
    background: #18181d;
    border-color: #383842;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    color: #ffffff !important;
}

.zavaj-app-store-btn .zavaj-app-btn-icon {
    width: 26px;
    height: 26px;
    object-fit: contain;
    flex-shrink: 0;
}

.zavaj-app-store-btn .zavaj-app-btn-text {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.15;
}

.zavaj-app-store-btn .zavaj-app-btn-text small {
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 2px;
}

.zavaj-app-store-btn .zavaj-app-btn-text strong {
    font-size: 16.5px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.25px;
}

.zavaj-app-cta-features {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.zavaj-cta-feature-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--zavaj-copy, #554862);
}

.zavaj-cta-feature-item svg {
    color: var(--zavaj-rose, #df314d);
    flex-shrink: 0;
}

/* QR Code Card in CTA */
.zavaj-app-qr-card-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.zavaj-app-qr-card {
    background: #ffffff;
    border: 1.5px solid rgba(223, 49, 77, 0.16);
    border-radius: 22px;
    box-shadow: 0 16px 36px rgba(223, 49, 77, 0.08), 0 4px 12px rgba(33, 0, 83, 0.05);
    padding: 20px 20px 18px;
    text-align: center;
    width: 100%;
    max-width: 290px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.zavaj-app-qr-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 45px rgba(223, 49, 77, 0.14);
}

.zavaj-qr-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.zavaj-qr-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: var(--zavaj-rose-dark, #b91f3a);
    letter-spacing: 0.2px;
}

.zavaj-qr-chip svg {
    color: var(--zavaj-rose, #df314d);
}

.zavaj-qr-pulse-badge {
    font-size: 10.5px;
    font-weight: 600;
    background: #fff1f3;
    color: var(--zavaj-rose, #df314d);
    padding: 3px 8px;
    border-radius: 6px;
}

.zavaj-qr-code-frame {
    display: block;
    position: relative;
    background: #ffffff;
    border-radius: 16px;
    padding: 6px;
    margin: 0 auto;
    width: fit-content;
    text-decoration: none;
    cursor: pointer;
    border: 1px dashed rgba(223, 49, 77, 0.24);
    transition: border-color 0.2s ease;
}

.zavaj-qr-code-frame:hover {
    border-color: var(--zavaj-rose, #df314d);
}

.zavaj-qr-code-img {
    width: 205px;
    height: 205px;
    object-fit: contain;
    border-radius: 12px;
    display: block;
}

.zavaj-qr-hover-hint {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translate(-50%, 4px);
    background: rgba(33, 0, 83, 0.92);
    backdrop-filter: blur(4px);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.zavaj-qr-code-frame:hover .zavaj-qr-hover-hint {
    opacity: 1;
    transform: translate(-50%, 0);
}

.zavaj-qr-meta {
    margin-top: 12px;
}

.zavaj-qr-meta-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--zavaj-ink, #210053);
    margin-bottom: 3px;
}

.zavaj-qr-meta-sub {
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--zavaj-muted, #776b81);
    margin-bottom: 12px;
}

.zavaj-qr-platform-tags {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.zavaj-platform-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: #37353e;
    background: #f7f6f8;
    border: 1px solid #ebe9ee;
    padding: 4px 10px;
    border-radius: 7px;
}

@media (max-width: 991.98px) {
    .zavaj-app-cta-card {
        padding: 36px 26px;
    }

    .zavaj-app-cta-info {
        text-align: center;
    }

    .zavaj-app-cta-desc {
        margin-left: auto;
        margin-right: auto;
    }

    .zavaj-home-app-badges {
        justify-content: center;
    }

    .zavaj-app-cta-features {
        justify-content: center;
        gap: 14px;
    }

    .zavaj-app-qr-card-wrap {
        margin-top: 6px;
    }
}

@media (max-width: 575.98px) {
    .zavaj-home-app-cta-section {
        padding: 34px 0 45px;
    }

    .zavaj-app-cta-card {
        padding: 26px 18px;
        border-radius: 20px;
    }

    .zavaj-app-cta-title {
        font-size: 22px;
    }

    .zavaj-app-cta-desc {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .zavaj-home-app-badges {
        flex-direction: column;
        gap: 10px;
        width: 100%;
        max-width: 250px;
        margin: 0 auto 18px;
    }

    .zavaj-app-store-btn {
        width: 100%;
        min-width: 0;
        justify-content: center;
        padding: 11px 18px;
    }

    .zavaj-app-cta-features {
        flex-direction: column;
        gap: 8px;
        align-items: center;
    }

    .zavaj-app-qr-card {
        max-width: 260px;
        padding: 16px 14px;
        border-radius: 18px;
    }

    .zavaj-qr-code-img {
        width: 180px;
        height: 180px;
    }
}


/* ==========================================================================
   Modern & Professional Scroll-to-Top Button
   ========================================================================== */
.scrollToTop {
    position: fixed;
    right: 28px !important;
    z-index: 999 !important;
    text-decoration: none !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.scrollToTop::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(223, 49, 77, 0.40) 0%, rgba(223, 49, 77, 0) 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: -1;
}

.scrollToTop:hover::before {
    opacity: 1;
}

.scrollToTop i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    line-height: 1 !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #df314d 0%, #b31633 100%) !important;
    color: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.28) !important;
    font-size: 19px !important;
    box-shadow: 0 8px 24px rgba(223, 49, 77, 0.42), 0 2px 8px rgba(0, 0, 0, 0.16) !important;
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease !important;
    cursor: pointer;
}

.scrollToTop:hover i,
.scrollToTop:focus-visible i {
    background: linear-gradient(135deg, #ea3a56 0%, #c41838 100%) !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
    transform: translateY(-4px) scale(1.06) !important;
    box-shadow: 0 14px 32px rgba(223, 49, 77, 0.58), 0 4px 12px rgba(0, 0, 0, 0.22) !important;
    color: #ffffff !important;
}

.scrollToTop:active i {
    transform: translateY(-1px) scale(0.97) !important;
    box-shadow: 0 4px 14px rgba(223, 49, 77, 0.38) !important;
}

@media (max-width: 575.98px) {
    .scrollToTop {
        right: 18px !important;
    }

    .scrollToTop i {
        width: 44px !important;
        height: 44px !important;
        font-size: 17px !important;
    }
}

/* Compact link footer */
.footer-section.zavaj-footer { padding: 58px 0 52px; background: #050505; color: #fff; }
.zavaj-footer-grid { display: grid; grid-template-columns: minmax(250px, 1.55fr) repeat(4, minmax(130px, 1fr)); gap: 44px; align-items: start; }
.zavaj-footer-logo { display: inline-flex; align-items: center; gap: 12px; color: #fff !important; font-size: 34px; font-weight: 700; line-height: 1; }
.zavaj-footer-logo img { width: 58px; height: 58px; object-fit: contain; border-radius: 10px;}
.zavaj-footer-logo:hover, .zavaj-footer-links a:hover { color: var(--zavaj-rose); }
.zavaj-footer-social { display: flex; gap: 20px; margin: 27px 0 28px; padding: 0; list-style: none; }
.zavaj-footer-social a { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 24px; line-height: 1; }
.zavaj-footer-social a:hover { color: var(--zavaj-rose); transform: translateY(-2px); }
.zavaj-footer-social img { width: 22px; height: 22px; filter: brightness(0) invert(1); }
.zavaj-footer-copyright, .zavaj-footer-company { margin: 0; color: #e8e8e8; font-size: 13px; }
.zavaj-footer-company { margin-top: 18px; color: var(--zavaj-rose); }
.zavaj-footer-links { display: flex; flex-direction: column; gap: 12px; }
.zavaj-footer-links h4 { margin: 5px 0 10px; color: #fff; font-size: 18px; font-weight: 700; }
.zavaj-footer-links a { color: #aaa; font-size: 16px; line-height: 1.35; }
@media (max-width: 991px) { .zavaj-footer-grid { grid-template-columns: 1.5fr repeat(2, 1fr); } }
@media (max-width: 575px) { .footer-section.zavaj-footer { padding: 42px 0 38px; } .zavaj-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; } .zavaj-footer-brand { grid-column: 1 / -1; } }

/* Blog article + comments */
.zavaj-article-body {
    color: var(--zavaj-copy);
    font-size: 1.05rem;
    line-height: 1.8;
}

.zavaj-article-body h2,
.zavaj-article-body h3,
.zavaj-article-body h4 {
    margin-top: 1.5rem;
    color: var(--zavaj-ink);
}

.zavaj-article-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1rem 0;
}

.zavaj-article-body p {
    margin-bottom: 1rem;
}

.zavaj-blog-card h3 a {
    color: inherit;
}

.zavaj-blog-card h3 a:hover {
    color: var(--zavaj-rose-dark);
}

.zavaj-comment-item {
    padding: 16px 0;
    border-bottom: 1px solid var(--zavaj-border);
}

.zavaj-comment-reply {
    margin: 12px 0 0 18px;
    padding: 12px;
    border-left: 3px solid var(--zavaj-rose);
    background: var(--zavaj-blush);
    border-radius: 0 8px 8px 0;
}

.zavaj-comment-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--zavaj-ink);
}

.zavaj-comment-form .form-control {
    border: 1px solid var(--zavaj-border);
    border-radius: 6px;
    min-height: 46px;
}

.zavaj-blog-filters .lab-btn.style-2 {
    background: transparent;
    border: 1px solid var(--zavaj-border);
    color: var(--zavaj-ink);
    box-shadow: none;
}

.zavaj-blog-filters .lab-btn.style-2 span {
    color: var(--zavaj-ink);
}

.page-header-section .page-title h1 {
    color: inherit;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 700;
}