@charset "UTF-8";

/* ===================================================
   Tailwind CSS v4 Override Strategy
   ---------------------------------------------------
   Tailwind is included via the @tailwindcss/browser@4
   CDN script in MainLayout.razor. That build generates
   all utility classes inside CSS cascade layers:

       @layer theme, base, components, utilities

   Per the CSS Cascade Layers spec, ANY rule written
   OUTSIDE a @layer block wins over ALL layered rules,
   regardless of source order or specificity. Every rule
   in this file is intentionally layer-free so that the
   OasisMeu design system always takes precedence over
   Tailwind's Preflight resets and generated utilities.

   When adding new rules here, do NOT wrap them in
   @layer — that would demote them below Tailwind.
   =================================================== */

/* PP Editorial New — font files live in /wwwroot/fonts/ */
@font-face {
    font-family: 'PP Editorial New';
    src: local('PP Editorial New'),
         url('../fonts/EditorialNew-Regular.woff2') format('woff2'),
         url('../fonts/EditorialNew-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ===================================================
   Design Tokens — Colors
   =================================================== */
:root {
    --om-white:     #F1F2F3;
    --om-turquoise: #01657D;
    --om-black:     #363636;

    /* Aliases so the ported design-system component classes (below) can use the
       same token names as the raw-html prototype without translation. */
    --color-light: var(--om-white);
    --color-brand: var(--om-turquoise);
    --color-dark:  var(--om-black);
    --color-muted: #717171;      /* inactive dots / muted text (no Figma variable) */
    --font-editorial: 'PP Editorial New', Georgia, serif;
}

/* ===================================================
   Design Tokens — Typography (Desktop)
   =================================================== */
:root {
    /* Scale */
    --om-font-family: 'PP Editorial New', Georgia, serif;

    --om-h1-size:    56px;
    --om-h1-lh:      64px;
    --om-h1-ls:      0.5px;

    --om-h2-size:    32px;
    --om-h2-lh:      36px;
    --om-h2-ls:      0.5px;

    --om-h3-size:    22px;
    --om-h3-lh:      24px;
    --om-h3-ls:      0.5px;

    --om-h4-size:    16px;
    --om-h4-lh:      20px;
    --om-h4-ls:      0.5px;

    --om-p1-size:    16px;
    --om-p1-lh:      20px;
    --om-p1-ls:      0.4px;

    --om-p2-size:    14px;
    --om-p2-lh:      18px;
    --om-p2-ls:      0.5px;

    --om-p3-size:    12px;
    --om-p3-lh:      15px;
    --om-p3-ls:      0.5px;
}

/* ===================================================
   Global typography base
   =================================================== */
body {
    font-family: var(--om-font-family);
    font-weight: 400;
    color: var(--om-black);
    background-color: var(--om-white);
    margin: 0;
}

h1, .om-h1 {
    font-family: var(--om-font-family);
    font-weight: 400;
    font-size:      var(--om-h1-size);
    line-height:    var(--om-h1-lh);
    letter-spacing: var(--om-h1-ls);
}

h2, .om-h2 {
    font-family: var(--om-font-family);
    font-weight: 400;
    font-size:      var(--om-h2-size);
    line-height:    var(--om-h2-lh);
    letter-spacing: var(--om-h2-ls);
}

h3, .om-h3 {
    font-family: var(--om-font-family);
    font-weight: 400;
    font-size:      var(--om-h3-size);
    line-height:    var(--om-h3-lh);
    letter-spacing: var(--om-h3-ls);
}

h4, .om-h4 {
    font-family: var(--om-font-family);
    font-weight: 400;
    font-size:      var(--om-h4-size);
    line-height:    var(--om-h4-lh);
    letter-spacing: var(--om-h4-ls);
}

p, .om-p1 {
    font-family: var(--om-font-family);
    font-weight: 400;
    font-size:      var(--om-p1-size);
    line-height:    var(--om-p1-lh);
    letter-spacing: var(--om-p1-ls);
}

.om-p2 {
    font-family:    var(--om-font-family);
    font-weight:    400;
    font-size:      var(--om-p2-size);
    line-height:    var(--om-p2-lh);
    letter-spacing: var(--om-p2-ls);
}

.om-p3 {
    font-family:    var(--om-font-family);
    font-weight:    400;
    font-size:      var(--om-p3-size);
    line-height:    var(--om-p3-lh);
    letter-spacing: var(--om-p3-ls);
}

/* ===================================================
   Mobile typography overrides
   =================================================== */
@media (max-width: 991px) {
    /* Figma mobile page titles are 24/28 (hero text 5:912, ABOUT US 5:1451,
       NEWS & BLOG 5:1562) */
    h1, .om-h1 {
        font-size:      24px;
        line-height:    28px;
        letter-spacing: 0.5px;
    }

    h2, .om-h2 {
        font-size:      24px;
        line-height:    28px;
        letter-spacing: 0.5px;
    }

    h3, .om-h3 {
        font-size:      18px;
        line-height:    22px;
        letter-spacing: 0.5px;
    }

    h4, .om-h4 {
        font-size:      16px;
        line-height:    18px;
        letter-spacing: 0.5px;
    }

    p, .om-p1 {
        font-size:      12px;
        line-height:    16px;
        letter-spacing: 0.3px;
    }

    .om-p2 {
        font-size:      10px;
        line-height:    12px;
        letter-spacing: 0.5px;
    }

    /* Some Figma mobile body copy sits one step up from P1_MOBILE (14/18 —
       e.g. Buy who-is-it-for 5:1029, spec rows 5:1082) */
    .om-p1--m14 {
        font-size:      14px;
        line-height:    18px;
        letter-spacing: 0.5px;
    }
}

/* =====================================================================
   Design-system components (ported from the raw-html Figma prototype)
   --------------------------------------------------------------------
   Loaded only on public content pages (via MainLayout), never the admin.
   Uses the --color-* aliases defined at the top of this file.
   ===================================================================== */

/* Form controls inherit the brand typeface (public pages only) */
button, input, select, textarea, a { font-family: inherit; }

/* Eyebrow / section label — Figma section labels are the H4 step
   (16/20/0.5, full opacity — e.g. MISSION & VISION 1:573, HISTORY 1:580) */
.om-eyebrow { font-size: 16px; line-height: 20px; letter-spacing: 0.5px; text-transform: uppercase; }

/* Large section label — Figma 18px/36, +0.2 tracking
   (MEET THE TEAM 1:548, YOU MAY ALSO LIKE 1:841) */
.om-label-lg { font-size: 18px; line-height: 36px; letter-spacing: 0.2px; text-transform: uppercase; }
@media (max-width: 991px) { .om-label-lg { font-size: 16px; line-height: 20px; } }

/* Thin horizontal rule */
.om-divider { border: 0; border-top: 1px solid rgba(54, 54, 54, 0.15); margin: 0; }
.om-divider--light { border-top-color: rgba(241, 242, 243, 0.25); }

/* Container — Figma desktop frames are 1728px with 80px side margins (content 1568) */
.om-container { max-width: 1568px; margin-inline: auto; }

/* Pill (chip/tag) — Figma card tag pill (2:2620): 14/18 text, 10×16 padding,
   0.5px border @ 40%, radius 6 */
.om-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    border: 0.5px solid rgba(54, 54, 54, 0.4);
    border-radius: 6px;
    font-size: 14px; letter-spacing: 0.5px; line-height: 18px;
    color: var(--color-dark); background: transparent;
}
.om-chip svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.75; }
/* Selectable label chip — Figma label component 2:2595 (default): 16/20 text,
   10×22 padding, 0.5px solid #363636 */
.om-chip--select {
    padding: 10px 22px;
    border-color: var(--color-dark);
    font-size: 16px; line-height: 20px;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.om-chip--active { background: var(--color-dark); color: var(--color-light); border-color: var(--color-dark); }

/* Feature chip (rent amenity pill) */
.om-feature-chip {
    display: inline-flex; align-items: center; justify-content: flex-start; gap: 10px;
    height: 40px; padding: 2px 16px;
    border: 0.75px solid rgba(54, 54, 54, 0.4); border-radius: 4px;
    font-size: 12px; letter-spacing: 0.4px; line-height: 16px;
    color: var(--color-dark); background: transparent; white-space: nowrap;
}
.om-feature-chip svg, .om-feature-chip img { width: 18px; height: 18px; flex-shrink: 0; object-fit: contain; }
@media (min-width: 1024px) {
    /* Figma property 2:2758: 60px tall, 56px side padding, 16px icon gap, ~21px icon */
    .om-feature-chip { height: 60px; padding: 0 56px; gap: 16px; border-radius: 9px; font-size: 16px; line-height: 20px; }
    .om-feature-chip svg, .om-feature-chip img { width: 21px; height: 21px; }
}
/* Figma dims the second amenity row (nodes 1:685-688) */
.om-feature-chip--dim { opacity: 0.8; }

/* Round navigation arrow — Figma arrow component 2:3009: 61×61 circle,
   0.5px stroke, tailed-arrow glyph; hover = dark fill, click = turquoise fill */
.om-nav-arrow {
    width: 61px; height: 61px; border-radius: 9999px;
    border: 0.5px solid var(--color-dark);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--color-dark); cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.om-nav-arrow:hover { background: var(--color-dark); color: var(--color-light); border-color: var(--color-dark); }
.om-nav-arrow:active { background: var(--color-brand); color: var(--color-light); border-color: var(--color-brand); }
.om-nav-arrow svg { width: 24px; height: 24px; }
@media (max-width: 991px) {
    .om-nav-arrow { width: 38px; height: 38px; }
    .om-nav-arrow svg { width: 16px; height: 16px; }
}

/* Buttons — Figma button sets 2:2574/2:2581/2:2588:
   ghost default → hover fills #363636 → click fills #01657D */
.om-btn-ghost {
    display: inline-flex; align-items: center; justify-content: center;
    height: 42px; padding: 0 32px; border: 0.5px solid #ffffff; border-radius: 28px;
    color: #ffffff; font-size: 16px; line-height: 20px; letter-spacing: 0.5px;
    transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}
.om-btn-ghost:hover { background: var(--color-dark); border-color: var(--color-light); color: var(--color-light); }
.om-btn-ghost:active { background: var(--color-brand); border-color: var(--color-light); color: var(--color-light); }
.om-btn-dark {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 24px; background: #363636; color: #ffffff; border-radius: 999px;
    font-size: 16px; letter-spacing: 0.5px; transition: opacity .2s ease, background-color .2s ease;
}
.om-btn-dark:hover { opacity: 0.85; }
.om-btn-dark:active { background: var(--color-brand); opacity: 1; }
.om-btn-contact-nav {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 14px 24px; background: var(--color-light); border: 0.5px solid var(--color-light);
    color: var(--color-dark); border-radius: 28px; font-size: 16px; letter-spacing: 0.5px;
    transition: opacity .2s ease;
}
.om-btn-contact-nav:hover { opacity: 0.85; }
/* Outline pill on light bg — Figma product buttons (2:2915): 16/20, 14×24, 0.5px #363636 */
.om-btn-outline {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 14px 24px; border: 0.5px solid var(--color-dark); border-radius: 28px;
    color: var(--color-dark); font-size: 16px; line-height: 20px; letter-spacing: 0.5px;
    transition: background-color .2s ease, color .2s ease;
}
.om-btn-outline:hover { background: var(--color-dark); color: var(--color-light); }
.om-btn-outline:active { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-light); }
.om-btn-outline-dark {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 8px 20px; border: 0.32px solid var(--color-dark); border-radius: 999px;
    color: var(--color-dark); font-size: 18px; line-height: 22px; letter-spacing: 0.5px;
    transition: background-color .2s ease, color .2s ease;
}
.om-btn-outline-dark:hover { background: var(--color-dark); color: var(--color-light); }
.om-btn-outline-dark:active { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-light); }
@media (max-width: 767px) {
    /* Figma mobile ghost pill (5:916): 30px tall, 18px text, 0.32px border */
    .om-btn-ghost { height: 30px; font-size: 18px; line-height: 22px; padding: 0 20px; border-width: 0.32px; }
}

/* Hero overlays */
.om-hero-gradient { background: linear-gradient(177.72deg, rgba(13,13,13,0) 30%, rgba(13,13,13,1) 121%); }
/* Blueprint sketch — Figma has it only on the MOBILE Home hero (NACRT 5:763,
   bottom-right); the desktop frame 1:590 has none. */
.om-hero-blueprint {
    display: none;
    aspect-ratio: 1317 / 1568;
    transform: rotate(54deg); transform-origin: center center;
    background-size: contain; background-repeat: no-repeat; background-position: center;
    mix-blend-mode: hard-light; opacity: 0.18;
}
@media (max-width: 1023px) {
    .om-hero-blueprint { display: block; top: auto; bottom: -8%; left: auto; right: -45%; width: 100%; }
}

/* Footer logo — Figma 2:2724: 151×56 on desktop (89×33 mobile default) */
@media (min-width: 992px) {
    .om-footer-logo .oasis-logo { width: 151px; height: 56px; }
}

/* Card gradients */
.om-card-gradient-left { background: linear-gradient(90deg, rgba(13,13,13,0.75) 0%, rgba(13,13,13,0) 70%); }
.om-card-gradient { background: linear-gradient(90deg, rgba(13,13,13,0.72) 0%, rgba(13,13,13,0) 100%); }
.om-card-gradient--bottom { background: linear-gradient(178deg, rgba(13,13,13,0) 8%, rgba(13,13,13,1) 112%); }

/* Carousel dots */
.om-dot { width: 9px; height: 9px; border-radius: 9999px; background: var(--color-muted); display: inline-block; }
.om-dot--active { background: #ffffff; }
.om-dot--dark { background: var(--color-dark); opacity: .3; }
.om-dot--dark.om-dot--active { opacity: 1; }
@media (max-width: 1023px) { .om-dot { width: 6px; height: 6px; } }

/* Product cards (Home) */
.om-product-card { height: 288px; }
@media (min-width: 1024px) { .om-product-card { height: 370px; } }

/* "design in process" ribbon */
.om-ribbon { position: absolute; top: 0; right: 0; background: #f1f2f3; color: var(--color-dark); padding: 10px 20px; font-size: 16px; letter-spacing: 0.5px; }

/* One-of-a-kind scroll text */
.om-ooak-text { transition: opacity 0.35s cubic-bezier(0.22,1,0.36,1), transform 0.35s cubic-bezier(0.22,1,0.36,1); }
.om-ooak-text.is-changing { opacity: 0; transform: translateY(16px); }

/* Icon with inline text */
.om-icon-text { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; letter-spacing: 0.5px; color: #fff; }
.om-icon-text svg { width: 16px; height: 16px; }

/* Timeline pips (About history) */
.om-timeline { display: flex; align-items: center; width: 100%; margin: 8px 0 32px; }
.om-timeline__pip { width: 14px; height: 14px; border-radius: 9999px; background: rgba(54,54,54,0.2); }
.om-timeline__pip.is-active { background: var(--color-dark); }
.om-timeline__bar { flex: 1; height: 1px; background: rgba(54,54,54,0.2); }

/* Quote stack (testimonials fallback) */
.om-quote-stack { position: relative; width: 100%; max-width: 320px; margin: 0 auto; }
.om-quote-stack::before, .om-quote-stack::after { content: ""; position: absolute; inset: 0; background: #363636; border-radius: 4px; }
.om-quote-stack::before { transform: rotate(-4deg) translate(-6px, 6px); }
.om-quote-stack::after { transform: rotate(3deg) translate(6px, -4px); }
.om-quote-stack__card { position: relative; z-index: 2; background: #363636; color: #f1f2f3; padding: 48px 32px; border-radius: 4px; text-align: center; }

/* Testimonial card */
.om-testimonial-card { background: var(--color-dark); color: var(--color-light); border-radius: 4px; flex-shrink: 0; }
.om-testimonial-card__inner { display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 100%; padding: 42px 40px; gap: 32px; }

/* Spec / FAQ rows */
.om-spec-row { display: grid; grid-template-columns: 1fr 1fr; padding: 10px 0; border-bottom: 1px solid rgba(54,54,54,0.1); font-size: 14px; letter-spacing: 0.5px; }
.om-spec-row > span:last-child { text-align: right; opacity: .85; }

/* FAQ — Figma component 2:2678 (Default/Active/Hover), mobile 2:3183.
   Rows are full-bleed (1728px) with the number at x=80 and the question at
   x=212 (132px number column); Hover fills the whole row #363636. */
.om-faq { border-top: 1px solid rgba(54, 54, 54, 0.1); }
.om-faq__item { border-bottom: 1px solid rgba(54, 54, 54, 0.1); }
.om-faq__summary {
    display: grid; grid-template-columns: 32px 1fr 24px; align-items: center; gap: 16px;
    padding: 14px 30px; cursor: pointer; list-style: none;
    font-size: 16px; line-height: 20px; letter-spacing: 0.4px; color: var(--color-dark);
    transition: background-color .2s ease, color .2s ease;
}
.om-faq__summary::-webkit-details-marker { display: none; }
.om-faq__num { color: currentColor; font-size: 16px; line-height: 20px; letter-spacing: 0.4px; }
.om-faq__plus { width: 18px; height: 18px; position: relative; transition: transform .25s ease; }
.om-faq__plus::before, .om-faq__plus::after { content: ""; position: absolute; background: currentColor; opacity: .8; transition: opacity .25s ease, transform .25s ease; }
.om-faq__plus::before { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
.om-faq__plus::after { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }
.om-faq__item[open] .om-faq__plus::after { transform: translateX(-50%) scaleY(0); }
.om-faq__body {
    padding: 0 30px 16px 78px;
    font-size: 16px; line-height: 20px; letter-spacing: 0.4px;
    color: var(--color-dark); max-width: 500px;
}
/* Hover state (2:2694): closed rows fill dark with light text */
@media (hover: hover) {
    .om-faq__item:not([open]) .om-faq__summary:hover { background: var(--color-dark); color: var(--color-light); }
}
@media (min-width: 1024px) {
    .om-faq--rent .om-faq__summary { grid-template-columns: 116px 1fr 24px; padding: 27px 80px; }
    .om-faq--rent .om-faq__body { padding: 0 80px 27px 212px; max-width: calc(212px + 424px); }
}

/* Rating score box */
.om-score { display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; background: var(--color-dark); color: var(--color-light); border-radius: 4px; font-size: 30px; letter-spacing: 0.5px; }
.om-score--sm { width: 60px; height: 60px; font-size: 24px; }
.om-score--rent {
    display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
    background: var(--color-dark); color: var(--color-light);
    border-radius: 8px 8px 8px 0; font-size: 14px; letter-spacing: 0.5px; flex-shrink: 0;
}
@media (min-width: 1024px) {
    .om-score--rent { width: 68px; height: 68px; border-radius: 16px 16px 16px 0; font-size: 32px; }
}

/* Gallery */
.om-gallery-thumb { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 2px; background-size: cover; background-position: center; }
.om-gallery-thumb__overlay { position: absolute; inset: 0; background: rgba(54,54,54,0.55); color: #f1f2f3; display: flex; align-items: center; justify-content: center; font-size: 18px; letter-spacing: 0.5px; }
.om-gallery-main { height: 400px; overflow: hidden; position: relative; border-radius: 2px; }
@media (min-width: 1024px) { .om-gallery-main { height: 560px; } }
.om-gallery-thumb-rect { height: 64px; border-radius: 2px; overflow: hidden; position: relative; }
@media (min-width: 1024px) { .om-gallery-thumb-rect { height: 118px; } }
.om-gallery-fade { background: linear-gradient(178.44deg, rgba(13,13,13,0) 25.5%, rgba(13,13,13,0.7) 96.5%); }

/* Blog card */
.om-blog-card__meta { color: var(--color-brand); }
@media (max-width: 639px) {
    /* Figma label/mobile 5:326: 21px tall, 6×12 padding, 10/12 text, radius 3 */
    .om-blog-card .om-chip,
    .om-article-chips .om-chip { padding: 6px 12px; font-size: 10px; line-height: 12px; border-radius: 3px; border-width: 0.5px; }
}
@media (hover: hover) {
    .om-blog-card { cursor: pointer; }
    .om-blog-card__body { transition: background-color 0.3s ease; }
    .om-blog-card:hover .om-blog-card__body { background: var(--color-brand); }
    .om-blog-card:hover .om-blog-card__body .om-chip { color: var(--color-light); border-color: rgba(241,242,243,0.4); }
    .om-blog-card:hover .om-blog-card__body h3,
    .om-blog-card:hover .om-blog-card__body h3 a,
    .om-blog-card:hover .om-blog-card__body p { color: var(--color-light); }
    .om-blog-card:hover .om-blog-card__meta { color: var(--color-light); }
}
.om-blog-fade {
    position: absolute; bottom: 0; left: 0; right: 0; height: 210px; pointer-events: none; z-index: 1;
    background: linear-gradient(178.08deg, rgba(241,242,243,0) 5.86%, rgba(241,242,243,0.764) 58.9%, rgb(241,242,243) 112.97%);
}
@media (max-width: 767px) {
    .om-blog-grid--collapsed .om-blog-card[data-more] { display: none; }
}

/* Show badge (boat-show logo on Home cards) */
.om-show-badge { position: absolute; top: 12px; left: 12px; z-index: 2; height: 26px; width: auto; opacity: 0.9; filter: brightness(0) invert(1); pointer-events: none; }

/* =====================================================================
   Blog article (Figma 1:811 / 5:548)
   ===================================================================== */

/* Vertical hairline between date and read-time in the article header (1:816) */
.om-meta-divider {
    display: inline-block; width: 1px; height: 20px;
    background: currentColor; flex-shrink: 0;
}
@media (max-width: 991px) { .om-meta-divider { height: 11px; } }

/* Article body typography — Figma body headings are the H2 step (1:831: 32/36),
   100px between sections / 64px heading→copy (mobile 64 / 32) */
.om-article-body h2 {
    font-size: var(--om-h2-size); line-height: var(--om-h2-lh); letter-spacing: var(--om-h2-ls);
    margin: 100px 0 64px;
}
.om-article-body h3 {
    font-size: var(--om-h3-size); line-height: var(--om-h3-lh); letter-spacing: var(--om-h3-ls);
    margin: 100px 0 64px;
}
.om-article-body > :first-child, .om-article-body h2:first-child, .om-article-body h3:first-child { margin-top: 0; }
.om-article-body p { margin-bottom: 20px; }
.om-article-body blockquote {
    border-left: 3px solid var(--color-brand);
    padding-left: 24px; margin: 48px 0; font-style: italic;
}
@media (max-width: 991px) {
    .om-article-body h2, .om-article-body h3 { margin: 64px 0 32px; }
}

/* =====================================================================
   Blog filter (Figma 1:794 desktop / 5:1565 mobile)
   ===================================================================== */

/* FILTER BY control — desktop: 12/15 uppercase, 10px padding, 0.5px #363636 border, r7 */
.om-filter-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px;
    border: 0.5px solid var(--color-dark); border-radius: 7px;
    background: transparent; color: var(--color-dark);
    font-size: 12px; line-height: 15px; letter-spacing: 0.5px; text-transform: uppercase;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.om-filter-btn:hover { background: var(--color-dark); color: var(--color-light); }
.om-filter-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Chip row revealed by the FILTER BY control */
.om-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.om-filter-chips[hidden] { display: none; }

/* =====================================================================
   Animations
   ===================================================================== */

/* Scroll-reveal (fade up on entry) */
[data-reveal] {
    opacity: 0; transform: translateY(28px);
    transition: opacity 0.9s cubic-bezier(0.22,1,0.36,1), transform 0.9s cubic-bezier(0.22,1,0.36,1);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal][data-delay="100"] { transition-delay: 0.1s; }
[data-reveal][data-delay="200"] { transition-delay: 0.2s; }
[data-reveal][data-delay="300"] { transition-delay: 0.3s; }
[data-reveal][data-delay="400"] { transition-delay: 0.4s; }
[data-reveal][data-delay="500"] { transition-delay: 0.5s; }
[data-reveal][data-delay="600"] { transition-delay: 0.6s; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* Hero entrance reveal (awwwards cta-reveal / dhun-wellness) — Napomena 1-1030 */
[data-hero-reveal] > * {
    opacity: 0; transform: translateY(30px);
    transition: opacity 1s cubic-bezier(0.22,1,0.36,1), transform 1s cubic-bezier(0.22,1,0.36,1);
}
[data-hero-reveal].is-revealed > * { opacity: 1; transform: translateY(0); }
[data-hero-reveal] > *:nth-child(1) { transition-delay: 0.15s; }
[data-hero-reveal] > *:nth-child(2) { transition-delay: 0.30s; }
[data-hero-reveal] > *:nth-child(3) { transition-delay: 0.45s; }
[data-hero-reveal] > *:nth-child(4) { transition-delay: 0.60s; }
[data-hero-reveal] > *:nth-child(5) { transition-delay: 0.75s; }
@media (prefers-reduced-motion: reduce) { [data-hero-reveal] > * { opacity: 1; transform: none; transition: none; } }

/* Step tracker (Buy) — Napomena 1-1065 */
.om-step {
    border: 0.5px solid var(--color-dark); background: var(--color-light); color: var(--color-dark);
    transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease;
}
.om-step.is-filled { background: var(--color-dark); color: var(--color-light); border-color: var(--color-dark); }
@media (prefers-reduced-motion: reduce) { .om-step { transition: none; } }

/* Logo marquee (Trusted partners auto-scroll) — Napomena 1-1009 */
.om-marquee { overflow: hidden; }
.om-marquee__track { display: flex; width: max-content; animation: om-marquee-scroll 32s linear infinite; }
.om-marquee:hover .om-marquee__track { animation-play-state: paused; }
.om-marquee__group { display: flex; align-items: center; flex-shrink: 0; gap: 40px; padding-right: 40px; }
.om-marquee__group a { flex-shrink: 0; display: inline-flex; align-items: center; transition: opacity .2s ease; }
.om-marquee__group a:hover { opacity: 0.65; }
@media (min-width: 1024px) { .om-marquee__group { gap: 96px; padding-right: 96px; } }
@keyframes om-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .om-marquee { overflow-x: auto; } .om-marquee__track { animation: none; } }


/* Body scroll lock while the mobile menu overlay is open (NavBar) */
body.om-no-scroll { overflow: hidden; }