/* ==========================================================
   CAST TALENTS — FINAL HEADER CTA
   MEMBER = GLASS
   JOIN   = CREATIVE TEAL
   GLOBAL / DESKTOP + MOBILE
========================================================== */


/* ----------------------------------------------------------
   ACTION WRAPPER
---------------------------------------------------------- */

.ctcp-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;

    width: auto !important;
    height: auto !important;

    padding: 0 !important;
    margin: 0 !important;

    overflow: visible !important;
}


/* ==========================================================
   MEMBER LOGIN — GLASS
========================================================== */

.ct-glass-member,
.ct-glass-member *,
.ct-glass-member *::before,
.ct-glass-member *::after {
    box-sizing: border-box !important;
}

.ct-glass-member {
    position: relative !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 205px !important;
    min-width: 205px !important;
    max-width: 205px !important;

    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;

    flex: 0 0 205px !important;

    padding: 0 22px !important;
    margin: 0 !important;

    text-decoration: none !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.98),
            rgba(246,253,253,.95) 55%,
            rgba(232,248,249,.91)
        ) !important;

    border: 1px solid rgba(0,137,145,.20) !important;
    border-radius: 28px !important;

    box-shadow:
        0 7px 18px rgba(0,112,122,.10),
        0 0 18px rgba(45,194,207,.10),
        inset 0 1px 0 rgba(255,255,255,.96) !important;

    overflow: hidden !important;
    isolation: isolate !important;

    cursor: pointer !important;
}

.ct-glass-member-icon {
    position: relative !important;

    display: block !important;

    width: 24px !important;
    min-width: 24px !important;
    height: 27px !important;

    flex: 0 0 24px !important;

    margin: 0 12px 0 0 !important;
}

.ct-glass-member-icon::before {
    content: "" !important;

    position: absolute !important;

    width: 9px !important;
    height: 9px !important;

    left: 7.5px !important;
    top: 1px !important;

    border-radius: 50% !important;

    background: #07868d !important;
}

.ct-glass-member-icon::after {
    content: "" !important;

    position: absolute !important;

    width: 21px !important;
    height: 12px !important;

    left: 1.5px !important;
    bottom: 1px !important;

    border-radius: 11px 11px 4px 4px !important;

    background: #07868d !important;
}

.ct-glass-member-divider {
    display: block !important;

    width: 1px !important;
    min-width: 1px !important;
    height: 25px !important;

    flex: 0 0 1px !important;

    margin: 0 12px 0 0 !important;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(7,134,141,.42),
            transparent
        ) !important;
}

.ct-glass-member-text {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #087f83 !important;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Arial,
        sans-serif !important;

    font-size: 11px !important;
    font-weight: 800 !important;

    line-height: 1 !important;
    letter-spacing: .055em !important;

    white-space: nowrap !important;
}


/* ==========================================================
   CURRENT JOIN — KEEP EXISTING CREATIVE DESIGN
   These rules stabilize its existing markup.
========================================================== */

.ctcp-join,
.ctcp-join *,
.ctcp-join *::before,
.ctcp-join *::after {
    box-sizing: border-box !important;
}

.ctcp-join {
    position: relative !important;

    display: block !important;

    width: 257px !important;
    min-width: 257px !important;
    max-width: 257px !important;

    height: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;

    flex: 0 0 257px !important;

    margin: 0 !important;
    padding: 0 !important;

    text-decoration: none !important;

    overflow: visible !important;
    isolation: isolate !important;

    cursor: pointer !important;
}

.ctcp-join-fold-left {
    position: absolute !important;

    display: block !important;

    left: 0 !important;
    top: 11px !important;

    width: 38px !important;
    height: 43px !important;

    z-index: 1 !important;

    background: #056a70 !important;

    clip-path: polygon(
        18% 0,
        100% 7%,
        82% 100%,
        0 82%
    ) !important;
}

.ctcp-join-fold-top {
    position: absolute !important;

    display: block !important;

    right: 18px !important;
    top: 1px !important;

    width: 72px !important;
    height: 19px !important;

    z-index: 1 !important;

    background: #075d63 !important;

    clip-path: polygon(
        12% 18%,
        88% 0,
        100% 100%,
        0 100%
    ) !important;
}

.ctcp-join-face {
    position: absolute !important;

    display: flex !important;
    align-items: center !important;

    left: 12px !important;
    right: 0 !important;
    top: 6px !important;
    bottom: 3px !important;

    z-index: 2 !important;

    padding: 0 15px 0 25px !important;
    margin: 0 !important;

    background:
        linear-gradient(
            100deg,
            #08777b 0%,
            #078b8e 52%,
            #087f83 100%
        ) !important;

    clip-path: polygon(
        5% 0,
        93% 0,
        100% 50%,
        93% 100%,
        4% 100%,
        0 54%
    ) !important;

    box-shadow:
        0 6px 13px rgba(4,75,79,.18) !important;

    overflow: hidden !important;
}

.ctcp-join-hand {
    position: relative !important;

    display: block !important;

    width: 72px !important;
    min-width: 72px !important;
    height: 40px !important;

    flex: 0 0 72px !important;

    margin: 0 9px 0 0 !important;
    padding: 0 !important;
}

.ctcp-join-word {
    position: absolute !important;

    display: block !important;

    left: 0 !important;
    top: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #fff !important;

    font-family:
        "Brush Script MT",
        "Segoe Script",
        cursive !important;

    font-size: 27px !important;
    font-weight: 500 !important;
    font-style: italic !important;

    line-height: 1 !important;

    white-space: nowrap !important;
}

.ctcp-join-underline {
    position: absolute !important;

    display: block !important;

    left: 0 !important;
    bottom: 0 !important;

    width: 76px !important;
    height: 15px !important;

    overflow: visible !important;

    fill: none !important;
    stroke: #fff !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
}

.ctcp-join-underline path {
    fill: none !important;
    stroke: #fff !important;
    stroke-width: 2 !important;
}

.ctcp-join-label {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #fff !important;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Arial,
        sans-serif !important;

    font-size: 11px !important;
    font-weight: 800 !important;

    line-height: 1 !important;
    letter-spacing: .04em !important;

    white-space: nowrap !important;
}

.ctcp-arrow {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 32px !important;
    min-width: 32px !important;
    height: 28px !important;

    flex: 0 0 32px !important;

    margin: 0 0 0 auto !important;
    padding: 0 !important;
}

.ctcp-arrow svg {
    display: block !important;

    width: 30px !important;
    height: 20px !important;

    max-width: 30px !important;
    max-height: 20px !important;

    overflow: visible !important;

    fill: none !important;
    stroke: #fff !important;
    stroke-width: 2 !important;
}

.ctcp-arrow svg path {
    fill: none !important;
    stroke: #fff !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 991.98px) {

    .ct-mobile-actions .ctcp-actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        gap: 12px !important;

        width: 100% !important;
    }

    .ct-mobile-actions .ct-glass-member {
        width: 220px !important;
        min-width: 220px !important;
        max-width: 220px !important;

        height: 56px !important;
        min-height: 56px !important;
        max-height: 56px !important;

        flex-basis: 56px !important;
    }

    .ct-mobile-actions .ctcp-join {
        width: 270px !important;
        min-width: 270px !important;
        max-width: 270px !important;

        height: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;

        flex-basis: 60px !important;
    }
}

@media (max-width: 380px) {

    .ct-mobile-actions .ct-glass-member {
        width: 205px !important;
        min-width: 205px !important;
        max-width: 205px !important;
    }

    .ct-mobile-actions .ctcp-join {
        width: 250px !important;
        min-width: 250px !important;
        max-width: 250px !important;
    }
}

/* =========================================================
   CT DESKTOP HEADER ELEMENT SCALE — FINAL
   Desktop only.
   Same CTA designs, proportionally smaller.
   Mobile untouched.
========================================================= */

@media (min-width: 992px) {

    /* MEMBER LOGIN — same design, smaller */
    .ct-header-actions .ct-glass-member {
        width: 180px !important;
        min-width: 180px !important;
        max-width: 180px !important;

        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
    }

    .ct-header-actions .ct-glass-member-icon {
        transform: scale(.88) !important;
        transform-origin: center !important;
    }

    .ct-header-actions .ct-glass-member-divider {
        height: 21px !important;
    }

    .ct-header-actions .ct-glass-member-text {
        font-size: 11px !important;
    }


    /* JOIN CAST TALENTS — same design, smaller */
    .ct-header-actions .ctcp-join {
        width: 220px !important;
        min-width: 220px !important;
        max-width: 220px !important;

        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
    }

    /*
       Scale internal creative artwork together so
       proportions/design remain unchanged.
    */
    .ct-header-actions .ctcp-join-fold-left,
    .ct-header-actions .ctcp-join-fold-top,
    .ct-header-actions .ctcp-join-hand,
    .ct-header-actions .ctcp-join-word,
    .ct-header-actions .ctcp-join-underline,
    .ct-header-actions .ctcp-join-label,
    .ct-header-actions .ctcp-join-arrow {
        transform: scale(.86) !important;
        transform-origin: center !important;
    }

}