/* Form container inline, full width */
.sertifikat-form {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 10px !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 2rem auto !important;
	flex-wrap: wrap !important;
}

/* Input wrapper dengan icon */
.sertifikat-input-wrapper {
	position: relative !important;
	flex: 1 !important; /* input ambil ruang maksimal */
	min-width: 200px !important;
}

.sertifikat-search-icon {
	position: absolute !important;
	left: 12px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	font-size: 16px !important;
	pointer-events: none !important;
	z-index: 10 !important;
}

/* Input text */
.sertifikat-input {
	width: 100% !important;
	padding: 12px 100px 12px 38px !important; /* padding kiri lebih untuk icon, kanan untuk tombol */
	border: 1px solid #ccc !important;
	border-radius: 50px !important;
	font-size: 16px !important;
	font-family: "Inter", sans-serif !important;
	box-sizing: border-box !important;
	background-color: #fff !important;
	color: #333 !important;
	height: 54px !important;
	transition: all 0.3s ease !important;
}

.sertifikat-input:focus {
	border-color: #2a2d44 !important;
	box-shadow: 0 0 0 2px rgba(42, 45, 68, 0.2) !important;
	outline: none !important;
}

/* Tombol inline */
.sertifikat-button {
	position: absolute !important;
	right: 6px !important;
	top: 6px !important;
	bottom: 6px !important;
	padding: 0 24px !important;
	background-color: #2a2d44 !important;
	color: #fff !important;
	font-family: "Inter", sans-serif !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	border: none !important;
	border-radius: 50px !important;
	cursor: pointer !important;
	transition: all 0.3s ease !important;
	z-index: 20 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.sertifikat-button:hover {
	background-color: #d99b12 !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 12px rgba(217, 155, 18, 0.3) !important;
}

.sertifikat-button:active {
	background-color: #2a2d44 !important;
	transform: translateY(1px) !important;
	box-shadow: none !important;
}

/* Card hasil pencarian */
/* Card hasil pencarian */
.sertifikat-card {
	border: none !important;
	padding: 30px !important;
	margin-top: 30px !important;
	border-radius: 25px !important;
	background: #fff !important;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
	width: 100% !important;
	max-width: 100% !important;
	font-family: "Inter", sans-serif !important;
	position: relative !important;
	overflow: hidden !important;
}

/* Garis dekorasi atas */
.sertifikat-card::before {
	content: "" !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 6px !important;
	background: linear-gradient(90deg, #2a2d44, #d99b12) !important;
}

.sertifikat-card p {
	margin: 0 0 15px 0 !important;
	padding-bottom: 15px !important;
	border-bottom: 1px dashed #eee !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	color: #555 !important;
	font-size: 15px !important;
}

.sertifikat-card p:last-child {
	border-bottom: none !important;
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
	justify-content: center !important;
	margin-top: 10px !important;
}

.sertifikat-card strong {
	color: #2a2d44 !important;
	font-weight: 600 !important;
}

/* Status badge refinement */
.sertifikat-status {
	padding: 6px 14px !important;
	border-radius: 50px !important;
	font-weight: 600 !important;
	display: inline-block !important;
	font-size: 13px !important;
}

.sertifikat-received {
	background: #e0f2fe !important;
	color: #075985 !important;
}
.sertifikat-in_progress {
	background: #fef9c3 !important;
	color: #854d0e !important;
}
.sertifikat-verification {
	background: #ede9fe !important;
	color: #5b21b6 !important;
}
.sertifikat-completed {
	background: #dcfce7 !important;
	color: #166534 !important;
}

/* Link detail button style */
.sertifikat-detail-link {
	display: inline-block !important;
	width: auto !important;
	text-align: center !important;
	padding: 10px 30px !important;
	background-color: transparent !important;
	color: #2a2d44 !important;
	border: 1px solid #2a2d44 !important;
	border-radius: 50px !important;
	text-decoration: none !important;
	font-weight: 600 !important;
	transition: all 0.3s ease !important;
	font-size: 14px !important;
	margin-top: 10px !important;
}

.sertifikat-detail-link:hover {
	background-color: #d99b12 !important;
	border-color: #d99b12 !important;
	color: #fff !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 12px rgba(217, 155, 18, 0.3) !important;
}

/* Pesan tidak ditemukan */
/* Pesan tidak ditemukan */
.sertifikat-notfound-wrapper {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	margin-top: 20px !important;
	text-align: center !important;
}

.sertifikat-notfound-img {
	max-width: 420px !important;
	height: auto !important;
	margin-bottom: 10px !important;
}

.sertifikat-card h3 {
	margin-top: 0 !important;
	margin-bottom: 20px !important;
	color: #2a2d44 !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	text-align: center !important;
	padding-bottom: 15px !important;
	border-bottom: 2px solid #f0f0f0 !important;
}

/* Wrapper untuk menjaga footer tetap di bawah */
.sertifikat-wrapper {
	min-height: 60vh !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important; /* Center card horizontally in detail view */
	width: 100% !important;
}

/* Detail Container */
.sertifikat-detail-container {
	width: 100% !important;
	max-width: 100% !important; /* Full width */
	margin: 0 !important;
	padding: 0 !important; /* Remove padding for flush borders */
	background: transparent !important;
	border-radius: 12px !important; /* Rounded corners */
	border: 1px solid #e5e7eb !important; /* Outer border */
	overflow: hidden !important; /* Clip content */
}

.sertifikat-detail-container h3 {
	display: none !important;
}

/* Detail Table */
.sertifikat-detail-table {
	width: 100% !important;
	border-collapse: separate !important; /* Allow radius */
	border-spacing: 0 !important;
	font-family: "Inter", sans-serif !important;
	border: none !important;
}

.sertifikat-detail-container > table {
	margin-block-end: 0 !important;
}
/* Detail Table Keys (Left Column) - High Specificity */
body .sertifikat-detail-table th,
body .sertifikat-detail-table tr th {
	width: 30% !important;
	color: #111 !important;
	font-weight: 600 !important;
	background: transparent !important;
	border-right: 1px solid #e5e7eb !important; /* Vertical divider */
	border-bottom: 1px solid #e5e7eb !important; /* Horizontal divider */
	border-top: none !important;
	border-left: none !important;
	padding: 15px !important;
	vertical-align: top !important;
	text-align: left !important;
	box-shadow: none !important;
}

/* Detail Table Values (Right Column) - High Specificity */
body .sertifikat-detail-table td,
body .sertifikat-detail-table tr td {
	color: #333 !important;
	font-weight: 400 !important;
	background: transparent !important;
	border-bottom: 1px solid #e5e7eb !important; /* Horizontal divider */
	border-top: none !important;
	border-left: none !important;
	border-right: none !important;
	padding: 15px !important;
	text-align: left !important; /* Value left aligned */
	vertical-align: top !important;
	box-shadow: none !important;
}

/* Last row border handling */
.sertifikat-detail-table tr:last-child th,
.sertifikat-detail-table tr:last-child td {
	border-bottom: 1px solid #e5e7eb !important; /* Keep bottom border for grid look */
}

/* Force override any child background */
.sertifikat-detail-table tr,
.sertifikat-detail-table tr:nth-child(even),
.sertifikat-detail-table tr:nth-child(odd) {
	background: transparent !important;
	background-color: transparent !important;
}

/* Responsive: Stack on mobile (Atas - Bawah) */
@media (max-width: 600px) {
	/* Reset specificity for mobile */
	body .sertifikat-detail-table th,
	body .sertifikat-detail-table td,
	body .sertifikat-detail-table tr th,
	body .sertifikat-detail-table tr td {
		display: block !important;
		width: 100% !important;
		text-align: left !important;
		padding: 10px 15px !important; /* Standard padding */
		border: none !important; /* Reset default borders */
		border-right: none !important;
		border-left: none !important;
	}

	/* Label (Atas) */
	body .sertifikat-detail-table th,
	body .sertifikat-detail-table tr th {
		background-color: transparent !important;
		color: #111 !important;
		font-weight: 700 !important;
		text-transform: uppercase !important;
		letter-spacing: 0.5px !important;
		font-size: 12px !important;
		padding-top: 20px !important;
		padding-bottom: 5px !important; /* Close to value */
		border-top: 1px solid #e5e7eb !important; /* Divider above label */
	}

	/* First label top border remove if needed, but grid usually has it */
	body .sertifikat-detail-table tr:first-child th {
		border-top: none !important; /* Optional: if container has border */
	}

	/* Value (Bawah) */
	body .sertifikat-detail-table td,
	body .sertifikat-detail-table tr td {
		color: #333 !important;
		font-size: 15px !important;
		padding-top: 0 !important;
		padding-bottom: 20px !important;
		border-bottom: none !important; /* Remove cell border, use label top border as divider */
	}

	/* Last row value spacing */
	body .sertifikat-detail-table tr:last-child td {
		padding-bottom: 20px !important;
		border-bottom: none !important;
	}
}

/* Reset Elementor Margins - Super High Specificity */
body .sertifikat-detail-table p,
body .sertifikat-detail-table ul,
body .sertifikat-detail-table ol,
body .sertifikat-detail-table li,
body .sertifikat-detail-table td p,
body .sertifikat-detail-table * {
	margin-block-end: 0 !important;
	margin-bottom: 0 !important;
}

/* Download Button */
.sertifikat-download-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 12px 24px !important;
	background-color: #2a2d44 !important; /* Dark color */
	color: #fff !important;
	text-decoration: none !important;
	border-radius: 50px !important; /* Pill shape like Search Button */
	font-size: 14px !important;
	font-weight: 600 !important;
	transition: all 0.2s !important;
	float: left !important; /* Align left */
	margin-top: 0 !important; /* Remove top margin */
}

.sertifikat-download-btn:hover {
	background-color: #d99b12 !important; /* Orange hover like Search Button */
	color: #fff !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 12px rgba(217, 155, 18, 0.3) !important;
}

.sertifikat-download-icon {
	width: 16px !important;
	height: 16px !important;
	filter: brightness(0) invert(1) !important; /* Make white */
}

.sertifikat-notfound {
	color: #2a2d44 !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	margin: 0 !important;
}

/* Disclaimer Text */
.sertifikat-disclaimer {
	text-align: left !important;
	font-size: 13px !important;
	color: #df4444 !important; /* Warning red */
	margin-top: 20px !important;
	font-style: italic !important;
	clear: both !important; /* Ensure it clears the float left button */
	padding-top: 20px !important;
}