/*
 * Added by Madison, 14/10/25.
 * For some reason, the WooCommerce font is not being included, so this registers the font.
 * The @font-face is now injected by PHP in functions.php (wp_add_inline_style) using the real
 * plugin URL, because the hardcoded /wp-content path breaks on Bedrock installs.
 */

.loader {
  width: 20px; /* control the size */
  aspect-ratio: 1;
  display: grid;
  -webkit-mask: conic-gradient(from 22deg, #0003, #000);
  mask: conic-gradient(from 22deg, #0003, #000);
  animation: load 1s steps(8) infinite;
}
.loader,
.loader:before {
  --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */
  background:
	var(--_g)/34% 8%  space no-repeat,
	var(--_g)/8%  34% no-repeat space;
}
.loader:before {
  content: "";
  transform: rotate(45deg);
}
@keyframes load {
  to { transform: rotate(1turn); }
}

#loading-spinner {
	display: flex;
	align-items: center;
	margin-top: 0.8rem;
}

#loading-spinner .loader {
	margin-left: 0.8rem;
}


/* Course filtering */
#loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	background: rgba(255,255,255,0.85);
	z-index: 10;    /* Greater than header */
}

#loading-overlay.showing {
	display: block;
}

#loading-overlay .overlay-container {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	text-align: center;
	max-width: 28rem;
	margin: 0 auto;
}

#loading-overlay .overlay-container p {
	color: #4b575f;
	line-height: 4rem;
	font-size: 4rem;
	font-weight: bold;
}

#loading-overlay .overlay-container svg {
	fill: #0eb89a;
	animation: spinning 1.8s infinite;
	max-width: 12rem;
}

@keyframes spinning {
  0% {
	transform: rotateZ(0) scale(1);
  }

  50% {
	transform: rotateZ(180deg) scale(0.8);
  }

  100% {
	transform: rotateZ(359deg) scale(1);
  }
}


.product_filtering.blocked {
	opacity: 0.5;
	pointer-events: none;
}

.filter-wrapper {
	position: relative;
}

.filter-wrapper .loading-spinner {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translatey(-50%);
	width: 100%;
	text-align: center;
}

.filter-wrapper .loading-spinner > span {
	display: inline-block;
	vertical-align: middle;
	font-size: 3rem;
	font-weight: bold;
}

.filter-wrapper .loading-spinner .loading {
	width: 3rem;
}
/* End course filtering */

.checkout-button.disabled {
	cursor: not-allowed;
}

/* Clearfix for student details selection */
.checkout_student_details ul:after {
	content: "";
	display: table;
	clear: both;
}

#course-info-text {
	margin-top: 1.2rem;
	font-size: 2rem;
	font-weight: bold;
	color: #c4577c;
}

/* Remove link on cart-totals item
 * This is mostly copied from scss/_basket.scss
 */
.cart_item a.remove {
	 display: block;
	 font-family: "freight-sans-pro", sans-serif;
	 margin-top: 1.2rem;
	 padding-left: 2.8rem;
	 background-image: url(../img/oval-menu-close.svg);
	 background-size: 2rem;
	 background-repeat: no-repeat;
	 background-position: left center;
}

/*
 * Remove "Order notes" label (client request)
 * Specificity required to match a style in scss/_account.scss
 */
.woocommerce-page .woocommerce form label[for="order_comments"] {
	display: none;
}

/*
 * Style the standalone discount code box at the start of cart/checkout as per the rest
 */
.checkout_main_wrapper > .coupon {
	padding: 3.2rem;
	background: #FFF;
	margin-top: 3rem;
}

.checkout_side_wrapper .coupon {
	width: 100%;
}

.checkout_main_wrapper .coupon .coupon_wrapper,
.checkout_side_wrapper .coupon .coupon_wrapper {
	height: auto;
	display: flex;
	flex-wrap: wrap;
}

.checkout_main_wrapper .coupon label,
.checkout_side_wrapper .coupon label {
	display: block;
	float: none;
}

.checkout_side_wrapper .coupon label {
	margin-top: 3.2rem;
	text-align: left;
}

.woocommerce-page .woocommerce form .checkout_main_wrapper .coupon [name=coupon_code],
.woocommerce-page .woocommerce form .checkout_side_wrapper .coupon [name=coupon_code] {
	width: 100%;
	margin-right: 0;
}

.woocommerce-page .woocommerce form .checkout_main_wrapper .coupon button,
.woocommerce-checkout .woocommerce .checkout_main_wrapper .checkout_coupon button,
.woocommerce-page .woocommerce form .checkout_side_wrapper .coupon button {
	/* Override the massive margin-bottom applied by woocommerce's native styles */
	margin-bottom: 0;
	margin-top: 0;
}

.woocommerce-page .woocommerce .checkout_main_wrapper .coupon [name=coupon_code],
.woocommerce-page .woocommerce form .checkout_side_wrapper .coupon [name=coupon_code],
.woocommerce-page .woocommerce form .checkout_main_wrapper .coupon button,
.woocommerce-checkout .woocommerce .checkout_main_wrapper .checkout_coupon button {
	margin-bottom: 1.8rem;
}

@media all and (min-width:575px) {
	.checkout_main_wrapper .coupon {
		display: none;
	}

	.checkout_main_wrapper .coupon .coupon_wrapper,
	.checkout_side_wrapper .coupon .coupon_wrapper {
		justify-content: space-between;
	}

	.woocommerce-page .woocommerce form .checkout_main_wrapper .coupon [name=coupon_code] {
		min-width: 30rem;
		max-width: 70%;
	}
}

/* Date selection - on any type of course */
.date-selection [data-js="set-date"] {
	line-height: 1.2;
	font-size: 18px;
	font-weight: 500;
	width: 100%;
	border-radius: 0;
	background-color: #f7f9fa;
	border-top: 1px solid #d3dade;
	text-align: left;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.2rem;
}

/* Low / no spaces remaining text - direct copy of existing live site style */
.date-selection .variation_stock {
	display: inline-block;
	text-transform: uppercase;
	font-size: 12px;
	line-height: 1.142;
	font-weight: 600;
	flex-shrink: 2;
}

.date-selection .date-text {
	/* Reduces the likelihood of the date text crumpling up */
	min-width: 150px;
}

.locations-dates .location-name {
	position: relative;
	display: block;
	padding: 10px 1.2rem;
	border-top: 1px solid #d3dade;
	font-size: 18px;
	font-weight: 600;
}

/* "View venue details" link below location's dates. */
.locations-dates .venue-details {
	display: table;
	padding-top: 0.5rem;
	margin-bottom: 1.5rem;
	font-size: 12px;
}

/* Book your place options */
.purchase button[data-js="set-date"] {
	background-color: #f7f9fa;
	padding-left: 33px;
	position: relative;
	transition: color .2s ease-in-out, background-color .2s ease-in-out;
}

.purchase button[data-js="set-date"]:before {
	content: '';
	width: 20px;
	height: 20px;
	display: block;
	position: absolute;
	top: 50%;
	left: 3px;
	border-radius: 50%;
	transform: translateY(-50%);
	border: 1px solid #d3dade;
	background-color: #fff;
}

.purchase button[data-js="set-date"]:after {
	content: '';
	width: 10px;
	height: 10px;
	display: block;
	position: absolute;
	top: 50%;
	left: 8px;
	opacity: 0;
	border-radius: 50%;
	background-color: #00a77e;
	transform: translateY(-50%);
	transition: opacity .2s ease-in-out;
}

.purchase button[data-js="set-date"].active {
	background-color: #00a77e4d;
}

.purchase button[data-js="set-date"].active:after {
	opacity: 1;
}

/*
.special_variation_selected h4,
.factfile__wrapper .special_variation_selected input,
.factfile__wrapper .special_variation_selected input:disabled {
	display: none;
}
*/

#g-recaptcha-checkout-i13 > div {height: auto !important;}

/* 'Entrance' field. */
#entrance_hp_field {
	height: 1px;
	overflow: hidden;
	margin-bottom: 0;
	clip-path: circle(1px);
}

/* Cross-sells */
.cross-sells .card__content h2 {
    font-size: 2.2rem;
}
.cross-sells .card__footer .card__view {
    font-size: 1.8rem;
}
.cross-sells .card__content p {
    /* Hide descriptions in cross-sells */
    display: none;
}

p.verify-error {
	color: red;
}

/* Display the password visibility button */
.woocommerce form .password-input,
.woocommerce-page form .password-input {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.woocommerce form .password-input input[type=password],
.woocommerce-page form .password-input input[type=password] {
  padding-right: 2.5rem;
}

.woocommerce form button.show-password-input,
.woocommerce-page form button.show-password-input {
  position: absolute;
  right: 0.7em;
  cursor: pointer;
  background: transparent;
  padding: 8px;
  min-width: auto;
}

.woocommerce form button.show-password-input:hover,
.woocommerce-page form button.show-password-input:hover,
.woocommerce form button.show-password-input:focus,
.woocommerce-page form button.show-password-input:focus {
    background-color: transparent !important;
}

.woocommerce form .show-password-input::after,
.woocommerce-page form .show-password-input::after {
	font-family: WooCommerce;
  	speak: none;
  	content: "\e010";
  	color: black;
	/* Changing icon's default font size based on visual preference */
  	font-size: 130%;
  	opacity: 0.4;
}

.woocommerce form .show-password-input:hover:after,
.woocommerce-page form .show-password-input:hover:after,
.woocommerce form .show-password-input:focus:after,
.woocommerce-page form .show-password-input:focus:after {
    color: #14b1e7;
    opacity: 1;
}

.woocommerce form .display-password::after, .woocommerce-page form .display-password::after {
	/* Adds toggling change-over effect between on and off */
	opacity: 1;
}