/**
 * FESTENO Partner Portal — frontend styles.
 *
 * Mobile-first. Design tokens match the FESTENO brand palette.
 */

:root {
	--fpp-ink:    #133b2a;
	--fpp-deep:   #092619;
	--fpp-coral:  #ee6549;
	--fpp-gold:   #d8a949;
	--fpp-cream:  #f5f0e7;
	--fpp-paper:  #fffdf9;
	--fpp-muted:  #66766d;
	--fpp-line:   #dedbd2;
	--fpp-ok:     #286e4c;
	--fpp-ok-bg:  #e8f2eb;
	--fpp-radius: 14px;
	--fpp-radius-sm: 9px;
	--fpp-radius-pill: 99px;
}

/* Portal shell */
.fpp-portal {
	font-family: Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	color: var(--fpp-ink);
	background: var(--fpp-paper);
}

/* Header */
.fpp-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 28px 5vw 20px;
	border-bottom: 1px solid var(--fpp-line);
	gap: 12px;
	flex-wrap: wrap;
}

.fpp-header h1 {
	font-family: Georgia, serif;
	font-size: clamp(32px, 4vw, 52px);
	font-weight: 500;
	margin: 6px 0 0;
	letter-spacing: -.04em;
}

.fpp-eyebrow {
	font-size: 10px;
	font-weight: 900;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--fpp-gold);
}

.fpp-status {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: bold;
	color: var(--fpp-ok);
	background: var(--fpp-ok-bg);
	border-radius: var(--fpp-radius-pill);
	padding: 7px 13px;
}

/* Tabs nav */
.fpp-tabs {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	scrollbar-width: none;
	padding: 12px 5vw;
	border-bottom: 1px solid var(--fpp-line);
	background: var(--fpp-paper);
	position: sticky;
	top: 0;
	z-index: 5;
}

.fpp-tabs::-webkit-scrollbar { display: none; }

.fpp-tab {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	min-height: 42px;
	padding: 0 14px;
	border-radius: var(--fpp-radius-pill);
	font-size: 11px;
	font-weight: 700;
	text-decoration: none;
	color: var(--fpp-muted);
	background: var(--fpp-cream);
	transition: background .15s, color .15s;
}

.fpp-tab.is-active,
.fpp-tab:hover,
.fpp-tab:focus-visible {
	background: var(--fpp-ink);
	color: #fff;
	outline: none;
}

/* Content area */
.fpp-content {
	min-height: 300px;
}

/* Section */
.fpp-section {
	padding: 40px 5vw;
	max-width: 1000px;
	margin: 0 auto;
}

.fpp-section h2 {
	font-family: Georgia, serif;
	font-size: clamp(34px, 4.5vw, 54px);
	font-weight: 500;
	letter-spacing: -.04em;
	margin: 8px 0 12px;
}

.fpp-muted { color: var(--fpp-muted); }

/* Stats grid */
.fpp-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin: 22px 0;
}

.fpp-stat {
	padding: 16px;
	border-radius: var(--fpp-radius);
	background: #fff;
	border: 1px solid var(--fpp-line);
}

.fpp-stat b {
	display: block;
	font-family: Georgia, serif;
	font-size: 32px;
	margin: 4px 0;
}

.fpp-stat small {
	display: block;
	font-size: 9px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--fpp-muted);
}

.fpp-stat--dark {
	background: var(--fpp-ink);
	color: #fff;
}

.fpp-stat--dark small { color: #c9ddd1; }

/* Grid layout */
.fpp-grid {
	display: grid;
	grid-template-columns: 1.3fr 0.7fr;
	gap: 16px;
}

/* Card */
.fpp-card {
	padding: 20px;
	border: 1px solid var(--fpp-line);
	border-radius: var(--fpp-radius);
	background: #fff;
}

.fpp-card h3 {
	font-family: Georgia, serif;
	font-size: 24px;
	font-weight: 500;
	margin: 0 0 12px;
}

/* Choice links in overview */
.fpp-choice {
	display: block;
	padding: 12px;
	margin: 8px 0;
	border: 1px solid var(--fpp-line);
	border-radius: var(--fpp-radius-sm);
	background: #fff;
	color: var(--fpp-ink);
	text-decoration: none;
	transition: border-color .12s;
}

.fpp-choice strong { display: block; }
.fpp-choice small  { display: block; font-size: 11px; color: var(--fpp-muted); margin-top: 2px; }

.fpp-choice:hover,
.fpp-choice:focus-visible {
	border-color: var(--fpp-gold);
	outline: none;
}

/* Stage list */
.fpp-stage {
	padding: 11px 0;
	border-bottom: 1px solid var(--fpp-line);
	font-size: 13px;
}

.fpp-stage:last-child { border-bottom: 0; }
.fpp-stage p { margin: 3px 0 0; color: var(--fpp-muted); }
.fpp-stage strong { display: block; }

.fpp-stage--done strong::before {
	content: '✓ ';
	color: var(--fpp-ok);
}

/* Timeline (vertical) */
.fpp-timeline {
	border-left: 2px solid var(--fpp-line);
	margin: 14px 0;
	padding-left: 18px;
}

/* Form */
.fpp-form {
	margin-top: 14px;
}

.fpp-formgrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.fpp-field {
	display: block;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--fpp-ink);
	margin-bottom: 4px;
}

.fpp-field input,
.fpp-field select,
.fpp-field textarea {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--fpp-line);
	border-radius: var(--fpp-radius-sm);
	background: #fff;
	color: var(--fpp-ink);
	font: inherit;
	font-size: 13px;
	margin-top: 5px;
}

/* Buttons */
.fpp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--fpp-ink);
	border-radius: var(--fpp-radius-pill);
	font: inherit;
	font-size: 12px;
	font-weight: 800;
	cursor: pointer;
	text-decoration: none;
	color: var(--fpp-ink);
	background: transparent;
	transition: background .15s, color .15s, border-color .15s;
}

.fpp-btn--primary {
	background: var(--fpp-coral);
	border-color: var(--fpp-coral);
	color: #fff;
}

.fpp-btn--primary:hover,
.fpp-btn--primary:focus-visible {
	background: #d4523a;
	border-color: #d4523a;
	outline: none;
}

.fpp-btn:disabled {
	opacity: .6;
	cursor: default;
}

.fpp-btn--ghost {
	background: transparent;
	border-color: var(--fpp-line);
	color: var(--fpp-ink);
	min-height: 36px;
	padding: 0 14px;
	font-size: 11px;
}

.fpp-btn--ghost:hover,
.fpp-btn--ghost:focus-visible {
	border-color: var(--fpp-ink);
	outline: none;
}

/* Notice */
.fpp-notice {
	padding: 12px 14px;
	border-left: 3px solid var(--fpp-gold);
	background: #fff8e8;
	font-size: 12px;
	border-radius: 0 var(--fpp-radius-sm) var(--fpp-radius-sm) 0;
}

.fpp-support-notice {
	padding: 14px 16px;
	border-left: 3px solid var(--fpp-coral);
	background: #fff6f3;
	font-size: 13px;
	border-radius: 0 var(--fpp-radius-sm) var(--fpp-radius-sm) 0;
	margin-bottom: 16px;
}

/* Badges */
.fpp-badge {
	display: inline-flex;
	border-radius: var(--fpp-radius-pill);
	background: var(--fpp-cream);
	padding: 5px 9px;
	font-size: 9px;
	font-weight: 900;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.fpp-badge--mapped {
	background: var(--fpp-ok-bg);
	color: var(--fpp-ok);
}

.fpp-badge--stage {
	background: var(--fpp-cream);
	color: var(--fpp-muted);
}

/* Tags */
.fpp-tag {
	display: inline-block;
	background: var(--fpp-ok-bg);
	color: var(--fpp-ok);
	padding: 5px 8px;
	border-radius: var(--fpp-radius-pill);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* Opportunities */
.fpp-opp-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 12px;
	align-items: center;
	padding: 14px 0;
	border-bottom: 1px solid var(--fpp-line);
}

.fpp-opp-row:last-child { border-bottom: 0; }
.fpp-opp-row h4 { margin: 0 0 4px; font-size: 15px; }

.fpp-small { font-size: 12px; color: var(--fpp-muted); }

/* Variant rows */
.fpp-variant-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--fpp-line);
	flex-wrap: wrap;
}

.fpp-variant-row:last-child { border-bottom: 0; }
.fpp-variant-row strong { display: block; }

/* Wallet row */
.fpp-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	padding: 10px 0;
	border-top: 1px solid var(--fpp-line);
	font-size: 12px;
}

.fpp-row span { color: var(--fpp-muted); }

/* Empty state */
.fpp-empty {
	padding: 24px;
	text-align: center;
	border: 1px dashed var(--fpp-line);
	border-radius: var(--fpp-radius);
	color: var(--fpp-muted);
	font-size: 13px;
	background: var(--fpp-cream);
	margin: 12px 0;
}

.fpp-empty p { margin: 0; }

/* Inline form (execution check-in) */
.fpp-inline-form { display: inline; }

/* Access denied / login prompt */
.fpp-login-prompt,
.fpp-access-denied {
	padding: 40px 16px;
	text-align: center;
	color: var(--fpp-muted);
}

.fpp-login-card {
	max-width: 440px;
	margin: 0 auto;
	padding: 28px;
	text-align: left;
	border: 1px solid var(--fpp-line);
	border-radius: var(--fpp-radius);
	background: var(--fpp-paper);
	box-shadow: 0 14px 36px rgba(9, 38, 25, .08);
}

.fpp-login-card h1 {
	margin: 6px 0 10px;
	font-family: Georgia, serif;
	font-size: clamp(30px, 6vw, 42px);
	font-weight: 500;
	letter-spacing: -.04em;
	color: var(--fpp-ink);
}

.fpp-login-card .fpp-notice { margin: 16px 0; }
.fpp-login-card .fpp-btn { margin-top: 10px; }

@media (max-width: 760px) {
	.fpp-login-card { padding: 22px 18px; }
}

/* -------------------------------------------------------------------------
   Responsive overrides — mobile
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
	.fpp-header {
		padding: 20px 16px 14px;
	}

	.fpp-tabs {
		padding: 10px 16px;
	}

	.fpp-section {
		padding: 28px 16px;
	}

	.fpp-stats {
		grid-template-columns: 1fr 1fr;
	}

	.fpp-grid {
		grid-template-columns: 1fr;
	}

	.fpp-formgrid {
		grid-template-columns: 1fr;
	}

	.fpp-btn {
		width: 100%;
		text-align: center;
	}

	.fpp-opp-row {
		grid-template-columns: 1fr;
	}
}

/* v0.2.1 — mobile workspace navigation: every destination remains visible and touch-friendly. */
@media (max-width: 760px) {
	.fpp-tabs {
		overflow: visible;
		flex-wrap: wrap;
		gap: 8px;
		/* v0.3.2 — wrapped tabs are taller than one row; keeping them pinned (sticky)
		   made the nav cover card content while scrolling on mobile. Let the nav
		   scroll away with the page instead, so nothing ever sits on top of text. */
		position: static;
		top: auto;
	}
	.fpp-tab {
		flex: 1 1 calc(50% - 4px);
		min-width: 132px;
		padding: 0 12px;
	}
	.fpp-grid > :first-child { order: 1; }
	.fpp-grid > :not(:first-child) { order: 2; }
	.fpp-card { padding: 18px; }
}
@media (max-width: 390px) {
	.fpp-tab { flex-basis: 100%; }
}

/* v0.3.0 — opportunity respond button alignment */
.fpp-opp-row > div:last-child {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

/* v0.3.0 — proposal result notice */
.fpp-notice--error {
	border-left-color: var(--fpp-coral);
	background: #fff6f3;
}

/* v0.3.5 — one-line mobile section selector; desktop keeps the existing tab rail. */
.fpp-mobile-nav {
	display: none;
}

@media (max-width: 760px) {
	.fpp-tabs {
		display: none;
	}

	.fpp-mobile-nav {
		display: block;
		position: sticky;
		top: 0;
		z-index: 5;
		padding: 9px 16px 11px;
		border-bottom: 1px solid var(--fpp-line);
		background: rgba(255, 253, 249, .97);
		box-shadow: 0 4px 14px rgba(9, 38, 25, .06);
	}

	.fpp-mobile-nav__label {
		display: block;
		margin: 0 0 4px;
		font-size: 9px;
		font-weight: 900;
		line-height: 1.2;
		letter-spacing: .13em;
		text-transform: uppercase;
		color: var(--fpp-gold);
	}

	.fpp-mobile-nav__control {
		position: relative;
	}

	.fpp-section-select {
		display: block;
		width: 100%;
		min-height: 46px;
		margin: 0;
		padding: 0 46px 0 14px;
		border: 1px solid rgba(19, 59, 42, .34);
		border-radius: 12px;
		appearance: none;
		-webkit-appearance: none;
		background: var(--fpp-cream);
		color: var(--fpp-ink);
		font: 700 15px/1.2 Arial, sans-serif;
		cursor: pointer;
	}

	.fpp-section-select:focus-visible {
		outline: 3px solid rgba(216, 169, 73, .42);
		outline-offset: 2px;
		border-color: var(--fpp-ink);
	}

	.fpp-mobile-nav__chevron {
		position: absolute;
		right: 15px;
		top: 50%;
		transform: translateY(-55%);
		font: 700 24px/1 Georgia, serif;
		color: var(--fpp-ink);
		pointer-events: none;
	}
}

/* v0.4.0 production wallet */
.fpp-notice--success { border-left-color: var(--fpp-ok); background: var(--fpp-ok-bg); }
.fpp-notice--error { border-left-color: var(--fpp-coral); background: #fff2ef; }
.fpp-wallet-heading { margin-top: 22px !important; }
.fpp-wallet-packs { display: grid; gap: 10px; }
.fpp-wallet-pack { border: 1px solid var(--fpp-line); border-radius: var(--fpp-radius-sm); padding: 13px; display: grid; gap: 8px; }
.fpp-wallet-pack__facts { color: var(--fpp-muted); font-size: 12px; }
.fpp-wallet-pack .fpp-btn { width: 100%; }

/* v0.4.3 — Partner-owned support case list and detail */
.fpp-support-cases { margin-top: 18px; }
.fpp-support-cases > h3 { margin-bottom: 4px; }
.fpp-case-list { list-style: none; padding: 0; margin: 18px 0 0; border-top: 1px solid var(--fpp-line); }
.fpp-case-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--fpp-line); }
.fpp-case-link { display: inline-block; color: var(--fpp-ink); font-weight: 800; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.fpp-case-link:hover, .fpp-case-link:focus-visible, .fpp-case-back:hover, .fpp-case-back:focus-visible { color: var(--fpp-coral); outline: none; }
.fpp-case-meta { display: flex; flex-wrap: wrap; gap: 5px 14px; margin-top: 5px; color: var(--fpp-muted); font-size: 12px; }
.fpp-case-back { display: inline-flex; min-height: 44px; align-items: center; color: var(--fpp-ink); font-weight: 800; text-decoration: none; }
.fpp-case-detail-heading { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin: 8px 0 18px; }
.fpp-case-detail-heading h3 { margin: 2px 0 0; overflow-wrap: anywhere; }
.fpp-case-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 18px; }
.fpp-case-facts > div { padding: 12px; border: 1px solid var(--fpp-line); border-radius: var(--fpp-radius-sm); }
.fpp-case-facts dt { font-size: 9px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; color: var(--fpp-muted); }
.fpp-case-facts dd { margin: 4px 0 0; font-weight: 700; overflow-wrap: anywhere; }
.fpp-case-description { padding: 16px; border-radius: var(--fpp-radius-sm); background: var(--fpp-cream); }
.fpp-case-description h4, .fpp-case-timeline-heading { margin: 0 0 8px; }
.fpp-case-description p { margin: 0; overflow-wrap: anywhere; }
.fpp-case-timeline-heading { margin-top: 22px; }
.fpp-case-timeline { list-style: none; margin: 0 0 12px; padding: 0 0 0 22px; border-left: 2px solid var(--fpp-line); }
.fpp-case-timeline__item { position: relative; padding: 0 0 18px; }
.fpp-case-timeline__item::before { content: ''; position: absolute; width: 10px; height: 10px; left: -28px; top: 5px; border-radius: 50%; background: var(--fpp-gold); border: 2px solid var(--fpp-paper); }
.fpp-case-timeline__item strong, .fpp-case-timeline__item time { display: block; }
.fpp-case-timeline__item time { margin-top: 2px; color: var(--fpp-muted); font-size: 12px; }
.fpp-case-timeline__item p { margin: 5px 0 0; }
.fpp-pagination { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.fpp-pagination a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 1px solid var(--fpp-line); border-radius: var(--fpp-radius-sm); color: var(--fpp-ink); font-weight: 800; text-decoration: none; }
.fpp-pagination a:hover, .fpp-pagination a:focus-visible, .fpp-pagination a.is-current { background: var(--fpp-ink); border-color: var(--fpp-ink); color: #fff; outline: none; }
@media (max-width: 760px) {
	.fpp-case-row { align-items: flex-start; flex-direction: column; }
	.fpp-case-facts { grid-template-columns: 1fr; }
	.fpp-case-detail-heading { align-items: flex-start; flex-direction: column; }
	.fpp-support-cases { padding: 18px; }
}