/* Tennessee Theatre Usher Portal — shared styles for shortcode output
   and the login 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;
}
.up-next-show-date {
	font-size: 13px;
	color: #E7C9CE;
	margin-top: 2px;
}

/* ---------- 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; }
.up-assignment-group-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--tt-muted); font-weight: 700; margin: 14px 0 2px; }
.up-assignment-group-label:first-child { margin-top: 12px; }
.up-assignment-group-label + .up-usher-row { border-top: none; padding-top: 4px; }

/* ---------- 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%;
	/* No card here on purpose: the Brevo form is set to a transparent
	   background, so leaving this wrapper bare lets the theatre-cream
	   page background show straight through instead of boxing it in
	   white. */
}
.up-brevo-embed iframe {
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	/* Brevo's iframe embed is a fixed-height box, not an auto-resizing one —
	   there's no cross-origin signal telling us the form's real content
	   height, so we go tall enough that a typical name/email/consent form
	   never needs its own internal scrollbar (which is what was happening
	   at the old, tighter 520px floor). !important beats any inline
	   height/style Brevo's snippet itself carries. The page still scrolls
	   normally around this — only the iframe's *own* internal scrolling is
	   what we're avoiding here. */
	min-height: 1000px !important;
	border: none !important;
	background: transparent !important;
}

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

/* ---------- Login 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; color: var(--tt-burgundy); }
.up-gate-welcome { font-family: var(--tt-font-heading); font-size: 25px; font-weight: 700; color: var(--tt-ink); 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; text-align: left; }
.up-gate-card .up-label { margin-bottom: -8px; }
.up-gate-card .up-button { width: 100%; margin-top: 4px; }
.up-gate-forgot { font-size: 13px; font-weight: 600; margin-top: -4px; }
.up-gate-help { font-size: 12.5px; color: var(--tt-muted); margin: 0; }

/* ---------- Request a Show / My Requests ---------- */
.up-request-show, .up-my-requests { font-family: var(--tt-font-body); }
.up-batch-banner {
	background: var(--tt-card); border: 1.5px solid var(--tt-gold-light); border-radius: 14px;
	padding: 14px 16px; display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
}
.up-batch-banner-title { font-size: 13px; font-weight: 700; color: var(--tt-ink); }
.up-batch-banner-sub { font-size: 12px; color: var(--tt-muted); margin-top: 1px; }
.up-request-cards { display: flex; flex-direction: column; gap: 12px; }
.up-request-card { background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: 14px; padding: 15px 16px; }
.up-request-card-main { display: flex; align-items: center; gap: 12px; }
.up-request-card-status .up-request-card-main { align-items: flex-start; justify-content: space-between; gap: 10px; }
.up-request-card-rejected { opacity: .75; }
.up-request-card-footer {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	margin-top: 13px; padding-top: 12px; border-top: 1px solid #F0E5D2;
}
.up-request-card-footer-action { justify-content: stretch; }
.up-request-card-footer-note { font-size: 12.5px; color: var(--tt-muted); line-height: 1.5; display: block; }
.up-request-card-note { font-size: 12px; color: var(--tt-muted); }
.up-request-btn { width: 100%; }
.up-request-link {
	all: unset; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--tt-muted); font-family: var(--tt-font-body);
}
.up-request-link:hover { color: var(--tt-burgundy); }
.up-pill-pending { background: var(--tt-tint); color: var(--tt-burgundy); }
.up-pill-approved { background: var(--tt-burgundy); color: #fff; }
.up-pill-rejected { background: #EFE7E2; color: var(--tt-muted); }

/* ---------- Request row inside Upcoming Shows (merged Part 3.1) ---------- */
.up-show-request-row { flex-wrap: wrap; }
.up-show-request-form { margin: 0; }
.up-request-btn-sm { width: auto; padding: 6px 12px; font-size: 11.5px; }
.up-request-closed-note { font-size: 12px; color: var(--tt-muted); font-style: italic; }
.up-request-not-open-note { font-size: 12px; color: var(--tt-gold); font-style: italic; }
.up-request-cap-note { font-size: 12px; color: var(--tt-burgundy); font-style: italic; font-weight: 600; }

/* ---------- Viewer-specific show shading + status label (2026-09-05) ----------
   "Available" (Broadway green, #086665) means the viewer has at least one
   eligible open role on this show they haven't yet requested — wins even
   if they also have a pending request on a different role there. "Applied"
   (#FF8200) means nothing is newly requestable, but they do have a pending
   request on this show. Neither = the plain, unshaded card. */
.up-show-card-available { background: rgba(8, 102, 101, .07); border-color: rgba(8, 102, 101, .35); }
.up-show-card-applied { background: rgba(255, 130, 0, .07); border-color: rgba(255, 130, 0, .35); }
.up-show-status-label {
	display: inline-block; margin-top: 5px; font-size: 10.5px; font-weight: 700;
	padding: 2px 9px; border-radius: 20px; letter-spacing: .2px; color: #fff;
}
.up-show-status-available { background: #086665; }
.up-show-status-applied { background: #FF8200; }