/**
 * Shared components used across marketing pages AND the plugin's
 * rendered output. Selectors like .plura-btn, .plura-notice,
 * .plura-table, .plura-form-wrap, .plura-status-* match class names
 * the PLURA Shipping Portal plugin already outputs (see
 * plura-shipping-portal/public/*) - restyling them here means the
 * plugin never needs to change.
 */

/* Buttons (theme's own .btn-* + override of the plugin's .plura-btn) */

.plura-btn,
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--plura-font-heading);
	font-weight: 700;
	font-size: 15px;
	padding: 14px 26px;
	border-radius: var(--plura-radius-button);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform var(--plura-transition), box-shadow var(--plura-transition), background var(--plura-transition), color var(--plura-transition);
	line-height: 1.2;
}

.plura-btn:hover,
.btn:hover {
	transform: translateY(-2px);
}

.plura-btn:active,
.btn:active {
	transform: translateY(0);
}

.plura-btn:disabled,
.btn:disabled,
.btn.is-loading {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

.plura-btn-primary,
.btn-primary {
	background: var(--plura-burgundy);
	border-color: var(--plura-burgundy);
	color: var(--plura-white);
	box-shadow: var(--plura-shadow);
}

.plura-btn-primary:hover,
.btn-primary:hover {
	background: var(--plura-burgundy-dark);
	border-color: var(--plura-burgundy-dark);
	box-shadow: var(--plura-shadow-hover);
	color: var(--plura-white);
}

.btn-white {
	background: var(--plura-white);
	border-color: var(--plura-white);
	color: var(--plura-burgundy);
	box-shadow: var(--plura-shadow);
}

.btn-white:hover {
	background: var(--plura-cream);
	color: var(--plura-burgundy-dark);
}

.btn-outline {
	background: transparent;
	border-color: var(--plura-border);
	color: var(--plura-text);
}

.btn-outline:hover {
	border-color: var(--plura-burgundy);
	color: var(--plura-burgundy);
}

.btn-outline-light {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.5);
	color: var(--plura-white);
}

.btn-outline-light:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--plura-white);
}

.plura-btn-small,
.btn-small {
	padding: 9px 18px;
	font-size: 13px;
}

.btn-full {
	width: 100%;
}

/* Cards */

.plura-card {
	background: var(--plura-white);
	border: 1px solid var(--plura-border);
	border-radius: var(--plura-radius-card);
	box-shadow: var(--plura-shadow);
	padding: 28px;
	transition: transform var(--plura-transition), box-shadow var(--plura-transition);
}

.plura-card-hover:hover {
	transform: translateY(-4px);
	box-shadow: var(--plura-shadow-hover);
}

.plura-card-icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--plura-cream-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
	font-size: 22px;
}

.plura-card h3 {
	margin-bottom: 8px;
}

.plura-card p {
	color: var(--plura-text-soft);
	margin-bottom: 0;
}

.plura-badge-coming-soon {
	display: inline-block;
	font-family: var(--plura-font-heading);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	background: var(--plura-warning-bg);
	color: var(--plura-warning-text);
	padding: 5px 12px;
	border-radius: 999px;
	margin-bottom: 12px;
}

/* Pills (trust strip, customer types) */

.plura-pill {
	display: inline-flex;
	align-items: center;
	background: var(--plura-white);
	border: 1px solid var(--plura-border);
	border-radius: 999px;
	padding: 10px 20px;
	font-family: var(--plura-font-heading);
	font-weight: 600;
	font-size: 14px;
	color: var(--plura-text);
	box-shadow: var(--plura-shadow);
	white-space: nowrap;
}

/* Notices (overrides plugin .plura-notice-*) */

.plura-notice {
	padding: 16px 20px;
	border-radius: var(--plura-radius-control);
	margin-bottom: 20px;
	border-left: 4px solid var(--plura-border);
	background: var(--plura-cream-soft);
	font-size: 15px;
}

.plura-notice-success {
	border-left-color: var(--plura-success);
	background: var(--plura-success-bg);
}

.plura-notice-error {
	border-left-color: var(--plura-declined);
	background: var(--plura-declined-bg);
}

.plura-notice-info {
	border-left-color: var(--plura-burgundy);
	background: var(--plura-cream-soft);
}

.plura-notice ul {
	margin: 0;
	padding-left: 1.2em;
	list-style: disc;
}

/* Status badges (overrides plugin .plura-status-*) */

.plura-status {
	display: inline-block;
	font-family: var(--plura-font-heading);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.02em;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--plura-review-bg);
	color: var(--plura-review-text);
}

.plura-status-quoted {
	background: rgba(112, 29, 42, 0.12);
	color: var(--plura-burgundy);
}

.plura-status-accepted {
	background: var(--plura-success-bg);
	color: var(--plura-success);
}

.plura-status-manual_review {
	background: var(--plura-warning-bg);
	color: var(--plura-warning-text);
}

.plura-status-declined {
	background: var(--plura-declined-bg);
	color: var(--plura-declined);
}

/* Forms (overrides plugin .plura-form-wrap inputs) */

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

.plura-form-wrap .required,
.plura-required {
	color: var(--plura-red);
}

.plura-form-wrap input[type="text"],
.plura-form-wrap input[type="email"],
.plura-form-wrap input[type="password"],
.plura-form-wrap input[type="number"],
.plura-form-wrap input[type="tel"],
.plura-form-wrap textarea,
.plura-form-wrap select,
form.plura-styled-form input[type="text"],
form.plura-styled-form input[type="email"],
form.plura-styled-form input[type="tel"],
form.plura-styled-form textarea {
	width: 100%;
	max-width: 480px;
	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);
	transition: border-color var(--plura-transition), box-shadow var(--plura-transition);
}

.plura-form-wrap input:focus,
.plura-form-wrap textarea:focus,
.plura-form-wrap select:focus,
form.plura-styled-form input:focus,
form.plura-styled-form textarea:focus {
	outline: none;
	border-color: var(--plura-burgundy);
	box-shadow: 0 0 0 3px rgba(112, 29, 42, 0.14);
}

.plura-form-wrap p {
	margin-bottom: 18px;
}

/* Tables (overrides plugin .plura-table) */

.plura-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--plura-white);
	border: 1px solid var(--plura-border);
	border-radius: var(--plura-radius-card);
	overflow: hidden;
}

.plura-table th,
.plura-table td {
	text-align: left;
	padding: 14px 16px;
	border-bottom: 1px solid var(--plura-border);
	font-size: 14px;
}

.plura-table th {
	font-family: var(--plura-font-heading);
	font-weight: 700;
	background: var(--plura-cream-soft);
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--plura-text-soft);
}

.plura-table tr:last-child td {
	border-bottom: none;
}

@media (max-width: 640px) {
	.plura-table-responsive {
		width: 100%;
		overflow-x: auto;
	}
}

/* Accordion (FAQ) */

.plura-accordion-item {
	border: 1px solid var(--plura-border);
	border-radius: var(--plura-radius-card);
	background: var(--plura-white);
	margin-bottom: 14px;
	overflow: hidden;
}

.plura-accordion-trigger {
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	padding: 20px 24px;
	font-family: var(--plura-font-heading);
	font-weight: 700;
	font-size: 17px;
	color: var(--plura-text);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	cursor: pointer;
}

.plura-accordion-trigger:hover {
	color: var(--plura-burgundy);
}

.plura-accordion-icon {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	position: relative;
}

.plura-accordion-icon::before,
.plura-accordion-icon::after {
	content: "";
	position: absolute;
	background: currentColor;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.plura-accordion-icon::before {
	width: 14px;
	height: 2px;
}

.plura-accordion-icon::after {
	width: 2px;
	height: 14px;
	transition: transform var(--plura-transition);
}

.plura-accordion-trigger[aria-expanded="true"] .plura-accordion-icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
	opacity: 0;
}

.plura-accordion-panel {
	padding: 0 24px 20px;
	color: var(--plura-text-soft);
}

/* Reveal-on-scroll (progressive enhancement; content visible without JS) */

.plura-reveal {
	opacity: 1;
	transform: none;
}

.js-reveal-ready .plura-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 520ms ease, transform 520ms ease;
}

.js-reveal-ready .plura-reveal.is-visible {
	opacity: 1;
	transform: none;
}