/**
 * Styling for generic content pages and the plugin's customer-facing
 * output (register/login/dashboard/shipment-form). Targets the same
 * .plura-* classes the plugin already renders - see components.css
 * for the shared button/notice/table/status primitives this builds on.
 */

.plura-page-wrap {
	padding: var(--plura-section-space) 24px;
}

.plura-page-card {
	max-width: 880px;
	margin: 0 auto;
	background: var(--plura-white);
	border: 1px solid var(--plura-border);
	border-radius: var(--plura-radius-section);
	box-shadow: var(--plura-shadow);
	padding: 48px;
}

.plura-page-card.plura-page-card-wide {
	max-width: 1080px;
}

.plura-page-card h1.entry-title {
	margin-top: 0;
}

@media (max-width: 640px) {
	.plura-page-card {
		padding: 28px 20px;
	}
}

/* Dashboard-specific layout */

.plura-dashboard,
.plura-form-wrap {
	max-width: none;
}

.plura-account-status {
	font-family: var(--plura-font-heading);
	font-size: 15px;
	background: var(--plura-cream-soft);
	border: 1px solid var(--plura-border);
	border-radius: var(--plura-radius-control);
	padding: 12px 18px;
	display: inline-block;
	margin-bottom: 24px;
}

.plura-customer-dashboard h3 {
	margin-top: 36px;
}

.plura-inline-form {
	display: inline-block;
	margin-right: 8px;
}

/**
 * WordPress core's wp_login_form() (used by the plugin's login-form.php
 * view) and wp_lostpassword_url() links render with core admin class
 * names (#loginform, .button, #wp-submit, label/p structure) rather
 * than the plugin's own .plura-form-wrap markup. Restyled here, by
 * class name only, so login matches the rest of the site with zero
 * plugin changes.
 */

.plura-login-form #loginform {
	max-width: 420px;
}

.plura-login-form #loginform p {
	margin-bottom: 18px;
}

.plura-login-form label {
	display: block;
	font-family: var(--plura-font-heading);
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 6px;
}

.plura-login-form input[type="text"],
.plura-login-form input[type="password"] {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--plura-border);
	border-radius: var(--plura-radius-control);
	background: var(--plura-white);
	font-family: var(--plura-font-body);
	font-size: 16px;
	color: var(--plura-text);
}

.plura-login-form input[type="text"]:focus,
.plura-login-form input[type="password"]:focus {
	outline: none;
	border-color: var(--plura-burgundy);
	box-shadow: 0 0 0 3px rgba(112, 29, 42, 0.14);
}

.plura-login-form .forgetmenot {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
}

.plura-login-form .forgetmenot label {
	display: inline;
	font-weight: 500;
	margin: 0;
}

.plura-login-form input[type="submit"],
.plura-login-form button[type="submit"],
.plura-login-form #wp-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--plura-font-heading);
	font-weight: 700;
	font-size: 15px;
	padding: 14px 26px;
	border-radius: var(--plura-radius-button);
	border: 1px solid var(--plura-burgundy);
	background: var(--plura-burgundy);
	color: var(--plura-white);
	cursor: pointer;
	box-shadow: var(--plura-shadow);
	transition: transform var(--plura-transition), background var(--plura-transition), box-shadow var(--plura-transition);
}

.plura-login-form input[type="submit"]:hover,
.plura-login-form button[type="submit"]:hover,
.plura-login-form #wp-submit:hover {
	background: var(--plura-burgundy-dark);
	border-color: var(--plura-burgundy-dark);
	transform: translateY(-2px);
	box-shadow: var(--plura-shadow-hover);
}

.plura-login-form p:last-child a {
	font-weight: 600;
}

/* Empty state (shown when a customer has no shipments yet) */

.plura-empty-state {
	text-align: center;
	padding: 40px 24px;
	background: var(--plura-cream-soft);
	border: 1px dashed var(--plura-border);
	border-radius: var(--plura-radius-card);
	color: var(--plura-text-soft);
}