/*
 * The order flow: the one-field checker, and the focused plans, checkout and
 * confirmation pages.
 *
 * The focused pages print without the theme's stylesheets (see
 * ED_ISP_Order_Flow::dequeue_theme), so this file styles everything on them
 * from scratch, WooCommerce's checkout fields included. The checker sits on
 * ordinary pages and is scoped to .ed-checker.
 *
 * Colours, font and corners come from the style the checker is placed with
 * (Styles: Checker type "Order flow"), set as the variables below on the
 * checker's root and on the focused page; the values here are the design's,
 * for anything that comes without one.
 */

.ed-flow,
.ed-checker {
    --ed-ink: #192a3d;
    --ed-muted: #5b6472;
    --ed-blue: #145ae2;
    --ed-blue-dark: #124cbf;
    --ed-blue-deep: #1450c4;
    --ed-blue-soft: #f1f5fe;
    --ed-blue-tile: #e8effd;
    --ed-line: #e6e7ea;
    --ed-line-strong: #c3c4c7;
    --ed-yellow: #f8cd3b;
    --ed-yellow-dark: #e8b81f;
    --ed-bg: #f4f6fa;
    --ed-green: #17663f;
    --ed-green-soft: #e7f3ec;
    --ed-red: #b42318;
    --ed-dark: var(--ed-ink);
    --ed-btn-text: #192a3d;
    --ed-label: #192a3d;
    --ed-card: #ffffff;
    --ed-price: #145ae2;
    --ed-check: #145ae2;
    --ed-radius: 16px;
    --ed-radius-sm: min(var(--ed-radius), 10px);
    --ed-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
    --ed-shadow-lift: 0 2px 4px rgba(16, 24, 40, 0.05), 0 18px 40px rgba(20, 90, 226, 0.12);
}

/* ==================================================================
   Shared pieces
   ================================================================== */

.ed-flow *,
.ed-flow *::before,
.ed-flow *::after,
.ed-checker *,
.ed-checker *::before,
.ed-checker *::after {
    box-sizing: border-box;
}

.ed-flow [hidden],
.ed-checker [hidden] {
    display: none !important;
}

.ed-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: var(--ed-radius-sm);
    font: inherit;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.ed-btn--block {
    display: flex;
    width: 100%;
}

.ed-btn--y {
    background-color: var(--ed-yellow);
    color: var(--ed-btn-text);
}

.ed-btn--y:hover,
.ed-btn--y:focus-visible {
    background-color: var(--ed-yellow-dark);
    color: var(--ed-btn-text);
}

.ed-btn--ghost {
    background-color: #fff;
    border-color: var(--ed-line-strong);
    color: var(--ed-ink);
}

.ed-btn--ghost:hover,
.ed-btn--ghost:focus-visible {
    border-color: var(--ed-ink);
    color: var(--ed-ink);
}

.ed-btn--dark {
    background-color: var(--ed-dark);
    color: #fff;
}

.ed-btn--dark:hover,
.ed-btn--dark:focus-visible {
    background-color: #0f1c2b;
    color: #fff;
}

.ed-btn--text {
    min-height: 44px;
    background: none;
    color: var(--ed-ink);
}

.ed-btn--text:hover {
    text-decoration: underline;
}

.ed-btn.is-busy {
    opacity: 0.7;
    cursor: progress;
}

.ed-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ed-blue);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.ed-link:hover {
    color: var(--ed-blue-dark);
}

.ed-label {
    display: block;
    margin: 0 0 8px;
    color: var(--ed-label);
    font-size: 15px;
    font-weight: 600;
}

.ed-optional {
    color: var(--ed-muted);
    font-weight: 400;
}

.ed-input {
    display: block;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid var(--ed-line-strong);
    border-radius: var(--ed-radius-sm);
    background-color: #fff;
    color: var(--ed-ink);
    font: inherit;
    font-size: 16px;
    line-height: 1.4;
    box-shadow: none;
}

.ed-input:focus {
    border-color: var(--ed-blue);
    outline: 3px solid rgba(20, 90, 226, 0.15);
    outline-offset: 0;
}

.ed-input.is-invalid {
    border-color: var(--ed-red);
}

.ed-form-msg {
    margin: 12px 0 0;
    color: var(--ed-green);
    font-size: 15px;
}

.ed-form-msg--error {
    color: var(--ed-red);
}

.ed-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background-color: var(--ed-yellow);
    color: var(--ed-btn-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    vertical-align: middle;
}

.ed-icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background-color: var(--ed-blue-tile);
    color: var(--ed-blue);
}

.ed-icon-tile--warm {
    background-color: #fdf3d9;
    color: var(--ed-ink);
}

.ed-flow .screen-reader-text,
.ed-checker .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==================================================================
   The checker (on any page)
   ================================================================== */

.ed-checker {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 48px 52px 44px;
    border-radius: var(--ed-radius);
    background-color: var(--ed-card);
    color: var(--ed-ink);
    font-family: var(--ed-font, inherit);
    font-size: 16px;
    line-height: 1.5;
    text-align: left;
    box-shadow: var(--ed-shadow-lift);
}

.ed-checker__label {
    display: block;
    margin: 0 0 12px;
    color: var(--ed-label);
    font-size: 17px;
    font-weight: 700;
}

.ed-checker__field {
    position: relative;
}

.ed-checker__pin {
    position: absolute;
    top: 50%;
    left: 22px;
    z-index: 1;
    color: var(--ed-blue);
    transform: translateY(-50%);
    pointer-events: none;
}

/* Specific enough to beat a theme's input[type="text"] rules. */
.ed-checker .ed-checker__field input.ed-checker__input {
    display: block;
    width: 100%;
    height: 60px;
    min-height: 60px;
    max-width: none;
    margin: 0;
    padding: 0 20px 0 58px;
    border: 2px solid var(--ed-line-strong);
    border-radius: 12px;
    background: #fff;
    color: var(--ed-ink);
    font: inherit;
    font-size: 18px;
    line-height: normal;
    box-shadow: none;
}

.ed-checker .ed-checker__field input.ed-checker__input:focus {
    border-color: var(--ed-blue);
    outline: none;
}

.ed-checker input.ed-input {
    height: auto;
    min-height: 52px;
    max-width: none;
    padding: 12px 16px;
    border: 1px solid var(--ed-line-strong);
    border-radius: var(--ed-radius-sm);
    background-color: #fff;
    color: var(--ed-ink);
    font: inherit;
    font-size: 16px;
    line-height: 1.4;
    box-shadow: none;
}

.ed-checker input.ed-input:focus {
    border-color: var(--ed-blue);
    outline: 3px solid rgba(20, 90, 226, 0.15);
}

.ed-checker__go {
    min-height: 58px;
    margin-top: 20px;
    font-size: 19px;
}

.ed-checker__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
    margin-top: 18px;
    color: var(--ed-muted);
    font-size: 15px;
}

.ed-checker__privacy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ed-checker__manual-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.ed-checker__title {
    margin: 0;
    color: var(--ed-ink);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
}

.ed-checker__found {
    margin: 6px 0 0;
    color: var(--ed-muted);
}

.ed-checker__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 18px 18px;
    margin-top: 22px;
}

.ed-checker__cell--street {
    grid-column: span 3;
}

.ed-checker__cell--door {
    grid-column: span 2;
}

.ed-checker--compact {
    padding: 24px;
}

.ed-checker--compact .ed-checker__field input.ed-checker__input {
    height: 52px;
    min-height: 52px;
    font-size: 16px;
}

.ed-checker--compact .ed-checker__go {
    min-height: 52px;
    margin-top: 14px;
    font-size: 17px;
}

.ed-checker--compact .ed-checker__grid {
    grid-template-columns: 1fr 1fr;
}

.ed-checker--compact .ed-checker__cell--street,
.ed-checker--compact .ed-checker__cell--door {
    grid-column: span 2;
}

/* Inside a white box of the page (style "Order Flow (in a box)"): no card
   of its own - no shadow, no corners, little room around it - so it reads
   as part of that box. flow-root and no transform, so the box grows with
   it to its last line instead of the checker hanging out of the bottom. */
.ed-checker.ed-checker--flat {
    display: flow-root;
    max-width: 760px;
    margin: 0 auto;
    padding: 8px 0 12px;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    animation: none;
}

/* Elementor lays a box's widgets out as flex items, which it may squeeze
   below their own height. Its widget keeps its height, and the negative
   margins a design may give the shortcode's container (-5px above, -20px
   below on the IIH homepage, made to tighten the classic checker) are
   undone: with them the box counted the checker 25px short and it hung out
   of the bottom. !important, as Elementor writes those per element. */
.elementor-widget:has(.ed-checker--flat) {
    flex-shrink: 0;
}

.elementor-widget-container:has(.ed-checker--flat) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Google's suggestions, dressed as the design's list - while an order flow
   checker's field has the focus (ed-pac-flow on <html>, set by the script):
   Google shows only the dropdown of the field being typed in, so that one
   is ours. A classic checker's keeps its own styling, and its page-wide
   .pac-container rules (a mini checker in the footer) do not reach ours:
   these are more specific, and set what those would. Clearly a list
   floating over the card, not more card: on a phone it lies over the
   button and the text under the field, and a faint edge made it hard to
   tell apart. */
.ed-pac-flow .pac-container {
    z-index: 100000;
    margin-top: 8px;
    padding: 0;
    border: 1px solid #c3cad6;
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 14px 36px rgba(16, 24, 40, 0.18), 0 2px 6px rgba(16, 24, 40, 0.08);
    font-family: inherit;
    overflow: hidden;
}

.ed-pac-flow .pac-container::after {
    margin: 0 16px 8px;
}

/* The whole address, over two lines if it must - Google cuts it off
   ("Boedapest, ...") where a phone has no room for it. */
.ed-pac-flow .pac-item {
    padding: 14px 20px;
    border-top: 1px solid #e6e7ea;
    color: #192a3d;
    font-size: 16px;
    line-height: 1.4;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    cursor: pointer;
}

.ed-pac-flow .pac-item:first-child {
    border-top: 0;
}

.ed-pac-flow .pac-item:hover,
.ed-pac-flow .pac-item-selected {
    background-color: #f1f5fe;
}

.ed-pac-flow .pac-item-query {
    color: #192a3d;
    font-size: 16px;
    font-weight: inherit;
}

.ed-pac-flow .pac-matched {
    color: inherit;
    font-weight: 700;
}

.ed-pac-flow .pac-icon {
    display: none;
}

/* ==================================================================
   The focused page shell
   ================================================================== */

body.ed-isp-focus {
    margin: 0;
    background-color: #f4f6fa;
}

/* SalesAssist on the flow's pages: the chat opens from "Chat with us" in
   the header; its own floating button, label, badge and welcome bubble
   stay hidden - they covered the plans, the upsell and the order bar. The
   header's link clicks the hidden button, which still opens the chat. */
/* The flow's pages load none of the theme's styles, and with them went
   the font the chat takes from the theme: it fell back to the browser's
   serif. The page and the chat use the flow's font. */
body.ed-isp-focus {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

body.ed-isp-focus #edsa-widget {
    --edsa-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}

body.ed-isp-focus #edsa-launcher,
body.ed-isp-focus #edsa-launcher-label,
body.ed-isp-focus #edsa-badge,
body.ed-isp-focus #edsa-welcome-bubble {
    display: none !important;
}

/* A flow page is never wider than the screen. Something on the checkout
   - a captcha or payment widget a few pixels too wide - made the page
   wider than the phone, and whatever is fixed to the screen spans the
   page: the order bar ran out past the right edge with it. clip, not
   hidden, on the body: hidden would make it a scroll box and stop the
   summary sticking on wide screens. */
html:has(> body.ed-isp-focus) {
    overflow-x: hidden;
    overflow-x: clip;
}

body.ed-isp-focus {
    overflow-x: clip;
}

.ed-flow {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--ed-bg);
    color: var(--ed-ink);
    font-family: var(--ed-font, Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.ed-flow a {
    color: var(--ed-blue);
}

/* A link dressed as a button keeps the button's colours: the rule above
   made "Go to my account" blue on yellow. */
.ed-flow a.ed-btn {
    text-decoration: none;
}

.ed-flow a.ed-btn--y,
.ed-flow a.ed-btn--y:visited,
.ed-flow a.ed-btn--y:hover,
.ed-flow a.ed-btn--y:focus-visible {
    color: var(--ed-btn-text);
}

.ed-flow a.ed-btn--dark,
.ed-flow a.ed-btn--dark:visited,
.ed-flow a.ed-btn--dark:hover,
.ed-flow a.ed-btn--dark:focus-visible {
    color: #fff;
}

.ed-flow a.ed-btn--ghost,
.ed-flow a.ed-btn--ghost:visited,
.ed-flow a.ed-btn--ghost:hover,
.ed-flow a.ed-btn--ghost:focus-visible {
    color: var(--ed-ink);
}

.ed-flow__wrap {
    width: 100%;
    max-width: 1232px;
    margin: 0 auto;
    padding: 0 16px;
}

.ed-flow__narrow {
    max-width: 760px;
    margin: 0 auto;
}

.ed-flow__topbar {
    background-color: var(--ed-blue-deep);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

.ed-flow__topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 36px;
}

.ed-flow__header {
    border-bottom: 1px solid var(--ed-line);
    background-color: #fff;
}

.ed-flow__header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 76px;
}

.ed-flow__brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--ed-ink) !important;
    text-decoration: none;
}

.ed-flow__logo {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: contain;
}

.ed-flow__brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.ed-flow__brand-name {
    font-size: 19px;
    font-weight: 700;
}

.ed-flow__brand-tagline {
    color: var(--ed-muted);
    font-size: 14px;
    font-style: italic;
}

.ed-flow__header-side {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ed-muted);
    font-size: 15px;
}

.ed-flow__secure {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ed-muted);
}

.ed-flow__secure svg {
    color: var(--ed-green);
}

.ed-flow__chat {
    font-weight: 600;
}

.ed-flow__main {
    flex: 1 0 auto;
    padding: 28px 0 64px;
}

.ed-flow__footer {
    border-top: 1px solid var(--ed-line);
    background-color: #fff;
    color: var(--ed-muted);
    font-size: 14px;
}

.ed-flow__footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
    min-height: 64px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.ed-flow__footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.ed-flow__footer-links a {
    color: var(--ed-muted);
    text-decoration: none;
}

.ed-flow__footer-links a:hover {
    color: var(--ed-ink);
    text-decoration: underline;
}

.ed-h1 {
    margin: 0;
    color: var(--ed-ink);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.ed-h2 {
    margin: 0;
    color: var(--ed-ink);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.ed-h3 {
    margin: 0 0 6px;
    color: var(--ed-ink);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
}

.ed-h4 {
    margin: 0;
    color: var(--ed-ink);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.ed-muted {
    margin: 0;
    color: var(--ed-muted);
}

.ed-small {
    font-size: 14px;
}

.ed-card {
    border: 1px solid var(--ed-line);
    border-radius: var(--ed-radius);
    background-color: var(--ed-card);
    box-shadow: var(--ed-shadow);
}

.ed-card--pad {
    padding: 28px 32px;
}

.ed-card--section {
    padding: 28px 28px 30px;
}

.ed-card + .ed-card {
    margin-top: 20px;
}

/* Steps */
.ed-steps {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
    color: var(--ed-muted);
    font-size: 15px;
    font-weight: 600;
}

.ed-steps__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.ed-steps__item + .ed-steps__item::before {
    content: "";
    width: 36px;
    height: 2px;
    margin-right: 4px;
    background-color: var(--ed-line-strong);
}

.ed-steps__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 2px solid var(--ed-line-strong);
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
}

.ed-steps__item.is-current {
    color: var(--ed-ink);
}

.ed-steps__item.is-current .ed-steps__num {
    border-color: var(--ed-ink);
    background-color: var(--ed-ink);
    color: #fff;
}

.ed-steps__item.is-done {
    color: var(--ed-ink);
}

.ed-steps__item.is-done .ed-steps__num {
    border-color: var(--ed-blue);
    background-color: var(--ed-blue);
    color: #fff;
}

.ed-steps__item.is-current::before,
.ed-steps__item.is-done + .ed-steps__item::before {
    background-color: var(--ed-blue);
}

/* ==================================================================
   Plans
   ================================================================== */

.ed-result {
    display: flex;
    align-items: center;
    gap: 22px;
}

.ed-result__check {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--ed-green-soft);
    color: var(--ed-green);
}

.ed-result__address {
    margin: 4px 0 0;
    color: var(--ed-muted);
    font-size: 17px;
}

.ed-result__address a {
    font-weight: 600;
}

.ed-plans-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
    margin: 44px 0 26px;
}

.ed-terms {
    display: inline-flex;
    gap: 4px;
    padding: 6px;
    border: 1px solid var(--ed-line);
    border-radius: 14px;
    background-color: #fff;
}

.ed-terms__opt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 120px;
    padding: 10px 18px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--ed-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ed-terms__opt:hover {
    background-color: var(--ed-bg);
}

.ed-terms__name {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
}

.ed-terms__sub {
    color: var(--ed-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
}

.ed-terms__opt.is-active {
    background-color: var(--ed-dark);
    color: #fff;
}

.ed-terms__opt.is-active .ed-terms__sub {
    color: var(--ed-yellow);
}

.ed-plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.ed-plans--count-1,
.ed-plans--split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ed-plans--count-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ed-plans--count-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ed-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 32px 28px 28px;
    border: 1px solid var(--ed-line);
    border-radius: var(--ed-radius);
    background-color: var(--ed-card);
    box-shadow: var(--ed-shadow);
}

.ed-plan--featured {
    border: 2px solid var(--ed-blue);
    box-shadow: var(--ed-shadow-lift);
}

.ed-plan__badge {
    position: absolute;
    top: 0;
    left: 50%;
    padding: 4px 14px;
    border-radius: 999px;
    background-color: var(--ed-yellow);
    color: var(--ed-btn-text);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transform: translate(-50%, -50%);
}

.ed-plan__name {
    margin: 0;
    color: var(--ed-ink);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
}

.ed-plan__tagline {
    margin: 4px 0 0;
    color: var(--ed-muted);
}

.ed-plan__speeds {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin: 16px 0 0;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--ed-line);
    font-size: 16px;
    font-weight: 600;
}

.ed-plan__speeds span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ed-plan__speeds svg {
    color: var(--ed-blue);
}

.ed-plan__pricing {
    margin-top: 24px;
}

.ed-plan__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin: 0;
}

.ed-plan__before {
    color: var(--ed-muted);
    font-size: 20px;
    font-weight: 500;
}

.ed-plan__amount {
    color: var(--ed-price);
    font-size: 46px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}

.ed-plan__period {
    color: var(--ed-muted);
    font-size: 18px;
}

.ed-plan__per {
    margin: 10px 0 0;
    color: var(--ed-muted);
    font-size: 15px;
}

.ed-plan__install {
    margin: 8px 0 0;
    color: var(--ed-muted);
    font-size: 15px;
    font-weight: 600;
}

.ed-plan__install.is-good {
    color: var(--ed-green);
}

.ed-plan__features {
    display: grid;
    gap: 10px;
    margin: 22px 0 28px;
    padding: 0;
    list-style: none;
}

.ed-plan__features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
}

.ed-plan__features svg {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--ed-check);
}

.ed-plan__choose {
    margin-top: auto;
}

.ed-fiber-check {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 36px 36px 32px;
}

.ed-fiber-check .ed-h3 {
    margin-top: 18px;
    font-size: 26px;
}

.ed-stack-form {
    display: grid;
    gap: 12px;
    margin-top: auto;
    padding-top: 20px;
}

.ed-stack-form .ed-label {
    margin: 0;
}

.ed-plans-error {
    margin-top: 20px;
}

.ed-email-overview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 22px;
    margin-top: 44px;
}

.ed-email-overview__text {
    flex: 1 1 280px;
}

.ed-email-overview .ed-form-msg {
    flex-basis: 100%;
    margin: 0;
}

.ed-inline-form {
    display: flex;
    flex: 1 1 420px;
    gap: 12px;
}

.ed-inline-form .ed-input {
    flex: 1 1 auto;
}

.ed-inline-form .ed-btn {
    flex: 0 0 auto;
}

/* "Sent. Check your inbox." in the button's place. */
.ed-flow .ed-btn.is-sent,
.ed-flow .ed-btn.is-sent:hover {
    background-color: var(--ed-green);
    border-color: var(--ed-green);
    color: #fff;
    cursor: default;
    transform: none;
    animation: ed-fade 0.25s ease;
}

.ed-notify {
    margin-top: 20px;
}

.ed-notify .ed-inline-form {
    margin-top: 18px;
}

.ed-after {
    margin-top: 64px;
}

.ed-after__steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.ed-after__steps li {
    display: flex;
    gap: 16px;
    margin: 0;
}

.ed-after__steps p {
    margin: 4px 0 0;
    color: var(--ed-muted);
}

.ed-after__num {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--ed-blue-tile);
    color: var(--ed-blue);
    font-weight: 700;
}

.ed-expired .ed-checker {
    margin-top: 24px;
    padding: 0;
    box-shadow: none;
}

/* The upsell */
.ed-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.ed-modal__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(25, 42, 61, 0.45);
}

.ed-modal__panel {
    position: relative;
    width: 100%;
    max-width: 460px;
    padding: 30px 30px 18px;
    border-radius: 18px;
    background-color: #fff;
    box-shadow: 0 24px 60px rgba(16, 24, 40, 0.25);
}

.ed-modal__panel .ed-h3 {
    margin: 18px 0 6px;
    font-size: 26px;
    line-height: 1.25;
}

.ed-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background-color: var(--ed-bg);
    color: var(--ed-ink);
    cursor: pointer;
}

.ed-modal__target {
    margin: 0 0 4px;
    color: var(--ed-blue);
    font-weight: 600;
}

.ed-modal__panel .ed-btn--y {
    margin-top: 22px;
}

body.ed-modal-open {
    overflow: hidden;
}

/* ==================================================================
   Checkout
   ================================================================== */

.ed-checkout-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin-bottom: 18px;
}

.ed-checkout-top .ed-steps {
    margin: 0;
}

.ed-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    border: 1px solid var(--ed-line);
    border-radius: 999px;
    background-color: #fff;
    color: var(--ed-muted) !important;
    font-size: 15px;
    text-decoration: none;
}

.ed-chip strong {
    color: var(--ed-ink);
}

.ed-chip svg:last-of-type {
    color: var(--ed-blue);
}

.ed-chip:hover {
    border-color: var(--ed-line-strong);
}

.ed-login .woocommerce-form-login {
    margin: 0 0 20px;
    padding: 24px 28px;
    border: 1px solid var(--ed-line);
    border-radius: var(--ed-radius);
    background: #fff;
}

.ed-flow form.ed-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 32px;
    align-items: start;
}

.ed-checkout__intro {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px 24px;
    margin-bottom: 24px;
}

.ed-checkout__intro .ed-h1 {
    font-size: 36px;
}

.ed-checkout__intro .ed-muted {
    margin-top: 6px;
    font-size: 17px;
}

.ed-checkout__login {
    margin: 0;
    color: var(--ed-muted);
}

.ed-checkout__login a {
    font-weight: 600;
}

.ed-checkout__side {
    position: sticky;
    top: 24px;
}

.ed-section-sub {
    margin: -2px 0 18px;
}

/* WooCommerce's own fields, in the design's form */
.ed-flow .ed-checkout .woocommerce-billing-fields > h3,
.ed-flow .ed-checkout .woocommerce-shipping-fields,
.ed-flow .ed-checkout .woocommerce-additional-fields > h3 {
    display: none;
}

.ed-flow .ed-checkout .woocommerce-billing-fields__field-wrapper {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 20px 20px;
    margin-top: 18px;
}

.ed-flow .ed-checkout .woocommerce-billing-fields__field-wrapper .form-row {
    grid-column: span 12;
    margin: 0;
    padding: 0;
    float: none;
    width: auto;
}

.ed-flow .ed-checkout .woocommerce-billing-fields__field-wrapper .form-row-first,
.ed-flow .ed-checkout .woocommerce-billing-fields__field-wrapper .form-row-last {
    grid-column: span 6;
}

/* The phone number: intl-tel-input (assets/vendor), dressed as the other
   fields. The country sits inside the field, flag and code, behind a thin
   divider; its list opens under the field with a search on top. */
.ed-flow .ed-checkout .iti,
body.ed-isp-focus .iti--fullscreen-popup {
    --iti-border-color: var(--ed-line, #e6e7ea);
    --iti-hover-color: var(--ed-blue-soft, #f1f5fe);
    --iti-icon-color: var(--ed-muted, #5b6472);
    --iti-country-selector-bg: #fff;
    --iti-spacer-horizontal: 14px;
    --iti-arrow-padding: 8px;
}

.ed-flow .ed-checkout .iti {
    display: block;
    width: 100%;
}

.ed-flow .ed-checkout .iti__country-container {
    padding: 1px;
}

.ed-flow .ed-checkout .iti__selected-country {
    border-radius: var(--ed-radius-sm) 0 0 var(--ed-radius-sm);
    cursor: pointer;
}

.ed-flow .ed-checkout .iti__selected-country-primary {
    position: relative;
    border-radius: var(--ed-radius-sm) 0 0 var(--ed-radius-sm);
    transition: background-color 0.15s ease;
}

/* The line between the country and the number. */
.ed-flow .ed-checkout .iti__selected-country-primary::after {
    content: "";
    position: absolute;
    top: 12px;
    right: 0;
    bottom: 12px;
    width: 1px;
    background-color: var(--ed-line);
}

.ed-flow .ed-checkout .iti__selected-country:hover .iti__selected-country-primary,
.ed-flow .ed-checkout .iti__selected-country:focus-visible .iti__selected-country-primary {
    background-color: var(--ed-bg);
}

.ed-flow .ed-checkout .iti__selected-country:focus-visible {
    outline: none;
}

.ed-flow .ed-checkout .iti__selected-dial-code {
    margin-left: 8px;
    color: var(--ed-ink);
    font-size: 16px;
    font-weight: 600;
}

.ed-flow .ed-checkout .iti__flag {
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.08);
}

.ed-flow .ed-checkout .iti__arrow {
    margin-left: 10px;
    transition: transform 0.2s ease;
}

/* The list, under the field. */
.ed-flow .ed-checkout .iti--inline-country-selector .iti__country-selector {
    margin-top: 6px;
    border: 1px solid var(--ed-line);
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 16px 40px rgba(16, 24, 40, 0.16);
    overflow: hidden;
    animation: ed-fade 0.16s ease backwards;
}

.ed-flow .ed-checkout .iti--inline-country-selector .iti__country-list {
    max-height: 288px;
}

.ed-flow .ed-checkout .iti__search-input {
    min-height: 48px;
    background: #fff;
    color: var(--ed-ink);
    font: inherit;
    font-size: 15px;
    box-shadow: none;
    outline: none;
}

.ed-flow .ed-checkout .iti__country {
    gap: 2px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: var(--ed-ink);
    font-size: 15px;
}

.ed-flow .ed-checkout .iti__country.iti__highlight {
    background-color: var(--ed-blue-soft);
}

.ed-flow .ed-checkout .iti__dial-code {
    color: var(--ed-muted);
}

.ed-flow .ed-checkout .iti__country-check {
    color: var(--ed-blue);
}

.ed-flow .ed-checkout .iti__no-results {
    color: var(--ed-muted);
    font-size: 15px;
}

/* On a phone the list is a sheet over the page. */
body.ed-isp-focus .iti--fullscreen-popup .iti__country-selector {
    border-radius: 14px;
}

body.ed-isp-focus .iti--fullscreen-popup .iti__search-input {
    min-height: 52px;
    font-size: 16px;
}

body.ed-isp-focus .iti--fullscreen-popup .iti__country {
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 16px;
}

.ed-flow .ed-checkout .ed-phone .input-text.is-invalid {
    border-color: var(--ed-red);
}

.ed-flow .ed-checkout .ed-isp-hidden-field {
    display: none !important;
}

.ed-flow .ed-checkout .form-row label {
    display: block;
    margin: 0 0 8px;
    color: var(--ed-label);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.ed-flow .ed-checkout .form-row label .required {
    display: none;
}

.ed-flow .ed-checkout .form-row label .optional {
    color: var(--ed-muted);
    font-weight: 400;
}

.ed-flow .ed-checkout .form-row .input-text,
.ed-flow .ed-checkout .form-row select,
.ed-login .input-text {
    display: block;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid var(--ed-line-strong);
    border-radius: var(--ed-radius-sm);
    background-color: #fff;
    color: var(--ed-ink);
    font: inherit;
    font-size: 16px;
    box-shadow: none;
    appearance: auto;
}

.ed-flow .ed-checkout .form-row .input-text:focus,
.ed-flow .ed-checkout .form-row select:focus {
    border-color: var(--ed-blue);
    outline: 3px solid rgba(20, 90, 226, 0.15);
    outline-offset: 0;
}

.ed-flow .ed-checkout .form-row.woocommerce-invalid .input-text,
.ed-flow .ed-checkout .form-row.woocommerce-invalid select,
.ed-flow .ed-checkout .form-row .input-text.is-invalid {
    border-color: var(--ed-red);
}

.ed-flow .ed-checkout .form-row .description {
    display: block !important;
    margin: 8px 0 0;
    color: var(--ed-muted);
    font-size: 14px;
    position: static;
    padding: 0;
    background: none;
}

.ed-flow .ed-checkout .form-row .description::before {
    display: none;
}

.ed-field-error {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    color: var(--ed-red);
    font-size: 14px;
}

.ed-flow .ed-checkout .woocommerce-account-fields {
    grid-column: span 12;
    margin-top: 12px;
}

/* Extras */
.ed-extras {
    border: 1px solid var(--ed-line);
    border-radius: 12px;
    overflow: hidden;
}

.ed-extra {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 4px 16px;
    align-items: start;
    padding: 20px 22px;
}

.ed-extra + .ed-extra {
    border-top: 1px solid var(--ed-line);
}

.ed-extra.is-on {
    background-color: var(--ed-blue-soft);
}

.ed-extra__check {
    width: 22px;
    height: 22px;
    margin: 2px 0 0;
    accent-color: var(--ed-blue);
    cursor: pointer;
}

.ed-extra__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    cursor: pointer;
}

.ed-extra__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--ed-ink);
    font-weight: 700;
}

.ed-extra__text {
    color: var(--ed-muted);
    font-size: 15px;
}

.ed-extra__price {
    color: var(--ed-ink);
    font-weight: 700;
    white-space: nowrap;
    text-align: right;
}

.ed-extra__each {
    display: block;
    color: var(--ed-muted);
    font-size: 13px;
    font-weight: 500;
}

.ed-qty {
    display: inline-flex;
    grid-column: 2;
    align-items: center;
    gap: 2px;
    margin-top: 10px;
    border: 1px solid var(--ed-line-strong);
    border-radius: 10px;
    background: #fff;
    justify-self: start;
}

.ed-qty__btn {
    width: 40px;
    height: 38px;
    border: 0;
    background: none;
    color: var(--ed-ink);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.ed-qty__value {
    min-width: 28px;
    font-weight: 700;
    text-align: center;
}

/* Payment: WooCommerce's gateways as cards */
.ed-flow .ed-payment #payment {
    background: none;
    border-radius: 0;
}

.ed-flow .ed-payment #payment ul.payment_methods {
    display: grid;
    gap: 12px;
    margin: 18px 0 0;
    padding: 0;
    border: 0;
    list-style: none;
}

.ed-flow .ed-payment #payment ul.payment_methods li {
    margin: 0;
    padding: 18px 20px;
    border: 1px solid var(--ed-line-strong);
    border-radius: 12px;
    background: #fff;
    line-height: 1.4;
}

.ed-flow .ed-payment #payment ul.payment_methods li:has(input:checked) {
    border: 2px solid var(--ed-blue);
    padding: 17px 19px;
}

.ed-flow .ed-payment #payment ul.payment_methods li > input {
    width: 20px;
    height: 20px;
    margin: 0 12px 0 0;
    vertical-align: middle;
    accent-color: var(--ed-blue);
}

.ed-flow .ed-payment #payment ul.payment_methods li > label {
    display: inline;
    color: var(--ed-ink);
    font-weight: 700;
    cursor: pointer;
}

.ed-flow .ed-payment #payment ul.payment_methods li > label img {
    max-height: 22px;
    margin-left: 8px;
    vertical-align: middle;
}

.ed-flow .ed-payment #payment div.payment_box {
    margin: 16px 0 0;
    padding: 0;
    background: none;
    color: var(--ed-muted);
    font-size: 15px;
}

.ed-flow .ed-payment #payment div.payment_box::before {
    display: none;
}

.ed-flow .ed-payment #payment div.place-order {
    margin: 24px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid var(--ed-line);
}

.ed-flow .ed-payment .woocommerce-terms-and-conditions-wrapper {
    margin-bottom: 18px;
}

.ed-flow .ed-payment .woocommerce-form__label-for-checkbox {
    display: flex !important;
    align-items: flex-start;
    gap: 12px;
    color: var(--ed-ink);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.45;
}

.ed-flow .ed-payment .woocommerce-form__label-for-checkbox input {
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--ed-blue);
    flex: 0 0 auto;
}

.ed-flow .ed-checkout #payment #place_order {
    display: block;
    float: none;
    width: 100%;
    min-height: 60px;
    padding: 14px 24px;
    border: 0;
    border-radius: var(--ed-radius-sm);
    background-color: var(--ed-yellow);
    color: var(--ed-btn-text);
    font: inherit;
    font-size: 19px;
    font-weight: 700;
    cursor: pointer;
}

.ed-flow .ed-checkout #payment #place_order:hover {
    background-color: var(--ed-yellow-dark);
}

/* The button's colours hold against a site's own checkout CSS: the IIH
   sites colour #place_order blue with !important for their old checkout
   (Elementor custom code), which turned this one dark blue. */
.ed-flow .ed-checkout #payment #place_order,
.ed-flow .ed-checkout #payment #place_order:focus {
    border-color: transparent !important;
    background-color: var(--ed-yellow) !important;
    color: var(--ed-btn-text) !important;
}

.ed-flow .ed-checkout #payment #place_order:hover {
    border-color: transparent !important;
    background-color: var(--ed-yellow-dark) !important;
    color: var(--ed-btn-text) !important;
}

.ed-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 28px;
    margin: 16px 0 0;
    color: var(--ed-muted);
    font-size: 14px;
}

/* The summary */
.ed-summary {
    padding: 28px 28px 26px;
    border: 1px solid var(--ed-line);
    border-radius: var(--ed-radius);
    background-color: var(--ed-card);
    box-shadow: var(--ed-shadow);
}

.ed-summary .ed-h3 {
    margin-bottom: 16px;
}

.ed-summary__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--ed-line);
}

.ed-summary__row:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.ed-summary__meta {
    display: block;
    margin-top: 2px;
    color: var(--ed-muted);
    font-size: 14px;
}

/* The plan's name, with the way back to the plans beside it. */
.ed-summary__name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
}

.ed-flow .ed-summary__change {
    color: var(--ed-blue);
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Down and up as on the plan cards, then the term, each with its icon -
   one line, compact enough for the narrow column. A term too long for it
   ("Maandelijks opzegbaar") moves under the speeds whole, rather than
   running out of the card; the icon starts that line as it does the
   others. */
.ed-summary__specs {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 10px;
    font-size: 13px;
}

.ed-summary__speed,
.ed-summary__term {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

.ed-summary__speed svg,
.ed-summary__term svg {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    color: var(--ed-blue);
}

/* The figures need no more room than they take. */
.ed-summary__row--package > div:first-child {
    min-width: 0;
}

.ed-summary__amount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

.ed-summary__amount s {
    color: var(--ed-muted);
    font-size: 14px;
    font-weight: 400;
}

.ed-summary__free {
    color: var(--ed-green);
    font-weight: 700;
}

.ed-summary__once {
    color: var(--ed-muted);
    font-size: 13px;
    font-weight: 400;
}

.ed-summary__row--coupon a {
    margin-left: 6px;
    font-size: 14px;
}

.ed-summary__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
    padding-top: 18px;
    border-top: 1px solid var(--ed-line);
    font-size: 18px;
    font-weight: 700;
}

.ed-summary__total strong {
    color: var(--ed-price);
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.ed-summary__total-sub {
    margin: 2px 0 0;
    color: var(--ed-muted);
    font-size: 14px;
    text-align: right;
}

/* Under the total: the coupon on the left, "Incl. VAT" on the right, each
   on one line in every language. Only when the two do not fit side by
   side does the right one move under the left, still on the right. */
.ed-summary__total-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 12px;
}

.ed-summary__total-subs {
    margin-left: auto;
}

.ed-summary__total-subs .ed-summary__total-sub,
.ed-summary__total-once {
    white-space: nowrap;
}

.ed-coupon__toggle {
    font-size: 14px;
    text-align: left;
    white-space: nowrap;
}

.ed-summary__note {
    display: flex;
    gap: 10px;
    margin: 18px 0 0;
    color: var(--ed-muted);
    font-size: 15px;
}

.ed-summary__note svg {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--ed-blue);
}

.ed-coupon__form {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.ed-coupon__form .ed-input {
    min-height: 46px;
}

.ed-coupon__form .ed-btn {
    min-height: 46px;
    font-size: 15px;
}

/* WooCommerce greys the summary and the payment out while it refreshes
   them - when the page opens too, though nothing has changed then. The
   summary stays as it is (its figures pulse when an extra changes them);
   the payment is only dimmed a little, and cannot be clicked meanwhile. */
.ed-flow .ed-summary .blockUI.blockOverlay,
.ed-flow .woocommerce-checkout-review-order-table .blockUI.blockOverlay {
    background: transparent !important;
    opacity: 0 !important;
}

.ed-flow .woocommerce-checkout-payment .blockUI.blockOverlay {
    background: rgba(255, 255, 255, 0.45) !important;
    opacity: 1 !important;
}

@keyframes ed-breathe {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.ed-flow .ed-summary.is-updating .ed-summary__amount,
.ed-flow .ed-summary.is-updating .ed-summary__total strong {
    animation: ed-breathe 1s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .ed-flow .ed-summary.is-updating .ed-summary__amount,
    .ed-flow .ed-summary.is-updating .ed-summary__total strong {
        animation: none;
        opacity: 0.5;
    }
}

/* WooCommerce puts its notices at the top of the checkout form, which is a
   two-column grid here: across both columns, not in the first one. */
.ed-flow form.ed-checkout > .woocommerce-NoticeGroup,
.ed-flow form.ed-checkout > .woocommerce-error,
.ed-flow form.ed-checkout > .woocommerce-message,
.ed-flow form.ed-checkout > .woocommerce-info {
    grid-column: 1 / -1;
    scroll-margin-top: 16px;
}

/* WooCommerce's notices on our pages */
.ed-flow .woocommerce-error,
.ed-flow .woocommerce-message,
.ed-flow .woocommerce-info,
.ed-flow .woocommerce-NoticeGroup-checkout ul {
    margin: 0 0 20px;
    padding: 16px 20px;
    border: 0;
    border-left: 4px solid var(--ed-blue);
    border-radius: 10px;
    background-color: #fff;
    color: var(--ed-ink);
    list-style: none;
    box-shadow: var(--ed-shadow);
}

.ed-flow .woocommerce-error,
.ed-flow .woocommerce-NoticeGroup-checkout .woocommerce-error {
    border-left-color: var(--ed-red);
}

/* The site hides WooCommerce's notices with a snippet of its own; in the
   flow a customer has to see why an order did not go through, and that a
   coupon was applied. */
.ed-flow .woocommerce-error,
.ed-flow .ed-coupon-notice .woocommerce-message,
.ed-flow .ed-coupon-notice .woocommerce-info {
    display: block !important;
}

.ed-flow .woocommerce-error::before,
.ed-flow .woocommerce-message::before,
.ed-flow .woocommerce-info::before {
    display: none;
}

.ed-flow .blockUI.blockOverlay {
    background-color: rgba(255, 255, 255, 0.6) !important;
}

/* ==================================================================
   Confirmation
   ================================================================== */

.ed-thanks {
    overflow: hidden;
}

.ed-thanks__hero {
    padding: 36px 32px 34px;
    background: linear-gradient(180deg, #1a5fe6 0%, #2e6fd9 100%);
    color: #fff;
    text-align: center;
}

.ed-thanks__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border: 7px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    background-color: #fff;
    color: var(--ed-blue);
    background-clip: padding-box;
}

.ed-thanks__title {
    margin: 18px 0 8px;
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
}

.ed-thanks__lede {
    max-width: 480px;
    margin: 0 auto;
    color: #fff;
    font-size: 17px;
}

.ed-thanks__lede strong {
    color: #fff;
}

.ed-thanks__body {
    padding: 34px 40px 40px;
}

.ed-timeline {
    margin: 18px 0 28px;
    padding: 0;
    list-style: none;
}

.ed-timeline li {
    position: relative;
    display: flex;
    gap: 16px;
    margin: 0;
    padding-bottom: 22px;
}

.ed-timeline li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 34px;
    bottom: 2px;
    left: 15px;
    width: 2px;
    background-color: var(--ed-line);
}

.ed-timeline p {
    margin: 2px 0 0;
    color: var(--ed-muted);
}

.ed-timeline__dot {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 2px solid var(--ed-line-strong);
    border-radius: 50%;
    background-color: #fff;
    color: var(--ed-muted);
    font-weight: 700;
}

.ed-timeline li.is-done .ed-timeline__dot {
    border-color: var(--ed-blue);
    background-color: var(--ed-blue);
    color: #fff;
}

.ed-timeline li.is-next .ed-timeline__dot {
    border-color: var(--ed-ink);
    background-color: var(--ed-ink);
    color: #fff;
}

/* ==================================================================
   Narrow screens
   ================================================================== */

@media (max-width: 1080px) {
    .ed-plans,
    .ed-plans--count-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ed-flow form.ed-checkout {
        grid-template-columns: minmax(0, 1fr) 330px;
        gap: 24px;
    }
}

@media (max-width: 860px) {
    .ed-flow__hide-sm {
        display: none !important;
    }

    .ed-flow__topbar-inner {
        min-height: 32px;
        font-size: 13px;
    }

    .ed-flow__header-inner {
        min-height: 64px;
    }

    .ed-flow__brand-tagline {
        display: none;
    }

    .ed-flow__logo {
        width: 40px;
        height: 40px;
    }

    .ed-flow__main {
        padding-top: 18px;
    }

    .ed-h1 {
        font-size: 24px;
    }

    .ed-h2 {
        font-size: 26px;
    }

    .ed-card--pad {
        padding: 22px 20px;
    }

    .ed-card--section {
        padding: 22px 18px 24px;
    }

    .ed-result {
        align-items: flex-start;
        gap: 14px;
    }

    .ed-result__check {
        width: 48px;
        height: 48px;
    }

    .ed-result__address {
        font-size: 15px;
    }

    .ed-plans-head {
        display: block;
        margin: 32px 0 18px;
    }

    .ed-terms {
        display: flex;
        width: 100%;
        margin-top: 16px;
    }

    .ed-terms__opt {
        flex: 1 1 0;
        align-items: center;
        min-width: 0;
        padding: 10px 6px;
        text-align: center;
    }

    .ed-plans,
    .ed-plans--count-1,
    .ed-plans--count-2,
    .ed-plans--count-4,
    .ed-plans--split {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    /* Name and speeds on the left, the price on the right */
    .ed-plan {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "head price"
            "rest rest"
            "list list"
            "cta cta";
        column-gap: 12px;
        padding: 26px 22px 22px;
    }

    .ed-plan__head {
        grid-area: head;
    }

    .ed-plan__pricing {
        display: contents;
    }

    .ed-plan__price {
        grid-area: price;
        flex-direction: column;
        align-items: flex-end;
        gap: 0;
        margin: 0;
        text-align: right;
    }

    .ed-plan__amount {
        font-size: 36px;
    }

    .ed-plan__per {
        grid-area: rest;
        display: none;
    }

    .ed-plan__install {
        grid-area: rest;
        margin-top: 14px;
        padding-bottom: 18px;
        border-bottom: 1px solid var(--ed-line);
    }

    .ed-plan__speeds {
        margin-top: 6px;
        padding-bottom: 0;
        border-bottom: 0;
        font-size: 15px;
    }

    .ed-plan__features {
        grid-area: list;
        margin: 18px 0 22px;
    }

    .ed-plan__choose {
        grid-area: cta;
    }

    .ed-plan__badge {
        left: 22px;
        transform: translate(0, -50%);
    }

    .ed-inline-form {
        flex-direction: column;
        flex-basis: 100%;
    }

    .ed-after__steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .ed-checker {
        padding: 26px 20px 24px;
    }

    .ed-checker__grid {
        grid-template-columns: 1fr 1fr;
    }

    .ed-checker__cell--street,
    .ed-checker__cell--door {
        grid-column: span 2;
    }

    .ed-checker__meta {
        flex-direction: column;
        align-items: flex-start;
    }

    /* The upsell becomes a sheet from the bottom */
    .ed-modal {
        align-items: flex-end;
        padding: 0;
    }

    .ed-modal__panel {
        max-width: none;
        padding: 30px 20px 22px;
        border-radius: 22px 22px 0 0;
    }

    .ed-modal__panel::before {
        content: "";
        position: absolute;
        top: 10px;
        left: 50%;
        width: 44px;
        height: 4px;
        border-radius: 2px;
        background-color: var(--ed-line-strong);
        transform: translateX(-50%);
    }

    .ed-flow form.ed-checkout {
        grid-template-columns: minmax(0, 1fr);
    }

    .ed-checkout__side {
        position: static;
        order: -1;
    }

    .ed-checkout__intro .ed-h1 {
        font-size: 28px;
    }

    .ed-flow .ed-checkout .woocommerce-billing-fields__field-wrapper .form-row-first,
    .ed-flow .ed-checkout .woocommerce-billing-fields__field-wrapper .form-row-last {
        grid-column: span 12;
    }

    .ed-chip {
        width: 100%;
    }

    /* The order button stays in reach: a white bar along the bottom of the
       screen, the button across it with 16px either side, as designed. */
    body.ed-isp-focus.woocommerce-checkout {
        padding-bottom: 112px;
    }

    /* !important on what places them: WooCommerce's and the payment
       plugins' own rules for #place_order still pushed the button out past
       the right edge of the screen. The button fills the bar as a flex
       item, so its width cannot add its padding to the bar's. */
    .ed-flow .ed-checkout .ed-placebar {
        position: fixed !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 1000;
        display: flex;
        width: auto !important;
        margin: 0 !important;
        padding: 14px 16px 22px;
        padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
        border-top: 1px solid #e6e7ea;
        background-color: #fff;
        box-shadow: 0 -4px 14px rgba(25, 42, 61, 0.1);
    }

    .ed-flow .ed-checkout #payment .ed-placebar #place_order {
        position: static !important;
        float: none !important;
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0;
        max-width: 100% !important;
        min-height: 56px;
        margin: 0 !important;
        box-sizing: border-box !important;
        border-radius: 12px;
        font-size: 17px;
        box-shadow: none;
    }

    /* WooCommerce's notices first, above the summary, where the page
       starts: not after it, out of sight. */
    .ed-flow form.ed-checkout > .woocommerce-NoticeGroup,
    .ed-flow form.ed-checkout > .woocommerce-error,
    .ed-flow form.ed-checkout > .woocommerce-message,
    .ed-flow form.ed-checkout > .woocommerce-info {
        order: -2;
    }

    .ed-thanks__body {
        padding: 28px 22px 30px;
    }

    .ed-thanks__title {
        font-size: 24px;
    }
}

/* ==================================================================
   Waiting, shown moving
   ================================================================== */

.ed-pagebar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100001;
    height: 3px;
    overflow: hidden;
    pointer-events: none;
}

.ed-pagebar span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 30%;
    background-color: #145ae2;
    animation: ed-slide 1.1s ease-in-out infinite;
}

.ed-btn.is-busy::before {
    content: "";
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ed-spin 0.7s linear infinite;
}

@keyframes ed-pulse {
    0% { opacity: 0.6; transform: scale(1); }
    100% { opacity: 0; transform: scale(2.6); }
}

@keyframes ed-slide {
    0% { transform: translateX(-110%); }
    100% { transform: translateX(320%); }
}

@keyframes ed-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ed-pagebar span,
    .ed-btn.is-busy::before {
        animation-duration: 3s;
    }
}

/* The way back to the plans from the checkout */
.ed-steps__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: inherit !important;
    text-decoration: none;
}

.ed-steps__link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ed-chip--fixed:hover {
    border-color: var(--ed-line);
}

/* ==================================================================
   Outside the flow, on the focused pages
   ================================================================== */

/* The theme's stylesheet is not on these pages, so neither is its rule
   that hides the "Skip to content" link until it is tabbed to. */
body.ed-isp-focus .screen-reader-text:not(:focus) {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body.ed-isp-focus .skip-link:focus {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 100002;
    padding: 10px 16px;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.18);
    color: #192a3d;
    font-weight: 600;
    text-decoration: none;
}

/* ==================================================================
   Motion: the same quiet fade-in-up the rest of the site uses
   ================================================================== */

@keyframes ed-rise {
    from { opacity: 0; transform: translate3d(0, 18px, 0); }
    to { opacity: 1; transform: none; }
}

@keyframes ed-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes ed-pop {
    0% { opacity: 0; transform: scale(0.6); }
    70% { opacity: 1; transform: scale(1.06); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes ed-draw {
    from { stroke-dashoffset: 22; }
    to { stroke-dashoffset: 0; }
}

@keyframes ed-zoom {
    from { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.96); }
    to { opacity: 1; transform: none; }
}

@keyframes ed-grow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes ed-bump {
    0% { transform: scale(1); }
    40% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

@keyframes ed-glow {
    0% { background-color: rgba(248, 205, 59, 0.55); }
    100% { background-color: rgba(248, 205, 59, 0); }
}

/* Each block comes up in turn as the page opens. "backwards" only holds
   the start while waiting, so hover effects still apply afterwards. */
.ed-flow__main .ed-steps,
.ed-flow__main .ed-result,
.ed-flow__main .ed-plans-head,
.ed-flow__main .ed-plan,
.ed-flow__main .ed-fiber-check,
.ed-flow__main .ed-email-overview,
.ed-flow__main .ed-after,
.ed-flow__main .ed-notify,
.ed-flow__main .ed-checkout-top,
.ed-flow__main .ed-checkout__intro,
.ed-flow__main .ed-checkout__main > .ed-card,
.ed-flow__main .ed-checkout__side,
.ed-flow__main .ed-thanks {
    animation: ed-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

.ed-flow__main .ed-result,
.ed-flow__main .ed-checkout__intro { animation-delay: 0.06s; }
.ed-flow__main .ed-plans-head,
.ed-flow__main .ed-notify { animation-delay: 0.12s; }
.ed-flow__main .ed-plan:nth-child(1),
.ed-flow__main .ed-checkout__main > .ed-card:nth-of-type(1) { animation-delay: 0.18s; }
.ed-flow__main .ed-plan:nth-child(2),
.ed-flow__main .ed-checkout__main > .ed-card:nth-of-type(2),
.ed-flow__main .ed-checkout__side { animation-delay: 0.24s; }
.ed-flow__main .ed-plan:nth-child(3),
.ed-flow__main .ed-fiber-check,
.ed-flow__main .ed-checkout__main > .ed-card:nth-of-type(3) { animation-delay: 0.3s; }
.ed-flow__main .ed-plan:nth-child(4) { animation-delay: 0.36s; }
.ed-flow__main .ed-email-overview { animation-delay: 0.4s; }
.ed-flow__main .ed-after { animation-delay: 0.46s; }

/* "Good news": the circle pops, then the tick draws itself. */
.ed-flow__main .ed-result__check,
.ed-flow__main .ed-thanks__mark {
    animation: ed-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s backwards;
}

.ed-flow__main .ed-result__check path,
.ed-flow__main .ed-thanks__mark path {
    stroke-dasharray: 22;
    animation: ed-draw 0.45s ease-out 0.7s backwards;
}

/* Step 2: the line from step 1 fills in. */
.ed-checkout-top .ed-steps__item.is-current::before {
    transform-origin: left center;
    animation: ed-grow 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s backwards;
}

/* The term choice: a pill that slides to the chosen term. */
.ed-terms {
    position: relative;
}

.ed-terms__opt {
    position: relative;
    z-index: 1;
    transition: background-color 0.2s ease, color 0.3s ease;
}

.ed-terms__sub {
    transition: color 0.3s ease;
}

.ed-terms__pill {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    border-radius: 10px;
    background-color: var(--ed-dark);
    box-shadow: 0 6px 16px rgba(16, 24, 40, 0.18);
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), height 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ed-terms__pill.is-still {
    transition: none;
}

.ed-terms.has-pill .ed-terms__opt.is-active,
.ed-terms.has-pill .ed-terms__opt.is-active:hover {
    background-color: transparent;
}

/* Figures that change with the term fade over. */
.ed-plan__before,
.ed-plan__per,
.ed-plan__install {
    transition: opacity 0.16s ease, transform 0.16s ease, color 0.3s ease;
}

.ed-flow .is-swapping {
    opacity: 0;
    transform: translateY(3px);
}

.ed-flow .ed-plan__before:not([hidden]) {
    animation: ed-fade 0.3s ease backwards;
}

/* Cards and buttons answer the pointer, a little. */
.ed-plan {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ed-btn {
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

@media (hover: hover) {
    .ed-plan:hover {
        transform: translateY(-4px);
        box-shadow: var(--ed-shadow-lift);
    }

    .ed-btn--y:hover,
    .ed-btn--dark:hover,
    .ed-btn--ghost:hover {
        transform: translateY(-1px);
    }

    .ed-btn--y:hover {
        box-shadow: 0 8px 18px rgba(232, 184, 31, 0.35);
    }
}

.ed-btn:active,
.ed-btn.is-busy {
    transform: none;
}

/* The upsell opens and closes softly. */
.ed-modal:not([hidden]) .ed-modal__backdrop {
    animation: ed-fade 0.25s ease backwards;
}

.ed-modal:not([hidden]) .ed-modal__panel {
    animation: ed-zoom 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

.ed-modal.is-closing .ed-modal__backdrop,
.ed-modal.is-closing .ed-modal__panel {
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.ed-modal.is-closing .ed-modal__panel {
    transform: translate3d(0, 6px, 0) scale(0.98);
}

/* The checkout: extras, quantities, the total, messages. */
.ed-extra {
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.ed-flow .ed-qty:not([hidden]) {
    animation: ed-fade 0.22s ease backwards;
}

.ed-flow .ed-qty__value.is-bump {
    display: inline-block;
    animation: ed-bump 0.25s ease;
}

.ed-flow .ed-summary__total strong.is-updated {
    margin: 0 -6px;
    padding: 0 6px;
    border-radius: 6px;
    animation: ed-glow 1.2s ease-out;
}

.ed-flow .ed-form-msg:not([hidden]),
.ed-flow .woocommerce-NoticeGroup,
.ed-flow .ed-field-error {
    animation: ed-rise 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

@media (prefers-reduced-motion: reduce) {
    .ed-flow__main .ed-steps,
    .ed-flow__main .ed-result,
    .ed-flow__main .ed-plans-head,
    .ed-flow__main .ed-plan,
    .ed-flow__main .ed-fiber-check,
    .ed-flow__main .ed-email-overview,
    .ed-flow__main .ed-after,
    .ed-flow__main .ed-notify,
    .ed-flow__main .ed-checkout-top,
    .ed-flow__main .ed-checkout__intro,
    .ed-flow__main .ed-checkout__main > .ed-card,
    .ed-flow__main .ed-checkout__side,
    .ed-flow__main .ed-thanks,
    .ed-flow__main .ed-result__check,
    .ed-flow__main .ed-thanks__mark,
    .ed-flow__main .ed-result__check path,
    .ed-flow__main .ed-thanks__mark path,
    .ed-checkout-top .ed-steps__item.is-current::before,
    .ed-flow .ed-plan__before:not([hidden]),
    .ed-modal:not([hidden]) .ed-modal__backdrop,
    .ed-modal:not([hidden]) .ed-modal__panel,
    .ed-flow .ed-qty:not([hidden]),
    .ed-flow .ed-qty__value.is-bump,
    .ed-flow .ed-summary__total strong.is-updated,
    .ed-flow .ed-form-msg:not([hidden]),
    .ed-flow .woocommerce-NoticeGroup,
    .ed-flow .ed-field-error {
        animation: none;
    }

    .ed-terms__pill,
    .ed-plan,
    .ed-btn {
        transition: none;
    }

    .ed-plan:hover,
    .ed-btn:hover {
        transform: none;
    }
}