/**
 * pfs-public.css
 * Front-end styles for the password form and document list.
 * Mobile-first; the Elementor widget overrides typography/colors.
 */

.pfs {
	font-family: inherit;
	color: inherit;
	max-width: 720px;
	margin: 0 auto;
	box-sizing: border-box;
}

.pfs *, .pfs *::before, .pfs *::after { box-sizing: border-box; }

/* ── Editor preview banner (Elementor builder only) ───────────────────── */

.pfs-preview-banner {
	width: 100%;
	margin: 0 0 16px;
	padding: 8px 12px;
	font-size: 12px;
	line-height: 1.45;
	text-align: center;
	color: #2b4b66;
	background: #eef5fb;
	border: 1px solid #c5d9ed;
	border-radius: 4px;
}

.pfs-preview-banner--sample {
	color: #6d4c00;
	background: #fff8e5;
	border-color: #e6c84a;
}

/* ── Locked: password form ────────────────────────────────────────────── */

.pfs--locked {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.pfs--locked .pfs-login-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	max-width: 420px;
	padding: 28px 22px;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.pfs-login-logo {
	max-width: 160px;
	height: auto;
	margin: 0 auto 4px;
}

.pfs-login-heading {
	margin: 0;
	font-size: 22px;
	line-height: 1.2;
	text-align: center;
}

.pfs-login-helper {
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	color: inherit;
	opacity: 0.8;
	text-align: center;
}

/* Rich-text helper content: keep the block tight to the form's flex gap
   while still allowing paragraph spacing between its own paragraphs. */
.pfs-login-helper > :first-child { margin-top: 0; }
.pfs-login-helper > :last-child { margin-bottom: 0; }

.pfs-login-error {
	margin: 0;
	padding: 8px 12px;
	background: #fdecea;
	border: 1px solid #f5c2c0;
	border-radius: 4px;
	color: #8a1f1f;
	font-size: 13px;
	text-align: center;
}

.pfs-login-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14px;
}

.pfs-login-field span {
	font-weight: 600;
	font-size: 13px;
}

.pfs-login-field input {
	padding: 12px 14px;
	font-size: 16px;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	background: #fff;
	color: #1d2327;
	width: 100%;
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.pfs-login-field input:focus {
	outline: none;
	border-color: #2271b1;
	box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.25);
}

.pfs-login-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 18px;
	border: none;
	border-radius: 4px;
	background: #2271b1;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.pfs-login-submit:hover {
	background: #135e96;
}

/* ── Unlocked: document list ──────────────────────────────────────────── */

.pfs--unlocked .pfs-intro {
	margin-bottom: 18px;
	font-size: 15px;
	line-height: 1.55;
}

.pfs-categories {
	display: grid;
	grid-template-columns: repeat(var(--pfs-cols, 1), minmax(0, 1fr));
	gap: 16px;
	align-items: start;
}

/* Responsive column counts for the [pfs_files] shortcode. The Elementor
   widget writes its own grid-template-columns per device, which (being more
   specific) overrides these. --pfs-cols falls back to 1 = single column. */
@media (max-width: 1024px) {
	.pfs-categories {
		grid-template-columns: repeat(var(--pfs-cols-tablet, var(--pfs-cols, 1)), minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.pfs-categories {
		grid-template-columns: repeat(var(--pfs-cols-mobile, 1), minmax(0, 1fr));
	}
}

.pfs-category {
	position: relative;
	border-radius: 6px;
	background: #fff;
	/* Rounded corners are clipped by overflow: hidden. For that clip to apply
	   to the heading and list, those children must stay non-positioned — see
	   the background-overlay note in pfs-widget.css. */
	overflow: hidden;
}

/* The box outline is drawn by an ::after overlay, not a real border. A real
   border on this rounded, overflow-clipped box leaves a faint hairline at each
   corner — the clip and the border antialias on separate passes and the box
   background shows through the seam. Painting the border on a pseudo-element
   on top keeps the clip a single clean radius, so there is no seam. */
.pfs-category::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border: 1px solid #e0e0e0;
	border-radius: inherit;
	pointer-events: none;
}

.pfs-category-heading {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	background: #fafafa;
	border-bottom: 1px solid transparent;
	list-style: none;
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.pfs-category-heading::-webkit-details-marker { display: none; }
.pfs-category-heading::marker { content: ''; }

.pfs-category-heading::before {
	content: '';
	width: 0;
	height: 0;
	border-left: 5px solid currentColor;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	transition: transform 0.15s ease, border-color 0.15s ease;
}

.pfs-category[open] > .pfs-category-heading {
	border-bottom-color: #e0e0e0;
}

.pfs-category[open] > .pfs-category-heading::before {
	transform: rotate(90deg);
}

/* The JS close animation keeps [open] set until the collapse finishes — turn
   the marker back at the start of the animation so it tracks the motion. */
.pfs-category--closing[open] > .pfs-category-heading::before {
	transform: none;
}

.pfs-doc-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pfs-doc-item + .pfs-doc-item {
	border-top: 1px solid #f0f0f0;
}

.pfs-doc-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	min-height: 48px;
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.pfs-doc-link:hover,
.pfs-doc-link:focus {
	background: #f6f9fc;
	text-decoration: none;
}

/* File-type icon — inline Lucide SVG, tinted per type via custom properties
   (--pfs-ic / --pfs-ic-bg are set on the .pfs-doc-item). */
.pfs-doc-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--pfs-ic, #50575e);
}

.pfs-doc-icon-svg {
	width: 22px;
	height: 22px;
	display: block;
}

/* Tinted-box icon style. Bare style needs no extra rules. */
.pfs--icon-box .pfs-doc-icon {
	padding: 9px;
	border-radius: 8px;
	background-color: var(--pfs-ic-bg, #eef2f7);
}

/* Document name + optional file-extension pill */
.pfs-doc-main {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.pfs-doc-title {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	min-width: 0;
	word-break: break-word;
}

.pfs-doc-ext {
	flex: 0 0 auto;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 2px 7px;
	border-radius: 99px;
	color: var(--pfs-ic, #50575e);
	background-color: var(--pfs-ic-bg, #eef2f7);
}

.pfs-doc-size {
	font-size: 12px;
	color: #6c7378;
	flex: 0 0 auto;
}

.pfs-empty {
	padding: 30px 16px;
	text-align: center;
	color: #6c7378;
	background: #fafafa;
	border: 1px dashed #d0d0d0;
	border-radius: 6px;
}

.pfs-logout-row {
	margin: 18px 0 0;
	text-align: center;
}

.pfs-logout {
	display: inline-block;
	font-size: 13px;
	color: #6c7378;
	text-decoration: underline;
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.pfs-logout:hover { color: inherit; }

/* ── Message state ────────────────────────────────────────────────────── */

.pfs--message {
	padding: 24px;
	background: #f6f7f7;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	text-align: center;
	color: #50575e;
}

/* ── Mobile tweaks ────────────────────────────────────────────────────── */

@media (max-width: 480px) {
	.pfs--locked .pfs-login-form { padding: 22px 16px; gap: 12px; }
	.pfs-login-heading { font-size: 19px; }
	.pfs-doc-link { padding: 14px 12px; gap: 10px; }
	.pfs-doc-title { font-size: 14px; }
}