/*------------------------------------------------------------------
Woo Floating Bar
-------------------------------------------------------------------*/

// Configuration
@import "config";

// Mixins
@import "mixins";

.owp-floating-bar {
	position: fixed;
    top: 0;
    background-color: #2c2c2c;
    width: 100%;
    height: 0;
    z-index: 15;
   	@include opacity( 0 );
   	visibility: hidden;
    @include transition( all .3s );

    &.show {
    	height: 66px;
	   	@include opacity( 1 );
	   	visibility: visible;
    }

	.container {
	    @include display();
	    @include flex-wrap( wrap );
	    @include align-items( center );
	    height: 66px;
	}

	.left,
	.right {
		width: 50%;
	}

	.right {
		text-align: right;
	}

	p.selected {
		display: inline-block;
    	margin-bottom: 0;
	    margin-right: 12px;
	    color: $color-1;
	    font-size: 16px;
	    font-weight: 600;
	}

	h2.entry-title {
		display: inline-block;
	    color: $color-1;
	    font-size: 16px;
	    font-weight: 300;
	    margin: 0;
	    padding: 0;
	    border: 0;
	}

	.product_price {
		display: inline-block;

		p {
			font-size: 16px;
		    font-weight: 600;
		    margin: 0 30px 0 0;
		}

		del {
			@include opacity( .7 );
		}

		del .amount,
		.amount {
			color: $color-1;
		}
	}

	form.cart {
		display: inline-block;

		.quantity {
			margin: 5px 15px 0 0;

			.minus,
			.plus {
				background-color: rgba(255,255,255,.1);
			    color: $color-1;
			    font-size: 20px;
			    border: 0;

			    &:hover {
			    	background-color: rgba(255,255,255,0.2);
			    }
			}

			.qty {
			    background-color: rgba(255,255,255,0.2);
			    color: #fff;
				border: 0;
			}
		}
	}

	button.button {
		background-color: $color-1;
	    color: #000;
	    font-size: 14px;
	    height: 46px;
	    padding: 0 40px;

	    &:hover,
	    &:focus {
	    	background-color: #f1f1f1;
	    }
	}

	.added_to_cart {
		display: none;
	}

	.out-of-stock {
		display: inline-block;
	    margin: 0;
	    color: #fff;
	    font-size: 16px;
	    font-weight: 600;
	}
}

.boxed-layout .owp-floating-bar {
    width: 1280px;
    max-width: 100%;
}

/* Responsive */
@media screen and (max-width: 1024px) {
	body {
		margin-bottom: 45px;
	}
	
	.owp-floating-bar {
	    top: auto !important;
	    bottom: 0;

	    &.show,
	    .container {
	    	height: 45px;
	    }

		.left {
			display: none;
		}

		.right {
			width: 100%;
			text-align: center;
		}

		form.cart .quantity {
		    margin-top: 0;
		}

		button.button {
		    height: 36px;
		    padding: 0 30px;
		}
	}

	#scroll-top {
    	bottom: 50px;
    }
}

@media screen and (max-width: 767px) {
	.owp-floating-bar .product_price {
		display: none;
	}
}

@media screen and (max-width: 320px) {
	.owp-floating-bar {
		display: none;
	}
}