/*
File is included in child theme so it can be overwritten

To overwrite variables, use the !default flag in this file which means "if not set"

Then in your child_theme.scss, set the variables you want to overwrite before you import
So we set it to black, then the package file it will set it to grey (IF ITS NOT SET)
but it is set to black so it does nothing.
EXAMPLE:
---------------------------
// Set Variables here to override them in the import
$package-bg: black;
@import '../../../../plugins/ignite-templates/assets/sass/itg-package-single-new.scss';
------------------------

Ideally instead of making the file messy, first set your color variables, then set up variables based on purpose
eg:
$blue: blue
$primary: $blue;
$button-background: $primary;

Once there is a need for a new level of scalability, do it in this file, don't make child themes a mess.
These variables will eventually be linked to Global Options so DM staff can make new sites themselves.

Keep variables grouped near where they are used preferably for easy reference
*/
// Breakpoint mixin
@import "assets/mixins";
// Responsive Font Sizing
@import "assets/rfs";

// Pills
$package-pills: #eee !default;
$package-pills-inverse: #222 !default;

// Specify the background, and the alternating colour
// These should be enough to specify on a child theme
$package-bg: grey !default;
$package-bg-inverse: white !default;

// Though as 7travel are using a gradient, we can't use that gradient for text so we have to set these to colours
$package-booking-text: $package-bg-inverse !default;
$package-booking-text-inverse: $package-bg !default;

// Though as 7travel are using a gradient, we can't use that gradient for text so we have to set these to colours
$package-booking-btn-text: $package-bg-inverse !default;
$package-booking-btn-text-inverse: $package-bg !default;


h1 {
	@include rfs(38);
}
h2 {
	@include rfs(32);
}
h3 {
	@include rfs(28);
}
h4 {
	@include rfs(24);
}
h5 {
	@include rfs(20);
}
body.new-package-template .site {
	.banner-notification {
		position: absolute;
		width: 100%;
		top: 0;
		padding: 0.5em 0;

		color: #FFF;
		font-size: 1.25em;
		text-align: center;
		font-weight: 600;
		background: rgba(0, 0, 0, 0.7);

		&.preview {
			background: rgba(255, 0, 0, 0.7);
		}
	}

	.preview-mode-banner {

	}

	.btn {
		position: relative;

		width: 100%;
		padding: 0;

		@include breakpoint(md) {
			font-size: 1.25rem;
		}

		line-height: 3rem;
		transition: none;

		&:focus, &.focus {
			outline: 0;
			box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
		}
	}

	// Banner
	.slick-slider {
		.slick-arrow {
			border-radius: 50%;
			transition: opacity 0.1s ease-in-out;

			&.slick-prev:before,
			&.slick-next:before {
				content: '';
				width: 0;
				height: 0;
				font-size: 0;
				opacity: 1;
				position: absolute;
				top: calc(50% - 10px);
			}

			&.slick-prev {
				left: 15px;

				&:before {
					border: 10px solid transparent;
					border-right: 12px solid #dc284a;
					left: 0
				}
			}

			&.slick-next {
				right: 15px;

				&:before {
					border: 10px solid transparent;
					border-left: 12px solid #dc284a;
					right: 0
				}
			}
		}


		.slick-dots {
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.33);
			padding: 0;
			display: block;
			height: auto;

			li {
				display: inline-block;
				width: 0.5em;
				height: 0.5em;
				border: none;
				margin-right: 0.5em;

				font-size: 1rem;

				&:last-child {
					margin-right: 0;
				}

				button {
					border-radius: 50%;
					background-color: #fff;
					width: 0.5em;
					height: 0.5em;

					font-size: 1rem;

					&::before {
						content: none;
					}
				}

				&.slick-active button:hover,
				&.slick-active button {
					background-color: #dc284a;
					opacity: 1;
				}
			}
		}

		.slick-slide div {
			display: block;
		}
	}

	#package-gallery, #package-gallery-nav {
		opacity: 0;
		margin-bottom: 0;
	}

	.slick-initialized {
		//opacity: 1;
	}

	// Hide dots/arrows on main slick for lg+
	@include breakpoint(lg) {
		#package-gallery {
			.slick-dots,
			.slick-arrow {
				display: none !important;
			}

		}
	}

	#package-gallery-nav {
		.slick-slide img {
			border-top: 4px solid #f2f2f2;
			border-left: 2px solid #f2f2f2;
			border-right: 2px solid #f2f2f2;

			cursor: pointer;

			opacity: 0.9;

			&:hover {
				opacity: 1;
			}
		}

		.slick-arrow {
			opacity: 0.7;

			&:hover {
				opacity: 1;
			}
		}

		.slick-arrow.slick-prev {
			left: 8px;
		}

		.slick-arrow.slick-next {
			right: 4px;
		}
	}

	.package-banner-wrapper {
		#package-banner-desktop {
			text-align: center;
		}
	}


	// NEXT SECTION
	.package-heading-wrapper {

		img {
			max-height: 50px;
			width: auto;
		}

		h1 {
			margin: 0.25em 0 0 0;
			line-height: 1;

		}

		#package-icons-desktop {
			flex-direction: column;
			justify-content: center;
		}

		@include breakpoint(lg) {
			padding: 1rem 0;

			text-align: center;

			background: #f2f2f2;
		}

	}


	// NEXT SECTION
	.package-icons-wrapper {
		background: #f2f2f2;

	}


	// NEXT SECTION
	.package-inclusions-wrapper {
		// Inclusions is not surrounded by sections with bg color, so it looks like double padding on desktop
		@include breakpoint(lg) {
			padding: 0;
		}


		h3 {
			@include rfs(32);
			margin-bottom: 1em;

			@include breakpoint(lg) {
				margin-top: 1em;
			}
		}


		// Green ticks for bullets
		ul {
			position: relative;
			display: block;
			margin: 0;
			padding: 0;

			list-style-type: none;

			li {
				position: relative;
				display: block;
				padding: 0 1em 0 2em;
				margin-bottom: 1em;

				font-size: 1em;
				line-height: 1.5;

				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis; //Doesn't work in all browsers, just adds "..."

				&::before {
					position: absolute;
					top: 0;
					left: 0;
					display: inline-block;
					font: normal normal normal 1rem/1 FontAwesome;
					color: white;

					text-rendering: auto;
					-webkit-font-smoothing: antialiased;
					-moz-osx-font-smoothing: grayscale;
					content: "\f00c";
					padding: 0.25rem;
					background-color: green;
					border-radius: 50%;
				}
			}
		}

		// Note regarding For further info click "The Deal"
		.note {
			display: inline-block;
			margin-top: 1em;
			cursor: pointer;
			font-size: 0.825em;

			&:hover {
				color: $link-hover;
			}
		}

		.on_sale_until_msg {
			font-weight: bold;
		}

	}


	// NEXT SECTION
	.package-booking-wrapper {
		color: $package-booking-text;
		background: $package-bg;
	}


	// NEXT SECTION
	.package-content-wrapper {
		// Content Nav
		.nav-pills {
			justify-content: center;
			padding-bottom: 1em;

			.nav-item {
				// simulate row / cols
				// start at 100% width
				flex-basis: 100%;
				flex-grow: 1;
				max-width: 100%;
				padding-left: 1em;
				padding-right: 1em;

				// then 2 per row
				@include breakpoint(340px) {
					flex-basis: 50%;
					flex-grow: 0;
					max-width: 50%;
				}

				// then 3 per row
				@include breakpoint(sm) {
					flex-basis: 33.3333%;
					flex-grow: 0;
					max-width: 33.3333%;
				}

				// then try to fit all per row
				@include breakpoint(lg) {
					flex-basis: 0;
					flex-grow: 1;
					max-width: 33.3333%;
				}

				//margin: 0 2.5% 5% 2.5%;
				padding-bottom: 15px;
				text-align: center;

				a {
					color: $package-pills;
					white-space: nowrap;

					background-color: transparent;
					border: 1px solid $package-pills;

					&:hover, &.active {
						color: #FFF;
						background-color: $package-pills;
					}
				}
			}
		}

		.tab-content {
			h3 {
				@include rfs(22);
			}

			h4 {
				@include rfs(20);
			}

			h5 {
				@include rfs(18);
			}
		}

		// Tab specific styles
		// Custom fixes for the copy/paste content that marketers do
		#tab-1 {
			ul {
				padding-left: 1rem;
				margin-bottom: 0;
			}

			ul + p {
				padding-left: 1rem;
			}

			h4 + ul + p {
				padding-left: 0;
			}

		}


		// Content Text
		.tab-pane {
			padding-top: 0;

			h4 {
				margin-top: 1em;
			}
		}

		.tab-rooms {
			.outbound-city-filter-list {
				margin-top: 1em;
			}

			.itg-pills {
				margin-top: 0 !important;
			}
		}

		.voucher-rooms {
			.room {
				margin-bottom: 1em;
				padding-bottom: 1em;
				border-bottom: 1px solid #e1e1e1;
			}

			.room-img {
				margin-bottom: 1em;
			}

			.room-name {
				margin-top: 0;
			}

			.room-description {
				margin-top: 1em;
			}

			.btn {
				//margin-top: 1em;
			}
		}
	}


	// NEXT SECTION
	.package-forms-wrapper {
		// Booking widget has its own padding, this is to make it all seamless
		padding-top: 0;
		background-color: rgb(241, 243, 245) !important;

		> .container > .section-forms {
			padding-top: calc(1em + 1vw);
		}

		.section-title {
			border-bottom: 1px solid #eee;
		}


		// text btn that toggles the display of the additional form fields
		#btn-toggle-form-fields {
			cursor: pointer;
			border-bottom: 2px dashed rgb(200, 200, 200);
			color: rgb(200, 200, 200);
			margin-bottom: 1rem;

			&:hover, &:focus, &.active {
				border-bottom: 2px dashed #ee3252;
				color: #ee3252;
			}


			// When clicked active class is added
			.active {
				display: none;
			}

			&.active {
				.active {
					display: inline;
				}

				.inactive {
					display: none;
				}
			}
		}

		// Custom Enquire Form
		.section-enquire-form {
			justify-content: center;
		}

		#formEnquire {
			@include breakpoint(lg) {
				.col-lg-6 {
					flex: 0 0 100% !important;
					max-width: 100% !important;
				}
			}

		}

		.form-section-hidden {
			display: none;
			background: #eee;
		}

		#Note {
			height: 5em;
			font-size: 0.875rem;
			line-height: 1.2;
		}

		// Fix container of availability booking UI
		#book-now-heading {

		}

		// Overrides to style the booking widget
		/*
		#booking > div > div > div {
			width: 100% !important;
			padding-right: 15px !important;
			padding-left: 15px !important;
			margin-right: auto !important;
			margin-left: auto !important;

			margin-bottom: 0 !important;

			@media(min-width: 1081px){
				main {
					max-width: 66.6666%  !important;
				}
				aside {
					max-width: 33.3333%  !important;
				}
			}

			@include breakpoint(sm) {
				max-width: 540px !important;
			}
			@include breakpoint(md) {
				max-width: 720px !important;
			}
			@include breakpoint(lg) {
				max-width: 960px !important;
			}
			@include breakpoint(xl) {
				max-width: 1140px !important;
			}

			main {
				margin-top: 34px !important;
				background-color: #FFF !important;
				box-shadow: rgba(0, 0, 0, 0.016) 0 12px 20px, rgba(0, 0, 0, 0.03) 0 4px 8px !important;

				h2 {
					margin: 1em 0;
					background-color: transparent !important;


				}
				> div:not(.bg-primary) {
					padding: 0 1.25rem !important;

					background: none !important;
					box-shadow: none !important;
				}
			}

			aside {
				h2 {
					padding: 0.75rem 1.25rem !important;

					color: #FFF !important;
					font-size: 1.75rem !important;
					text-align: left !important;
					background: $package-bg !important;
				}
			}
		}
		*/

	}

	.itg-icon.itg-diamond::before {
		content: url("/wp-content/themes/7travel/assets/img/icon-diamond.svg");
	}
}


// MISC COMPONENTS
ul.parsley-errors-list {
	list-style-type: none;

	.input-group & {
		top: -1em;
	}
}

// Package Booking form styles here as the form moves between sections via itg-package-single-new.js
// responsive styling below this block -desktop -mobile tags
#package-booking {

	// Have paddings on mobile under each field
	> .row > div {
		margin-bottom: 1em;
	}

	// Defaults
	.form-control {
		height: 3rem;
	}
	// Highlight the NUMERIC values of our "pricing boxes"
	.highlight {
		font-weight: 700;
	}

	.booking-options {

	}

	// row underneath select boxes that has all pricing info
	.package-booking-pricing {
		font-size: 1.2em;
		line-height: 1;

		// room name just above the price
		#package-booking-pricing-room-label {
			margin-bottom: 0.5em;
			font-weight: 700;
		}

		// Ensure package price type is on it's own line
		.package-price-type {
			display: block;
			font-size: 0.875em;
		}


		// left col
		.package-booking-pricing-left {
			#package-booking-price-box-3 {
				.highlight {
					font-size: 2.5em;

					// Primary price field
					#package-price-amount {

					}
				}
			}
		}

		// right col
		.package-booking-pricing-right {
			text-align: right;

			// Make this price type slightly smaller that the left
			.package-price-type {
				font-size: 0.7em;
			}

			// Padding between: valued at & up to % off
			#package-booking-price-box-1 {
				margin-bottom: 0.5em;
			}
			#package-booking-price-box-2 {

			}
		}

		a#skye-tag {
			padding-top: 0.5em;

			font-size: 1em;
			color: $package-bg-inverse;

			p {
				margin: 0;
				font-size: 1em;
				line-height: 1.2;
			}
			br {
				display: none;
			}
			.more_info {
				font-size: 1em;
			}
		}


	}

	.package-booking-cta {
		> .col > .btn:first-of-type {
			margin-bottom: 1em; // padding between the next row with the 2 other btns
			font-weight: 600;
			text-transform: uppercase;
		}
	}

	// Our background and buttons inverse each other
	.btn {
		position: relative;

		width: 100%;
		padding: 0;


		font-size: 1em;
		line-height: 3em;


		color: $package-booking-btn-text;
		background: $package-bg-inverse;
		border: 2px solid $package-bg-inverse;
		border-radius: 1.5em;

		transition: none;
		&:hover,&:active {
			color: $package-bg-inverse;
			background: $package-bg;
		}

		&:focus, &.focus {
			outline: 0;
			box-shadow: 0 0 0 0.2rem rgba(255,255,255,0.5);
		}
	}

	.btn-outline {
		color: $package-bg-inverse;
		background: transparent;

		&:hover,&:active {
			color: $package-bg;
			background: $package-bg-inverse;
		}
	}


	#btn-book-later {

	}
	#btn-enquire-now {

	}
}


// Booking form toggles between these 2 divs
#package-booking-mobile {}
#package-booking-desktop {
	#package-booking {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;

		padding: 1.5em;
		color: $package-bg-inverse;
		background: $package-bg;
		border-radius: 5px;

		@include breakpoint-between(lg,xl){
			label {
				margin-bottom: 0;
			}
		}
		@include breakpoint(xl){
			font-size: 1.2em;
		}

		// Cruises/Deals fill the space left empty from package select boxes
		body:not(.single-itg_package) & {
			justify-content: space-between;
			font-size: 1.1em;

			@include breakpoint(xl){
				font-size: 1.2em;
			}
		}

		// Remove margins so flex can space out correctly
		.row > div {
			margin-bottom: 0;
		}
	}
}
// Tighten up width of icons
.figure {
	width:70px;
	max-width: 25%;
	text-align: center;
	figcaption {
		line-height: 1;
	}
}


// Prevent svg images from loading initially as they are being re-loaded as proper SVG via JS on doc ready.
img.svg {
	display: none;
}

#back-to-top {
	position: fixed;
	display: flex;
	right: 30px;
	bottom: 30px;
	padding: 10px;
	z-index: 20;

	background: $grad1;
	background: -webkit-gradient(linear,left top,right top,from($grad1),to($grad2));
	background: -o-linear-gradient(left,$grad1 0,$grad2 100%);
	background: linear-gradient(to right,$grad1 0,$grad2 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$grad1}', endColorstr='#{$grad2}', GradientType=1 );


	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	line-height: 20px;

	text-align: center;
	white-space: nowrap;


	opacity: 0;
	-webkit-transition: ease-in-out .2s opacity;
	-o-transition: ease-in-out .2s opacity;
	transition: ease-in-out .2s opacity;

	cursor: pointer;

	border-radius: 5px;
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
	box-shadow: 0 0 10px rgba(0,0,0,.1);

	.fa {
		position: relative;
		display: block;
		margin-right:10px;
		width: 20px;
		height: 20px;
		text-align:center;
		border-radius: 50%;
		background: #FFF;

		&:before {
			position: absolute;
			display: block;
			top: 5px;
			left:0;
			width:100%;

			color: $grad1;
			font-size: 1rem;
			line-height: 1;
		}
	}

	&:hover {
		color: #FFF;
		text-decoration: none;
	}

	&.active {
		opacity: 1;
	}

}