@import url('https://use.fontawesome.com/releases/v7.2.0/css/all.css');

body {
    --traffic-light-green: #00b38a;
    --traffic-light-yellow: #f2ac42;
    --traffic-light-red: #ea324c;
    --traffic-light-none: #343434;
}


/* Hide default breadcrumb bar - not usually necessary */
.g-nav-breadcrumbs {
    display: none;
}

/* Simple Header Logo centered */
.l-header {
    .g-logo {
        img {
            margin: auto;
        }
    }
}

/* Temporary Matt Overrides */
.v-tour-index .blur-image-card {
    display: var(--tour-image-display);
}
@media screen and (max-width: 55.625rem) {
    .mobile-only.v2-tour-img {
        display: var(--tour-image-display) !important;
    }
 
    .mobile-only.v2-event-img {
        display: var(--event-image-display) !important;
    }
}
.iti__selected-dial-code {
	color: #000;
}
/* Temporary Matt Fixes */

/* >  >  >  >  >  >  */
/* T BREADCRUMBS START */
/* Linked with WO.js */
body.t-breadcrumbs-enabled {
    .t-breadcrumbs-wrapper {
        padding: .5em;
        .t-breadcrumbs {
            display: flex;
            align-items: center;
            gap: .5em;

            &.left {
                justify-content: flex-start;
            }
            &.center {
                justify-content: center;
            }
            &.right {
                justify-content: flex-end;
            }
            
            .t-breadcrumb {
                text-decoration: none;
                display: flex;
                align-items: center;
                gap: .5em;
                color: var(--body-font-color);

                &:not(:first-of-type)::before {
                    content: '\f054';
                    font-family: 'Font Awesome 7 Free';
                    font-weight: 900;
                    display: inline-flex;
                    font-size: 12px;
                    margin: 0 .5em;
                }
                .t-breadcrumb-text {
                    font-size: clamp(10px, 1vw, 16px);
                }
                .t-breadcrumb-icon {
                    font-size: clamp(11px, 1vw, 18px);
                }
                &.active {
                    color: var(--primary-link-color);
                    &::after {
                        color: var(--body-font-color);
                    }
                }
                &.before {
                    color: var(--primary-link-color);
                }
            }
        }
        &.icons-only {
            .t-breadcrumbs {
                .t-breadcrumb {
                    .t-breadcrumb-text {
                        display: none;
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 650px) {
    body.t-breadcrumbs-enabled {
        .t-breadcrumbs-wrapper:not(.full-mobile, .icons-only) {
			.t-breadcrumbs {
				.t-breadcrumb {
					.t-breadcrumb-text {
						display: none;
					}
					&.active {
						.t-breadcrumb-text {
							display: block;
						}
					}
				}
			}
		}
	}
}

/* T BREADCRUMBS END */

/* T PAYMENT ICONS*/

.t-payment-icons {
    display: flex;
    gap: .25em;
    justify-content: flex-end;
    flex-wrap: wrap;

    &.left {
        justify-content: flex-start;
    }
    &.center {
        justify-content: center;
    }
    &.right {
        justify-content: flex-end;
    }
    .t-payment-icon {
        background-size: cover;
        width: 40px;
        height: 27.3px;
        &.tiny {
            width: 23.33px;
            height: 16px;
        }
        &.large {
            width: 70px;
            height: 48px;
        }
        &.affirm {
            background-image: url('//c.ststat.net/content/sites/basetemplate/images/paymenticons/affirm.png');
        }
        &.alipay {
            background-image: url('//c.ststat.net/content/sites/basetemplate/images/paymenticons/alipay.png');
        }
        &.amazonpay {
            background-image: url('//c.ststat.net/content/sites/basetemplate/images/paymenticons/amazonpay.png');
        }
        &.amex {
            background-image: url('//c.ststat.net/content/sites/basetemplate/images/paymenticons/amex.png');
        }
        &.applepay {
            background-image: url('//c.ststat.net/content/sites/basetemplate/images/paymenticons/applepay.png');
        }
        &.bancontact {
            background-image: url('//c.ststat.net/content/sites/basetemplate/images/paymenticons/bancontact.png');
        }
        &.bitcoin {
            background-image: url('//c.ststat.net/content/sites/basetemplate/images/paymenticons/bitcoin.png');
        }
        &.bitcoincash {
            background-image: url('//c.ststat.net/content/sites/basetemplate/images/paymenticons/bitcoincash.png');
        }
        &.bitpay {
            background-image: url('//c.ststat.net/content/sites/basetemplate/images/paymenticons/bitpay.png');
        }
        &.citadele {
            background-image: url('//c.ststat.net/content/sites/basetemplate/images/paymenticons/citadele.png');
        }
        &.dinersclub {
            background-image: url('//c.ststat.net/content/sites/basetemplate/images/paymenticons/dinersclub.png');
        }
        &.discover {
            background-image: url('//c.ststat.net/content/sites/basetemplate/images/paymenticons/discover.png');
        }
        &.elo {
            background-image: url('//c.ststat.net/content/sites/basetemplate/images/paymenticons/elo.png');
        }
        &.etherium {
            background-image: url('//c.ststat.net/content/sites/basetemplate/images/paymenticons/etherium.png');
        }
        &.facebookpay {
            background-image: url('//c.ststat.net/content/sites/basetemplate/images/paymenticons/facebookpay.png');
        }
        &.forbrugsforeningen {
            background-image: url('//c.ststat.net/content/sites/basetemplate/images/paymenticons/forbrugsforeningen.png');
        }
        &.giropay {
            background-image: url('//c.ststat.net/content/sites/basetemplate/images/paymenticons/giropay.png');
        }
        &.googlepay {
            background-image: url('//c.ststat.net/content/sites/basetemplate/images/paymenticons/googlepay.png');
        }
        &.ideal {
            background-image: url('//c.ststat.net/content/sites/basetemplate/images/paymenticons/ideal.png');
        }
        &.interac {
            background-image: url('//c.ststat.net/content/sites/basetemplate/images/paymenticons/interac.png');
        }
        &.jcb {
            background-image: url('//c.ststat.net/content/sites/basetemplate/images/paymenticons/jcb.png');
        }
        &.klarna {
            background-image: url('//c.ststat.net/content/sites/basetemplate/images/paymenticons/klarna.png');
        }
        &.lightcoin {
            background-image: url('//c.ststat.net/content/sites/basetemplate/images/paymenticons/lightcoin.png');
        }
        &.maestro {
            background-image: url('//c.ststat.net/content/sites/basetemplate/images/paymenticons/maestro.png');
        }
        &.mastercard {
            background-image: url('//c.ststat.net/content/sites/basetemplate/images/paymenticons/mastercard.png');
        }
        &.payoneer {
            background-image: url('//c.ststat.net/content/sites/basetemplate/images/paymenticons/payoneer.png');
        }
        &.paypal {
            background-image: url('//c.ststat.net/content/sites/basetemplate/images/paymenticons/paypal.png');
        }
        &.paysafe {
            background-image: url('//c.ststat.net/content/sites/basetemplate/images/paymenticons/paysafe.png');
        }
        &.poli {
            background-image: url('//c.ststat.net/content/sites/basetemplate/images/paymenticons/poli.png');
        }
        &.qiwi {
            background-image: url('//c.ststat.net/content/sites/basetemplate/images/paymenticons/qiwi.png');
        }
        &.sepa {
            background-image: url('//c.ststat.net/content/sites/basetemplate/images/paymenticons/sepa.png');
        }
        &.shoppay {
            background-image: url('//c.ststat.net/content/sites/basetemplate/images/paymenticons/shoppay.png');
        }
        &.skrill {
            background-image: url('//c.ststat.net/content/sites/basetemplate/images/paymenticons/skrill.png');
        }
        &.sofort {
            background-image: url('//c.ststat.net/content/sites/basetemplate/images/paymenticons/sofort.png');
        }
        &.stripe {
            background-image: url('//c.ststat.net/content/sites/basetemplate/images/paymenticons/stripe.png');
        }
        &.unionpay {
            background-image: url('//c.ststat.net/content/sites/basetemplate/images/paymenticons/unionpay.png');
        }
        &.venmo {
            background-image: url('//c.ststat.net/content/sites/basetemplate/images/paymenticons/venmo.png');
        }
        &.verifone {
            background-image: url('//c.ststat.net/content/sites/basetemplate/images/paymenticons/verifone.png');
        }
        &.visa {
            background-image: url('//c.ststat.net/content/sites/basetemplate/images/paymenticons/visa.png');
        }
        &.webmoney {
            background-image: url('//c.ststat.net/content/sites/basetemplate/images/paymenticons/webmoney.png');
        }
        &.wechat {
            background-image: url('//c.ststat.net/content/sites/basetemplate/images/paymenticons/wechat.png');
        }
        &.yandex {
            background-image: url('//c.ststat.net/content/sites/basetemplate/images/paymenticons/yandex.png');
        }
    }

}

/* T PAYMENT ICONS END*/


/* TOM'S CONTENT PAGES */

a.t-ui-box {
    display: grid;
    gap: .5rem;
    background: var(--section-background-color);
    box-shadow: var(--price-row-box-shadow);
    border-radius: var(--default-border-radius);
    text-decoration: none;
    padding: clamp(12px, 2vw, 25px);
    color: var(--body-font-color);
    position: relative;
    height: 100%;
}

/* TOM'S CONTENT PAGES END */

/* KB - Adding default Support Centre layouts */
/* all below is the test for the new support centre layout, needs to be as generic as possible */
.supportcentre {

	/*breadcrumbs used on quite a few sites that aren't needed on support pages*/
	.breadcrumbs_v2	{
		display:none;
	}

	.g-inner {

		#genesys-support-center {

			.KnowledgeSearch_mainContainer_wExYe {

				.Containers_gridRow_UaQQ5 {
					display: block;

					div.sm-col-12 {
						display: flex;
						width: 100%;
						margin: 0;
						justify-content: center;
					}
				}
			}
			.Containers_moduleContainer_KOLiF {
				.categoriesContainer {
					display: grid;
					grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
					gap: .85rem;
					margin: 0;
					.CategoryGridItem_categoryGridItemContainer_minov {
						padding: 0;
						margin: 0;
						.CategoryGridItem_categoryGridItem_Ty4v5 {
							margin: 0;
						}
					}
				}
			}

			/* first set of items here, resets to base defaults */
			.sm-padding-h-3 {
				padding-left: 1rem;
				padding-right: 1rem;
			}
			.sm-margin-b-8 {
				margin-bottom: 1rem;
			}

			input[type="search"], input[type="text"] {
				border: 0;
				background: #fff;
				max-width: 100%;
			}

			div.md-col-6.sm-col-12 a.CategoryGridItem_categoryGridItem_Ty4v5 {
				padding: 5px;
				height: 70px;
				background-color: var(--brand-hero-background-color);
				border-radius: 5px;
				color: var(--color-white);
				span {
					font-weight:501;
					text-align:center;
				}
			}

			div.md-col-10.sm-col-12 a.CategoryGridItem_categoryGridItem_Ty4v5 {
				padding: 5px;
				height: 70px;
				background-color: var(--brand-hero-background-color);
				border-radius: 5px;
				color: var(--color-white);
				width:auto;
				span {
					font-weight:501;
					text-align:center;
				}
			}

			.Containers_moduleContainer_KOLiF {
				.lg-col-8 {
					flex: 0 0 100%;
				}
				.lg-offset-2 {
					margin-left:0;
				}
				.sm-margin-b-4 {
					margin-bottom: 1rem;
				}
				.lg-col-3 {
					flex: 0 0 33%;
				}
			}

			.TopViewedArticleItem_topViewedArticleItem_pOasJ {
				padding-bottom: 1rem;
				padding-top: 1rem;
				span {
					font-weight: 400;
				}
			}

			.Divider_divider_ag81Q {
				margin: 1rem;
			}

			.text-4xl {
				font-size: 2rem;
				color: var(--brand-hero-text-color) !important;
			}

			.ArticleFeedback_container_NSOit {
				.font-semibold {
					font-weight: 400;
				}
				.text-xl {
					font-size: 1rem;
				}
				.text-lg {
					font-size: 0.9rem;
				}
			}

			.KnowledgeArticle_container_Jdefe, .Containers_mainContainer_UFNOj[data-testid="knowledge-categories-container"] {
				box-shadow: 0 4px 6px rgba(0,0,0,.2),0 2px 4px rgba(0,0,0,.1);
				border-radius:15px;
				padding: 0.5rem 1.5rem 1.5rem 1.5rem;
				margin-bottom: 2rem;
			}
			.KnowledgeArticle_bodyContainer_zDJL0[data-testid="knowledge-article-body"], .Containers_mainContainer_UFNOj[data-testid="knowledge-categories-container"] {
				p {
					color:#000;
					font-size: 1rem;
				}
			}

			.Containers_gridRow_UaQQ5 {
				.md-col-6 {
					padding:0.5rem;
				}
			}

			p[data-testid="article-last-updated"] {
				display:none !important;
			}

			div[data-testid="knowledge-articles-container"] div.sm-col-12.md-col-6 {
				-moz-border-radius: 0 !important;
				-webkit-border-radius: 0 !important;
				border-radius: 10px !important;
				margin: 1% !important;
				color: #1c1c1c !important;
				background-color: var(--brand-hero-background-color) !important;
				letter-spacing: normal !important;
				font-weight: 400 !important;
				font-size: 1.4rem !important;
				padding: 10px !important;
				flex: 0 0 48%;
				text-align:center;

			}

			.font-normal {
				font-weight: 300;
			}

			.TopViewedArticleItem_topViewedArticleItemIcon_kY3U5 {
				fill: var(--brand-hero-background-color);
			}

			.ArticleByCategory_articleByCategory_ArCNr {
				color: var(--brand-hero-text-color) !important;
			}
			div.md-col-6.sm-col-12 a.CategoryGridItem_categoryGridItem_Ty4v5 {
				color: var(--brand-hero-text-color) !important;
			}

		}

	}
}

@media only screen and (max-width: 60rem) {
	.supportcentre .g-inner #genesys-support-center .Containers_moduleContainer_KOLiF .lg-col-3 {
		flex: 0 0 100%;
		  margin-bottom: 0;
		  width: 100%;
	  }
	  .supportcentre .g-inner #genesys-support-center div.md-col-10.sm-col-12 a.CategoryGridItem_categoryGridItem_Ty4v5 {
	  	width: 100%;
	  	height: 50px;
	  }

	  .supportcentre .g-inner #genesys-support-center .Containers_moduleContainer_KOLiF .sm-col-12 {
		padding: 0px 4px;
	}
	  .supportcentre .g-inner #genesys-support-center .Containers_moduleContainer_KOLiF .sm-margin-b-3 {
		margin-bottom: 10px;
	  }
	.supportcentre .g-inner #genesys-support-center div.md-col-6.sm-col-12 a.CategoryGridItem_categoryGridItem_Ty4v5 {
		height: 3rem;
	  }
	 .supportcentre .g-inner #genesys-support-center .Containers_moduleContainer_KOLiF .text-lg {
		  font-size: 1rem;
	}
  }

/*End Support Centre Styling*/

/* WORKSHOPS V2 STYLING */
/* Temporary until Matt moves to v2 styles */
.v-sessions {
    .g-outer {
        padding-bottom: 2.25rem;
    }
    .g-inner {
        max-width: 75rem;
    }
    .sessions-header-cart, 
    .sessions-header-continue {
        background-color: var(--primary-link-color);
        &:hover {
            background: var(--primary-link-color-hover);
        }
    }
    .sessions-filter-view-bar-grid.selected, 
    .sessions-filter-view-bar-list.selected {
        background-color: var(--primary-link-color);
        color: #fff;
        &:hover {
            color: #fff;
            background: var(--primary-link-color-hover);
        }
    }
    .sessions-filter-view-bar-grid, 
    .sessions-filter-view-bar-list {
        border: 1px solid var(--primary-link-color);
        color: var(--primary-link-color);
        &:hover {
            border: 1px solid var(--primary-link-color-hover);
            color: var(--primary-link-color-hover);
        }
    }
    .sessions-filter-view-bar-filter-button {
        background-color: var(--primary-link-color);
        border: 1px solid var(--primary-link-color);
        &:hover {
            background: var(--primary-link-color-hover);
            border: 1px solid var(--primary-link-color-hover);
        }
    }

    .sessions-grid-item-availability {
        &:has(.availability-high) {
            border: 1px solid var(--traffic-light-green);
            background: var(--traffic-light-green);
        }
        &:has(.availability-mid) {
            border: 1px solid var(--traffic-light-orange);
            background: var(--traffic-light-orange);
        }
        &:has(.availability-low) {
            border: 1px solid var(--traffic-light-red);
            background: var(--traffic-light-red);
        }
        &:has(.availability-none) {
            border: 1px solid var(--traffic-light-none);
            background: var(--traffic-light-none);
        }
        .sessions-grid-item-availability-text {
            color: #fff;
        }
    }
    .sessions-grid-item.sold-out {
        order: 1;
    }
    .sessions-grid-item-price-container {
        p > a {
            display: block;
            padding: .5rem;
            width: 100%;
            background: var(--primary-link-color);
            border-radius: var(--med-border-radius);
            color: #fff;
            text-decoration: none;

            &:hover {
                background: var(--primary-link-color-hover);
            }
        }
    }
    .sessions-add-to-basket, .sessions-popup-add-to-basket {
        background: var(--primary-link-color);
        justify-self: flex-end;
        &:hover {
            background: var(--primary-link-color-hover);
        }
    }
    .quantity-buttons {
        border-color: var(--primary-link-color);
        .qty-btn {
            color: var(--primary-link-color);
        }
    }
    .sessions-filter-button.selected {
        background: var(--primary-link-color);
        &:hover {
            background: var(--primary-link-color-hover);
        }
    }
    
    .to-top {
        position: fixed;
        background: var(--primary-link-color);
        border-radius: 50%;
        border: 2px solid var(--primary-link-color);
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
        width: 50px;
        color: #fff;
        bottom: 1rem;
        right: 1rem;
        text-decoration: none;

        &:hover {
            background: var(--primary-link-color-hover);
        }
    }
    .sessions-grid.list-view .grid-only,
    .sessions-grid.list-view .sessions-grid-item-availability,
    .sessions-grid:not(.list-view) .sessions-grid-item-availability-list-view {
        display: none
    }

    #basket-popup {
        .g-ui-box {
            border: 0;
            .v2-basket-inner-title {
                flex-wrap: nowrap;
            }
            .mfp-close.g-button.primary {
                margin-bottom: 1rem;
            }
        }
    }
    .sessions-popup-price {
        grid-template-columns: 1fr min-content min-content;
        @media (max-width: 535px) {
            grid-template-areas: "name quantity" "price quantity";
            grid-template-columns: 1fr min-content;
            .sessions-popup-price-name {
                grid-area: name;
            }
            .price-value {
                grid-area: price;
            }
            .quantity-buttons {
                grid-area: quantity;
            }
        }
        .quantity-buttons {
            background: var(--item-background-color);
            border: var(--default-border-style);
            border-radius: var(--default-border-radius);
            padding: 0;
            .qty-btn,
            .qty-input {
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                touch-action: manipulation;
                vertical-align: top;
                line-height: 1;
                width: 40px;
                height: 40px;
            }
            .qty-btn.plus {
                border: 1px solid var(--primary-link-color);
                border-radius: var(--price-selector-border-radius);
            }
            .qty-btn.minus {    
                border-radius: var(--price-selector-border-radius);
                border-right: var(--default-border-style);
                color: var(--price-quantity-minus-color);
            }
        }
    }
    .modal {
        width: 100%;
    }
    .sessions-popup-price {
        .qty-input[type="number"] {
            -moz-appearance: textfield;
        }
    
        .qty-input[type="number"]::-webkit-outer-spin-button, 
        .qty-input[type="number"]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
    }

}

/* WORKSHOPS V2 STYLING END */