/* The styles for Hunt and Jumps cart */

haj-cart {
    /* CSS variables*/
    --haj-cart-bg-color: #eff1f5;
}

haj-cart * {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    color: inherit;
    background: 0 0;
    background-color: rgba(0, 0, 0, 0);
    display: block;
    line-height: 1;
    list-style: none;
    quotes: none;
    border-collapse: collapse;
    border-spacing: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: Arial, serif;
}

haj-cart input::-webkit-outer-spin-button,
haj-cart input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number]{
    -moz-appearance: textfield;
}

haj-cart .mobile-hidden {
    display: none;
}

haj-cart .cart-modal{
    /*The outer container for the modal*/
    width: calc(100% + 1px);
    overflow-x: hidden;
    padding-right: 1px;
    height: 100%;
    position: fixed;
    min-height: 100%;
    overflow-y: auto;
    z-index: 20;
    background: rgb(255, 255, 255);

    top: 0;
    bottom: 0;
    right: 0;
    transform: translateX(0%);
    transition: .27s ease-out;
}

haj-cart .cart-closed {
    transform: translateX(100%);
}


haj-cart .cart-modal-inner{
    /*The inner container for the modal*/
    min-height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 0 auto;
    max-width: 100%;
    background-color: var(--haj-cart-bg-color);
}

haj-cart .cart-modal.cart-checking-out {
    width: 100%;
    max-width: initial;
}


haj-cart .cart-modal.cart-checking-out {
    width: 100%;
    max-width: initial;
}

haj-cart .cart-col-container {
    max-width: 1440px;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 100% 0;
    grid-template-rows: 1fr;
}

haj-cart .cart-header {
    max-height:  69px;
    background: var(--haj-cart-bg-color);
    display: flex;
    flex: 1;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    position: relative;
    margin-bottom: 7px;
}

haj-cart .close-cart {
    font-size: 30px;
    height: 30px;
    margin: auto 6px;
    z-index: 1;
}

haj-cart .close-arrow {
    font-size: 20px;
    height: 100%;
    width: 20%;
    position: absolute;
    text-align: left;
    z-index: 1;
}


haj-cart .cart-header h1 {
    font-size: 20px;
    font-weight: 500;
    line-height: 20px;
    width: 100%;
    text-align: center;
}




haj-cart .cart-item {
    box-shadow: 0 20px 24px -20px rgba(0,0,0,.1);
    max-height: 300px;
    overflow: hidden;
    margin-bottom: 24px;
    opacity: 1;
    transform: scaleY(1);
}


haj-cart .item-inner {
    background-color: #ffffff;
    display: grid;
    position: relative;
    max-height: 1000px;
    min-height: 180px;
    padding: 24px 24px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 4px;
    grid-row-gap: 4px;
}


haj-cart .cart-contents .closing {
    transform: scaleY(0);
    max-height: 0;
    transition: all 150ms;

}

haj-cart .cart-item .item-title {
    grid-area: 1 / 1 / 2 / 2;
}

haj-cart .cart-item .item-controls {
    grid-area: 2 / 1 / 3 / 2;
}

haj-cart .cart-item .item-extras {
    grid-area: 1 / 2 / 2 / 3;
}

haj-cart .cart-item .item-price {
    grid-area: 2 / 2 / 3 / 3;
}



haj-cart .cart-sub {
    width: 90%;
    margin: 0 auto 24px auto;
    border-radius: 24px 8px 24px 24px;

}

haj-cart .cart-sub .item-inner {
    background-color: #e1ffe0;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(3, 1fr);

}

haj-cart .cart-sub .item-title {
    grid-area: 1 / 1 / 2 / 2;
    font-size: 28px;
    text-align: center;
    font-weight: bold;
    margin-top: 13px;
}

haj-cart .cart-sub .item-price {
    grid-area: 2 / 1 / 3 / 2;
    text-align: right;
}

haj-cart .cart-sub .sub-checkout-btn {
    grid-area: 3 / 1 / 4 / 2;
}

haj-cart .remove-item {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 20px;
    width: 25px;
    height: 25px;
    background: #fd7373;
    border-radius: 0px 0px 0px 4px;
    color: #fde0e0;
}

haj-cart .item-quantity-controls {
    display: flex;
    flex-direction: row;
}


haj-cart .item-quantity-controls {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 150px;
    height: 55px;
    font-size: 16px;
    border: 1px solid #707070;
}

.fade-in {
    opacity: 1;
    animation-name: fadeIn;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 200ms;
    transition: box-shadow 200ms;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        box-shadow: unset;
    }
    100% {
        opacity: 1;
        box-shadow: inherit;
    }
}

haj-cart .cart-contents .item-quantity {
    width: 50%;
    font-size: 28px;
    text-align: center;
    border-left: 1px solid #707070;
    border-right: 1px solid #707070;
}

haj-cart .quantity-change {
    width: 25%;
    font-size: 32px;
    position: relative;

}

haj-cart .quantity-change i.remove{
    font-size: 19px;
    vertical-align: middle;
    margin-bottom: 6px;
    color: #fd7373;

}

haj-cart .quantity-change .an_icon{
    /* For transition, see https://stackoverflow.com/a/55524112/4297676*/
    max-height: 9999px;
    visibility: visible;
    transition: visibility 100ms linear 50ms, max-height 0ms, opacity 100ms  linear 50ms;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

haj-cart .quantity-change .inactive{
    transition: all 75ms;
    visibility: hidden;
    opacity: 0;
    max-height: 0;
}

haj-cart cart-contents .item-price {
    display: flex;
    justify-content: end;
    flex-direction: row;
}

haj-cart .item-price .price-wrapper {
    align-self: flex-end;
}

haj-cart .item-price span {
    display: inline;
}

haj-cart .item-price .price-int {
    font-size: 46px;
}

haj-cart .item-price .price-dec {
    font-size: 28px;
}

haj-cart .cart-footer {
    padding: 0 24px;
}


haj-cart .cart-modal .total {
    display: flex;
    justify-content: end;
    flex-direction: row;
    align-content: flex-end;
}

haj-cart .cart-modal .total span {
    display: inline;
    align-self: baseline;
}

haj-cart .cart-modal .total-int {
    font-size: 36px;
}

haj-cart .cart-modal .total-dec {
    font-size: 24px;
}


haj-cart .cart-primary-btn {
    text-align: center;
    background: rgba(26, 77, 178, 1);
    color: white;
    margin-top: 20px;
    padding: 16px;
    border: 1px solid;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    transition: .2s ease-out;
    transition-property: border-color,background-color,box-shadow;
}

haj-cart .cart-primary-btn:hover {
    background-color: rgba(13, 89, 242,1);
    box-shadow: 0 10px 4px -8px rgba(0,0,0,.5);
    border-color: transparent;
}

haj-cart .payment_btn {
    position: relative;
}

haj-cart .cart-primary-btn [disabled], haj-cart .cart-payment.processing .payment_btn {
    background-color: rgba(150, 158, 168);
    pointer-events: none;
}

haj-cart .cart-primary-btn .spinner {
    fill: #f3f3f3;
    display: none;
    animation:payment_spinner .75s infinite linear;
    height: 20px;
    float: right;
    position: absolute;
    right: 15px;
}

@keyframes payment_spinner {
    100%{
        transform:rotate(360deg)
    }
}

haj-cart .cart-payment.processing .cart-primary-btn .spinner{
    display: inline;
}



haj-cart .cart-address {
    background-color: #ffffff;
    position: relative;
    max-height: 1000px;
    min-height: 180px;
    padding: 24px 24px;
    box-shadow: 0 20px 24px -20px rgba(0,0,0,.1);
}

haj-cart .cart-address h2 {
    font-size: 22px;
    font-weight: bold;
    text-align: left;
    margin-bottom: 10px;
}

haj-cart .cart-address .form-field {
    padding: 8px 0;
}

haj-cart .cart-address .form-field label{
    margin-bottom: 8px;
    display: inline-block;
    white-space: nowrap;
}

haj-cart .cart-address .checkout-input{
    line-height: normal;
    height: 52px;
    border: 1px solid rgba(229, 233, 233, 1);
    transition: .2s ease-out;
    transition-property: color,border-color,background-color;
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

haj-cart .cart-address .checkout-input:focus-within{
    border-color: rgba(80, 187, 243, 1);
    box-shadow: 0 5px 10px -3px rgba(80, 187, 243, .33);
}

haj-cart .cart-address .checkout-input input{
    flex: 1;
    outline: none;
    max-width: 100%;
    width: 100%;
    height: 100%;
    padding: 0 16px;
    font-weight: bold;
    line-height: 20px;
}

haj-cart .left-col {
    /* Take up the full width*/
    grid-area: 1 / 1 / 2 / 3;
}

haj-cart .cart-payment.waiting{
    opacity: 0.3;
    pointer-events: none;
}

haj-cart .checkout-summary {
    background: #FFF;
    padding: 24px;
}

haj-cart .item-summary {
    font-size: 15px;
    color: rgb(48, 53, 59)
}

haj-cart .item-summary a {
    display: inline;
}

haj-cart .item-summary h2 {
    font-size: 20px;
    color: rgb(40, 44, 47);
    font-weight: bold;
    margin-bottom: 24px;

}

haj-cart .line-item {
    margin: 0 12px 10px 0;
}

haj-cart .item-name{
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 6px;
}

haj-cart .item-details li {
    margin: 4px 0 0 20px;
}

haj-cart .item-details .subtotal-calc {
    font-size: 12px;
    opacity: .90;
    display: inline;
}

haj-cart .item-details li::before{
    content: '» ';
    opacity: .70;
}

haj-cart .buy-link {
    text-align: center;
    margin: 30px 0;
    font-size: 23px;
}

haj-cart a:hover{
    opacity: .6;
}

haj-cart .summary-total {
    text-align: center;
    margin-top: 22px;
    font-size: 20px;
    margin-right: 17px;
}

haj-cart .bonus-gmts {
    margin-top: 25px;
    font-size: 16px;
    font-family: serif;
}

haj-cart .bonus-gmt-amount em {
    display: inline;
    font-style: italic;
}
haj-cart .bonus-gmt-amount em {
    display: inline;
}

haj-cart .item-details li {
    font-size: 15px;
}

haj-cart .item-user-controls .cart-change-user {
    appearance: none;
    background-color: #FAFBFC;
    border: 1px solid rgba(27, 31, 35, 0.15);
    border-radius: 6px;
    box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
    box-sizing: border-box;
    color: #24292E;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    list-style: none;
    padding: 3px 8px;
    position: relative;
    transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: middle;
    white-space: nowrap;
    word-wrap: break-word;
    margin: 7px 15px 7px 0;
}

haj-cart .item-user-controls .item-id-input{
    border: 1px solid #707070;
    padding: 3px 5px;
    max-width: 128px;
}

haj-cart .item-user-controls .cart-change-user:hover {
    background-color: #F3F4F6;
    text-decoration: none;
    transition-duration: 0.1s;
}

haj-cart .item-user-controls .cart-change-user:disabled {
    background-color: #FAFBFC;
    border-color: rgba(27, 31, 35, 0.15);
    color: #959DA5;
    cursor: default;
}

haj-cart .item-user-controls .cart-change-user:active {
    background-color: #EDEFF2;
    box-shadow: rgba(225, 228, 232, 0.2) 0 1px 0 inset;
    transition: none 0s;
}

haj-cart .item-user-controls .cart-change-user:focus {
    outline: 1px transparent;
}

haj-cart .item-user-controls .cart-change-user:before {
    display: none;
}

haj-cart .item-user-controls .cart-change-user:-webkit-details-marker {
    display: none;
}

/* Desktop styles */
@media (min-width: 1020px) {

    haj-cart .cart-col-container {
        grid-template-columns: 70% 30%;
        margin: 0 auto;
        width: 80%;
    }
    haj-cart .mobile-hidden {
        display: initial;
    }
    haj-cart .desktop-hidden {
        display: none;
    }
    haj-cart .cart-modal {
        max-width: 450px;
        width: 35%;
        margin-left: auto;
        right: 0;
    }
    haj-cart .left-col {
        margin: 0 16px;
        grid-area: 1 / 1 / 2 / 2;
    }
    haj-cart .right-col {
        grid-area: 1 / 2 / 2 / 3;
    }
}