/* CephX — Request Demo popup. Loaded only while the Request Demo switch is ON.
   Visual reference: the client's "Let's talk" form (Lexend body, Orbitron title,
   #005dfc accent, green accent bar). Everything is scoped to .cephx-rd-popup. */

.cephx-rd-popup {
    position: relative;
    max-width: 760px;
    margin: 20px auto;
    padding: 32px 38px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 12px 36px #00000012;
    font-family: Lexend, Arial, sans-serif;
    color: #000;
    box-sizing: border-box;
}
.cephx-rd-popup *,
.cephx-rd-popup *::before,
.cephx-rd-popup *::after { box-sizing: border-box; }

.cephx-rd-popup .cephx-rd-title {
    margin: 0;
    text-align: center;
    font-family: Orbitron, Lexend, sans-serif;
    font-weight: 500;
    font-size: 34px;
    color: #005dfc;
}
.cephx-rd-popup .cephx-rd-title span { color: #000; }

.cephx-rd-popup .cephx-rd-accent {
    width: 100px;
    height: 4px;
    margin: 16px auto 30px;
    background: #7dce58;
    border-radius: 8px;
}

.cephx-rd-popup label {
    display: block;
    margin: 22px 0 9px;
    font-size: 15px;
    font-weight: 700;
}
.cephx-rd-popup label b { color: #ed3548; }

.cephx-rd-popup input,
.cephx-rd-popup select,
.cephx-rd-popup textarea {
    width: 100%;
    padding: 15px 16px;
    border: 1px solid #c5d3ea;
    border-radius: 7px;
    background: #fff;
    font: 15px Lexend, Arial, sans-serif;
    color: #16213c;
}
.cephx-rd-popup input:focus,
.cephx-rd-popup select:focus,
.cephx-rd-popup textarea:focus {
    outline: 2px solid #005dfc;
    outline-offset: 1px;
}
.cephx-rd-popup textarea { height: 110px; resize: vertical; }

.cephx-rd-popup .cephx-rd-submit {
    width: 100%;
    margin-top: 28px;
    padding: 17px;
    border: 0;
    border-radius: 7px;
    background: #005dfc;
    color: #fff;
    font: 700 17px Lexend, Arial, sans-serif;
    cursor: pointer;
}
.cephx-rd-popup .cephx-rd-submit:hover { background: #004bd1; }
.cephx-rd-popup .cephx-rd-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.cephx-rd-popup .cephx-rd-submit:disabled { cursor: progress; }
.cephx-rd-popup .cephx-rd-submit.is-loading { background: #004bd1; }

/* Spinner: only visible while the request is in progress. */
.cephx-rd-popup .cephx-rd-spinner {
    display: none;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 3px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: cephx-rd-spin .8s linear infinite;
}
.cephx-rd-popup .cephx-rd-submit.is-loading .cephx-rd-spinner { display: inline-block; }
@keyframes cephx-rd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .cephx-rd-popup .cephx-rd-spinner { animation-duration: 2.4s; }
}

/* While sending, the fields stay as typed but cannot be edited or re-clicked. */
.cephx-rd-popup form.is-loading { pointer-events: none; }
.cephx-rd-popup form.is-loading input,
.cephx-rd-popup form.is-loading select,
.cephx-rd-popup form.is-loading textarea { opacity: .7; }

/* Error message (role="alert"); empty means nothing is shown. */
.cephx-rd-popup .cephx-rd-msg { margin-top: 16px; text-align: center; font-size: 14px; line-height: 1.45; }
.cephx-rd-popup .cephx-rd-msg:empty { display: none; }
.cephx-rd-popup .cephx-rd-msg.error {
    padding: 12px 14px;
    border: 1px solid #f1b9c0;
    border-radius: 7px;
    background: #fdf0f1;
    color: #b3261e;
    text-align: left;
}
.cephx-rd-popup .cephx-rd-msg:focus { outline: none; }

/* Success state: replaces the form inside the popup. */
.cephx-rd-popup .cephx-rd-success[hidden],
.cephx-rd-popup .cephx-rd-head[hidden],
.cephx-rd-popup form[hidden] { display: none; }
.cephx-rd-popup .cephx-rd-success { padding: 18px 0 6px; text-align: center; }
.cephx-rd-popup .cephx-rd-success:focus { outline: none; }
.cephx-rd-popup .cephx-rd-success-icon { width: 72px; height: 72px; margin: 0 auto 18px; display: block; }
.cephx-rd-popup .cephx-rd-success-title {
    margin: 0 0 12px;
    font-family: Orbitron, Lexend, sans-serif;
    font-weight: 500;
    font-size: 28px;
    color: #005dfc;
}
.cephx-rd-popup .cephx-rd-success-text { margin: 0 auto 28px; max-width: 420px; font-size: 16px; line-height: 1.55; color: #16213c; }
.cephx-rd-popup .cephx-rd-success-close {
    min-width: 160px;
    padding: 14px 28px;
    border: 0;
    border-radius: 7px;
    background: #005dfc;
    color: #fff;
    font: 700 16px Lexend, Arial, sans-serif;
    cursor: pointer;
}
.cephx-rd-popup .cephx-rd-success-close:hover { background: #004bd1; }

/* Searchable country select */
.cephx-rd-popup .cephx-rd-combo { position: relative; }
.cephx-rd-popup .cephx-rd-combo-list {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    top: 100%;
    margin: 4px 0 0;
    padding: 4px 0;
    max-height: 240px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    list-style: none;
    background: #fff;
    border: 1px solid #c5d3ea;
    border-radius: 7px;
    box-shadow: 0 12px 28px #0000001f;
}
.cephx-rd-popup .cephx-rd-combo-list[hidden] { display: none; }
.cephx-rd-popup .cephx-rd-combo-list li {
    margin: 0;
    padding: 11px 16px;
    font-size: 15px;
    line-height: 1.3;
    color: #16213c;
    cursor: pointer;
}
.cephx-rd-popup .cephx-rd-combo-list li[hidden] { display: none; }
.cephx-rd-popup .cephx-rd-combo-list li.is-active,
.cephx-rd-popup .cephx-rd-combo-list li:hover { background: #eef4fe; color: #005dfc; }
.cephx-rd-popup .cephx-rd-combo-list li.cephx-rd-combo-empty { color: #65718a; cursor: default; background: transparent; }

/* Honeypot: off-screen, not display:none (some bots skip hidden fields). */
.cephx-rd-popup .cephx-rd-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ── Header button ──────────────────────────────────────────────
   Root cause (measured against the real Elementor CSS): the header row is
   laid out at Elementor's content width (1264 / 1350 / 1780px) and the
   original items fill it almost exactly (e.g. 1349px of content in a 1350px
   row). The menu is a wrapping list, so any extra width on the button makes
   its last items drop to a second row. "Request Demo" is ~46px wider than
   "Sign Up" and "Let's talk" ~8px wider.

   Fix, in order, never touching font size or the other header items:
   1. The row may grow beyond the content width by exactly what its items
      need, using the viewport margin that is otherwise empty (width:
      max-content, never below Elementor's width, never closer than 10px to
      the viewport edge). When the items already fit, the row is unchanged.
   2. If the viewport margin is not enough, cephx-request-demo.js tightens the
      button's own side padding in two steps, then (step 3) narrows the gaps
      between the header items from 20px to 12px. Each step is only kept if it
      helps; if even step 3 cannot (narrow desktops where the menu already wraps
      in the original header) everything is reverted.
   The label itself never wraps. */
.elementor-location-header .elementor-widget.cephx-request-demo-target .elementor-button {
    white-space: nowrap;
}
.elementor-location-header .elementor-widget.cephx-request-demo-target {
    flex-shrink: 0;
}
.elementor-location-header .e-con-inner:has(> .cephx-request-demo-target) {
    width: max-content;
    min-width: min(100%, var(--content-width, 100%));
    max-width: calc(100% - 20px);
}
.elementor-location-header .elementor-widget.cephx-request-demo-target.cephx-rd-compact-1 .elementor-button.elementor-button-link {
    padding-left: 16px;
    padding-right: 16px;
}
.elementor-location-header .elementor-widget.cephx-request-demo-target.cephx-rd-compact-2 .elementor-button.elementor-button-link {
    padding-left: 12px;
    padding-right: 12px;
}
/* Step 3: where the viewport margin and the button padding are still not enough
   (the real row is exactly full at some widths), the 20px gaps between the header
   items are narrowed, evenly, just enough for the menu to stay on one row. */
.elementor-location-header .e-con-inner.cephx-rd-tight {
    column-gap: 12px;
}

/* ── Mobile menu button (popup template 832) ────────────────────
   Elementor fixes this widget at width:120px with zero side padding and an
   18px font, which fits "Sign Up" but not a longer label. Only this widget
   may grow (never below its original 120px); font size is untouched. */
.elementor-location-popup .elementor-widget.cephx-request-demo-target {
    width: auto;
    min-width: 120px;
    max-width: none;
    flex-shrink: 0;
}
.elementor-location-popup .elementor-widget.cephx-request-demo-target .elementor-button {
    white-space: nowrap;
    padding-left: 16px;
    padding-right: 16px;
}

@media (max-width: 550px) {
    .cephx-rd-popup { padding: 25px 20px; }
    /* 16px stops iOS Safari from zooming the page when a field is focused. */
    .cephx-rd-popup input,
    .cephx-rd-popup select,
    .cephx-rd-popup textarea { font-size: 16px; }
    .cephx-rd-popup .cephx-rd-combo-list { max-height: 200px; }
    .cephx-rd-popup .cephx-rd-success-title { font-size: 24px; }
    .cephx-rd-popup .cephx-rd-success-close { width: 100%; }
    .cephx-rd-popup .cephx-rd-title { font-size: 28px; }
}