/**
 * Lapak Okki Reseller API — WoodMart Clean Integration Stylesheet
 * @version 1.3.0
 */

:root {
	--wrc-primary: #5F56C6;
	--wrc-primary-hover: #4B43B6;
	--wrc-primary-light: rgba(95, 86, 198, 0.08);
	--wrc-code-bg: #0F172A;
	--wrc-code-header: #1E293B;
	--wrc-code-text: #F8FAFC;
	--wrc-border: #E6E6E6;
	--wrc-bg: #F8FAFC;
	--wrc-text: #242424;
	--wrc-text-muted: #767676;
	--wrc-radius-sm: 4px;
	--wrc-radius: 8px;
	--wrc-font: var(--wd-font-body, 'Lexend', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

/* ═══ Main Documentation Container (Woodmart Container) ═══ */
.wrc-docs-public {
	font-family: var(--wrc-font);
	line-height: 1.7;
	color: var(--wrc-text);
	background: #FFFFFF;
	padding: 24px;
	border-radius: var(--wrc-radius);
	border: 1px solid var(--wrc-border);
	margin: 0 auto 30px auto;
	max-width: 1200px;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

/* ═══ Hero Banner Header (Woodmart Light Style) ═══ */
.wrc-docs-hero {
	background: #F8F9FA;
	color: var(--wrc-text);
	padding: 24px 28px;
	border-radius: var(--wrc-radius);
	margin-bottom: 28px;
	border: 1px solid #EBEBEB;
	border-left: 4px solid var(--wrc-primary);
	min-width: 0;
	box-sizing: border-box;
}

.wrc-hero-title {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--wrc-primary) !important;
	margin: 0 0 8px 0;
	letter-spacing: -0.01em;
	overflow-wrap: break-word;
	word-break: break-word;
}

.wrc-hero-subtitle {
	font-size: 0.92rem;
	color: #555555;
	margin: 0;
	max-width: 800px;
	line-height: 1.6;
	overflow-wrap: break-word;
	word-break: break-word;
}

.wrc-hero-badges {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 14px;
}

.wrc-hero-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 4px;
	font-size: 0.76rem;
	font-weight: 600;
}

.wrc-badge-active {
	background: #E6F4EA;
	color: #137333;
	border: 1px solid #CEEAD6;
}

.wrc-badge-info {
	background: #E8F0FE;
	color: #1A73E8;
	border: 1px solid #D2E3FC;
}

.wrc-badge-purple {
	background: #F3E8FF;
	color: #7E22CE;
	border: 1px solid #E9D5FF;
}

/* ═══ Content Grid Wrapper ═══ */
.wrc-docs-wrapper {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 30px;
	align-items: start;
	min-width: 0;
	box-sizing: border-box;
}

.wrc-docs-content {
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
}

/* ═══ Navigation Sidebar (Woodmart Flat Sidebar) ═══ */
.wrc-docs-nav {
	position: sticky;
	top: 90px;
	background: #FAFAFA;
	padding: 10px;
	border-radius: var(--wrc-radius);
	border: 1px solid var(--wrc-border);
	display: flex;
	flex-direction: column;
	gap: 4px;
	z-index: 10;
	min-width: 0;
	box-sizing: border-box;
}

.wrc-docs-nav a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	font-size: 0.88rem;
	font-weight: 500;
	color: #555555;
	text-decoration: none !important;
	border-radius: 4px;
	transition: background 0.15s ease, color 0.15s ease;
	white-space: nowrap;
}

.wrc-docs-nav a:hover {
	color: var(--wrc-primary);
	background: var(--wrc-primary-light);
}

.wrc-docs-nav a.active {
	color: #FFFFFF !important;
	background: var(--wrc-primary) !important;
	font-weight: 600;
}

/* ═══ Responsive Navigation (Mobile & Tablet) ═══ */
@media (max-width: 991px) {
	.wrc-docs-public {
		padding: 12px 10px !important;
		border-radius: 6px;
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}

	.wrc-docs-hero {
		padding: 14px 12px !important;
		margin-bottom: 14px !important;
		border-radius: 6px !important;
		min-width: 0 !important;
	}

	.wrc-hero-title {
		font-size: 1.15rem !important;
		overflow-wrap: break-word !important;
		word-break: break-word !important;
	}

	.wrc-docs-wrapper {
		display: flex !important;
		flex-direction: column !important;
		gap: 14px !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
	}

	.wrc-docs-content {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
	}

	.wrc-docs-nav {
		position: relative !important;
		top: 0 !important;
		flex-direction: row !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
		touch-action: pan-x pan-y !important;
		white-space: nowrap !important;
		gap: 6px !important;
		padding: 8px !important;
		border-radius: 6px !important;
		background: #FAFAFA !important;
		border: 1px solid var(--wrc-border) !important;
		scrollbar-width: none !important;
		margin-bottom: 14px !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
		z-index: 5 !important;
	}

	.wrc-docs-nav::-webkit-scrollbar {
		display: none !important;
	}

	.wrc-docs-nav a {
		padding: 6px 10px !important;
		font-size: 0.78rem !important;
		border-radius: 4px !important;
		background: #FFFFFF !important;
		border: 1px solid #E0E0E0 !important;
		flex: 0 0 auto !important;
	}

	.wrc-docs-nav a.active {
		background: var(--wrc-primary) !important;
		color: #FFFFFF !important;
		border-color: var(--wrc-primary) !important;
	}

	.wrc-docs-content p,
	.wrc-docs-content li,
	.wrc-docs-content h2,
	.wrc-docs-content h3,
	.wrc-endpoint-desc,
	.wrc-notice-body p {
		overflow-wrap: break-word !important;
		word-break: break-word !important;
		max-width: 100% !important;
	}

	.wrc-endpoint-card,
	.wrc-code-example,
	.wrc-code-block,
	.wrc-notice-box,
	.wrc-table-responsive {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
	}
}

/* ═══ Main Content Sections ═══ */
.wrc-docs-content section.wrc-docs-section {
	margin-bottom: 32px !important;
	padding-bottom: 32px !important;
	border-bottom: 1px solid var(--wrc-border, #E2E8F0) !important;
	scroll-margin-top: 100px;
}

.wrc-docs-content section.wrc-docs-section:last-child {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
	border-bottom: none !important;
}

.wrc-docs-content section.wrc-docs-section > *:last-child {
	margin-bottom: 0 !important;
}

.wrc-docs-public h2 {
	font-size: 1.35rem;
	font-weight: 700;
	margin: 0 0 20px 0;
	padding-bottom: 8px;
	border-bottom: 2.5px solid var(--wrc-primary, #5F56C6);
	color: var(--wrc-text);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	letter-spacing: -0.01em;
}

.wrc-docs-public h3 {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 24px 0 12px 0;
	color: var(--wrc-text);
}

.wrc-subheading {
	font-size: 1rem;
	font-weight: 700;
	margin: 24px 0 12px 0;
	color: var(--wrc-text);
}

/* ═══ Steps List & Notice Box ═══ */
.wrc-steps-list {
	padding-left: 18px;
	margin: 12px 0 20px 0;
}

.wrc-steps-list li {
	margin-bottom: 10px;
	line-height: 1.6;
	color: #444444;
}

.wrc-notice-box {
	display: flex;
	gap: 12px;
	background: #F8F9FA;
	border: 1px solid #EBEBEB;
	border-left: 4px solid var(--wrc-primary);
	padding: 14px 18px;
	margin: 18px 0;
	border-radius: var(--wrc-radius-sm);
	font-size: 0.9rem;
}

.wrc-notice-icon {
	font-size: 1.2rem;
	line-height: 1;
}

.wrc-notice-body p {
	margin: 4px 0 0 0;
	color: #555555;
}

.wrc-link-highlight {
	color: var(--wrc-primary);
	font-weight: 600;
	text-decoration: underline;
}

.wrc-cta-wrapper {
	margin-top: 20px;
}

/* ═══ Method Badges & Endpoint Cards ═══ */
.wrc-endpoint-card {
	background: #FFFFFF !important;
	border: 1px solid var(--wrc-border, #E2E8F0) !important;
	border-radius: var(--wrc-radius, 8px) !important;
	padding: 22px 26px !important;
	margin-top: 20px !important;
	margin-bottom: 28px !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
	transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;
}

.wrc-endpoint-card:last-child {
	margin-bottom: 0 !important;
}

.wrc-endpoint-card:hover {
	border-color: rgba(95, 86, 198, 0.3) !important;
	box-shadow: 0 6px 20px rgba(95, 86, 198, 0.06) !important;
}

.wrc-endpoint-header {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}

.wrc-endpoint-url {
	font-family: "Fira Code", Consolas, Monaco, monospace;
	font-size: 0.88rem;
	font-weight: 600;
	color: #111111;
	background: #FFFFFF;
	padding: 4px 10px;
	border-radius: 4px;
	border: 1px solid #CCCCCC;
	word-break: break-all;
}

.wrc-endpoint-desc {
	margin: 4px 0 0 0;
	color: #666666;
	font-size: 0.88rem;
}

.wrc-endpoint-params {
	margin-top: 8px;
	font-size: 0.82rem;
	color: #555555;
}

.wrc-endpoint-params code {
	background: #EAEAEA;
	color: #222222;
	padding: 2px 5px;
	border-radius: 3px;
	font-size: 0.78rem;
}

.wrc-method {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 3px 8px;
	border-radius: 4px;
	font-weight: 700;
	font-size: 0.75rem;
	text-transform: uppercase;
	font-family: monospace;
}

.wrc-method-get {
	background: #E6F4EA;
	color: #137333;
	border: 1px solid #CEEAD6;
}

.wrc-method-post {
	background: #E8F0FE;
	color: #1A73E8;
	border: 1px solid #D2E3FC;
}

/* ═══ Code Examples & Syntax Panels ═══ */
.wrc-code-switcher,
.wrc-code-example {
	margin: 16px 0 !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	border: 1px solid #1E293B !important;
	background: #0F172A !important;
}

.wrc-code-tabs {
	display: flex !important;
	gap: 4px !important;
	margin: 0 !important;
	background: #1E293B !important;
	background-color: #1E293B !important;
	padding: 8px 10px 0 10px !important;
	border-bottom: 1px solid #334155 !important;
	box-shadow: none !important;
}

.wrc-code-tab,
button.wrc-code-tab,
.woocommerce button.wrc-code-tab,
.entry-content button.wrc-code-tab {
	padding: 8px 16px !important;
	font-size: 0.8rem !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	background: transparent !important;
	background-color: transparent !important;
	color: #94A3B8 !important;
	border: none !important;
	border-radius: 6px 6px 0 0 !important;
	outline: none !important;
	box-shadow: none !important;
	margin: 0 !important;
	transition: all 0.2s ease-in-out !important;
	text-transform: none !important;
}

.wrc-code-tab:hover,
button.wrc-code-tab:hover,
.woocommerce button.wrc-code-tab:hover {
	color: #F8FAFC !important;
	background: rgba(255, 255, 255, 0.08) !important;
	background-color: rgba(255, 255, 255, 0.08) !important;
}

.wrc-code-tab.active,
button.wrc-code-tab.active,
.woocommerce button.wrc-code-tab.active,
.entry-content button.wrc-code-tab.active {
	background: #0F172A !important;
	background-color: #0F172A !important;
	color: #FFFFFF !important;
	font-weight: 700 !important;
	border-top: 2.5px solid var(--wrc-primary, #5F56C6) !important;
	border-left: none !important;
	border-right: none !important;
	border-bottom: none !important;
	box-shadow: none !important;
}

.wrc-code-panel {
	display: none;
}

.wrc-code-panel.active {
	display: block;
}

.wrc-code-block,
.wrc-docs-public .wrc-code-block {
	background: #0F172A !important;
	background-color: #0F172A !important;
	color: #F8FAFC !important;
	border-radius: var(--wrc-radius, 6px) !important;
	border: 1px solid #1E293B !important;
	overflow: hidden !important;
	margin: 14px 0 !important;
}

.wrc-code-header-bar {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	background: #1E293B !important;
	background-color: #1E293B !important;
	padding: 8px 14px !important;
	border-bottom: 1px solid #334155 !important;
}

.wrc-code-lang {
	font-size: 0.78rem !important;
	font-weight: 600 !important;
	color: #94A3B8 !important;
	font-family: monospace !important;
	text-transform: uppercase !important;
}

.wrc-code-block pre,
.wrc-docs-public .wrc-code-block pre,
.entry-content .wrc-code-block pre,
.woocommerce-MyAccount-content .wrc-code-block pre {
	margin: 0 !important;
	padding: 14px 16px !important;
	overflow-x: auto !important;
	background: #0F172A !important;
	background-color: #0F172A !important;
	color: #F8FAFC !important;
	border: none !important;
	box-shadow: none !important;
}

.wrc-code-block code,
.wrc-docs-public .wrc-code-block code,
.entry-content .wrc-code-block code,
.woocommerce-MyAccount-content .wrc-code-block code {
	display: block !important;
	font-family: "Fira Code", Consolas, Monaco, monospace !important;
	font-size: 0.84rem !important;
	color: #E2E8F0 !important;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	white-space: pre-wrap !important;
	word-break: break-all !important;
	line-height: 1.6 !important;
	box-shadow: none !important;
}

.wrc-docs-public .copy-btn,
.wrc-code-block .copy-btn {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #F8FAFC;
	padding: 4px 10px;
	border-radius: 4px;
	font-size: 0.76rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
}

.copy-btn:hover {
	background: var(--wrc-primary);
	color: #FFFFFF;
	border-color: var(--wrc-primary);
}

/* ═══ Ultra Responsive Table Architecture ═══ */
.wrc-table-responsive {
	width: 100%;
	max-width: 100%;
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch !important;
	touch-action: pan-x pan-y !important;
	border-radius: var(--wrc-radius);
	border: 1px solid var(--wrc-border);
	margin: 18px 0;
	background: #FFFFFF;
}

.wrc-order-table {
	width: 100%;
	min-width: 580px;
	border-collapse: collapse;
	font-size: 0.86rem;
}

.wrc-order-table th {
	background: #F8F9FA;
	color: #444444;
	font-weight: 700;
	text-align: left;
	padding: 12px 16px;
	border-bottom: 2px solid var(--wrc-border);
	text-transform: uppercase;
	font-size: 0.76rem;
	letter-spacing: 0.03em;
}

.wrc-order-table td {
	padding: 12px 16px;
	border-bottom: 1px solid #EEEEEE;
	color: var(--wrc-text);
	vertical-align: middle;
}

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

.wrc-order-table code {
	background: #F4F4F4;
	color: #111111;
	padding: 2px 6px;
	border-radius: 3px;
	font-family: "Fira Code", monospace;
	font-size: 0.8rem;
	border: 1px solid #DDDDDD;
}

/* Status Badges */
.wrc-type-tag {
	display: inline-block;
	background: #F4F4F4;
	color: #555555;
	padding: 2px 6px;
	border-radius: 3px;
	font-size: 0.76rem;
	font-weight: 600;
	border: 1px solid #DDDDDD;
}

.wrc-status {
	display: inline-block;
	padding: 3px 8px;
	border-radius: 3px;
	font-size: 0.74rem;
	font-weight: 700;
}

.wrc-status-failed {
	background: #FCE8E6;
	color: #C5221F;
	border: 1px solid #FAD2CF;
}

.wrc-status-processing {
	background: #FEF7E0;
	color: #B06000;
	border: 1px solid #FEEFC3;
}

.wrc-status-completed {
	background: #E6F4EA;
	color: #137333;
	border: 1px solid #CEEAD6;
}

.wrc-http-badge {
	display: inline-block;
	padding: 3px 8px;
	border-radius: 4px;
	font-weight: 700;
	font-size: 0.78rem;
	font-family: monospace;
}

.wrc-http-401,
.wrc-http-403,
.wrc-http-400,
.wrc-http-402,
.wrc-http-404,
.wrc-http-409,
.wrc-http-500 {
	background: #FCE8E6;
	color: #C5221F;
	border: 1px solid #FAD2CF;
}

.wrc-footnote {
	font-size: 0.78rem;
	color: var(--wrc-text-muted);
	margin-top: 6px;
	margin-bottom: 20px;
}

/* ═══ FAQ Details Accordion ═══ */
.wrc-faq-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 14px;
}

.wrc-faq-item {
	background: #F8F9FA;
	border: 1px solid var(--wrc-border);
	border-radius: var(--wrc-radius);
	padding: 14px 18px;
}

.wrc-faq-item[open] {
	background: #FFFFFF;
	border-color: var(--wrc-primary);
}

.wrc-faq-question {
	font-weight: 600;
	font-size: 0.92rem;
	cursor: pointer;
	color: var(--wrc-text);
	user-select: none;
	outline: none;
}

.wrc-faq-answer {
	padding-top: 10px;
	margin-top: 8px;
	border-top: 1px solid #EEEEEE;
	color: #555555;
	font-size: 0.88rem;
	line-height: 1.6;
}

/* ═══ Woodmart Standard Buttons ═══ */
.wrc-docs-public .wrc-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	background: var(--wrc-primary) !important;
	color: #FFFFFF !important;
	border-radius: var(--wrc-radius-sm);
	text-decoration: none !important;
	font-weight: 600;
	font-size: 0.9rem;
	transition: background 0.15s ease !important;
}

.wrc-docs-public .wrc-btn:hover {
	background: var(--wrc-primary-hover) !important;
	color: #FFFFFF !important;
}

/* ═══ Column Width Utility Classes ═══ */
.wrc-th-col-status { width: 100px; }
.wrc-th-col-code { width: 200px; }

/* ═══ WoodMart Theme Integration & Strict No-Zoom Hover Policy ═══ */
.wrc-docs-public *:hover,
.wrc-docs-nav a:hover,
.wrc-endpoint-card:hover,
.wrc-notice-box:hover,
.wrc-code-block:hover,
.copy-btn:hover,
.wrc-btn:hover,
.wrc-faq-item:hover {
	transform: none !important;
}