/* web-portals : notice line + a row of portal shortcuts.
   PC: white pills (logo + name), centered or left. Below 768px: round logo-only buttons. */

.web-portals .wpt-notice {
	display:flex; align-items:center; justify-content:center; gap:.45rem;
	margin-bottom:1rem; padding:.8rem 1rem;
	background:#fff; border:1px solid #e5e7eb; border-radius:12px;
	color:color-mix(in srgb, var(--web-primary) 75%, #000); font-size:15px;
}

.web-portals .wpt-bar {
	display:flex; flex-wrap:wrap; gap:.6rem .75rem;
	padding-bottom:1rem; border-bottom:1px solid #e5e7eb;
}
.web-portals .wpt-center { justify-content:center; }
.web-portals .wpt-left   { justify-content:flex-start; }

.web-portals .wpt-item {
	display:inline-flex; align-items:center; gap:.5rem;
	height:40px; padding:0 1.05rem;
	background:#fff; border:1px solid #e5e7eb; border-radius:999px;
	color:#343a40; font-size:14px; font-weight:600; white-space:nowrap;
	transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.web-portals .wpt-item:hover {
	border-color:var(--web-primary); color:var(--web-primary-foreground);
	box-shadow:0 4px 12px rgba(0,0,0,.08); transform:translateY(-1px); text-decoration:none;
}

.web-portals .wpt-logo { flex:0 0 auto; width:18px; height:18px; border-radius:4px; object-fit:contain; }
.web-portals .wpt-initial {
	display:inline-flex; align-items:center; justify-content:center;
	background:color-mix(in srgb, var(--web-primary) 14%, #fff); color:var(--web-primary-foreground);
	font-size:11px; font-weight:800;
}

.web-portals .wpt-empty { padding:1rem; border:1px dashed #ced4da; border-radius:12px; color:#868e96; font-size:13px; text-align:center; }

@media (max-width:767px) {
	.web-portals .wpt-notice { font-size:14px; padding:.65rem .75rem; }
	.web-portals .wpt-bar { gap:.5rem; }
	.web-portals .wpt-item { width:44px; height:44px; padding:0; justify-content:center; }
	.web-portals .wpt-name { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* sr-only */
	.web-portals .wpt-logo { width:22px; height:22px; }
}