/*
 * Order bump presentation, following CommerceKit's own layout rules.
 *
 * Progressive: without JavaScript every offer renders as a plain visible card and
 * the carousel controls stay hidden. The `is-carousel` class is added by
 * order-bumps.js, which is also when the previous/next and bullet controls
 * become visible.
 */

.woohoo .woohoo-order-bump-wrap {
    margin: 0;
    padding-bottom: 0;
    list-style: none;
}

.woohoo .woohoo-order-bump-wrap.woohoo-single-order-bump {
    margin-bottom: 15px;
}

.woohoo .ckobp-before-you-go {
    font-size: 15px;
    font-weight: 700;
    color: #111;
}

.woohoo .woohoo-order-bump-wrap [hidden] {
    display: none !important;
}

.woohoo .woohoo-order-bumps-wrap {
    position: relative;
}

.woohoo .woohoo-order-bumps {
    overflow: hidden;
}

.woohoo .woohoo-order-bump {
    margin: 8px 0 0;
    padding: 20px;
    border: 1px solid #e2e2e2;
    box-shadow: 0 4px 12px -2px rgb(0 0 0 / 6%);
    border-radius: 10px;
}

.woohoo .woohoo-order-bump .ckobp-title {
    width: 100%;
    padding-bottom: 10px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    color: #111;
}

.woohoo .woohoo-order-bump .ckobp-wrapper {
    display: flex;
    justify-content: space-between;
}

.woohoo .woohoo-order-bump .ckobp-item {
    display: flex;
}

.woohoo .woohoo-order-bump .ckobp-actions {
    display: flex;
    flex-shrink: 0;
}

.woohoo .woohoo-order-bump .ckobp-image {
    width: 50px;
    flex-shrink: 0;
}

.woohoo .woohoo-order-bump .ckobp-image a {
    display: block;
}

.woohoo .woohoo-order-bump .ckobp-image img {
    display: block;
    max-width: 50px;
    height: auto;
    margin: 0;
}

.woohoo .woohoo-order-bump .ckobp-product {
    margin: -5px 15px 0;
}

.woohoo .woohoo-order-bump .ckobp-name {
    display: inline-flex;
    font-size: 13px;
    line-height: 1.4;
    color: #111;
}

.woohoo .woohoo-order-bump .ckobp-name a {
    color: #111;
}

.woohoo .woohoo-order-bump .ckobp-price {
    margin-top: 2px;
    font-size: 12px;
    color: #de9915;
}

.woohoo .woohoo-order-bump .ckobp-price ins {
    color: #de9915;
}

.woohoo .woohoo-order-bump .ckobp-price del {
    margin-right: 5px;
    color: #999;
    font-weight: normal;
}

.woohoo .woohoo-order-bump .ckobp-add,
.woohoo .woohoo-order-bump .ckobp-choose {
    display: inline-block;
    min-height: 0;
    padding: 7px 10px;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    background: linear-gradient(180deg, #fff, #eee 130%) no-repeat;
    font-size: 12px;
    font-weight: 600;
    line-height: normal;
    color: #111;
    text-decoration: none;
    transition: all .2s;
    cursor: pointer;
}

.woohoo .woohoo-order-bump .ckobp-add:hover,
.woohoo .woohoo-order-bump .ckobp-add:focus,
.woohoo .woohoo-order-bump .ckobp-choose:hover,
.woohoo .woohoo-order-bump .ckobp-choose:focus {
    border-color: #ccc;
    color: #111;
}

.woohoo .woohoo-order-bump .ckobp-add[aria-disabled="true"] {
    opacity: .3;
    cursor: not-allowed;
}

.woohoo .woohoo-order-bump .ckobp-add[aria-disabled="true"]:hover {
    opacity: .35;
}

/* Carousel controls: hidden in markup, revealed only once JS activates. */
.woohoo .woohoo-order-bump-wrap .ckobp-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 8px 0 20px;
}

.woohoo .woohoo-order-bump-wrap .ckobp-prevnext {
    display: flex;
    order: 2;
}

.woohoo .woohoo-order-bump-wrap .ckobp-prev,
.woohoo .woohoo-order-bump-wrap .ckobp-next {
    position: relative;
    display: inline-flex;
    margin: 0 0 0 5px;
    padding: 0;
    border: 0;
    background: none;
    color: #111;
    cursor: pointer;
}

.woohoo .woohoo-order-bump-wrap .ckobp-prev svg,
.woohoo .woohoo-order-bump-wrap .ckobp-next svg {
    width: 18px;
    height: 18px;
}

.woohoo .woohoo-order-bump-wrap .ckobp-prev.ckobp-disabled,
.woohoo .woohoo-order-bump-wrap .ckobp-next.ckobp-disabled {
    opacity: .25;
    cursor: default;
}

.woohoo .woohoo-order-bump-wrap .ckobp-bullets {
    display: flex;
    min-height: 1px;
}

.woohoo .woohoo-order-bump-wrap .ckobp-bullets.processing {
    opacity: .5;
    pointer-events: none;
}

.woohoo .woohoo-order-bump-wrap .ckobp-bullet {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    min-height: 0;
    margin: 0 7px 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #ccc;
    cursor: pointer;
}

.woohoo .woohoo-order-bump-wrap .ckobp-bullet.active {
    background: #000;
}

/* Keep a 24px touch target around the small controls without changing the layout. */
.woohoo .woohoo-order-bump-wrap .ckobp-prev::after,
.woohoo .woohoo-order-bump-wrap .ckobp-next::after,
.woohoo .woohoo-order-bump-wrap .ckobp-bullet::after {
    content: "";
    position: absolute;
    inset: -8px;
}

.woohoo .woohoo-order-bump-wrap .ckobp-prev:focus-visible,
.woohoo .woohoo-order-bump-wrap .ckobp-next:focus-visible,
.woohoo .woohoo-order-bump-wrap .ckobp-bullet:focus-visible,
.woohoo .woohoo-order-bump-wrap .ckobp-add:focus-visible,
.woohoo .woohoo-order-bump-wrap .ckobp-choose:focus-visible {
    outline: 2px solid #111;
    outline-offset: 2px;
}

/* Carousel mode: the slides share one cell, so every card is as tall as the tallest offer. */
.woohoo .woohoo-order-bumps-wrap.is-carousel .woohoo-order-bumps {
    display: grid;
}

.woohoo .woohoo-order-bumps-wrap.is-carousel .woohoo-order-bump {
    grid-area: 1 / 1;
}

.woohoo .woohoo-order-bumps-wrap.is-carousel .woohoo-order-bump:not(.active) {
    visibility: hidden;
}

@media (max-width: 500px) {
    .woohoo .woohoo-order-bump .ckobp-wrapper {
        display: block;
    }

    .woohoo .woohoo-order-bump .ckobp-actions {
        display: block;
        width: 100%;
        margin-top: 10px;
    }

    .woohoo .woohoo-order-bump .ckobp-add,
    .woohoo .woohoo-order-bump .ckobp-choose {
        display: block;
        width: 100%;
        font-size: 13px;
        text-align: center;
    }

    .woohoo .woohoo-order-bump .ckobp-name,
    .woohoo .woohoo-order-bump .ckobp-title {
        font-size: 13px;
    }
}