/* Portal Tablet Styles (769px to 1024px) */
/* style-portal-m.css */
@media (max-width: 768px) {
	body {
		background-image: unset;
		background: var(--bg);
		margin: 0;
		padding: 0;
	}
	.card {
		margin: 0.5rem;
		padding: 0.8rem;
	}
	.portal-container {
		margin: 0;
		padding: 0;
		padding-top: 3rem;
		display: block;
	}
	/* UI msg */
	.ui-msg {
		inset: 0;
		width: 100vw;
		height: 4rem;
		font-size: 1.2rem;
		display: flex;
		border-radius: 0;
		justify-content: center;
		align-items: center;
		visibility: hidden;
		z-index: 9000;
	}
	@keyframes uiMsgslide {
		0% {
			visibility: visible;
			transform: translateY(-300%);
		}
		10% {
			transform: translateY(0);
		}
		90% {
			transform: translateY(0);
		}
		100% {
			visibility: hidden;
			transform: translateY(-300%);
		}
	}
	/* ===== Mobile Sidebar Drawer ===== */
	.user-sidebar {
		position: fixed;
		top: 0;
		right: 0;

		height: 100dvh;
		width: 90vw;

		background: var(--bg);
		z-index: 5000;

		transform: translateX(100%);
		transition: transform 0.35s ease;

		box-shadow: -10px 0 30px rgba(0, 0, 0, 0.6);
		padding: 1rem;

		overflow-y: auto;
	}

	.user-sidebar.open {
		transform: translateX(0);
	}

	/* Backdrop */
	.sidebar-backdrop {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.55);
		z-index: 4000;

		opacity: 0;
		pointer-events: none;
		transition: 0.3s;
	}

	.sidebar-backdrop.show {
		opacity: 1;
		pointer-events: auto;
	}

	/* Hamburger */
	.sidebar-toggle {
		position: fixed;
		top: 0.3rem;
		right: 0.5rem;
		z-index: 6000;

		width: 38px;
		height: 38px;

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 6px;

		border-radius: 8px;
		background: var(--header-accent);
		border: var(--glass-border);
		backdrop-filter: blur(10px);
		cursor: pointer;
	}

	.sidebar-toggle span {
		width: 22px;
		height: 3px;
		background: var(--text);
		border-radius: 2px;
	}
	.user-sidebar a {
		font-size: 1.5rem;
	}
	/* side Menu (theme / Lang) */
	.side-menu {
		inset-inline-end: 0;
		inset-block-end: 0;
		justify-content: flex-end;
	}
	/* main area */
	.mainarea-container {
		width: 100%;
		margin: 0;
	}
	/* notif container */
	.notif-container {
		grid-template-columns: repeat(1, 1fr);
	}
	/* s-btn */
	.s-btn {
		/* width: 70%; */
	}
	/* hide on mobile */
	.hide-on-mobile {
		opacity: 0;
		display: 0;
		width: 0;
		background: transparent;
		font-size: 0;
	}
}