/* Tennessee Theatre Usher Portal — shared styles for shortcode output
   and the passcode gate. The theme (usher-portal-theme) provides page
   chrome (header, nav, footer) using the same variables so everything
   matches even if these load in a different order. */

:root {
	--tt-burgundy: #7A222E;
	--tt-burgundy-dark: #5C1A23;
	--tt-gold: #B8963E;
	--tt-gold-light: #D9C078;
	--tt-cream: #FAF3E9;
	--tt-card: #FFFFFF;
	--tt-ink: #2A1519;
	--tt-ink-soft: #6B4A4F;
	--tt-muted: #8A6165;
	--tt-border: #E8DCC8;
	--tt-tint: #F3E4E7;
	--tt-font-heading: Georgia, 'Times New Roman', serif;
	--tt-font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Next show highlight ---------- */
.up-next-show {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--tt-burgundy);
	color: #fff;
	border-radius: 14px;
	padding: 16px 18px;
	font-family: var(--tt-font-body);
	margin-bottom: 24px;
}
.up-next-show .up-icon {
	width: 42px;
	height: 42px;
	border-radius: 10px;
	background: rgba(255,255,255,.15);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.up-next-show-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: #E7C9CE;
}
.up-next-show-name {
	font-family: var(--tt-font-heading);
	font-size: 16px;
	font-weight: 700;
	margin-top: 1px;
}

/* ---------- Shows accordion ---------- */
.up-shows-list { display: flex; flex-direction: column; gap: 12px; font-family: var(--tt-font-body); }
.up-show-card { background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: 14px; overflow: hidden; }
.up-show-toggle {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 15px 16px;
	cursor: pointer;
}
.up-show-date-chip {
	width: 40px; height: 40px; border-radius: 10px; background: var(--tt-tint);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	color: var(--tt-burgundy); flex-shrink: 0; line-height: 1;
}
.up-show-date-chip span { font-size: 9px; font-weight: 700; text-transform: uppercase; }
.up-show-date-chip strong { font-size: 15px; font-weight: 700; }
.up-show-info { flex: 1; min-width: 0; text-align: left; }
.up-show-name { display: block; font-family: var(--tt-font-heading); font-size: 15.5px; font-weight: 700; color: var(--tt-ink); }
.up-show-meta { display: block; font-size: 12.5px; color: var(--tt-muted); margin-top: 1px; }
.up-chevron { color: var(--tt-muted); transition: transform .15s ease; flex-shrink: 0; }
.up-show-card.is-open .up-chevron { transform: rotate(180deg); }
.up-show-panel { display: none; padding: 2px 16px 16px; border-top: 1px solid #F0E5D2; }
.up-show-card.is-open .up-show-panel { display: block; }
.up-usher-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid #F6EEDE; }
.up-usher-row:first-child { border-top: none; padding-top: 12px; }
.up-usher-name { font-size: 13.5px; color: var(--tt-ink); }
.up-mailto { color: var(--tt-ink); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.up-mailto:hover { color: var(--tt-burgundy); text-decoration: underline; }
.up-mail-icon { opacity: .55; flex-shrink: 0; }
.up-pill { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 20px; letter-spacing: .2px; white-space: nowrap; }
.up-pill-head { background: var(--tt-burgundy); color: #fff; }
.up-pill-usher { background: var(--tt-tint); color: var(--tt-burgundy); }
.up-coming-soon { display: flex; align-items: center; gap: 10px; padding: 14px 0 6px; color: var(--tt-gold); }
.up-coming-soon span { font-size: 13.5px; color: var(--tt-muted); font-style: italic; }

/* ---------- Schedule timeline ---------- */
.up-schedule-list { display: flex; flex-direction: column; gap: 14px; font-family: var(--tt-font-body); }
.up-schedule-card { background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: 14px; padding: 18px 18px 16px; }
.up-schedule-title { font-family: var(--tt-font-heading); font-size: 15.5px; font-weight: 700; color: var(--tt-ink); margin-bottom: 14px; }
.up-step { display: flex; gap: 12px; }
.up-step > div { padding-bottom: 16px; }
.up-step-last > div { padding-bottom: 0; }
.up-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tt-gold); margin-top: 4px; flex-shrink: 0; position: relative; }
.up-dot::after { content: ""; position: absolute; top: 14px; left: 4px; width: 1.5px; height: 26px; background: var(--tt-border); }
.up-step-last .up-dot::after { display: none; }
.up-dot-active { background: var(--tt-burgundy); }
.up-step-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--tt-muted); font-weight: 700; }
.up-step-date { display: block; font-size: 14px; color: var(--tt-ink); margin-top: 1px; }

/* ---------- Documents ---------- */
.up-documents { font-family: var(--tt-font-body); display: flex; flex-direction: column; gap: 20px; }
.up-doc-group-title { font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--tt-muted); font-weight: 700; margin-bottom: 6px; }
.up-doc-list { background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: 14px; padding: 2px 14px; }
.up-doc-row { display: flex; align-items: center; gap: 12px; padding: 13px 4px; border-top: 1px solid #F0E5D2; text-decoration: none; color: inherit; }
.up-doc-row:first-child { border-top: none; }
.up-badge { font-size: 9.5px; font-weight: 700; padding: 3px 6px; border-radius: 5px; letter-spacing: .3px; flex-shrink: 0; background: var(--tt-tint); color: var(--tt-burgundy); }
.up-doc-title { flex: 1; font-size: 13.5px; color: var(--tt-ink); }
.up-doc-row svg { color: var(--tt-muted); flex-shrink: 0; }

/* ---------- Contact form ---------- */
.up-contact { font-family: var(--tt-font-body); }
.up-contact-form { display: flex; flex-direction: column; gap: 16px; max-width: 460px; }
.up-label { font-size: 12px; font-weight: 700; color: var(--tt-ink-soft); text-transform: uppercase; letter-spacing: .4px; margin-bottom: -10px; }
.up-input {
	font-family: var(--tt-font-body); font-size: 16px; padding: 13px 14px; border-radius: 10px;
	border: 1.5px solid #E0CBAE; background: #fff; color: var(--tt-ink); box-sizing: border-box; width: 100%;
}
.up-notice { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; }
.up-notice-success { background: #E8F0E4; color: #2F5323; }
.up-notice-error { background: #F3E4E7; color: var(--tt-burgundy-dark); }

/* ---------- Buttons ---------- */
.up-button {
	font-family: var(--tt-font-body); font-size: 15px; font-weight: 600; padding: 13px 20px;
	border-radius: 10px; border: none; cursor: pointer; display: inline-block; text-align: center;
}
.up-button-primary { background: var(--tt-burgundy); color: #fff; }
.up-button-primary:hover { background: var(--tt-burgundy-dark); }
.up-button-outline { background: #fff; color: var(--tt-burgundy); border: 1.5px solid var(--tt-burgundy); padding: 8px 14px; font-size: 12.5px; }

/* ---------- Notify / signup block ---------- */
.up-notify { font-family: var(--tt-font-body); background: var(--tt-card); border: 1.5px solid var(--tt-gold-light); border-radius: 14px; padding: 6px 18px; }
.up-notify-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid #F0E5D2; }
.up-notify-row:first-child { border-top: none; }
.up-icon-sm { width: 34px; height: 34px; border-radius: 9px; background: var(--tt-cream); display: flex; align-items: center; justify-content: center; color: var(--tt-gold); flex-shrink: 0; }
.up-notify-label { flex: 1; font-size: 13.5px; color: var(--tt-ink); font-weight: 600; }
.up-notify-row-form { flex-direction: column; align-items: stretch; }
.up-notify-row-form .up-notify-label { margin-bottom: 8px; }
.up-brevo-embed { width: 100%; }

.up-empty { font-size: 13.5px; color: var(--tt-muted); font-style: italic; }

/* ---------- Passcode gate ---------- */
.up-gate-body { margin: 0; background: var(--tt-burgundy); min-height: 100vh; font-family: var(--tt-font-body); }
.up-gate-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 16px; box-sizing: border-box; }
.up-gate-card {
	width: 100%; max-width: 360px; background: var(--tt-cream); border-radius: 20px; padding: 40px 28px;
	box-sizing: border-box; box-shadow: 0 20px 40px rgba(0,0,0,.25);
	display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;
}
.up-gate-logo { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; }
.up-gate-title { font-family: var(--tt-font-heading); font-size: 22px; font-weight: 700; color: var(--tt-ink); }
.up-gate-sub { font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: var(--tt-muted); margin-top: -12px; }
.up-gate-icon { width: 44px; height: 44px; border-radius: 50%; background: #F0E0C8; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.up-gate-copy { color: #4A2E32; font-size: 14.5px; line-height: 1.5; margin: 0; }
.up-gate-error { color: var(--tt-burgundy); font-size: 13.5px; margin: -8px 0 0; font-weight: 600; }
.up-gate-card form { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.up-gate-card input[type="password"] { font-size: 16px; padding: 14px 16px; border-radius: 10px; border: 1.5px solid #E0CBAE; background: #fff; color: var(--tt-ink); }
.up-gate-card button { width: 100%; padding: 14px; border: none; border-radius: 10px; background: var(--tt-burgundy); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; }
.up-gate-help { font-size: 12.5px; color: var(--tt-muted); margin: 0; }