/*
 * Zenro global styles - loaded on every page.
 * Covers the Request a Demo / Free Trial pop-ups, their Zoho forms and the
 * country-code picker. Everything else lives in css/pages/<page-key>.css.
 */

/* Fallbacks: each page file defines its own palette, these only fill the gaps. */
:root {
    --ink: #181818;
    --blue: #2b73b9;
    --line: #e3e3e3;
    --muted: #5e6267;
}

/* Stop the page behind scrolling while a pop-up is open */
body:has(.contact-dialog[open]) {
    overflow: hidden;
}

.contact-dialog {
    width: min(620px,calc(100% - 32px));
    max-height: calc(100dvh - 32px);
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: 22px;
    background: #fff;
    color: var(--ink);
    box-shadow: 0 30px 90px rgba(0,0,0,.32);
}
.contact-dialog::backdrop {
    background: rgba(8,20,29,.72);
    backdrop-filter: blur(5px);
}
.contact-dialog .dialog-panel {
    position: relative;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 32px;
    scrollbar-gutter: stable;
}
.contact-dialog .dialog-panel .eyebrow {
    margin-bottom: 10px;
}
.contact-dialog .dialog-panel h2 {
    max-width: 520px;
    margin-bottom: 9px;
    font-size: clamp(1.65rem,4vw,2.15rem);
    line-height: 1.14;
}
.contact-dialog .dialog-panel>p:not(.eyebrow) {
    max-width: 520px;
    margin: 0 0 20px;
    color: var(--muted);
    font-size: .94rem;
    line-height: 1.5;
}
.contact-dialog .dialog-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #fff;
    color: var(--ink);
    font-size: 1.65rem;
    line-height: 1;
    cursor: pointer;
}
.contact-dialog .dialog-close:hover,
.contact-dialog .dialog-close:focus {
    background: #edf3f9;
}
.contact-dialog .zoho-form-embed {
    min-height: 0;
}
.contact-dialog .preview-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px 14px;
    padding: 19px;
    border: 1px solid #d9e2e8;
    border-radius: 17px;
    background: #f7fafc;
}
.contact-dialog .form-field {
    display: grid;
    gap: 6px;
}
.contact-dialog .form-field.full {
    grid-column: 1/-1;
}
.contact-dialog .form-field label {
    font-size: .78rem;
    font-weight: 800;
    color: #344d5a;
}
.contact-dialog .form-field input,
.contact-dialog .form-field select,
.contact-dialog .form-field textarea {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid #c7d3da;
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    font: 500 .88rem "DM Sans",sans-serif;
    outline: none;
}
.contact-dialog .form-field textarea {
    min-height: 64px;
    resize: vertical;
}
.contact-dialog .form-field input:focus,
.contact-dialog .form-field select:focus,
.contact-dialog .form-field textarea:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(43,115,185,.12);
}
.contact-dialog .form-submit {
    grid-column: 1/-1;
    min-height: 44px;
    border: 0;
    border-radius: 99px;
    background: var(--blue);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}
.contact-dialog .form-submit:hover {
    background: #225f9c;
}
.contact-dialog .form-note {
    grid-column: 1/-1;
    margin: 0;
    text-align: center;
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.4;
}

@media (max-width:500px) {
    .contact-dialog .dialog-panel {
            padding: 28px 18px 18px;
        }
    .contact-dialog .dialog-close {
            top: 12px;
            right: 12px;
        }
    .contact-dialog .dialog-panel h2 {
            font-size: 1.6rem;
            padding-right: 32px;
        }
    .contact-dialog .preview-form {
            grid-template-columns: 1fr;
            padding: 15px;
        }
    .contact-dialog .form-field.full,
    .contact-dialog .form-submit,
    .contact-dialog .form-note {
            grid-column: 1;
        }
}

.contact-dialog[open] {
    animation: dialogFadeIn .28s ease-out both;
}
.contact-dialog[open] .dialog-panel {
    animation: dialogSlideIn .4s cubic-bezier(.2,.8,.2,1) both;
}
.contact-dialog[open]::backdrop {
    animation: dialogBackdropIn .3s ease-out both;
}
@keyframes dialogFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
@keyframes dialogSlideIn {
    from {
        opacity: 0;
        transform: translateY(34px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
@keyframes dialogBackdropIn {
    from {
        background: rgba(8,20,29,0);
        backdrop-filter: blur(0);
    }

    to {
        background: rgba(8,20,29,.72);
        backdrop-filter: blur(5px);
    }
}

@media (prefers-reduced-motion:reduce) {
    .contact-dialog[open],
    .contact-dialog[open] .dialog-panel,
    .contact-dialog[open]::backdrop {
            animation: none;
        }
}

.contact-dialog .zoho-form select:invalid {
    color: #7a8a94;
}
.contact-dialog .zoho-form select option,
.contact-dialog .zoho-form select optgroup {
    color: var(--ink);
}
.contact-dialog .field-label-row {
    display: flex;
    align-items: center;
    gap: 7px;
}
.contact-dialog .phone-group {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 8px;
}
.contact-dialog .field-tip {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #dcebfa;
    color: var(--blue, #2b73b9);
    font: 800 .68rem/1 "DM Sans", sans-serif;
    cursor: help;
    outline: none;
}
.contact-dialog .field-tip:focus-visible {
    box-shadow: 0 0 0 3px rgba(43,115,185,.25);
}
.contact-dialog .field-tip-text {
    position: absolute;
    left: -10px;
    bottom: calc(100% + 9px);
    z-index: 5;
    width: max-content;
    max-width: 240px;
    padding: 8px 11px;
    border-radius: 9px;
    background: #181818;
    color: #fff;
    font: 500 .74rem/1.4 "DM Sans", sans-serif;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    pointer-events: none;
}
.contact-dialog .field-tip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 14px;
    border: 6px solid transparent;
    border-top-color: #181818;
}
.contact-dialog .field-tip:hover .field-tip-text,
.contact-dialog .field-tip:focus .field-tip-text {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
.contact-dialog .form-error {
    margin: 0;
    color: #c62828;
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.35;
}
.contact-dialog .form-field [aria-invalid="true"] {
    border-color: #d93025;
    box-shadow: 0 0 0 3px rgba(217,48,37,.1);
}
.contact-dialog .form-submit:disabled {
    opacity: .7;
    cursor: wait;
}

@media (max-width:560px) {
    .contact-dialog .phone-group {
            grid-template-columns: 132px 1fr;
        }
}

.contact-dialog .phone-group.has-picker {
    position: relative;
    grid-template-columns: auto 1fr;
}
.contact-dialog .phone-group.has-picker > select {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}
.contact-dialog .country-picker-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid #c7d3da;
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    font: 600 .88rem "DM Sans", sans-serif;
    cursor: pointer;
    outline: none;
}
.contact-dialog .country-picker-button:focus-visible,
.contact-dialog .country-picker-button[aria-expanded="true"] {
    border-color: var(--blue, #2b73b9);
    box-shadow: 0 0 0 3px rgba(43,115,185,.12);
}
.contact-dialog .country-picker-caret {
    width: 0;
    height: 0;
    margin-left: 2px;
    border: 4px solid transparent;
    border-top: 5px solid #5e6267;
    border-bottom: 0;
}
.contact-dialog .flag {
    flex: 0 0 auto;
    display: inline-block;
    width: 20px;
    height: 15px;
    background: url("../images/zenro/country-flags.png") no-repeat;
    background-size: 320px 210px;
}
.contact-dialog .country-picker-panel {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    z-index: 20;
    width: min(360px, 100%);
    display: flex;
    flex-direction: column;
    border: 1px solid #c7d3da;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(0,0,0,.16);
    overflow: hidden;
}
.contact-dialog .country-picker-panel[hidden] {
    display: none;
}
.contact-dialog .country-picker-panel.open-up {
    top: auto;
    bottom: calc(100% + 6px);
}
.contact-dialog .form-field .country-picker-search {
    flex: 0 0 auto;
    width: auto;
    min-height: 38px;
    margin: 8px;
    padding: 7px 11px;
    font-size: .84rem;
}
.contact-dialog .country-picker-list {
    flex: 1 1 auto;
    max-height: 240px;
    margin: 0;
    padding: 0 0 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
}
.contact-dialog .country-picker-group {
    padding: 8px 14px 4px;
    color: #7a8a94;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.contact-dialog .country-picker-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    color: var(--ink);
    font-size: .86rem;
    line-height: 1.3;
    cursor: pointer;
}
.contact-dialog .country-picker-option .country-code {
    color: #5e6267;
}
.contact-dialog .country-picker-option.is-active {
    background: #edf3f9;
}
.contact-dialog .country-picker-option[aria-selected="true"] {
    font-weight: 700;
}
.contact-dialog .country-picker-empty {
    padding: 10px 14px;
    color: #7a8a94;
    font-size: .84rem;
}

/* =========================================================
   SHARED HEADER + FOOTER
   These sit on top of each page's own CSS (which loads after this file),
   so the spacing is the same on every page. That is why !important is used.
   ========================================================= */

/* Menu: sit at the right-hand end, next to the Calculator / Demo / Trial buttons,
   instead of stretching across the header */
.nav .nav-links {
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
    gap: clamp(14px, 1.8vw, 30px) !important;
    margin-left: clamp(20px, 3vw, 54px) !important;
}

/* Push the two buttons to the right-hand end.
   Only on the wide layout: below 1350px the links collapse into the Menu button, and
   the export's own space-between keeps that button at the right-hand end, so leaving
   flex-start on would drag it back beside the logo. */
.nav .nav-inner {
    gap: 16px;
}

@media (min-width: 1351px) {
    .nav .nav-inner {
        justify-content: flex-start !important;
    }
}

.nav .header-actions {
    margin-left: clamp(14px, 1.8vw, 30px) !important;
    gap: 8px;
}

.nav .nav-menu summary {
    white-space: nowrap;
}

/* Footer */
.footer .footer-inner {
    align-items: flex-start;
    gap: 26px;
}

.footer .footer-brand {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer .brand-logo {
    display: block;
    width: 190px;
    height: auto;
}

.footer .footer-zoho {
    display: flex;
    align-items: center;
    gap: 11px;
}

.footer .footer-zoho img {
    width: 76px;
    height: 34px;
    object-fit: contain;
}

.footer .footer-zoho span {
    font-size: .78rem;
}

.footer small {
    max-width: 560px;
    line-height: 1.5;
}

.footer .footer-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: right;
    white-space: nowrap;
}

.footer .footer-meta a {
    font-weight: 700;
    text-decoration: none;
}

@media (max-width: 900px) {
    .footer .footer-inner {
        flex-direction: column;
    }

    .footer .footer-meta {
        text-align: left;
    }
}

/* =========================================================
   DROPDOWN MENUS (Appearance -> Menus output)
   The exported markup used a "compact-menu" class for the short dropdowns and
   "business-area-menu" for the 12-item one. A WordPress menu has neither, and the
   underlying CSS defaults to two columns, so every dropdown came out two-wide.
   These rules decide by the number of links instead: 9 or more links (Business
   Areas) = two columns, anything shorter = a single column.
   The extra .nav-links in the selector keeps these ahead of the page CSS,
   which loads after this file.
   ========================================================= */

.nav .nav-links .process-menu {
    width: min(300px, 90vw) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    grid-template-rows: none !important;
}

.nav .nav-links .process-menu > a {
    grid-template-columns: minmax(0, 1fr) !important;
}

/* The Industry Set Ups menu has two-line entries and asks for a little more width.
   Our single-column rule above still applies; only the width is handed back. */
.nav .nav-links .process-menu.industry-menu {
    width: min(330px, 90vw) !important;
}

/* Two-line dropdown entries: name on top, sub-heading underneath. The exported pages
   carry these same rules in their own stylesheet, but the WordPress menu can build an
   industry dropdown on any page, so they live here too and apply everywhere. */
.nav .industry-menu .industry-menu-copy {
    display: block;
    min-width: 0;
}

.nav .industry-menu .industry-menu-copy strong {
    display: block;
    font: 700 .9375rem/1.4 'DM Sans', sans-serif;
    color: inherit;
}

.nav .industry-menu .industry-menu-copy small {
    display: block;
    margin-top: 3px;
    font: 500 .875rem/1.4 'DM Sans', sans-serif;
    color: #5d7184;
}

.nav .industry-menu a.active .industry-menu-copy small {
    color: #385e80;
}

@media (max-width: 1350px) {
    .nav .nav-links .process-menu.industry-menu {
        width: 100% !important;
    }
}

/* Business Areas: 9+ links, so show two columns filled top to bottom */
.nav .nav-links .process-menu:has(> a:nth-child(9)) {
    width: min(620px, 90vw) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: column !important;
    grid-template-rows: repeat(6, auto) !important;
}

/* Numbers (01, 02...) belong only to Business Areas. The walker adds a <b> to every
   dropdown item, so hide it on the short menus and keep the number column on the long one. */
.nav .nav-links .process-menu:has(> a:nth-child(9)) > a:has(b) {
    grid-template-columns: 32px minmax(0, 1fr) !important;
}

.nav .nav-links .process-menu:not(:has(> a:nth-child(9))) > a > b {
    display: none !important;
}

/* Dropdown arrow: a chevron drawn as an SVG, used as a mask so it still takes its
   colour from the menu (currentColor). The old "⌄" character sat low in its line box
   and jumped to the top when rotated; this box rotates around its own centre, so the
   arrow stays level with the label whether the menu is open or closed. */
.nav .nav-links .nav-menu summary::after {
    content: "" !important;
    width: 11px !important;
    height: 11px !important;
    flex: none;
    align-self: center;
    background-color: currentColor !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 19'%3E%3Cpath d='M3 6L12 13L21 6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 19'%3E%3Cpath d='M3 6L12 13L21 6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: translateY(0px);
    transform-origin: center !important;
    transition: transform .2s ease !important;
}

.nav .nav-links .nav-menu[open] summary::after {
    transform: translateY(-1.3px) rotate(180deg) !important;
}

/* In the mobile menu every dropdown is a single column */
@media (max-width: 1350px) {
    .nav .nav-links .process-menu,
    .nav .nav-links .process-menu:has(> a:nth-child(9)) {
        width: 100% !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-flow: row !important;
        grid-template-rows: none !important;
    }
}

/* =========================================================
   ZOHO SALESIQ CHAT
   The embedded steps on the Pricing page are the same site loaded in an iframe, so
   the chat widget would appear a second time inside the panel. Best is to not print
   the script at all in embed mode (see footer.php); this is a safety net for when a
   plugin injects it.
   ========================================================= */

html.embed-pricing .zsiq_floatmain,
html.embed-pricing .zsiq_custommain,
html.embed-pricing #zsiq_float,
html.embed-pricing #zsiq_agtpic,
html.embed-pricing [id^="zsiq"],
html.embed-pricing [class^="zsiq"] {
    display: none !important;
}

/* =========================================================
   STICKY FOOTER
   Short pages left a strip of background under the footer. This pins the footer to the
   bottom of the window when the content is shorter than the screen, and changes nothing
   on longer pages. The embedded steps (?embed=1) are left alone so they do not stretch
   inside their iframes. laptop-view.css zooms the page to 80% on desktop, which shrinks
   100dvh as well, so that is divided back out under the same conditions.
   ========================================================= */

html:not(.embed-pricing) body.zenro-page {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

html:not(.embed-pricing) body.zenro-page > main {
    flex: 1 0 auto;
}

html:not(.embed-pricing) body.zenro-page > .footer {
    margin-top: auto;
}

@media screen and (min-width: 1024px) and (hover: hover) {
    html:not(.embed-pricing) body.zenro-page {
        min-height: calc(100dvh / 0.8);
    }
}