@import url("https://p.typekit.net/p.css?s=1&k=aok2blw&ht=tk&f=49089.49092&a=207726544&app=typekit&e=css");

@font-face {
    font-family: "elza";
    src: url("https://use.typekit.net/af/c87b5e/00000000000000007735f910/31/l?subset_id=2&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/c87b5e/00000000000000007735f910/31/d?subset_id=2&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/c87b5e/00000000000000007735f910/31/a?subset_id=2&fvd=n4&v=3") format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 400;
    font-stretch: normal;
}

@font-face {
    font-family: "elza";
    src: url("https://use.typekit.net/af/c90f51/00000000000000007735f90a/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n1&v=3") format("woff2"),url("https://use.typekit.net/af/c90f51/00000000000000007735f90a/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n1&v=3") format("woff"),url("https://use.typekit.net/af/c90f51/00000000000000007735f90a/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n1&v=3") format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 100;
    font-stretch: normal;
}

.c6-theme {
    --client-logo: url('../../images/c6/c6_logo.png');
    --font-family: elza, santral;
    --c6-background-color: var(--c4-paleyellow);
    --background: var(--c4-purewhite);
    --brand-logo: url('../../images/c6/c6_logo.png');
    --brand-bar-background-color: var(--c6-purewhite);
    --brand-bar-background-text-color: var(--c6-purewhite);
    --chatbot-icon: url('../../images/c6/M_Icon.svg');
    --user-icon: url('../../images/c3/profile.png');
    --info-icon: url('../images/c4/c4-info-open.svg');
    --info-icon-close: url('../images/c4/c4-info-close.svg');
    --time-icon: url('../images/c3/c3-time-colour.svg');
    --bullet-color: var(--c4-darkblue);
    --c6-black: #000;
    --c6-purewhite: #FFF;
    --c6-blue: #391474;
    --c6-purple1: #391474;
    --c6-purple2: #7236ae;
    --c6-purple3: #e5a8fb;
    --c6-purple4: #fae2fe;
    --c4-darkblue: rgb(27.25,0,109);
    --c4-lightblue: #05d2fa;
    --c6-darkpurlple: #18112F;
    --c3-pink: #E61E83;
    --c3-darkerpink: #C51E7B;
    --c6-purple: #C06DF3;
    --c6-grey: #d0d0d6;
    --c4-white: #FFF;
    --c4-paleyellow: #D6DBDC;
    --c3-lightgrey: #D6DBDC;
    --c6-palegrey: #EFE5E5;
    --c6-palegrey-tinted: #F7F2F2;
    --c6-darkgrey: #4b4b55;
    --c6-black: #000;
    --footer-background: var(--c4-darkblue);
    --petrol: var(--c4-darkgrey);
    --c6-ls-background: url('../../images/c6/mymoneymattersBG.jpg');
    --bg-gradient: linear-gradient(to bottom, var(--c6-darkpurlple), var(--c6-purple2));
    --gauge-selected-color: var(--c6-purple2);
    --gauge-background-color: var(--c6-purple3);
    --action-icon-positive: url('../../images/c6/action_mmm.svg');
    --rd: 8.342px 8.342px 8.342px 8.342px;
    --secondary-pale-purple: var(--c4-darkblue);
}

    .c6-theme .form-input-radio-control-label:has(> input[type="radio"]:checked) {
        background-color: var(--secondary-pale-purple);
        color:#fff
    }

/*        .c6-theme .form-input-radio-control-label:has(> input[type="radio"]:checked) input[type="radio"] {
            background-color: #fff;
            border: 1px solid #fff;
        }*/



    .c6-theme .ls-BodyDesktopPositive {
        line-height: 1.3;
        letter-spacing: 0.4px;
    }

    .c6-theme .ls-BodytitleDesktop {
        font-weight: normal;
    }

    .c6-theme .input-number-withunits {
        border-left: none;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        border-color: var(--c6-purple);
        border-top-width: 1px;
        border-bottom-width: 1px;
        border-right-width: 1px;
    }
    .c6-theme .form-number-text-units {
        border-color: var(--c6-purple);
        border-top-width: 1px;
        border-bottom-width: 1px;
        border-left-width: 1px;
        background-color: var(--c6-purple4);
    }
    

    /* Remove the individual hover rules and replace with container-based hover */
    .c6-theme .form-number-text:hover .input-number-withunits {
        border-top-width: 2px;
        border-bottom-width: 2px;
        border-right-width: 2px;
    }

    .c6-theme .form-number-text:hover .form-number-text-units {
        border-top-width: 2px;
        border-bottom-width: 2px;
        border-left-width: 2px;
    }

    /* NEW: Add hover effects for select elements using box-shadow only */
    .c6-theme .select {
        border: 1px solid var(--c6-purple);
        border-radius: 8px;
        box-shadow: 0 0 0 0px transparent;
        transition: box-shadow 0.15s ease;
    }

    /* All hover effects use box-shadow - no border-width changes */
    .c6-theme .form-input-select-control:hover .select,
    .c6-theme .select:hover,
    .c6-theme .ls-form-input-select-control:hover .select {
        box-shadow: 0 0 0 1px var(--c6-purple);
    }

    .c6-theme input[type="radio"] {
    color: var(--c6-blue);
    border: 1px solid var(--c6-blue);
}

        .c6-theme input[type="radio"]::before {
            box-shadow: inset 0 0 var(--c6-blue);
            background-color: #fff !important;
        }

    .c6-theme .avatar {
        background-color: var(--c6-purple1);
    }

    .c6-theme .container-form-header .title {
        color: var(--c4-white);
    }

    .c6-theme .container-chat-content,
    .c6-theme .chat-response, .c6-theme .container-chat-content-gw,
    .c6-theme .container-rhs-content-gw {
        background-color: var(--c6-palegrey);
    }

    .c6-theme .ls-rhs-panel-figures-container {
        background-color: var(--c6-white);
    }

    .c6-theme .retirement-std-box-gw {
        background-image: linear-gradient(to bottom, var(--c6-purple), var(--c6-darkpurlple));
    }

    .c6-theme .flex-item {
        color: var(--petrol);
    }

    .c6-theme .flex-item-header {
        color: var(--c6-blue);
    }

    .c6-theme .background {
        background-image: var(--bg-gradient), var(--c6-ls-background);
    }

    .c6-theme .container-nav-bar,
    .c6-theme .container-nav-bar-gw,
    .c6-theme .ls-form-input-button {
        background-color: var(--c6-purple1);
        color: var(--c4-white);
        border: solid 1px var(--c6-purple1);
        border-radius: var(--rd);
    }

    .c6-theme .container-form-header {
        background-color: var(--c6-purple1);
        color: var(--c4-white);
        border: solid 1px var(--c6-purple1);
        border-radius: 0px;
    }

    .c6-theme .ls-form-input-buttonhover {
        background-color: var(--c6-purewhite);
        border: solid 1px var(--c6-purple);
        border-radius: var(--rd);
        color: var(--c6-purple1);
    }
    .c6-theme .brand-bar {
        background-color: var(--c4-white);
    }

    .c6-theme .chat-question,
    .c6-theme .chat-question-padded,
    .c6-theme .chat-info,
    .c6-theme .select,
    .c6-theme .form-input-text,   
    .c6-theme .container-brand-bar-gw,
    .c6-theme .container-brand-bar {
        background-color: var(--c4-white);
    }

    .c6-theme .link-nav {
        color: var(--c6-darkpurlple);
        background-color: var(--c6-purewhite);
    }

        .c6-theme .link-nav:hover {
            color: var(--c6-purple);
        }

    .c6-theme .form-date-text input {
        background-color: var(--c6-purewhite);
    }

    .c6-theme .chat-response-completed-bubble {
        background-color: var(--c6-purewhite);
        border: solid 1px var(--c6-purple);
    }

        .c6-theme .chat-response-completed-bubble span {
            color: var(--c6-darkpurlple);
        }

    .c6-theme .chat-question,
    .c6-theme .chat-question-padded {
        border: solid 1px var(--c6-purple);
    }

    .c6-theme .form-input-button {
        background-color: var(--c6-purple1);
        color: var(--c4-white);
      
        border: solid 1px var(--c6-purple1);
        border-radius: var(--rd);
    }

        .c6-theme .form-input-button:hover {
            background-color: var(--c6-purewhite);
            border: solid 1px var(--c6-purple);
            border-radius: var(--rd);
            color: var(--c6-purple1);
        }

        .c6-theme .ls-form-input-button:hover {
            background-color: var(--c6-purewhite);
            border: solid 1px var(--c6-purple);
            border-radius: var(--rd);
            color: var(--c6-purple1);
        }
    .c6-theme .form-input-button-cancel {
        color: var(--c6-purple1);
        border: solid 1px var(--c6-purple);
        border-radius: var(--rd);
    }

    .c6-theme .pp-icon-image {
        width: 35px;
        height: 35px;
    }

    /* ✅ Logo with breathing space - Desktop */
    .c6-theme .brand-logo {
        width: 66px; /* 60 × 1.32 = 79.2 ≈ 79px */
        height: 50px; /* Allows 5px margin top/bottom within 65px container */
        margin: 2.5px 0; /* 2.5px top + 60px height + 2.5px bottom = 65px total */
        padding: 0 12px; /* Add horizontal breathing space */
    }

    .c6-theme .burger-bar {
        opacity: 1;
        color: var(--c6-blue);
    }

    .c6-theme .step-label-unselected {
        opacity: 1;
    }

    .c6-theme .step-marker-unselected {
        opacity: 1;
    }

    .c6-theme .step-marker-selected {
        opacity: 1;
        border-color: var(--c4-white);
    }

    .c6-theme .green {
        color: var(--c4-white) !important;
    }

    .c6-theme .step-marker-complete {
        background-color: var(--c6-purewhite);
        color: var(--c6-darkpurlple);
    }

    .c6-theme .ls-cost-oval {
        background-color: var(--c6-blue);
    }

    .c6-theme .thank-you, .c6-theme .trustpilot-container {
        background-color: var(--c6-palegrey-tinted);
    }

    .c6-theme .background-gw {
        background-image: var(--bg-gradient), var(--c6-ls-background);
    }

    .c6-theme .ls-BodytitleDesktop {
        color: var(--c6-purewhite);
    }

    .c6-theme .ls-tax-freecash {
        color: var(--c6-palegrey);
    }

        .c6-theme .ls-tax-freecash.visible {
            color: var(--petrol);
        }

    .c6-theme .ls-age-toggle-button.selected {
        background-color: var(--c6-darkpurlple);
        color: var(--c4-white);
    }

    .c6-theme .ls-age-toggle-button {
        background-color: var(--c4-white);
        color: var(--petrol);
    }

    .c6-theme .ls-chart-dial {
        --chart-color: var(--c4-darkblue); /* Dark blue for C4 */
    }

    .c6-theme .action-button-picture {
        content: url('../../images/action.svg');
    }

        .c6-theme .action-button-picture:hover {
            content: url('../../images/c6/action_mmm.svg');
        }

    .c6-theme .modal-header {
        background-color: var(--c6-purple4);
    }

    .c6-theme .rating-container {
        background-color: var(--c6-palegrey-tinted);
    }

    .c6-theme .form-input-button:hover .action-button-icon-image {
        background-image: var(--action-icon-positive);
    }

    .c6-theme select:required:invalid {
        color: var(--c6-black);
    }

    .c6-theme .ls-rhs-panel-figures-container {
        color: var(--c6-black);
    }

    .c6-theme .rating img.selected {
        border: 2px solid var(--c6-darkpurlple);
    }


@media screen and (max-width: 1140px) and (min-width: 721px) {
    /* ✅ Logo with breathing space - Medium screens */
    .c6-theme .brand-logo {
        width: 46px; /* 35 × 1.32 = 46.2 ≈ 46px */
        height: 35px; /* Allows 2.5px margin top/bottom within 40px container */
        margin: 2.5px 0; /* 2.5px + 35px + 2.5px = 40px total */
        padding: 0 6px; /* Horizontal breathing space */
        --brand-logo: url('../../images/c6/c6_logo.png');
    }

    .c6-theme .pp-icon-image {
        width: 32px;
        height: 32px;
    }

    .c6-theme .step-label-unselected {
        opacity: 1;
    }

    .c6-theme .step-marker-unselected {
        opacity: 1;
    }

    .c6-theme .step-marker-selected {
        opacity: 1;
    }
}

@media screen and (max-width: 720px) {
    /* ✅ Logo with breathing space - Mobile */
    .c6-theme .brand-logo {
        width: 46px; /* 35 × 1.32 = 46.2 ≈ 46px */
        height: 35px; /* Allows 2.5px margin top/bottom within 40px container */
        margin: 2.5px 0; /* 2.5px + 35px + 2.5px = 40px total */
        padding: 0 6px; /* Horizontal breathing space */
        --brand-logo: url('../../images/c6/c6_logo.png');
    }

    .c6-theme .pp-icon-image {
        width: 32px;
        height: 32px;
    }

    .c6-theme .step-label-unselected {
        opacity: 1;
    }
    .step-marker-complete {
        border: none;
        font-size: 12px;
    }
}

.c6-theme .form-input-button:disabled {
    background-color: var(--c4-palegrey);
    cursor: not-allowed;
    opacity: 0.7;
}

    .c6-theme .form-input-button:hover .action-button-picture {
        content: url('../../images/c6/action_mmm.svg');
    }
.c6-theme .ls-form-input-button:hover .action-button-picture {
    content: url('../../images/c6/action_mmm.svg');
}