/* ============================================================
   OVZA Header — AI Studio visual + Plugin content
   Tight spacing, bigger text, 30px flags, no redundant headings
   ============================================================ */

:root{
  --primary:#00B884;
  --primary-dark:#00966b;
  --text-main:#1F2937;
  --text-muted:#6B7280;
  --border:#E5E7EB;
  --accent-dark:#0f172a;
  --ovza-green:#00B884;
  --ovza-green-dark:#00966b;
  --ovza-white:#ffffff;
  --ovza-container:1200px;
  --nav-height:85px;
  --ovza-nav-height:85px;
  --font:'Poppins',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --transition-smooth:all 0.3s cubic-bezier(0.16,1,0.3,1);
}

/* Apply Poppins via inheritance — no !important so the track-order
   shortcode (and any other nested plugin) keeps its own metrics and
   doesn't get inflated by Poppins' line-height. */
.ovza-nav,
.ovza-nav__drawer{
  font-family:var(--font);
}

.ovza-nav__link,
.ovza-nav__cta,
.ovza-nav__mega,
.ovza-nav__mega *,
.ovza-nav__drawer .ovza-accordion,
.ovza-nav__drawer .ovza-accordion *,
.ovza-nav__drawer .ovza-mobile-partner__link,
.ovza-nav__drawer .ovza-mobile-about__link,
.ovza-mobile-card,
.ovza-mobile-card *,
.ovza-mobile-country-list,
.ovza-mobile-country-list *{
  font-family:var(--font);
}

.ovza-nav *{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

.ovza-nav a{
  color:inherit;
  text-decoration:none;
}

/* === HEADER SHELL === */
.ovza-nav{
  width:100vw;
  height:var(--nav-height);
  overflow:visible;
  z-index:9000;
  transition:var(--transition-smooth);
}

/* === CONTENT SPACING ===
   This plugin no longer pushes page content down for any preset.
   The host theme is responsible for reserving space (or not) above
   the first section. If you need the first section to start below
   the sticky/transparent header, apply this in your theme or
   Elementor section:
       .your-hero-section { padding-top: var(--ovza-nav-height); }
   The variable --ovza-nav-height is still kept up to date by the
   plugin's JS so that custom rules like the one above stay accurate. */

/* Lock background scroll while the mobile drawer is open. Class is
   toggled from JS so we don't clobber any other body.style.overflow. */
body.ovza-drawer-open{
  overflow:hidden;
}

/* While the mobile drawer is open, hide third-party floating widgets
   that ignore stacking context. Includes the specific Trustindex
   certificate widget and 3CX Live Chat installed on ovza.com, plus
   generic selectors for other common chat/trust providers. */
body.ovza-drawer-open .ti-widget,
body.ovza-drawer-open [data-trustindex-widget],
body.ovza-drawer-open call-us,
body.ovza-drawer-open call-us-selector,
body.ovza-drawer-open [phonesystem-url],
body.ovza-drawer-open #wp-live-chat-by-3CX,
body.ovza-drawer-open .cx-widget,
body.ovza-drawer-open #cx-widget,
body.ovza-drawer-open .cx-webchat,
body.ovza-drawer-open .cx-webchat-chat-button,
body.ovza-drawer-open [class*="cx-chat"],
body.ovza-drawer-open [id*="cx-chat"],
body.ovza-drawer-open [class*="cx_chat"],
body.ovza-drawer-open [id*="cx_chat"],
body.ovza-drawer-open .trustpilot-widget,
body.ovza-drawer-open [class*="trust-badge"],
body.ovza-drawer-open [id*="trust-badge"],
body.ovza-drawer-open [class*="trustbadge"],
body.ovza-drawer-open [id*="trustbadge"],
body.ovza-drawer-open .lc-1u9hzfe,
body.ovza-drawer-open #livechat-compact-container,
body.ovza-drawer-open #livechat-eye-catcher,
body.ovza-drawer-open #chat-widget-container,
body.ovza-drawer-open .intercom-lightweight-app,
body.ovza-drawer-open #intercom-container{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* Filled: static white bar.
   Borders rendered as inset box-shadow so they don't add layout height —
   keeps the actual outer height at exactly --nav-height (85px) and
   prevents a CLS shift when the JS resync runs on load. */
.ovza-nav--filled{
  position:relative;
  width:100vw;
  margin-left:calc(-50vw + 50%);
  background:var(--ovza-white);
  box-shadow:inset 0 1px 0 var(--border), inset 0 -1px 0 var(--border);
}

/* Transparent: overlays hero, scrolls away with page */
.ovza-nav--transparent{
  position:absolute;
  top:0;
  left:0;
  background:transparent;
  border:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* Sticky: stays fixed at top on scroll */
.ovza-nav--sticky{
  position:fixed;
  top:0;
  left:0;
  width:100%;
}

/* Not sticky: scrolls with page */
.ovza-nav--not-sticky{
  position:relative;
  top:auto;
  left:auto;
}

/* Scrolled state: solid white bg regardless of initial mode.
   NOTE: backdrop-filter intentionally NOT applied — it creates a stacking
   context that traps absolutely positioned descendants like the
   [ovza_track_button] popup behind page sections.
   Bottom hairline rendered as inset shadow (no layout height added). */
.ovza-nav.is-scrolled{
  background-color:#ffffff !important;
  box-shadow:0 4px 20px rgba(0,0,0,0.05), inset 0 -1px 0 var(--border);
}

/* Shadow on scroll (when enabled) */
.ovza-nav--shadow-scroll.is-scrolled{
  box-shadow:0 10px 30px rgba(21,24,35,0.08);
}

/* === BAR === */
.ovza-nav__bar{
  position:relative;
  height:100%;
  max-width:var(--ovza-container);
  margin:0 auto;
  padding:0 2rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  overflow:visible;
}

/* === LOGO === */
.ovza-nav__left{
  display:flex;
  align-items:center;
  gap:34px;
  min-width:0;
  flex:1;
}

.ovza-nav__logo{
  flex:0 0 auto;
  display:flex;
  align-items:center;
}

.ovza-nav__logo img{
  width:130px;
  height:auto;
  object-fit:contain;
  transition:filter 0.3s ease;
}

.ovza-nav:not(.is-scrolled):not(.ovza-nav--filled) .ovza-nav__logo img{
  filter:brightness(0) invert(1);
}

.ovza-nav.is-scrolled .ovza-nav__logo img,
.ovza-nav--filled .ovza-nav__logo img{
  filter:none;
}

/* === DESKTOP NAV === */
.ovza-nav__desktop{
  display:flex;
  align-items:center;
  gap:4px;
  position:static;
}

.ovza-nav__item{
  position:static;
}

/* Invisible hover bridge: padding extends the trigger's hover area
   downward past the bar so mouse moves from the link to the mega panel
   never cross a "dead zone". Negative margin keeps layout unchanged. */
.ovza-nav__item--has-mega{
  position:static;
  padding-bottom:50px;
  margin-bottom:-50px;
}

/* === NAV LINKS === */
.ovza-nav__link{
  height:40px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0.5rem 1rem;
  margin:0 0.25rem;
  border-radius:6px;
  font-size:0.95rem;
  font-weight:500;
  transition:all 0.2s;
  white-space:nowrap;
  position:relative;
  z-index:1010;
  cursor:pointer;
  color:#fff;
  background:transparent;
  border:none;
  font-family:var(--font);
}

.ovza-nav.is-scrolled .ovza-nav__link,
.ovza-nav--filled .ovza-nav__link{
  color:var(--text-main);
}

.ovza-nav:not(.is-scrolled):not(.ovza-nav--filled) .ovza-nav__link:hover{
  background-color:rgba(255,255,255,0.15);
}

.ovza-nav.is-scrolled .ovza-nav__link:hover,
.ovza-nav--filled .ovza-nav__link:hover,
.ovza-nav.is-scrolled .ovza-nav__item:hover > .ovza-nav__link,
.ovza-nav--filled .ovza-nav__item:hover > .ovza-nav__link{
  background-color:#ECFDF5;
  color:var(--primary-dark);
}

.ovza-nav__caret{
  display:inline-block;
  width:0;
  height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:5px solid currentColor;
  transition:transform 0.2s;
  margin-left:2px;
  vertical-align:middle;
}

.ovza-nav__item:hover .ovza-nav__caret,
.ovza-nav__item:focus-within .ovza-nav__caret,
.ovza-nav__item.is-open .ovza-nav__caret{
  transform:rotate(180deg);
}

/* Hide any SVG inside caret (fallback) */
.ovza-nav__caret svg{
  display:none;
}

/* === CTA BUTTONS ===
   Sized to pair with the [ovza_track_button] shortcode (which uses
   padding:8px 8px 8px 10px; font-size:13px; font-weight:600; gap:6px).
   Same radius/padding/text-size so the two buttons read as a pair. */
.ovza-nav__cta{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px 12px;
  border-radius:7px;
  background:var(--ovza-green);
  color:#fff;
  font-size:13px;
  font-weight:600;
  line-height:1.5;
  max-height:39px;
  text-decoration:none;
  white-space:nowrap;
  transition:transform 0.2s, background-color 0.2s, color 0.2s;
}

/* Force white text on every hover/focus/active state — theme or
   Elementor anchor rules can set color:#000 on :hover and bleed in. */
.ovza-nav__cta:hover,
.ovza-nav__cta:focus,
.ovza-nav__cta:active,
.ovza-nav__cta:visited,
a.ovza-nav__cta:hover,
a.ovza-nav__cta:focus,
a.ovza-nav__cta:active,
a.ovza-nav__cta:visited{
  background-color:var(--ovza-green-dark);
  color:#fff;
  transform:translateY(-1px);
}

.ovza-nav:not(.is-scrolled):not(.ovza-nav--filled) .ovza-nav__cta{
  background-color:var(--ovza-green);
  border:none;
  color:#fff;
}

.ovza-nav:not(.is-scrolled):not(.ovza-nav--filled) .ovza-nav__cta:hover{
  background-color:var(--ovza-green-dark);
  border-color:var(--ovza-green-dark);
}

/* === DESKTOP CTA: NO BACKGROUND, GREEN ON HOVER ===
   Contact button on desktop has no background in both transparent and
   filled (incl. scrolled) modes. On hover: green background + white text.
   Mobile drawer CTA keeps its solid green styling (defined below). */
.ovza-nav__cta--desktop,
.ovza-nav:not(.is-scrolled):not(.ovza-nav--filled) .ovza-nav__cta--desktop,
.ovza-nav.is-scrolled .ovza-nav__cta--desktop,
.ovza-nav--filled .ovza-nav__cta--desktop{
  background-color:transparent;
  background:transparent;
  border:none;
}

/* Text color follows header mode: white on transparent, dark on filled/scrolled */
.ovza-nav:not(.is-scrolled):not(.ovza-nav--filled) .ovza-nav__cta--desktop{
  color:#fff;
}

/* Filled / scrolled state: text follows the nav-link color so the
   Contact CTA reads as a normal link in light mode. !important + the
   :link/:visited variants are required to beat the earlier base rule
   `a.ovza-nav__cta:visited{color:#fff}` (specificity 0,2,1) for any
   visitor who's already been to the contact page. Without this, the
   button reads white-on-white in filled mode. */
.ovza-nav.is-scrolled .ovza-nav__cta--desktop,
.ovza-nav.is-scrolled .ovza-nav__cta--desktop:link,
.ovza-nav.is-scrolled .ovza-nav__cta--desktop:visited,
.ovza-nav.is-scrolled a.ovza-nav__cta--desktop,
.ovza-nav.is-scrolled a.ovza-nav__cta--desktop:link,
.ovza-nav.is-scrolled a.ovza-nav__cta--desktop:visited,
.ovza-nav--filled .ovza-nav__cta--desktop,
.ovza-nav--filled .ovza-nav__cta--desktop:link,
.ovza-nav--filled .ovza-nav__cta--desktop:visited,
.ovza-nav--filled a.ovza-nav__cta--desktop,
.ovza-nav--filled a.ovza-nav__cta--desktop:link,
.ovza-nav--filled a.ovza-nav__cta--desktop:visited{
  color:var(--text-main) !important;
}

/* Hover: green bg + white text — applies in every mode.
   color/background marked !important so the hover state wins over
   theme rules like `.l-subheader-cell a:hover{color:#000}` that ship
   in many WPBakery themes (Uncode, Salient, etc.). Without this,
   sticky/scrolled state would render dark text on the green hover. */
.ovza-nav__cta--desktop:hover,
.ovza-nav__cta--desktop:focus,
.ovza-nav__cta--desktop:active,
a.ovza-nav__cta--desktop:hover,
a.ovza-nav__cta--desktop:focus,
a.ovza-nav__cta--desktop:active,
.ovza-nav:not(.is-scrolled):not(.ovza-nav--filled) .ovza-nav__cta--desktop:hover,
.ovza-nav:not(.is-scrolled):not(.ovza-nav--filled) .ovza-nav__cta--desktop:focus,
.ovza-nav.is-scrolled .ovza-nav__cta--desktop:hover,
.ovza-nav.is-scrolled .ovza-nav__cta--desktop:focus,
.ovza-nav.is-scrolled a.ovza-nav__cta--desktop:hover,
.ovza-nav.is-scrolled a.ovza-nav__cta--desktop:focus,
.ovza-nav--filled .ovza-nav__cta--desktop:hover,
.ovza-nav--filled .ovza-nav__cta--desktop:focus,
.ovza-nav--filled a.ovza-nav__cta--desktop:hover,
.ovza-nav--filled a.ovza-nav__cta--desktop:focus{
  background-color:var(--ovza-green) !important;
  background:var(--ovza-green) !important;
  color:#fff !important;
}

/* Legacy "outline transparent" toggle is now redundant for the desktop
   CTA — the base rules above already produce a no-background button.
   Kept as a no-op to preserve any existing class on the wrapper. */

/* Tracker button wrapper — provides a positioning context for the
   shortcode's popup AND normalises inherited typography so the button
   matches its standalone height (~39px). Without this, the header bar's
   line-height bleeds into the button's flex children and inflates it. */
/* Filled + scrolled: Contact CTA stays solid green.
   The tracker-wrap button gets its own styles below. */

.ovza-nav__tracker-wrap .ovza-nav__cta,
.ovza-nav__tracker-wrap .ovza-nav__cta:visited{
  background:transparent;
  border:none;
  color:#000;
}

.ovza-nav__tracker-wrap .ovza-nav__cta:hover,
.ovza-nav__tracker-wrap .ovza-nav__cta:focus,
.ovza-nav__tracker-wrap .ovza-nav__cta:active{
  background-color:var(--ovza-green-dark);
  color:#fff;
}

.ovza-nav__tracker-wrap{
  position:relative;
  z-index:1200;
  line-height:1.5;
}

/* The track-order button is a flex container (their CSS uses `gap`).
   When our header inherits a tall line-height, the button's icon/text
   wrapper stretches and the whole button balloons. Pin the inherited
   line-height inside the wrapper without touching the button's own
   declared rules. */
.ovza-nav__tracker-wrap .ovza-track-trigger,
.ovza-nav__tracker-wrap .ovza-track-trigger *{
  line-height:1.5;
}

/* Defensive cap on any icon (svg/img/icon-font) inside the track
   button — keeps it within the text x-height so the button height is
   driven by font metrics, not by an oversized child element. */
.ovza-nav__tracker-wrap .ovza-track-trigger > svg,
.ovza-nav__tracker-wrap .ovza-track-trigger > img,
.ovza-nav__tracker-wrap .ovza-track-trigger > i,
.ovza-nav__tracker-wrap .ovza-track-trigger > .icon{
  width:16px;
  height:16px;
  max-width:16px;
  max-height:16px;
  flex-shrink:0;
}

/* === MEGA MENU === */
.ovza-nav__mega{
  position:absolute;
  top:100%;
  left:0;
  width:100%;
  transform:translateY(10px);
  background-color:#ffffff;
  border-radius:0 0 12px 12px;
  box-shadow:0 20px 25px -5px rgba(0,0,0,0.1);
  padding:1.5rem 2rem;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:var(--transition-smooth);
  z-index:1005;
  color:var(--text-main);
  text-align:left;
  border-top:1px solid var(--border);
  max-height:calc(100vh - var(--nav-height) - 20px);
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}

.ovza-nav__mega::-webkit-scrollbar{
  width:6px;
}

.ovza-nav__mega::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,0.1);
  border-radius:6px;
}

.ovza-nav__mega::-webkit-scrollbar-track{
  background:transparent;
}

.ovza-nav__item--has-mega:hover > .ovza-nav__mega,
.ovza-nav__item--has-mega:focus-within > .ovza-nav__mega,
.ovza-nav__item--has-mega.is-open > .ovza-nav__mega{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}

.ovza-nav-int{
  max-width:1040px;
  margin:0 auto;
}

/* === DIVIDER === */
.ovza-mega__divider{
  border-top:1px solid var(--border);
  margin-top:1rem;
  padding-top:1rem;
}

/* === CARDS === */
.ovza-hcards{
  display:grid;
  gap:0.75rem;
  min-height:0;
}

.ovza-hcards--3{
  grid-template-columns:repeat(3,1fr);
}

.ovza-hcards--2-tools{
  grid-template-columns:repeat(2,1fr);
}

.ovza-hcards--2x2{
  grid-template-columns:repeat(2,1fr);
}

.ovza-hcard{
  display:block;
  min-height:116px;
  padding:18px 18px 16px;
  border:1px solid var(--border);
  border-radius:12px;
  background-color:#ffffff;
  text-decoration:none;
  color:inherit;
  transition:transform .16s ease, box-shadow .16s ease;
}

.ovza-hcard:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(15,23,42,0.08);
}

.ovza-hcard__icon{
  background:transparent;
  color:inherit;
  width:40px;
  height:40px;
  padding:0;
  border-radius:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:14px;
  font-size:0;
}

.ovza-hcard__icon img,
.ovza-hcard__icon svg{
  display:block;
  width:40px;
  height:40px;
  object-fit:contain;
  filter:none;
}

.ovza-hcard__content{
  min-width:0;
}

.ovza-hcard__title{
  font-size:16px;
  font-weight:800;
  margin-bottom:8px;
  color:#000;
  line-height:1.35;
}

.ovza-hcard__text{
  font-size:14px;
  color:var(--text-muted);
  line-height:1.45;
}

/* === JURISDICTIONS === */
.ovza-jurisdiction{
  display:grid;
  grid-template-columns:2.2fr 1fr 1fr;
  gap:1.5rem;
}

.ovza-jurisdiction__col + .ovza-jurisdiction__col{
  border-left:1px solid var(--border);
  padding-left:1rem;
}

.ovza-jurisdiction__list{
  list-style:none;
  display:grid;
  padding:0;
  margin:0;
}

.ovza-jurisdiction__list a{
  text-decoration:none;
  color:var(--text-main);
  font-size:14px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:0.5rem 0;
  border-radius:4px;
  transition:all 0.2s;
  white-space:nowrap;
}

.ovza-jurisdiction__list a:hover{
  background-color:#ECFDF5;
  color:var(--primary-dark);
  font-weight:500;
  letter-spacing:-0.01em;
}

/* Big flags — 30px wide. */
.ovza-flag-big{
  display:inline-block;
  flex-shrink:0;
  width:30px;
  height:auto;
  aspect-ratio:3 / 2;
  border-radius:0;
  box-shadow:0 1px 2px rgba(0,0,0,0.1);
  vertical-align:middle;
  line-height:0;
}

/* flag-icons fallback (<span> with background-image) has no intrinsic
   height, so lock a 4:3 box and stretch the SVG to fill it exactly. */
span.ovza-flag-big{
  aspect-ratio:4 / 3;
  background-size:100% 100% !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}

/* Curated <img> flags keep their TRUE aspect ratio — height is auto-
   computed from the image's natural dimensions. */
img.ovza-flag-big,
.ovza-flag-big--img{
  aspect-ratio:auto;
  background:none !important;
  object-fit:contain;
}

.ovza-region-heading,
.ovza-section-heading{
  font-size:18px;
  font-weight:700;
  color:#000;
  margin-bottom:0.7rem;
  letter-spacing:-0.01em;
}

.ovza-jurisdiction__list--americas{
  display:block;
  column-count:2;
  column-gap:1.5rem;
}

/* === MOBILE (hidden on desktop) === */
.ovza-nav__mobile-toggle,
.ovza-nav__mobile-open,
.ovza-nav__drawer,
.ovza-nav__overlay{
  display:none;
}

.ovza-nav__mobile-open{
  width:42px;
  height:42px;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  border-radius:10px;
  flex:0 0 auto;
  background:none;
  border:none;
  color:#fff;
  transition:color 0.3s ease;
}

.ovza-nav.is-scrolled .ovza-nav__mobile-open,
.ovza-nav--filled .ovza-nav__mobile-open{
  color:var(--text-main);
}

.ovza-burger,
.ovza-close{
  position:relative;
  width:22px;
  height:22px;
  display:block;
}

.ovza-burger::before,
.ovza-burger::after,
.ovza-burger span{
  content:"";
  position:absolute;
  left:1px;
  right:1px;
  height:2px;
  border-radius:2px;
  background:currentColor;
}

.ovza-burger::before{ top:5px; }
.ovza-burger span{ top:10px; }
.ovza-burger::after{ top:15px; }

.ovza-close::before,
.ovza-close::after{
  content:"";
  position:absolute;
  top:10px;
  left:1px;
  right:1px;
  height:2px;
  border-radius:2px;
  background:currentColor;
}

.ovza-close::before{ transform:rotate(45deg); }
.ovza-close::after{ transform:rotate(-45deg); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 991px){
  :root{
    --ovza-nav-height:80px;
  }

  .ovza-nav{
    height:80px;
    background:var(--ovza-white);
    box-shadow:inset 0 -1px 0 var(--border);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  /* Non-sticky variants flow with the page on mobile */
  .ovza-nav:not(.ovza-nav--sticky){
    position:relative;
  }

  /* Sticky variants stay pinned on mobile too */
  .ovza-nav--sticky{
    position:fixed;
    top:0;
    left:0;
    right:0;
    width:100%;
  }

  .ovza-nav__bar{
    height:80px;
    padding:0 20px;
  }

  .ovza-nav__logo img{
    width:118px;
    filter:none !important;
  }

  .ovza-nav__desktop,
  .ovza-nav__cta--desktop{
    display:none;
  }

  .ovza-nav__mobile-open{
    display:flex;
    color:var(--text-main);
  }

  /* === MOBILE TRANSPARENT MODE ===
     When a transparent preset is active and the user hasn't scrolled,
     show the header truly transparent over the hero, with a WHITE logo
     and a BLACK burger icon. Once .is-scrolled kicks in, the existing
     scrolled rules take over (white bar, dark icon/logo).
     Logo rule is scoped to .ovza-nav__bar so the drawer's logo (which
     sits on a white background) stays in its natural colours.
     NOTE: in normal-flow positioning the host container's background
     can show through where our nav is transparent. If you see a
     white band, set the WPBakery row / Elementor section that
     contains [ovza_header] to "no background / transparent". */
  .ovza-nav--transparent:not(.is-scrolled){
    background:transparent;
    box-shadow:none;
  }

  .ovza-nav--transparent:not(.is-scrolled) .ovza-nav__bar .ovza-nav__logo img{
    filter:brightness(0) invert(1) !important;
  }

  .ovza-nav--transparent:not(.is-scrolled) .ovza-nav__mobile-open{
    color:#000;
  }

  .ovza-nav__mobile-toggle{
    display:none;
  }

  .ovza-nav__overlay{
    display:flex;
    position:fixed;
    inset:0;
    background:rgba(12,17,29,.35);
    opacity:0;
    visibility:hidden;
    transition:opacity .25s ease, visibility .25s ease;
    z-index:99998;
  }

  .ovza-nav__drawer{
    display:flex;
    position:fixed;
    top:0;
    right:0;
    left:auto;
    width:min(100%, 502px);
    height:100vh;
    height:100dvh;
    max-height:100vh;
    max-height:100dvh;
    background:#fafbfc;
    /* Establish the drawer's own text color so its links don't
       inherit white (or anything else) from the host page when the
       header is rendered inside a dark/light-text WPBakery section.
       Without this, `.ovza-nav a{color:inherit}` (specificity 0,1,1)
       beats per-class color rules on the partner/about links. */
    color:var(--text-main);
    flex-direction:column;
    transform:translateX(100%);
    transition:transform .28s ease;
    z-index:99999;
    border-left:1px solid var(--border);
    overflow:hidden;
  }

  .ovza-nav__mobile-toggle:checked ~ .ovza-nav__drawer{
    transform:translateX(0);
  }

  .ovza-nav__mobile-toggle:checked ~ .ovza-nav__overlay{
    opacity:1;
    visibility:visible;
  }

  .ovza-drawer__head{
    flex:0 0 auto;
    min-height:82px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 24px;
    border-bottom:1px solid var(--border);
    background:#fafbfc;
  }

  .ovza-drawer__head img{
    width:118px;
  }

  .ovza-drawer__head-actions{
    display:flex;
    align-items:center;
    gap:10px;
  }

  .ovza-drawer__close{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    color:var(--text-main);
    cursor:pointer;
  }

  .ovza-drawer__body{
    flex:1 1 auto;
    min-height:0;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    display:flex;
    flex-direction:column;
    background:#fafbfc;
  }

  .ovza-accordion{
    border-bottom:1px solid var(--border);
  }

  .ovza-accordion > summary{
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    cursor:pointer;
    padding:22px 24px;
    font-size:15px;
    font-weight:600;
    color:var(--text-main);
  }

  .ovza-accordion > summary::-webkit-details-marker{
    display:none;
  }

  .ovza-accordion[open] > summary{
    color:var(--ovza-green);
  }

  .ovza-accordion__arrow{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    flex-shrink:0;
    transition:transform .22s ease;
    color:#8894b5;
  }

  .ovza-accordion__arrow::after{
    content:"";
    width:10px;
    height:10px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:rotate(45deg);
    display:block;
  }

  .ovza-accordion[open] .ovza-accordion__arrow::after{
    transform:rotate(-135deg);
  }

  .ovza-accordion[open] .ovza-accordion__arrow{
    color:var(--ovza-green);
  }

  .ovza-accordion__panel{
    padding:18px 24px 22px;
    background:#f7f9fb;
    border-top:1px solid var(--border);
  }

  .ovza-mobile-section-title{
    font-size:12px;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--text-muted);
    margin-bottom:12px;
  }

  .ovza-mobile-cards{
    display:grid;
    gap:12px;
  }

  .ovza-mobile-card{
    min-height:72px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#fff;
    padding:14px 16px;
    display:flex;
    align-items:center;
    gap:12px;
  }

  .ovza-mobile-card__icon{
    width:30px;
    height:30px;
    border-radius:0;
    background:transparent;
    color:inherit;
    display:grid;
    place-items:center;
    flex:0 0 30px;
    font-size:0;
    font-weight:400;
  }

  .ovza-mobile-card__icon img{
    display:block;
    width:30px;
    height:30px;
    object-fit:contain;
    filter:none;
  }

  .ovza-mobile-card__text{
    min-width:0;
    flex:1;
  }

  .ovza-mobile-card__title{
    font-size:15px;
    line-height:1.25;
    font-weight:600;
    margin-bottom:3px;
  }

  .ovza-mobile-card__desc{
    font-size:13px;
    line-height:1.35;
    color:var(--text-muted);
  }

  .ovza-mobile-card__desc{
    display:none;
  }

  .ovza-mobile-card__chev{
    color:#9ba7c2;
    font-size:22px;
    line-height:1;
  }

  .ovza-mobile-country-group + .ovza-mobile-country-group{
    margin-top:16px;
  }

  .ovza-mobile-country-title{
    font-size:12px;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--text-muted);
    margin-bottom:8px;
  }

  .ovza-mobile-country-list{
    list-style:none;
    display:grid;
    margin:0;
    padding:0;
  }

  .ovza-mobile-country-list a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 0;
    font-size:15px;
    font-weight:600;
  }

  .ovza-mobile-country-left{
    display:flex;
    align-items:center;
    gap:6px;
  }

  .ovza-mobile-country-right{
    color:#c4cbd8;
    font-size:22px;
    line-height:1;
  }

  .ovza-mobile-partner,
  .ovza-mobile-about{
    border-bottom:1px solid var(--border);
  }

  .ovza-mobile-partner__link,
  .ovza-mobile-about__link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:22px 24px;
    font-size:15px;
    font-weight:600;
    color:var(--text-main);
    text-decoration:none;
    transition:color 0.2s;
  }

  .ovza-mobile-partner__link:hover,
  .ovza-mobile-about__link:hover{
    color:var(--ovza-green);
  }

  .ovza-drawer__footer{
    flex:0 0 auto;
    padding:14px 24px max(14px, env(safe-area-inset-bottom));
    border-top:1px solid var(--border);
    background:#fafbfc;
  }

  /* Mobile drawer Contact CTA — solid green, white text always */
  .ovza-nav__cta--mobile,
  .ovza-nav .ovza-nav__cta--mobile,
  .ovza-nav--cta-outline-transparent .ovza-nav__cta--mobile{
    width:100%;
    height:47px;
    border-radius:7px;
    font-size:17px;
    font-weight:800;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--ovza-green) !important;
    border:none !important;
    color:#fff !important;
    transition:background 0.15s ease;
  }

  .ovza-nav__cta--mobile:hover,
  .ovza-nav__cta--mobile:active,
  .ovza-nav__cta--mobile:focus,
  .ovza-nav__cta--mobile:visited,
  a.ovza-nav__cta--mobile:hover,
  a.ovza-nav__cta--mobile:active,
  a.ovza-nav__cta--mobile:focus,
  a.ovza-nav__cta--mobile:visited{
    background:var(--ovza-green-dark) !important;
    color:#fff !important;
  }

  .ovza-jurisdiction{
    grid-template-columns:1fr;
    gap:1rem;
  }

  .ovza-jurisdiction__col + .ovza-jurisdiction__col{
    border-left:none;
    padding-left:0;
    border-top:1px solid var(--border);
    padding-top:1rem;
  }

  .ovza-jurisdiction__list--americas{
    column-count:2;
  }
}

@media (max-width: 640px){
  .ovza-nav__bar{
    padding:0 16px;
    height:78px;
  }

  .ovza-nav__drawer{
    width:100%;
  }

  .ovza-drawer__head{
    padding:0 18px;
  }

  .ovza-accordion > summary{
    padding:20px 18px;
    font-size:16px;
  }

  .ovza-accordion__panel{
    padding:16px 18px 20px;
  }

  .ovza-drawer__footer{
    padding:16px 18px 18px;
  }

  .ovza-mobile-card{
    padding:12px;
  }
}