/*
 * PK Royal Core — plugin-rendered UI (Royal Archive document search table,
 * affiliate application form, order tracking form, contact/wholesale/
 * newsletter forms, product documentation tab).
 *
 * Reads the CSS custom properties (design tokens) defined by the
 * pk-royal-commerce theme in assets/css/design-tokens.css: --pkr-gold,
 * --pkr-gold-light, --pkr-black, --pkr-panel, --pkr-cream, --pkr-muted,
 * --pkr-violet, --pkr-border, --pkr-radius-md. Every var() call below
 * carries its own fallback value (from brand/BRAND.md) so this stylesheet
 * still renders sensibly if the theme is ever swapped out or these tokens
 * change name again.
 */

.pkrc-research-notice {
	margin: 22px 0;
	padding: 16px 18px;
	border: 1px solid var(--pkr-border, rgba(214, 177, 93, 0.35));
	background: var(--pkr-panel, #121212);
	border-radius: var(--pkr-radius-md, 12px);
	color: var(--pkr-cream, #F6F1E8);
}

/* ---------------------------------------------------------------------
 * Forms shared by document search, order tracking, affiliate application,
 * contact/wholesale/newsletter.
 * ------------------------------------------------------------------- */

.pkrc-form,
.pkrc-doc-search-form {
	max-width: 560px;
	margin: 0 0 28px;
}

.pkrc-doc-search-fields {
	display: grid;
	gap: 16px;
}

.pkrc-form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 16px;
}

.pkrc-form-row label {
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pkr-gold-light, #F0D58B);
}

.pkrc-form-row input,
.pkrc-form-row select,
.pkrc-form-row textarea {
	background: var(--pkr-black, #090909);
	color: var(--pkr-cream, #F6F1E8);
	border: 1px solid var(--pkr-border, rgba(214, 177, 93, 0.35));
	border-radius: 10px;
	padding: 12px 14px;
	font: inherit;
}

.pkrc-form-row input:focus,
.pkrc-form-row select:focus,
.pkrc-form-row textarea:focus {
	outline: 2px solid var(--pkr-gold, #D6B15D);
	outline-offset: 1px;
}

.pkrc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 22px;
	border-radius: 999px;
	border: 0;
	background: linear-gradient(135deg, var(--pkr-gold-light, #F0D58B), var(--pkr-gold, #D6B15D));
	color: #111;
	font-weight: 700;
	cursor: pointer;
}

.pkrc-btn-ghost {
	background: transparent;
	color: var(--pkr-gold-light, #F0D58B);
	border: 1px solid var(--pkr-gold, #D6B15D);
	padding: 8px 16px;
	min-height: auto;
}

.pkrc-form-success {
	padding: 12px 16px;
	border-radius: 10px;
	background: rgba(214, 177, 93, 0.1);
	color: var(--pkr-cream, #F6F1E8);
	border: 1px solid var(--pkr-gold, #D6B15D);
}

.pkrc-form-error {
	padding: 12px 16px;
	border-radius: 10px;
	background: rgba(214, 90, 90, 0.12);
	color: #f3c9c9;
	border: 1px solid rgba(214, 90, 90, 0.4);
}

/* ---------------------------------------------------------------------
 * Document search results table
 * ------------------------------------------------------------------- */

.pkrc-doc-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 12px;
}

.pkrc-doc-table th,
.pkrc-doc-table td {
	text-align: left;
	padding: 12px 14px;
	border-bottom: 1px solid var(--pkr-border, rgba(214, 177, 93, 0.2));
	color: var(--pkr-cream, #F6F1E8);
}

.pkrc-doc-table th {
	color: var(--pkr-gold-light, #F0D58B);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.06em;
}

.pkrc-doc-empty,
.pkrc-doc-pending {
	color: var(--pkr-muted, #B9B2A7);
}

/* ---------------------------------------------------------------------
 * Product documentation tab
 * ------------------------------------------------------------------- */

.pkrc-product-doc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.pkrc-product-doc-list li {
	padding: 12px 14px;
	border: 1px solid var(--pkr-border, rgba(214, 177, 93, 0.25));
	border-radius: 10px;
	background: var(--pkr-panel, #121212);
}

.pkrc-product-doc-list a {
	color: var(--pkr-gold-light, #F0D58B);
	font-weight: 600;
}

.pkrc-doc-lot {
	color: var(--pkr-muted, #B9B2A7);
	font-size: 12px;
	margin-left: 8px;
}

/* ---------------------------------------------------------------------
 * Order tracking result
 * ------------------------------------------------------------------- */

.pkrc-order-tracking-result {
	margin-top: 20px;
	padding: 20px;
	border: 1px solid var(--pkr-border, rgba(214, 177, 93, 0.25));
	border-radius: var(--pkr-radius-md, 14px);
	background: var(--pkr-panel, #121212);
}

.pkrc-order-tracking-items {
	margin: 12px 0 0;
	padding-left: 18px;
	color: var(--pkr-muted, #B9B2A7);
}

@media (max-width: 560px) {
	.pkrc-doc-table,
	.pkrc-doc-table thead,
	.pkrc-doc-table tbody,
	.pkrc-doc-table th,
	.pkrc-doc-table td,
	.pkrc-doc-table tr {
		display: block;
	}

	.pkrc-doc-table thead {
		display: none;
	}

	.pkrc-doc-table tr {
		margin-bottom: 14px;
		border: 1px solid var(--pkr-border, rgba(214, 177, 93, 0.25));
		border-radius: 10px;
		overflow: hidden;
	}

	.pkrc-doc-table td {
		border-bottom: 0;
		padding-left: 46%;
		position: relative;
		min-height: 34px;
	}

	.pkrc-doc-table td::before {
		content: attr(data-label);
		position: absolute;
		left: 14px;
		top: 10px;
		width: 40%;
		font-size: 0.72rem;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: var(--pkr-muted, #B9B2A7);
	}
}

/*
 * WooCommerce checkout payment-method icons (the Zelle wordmark set via
 * PKRC_Gateway_Zelle::$icon) ship at whatever native resolution the source
 * asset happens to be -- WooCommerce's own markup applies no sizing.
 * Constrain to a normal payment-logo height so a gateway icon can't
 * visually dominate its plain-text siblings in the payment method list.
 * (Venmo previously used this same rule for its own icon; Venmo was
 * removed from checkout 2026-08-24 -- see class-pkrc-gateway-venmo.php.)
 *
 * Scoped to `label img` specifically (matching
 * woocommerce/checkout/payment-method.php's markup, where a gateway's icon
 * -- and ONLY a gateway's icon -- lives inside the <label>) rather than a
 * bare `ul... img` descendant selector, which previously also matched the
 * Zelle "Scan to Pay" QR code that used to render in the sibling
 * `.payment_box` div (removed from checkout 2026-08-24 at the owner's
 * request -- the QR still renders in the post-order confirmation email,
 * see PKRC_Zelle::mail_instructions() in includes/class-pkrc-zelle.php,
 * which uses its own inline styles, not this stylesheet).
 */
ul.wc_payment_methods li > label img,
ul.payment_methods li > label img {
	max-height: 24px;
	width: auto;
	vertical-align: middle;
}