/* Spinner */

.wcrp-rental-products-spinner {
	background-image: url( '../../../../../wp-includes/images/spinner-2x.gif' );
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
	margin-top: 20px;
	width: 26px;
	height: 26px;
	display: none;
}

/* Rental form */

.wcrp-rental-products-rental-form {
	margin-bottom: 20px;
}

.wcrp-rental-products-rental-form.wcrp-rental-products-rental-form-after-quantity:before { /* Ensures the rental form is cleared so after quantity, height is added here as margin-top wouldn't work here due to clear: both; */
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	height: 20px;
}

.wcrp-rental-products-rental-form .wcrp-rental-products-rental-dates {
	width: 65%; /* Ensures not too wide while keeping dates visible on mobile */
}

.wcrp-rental-products-rental-form .wcrp-rental-products-disable-rental-start-end-days,
.wcrp-rental-products-rental-form .wcrp-rental-products-rental-totals,
.wcrp-rental-products-rental-form .wcrp-rental-products-rental-no-price,
.wcrp-rental-products-rental-form .wcrp-rental-products-rental-qty-exceeded,
.wcrp-rental-products-rental-form .wcrp-rental-products-rental-dates-unavailable {
	margin: 20px 0 0 0;
}

.wcrp-rental-products-rental-form .wcrp-rental-products-rental-totals {
	display: none !important; /* Some themes override .woocommerce-info which is also a class of this element and make it display when it should not be initially so is !important here, this is overriden with a further inline !important via JS when it should be displayed */
}

.wcrp-rental-products-rental-form .wcrp-rental-products-disable-rental-start-end-days {
	font-size: 0.8em;
}

.wcrp-rental-products-rental-form .wcrp-rental-products-rental-dates-parent {
	position: relative;
}

.wcrp-rental-products-excludes-addons {
	display: none; /* Hidden and gets shown if add-ons active and product allows add-ons via JS */
}

/* Availability checker */

.wcrp-rental-products-availability-checker .wcrp-rental-products-availability-checker-parent {
	position: relative;
	display: block;
}

.wcrp-rental-products-availability-checker .wcrp-rental-products-availability-checker-applied .wcrp-rental-products-availability-checker-applied-notice {
	margin-bottom: 0;
}

.wcrp-rental-products-availability-checker .wcrp-rental-products-availability-checker-applied .wcrp-rental-products-availability-checker-applied-info {
	margin: 15px 0;
}

.wcrp-rental-products-availability-checker .wcrp-rental-products-availability-checker-applied .wcrp-rental-products-availability-checker-applied-info .wcrp-rental-products-availability-checker-applied-info-row > span {
	display: block;
}

.wcrp-rental-products-availability-checker .wcrp-rental-products-availability-checker-applied .wcrp-rental-products-availability-checker-applied-info .wcrp-rental-products-availability-checker-applied-info-row .wcrp-rental-products-availability-checker-applied-info-row-heading {
	font-weight: 700;
}

.wcrp-rental-products-availability-checker .wcrp-rental-products-availability-checker-unapplied .wcrp-rental-products-availability-checker-unapplied-form .wcrp-rental-products-availability-checker-unapplied-form-field {
	margin-bottom: 15px;
}

.wcrp-rental-products-availability-checker .wcrp-rental-products-availability-checker-unapplied .wcrp-rental-products-availability-checker-unapplied-form .wcrp-rental-products-availability-checker-unapplied-form-field .wcrp-rental-products-availability-checker-unapplied-form-field-label {
	display: block;
	width: max-content;
	font-weight: 700;
}

/* Availability checker status */

.wcrp-rental-products-availability-checker-status,
.wcrp-rental-products-availability-checker-status-select-options {
	margin: 15px 0 !important; /* Some themes override the WooCommerce notice styling with no margin, this can cause the availability checker status to be displayed directly below the buttons on loops, archives, blocks etc with no gap between, so we use !important here, this can be overridden with a more targetted rule if necessary to remove/amend the gap, but more users will want a gap here than not */
}

.wcrp-rental-products-availability-checker-status .wcrp-rental-products-availability-checker-status-title {
	font-weight: 700;
	margin-bottom: 5px;
}

.wcrp-rental-products-availability-checker-status .wcrp-rental-products-availability-checker-status-info {
	font-size: 0.9em;
}

.wcrp-rental-products-availability-checker-status .wcrp-rental-products-availability-checker-status-info .wcrp-rental-products-availability-checker-status-info-row > span {
	width: 50%;
	display: inline-block;
}

@media only screen and (max-width: 980px) {
	.wcrp-rental-products-availability-checker-status .wcrp-rental-products-availability-checker-status-info .wcrp-rental-products-availability-checker-status-info-row > span {
		width: 100%;
		display: block;
	}
}

.wcrp-rental-products-availability-checker-status .wcrp-rental-products-availability-checker-status-info .wcrp-rental-products-availability-checker-status-info-row .wcrp-rental-products-availability-checker-status-info-row-heading {
	font-weight: 700;
}

/* Rental or purchase toggle */

.wcrp-rental-products-rental-purchase-toggle + .product_meta {
	margin-top: 20px; /* If the rental or purchase toggle has the product meta section directly after it (product page) top margin added so there is a gap */
}

/* Litepicker */

.wcrp-rental-products-is-rental .litepicker * { /* Some themes (Divi but maybe more) override elements to be box-sizing: border-box which causes the litepicker days to be misaligned from the day headings */
	-webkit-box-sizing: content-box !important;
	box-sizing: content-box !important;
}

/* WooCommerce */

.wcrp-rental-products-is-rental .woocommerce .product .summary {
	overflow: visible !important; /* Some themes add an overflow hidden to the product summary div meaning the rental form can be cut off, this fixes it */
}