:root {
	--primary-color: #f76c7d;
	--secondary-color: #d1e0e0;
	--tertiary-color: #EEE;
	--quaternery-color: #444;
	--quinary-color: #68a0a1;
	--senary-color: #cc0027;
}

#vouchers-hero {
	text-align:center;
	max-width:1150px;
	margin:0 auto 40px auto;
	position:relative;
	top:20px;
	min-height:280px;
	background-size:100% auto;
	background-position:0 60%;
	background-repeat:no-repeat;
}
#vouchers-hero div#text-overlay {
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	left:10%;
	text-align:left;
}
#vouchers-hero div#text-overlay * { 
	color:white;
}

#vouchers-hero div#text-overlay h1 {
	font-size:28px !important;
	margin-bottom:12px;
	text-transform:none;
}
#vouchers-hero div#text-overlay h2 {
	font-size:18px !important;
}

#voucher-intro-text {
	margin:0 30px;
}
#voucher-intro-text h2 {
	font-size:16px !important;
	font-weight:bold;
}
#voucher-intro-text ul {
	list-style:none;
	padding-left:5px;
	margin:20px 0;
}

#voucher-intro-text ul li::before {
	content:"";
	background-image:url(/img/dogpawpink.png) !important;
	background-position:0 80%;
	width:28px;
	height:28px;
	background-size:cover;
	display:inline-block;
	vertical-align:middle;
}

#voucher-intro-text hr {
	border-color:var(--quinary-color);
	border-width:2px;
}

.voucher-details-container {
	/*display:none;*/
}
#form-stage-1 div.card-form-container {
	display:none;
}

#form-stage-1 div.card-form-container.active {
	display:block;
}

.voucher-details-container div.card-form-container-inner.voucher-number-selector {
	display:none;
}
div.card-form-container-inner.voucher-number-selector h1 {
	text-transform:none;
	font-size:24px !important;
	background:#444;
	color:#FFF;
	padding:6px 8px;
}
.voucher-number-selector h1 span {
	color:white;
	border-bottom:1px solid white;
}

.info-panel {
	background-color: #f6f2ef;
    border: 1px solid #d1bdae;
    box-shadow: 5px 5px 0 #d1bdae;
	text-align:center;
	padding:15px;
}
.info-panel h3, div.card-form-container-inner div.info-panel h3{
	font-size:16px !important;
	font-weight:600;
	margin-bottom:10px;
}
.info-panel ul {
	text-align:left;
}
.info-panel ul li {
	margin-bottom:0;
}
.info-panel ul li a, div.card-form-container-inner div.info-panel ul li a {
	color:var(--primary-color) !important;
	font-size:13px !important;
}

#vouchers-llg-page {
	max-width:1150px;
	margin:20px auto;
}

#vouchers-llg-page hr {
	border-color:var(--primary-color);
}
#voucher-type-toggle-container {
	background:var(--primary-color);
	display:flex;
	width:780px;
	margin:0 auto;
}
div.voucher-type-toggle {
	margin:3px;
	text-align:center;
	padding:15px;
	flex:1;
	cursor:pointer;
}
div.voucher-type-toggle * {
	color:white;
}
div.voucher-type-toggle.active {
	background:white;
	cursor:default;
}
div.voucher-type-toggle.active * {
	color:black;
}
div.vtt-title {
	font-size:16px;
	text-transform:none;
	letter-spacing:0.2px !important;
}
div.vtt-subtitle {
	font-size:16px !important;
}
div.card-form-container {
	margin:0;
}
div.card-form-container h3.card-form-title {
	margin-top:40px;
}
div.card-form-container-inner {
	margin:40px 100px;
}
div.card-form-container-inner *:not(.fa) {
	font-size:103% !important;
}
h3.card-form-title {
	font-size:32px;
	text-transform:none;
	text-align:center;
	margin-bottom:40px;
}

div.amount-selection-container {
	display:flex;
	gap:20px;
}
div.amount-selector {
	padding:20px 0;
	flex:1;
}
div.amount-selector div.ash-title {
	font-weight:bold;
}
div.amount-selection-disclaimer {

}

div.amount-selector-value-container {
	margin-top:20px;
	display:flex;
	gap:8px;
}

label.amount-selector-value span {
	display:block;
}
label.amount-selector-value input[type=radio]{
	display:none;
}
label.amount-selector-value input[type=radio] + span{
	border:1px solid;
	border-color:var(--primary-color);
	padding:8px 16px;
	font-weight:bold;
	background:#f7f7f7;
	cursor:pointer;
}
label.amount-selector-value input[type=radio]:checked + span{
	background:var(--primary-color);
	color:white;
}
div.amount-bespoker label.amount-selector-value input[type=radio] + span {
	border:0 !important;
}
div.amount-bespoker label.amount-selector-value {
	border:1px solid;
	border-color:var(--primary-color);
	display:flex;
}
div.amount-bespoker label.amount-selector-value span {
	border-right:1px solid var(--primary-color);
	padding:8px 16px;
	background:#f7f7f7;
}
div.amount-bespoker label.amount-selector-value input{
	border:0 !important;
	padding:8px 16px;
}
.bespoke-input {
	width:280px;
}
div.sample-card img {
	width:400px;height:auto;
	box-shadow: 3px 3px 2px -2px rgba(0, 0, 0, 0.4);
}

div.delivery-details {
	margin-top:20px;
	display:flex;
	gap:40px;
}
div.delivery-details.personalise-details {
	margin-bottom:20px;
	padding-bottom:20px;
	border-bottom:1px solid #CCC;
}
div.dd-lhs, div.dd-rhs, div.dd-full {
	flex:1;
}
div.dd-header {
	display:flex;
	justify-content:space-between;
	margin-bottom:10px;
}
.subtle {
	color:#999;
}

div.delivery-details label {
	display:block;
	margin-bottom:20px;
}
div.delivery-details label.sbs {
	display:flex;
}
div.delivery-details label.sbs input[type=radio] {
	width:40px;
}
div.delivery-details span.label_label {
	display:block;
	margin-bottom:10px;
}
div.delivery-details span.label_legend {
	display:block;
	margin-top:10px;
}
div.delivery-details input, div.delivery-details textarea {
	border:1px solid var(--primary-color);
	padding:10px;
	width:100%;
}
input:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--primary-color);
	outline-offset: -1px;
}
#voucher-message {
	min-height:140px;
	resize:vertical;
}
div.button-row {
	text-align:right;
}

form.voucher-ajax-form {
	position: relative;
}
form.voucher-ajax-form .loading_container {
	display:none;
}

form.voucher-ajax-form.loading .overlay {
	position: absolute;
	left: -10px;
	right: -10px;
	top: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.7);
	z-index: 8;
	display: flex;
	align-items: flex-start;
	justify-content: space-around;
	backdrop-filter: blur(2px) grayscale(100%);
}

form.voucher-ajax-form.loading .overlay .loading_container {
	background: white;
	padding: 20px;
	position: relative;
	display: inline-block;
	margin-top: 20px;
	box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.3);
	border-radius: 2px;
	font-weight: bold;
	font-size:1.4em;
}

form.voucher-ajax-form.loading .overlay .loading_container::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	height: 4px;
	background: linear-gradient(90deg,
			#ff6ec4,
			#7873f5,
			#4bb0ff,
			#22c1c3,
			#f7797d,
			#ff6ec4);
	background-size: 500% 100%;
	animation: scroll-gradient 1.5s linear infinite;
}

#payment_total, #payment_total div.total-price, #payment_total .form-input.form-entry {
	text-align: right;
}
#payment_total .form-input.form-entry {
	display: inline-block;
}
#payment_total div.total-price {
    margin-top: 30px;
    text-align: right;
}
#payment_total div.total-price p {
    font-size: 18px !important;
    font-weight: bold !important;
}
div.reservation-panel h2 {
	padding-top:10px;
}

@keyframes scroll-gradient {
	0% {
		background-position: 0% 50%;
	}

	100% {
		background-position: 100% 50%;
	}
}

#vouchers-hero a.btn {
	position:absolute;right:20px;bottom:20px;
}
#cta-tiles h4 {
	text-transform: none;
	font-size:24px !important;
	text-align: center;
    margin-bottom: 20px;
}

.cta-card-container {
	display:flex;
	gap:20px;
}
.cta-card {
	display:flex;
	flex-direction:column;
	width:33%;
}
.cta-card-image {
	display: block;
	text-decoration:none;
	position:relative;
	height:120px;
	display:flex;
	justify-content: center;
	align-items: center;
	overflow:hidden;
}
.cta-card-image:hover {
	text-decoration:none !important;
}
.cta-card-bg-img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(120%) contrast(35%) saturate(70%); 
	z-index: 1;
}
.cta-card-overlay {
	z-index: 2;
	padding:5px 10px;
	font-size:18px !important;
	font-weight:700 !important;
	color:white;
	background:rgba(0,0,0,0.3);
	padding:6px;
}
.cta-card-bottom {
	margin-top:auto;
}
.cta-card-text-title {
	font-weight:700 !important;
}

@media(max-width:992px) {
	#vouchers-llg-page {
		padding:15px;
	}
	#vouchers-hero {
		min-height:200px;
		background-position:0 0;
        margin-bottom: 60px; /* space for the buy voucher button */
	}
	.reservation-panel {
		background-color: transparent !important;
		padding:0;
	}

	#vouchers-hero a.btn {
		left: 20px;
		bottom: -20px;
	}

	div.card-form-container {
		margin-top:0px;
	}

	div.delivery-details {
		gap:0;
	}

	#vouchers-hero div#text-overlay {
		text-align: right;
		top: 30%;
	}
	#vouchers-hero div#text-overlay h1 {
		background-color:transparent;
	}
	#voucher-type-toggle-container {
		width:100%;
		flex-direction: column;
	}
	div.card-form-container-inner {
		margin-left:0;
		margin-right:0;
	}
	div.amount-selection-container {
		flex-direction: column;
		gap:0;
	}
	.amount-selector-value-container {
		flex-wrap: wrap;
	}
	div.sample-card img {
		width:100%;height:auto;
	}
	.dd-rhs .dd-header {
		display:none;
	}
	div.delivery-details {
		flex-direction: column;
	}
	div.delivery-details label.sbs input[type=radio] {
		width:28px;
	}
	div.form-btns {
		display:flex;
		flex-direction: column-reverse;
	}
	
	#payment_total, #payment_total div.total-price, #payment_total .form-input.form-entry {
		text-align: left;
	}
	div.delivery-details.personalise-details {
		margin-bottom:0;
		padding-bottom:0;
	}
	div.personalise-details div.info-panel {
		display:none;
	}
	.cta-card-container {
		flex-direction:column;
		margin:10px;
		gap:40px;
	}
	.cta-card {
		width:100%;
	}
	.label_sbs {
    	margin-left: 10px;
	}
	div.card-form-container-inner {
		margin-top:10px;
	}
}