/* Content styling for our SimpleBox popups (ProductTotalCalculation, AutoshipConflictModal,
   and ProductReplacementModal).
   Pulled out of shopping-cart.css so these render correctly no matter which page triggers
   them, instead of only working on pages that happen to load shopping-cart.css. */
.fancybox-content{
    &#total_price_info{
        width:560px;border-radius:10px;overflow:unset;padding:30px;
        @media only screen and (max-width: 863px){max-width:560px;width:100%;}
        @media only screen and (max-width: 480px){padding:30px 15px;}
        .total_price{
            h2{
                color:var(--text1);font-size:22px;margin:0 0 10px 0;text-align:center;text-transform:uppercase;
                @media only screen and (max-width: 863px){font-size:20px;}
                @media only screen and (max-width: 480px){font-size:18px;}
            }
            .pricing_table{
                font-weight:normal;font-size:22px;max-width:480px;margin:0 auto;
                @media only screen and (max-width: 863px){font-size:20px;}
                @media only screen and (max-width: 480px){font-size:18px;}
                .row{
                    display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;line-height:30px;
                    .price{
                        padding:10px 0;text-align:right;
                        @media only screen and (max-width: 863px){padding:10px 0;}
                    }
                    .label{
                        padding:10px 0;text-align:left;
                        @media only screen and (max-width: 863px){padding:10px 0;}
                        .divide{
                            font-size:24px;font-weight:normal;
                            @media only screen and (max-width: 863px){font-size:12px;}
                        }
                        .deal_text{
                            display:block;font-size:18px;font-weight:normal;margin:0 0 0 20px;
                        }
                        svg.icon{width:15px;vertical-align:middle;margin:0 0 2px 0;}
                    }
                    &.unit_price{
                        .label{padding-bottom:0;}
                    }
                    &.red{
                        border-top:1px solid #707070;color:var(--red);font-weight:bold;
                        .price{
                            padding:10px 0;text-align:right;
                            @media only screen and (max-width: 863px){padding:10px 0;}
                        }
                        .label{
                            padding:10px 0;text-align:left;
                            @media only screen and (max-width: 863px){padding:10px 0;}
                        }
                    }
                }
            }
            .pricing_table{
                .row{
                    position:relative;
                    &.taxes_fees{
                        #taxes_fees_text{
                            display:none;background:#fff;border-radius:10px;box-shadow:0px 0px 10px rgba(0,0,0,.3);padding:15px;width:100%;position:absolute;top:100%;left:0;z-index:99;
                            p{font-size:14px;line-height:18px;padding:0 0 10px 0;margin:0;}
                        }
                        &.active{
                            #taxes_fees_text{display:block;}
                        }
                    }
                }
            }
        }
    }
    &.active_autoship{
        border:none;text-align:center;padding-bottom:40px;
        &::before{display:none;}
        h1{
            @media only screen and (max-width: 863px){font-size:26px;line-height:30px;}
        }
        p{
            font-size:20px;margin:0 auto 30px auto;max-width:530px;
            @media only screen and (max-width: 863px){font-size:16px;line-height:22px;}
        }
    }
    &.autoship_conflict_banner{
        padding:30px;
        .autoship_conflict_banner_header{
            h2{
                color:var(--blue);text-align:center;font-size:28px;margin:0 0 5px 0;
                @media only screen and (max-width: 863px){font-size:25px;}
                @media only screen and (max-width: 480px){font-size:22px;}
            }
            p{text-align:center;font-size:16px;margin:0 0 15px 0;}
        }
        .autoship_conflict_banner_body{
            border:1px solid var(--grey);border-radius:4px;margin:0 0 20px 0;min-width:450px;
            @media only screen and (max-width: 863px){min-width:unset;}
            .autoship_conflict_banner_check{
                padding:7px;text-align:left;
                &:first-of-type{border-bottom:1px solid var(--grey);}
                .text{
                    font-size:16px;
                    @media only screen and (max-width: 480px){line-height:24px;}
                }
                .autoship_conflict_banner_checkmark{
                    border:1px solid var(--grey);border-radius:4px;background:var(--white);display:inline-block;width:22px;height:22px;text-align:center;vertical-align:text-bottom;
                    margin:0 7px 0 0;
                }
                &.checked{
                    background:var(--light_blue);
                    .autoship_conflict_banner_checkmark{
                        &::after{content:"\f00c";font-family: "Font Awesome 5 Free";font-weight:bold;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;color:var(--green);font-size:18px;line-height:20px;}
                    }
                }
            }
        }
        .autoship_conflict_banner_actions{
            display:flex;flex-direction:column;align-items:center;row-gap:10px;
            .btn{width:275px;}
            .autoship_conflict_banner_dismiss{font-size:16px;}
        }
    }
}

.simplebox-content #autoship-detail .autoship-title-prefix,
.simplebox-content #autoship-detail .autoship-title-suffix {
    display: inline;
}

/* Acuvue Oasys package replacement content formerly inherited this layout from Fancybox. */
.simplebox-content .productreplacement.oasys-replacement {
    box-sizing: border-box;
    padding: 20px;
    text-align: center;
}

.simplebox-content .productreplacement.oasys-replacement h1 {
    color: var(--blue);
    font-size: 24px;
    line-height: 30px;
    margin: 0 24px 8px;
}

.simplebox-content .productreplacement.oasys-replacement .toptext {
    font-size: 14px;
    line-height: 20px;
    margin: 0 0 18px;
}

.simplebox-content .productreplacement.oasys-replacement .toptext p {
    margin: 0;
}

.simplebox-content .productreplacement.oasys-replacement .oasys-pack-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.simplebox-content .productreplacement.oasys-replacement .product {
    min-width: 0;
    position: relative;
}

.simplebox-content .productreplacement.oasys-replacement .product .inner {
    box-sizing: border-box;
    height: 100%;
    padding: 16px;
}

.simplebox-content .productreplacement.oasys-replacement .product.pk24 .inner {
    border: 1px solid var(--grey);
}

.simplebox-content .productreplacement.oasys-replacement .product h2 {
    font-size: 19px;
    line-height: 24px;
    margin: 0 0 8px;
}

.simplebox-content .productreplacement.oasys-replacement .product h2 span {
    display: block;
    font-size: 12px;
    line-height: 16px;
}

.simplebox-content .productreplacement.oasys-replacement .product .best {
    background: var(--blue);
    color: var(--white);
    font-size: 13px;
    font-weight: bold;
    left: 50%;
    line-height: 24px;
    padding: 0 12px;
    position: absolute;
    top: -12px;
    transform: translateX(-50%);
    white-space: nowrap;
}

.simplebox-content .productreplacement.oasys-replacement .product .savings {
    font-size: 13px;
    font-weight: bold;
    line-height: 18px;
    margin: 0 0 6px;
}

.simplebox-content .productreplacement.oasys-replacement .product .prodimg {
    align-items: center;
    display: flex;
    height: 145px;
    justify-content: center;
    margin: 4px 0 10px;
}

.simplebox-content .productreplacement.oasys-replacement .product .prodimg img {
    display: block;
    max-height: 145px;
    max-width: 100%;
    width: auto;
}

.simplebox-content .productreplacement.oasys-replacement .product .info {
    font-size: 13px;
    line-height: 18px;
    margin: 0 0 10px;
}

.simplebox-content .productreplacement.oasys-replacement .product .info > span {
    display: block;
}

.simplebox-content .productreplacement.oasys-replacement .product .info .price {
    display: inline;
    font-weight: bold;
}

.simplebox-content .productreplacement.oasys-replacement .product form {
    margin: 0;
}

.simplebox-content .productreplacement.oasys-replacement .product .btn {
    min-width: 185px;
}

.simplebox-content .productreplacement.oasys-replacement .oasys-go-back {
    margin: 14px 0 0;
}

@media only screen and (max-width: 600px) {
    .simplebox-content .productreplacement.oasys-replacement {
        padding: 18px 12px;
    }

    .simplebox-content .productreplacement.oasys-replacement h1 {
        font-size: 22px;
        line-height: 27px;
        margin: 0 22px 8px;
    }

    .simplebox-content .productreplacement.oasys-replacement .oasys-pack-options {
        grid-template-columns: minmax(0, 1fr);
    }
}