/* -------------------------------------------------------------------------
 * Event Espresso Promotions Stylesheet
 * (c) 2014 Event Espresso
 * -------------------------------------------------------------------------*/

/*
General Styles
---------------------------------------------------------------------------------------------------- */

#ee-spco-payment_options-reg-step-form-payment-options-before-payment-options {
	box-sizing: content-box !important;
	position: relative;
	margin: 1.5em 0 3em;
}
#ee-spco-payment_options-reg-step-form-payment-options-before-payment-options #ee-promotion-code-input-lbl h4 {
	margin:0;
}


/* Media Query for screens larger than 480px
---------------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 481px) {

    .ee-promotion-code-input__wrapper {
        align-items: center;
        display: grid;
        grid-template-columns: 2fr 1fr;
        min-height: 3em;
    }

    #ee-promotion-code-input,
    #ee-promotion-code-submit {
        box-sizing: border-box;
        height: clamp(3rem, 100%, 5rem) !important;
        line-height: 1;
        margin: unset !important;
        min-height: unset !important;
        padding-block: clamp(0.25rem, 100%, 0.5rem) !important;
        padding-inline: clamp(0.375rem, 100%, 0.75rem) !important;
    }
    #ee-promotion-code-input {
        border-inline-end: none !important;
        border-start-end-radius: 0 !important;
        border-end-end-radius: 0 !important;
    }
    #ee-promotion-code-submit {
        border-start-start-radius: 0 !important;
        border-end-start-radius: 0 !important;
        border-width: 1px;
        min-width: 12rem;
        white-space: nowrap;
    }

}




/* ribbon style */


.ee-promo-banner-ribbon-dv {
    height: 90px;
	margin: 2em auto 0 ;
	position: relative;
	width: 100%;
}

.ee-promo-banner-ribbon-dv div {
	box-sizing: border-box;
}

.ee-promo-banner-ribbon-dv > div {
	height: 50px;
}

.ee-promo-banner-ribbon-main-dv {
	position: relative;
	display: block;
	width:100%;
	height: auto !important;
	left: 40%;
	top: 0;
	padding: 5px;
	margin-left: -40%;
	z-index: 10;
}

.ee-promo-banner-ribbon-main-dv .ee-promo-banner-text-dv {
    align-items: center;
	border: 1px dashed rgba(255, 255, 255, 0.5);
	color: #FFF;
    display: flex;
	height: auto !important;
    justify-content: center;
	min-height: 40px;
}

/*  BACK RIBBONS  */
.ee-promo-banner-ribbon-back-dv {
	position: absolute;
	width: 8%;
	top: 12px;
}
.ee-promo-banner-ribbon-back-left-dv {
	left: -5%;
}
.ee-promo-banner-ribbon-back-right-dv {
	right: -5%;
}

/*  SKEWS  */
.ee-promo-banner-ribbon-skew-dv {
	position: absolute;
	width: 3%;
	top: 6px;
	z-index: 5;
}
.ee-promo-banner-ribbon-skew-left-dv {
	left: 0;
	transform: skew( 00deg, 25deg );
}
.ee-promo-banner-ribbon-skew-right-dv {
	right: 0;
	transform: skew( 00deg, -25deg );
}

/*  ARROWS  */
.ee-promo-banner-ribbon-arrow-dv {
	position: absolute;
	z-index: 2;
	width: 0;
	height: 25px !important;
}
 /*  LEFT ARROWS  */
.ee-promo-banner-ribbon-back-left-dv > .ee-promo-banner-ribbon-arrow-dv {
	left: -29px;
}
.ee-promo-banner-ribbon-arrow-top-dv {
	top: 0;
	border-top: 0 solid transparent;
	border-bottom: 25px solid transparent;
}
.ee-promo-banner-ribbon-arrow-bottom-dv {
	top: 25px;
	border-top: 25px solid transparent;
	border-bottom:0 solid transparent;
}
/*  RIGHT ARROWS  */
.ee-promo-banner-ribbon-back-right-dv > .ee-promo-banner-ribbon-arrow-dv {
	right: -29px;
}.ee-promo-banner-ribbon-back-right-dv .ee-promo-banner-ribbon-arrow-top-dv {
	border-bottom: 25px solid transparent;
	border-top: 0 solid transparent;
	border-right: none!important;
 }
.ee-promo-banner-ribbon-back-right-dv .ee-promo-banner-ribbon-arrow-bottom-dv {
	border-top: 25px solid transparent;
	border-bottom: 0 solid transparent;
	border-right: none!important;
}

.ee-promo-separator-dv {
	line-height:10px!important;
}


.ee-promo-banner-ribbon-dv,
.ee-upcoming-promotions-container-dv {
    --ee-promo-banner-ribbon-color--currency-code: hsl(0, 0%, 100%);
}

.ee-promo-banner-ribbon-red-dv,
.ee-promo-upcoming-promotions-main-dv.red {
    --ee-promo-banner-ribbon__main: hsl(3, 78%, 38%);
    --ee-promo-banner-ribbon__back: hsl(3, 73%, 33%);
    --ee-promo-banner-ribbon__dark: hsl(3, 68%, 23%);
    --ee-promo-banner-ribbon__text: hsl(3, 78%, 100%);
    --ee-promo-banner-ribbon__link: hsl(3, 78%, 90%);
    --ee-promo-banner-ribbon__link--hover: hsl(3, 78%, 80%);
}

.ee-promo-banner-ribbon-orange-dv,
.ee-promo-upcoming-promotions-main-dv.orange {
    --ee-promo-banner-ribbon__main: hsl(23, 90%, 59%);
    --ee-promo-banner-ribbon__back: hsl(23, 85%, 54%);
    --ee-promo-banner-ribbon__dark: hsl(23, 80%, 44%);
    --ee-promo-banner-ribbon__text: hsl(23, 90%, 0%);
    --ee-promo-banner-ribbon__link: hsl(23, 90%, 10%);
    --ee-promo-banner-ribbon__link--hover: hsl(23, 90%, 90%);
}

.ee-promo-banner-ribbon-yellow-dv,
.ee-promo-upcoming-promotions-main-dv.yellow {
    --ee-promo-banner-ribbon__main: hsl(45, 76%, 59%);
    --ee-promo-banner-ribbon__back: hsl(45, 71%, 54%);
    --ee-promo-banner-ribbon__dark: hsl(45, 66%, 44%);
    --ee-promo-banner-ribbon__text: hsl(45, 76%, 0%);
    --ee-promo-banner-ribbon__link: hsl(45, 76%, 10%);
    --ee-promo-banner-ribbon__link--hover: hsl(45, 76%, 90%);
}

.ee-promo-banner-ribbon-olive-dv,
.ee-promo-upcoming-promotions-main-dv.olive {
    --ee-promo-banner-ribbon__main: hsl(73, 26%, 58%);
    --ee-promo-banner-ribbon__back: hsl(73, 21%, 53%);
    --ee-promo-banner-ribbon__dark: hsl(73, 16%, 43%);
    --ee-promo-banner-ribbon__text: hsl(73, 26%, 0%);
    --ee-promo-banner-ribbon__link: hsl(73, 26%, 10%);
    --ee-promo-banner-ribbon__link--hover: hsl(73, 26%, 90%);
}

.ee-promo-banner-ribbon-green-dv,
.ee-promo-upcoming-promotions-main-dv.green {
    --ee-promo-banner-ribbon__main: hsl(162, 100%, 36%);
    --ee-promo-banner-ribbon__back: hsl(162, 95%, 31%);
    --ee-promo-banner-ribbon__dark: hsl(162, 90%, 21%);
    --ee-promo-banner-ribbon__text: hsl(162, 100%, 0%);
    --ee-promo-banner-ribbon__link: hsl(162, 100%, 10%);
    --ee-promo-banner-ribbon__link--hover: hsl(162, 100%, 90%);
}

.ee-promo-banner-ribbon-aqua-dv,
.ee-promo-upcoming-promotions-main-dv.aqua {
    --ee-promo-banner-ribbon__main: hsl(181, 61%, 42%);
    --ee-promo-banner-ribbon__back: hsl(181, 56%, 37%);
    --ee-promo-banner-ribbon__dark: hsl(181, 51%, 27%);
    --ee-promo-banner-ribbon__text: hsl(181, 51%, 0%);
    --ee-promo-banner-ribbon__link: hsl(181, 51%, 10%);
    --ee-promo-banner-ribbon__link--hover: hsl(181, 51%, 90%);
}

.ee-promo-banner-ribbon-lite-blue-dv,
.ee-promo-upcoming-promotions-main-dv.lite-blue {
    --ee-promo-banner-ribbon__main: hsl(206, 61%, 70%);
    --ee-promo-banner-ribbon__back: hsl(206, 56%, 65%);
    --ee-promo-banner-ribbon__dark: hsl(206, 51%, 55%);
    --ee-promo-banner-ribbon__text: hsl(206, 61%, 5%);
    --ee-promo-banner-ribbon__link: hsl(206, 61%, 10%);
    --ee-promo-banner-ribbon__link--hover: hsl(206, 61%, 90%);
}

.ee-promo-banner-ribbon-blue-dv,
.ee-promo-upcoming-promotions-main-dv.blue {
    --ee-promo-banner-ribbon__main: hsl(211, 67%, 36%);
    --ee-promo-banner-ribbon__back: hsl(211, 62%, 31%);
    --ee-promo-banner-ribbon__dark: hsl(211, 57%, 21%);
    --ee-promo-banner-ribbon__text: hsl(211, 67%, 100%);
    --ee-promo-banner-ribbon__link: hsl(211, 67%, 90%);
    --ee-promo-banner-ribbon__link--hover: hsl(211, 67%, 80%);
}

.ee-promo-banner-ribbon-violet-dv,
.ee-promo-upcoming-promotions-main-dv.violet {
    --ee-promo-banner-ribbon__main: hsl(253, 22%, 38%);
    --ee-promo-banner-ribbon__back: hsl(253, 17%, 33%);
    --ee-promo-banner-ribbon__dark: hsl(253, 12%, 23%);
    --ee-promo-banner-ribbon__text: hsl(253, 22%, 100%);
    --ee-promo-banner-ribbon__link: hsl(253, 22%, 90%);
    --ee-promo-banner-ribbon__link--hover: hsl(253, 22%, 80%);
}

.ee-promo-banner-ribbon-purple-dv,
.ee-promo-upcoming-promotions-main-dv.purple {
    --ee-promo-banner-ribbon__main: hsl(311, 40%, 29%);
    --ee-promo-banner-ribbon__back: hsl(311, 35%, 24%);
    --ee-promo-banner-ribbon__dark: hsl(311, 30%, 14%);
    --ee-promo-banner-ribbon__text: hsl(311, 40%, 100%);
    --ee-promo-banner-ribbon__link: hsl(311, 40%, 90%);
    --ee-promo-banner-ribbon__link--hover: hsl(311, 40%, 80%);
}

.ee-promo-banner-ribbon-pink-dv,
.ee-promo-upcoming-promotions-main-dv.pink {
    --ee-promo-banner-ribbon__main: hsl(349, 77%, 81%);
    --ee-promo-banner-ribbon__back: hsl(349, 72%, 76%);
    --ee-promo-banner-ribbon__dark: hsl(349, 67%, 66%);
    --ee-promo-banner-ribbon__text: hsl(349, 77%, 5%);
    --ee-promo-banner-ribbon__link: hsl(349, 77%, 10%);
    --ee-promo-banner-ribbon__link--hover: hsl(349, 77%, 90%);
}



.ee-promo-banner-ribbon-main-dv {
    background: var(--ee-promo-banner-ribbon__main);
}

.ee-promo-banner-ribbon-back-dv {
    background: var(--ee-promo-banner-ribbon__back);
}

.ee-promo-banner-ribbon-arrow-top-dv,
.ee-promo-banner-ribbon-arrow-bottom-dv {
    border-right: 30px solid var(--ee-promo-banner-ribbon__back);
}

.ee-promo-banner-ribbon-back-right-dv .ee-promo-banner-ribbon-arrow-top-dv,
.ee-promo-banner-ribbon-back-right-dv .ee-promo-banner-ribbon-arrow-bottom-dv {
    border-left: 30px solid var(--ee-promo-banner-ribbon__back);
}

.ee-promo-banner-ribbon-skew-dv {
    background: var(--ee-promo-banner-ribbon__dark);
}

.ee-promo-banner-ribbon-main-dv .ee-promo-banner-text-dv {
    color: var(--ee-promo-banner-ribbon__text);
}



.ee-promo-banner-plain-text-dv .ee-promo-banner-main-dv {
	margin: 0 0 2em;
}
.ee-promo-banner-plain-text-dv .ee-promo-banner-plain-text-h4 {
	margin: 0 0 .5em;
}

/* UPCOMING PROMOTIONS */

#ee-upcoming-promotions-dv{
	display: grid;
    min-width: 360px;
}

.ee-upcoming-promotions-container-dv {
	display: inline-block;
	padding: 0;
	margin: 0 0 20px;
	width: 100%;
}
.ee-promo-upcoming-promotions-main-dv {
	padding: 2rem 2rem 1.5rem;
	background: #EEEEEE;
	margin:.5em 0;
}
.ee-upcoming-promotions-container-dv .ee-upcoming-promotions-h5,
.ee-upcoming-promotions-container-dv .ee-promo-upcoming-promotions-main-text-pg,
.ee-upcoming-promotions-container-dv .ee-promo-upcoming-promotions-additional-details-pg {
	margin: 0 0 .5em;
	-ms-word-wrap: break-word;
	word-wrap: break-word;
}


.ee-upcoming-promotions-container-dv .ee-promo-upcoming-promotions-main-dv {
	background-color: var(--ee-promo-banner-ribbon__main);
	color: var(--ee-promo-banner-ribbon__text);
}
.ee-upcoming-promotions-container-dv .ee-promo-upcoming-promotions-main-dv p,
.ee-upcoming-promotions-container-dv .ee-promo-upcoming-promotions-main-dv ul li {
	color: var(--ee-promo-banner-ribbon__text);
    margin-block-end: 1rem;
}
.ee-upcoming-promotions-container-dv .ee-promo-upcoming-promotions-main-dv ul li a {
	color: var(--ee-promo-banner-ribbon__link);
    text-decoration: underline;
    text-underline-offset: .25rem;
}
.ee-upcoming-promotions-container-dv .ee-promo-upcoming-promotions-main-dv ul li a:hover,
.ee-upcoming-promotions-container-dv .ee-promo-upcoming-promotions-main-dv ul li a:active {
	color: var(--ee-promo-banner-ribbon__link--hover);
    text-decoration: none;
}
.ee-upcoming-promotions-container-dv .ee-promo-upcoming-promotions-main-dv .currency-code {
	color: var(--ee-promo-banner-ribbon-color--currency-code);
}
.ee-upcoming-promotions-container-dv .ee-promo-upcoming-promotions-dates-dv.smaller-text {
	color: hsla(0, 0%, 50%, .75);
}