/* ── NYEHS Global layout styles ── */

/* ── Remove default list bullets ───────────────────────────────────────── */
.wp-block-list,
.entry-content ul,
.wp-site-blocks ul:not([class*="wp-block-navigation"]):not([class*="wp-block-social"]) {
    list-style: none;
    padding-left: 0;
}

/* ── Accessibility: skip-to-content link (WCAG 2.4.1) ───────────────────── */
.skip-link.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}
.skip-link.screen-reader-text:focus {
    background: #fff;
    clip: auto;
    clip-path: none;
    color: #0d41ff;
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 1rem;
    line-height: normal;
    padding: 0.75rem 1.25rem;
    text-decoration: none;
    top: 1rem;
    width: auto;
    z-index: 100000;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

@property --nyehs-card-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

/* Non-inheriting so a parallax section's animated value (set by JS) never
   leaks into nested children or siblings via CSS custom property inheritance. */
@property --nyehs-top-radius {
    syntax: "<length>";
    initial-value: 40px;
    inherits: false;
}

@keyframes nyehs-card-border-spin {
    0%   { --nyehs-card-angle: 0deg; }
    100% { --nyehs-card-angle: 360deg; }
}

/* ── Pulsing brand shadow ────────────────────────────────────────────────────
   Apply class "nyehs-shadow-pulse" via the block editor's Additional CSS class
   field to animate the brand box-shadow on any block.
─────────────────────────────────────────────────────────────────────────── */
@keyframes nyehs-shadow-pulse {
    0%, 100% { box-shadow: 0 20px 50px rgba(0, 0, 55, 0.4); }
    50%       { box-shadow: 0 8px  20px rgba(0, 0, 55, 0.08); }
}

.nyehs-shadow-pulse {
    animation: nyehs-shadow-pulse 7s ease-in-out infinite;
}

/* ── Membership page: full-bleed post content ───────────────────────────────
   WordPress stacks three is-layout-constrained wrappers (site-main-content,
   wp-block-post-content, and an inner group) before the first alignfull block.
   The alignfull negative-margin trick only undoes one level of padding, so we
   strip max-width and padding from all three here.
─────────────────────────────────────────────────────────────────────────── */
.page-template-page-membership .site-main-content.wp-block-group,
.page-template-page-membership .wp-block-post-content,
.page-template-page-membership .wp-block-post-content > .wp-block-group {
    max-width: none !important;
    padding-inline: 0 !important;
}


/* Strip the frosted-glass card effect from the wrapper — the dark section
   provides its own background and border-radius. */
.page-template-page-membership .site-main-content.wp-block-group {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

/* Section border-radius — top corners on every direct-child group section.
   Direct-child > prevents nested groups from inheriting the effect.
   Home page first child (hero) is excluded — it IS the top of the page. */
.wp-block-post-content > .wp-block-group,
.wp-block-post-content > .wp-block-denutivo-conditional-fallback > .wp-block-group,
.wp-block-post-content .wp-block-denutivo-conditional-content > .wp-block-group {
    border-top-left-radius:  var(--nyehs-top-radius, 40px) !important;
    border-top-right-radius: var(--nyehs-top-radius, 40px) !important;
}
body.home .wp-block-post-content > .wp-block-group:first-child,
body.home .wp-block-post-content > .wp-block-denutivo-conditional-fallback:first-child > .wp-block-group,
body.home .wp-block-post-content .wp-block-denutivo-conditional-content:first-child > .wp-block-group {
    border-top-left-radius:  0 !important;
    border-top-right-radius: 0 !important;
}

/* ── Mobile: fill rounded-corner gaps between sections ──────────────────────
   parallax.js inserts sticky fill-divs on desktop (≥1024 px) so the previous
   section's background colour fills the corner triangles cut by border-radius.
   On mobile we replicate this in CSS: each section (except the first) overlaps
   its predecessor by 40 px so those same triangles show the section above
   rather than the page background.  position:relative (no z-index) keeps
   later-in-DOM sections painted on top within the 40 px overlap zone. */
@media (max-width: 1023px) {
    .wp-block-post-content > .wp-block-group ~ .wp-block-group,
    .wp-block-post-content > .wp-block-denutivo-conditional-fallback ~ .wp-block-group,
    .wp-block-post-content > .wp-block-group ~ .wp-block-denutivo-conditional-fallback > .wp-block-group {
        margin-top: -40px;
        position:   relative;
    }
}

/* ── Section stacking — rounded corners reveal the section above ────────────
   Each full-bleed section has border-top-radius: 40px. Where the background
   is clipped by that arc, we paint the previous section's colour directly via
   a radial-gradient ::before.  The gradient uses two 40×40 tiles whose arcs
   (circle at 100%/100% and 0%/100%) exactly match the border-radius curve, so
   the corner triangle is filled and the circular interior stays transparent.

   1. Suppress stray <p> elements WP injects between sections.
   2. Zero out block-gap so sections are flush.
   3. Position & ::before on each subsequent section paints the corner fill.
────────────────────────────────────────────────────────────────────────── */

/* 1 — hide stray paragraphs between full-bleed sections */
.page-template-page-membership .wp-block-group.alignfull + p {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}

/* 2 — zero out all block-gap spacing around full-bleed sections */
.page-template-page-membership .wp-block-post-content .wp-block-group.alignfull {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 3 — corner-fill via radial-gradient ::before */
.page-template-page-membership .wp-block-post-content .wp-block-group.alignfull ~ .wp-block-group.alignfull {
    position: relative;
    margin-top: -40px !important;
}

/* Direct class override — 5-class specificity beats the 4-class zero-out rule above. */
.page-template-page-membership .wp-block-post-content .wp-block-group.alignfull.nyehs-pricing-section {
    margin-top: -40px !important;
    position: relative;
}

.page-template-page-membership .wp-block-post-content .wp-block-group.alignfull ~ .wp-block-group.alignfull::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    /* Two 40×40 tiles, one per corner.
       Arc center at bottom-right (100% 100%) of left tile  → fills top-left triangle.
       Arc center at bottom-left  (0%   100%) of right tile → fills top-right triangle. */
    background:
        radial-gradient(circle at 100% 100%, transparent 40px, var(--nyehs-prev-bg, #0a0c10) 40px)
            0     0 / 40px 40px no-repeat,
        radial-gradient(circle at 0%   100%, transparent 40px, var(--nyehs-prev-bg, #0a0c10) 40px)
            100%  0 / 40px 40px no-repeat;
    pointer-events: none;
}

/* Equal-width columns — image stack and card rows end at the same edge */
.page-template-page-membership .wp-block-columns > .wp-block-column {
    flex-basis: 50% !important;
}

/* Stretch card rows to full column width instead of sizing to content */
.page-template-page-membership .wp-block-column .wp-block-group.is-vertical.is-layout-flex {
    align-items: stretch;
}

/* ── Feature card row ── */
.page-template-page-membership .wp-block-group.is-vertical > .wp-block-group.is-nowrap {
    border-radius: 20px !important;
    position: relative;
    transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

/* Gradient border ring — always spinning, fades in on hover */
.page-template-page-membership .wp-block-group.is-vertical > .wp-block-group.is-nowrap::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 0.75px;
    background: linear-gradient(
        var(--nyehs-card-angle),
        #0D62FF,
        #7B5FFF,
        #00c6ff,
        #7B5FFF,
        #0D62FF
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    animation: nyehs-card-border-spin 3s linear infinite;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.page-template-page-membership .wp-block-group.is-vertical > .wp-block-group.is-nowrap:hover {
    transform: translateY(-3px);
    background-color: #181f35 !important;
    box-shadow: 0 12px 32px rgba(13, 98, 255, 0.18);
}

.page-template-page-membership .wp-block-group.is-vertical > .wp-block-group.is-nowrap:hover::before {
    opacity: 1;
}

/* Reset — above feature-card rules bleed into pricing card inner groups.
   First selector: inner content group → header row (grandchild via is-vertical).
   Second selector: outer card → apply group (direct child). Both need 6-class specificity. */
.page-template-page-membership .nyehs-price-card .wp-block-group.is-vertical > .wp-block-group.is-nowrap,
.page-template-page-membership .nyehs-price-card.wp-block-group.is-vertical > .wp-block-group.is-nowrap {
    border-radius: 0 !important;
    position: static !important;
    transition: none !important;
}

.page-template-page-membership .nyehs-price-card .wp-block-group.is-vertical > .wp-block-group.is-nowrap::before,
.page-template-page-membership .nyehs-price-card.wp-block-group.is-vertical > .wp-block-group.is-nowrap::before {
    content: none !important;
}

.page-template-page-membership .nyehs-price-card .wp-block-group.is-vertical > .wp-block-group.is-nowrap:hover,
.page-template-page-membership .nyehs-price-card.wp-block-group.is-vertical > .wp-block-group.is-nowrap:hover {
    background-color: transparent !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ── Feature card checkmark icon box ── */
.page-template-page-membership .wp-block-group.is-nowrap > .wp-block-group.is-content-justification-center {
    border-radius: 12px !important;
    width: 2.25rem !important;
    height: 2.25rem !important;
    min-height: 2.25rem !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* Hide the Unicode ✓ */
.page-template-page-membership .wp-block-group.is-nowrap > .wp-block-group.is-content-justification-center p {
    font-size: 0 !important;
    width: 14px;
    height: 14px;
    margin: 0 !important;
}

/* Replace with a modern thin SVG checkmark */
.page-template-page-membership .wp-block-group.is-nowrap > .wp-block-group.is-content-justification-center p::after {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7l3 3 6-6'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* ─────────────────────────────────────────────────────────────────
   Glassmorphism design tokens
   Used by header, dropdowns, panels, cards, and mobile menu.
───────────────────────────────────────────────────────────────── */
:root {
    /* Glass surfaces */
    --glass-white-bg:     rgba(255, 255, 255, 0.72);
    --glass-white-bg-md:  rgba(255, 255, 255, 0.85);
    --glass-white-bg-hi:  rgba(255, 255, 255, 0.92);
    --glass-blur:         blur(24px) saturate(160%);
    --glass-blur-light:   blur(16px) saturate(140%);
    --glass-border:       1px solid rgba(255, 255, 255, 0.55);
    --glass-border-subtle: 1px solid rgba(255, 255, 255, 0.35);
    --glass-shadow:
        0 0 0 0.5px rgba(0, 0, 0, 0.06),
        0 8px 32px rgba(0, 0, 0, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
    --glass-shadow-lg:
        0 0 0 0.5px rgba(0, 0, 0, 0.07),
        0 24px 64px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

/* ─────────────────────────────────────────────────────────────────
   Kill every source of top whitespace so the hero bleeds to the
   very top of the viewport.

   1. Browser default body margin
   2. WP block-gap margin on every direct child of .wp-site-blocks
      (:where rule adds margin-block-start: 1rem to all of them)
   3. The <main> wrapper itself
   4. Template-part wrapper around the fixed header
───────────────────────────────────────────────────────────────── */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 110px; /* compensate for fixed header (~104px) */
}

@media (max-width: 960px) {
    html { scroll-padding-top: 80px; }
}

html, body {
    margin: 0 !important;
    padding: 0 !important;
}

/* Override the WP :where(.wp-site-blocks) > * block-gap rule */
.wp-site-blocks > * {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

/* Prevent any full-width block (e.g. .dhs-hero with 100vw) from creating a
   horizontal scrollbar. overflow-x:clip clips without creating a scroll
   container, so position:sticky children on the Y axis are unaffected. */
.wp-site-blocks {
    overflow-x: clip;
}

/* <main> direct margin — covers both direct and one-level-wrapped cases */
.wp-site-blocks > main,
.wp-site-blocks > .wp-block-group > main {
    margin: 0 !important;
    padding: 0 !important;
}

/* Header template-part: remove its box so the fixed header
   doesn't add phantom flow height above the hero. The footer
   template-part intentionally keeps its box so that
   position:relative; z-index:20 (mega-footer/style.css) creates
   a stacking context above the parallax fill-divs (z ≤ 7). */
.wp-site-blocks > header.wp-block-template-part {
    display: contents !important;
}

/* ─────────────────────────────────────────────────────────────────
   Header — fixed, floats over the hero, transparent background
───────────────────────────────────────────────────────────────── */
.site-header.wp-block-group {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 10px 40px 0 !important;
    z-index: 100;
    background: transparent !important;
    background-color: transparent !important;
    box-sizing: border-box;
    width: 100%;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: visible !important;
}

/* Scrolled-down state — slides header off the top edge */
.site-header--hidden.wp-block-group {
    transform: translateY(-110%) !important;
}

/* ─────────────────────────────────────────────────────────────────
   Pill-shaped inner row — glass
───────────────────────────────────────────────────────────────── */
.site-header__row.wp-block-group {
    background: rgba(250, 248, 245, 0.75) !important;
    backdrop-filter: blur(40px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
    border-radius: 999px !important;
    border: none !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 2px 6px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.60) !important;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.3s ease-in-out;
    overflow: visible !important;
}

/* ─────────────────────────────────────────────────────────────────
   Logo
───────────────────────────────────────────────────────────────── */
.nyehs-logo-link {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}
.nyehs-logo {
    display: block;
    height: var(--nyehs-logo-height, 62px);
    width: auto;
    max-width: 280px;
    transform: scale(1.13) translateZ(0);
    transform-origin: center left;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.site-header .wp-block-site-title {
    display: none;
}

/* ─────────────────────────────────────────────────────────────────
   CTA button
───────────────────────────────────────────────────────────────── */
.site-header .wp-block-buttons {
    flex-shrink: 0;
}
.site-header__cta .wp-block-button__link {
    white-space: nowrap;
    background-color: #0F172A !important;
    transition: opacity 0.2s ease;
}

.site-header__cta .wp-block-button__link:hover {
    opacity: 0.82;
}

/* ─────────────────────────────────────────────────────────────────
   Global button tokens — defined once, applied everywhere.

   PILL SHAPE
   All buttons/triggers that use a 999px pill radius are listed
   here. Change the value in one place to restyle the whole site.

   GLARE SWEEP
   Diagonal white shimmer on hover for all dark/primary buttons.
   Uses isolation:isolate + z-index:-1 so the shine sits behind
   the button's text/icon without any per-element z-index juggling.
   Add a selector here to opt a new button in.
───────────────────────────────────────────────────────────────── */

/* Pill shape */
.nyehs-acct__trigger,
.nyehs-lang__trigger,
.site-header__cta .wp-block-button__link {
    border-radius: 999px;
}

/* Glare base — containment */
.nyehs-acct__trigger,
.nyehs-acct__submit,
.site-header__cta .wp-block-button__link {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Glare pseudo-element */
.nyehs-acct__trigger::after,
.nyehs-acct__submit::after,
.site-header__cta .wp-block-button__link::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        105deg,
        transparent 35%,
        rgba(255, 255, 255, 0.18) 50%,
        transparent 65%
    );
    transform: translateX(-100%);
    z-index: -1;
    pointer-events: none;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Glare trigger */
.nyehs-acct__trigger:hover::after,
.nyehs-acct__submit:hover::after,
.site-header__cta .wp-block-button__link:hover::after {
    transform: translateX(100%);
}

/* ─────────────────────────────────────────────────────────────────
   Mega-menu z-index (sub-menus above overlay, below mobile panel)
───────────────────────────────────────────────────────────────── */
.nyehs-mm__sub-menu {
    z-index: 101;
}
.nyehs-mm__overlay {
    z-index: 99;
}

/* Account menu, language switcher, and mobile panel share the mega-menu overlay */
body:has(.nyehs-acct__item--parent:hover) .nyehs-mm__overlay,
body:has(.nyehs-acct__item--open) .nyehs-mm__overlay,
body:has(.nyehs-lang--open) .nyehs-mm__overlay {
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.18);
}

/* Mobile panel open — dim the reveal gap around the floating glass panel */
@media (max-width: 960px) {
    .nyehs-mm__overlay--active {
        background: rgba(0, 0, 0, 0.28) !important;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
}

/* ─────────────────────────────────────────────────────────────────
   nyehs-btn — pill button with sliding label + icon disc.
   Used on the front-page hero and anywhere else a primary CTA
   is needed (profile-hero "Send Message", etc.)

   Structure:
     <a class="nyehs-btn">
       <span class="nyehs-btn__label">Text</span>
       <span class="nyehs-btn__icon">
         <svg class="nyehs-btn__svg">…</svg>
       </span>
     </a>
───────────────────────────────────────────────────────────────── */
.nyehs-btn {
    display: inline-flex;
    align-items: center;
    gap: 0;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
    /* Reset <button> UA defaults */
    border: none;
    padding: 0;
    background: none;
    -webkit-appearance: none;
    appearance: none;
}

.nyehs-btn__label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 30px;
    height: 50px;
    color: #fff;
    line-height: 1;
    white-space: nowrap;
    font-family: var(--wp--preset--font-family--lato, sans-serif);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.05em;
    background: linear-gradient(90deg, #0017c7 -25%, var(--wp--preset--color--accent, #0d41ff) 125%);
    border-radius: 999px;
    transition: border-radius 0.3s ease;
}

.nyehs-btn__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 999px;
    background: linear-gradient(-90deg, #0017c7 -25%, var(--wp--preset--color--accent, #0d41ff) 125%);
    transition: border-radius 0.3s ease;
}

.nyehs-btn__svg {
    width: 1em;
    height: 1em;
    color: #fff;
    transform: rotate(0deg);
    transition: transform 0.3s ease-in-out;
    flex-shrink: 0;
}

.nyehs-btn:hover .nyehs-btn__label {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.nyehs-btn:hover .nyehs-btn__icon {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.nyehs-btn:hover .nyehs-btn__svg {
    transform: rotate(45deg);
}

.nyehs-btn--sm .nyehs-btn__label {
    padding: 0 20px;
    height: 36px;
    font-size: 0.875rem;
}

.nyehs-btn--sm .nyehs-btn__icon {
    width: 36px;
    height: 36px;
}

/* Muted variant — solid gray (pending/secondary actions) */
.nyehs-btn--muted .nyehs-btn__label,
.nyehs-btn--muted .nyehs-btn__icon {
    background: #6b7280;
}

/* Ghost variant — outline only (decline / secondary action) */
.nyehs-btn--ghost .nyehs-btn__label {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
}
.nyehs-btn--ghost .nyehs-btn__icon {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
}
.nyehs-btn--ghost:hover .nyehs-btn__label,
.nyehs-btn--ghost:hover .nyehs-btn__icon {
    background-color: rgba(255, 255, 255, 0.1);
}
.nyehs-btn--ghost:hover .nyehs-btn__icon {
    border-color: rgba(255, 255, 255, 0.55);
}

/* Loading state while AJAX is in-flight */
.nyehs-btn[data-loading] {
    pointer-events: none;
    opacity: 0.6;
}

/* ─────────────────────────────────────────────────────────────────
   nyehs-btn — core Button block compatibility.
   Add "nyehs-btn" (+ optional variant) as Additional CSS class on
   any wp:button block.
   Structure: outer div = flex row; <a> = label pill; ::after = disc.
   The disc is on the OUTER wrapper so it sits beside the pill,
   not inside it.
───────────────────────────────────────────────────────────────── */
.wp-block-button.nyehs-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Label pill */
.wp-block-button.nyehs-btn .wp-block-button__link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 30px !important;
    height: 50px !important;
    color: #fff !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    font-family: var(--wp--preset--font-family--lato, sans-serif) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    letter-spacing: 0.05em !important;
    background: linear-gradient(90deg, #0017c7 -25%, var(--wp--preset--color--accent, #0d41ff) 125%) !important;
    border-radius: 999px !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transition: border-radius 0.3s ease !important;
}

/* Icon disc — injected by render_block filter as .nyehs-btn-disc span */
.wp-block-button.nyehs-btn .nyehs-btn-disc {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 999px !important;
    background: linear-gradient(-90deg, #0017c7 -25%, var(--wp--preset--color--accent, #0d41ff) 125%) !important;
    color: #fff !important;
    transition: border-radius 0.3s ease !important;
}

.wp-block-button.nyehs-btn .nyehs-btn-disc svg {
    width: 1em !important;
    height: 1em !important;
    transform: rotate(0deg) !important;
    transition: transform 0.3s ease-in-out !important;
    flex-shrink: 0 !important;
}

/* Hover: flatten touching inner edges + rotate arrow to east */
.wp-block-button.nyehs-btn:hover .wp-block-button__link {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    color: #fff !important;
}

.wp-block-button.nyehs-btn:hover .nyehs-btn-disc {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.wp-block-button.nyehs-btn:hover .nyehs-btn-disc svg {
    transform: rotate(45deg) !important;
}

/* --sm variant */
.wp-block-button.nyehs-btn.nyehs-btn--sm .wp-block-button__link {
    padding: 0 20px !important;
    height: 36px !important;
    font-size: 0.875rem !important;
}
.wp-block-button.nyehs-btn.nyehs-btn--sm .nyehs-btn-disc {
    width: 36px !important;
    height: 36px !important;
}

/* --muted variant */
.wp-block-button.nyehs-btn.nyehs-btn--muted .wp-block-button__link {
    background: #6b7280 !important;
}
.wp-block-button.nyehs-btn.nyehs-btn--muted .nyehs-btn-disc {
    background: #6b7280 !important;
}

/* --ghost variant */
.wp-block-button.nyehs-btn.nyehs-btn--ghost .wp-block-button__link {
    background: transparent !important;
    border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
}
.wp-block-button.nyehs-btn.nyehs-btn--ghost .nyehs-btn-disc {
    background: transparent !important;
    border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
}
.wp-block-button.nyehs-btn.nyehs-btn--ghost:hover .wp-block-button__link,
.wp-block-button.nyehs-btn.nyehs-btn--ghost:hover .nyehs-btn-disc {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Post-hero wrapper — glass card that lifts off the hero */
.site-main-content.wp-block-group {
    position: relative;
    z-index: 3;
    border-radius: 40px 40px 0 0;
    /* overflow:visible keeps sticky children working and lets section content
       bleed into the corner-arc area (hiding the gap against the hero).
       overflow:clip was previously used but exposed a corner strip when the
       parallax correctly stopped overriding clip on ancestors. capLastFill in
       parallax.js caps fill-div heights so page-bottom overflow is still prevented. */
    overflow: visible;
    margin-top: -48px;
    /* Frosted glass — hero image subtly visible through the top edge */
    background: rgba(241, 245, 249, 0.94);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    box-shadow:
        0 -4px 32px rgba(0, 0, 0, 0.06);
}

/* The <main> group should not push down for the fixed header.
   Pages that have a hero as first child look fine.
   Non-hero pages need top padding — add it via a utility class
   on <main> or let the page template handle it. */
body > .wp-site-blocks > main > .wp-block-group:first-child {
    padding-top: calc(38px + 20px + 20px + 10px + 16px); /* logo + row padding + offset + buffer */
}

/* ─────────────────────────────────────────────────────────────────
   Responsive header
───────────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────────
   Logo: collapse wordmark to icon-only below 1280px.
   The SVG viewBox is 1000 × 196.7. At any height H the circle
   (196.7 units wide) renders at exactly H px wide, so width = height
   combined with object-fit:cover / object-position:left center
   clips the image to precisely the circle with no extra assets.
───────────────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
    .nyehs-logo {
        width: 62px;        /* = height: clips to circle */
        max-width: none;
        object-fit: cover;
        object-position: left center;
    }
}

@media (max-width: 960px) {
    .site-header.wp-block-group {
        padding: 8px 16px 0 !important;
    }
    .site-header__row.wp-block-group {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        padding-left: 14px !important;
        padding-right: 6px !important;
        justify-content: flex-start !important;
        gap: 8px !important;
    }
    .site-header__row.wp-block-group > *:first-child {
        margin-right: auto;
    }
    .nyehs-logo {
        height: 42px;
        width: 42px;        /* keep width = height so circle crop stays correct */
    }
    /* Slightly smaller CTA button so it doesn't crowd the header */
    .site-header__cta .wp-block-button__link {
        font-size: 0.8125rem !important;
        padding: 0.5rem 1rem !important;
    }
    /* Match CTA size: shrink account trigger at tablet/mobile */
    .nyehs-acct__trigger {
        font-size: 0.8125rem !important;
        padding: 0.5rem 0.875rem !important;
    }
}

@media (max-width: 480px) {
    .site-header.wp-block-group {
        padding: 6px 10px 0 !important;
    }
    .site-header__row.wp-block-group {
        padding-top: 9px !important;
        padding-bottom: 9px !important;
        padding-left: 12px !important;
        padding-right: 4px !important;
        gap: 6px !important;
    }
    .nyehs-logo {
        height: 36px;
        width: 36px;        /* keep width = height so circle crop stays correct */
    }
    /* Very small screens: hide the header CTA to make room for logo + menu controls */
    .site-header__cta {
        display: none !important;
    }
    /* Very small screens: show icon only in account trigger, hide text label */
    .nyehs-acct__trigger-label {
        display: none;
    }
    .nyehs-acct__trigger {
        padding: 0.5rem 0.6rem !important;
    }
    /* Tighter content overlap on small screens */
    .site-main-content.wp-block-group {
        border-radius: 24px 24px 0 0;
        margin-top: -28px;
    }
}

/* ── Hero slider: full-width breakout from constrained-width layout ─────── */
/* The theme's contentSize is 800px. The hero should span the full viewport.
   This breakout works by widening to 100vw and shifting left to align with
   the viewport edge, regardless of the parent's content-width constraint. */
.dhs-hero {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: 0 !important;
}



/* ─────────────────────────────────────────────────────────────────
   nyehs-tagline-band — optional companion: padding, border, and
   text styles for a tagline strip. Does NOT set height — that is
   handled entirely by nyehs-fill-viewport above.
───────────────────────────────────────────────────────────────── */
.nyehs-tagline-band {
    padding-left: 48px;
    padding-right: 48px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.nyehs-tagline-band p,
.nyehs-tagline-band h1,
.nyehs-tagline-band h2,
.nyehs-tagline-band .has-text-align-center {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    font-size: clamp(1.1rem, 2.2vw, 1.6rem) !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em;
    color: #0F172A;
    text-align: center !important;
}

@media (max-width: 960px) {
    .nyehs-tagline-band {
        padding: 20px 24px;
    }
}

@media (max-width: 480px) {
    .nyehs-tagline-band {
        padding: 16px 20px;
    }
    .nyehs-tagline-band p,
    .nyehs-tagline-band h1,
    .nyehs-tagline-band h2 {
        font-size: clamp(1rem, 4vw, 1.25rem) !important;
    }
}

/* ─────────────────────────────────────────────────────────────────
   Intro band — centered column layout for the fill-viewport section.
   Use alongside nyehs-fill-viewport on the group block.
───────────────────────────────────────────────────────────────── */
.nyehs-intro-band {
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center;
    padding: clamp(1rem, 3vh, 3rem) 2rem;
    gap: clamp(0.75rem, 2vh, 2.5rem);
}

.nyehs-intro-band h1,
.nyehs-intro-band h2 {
    font-size: clamp(1.5rem, min(5vw, 6vh), 4.5rem) !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.03em !important;
    color: #0F172A;
    max-width: 16ch;
    margin: 0 !important;
}

/* ─────────────────────────────────────────────────────────────────
   nyehs-gradient-btn — rotating conic-gradient border button.
   Class lives on the outer wp-block-button div. ::before spins a
   conic gradient; ::after cuts an inner fill so only the 2px
   border shows the animation. The inner <a> floats above both.
───────────────────────────────────────────────────────────────── */
.nyehs-gradient-btn.wp-block-button {
    display: inline-block;
    position: relative;
    background: transparent;
    border-radius: 999px;
    overflow: hidden;
}

.nyehs-gradient-btn.wp-block-button::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        #0D62FF 25%,
        #000A73 50%,
        #ffffff 75%,
        transparent 100%
    );
    animation: nyehs-btn-rotate 6s linear infinite;
    z-index: -2;
}

.nyehs-gradient-btn.wp-block-button::after {
    content: "";
    position: absolute;
    inset: 2px;
    background: #f1f5f9;
    border-radius: 999px;
    z-index: -1;
    transition: background 0.2s;
}

.nyehs-gradient-btn .wp-block-button__link {
    position: relative;
    z-index: 1;
    padding: 15px 40px !important;
    background: transparent !important;
    color: var(--wp--preset--color--accent, #0D62FF) !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    font-family: var(--wp--preset--font-family--lato, sans-serif);
    letter-spacing: 0.01em;
    border: none !important;
    border-radius: 999px !important;
    text-decoration: none;
    transition: color 0.2s;
    box-shadow: none !important;
}

.nyehs-gradient-btn.wp-block-button:hover::before {
    animation-duration: 2s;
}

.nyehs-gradient-btn .wp-block-button__link:hover {
    color: #000A73 !important;
    background: transparent !important;
}

@keyframes nyehs-btn-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@media (max-width: 768px) {
    .nyehs-intro-band h1,
    .nyehs-intro-band h2 {
        font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
    }
}

/* ─────────────────────────────────────────────────────────────────
   About section — built with wp:columns / wp:cover / wp:button.
───────────────────────────────────────────────────────────────── */
.nyehs-about-section {
    padding: 1.5rem 2rem;
}

/* wp:columns: override default gap and vertically center the two columns */
.nyehs-about-split.wp-block-columns {
    gap: 0 5rem !important;
    align-items: center !important;
}

/* ── Text side ── */
.nyehs-about__badge {
    color: var(--wp--preset--color--accent, #0D62FF) !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.8rem !important;
    font-family: var(--wp--preset--font-family--lato, sans-serif);
    margin-bottom: 0.5rem !important;
}

.nyehs-about__title {
    font-size: clamp(1.8rem, 3.5vw, 2.75rem) !important;
    font-family: var(--wp--preset--font-family--gt-eesti-display, sans-serif) !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
    color: #0F172A;
    margin: 0.5rem 0 1.25rem !important;
}

.nyehs-about__accent {
    color: var(--wp--preset--color--accent, #0D62FF);
}

.nyehs-about__mission {
    font-size: 1.2rem !important;
    line-height: 1.75 !important;
    color: #52657f;
    margin-bottom: 2rem !important;
}

.nyehs-about__mission strong {
    color: #0F172A;
    font-weight: 700;
}

/* Stats: the wp:group flex container */
.nyehs-about__stats.wp-block-group {
    border-top: 2px solid rgba(0, 0, 0, 0.07) !important;
    padding-top: 1.5rem !important;
    margin-top: 0.25rem !important;
}

/* Each stat: vertical wp:group */
.nyehs-about__stat.wp-block-group {
    gap: 0.2rem !important;
}

.nyehs-about__stat-number {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: var(--wp--preset--color--accent, #0D62FF) !important;
    font-family: var(--wp--preset--font-family--gt-eesti-display, sans-serif) !important;
    line-height: 1 !important;
    margin: 0 !important;
}

.nyehs-about__stat-label {
    font-size: 0.8rem !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #7a8fa8 !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

/* ── Visual side: wp:cover as image with glass overlay ── */
.nyehs-about__visual-col.wp-block-column {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
}

.nyehs-about__img-stack.wp-block-cover {
    border-radius: 32px !important;
    overflow: hidden;
    box-shadow:
        0 30px 60px rgba(15, 23, 42, 0.10),
        0 4px 16px rgba(15, 23, 42, 0.06);
    width: 100% !important;
}

/* Inner container becomes the glass caption overlay at the bottom */
.nyehs-about__img-stack .wp-block-cover__inner-container {
    width: calc(100% - 3rem) !important;
    max-width: none !important;
    margin-left: 1.5rem !important;
    margin-right: 1.5rem !important;
    margin-bottom: 1.5rem;
    background: rgba(241, 245, 249, 0.70);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    padding: 1.25rem 1.5rem 1.5rem;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.40);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.nyehs-about__img-stack .wp-block-cover__inner-container p {
    margin: 0 !important;
    color: #0F172A !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    line-height: 1.5;
}

/* ── btn-cluster adapted for wp:button block ── */
.nyehs-btn-cluster .wp-block-button__link {
    background: linear-gradient(90deg, #0017c7 -25%, #0D62FF 125%) !important;
    color: #fff !important;
    border-radius: 100px !important;
    padding: 0 10px 0 2rem !important;
    min-height: 50px;
    display: inline-flex !important;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600 !important;
    font-family: var(--wp--preset--font-family--lato, sans-serif) !important;
    font-size: 0.95rem;
    transition: border-radius 0.25s ease;
    text-decoration: none;
}

/* Circle arrow via ::after */
.nyehs-btn-cluster .wp-block-button__link::after {
    content: '';
    display: inline-flex;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    background:
        rgba(255, 255, 255, 0.22)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'/%3E%3Cpolyline points='7 7 17 7 17 17'/%3E%3C/svg%3E")
        center / 15px no-repeat;
    border-radius: 50%;
    transition: transform 0.25s ease, border-radius 0.25s ease;
}

.nyehs-btn-cluster .wp-block-button__link:hover {
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}

.nyehs-btn-cluster .wp-block-button__link:hover::after {
    transform: rotate(45deg);
    border-radius: 8px;
}

/* ── About Gallery block ── */

/* Outer wrapper — no overflow so dots can sit below the image */
.nyehs-about-gallery-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

/* Image container — clips the images cleanly */
.nyehs-about-gallery {
    position: relative;
    overflow: hidden;
    width: 100%;
    border-radius: 32px;
    box-shadow:
        0 30px 60px rgba(15, 23, 42, 0.10),
        0 4px 16px rgba(15, 23, 42, 0.06);
}

/* Base layer — always visible at full opacity */
.nyehs-about-gallery__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Overlay layer — invisible at rest, fades in carrying the next image */
.nyehs-about-gallery__bg-next {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.9s ease;
}

.nyehs-about-gallery__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(0, 0, 0, 0.32);
}

.nyehs-about-gallery__inner {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    z-index: 3;
    background: rgba(241, 245, 249, 0.70);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    padding: 1.25rem 1.5rem;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.40);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.nyehs-about-gallery__caption {
    margin: 0 !important;
    color: #0F172A !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    line-height: 1.5;
    text-align: center;
}

/* ── Navigation dots — below the image, centered ── */
.nyehs-gallery-dots {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
}

.nyehs-gallery-dot {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    cursor: pointer;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.20);
    padding: 0;
    transition: background 0.25s ease, transform 0.25s ease;
    flex-shrink: 0;
}

.nyehs-gallery-dot--active {
    background: #0d41ff;
    transform: scale(1.35);
}

.nyehs-gallery-dot:focus-visible {
    outline: 2px solid #0d41ff;
    outline-offset: 3px;
}

.nyehs-about-gallery--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    min-height: 200px;
}

.nyehs-about-gallery__placeholder {
    color: #64748b;
    font-size: 0.95rem;
}

/* ── Responsive ── */
@media (max-width: 960px) {
    .nyehs-about-section {
        padding: 5rem 2rem;
    }
    .nyehs-about-split.wp-block-columns {
        gap: 0 3rem !important;
    }
}

@media (max-width: 480px) {
    .nyehs-about__img-stack.wp-block-cover {
        min-height: 320px !important;
    }
    .nyehs-about__stats.wp-block-group {
        gap: 2rem !important;
    }
}

/* ─────────────────────────────────────────────────────────────────
   Membership Pricing — block-based grid (WP native grid layout)
───────────────────────────────────────────────────────────────── */

/* Grid wrapper: margin-top only — WP generates the grid CSS */
.nyehs-pricing__cards {
    margin-top: 2.5rem;
}

/* ── Card shell ── */
.nyehs-price-card {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 20px;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    position: relative;
    overflow: hidden;
    color: inherit;
}

.nyehs-price-card:not(.nyehs-price-card--featured):hover {
    transform: translateY(-4px);
    border-color: transparent;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(var(--nyehs-card-angle), #0D62FF 26%, rgba(31, 117, 255, 0) 75%) border-box;
    animation: nyehs-card-border-spin 3s linear infinite;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

/* ── Card content elements ── */
.nyehs-price-card__name {
    font-family: var(--wp--preset--font-family--gt-eesti-display, sans-serif);
    font-size: 1.15rem !important;
    font-weight: 400 !important;
    color: #0F172A;
    margin: 0 !important;
    line-height: 1.2;
}

.nyehs-price-card__price {
    font-family: var(--wp--preset--font-family--gt-eesti-display, sans-serif);
    font-size: 1.6rem !important;
    font-weight: 400;
    color: #0d41ff;
    white-space: nowrap;
    margin: 0 !important;
    line-height: 1;
    flex-shrink: 0;
}

.nyehs-price-card__price span {
    font-size: 0.85rem;
    color: #94a3b8;
    font-family: var(--wp--preset--font-family--lato, sans-serif);
}

.nyehs-price-card__desc {
    font-size: 0.9rem !important;
    color: #52657f;
    line-height: 1.65;
    margin: 0 !important;
}

/* Separator inside cards */
.nyehs-price-card .wp-block-separator {
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 0 !important;
    opacity: 1;
}

/* Eligibility / features list */
.nyehs-price-card__features {
    font-size: 0.8rem !important;
    color: #94a3b8;
    line-height: 1.5;
    margin: 0 !important;
    padding-left: 0 !important;
    list-style-position: inside;
}

/* ── Apply button (flex group with SVG arrow) ── */
.nyehs-price-card__apply {
    padding-top: 1rem !important;
    color: #0F172A !important;
    font-weight: 600;
    font-size: 0.875rem !important;
    font-family: var(--wp--preset--font-family--lato, sans-serif);
    gap: 0.4rem !important;
    align-items: center !important;
}

.nyehs-price-card__apply a {
    color: inherit;
    text-decoration: none;
}

/* Hide any SVG from the wp:html block — chevron is CSS-only */
.nyehs-price-card__apply svg,
.nyehs-price-card__apply .wp-block-html {
    display: none;
}

.nyehs-price-card__apply::after {
    content: '';
    display: block;
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' stroke='%230F172A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(-45deg);
    transition: transform 0.22s ease;
}

.nyehs-price-card:hover .nyehs-price-card__apply::after {
    transform: rotate(0deg);
}

/* ── Featured "Become a Member" card ── */
.nyehs-price-card--featured {
    border-color: transparent;
    background:
        linear-gradient(#080f24, #080f24) padding-box,
        linear-gradient(var(--nyehs-card-angle), #0D62FF 26%, rgba(31, 117, 255, 0) 75%) border-box;
    animation: nyehs-card-border-spin 3s linear infinite;
}

.nyehs-price-card--featured::before {
    content: none;
}

.nyehs-price-card--featured .nyehs-price-card__name {
    color: #ffffff;
}

.nyehs-price-card--featured .nyehs-price-card__desc {
    color: rgba(255, 255, 255, 0.65);
}

.nyehs-price-card--featured .wp-block-separator {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.nyehs-price-card--featured:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(13, 98, 255, 0.22);
    border-color: transparent;
}

/* Featured CTA — nyehs-gradient-btn inside dark card */
.nyehs-price-card--featured .nyehs-gradient-btn.wp-block-button {
    isolation: isolate;
}

.nyehs-price-card--featured .nyehs-gradient-btn.wp-block-button::before {
    animation-duration: 5s;
}

.nyehs-price-card--featured .nyehs-gradient-btn.wp-block-button::after {
    background: #080f24;
}

.nyehs-price-card--featured .nyehs-gradient-btn .wp-block-button__link {
    padding: 12px 24px !important;
    font-size: 0.875rem !important;
    color: #ffffff !important;
}

.nyehs-price-card--featured .nyehs-gradient-btn .wp-block-button__link:hover {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Pricing heading + subheading */
.nyehs-pricing__heading.wp-block-heading {
    text-align: center !important;
    font-size: clamp(1.8rem, 3.5vw, 2.75rem) !important;
    font-weight: 400 !important;
    color: #0F172A !important;
    margin-bottom: 0.5rem !important;
}

.nyehs-pricing__subheading.wp-block-paragraph {
    text-align: center !important;
    font-size: 1.05rem !important;
    color: #52657f !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 520px !important;
    line-height: 1.65 !important;
}

/* Responsive — collapse to 2-col then 1-col */
@media (max-width: 960px) {
    .nyehs-pricing__cards.is-layout-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .nyehs-pricing__cards.is-layout-grid > * {
        grid-column: span 1 !important;
    }
}

@media (max-width: 600px) {
    .nyehs-pricing__cards.is-layout-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        margin-top: 2rem !important;
    }
    .nyehs-price-card {
        padding: 22px 24px !important;
    }
}

/* ── FAQ Section ─────────────────────────────────────────────────────────── */

.nyehs-faq-section {
    --nyehs-prev-bg: #ffffff;
}

.page-template-page-membership .wp-block-post-content .wp-block-group.alignfull.nyehs-faq-section {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}
.page-template-page-membership .wp-block-post-content .wp-block-group.alignfull.nyehs-faq-section::before {
    content: none !important;
}

.nyehs-faq-label {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0d41ff !important;
    margin: 0 !important;
}

/* FAQ item — <details> element */
.nyehs-faq-item {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 16px;
    transition: box-shadow 0.3s ease;
}

.nyehs-faq-item + .nyehs-faq-item {
    margin-top: 12px;
}

/* Open state — rotating gradient border, same technique as card hover */
.nyehs-faq-item[open] {
    border-color: transparent;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(var(--nyehs-card-angle), #0D62FF 26%, rgba(31, 117, 255, 0) 75%) border-box;
    animation: nyehs-card-border-spin 4s linear infinite;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* Summary row */
.nyehs-faq-item > summary {
    list-style: none;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-family: var(--wp--preset--font-family--gt-eesti-display, sans-serif);
    font-size: 1rem;
    font-weight: 600;
    color: #0F172A;
    line-height: 1.4;
}

.nyehs-faq-item > summary:focus {
    outline: none;
}

.nyehs-faq-item > summary:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent, #0d41ff);
    outline-offset: 2px;
    border-radius: 4px;
}

.nyehs-faq-item > summary::-webkit-details-marker {
    display: none;
}

/* Plus icon — rotates to × when open */
.nyehs-faq-item > summary::after {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='9' y1='3' x2='9' y2='15' stroke='%230D62FF' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='3' y1='9' x2='15' y2='9' stroke='%230D62FF' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.25s ease;
}

.nyehs-faq-item[open] > summary::after {
    transform: rotate(45deg);
}

/* Answer content */
.nyehs-faq-item > .wp-block-paragraph {
    padding: 0 1.5rem 1.5rem;
    font-size: 0.9375rem !important;
    color: #52657f !important;
    line-height: 1.65 !important;
    margin: 0 !important;
}

/* Lock column widths — WP's flex-grow:1 default ignores flex-basis */
.nyehs-faq-section .wp-block-columns {
    align-items: flex-start;
}

.nyehs-faq-section .wp-block-columns > .wp-block-column:first-child {
    flex-basis: 33.33% !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
}

.nyehs-faq-section .wp-block-columns > .wp-block-column:last-child {
    flex-basis: 0 !important;
    flex-grow: 1 !important;
}

/* Responsive — stack columns on mobile */
@media (max-width: 768px) {
    .nyehs-faq-section .wp-block-columns > .wp-block-column:first-child,
    .nyehs-faq-section .wp-block-columns > .wp-block-column:last-child {
        flex-basis: 100% !important;
        flex-grow: 1 !important;
        flex-shrink: 1 !important;
        max-width: 100% !important;
    }
}

/* ── Global form field shape ─────────────────────────────────────────────── */
/* Pill border-radius on all text-style inputs site-wide — catches third-party
   plugin forms. Block class selectors have higher specificity and override
   this where a block defines its own value. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
    border-radius: 999px;
}

textarea {
    border-radius: 24px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   nyehs-rm / nyehs-rm-light — generic form wrapper classes.
   Add to any Group block wrapping a form (RegistrationMagic, CF7, WPForms…).
   nyehs-rm       = dark panel context (white text on dark)
   nyehs-rm-light = light panel context (dark text on white)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Tokens: dark ── */
.nyehs-rm {
    --rm-input-bg:          rgba(255, 255, 255, 0.05);
    --rm-input-border:      rgba(255, 255, 255, 0.09);
    --rm-input-color:       #fff;
    --rm-placeholder:       rgba(255, 255, 255, 0.32);
    --rm-focus-border:      rgba(13, 98, 255, 0.55);
    --rm-focus-bg:          rgba(255, 255, 255, 0.07);
    --rm-label-color:       #f1f5f9;
    --rm-check-bg:          rgba(255, 255, 255, 0.05);
    --rm-check-border:      rgba(255, 255, 255, 0.2);
    --rm-check-label:       rgba(255, 255, 255, 0.65);
    --rm-error-bg:          rgba(239, 68, 68, 0.07);
    --rm-select-arrow:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
}

/* ── Tokens: light ── */
.nyehs-rm-light {
    --rm-input-bg:          rgba(255, 255, 255, 0.75);
    --rm-input-border:      rgba(226, 232, 240, 0.8);
    --rm-input-color:       #0f172a;
    --rm-placeholder:       rgba(100, 116, 139, 0.6);
    --rm-focus-border:      rgba(13, 98, 255, 0.55);
    --rm-focus-bg:          rgba(255, 255, 255, 0.9);
    --rm-label-color:       #374151;
    --rm-check-bg:          rgba(255, 255, 255, 0.75);
    --rm-check-border:      rgba(203, 213, 225, 0.6);
    --rm-check-label:       #6b7280;
    --rm-error-bg:          rgba(239, 68, 68, 0.04);
    --rm-select-arrow:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
}

/* ── Form row width ── */
.nyehs-rm-light .rmformui .rmform-row {
    width:  100% !important;
    margin: 0 auto 10px !important;
}

/* ── Heading size override ── */
.nyehs-rm-light h1,
.nyehs-rm-light .wp-block-heading:is(h1) {
    font-size: var( --wp--preset--font-size--x-large, 1.75rem ) !important;
    line-height: 1.3 !important;
}

/* ── Text inputs ── */
:is(.nyehs-rm, .nyehs-rm-light) input:is([type="text"], [type="email"], [type="password"], [type="url"], [type="tel"], [type="number"], [type="date"], [type="time"], [type="datetime-local"]),
:is(.nyehs-rm, .nyehs-rm-light) textarea {
    width:         100% !important;
    background:    var(--rm-input-bg) !important;
    border:        1px solid var(--rm-input-border) !important;
    border-radius: 999px !important;
    color:         var(--rm-input-color) !important;
    font-size:     0.9375rem !important;
    font-family:   inherit !important;
    padding:       13px 16px !important;
    outline:       none !important;
    transition:    border-color 0.2s ease, background 0.2s ease !important;
    box-sizing:    border-box !important;
}

/* JS wraps each textarea in this div — overflow:hidden clips the scrollbar to
   the rounded shape so the track and arrows never bleed past the corners. */
.nyehs-ta-clip {
    border-radius: 24px;
    overflow:      hidden;
    display:       block;
    width:         100%;
}

:is(.nyehs-rm, .nyehs-rm-light) textarea {
    border-radius: 24px !important;
    resize:        none !important;
    min-height:    130px !important;
    overflow-y:    auto !important;
}

/* clip-path on the textarea clips the scrollbar track to the same rounded
   shape, so the track can never bleed past the border-radius corners. */
/* Channel is 10px wide; the 5px transparent right border on the thumb
   creates a 5px gap from the edge, effectively shifting it left. */
:is(.nyehs-rm, .nyehs-rm-light) textarea::-webkit-scrollbar {
    width: 10px !important;
}

/* Global: collapse arrow buttons on all webkit scrollbars.
   Scoped rules are unreliable for this pseudo-element across Chrome/Edge. */
::-webkit-scrollbar-button {
    width:  0;
    height: 0;
}

:is(.nyehs-rm, .nyehs-rm-light) textarea::-webkit-scrollbar-track {
    background:    transparent !important;
    margin-top:    16px !important;
    margin-bottom: 16px !important;
}

:is(.nyehs-rm, .nyehs-rm-light) textarea::-webkit-scrollbar-thumb {
    background:      rgba(255, 255, 255, 0.2) !important;
    border-radius:   99px !important;
    border-right:    5px solid transparent !important;
    background-clip: padding-box !important;
}

:is(.nyehs-rm, .nyehs-rm-light) textarea::-webkit-scrollbar-thumb:hover {
    background:      rgba(255, 255, 255, 0.35) !important;
    background-clip: padding-box !important;
}

.nyehs-rm-light textarea::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.14) !important;
}

.nyehs-rm-light textarea::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25) !important;
}

/* Firefox */
:is(.nyehs-rm, .nyehs-rm-light) textarea {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent !important;
}

.nyehs-rm-light textarea {
    scrollbar-color: rgba(0, 0, 0, 0.14) transparent !important;
}

:is(.nyehs-rm, .nyehs-rm-light) input:is([type="text"], [type="email"], [type="password"], [type="url"], [type="tel"], [type="number"])::placeholder,
:is(.nyehs-rm, .nyehs-rm-light) textarea::placeholder {
    color: var(--rm-placeholder) !important;
}

:is(.nyehs-rm, .nyehs-rm-light) input:is([type="text"], [type="email"], [type="password"], [type="url"], [type="tel"], [type="number"]):focus,
:is(.nyehs-rm, .nyehs-rm-light) textarea:focus {
    border-color: var(--rm-focus-border) !important;
    background:   var(--rm-focus-bg) !important;
    outline:      none !important;
}

/* ── Labels ── */
:is(.nyehs-rm, .nyehs-rm-light) label {
    color: var(--rm-label-color) !important;
}

/* ── Submit button — split-pill ── */
:is(.nyehs-rm, .nyehs-rm-light) .buttonarea {
    display:     inline-flex !important;
    align-items: center !important;
}

:is(.nyehs-rm, .nyehs-rm-light) .buttonarea input[type="submit"],
:is(.nyehs-rm, .nyehs-rm-light) input[type="submit"],
:is(.nyehs-rm, .nyehs-rm-light) button[type="submit"] {
    height:             52px !important;
    padding:            0 28px !important;
    background:         #0017c7 !important;
    border:             none !important;
    border-radius:      999px !important;
    color:              #fff !important;
    font-size:          1rem !important;
    font-weight:        600 !important;
    font-family:        inherit !important;
    letter-spacing:     0.01em !important;
    white-space:        nowrap !important;
    cursor:             pointer !important;
    -webkit-appearance: none !important;
    appearance:         none !important;
    transition:         border-radius 0.3s ease !important;
}

/* Arrow disc (requires .buttonarea wrapper in the form's HTML) */
:is(.nyehs-rm, .nyehs-rm-light) .buttonarea::after {
    content:        '' !important;
    display:        block !important;
    flex-shrink:    0 !important;
    width:          52px !important;
    height:         52px !important;
    border-radius:  999px !important;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'/%3E%3Cpolyline points='7 7 17 7 17 17'/%3E%3C/svg%3E") center / 14px no-repeat,
        #0017c7 !important;
    transition:     border-radius 0.3s ease !important;
    pointer-events: none !important;
}

:is(.nyehs-rm, .nyehs-rm-light) .buttonarea:hover input[type="submit"] {
    border-top-right-radius:    0 !important;
    border-bottom-right-radius: 0 !important;
}

:is(.nyehs-rm, .nyehs-rm-light) .buttonarea:hover::after {
    border-top-left-radius:    0 !important;
    border-bottom-left-radius: 0 !important;
}

/* ── Checkboxes ── */
:is(.nyehs-rm, .nyehs-rm-light) .rmradio {
    list-style: none !important;
    padding:    0 !important;
    margin:     0 !important;
}

:is(.nyehs-rm, .nyehs-rm-light) .rmradio li {
    display:     flex !important;
    align-items: center !important;
}

:is(.nyehs-rm, .nyehs-rm-light) input[type="checkbox"] {
    position:       absolute !important;
    opacity:        0 !important;
    width:          0 !important;
    height:         0 !important;
    margin:         0 !important;
    pointer-events: none !important;
}

:is(.nyehs-rm, .nyehs-rm-light) input[type="checkbox"] + label {
    display:             inline-flex !important;
    align-items:         center !important;
    gap:                 9px !important;
    cursor:              pointer !important;
    user-select:         none !important;
    -webkit-user-select: none !important;
    color:               var(--rm-check-label) !important;
    font-size:           0.875rem !important;
}

:is(.nyehs-rm, .nyehs-rm-light) input[type="checkbox"] + label::before {
    content:       '' !important;
    flex-shrink:   0 !important;
    display:       inline-block !important;
    width:         17px !important;
    height:        17px !important;
    box-sizing:    border-box !important;
    border:        1px solid var(--rm-check-border) !important;
    border-radius: 5px !important;
    background:    var(--rm-check-bg) !important;
    transition:    border-color 0.15s ease, background 0.15s ease !important;
}

:is(.nyehs-rm, .nyehs-rm-light) input[type="checkbox"] + label:hover::before {
    border-color: var(--rm-focus-border) !important;
}

:is(.nyehs-rm, .nyehs-rm-light) input[type="checkbox"]:checked + label::before {
    background:   var(--wp--preset--color--accent, #0d41ff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6l3 3 5-5'/%3E%3C/svg%3E") center / 10px no-repeat !important;
    border-color: var(--wp--preset--color--accent, #0d41ff) !important;
}

:is(.nyehs-rm, .nyehs-rm-light) input[type="checkbox"]:focus-visible + label::before {
    outline:        2px solid var(--wp--preset--color--accent, #0d41ff) !important;
    outline-offset: 2px !important;
}

/* ── Select dropdowns ── */
:is(.nyehs-rm, .nyehs-rm-light) select {
    width:              100% !important;
    appearance:         none !important;
    -webkit-appearance: none !important;
    background:         var(--rm-input-bg) var(--rm-select-arrow) right 14px center / 12px no-repeat !important;
    border:             1px solid var(--rm-input-border) !important;
    border-radius:      999px !important;
    color:              var(--rm-input-color) !important;
    font-size:          0.9375rem !important;
    font-family:        inherit !important;
    padding:            13px 42px 13px 16px !important;
    outline:            none !important;
    box-sizing:         border-box !important;
    cursor:             pointer !important;
    transition:         border-color 0.2s ease !important;
}

:is(.nyehs-rm, .nyehs-rm-light) select:focus {
    border-color:     var(--rm-focus-border) !important;
    background-color: var(--rm-focus-bg) !important;
    outline:          none !important;
}

/* ── High-specificity override for native selects (timezone, country) inside the
   full RM wrapper chain. rm-form-common-utility.css targets the same element at
   (0,3,1) and uses !important on padding; this rule at (0,4,1) beats it for all
   properties, guaranteeing the pill appearance regardless of RM's CSS. ── */
:is(.nyehs-rm, .nyehs-rm-light) .rmformui .rmform-row .rmform-field select {
    width:              100% !important;
    appearance:         none !important;
    -webkit-appearance: none !important;
    background:         var(--rm-input-bg) var(--rm-select-arrow) right 14px center / 12px no-repeat !important;
    border:             1px solid var(--rm-input-border) !important;
    border-radius:      999px !important;
    color:              var(--rm-input-color) !important;
    font-size:          0.9375rem !important;
    font-family:        inherit !important;
    padding:            13px 42px 13px 16px !important;
    height:             auto !important;
    line-height:        1.4 !important;
    outline:            none !important;
    box-sizing:         border-box !important;
    cursor:             pointer !important;
    transition:         border-color 0.2s ease !important;
}

/* Native <option> colours — best-effort; OS controls the popup on most browsers */
.nyehs-rm select option {
    background: #0f172a !important;
    color:      #e2e8f0 !important;
}
.nyehs-rm-light select option {
    background: #ffffff !important;
    color:      #0f172a !important;
}

/* ── Select2 custom dropdown (RM address / country fields) ─────────────────
   Trigger lives inside the wrapper so it can be scoped.
   The dropdown panel is appended to <body> by Select2 — styled globally.   */

/* Trigger */
:is(.nyehs-rm, .nyehs-rm-light) .select2-container--default .select2-selection--single {
    background:    var(--rm-input-bg) !important;
    border:        1px solid var(--rm-input-border) !important;
    border-radius: 999px !important;
    height:        46px !important;
    outline:       none !important;
    transition:    border-color 0.2s ease !important;
}

:is(.nyehs-rm, .nyehs-rm-light) .select2-container--default.select2-container--focus .select2-selection--single,
:is(.nyehs-rm, .nyehs-rm-light) .select2-container--default.select2-container--open  .select2-selection--single {
    border-color: var(--rm-focus-border) !important;
    outline:      none !important;
}

:is(.nyehs-rm, .nyehs-rm-light) .select2-container--default .select2-selection--single .select2-selection__rendered {
    color:       var(--rm-input-color) !important;
    font-size:   0.9375rem !important;
    font-family: inherit !important;
    line-height: 44px !important;
    padding:     0 40px 0 16px !important;
}

/* Replace the default triangle with our SVG chevron */
:is(.nyehs-rm, .nyehs-rm-light) .select2-container--default .select2-selection--single .select2-selection__arrow {
    top:    0 !important;
    right:  14px !important;
    height: 100% !important;
    width:  20px !important;
}

:is(.nyehs-rm, .nyehs-rm-light) .select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none !important;
}

:is(.nyehs-rm, .nyehs-rm-light) .select2-container--default .select2-selection--single .select2-selection__arrow::after {
    content:    '' !important;
    display:    block !important;
    width:      12px !important;
    height:     8px !important;
    margin-top: -4px !important;
    position:   absolute !important;
    top:        50% !important;
    right:      0 !important;
    background: var(--rm-select-arrow) center / contain no-repeat !important;
}

/* Dropdown panel — appended to <body> by Select2, NOT inside .select2-container--default.
   Selectors must target .select2-dropdown directly (no ancestor combinator).
   Select2 4.x also zeros the adjacent radii on --below/--above to connect
   panel to trigger; restore them here and float detached with a gap.        */
.select2-dropdown {
    background:    #0f172a !important;
    border:        1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 20px !important;
    overflow:      hidden !important;
    box-shadow:    0 10px 36px rgba(0, 0, 0, 0.4) !important;
    font-family:   inherit !important;
}

.select2-dropdown--below {
    border-top:              1px solid rgba(255, 255, 255, 0.09) !important;
    border-top-left-radius:  20px !important;
    border-top-right-radius: 20px !important;
    margin-top:              6px !important;
}

.select2-dropdown--above {
    border-bottom:              1px solid rgba(255, 255, 255, 0.09) !important;
    border-bottom-left-radius:  20px !important;
    border-bottom-right-radius: 20px !important;
    margin-bottom:              6px !important;
}

/* Keep trigger fully rounded when dropdown is open */
.select2-container--default.select2-container--open .select2-selection--single {
    border-radius: 999px !important;
}

/* Search box inside dropdown */
.select2-search--dropdown {
    padding: 10px 10px 6px !important;
}

.select2-search--dropdown .select2-search__field {
    background:    rgba(255, 255, 255, 0.06) !important;
    border:        1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 999px !important;
    color:         #fff !important;
    padding:       8px 14px !important;
    outline:       none !important;
    font-size:     0.875rem !important;
    font-family:   inherit !important;
    width:         100% !important;
    box-sizing:    border-box !important;
}

.select2-search--dropdown .select2-search__field:focus {
    border-color: rgba(13, 98, 255, 0.5) !important;
}

/* Options list — include .select2-container--default to beat RM's same-property !important rule */
.select2-container--default .select2-results__option {
    color:      rgba(255, 255, 255, 0.78) !important;
    font-size:  0.9rem !important;
    padding:    9px 16px !important;
    transition: background 0.12s ease !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: rgba(13, 98, 255, 0.22) !important;
    color:            #fff !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: rgba(0, 23, 199, 0.28) !important;
    color:            #fff !important;
}

/* ── Select2 results scrollbar ── */
.select2-results__options {
    scrollbar-width:    thin;
    scrollbar-color:    rgba(255, 255, 255, 0.18) transparent;
}

.select2-results__options::-webkit-scrollbar {
    width: 5px;
}

.select2-results__options::-webkit-scrollbar-track {
    background:    transparent;
    margin-top:    8px;
    margin-bottom: 8px;
}

.select2-results__options::-webkit-scrollbar-thumb {
    background:    rgba(255, 255, 255, 0.18);
    border-radius: 99px;
}

.select2-results__options::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.32);
}

/* ── Radio buttons ── */
/* ── Radio buttons ──────────────────────────────────────────────────────────
   RM structure: <label class="rmform-check">
                   <input type="radio">
                   <span class="rmform-label rmform-radio-check">Option text</span>
                 </label>
   The span is the LABEL TEXT, not a visual replacement.
   RM's default uses float:left + padding-left + margin-left:-1.5em offset trick.
   We reset that and style the native input directly via appearance:none.     */

/* Reset RM's float/offset layout in favour of clean flex + gap */
:is(.nyehs-rm, .nyehs-rm-light) .rmform-check {
    padding-left: 0 !important;
    gap:          9px !important;
    align-items:  center !important;
}

/* Native radio — styled directly, kept in flow */
:is(.nyehs-rm, .nyehs-rm-light) input[type="radio"] {
    -webkit-appearance: none !important;
    -moz-appearance:    none !important;
    appearance:         none !important;
    width:              18px !important;
    height:             18px !important;
    min-width:          18px !important;
    border-radius:      50% !important;
    border:             1.5px solid var(--rm-check-border) !important;
    background:         var(--rm-check-bg) !important;
    box-sizing:         border-box !important;
    flex-shrink:        0 !important;
    float:              none !important;
    margin:             0 !important;
    cursor:             pointer !important;
    opacity:            1 !important;
    position:           static !important;
    transition:         border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}

:is(.nyehs-rm, .nyehs-rm-light) input[type="radio"]:checked {
    border-color: var(--wp--preset--color--accent, #0d41ff) !important;
    background:   #fff !important;
    box-shadow:   inset 0 0 0 5px var(--wp--preset--color--accent, #0d41ff) !important;
}

:is(.nyehs-rm, .nyehs-rm-light) .rmform-check:hover input[type="radio"],
:is(.nyehs-rm, .nyehs-rm-light) input[type="radio"]:focus-visible {
    border-color: var(--rm-focus-border) !important;
}

/* Native checkbox — same approach as radio: override RM's hiding and style directly */
:is(.nyehs-rm, .nyehs-rm-light) input[type="checkbox"] {
    -webkit-appearance: none !important;
    -moz-appearance:    none !important;
    appearance:         none !important;
    display:            inline-block !important;
    width:              18px !important;
    height:             18px !important;
    min-width:          18px !important;
    border-radius:      5px !important;
    border:             1.5px solid var(--rm-check-border) !important;
    background:         var(--rm-check-bg) !important;
    box-sizing:         border-box !important;
    flex-shrink:        0 !important;
    float:              none !important;
    margin:             0 !important;
    cursor:             pointer !important;
    opacity:            1 !important;
    position:           static !important;
    pointer-events:     auto !important;
    transition:         border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}

:is(.nyehs-rm, .nyehs-rm-light) input[type="checkbox"]:checked {
    border-color: var(--wp--preset--color--accent, #0d41ff) !important;
    background:   #0d41ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat !important;
    box-shadow:   none !important;
}

:is(.nyehs-rm, .nyehs-rm-light) .rmform-check:hover input[type="checkbox"],
:is(.nyehs-rm, .nyehs-rm-light) input[type="checkbox"]:focus-visible {
    border-color: var(--rm-focus-border) !important;
}

/* Block 1 drew a custom box via label::before; Block 2 re-shows the native
   input, so the ::before is now a duplicate. Kill it globally. */
:is(.nyehs-rm, .nyehs-rm-light) input[type="checkbox"] + label::before {
    display:  none !important;
    content:  none !important;
}

/* ── Terms & Conditions checkbox ─────────────────────────────────────────────
   Different structure: <div.rmform-terms-checkbox> > <input> + <label>
   RM hides the native input and shows a custom box via label::before — which
   doubles with our styled native input. Fix: kill the pseudo-element and
   lay out the row with flex.                                                */

:is(.nyehs-rm, .nyehs-rm-light) .rmform-terms-checkbox {
    display:       flex !important;
    align-items:   flex-start !important;
    gap:           10px !important;
    margin-bottom: 16px !important;
}

/* Kill RM's custom checkbox pseudo-element — we use the native input instead */
:is(.nyehs-rm, .nyehs-rm-light) .rmform-terms-checkbox .rmform-label::before,
:is(.nyehs-rm, .nyehs-rm-light) .rmform-terms-checkbox .rmform-label::after {
    display: none !important;
    content: none !important;
}

/* Reset the label — it's a sibling text node, not a block field label */
:is(.nyehs-rm, .nyehs-rm-light) .rmform-terms-checkbox .rmform-label {
    display:       inline !important;
    font-size:     0.875rem !important;
    font-weight:   400 !important;
    color:         var(--rm-check-label) !important;
    margin-bottom: 0 !important;
    padding-left:  0 !important;
    position:      static !important;
    line-height:   1.55 !important;
    cursor:        pointer !important;
}

/* Nudge checkbox down 2px so it sits on the first text baseline */
:is(.nyehs-rm, .nyehs-rm-light) .rmform-terms-checkbox input[type="checkbox"] {
    margin-top: 2px !important;
}

/* ── Newsletter opt-in checkbox ──────────────────────────────────────────────
   .rm_optin_text wraps a plain <input> + <label> with no flex layout, so the
   checkbox and label run together.  Mirror the terms-checkbox treatment.       */
:is(.nyehs-rm, .nyehs-rm-light) .rm_optin_text {
    display:     flex !important;
    align-items: flex-start !important;
    gap:         10px !important;
}

:is(.nyehs-rm, .nyehs-rm-light) .rm_optin_text input[type="checkbox"] {
    flex-shrink: 0 !important;
    margin-top:  2px !important;
}

:is(.nyehs-rm, .nyehs-rm-light) .rm_optin_text label {
    font-size:   0.875rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    cursor:      pointer !important;
}

/* Option text span — must NOT be a circle; override any inherited label styles */
:is(.nyehs-rm, .nyehs-rm-light) .rmform-check .rmform-label {
    display:       inline !important;
    font-weight:   400 !important;
    margin-bottom: 0 !important;
    color:         var(--rm-check-label) !important;
    font-size:     0.875rem !important;
}

/* ── Subscription plan cards ─────────────────────────────────────────────────
   RM wraps each plan in a .rmform-check label (radio + label div).
   We override the standard radio-row layout and turn each into a clickable
   card. The radio input is hidden; selection state is shown via border +
   a pseudo-element dot indicator in the top-right corner.                  */

:is(.nyehs-rm, .nyehs-rm-light) .rm-subscription-cards {
    display:               grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap:                   10px !important;
    margin-bottom:         16px !important;
}

@media (max-width: 700px) {
    :is(.nyehs-rm, .nyehs-rm-light) .rm-subscription-cards {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 420px) {
    :is(.nyehs-rm, .nyehs-rm-light) .rm-subscription-cards {
        grid-template-columns: 1fr !important;
    }
}

/* Card shell */
:is(.nyehs-rm, .nyehs-rm-light) .rm-subscription-cards .rmform-check {
    display:          flex !important;
    flex-direction:   column !important;
    gap:              0 !important;
    align-items:      flex-start !important;
    padding:          16px 40px 16px 16px !important;
    border:           1.5px solid var(--rm-input-border) !important;
    border-radius:    16px !important;
    background:       var(--rm-input-bg) !important;
    cursor:           pointer !important;
    position:         relative !important;
    user-select:      none !important;
    -webkit-user-select: none !important;
    transition:       border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease !important;
}

:is(.nyehs-rm, .nyehs-rm-light) .rm-subscription-cards .rmform-check:hover {
    border-color: var(--rm-focus-border) !important;
}

/* Radio dot indicator — top-right corner */
:is(.nyehs-rm, .nyehs-rm-light) .rm-subscription-cards .rmform-check::after {
    content:       '' !important;
    position:      absolute !important;
    top:           14px !important;
    right:         14px !important;
    width:         16px !important;
    height:        16px !important;
    border-radius: 50% !important;
    border:        1.5px solid var(--rm-check-border) !important;
    background:    var(--rm-check-bg) !important;
    transition:    border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
    flex-shrink:   0 !important;
}

/* Selected card */
:is(.nyehs-rm, .nyehs-rm-light) .rm-subscription-cards .rmform-check:has(input:checked) {
    border-color: rgba(13, 98, 255, 0.55) !important;
    background:   rgba(13, 98, 255, 0.07) !important;
    box-shadow:   0 0 0 3px rgba(13, 98, 255, 0.12) !important;
}

/* Selected indicator dot */
:is(.nyehs-rm, .nyehs-rm-light) .rm-subscription-cards .rmform-check:has(input:checked)::after {
    border-color: #0d41ff !important;
    background:   #fff !important;
    box-shadow:   inset 0 0 0 4px #0d41ff !important;
}

/* Hide the actual radio input — card border IS the selection indicator */
:is(.nyehs-rm, .nyehs-rm-light) .rm-subscription-cards input[type="radio"] {
    position:       absolute !important;
    opacity:        0 !important;
    width:          0 !important;
    height:         0 !important;
    margin:         0 !important;
    padding:        0 !important;
    pointer-events: none !important;
}

/* Label wrapper inside each card */
:is(.nyehs-rm, .nyehs-rm-light) .rm-subscription-cards .rmform-check .rmform-label {
    display:       flex !important;
    flex-direction: column !important;
    gap:           3px !important;
    color:         inherit !important;
    font-size:     inherit !important;
    font-weight:   inherit !important;
    margin-bottom: 0 !important;
}

/* Plan name */
:is(.nyehs-rm, .nyehs-rm-light) .rm-subscription-cards .rm-sub-plan-name {
    font-size:   0.9375rem !important;
    font-weight: 600 !important;
    color:       var(--rm-label-color) !important;
    line-height: 1.3 !important;
}

/* Price */
:is(.nyehs-rm, .nyehs-rm-light) .rm-subscription-cards .rm-sub-plan-price {
    font-size:   0.8125rem !important;
    color:       var(--rm-placeholder) !important;
    line-height: 1.4 !important;
    transition:  color 0.15s ease !important;
}

/* Price brightens on selected card */
:is(.nyehs-rm, .nyehs-rm-light) .rm-subscription-cards .rmform-check:has(input:checked) .rm-sub-plan-price {
    color: rgba(13, 98, 255, 0.75) !important;
}

/* ── Form labels (rmform structure) ── */
:is(.nyehs-rm, .nyehs-rm-light) .rmform-label,
:is(.nyehs-rm, .nyehs-rm-light) .rmform-label-address {
    color:         var(--rm-label-color) !important;
    font-size:     0.8125rem !important;
    font-weight:   600 !important;
    margin-bottom: 5px !important;
    display:       block !important;
}

/* ── Required asterisk ── */
:is(.nyehs-rm, .nyehs-rm-light) .rmform-req-symbol {
    color: #ef4444 !important;
}

/* ── Section headings ── */
:is(.nyehs-rm, .nyehs-rm-light) .rmform-row-heading {
    font-size:   1rem !important;
    font-weight: 700 !important;
    color:       var(--rm-label-color) !important;
    margin:      24px 0 4px !important;
    padding:     0 !important;
}

:is(.nyehs-rm, .nyehs-rm-light) .rmform-row-subheading {
    font-size:   0.8125rem !important;
    color:       var(--rm-placeholder) !important;
    margin:      0 0 14px !important;
}

/* ── Error states ── */

/* RM injects a ↑ arrow via ::before on its error messages — remove it */
:is(.nyehs-rm, .nyehs-rm-light) .rm-form-error-message::before,
:is(.nyehs-rm, .nyehs-rm-light) .rmform-error-message::before {
    content: none !important;
}

:is(.nyehs-rm, .nyehs-rm-light) .rmform-error-message {
    color:         rgba(239, 68, 68, 0.65) !important;
    font-size:     0.8125rem !important;
    margin-top:    5px !important;
    padding:       3px 12px !important;
    background:    var(--rm-error-bg) !important;
    border-radius: 999px !important;
}

:is(.nyehs-rm, .nyehs-rm-light) .rmform-has-error input,
:is(.nyehs-rm, .nyehs-rm-light) .rmform-has-error select,
:is(.nyehs-rm, .nyehs-rm-light) .rmform-has-error textarea {
    border-color: #ef4444 !important;
}

/* ── Popup hint box (.rmform-note new structure / .rmnote legacy / .tooltiptext) ──
   RM positions .rmform-note absolutely via JS (top: fieldHeight) — do NOT
   override position or margin-top or it breaks placement.
   The arrow is ::after (border-trick triangle). ::before is an invisible
   20px hover-bridge RM uses to keep the tooltip open while the cursor travels
   from the field to the box — leave it alone.                               */
:is(.nyehs-rm, .nyehs-rm-light) .rmform-note,
:is(.nyehs-rm, .nyehs-rm-light) .rmnote,
:is(.nyehs-rm, .nyehs-rm-light) .tooltip .tooltiptext {
    background:    #0017c7 !important;
    color:         rgba(255, 255, 255, 0.92) !important;
    border:        none !important;
    border-radius: 20px !important;
    padding:       10px 18px !important;
    font-size:     0.8125rem !important;
    font-family:   inherit !important;
    line-height:   1.55 !important;
    box-shadow:    0 8px 28px rgba(0, 23, 199, 0.35) !important;
    text-align:    left !important;
}

/* Arrow (::after) — recolor and nudge 1px down to close the gap that
   border-radius creates between the triangle base and the pill edge */
:is(.nyehs-rm, .nyehs-rm-light) .rmform-note::after,
:is(.nyehs-rm, .nyehs-rm-light) .rmnote::after {
    border-bottom-color: #0017c7 !important;
    top:                 -9px !important;
}

/* Legacy child-element arrow (.rmprenote) */
:is(.nyehs-rm, .nyehs-rm-light) .rmprenote {
    border-bottom-color: #0017c7 !important;
    border-top-color:    #0017c7 !important;
}

/* ── Phone (intl-tel-input) ── */
:is(.nyehs-rm, .nyehs-rm-light) .iti {
    width: 100% !important;
}

:is(.nyehs-rm, .nyehs-rm-light) .iti__selected-flag {
    background:    var(--rm-input-bg) !important;
    border-radius: 999px 0 0 999px !important;
    padding-left:  12px !important;
}

:is(.nyehs-rm, .nyehs-rm-light) .iti--separate-dial-code .iti__selected-flag {
    border-right: 1px solid var(--rm-input-border) !important;
}

/* Country list dropdown — global (may be appended to body by intl-tel-input) */
.iti__country-list {
    background:    #0f172a !important;
    border:        1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 20px !important;
    box-shadow:    0 10px 36px rgba(0, 0, 0, 0.4) !important;
    padding:       6px 0 !important;
    overflow-y:    auto !important;
}

/* Scrollbar — same inset trick as textarea so track stays inside the radius */
.iti__country-list::-webkit-scrollbar {
    width: 5px !important;
}

.iti__country-list::-webkit-scrollbar-track {
    background:    transparent !important;
    margin-top:    16px !important;
    margin-bottom: 16px !important;
}

.iti__country-list::-webkit-scrollbar-thumb {
    background:    rgba(255, 255, 255, 0.2) !important;
    border-radius: 99px !important;
}

.iti__country-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35) !important;
}

.iti__country-list {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent !important;
}

/* Each country row */
.iti__country {
    padding:    9px 16px !important;
    color:      rgba(255, 255, 255, 0.78) !important;
    font-size:  0.9rem !important;
    transition: background 0.12s ease !important;
}

.iti__country.iti__highlight {
    background: rgba(13, 98, 255, 0.22) !important;
    color:      #fff !important;
}

.iti__country.iti__active {
    background: rgba(0, 23, 199, 0.28) !important;
    color:      #fff !important;
}

/* Dial code — muted */
.iti__dial-code {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Divider between preferred and standard countries */
.iti__divider {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin:     4px 16px !important;
    padding:    0 !important;
}

/* ── Google Places Autocomplete — appended to <body> by Maps JS, global ── */
.pac-container {
    background:    #0f172a !important;
    border:        1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 20px !important;
    box-shadow:    0 10px 36px rgba(0, 0, 0, 0.4) !important;
    padding:       6px 0 !important;
    margin-top:    6px !important;
    font-family:   inherit !important;
    overflow:      hidden !important;
}

/* Hide the "Powered by Google" logo bar */
.pac-container::after {
    display: none !important;
}

/* Each suggestion row */
.pac-item {
    padding:      9px 16px !important;
    border-top:   none !important;
    color:        rgba(255, 255, 255, 0.78) !important;
    font-size:    0.9rem !important;
    font-family:  inherit !important;
    line-height:  1.4 !important;
    cursor:       pointer !important;
    transition:   background 0.12s ease !important;
}

.pac-item:hover,
.pac-item-selected {
    background: rgba(13, 98, 255, 0.22) !important;
    color:      #fff !important;
}

/* Map-pin icon — swap grey for a muted blue tint */
.pac-icon {
    filter: invert(1) opacity(0.35) !important;
}

.pac-item:hover .pac-icon,
.pac-item-selected .pac-icon {
    filter: invert(1) opacity(0.6) !important;
}

/* Main address text */
.pac-item-query {
    color:     rgba(255, 255, 255, 0.92) !important;
    font-size: 0.9rem !important;
}

/* Matched (typed) portion — highlight in blue */
.pac-matched {
    color:       #6b9fff !important;
    font-weight: 600 !important;
}

/* Secondary text (city, country) */
.pac-secondary-text {
    color:     rgba(255, 255, 255, 0.4) !important;
    font-size: 0.8125rem !important;
}

/* ── jQuery UI Datepicker — appended to <body>, shared by all date inputs ── */

#ui-datepicker-div {
    background:    #0f172a !important;
    border:        1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 20px !important;
    box-shadow:    0 10px 36px rgba(0, 0, 0, 0.4) !important;
    font-family:   inherit !important;
    padding:       0 0 10px !important;
    overflow:      hidden !important;
    width:         auto !important;
    min-width:     270px !important;
    color:         rgba(255, 255, 255, 0.78) !important;
}

/* Header */
#ui-datepicker-div .ui-datepicker-header {
    background:    rgba(255, 255, 255, 0.05) !important;
    border:        none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0 !important;
    padding:       10px 40px !important;
    text-align:    center !important;
    position:      relative !important;
    color:         #fff !important;
}

/* Prev / Next nav buttons */
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
    position:      absolute !important;
    top:           50% !important;
    transform:     translateY(-50%) !important;
    width:         28px !important;
    height:        28px !important;
    border-radius: 7px !important;
    cursor:        pointer !important;
    display:       block !important;
    border:        none !important;
    background:    transparent !important;
    transition:    background 0.15s ease !important;
}

#ui-datepicker-div .ui-datepicker-prev { left: 6px !important; }
#ui-datepicker-div .ui-datepicker-next { right: 6px !important; }

#ui-datepicker-div .ui-datepicker-prev:hover,
#ui-datepicker-div .ui-datepicker-next:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Hide jQuery UI sprite spans; draw chevrons via ::before */
#ui-datepicker-div .ui-datepicker-prev span,
#ui-datepicker-div .ui-datepicker-next span {
    display: none !important;
}

#ui-datepicker-div .ui-datepicker-prev::before,
#ui-datepicker-div .ui-datepicker-next::before {
    content:             '' !important;
    display:             block !important;
    width:               12px !important;
    height:              12px !important;
    position:            absolute !important;
    top:                 50% !important;
    left:                50% !important;
    transform:           translate(-50%, -50%) !important;
    background-repeat:   no-repeat !important;
    background-position: center !important;
    background-size:     contain !important;
    opacity:             0.55 !important;
    transition:          opacity 0.15s ease !important;
}

#ui-datepicker-div .ui-datepicker-prev:hover::before,
#ui-datepicker-div .ui-datepicker-next:hover::before {
    opacity: 1 !important;
}

#ui-datepicker-div .ui-datepicker-prev::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") !important;
}

#ui-datepicker-div .ui-datepicker-next::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") !important;
}

/* Month / year title */
#ui-datepicker-div .ui-datepicker-title {
    display:     inline-flex !important;
    gap:         6px !important;
    align-items: center !important;
    margin:      0 !important;
    line-height: 1.4 !important;
}

/* Month / year select dropdowns */
#ui-datepicker-div .ui-datepicker-month,
#ui-datepicker-div .ui-datepicker-year {
    appearance:         none !important;
    -webkit-appearance: none !important;
    background:         rgba(255, 255, 255, 0.07) !important;
    border:             1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius:      6px !important;
    color:              #fff !important;
    font-size:          0.875rem !important;
    font-family:        inherit !important;
    font-weight:        600 !important;
    padding:            4px 8px !important;
    cursor:             pointer !important;
    outline:            none !important;
}

#ui-datepicker-div .ui-datepicker-month { min-width: 52px !important; }
#ui-datepicker-div .ui-datepicker-year  { min-width: 62px !important; }

/* Calendar table — fixed layout so 7 columns share width equally */
#ui-datepicker-div .ui-datepicker-calendar {
    width:           calc(100% - 16px) !important;
    table-layout:    fixed !important;
    border-collapse: collapse !important;
    margin:          0 8px !important;
    padding:         0 !important;
    border:          none !important;
    background:      transparent !important;
}

/* Day-of-week header cells */
#ui-datepicker-div .ui-datepicker-calendar thead th {
    font-size:      0.6875rem !important;
    font-weight:    700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color:          rgba(255, 255, 255, 0.3) !important;
    text-align:     center !important;
    padding:        8px 0 6px !important;
    border:         none !important;
    background:     transparent !important;
}

/* Day cells */
#ui-datepicker-div .ui-datepicker-calendar td {
    padding:    2px !important;
    border:     none !important;
    background: transparent !important;
    text-align: center !important;
}

/* Unselectable / other-month cells */
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-unselectable,
#ui-datepicker-div .ui-datepicker-calendar td.ui-state-disabled {
    opacity: 0.2 !important;
    cursor:  default !important;
}

/* Day links — block so table layout isn't disrupted by flex */
#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-default,
#ui-datepicker-div .ui-datepicker-calendar td span.ui-state-default {
    display:         block !important;
    width:           32px !important;
    height:          32px !important;
    line-height:     32px !important;
    text-align:      center !important;
    margin:          0 auto !important;
    border-radius:   8px !important;
    color:           rgba(255, 255, 255, 0.78) !important;
    font-size:       0.875rem !important;
    font-weight:     400 !important;
    background:      transparent !important;
    border:          none !important;
    text-decoration: none !important;
    padding:         0 !important;
    transition:      background 0.12s ease, color 0.12s ease !important;
}

#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-default:hover {
    background: rgba(13, 98, 255, 0.22) !important;
    color:      #fff !important;
}

/* Today */
#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-highlight {
    background:  rgba(13, 98, 255, 0.18) !important;
    color:       #6b9fff !important;
    font-weight: 600 !important;
    border:      none !important;
}

/* Selected day */
#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-active,
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-current-day a {
    background:  #0d41ff !important;
    color:       #fff !important;
    font-weight: 600 !important;
    border:      none !important;
}

/* Weekend columns — slightly muted */
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-week-end a.ui-state-default {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   LIGHT THEME — body-level dropdowns
   Stamped with data-nyehs-theme="light" by footer JS when opened from
   inside a .nyehs-rm-light wrapper.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Select2 panel ── */

.select2-dropdown[data-nyehs-theme="light"] {
    background:  #ffffff !important;
    border:      1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow:  0 10px 36px rgba(0, 0, 0, 0.12) !important;
}

.select2-dropdown[data-nyehs-theme="light"].select2-dropdown--below {
    border-top:  1px solid rgba(0, 0, 0, 0.1) !important;
}

.select2-dropdown[data-nyehs-theme="light"].select2-dropdown--above {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.select2-dropdown[data-nyehs-theme="light"] .select2-search__field {
    background:  rgba(0, 0, 0, 0.04) !important;
    border:      1px solid rgba(0, 0, 0, 0.12) !important;
    color:       #0f172a !important;
}

.select2-dropdown[data-nyehs-theme="light"] .select2-search__field:focus {
    border-color: rgba(13, 98, 255, 0.5) !important;
}

.select2-dropdown[data-nyehs-theme="light"] .select2-results__option {
    color: #374151 !important;
}

.select2-dropdown[data-nyehs-theme="light"] .select2-results__option--highlighted[aria-selected] {
    background-color: rgba(13, 98, 255, 0.08) !important;
    color:            #0d41ff !important;
}

.select2-dropdown[data-nyehs-theme="light"] .select2-results__option[aria-selected=true] {
    background-color: rgba(13, 98, 255, 0.12) !important;
    color:            #0d41ff !important;
}

.select2-dropdown[data-nyehs-theme="light"] .select2-results__options {
    scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
}

.select2-dropdown[data-nyehs-theme="light"] .select2-results__options::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.18);
}

.select2-dropdown[data-nyehs-theme="light"] .select2-results__options::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* ── intl-tel-input country list ── */

.iti__country-list[data-nyehs-theme="light"] {
    background:  #ffffff !important;
    border:      1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow:  0 10px 36px rgba(0, 0, 0, 0.12) !important;
    scrollbar-color: rgba(0, 0, 0, 0.18) transparent !important;
}

.iti__country-list[data-nyehs-theme="light"]::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.18) !important;
}

.iti__country-list[data-nyehs-theme="light"]::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3) !important;
}

.iti__country-list[data-nyehs-theme="light"] .iti__country {
    color: #374151 !important;
}

.iti__country-list[data-nyehs-theme="light"] .iti__country.iti__highlight {
    background: rgba(13, 98, 255, 0.08) !important;
    color:      #0d41ff !important;
}

.iti__country-list[data-nyehs-theme="light"] .iti__country.iti__active {
    background: rgba(13, 98, 255, 0.12) !important;
    color:      #0d41ff !important;
}

.iti__country-list[data-nyehs-theme="light"] .iti__dial-code {
    color: rgba(0, 0, 0, 0.4) !important;
}

.iti__country-list[data-nyehs-theme="light"] .iti__divider {
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* ── Google Places autocomplete ── */

.pac-container[data-nyehs-theme="light"] {
    background:  #ffffff !important;
    border:      1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow:  0 10px 36px rgba(0, 0, 0, 0.12) !important;
}

.pac-container[data-nyehs-theme="light"] .pac-item {
    color:      #374151 !important;
    border-top: none !important;
}

.pac-container[data-nyehs-theme="light"] .pac-item:hover,
.pac-container[data-nyehs-theme="light"] .pac-item-selected {
    background: rgba(13, 98, 255, 0.08) !important;
    color:      #0d41ff !important;
}

.pac-container[data-nyehs-theme="light"] .pac-icon {
    filter: none !important;
    opacity: 0.5 !important;
}

.pac-container[data-nyehs-theme="light"] .pac-item:hover .pac-icon,
.pac-container[data-nyehs-theme="light"] .pac-item-selected .pac-icon {
    filter: none !important;
    opacity: 0.7 !important;
}

.pac-container[data-nyehs-theme="light"] .pac-item-query {
    color: #0f172a !important;
}

.pac-container[data-nyehs-theme="light"] .pac-matched {
    color:       #0d41ff !important;
    font-weight: 600 !important;
}

.pac-container[data-nyehs-theme="light"] .pac-secondary-text {
    color: rgba(0, 0, 0, 0.4) !important;
}

/* ── jQuery UI Datepicker (light) ── */

#ui-datepicker-div[data-nyehs-theme="light"] {
    background: #ffffff !important;
    border:     1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.12) !important;
    color:      #374151 !important;
}

#ui-datepicker-div[data-nyehs-theme="light"] .ui-datepicker-header {
    background:    rgba(0, 0, 0, 0.03) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    color:         #0f172a !important;
}

#ui-datepicker-div[data-nyehs-theme="light"] .ui-datepicker-prev:hover,
#ui-datepicker-div[data-nyehs-theme="light"] .ui-datepicker-next:hover {
    background: rgba(0, 0, 0, 0.06) !important;
}

#ui-datepicker-div[data-nyehs-theme="light"] .ui-datepicker-prev::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") !important;
}

#ui-datepicker-div[data-nyehs-theme="light"] .ui-datepicker-next::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") !important;
}

#ui-datepicker-div[data-nyehs-theme="light"] .ui-datepicker-month,
#ui-datepicker-div[data-nyehs-theme="light"] .ui-datepicker-year {
    background: rgba(0, 0, 0, 0.04) !important;
    border:     1px solid rgba(0, 0, 0, 0.1) !important;
    color:      #0f172a !important;
}

#ui-datepicker-div[data-nyehs-theme="light"] .ui-datepicker-calendar thead th {
    color: rgba(0, 0, 0, 0.35) !important;
}

#ui-datepicker-div[data-nyehs-theme="light"] .ui-datepicker-calendar td a.ui-state-default,
#ui-datepicker-div[data-nyehs-theme="light"] .ui-datepicker-calendar td span.ui-state-default {
    color: #374151 !important;
}

#ui-datepicker-div[data-nyehs-theme="light"] .ui-datepicker-calendar td a.ui-state-default:hover {
    background: rgba(13, 98, 255, 0.08) !important;
    color:      #0d41ff !important;
}

#ui-datepicker-div[data-nyehs-theme="light"] .ui-datepicker-calendar td a.ui-state-highlight {
    background: rgba(13, 98, 255, 0.1) !important;
    color:      #0d41ff !important;
}

#ui-datepicker-div[data-nyehs-theme="light"] .ui-datepicker-calendar td a.ui-state-active,
#ui-datepicker-div[data-nyehs-theme="light"] .ui-datepicker-calendar td.ui-datepicker-current-day a {
    background: #0d41ff !important;
    color:      #fff !important;
}

#ui-datepicker-div[data-nyehs-theme="light"] .ui-datepicker-calendar td.ui-datepicker-week-end a.ui-state-default {
    color: rgba(0, 0, 0, 0.45) !important;
}

/* ── Password toggle button ── */
:is(.nyehs-rm, .nyehs-rm-light) .rmform-toggle-wrap {
    position: relative !important;
}

:is(.nyehs-rm, .nyehs-rm-light) .rm-togglePassword {
    position:    absolute !important;
    right:       14px !important;
    top:         50% !important;
    transform:   translateY(-50%) !important;
    background:  none !important;
    border:      none !important;
    cursor:      pointer !important;
    color:       var(--rm-placeholder) !important;
    padding:     0 !important;
    line-height: 1 !important;
    font-size:   1rem !important;
    transition:  color 0.18s ease !important;
}

:is(.nyehs-rm, .nyehs-rm-light) .rm-togglePassword:hover {
    color: var(--rm-input-color) !important;
}

/* ── Password strength bar ── */
:is(.nyehs-rm, .nyehs-rm-light) .pass-wrapper {
    margin-top: 6px !important;
}

:is(.nyehs-rm, .nyehs-rm-light) .pass-graybar {
    height:        4px !important;
    border-radius: 999px !important;
    background:    var(--rm-input-border) !important;
    overflow:      hidden !important;
    position:      relative !important;
}

/* .pass-colorbar: JS shifts a vertical sprite (rmpasswordstrength.jpg) via
   background-position to change color by strength level, and sets width%.
   Only override layout — never background-image or background-position. */
:is(.nyehs-rm, .nyehs-rm-light) .pass-colorbar {
    height:     100% !important;
    transition: width 0.3s ease !important;
}

/* ── Shared form field shake animation ──────────────────────────────────── */
@keyframes nyehs-field-shake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-5px); }
    40%      { transform: translateX(5px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(3px); }
}

/* ── Stripe payment panel ────────────────────────────────────────────────────
   Shown as the final payment step; lives inside .nyehs-rm / .nyehs-rm-light.
   Stripe's iframe is always light-mode (color-scheme: light only), so the
   Payment Element container always gets a white background regardless of theme.
   ─────────────────────────────────────────────────────────────────────────── */

/* Order summary header */
:is(.nyehs-rm, .nyehs-rm-light) .rm-stripe-panel-heading {
    padding-bottom: 20px !important;
    margin-bottom:  24px !important;
    border-bottom:  1px solid var(--rm-input-border) !important;
}

:is(.nyehs-rm, .nyehs-rm-light) .rm-stripe-panel-title {
    font-size:   1.0625rem !important;
    font-weight: 700 !important;
    color:       var(--rm-label-color) !important;
    margin:      0 0 14px !important;
    padding:     0 !important;
    line-height: 1.3 !important;
}

:is(.nyehs-rm, .nyehs-rm-light) .rm_stripe_order_details {
    width:           100% !important;
    border-collapse: collapse !important;
    font-size:       0.875rem !important;
}

:is(.nyehs-rm, .nyehs-rm-light) .rm_stripe_order_details th,
:is(.nyehs-rm, .nyehs-rm-light) .rm_stripe_order_details td {
    padding:        5px 0 !important;
    border:         none !important;
    text-align:     left !important;
    vertical-align: top !important;
    background:     transparent !important;
}

:is(.nyehs-rm, .nyehs-rm-light) .rm_stripe_order_details th {
    color:       var(--rm-placeholder) !important;
    font-weight: 600 !important;
    width:       28% !important;
    white-space: nowrap !important;
    padding-right: 12px !important;
}

:is(.nyehs-rm, .nyehs-rm-light) .rm_stripe_order_details td {
    color:       var(--rm-label-color) !important;
    font-weight: 400 !important;
}

:is(.nyehs-rm, .nyehs-rm-light) .rm_stripe_order_details .rm-sub-plan-price {
    color:     var(--rm-placeholder) !important;
    font-size: 0.875rem !important;
}

/* Form field groups (label + input rows) */
:is(.nyehs-rm, .nyehs-rm-light) .rm-payment-form-group {
    display:       flex !important;
    flex-direction: column !important;
    margin-bottom: 14px !important;
}

:is(.nyehs-rm, .nyehs-rm-light) .rm-payment-form-group > label {
    color:         var(--rm-label-color) !important;
    font-size:     0.8125rem !important;
    font-weight:   600 !important;
    margin-bottom: 5px !important;
    display:       block !important;
}

/* Pre-filled readonly inputs (Name / Email) */
:is(.nyehs-rm, .nyehs-rm-light) .rm-stripe-form-control {
    width:         100% !important;
    padding:       12px 16px !important;
    border:        1.5px solid var(--rm-input-border) !important;
    border-radius: 999px !important;
    font-size:     0.9375rem !important;
    font-family:   inherit !important;
    color:         var(--rm-input-color) !important;
    background:    var(--rm-input-bg) !important;
    outline:       none !important;
    box-sizing:    border-box !important;
    opacity:       0.6 !important;
    cursor:        default !important;
    transition:    border-color 0.2s ease !important;
}

/* Stripe Payment Element container — always white (iframe is light-only) */
:is(.nyehs-rm, .nyehs-rm-light) #rm-payment-element {
    border:        1.5px solid var(--rm-input-border) !important;
    border-radius: 16px !important;
    padding:       6px !important;
    background:    #ffffff !important;
    overflow:      hidden !important;
    transition:    border-color 0.2s ease, box-shadow 0.2s ease !important;
}

:is(.nyehs-rm, .nyehs-rm-light) #rm-payment-element.StripeElement--focus {
    border-color: rgba(13, 98, 255, 0.55) !important;
    box-shadow:   0 0 0 3px rgba(13, 98, 255, 0.12) !important;
}

:is(.nyehs-rm, .nyehs-rm-light) #rm-payment-element.StripeElement--invalid {
    border-color: #ef4444 !important;
    box-shadow:   0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

/* Submit / Proceed button — same pill-gradient CTA as the rest of the system */
:is(.nyehs-rm, .nyehs-rm-light) .rm-stripe-sub-proceed-btn {
    display:            inline-flex !important;
    align-items:        center !important;
    width:              100% !important;
    border:             none !important;
    padding:            0 !important;
    background:         none !important;
    cursor:             pointer !important;
    font-family:        inherit !important;
    margin-top:         8px !important;
    -webkit-appearance: none !important;
    appearance:         none !important;
    transition:         opacity 0.2s ease !important;
}

:is(.nyehs-rm, .nyehs-rm-light) .rm-stripe-sub-proceed-btn:disabled {
    cursor:  not-allowed !important;
    opacity: 0.6 !important;
}

:is(.nyehs-rm, .nyehs-rm-light) #rm-stripe-sub-button-text {
    flex:            1 !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             8px !important;
    height:          52px !important;
    padding:         0 28px !important;
    color:           #fff !important;
    font-size:       1rem !important;
    font-weight:     600 !important;
    font-family:     inherit !important;
    letter-spacing:  0.01em !important;
    background:      linear-gradient( 90deg, #0017c7 -25%, #0d41ff 125% ) !important;
    border-radius:   999px !important;
    transition:      opacity 0.2s ease !important;
}

:is(.nyehs-rm, .nyehs-rm-light) .rm-stripe-sub-proceed-btn:not(:disabled):hover #rm-stripe-sub-button-text {
    opacity: 0.88 !important;
}

/* Spinner shown during payment processing */
:is(.nyehs-rm, .nyehs-rm-light) .rm-stripe-btn-spinner:not(.rm-item-hidden) {
    display:       inline-block !important;
    width:         18px !important;
    height:        18px !important;
    border:        2.5px solid rgba(255, 255, 255, 0.35) !important;
    border-top-color: #fff !important;
    border-radius: 50% !important;
    flex-shrink:   0 !important;
    animation:     nyehs-spin 0.7s linear infinite !important;
}

@keyframes nyehs-spin {
    to { transform: rotate(360deg); }
}

/* Payment response message (errors / confirmation) */
:is(.nyehs-rm, .nyehs-rm-light) #rm-subscription-payment-response:not(.rm-item-hidden) {
    padding:       12px 16px !important;
    border-radius: 12px !important;
    font-size:     0.875rem !important;
    margin-bottom: 16px !important;
    background:    rgba(239, 68, 68, 0.07) !important;
    border-left:   3px solid #ef4444 !important;
    color:         #ef4444 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NYEHS Timeline
   ═══════════════════════════════════════════════════════════════════════════ */

.wp-block-group.nyehs-tl {
    position: relative;
    max-width: 1040px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 12px !important;
    padding-bottom: 24px !important;
}

/* Continuous vertical line */
.wp-block-group.nyehs-tl::before {
    content: '';
    position: absolute;
    left: calc(50% - 1px);
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        #0d41ff 5%,
        #0d41ff 95%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 0;
}

/* Each timeline row */
.nyehs-tl .wp-block-columns.nyehs-tl-row {
    position: relative;
    gap: 0 !important;
    --wp--style--block-gap: 0 !important;
    margin-bottom: 24px !important;
    align-items: flex-start !important;
}
.nyehs-tl .wp-block-columns.nyehs-tl-row:last-child {
    margin-bottom: 0 !important;
}

/* Dot on the centre line */
.nyehs-tl .nyehs-tl-row::before {
    content: '';
    position: absolute;
    left: 50%;
    top: var(--dot-top, 26px);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #0d41ff;
    box-shadow: 0 0 0 5px rgba(13, 98, 255, 0.14);
    z-index: 2;
    transform: translateX(-50%);
}

/* Column padding keeps cards off the centre line */
.nyehs-tl .nyehs-tl-col-left  { padding-right: 36px !important; }
.nyehs-tl .nyehs-tl-col-right { padding-left:  36px !important; }

/* ── Glass card ───────────────────────────────────────────── */
.nyehs-tl .wp-block-group.nyehs-tl-card {
    position: relative;
    background: var(--glass-white-bg, rgba(255, 255, 255, 0.72)) !important;
    -webkit-backdrop-filter: var(--glass-blur, blur(24px) saturate(160%));
    backdrop-filter: var(--glass-blur, blur(24px) saturate(160%));
    border: var(--glass-border, 1px solid rgba(255, 255, 255, 0.55)) !important;
    border-radius: 20px !important;
    box-shadow:
        0 0 0 0.5px rgba(0, 0, 0, 0.06),
        0 8px 32px rgba(0, 0, 0, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
    padding: 16px 20px 18px !important;
    border-radius: 14px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.nyehs-tl .wp-block-group.nyehs-tl-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 0 0.5px rgba(0, 0, 0, 0.07),
        0 24px 64px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

/* Notch — left card points right toward line */
.nyehs-tl .nyehs-tl-row--left .nyehs-tl-card::after {
    content: '';
    position: absolute;
    top: 22px;
    right: -7px;
    width: 13px;
    height: 13px;
    background: var(--glass-white-bg, rgba(255, 255, 255, 0.72));
    border-top:   1px solid rgba(255, 255, 255, 0.55);
    border-right: 1px solid rgba(255, 255, 255, 0.55);
    transform: rotate(45deg);
    border-radius: 2px;
}

/* Notch — right card points left toward line */
.nyehs-tl .nyehs-tl-row--right .nyehs-tl-card::after {
    content: '';
    position: absolute;
    top: 22px;
    left: -7px;
    width: 13px;
    height: 13px;
    background: var(--glass-white-bg, rgba(255, 255, 255, 0.72));
    border-bottom: 1px solid rgba(255, 255, 255, 0.55);
    border-left:   1px solid rgba(255, 255, 255, 0.55);
    transform: rotate(45deg);
    border-radius: 2px;
}

/* ── Typography ───────────────────────────────────────────── */
.nyehs-tl .wp-block-paragraph.nyehs-tl-date {
    display: inline-block !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #0d41ff !important;
    background: rgba(13, 98, 255, 0.09) !important;
    padding: 3px 11px !important;
    border-radius: 100px !important;
    margin-bottom: 8px !important;
}

/* Left-column dates align right so the pill sits close to the centre line */
.nyehs-tl .nyehs-tl-row--left .nyehs-tl-col-left {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    text-align: right !important;
}
.nyehs-tl .nyehs-tl-row--left .nyehs-tl-col-left .nyehs-tl-card {
    width: 100% !important;
    text-align: left !important;
}
.nyehs-tl .nyehs-tl-card .wp-block-heading {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-top: 0 !important;
    margin-bottom: 5px !important;
    line-height: 1.3 !important;
}
.nyehs-tl .nyehs-tl-card .wp-block-paragraph:not(.nyehs-tl-date) {
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: #52657f !important;
    margin: 0 !important;
}

/* ── GSAP-enhanced mode (.nyehs-tl-js added by JS) ──────────────────────── */

/* Line draws in: clip-path reveals top→bottom as --tl-n goes 0→100 */
.nyehs-tl-js.wp-block-group.nyehs-tl::before {
    clip-path: inset(0 0 calc(100% - var(--tl-n, 0) * 1%) 0);
}

/* Dot starts invisible; CSS transition bounces it in when GSAP adds .nyehs-tl-visible */
.nyehs-tl-js .nyehs-tl-row::before {
    transform: translateX(-50%) scale(0);
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.22s,
                background-color 0.3s ease,
                box-shadow 0.3s ease;
}
.nyehs-tl-js .nyehs-tl-row.nyehs-tl-visible::before {
    transform: translateX(-50%) scale(1);
}

/* Dot fills solid blue when the line front reaches it */
.nyehs-tl-js .nyehs-tl-row.nyehs-tl-dot-active::before {
    background: #0d41ff;
    box-shadow: 0 0 0 6px rgba(13, 98, 255, 0.20);
}

/* Disable CSS-only animation when GSAP is active (GSAP manages opacity) */
.nyehs-tl-js .nyehs-tl-row {
    animation: none !important;
}

/* CSS-only fallback for browsers without GSAP loaded */
@supports (animation-timeline: view()) {
    .nyehs-tl:not(.nyehs-tl-js) .nyehs-tl-row {
        animation: nyehs-tl-reveal linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 28%;
    }
    @keyframes nyehs-tl-reveal {
        from { opacity: 0; transform: translateY(18px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 781px) {
    .wp-block-group.nyehs-tl::before { left: 18px; }
    .nyehs-tl .nyehs-tl-row::before  { left: 18px; transform: translateX(-50%); }
    .nyehs-tl-js .nyehs-tl-row::before { transform: translateX(-50%) scale(0); }
    .nyehs-tl-js .nyehs-tl-row.nyehs-tl-visible::before { transform: translateX(-50%) scale(1); }

    .nyehs-tl .nyehs-tl-col-left,
    .nyehs-tl .nyehs-tl-col-right {
        padding-left:  36px !important;
        padding-right: 0 !important;
        width: 100% !important;
        flex-basis: 100% !important;
    }
    .nyehs-tl .nyehs-tl-col-empty { display: none !important; }

    /* Undo right-align on left columns at mobile — all content stacks left */
    .nyehs-tl .nyehs-tl-row--left .nyehs-tl-col-left {
        align-items: flex-start !important;
        text-align: left !important;
    }

    .nyehs-tl .nyehs-tl-row--left  .nyehs-tl-card::after,
    .nyehs-tl .nyehs-tl-row--right .nyehs-tl-card::after {
        right: auto;
        left: -7px;
        top: 20px;
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.55);
        border-left:   1px solid rgba(255, 255, 255, 0.55);
    }
}

/* ── Registration Magic login form ───────────────────────────────────────────
   Tighten the row gap and remove excess padding that ships with the plugin.
   ─────────────────────────────────────────────────────────────────────────── */

#rm_login_form_2 .rmrow,
form[id^="rm_login_form"] .rmrow {
    margin-bottom: 10px !important;
    padding:       0 !important;
}

#rm_login_form_2 fieldset,
form[id^="rm_login_form"] fieldset {
    padding: 0 !important;
    margin:  0 !important;
    border:  none !important;
}

#rm_login_form_2 .rmfield,
form[id^="rm_login_form"] .rmfield {
    padding-bottom: 4px !important;
    margin-bottom:  0 !important;
}

#rm_login_form_2 .rminput,
form[id^="rm_login_form"] .rminput {
    padding: 0 !important;
}

#rm_login_form_2 .buttonarea,
form[id^="rm_login_form"] .buttonarea {
    margin-top: 4px !important;
    padding:    0 !important;
}

#rm_login_form_2 .rm_forgot_pass,
form[id^="rm_login_form"] .rm_forgot_pass {
    margin-top:  10px !important;
    padding:     0 !important;
    text-align:  center !important;
}

#rm_login_form_2 .rm_forgot_pass a,
form[id^="rm_login_form"] .rm_forgot_pass a {
    font-size:       0.8125rem !important;
    color:           rgba(255, 255, 255, 0.5) !important;
    text-decoration: none !important;
    transition:      color 0.15s ease !important;
}

#rm_login_form_2 .rm_forgot_pass a:hover,
form[id^="rm_login_form"] .rm_forgot_pass a:hover {
    color:           rgba(255, 255, 255, 0.9) !important;
    text-decoration: underline !important;
}

#rm_login_form_2 .rm-login-remember,
form[id^="rm_login_form"] .rm-login-remember {
    display:     flex !important;
    align-items: center !important;
    gap:         8px !important;
}

#rm_login_form_2 .rm-login-remember label,
form[id^="rm_login_form"] .rm-login-remember label {
    display:     flex !important;
    align-items: center !important;
    margin:      0 !important;
    line-height: 1 !important;
}

/* ── EventPrime overflow-clip fixes ──────────────────────────────────────────
   .site-main-content has overflow:clip to preserve its border-radius, but that
   clips absolutely-positioned dropdowns that extend outside its bounds.
   Lift the clip on the specific page types that need it. */

/* Filter panel on events listing page */
body:has(#ep_event_search_form) .site-main-content.wp-block-group {
    overflow: visible !important;
}

/* Booking-form date-picker on single event page — the calendar can open upward
   into the hero area; overflow:clip would cut it off at the top edge. */
body.single-em_event .site-main-content.wp-block-group {
    overflow: visible !important;
}

/* ── wp:read-more with class nyehs-btn ───────────────────────────────────────
   PHP render_block filter wraps the <a> in div.wp-block-button.nyehs-btn and
   appends the .nyehs-btn-disc span — same structure as a wp:button block.
   These two rules extend the button system to the read-more link element.
   ─────────────────────────────────────────────────────────────────────────── */
.wp-block-button.nyehs-btn a.wp-block-read-more {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    padding:         0 30px !important;
    height:          50px !important;
    color:           #fff !important;
    line-height:     1 !important;
    white-space:     nowrap !important;
    font-family:     var(--wp--preset--font-family--lato, sans-serif) !important;
    font-weight:     700 !important;
    font-size:       1rem !important;
    letter-spacing:  0.05em !important;
    background:      linear-gradient(90deg, #0017c7 -25%, var(--wp--preset--color--accent, #0d41ff) 125%) !important;
    border-radius:   999px !important;
    border:          none !important;
    box-shadow:      none !important;
    text-decoration: none !important;
    transition:      border-radius 0.3s ease !important;
}

.wp-block-button.nyehs-btn:hover a.wp-block-read-more {
    border-top-right-radius:    0 !important;
    border-bottom-right-radius: 0 !important;
    color:                      #fff !important;
}

/* ── Press card hover shadow ─────────────────────────────────────────────────*/
.press-card {
    transition: box-shadow 0.25s ease !important;
}
.press-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 55, 0.1) !important;
}

/* ── Press card featured image ───────────────────────────────────────────────
   The figure's aspect-ratio alone doesn't constrain its width inside a flex
   column — without width:100% it expands to the image's natural pixel width
   and overflows the card. overflow:hidden clips it and rounds the top corners
   to match the card's border-radius. object-fit:cover (overrides the
   block-generated object-fit:fill) prevents distortion.
   ─────────────────────────────────────────────────────────────────────────── */
.press-card .wp-block-post-featured-image {
    width:         100% !important;
    overflow:      hidden !important;
    flex-shrink:   0 !important;
    border-radius: 16px 16px 0 0 !important;
}
.press-card .wp-block-post-featured-image img {
    width:        100% !important;
    height:       100% !important;
    object-fit:   cover !important;
    display:      block !important;
}

/* ── Press card "Read Article" link — animated chevron ───────────────────────
   Uses a CSS-mask chevron so it inherits the link's current colour automatically.
   Remove the literal → from the block's text content to avoid doubling up.
   ─────────────────────────────────────────────────────────────────────────── */
.press-card a.wp-block-read-more:not(.nyehs-btn) {
    display:         inline-flex !important;
    align-items:     center !important;
    gap:             5px !important;
    text-decoration: none !important;
}

.press-card a.wp-block-read-more:not(.nyehs-btn)::after {
    content:          '' !important;
    flex-shrink:      0 !important;
    width:            15px !important;
    height:           15px !important;
    background-color: currentColor !important;
    -webkit-mask:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask:             url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center / contain no-repeat !important;
    transform:        translateX(0) !important;
    transition:       transform 0.2s ease !important;
}

.press-card a.wp-block-read-more:not(.nyehs-btn):hover::after {
    transform: rotate(-45deg) !important;
}

/* ── Arrow button utility (reusable version of contact-form submit style) ── */

.nyehs-btn-arrow {
    display:     inline-flex;
    align-items: center;
    border:      none;
    padding:     0;
    background:  none;
    cursor:      pointer;
    font-family: inherit;
    -webkit-appearance: none;
    appearance:  none;
    text-decoration: none;
}

.nyehs-btn-arrow__label {
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         0 28px;
    height:          52px;
    color:           #fff;
    font-size:       1rem;
    font-weight:     600;
    font-family:     inherit;
    letter-spacing:  0.01em;
    white-space:     nowrap;
    background:      var( --wp--preset--color--accent-3, #0017c7 );
    border-radius:   999px;
    transition:      border-radius 0.3s ease, opacity 0.2s ease;
}

.nyehs-btn-arrow__icon {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           52px;
    height:          52px;
    flex-shrink:     0;
    border-radius:   999px;
    background:      var( --wp--preset--color--accent-3, #0017c7 );
    transition:      border-radius 0.3s ease, opacity 0.2s ease;
}

.nyehs-btn-arrow__icon svg {
    width:       1em;
    height:      1em;
    color:       #fff;
    transform:   rotate(0deg);
    transition:  transform 0.3s ease-in-out;
    flex-shrink: 0;
}

.nyehs-btn-arrow:hover .nyehs-btn-arrow__label {
    border-top-right-radius:    0;
    border-bottom-right-radius: 0;
}

.nyehs-btn-arrow:hover .nyehs-btn-arrow__icon {
    border-top-left-radius:    0;
    border-bottom-left-radius: 0;
}

.nyehs-btn-arrow:hover .nyehs-btn-arrow__icon svg {
    transform: rotate(-45deg);
}

/* ── Gradient border variant ────────────────────────────────────────────── */

@property --nyehs-ga {
    syntax: '<angle>';
    initial-value: 135deg;
    inherits: false;
}

@keyframes nyehs-gradient-spin {
    to { --nyehs-ga: 495deg; }
}

.nyehs-btn-arrow.nyehs-gradient-btn .nyehs-btn-arrow__label,
.nyehs-btn-arrow.nyehs-gradient-btn .nyehs-btn-arrow__icon {
    background:
        linear-gradient(
            var( --nyehs-gradient-btn-bg, #fff ),
            var( --nyehs-gradient-btn-bg, #fff )
        ) padding-box,
        linear-gradient(
            var( --nyehs-ga ),
            var( --wp--preset--color--accent,   #0d41ff ),
            var( --wp--preset--color--accent-2, #000a73 ),
            var( --wp--preset--color--accent,   #0d41ff )
        ) border-box;
    border: 2px solid transparent;
    color: var( --wp--preset--color--accent, #0d41ff );
    animation: nyehs-gradient-spin 3s linear infinite;
}

.nyehs-btn-arrow.nyehs-gradient-btn .nyehs-btn-arrow__icon svg {
    color: var( --wp--preset--color--accent, #0d41ff );
}

/* ── Gradient border — single-class utility (use on any button or link) ── */

.nyehs-gradient-outline {
    display:         inline-flex;
    align-items:     center;
    gap:             10px;
    padding:         0 24px;
    height:          52px;
    border-radius:   999px;
    border:          2px solid transparent;
    background:
        linear-gradient(
            var( --nyehs-gradient-btn-bg, #fff ),
            var( --nyehs-gradient-btn-bg, #fff )
        ) padding-box,
        linear-gradient(
            var( --nyehs-ga ),
            var( --wp--preset--color--accent,   #0d41ff ),
            var( --wp--preset--color--accent-2, #000a73 ),
            var( --wp--preset--color--accent,   #0d41ff )
        ) border-box;
    animation:       nyehs-gradient-spin 3s linear infinite;
    color:           var( --wp--preset--color--accent, #0d41ff );
    font-size:       1rem;
    font-weight:     600;
    font-family:     inherit;
    letter-spacing:  0.01em;
    white-space:     nowrap;
    text-decoration: none;
    cursor:          pointer;
    -webkit-appearance: none;
    appearance:      none;
}

.nyehs-gradient-outline::after {
    content:                '';
    display:                block;
    width:                  14px;
    height:                 14px;
    flex-shrink:            0;
    background-color:       currentColor;
    -webkit-mask-image:     url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
    mask-image:             url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
    -webkit-mask-size:      contain;
    mask-size:              contain;
    -webkit-mask-repeat:    no-repeat;
    mask-repeat:            no-repeat;
    -webkit-mask-position:  center;
    mask-position:          center;
    transition:             transform 0.3s ease-in-out;
}

.nyehs-gradient-outline:hover::after {
    transform: rotate( -45deg );
}

/* ── Social buttons ──────────────────────────────────────────────────────────
 * Available as Block Styles on the core Button block (select in the sidebar),
 * or as standalone classes: <a class="social-btn social-btn--facebook">...</a>
 * ─────────────────────────────────────────────────────────────────────────── */

/* Make block-style button links flex so icon + text sit inline */
.wp-block-button.is-style-facebook  .wp-block-button__link,
.wp-block-button.is-style-instagram .wp-block-button__link,
.wp-block-button.is-style-linkedin  .wp-block-button__link,
.wp-block-button.is-style-youtube   .wp-block-button__link,
.wp-block-button.is-style-x         .wp-block-button__link,
.wp-block-button.is-style-whatsapp  .wp-block-button__link {
    display:     inline-flex !important;
    align-items: center      !important;
    gap:         9px         !important;
    transition:  filter 0.15s, transform 0.15s;
}

/* Shared icon pseudo-element */
.wp-block-button.is-style-facebook  .wp-block-button__link::before,
.wp-block-button.is-style-instagram .wp-block-button__link::before,
.wp-block-button.is-style-linkedin  .wp-block-button__link::before,
.wp-block-button.is-style-youtube   .wp-block-button__link::before,
.wp-block-button.is-style-x         .wp-block-button__link::before,
.wp-block-button.is-style-whatsapp  .wp-block-button__link::before,
.social-btn::before {
    content:               '';
    display:               block;
    width:                 16px;
    height:                16px;
    flex-shrink:           0;
    background-color:      #fff;
    -webkit-mask-size:     contain;
    -webkit-mask-repeat:   no-repeat;
    -webkit-mask-position: center;
    mask-size:             contain;
    mask-repeat:           no-repeat;
    mask-position:         center;
}

/* Standalone class base */
.social-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             9px;
    padding:         10px 20px;
    border-radius:   6px;
    font-size:       0.9375rem;
    font-weight:     600;
    color:           #fff !important;
    text-decoration: none;
    border:          none;
    cursor:          pointer;
    transition:      filter 0.15s, transform 0.15s;
    line-height:     1.3;
}

/* Hover / active for all */
.wp-block-button.is-style-facebook  .wp-block-button__link:hover,
.wp-block-button.is-style-instagram .wp-block-button__link:hover,
.wp-block-button.is-style-linkedin  .wp-block-button__link:hover,
.wp-block-button.is-style-youtube   .wp-block-button__link:hover,
.wp-block-button.is-style-x         .wp-block-button__link:hover,
.wp-block-button.is-style-whatsapp  .wp-block-button__link:hover,
.social-btn:hover {
    filter:    brightness(1.12);
    transform: translateY(-1px);
}
.wp-block-button.is-style-facebook  .wp-block-button__link:active,
.wp-block-button.is-style-instagram .wp-block-button__link:active,
.wp-block-button.is-style-linkedin  .wp-block-button__link:active,
.wp-block-button.is-style-youtube   .wp-block-button__link:active,
.wp-block-button.is-style-x         .wp-block-button__link:active,
.wp-block-button.is-style-whatsapp  .wp-block-button__link:active,
.social-btn:active {
    filter:    brightness(0.95);
    transform: translateY(0);
}

/* ── Facebook ── */
.wp-block-button.is-style-facebook .wp-block-button__link,
.social-btn--facebook {
    background: #1877f2 !important;
    color:      #fff    !important;
}
.wp-block-button.is-style-facebook .wp-block-button__link::before,
.social-btn--facebook::before {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/></svg>");
    mask-image:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/></svg>");
}

/* ── Instagram ── */
.wp-block-button.is-style-instagram .wp-block-button__link,
.social-btn--instagram {
    background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888) !important;
    color:      #fff !important;
}
.wp-block-button.is-style-instagram .wp-block-button__link::before,
.social-btn--instagram::before {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='2' width='20' height='20' rx='5'/><path d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/><line x1='17.5' y1='6.5' x2='17.51' y2='6.5'/></svg>");
    mask-image:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='2' width='20' height='20' rx='5'/><path d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/><line x1='17.5' y1='6.5' x2='17.51' y2='6.5'/></svg>");
}

/* ── LinkedIn ── */
.wp-block-button.is-style-linkedin .wp-block-button__link,
.social-btn--linkedin {
    background: #0a66c2 !important;
    color:      #fff    !important;
}
.wp-block-button.is-style-linkedin .wp-block-button__link::before,
.social-btn--linkedin::before {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z'/><rect x='2' y='9' width='4' height='12'/><circle cx='4' cy='4' r='2'/></svg>");
    mask-image:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z'/><rect x='2' y='9' width='4' height='12'/><circle cx='4' cy='4' r='2'/></svg>");
}

/* ── YouTube ── */
.wp-block-button.is-style-youtube .wp-block-button__link,
.social-btn--youtube {
    background: #ff0000 !important;
    color:      #fff    !important;
}
.wp-block-button.is-style-youtube .wp-block-button__link::before,
.social-btn--youtube::before {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M22.54 6.42a2.78 2.78 0 0 0-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46A2.78 2.78 0 0 0 1.46 6.42 29 29 0 0 0 1 12a29 29 0 0 0 .46 5.58 2.78 2.78 0 0 0 1.95 1.95C5.12 20 12 20 12 20s6.88 0 8.59-.47a2.78 2.78 0 0 0 1.95-1.95A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58zm-11.3 7.13V10.45l4.74 2.27-4.74 2.83z'/></svg>");
    mask-image:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M22.54 6.42a2.78 2.78 0 0 0-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46A2.78 2.78 0 0 0 1.46 6.42 29 29 0 0 0 1 12a29 29 0 0 0 .46 5.58 2.78 2.78 0 0 0 1.95 1.95C5.12 20 12 20 12 20s6.88 0 8.59-.47a2.78 2.78 0 0 0 1.95-1.95A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58zm-11.3 7.13V10.45l4.74 2.27-4.74 2.83z'/></svg>");
}

/* ── X / Twitter ── */
.wp-block-button.is-style-x .wp-block-button__link,
.social-btn--x {
    background: #000 !important;
    color:      #fff !important;
}
.wp-block-button.is-style-x .wp-block-button__link::before,
.social-btn--x::before {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.74l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/></svg>");
    mask-image:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.74l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/></svg>");
}

/* ── WhatsApp ── */
.wp-block-button.is-style-whatsapp .wp-block-button__link,
.social-btn--whatsapp {
    background: #25d366 !important;
    color:      #fff    !important;
}
.wp-block-button.is-style-whatsapp .wp-block-button__link::before,
.social-btn--whatsapp::before {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z'/></svg>");
    mask-image:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z'/></svg>");
}