#plan-paym-bolt-on {
    .panel-heading-texture {
        background-image: url("img/backgrounds/leaf-bg.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        color: white;
        position: relative;
        z-index: 1;
        .tidy-children;

        &:before {
            content: "";
            height: 100%;
            position: absolute;
            border-radius: @border-radius-base @border-radius-base 0 0;
            top: 0;
            left: 0;
            right: 0;
            #gradient.horizontal(fadeout(@primary-gradient-start, 10%), fadeout(@primary-gradient-end, 10%));
            z-index: -1;
        }
        .panel-title {
            font-size: @font-size-h3;
        }
    }
    .benefits-list {
        list-style-type: none;
        padding: 0;
        > li {
            position: relative;
            padding-left: 30px;
            margin-bottom: 5px;
            max-width: 360px;
            i {
                position: absolute;
                top: 0;
                left: 0;
                line-height: 1.2;
            }
        }
    }
    .panel-merge {
        margin-top: -23px;
        position: relative;
    }
    .panel-drawer {
        margin-top: -23px;
        position: relative;
        background: @gray-lighter;

        @media @bolt-on-drawer-breakpoint {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            border-left: 0;
            margin-left: -@grid-gutter-width;
            margin-top: 0;
            .animation(am-showDrawer .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both .2s);
        }
    }
    .drawer-row {
        @media @bolt-on-drawer-breakpoint {
            display: flex;
            .panel {
                margin-bottom: 0;
                height: 100%;
            }
            + .row .panel-merge {
                margin-top: -1px;
                z-index: 2;
            }
        }
    }
    .drawer-wrapper {
        @media @bolt-on-drawer-breakpoint {
            padding-top: 15px;
            padding-bottom: 15px;
        }
    }
    .drawer-neighbour {
        @media @bolt-on-drawer-breakpoint {
            position: relative;
            z-index: 2;
        }
    }
    .text-gas {.text-info;}
    .text-electricity {.text-warning;}
    .fuel-icon {
        width: 12px;
        display: inline-block;
        vertical-align: middle;
        margin-right: 10px;
    }
    .line-title {
        position: relative;
        margin: 0 -20px 10px;
        text-align: center;

        &:before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            height: 1px;
            background: @gray-lighter;
        }

        > * {
            background: white;
            display: inline-block;
            margin: 0 auto;
            position: relative;
            padding: 0 10px;
        }
    }
    .bolt-on-basket {
        &.has-bolt-ons {
            padding-top: 15px;
        }
        @media @bolt-on-basket-breakpoint {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 100;
            background: white;
            padding-top: 0 !important;
            padding-bottom: 10px;
            .box-shadow(0px 0px 40px 0px rgba(67, 134, 179, 0.20));
            border-top: 1px solid @panel-default-border;
            .panel {
                border: none;
                margin-bottom: 0;
                margin-top: 0;
                overflow: visible;
                border-radius: 0;
                .box-shadow(none);
            }
            .panel-body {
                padding: 0;
            }
        }
        .btn-block {
            padding-left: 0;
            padding-right: 0;
        }
    }
    .bolt-on-basket_inner {
        .animation(am-fadeInbasket .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both .2s);

        @media @bolt-on-basket-breakpoint {
            max-width: 400px;
            margin: 0 auto;
            .animation(none);
        }
    }
    .bolt-on-save {
        .animation(am-fadeInbasket .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both .2s);

        @media @bolt-on-basket-breakpoint {
            .animation(none);
        }
    }
    .bolt-on-save.has-bolt-ons,
    .has-bolt-ons .bolt-on-basket_inner {
        .animation-delay(.7s);
    }
    .bolt-on-basket_accordion-toggle {
        @media @bolt-on-basket-breakpoint {
            margin: 0 -(@grid-gutter-width / 2);
            padding: 0 (@grid-gutter-width / 2);
            padding-bottom: 10px;
            padding-top: 10px;
            .tidy-children;
        }
    }
    .bolt-on-basket_accordion-indicator {
        .transition(all .2s ease-in-out);
        font-size: @font-size-small;
        float: right;
        display: none;

        &--open {
            .rotate(180deg);
        }

        @media @bolt-on-basket-breakpoint {
            display: inline-block;
        }
    }
    .bolt-on-basket_accordion {
        @media @bolt-on-basket-breakpoint {
            max-height: 0;
            overflow: hidden;
            .transition(max-height .2s ease-in-out);

            &--open {
                max-height: 200px;
                display: block;
            }
        }
    }
    .basket-total {
        @media @bolt-on-basket-breakpoint {
            margin: 0 -(@grid-gutter-width / 2);
            padding: 0 (@grid-gutter-width / 2);
            border-top: 1px solid @panel-default-border !important;
            padding-top: 10px;
        }
    }
    .basket-total-price {
        font-size: 16px;
        line-height: 32px;
    }
    .basket-total-icon {
        display: none;
        width: 24px;
        margin-left: 5px;

        @media @bolt-on-basket-breakpoint {
            display: inline-block;
        }
        img {
            .animation(am-showBasketIcon .3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both);
        }
    }
    .active-bolt-ons {
        max-height: 0;
        overflow: hidden;
        margin-bottom: 0;
        .transition(max-height .3s ease-in-out);

        &.active {
            max-height: 100px;
        }

        @media @bolt-on-basket-breakpoint {
            margin-bottom: 10px;
        }
    }
    .active-bolt-on-price {
        padding-left: 0;

        a {
            display: block;
        }
    }
    .active-bolt-on-item {
        padding-left: 34px;
        min-height: 34px;
        position: relative;
    }
    .active-bolt-on-title {
        line-height: 1.3;
        display: inline-block;
    }
    .basket-bolt-on-icon {
        width: 24px;
        position: absolute;
        top: 0;
        left: 0;
    }
    .final-price {
        text-align: right;
        font-size: @font-size-h3;
        line-height: 1;
        margin: 0;
    }
    .bolt-on-basket-overlay {
        visibility: hidden;
        background: fadeout(black, 60%);
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 99;
        opacity: 0;
        .transition(opacity .5s);

        &--visible {
            @media @bolt-on-basket-breakpoint {
                opacity: 1;
                visibility: visible;
            }
        }
    }
    .bolt-on {
        margin-bottom: 0;
    }
    .bolt-on-header {
        display: flex;
        align-items: center;
    }
    .bolt-on-header-image {
        width: 30%;
        max-width: 80px;
    }
    .bolt-on-header-title {
        padding-left: 10px;
        margin: 0;
    }
    .bolt-on-benefits {
        margin: 15px 0;
        padding-left: 18px;

        > li {
            margin-bottom: 10px;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }
    .drawer-title,
    .basket-title {
        margin-top: 0;
    }
    hr {
        margin: 22px 0;
        border-top: 1px solid @gray-lighter;
        display: block
    }
    .planInfo__callToActionContainer {
        margin: 0 auto;
        padding-top: 15px;
        padding-bottom: 30px;
        max-width: 400px;

        &--error {
            padding-bottom: 95px;
        }
    }
}

// Footer needs padding on this page;
.layout-has-cart {
    @media @bolt-on-basket-breakpoint {
        .footer {
            padding-bottom: 120px;
        }
    }
}

@-webkit-keyframes am-showDrawer {.am-showDrawer}
@-moz-keyframes am-showDrawer {.am-showDrawer}
@-ms-keyframes am-showDrawer {.am-showDrawer}
@-o-keyframes am-showDrawer {.am-showDrawer}
@keyframes am-showDrawer {.am-showDrawer}
.am-showDrawer () {
  from {
    .transform(translate(-100%, 0));
  }
  to {
    .transform(translate(0));
  }
}
@-webkit-keyframes am-fadeInbasket {.am-fadeInbasket}
@-moz-keyframes am-fadeInbasket {.am-fadeInbasket}
@-ms-keyframes am-fadeInbasket {.am-fadeInbasket}
@-o-keyframes am-fadeInbasket {.am-fadeInbasket}
@keyframes am-fadeInbasket {.am-fadeInbasket}
.am-fadeInbasket {
  from {
    opacity: 0;
    .transform(translate(0, 50px));
  }

  to {
    opacity: 1;
    .transform(translate(0));
  }
}
@-webkit-keyframes am-showBasketIcon {.am-showBasketIcon}
@-moz-keyframes am-showBasketIcon {.am-showBasketIcon}
@-ms-keyframes am-showBasketIcon {.am-showBasketIcon}
@-o-keyframes am-showBasketIcon {.am-showBasketIcon}
@keyframes am-showBasketIcon {.am-showBasketIcon}
.am-showBasketIcon {
  0% {
    .transform(scale(0));
  }
  70% {
    .transform(scale(1.2));
  }
  100% {
    .transform(scale(1));
  }
}