/**
 * Japet Portal - shared brand design tokens.
 *
 * Colors and typography pulled from V-Shield Asia's live site
 * (v-shieldasia.net Elementor global kit: --e-global-color-primary
 * #01D4FF cyan accent, --e-global-color-secondary #1E1E1E charcoal,
 * heading/body font-family "Montserrat", form field font "Roboto").
 * Loaded once by public/class-public.php on any page that renders
 * a Japet Portal shortcode, so all templates share one consistent
 * look instead of duplicating inline styles.
 */

:root {
	--japet-primary: #01a8c9;      /* Darkened from brand cyan #01D4FF for AA text contrast on white */
	--japet-primary-bright: #01d4ff; /* True brand cyan, used for accents/highlights only */
	--japet-secondary: #1e1e1e;    /* Brand charcoal (headings, body text) */
	--japet-text: #1e1e1e;
	--japet-text-muted: #5a6068;
	--japet-border: #d7dbde;
	--japet-surface: #ffffff;
	--japet-surface-alt: #f8fbec;  /* Brand accent surface color */
	--japet-success: #1a7f4e;
	--japet-success-bg: #eafaf1;
	--japet-warning: #b7791f;
	--japet-warning-bg: #fff8e6;
	--japet-danger: #c0362c;
	--japet-danger-bg: #fdeeed;
	--japet-radius: 10px;
	--japet-radius-lg: 14px;
	--japet-font-heading: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	--japet-font-body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.japet-wrap {
	box-sizing: border-box;
	max-width: 480px;
	margin: 0 auto;
	font-family: var( --japet-font-body );
	color: var( --japet-text );
}

.japet-wrap * {
	box-sizing: border-box;
}

.japet-wrap h1, .japet-wrap h2, .japet-wrap h3 {
	font-family: var( --japet-font-heading );
	color: var( --japet-secondary );
	font-weight: 700;
}

.japet-brand-header {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 18px 16px 8px;
}

.japet-brand-header img {
	height: 36px;
	width: auto;
	display: block;
}

.japet-primary-btn {
	display: block;
	width: 100%;
	min-height: 48px;
	font-family: var( --japet-font-body );
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	background: var( --japet-primary );
	border: none;
	border-radius: var( --japet-radius );
	padding: 12px 16px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	touch-action: manipulation;
	transition: background-color 0.15s ease;
}

.japet-primary-btn:hover,
.japet-primary-btn:focus {
	background: #018aa8;
}

.japet-primary-btn:disabled,
.japet-primary-btn.is-disabled {
	background: #a8b0b5;
	cursor: not-allowed;
	pointer-events: none;
}

.japet-secondary-btn {
	display: block;
	width: 100%;
	min-height: 44px;
	font-family: var( --japet-font-body );
	font-size: 15px;
	font-weight: 600;
	color: var( --japet-primary );
	background: transparent;
	border: 2px solid var( --japet-primary );
	border-radius: var( --japet-radius );
	padding: 10px 16px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	touch-action: manipulation;
}

.japet-card {
	background: var( --japet-surface );
	border: 1px solid var( --japet-border );
	border-radius: var( --japet-radius-lg );
	padding: 16px;
	margin-bottom: 14px;
}

.japet-notice {
	font-family: var( --japet-font-body );
	padding: 16px;
	color: var( --japet-danger );
}

.japet-help-text {
	font-size: 13px;
	color: var( --japet-text-muted );
	line-height: 1.5;
	margin: 6px 0 0;
}

.japet-error-banner {
	background: var( --japet-danger-bg );
	border: 1px solid #f2b8b3;
	color: var( --japet-danger );
	padding: 12px;
	border-radius: var( --japet-radius );
	font-size: 14px;
	margin-bottom: 14px;
	display: none;
}

.japet-error-banner.is-visible {
	display: block;
}

.japet-offline-note {
	background: var( --japet-warning-bg );
	border: 1px solid #f0d38a;
	color: #7a5410;
	padding: 10px 12px;
	border-radius: var( --japet-radius );
	font-size: 13px;
	margin-bottom: 14px;
	display: none;
}

.japet-offline-note.is-visible {
	display: block;
}

.japet-info-banner {
	background: #e6f9fc;
	border: 1px solid #9fe4f0;
	color: #075366;
	padding: 12px 14px;
	border-radius: var( --japet-radius );
	font-size: 14px;
	margin-bottom: 14px;
	line-height: 1.5;
}