@import '../_base';
$section-padding: 5px;

.checkout-page-header {
    padding: $header-height 0 $gutter-large;
    background: $site-background;

    &__inner {
        padding: $gutter-large $gutter 0;
        text-align: center;
    }
}

.checkout-info-content {
    @include desktop {
        display: flex;
        flex-flow: row-reverse nowrap;
    }

    &__aside {
        @include desktop {
            margin: 0 0 $gutter-large 0;
            flex: 0 0 300px;
            padding: 0 0 0 $gutter-large;
        }

        @media (min-width: $site-width-medium) {
            flex: 0 0 380px;
        }
    }


    &__details {
        outline: none;
        flex: 1 1 auto;
    }
}

.AddressEntry {
    &__DeliveryInformation {
        margin-bottom: 0 !important;
    }

    &__AddressCity {
        @include desktop {
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-around;

            .form-field {
                flex: 0 0 calc(50% - #{$gutter});
                margin: $gutter 0 0 !important;
            }
        }
    }

    &__HalfWrap {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;

        &.no-unit {
            justify-content: flex-start;
            margin-left: $gutter;
        }

        .form-field {
            flex: 0 0 auto; // IE11 sux
            width: calc(50% - #{$gutter-large}); // IE11 sux
            margin: $gutter 0 0 !important;
        }
    }
}

.page-checkout {
    #page-header {
        padding: 80px $gutter $gutter-large;
    }
    &--hasInlineAlerts #page-header {
        padding-top: $gutter-large;
    }

    .PromoList {
        border-top: $list-item-border-width solid $border-color;
        margin-bottom: $gutter-large;
        .PromoListItem label {
            color: $primary-text-color;
        }
    }

    .main-content {
        padding-bottom: $fixed-cta-padding;
    }

    .adjustments-container {
        border: $list-item-border-width solid $border-color;
        background: $module-background;
        margin: $gutter-large 0 0 0;
        padding: $gutter-large;

        .tip {
            border-bottom: none;
            p {
                font-weight: bold;
            }
            input {
                float: right;
                margin-left: 0;
                width: 72px;

                @include desktop {
                    float: none;
                }

                @media (max-width: $site-width-mobile-new) {
                    width: 51px;
                }
            }
            .amount {
                height: 40px;
                line-height: 40px;
            }

            &.promos-enabled {
                padding-bottom: $gutter;
            }
        }
    }

    .TipButton {
        display: block;
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-weight: bold;
        text-align: center;
        background-color: $disabled-color;
        color: $primary-text-color-contrast;
        cursor: pointer;
        float: left;
        margin-right: 8px;
        border: none;
        padding: 0;
        box-sizing: border-box;

        &:hover {
            text-decoration: none;
        }

        &--active {
            background-color: $primary-color;
        }

        &--cash {
            line-height: 18px;
        }

        &--disabled {
            background-color: $disabled-color;
            cursor: default;
        }
    }

    .info {
        padding: 0 0 $gutter-large;
    }

    .address,
    .gift-forms {
        h3 {
            margin: 0;
            padding: 0;
        }

        p {
            @include primary-text;
        }

        .form-field,
        .gift-field {
            display: block;
            margin: $gutter $gutter 0;
            padding: 0;
            border: none;
            background-color: transparent;

            label {
                display: block;
                font-size: 13px;
                line-height: 15px;
            }

            input {
                width: 100%;
            }

            &.state {
                select {
                    box-sizing: border-box;
                    width: 100%;
                    height: 40px;
                }
            }
        }

        .labels {
            margin: $gutter $gutter-small;

            @include desktop {
                margin: $gutter $gutter 0;
            }
        }
    }

    .gift-forms {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;

        .gift-field {
            flex: 0 0 calc(50% - #{$gutter});
            margin: $gutter 0 0 !important;
        }
    }

    .gift-information {
        margin-top: 25px;
    }

    .gift-message {
        textarea {
            margin-top: $gutter-large;
            width: 100%;
            height: 80px;
            resize: none;

            &::placeholder {
                font-size: 14px;
            }
        }
    }

    .GiftCreditList label,
    .PromoListItem label {
        @extend %list-item;

        cursor: pointer;

        &:hover {
            background-color: $search-results-item-hover-color;
        }

        input {
            display: none;
        }

        .amount {
            float: right;
        }

        .promo-desc {
            display: block;
            @include legal-text;
            font-weight: normal;
        }

        &.has-subtext {
            padding: 7px 10px;
        }
    }

    #credit-new-label,
    .PromoListItem label,
    .GiftCreditList label {
        .icon-x-circle,
        .icon-plus-circle {
            color: $gray-legal-text;
        }
    }

	.SharedCredit__icon--disabled.icon-x-circle,
	.CreditsSharing__addCoworker__icon--disabled.icon-plus-circle {
		color: $disabled-color;
	}

    .payment-method {
        &.first-credit {
            border-top: $list-item-border-width solid $border-color;
        }

        .tooltip {
            visibility: hidden;
        }

        &.active {
            label {
                transition: background-color 0.2s;
                background-color: $primary-color;
                font-weight: bold;
                color: $primary-text-color-contrast;

                .promo-desc {
                    color: $primary-text-color-contrast;
                }
            }
        }

        &.disabled {
            label {
                cursor: default;
                &:hover {
                    background-color: $module-background;
                }
                .promo-title {
                    color: $legal-text-color;
                }
            }

            .tooltip {
                &.in {
                    opacity: 1;
                }
                @include desktop {
                    visibility: visible;
                }
                left: 11.5px !important;
                margin-top: -23px;
                z-index: $z-index-menu-item-tooltip;
                pointer-events: none;
                .tooltip-inner {
                    box-sizing: border-box;
                    max-width: 297px;
                    line-height: 13px;
                    background-color: $menu-tooltip-background;
                    box-shadow: 0 0 5px 0 $menu-tooltip-shadow-color;
                    border-radius: 3px;
                    white-space: pre-wrap;
                    padding: 10px;
                    font-size: 13px;
                    text-align: left;
                    color: $secondary-text-color;
                }
                &.bottom .tooltip-arrow {
                    position: relative;
                    width: 15px;
                    height: 15px;
                    left: 13px;
                    overflow: hidden;
                    margin: 0;
                    padding: 0;
                    border: 0;
                    border-bottom-color: transparent;
                }
                &.bottom .tooltip-arrow:after {
                    content: '';
                    position: absolute;
                    width: 15px;
                    height: 15px;
                    background: $menu-tooltip-background;
                    transform: rotate(45deg);
                    top: 12px;
                    left: 0;
                    box-shadow: 0 0 5px 0 $menu-tooltip-shadow-color;
                }
            }
        }
    }

    .promos-wrapper {
        .GiftCreditList {
            margin-bottom: $gutter-large;
            .payment-method:not(.active) .GiftCreditListItem label {
                color: $primary-text-color;
            }
        }
        &:last-child {
            .GiftCreditList {
                margin-bottom: 0;
            }
        }
    }

    .other-payments {
        &-recaptcha {
            margin-top: $gutter-large;
            flex: 100%;
        }
    }

    .error-messages {
        width: 100%;
        background-color: $error-msg-background;
        box-sizing: border-box;
        padding: $gutter;
        border-radius: 3px;
        margin-bottom: 15px;

        @media (max-width: $site-width-small - 1) {
            margin-bottom: $gutter-large;
        }

        .message {
            font-size: 13px;
            line-height: 20px;
            min-height: 20px;
            text-align: center;
        }
    }

    .input-error-msg {
        border: 1px solid $error-color;
    }

    .form-container {
        padding: $gutter-large $gutter;
        border: 1px solid $border-color;
        border-top: none;
        background-color: $module-background;

        @include desktop {
            &:not(.section) {
                padding: 15px;
            }
        }

        label:not(.AddressLabels__input):not(.Checkbox):not(.AddressLabels__label) {
            display: inline-block;
            line-height: 15px;
            font-size: 13px;
            padding-bottom: $gutter;
            padding-top: $gutter;
            padding-left: 0;
            border: 0;
        }

        .label-error-msg {
            color: $error-color;
        }
    }

    .messaging {
        padding: 0 $gutter;
    }

    .promo-gift-codes {
        margin-top: 0;
        margin-bottom: $gutter-large;
        padding-top: $gutter-large;
        border-bottom: none;
        border-top: 1px solid $border-color;
        display: flex;
        flex-wrap: wrap;

        &.no-promos {
            margin-bottom: $gutter-large;
        }

        &__NotAccepted {
            text-decoration: none;

            &__Icon {
                display: inline-block;
                padding: 10px 0 10px 10px;
                font-size: 17px;
                line-height: 20px;
                color: $legal-text-color;
            }

            &__Text {
                display: block;
                text-indent: -1000rem;
            }
        }

        .promo-gift-errors {
            width: 100%;
            margin: 0 0 $gutter-large;
            background-color: $error-msg-background;
            border-radius: 3px;

            .message {
                color: $gray-primary-text;
                font-size: 13px;
                line-height: 20px;
                min-height: 20px;
                padding: 10px;
                text-align: center;
            }
        }

        .discount-input {
            width: 176px;
            padding-left: 4px;
            @media (min-width: $site-width-mobile-large) {
                padding-left: $gutter;
                padding-right: $gutter;
                width: 200px;
            }
        }

        .discount-button {
            margin-left: $gutter;
            background-color: $primary-color;
            padding-left: $gutter-large;
            padding-right: $gutter-large;
            text-align: center;

            &.disabled {
                background-color: $disabled-color;
            }
        }
    }

    .select-error {
        color: $error-color;
        border: 1px solid $error-color;
    }

    .cta-wrapper {
        .dcom-button {
            float: none;
            margin: 0 auto;

            @include desktop{
                display: block;
                width: 300px;
                margin-bottom: $gutter-large;
            }
        }

        &.mobile {
            clear: both;
            margin: 0 0 $gutter-large;
            padding: $gutter-large $gutter;
            border: $list-item-border-width solid $border-color;
            background: white;

            .cart-points {
                padding: 10px 0 0;
                .icon-trophy {
                    top: 5px;
                }
            }
        }

        &.fixed-cta {
            .dcom-button {
                width: calc(100% - #{$gutter-large});
            }
        }
    }

    .section {
        @include secondary-text;
        border: $list-item-border-width solid $border-color;
        border-top: 3px solid $primary-color;
        padding: $section-padding+$gutter $section-padding;
        background-color: $module-background;
        margin-bottom: $gutter-large;

        .text-container {
            margin: 0 $gutter;
            color: $secondary-text-color;
            @media (max-width: $site-width-small - 1) {
                margin: 0 1%;
            }
        }

        .header {
            color: $primary-color;
        }

        hr {
            margin: 15px -15px 0;
            border: none;
            border-bottom: 1px solid $border-color;
            @media (max-width: $site-width-small) {
                margin: 15px -13px 0;
            }
            @media (max-width: $site-width-small-portrait) {
                margin: 15px -11px 0;
            }
            @media (max-width: $site-width-mobile-large) {
                margin: 15px -9px 0;
            }
        }

        .error-messages {
            margin-bottom: 0;
            margin-top: 15px;
        }
    }

    .special-instructions {
        border-top: none;
        word-wrap: break-word;
        .form-field {
            margin: 0;
            width: 100%;
            label {
                padding-top: 0;
            }
        }
    }

    .laundry-options {
        margin: 0 $gutter 7px;
        label {
            @include secondary-text;
            padding-top: 0;
        }
        @media (max-width: $site-width-small - 1) {
            margin: 0 1% 7px;
        }
    }

    .save-special-instructions {
        padding: $gutter 0 0;

        .Checkbox {
            margin: $gutter-small 0;
        }

        .icon-concur-logo-with-brand {
            display: inline-block;
            font-size: 24px;
            vertical-align: bottom;
            line-height: 15px;
        }
    }

    .sms-checkbox {
        display: inline-block;

        label {
            width: 245px;
            vertical-align: middle;
            @include tablet {
                width: auto;
            }
        }
    }
    input[type='checkbox'] + span:after {
        content: '';
    }

    .CartItems__Inner__Content {
        padding-bottom: $gutter-large;
    }
}

.CartCheckout {
    .Bag__header {
        line-height: 40px;
        background: #fff;
        border-bottom: 1px solid $modal-page-background;
    }

    .Bag__product {
        &:last-of-type {
            padding-bottom: 0;
        }
    }

    .Bag__button-container {
        background: transparent;
        padding: $gutter-large $gutter-large 0;
    }

    .Bag__delivery-points {
        margin-top: 0;
        border-top: none;
    }

    .MerchantPageAside--gifting {
        .CartContainer {
            background: url('/images/gifting/stars_narrow.png') top right
                no-repeat white;

            @media (max-width: $site-width-small) and (min-width: $site-width-mobile-large) {
                background: url('/images/gifting/stars_wide.png') top right
                    no-repeat white;
            }
        }

        .Cart__Module,
        .CartSticky {
            background: none;
        }
    }
}

.CartCheckoutTop {
    @media (max-width: $site-width-small-portrait) {
        .Cart__SummaryWrap {
            display: none;
        }
    }
}

.CartCheckoutBottom {
    .CartHeader,
    .StaticCartContainer__ItemsWrap {
        display: none;
    }
}