/*
This file contains a set of overrides which make the default underscores/bootstrap styles a little more pleasant.

CSS should be primarily developed inside the peake-styleguide project, however these overrides are nessessary
until more components are developed in the styleguide.

Once the styleguide has sufficient styles and components defined, this file can be removed as we should
be removing all references to bootstrap styles over time.
*/

.navbar-brand {
	max-height: 47px;
}

.bg-primary {
	background-color: #333333!important;
}

.btn-primary {
	color: #fff;
	background-color: #6d6e72;
	border-color: #6d6e72;
}

.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):active {
	color: #fff;
	background-color: #333333;
	border-color: #333333;
}

.btn-outline-primary {
	color: #6d6e72;
	border-color: #6d6e72;
}

.btn-primary.focus,
.btn-primary:focus {
	-webkit-box-shadow: 0 0 0 0.2rem rgba(200,200,200,.5);
	box-shadow: 0 0 0 0.2rem rgba(200,200,200,.5);
}

.btn-outline-primary:hover {
	background-color: #6d6e72;
	border-color: #6d6e72;
}

.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show>.btn-outline-primary.dropdown-toggle, .wpcf7 .show>input.dropdown-toggle[type=submit], .wpcf7 input:not(:disabled):not(.disabled).active[type=submit], .wpcf7 input:not(:disabled):not(.disabled):active[type=submit] {
	background-color: #6d6e72;
	border-color: #6d6e72;
}

.form-control:focus,
.btn-outline-primary.focus,
.btn-outline-primary:focus {
	-webkit-box-shadow: 0 0 0 0.2rem rgba(200,200,200,.5);
	box-shadow: 0 0 0 0.2rem rgba(200,200,200,.5);
	border-color: #bdbec0;
}

.btn-outline-primary.disabled,
.btn-outline-primary.disabled:hover,
.btn-outline-primary:disabled:hover,
.btn-outline-primary:disabled {
	color: #bdbec0;
}

.custom-select:focus {
	border-color: #bdbec0 ;
	outline: 0;
	-webkit-box-shadow: 0 0 0 0.2rem rgba(200,200,200,.5);
	box-shadow: 0 0 0 0.2rem rgba(200,200,200,.5);
}

.woocommerce-page table.cart td.actions .input-text#coupon_code {
	width: 115px;
}

.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2,
.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1 {
	max-width: none;
}

.navbar-toggler,
.search-toggler {
	flex: 0 1 50px;
	min-width: 0;
}

.navbar-dark .search-toggler {
	color: rgba(255,255,255,.5);
	border-color: rgba(255,255,255,.1);
}

.search-toggler {
	padding: .4rem .75rem;
	font-size: 1.25rem;
	line-height: 1;
	background-color: transparent;
	border: 1px solid transparent;
	border-radius: .25rem;
}

@media (min-width: 768px) {
	.navbar-expand-md .search-toggler {
			display: none;
	}
}

.c-user-profiles__item:hover {
	text-decoration: none;
}

.woocommerce table.shop_attributes td {
	padding: 0 8px;
}

/**
 * The following overrides must remain, as these style elements we cannot directly control in the styleguide
 * For example, styles in stripe iframes, or wordpress functions which do not allow us to customise class names
 */

/* Checkout stripe overrides */
#wc-stripe-cc-form {
	margin: 0 !important;
}
#wc-stripe-cc-form label {
	display: inline-block;
	padding: 10px 10px 10px 0;
	vertical-align: top;
}

#stripe-card-element {
	display: inline-block;
	width: 350px;
	max-width: 100%;
}

#wc-stripe-new-payment-method {
	margin:  10px 10px 10px 0 !important;
}

@media screen and (min-width: 768px) {
	#wc-stripe-cc-form label {
			padding-left: 46px;
	}
}

#payment_method_cheque,
[for=payment_method_cheque],
#payment_method_cod,
[for=payment_method_cod],
#payment_method_paypal,
[for=payment_method_paypal] {
	display: inline-block;
}

/* BBPress overrides */
.mce-widget button:hover {
	background-color: inherit;
	color: inherit;
}

/* Woocommerce overrides */
.woocommerce form .form-row label.inline {
	margin-left: 16px;
}

.woocommerce form .form-row .required {
	color: #4a4a4a;
}

.shipping .woocommerce-Price-amount {
	font-weight: bold;
}

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
	float: none;
	width: auto;
}

#add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment {
	background: #fff;
	border-radius: unset;
}

li.wc_payment_method {
	list-style-type: none;
}

#payment_method_cheque, [for=payment_method_bacs] {
	display: inline-block;
}

#add_payment_method #payment div.payment_box,
.woocommerce-cart #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box {
	background: none;
	color: inherit;
	padding: 0;
	margin: inherit;
	font-size: inherit;
	border-radius: inherit;
	line-height: inherit;
}

#add_payment_method #payment div.payment_box::before,
.woocommerce-cart #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::before {
	content: none;
}

#payment_method_cheque,
[for=payment_method_cheque],
#payment_method_cod,
[for=payment_method_cod],
#payment_method_paypal,
[for=payment_method_paypal] {
	display: inherit;
}

.payment_method_paypal .c-payment-card,
.payment_method_ppec_paypal .c-payment-card {
	position: absolute;
	right: 0;
	top: -.1em;
}

.payment_method_paypal .about_paypal {
	position: absolute;
	top: 2.5em;
	right: 0;
}

/*On mobile the 'What is paypal?' link creeps over the text a little so pad it out a bit*/
.payment_method_paypal > p {
	padding-top: .5em;
}

/*They target the li in core, so this repeats the styles but removes the ul / li parts*/
.woocommerce-checkout #payment .payment_methods img.stripe-icon,
#add_payment_method #payment .payment_methods img.stripe-icon {
	float: right;
	max-width: 40px;
	padding-left: 3px;
	margin: 0;
}

#add_payment_method #payment .payment_methods img,
.woocommerce-cart #payment .payment_methods img,
.woocommerce-checkout #payment .payment_methods img {
	vertical-align: middle;
	margin: -2px 0 0 .5em;
	padding: 0;
	position: relative;
	box-shadow: none;
}

/*On stripe the images float so we don't want it on the wrapper*/
.payment_method_stripe .c-payment-card {
	float: none;
	width: 100%;
	position: absolute;
	top: -.25em;
	right: 0;
}

/*Increase specificity to override the core css*/
#payment .methods .wc_payment_method label[for=payment_method_stripe],
#payment .methods .wc_payment_method label[for=payment_method_stripe_alipay],
#payment .methods .wc_payment_method label[for=payment_method_stripe_bancontact],
#payment .methods .wc_payment_method label[for=payment_method_stripe_eps],
#payment .methods .wc_payment_method label[for=payment_method_stripe_giropay],
#payment .methods .wc_payment_method label[for=payment_method_stripe_ideal],
#payment .methods .wc_payment_method label[for=payment_method_stripe_multibanco],
#payment .methods .wc_payment_method label[for=payment_method_stripe_p24],
#payment .methods .wc_payment_method label[for=payment_method_stripe_sepa],
#payment .methods .wc_payment_method label[for=payment_method_stripe_sofort] {
	display: inherit;
}

/*Cancel link on paypal checkout*/
.wc-gateway-ppec-cancel {
	margin-top: 1em;
	display: block;
	text-align: center;
	color: #bdbec0;
}

/*Replace woocommerce truck with our own truck on basket page*/
#add_payment_method .cart-collaterals .shipping-calculator-button::after,
.woocommerce-cart .cart-collaterals .shipping-calculator-button::after,
.woocommerce-checkout .cart-collaterals .shipping-calculator-button::after {
	content: none;
}

.woocommerce-checkout:not(.woocommerce-order-received) #wrapper-navbar,
.woocommerce-checkout:not(.woocommerce-order-received) .c-footer:not(.c-footer--teeny) {
	display: none;
}

/* Display VAT Included label in one line */
.tax_label {
	white-space: nowrap;
}

/*Custom styles for product gallery based off what flexslider is doing*/
.c-product-gallery {
	position: relative;
}

.c-product-gallery .woocommerce-product-gallery__trigger {
	position: absolute;
	top: .5em;
	right: .5em;
	font-size: 2em;
	z-index: 9;
	width: 36px;
	height: 36px;
	background: #fff;
	border-radius: 10%;
	box-sizing: content-box;
	margin: .2em .5em;
}

/*The image used to trigger the lightbox if zoom enabled has a display: inline !important, we want to hide the image so we need to also use an important tag. */
.c-product-gallery .woocommerce-product-gallery__trigger img {
	display: none !important;
}

.c-product-gallery .woocommerce-product-gallery__trigger::before {
	content: "fullscreen";
	display: block;
	position: absolute;
	top: -1px;
	left: 2px;
	font-family: "Material Icons";
	color: black;
}

.c-product-gallery__list-item img {
	cursor: pointer;
	margin: 0;
}

.using-flexslider .c-product-gallery__list-item img {
	opacity: .5;
	transition: opacity .3s ease;
}

.using-flexslider .c-product-gallery__list-item img.flex-active,
.using-flexslider .c-product-gallery__list-item img:hover {
	opacity: 1;
}

/*When not using flexslider, we need to ensure the thumbnails still line up appropriately. Unfortunately the mark up */
/*is quite different to the styleguide when not using flexbox, so use the following media queries to accomodate*/
@media screen and (max-width: 319px) {
	.c-product-gallery:not(.using-flexslider) .c-product-gallery__list-item:nth-of-type(3n) {
		margin-right: 5%;
	}
	.c-product-gallery:not(.using-flexslider) .c-product-gallery__list-item:nth-of-type(3n+1) {
		margin-right: 0;
	}
}

@media (min-width: 480px) and (max-width: 767px) {
	.c-product-gallery:not(.using-flexslider) .c-product-gallery__list-item:nth-of-type(4n) {
		margin-right: 2%;
	}
	.c-product-gallery:not(.using-flexslider) .c-product-gallery__list-item:nth-of-type(4n+1) {
		margin-right: 0;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.c-product-gallery:not(.using-flexslider) .c-product-gallery__list-item:nth-of-type(3n) {
		margin-right: 5%;
	}
	:not(.using-flexslider) .c-product-gallery__list-item:nth-of-type(3n+1) {
		margin-right: 0;
	}
}

@media (min-width: 992px) {
	.c-product-gallery:not(.using-flexslider) .c-product-gallery__list-item:nth-of-type(5n) {
		margin-right: 3%;
	}
	.c-product-gallery:not(.using-flexslider) .c-product-gallery__list-item:nth-of-type(5n+1) {
		margin-right: 0;
	}
}

/*Stop order form adding a bottom margin on product category page.*/
.woocommerce .woocommerce-ordering {
	margin-bottom: 0;
}

/*Fixes for product image zooming*/
.zoomImg {
	background-color: #fff;
}

.body--secondary .zoomImg {
	background-color: #1b1b1b;
}

/*Stop price displaying too large and in green*/
.woocommerce div.product p.price, .woocommerce div.product span.price {
	color: inherit;
	font-size: initial;
}

/*Stop variations text in dropdown being cut off*/
.woocommerce div.product form.cart .variations select {
	padding-left: 1rem;
	padding-top: 0;
	padding-bottom: 0;
}

/**
 * <strong> needs to be inline otherwise privacy policy and potentially other content in the GDPR modal
 * will look broken. See: https://boxukltd.atlassian.net/browse/PEAK-931
 */
.gdpr.gdpr-privacy-preferences .gdpr-wrapper .gdpr-content .gdpr-tab-content > div .gdpr-info strong,
.gdpr.gdpr-reconsent .gdpr-wrapper .gdpr-content .gdpr-tab-content > div .gdpr-info strong,
.gdpr.gdpr-general-confirmation .gdpr-wrapper .gdpr-content .gdpr-tab-content > div .gdpr-info strong {
	display: inline !important;
}

/*Adjusting the position of the WooCommerce product placeholder images within Upsells on product details page*/
.c-product-panel--5grid-light img.wp-post-image {
	margin: 0 auto 2rem;
	text-align: center;
	width: 135px;
}