/* ============================================================================
   Product Configurator 2026 — TEL-707
   ----------------------------------------------------------------------------
   Refreshed Product Builder design. EVERY rule here is scoped to
   #new-config-form.pb-2026 so it has higher specificity than the shared
   #new-config-form base rules in productconfig-style.css. This keeps the live
   2024 Product Builder (ProductConfigurator2024) completely unaffected.

   Palette
     Brand green (primary action / accent) .. #8CC63F  (hover #7CB332)
     Selected tile fill ..................... #EAF4D8
     Panel background ....................... #F2F2F2
     Card border ............................ #E0E0E0
     Body / label text ...................... #333333
     Muted intro text ....................... #777777
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. Page top spacing — tighten the header -> title gap (TEL-707 client feedback)
      The shared base stacks 100px (.container in teletrac-style.css) + 30px
      (.slim-layout .prodconfig-maintitle, the wrapper of the hidden page-name
      h1) above the title. Collapse the orphan maintitle padding and trim the
      container's top padding so the title sits ~40px below the header.
      padding-TOP only — the 100px bottom padding before the footer is kept.
      NOTE: .prodconfig-maintitle sits OUTSIDE #new-config-form, so it is scoped
      via .pb2026-page (unique to this template) rather than the usual id hook.
   --------------------------------------------------------------------------- */
.slim-layout.pb2026-page .prodconfig-maintitle {
    padding-top: 0;
}

#new-config-form.pb-2026 {
    padding-top: 40px;
}

/* ---------------------------------------------------------------------------
   1. Page intro (title + paragraph) — sits ABOVE the grey panel
   --------------------------------------------------------------------------- */
#new-config-form.pb-2026 .pb2026-intro {
    text-align: center;
}

#new-config-form.pb-2026 .pb2026-maintitle {
    color: #98c220;      /* match live /build-your-solution title (site theme green) */
    font-weight: 500;
    font-size: 30px;
    margin: 0 0 10px;
}

#new-config-form.pb-2026 .pb2026-intro p {
    color: #777;
    font-size: 16px;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 540px;
}

/* ---------------------------------------------------------------------------
   2. Grey panel — wraps each step (heading + answers/fields + button)
   --------------------------------------------------------------------------- */
#new-config-form.pb-2026 .pb2026-panel.div-prodconfig-question {
    background: #F2F2F2;
    border-radius: 12px;
    padding: 26px 40px 30px;
    margin: 0 auto 24px;
    max-width: 720px;
    text-align: center;
}

#new-config-form.pb-2026 .pb2026-panel.div-prodconfig-question.active {
    display: block;
}

#new-config-form.pb-2026 .pb2026-panel > [class*="col-"],
#new-config-form.pb-2026 .pb2026-panel .col-12 {
    padding-left: 0;
    padding-right: 0;
}

#new-config-form.pb-2026 .pb2026-panel .row {
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 768px) {
    #new-config-form.pb-2026 .pb2026-panel.div-prodconfig-question {
        padding: 20px 18px 24px;
    }
}

/* ---------------------------------------------------------------------------
   3. Step nav — "< BACK" link (left) + "STEP X OF Y" (right)
   --------------------------------------------------------------------------- */
#new-config-form.pb-2026 .pb2026-stepnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 16px;
}

/* Reset the inherited .tel-backup circular-button look into a flat text link */
#new-config-form.pb-2026 .pb2026-back,
#new-config-form.pb-2026 .pb2026-back:hover,
#new-config-form.pb-2026 .pb2026-back:active,
#new-config-form.pb-2026 .pb2026-back:focus {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    color: #8CC63F;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

#new-config-form.pb-2026 .pb2026-back:hover {
    color: #6FA12C;
}

#new-config-form.pb-2026 .pb2026-back svg {
    vertical-align: middle;
}

#new-config-form.pb-2026 .pb2026-stepindicator {
    color: #8CC63F;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-left: auto;
}

/* ---------------------------------------------------------------------------
   4. Question heading inside the panel
   --------------------------------------------------------------------------- */
#new-config-form.pb-2026 .pb2026-panel h2.h3 {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    text-align: center;
    padding: 0;
    margin: 0 0 22px;
}

#new-config-form.pb-2026 .pb2026-panel .divSubnote {
    margin-bottom: 18px;
}

/* ---------------------------------------------------------------------------
   5. Answer grid — 3 columns (desktop) / stacked (mobile)
   --------------------------------------------------------------------------- */
@media (min-width: 769px) {
    #new-config-form.pb-2026 .div-answer-wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
        width: 100%;
    }
}

@media (max-width: 768px) {
    #new-config-form.pb-2026 .div-answer-wrapper {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
        margin: 0;
    }
}

/* ---------------------------------------------------------------------------
   6. Answer tiles — base look (applies to both breakpoints)
   --------------------------------------------------------------------------- */
#new-config-form.pb-2026 .form-check.div-answer {
    background: #fff;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    margin-bottom: 0;
    transition: background-color .2s ease, border-color .2s ease;
}

/* ---------------------------------------------------------------------------
   6b. Selection control — one clean styled circle (radio + checkbox)
       The shared base CSS (productconfig-style.css) fakes the control with an
       ::after circle layered over a STILL-VISIBLE native input. This layout
       repositions/rescales the input so the fake circle no longer covers the
       native one, leaving two circles. Fix: hide the native control with
       appearance:none, style the input box itself as the circle, and switch the
       inherited ::after off so exactly one circle renders.
   --------------------------------------------------------------------------- */
#new-config-form.pb-2026 .form-check.div-answer .form-check-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid #777;
    border-radius: 50%;
    background-color: #fff;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}

/* Kill the inherited ::after fake circle in every state / breakpoint */
#new-config-form.pb-2026 .form-check.div-answer .form-check-input::after,
#new-config-form.pb-2026 .form-check.div-answer .form-check-input:checked::after {
    content: none;
    display: none;
}

/* Single-select: brand-green fill with a thin white inner ring */
#new-config-form.pb-2026 .radio-input .form-check-input:checked {
    background-color: #8CC63F;
    border-color: #8CC63F;
    box-shadow: inset 0 0 0 2px #fff;
}

/* Multi-select: same green circle with a white check glyph */
#new-config-form.pb-2026 .check-input .form-check-input:checked {
    background-color: #8CC63F;
    border-color: #8CC63F;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23fff" class="bi bi-check" viewBox="0 0 16 16"%3E%3Cpath d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
}

@media (min-width: 769px) {
    #new-config-form.pb-2026 .form-check.div-answer {
        display: block;
        position: relative;
        min-height: 78px;
        padding: 0;
    }

    #new-config-form.pb-2026 .form-check.div-answer .form-check-input {
        position: absolute;
        top: 12px;
        left: 12px;
        transform: none;
        margin: 0;
        z-index: 2;
    }

    #new-config-form.pb-2026 .form-check.div-answer .form-check-label {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        min-height: 78px;
        margin: 0;
        padding: 10px 12px;
        box-sizing: border-box;
    }

    #new-config-form.pb-2026 .form-check.div-answer .form-check-label img {
        position: static;
        order: -1;            
        width: 36px;
        height: auto;
        margin: 0;
    }

    #new-config-form.pb-2026 .form-check.div-answer .form-check-label-text {
        position: static;
        text-align: center;
        font-size: 13px;
        line-height: 1.3;
    }

    /* (Selection-control circle is styled in section 6b — no ::after here.) */
}

/* --- MOBILE: row layout (radio left, label, icon right) --- */
@media (max-width: 768px) {
    #new-config-form.pb-2026 .form-check.div-answer {
        display: flex;
        align-items: center;
        position: relative;
        padding: 0;
        min-height: 54px;
    }

    #new-config-form.pb-2026 .form-check.div-answer .form-check-input {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%) scale(1.3);
        margin: 0;
        z-index: 2;
    }

    #new-config-form.pb-2026 .form-check.div-answer .form-check-label {
        display: flex;
        align-items: center;
        width: 100%;
        margin: 0;
        padding: 8px 14px 8px 46px;
        text-align: left;
    }

    #new-config-form.pb-2026 .form-check.div-answer .form-check-label-text {
        flex: 1 1 auto;
        font-size: 15px;
    }

    #new-config-form.pb-2026 .form-check.div-answer .form-check-label img {
        flex: 0 0 auto;
        width: 36px;
        margin-left: 12px;
    }
}

/* ---------------------------------------------------------------------------
   7. Three states: default -> hover -> selected
   --------------------------------------------------------------------------- */
/* Hover (pointer devices): radio/checkbox ring turns green */
@media (min-width: 769px) {
    #new-config-form.pb-2026 .form-check.div-answer:hover {
        border-color: #B5D98A;
    }

    #new-config-form.pb-2026 .form-check.div-answer:hover .form-check-input {
        border-color: #8CC63F;
    }
}

/* Selected ("click" / "press"): whole tile green + filled green control */
#new-config-form.pb-2026 .form-check.div-answer.active,
#new-config-form.pb-2026 .form-check.div-answer.sup-new-border.active,
#new-config-form.pb-2026 .form-check.div-answer.sup-popular-border.active {
    background-color: #EAF4D8;
    border-color: #8CC63F;
}

/* ---------------------------------------------------------------------------
   8. NEW / POPULAR badges — pinned to the top-right corner, kept on select
   --------------------------------------------------------------------------- */
#new-config-form.pb-2026 .sup-new,
#new-config-form.pb-2026 .sup-popular {
    position: absolute;
    top: 0;
    right: 12px;
    width: 52px;
    height: 17px;
    padding-top: 3px;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    font-size: 7px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .03em;
    text-align: center;
    color: #fff;
    box-sizing: border-box;
    z-index: 3;
}

#new-config-form.pb-2026 .sup-new {
    background-color: #17A2B8;
}

#new-config-form.pb-2026 .sup-popular {
    background-color: #E8602C;
}

/* Badges remain visible when the tile is selected (override the base hide) */
#new-config-form.pb-2026 .form-check.div-answer.sup-new-border.active .sup-new,
#new-config-form.pb-2026 .form-check.div-answer.sup-popular-border.active .sup-popular {
    display: flex;
}

@media (max-width: 768px) {
    #new-config-form.pb-2026 .sup-new,
    #new-config-form.pb-2026 .sup-popular {
        top: 0;
        right: 12px;
    }
}

/* ---------------------------------------------------------------------------
   9. Primary action button — full-width solid green
      Uses !important to win over the inline grey/green styles the shared
      productconfig-functions.js writes onto .btn-pb-2024 during validation,
      so the button matches the mockup's always-green treatment.
   --------------------------------------------------------------------------- */
#new-config-form.pb-2026 .pb2026-actions {
    width: 100%;
    margin-top: 26px;
}

#new-config-form.pb-2026 .pb2026-actions .btn-pb-2024 {
    display: block;
    width: 100%;
    background-color: #8CC63F !important;
    border: 1px solid #8CC63F !important;
    color: #fff !important;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 6px;
    padding: 10px 30px;
    font-size: 15px;
    letter-spacing: .03em;
}

#new-config-form.pb-2026 .pb2026-actions .btn-pb-2024:hover,
#new-config-form.pb-2026 .pb2026-actions .btn-pb-2024:active,
#new-config-form.pb-2026 .pb2026-actions .btn-pb-2024:focus {
    background-color: #7CB332 !important;
    border-color: #7CB332 !important;
    color: #fff !important;
}

/* ---------------------------------------------------------------------------
   10. Input-field steps (company / phone / contact)
   --------------------------------------------------------------------------- */
#new-config-form.pb-2026 .pb2026-panel .form-text {
    text-align: left;
}

#new-config-form.pb-2026 .pb2026-panel .form-text-label {
    text-transform: none;
    font-weight: 700;
    color: #333;
    font-size: 14px;
    text-align: left;
}

#new-config-form.pb-2026 .pb2026-panel .style-select {
    background: none;
    border: 0;
    border-radius: 0;
    height: auto;
    padding: 0;
    overflow: visible;
    width: 100%;
}

#new-config-form.pb-2026 .pb2026-panel .style-select select {
    background-color: #fff;
    background-image: url(chevron-down.svg);
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 12px auto;
    border: 1px solid #777;
    border-radius: 50px;
    padding: 10px 40px 10px 20px;
    width: 100%;
}

#new-config-form.pb-2026 .pb2026-panel .disclaimer,
#new-config-form.pb-2026 .pb2026-panel .form-check.disclaimer-check label {
    text-align: left;
}

/* Consent checkbox is a real choice, not an answer tile — keep it plain */
#new-config-form.pb-2026 .form-check.disclaimer-check {
    background: none;
    border: 0;
    border-radius: 0;
}

/* ---------------------------------------------------------------------------
   11. Mobile input shape — the mockup uses full pills on desktop but lightly
   rounded rectangles on mobile (layout p.4 mobile), so drop the 50px radius to
   8px under the mobile breakpoint for both text inputs and dropdowns. Placed
   last so it wins over the desktop .style-select select rule above.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
    #new-config-form.pb-2026 .pb2026-panel .form-text input,
    #new-config-form.pb-2026 .pb2026-panel .style-select select {
        border-radius: 8px;
    }
}