/*
 * WPRaffle 7.0 storefront pieces: My Tickets, checkout confirmations, entry
 * list, free entry, bundle offer and instant wins.
 *
 * Everything inherits the theme's font and text colour and uses translucent
 * greys, so it sits on light and dark themes alike. Change the accent with
 * one variable, e.g.  .rtg7 { --rtg7-accent: #c0392b; }
 */

.rtg7 {
	--rtg7-accent: #2f6feb;
	--rtg7-gold: #f2a93b;
	--rtg7-line: rgba(127, 127, 127, .28);
	--rtg7-soft: rgba(127, 127, 127, .07);
	--rtg7-radius: 10px;
	font: inherit;
	color: inherit;
	box-sizing: border-box;
}
.rtg7 *,
.rtg7 *::before,
.rtg7 *::after { box-sizing: inherit; }

.rtg7-meta { font-size: .875em; opacity: .72; }
.rtg7-empty { margin: 0 0 1em; opacity: .8; }
.rtg7-note { margin: 0 0 .9em; font-size: .9em; opacity: .8; }

/* Badges and ticket chips */
.rtg7-badge {
	display: inline-block;
	padding: .25em .7em;
	border-radius: 999px;
	font-size: .78em;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	background: var(--rtg7-soft);
	border: 1px solid var(--rtg7-line);
}
.rtg7-badge--open { color: var(--rtg7-accent); border-color: currentColor; background: transparent; }
.rtg7-badge--drawn { background: var(--rtg7-gold); border-color: var(--rtg7-gold); color: #1d1d1d; }

.rtg7-chips { display: flex; flex-wrap: wrap; gap: .45em; margin: .6em 0 0; padding: 0; list-style: none; }
.rtg7-chip {
	margin: 0;
	padding: .3em .7em;
	border: 1px dashed var(--rtg7-line);
	border-radius: 6px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .9em;
	font-variant-numeric: tabular-nums;
	background: var(--rtg7-soft);
}
.rtg7-chip--win { border: 2px solid var(--rtg7-gold); background: rgba(242, 169, 59, .15); font-weight: 700; }
.rtg7-chip--win span { font-family: inherit; font-size: .8em; text-transform: uppercase; letter-spacing: .04em; }

/* My Tickets */
.rtg7-mytickets { display: grid; gap: 1.1em; }
.rtg7-card { border: 1px solid var(--rtg7-line); border-radius: var(--rtg7-radius); padding: 1.1em 1.2em; }
.rtg7-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; margin-bottom: .4em; }
.rtg7-card__title { margin: 0 0 .15em; font-size: 1.1em; line-height: 1.3; }
.rtg7-entry { padding: .8em 0 0; margin-top: .8em; border-top: 1px solid var(--rtg7-line); }
.rtg7-entry__order a { font-weight: 600; }

/* Checkout confirmations */
.rtg7-confirm { margin: 0 0 1em; }
.rtg7-confirm__row { margin: 0 0 .5em; }
.rtg7-confirm__row label { display: flex; gap: .5em; align-items: flex-start; font-weight: normal; line-height: 1.5; }
.rtg7-confirm__row input { margin-top: .3em; flex: none; }

/* Entry list */
.rtg7-entries__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8em; margin-bottom: .9em; }
.rtg7-entries__search { max-width: 260px; width: 100%; }
.rtg7-entries__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: .4em;
	margin: 0;
	padding: 0;
	list-style: none;
	max-height: 520px;
	overflow: auto;
}
.rtg7-entries__list li {
	display: flex;
	justify-content: space-between;
	gap: .6em;
	margin: 0;
	padding: .45em .7em;
	border: 1px solid var(--rtg7-line);
	border-radius: 6px;
	font-size: .92em;
}
.rtg7-entries__list li[hidden] { display: none; }
.rtg7-entries__ticket { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; font-variant-numeric: tabular-nums; }
.rtg7-entries__name { opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Free entry */
.rtg7-postal { padding: 1em 1.2em; border-left: 3px solid var(--rtg7-accent); background: var(--rtg7-soft); border-radius: 0 var(--rtg7-radius) var(--rtg7-radius) 0; }
.rtg7-postal p:last-child { margin-bottom: 0; }

/* Bundle offer */
.rtg7-bundle {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5em .9em;
	width: 100%;
	margin: 0 0 1em;
	padding: .8em 1em;
	border: 1px solid var(--rtg7-gold);
	border-radius: var(--rtg7-radius);
	background: rgba(242, 169, 59, .1);
}
.rtg7-bundle__tag { padding: .2em .6em; border-radius: 4px; background: var(--rtg7-gold); color: #1d1d1d; font-size: .72em; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.rtg7-bundle__text { flex: 1 1 auto; }
.rtg7 .rtg7-bundle__btn { margin: 0; }

/* Instant wins */
.rtg7-iw { margin: 1.2em 0; border: 1px solid var(--rtg7-line); border-radius: var(--rtg7-radius); overflow: hidden; }
.rtg7-iw__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; padding: .8em 1em; background: var(--rtg7-soft); border-bottom: 1px solid var(--rtg7-line); }
.rtg7-iw__list { margin: 0; padding: 0; list-style: none; max-height: 320px; overflow: auto; }
.rtg7-iw__list li { display: flex; justify-content: space-between; gap: 1em; margin: 0; padding: .6em 1em; border-bottom: 1px solid var(--rtg7-line); }
.rtg7-iw__list li:last-child { border-bottom: 0; }
.rtg7-iw__list li.is-won > span:first-child { text-decoration: line-through; opacity: .6; }
.rtg7-iw__state { font-size: .85em; opacity: .75; white-space: nowrap; }
.rtg7-iw__state--open { color: var(--rtg7-accent); opacity: 1; font-weight: 600; }

.rtg7-win { margin: 0 0 1.5em; padding: 1em 1.2em; border: 2px solid var(--rtg7-gold); border-radius: var(--rtg7-radius); background: rgba(242, 169, 59, .12); }
.rtg7-win__title { display: block; margin-bottom: .4em; font-size: 1.15em; }
.rtg7-win ul { margin: 0 0 .5em 1.2em; }
.rtg7-win p { margin: 0; }

@media (max-width: 600px) {
	.rtg7-card__head { flex-direction: column; }
	.rtg7-entries__search { max-width: none; }
}