/**
 * Copyright (c) 2021. MageCloud.  All rights reserved.
 * @author: Volodymyr Hryvinskyi <mailto:volodymyr@hryvinskyi.com>
 */

.subscription-product-info .box-tocart .actions {
    display: flex;
    flex-direction: column;
}

.subscription-product-info .price-chooser {
    order: 1;
    max-width: 450px
}

.subscription-product-info #product-addtocart-button {
    order: 2;
}

.subscription-product-info .features-list {
    order: 3;
    margin-bottom: 15px;
}

.subscription-product-info .features-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.subscription-product-info .features-list ul li:before {
    display: inline-block;
    content: "";
    margin-right: 10px;
    width: 6px;
    height: 12px;
    border: 2px solid #e98678;
    border-top: 0;
    border-left: 0;
    position: relative;
    left: 3px;
    top: -2px;
    transform: rotate(43deg);
    box-sizing: border-box;
}

.subscription-product-info .guarantee {
    font-size: 13px;
    order: 4;
    margin-bottom: 15px;
}

.subscription-product-info .guarantee .divider-allround {
    display: none;
}

.subscription-product-info .guarantee .delivery-text svg,
.subscription-product-info .guarantee .delivery-text img,
.subscription-product-info .guarantee .emarket-text svg,
.subscription-product-info .guarantee .emarket-text img  {
    position: relative;
    top: 3px;
}

.subscription-product-info .guarantee .delivery-text svg,
.subscription-product-info .guarantee .delivery-text img {
    margin-right: 10px;
}

.subscription-product-info .guarantee .emarket-text svg,
.subscription-product-info .guarantee .emarket-text img {
    margin-right: 6px;
}

.subscription-product-info .features-list ul li {
    list-style: none;
    padding: 0;
    margin: 0;
}

.subscription-product-info #non_membership_modal {
    display: none;
}

.non-membership-modal .modal-footer .action-primary {
    margin-bottom: 10px;
}

.price-chooser.disabled {
    pointer-events: none;
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    .price-chooser input[type='checkbox'],
    .price-chooser input[type='radio'] {
        --active: #e98678;
        --active-inner: #fff;
        --focus: 2px rgba(233, 134, 120, 0.3);
        --border: rgba(233, 134, 120, 0.3);
        --border-hover: #e98678;
        --background: #fff;
        --disabled: #f6f8ff;
        --disabled-inner: rgba(233, 134, 120, 0.5);
        -webkit-appearance: none;
        -moz-appearance: none;
        height: 21px;
        outline: none;
        display: inline-block;
        vertical-align: top;
        position: relative;
        margin: 0;
        cursor: pointer;
        border: 1px solid var(--bc, var(--border));
        background: var(--b, var(--background));
        transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
    }
    .price-chooser input[type='checkbox']:after,
    .price-chooser input[type='radio']:after {
        content: '';
        display: block;
        left: 0;
        top: 0;
        position: absolute;
        transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
    }
    .price-chooser input[type='checkbox']:checked,
    .price-chooser input[type='radio']:checked {
        --b: var(--active);
        --bc: var(--active);
        --d-o: 0.3s;
        --d-t: 0.6s;
        --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
    }
    .price-chooser input[type='checkbox']:disabled,
    .price-chooser input[type='radio']:disabled {
        --b: var(--disabled);
        cursor: not-allowed;
        opacity: 0.9;
    }
    .price-chooser input[type='checkbox']:disabled:checked,
    .price-chooser input[type='radio']:disabled:checked {
        --b: var(--disabled-inner);
        --bc: var(--border);
    }
    .price-chooser input[type='checkbox']:disabled + label,
    .price-chooser input[type='radio']:disabled + label {
        cursor: not-allowed;
    }

    .price-chooser input[type='checkbox']:hover:not(:checked):not(:disabled),
    .price-chooser input[type='radio']:hover:not(:checked):not(:disabled) {
        --bc: var(--border-hover);
    }

    .price-chooser input[type='checkbox']:focus,
    .price-chooser input[type='radio']:focus {
        box-shadow: 0 0 0 var(--focus);
    }

    .price-chooser input[type='checkbox']:not(.switch),
    .price-chooser input[type='radio']:not(.switch) {
        width: 21px;
    }

    .price-chooser input[type='checkbox']:not(.switch):after,
    .price-chooser input[type='radio']:not(.switch):after {
        opacity: var(--o, 0);
    }

    .price-chooser input[type='checkbox']:not(.switch):checked,
    .price-chooser input[type='radio']:not(.switch):checked {
        --o: 1;
    }

    .price-chooser input[type='checkbox'] + label,
    .price-chooser input[type='radio'] + label {
        font-size: 14px;
        line-height: 21px;
        display: inline-block;
        vertical-align: top;
        cursor: pointer;
        margin-left: 4px;
        transition: color .25s linear;
    }

    .price-chooser label.checkbox-membership {
        color: #aaa;
        font-family: 'Barlow Semi Condensed', sans-serif;
    }

    .price-chooser label.checkbox-membership.s-option {
        font-weight: 300;
        font-size: 25px;
        line-height: 24px
    }

    .price-chooser label.checkbox-membership.f-option {
        font-weight: 600;
        font-size: 36px;
        line-height: 22px
    }

    .price-chooser label.checkbox-membership:hover,
    .price-chooser input[type=radio]:checked~label.checkbox-membership {
        color: #333;
    }

    .price-chooser input[type='radio'] {
        border-radius: 7px;
    }

    .price-chooser input[type='radio']:after {
        width: 5px;
        height: 9px;
        border: 2px solid var(--active-inner);
        border-top: 0;
        border-left: 0;
        left: 7px;
        top: 4px;
        transform: rotate(var(--r, 20deg));
        background: transparent;
        border-radius: 0;
    }

    .price-chooser input[type='radio']:checked {
        --r: 43deg;
    }
}