/* Hide Flight/BS view-cart chrome on join kit page (Flight JoinOptions.html) */
.viewCartWidget {
    display: none;
}

#beautysocietyJoinOptions.join-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px 48px;
}

#beautysocietyJoinOptions {
    .join-option-panel > .panel-heading,
    .join-option-option > .panel > .panel-heading {
        background-color: #f2ede8;
        color: #151514;
    }

    .join-option-panel > .panel-heading > .panel-title,
    .join-option-option > .panel > .panel-heading > .panel-title {
        font-family: 'FeatureDisplay-Light';
    }

    .join-option-panel > .panel-body * {
        font-family: 'FeatureDisplay-Light';
    }

    .join-option-description * {
        font-family: 'FeatureDisplay-Light' !important;
    }

    .join-option-button {
        height: 46px;
        line-height: 100%;
        font-family: 'SuisseIntl-Regular' !important;
        font-size: 14px;
        font-weight: 400;
        background-color: #B8987D;
        color: #FFF;
        border: 0 !important;
        border-radius: 100px;
        padding: 14px 23px 14px 23px;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
    }

    .join-option-button:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .join-option-unselect-this,
    .join-option-select-this {
        height: 46px;
        line-height: 100%;
        font-family: 'SuisseIntl-Regular';
        font-size: 14px;
        font-weight: 400;
        background-color: #FFF;
        color: #151514;
        border: 1px solid #151514;
        border-radius: 100px;
        padding: 14px 23px 14px 23px;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
    }

    .join-option-panel {
        margin-bottom: 24px;
        border: 1px solid #e5e0da;
        border-radius: 0;
    }

    .join-option-row {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .join-image-col img {
        max-width: 100%;
        height: auto;
    }

    .join-options-price {
        margin: 16px 0 12px;
        font-size: 1.5rem;
    }

    .beautysociety-join-province-chooser {
        display: flex;
        flex-direction: column;
        gap: 12px;
        max-width: 360px;
        margin: 24px auto;
    }

    .beautysociety-join-province-label {
        margin-bottom: 16px;
        font-family: 'FeatureDisplay-Light';
    }

    .join-page-not-found {
        text-align: center;
        padding: 48px 16px;
        font-family: 'FeatureDisplay-Light';
    }

    .padding {
        height: 16px;
    }

    .padding-sm {
        height: 8px;
    }
}

/* Height fix: use visibility instead of display:none to preserve header height */
.join-option-option .panel-heading i.selected-icon {
    display: inline-block !important;
    visibility: hidden;
}

.join-option-option.selected-section .panel-heading i.selected-icon {
    visibility: visible;
}

/* FA6 icon fix - high specificity to override v4-shims
Root cause: markup uses FA4 class `fa-check-square-o`. FA6 v4-shims maps it
to font-weight: 400 (regular), but only solid (900) is loaded. Force 900. */
.fa.fa-check-square-o.selected-icon,
.fa.fa-check-square-o.selected-icon::before {
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
}

@media (max-width: 767px) {
    #beautysocietyJoinOptions .join-option-row {
        flex-direction: column;
    }

    #beautysocietyJoinOptions .join-image-col {
        margin-bottom: 16px;
    }
}