
/* CT_STEP234_LAYOUT_V1 */
.ctsp .ct-step234-teal-heading {
    color: #087f80 !important;
}

/* Step 4: each skills/services group occupies a complete row */
.ctsp .ct-step234-full-width {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
}

/* Allow option groups to spread across the available width */
.ctsp .ct-step234-full-width .ctsp-checks {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)) !important;
    gap: 12px !important;
}

@media(max-width:680px) {
    .ctsp .ct-step234-full-width .ctsp-checks {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media(max-width:380px) {
    .ctsp .ct-step234-full-width .ctsp-checks {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}


/* CT_STEP234_COLOUR_SPACING_V2 */

/* STEP 2: Talent Categories */
.ctsp .ctsp-field:has(.ctsp-category-card) > label,
.ctsp .ctsp-field[data-field="category"] > label {
    color:#087f80 !important;
    font-size:16px !important;
    font-weight:700 !important;
}

/* STEP 3: Upper category headings only */
.ctsp .ctsp-subcategory > h3 {
    color:#087f80 !important;
}

/* STEP 3: Skill Level labels remain dark */
.ctsp .ctsp-step3-experience label > span:first-child {
    color:#203337 !important;
}

/* Required asterisks remain red */
.ctsp .ctsp-required,
.ctsp .ctsp-requirement {
    color:#dc2626 !important;
}

/* STEP 4: Section heading spacing */
.ctsp h2.ct-step234-teal-heading {
    margin-top:30px !important;
    margin-bottom:16px !important;
}

/* Space between section descriptions and fields */
.ctsp .ct-step234-teal-heading + p {
    margin-top:12px !important;
    margin-bottom:30px !important;
}

/* Special Skills, Services Offered, Comfortable With */
.ctsp .ct-step234-full-width {
    margin-top:20px !important;
    margin-bottom:24px !important;
}

/* Space below each option-group heading */
.ctsp .ct-step234-full-width > label {
    margin-bottom:16px !important;
}

/* Space above the options */
.ctsp .ct-step234-full-width .ctsp-checks {
    margin-top:14px !important;
}

/* Keep mobile spacing comfortable */
@media(max-width:680px) {
    .ctsp .ct-step234-full-width {
        margin-top:18px !important;
        margin-bottom:24px !important;
    }

    .ctsp h2.ct-step234-teal-heading {
        margin-top:26px !important;
        margin-bottom:16px !important;
    }
}


/* CT_STEP234_FINAL_SPACING_V3 */

/* Step 2: Talent Categories heading */
.ctsp .ctsp-field[data-field="category"] > label {
    color: #087f80 !important;
    font-weight: 700 !important;
}

/* Step 3: Category names teal; experience labels black */
.ctsp .ctsp-subcategory > h3 {
    color: #087f80 !important;
}

.ctsp .ctsp-step3-experience label,
.ctsp .ctsp-step3-experience label > span {
    color: #203337 !important;
}

/* Step 4: Separate sections with consistent breathing room */
.ctsp .ctsp-about-section {
    display: block;
    width: 100%;
    margin-top: 30px !important;
    margin-bottom: 32px !important;
}

.ctsp .ctsp-about-heading {
    margin-bottom: 24px !important;
}

.ctsp .ctsp-about-heading-text h3 {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
}

.ctsp .ctsp-about-heading-text p {
    margin-top: 0 !important;
    margin-bottom: 26px !important;
}

/* Special Skills, Services Offered, Comfortable With */
.ctsp .ct-step234-full-width {
    display: block !important;
    width: 100% !important;
    grid-column: 1 / -1 !important;
    margin-top: 22px !important;
    margin-bottom: 30px !important;
}

.ctsp .ct-step234-full-width > label {
    display: block !important;
    margin-bottom: 18px !important;
}

.ctsp .ct-step234-full-width .ctsp-checks {
    margin-top: 16px !important;
}

/* Social Media section spacing */
.ctsp .ctsp-about-section:last-child {
    margin-top: 34px !important;
    margin-bottom: 30px !important;
}

@media(max-width:680px) {
    .ctsp .ctsp-about-section {
        margin-top: 24px !important;
        margin-bottom: 28px !important;
    }

    .ctsp .ctsp-about-heading {
        margin-bottom: 20px !important;
    }

    .ctsp .ct-step234-full-width {
        margin-top: 18px !important;
        margin-bottom: 26px !important;
    }
}


/* CT_STEP6_TEAL_VIDEO_HEADING_V1 */
#ct-shared-profile .ctsp-panel[data-step="6"]
.ctsp-media-heading h3 {
    color: #087f80 !important;
}

/* Required star remains red */
#ct-shared-profile .ctsp-panel[data-step="6"]
.ctsp-media-heading h3 .ctsp-required {
    color: #dc2626 !important;
}


/* CT_STEP6_RED_OPTIONAL_NOTES_V1 */

/* Smaller red Optional indicators throughout Step 6 */
#ct-shared-profile .ctsp-panel[data-step="6"]
.ctsp-optional {
    color: #dc2626 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

/* Red media guidance below the section headings */
#ct-shared-profile .ctsp-panel[data-step="6"]
.ctsp-media-guidance {
    color: #dc2626 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
}

/* Keep section titles prominent and guidance smaller */
#ct-shared-profile .ctsp-panel[data-step="6"]
.ctsp-media-heading h3 .ctsp-optional {
    vertical-align: baseline !important;
    margin-left: 5px !important;
}


/* CT_STEP6_TAG_OPTIONAL_SMALL_RED_V1 */
#ct-shared-profile .ctsp-panel[data-step="6"]
.ctsp-tag-optional-small {
    color: #dc2626 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    vertical-align: baseline !important;
}


/* CT_STEP6_OPTIONAL_SPLIT_V1 */
#ct-shared-profile .ctsp-panel[data-step="6"]
.ctsp-tag-optional-small {
    color: #dc2626 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    display: inline !important;
    margin-left: 3px !important;
    vertical-align: baseline !important;
}


/* CT_MOBILE_GENDER_SINGLE_ARROW_V1 */
@media (max-width: 767px) {

    #ct-shared-profile [data-field="gender"] select {
        -webkit-appearance: none !important;
        appearance: none !important;
        background-image: none !important;
        padding-right: 40px !important;
    }

    #ct-shared-profile [data-field="gender"] {
        position: relative !important;
    }

    #ct-shared-profile [data-field="gender"]::after {
        content: "" !important;
        position: absolute !important;
        right: 18px !important;
        bottom: 19px !important;
        width: 8px !important;
        height: 8px !important;
        border-right: 2px solid #087f80 !important;
        border-bottom: 2px solid #087f80 !important;
        transform: rotate(45deg) !important;
        pointer-events: none !important;
    }
}







@media (min-width: 768px) {
    #ct-shared-profile .ctsp-step3-choice-buttons {
        display: none !important;
    }
}


/* CT_MOBILE_STEP4_YEAR_SINGLE_ARROW_V1 */
/* Only mobile Step 4. Desktop is unaffected. */
@media screen and (max-width: 767px) {

    #ct-shared-profile
    .ctsp-panel[data-step="4"] select:not([multiple]) {
        -webkit-appearance: none !important;
        appearance: none !important;

        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23087f80' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;

        background-repeat: no-repeat !important;
        background-position: right 16px center !important;
        background-size: 18px 18px !important;
        padding-right: 44px !important;
    }
}





/* CT_STEP3_MOBILE_ORIGINAL_DROPDOWNS_FINAL */
@media screen and (max-width: 767.98px) {

    #ct-shared-profile .ctsp-step3-experience select {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        min-height: 48px !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23087f80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 16px center !important;
        background-size: 18px 18px !important;
        padding-right: 44px !important;
    }

    #ct-shared-profile .ctsp-step3-choice-buttons {
        display: none !important;
    }
}


/* CT_STEP3_MOBILE_NATIVE_SELECT_BOX_V4 */
/* Mobile Step 3 only: complete visible native dropdown styling */
@media screen and (max-width: 767.98px) {

    #ct-shared-profile .ctsp-panel[data-step="3"]
    .ctsp-step3-experience label > select {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: 48px !important;
        margin: 8px 0 12px !important;
        padding: 11px 44px 11px 13px !important;
        border: 1px solid #cbdcdd !important;
        border-radius: 10px !important;
        background-color: #ffffff !important;
        color: #203337 !important;
        font: inherit !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 1.4 !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23087f80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 14px center !important;
        background-size: 18px 18px !important;
    }
}


/* CT_STEP4_MOBILE_TABS_PRIORITY_FIX_V2 */
/* Mobile only. This picker class is generated only for
   Special Skills, Services Offered and Comfortable With. */

@media screen and (max-width: 767.98px) {

    #ct-shared-profile#ct-shared-profile
    .ctsp-desktop-skills-picker > .ctsp-picker-trigger,

    #ct-shared-profile#ct-shared-profile
    .ctsp-desktop-skills-picker > .ctsp-picker-pop,

    #ct-shared-profile#ct-shared-profile
    .ctsp-desktop-skills-picker > .ctsp-picker-chips {
        display: none !important;
    }

    #ct-shared-profile#ct-shared-profile
    .ctsp-desktop-skills-picker > .ctsp-desktop-skill-choices {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
        min-width: 0 !important;
        visibility: visible !important;
    }

    #ct-shared-profile#ct-shared-profile
    .ctsp-desktop-skills-picker .ctsp-desktop-skill-choice {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px !important;
        padding: 10px 8px !important;
        background: #fff !important;
        border: 1px solid #cbdcdd !important;
        border-radius: 9px !important;
        color: #203337 !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        text-align: center !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    #ct-shared-profile#ct-shared-profile
    .ctsp-desktop-skills-picker
    .ctsp-desktop-skill-choice.is-selected {
        background: #e5f5f2 !important;
        border-color: #087f80 !important;
        color: #086d6e !important;
        font-weight: 700 !important;
    }

    #ct-shared-profile#ct-shared-profile
    .ctsp-desktop-skills-picker
    .ctsp-desktop-skill-choice.is-selected::before {
        content: "✓ " !important;
    }
}


/* CT_MOBILE_STEP5_SINGLE_ARROWS_V1 */
@media (max-width: 767.98px) {
    #ct-shared-profile .ctsp-panel[data-step="5"] select,
    #ct-shared-profile .ctsp-panel[data-step="5"] .ctsp-field select,
    #ct-shared-profile .ctsp-panel[data-step="5"] .ctsp-grid select {
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 18px center !important;
        background-size: 18px 18px !important;
        padding-right: 52px !important;
    }

    #ct-shared-profile .ctsp-panel[data-step="5"] select::-ms-expand {
        display: none !important;
    }

    #ct-shared-profile .ctsp-panel[data-step="5"] .ctsp-select::after,
    #ct-shared-profile .ctsp-panel[data-step="5"] .ctsp-field::after,
    #ct-shared-profile .ctsp-panel[data-step="5"] .ctsp-grid::after {
        display: none !important;
    }
}

