/* ─── Site-wide login/register popup ──────────────────────────────────────────
   Loaded on EVERY front-end page for logged-out visitors, so every selector is
   namespaced under .mycore-auth-* and nothing here styles a bare element. The theme
   owns the rest of the page; this must not leak into it.

   Values are hard-coded rather than read from --mc-* tokens: those live in the portal
   and profile stylesheets, which aren't loaded on a random page of the site. */
.mycore-auth-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100000; /* above the theme's sticky header and the admin bar */
  background: rgba(10, 6, 20, 0.72);
  padding: 20px;
  overflow-y: auto;
}
.mycore-auth-overlay.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Stop the page behind the popup from scrolling under it. */
body.mycore-auth-open {
  overflow: hidden;
}

.mycore-auth-modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: #241C3A;
  color: #FFFFFF;
  border-radius: 16px;
  padding: 32px 28px 26px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  font-family: inherit;
  box-sizing: border-box;
}
.mycore-auth-modal h2 {
  margin: 0 0 6px;
  font-size: 24px;
  line-height: 1.25;
  color: #FFFFFF;
  text-align: center;
}
.mycore-auth-modal label {
  display: block;
  margin: 16px 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: #B5C3C8;
}
.mycore-auth-modal input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.22);
  color: #FFFFFF;
  font-size: 16px; /* 16px stops iOS Safari zooming the page on focus */
  line-height: 1.5;
  outline: none;
}
.mycore-auth-modal input:focus {
  border-color: #F5A623;
}
.mycore-auth-modal {
  /* Password box with a show/hide eye button pinned inside its right edge. */
}
.mycore-auth-modal .mycore-auth-pw {
  position: relative;
}
.mycore-auth-modal .mycore-auth-pw input {
  padding-right: 48px;
}
.mycore-auth-modal .mycore-auth-pw-toggle {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0 8px 8px 0;
  background: transparent;
  color: #B5C3C8;
  box-shadow: none;
  cursor: pointer;
}
.mycore-auth-modal .mycore-auth-pw-toggle:hover, .mycore-auth-modal .mycore-auth-pw-toggle:focus-visible {
  color: #FFFFFF;
  background: transparent;
}
.mycore-auth-modal .mycore-auth-pw-toggle:focus-visible {
  outline: 2px solid #F5A623;
  outline-offset: -2px;
}
.mycore-auth-modal .mycore-auth-pw-toggle svg {
  display: block;
}

.mycore-auth-sub {
  margin: 0 0 4px;
  text-align: center;
  font-size: 15px;
  line-height: 1.5;
  color: #B5C3C8;
}

.mycore-auth-error {
  display: none;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(229, 74, 74, 0.14);
  border: 1px solid rgba(229, 74, 74, 0.4);
  color: #FFC9C9;
  font-size: 14px;
  line-height: 1.45;
}
.mycore-auth-error.is-visible {
  display: block;
}

.mycore-auth-modal .mycore-auth-submit {
  display: block;
  width: 100%;
  margin-top: 22px;
  padding: 12px 18px;
  border: 0;
  border-radius: 8px;
  background: #F5A623;
  color: #241C3A;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.mycore-auth-modal .mycore-auth-submit:hover {
  filter: brightness(1.06);
}
.mycore-auth-modal .mycore-auth-submit:disabled, .mycore-auth-modal .mycore-auth-submit.is-busy {
  opacity: 0.65;
  cursor: default;
}

.mycore-auth-lost,
.mycore-auth-switch {
  margin: 14px 0 0;
  text-align: center;
  font-size: 14px;
  color: #B5C3C8;
}
.mycore-auth-lost a,
.mycore-auth-switch a {
  color: #F5A623;
  text-decoration: underline;
  cursor: pointer;
}

.mycore-auth-switch {
  margin-top: 10px;
}

/* ─── [mycore_get_started] ────────────────────────────────────────────────────
   The CTA that opens the popup, styled to match the "Get Started" button on
   getmycore.com (Elementor widget 75e8ea8). Resolved from its CSS:

     background #F4B942 (--e-global-color-accent)  .. widget rule, post-2485.css
     color/fill #1F2937 (--e-global-color-text)    .. widget rule
     border-radius 16px                            .. widget rule
     "Josefin Sans" 22px / 600 (--e-global-typography-accent-*) .. widget rule
     content wrapper flex-direction row-reverse, gap 15px       .. widget rule
       → the arrow renders to the RIGHT of the label
     padding 22px  ................................. .elementor-kit-1288 .elementor-button
     transition: all .2s ease  ..................... the kit's custom CSS

   Written out rather than piggy-backing on `.elementor-button` so the button looks
   the same on /portal and /profile, where the plugin dequeues Elementor's stylesheets.
   Josefin Sans is loaded by Elementor's Google-fonts CSS; the stack falls back to the
   theme's sans anywhere it isn't. Colour and text-decoration carry !important because
   this lands inside theme content, where a descendant `a` rule would otherwise win on
   specificity. */
.mycore-getstarted-wrap a.mycore-getstarted {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 22px;
  border: 0;
  border-radius: 16px;
  background: #F4B942;
  color: #1F2937 !important;
  font-family: "Josefin Sans", sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  transition: all 0.2s ease;
  /* The live button has no hover state of its own. These are the kit's own
     gold-button hover values (its `.primary-button` rule) — a CTA that doesn't
     react to the pointer reads as broken. */
}
.mycore-getstarted-wrap a.mycore-getstarted:hover, .mycore-getstarted-wrap a.mycore-getstarted:focus {
  background: #D4A032;
  color: #1F2937 !important;
  text-decoration: none !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

/* Sized in em so it tracks the label, matching .elementor-button-icon svg{width:1em}. */
.mycore-getstarted-icon {
  display: inline-flex;
  align-items: center;
  width: 1em;
  font-size: 1em;
  line-height: 1;
}

.mycore-getstarted-wrap.is-center {
  text-align: center;
}
.mycore-getstarted-wrap.is-right {
  text-align: right;
}
.mycore-getstarted-wrap.is-full a.mycore-getstarted {
  display: flex;
  width: 100%;
}

/* ─── Account buttons in the navigation menu ──────────────────────────────────
   Only the Get Started half is styled here. Its sibling carries the site's own
   `login-button` class and is already drawn as an outlined gold button by the header
   CSS in the Customizer — restyling it here would just fight that.

   Everything lives on the inner <span>, never on the <a>. The theme paints menu links
   with `#site-navigation #primary-menu > li a { color: white !important }`, which
   nothing we can write generically will outrank; a colour set on a child element isn't
   competing with that rule, it simply stops inheriting it. Leaving the anchor's own
   padding alone also means this pill and the Log In pill are the same height — the
   theme's link padding just becomes breathing room around ours.

   No arrow: this is the compact menu form of the [mycore_get_started] button above,
   sized to the header rather than to a hero section. */
.mycore-menu-cta > a {
  text-decoration: none;
}

.mycore-menu-cta .mycore-menu-btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 5px;
  background: #F4B942;
  color: #1F2937;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.mycore-menu-cta > a:hover .mycore-menu-btn,
.mycore-menu-cta > a:focus .mycore-menu-btn {
  background: #D4A032;
  color: #1F2937;
}

/* The header collapses to the stacked mobile menu here — same breakpoint the theme
   uses to centre and stack its own `.login-button` item. */
@media screen and (max-width: 1200px) {
  .mycore-menu-cta {
    text-align: center;
  }
  .mycore-menu-cta > a {
    display: block;
    margin: 10px 0;
  }
}