/*! Zeonix Plan Builder - styles. Everything is scoped under #zeo-plan-builder. Theme colours are the --zx-* variables below. */ /* THEME TOKENS - change these to match the site (all colours come from here) */ #zeo-plan-builder { --zx-primary: #f9900f; /* brand orange: buttons, active states */ --zx-primary-dark: #d97a05; /* hover */ --zx-primary-text: #b85f00; /* orange for small text on white (better contrast) */ --zx-secondary: #111111; /* black: headings, dark panels */ --zx-accent: #f9900f; /* highlights, savings, badges */ --zx-soft: #fff4e3; /* soft orange tint backgrounds */ --zx-border: #e6e6e6; --zx-text: #333333; --zx-muted: #777777; --zx-radius: 14px; font-family: inherit; /* inherits the host website font */ color: var(--zx-text); padding: 2.5rem 0 5rem; } #zeo-plan-builder h1, #zeo-plan-builder h2, #zeo-plan-builder h3, #zeo-plan-builder h4, #zeo-plan-builder h5, #zeo-plan-builder h6 { color: var(--zx-secondary); } #zeo-plan-builder .zx-eyebrow { display:inline-block; font-size:.78rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--zx-primary-text); margin-bottom:.5rem; } #zeo-plan-builder .zx-step { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:var(--zx-primary); color:#111; font-size:.85rem; font-weight:600; margin-right:.6rem; } /* Sector cards */ #zeo-plan-builder .zx-sector { height:100%; width:100%; text-align:left; background:#fff; border:1.5px solid var(--zx-border); border-radius:var(--zx-radius); padding:.9rem 1rem; display:flex; gap:.75rem; align-items:flex-start; transition:all .18s ease; cursor:pointer; color:var(--zx-text); } #zeo-plan-builder .zx-sector:hover { border-color:var(--zx-primary); transform:translateY(-2px); } #zeo-plan-builder .zx-sector .zx-ico { flex:0 0 40px; height:40px; border-radius:10px; background:var(--zx-soft); color:var(--zx-primary); display:flex; align-items:center; justify-content:center; font-size:1.2rem; } #zeo-plan-builder .zx-sector .zx-title { font-weight:600; color:var(--zx-secondary); font-size:.93rem; line-height:1.25; } #zeo-plan-builder .zx-sector.active { border-color:var(--zx-primary); background:var(--zx-soft); box-shadow:0 0 0 3px rgba(249,144,15,.20); } #zeo-plan-builder .zx-sector.active .zx-ico { background:var(--zx-primary); color:#111; } /* ---- Side panel (sectors) ---- */ #zeo-plan-builder .zx-side { background:#fff; border:1.5px solid var(--zx-border); border-radius:var(--zx-radius); padding:1.1rem; } @media (min-width:992px){ #zeo-plan-builder .zx-side { position:sticky; top:20px; } } #zeo-plan-builder .zx-sector-list { display:flex; flex-direction:column; gap:.5rem; } #zeo-plan-builder .zx-sector { height:auto; padding:.75rem .85rem; align-items:center; } #zeo-plan-builder .zx-sector .zx-meta { display:block; font-size:.72rem; color:var(--zx-muted); font-weight:400; margin-top:.1rem; } #zeo-plan-builder .zx-sector.active { border-left:5px solid var(--zx-primary); } @media (max-width:991.98px){ #zeo-plan-builder .zx-sector-list { flex-direction:row; overflow-x:auto; padding-bottom:.4rem; } #zeo-plan-builder .zx-sector { flex:0 0 235px; } } /* ---- Sector navigation list (left panel) ---- */ #zeo-plan-builder .zx-sector { display:flex; align-items:center; gap:.75rem; width:100%; height:auto; padding:.7rem .8rem; background:transparent; border:1.5px solid transparent; border-left:4px solid transparent; border-radius:12px; color:var(--zx-text); text-align:left; position:static; overflow:visible; transform:none; } #zeo-plan-builder .zx-sector:hover { background:#f6f6f6; border-color:transparent; border-left-color:transparent; transform:none; } #zeo-plan-builder .zx-sector .zx-ico { flex:0 0 38px; height:38px; border-radius:10px; background:#f1f1f1; color:var(--zx-secondary); font-size:1.1rem; } #zeo-plan-builder .zx-sector .zx-title { flex:1; font-size:.92rem; font-weight:600; color:var(--zx-secondary); line-height:1.25; } #zeo-plan-builder .zx-sector .zx-meta { display:block; font-size:.72rem; font-weight:400; color:var(--zx-muted); margin-top:.1rem; } #zeo-plan-builder .zx-sector .zx-chev { margin-left:auto; font-size:.8rem; color:#c2c2c2; } #zeo-plan-builder .zx-sector.active { background:var(--zx-soft); border-color:var(--zx-soft); border-left-color:var(--zx-primary); box-shadow:none; } #zeo-plan-builder .zx-sector.active .zx-ico { background:var(--zx-primary); color:#111; } #zeo-plan-builder .zx-sector.active .zx-chev { color:var(--zx-primary-text); } @media (max-width:991.98px){ #zeo-plan-builder .zx-sector { background:#fff; border:1.5px solid var(--zx-border); border-left-width:1.5px; } #zeo-plan-builder .zx-sector.active { border-color:var(--zx-primary); } #zeo-plan-builder .zx-sector .zx-chev { display:none; } } /* ---- Highlighted industry panel (dark, orange active item) ---- */ #zeo-plan-builder .zx-side { background:#111; border-color:#111; box-shadow:0 14px 34px rgba(0,0,0,.20); } #zeo-plan-builder .zx-side h6 { color:#fff; } #zeo-plan-builder .zx-sector { color:#e9e9e9; } #zeo-plan-builder .zx-sector:hover { background:rgba(255,255,255,.09); } #zeo-plan-builder .zx-sector .zx-ico { background:rgba(255,255,255,.10); color:#fff; } #zeo-plan-builder .zx-sector .zx-title { color:#fff; } #zeo-plan-builder .zx-sector .zx-meta { color:rgba(255,255,255,.6); } #zeo-plan-builder .zx-sector .zx-chev { color:rgba(255,255,255,.35); } #zeo-plan-builder .zx-sector.active, #zeo-plan-builder .zx-sector.active:hover { background:var(--zx-primary); border-color:var(--zx-primary); border-left-color:var(--zx-primary); } #zeo-plan-builder .zx-sector.active .zx-title { color:#111; } #zeo-plan-builder .zx-sector.active .zx-meta { color:rgba(0,0,0,.65); } #zeo-plan-builder .zx-sector.active .zx-ico { background:#111; color:var(--zx-primary); } #zeo-plan-builder .zx-sector.active .zx-chev { color:#111; } @media (max-width:991.98px){ #zeo-plan-builder .zx-sector { background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.14); } #zeo-plan-builder .zx-sector.active { background:var(--zx-primary); border-color:var(--zx-primary); } } /* tablets: show the industries as a 2-column grid instead of a scrolling strip */ @media (min-width:576px) and (max-width:991.98px){ #zeo-plan-builder .zx-sector-list { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); overflow:visible; padding-bottom:0; } #zeo-plan-builder .zx-sector { flex:none; min-width:0; } } #zeo-plan-builder .zx-module { cursor:pointer; } #zeo-plan-builder .zx-module:active { transform:scale(.995); } /* ---- Module cards (2-up grid, code badge as in the design PDF) ---- */ #zeo-plan-builder .zx-module { display:flex; flex-direction:column; } #zeo-plan-builder .zx-module .zx-price { margin-top:auto; padding-top:.8rem; } #zeo-plan-builder .zx-code { flex:0 0 44px; width:44px; height:44px; font-size:.74rem; font-weight:700; letter-spacing:.02em; } /* ---- Request pop-up ---- */ #zeo-plan-builder .zx-modal { border:0; border-radius:16px; overflow:hidden; } #zeo-plan-builder .zx-modal .modal-header { background:#111; border:0; padding:1.1rem 1.4rem; align-items:flex-start; } #zeo-plan-builder .zx-modal .modal-title { color:#fff; } #zeo-plan-builder .zx-modal .modal-header .small { color:rgba(255,255,255,.7); } #zeo-plan-builder .zx-modal .btn-close { filter:invert(1) grayscale(1) brightness(2); opacity:.9; } #zeo-plan-builder .zx-modal .modal-body { padding:1.4rem; } #zeo-plan-builder .zx-modal .modal-footer { border-top:1px solid var(--zx-border); padding:.9rem 1.4rem; } #zeo-plan-builder .zx-modal .form-label { font-weight:600; color:var(--zx-secondary); font-size:.9rem; } #zeo-plan-builder .zx-modal .form-control { border:1.5px solid var(--zx-border); border-radius:10px; padding:.65rem .8rem; } #zeo-plan-builder .zx-modal .form-control:focus { border-color:var(--zx-primary); box-shadow:0 0 0 .2rem rgba(249,144,15,.25); } #zeo-plan-builder .zx-modal .form-control.is-invalid { border-color:#dc3545; background-image:none; } #zeo-plan-builder .zx-sum { background:var(--zx-soft); border-radius:12px; padding:1rem 1.1rem; font-size:.88rem; color:var(--zx-text); } #zeo-plan-builder .zx-sum h6 { font-size:.74rem; text-transform:uppercase; letter-spacing:.09em; color:var(--zx-primary-text); margin-bottom:.7rem; } #zeo-plan-builder .zx-sum .zx-row { display:flex; justify-content:space-between; gap:1rem; padding:.18rem 0; } #zeo-plan-builder .zx-sum .zx-row strong { color:var(--zx-secondary); text-align:right; } #zeo-plan-builder .zx-sum ul { list-style:none; padding:0; margin:.35rem 0 .7rem; } #zeo-plan-builder .zx-sum li { display:flex; justify-content:space-between; gap:.8rem; padding:.35rem 0; border-bottom:1px dashed rgba(0,0,0,.14); } #zeo-plan-builder .zx-sum li span:last-child { white-space:nowrap; font-weight:600; color:var(--zx-secondary); } #zeo-plan-builder .zx-sum .zx-grand { font-size:1.4rem; font-weight:700; color:var(--zx-secondary); line-height:1.1; } #zeo-plan-builder .zx-done { text-align:center; padding:2.2rem 1rem; } #zeo-plan-builder .zx-done > i { font-size:3.2rem; color:var(--zx-primary); } /* Sector description strip */ #zeo-plan-builder .zx-usecase { background:var(--zx-secondary); color:#e8e8e8; border-radius:var(--zx-radius); padding:1rem 1.25rem; font-size:.92rem; } #zeo-plan-builder .zx-usecase strong { color:#fff; } /* Module cards */ #zeo-plan-builder .zx-module { position:relative; height:100%; background:#fff; cursor:pointer; border:1.5px solid var(--zx-border); border-radius:var(--zx-radius); padding:1.1rem 1.1rem 1rem; transition:all .18s ease; } #zeo-plan-builder .zx-module:hover { border-color:var(--zx-primary); box-shadow:0 8px 24px rgba(0,0,0,.08); } #zeo-plan-builder .zx-module.selected { border-color:var(--zx-primary); background:var(--zx-soft); box-shadow:0 0 0 3px rgba(249,144,15,.20); } #zeo-plan-builder .zx-module .form-check-input { width:1.25rem; height:1.25rem; margin:0; cursor:pointer; border-color:#b5b5b5; } #zeo-plan-builder .form-check-input:checked { background-color:var(--zx-primary); border-color:var(--zx-primary); } #zeo-plan-builder .form-check-input:focus { box-shadow:0 0 0 .2rem rgba(249,144,15,.28); border-color:var(--zx-primary); } #zeo-plan-builder .zx-module .zx-mico { width:42px; height:42px; border-radius:10px; background:var(--zx-soft); color:var(--zx-primary-text); display:flex; align-items:center; justify-content:center; font-size:1.25rem; } #zeo-plan-builder .zx-module.selected .zx-mico { background:var(--zx-primary); color:#111; } #zeo-plan-builder .zx-price { font-weight:700; color:var(--zx-secondary); font-size:1.05rem; } #zeo-plan-builder .zx-price small { font-weight:400; color:var(--zx-muted); font-size:.75rem; } #zeo-plan-builder .zx-chip { display:inline-block; font-size:.74rem; padding:.18rem .55rem; margin:0 .25rem .3rem 0; border-radius:20px; background:#f5f5f5; color:var(--zx-text); border:1px solid var(--zx-border); } #zeo-plan-builder .zx-module.selected .zx-chip { background:#fff; } /* Users stepper */ #zeo-plan-builder .zx-stepper { display:inline-flex; border:1.5px solid var(--zx-border); border-radius:10px; overflow:hidden; background:#fff; } #zeo-plan-builder .zx-stepper button { width:42px; border:0; background:var(--zx-soft); color:var(--zx-primary-text); font-size:1.1rem; font-weight:600; } #zeo-plan-builder .zx-stepper button:hover { background:var(--zx-primary); color:#111; } #zeo-plan-builder .zx-stepper input { width:80px; border:0; text-align:center; font-weight:600; color:var(--zx-secondary); outline:none; -moz-appearance:textfield; } #zeo-plan-builder .zx-stepper input::-webkit-outer-spin-button, #zeo-plan-builder .zx-stepper input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; } #zeo-plan-builder .form-range::-webkit-slider-thumb { background:var(--zx-primary); } #zeo-plan-builder .form-range::-moz-range-thumb { background:var(--zx-primary); } /* Billing toggle */ #zeo-plan-builder .zx-toggle { display:inline-flex; background:#fff; border:1.5px solid var(--zx-border); border-radius:50px; padding:3px; } #zeo-plan-builder .zx-toggle button { border:0; background:transparent; border-radius:50px; padding:.38rem 1rem; font-size:.86rem; font-weight:600; color:var(--zx-muted); } #zeo-plan-builder .zx-toggle button.active { background:var(--zx-primary); color:#111; } #zeo-plan-builder .zx-save { background:#111; color:#fff; font-size:.7rem; padding:.15rem .5rem; border-radius:20px; margin-left:.3rem; font-weight:600; } /* users stepper inside the cart */ #zeo-plan-builder .zx-cart-users { border-bottom:1px dashed var(--zx-border); } #zeo-plan-builder .zx-stepper-sm button { width:36px; } #zeo-plan-builder .zx-stepper-sm input { width:64px; padding:.3rem 0; } /* billing plan picker inside the cart */ #zeo-plan-builder .zx-plans { display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem; } #zeo-plan-builder .zx-plan { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:.2rem; padding:.55rem .25rem; background:#fff; border:1.5px solid var(--zx-border); border-radius:10px; font-size:.8rem; color:var(--zx-text); cursor:pointer; transition:all .15s; } #zeo-plan-builder .zx-plan:hover { border-color:var(--zx-primary); } #zeo-plan-builder .zx-plan.active { border-color:var(--zx-primary); background:var(--zx-soft); box-shadow:0 0 0 3px rgba(249,144,15,.20); } #zeo-plan-builder .zx-plan-name { font-weight:700; color:var(--zx-secondary); } #zeo-plan-builder .zx-plan-price { font-size:.72rem; color:var(--zx-muted); } #zeo-plan-builder .zx-plan .zx-save { margin:0; font-size:.65rem; padding:.05rem .4rem; } /* Cart */ #zeo-plan-builder .zx-cart { background:#fff; border:1.5px solid var(--zx-border); border-radius:var(--zx-radius); box-shadow:0 12px 36px rgba(0,0,0,.08); overflow:hidden; } @media (min-width:992px){ #zeo-plan-builder .zx-cart-sticky { position:sticky; top:20px; } } #zeo-plan-builder .zx-cart-head { background:var(--zx-secondary); color:#fff; padding:1rem 1.25rem; display:flex; justify-content:space-between; align-items:center; } #zeo-plan-builder .zx-cart-head h5 { color:#fff; margin:0; font-size:1.05rem; } #zeo-plan-builder .zx-count { background:var(--zx-accent); color:#111; border-radius:20px; font-size:.75rem; padding:.15rem .6rem; font-weight:600; } #zeo-plan-builder .zx-cart-body { padding:1.1rem 1.25rem; } #zeo-plan-builder .zx-line { display:flex; justify-content:space-between; align-items:flex-start; gap:.75rem; padding:.6rem 0; border-bottom:1px dashed var(--zx-border); font-size:.9rem; } #zeo-plan-builder .zx-line:last-child { border-bottom:0; } #zeo-plan-builder .zx-line .zx-lname { font-weight:600; color:var(--zx-secondary); } #zeo-plan-builder .zx-line .zx-lsub { color:var(--zx-muted); font-size:.78rem; } #zeo-plan-builder .zx-remove { border:0; background:none; color:#b5b5b5; padding:0 .25rem; font-size:1rem; } #zeo-plan-builder .zx-remove:hover { color:#dc3545; } #zeo-plan-builder .zx-total { background:var(--zx-soft); border-radius:12px; padding:.9rem 1rem; } #zeo-plan-builder .zx-total .zx-big { font-size:1.7rem; font-weight:700; color:var(--zx-secondary); line-height:1.1; } #zeo-plan-builder .zx-empty { text-align:center; color:var(--zx-muted); padding:1.5rem .5rem; font-size:.9rem; } #zeo-plan-builder .zx-empty i { font-size:2rem; color:#d0d0d0; display:block; margin-bottom:.4rem; } #zeo-plan-builder .btn-zx { background:var(--zx-primary); border:1.5px solid var(--zx-primary); color:#111; font-weight:600; border-radius:10px; padding:.7rem 1.2rem; } #zeo-plan-builder .btn-zx:hover:not(:disabled) { background:var(--zx-primary-dark); border-color:var(--zx-primary-dark); color:#111; } #zeo-plan-builder .btn-zx:disabled { opacity:.5; } #zeo-plan-builder .btn-zx-outline { background:transparent; border:1.5px solid var(--zx-primary); color:var(--zx-primary-text); font-weight:600; border-radius:10px; } #zeo-plan-builder .btn-zx-outline:hover { background:var(--zx-primary); color:#111; } #zeo-plan-builder .zx-link { color:var(--zx-primary-text); background:none; border:0; font-size:.85rem; font-weight:600; padding:0; } #zeo-plan-builder .zx-link:hover { text-decoration:underline; } /* Mobile total bar */ #zeo-mobile-bar { position:fixed; left:0; right:0; bottom:0; z-index:1030; background:#111; color:#fff; padding:.7rem 1rem; display:none; align-items:center; justify-content:space-between; box-shadow:0 -6px 20px rgba(0,0,0,.15); } @media (max-width:991.98px){ #zeo-mobile-bar { display:flex; } } #zeo-mobile-bar a { background:#f9900f; color:#111; text-decoration:none; padding:.45rem 1rem; border-radius:8px; font-weight:600; font-size:.88rem; } /* ---- Loading / error states (API driven) ---- */ #zeo-plan-builder .zx-skel { border-radius:12px; background:linear-gradient(90deg,#eee 25%,#f7f7f7 37%,#eee 63%); background-size:400% 100%; animation:zxShimmer 1.3s ease infinite; } #zeo-plan-builder .zx-side .zx-skel { background:linear-gradient(90deg,rgba(255,255,255,.08) 25%,rgba(255,255,255,.16) 37%,rgba(255,255,255,.08) 63%); background-size:400% 100%; } #zeo-plan-builder .zx-skel-sector { height:56px; } #zeo-plan-builder .zx-skel-module { height:104px; } @keyframes zxShimmer { 0%{background-position:100% 50%} 100%{background-position:0 50%} } #zeo-plan-builder .zx-error { background:#fff5f5; border:1.5px solid #f1c0c0; color:#8a1f1f; border-radius:12px; padding:1rem 1.1rem; font-size:.9rem; } #zeo-plan-builder .zx-side .zx-error { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.25); color:#fff; } #zeo-plan-builder .zx-side .zx-error .zx-link { color:#f9900f; } #zeo-plan-builder .zx-hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; } #zeo-plan-builder .zx-form-error { background:#fff5f5; border:1.5px solid #f1c0c0; color:#8a1f1f; border-radius:10px; padding:.6rem .8rem; font-size:.85rem; margin-bottom:1rem; } #zeo-plan-builder .zx-ref { display:inline-block; background:var(--zx-soft); color:var(--zx-secondary); font-weight:700; padding:.2rem .7rem; border-radius:20px; margin-top:.4rem; } #zeo-plan-builder .spinner-border-sm { vertical-align:-2px; } /* ---- "Your plan" locked until a module is selected ---- */ #zeo-plan-builder .zx-cart.is-locked .zx-cart-users, #zeo-plan-builder .zx-cart.is-locked #cartPlans, #zeo-plan-builder .zx-cart.is-locked #cartTotals { opacity:.45; filter:grayscale(1); pointer-events:none; user-select:none; } #zeo-plan-builder .zx-cart.is-locked .zx-plan, #zeo-plan-builder .zx-cart.is-locked .zx-stepper button, #zeo-plan-builder .zx-cart.is-locked #quoteBtn { cursor:not-allowed; } #zeo-plan-builder .zx-cart.is-locked .zx-cart-head { opacity:.85; } #zeo-plan-builder .zx-cart .zx-plan:disabled { opacity:1; } #zeo-plan-builder .zx-stepper input:disabled { background:transparent; }