/**
 * Order Tracking - Dark & Gold Design
 *
 * Luxury dark theme with deep charcoal surfaces, glowing golden accents,
 * and monospaced tracking barcode styling.
 *
 * @package VazirBricksExtras
 */

.vbe-ot-dark-gold {
	--ot-dg-surface: var(--vbe-ot-surface, #171717);
	--ot-dg-surface-2: var(--vbe-ot-surface_2, #1f1f1f);
	--ot-dg-primary: var(--vbe-ot-primary, #ffd100);
	--ot-dg-primary-dark: var(--vbe-ot-primary_dark, #d4ad00);
	--ot-dg-border: var(--vbe-ot-border, rgba(255, 209, 1, 0.2));
	--ot-dg-text: var(--vbe-ot-text, #f5f5f5);
	--ot-dg-text-muted: var(--vbe-ot-text_muted, #b8b8b8);

	color: var(--ot-dg-text);
}

/* ── Form Styling ────────────────────────────────────────── */
.vbe-ot-dark-gold .vbe-ot-form {
	background: var(--ot-dg-surface);
	border: 1px solid var(--ot-dg-border);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

.vbe-ot-dark-gold .vbe-ot-form__icon {
	background: rgba(255, 209, 1, 0.12);
	color: var(--ot-dg-primary);
	border: 1px solid rgba(255, 209, 1, 0.22);
}

.vbe-ot-dark-gold .vbe-ot-form__title {
	color: var(--ot-dg-primary);
}

.vbe-ot-dark-gold .vbe-ot-form__subtitle {
	color: var(--ot-dg-text-muted);
}

.vbe-ot-dark-gold .vbe-ot-field__label {
	color: var(--ot-dg-text);
}

.vbe-ot-dark-gold .vbe-ot-input {
	background: var(--ot-dg-surface-2);
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: #ffffff;
}

.vbe-ot-dark-gold .vbe-ot-input:focus {
	border-color: var(--ot-dg-primary);
	box-shadow: 0 0 0 3px rgba(255, 209, 1, 0.18);
}

/* ── Buttons ─────────────────────────────────────────────── */
.vbe-ot-dark-gold .vbe-ot-btn--primary,
.vbe-ot-dark-gold__card .vbe-ot-btn--primary {
	background: var(--ot-dg-primary);
	color: #111111;
	box-shadow: 0 4px 16px rgba(255, 209, 1, 0.28);
}

.vbe-ot-dark-gold .vbe-ot-btn--primary:hover,
.vbe-ot-dark-gold__card .vbe-ot-btn--primary:hover {
	background: var(--ot-dg-primary-dark);
	transform: translateY(-1px);
	box-shadow: 0 6px 22px rgba(255, 209, 1, 0.4);
}

.vbe-ot-dark-gold .vbe-ot-btn--secondary,
.vbe-ot-dark-gold__card .vbe-ot-btn--secondary {
	background: var(--ot-dg-surface-2);
	color: var(--ot-dg-text);
	border: 1px solid rgba(255, 255, 255, 0.14);
}

.vbe-ot-dark-gold .vbe-ot-btn--secondary:hover,
.vbe-ot-dark-gold__card .vbe-ot-btn--secondary:hover {
	border-color: var(--ot-dg-primary);
	color: var(--ot-dg-primary);
}

/* ── Result Card ─────────────────────────────────────────── */
.vbe-ot-dark-gold .vbe-ot-result {
	background: var(--ot-dg-surface);
	border: 1px solid var(--ot-dg-border);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.vbe-ot-dark-gold .vbe-ot-result__header {
	border-color: rgba(255, 255, 255, 0.08);
}

.vbe-ot-dark-gold .vbe-ot-result__label {
	color: var(--ot-dg-text-muted);
}

.vbe-ot-dark-gold .vbe-ot-result__value {
	color: var(--ot-dg-text);
}

.vbe-ot-dark-gold .vbe-ot-badge--status {
	background: rgba(255, 209, 1, 0.12);
	color: var(--ot-dg-primary);
	border: 1px solid rgba(255, 209, 1, 0.28);
}

/* ── Standalone Tracking Barcode Card ────────────────────── */
.vbe-ot-dark-gold__card {
	--ot-dg-surface: var(--vbe-ot-surface, #171717);
	--ot-dg-surface-2: var(--vbe-ot-surface_2, #1f1f1f);
	--ot-dg-primary: var(--vbe-ot-primary, #ffd100);
	--ot-dg-primary-dark: var(--vbe-ot-primary_dark, #d4ad00);
	--ot-dg-border: var(--vbe-ot-border, rgba(255, 209, 1, 0.2));
	--ot-dg-text: var(--vbe-ot-text, #f5f5f5);
	--ot-dg-text-muted: var(--vbe-ot-text_muted, #b8b8b8);

	background: var(--ot-dg-surface);
	border: 1px solid var(--ot-dg-border);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
	color: var(--ot-dg-text);
}

.vbe-ot-dark-gold__card .vbe-ot-card__icon,
.vbe-ot-dark-gold .vbe-ot-card__icon {
	background: rgba(255, 209, 1, 0.12);
	color: var(--ot-dg-primary);
	border: 1px solid rgba(255, 209, 1, 0.22);
}

.vbe-ot-dark-gold__card .vbe-ot-card__label,
.vbe-ot-dark-gold .vbe-ot-card__label {
	color: var(--ot-dg-text-muted);
}

.vbe-ot-dark-gold__card .vbe-ot-card__code,
.vbe-ot-dark-gold .vbe-ot-card__code {
	color: var(--ot-dg-primary);
}

/* ── Pending State ───────────────────────────────────────── */
.vbe-ot-dark-gold .vbe-ot-pending-box {
	background: var(--ot-dg-surface-2);
	border-color: rgba(255, 255, 255, 0.14);
}

.vbe-ot-dark-gold .vbe-ot-pending-box__title {
	color: var(--ot-dg-primary);
}

.vbe-ot-dark-gold .vbe-ot-pending-box__desc {
	color: var(--ot-dg-text-muted);
}

/* ── Alert Error ─────────────────────────────────────────── */
.vbe-ot-dark-gold .vbe-ot-alert--error {
	background: rgba(244, 63, 94, 0.12);
	border: 1px solid rgba(244, 63, 94, 0.35);
	color: #fb7185;
}