/* ============================================================
   Community Draws — App UI System (Mobile)
   File: /wp-content/mu-plugins/assets/css/cd-ui-mobile.css
   Scope: .cd-app-screen under 768px
   ============================================================ */

@media (max-width: 767px) {

	.cd-app-screen .cd-app-shell {
		max-width: none;
		width: 100%;
		padding: var(--cd-space-24) var(--cd-space-16) calc(var(--cd-space-48) + 72px);
	}

	.cd-app-screen .cd-screen-title {
		font-size: 28px;
	}

	.cd-app-screen .cd-screen-subtitle {
		margin-bottom: var(--cd-space-24);
		font-size: var(--cd-small-size);
	}

	.cd-app-screen .cd-card {
		padding: var(--cd-space-16);
		border-radius: var(--cd-radius-md);
	}

	.cd-app-screen .cd-card-row {
		flex-direction: column;
		align-items: stretch;
	}

	.cd-app-screen .cd-card-title {
		font-size: 20px;
	}

	.cd-app-screen .cd-card-text {
		font-size: var(--cd-small-size);
	}

	/* Reset inherited theme / WP typography inside the screen */
	.cd-app-screen h1,
	.cd-app-screen h2,
	.cd-app-screen h3,
	.cd-app-screen p,
	.cd-app-screen label,
	.cd-app-screen input,
	.cd-app-screen button,
	.cd-app-screen a {
		font-family: var(--cd-font-family);
	}

	.cd-app-screen h1 {
		font-size: 28px;
		line-height: var(--cd-h1-line);
	}

	.cd-app-screen h2 {
		font-size: 20px;
		line-height: 1.25;
	}

	.cd-app-screen p {
		font-size: var(--cd-small-size);
		line-height: 1.55;
	}

	.cd-app-screen .cd-bottom-action {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		margin: 0;
		padding: var(--cd-space-16);
		padding-bottom: calc(var(--cd-space-16) + env(safe-area-inset-bottom, 0px));
		background: linear-gradient(
			to top,
			var(--cd-surface) 72%,
			rgba(248, 250, 252, 0.92) 100%
		);
		border-top: 1px solid var(--cd-border);
		box-shadow: 0 -8px 24px rgba(10, 22, 40, 0.06);
	}

	.cd-app-screen .cd-bottom-action .cd-button-primary,
	.cd-app-screen .cd-bottom-action .cd-button-secondary {
		width: 100%;
		min-height: 52px;
	}

	.cd-app-screen .cd-button-primary:not(.cd-bottom-action *),
	.cd-app-screen .cd-button-secondary:not(.cd-bottom-action *) {
		width: 100%;
	}
}