/* TITO WIDGET */

/* the id out-weighs Tito's class-only selectors, which is what keeps !important out */
tito-widget#ticket-widget {
	--ticket-purple-deep: color-mix(in srgb, var(--icon-purple) 90%, black);
	--ticket-pink: #ffb0b1;

	display: block;
	width: 90vw;
	max-width: 600px;
	margin: 15px auto;
	background-color: var(--icon-purple);
	border-radius: var(--box-border-radius);
	color: var(--text-color);
	font-family: var(--font-main);
}

tito-widget#ticket-widget .tito-widget-form {
	max-width: none;
	padding: 10px 30px 20px;
	background: none;
	border: none;
}

/* END TITO WIDGET */

/* TITO RELEASES */

tito-widget#ticket-widget .tito-release {
	padding: 20px 0;
	border-bottom: none;
}

tito-widget#ticket-widget .tito-release + .tito-release {
	border-top: 1px solid color-mix(in srgb, var(--text-color) 20%, transparent);
}

tito-widget#ticket-widget .tito-release--title {
	font-size: 1.4em;
	font-weight: bold;
	color: var(--text-color);
}

/* Tito prints "(205 tickets remaining)" in the title whenever a release has a quantity, with
   no setting to turn it off. It is the bare <small> in there; the classed one is a combo label. */
tito-widget#ticket-widget .tito-release--title > small:not([class]) {
	display: none;
}

tito-widget#ticket-widget .tito-release-description--description p {
	font-size: 0.95em;
	line-height: 1.4;
	color: var(--text-color);
}

tito-widget#ticket-widget .tito-price {
	font-size: 1.4em;
	font-weight: bold;
	color: var(--text-color);
}

tito-widget#ticket-widget .tito-release--tax {
	font-size: 0.7em;
	color: color-mix(in srgb, var(--text-color) 85%, transparent);
}

tito-widget#ticket-widget .tito-times {
	padding: 0 10px;
	opacity: 1;
	font-size: 1.4em;
	color: var(--text-color);
}

/* END TITO RELEASES */

/* TITO RELEASE STATES */

tito-widget#ticket-widget .tito-release--upcoming,
tito-widget#ticket-widget .tito-release--sold-out,
tito-widget#ticket-widget .tito-release--upcoming .tito-release-description--description p,
tito-widget#ticket-widget .tito-release--sold-out .tito-release-description--description p {
	color: color-mix(in srgb, var(--text-color) 75%, transparent);
}

tito-widget#ticket-widget .tito-release--status {
	background-color: transparent;
	border: 1px solid color-mix(in srgb, var(--text-color) 50%, transparent);
	border-radius: 10px;
	color: var(--text-color);
}

/* END TITO RELEASE STATES */

/* TITO QUANTITY */

tito-widget#ticket-widget .tito-release--decrement-quantity > a,
tito-widget#ticket-widget .tito-release--increment-quantity > a {
	color: var(--ticket-pink);
}

tito-widget#ticket-widget .tito-release--decrement-quantity > a.tito-release--decrement-quantity--link--disabled {
	color: var(--ticket-purple-deep);
}

tito-widget#ticket-widget .tito-quantity-input {
	width: 60px;
	padding: 6px 10px;
	background-color: var(--ticket-purple-deep);
	border: none;
	border-radius: 10px;
	font-size: 1.4em;
	color: var(--text-color);
	text-align: center;
}

/* END TITO QUANTITY */

/* TITO SUBMIT */

tito-widget#ticket-widget .tito-form-actions .tito-submit {
	margin-top: 20px;
	padding: 15px 20px;
	background: #ffffff;
	border: 1px solid #ffffff;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	font-family: var(--font-main);
	font-size: 1.4em;
	font-weight: bold;
	color: var(--icon-purple);
	cursor: pointer;
}

tito-widget#ticket-widget .tito-form-actions .tito-submit:hover {
	background: #ffffff;
	border-color: #ffffff;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
}

/* END TITO SUBMIT */

/* TITO CHECKOUT */

/* checkout inherits our white text but is styled for dark text on near-white panels */
.tito-overlay {
	color: #333333;
}

.tito-overlay .tito-registration .tito-registration-header,
.tito-overlay .tito-registration .tito-registration-section-header {
	background: var(--icon-purple);
	color: var(--text-color);
}

.tito-overlay .tito-registration .tito-company-name-toggle,
.tito-overlay .tito-registration .tito-company-name-toggle:hover,
.tito-overlay .tito-registration .tito-company-name-toggle:active,
.tito-overlay .tito-registration .tito-company-name-toggle:focus,
.tito-overlay .tito-registration .tito-company-name-toggle:visited {
	color: var(--icon-blue);
}

.tito-overlay .tito-registration .tito-continue-button {
	background: var(--icon-blue);
}

.tito-overlay .tito-registration .tito-continue-button:active,
.tito-overlay .tito-registration .tito-continue-button:hover,
.tito-overlay .tito-registration .tito-continue-button:visited {
	background: color-mix(in srgb, var(--icon-blue) 80%, black);
}

/* Tito sets this border with !important, which nothing but !important can undo */
.tito-overlay .tito-registration .tito-registration-summary .tito-registration-summary--details-button {
	background: transparent;
	border: none !important;
	color: var(--text-color);
	text-decoration: underline;
}

/* rendered outside .tito-overlay it has no colours of its own and inherits our dark page */
.tito-registration-tickets {
	background: #ffffff;
	color: #333333;
}

/* END TITO CHECKOUT */