/* ==========================================================================
   FFA Licensing — Frontend Form Styles
   Theme-independent: the brand colour is bound to the active FSE theme's
   theme.json palette (var(--wp--preset--color--ffa-blue)) with a hard-coded
   fallback, so the forms adopt whatever block theme is active and still render
   correctly if that token is absent. Neutral and semantic (status) colours are
   intentionally fixed so error/success states stay legible across themes.
   ========================================================================== */

:root {
	--ffalic-brand: var(--wp--preset--color--ffa-blue, #004c97);
	/* Darkened brand for hovers / text-on-light; fallback first for older browsers. */
	--ffalic-brand-ink: #003a7a;
	--ffalic-brand-ink: color-mix(in srgb, var(--ffalic-brand) 75%, #000);
}

.ffalic-form-wrap {
	max-width: 820px;
	margin: 0 auto;
}

/* ---- License type selector ---- */

.ffalic-type-selector {
	display: flex;
	gap: 16px;
	margin-bottom: 32px;
	flex-wrap: wrap;
}

.ffalic-type-card {
	flex: 1 1 240px;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px 20px;
	border: 2px solid #d2d2d2;
	border-radius: 4px;
	cursor: pointer;
	background: #fff;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.ffalic-type-card:hover {
	border-color: var(--ffalic-brand);
}

.ffalic-type-card--selected {
	border-color: var(--ffalic-brand);
	box-shadow: 0 0 0 3px rgba(0, 76, 151, 0.12);
	background: #f0f5ff;
}

.ffalic-type-card input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.ffalic-type-card__icon {
	font-size: 28px;
	line-height: 1;
	flex-shrink: 0;
}

.ffalic-type-card__content {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ffalic-type-card__content strong {
	font-size: 15px;
	font-weight: 700;
	color: #1d1d1d;
}

.ffalic-type-card__content span {
	font-size: 13px;
	color: #666;
	line-height: 1.4;
}

.ffalic-type-card--selected .ffalic-type-card__content strong {
	color: var(--ffalic-brand);
}

/* ---- Sections ---- */

.ffalic-form-section {
	margin-bottom: 40px;
}

.ffalic-form-section h3 {
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 6px;
	padding-bottom: 10px;
	border-bottom: 2px solid #e2e2e2;
}

.ffalic-section-desc {
	margin: 0 0 20px;
	color: #666;
	font-size: 14px;
}

/* ---- Rows ---- */

.ffalic-form-row {
	display: flex;
	gap: 20px;
}

.ffalic-form-row--half > .ffalic-form-field {
	flex: 1 1 0;
}

.ffalic-form-row--thirds > .ffalic-form-field {
	flex: 1 1 0;
}

/* ---- Fields ---- */

.ffalic-form-field {
	margin-bottom: 20px;
	flex: 1 1 auto;
}

.ffalic-form-field label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 14px;
}

.ffalic-form-field input[type="text"],
.ffalic-form-field input[type="email"],
.ffalic-form-field input[type="password"],
.ffalic-form-field input[type="url"],
.ffalic-form-field input[type="number"],
.ffalic-form-field input[type="tel"],
.ffalic-form-field input[type="search"],
.ffalic-form-field input[type="date"],
.ffalic-form-field input[type="file"],
.ffalic-form-field select,
.ffalic-form-field textarea {
	display: block;
	width: 100%;
	padding: 10px 14px;
	border: 1px solid #d2d2d2;
	border-radius: 2px;
	font-size: 15px;
	line-height: 1.5;
	color: #333;
	background: #fff;
	box-sizing: border-box;
	transition: border-color 0.15s ease;
	-webkit-appearance: none;
}

.ffalic-form-field input[type="file"] {
	padding: 8px;
	background: #fafafa;
}

.ffalic-form-field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 32px;
}

.ffalic-form-field textarea {
	min-height: 110px;
	resize: vertical;
}

.ffalic-form-field input:focus,
.ffalic-form-field select:focus,
.ffalic-form-field textarea:focus {
	outline: none;
	border-color: var(--ffalic-brand);
	box-shadow: 0 0 0 2px rgba(0, 76, 151, 0.2);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--ffalic-brand) 20%, transparent);
}

.ffalic-field-error {
	border-color: #c0392b !important;
}

.ffalic-field-hint {
	margin: 4px 0 0;
	font-size: 13px;
	color: #888;
}

.ffalic-chapter-state-error {
	margin: 4px 0 0;
	font-size: 13px;
	color: #c0392b;
	font-weight: 600;
}

/* ---- Required marker ---- */

.ffalic-required {
	color: #c0392b;
}

/* ---- Checkboxes & radios ---- */

.ffalic-checkbox-group,
.ffalic-radio-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ffalic-checkbox-label,
.ffalic-radio-label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: normal;
	cursor: pointer;
	font-size: 15px;
}

.ffalic-checkbox-label input[type="checkbox"],
.ffalic-radio-label input[type="radio"] {
	width: 18px;
	height: 18px;
	margin: 0;
	flex-shrink: 0;
	cursor: pointer;
	accent-color: var(--ffalic-brand);
}

/* A grouped question: the fieldset is a grouping device, not a visible box, so
   its default border is removed and the legend is styled as a field label. */

.ffalic-form-field fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.ffalic-form-field legend {
	display: block;
	float: none;
	width: auto;
	padding: 0;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 14px;
}

/* ---- Products repeater ---- */

#ffalic-products-container {
	margin-bottom: 14px;
}

.ffalic-product-row {
	position: relative;
	background: #f9f9f9;
	border: 1px solid #e2e2e2;
	border-radius: 2px;
	padding: 18px 20px 4px;
	margin-bottom: 12px;
}

.ffalic-product-row:only-child .ffalic-remove-product {
	display: none;
}

.ffalic-remove-product {
	position: absolute;
	top: 12px;
	right: 14px;
	background: none;
	border: none;
	color: #c0392b;
	font-size: 13px;
	cursor: pointer;
	padding: 0;
	text-decoration: underline;
}

.ffalic-remove-product:hover {
	color: #922b21;
}

/* ---- Advisor section ---- */

.ffalic-advisor-section {
	background: #f3f8f0;
	border-left: 4px solid var(--ffalic-brand);
	padding: 24px 28px;
	border-radius: 0 2px 2px 0;
}

.ffalic-advisor-section h3 {
	border-bottom-color: #c5dab8;
}

/* ---- Buttons ---- */

.ffalic-btn-primary,
.ffalic-btn-secondary {
	display: inline-block;
	padding: 12px 28px;
	font-size: 15px;
	font-weight: 600;
	border-radius: 2px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
	line-height: 1;
}

.ffalic-btn-primary {
	background: var(--ffalic-brand);
	color: #fff;
	border: 2px solid var(--ffalic-brand);
}

.ffalic-btn-primary:hover {
	background: var(--ffalic-brand-ink);
	border-color: var(--ffalic-brand-ink);
}

.ffalic-btn-primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.ffalic-btn-secondary {
	background: transparent;
	color: var(--ffalic-brand);
	border: 2px solid var(--ffalic-brand);
}

.ffalic-btn-secondary:hover {
	background: var(--ffalic-brand);
	color: #fff;
}

/* ---- Form footer ---- */

.ffalic-form-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	padding-top: 20px;
	border-top: 1px solid #e2e2e2;
}

.ffalic-required-note {
	margin: 0;
	font-size: 13px;
	color: #666;
}

/* ---- Messages ---- */

.ffalic-messages {
	margin-bottom: 24px;
}

.ffalic-message {
	padding: 14px 18px;
	border-radius: 2px;
	font-size: 15px;
	line-height: 1.5;
}

.ffalic-message--success {
	background: #eaf5e5;
	color: var(--ffalic-brand-ink);
	border: 1px solid #c5dab8;
}

.ffalic-message--error {
	background: #fdf0ef;
	color: #922b21;
	border: 1px solid #f0b8b4;
}

/* ---- Readonly fields ---- */

.ffalic-form-field input[readonly] {
	background: #f4f4f4;
	color: #888;
	cursor: not-allowed;
}

/* ---- Inline notices ---- */

.ffalic-notice {
	padding: 12px 16px;
	border-radius: 2px;
	font-size: 14px;
	margin-bottom: 16px;
}

.ffalic-notice--warning {
	background: #fff8e5;
	border: 1px solid #f0c940;
	color: #7a5c00;
}

/* ---- jQuery UI Autocomplete overrides ---- */

.ui-autocomplete {
	max-height: 220px;
	overflow-y: auto;
	overflow-x: hidden;
	z-index: 9999;
	border: 1px solid #d2d2d2;
	border-radius: 0 0 2px 2px;
	background: #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	padding: 4px 0;
}

.ui-menu-item-wrapper {
	padding: 8px 14px;
	font-size: 15px;
	cursor: pointer;
}

.ui-menu-item-wrapper.ui-state-active {
	background: #f3f8f0;
	color: var(--ffalic-brand-ink);
	border: none;
	margin: 0;
}

/* ---- Dashboard ---- */

.ffalic-dashboard {
	max-width: 860px;
	margin: 0 auto;
}

.ffalic-dash-section {
	margin-bottom: 50px;
}

.ffalic-dash-section__title {
	font-size: 22px;
	font-weight: 700;
	padding-bottom: 10px;
	border-bottom: 3px solid var(--ffalic-brand);
	margin: 0 0 24px;
}

.ffalic-dash-subsection {
	margin-top: 30px;
	padding-top: 24px;
	border-top: 1px solid #e2e2e2;
}

.ffalic-dash-subsection h3 {
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 16px;
}

/* License card */

/* Neutral front-end card. The admin stylesheet's .ffalic-admin-card is not
   loaded on the front end, so a public status view uses this instead. */

.ffalic-card {
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 2px;
	padding: 20px 24px;
	margin-bottom: 20px;
}

.ffalic-card h3 {
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 12px;
	padding-bottom: 10px;
	border-bottom: 2px solid #e2e2e2;
}

.ffalic-license-card {
	background: #f9f9f9;
	border: 1px solid #e2e2e2;
	border-left: 4px solid var(--ffalic-brand);
	border-radius: 0 2px 2px 0;
	padding: 20px 24px;
}

.ffalic-license-card__header {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.ffalic-license-details {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 6px 12px;
	margin: 0 0 16px;
	font-size: 14px;
}

.ffalic-license-details dt {
	font-weight: 600;
	color: #555;
}

.ffalic-license-details dd {
	margin: 0;
}

.ffalic-license-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 4px;
}

.ffalic-license-expiry {
	font-size: 13px;
	color: #555;
}

.ffalic-license-expiry--warning { color: #7a5c00; font-weight: 600; }
.ffalic-license-expiry--urgent  { color: #922b21; font-weight: 600; }

.ffalic-product-list {
	margin: 0;
	padding: 0 0 0 16px;
}

.ffalic-product-list li {
	margin-bottom: 2px;
	font-size: 14px;
}

/* Status badges */

.ffalic-status {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.ffalic-status--approved { background: #eaf5e5; color: var(--ffalic-brand-ink); }
.ffalic-status--pending,
.ffalic-status--info      { background: #e8f0fb; color: #1a4a9e; }
.ffalic-status--warning   { background: #fff8e5; color: #7a5c00; }
.ffalic-status--error,
.ffalic-status--rejected  { background: #fdf0ef; color: #922b21; }
.ffalic-status--reopened  { background: #f3e8ff; color: #6b21a8; }
.ffalic-status--denied    { background: #fdf0ef; color: #922b21; }

/* Design table */

.ffalic-dash-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	margin-bottom: 20px;
}

.ffalic-dash-table th,
.ffalic-dash-table td {
	text-align: left;
	padding: 8px 10px;
	border-bottom: 1px solid #e2e2e2;
}

.ffalic-dash-table th {
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: #666;
	background: #f4f4f4;
}

/* Design upload inline */

.ffalic-design-upload {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px dashed #d2d2d2;
}

.ffalic-design-upload h4 {
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 14px;
}

.ffalic-form--inline .ffalic-form-row--inline {
	display: flex;
	align-items: flex-end;
	gap: 16px;
	flex-wrap: wrap;
}

.ffalic-form-field--submit {
	flex-shrink: 0;
	margin-bottom: 20px;
}

/* Student cards */

.ffalic-student-card {
	border: 1px solid #e2e2e2;
	border-radius: 2px;
	padding: 18px 20px;
	margin-bottom: 16px;
}

.ffalic-student-card__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}

.ffalic-student-enterprise {
	display: block;
	font-size: 13px;
	color: #666;
	margin-top: 2px;
}

.ffalic-student-meta {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: 4px 10px;
	font-size: 13px;
	margin: 0 0 14px;
	color: #555;
}

.ffalic-student-meta dt { font-weight: 600; }
.ffalic-student-meta dd { margin: 0; }

.ffalic-advisor-actions {
	padding-top: 14px;
	border-top: 1px solid #f0f0f0;
}

.ffalic-advisor-action-btns {
	display: flex;
	gap: 10px;
	margin-top: 10px;
}

/* Small button modifier */

.ffalic-btn--small {
	padding: 8px 18px;
	font-size: 13px;
}

.ffalic-btn-danger {
	background: #c0392b;
	color: #fff;
	border: 2px solid #c0392b;
	padding: 8px 18px;
	font-size: 13px;
	font-weight: 600;
	border-radius: 2px;
	cursor: pointer;
	transition: background 0.15s;
}

.ffalic-btn-danger:hover { background: #922b21; border-color: #922b21; }

.ffalic-admin-comments {
	margin-top: 8px;
	font-size: 14px;
}

.ffalic-empty-state {
	color: #888;
	font-style: italic;
}

.ffalic-notice--info    { background: #e8f0fb; border-color: #b0c8f5; color: #1a4a9e; }
.ffalic-notice--success { background: #eaf5e5; border-color: #c5dab8; color: var(--ffalic-brand-ink); }
.ffalic-notice--error   { background: #fdf0ef; border-color: #f0b8b4; color: #922b21; }

/* ---- Message thread (frontend) ---- */

.ffalic-msg-thread {
	margin-top: 30px;
	padding-top: 24px;
	border-top: 1px solid #e2e2e2;
}

.ffalic-msg-thread__header {
	margin-bottom: 14px;
}

.ffalic-msg-thread__title {
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 4px;
}

.ffalic-msg-thread__hint {
	margin: 0;
	font-size: 13px;
	color: #777;
	line-height: 1.4;
}

.ffalic-msg-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 80px;
	max-height: 400px;
	overflow-y: auto;
	border: 1px solid #e2e2e2;
	border-radius: 4px;
	padding: 16px;
	background: #fafafa;
	margin-bottom: 12px;
}

.ffalic-msg-loading,
.ffalic-msg-empty {
	margin: auto;
	text-align: center;
	color: #aaa;
	font-size: 14px;
	font-style: italic;
}

.ffalic-msg {
	max-width: 85%;
}

.ffalic-msg--admin {
	align-self: flex-start;
}

.ffalic-msg--licensee,
.ffalic-msg--advisor,
.ffalic-msg--requester {
	align-self: flex-end;
}

.ffalic-msg__meta {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 4px;
}

.ffalic-msg__sender {
	font-size: 12px;
	font-weight: 700;
	color: #555;
}

.ffalic-msg__role {
	margin-right: auto;
	font-size: 12px;
	color: #777;
}

.ffalic-msg__time {
	font-size: 12px;
	color: #aaa;
	white-space: nowrap;
}

.ffalic-msg__body {
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: break-word;
}

.ffalic-msg--admin .ffalic-msg__body {
	background: #f0f6ff;
	border: 1px solid #cde0fa;
	color: #1a3a5c;
	border-bottom-left-radius: 2px;
}

.ffalic-msg--licensee .ffalic-msg__body,
.ffalic-msg--advisor .ffalic-msg__body,
.ffalic-msg--requester .ffalic-msg__body {
	background: #f0f0f0;
	border: 1px solid #e0e0e0;
	color: #333;
	border-bottom-right-radius: 2px;
}

.ffalic-msg-form {
	margin-top: 4px;
}

.ffalic-msg-compose {
	display: flex;
	gap: 10px;
	align-items: flex-end;
}

.ffalic-msg-textarea {
	flex: 1 1 auto;
	resize: none;
	border: 1px solid #d2d2d2;
	border-radius: 4px;
	padding: 10px 14px;
	font-size: 14px;
	font-family: inherit;
	line-height: 1.5;
	min-height: 72px;
	transition: border-color 0.15s;
}

.ffalic-msg-textarea:focus {
	border-color: var(--ffalic-brand);
	outline: none;
}

.ffalic-msg-send-btn {
	flex-shrink: 0;
	white-space: nowrap;
	align-self: flex-end;
}

/* ---- Responsive ---- */

@media ( max-width: 640px ) {
	.ffalic-form-row {
		flex-direction: column;
		gap: 0;
	}

	.ffalic-form-footer {
		flex-direction: column-reverse;
		align-items: flex-start;
	}

	.ffalic-msg-compose {
		flex-direction: column;
		align-items: stretch;
	}

	.ffalic-msg-send-btn {
		align-self: flex-end;
	}
}

/* ----------------------------------------------------------------------
   Exception request confirmation
   Replaces the form after a successful submission, so a reset form is
   never left sitting under a thank-you notice looking like a failure.
   ---------------------------------------------------------------------- */

.ffalic-exception-confirmation {
	border: 1px solid var(--wp--preset--color--ffa-blue, #004c97);
	border-radius: 4px;
	padding: 1.5rem;
}

.ffalic-exception-confirmation h3 {
	margin-top: 0;
}

.ffalic-exception-confirmation__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Account gate above the exception form
   --------------------------------------------------------------------------- */

.ffalic-account-gate {
	border: 1px solid #d4e3f2;
	border-left: 4px solid #004c97;
	background: #f4f8fc;
	border-radius: 4px;
	padding: 16px 18px;
	margin-bottom: 24px;
}

.ffalic-account-gate__lead {
	margin: 0 0 10px;
	line-height: 1.5;
}

.ffalic-account-gate__actions {
	margin: 0 0 10px;
}

.ffalic-account-gate__alt {
	margin: 0;
	font-size: 13px;
	color: #555;
	line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   Password field with a show/hide toggle (replaces the confirm field)
   --------------------------------------------------------------------------- */

.ffalic-password-wrap {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.ffalic-password-wrap input {
	flex: 1 1 auto;
	min-width: 0;
}

.ffalic-password-toggle {
	flex: 0 0 auto;
	background: #f2f2f2;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 0 14px;
	font-size: 13px;
	font-weight: 600;
	color: #333;
	cursor: pointer;
}

.ffalic-password-toggle:hover {
	background: #e8e8e8;
}

/* ---------------------------------------------------------------------------
   Message threads: which request, and attachments
   --------------------------------------------------------------------------- */

.ffalic-msg-thread__subject {
	color: #004c97;
}

.ffalic-msg-compose__label {
	display: block;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 6px;
}

.ffalic-msg__files {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ffalic-msg__files li {
	margin: 0;
}

.ffalic-msg__files a {
	display: inline-block;
	background: #fff;
	border: 1px solid #ccd6e0;
	border-radius: 3px;
	padding: 3px 10px;
	font-size: 12px;
	font-weight: 600;
	color: #004c97;
	text-decoration: none;
	word-break: break-all;
}

.ffalic-msg__files a:hover {
	background: #f4f8fc;
	text-decoration: underline;
}

.ffalic-msg-attach {
	margin-top: 10px;
}

.ffalic-msg-attach__label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 4px;
}

/* ---------------------------------------------------------------------------
   "This email already has an account" notice, in place of the password field
   --------------------------------------------------------------------------- */

.ffalic-account-known {
	margin: 0 0 16px;
	padding: 12px 14px;
	background: #f4f8fc;
	border: 1px solid #d4e3f2;
	border-left: 4px solid #004c97;
	border-radius: 4px;
	font-size: 14px;
	line-height: 1.5;
}

.ffalic-account-known a {
	font-weight: 600;
	color: #004c97;
}

/* ---------------------------------------------------------------------------
   "You may want the other form" pointer, at the top of each exception form
   --------------------------------------------------------------------------- */

.ffalic-form-crosslink {
	margin: 0 0 20px;
	padding: 10px 14px;
	background: #fafafa;
	border: 1px dashed #ccd6e0;
	border-radius: 4px;
	font-size: 14px;
	line-height: 1.5;
	color: #555;
}

.ffalic-form-crosslink a {
	font-weight: 600;
	color: #004c97;
	margin-left: 4px;
}