/* Rules that are NOT part of the ported web.hr CSS (site.css / bootstrap.css are
   verbatim ports — don't edit those for new behaviour, add it here). Mostly the
   look of the vanilla-JS stand-ins in static/js/site.js. */

/* --- hidden --- an inline display:flex/block would otherwise beat [hidden] */
[hidden] { display: none !important; }

/* --- toasts --- react-toastify's bottom-left stack */
.Toastify { position: fixed; left: 16px; bottom: 16px; z-index: 10000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.wh-toast { pointer-events: auto; min-width: 260px; max-width: 360px; padding: 14px 16px; border-radius: 6px; background: #fff; color: #333;
            box-shadow: 0 1px 10px rgba(0,0,0,.1), 0 2px 15px rgba(0,0,0,.05); font-size: 14px; border-left: 5px solid #07bc0c;
            transition: opacity .3s, transform .3s; }
.wh-toast--error { border-left-color: #e74c3c; }
.wh-toast--out { opacity: 0; transform: translateX(-20px); }

/* --- header dropdowns --- menus sit below the toggle like react-bootstrap's static popper */
[data-dropdown] { position: relative; }
@media (max-width: 991.98px) {
  [data-dropdown] .dropdown-menu { width: 100% !important; max-width: 100%; }
}

/* --- FontAwesome inline SVG icons --- react-fontawesome injected this base rule at runtime on
   the live site; the footer, /contact and the partner apply pages render svg.svg-inline--fa. */
.svg-inline--fa { display: inline-block; height: 1em; overflow: visible; box-sizing: content-box; vertical-align: -.125em; }

/* --- "Schedule Free Demo" email band (partials/schedule_demo_email.html) --- live switched markup
   on window width: h2 + paragraph above 775px, bold h3 below; illustration only above 1330px. */
.wh-sdf-narrow { display: none; }
@media (max-width: 775px) {
  .wh-sdf-wide { display: none; }
  .wh-sdf-narrow { display: block; }
  .wh-sdf-btn { font-size: 10px !important; }
}
@media (max-width: 1330px) { .wh-sdf-img { display: none; } }

/* --- buttons (redesign) --- pill buttons used across the new pages: .wh-btn + --primary | --glass */
:root { --wh-grad: linear-gradient(117.69deg, #231fff -29.66%, #bf41eb 113.48%); }
.wh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px;
  padding: 0 28px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .25s ease, background-color .25s ease;
}
.wh-btn:focus-visible { outline: 3px solid rgba(35, 31, 255, .45); outline-offset: 3px; }
.wh-btn--primary {
  color: #fff;
  background: var(--wh-grad);
  box-shadow: 0 10px 30px rgba(120, 60, 255, .35), inset 0 1px 0 rgba(255,255,255,.25);
}
.wh-btn--primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 40px rgba(120, 60, 255, .45), inset 0 1px 0 rgba(255,255,255,.25); }
.wh-btn--primary svg { transition: transform .2s ease; }
.wh-btn--primary:hover svg { transform: translateX(3px); }
.wh-btn--glass {
  color: #0b1a3a;
  background: rgba(255, 255, 255, .58);
  border: 1px solid rgba(255, 255, 255, .75);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 6px 24px rgba(11, 26, 58, .08);
}
.wh-btn--glass:hover { color: #0b1a3a; background: rgba(255,255,255,.8); transform: translateY(-2px); }
.wh-btn__play {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  color: #fff; background: var(--wh-grad);
  padding-left: 2px;
}