/* Draw a circle with different colours for different subscription statuses */
.woocommerce table.shop_table.subscription_details .subscription-status {
}
.woocommerce table.shop_table.subscription_details .subscription-status::before {
	content: ' ';
	display: inline-block;
	border-radius: 100%;
	width: 10px;
	height: 10px;
	background-color: white;
	margin-right: 10px;
	border: 1px solid #aaa;
}
.woocommerce table.shop_table.subscription_details .subscription-status.active::before {
	background-color: green;
}
.woocommerce table.shop_table.subscription_details .subscription-status.on-hold::before {
	background-color: yellow;
}
.woocommerce table.shop_table.subscription_details .subscription-status.pending-cancel::before {
	background-color: red;
}
.woocommerce table.shop_table.subscription_details .subscription-status.cancelled::before {
	background-color: black;
}
	
/* The table of items in the subscription */

.woocommerce table.shop_table.subscription_items th {
	font-size: 14px;
}
.woocommerce table.shop_table.subscription_items tr.paused-item {
	background: rgba(0,0,0,0.15);
}
.woocommerce table.shop_table.subscription_items td.uniqsm-product-actions {
	width: 140px; /* All four icons in one line */
	padding: 5px 0 0 5px;
	font-size: 25px;
}
/* Used both within the table and in documentation */
.uniqsm-product-actions i,
.uniqsm-icon-guide i {
	color: var(--main-accent-color);
}
.uniqsm-icon-guide i.fa-trash-alt {
	color: red;
}
.woocommerce table.shop_table.subscription_items td.uniqsm-product-actions > * {
	display: inline-block;
	border: 3px solid transparent;
	border-radius: 100%;
	width: 30px;
	height: 30px;
	margin-right: -5px;
}
.woocommerce table.shop_table.subscription_items td.uniqsm-product-actions > * > * {
	position: relative;
}
.uniqsm-product-actions > .pause > i {
	font-size: 22px;
	top: 1px;
	left: 1px;
}
.uniqsm-product-actions > .resume > i {
	font-size: 20px;
	top: 2px;
	left: 3px;
}
.uniqsm-product-actions > .delete > i {
	color: red;
	top: -10px;
	left: 5px;
	font-size: 16px;
}
.uniqsm-product-actions > .switch > i {
	left: 2px;
	top: 1px;
}
.uniqsm-product-actions > .skip > i {
	top: -5px;
	left: 0px;
}
/* Icon guide for touchscreens */
.uniqsm-icon-guide {
	display: none;
}
@media (hover: none) {
	.uniqsm-icon-guide {
		display: block;
	}
}
/* Used both within the table and in documentation and elsewhere */
.uniqsm-icon-skip::before {
	content: ' ';
	background: url(../icons/skip_icon_green.svg);
	width: 24px;
	height: 24px;
	display: inline-block;
}
.uniqsm-icon-guide-trigger::before {
	font-family: 'dashicons';
	content: "\f142";
	color: var(--main-accent-color);
	font-size: 28px;
	position: relative;
	top: 8px;
}
.uniqsm-icon-guide-trigger.collapsed::before {
	content: "\f140";    
}

.woocommerce table.shop_table.subscription_items td.uniqsm-product-actions > *:hover {
	border-color: var(--main-accent-color);
}
.woocommerce table.shop_table.subscription_items td.uniqsm-product-actions > .delete:hover {
	border-color: red;
}

.woocommerce table.shop_table.subscription_items th.product-quantity,
.woocommerce table.shop_table.subscription_items td.product-quantity {
	text-align: center;
	width: 90px;
}
.woocommerce table.shop_table.subscription_items td.product-quantity input {
	width: 2.5em;
	font-size: 1.5rem;
}
/* Fix the width of the Totals column on larger screens */
.woocommerce table.shop_table.subscription_items .product-total {
	width: 6em;
}
/* Help the table fit on very small screens */
@media (max-width: 599px) {
	.woocommerce table.shop_table.subscription_items {
		margin-left: -15px;
		margin-right: -15px;
		width: 100vw;
	}
	.woocommerce table.shop_table.subscription_items th,
	.woocommerce table.shop_table.subscription_items td {
		padding-left: 5px;
		padding-right: 5px;
	}
	.woocommerce table.shop_table.subscription_items td.uniqsm-product-actions {
		width: 80px;
	}
	.woocommerce table.shop_table.subscription_items td ul {
		padding-left: 0;
	}
}
	

/* Quantity input buttons when "Qty Increment Buttons for WooCommerce" plugin is in use. NB it must be enabled on all pages in its settings, otherwise it still adds buttons but they don't work and aren't styled */
.woocommerce table.shop_table.subscription_items td.product-quantity .qib-container .qib-button:not(#qib_id) {
        background-color: transparent !important;
        border-color: var(--main-accent-color) !important;
        color: var(--main-accent-color) !important;
        border-radius: 3px !important;
        height: 20px !important;
        opacity: 0.8 !important;
	
}

.woocommerce table.shop_table.subscription_items td.product-quantity .qib-container .qib-button.plus:not(#qib_id) {
        xtop: 8px !important;
}
.woocommerce table.shop_table.subscription_items td.product-quantity .qib-container .qib-button.minus:not(#qib_id) {
        xtop: 50px !important;
}
.woocommerce table.shop_table.subscription_items td.product-quantity .qib-container .qib-button:hover:not(#qib_id) {
        background-color: var(--main-accent-color) !important;
        color: white !important;
        opacity: 1 !important;
}

.woocommerce table.shop_table.subscription_items td.product-quantity .qib-container .quantity input.qty:not(#qib_id) {
        border-color: transparent !important;
	box-shadow: none !important;
	margin: 0 3px !important;
	height: 20px !important;
	width: 20px !important;
}

/* Totals */
.woocommerce table.shop_table.subscription_items tfoot th {
	text-align: right;
}


/* Subscription choice popup */

.woocommerce ul.products li.product .uniqsm-subscription-choice-popup {
	background-color: var(--main-background-color);
	border: 2px solid var(--main-accent-color);
	/* Mobile settings */
	border-radius: 6px;
	padding: 15px;
	position: fixed;
	top: 80px;
	bottom: 15px;
	left: 20px;
	right: 20px;
	display: none;
	text-align: center;
	z-index: 9999;
}

.woocommerce ul.products li.product .uniqsm-subscription-choice-popup .card-image.reversed {
	margin-top: 0;
	border: 0;
	box-shadow: none;
}

/* On mobile the modal popup has the image for confirmation of the right product being selected - perversely, there isn't room for it on desktop */
.woocommerce ul.products li.product .card-product .uniqsm-subscription-choice-popup .card-image.reversed img {
	display: block;
	width: 50%;
	height: 50%;
	margin: 0 auto !important; /* ! override Hestia style.css margin: 0 */
}
.woocommerce ul.products li.product .card-product.flipped .uniqsm-subscription-choice-popup {
	display: block; /* Cards don't flip on mobile, we just show the popup */
	color: #3c4858;
}
.woocommerce ul.products li.product .uniqsm-subscription-choice-popup h4.card-title {
	margin-top: 20px;
	font-size: 16px; /* Smaller than normal */
}
.woocommerce ul.products li.product .uniqsm-subscription-choice-popup .uniqsm-infolink {
	font-size: 14px;
	display: inline-block;
	color: var(--main-accent-color);
	margin-bottom: 30px;
}
.woocommerce ul.products li.product .uniqsm-subscription-choice-popup .uniqsm-infolink::before {
	content: "\f05a";
	font-family: "Font Awesome 5 Free";
	display: inline-block;
	font-size: 14px;
	font-weight: 900;
	margin-right: 4px;
}
/* Form */
.woocommerce ul.products li.product .uniqsm-subscription-choice-popup .uniqsm-subscription-choice-form {
	margin-top: 0;
	/* Fill the vertical space when the card is large */
	height: 80%; /* For some reason 100% overspills the card height */
	display: flex; 
	flex-direction: column;
	justify-content: space-around;
	margin-top: 15px; /* Ensure Quantity label is clear of the heading no matter what Flex does */
}

/* Quantity field */
.woocommerce ul.products li.product .uniqsm-subscription-choice-popup .qib-container {
	display: block !important;
	margin: 0 auto;
}
.woocommerce ul.products li.product .uniqsm-subscription-choice-popup .qib-container::before {
	content: 'Quantity';
	display: block;
	font-size: 13px;
	font-weight: bold;
}

.woocommerce ul.products li.product .uniqsm-subscription-choice-popup p {
	font-size: 14px;
	margin-top: 10px;
	margin-bottom: 4px;
}
/* Subscription options radio buttons */
.woocommerce ul.products li.product .uniqsm-subscription-choice-popup .wcsatt-options-wrapper {
	text-align: left;
	font-size: 13px;
	padding-top: 0;
	padding-bottom: 0;
	margin-left: 0 !important;
	margin-top: 5px;
	margin-bottom: 0;
	font-weight: bold;
}
.woocommerce ul.products li.product .uniqsm-subscription-choice-popup .wcsatt-options-wrapper li {
	margin-top: 15px !important;
}
.woocommerce ul.products li.product .uniqsm-subscription-choice-popup .wcsatt-options-wrapper .wcsatt-options-product-prompt,
.woocommerce ul.products li.product .uniqsm-subscription-choice-popup .wcsatt-options-wrapper .wcsatt-options-prompt-text,
.woocommerce ul.products li.product .uniqsm-subscription-choice-popup .wcsatt-options-wrapper .wcsatt-options-product {
	margin-bottom: 0;
}

.woocommerce ul.products li.product .uniqsm-subscription-choice-popup .wcsatt-options-wrapper .wcsatt-options-product-wrapper label {
	font-weight: normal;
}
	

/* Button */
.woocommerce ul.products li.product .uniqsm-subscription-choice-popup .add_to_cart_button {
	padding: 10px 0;
	width: 145px; /* Fixed width to avoid changes in size when it changes from "Add to basket" to "x in basket" */
	margin: 5px auto 0;
}

.woocommerce ul.products li.product .uniqsm-subscription-choice-popup .add_to_cart_button:hover {
	box-shadow: 0 14px 26px -12px rgba(53,134,28,0.42),0 4px 23px 0 rgba(0,0,0,0.12),0 8px 10px -5px rgba(53,134,28,0.2) !important /* ! override woocommerce.css .card-product .footer .stats a.button:hover */;
}

.woocommerce ul.products li.product .uniqsm-subscription-choice-popup .add_to_cart_button:not(.loading):not(.added)::after {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	font-size: 12px;
	position: relative;
	padding-left: 5px;
	content: "\f291";
	background-image: none !important;
}

/* On larger screens, instead of a modal popup, the popup occupies the space of the product card */
@media (min-width: 768px) {
	.woocommerce ul.products li.product .card-product .uniqsm-subscription-choice-popup {
		position: absolute;
		border-radius: 4px;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: var(--card-background-color);
	}
	/* For shop archive designs where the image escapes from the top of the card, it doesn't look right to simply turn the card over and have a bit of the image peeking out. */
	/* Instead we give it a solid background and put the product name there */
	.woocommerce ul.products li.product .card-product .uniqsm-subscription-choice-popup .card-image.reversed {
		background-color: var(--card-background-color);
		width: 105%;
		transform: none;
		margin: -34px 0 0 -5px;
		border: 2px solid var(--main-accent-color);
		border-radius: 3px;
		-moz-box-shadow: 0 8px 14px -12px rgba(0, 0, 0, 0.56), 0 4px 5px 0 rgba(0, 0, 0, 0.12), 0 8px 12px -5px rgba(0, 0, 0, 0.2);
		-webkit-box-shadow: 0 8px 14px -12px rgba(0, 0, 0, 0.56), 0 4px 5px 0 rgba(0, 0, 0, 0.12), 0 8px 12px -5px rgba(0, 0, 0, 0.2);
		box-shadow: 0 8px 14px -12px rgba(0, 0, 0, 0.56), 0 4px 5px 0 rgba(0, 0, 0, 0.12), 0 8px 12px -5px rgba(0, 0, 0, 0.2);
	}
	.woocommerce ul.products li.product .card-product .uniqsm-subscription-choice-popup .card-image.reversed img {
		display: none;
	}
	.woocommerce ul.products li.product .card-product .uniqsm-subscription-choice-popup .card-image.reversed h4 {
		margin-top: 5px;
	}
}

/** MID-CHECKOUT INTERCEPT **/

.uniqsm-checkout-intercept-details-link {
	padding: 10px 0;
	margin-bottom: 10px;
}

.uniqsm-checkout-intercept-details-content {
	background-color: var(--card-background-color);
	border-radius: 4px;
	margin: 10px 0;
	padding: 10px;
}

.uniqsm-checkout-intercept-proceed-button-wrapper {
	text-align: center;
	margin-top: 10px;
}

.uniqsm-checkout-intercept-proceed-button {
	font-size: 14px !important;
	padding: 10px 20px !important;
}